/* ============================================================
   minions·16k — components
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;overflow-x:clip} /* clip h-scroll on the root, not body, so the sticky header keeps working */
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.5;
  font-weight:var(--fw-reg);letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--denim);text-decoration:none}
a:hover{color:var(--denim-hi,var(--denim))}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.cap{font-size:var(--fs-xs);font-weight:var(--fw-semi);text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--text-dim)}
.dim{color:var(--text-dim)}.mute{color:var(--text-mute)}.hi{color:var(--text-hi)}
.green{color:var(--green)}.red{color:var(--red)}.yellow{color:var(--accent)}.cyan{color:var(--cyan)}
.row{display:flex;align-items:center;gap:var(--s2)}
.spacer{flex:1}
.hidden{display:none !important}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:8px;top:-60px;z-index:var(--z-toast);background:var(--accent);color:var(--ink);padding:8px 14px;border-radius:var(--r-sm);font-weight:var(--fw-semi);transition:top var(--t-base)}
.skip-link:focus{top:8px;color:var(--ink)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .skel{animation:none;background:var(--panel-2)}
}
::selection{background:var(--accent-soft);color:var(--text-hi)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--panel-3);border-radius:var(--r-pill);border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--line-hi)}

/* ---------- backdrop ---------- */
.backdrop{position:fixed;inset:0;z-index:-1;background:var(--bg);overflow:hidden;pointer-events:none}
.backdrop .moon{position:absolute;top:-12%;right:-6%;width:46vmax;height:46vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(254,243,199,.06),rgba(254,243,199,.02) 38%,transparent 62%)}
.backdrop .grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 70% 18%,rgba(0,0,0,.18),transparent 70%)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:var(--z-bar);height:var(--bar-h);display:flex;align-items:center;gap:var(--s4);
  padding:0 var(--s5);background:rgba(13,13,12,.78);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;font-family:var(--font-mono);font-weight:var(--fw-med);
  font-size:var(--fs-lg);color:var(--text-hi);letter-spacing:.01em;white-space:nowrap;text-decoration:none}
.brand .gif{height:26px;width:auto;margin:0 1px;border-radius:5px;display:inline-block;vertical-align:middle;
  transition:opacity var(--t-fast)}
.brand:hover .gif{opacity:.82}
.brand .suffix{color:var(--accent)}
.nav{display:flex;gap:var(--s1);margin-left:var(--s3)}
.nav a{position:relative;padding:var(--s2) var(--s3);color:var(--text-dim);font-weight:var(--fw-med);border-radius:var(--r-sm)}
.nav a:hover{color:var(--text);background:var(--panel-2)}
.nav a.active{color:var(--text-hi)}
.nav a.active::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:2px;height:2px;background:var(--accent);border-radius:2px}
.searchpill{margin:0 auto;width:min(420px,38vw);height:34px;display:flex;align-items:center;gap:var(--s2);
  padding:0 var(--s3);background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--text-mute);cursor:text;transition:border-color var(--t-fast)}
.searchpill:hover{border-color:var(--line-hi)}
.searchpill kbd{margin-left:auto}
kbd{font-family:var(--font-mono);font-size:var(--fs-2xs);background:var(--panel-3);color:var(--text-dim);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r-xs);padding:1px 5px;line-height:1.4}
.countchip{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-dim);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap}
.countchip .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:34px;padding:0 var(--s3);
  font:inherit;font-weight:var(--fw-med);color:var(--text);background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.btn:hover{background:var(--panel-3);border-color:var(--line-hi);color:var(--text-hi)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:var(--fw-semi)}
.btn.primary:hover{background:var(--accent-press);border-color:var(--accent-press)}
.btn.ghost{background:transparent}
.btn.icon{width:34px;padding:0}
.btn.sm{height:28px;font-size:var(--fs-md)}
.btn[disabled]{opacity:.45;pointer-events:none}
.seg{display:inline-flex;background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px}
.seg button{height:28px;padding:0 var(--s3);font:inherit;font-size:var(--fs-md);color:var(--text-dim);background:transparent;
  border:0;border-radius:var(--r-xs);cursor:pointer;font-weight:var(--fw-med);transition:color var(--t-fast),background var(--t-fast)}
.seg button:hover{color:var(--text)}
.seg button.active{background:var(--panel-3);color:var(--accent)}

