/* stats.css — the v2 dashboard look (stats, campaign-stats, explorer). Self-
   contained: these pages are plain server-rendered documents, not the arcade
   cabinet, so this sheet carries its own fonts + palette. Class names match the
   v1 markup — the pages keep their structure, only the chrome changed. */

@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/PressStart2P.woff2") format("woff2"),
       url("../../PressStart2P.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("../fonts/VT323.woff2") format("woff2"),
       url("../../VT323.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg:#0a0a12; --panel:#10101c; --ink:#d7e0e6;
  --cyan:#34d6e6; --mag:#e056c8; --grn:#46d36a; --blu:#5a8cff;
  --ylw:#ffd23f; --red:#ff4d56; --dim:#8796ab;
  --pixel:"Press Start 2P", ui-monospace, "Courier New", monospace;
  --mono:"VT323", ui-monospace, "Courier New", monospace;
}

* { box-sizing:border-box; }
html { background:#0a0a12; }
body {
  margin:0; padding:22px 16px 40px;
  background:
    radial-gradient(120% 90% at 50% -10%, #161630 0%, var(--bg) 60%);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--mono); font-size:17px; line-height:1.4;
  -webkit-font-smoothing:none;
}
/* page-level CRT wash (subtler than the game's — these are reading pages) */
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.10) 3px 5px);
  mix-blend-mode:multiply;
}

.wrap { width:min(1100px,100%); margin:0 auto; }

