/* ===========================================================================
   GATEWOOD RP — advanced UI layer.
   Loaded after style.css. Everything the second build added lives here so the
   original stylesheet stays readable.
     10 mega nav + live pill · 11 command palette · 12 status dashboard
     13 interactive map · 14 quiz · 15 progress + toasts · 16 misc polish
   =========================================================================== */

/* ── 10. Mega nav ────────────────────────────────────────────────────────── */
.nav__group{ position:relative; }
.nav__trigger{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  font-family:var(--f-head); font-size:.84rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-dim); padding:.55rem .68rem; border-radius:8px;
  background:none; border:0; transition:color .18s ease, background .18s ease;
}
.nav__trigger:hover,.nav__group.is-open .nav__trigger{ color:#fff; background:rgba(255,255,255,.05); }
.nav__trigger::after{
  content:""; width:5px; height:5px; margin-top:-3px; flex:0 0 auto;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .22s ease;
}
.nav__group.is-open .nav__trigger::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.nav__trigger.is-active{ color:#fff; }

/* right-aligned to the trigger: the nav sits on the right of the bar, so a
   centred dropdown would hang off the edge of the viewport */
.mega{
  position:absolute; top:calc(100% + 12px); right:0; left:auto; z-index:90;
  width:max(320px,100%); padding:.55rem; border-radius:16px;
  background:rgba(8,12,22,.97); border:1px solid var(--line);
  box-shadow:0 30px 70px -24px #000, inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.2s ease;
}
.nav__group.is-open .mega{ opacity:1; visibility:visible; transform:none; }
.mega::before{
  content:""; position:absolute; top:-6px; right:34px; width:12px; height:12px; rotate:45deg;
  background:rgba(8,12,22,.97); border-left:1px solid var(--line); border-top:1px solid var(--line);
}
.mega__item{
  display:flex; gap:.85rem; align-items:flex-start; padding:.7rem .8rem; border-radius:11px;
  color:var(--text); position:relative;
}
.mega__item:hover{ background:rgba(255,255,255,.06); color:var(--text); }
.mega__item.is-active{ background:rgba(212,175,55,.1); }
.mega__ico{
  width:34px; height:34px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; font-size:1rem;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.03)); border:1px solid var(--line);
}
.mega__t{ font-family:var(--f-head); font-size:.88rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; line-height:1.3; }
.mega__d{ font-size:.79rem; color:var(--text-faint); line-height:1.45; }

/* live player pill in the nav */
.livepill{
  display:none; align-items:center; gap:.5rem; margin-left:.5rem; padding:.4rem .75rem; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  font-family:var(--f-head); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim);
  white-space:nowrap;
}
.livepill.is-ready{ display:inline-flex; }
.livepill b{ color:#fff; }
.livepill__dot{ width:7px; height:7px; border-radius:50%; background:var(--text-faint); flex:0 0 auto; }
.livepill.is-online .livepill__dot{ background:#22c55e; animation:pulse 2.2s infinite; }
.livepill.is-offline .livepill__dot{ background:var(--red); }

/* Ctrl+K hint button */
.navsearch{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; margin-left:.4rem;
  padding:.45rem .7rem; border-radius:9px; background:rgba(255,255,255,.045);
  border:1px solid var(--line); color:var(--text-faint); font-family:var(--f-body); font-size:.78rem;
  transition:.18s ease;
}
.navsearch:hover{ color:#fff; border-color:rgba(212,175,55,.45); }
.navsearch kbd{
  font-family:var(--f-body); font-size:.68rem; padding:.1rem .35rem; border-radius:5px;
  background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--text-dim);
}

/* ── 11. Command palette ─────────────────────────────────────────────────── */
.cmdk{
  position:fixed; inset:0; z-index:200; display:grid; place-items:start center; padding:12vh 1.2rem 1.2rem;
  background:rgba(2,4,9,.72); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease;
}
.cmdk.is-open{ opacity:1; visibility:visible; }
.cmdk__box{
  width:min(100%,640px); border-radius:18px; overflow:hidden;
  background:rgba(10,15,26,.98); border:1px solid var(--line);
  box-shadow:0 40px 90px -30px #000; transform:translateY(-12px) scale(.98); transition:transform .2s ease;
}
.cmdk.is-open .cmdk__box{ transform:none; }
.cmdk__head{ display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line); }
.cmdk__head svg{ width:18px; height:18px; fill:var(--text-faint); flex:0 0 auto; }
.cmdk__input{
  flex:1; background:none; border:0; outline:none; color:var(--text);
  font-family:var(--f-body); font-size:1.02rem; min-width:0;
}
.cmdk__input::placeholder{ color:var(--text-faint); }
.cmdk__esc{
  font-size:.68rem; padding:.18rem .45rem; border-radius:6px; color:var(--text-faint);
  background:rgba(255,255,255,.06); border:1px solid var(--line); flex:0 0 auto;
}
.cmdk__list{ max-height:min(56vh,440px); overflow-y:auto; padding:.5rem; }
.cmdk__group{
  font-family:var(--f-head); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); padding:.7rem .8rem .35rem;
}
.cmdk__row{
  display:flex; gap:.85rem; align-items:center; padding:.65rem .8rem; border-radius:10px;
  color:var(--text); cursor:pointer;
}
.cmdk__row:hover,.cmdk__row.is-sel{ background:rgba(255,255,255,.07); color:var(--text); }
.cmdk__row.is-sel{ box-shadow:inset 2px 0 0 var(--gold); }
.cmdk__ico{ width:30px; height:30px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center; font-size:.95rem;
  background:rgba(255,255,255,.07); border:1px solid var(--line); }