/* ---------- inputs / chips ---------- */
.input{height:34px;padding:0 var(--s3);background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text-hi);font:inherit;width:100%}
.input::placeholder{color:var(--text-mute)}
.input:focus{border-color:var(--line-hi)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 var(--s2) 0 var(--s3);background:var(--accent-soft);
  border:1px solid rgba(255,216,77,.25);color:var(--accent);border-radius:var(--r-pill);font-size:var(--fs-md);font-weight:var(--fw-med)}
.chip button{background:none;border:0;color:inherit;cursor:pointer;font-size:14px;line-height:1;opacity:.7;padding:0 2px}
.chip button:hover{opacity:1}

/* ---------- page scaffolds ---------- */
.page{max-width:var(--content-max);margin:0 auto;padding:var(--s6) var(--s5)}
.explorer{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:var(--s6);max-width:var(--content-max);
  margin:0 auto;padding:var(--s5)}

/* ---------- filter rail ---------- */
.rail{position:sticky;top:calc(var(--bar-h) + var(--s5));align-self:start;max-height:calc(100vh - var(--bar-h) - var(--s8));
  overflow:auto;padding-right:var(--s1)}
.fgroup{border-bottom:1px solid var(--line);padding:var(--s3) 0}
.fgroup:first-child{padding-top:0}
.fgroup>h3{margin:0 0 var(--s2);font-size:var(--fs-xs);font-weight:var(--fw-semi);text-transform:uppercase;
  letter-spacing:var(--track-cap);color:var(--text-dim)}
.fval{display:flex;align-items:center;gap:var(--s2);width:100%;padding:5px var(--s2);border-radius:var(--r-sm);
  background:none;border:0;color:var(--text);font:inherit;cursor:pointer;text-align:left;transition:background var(--t-fast)}
.fval:hover{background:var(--panel-2)}
.fval.on{background:var(--panel-3);color:var(--text-hi)}
.fval .n{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-mute)}
.fval .box{width:13px;height:13px;border:1px solid var(--line-hi);border-radius:3px;flex:none;display:grid;place-items:center}
.fval.on .box{background:var(--accent);border-color:var(--accent)}
.fval.on .box::after{content:"✓";color:var(--ink);font-size:10px;font-weight:900}
.swatch{width:9px;height:9px;border-radius:2px;flex:none}

/* ---------- results toolbar ---------- */
.toolbar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.toolbar .count{font-family:var(--font-mono);font-size:var(--fs-md);color:var(--text-dim)}
.toolbar .count b{color:var(--text-hi)}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}

/* ---------- match cards (virtualized grid) ---------- */
.grid-wrap{position:relative}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--s3)}
.card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit;padding:0;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.card:hover{background:var(--panel-2);border-color:var(--line-hi);transform:translateY(-2px);box-shadow:var(--sh-2)}
.card .qedge{position:absolute;left:0;top:0;bottom:0;width:3px;transition:width var(--t-fast)}
.card:hover .qedge{width:5px}
.card.you{box-shadow:inset 2px 0 0 var(--cyan)}
.chead{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s3) var(--s2) calc(var(--s3) + 3px);
  border-bottom:1px solid var(--line)}
.chead .id{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-mute)}
.chead .map{font-size:var(--fs-2xs);font-weight:var(--fw-semi);text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--text-dim)}
.chead .when{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-dim)}
.chead .star{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--accent);display:flex;align-items:center;gap:3px}
.chead .dur{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-dim)}
.crows{padding:var(--s2) var(--s3) var(--s2) calc(var(--s3) + 3px);display:flex;flex-direction:column;gap:3px;flex:1}
.prow{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:var(--s2);padding:3px 6px;border-radius:var(--r-xs);position:relative;overflow:hidden}
.prow .kshare{position:absolute;left:0;top:0;bottom:0;opacity:.13;z-index:0}
.prow.win{background:var(--accent-soft)}
.prow>*{position:relative;z-index:1}
.prow .pdot{width:9px;height:9px;border-radius:2px}
.prow .pname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--fw-med);color:var(--text-hi)}
.prow .pkd{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-dim)}
.prow .pkd b{color:var(--text-hi)}
.crest{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3) var(--s3) calc(var(--s3) + 3px);
  border-top:1px solid var(--line);margin-top:auto}
