:root{
  --home-ink:#020308;
  --home-navy:#060a16;
  --home-navy-raised:#0b1020;
  --home-royal-blue:#1f5bd8;
  --home-electric-blue:#3978ff;
  --home-silver:#d6d8dd;
  --home-muted:#969ba5;
  --home-orange:#ff7100;
}

.home-utility-bar{
  position:absolute;
  z-index:3;
  top:clamp(18px,2.6vh,34px);
  left:clamp(18px,2.3vw,42px);
  right:clamp(18px,2.3vw,42px);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  pointer-events:none;
}

.home-command-btn,.cgh-brand{
  position:relative;
  border:1px solid rgba(214,216,221,.66);
  color:#f4f4f6;
  background:
    linear-gradient(180deg,rgba(16,19,27,.97),rgba(3,4,9,.98)),
    var(--home-ink);
  box-shadow:
    0 15px 34px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 10px 20px rgba(31,91,216,.08);
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));
  pointer-events:auto;
}

.home-command-btn::before,.cgh-brand::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(214,216,221,.24);
  clip-path:inherit;
  pointer-events:none;
}

.home-command-btn{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:"icon copy" "icon count";
  align-items:center;
  column-gap:12px;
  min-width:250px;
  min-height:68px;
  padding:12px 23px 11px 18px;
  text-align:left;
  text-transform:uppercase;
  cursor:pointer;
}

.home-command-icon{
  grid-area:icon;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(214,216,221,.62);
  color:#fff;
  background:radial-gradient(circle,rgba(31,91,216,.34),rgba(6,10,22,.78) 70%);
  box-shadow:0 0 18px rgba(31,91,216,.23),inset 0 0 12px rgba(57,120,255,.12);
  font-size:17px;
  transform:rotate(45deg);
}

.home-command-icon::first-letter{transform:rotate(-45deg)}
.home-command-copy{
  grid-area:copy;
  align-self:end;
  font-size:clamp(15px,1.03vw,19px);
  font-weight:600;
  letter-spacing:.18em;
  text-indent:.18em;
  line-height:1.1;
  text-shadow:0 0 15px rgba(255,255,255,.18);
}

.home-command-count{
  grid-area:count;
  align-self:start;
  margin-top:4px;
  color:#a8abb3;
  font-size:12px;
  font-weight:700;
  letter-spacing:.17em;
}

.home-command-btn:hover,.home-command-btn:focus-visible{
  border-color:#fff;
  outline:2px solid rgba(57,120,255,.68);
  outline-offset:3px;
  color:#fff;
  box-shadow:0 0 28px rgba(31,91,216,.26),0 16px 36px rgba(0,0,0,.62),inset 0 0 24px rgba(31,91,216,.16);
}

.cgh-brand{
  display:block;
  width:clamp(242px,18.5vw,302px);
  min-height:0;
  overflow:hidden;
  padding:0;
  background:#fff;
  text-decoration:none;
}

.cgh-brand:hover,.cgh-brand:focus-visible{
  border-color:#fff;
  outline:2px solid rgba(57,120,255,.68);
  outline-offset:3px;
  box-shadow:0 0 28px rgba(31,91,216,.24),0 16px 36px rgba(0,0,0,.62);
}

.cgh-approved-logo{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
}

.achievements-modal[hidden]{display:none}
.achievements-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:clamp(18px,3vw,44px);
  user-select:text;
}

.achievements-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,3,.88);
  backdrop-filter:blur(8px) saturate(.55);
}

.achievements-panel{
  position:relative;
  width:min(1180px,96vw);
  max-height:min(88vh,920px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(214,216,221,.64);
  color:#f1f1f3;
  background:
    linear-gradient(135deg,rgba(31,91,216,.10),transparent 28%),
    linear-gradient(180deg,rgba(10,13,24,.99),rgba(2,3,8,.995));
  box-shadow:0 30px 100px rgba(0,0,0,.84),0 0 38px rgba(31,91,216,.14),inset 0 0 0 1px rgba(255,255,255,.07);
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));
}

.achievements-panel::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:6px;
  border:1px solid rgba(214,216,221,.20);
  clip-path:inherit;
  pointer-events:none;
}

.achievements-header{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:clamp(22px,2.5vw,34px) clamp(22px,3vw,42px) 19px;
  border-bottom:1px solid rgba(214,216,221,.18);
  background:linear-gradient(90deg,rgba(18,22,35,.84),rgba(4,5,10,.24));
}

.achievements-kicker{
  margin-bottom:7px;
  color:#aeb2bc;
  font-size:12px;
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase;
}