.cmdk__t{ font-size:.94rem; color:#fff; line-height:1.35; }
.cmdk__d{ font-size:.78rem; color:var(--text-faint); line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.cmdk__t mark,.cmdk__d mark{ background:rgba(212,175,55,.28); color:#fff; border-radius:3px; padding:0 .1em; }
.cmdk__empty{ padding:2.2rem 1rem; text-align:center; color:var(--text-faint); font-size:.92rem; }
.cmdk__foot{
  display:flex; gap:1.2rem; padding:.7rem 1.2rem; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--text-faint); flex-wrap:wrap;
}
.cmdk__foot kbd{ font-family:var(--f-body); padding:.08rem .32rem; border-radius:5px; background:rgba(255,255,255,.07); border:1px solid var(--line); }

/* ── 12. Status dashboard ────────────────────────────────────────────────── */
.dash{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; }
.tile{
  position:relative; padding:1.5rem; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--line);
}
.tile::before{ content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,transparent,var(--accent,var(--gold)),transparent); opacity:.6; }
.tile__label{ font-family:var(--f-head); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-faint); }
.tile__value{ font-family:var(--f-display); font-size:clamp(2rem,4.4vw,2.9rem); line-height:1.05; margin:.4rem 0 .2rem; font-weight:400; }
.tile__sub{ font-size:.84rem; color:var(--text-dim); }