.crest .more{font-size:var(--fs-sm);color:var(--text-dim)}
.crest .spark{display:flex;align-items:flex-end;gap:1px;height:16px;flex:1}
.crest .spark i{width:3px;background:var(--cyan);opacity:.55;border-radius:1px;min-height:1px}
.crest .watch{margin-left:auto;opacity:0;transition:opacity var(--t-fast)}
.card:hover .crest .watch{opacity:1}
.youtag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--r-xs);background:var(--cyan-soft);
  color:var(--cyan);font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:var(--fw-semi)}

/* ---------- list mode ---------- */
.lhead,.lrow{display:grid;grid-template-columns:6px 92px 1fr 1fr 88px 44px 64px 56px 96px 40px;align-items:center;gap:var(--s2)}
.lhead{padding:0 var(--s3) var(--s2);position:sticky;top:0}
.lhead span{font-size:var(--fs-2xs);font-weight:var(--fw-semi);text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--text-mute)}
.lrow{height:38px;padding:0 var(--s3);border-bottom:1px solid var(--line);cursor:pointer;font-size:var(--fs-md)}
.lrow:hover{background:var(--panel-2)}
.lrow .qb{width:4px;height:22px;border-radius:2px}

/* ---------- skeleton / empty ---------- */
.skel{background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 50%,var(--panel) 75%);background-size:200% 100%;
  animation:shimmer 1.2s infinite;border-radius:var(--r-md);height:148px}
@keyframes shimmer{to{background-position:-200% 0}}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s16) var(--s4);
  color:var(--text-dim);text-align:center}
.empty .big{font-size:48px;filter:grayscale(.2)}
.empty h2{margin:0;color:var(--text);font-size:var(--fs-xl);font-weight:var(--fw-semi)}

/* ---------- command palette ---------- */
.cmdk-bg{position:fixed;inset:0;z-index:var(--z-cmdk);background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding-top:14vh}
.cmdk{width:min(640px,92vw);background:var(--panel);border:1px solid var(--line-hi);border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);overflow:hidden;animation:pop var(--t-base) var(--ease-out)}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(-6px)}to{opacity:1;transform:none}}
.cmdk input{width:100%;height:52px;padding:0 var(--s5);background:none;border:0;border-bottom:1px solid var(--line);
  color:var(--text-hi);font:inherit;font-size:var(--fs-lg)}
.cmdk input:focus{outline:none}
.cmdk-list{max-height:48vh;overflow:auto;padding:var(--s2)}
.cmdk-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-sm);cursor:pointer}
.cmdk-item .k{font-size:var(--fs-2xs);color:var(--text-mute);text-transform:uppercase;letter-spacing:var(--track-cap)}
.cmdk-item .t{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cmdk-item .meta{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-mute)}
.cmdk-item.sel{background:var(--panel-3)}
.cmdk-item.sel .t{color:var(--text-hi)}
.cmdk-empty{padding:var(--s5);color:var(--text-mute);text-align:center}

/* ---------- toast ---------- */
.toasts{position:fixed;right:var(--s5);bottom:var(--s5);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--s2)}
.toast{background:var(--panel);border:1px solid var(--line-hi);border-radius:var(--r-sm);padding:var(--s2) var(--s3);
  color:var(--text-hi);box-shadow:var(--sh-pop);animation:slidein var(--t-slow) var(--ease-out)}
@keyframes slidein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   VIEWER
   ============================================================ */
/* The viewer is a fixed full-screen cockpit — never let the page scroll (that
   would push the top bar off-screen; internal panels scroll on their own). */
body[data-page="viewer"]{overflow:hidden;height:100vh}
.viewer{height:100vh;display:grid;grid-template-rows:var(--bar-h) minmax(0,1fr) var(--transport-h);
  grid-template-columns:minmax(0,1fr) var(--dock-w)}
.vbar{grid-column:1/3;display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4);border-bottom:1px solid var(--line);
  background:rgba(13,13,12,.8);backdrop-filter:blur(10px)}
.vbar .title{font-weight:var(--fw-semi);color:var(--text-hi)}
.vbar .sub{color:var(--text-dim);font-size:var(--fs-md)}
.stage{position:relative;background:var(--bg-sunk);overflow:hidden;min-width:0;min-height:0}
.stage canvas{display:block;width:100%;height:100%}
.dock{grid-row:2;grid-column:2;border-left:1px solid var(--line);background:var(--panel);display:grid;
  grid-template-rows:auto minmax(0,1.1fr) auto minmax(0,1fr);min-height:0}