.achievements-header h2{
  margin:0;
  font-size:clamp(28px,3vw,46px);
  font-weight:350;
  line-height:1;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  text-shadow:0 0 22px rgba(255,255,255,.16);
}

.achievements-close{
  position:relative;
  z-index:2;
  width:52px;
  height:52px;
  flex:0 0 52px;
  border:1px solid rgba(214,216,221,.48);
  color:#f1f1f3;
  background:rgba(5,7,14,.82);
  font-size:34px;
  font-weight:200;
  line-height:1;
  cursor:pointer;
}

.achievements-close:hover,.achievements-close:focus-visible{
  border-color:#fff;
  outline:2px solid rgba(57,120,255,.64);
  outline-offset:2px;
  background:rgba(18,31,68,.88);
}

.achievements-progress-wrap{
  position:relative;
  z-index:1;
  padding:18px clamp(22px,3vw,42px) 20px;
  border-bottom:1px solid rgba(214,216,221,.15);
}

.achievements-progress-copy{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:9px;
  color:#a7aab1;
  font-size:14px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.achievements-progress-copy strong{color:#f5f5f6;font-size:17px}
.achievements-progress{
  height:10px;
  overflow:hidden;
  border:1px solid rgba(214,216,221,.25);
  background:#010207;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.85);
}

.achievements-progress span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#163a8c,#2463e8 72%,#d7d9df);
  box-shadow:0 0 17px rgba(31,91,216,.55);
  transition:width 260ms ease;
}

.achievements-list{
  position:relative;
  z-index:1;
  min-height:0;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:20px clamp(22px,3vw,42px) clamp(28px,3vw,42px);
  scrollbar-color:#2456b8 #04050a;
  scrollbar-width:thin;
}

.achievement-card{
  position:relative;
  min-height:112px;
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  align-items:start;
  gap:15px;
  padding:18px 18px 17px;
  border:1px solid rgba(214,216,221,.20);
  background:linear-gradient(135deg,rgba(18,21,31,.86),rgba(5,6,12,.88));
  box-shadow:inset 3px 0 0 rgba(150,153,162,.35);
}

.achievement-card.unlocked{
  border-color:rgba(57,120,255,.64);
  background:linear-gradient(135deg,rgba(18,32,68,.90),rgba(4,6,15,.88));
  box-shadow:inset 3px 0 0 var(--home-royal-blue),0 0 19px rgba(31,91,216,.12);
}

.achievement-number{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(214,216,221,.31);
  color:#8f929a;
  background:rgba(2,3,8,.76);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  transform:rotate(45deg);
}

.achievement-number span{transform:rotate(-45deg)}
.achievement-card.unlocked .achievement-number{border-color:rgba(111,153,255,.78);color:#f2f2f4;box-shadow:0 0 16px rgba(31,91,216,.30)}
.achievement-copy{min-width:0}
.achievement-title{
  margin:0;
  color:#f0f0f2;
  font-size:18px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.achievement-description{
  margin:8px 0 0;
  color:#a0a2a8;
  font-size:15px;
  line-height:1.4;
}

.achievement-state{
  align-self:start;
  padding:5px 7px;
  border:1px solid rgba(214,216,221,.23);
  color:#898c94;
  background:rgba(2,3,8,.64);
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.achievement-card.unlocked .achievement-state{border-color:rgba(57,120,255,.52);color:#cfd9ff;background:rgba(20,52,126,.34)}
.achievement-card.secret:not(.unlocked) .achievement-title{letter-spacing:.16em}
.achievement-card.secret:not(.unlocked) .achievement-description{font-style:italic;color:#777a82}

@media(max-width:780px){
  .home-utility-bar{top:12px;left:12px;right:12px;gap:10px}
  .home-command-btn{min-width:0;padding:10px 12px;column-gap:9px}
  .home-command-icon{width:32px;height:32px;font-size:13px}
  .home-command-copy{font-size:12px;letter-spacing:.11em}
  .home-command-count{font-size:10px}
  .cgh-brand{width:clamp(138px,42vw,190px);min-width:0}
  .achievements-modal{padding:10px}
  .achievements-panel{max-height:94vh;width:100%}
  .achievements-list{grid-template-columns:1fr;padding:14px}
  .achievements-header{padding:19px 17px 15px}
  .achievements-header h2{font-size:23px;letter-spacing:.13em;text-indent:.13em}
  .achievements-progress-wrap{padding:15px 17px 17px}
  .achievement-card{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:15px}
  .achievement-number{width:36px;height:36px}
  .achievement-state{grid-column:2;margin-top:-2px}
}

@media(prefers-reduced-motion:reduce){
  .achievements-progress span{transition:none}
}