/* ── header band: scanline strip behind the pixel title ─────────────────── */
.dash-title {
  display:block; text-decoration:none; font-family:var(--pixel); color:var(--ylw);
  text-align:center; font-size:clamp(16px,4vw,28px);
  text-shadow:0 0 12px var(--ylw); margin:6px 0 4px; padding:18px 8px;
  background:
    repeating-linear-gradient(to bottom, rgba(52,214,230,.05) 0 2px, transparent 2px 4px),
    linear-gradient(rgba(52,214,230,.06), transparent 80%);
  border-top:2px solid rgba(52,214,230,.35);
  border-bottom:2px solid rgba(52,214,230,.35);
  border-radius:4px;
}
.dash-title:hover { filter:brightness(1.12); }
.sub { text-align:center; color:#9fb1c0; font-size:20px; margin:10px 0 8px; }
.switch { text-align:center; margin-bottom:20px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
/* the way back to the game — matches the in-game ‹ HOME corner */
.switch a.stats-home { color:var(--ylw); border-color:rgba(255,210,63,.5); font-family:var(--pixel); font-size:12px; padding:8px 14px; }
.switch a.stats-home:hover { background:rgba(255,210,63,.12); }
.switch a { color:var(--cyan); text-decoration:none; font-size:18px; border:1px solid rgba(52,214,230,.4); padding:6px 14px; border-radius:6px; }
.switch a:hover { background:rgba(52,214,230,.12); }

/* ── KPI tiles ───────────────────────────────────────────────────────────── */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:24px; }
.kpi {
  background:var(--panel); border:2px solid var(--cyan); border-radius:7px;
  padding:16px; text-align:center;
  box-shadow:0 0 14px rgba(52,214,230,.14), inset 0 0 22px rgba(0,0,0,.5);
}
.kpi .v { font-family:var(--pixel); color:var(--grn); font-size:26px; text-shadow:0 0 8px rgba(70,211,106,.5); }
.kpi .k { color:#9aabb8; font-size:17px; margin-top:10px; text-transform:uppercase; letter-spacing:1px; }

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:760px){ .grid2 { grid-template-columns:1fr; } }
.col1 { display:grid; grid-template-columns:1fr; gap:14px; }

/* ── cards: CRT-frame treatment ──────────────────────────────────────────── */
.card {
  background:var(--panel); border:2px solid #243240; border-radius:8px;
  padding:18px 20px; margin-bottom:16px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.45);
}
.card h3 { font-family:var(--pixel); font-size:15px; color:var(--cyan); margin:0 0 12px; text-shadow:0 0 8px rgba(52,214,230,.4); }
.card .qq { color:#aab8c4; font-size:20px; margin-bottom:14px; font-style:italic; }

/* ── bar rows (fills animate in; disabled under reduced motion) ──────────── */
.row { display:flex; align-items:center; gap:14px; margin:10px 0; font-size:23px; }
.row .rl { width:42%; min-width:175px; }
.row .rbar { flex:1; height:18px; background:#0a0f16; border:1px solid #243240; border-radius:3px; overflow:hidden; }
.row .rfill { display:block; height:100%; animation:barfill .7s ease-out backwards; box-shadow:0 0 8px rgba(52,214,230,.25); }
@keyframes barfill { from { width:0; } }
@media (prefers-reduced-motion: reduce){ .row .rfill { animation:none; } }
.row .rn { width:140px; text-align:right; color:var(--grn); font-size:22px; }
.row .rn i { color:#7d8c99; font-style:normal; font-size:18px; }

/* the Rot hunt (stages 11–15) — verified, registered-only rows */
.row.rot { background:rgba(255,82,119,.13); box-shadow:inset 3px 0 0 #ff3b5c; border-radius:0 4px 4px 0; padding:2px 8px 2px 6px; margin:6px 0; }
.rot-note { margin-top:20px; padding:16px 18px; border-left:4px solid #ff3b5c; background:rgba(255,82,119,.07);
  border-radius:0 6px 6px 0; font-size:16px; line-height:1.7; color:#9fb1c0; }
.rot-note b { color:#ff6b82; font-weight:bold; }

/* cross-tabs */
.ctrow { display:flex; gap:16px; padding:10px 0; border-bottom:1px solid #18222e; font-size:23px; }
.ctrow .cta { width:46%; min-width:200px; color:var(--ylw); }
.ctrow .ctb { flex:1; color:var(--ink); }
.muted { color:var(--dim); }

/* usage sparkline */
.spark { display:flex; align-items:flex-end; gap:3px; height:80px; margin-top:8px; }
.spark .b { flex:1; background:var(--cyan); border-radius:2px 2px 0 0; min-height:2px; opacity:.85; box-shadow:0 0 6px rgba(52,214,230,.35); }
.spark .b:hover { opacity:1; }

.sec { font-family:var(--pixel); color:var(--mag); font-size:16px; margin:30px 0 16px; border-bottom:1px dashed #2a3340; padding-bottom:12px; text-shadow:0 0 8px rgba(224,86,200,.4); }
.back { display:inline-block; margin:18px 0; color:var(--cyan); text-decoration:none; font-size:20px; }
.empty { text-align:center; color:#9fb1c0; padding:40px; font-size:20px; }
a { color:var(--cyan); }

/* leaderboard tables */
table.lb { width:100%; border-collapse:collapse; font-size:22px; }
table.lb th { text-align:left; color:var(--dim); font-size:16px; text-transform:uppercase; letter-spacing:1px; padding:8px 10px; border-bottom:1px solid rgba(135,150,171,.2); }
table.lb td { padding:9px 10px; border-bottom:1px solid rgba(135,150,171,.08); }
table.lb td:first-child { color:var(--ylw); }
table.lb td.sc { color:var(--grn); font-weight:bold; }
.lb-note { margin:12px 2px 0; color:var(--dim); font-size:14px; font-family:var(--mono); line-height:1.5; }
.lb-hint { color:var(--cyan); }
table.lb th.so { cursor:pointer; user-select:none; white-space:nowrap; }
table.lb th.so:hover, table.lb th.so:focus-visible { color:var(--cyan); outline:none; }
table.lb th.so[data-dir=asc]::after  { content:' \25B2'; font-size:11px; color:var(--cyan); }
table.lb th.so[data-dir=desc]::after { content:' \25BC'; font-size:11px; color:var(--cyan); }
/* developer/exhibition row: shown but not ranked (pinned to the bottom, N/A score) */
table.lb tr.devrow td { color:var(--dim); }
table.lb tr.devrow td.sc { font-style:italic; font-weight:normal; }
.devtag { font-size:11px; color:var(--dim); }
table.lb tr:hover td { background:rgba(52,214,230,.05); }

/* DB-down card */
.fail-card { max-width:640px; margin:60px auto; text-align:center; }
.fail-card h1 { font-family:var(--pixel); color:var(--ylw); font-size:clamp(15px,3.5vw,24px); text-shadow:0 0 10px rgba(255,210,63,.5); }
.fail-card code { background:#0d141b; padding:1px 5px; border-radius:4px; }

/* ── explorer (owner tool) variant ───────────────────────────────────────── */
body.explorer { font-size:15px; }
body.explorer h1 { font-family:var(--pixel); font-size:17px; margin:0 0 6px; color:var(--ylw); text-shadow:0 0 8px rgba(255,210,63,.4); }
body.explorer .card { max-width:1100px; }
body.explorer h2 { font-family:var(--pixel); font-size:12px; color:var(--grn); margin:0 0 10px; letter-spacing:.5px; }
body.explorer select, body.explorer input[type=text], body.explorer input[type=password] {
  padding:7px 9px; border-radius:6px; border:1px solid #2a3a48; background:#0d141b; color:#fff; font-size:14px; font-family:var(--mono);
}
body.explorer button { padding:7px 14px; border-radius:6px; border:0; background:var(--grn); color:#062; font-weight:700; cursor:pointer; font-family:var(--mono); font-size:15px; }
body.explorer table { border-collapse:collapse; width:100%; font-size:12.5px; margin-top:10px; font-family:system-ui,"Segoe UI",sans-serif; }
body.explorer th, body.explorer td { text-align:left; padding:5px 8px; border-bottom:1px solid #18222e; vertical-align:top; }
body.explorer th { color:#7e8b98; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.champ { color:var(--ylw); font-weight:700; }
.ans { color:#bcd; }
.err { color:#ff8088; }
.ok { color:var(--grn); }
body.explorer code { background:#0d141b; padding:1px 5px; border-radius:4px; }
.pill { display:inline-block; background:#16242f; border-radius:4px; padding:1px 6px; margin:1px; font-size:11px; }
.dim { color:#7e8b98; font-size:13px; }

/* ── mobile: keep every row/table inside the viewport — no page x-scroll ── */
@media(max-width:560px){
  .wrap { padding:0 2px; }
  .sub { font-size:15px; }
  .switch a { font-size:14px; padding:6px 10px; }
  .kpis { grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
  .kpi { padding:13px 10px; }
  .kpi .v { font-size:22px; }
  .kpi .k { font-size:11px; margin-top:7px; }
  .card { padding:14px; }
  .card h3 { font-size:13px; }
  .card .qq { font-size:15px; margin-bottom:10px; }
  .sec { font-size:13px; margin:24px 0 12px; }
  /* bar rows: label on its own line, bar + count on the next — never overflows */
  .row { flex-wrap:wrap; font-size:15px; gap:5px 10px; margin:11px 0; }
  .row .rl { flex:1 1 100%; width:auto; min-width:0; white-space:normal; }
  .row .rbar { flex:1 1 auto; height:14px; }
  .row .rn { flex:0 0 auto; width:auto; min-width:0; font-size:14px; white-space:nowrap; }
  .row .rn i { font-size:12px; }
  .row.rot { padding:6px 8px; }
  /* cross-tab: stack the answer above its top picks */
  .ctrow { flex-direction:column; gap:4px; font-size:15px; padding:8px 0; }
  .ctrow .cta { width:auto; min-width:0; }
  .ctrow .ctb { font-size:14px; }
  /* dense tables scroll inside their own card, not the whole page */
  table.lb { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; font-size:15px; }
  table.lb th { font-size:11px; padding:6px 8px; letter-spacing:.5px; }
  table.lb td { padding:7px 8px; }
  .back { font-size:16px; }
  body.explorer table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.explorer select, body.explorer input[type=text] { width:100%; margin:3px 0; }
}