.dock h2{margin:0;padding:var(--s3) var(--s3) var(--s2);font-size:var(--fs-xs);font-weight:var(--fw-semi);
  text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--text-dim);display:flex;align-items:center;gap:var(--s2)}
.dock h2 .spacer{flex:1}
.scoreboard{overflow:auto;padding:0 var(--s2) var(--s2)}
.sb-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--s2);
  padding:6px var(--s2) 6px var(--s3);border-radius:var(--r-sm);position:relative;cursor:pointer;transition:background var(--t-fast)}
.sb-row .band{position:absolute;left:2px;top:7px;bottom:7px;width:3px;border-radius:2px}
.sb-row:hover{background:var(--panel-2)}
.sb-row.focus{background:var(--panel-3);box-shadow:inset 2px 0 0 var(--accent)}
.sb-row.dead{opacity:.55}
.sb-row .nm{display:flex;align-items:center;gap:6px;min-width:0}
.sb-row .pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--fw-med);color:var(--text-hi)}
.sb-row .kd{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-dim);text-align:right;white-space:nowrap}
.sb-row .kd b{color:var(--text-hi)}
.sb-hp{grid-column:1/3;height:4px;border-radius:2px;background:var(--bg-sunk);overflow:hidden;margin-top:5px}
.sb-hp i{display:block;height:100%;background:var(--green);transition:width var(--t-base) linear,background var(--t-base)}
.feed{overflow:auto;padding:0 var(--s3) var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.feed .ev{display:flex;align-items:center;gap:6px;font-size:var(--fs-md);padding:4px 0;animation:feedin var(--t-base) var(--ease-out)}
@keyframes feedin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.feed .ev .t{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-mute);margin-left:auto}
.feed .ev .strike{text-decoration:line-through;opacity:.85}

/* on-canvas HUD */
.hud{position:absolute;pointer-events:none;z-index:var(--z-hud)}
.hud.clock{top:var(--s3);left:var(--s3);background:var(--glass);backdrop-filter:blur(8px);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s2) var(--s3);display:flex;align-items:center;gap:var(--s3)}
.hud.clock .c{font-family:var(--font-mono);font-size:var(--fs-xl);color:var(--text-hi);font-weight:var(--fw-semi)}
.hud.clock .sc{font-family:var(--font-mono);color:var(--text-dim)}
.hud.cams{top:var(--s3);left:50%;transform:translateX(-50%);transition:opacity var(--t-slow)}
.hud.cams .seg{pointer-events:auto}
.hud.freehint{bottom:var(--s4);left:50%;transform:translateX(-50%);background:var(--glass);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;color:var(--text-dim);font-size:var(--fs-sm)}
.minimap{position:absolute;top:var(--s3);right:var(--s3);z-index:var(--z-hud);width:190px;background:var(--glass);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s2)}
.minimap canvas{display:block;width:100%;height:auto;border-radius:var(--r-sm)}
.crosshair{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;z-index:var(--z-hud);
  border-left:2px solid rgba(255,216,77,.85);border-top:2px solid rgba(255,216,77,.85);transform:rotate(45deg);opacity:.7;pointer-events:none}
.loadcard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  background:var(--bg-sunk);z-index:var(--z-overlay);color:var(--text-dim)}
.iris{width:54px;height:54px;border-radius:50%;border:4px solid var(--panel-3);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* transport */
.transport{grid-column:1/3;grid-row:3;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--s2) var(--s4);
  border-top:1px solid var(--line);background:var(--panel)}
.timeline{position:relative;height:22px;display:flex;align-items:center}
.tl-track{position:relative;flex:1;height:6px;background:var(--bg-sunk);border-radius:var(--r-pill);cursor:pointer}
.tl-load{position:absolute;left:0;top:0;bottom:0;background:var(--panel-3);border-radius:var(--r-pill)}
.tl-fill{position:absolute;left:0;top:0;bottom:0;background:var(--cyan);border-radius:var(--r-pill)}
.tl-handle{position:absolute;top:50%;width:13px;height:13px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,216,77,.2);pointer-events:none}
.tl-marks{position:absolute;left:0;right:0;top:-7px;height:7px;pointer-events:none}
.tl-mark{position:absolute;width:0;height:0;transform:translateX(-3px);border-left:3px solid transparent;border-right:3px solid transparent;border-top:6px solid var(--red)}
.tl-mark.self{border-top-color:var(--green)}
/* powerups: a square (not a triangle) so the marker type isn't color-only */
.tl-mark.pup{width:5px;height:5px;border:0;background:var(--purple);transform:translateX(-2px) rotate(45deg)}
.controls{display:flex;align-items:center;gap:var(--s3)}
.controls .tc{font-family:var(--font-mono);font-size:var(--fs-md);color:var(--text-dim);white-space:nowrap}
.controls .tc b{color:var(--text-hi)}