.bigstatus{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; padding:clamp(1.4rem,3vw,2.2rem);
  border-radius:calc(var(--radius) + 4px); border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(29,78,216,.18),rgba(139,92,246,.10) 55%,rgba(212,175,55,.10));
}
.bigstatus__orb{
  width:74px; height:74px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:rgba(255,255,255,.05); border:1px solid var(--line); position:relative;
}
.bigstatus__orb i{ width:20px; height:20px; border-radius:50%; background:var(--text-faint); display:block; }
.bigstatus.is-online .bigstatus__orb i{ background:#22c55e; box-shadow:0 0 24px 4px rgba(34,197,94,.55); animation:pulse 2.4s infinite; }
.bigstatus.is-offline .bigstatus__orb i{ background:var(--red); box-shadow:0 0 24px 4px rgba(239,68,68,.45); }
.bigstatus__txt h2{ margin:0 0 .2rem; font-size:clamp(1.3rem,3vw,1.9rem); text-transform:uppercase; letter-spacing:.04em; }
.bigstatus__txt p{ margin:0; color:var(--text-dim); }
.bigstatus__cta{ margin-left:auto; }

/* capacity bar */
.capacity{ margin-top:1.1rem; }
.capacity__track{ height:10px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; border:1px solid var(--line); }
.capacity__fill{
  height:100%; width:0%; border-radius:999px; transition:width .9s cubic-bezier(.2,.7,.3,1);
  background:linear-gradient(90deg,#22c55e,#4f9dff 55%,#d4af37);
  box-shadow:0 0 18px rgba(79,157,255,.5);
}
.capacity__meta{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--text-faint); margin-top:.5rem; font-family:var(--f-head); letter-spacing:.12em; text-transform:uppercase; }

/* 24h chart */
.chart{ position:relative; }
.chart svg{ width:100%; height:200px; display:block; overflow:visible; }
.chart__grid line{ stroke:rgba(255,255,255,.07); stroke-width:1; }
.chart__area{ fill:url(#chartFill); }
.chart__line{ fill:none; stroke:#4f9dff; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(79,157,255,.55)); }
.chart__dot{ fill:#d4af37; stroke:#04060c; stroke-width:2; }
.chart__lbl{ fill:var(--text-faint); font-family:var(--f-head); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.chart__empty{ padding:3rem 1rem; text-align:center; color:var(--text-faint); font-size:.9rem; }

/* restart countdown */
.clock{ display:flex; gap:.7rem; flex-wrap:wrap; }
.clock__unit{
  min-width:74px; padding:.85rem .6rem; border-radius:12px; text-align:center;
  background:rgba(0,0,0,.35); border:1px solid var(--line);
}
.clock__n{ font-family:var(--f-display); font-size:1.8rem; line-height:1; display:block; font-weight:400; font-variant-numeric:tabular-nums; }
.clock__l{ font-family:var(--f-head); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); }

/* ── 13. Interactive map ─────────────────────────────────────────────────── */
.mapwrap{
  position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 0%, rgba(29,78,216,.16), transparent 60%), rgba(4,7,14,.75);
}
.mapwrap svg{ width:100%; height:auto; display:block; touch-action:pan-y; }
.zone{ cursor:pointer; transition:opacity .2s ease, filter .2s ease; }
.zone__shape{ stroke:rgba(255,255,255,.22); stroke-width:1.5; transition:fill .25s ease, stroke .25s ease; }
.zone:hover .zone__shape,.zone.is-sel .zone__shape{ stroke:#fff; stroke-width:2.5; filter:brightness(1.5); }
.zone__name{
  fill:#fff; font-family:var(--f-head); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  pointer-events:none; paint-order:stroke; stroke:rgba(0,0,0,.75); stroke-width:3px; stroke-linejoin:round;
}
.zone__pin{ pointer-events:none; }
.map__legend{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.map__legend button{
  cursor:pointer; font-family:var(--f-head); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem .8rem; border-radius:999px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); color:var(--text-dim); transition:.18s ease;
}
.map__legend button:hover,.map__legend button.is-on{ color:#fff; border-color:var(--legend,var(--gold)); background:rgba(255,255,255,.1); }
.map__panel{
  border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); min-height:100%;
}
.map__panel h3{ font-size:1.2rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.2rem; }
.map__hint{ font-size:.8rem; color:var(--text-faint); font-family:var(--f-head); letter-spacing:.14em; text-transform:uppercase; }
.doc--map{ grid-template-columns:1fr 340px; }

/* ── 14. Quiz ────────────────────────────────────────────────────────────── */
.quiz{ border:1px solid var(--line); border-radius:calc(var(--radius) + 4px); overflow:hidden; background:rgba(255,255,255,.03); }
.quiz__bar{ height:4px; background:rgba(255,255,255,.07); }
.quiz__bar i{ display:block; height:100%; width:0; background:var(--gold-grad); transition:width .4s ease; }
.quiz__body{ padding:clamp(1.5rem,4vw,2.6rem); }
.quiz__meta{ font-family:var(--f-head); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:.8rem; }
.quiz__q{ font-family:var(--f-head); font-size:clamp(1.15rem,2.6vw,1.6rem); line-height:1.3; margin-bottom:1.5rem; color:#fff; }
.quiz__opts{ display:grid; gap:.7rem; }
.quiz__opt{
  display:flex; gap:.9rem; align-items:flex-start; text-align:left; width:100%; cursor:pointer;
  padding:1rem 1.15rem; border-radius:12px; color:var(--text); font-family:var(--f-body); font-size:.98rem; line-height:1.5;
  background:rgba(255,255,255,.04); border:1px solid var(--line); transition:.18s ease;
}
.quiz__opt:hover:not(:disabled){ border-color:rgba(212,175,55,.5); background:rgba(255,255,255,.07); transform:translateX(3px); }
.quiz__opt:disabled{ cursor:default; }
.quiz__opt b{
  width:26px; height:26px; flex:0 0 auto; border-radius:7px; display:grid; place-items:center;
  font-family:var(--f-head); font-size:.8rem; background:rgba(255,255,255,.08); border:1px solid var(--line);
}
.quiz__opt.is-right{ border-color:#22c55e; background:rgba(34,197,94,.14); }
.quiz__opt.is-right b{ background:#22c55e; color:#04220f; border-color:#22c55e; }
.quiz__opt.is-wrong{ border-color:var(--red); background:rgba(239,68,68,.13); }
.quiz__opt.is-wrong b{ background:var(--red); color:#2a0606; border-color:var(--red); }
.quiz__why{
  margin-top:1.2rem; padding:1rem 1.2rem; border-radius:12px; border-left:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(212,175,55,.1),transparent 70%); color:var(--text-dim); font-size:.94rem;
}
.quiz__why b{ color:#fff; }
.quiz__nav{ display:flex; gap:.8rem; align-items:center; margin-top:1.6rem; flex-wrap:wrap; }
.quiz__score{ margin-left:auto; font-family:var(--f-head); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }
.quiz__ring{ width:150px; height:150px; margin:0 auto 1.2rem; display:block; }
.quiz__ring circle{ fill:none; stroke-width:10; stroke-linecap:round; }
.quiz__ring .bg{ stroke:rgba(255,255,255,.08); }
.quiz__ring .fg{ stroke:url(#ringGrad); transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1); transform:rotate(-90deg); transform-origin:50% 50%; }
.quiz__pct{ font-family:var(--f-display); font-size:2rem; fill:#fff; font-weight:400; }

/* ── 15. Progress bar + toasts ───────────────────────────────────────────── */
.progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:120; pointer-events:none;
  background:linear-gradient(90deg,#4f9dff,#d4af37); box-shadow:0 0 12px rgba(212,175,55,.7);
  transition:width .1s linear;
}
.toasts{ position:fixed; left:50%; bottom:1.4rem; translate:-50% 0; z-index:210; display:grid; gap:.6rem; width:min(92vw,420px); }
.toast{
  display:flex; align-items:center; gap:.7rem; padding:.85rem 1.1rem; border-radius:12px;
  background:rgba(10,15,26,.97); border:1px solid var(--line); box-shadow:var(--shadow);
  font-size:.92rem; color:var(--text); animation:toastIn .3s cubic-bezier(.2,.7,.3,1);
}
.toast.is-out{ animation:toastOut .25s ease forwards; }
.toast b{ color:var(--gold); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(10px); } }

/* ── 16. Misc polish ─────────────────────────────────────────────────────── */
.counter{ font-variant-numeric:tabular-nums; }

/* marquee ticker */
.ticker{ overflow:hidden; border-block:1px solid var(--line-soft); background:rgba(255,255,255,.02); padding:.7rem 0; }
.ticker__track{ display:flex; gap:3rem; width:max-content; animation:slide 42s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker span{ font-family:var(--f-head); font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; }
.ticker span b{ color:var(--gold); }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* skeleton shimmer while live data loads */
.skel{ display:inline-block; min-width:2.5ch; border-radius:6px; color:transparent !important;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.14),rgba(255,255,255,.06));
  background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer{ to{ background-position:-200% 0; } }

/* discord widget card */
.dsc{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.dsc__icon{ width:58px; height:58px; border-radius:16px; border:1px solid var(--line); flex:0 0 auto; background:rgba(255,255,255,.05); }
.dsc__counts{ display:flex; gap:1.2rem; margin-top:.35rem; }
.dsc__counts div{ font-size:.82rem; color:var(--text-faint); font-family:var(--f-head); letter-spacing:.1em; text-transform:uppercase; }
.dsc__counts b{ display:block; font-family:var(--f-display); font-size:1.4rem; color:#fff; font-weight:400; line-height:1.1; }

@media (max-width:1080px){
  .doc--map{ grid-template-columns:1fr; }
}
@media (max-width:960px){
  .nav__group{ border-bottom:1px solid var(--line-soft); }
  .nav__trigger{ width:100%; justify-content:space-between; padding:.85rem .4rem; font-size:1rem; border-radius:0; }
  .mega{
    position:static; width:auto; translate:none; opacity:1; visibility:visible; transform:none;
    background:none; border:0; box-shadow:none; backdrop-filter:none; padding:0 0 .6rem;
    display:none;
  }
  .nav__group.is-open .mega{ display:block; }
  .mega::before{ display:none; }
  .navsearch{ display:none; }
  .livepill{ margin:.8rem 0 0; }
  .bigstatus__cta{ margin-left:0; width:100%; }
}
@media (max-width:560px){
  .cmdk{ padding:8vh .8rem .8rem; }
  .clock__unit{ min-width:64px; }
}