:root {
    --ink: #121110;            /* summit near-black */
    --cream: #F4F2EC;          /* summit off-white */
    --cream60: rgba(244,242,236,.6);
    --cream40: rgba(244,242,236,.4);
    --cream14: rgba(244,242,236,.14);
    --lav: #C29AF6;            /* summit lavender */
    --lav-dim: rgba(194,154,246,.16);
    --red: #ff6a6a;
    --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --disp: "Inter Tight", "Suisse Intl", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  }
  ::selection { background:var(--lav); color:var(--ink); }
  html { scrollbar-color: var(--border, #3a3733) var(--ink); }
  * { margin:0; padding:0; box-sizing:border-box; }
  html, body { height:100%; }
  body {
    background: var(--ink);
    color: var(--cream);
    font-family: var(--mono);
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    min-height:100%;
    display:flex; flex-direction:column; align-items:center;
    background-image:
      radial-gradient(rgba(244,242,236,.10) 1px, transparent 1px),
      radial-gradient(rgba(244,242,236,.10) 1px, transparent 1px);
    background-size: 12px 12px, 12px 12px;
    background-position: calc(100% - 40px) 40px, 40px calc(100% - 40px);
    background-repeat: no-repeat;
    background-clip: border-box;
  }
  /* the dotted-grid corners: two small patches */
  .dots { position:fixed; width:108px; height:60px; pointer-events:none; opacity:.5;
    background-image: radial-gradient(rgba(244,242,236,.35) 1px, transparent 1.1px);
    background-size: 12px 12px; z-index:0; }
  .dots.tr { top:70px; right:28px; }
  .dots.bl { bottom:28px; left:28px; }

  /* film grain — the whole page breathes a little */
  body::after {
    content:""; position:fixed; inset:-100%; z-index:99; pointer-events:none; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain 7s steps(10) infinite;
  }
  @keyframes grain {
    0%,100% { transform:translate(0,0); } 10% { transform:translate(-4%,-6%); } 20% { transform:translate(-10%,4%); }
    30% { transform:translate(6%,-8%); } 40% { transform:translate(-4%,10%); } 50% { transform:translate(-10%,-4%); }
    60% { transform:translate(10%,0); } 70% { transform:translate(0,8%); } 80% { transform:translate(-8%,0); } 90% { transform:translate(8%,4%); }
  }

  /* GO flash */
  #flash {
    position:fixed; inset:0; z-index:80; pointer-events:none; background:var(--lav);
    opacity:0; transition:opacity .5s ease;
  }

  /* marquee strip */
  .marquee {
    margin:34px -24px 0; border-top:1px solid var(--cream14); border-bottom:1px solid var(--cream14);
    overflow:hidden; white-space:nowrap; padding:9px 0; position:relative;
  }
  .marquee .track { display:inline-block; animation:mq 26s linear infinite; will-change:transform; }
  .marquee span { font-size:11px; letter-spacing:2.2px; color:var(--cream40); text-transform:uppercase; padding-right:14px; }
  .marquee b { color:var(--lav); font-weight:500; }
  @keyframes mq { from { transform:translateX(0); } to { transform:translateX(-50%); } }

  /* intro stagger */
  .rise { opacity:0; transform:translateY(22px); animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards; }
  .rise.d1 { animation-delay:.06s; } .rise.d2 { animation-delay:.16s; }
  .rise.d3 { animation-delay:.26s; } .rise.d4 { animation-delay:.36s; } .rise.d5 { animation-delay:.46s; }
  @keyframes rise { to { opacity:1; transform:none; } }

  .wrap { width:100%; max-width:1040px; padding:0 24px 64px; position:relative; z-index:1; }

  /* ---------- top bar ---------- */
  .topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 24px; font-size:12px; letter-spacing:1.2px;
    position:sticky; top:0; z-index:50; margin:0 -24px 24px;
    background:rgba(18,17,16,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--cream14);
  }
  @media (max-width:640px) { .hide-sm { display:none; } }
  .topbar .meta { color:var(--cream60); text-transform:uppercase; }
  .topbar .meta b { color:var(--cream); font-weight:400; }
  .mbtn {
    font-family:var(--mono); font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--cream); background:transparent; border:1px solid var(--cream40);
    padding:10px 18px; cursor:pointer; position:relative; overflow:hidden;
    transition:border-color .15s, color .15s, transform .12s;
  }
  .mbtn::before {
    content:""; position:absolute; inset:0; background:var(--cream);
    transform:translateX(-101%); transition:transform .22s cubic-bezier(.4,0,.2,1); z-index:-1;
  }
  .mbtn:hover { border-color:var(--cream); color:var(--ink); }
  .mbtn:hover::before { transform:translateX(0); }
  .mbtn:active { transform:scale(.97); }
  .mbtn.solid { background:transparent; color:var(--ink); border-color:var(--cream); }
  .mbtn.solid::after { content:""; position:absolute; inset:0; background:var(--cream); z-index:-2; }
  .mbtn.solid::before { background:var(--lav); }
  .mbtn.solid:hover { border-color:var(--lav); color:var(--ink); }
  .mbtn:disabled { opacity:.4; cursor:default; transform:none; }
  .mbtn:disabled::before { display:none; }
  #mutebtn { padding:8px 12px; font-size:10px; border-color:var(--cream14); color:var(--cream60); }

  /* ---------- annotation primitives ---------- */
  .chip {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--cream); color:var(--ink);
    font-family:var(--mono); font-size:11px; letter-spacing:1px; text-transform:uppercase;
    padding:3px 8px; font-weight:500; white-space:nowrap;
  }
  .chip .conf { color:rgba(18,17,16,.55); }
  .chip.lav { background:var(--lav); }
  .frame { border:1px solid var(--cream14); position:relative; }
  .seclab {
    display:flex; align-items:center; gap:9px;
    font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--cream60);
    margin:44px 0 16px;
  }
  .seclab::before { content:""; width:8px; height:8px; background:var(--lav); display:inline-block; }

  .hidden { display:none !important; }
  .screen { animation: fadein .45s cubic-bezier(.2,.8,.2,1); }
  @keyframes fadein { from { opacity:0; transform:translateY(16px);} to { opacity:1; transform:none;} }

  /* ---------- hero ---------- */
  #hero3d {
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;
    transition:opacity 1.4s ease;
  }
  #hero3d.on { opacity:.8; }
  .hero-kicker {
    display:inline-flex; align-items:center; gap:10px; margin-top:26px;
    color:var(--cream60); font-size:10.5px; letter-spacing:3px; text-transform:uppercase;
  }
  .hero-kicker::before, .hero-kicker::after { content:""; width:34px; height:1px; background:var(--cream40); }
  .hero-title {
    font-family:var(--disp); font-weight:800; color:var(--lav);
    font-size: clamp(52px, 9.5vw, 118px); line-height:.98; letter-spacing:-.03em;
    margin-top:10px; text-wrap: balance;
  }
  .hero-title .thin { color:var(--cream); font-weight:700; }
  .hero-sub {
    margin-top:26px; max-width:640px; color:var(--cream60);
    font-size:12.5px; letter-spacing:1px; text-transform:uppercase; line-height:2;
  }
  .hero-sub b { color:var(--cream); font-weight:400; }
  .hero-sub .lv { color:var(--lav); }

  /* ---------- roster ---------- */
  .roster { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
  .opp {
    background:transparent; border:1px solid var(--cream14); text-align:left; color:var(--cream);
    padding:18px 16px 16px; cursor:pointer; position:relative; font-family:var(--mono);
    transition:border-color .15s, transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
  }
  .opp:hover { border-color:var(--cream60); transform:translateY(-3px); }
  .opp.selected { border-color:var(--lav); box-shadow:0 14px 44px -18px rgba(194,154,246,.4); }
  .opp.selected::after { content:"SELECTED"; position:absolute; top:-9px; right:10px;
    background:var(--lav); color:var(--ink); font-size:9.5px; letter-spacing:1.2px; padding:2px 7px; font-weight:500; }
  .opp .oname { font-family:var(--disp); font-weight:700; font-size:21px; letter-spacing:-.01em; }
  .opp.mode { padding:22px 20px 18px; }
  .opp.mode .oname { font-size:28px; }
  .opp.mode .onum { font-size:10px; letter-spacing:2px; color:var(--lav); margin-bottom:10px; }
  .opp.mode:hover { border-color:var(--lav); }
  .opp .oorg { color:var(--cream60); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; margin-top:4px; }
  .opp .odesc { color:var(--cream60); font-size:11px; line-height:1.7; margin-top:10px; min-height:38px; }
  .opp .badges { display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
  .badge { font-size:9.5px; letter-spacing:1px; text-transform:uppercase; padding:3px 7px; border:1px solid var(--cream14); color:var(--cream60); }
  .badge.on { background:var(--cream); color:var(--ink); border-color:var(--cream); }
  .opp input.ver {
    margin-top:12px; width:100%; background:transparent; color:var(--cream);
    border:1px solid var(--cream14); padding:7px 9px; font-family:var(--mono); font-size:11.5px;
    display:none; letter-spacing:.5px;
  }
  .opp input.ver:focus { outline:none; border-color:var(--lav); }
  .opp.selected input.ver { display:block; }

  .startrow { display:flex; gap:12px; margin-top:28px; align-items:center; flex-wrap:wrap; }
  .startrow .note { color:var(--cream40); font-size:11px; letter-spacing:1px; text-transform:uppercase; }

  /* ---------- settings ---------- */
  details.settings { margin-top:40px; border:1px solid var(--cream14); max-width:680px; }
  details.settings summary {
    cursor:pointer; padding:13px 16px; font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
    color:var(--cream60); user-select:none; list-style:none;
  }
  details.settings summary::before { content:"+ "; color:var(--lav); }
  details[open].settings summary::before { content:"− "; }
  details.settings .body { padding:4px 16px 18px; }
  details.settings label { display:block; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--cream60); margin:14px 0 6px; }
  details.settings input {
    width:100%; background:transparent; color:var(--cream); border:1px solid var(--cream14);
    padding:9px 11px; font-size:12px; font-family:var(--mono); letter-spacing:.5px;
  }
  details.settings input:focus { outline:none; border-color:var(--lav); }
  details.settings .hint { font-size:11px; color:var(--cream40); margin-top:14px; line-height:1.9; }
  details.settings .hint b { color:var(--cream60); font-weight:400; }

  /* ---------- scorebug ---------- */
  .scorebug { display:flex; align-items:center; gap:0; border:1px solid var(--cream14); }
  .scorebug .side { padding:6px 14px; text-align:center; }
  .scorebug .side .name { font-size:9px; letter-spacing:1.4px; text-transform:uppercase; color:var(--cream60); }
  .scorebug .side .pts { font-family:var(--disp); font-weight:700; font-size:22px; line-height:1.1; }
  .scorebug .side.human .pts { color:var(--cream); }
  .scorebug .side.model .pts { color:var(--lav); }
  .scorebug .vs { color:var(--cream40); font-size:10px; padding:0 2px; }

  /* ---------- game ---------- */
  .hud { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin:8px 0 18px; flex-wrap:wrap; }
  .hud .left { padding-bottom:2px; }
  .hud .left .roundlab { font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--cream60); }
  .hud .left .modechip { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; }
  .modechip.live { color:#7ee2b8; }
  .modechip.replay { color:var(--lav); }
  .prompt { font-family:var(--disp); font-weight:700; font-size:clamp(22px, 3.6vw, 34px); letter-spacing:-.01em; }
  .prompt .target { color:var(--lav); }
  .clock { font-family:var(--mono); font-size:20px; letter-spacing:1px; min-width:100px; text-align:right; color:var(--cream); }
  .clockcol { text-align:right; }
  .bounty { font-size:10px; letter-spacing:1.6px; color:var(--cream60); text-transform:uppercase; margin-top:3px; }
  .bounty b { color:#ffc94d; font-weight:500; }
  .bounty.draining b { color:var(--red); }

  .stage {
    position:relative; border:1px solid var(--cream40); background:#000; user-select:none;
    width:fit-content; max-width:100%; margin:0 auto;   /* shrink-wraps the image so overlays stay aligned */
  }
  .stage img {
    display:block; height:auto;
    pointer-events:none;                                 /* width set per-round by fitStage() */
  }
  .stage.playable { cursor:crosshair; }
  .veil {
    position:absolute; inset:0; display:grid; place-items:center; z-index:5;
    background:var(--ink); transition:opacity .12s ease;  /* fully opaque — zero preview of the round */
    background-image: radial-gradient(rgba(244,242,236,.05) 1px, transparent 1.1px);
    background-size: 14px 14px;
  }
  .veil > div { text-align:center; }
  .veil .big { font-family:var(--disp); font-weight:800; font-size:120px; color:var(--lav); line-height:1; animation:numpunch .65s cubic-bezier(.2,1.4,.4,1) both; }
  @keyframes numpunch { from { transform:scale(1.9); opacity:0; } 55% { opacity:1; } to { transform:scale(1); opacity:1; } }
  .veil .sub { margin-top:14px; color:var(--cream60); font-size:11px; letter-spacing:2px; text-transform:uppercase; text-align:center; }

  /* --- pressure layer --- */
  .scanline {
    position:absolute; left:0; right:0; height:22%; z-index:2; pointer-events:none; display:none;
    background:linear-gradient(180deg, transparent, rgba(194,154,246,.16) 78%, rgba(194,154,246,.55));
    animation:scan 1.15s linear infinite;
  }
  .stage.hunting .scanline { display:block; }
  @keyframes scan { from { top:-24%; } to { top:102%; } }
  .huntbar {
    position:absolute; left:0; right:0; bottom:0; height:20px; z-index:4;
    background:rgba(18,17,16,.82); border-top:1px solid var(--cream14);
    display:none; align-items:center; overflow:hidden;
  }
  .stage.hunting .huntbar, .stage.locked .huntbar { display:flex; }
  .huntfill { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--lav); opacity:.32; }
  .huntbar.indet .huntfill { width:30%; animation:hindet 1s linear infinite; }
  @keyframes hindet { from { left:-30%; } to { left:100%; } }
  .huntlab { position:relative; z-index:1; font-size:9px; letter-spacing:1.6px; padding-left:10px; color:var(--lav); text-transform:uppercase; }
  .stage.locked .huntfill { width:100% !important; opacity:.5; animation:none; }
  .stage.locked { border-color:var(--lav); }
  @keyframes shake {
    10%, 90% { transform:translate(-2px, 1px); } 20%, 80% { transform:translate(3px, -1px); }
    30%, 70% { transform:translate(-4px, 2px); } 40%, 60% { transform:translate(4px, -2px); }
    50% { transform:translate(-3px, 1px); }
  }
  .stage.shake { animation:shake .45s ease both; }
  .stamp {
    position:absolute; top:50%; left:50%; z-index:6; pointer-events:none;
    transform:translate(-50%,-50%) rotate(-7deg) scale(2.4); opacity:0;
    font-family:var(--disp); font-weight:700; font-size:clamp(34px,6vw,64px); letter-spacing:.02em;
    padding:6px 26px; border:5px solid currentColor; white-space:nowrap;
    background:rgba(18,17,16,.72);
  }
  .stamp.show { animation:stampin .32s cubic-bezier(.2,1.4,.4,1) both; }
  @keyframes stampin { from { transform:translate(-50%,-50%) rotate(-7deg) scale(2.4); opacity:0; }
    to { transform:translate(-50%,-50%) rotate(-7deg) scale(1); opacity:1; } }
  .stamp.win { color:var(--cream); }
  .stamp.lose { color:var(--red); }
  .stamp.whiff { color:var(--lav); }
  .gradechip {
    display:inline-block; font-family:var(--disp); font-weight:700; font-size:20px;
    border:2px solid currentColor; padding:1px 12px; margin-left:10px; vertical-align:middle;
  }
  .gradechip.S { color:var(--gold, #ffc94d); color:#ffc94d; }
  .gradechip.A { color:var(--cream); } .gradechip.B { color:var(--cream60); } .gradechip.C { color:var(--red); } .gradechip.F { color:var(--hot); }
  .streakline { margin-top:8px; font-size:11px; letter-spacing:1.6px; color:#ffc94d; text-transform:uppercase; }
  .sudden .veil .big { color:var(--red); }
  .ranktitle {
    display:inline-block; margin-top:16px; padding:8px 22px; border:1.5px solid var(--lav);
    color:var(--lav); font-size:13px; letter-spacing:2.4px; text-transform:uppercase;
  }

  .overlay { position:absolute; inset:0; z-index:3; pointer-events:none; }
  .bbox { position:absolute; border:1.5px solid var(--cream40); animation:boxin .25s ease both; }
  .bbox.target { border-color:var(--lav); background:var(--lav-dim); border-width:2px; }
  .bbox .lab { position:absolute; top:-19px; left:-2px; }
  .bbox .lab .chip { font-size:10px; padding:2px 6px; }
  @keyframes boxin { from { transform:scale(1.12); opacity:0; } to { transform:none; opacity:1; } }
  .clickmark { position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; z-index:4; animation:boxin .15s ease both; }
  .clickmark::before, .clickmark::after { content:""; position:absolute; background:var(--cream); }
  .clickmark::before { left:50%; top:0; bottom:0; width:1.5px; transform:translateX(-50%); }
  .clickmark::after { top:50%; left:0; right:0; height:1.5px; transform:translateY(-50%); }
  .clickmark.bad::before, .clickmark.bad::after { background:var(--red); }

  .feedback { min-height:24px; margin-top:12px; font-size:11.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--cream60); }
  .feedback .bad { color:var(--red); }
  .feedback .good { color:var(--lav); }

  /* ---------- round result — centered arena verdict modal ---------- */
  .verdict {
    position:fixed; inset:0; z-index:60; display:grid; place-items:center;
    background:rgba(18,17,16,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    animation:fadein .3s ease both; cursor:pointer; padding:20px;
  }
  .verdict .panel {
    background:var(--ink); border:1px solid var(--cream40); width:min(700px, 94vw);
    padding:10px 28px 30px; cursor:default; position:relative;
    box-shadow:0 40px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(194,154,246,.08);
    animation:panelin .34s cubic-bezier(.2,1.2,.3,1) both;
  }
  @keyframes panelin { from { transform:translateY(26px) scale(.96); opacity:0; } to { transform:none; opacity:1; } }
  .verdict .panel::before { content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:3px; background:var(--lav); }
  /* first-run gate: live key or recorded runs */
  #gate .panel { width:min(640px, 94vw); padding:26px 34px 30px; }
  .gate-kicker { font-family:var(--arc); font-size:9px; color:var(--lav); text-shadow:var(--glow-lav); letter-spacing:1px; }
  .gate-title { font-family:var(--disp); font-weight:800; font-size:clamp(24px, 3.4vw, 34px); letter-spacing:-.02em; margin:10px 0 6px; }
  .gate-sub { color:var(--cream60); font-size:12px; line-height:1.8; margin-bottom:18px; }
  .gate-row { display:flex; gap:10px; align-items:stretch; }
  .gate-row input { flex:1; background:rgba(0,0,0,.4); color:var(--cream); border:1px solid var(--cream40); padding:12px 14px; font-size:13px; font-family:var(--mono); letter-spacing:.5px; min-width:0; }
  .gate-row input:focus { outline:none; border-color:var(--lav); box-shadow:0 0 0 1px var(--lav), 0 0 18px rgba(194,154,246,.25); }
  .gate-note { color:var(--cream40); font-size:10px; line-height:1.8; margin-top:10px; }
  .gate-note label { cursor:pointer; color:var(--cream60); }
  .gate-err { color:var(--red); font-size:10px; letter-spacing:1px; text-transform:uppercase; min-height:16px; margin-top:8px; }
  .gate-or { display:flex; align-items:center; gap:14px; margin:22px 0 16px; color:var(--cream40); font-size:9px; letter-spacing:2.5px; text-transform:uppercase; }
  .gate-or::before, .gate-or::after { content:""; flex:1; height:1px; background:var(--cream14); }
  .gate-skip { width:100%; text-align:center; padding:14px; font-size:11px; }
  .gate-skip small { display:block; margin-top:6px; font-size:9px; letter-spacing:1px; color:var(--cream40); text-transform:none; }
  .livepill { display:inline-flex; align-items:center; gap:8px; background:rgba(0,0,0,.45); font-family:var(--arc); font-size:8px; letter-spacing:1px; color:var(--cream60); border:1px solid var(--cream14); padding:8px 12px; cursor:none; }
  .livepill i { width:8px; height:8px; border-radius:50%; background:var(--cream40); display:inline-block; }
  .livepill.live { color:#7dffa0; border-color:rgba(125,255,160,.4); text-shadow:0 0 10px rgba(125,255,160,.6); }
  .livepill.live i { background:#7dffa0; box-shadow:0 0 10px #7dffa0; }
  .livepill:hover { border-color:var(--lav); color:var(--lav); }
  .verdict .keyhint { text-align:center; margin-top:14px; color:var(--cream40); font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase; }
  .verdict .keyhint b { color:var(--cream60); font-weight:400; border:1px solid var(--cream14); padding:1px 6px; }
  .result-banner { text-align:center; margin:30px 0 8px; }
  .result-banner .who { font-family:var(--disp); font-weight:800; font-size:clamp(30px, 5vw, 48px); letter-spacing:-.02em; animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
  .result-banner .who.human { color:var(--cream); }
  .result-banner .who.model { color:var(--lav); }
  .result-banner .why { color:var(--cream60); margin-top:10px; font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; line-height:2; }
  .result-banner .why b { color:var(--cream); font-weight:400; }

  .timeline { margin:24px auto 4px; max-width:640px; }
  .tl-row { display:flex; align-items:center; gap:12px; margin-bottom:9px; }
  .tl-row .who { width:90px; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; text-align:right; color:var(--cream60); }
  .tl-track { flex:1; height:20px; border:1px solid var(--cream14); position:relative; overflow:hidden; }
  .tl-fill { position:absolute; left:0; top:0; bottom:0; width:0; transition:width .8s cubic-bezier(.2,.8,.2,1); }
  .tl-row.h .tl-fill { background:var(--cream); }
  .tl-row.m .tl-fill { background:var(--lav); }
  .tl-ms { width:84px; font-size:12px; letter-spacing:.5px; }
  .netnote { text-align:center; color:var(--cream40); font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; margin-top:14px; line-height:2; }
  .netnote b { color:var(--lav); font-weight:400; }
  .next-row { display:flex; justify-content:center; gap:12px; margin-top:26px; }

  /* ---------- end ---------- */
  .final-head { text-align:center; margin:14px 0 30px; }
  .final-head .headline { font-family:var(--disp); font-weight:700; font-size:clamp(34px, 6vw, 60px); letter-spacing:-.02em; line-height:1; }
  .final-head .headline .lv { color:var(--lav); }
  .final-head .sub { color:var(--cream60); margin-top:14px; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; }
  .statgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:30px; }
  .stat { border:1px solid var(--cream14); padding:18px 14px 14px; text-align:center; position:relative; }
  .stat .v { font-family:var(--disp); font-weight:700; font-size:27px; letter-spacing:-.01em; }
  .stat .k { font-size:9.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--cream60); margin-top:7px; }
  .stat.model .v { color:var(--lav); }
  table.rounds { width:100%; border-collapse:collapse; font-size:11.5px; margin-bottom:30px; border:1px solid var(--cream14); }
  table.rounds th { text-align:left; color:var(--cream60); font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--cream14); font-weight:400; }
  table.rounds td { padding:10px 12px; border-bottom:1px solid rgba(244,242,236,.07); letter-spacing:.4px; }
  table.rounds tr:last-child td { border-bottom:none; }
  td.w-human { color:var(--cream); } td.w-model { color:var(--lav); } td.w-tie { color:var(--cream60); }

  /* ---------- track mode ---------- */
  .trackwrap { position:relative; border:1px solid var(--cream40); background:#0a0806; margin:0 auto; width:fit-content; max-width:100%; }
  #tk-video { display:none; }
  #tk-canvas { display:block; cursor:none; }
  .reclight { position:absolute; top:10px; left:12px; z-index:4; display:flex; align-items:center; gap:7px;
    font-size:9.5px; letter-spacing:2px; color:var(--cream); text-shadow:0 1px 4px rgba(0,0,0,.8); }
  .reclight::before { content:""; width:8px; height:8px; border-radius:50%; background:#ff4d4d; animation:blink 1.1s steps(2) infinite; }
  @keyframes blink { 50% { opacity:.25; } }
  .camtag { position:absolute; top:10px; right:12px; z-index:4; font-size:9.5px; letter-spacing:1.6px;
    color:var(--cream); text-shadow:0 1px 4px rgba(0,0,0,.8); text-transform:uppercase; }
  .trackwrap .veil { position:absolute; }
  .lockmeter {
    position:absolute; left:0; right:0; bottom:0; height:20px; z-index:4;
    background:rgba(18,17,16,.82); border-top:1px solid var(--cream14);
    display:flex; align-items:center; overflow:hidden;
  }
  .lockfill { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--lav); opacity:.4; transition:width .12s linear; }
  .locklab { position:relative; z-index:1; font-size:9px; letter-spacing:1.6px; padding-left:10px; color:var(--lav); text-transform:uppercase; }
  .trackwrap.locked-on { border-color:var(--lav); }

  /* ---------- where on earth ---------- */
  .geowrap { display:grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap:12px; align-items:stretch; }
  @media (max-width: 860px) { .geowrap { grid-template-columns:1fr; } }
  .geophoto { position:relative; border:1px solid var(--cream40); background:#000; min-height:320px; height:min(62vh, 620px); overflow:hidden; }
  .geophoto img { width:100%; height:100%; object-fit:contain; display:block; }
  .geophoto .scenechip { position:absolute; left:12px; top:12px; z-index:2; }
  .geoside { display:flex; flex-direction:column; gap:10px; min-height:320px; }
  #geomap { flex:1; min-height:320px; border:1px solid var(--cream40); background:#0b0a09; cursor:crosshair; }
  #geomap.locked { cursor:default; }
  .leaflet-container { font-family:var(--mono); background:#0b0a09; }
  .leaflet-control-attribution { background:rgba(18,17,16,.8) !important; color:var(--cream40) !important; font-size:9px !important; letter-spacing:.4px; }
  .leaflet-control-attribution a { color:var(--cream60) !important; }
  .leaflet-bar a { background:var(--ink) !important; color:var(--cream) !important; border-color:var(--cream14) !important; }
  .georow { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .georow .hint { font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--cream60); }
  .georow .hint b { color:var(--cream); font-weight:400; }
  .pinlab { font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; padding:2px 6px; white-space:nowrap;
    background:var(--cream); color:var(--ink); border:none; box-shadow:none; }
  .pinlab.model { background:var(--lav); }
  .pinlab.truth { background:#ffc94d; }
  .leaflet-tooltip.pinlab::before { display:none; }
  .geoverdict .dist { display:flex; justify-content:center; gap:30px; margin:20px 0 6px; flex-wrap:wrap; }
  .geoverdict .dist .d { text-align:center; }
  .geoverdict .dist .v { font-family:var(--disp); font-weight:800; font-size:34px; letter-spacing:-.02em; }
  .geoverdict .dist .k { font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--cream60); margin-top:4px; }
  .geoverdict .dist .d.model .v { color:var(--lav); }
  .geoverdict .clue { margin-top:16px; border:1px solid var(--cream14); padding:12px 14px; font-size:11px; line-height:1.9; color:var(--cream60); text-transform:none; letter-spacing:.3px; }
  .geoverdict .clue b { color:var(--lav); font-weight:500; }
  .geoverdict .clue .truthline { color:var(--cream); }
  .geoverdict .clue a { color:var(--cream60); }
  .champion-veil .veil .big { color:#ffc94d; font-size:64px; }

  .loading-note { text-align:center; color:var(--cream60); padding:80px 0; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; }
  .spinner { width:26px; height:26px; margin:0 auto 18px; border:1px solid var(--cream14); border-top-color:var(--lav); border-radius:50%; animation:spin .8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .err { color:var(--red); }
  footer { margin-top:56px; padding-top:18px; border-top:1px solid var(--cream14); color:var(--cream40); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; line-height:2.2; text-align:center; }
  footer a { color:var(--cream60); }

  /* =====================================================================
     ARCADE CABINET LAYER — CRT phosphor, halation, scanlines, the Warden
     ===================================================================== */
  :root {
    --arc: "Press Start 2P", "Geist Mono", monospace;
    --hot: #ff3b3b;                         /* the machine's color */
    --hot-dim: rgba(255,59,59,.18);
    --glow-lav: 0 0 6px rgba(194,154,246,.85), 0 0 18px rgba(194,154,246,.45), 0 0 42px rgba(194,154,246,.22);
    --glow-cream: 0 0 5px rgba(244,242,236,.7), 0 0 16px rgba(244,242,236,.3);
    --glow-hot: 0 0 6px rgba(255,59,59,.9), 0 0 18px rgba(255,59,59,.5), 0 0 40px rgba(255,59,59,.25);
  }
  body { background:#0a0909; cursor:none; }
  body.no-crt { cursor:auto; }
  a, button, input, summary { cursor:none; }
  body.no-crt a, body.no-crt button, body.no-crt input, body.no-crt summary { cursor:auto; }
  .stage.playable, #geomap, #tk-canvas { cursor:none !important; }

  /* halation: bloom on everything that emits light */
  .hero-title, .prompt, .result-banner .who, .final-head .headline, .veil .big, .stamp, .ranktitle,
  .scorebug .pts, .clock, .opp.mode .oname, .gradechip, .geoverdict .dist .v, .stat .v {
    text-shadow: var(--glow-lav);
  }
  .prompt, .result-banner .who.human, .final-head .headline, .clock, .stat .v, .scorebug .side.human .pts, .opp.mode .oname { text-shadow: var(--glow-cream); }
  .hero-title .thin { text-shadow: var(--glow-cream); }
  .stamp.lose, .result-banner .who.model, .scorebug .side.model .pts { text-shadow: var(--glow-hot); }
  .scorebug .side.model .pts, .result-banner .who.model, .stamp.lose, td.w-model, .tl-row.m .tl-fill, .bounty.draining b { color:var(--hot); }
  .tl-row.m .tl-fill { background:var(--hot); }
  .stage.locked, .trackwrap.locked-on { box-shadow: 0 0 0 1px var(--lav), 0 0 24px rgba(194,154,246,.35), inset 0 0 40px rgba(194,154,246,.08); }
  .opp.selected, .opp.mode:hover { box-shadow: 0 0 0 1px var(--lav), 0 0 28px rgba(194,154,246,.25); }
  .mbtn.solid { box-shadow: 0 0 18px rgba(244,242,236,.18); }
  .chip.lav { box-shadow: 0 0 10px rgba(194,154,246,.6); }

  /* pixel display face for the loud moments */
  .hero-title, .veil .big, .stamp, .final-head .headline, .arc { font-family:var(--arc); letter-spacing:0; }
  .hero-title { font-size: clamp(30px, 6vw, 72px); line-height:1.15; font-weight:400; }
  .veil .big { font-size: clamp(48px, 9vw, 96px); font-weight:400; }
  .stamp { font-size: clamp(22px, 4vw, 40px); font-weight:400; border-width:4px; }
  .final-head .headline { font-size: clamp(22px, 4.2vw, 44px); line-height:1.3; font-weight:400; }
  .champion-veil .veil .big { font-size: clamp(22px, 4vw, 40px); }
  .result-banner .who { font-family:var(--arc); font-weight:400; font-size:clamp(18px, 3vw, 28px); line-height:1.4; }

  /* RGB fringing on headlines — chromatic aberration */
  .rgb { position:relative; }
  .hero-title { text-shadow: -2px 0 rgba(255,60,60,.55), 2px 0 rgba(60,200,255,.55), var(--glow-lav); }
  body.glitching .wrap { animation: glitchcut .38s steps(2) both; }
  @keyframes glitchcut {
    0% { transform:translate(0); filter:none; }
    20% { transform:translate(-6px, 2px) skewX(-2deg); filter:hue-rotate(-40deg) saturate(2); clip-path:inset(12% 0 40% 0); }
    40% { transform:translate(5px, -3px) skewX(1.5deg); filter:hue-rotate(30deg); clip-path:inset(50% 0 10% 0); }
    60% { transform:translate(-3px, 1px); filter:none; clip-path:inset(0 0 70% 0); }
    80% { transform:translate(2px, 0); clip-path:none; }
    100% { transform:none; }
  }
  body.hitstop .wrap { animation: hitstop .14s steps(1) both; }
  @keyframes hitstop { 0% { filter:brightness(2.2) contrast(1.3); transform:scale(1.012); } 100% { filter:none; transform:none; } }
  body.loseflash .wrap { animation: loseflash .5s ease both; }
  @keyframes loseflash {
    0% { filter:none; } 10% { filter: saturate(3) hue-rotate(-30deg) contrast(1.4); transform:translate(-8px,3px); }
    25% { transform:translate(7px,-4px); } 40% { filter:none; transform:translate(-4px,2px); } 100% { transform:none; }
  }

  /* CRT overlays — scanlines, aperture grille, vignette, flicker, rolling bar */
  #crt-scan { position:fixed; inset:0; z-index:97; pointer-events:none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px, transparent 1px, transparent 3px);
    mix-blend-mode:multiply; }
  #crt-grille { position:fixed; inset:0; z-index:96; pointer-events:none; opacity:.35;
    background: repeating-linear-gradient(90deg, rgba(255,0,0,.06) 0 1px, rgba(0,255,0,.05) 1px 2px, rgba(0,0,255,.07) 2px 3px); }
  #crt-vig { position:fixed; inset:0; z-index:98; pointer-events:none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 85%, rgba(0,0,0,.85) 100%);
    box-shadow: inset 0 0 120px rgba(0,0,0,.8); }
  #crt-flicker { position:fixed; inset:0; z-index:95; pointer-events:none; background:rgba(244,242,236,.03); animation: flick 4s steps(20) infinite; }
  @keyframes flick { 0%,100% { opacity:.6; } 5% { opacity:.2; } 10% { opacity:.9; } 15% { opacity:.4; } 50% { opacity:.7; } 55% { opacity:.3; } }
  #crt-roll { position:fixed; left:0; right:0; height:120px; z-index:96; pointer-events:none;
    background: linear-gradient(180deg, transparent, rgba(244,242,236,.045) 50%, transparent); animation: roll 9s linear infinite; }
  @keyframes roll { from { top:-140px; } to { top:110%; } }
  body.no-crt #crt-scan, body.no-crt #crt-grille, body.no-crt #crt-vig, body.no-crt #crt-flicker, body.no-crt #crt-roll { display:none; }
  /* power-on */
  #poweron { position:fixed; inset:0; z-index:200; background:#000; pointer-events:none; animation: poweron 1.5s cubic-bezier(.2,.8,.2,1) forwards; }
  #poweron::after { content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:#fff; box-shadow:0 0 30px 6px rgba(244,242,236,.9); animation: powerline 1.5s cubic-bezier(.2,.8,.2,1) forwards; }
  @keyframes poweron { 0%,45% { opacity:1; } 100% { opacity:0; } }
  @keyframes powerline { 0% { transform:scaleX(0); height:2px; } 35% { transform:scaleX(1); height:2px; } 70% { height:100vh; top:0; opacity:.9; } 100% { height:100vh; top:0; opacity:0; } }

  /* reticle cursor */
  #reticle { position:fixed; left:0; top:0; z-index:150; width:34px; height:34px; margin:-17px 0 0 -17px; pointer-events:none;
    transition: transform .08s ease; mix-blend-mode:screen; }
  #reticle::before, #reticle::after { content:""; position:absolute; background:var(--cream); box-shadow:0 0 6px rgba(244,242,236,.9); }
  #reticle::before { left:50%; top:0; bottom:0; width:1.5px; transform:translateX(-50%); }
  #reticle::after { top:50%; left:0; right:0; height:1.5px; transform:translateY(-50%); }
  #reticle .ring { position:absolute; inset:6px; border:1.5px solid rgba(194,154,246,.9); border-radius:50%; box-shadow:0 0 8px rgba(194,154,246,.7); }
  #reticle.hot { transform:scale(.6); }
  #reticle.hover .ring { border-color:var(--cream); inset:3px; }
  body.no-crt #reticle { display:none; }
  .shock { position:fixed; z-index:149; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; border:2px solid var(--lav); pointer-events:none;
    animation: shock .55s cubic-bezier(.1,.8,.3,1) forwards; box-shadow: 0 0 12px rgba(194,154,246,.8); }
  .shock.bad { border-color:var(--hot); box-shadow:0 0 12px rgba(255,59,59,.8); }
  @keyframes shock { to { transform:scale(12); opacity:0; border-width:.5px; } }
  .flyscore { position:fixed; z-index:151; pointer-events:none; font-family:var(--arc); font-size:18px; color:#ffc94d; text-shadow:0 0 10px rgba(255,201,77,.9);
    animation: fly 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
  .flyscore.neg { color:var(--hot); text-shadow:var(--glow-hot); }
  @keyframes fly { 0% { transform:translateY(0) scale(1.6); opacity:0; } 15% { opacity:1; } 100% { transform:translateY(-110px) scale(1); opacity:0; } }

  /* the Warden — terminal captions */
  .warden { font-family:var(--mono); font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--hot); text-shadow:var(--glow-hot); }
  .warden::before { content:"▮ WARDEN // "; color:rgba(255,59,59,.55); }
  .warden.calm { color:var(--lav); text-shadow:var(--glow-lav); }
  .warden.calm::before { color:rgba(194,154,246,.55); }
  .warden .cur { display:inline-block; width:8px; height:12px; background:currentColor; vertical-align:-2px; margin-left:3px; animation: blink .8s steps(2) infinite; }
  #warden-line { min-height:20px; margin-top:8px; }

  /* title / attract screen */
  #screen-title { min-height: calc(100vh - 120px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 0 20px; }
  .title-kicker { font-family:var(--arc); font-size:11px; color:var(--hot); text-shadow:var(--glow-hot); letter-spacing:2px; margin-bottom:26px; animation: kick 2.2s ease-in-out infinite; }
  @keyframes kick { 50% { opacity:.55; } }
  .title-big { font-family:var(--arc); color:var(--lav); font-size:clamp(28px, 6.4vw, 78px); line-height:1.25;
    text-shadow: -3px 0 rgba(255,60,60,.5), 3px 0 rgba(60,200,255,.5), var(--glow-lav); }
  .title-big .thin { color:var(--cream); text-shadow: -3px 0 rgba(255,60,60,.4), 3px 0 rgba(60,200,255,.4), var(--glow-cream); }
  .title-vs { font-family:var(--arc); font-size:clamp(12px, 2vw, 20px); color:var(--cream); margin-top:22px; letter-spacing:4px; }
  .title-vs .m { color:var(--hot); text-shadow:var(--glow-hot); }
  .title-vs .h { color:var(--cream); text-shadow:var(--glow-cream); }
  .press { margin-top:54px; font-family:var(--arc); font-size:13px; color:var(--cream); text-shadow:var(--glow-cream); animation: press 1.1s steps(2) infinite; letter-spacing:1px; }
  @keyframes press { 50% { opacity:0; } }
  .title-log { margin-top:40px; width:min(680px, 100%); border:1px solid var(--cream14); padding:14px 18px; text-align:left; font-size:10.5px; letter-spacing:1.2px; color:var(--cream60); line-height:2.1; text-transform:uppercase; background:rgba(0,0,0,.35); }
  .title-log .l { display:flex; gap:12px; }
  .title-log .t { color:var(--cream40); width:70px; flex:none; }
  .title-log .hot { color:var(--hot); }
  .title-log .lav { color:var(--lav); }
  .hiscore { margin-top:28px; width:min(560px, 100%); }
  .hiscore h3 { font-family:var(--arc); font-size:10px; color:#ffc94d; text-shadow:0 0 12px rgba(255,201,77,.7); letter-spacing:2px; margin-bottom:12px; }
  .hiscore table { width:100%; border-collapse:collapse; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; }
  .hiscore td { padding:5px 8px; border-bottom:1px solid rgba(244,242,236,.07); }
  .hiscore td.r { color:var(--lav); width:34px; }
  .hiscore td.s { text-align:right; color:#ffc94d; font-family:var(--arc); font-size:10px; }
  .hiscore tr.you td { color:var(--cream); background:rgba(194,154,246,.08); }
  .hiscore .empty { color:var(--cream40); text-align:center; padding:12px; font-size:10px; letter-spacing:1.4px; }

  /* versus card */
  #versus { position:fixed; inset:0; z-index:120; display:none; place-items:center; background:rgba(10,9,9,.94); overflow:hidden; }
  #versus.on { display:grid; }
  #versus .row { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; width:min(1000px, 96vw); }
  #versus .side { padding:26px; border:1px solid var(--cream14); background:rgba(0,0,0,.4); position:relative; }
  #versus .side.h { text-align:right; animation: vsL .55s cubic-bezier(.2,1,.3,1) both; }
  #versus .side.m { animation: vsR .55s cubic-bezier(.2,1,.3,1) both; border-color:var(--hot-dim); }
  @keyframes vsL { from { transform:translateX(-120vw); opacity:0; } to { transform:none; opacity:1; } }
  @keyframes vsR { from { transform:translateX(120vw); opacity:0; } to { transform:none; opacity:1; } }
  #versus .who { font-family:var(--arc); font-size:clamp(14px, 2.6vw, 26px); line-height:1.4; }
  #versus .side.h .who { color:var(--cream); text-shadow:var(--glow-cream); }
  #versus .side.m .who { color:var(--hot); text-shadow:var(--glow-hot); }
  #versus .tag { font-size:10px; letter-spacing:2.4px; text-transform:uppercase; color:var(--cream60); margin-bottom:12px; }
  #versus .stats { margin-top:14px; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--cream60); line-height:2; }
  #versus .stats b { color:var(--cream); font-weight:400; }
  #versus .side.m .stats b { color:var(--hot); }
  #versus .vs { font-family:var(--arc); font-size:clamp(28px, 6vw, 64px); color:var(--lav); text-shadow:var(--glow-lav); animation: vsPunch .5s .45s cubic-bezier(.2,1.6,.4,1) both; }
  @keyframes vsPunch { from { transform:scale(4); opacity:0; } to { transform:scale(1); opacity:1; } }
  #versus .warden { margin-top:30px; text-align:center; animation: rise .5s .7s both; }
  #versus .event { font-family:var(--arc); font-size:11px; color:var(--cream60); text-align:center; margin-bottom:26px; letter-spacing:2px; }

  /* results ceremony */
  .xpwrap { margin:22px auto 8px; max-width:560px; }
  .xpwrap .lab { display:flex; justify-content:space-between; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--cream60); margin-bottom:6px; }
  .xpwrap .lab b { color:#ffc94d; font-weight:400; }
  .xpbar { height:12px; border:1px solid var(--cream40); position:relative; overflow:hidden; }
  .xpfill { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg, var(--lav), #ffc94d); box-shadow:0 0 14px rgba(255,201,77,.7); transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
  .newbest { display:inline-block; font-family:var(--arc); font-size:11px; color:#ffc94d; text-shadow:0 0 14px rgba(255,201,77,.9); border:2px solid #ffc94d; padding:8px 14px; margin-top:16px; animation: press 1s steps(2) infinite; }
  .ranktitle { font-family:var(--arc); font-size:11px; padding:12px 22px; animation: rankstamp .4s .3s cubic-bezier(.2,1.4,.4,1) both; transform-origin:center; }
  @keyframes rankstamp { from { transform:rotate(-7deg) scale(2.4); opacity:0; } to { transform:rotate(-3deg) scale(1); opacity:1; } }
  .gname { background:transparent; border:none; border-bottom:1px solid var(--cream40); color:var(--cream); font-family:var(--arc); font-size:12px; padding:8px 4px; width:200px; text-align:center; outline:none; text-transform:uppercase; }
  .gname:focus { border-color:var(--lav); }
  .topbar .meta b { text-shadow:var(--glow-cream); }
  .topbar .meta .vs { color:var(--hot); text-shadow:var(--glow-hot); }

  /* =====================================================================
     FULL-SCREEN GAME SHELL — no page, no scroll, one screen at a time
     ===================================================================== */
  html, body { height:100%; overflow:hidden; }
  body { display:block; background-image:none; }
  .dots, .marquee, .hero-title, .hero-sub, .hero-kicker, footer { display:none !important; }
  .wrap { max-width:none; width:100vw; height:100vh; padding:0; margin:0; position:relative; }
  .topbar { position:fixed; top:0; left:0; right:0; margin:0; height:52px; padding:0 22px; z-index:50; }
  .screen { position:fixed; top:52px; left:0; right:0; bottom:0; overflow:hidden; padding:10px 22px 14px; display:flex; flex-direction:column; animation:none; }
  #screen-title { top:0; align-items:center; justify-content:center; padding:0 22px; min-height:0; }
  #screen-title .hiscore { margin-top:34px; }
  #screen-end { overflow-y:auto; padding-bottom:40px; align-items:center; }
  #screen-end > * { width:min(1040px, 100%); }
  #screen-load { align-items:center; justify-content:center; }
  .credits { margin:10px 0 30px; color:var(--cream40); font-size:10px; letter-spacing:1px; text-transform:uppercase; line-height:2; text-align:center; }
  .credits a { color:var(--cream60); }

  /* event select */
  #screen-start { justify-content:center; }
  .select-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; flex-wrap:wrap; max-width:1180px; margin-left:auto; margin-right:auto; width:100%; }
  .callsign { display:flex; align-items:center; gap:12px; }
  /* event select: a row of three, then two centred beneath */
  .roster { grid-template-columns:repeat(6, 1fr); gap:12px; max-width:1180px; margin:0 auto; width:100%; }
  .opp.mode { grid-column: span 2; }
  .opp.mode:nth-child(4) { grid-column: 2 / span 2; }
  .opp.mode:nth-child(5) { grid-column: 4 / span 2; }
  @media (max-width:720px) { .roster { grid-template-columns:repeat(2, 1fr); } .opp.mode, .opp.mode:nth-child(4), .opp.mode:nth-child(5) { grid-column: span 1; } }
  .opp.mode { padding:22px 18px 18px; min-height:min(30vh, 250px); display:flex; flex-direction:column; justify-content:flex-end; background:rgba(0,0,0,.35); }
  .opp.mode .onum { font-family:var(--arc); font-size:22px; color:var(--lav); text-shadow:var(--glow-lav); margin-bottom:auto; }
  .opp.mode .oname { font-size:clamp(20px, 2vw, 28px); line-height:1.1; }
  .opp .odesc { min-height:0; font-size:11.5px; margin-top:8px; }
  .select-foot { display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:16px; }
  .select-foot .warden { min-height:18px; }

  /* in-game chrome */
  .hud { margin:0 0 10px; flex:none; }
  .prompt { font-size:clamp(20px, 2.6vw, 30px); }
  .stage { margin:0 auto; }
  .feedback { flex:none; min-height:22px; margin-top:8px; text-align:center; }
  .modechip { font-size:9.5px; }
  details.how { margin-top:12px; text-align:center; }
  details.how summary { list-style:none; display:inline-block; font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--cream40); border-bottom:1px dotted var(--cream40); }
  details.how summary::-webkit-details-marker { display:none; }
  details.how .netnote { margin-top:10px; }
  .verdict .panel { max-height:calc(100vh - 40px); overflow-y:auto; }
  .result-banner { margin:22px 0 4px; }

  /* geo: true split screen, whole world visible at rest */
  .geowrap { flex:1; min-height:0; grid-template-columns:1fr 1fr; }
  .geophoto { height:auto; min-height:0; }
  .geoside { min-height:0; }
  #geomap { min-height:0; }
  @media (max-width:860px) { .geowrap { grid-template-rows:1fr 1fr; } }

  /* track: fill */
  .trackwrap { flex:none; }

  /* stacking: the map never escapes its box, modals always win, reticle above all */
  #geomap { isolation:isolate; z-index:0; }
  .verdict { z-index:1000; }
  #versus { z-index:1200; }
  #reticle { z-index:1300; }
  .shock { z-index:1299; } .flyscore { z-index:1301; }
  .osm-dark { filter: invert(1) hue-rotate(190deg) brightness(.62) contrast(1.15) saturate(.25); }
  /* geo verdict: a side panel over the photo, the map reveal stays visible */
  #geo-result { display:grid; grid-template-columns:1fr 1fr; place-items:stretch; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; pointer-events:none; }
  #geo-result:not(.hidden) { display:grid; }
  #geo-result .panel { pointer-events:auto; width:auto; margin:62px 12px 12px 22px; max-height:calc(100vh - 74px); background:rgba(18,17,16,.96); }
  #geo-result::after { content:""; }
  .forfeit { margin-top:8px; padding:6px 10px; font-size:9px; border-color:var(--cream14); color:var(--cream40); }
  .forfeit:hover { border-color:var(--hot); color:var(--ink); }
  .forfeit:hover::before { background:var(--hot); }
  #homebtn { padding:8px 12px; font-size:10px; border-color:var(--cream14); color:var(--cream60); }
  /* =====================================================================
     CABINET — marquee, bezel, control panel; the screen lives inside
     ===================================================================== */
  :root { --bz-top: 54px; --bz-side: 26px; --bz-bot: 46px; --bz-color: #17151a; --bz-edge: #262330; }
  #cab-marquee { position:fixed; top:0; left:0; right:0; height:var(--bz-top); z-index:60; display:flex; align-items:center; justify-content:center; gap:22px;
    background: linear-gradient(180deg, #1c1922, #0f0e12); border-bottom:2px solid var(--bz-edge); box-shadow: 0 6px 30px rgba(194,154,246,.12); }
  #cab-marquee .mq-text { font-family:var(--arc); font-size:15px; color:var(--cream); letter-spacing:3px; text-shadow: 0 0 8px rgba(244,242,236,.8), 0 0 22px rgba(194,154,246,.7), 0 0 50px rgba(194,154,246,.5); animation: mqflick 6s steps(30) infinite; }
  #cab-marquee .mq-text b { color:var(--lav); font-weight:400; }
  #cab-marquee .mq-sub { font-family:var(--arc); font-size:8px; color:var(--hot); text-shadow:var(--glow-hot); letter-spacing:2px; }
  @keyframes mqflick { 0%,100% { opacity:1; } 3% { opacity:.7; } 6% { opacity:1; } 52% { opacity:.92; } 54% { opacity:1; } }
  #cab-frame { position:fixed; inset:0; z-index:59; pointer-events:none;
    border-left: var(--bz-side) solid var(--bz-color); border-right: var(--bz-side) solid var(--bz-color);
    border-top: var(--bz-top) solid transparent; border-bottom: var(--bz-bot) solid transparent; }
  #cab-frame::before { content:""; position:absolute; inset:0; border-radius:22px; box-shadow: inset 0 0 0 2px var(--bz-edge), inset 0 0 60px rgba(0,0,0,.85), 0 0 0 40px var(--bz-color); }
  #cab-panel { position:fixed; left:0; right:0; bottom:0; height:var(--bz-bot); z-index:60; display:flex; align-items:center; gap:14px; padding:0 30px;
    background: linear-gradient(180deg, #14121a, #0c0b0f); border-top:2px solid var(--bz-edge); }
  .pbtn { width:16px; height:16px; border-radius:50%; display:inline-block; border:2px solid #000; box-shadow: inset 0 -3px 0 rgba(0,0,0,.5), 0 0 10px currentColor; }
  .pbtn.red { background:#e0332f; color:#e0332f; } .pbtn.lav { background:var(--lav); color:var(--lav); margin-left:18px; }
  .plab { font-family:var(--arc); font-size:8px; color:var(--cream60); letter-spacing:1.5px; }
  .plab.dim { color:var(--cream40); }
  /* inset everything into the screen */
  .topbar { top:var(--bz-top); left:var(--bz-side); right:var(--bz-side); background:rgba(10,9,9,.6); }
  .screen { top:calc(var(--bz-top) + 52px); left:var(--bz-side); right:var(--bz-side); bottom:var(--bz-bot); }
  #screen-title { top:var(--bz-top); }
  #crt-scan, #crt-grille, #crt-vig, #crt-flicker { top:var(--bz-top); bottom:var(--bz-bot); left:var(--bz-side); right:var(--bz-side); }
  #crt-roll { left:var(--bz-side); right:var(--bz-side); }
  #crt-vig { border-radius:22px; }
  #hero3d { top:var(--bz-top); bottom:var(--bz-bot); left:var(--bz-side); right:var(--bz-side); width:auto; height:auto; }
  #versus, .verdict { top:var(--bz-top); bottom:var(--bz-bot); left:var(--bz-side); right:var(--bz-side); }
  #geo-result .panel { margin-top:62px; }

  /* =====================================================================
     PIXEL UI — chrome goes 8-bit; photographs, video and the map stay clean
     ===================================================================== */
  .mbtn, .chip, .badge, .roundlab, .modechip, .clock, .bounty, .scorebug .name, .scorebug .pts, .huntlab, .locklab,
  .feedback, .tl-ms, .tl-row .who, .stat .k, .seclab, .georow .hint, .keyhint, .warden, .hiscore table, .hiscore h3,
  .opp .odesc, .result-banner .why, .netnote, .geoverdict .dist .k, .xpwrap .lab, .title-vs, .camtag, .reclight, details.how summary,
  .veil .sub, .hud .left, .topbar .meta, .credits, .gradechip, .streakline, .onum, table.rounds, .final-head .sub, .geoverdict .clue, .pinlab, .warden::before {
    font-family: var(--arc) !important; font-size:8px; line-height:1.9; letter-spacing:.5px;
  }
  .mbtn { font-size:9px; padding:12px 18px; border-width:2px; }
  .mbtn.solid { border-width:2px; }
  .roundlab, .modechip, .bounty, .feedback, .georow .hint, .huntlab, .locklab, .keyhint, .warden, .veil .sub, .tl-row .who, .tl-ms, .stat .k { font-size:8px; }
  .clock { font-size:16px; } .scorebug .pts { font-size:16px; } .scorebug .name { font-size:7px; }
  .chip { font-size:7px; padding:3px 6px; } .badge { font-size:7px; }
  .opp .odesc { font-size:8px; line-height:1.9; }
  .result-banner .why, .netnote, .geoverdict .clue, .credits, .final-head .sub { font-size:8px; line-height:2.1; }
  .hiscore table, table.rounds { font-size:8px; }
  .hiscore td.s { font-size:9px; }
  .stat .v, .geoverdict .dist .v, .final-head .headline, .prompt, .result-banner .who { font-family:var(--arc); font-weight:400; }
  .stat .v { font-size:20px; } .geoverdict .dist .v { font-size:24px; }
  .prompt { font-size:clamp(14px, 1.9vw, 22px); line-height:1.4; }
  .prompt .target { color:#ffc94d; text-shadow:0 0 12px rgba(255,201,77,.8); }
  .result-banner .who { font-size:clamp(14px, 2.2vw, 22px); }
  .gradechip { font-size:14px; padding:4px 10px; border-width:3px; }
  .frame, .stage, .trackwrap, .geophoto, #geomap, .opp, .verdict .panel, .stat, table.rounds, .scorebug, .tl-track, .xpbar, .hiscore td { border-width:2px; }
  .opp.mode { border-width:2px; }
  .stamp { border-width:6px; image-rendering:pixelated; }
  .bbox { border-width:2px; }
  .bbox .lab .chip { font-size:7px; }
  .clickmark::before, .clickmark::after { width:2px; height:2px; }
  .veil .big { animation-timing-function: steps(6); }
  .rise { animation-timing-function: steps(8); }
  .stamp.show { animation-timing-function: steps(5); }
  .verdict .panel { animation-timing-function: steps(6); }
  #screen-title .press { font-size:12px; }
  .title-big { font-size:clamp(26px, 5.6vw, 66px); }
  .opp.mode .oname { font-family:var(--arc); font-weight:400; font-size:clamp(11px, 1.15vw, 15px); line-height:1.5; }
  .opp.mode .onum { font-size:18px; }
  .callsign { gap:14px; }
  .bounty b { font-size:10px; }

  /* opponent select */
  .tiers { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:20px; }
  .tier { border:2px solid var(--cream14); padding:18px 16px 16px; background:rgba(0,0,0,.4); text-align:left; color:var(--cream); cursor:none; position:relative;
    transition: border-color .12s, transform .12s; font-family:var(--arc); }
  .tier .tag { font-size:8px; letter-spacing:2px; color:var(--cream60); margin-bottom:10px; }
  .tier .nm { font-size:11px; line-height:1.5; color:var(--cream); text-shadow:var(--glow-cream); }
  .tier .sub { font-size:7px; color:var(--cream40); margin-top:6px; letter-spacing:1px; }
  .tier .st { margin-top:12px; font-size:7px; color:var(--cream60); line-height:2.2; letter-spacing:.5px; }
  .tier .skulls { position:absolute; top:12px; right:14px; font-family:system-ui, sans-serif !important; font-size:15px; letter-spacing:3px; color:var(--hot); text-shadow:var(--glow-hot); }
  .tier .mult { font-size:7px; color:#ffc94d; margin-top:8px; }
  .tier.sel { border-color:var(--lav); transform:translateY(-4px); box-shadow: 0 0 0 1px var(--lav), 0 0 30px rgba(194,154,246,.3); }
  .tier.sel .tag { color:var(--lav); }
  .tier.champion.sel { border-color:var(--hot); box-shadow: 0 0 0 1px var(--hot), 0 0 30px rgba(255,59,59,.3); }
  .tier.champion.sel .tag { color:var(--hot); }
  body.no-crt .tier { cursor:pointer; }

  /* initials */
  .initials { text-align:center; margin:6px 0 22px; padding:18px; border:2px solid #ffc94d; box-shadow:0 0 24px rgba(255,201,77,.25); }
  .slots { display:flex; justify-content:center; gap:18px; margin:14px 0 8px; }
  .slot { display:flex; flex-direction:column; align-items:center; gap:6px; width:54px; }
  .slot .ch { font-family:var(--arc); font-size:34px; color:#ffc94d; text-shadow:0 0 16px rgba(255,201,77,.9); border-bottom:4px solid var(--cream40); width:100%; text-align:center; padding-bottom:6px; }
  .slot.sel .ch { border-color:#ffc94d; animation: press .7s steps(2) infinite; }
  .slot .up, .slot .dn { font-family:var(--arc); font-size:11px; color:var(--cream60); cursor:none; }
  .slot .up:hover, .slot .dn:hover { color:var(--cream); }
  .initials.floating { position:fixed; z-index:1150; left:50%; top:50%; transform:translate(-50%,-50%); width:min(420px, 92vw); background:rgba(18,17,16,.97); margin:0; }

  .wanted { display:flex; align-items:center; gap:10px; margin-top:8px; border:2px solid #ffc94d; padding:4px 10px 4px 4px; background:rgba(0,0,0,.5); box-shadow:0 0 14px rgba(255,201,77,.25); }
  .wanted img { width:36px; height:66px; object-fit:cover; image-rendering:auto; border:1px solid var(--cream40); }
  .wanted .wt { font-family:var(--arc); font-size:9px; color:#ffc94d; text-shadow:0 0 10px rgba(255,201,77,.7); line-height:1.6; }
  .wanted .wt span { font-size:6px; color:var(--cream60); text-shadow:none; letter-spacing:.5px; }
  /* waldo scope — a 2.4× lens that follows the cursor so you can check the glasses */
  .scope { position:absolute; width:240px; height:240px; border-radius:50%; pointer-events:none; z-index:4; display:none;
    border:3px solid var(--cream); box-shadow: 0 0 0 2px #000, 0 0 30px rgba(0,0,0,.7), inset 0 0 24px rgba(0,0,0,.35);
    background-repeat:no-repeat; background-color:#000; transform:translate(-50%,-50%); }
  .scope::before, .scope::after { content:""; position:absolute; background:rgba(255,59,59,.55); }
  .scope::before { left:50%; top:0; bottom:0; width:1px; }
  .scope::after { top:50%; left:0; right:0; height:1px; }
  .stage.scoped .scope { display:block; }
  .stage.scoped { overflow:hidden; }
  /* waldo plays without the CRT layer; cursor becomes a precise crosshair */
  body.no-crt .stage.playable { cursor:crosshair !important; }
  body:not(.no-crt) .stage.playable, body:not(.no-crt) #geomap, body:not(.no-crt) #tk-canvas { cursor:none !important; }

  /* event key art */
  .opp.mode { position:relative; overflow:hidden; }
  .opp.mode::before { content:""; position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; filter:saturate(.7) contrast(1.1);
    transition: opacity .25s, transform .6s cubic-bezier(.2,.8,.2,1); z-index:0; }
  .opp.mode::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,9,.05) 0%, rgba(10,9,9,.55) 45%, rgba(10,9,9,.96) 100%); z-index:0; }
  .opp.mode > * { position:relative; z-index:1; }
  .opp.mode:hover::before { opacity:.55; transform:scale(1.06); }
  .opp.mode[data-art="race"]::before { background-image:url("https://source.roboflow.com/Un6Oj918VoacT7AE2ql63T5q4ft1/H1oJqWeVOe0aCNSOvcZi/original.jpg"), url("arena/assets/key-race.jpg"); }
  .opp.mode[data-art="survival"]::before { background-image:url("arena/assets/key-survival.jpg"); }
  .opp.mode[data-art="waldo"]::before { background-image:url("arena/assets/key-waldo.jpg"); }
  .opp.mode[data-art="track"]::before { background-image:url("arena/assets/key-track.jpg"); }
  .opp.mode[data-art="geo"]::before { background-image:url("https://live.staticflickr.com/3666/9330685068_8036a06061_b.jpg"), url("arena/assets/key-geo.jpg"); }