/* ============================================================
   STATS
   ============================================================ */
.scopebar{position:sticky;top:var(--bar-h);z-index:calc(var(--z-bar) - 1);display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s5);background:rgba(13,13,12,.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3);margin-bottom:var(--s6)}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4)}
.tile .k{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--text-dim);font-weight:var(--fw-semi)}
.tile .v{font-family:var(--font-mono);font-size:var(--fs-display);color:var(--text-hi);font-weight:var(--fw-semi);margin-top:6px}
.tile .v small{font-size:var(--fs-base);color:var(--text-dim)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s6)}
.panel>h2{margin:0 0 var(--s4);font-size:var(--fs-lg);color:var(--text-hi);font-weight:var(--fw-semi);display:flex;align-items:center;gap:var(--s3)}
.cols{display:grid;gap:var(--s6)}
@media(min-width:1080px){.cols.two{grid-template-columns:1.3fr 1fr}}

/* leaderboard table */
table.lb{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
table.lb th{position:sticky;top:0;background:var(--panel);text-align:right;padding:var(--s2) var(--s3);font-size:var(--fs-2xs);
  text-transform:uppercase;letter-spacing:var(--track-cap);color:var(--text-mute);font-weight:var(--fw-semi);cursor:pointer;border-bottom:1px solid var(--line)}
table.lb th:nth-child(2){text-align:left}
table.lb td{padding:var(--s2) var(--s3);text-align:right;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
table.lb td:nth-child(2){text-align:left;font-family:var(--font-sans);color:var(--text-hi);font-weight:var(--fw-med)}
table.lb tr:hover td{background:var(--panel-2)}
table.lb .rk{color:var(--text-dim)}
table.lb .rk.g{color:var(--accent)}.table .rk.s{color:var(--silver)}
.form{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.form i{width:4px;border-radius:1px}
.form i.w{background:var(--green)}.form i.l{background:var(--red)}

/* heatmap */
.heatwrap{position:relative;background:var(--bg-sunk);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.heatwrap canvas{display:block;width:100%;height:auto}
.heatwrap .floorplan{position:absolute;inset:0;z-index:1;pointer-events:none}
.heatwrap .heatlayer{position:relative;z-index:2}
.heat-side{display:flex;flex-direction:column;gap:var(--s4)}
.legend{height:10px;border-radius:var(--r-pill);background:linear-gradient(90deg,#0a0a09,var(--cyan))}
.bars{display:flex;flex-direction:column;gap:6px}
.bar{display:grid;grid-template-columns:96px 1fr 52px;align-items:center;gap:var(--s2);font-size:var(--fs-md)}
.bar .track{height:8px;background:var(--bg-sunk);border-radius:var(--r-pill);overflow:hidden}
.bar .track i{display:block;height:100%;background:var(--cyan);border-radius:var(--r-pill)}
.bar .val{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-dim);text-align:right}

/* responsive */
.filteronly{display:none}
@media(max-width:1024px){
  .explorer{grid-template-columns:1fr}
  .filteronly{display:inline-flex}
  .rail{position:static;max-height:none;border-bottom:1px solid var(--line);padding-bottom:var(--s3);margin-bottom:var(--s3);display:none}
  .rail.open{display:block}
  .viewer{grid-template-columns:1fr;grid-template-rows:var(--bar-h) minmax(0,1fr) auto var(--transport-h)}
  .dock{grid-row:3;grid-column:1;border-left:0;border-top:1px solid var(--line);grid-template-rows:auto auto;max-height:38vh}
  .transport{grid-row:4}
  .minimap{width:140px}
}
@media(max-width:640px){
  .searchpill{display:none}.nav{margin-left:0}
  .cards{grid-template-columns:1fr}
  .page,.explorer{padding:var(--s3)}
}