:root{
  --night:#120a22; --night-2:#1c1033; --night-3:#2a1846;
  --ink:#f5f0e6; --ink-dim:#b9a9d6; --ink-faint:#7d6aa0;
  --solo:#e3262f; --solo-dk:#a3161f; --solo-lt:#ff6b6b;
  --beer:#f6b93b; --neon:#ff3d7f; --cyan:#2de2e6; --lime:#9dff5a; --gold:#ffe14d;
  --px: 4px;
  --display:'Press Start 2P', ui-monospace, monospace;
  --body:'VT323', ui-monospace, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--night);color:var(--ink);min-height:100%}
body{font-family:var(--body);font-size:24px;line-height:1.15;-webkit-font-smoothing:none;overflow-x:hidden}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* basement backdrop */
.room{position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,61,127,.22), transparent 70%),
    radial-gradient(40% 30% at 90% 30%, rgba(45,226,230,.12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px),
    var(--night);}

/* pixel frame helper */
.px-frame{box-shadow:
  0 calc(-1*var(--px)) 0 0 var(--c,var(--ink)),
  0 var(--px) 0 0 var(--c,var(--ink)),
  calc(-1*var(--px)) 0 0 0 var(--c,var(--ink)),
  var(--px) 0 0 0 var(--c,var(--ink));}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1120px;margin:0 auto;padding:14px 18px 6px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;image-rendering:pixelated;filter:drop-shadow(0 0 8px rgba(255,61,127,.6))}
.brand h1{font-family:var(--display);font-size:16px;letter-spacing:1px;line-height:1.2;color:var(--ink);text-shadow:2px 2px 0 var(--solo-dk)}
.brand h1 span{display:block;color:var(--neon);text-shadow:0 0 8px rgba(255,61,127,.8),2px 2px 0 #4a0d26}
.tag{font-size:18px;color:var(--ink-dim);margin-top:2px}
.tag b{color:var(--gold);font-weight:400}
.top-actions{display:flex;gap:10px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;font-family:var(--display);font-size:14px;color:var(--ink);
  background:var(--night-3);--c:var(--ink-faint);box-shadow:0 -3px 0 0 var(--c),0 3px 0 0 var(--c),-3px 0 0 0 var(--c),3px 0 0 0 var(--c),inset 0 -4px 0 rgba(0,0,0,.35);transition:transform .08s}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{--c:var(--cyan);color:var(--cyan)}
.icon-btn:active{transform:translateY(2px)}
.icon-btn[aria-pressed="false"] .wave{opacity:0}
.icon-btn[aria-pressed="false"]{color:var(--ink-faint)}

/* stage */
.stage{max-width:1120px;margin:0 auto;padding:10px 18px 24px;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:28px;align-items:start}
.table-wrap{position:relative;width:100%;aspect-ratio:256/272;background:#000;
  box-shadow:0 0 0 4px #000,0 0 0 8px var(--night-3),0 0 40px rgba(255,61,127,.25);touch-action:none;user-select:none;-webkit-user-select:none}
#table{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;cursor:grab}
#table.aiming{cursor:grabbing}
.hud{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;pointer-events:none}
.hud-chip{font-family:var(--display);font-size:10px;padding:6px 8px;background:rgba(18,10,34,.85);color:var(--ink);box-shadow:0 0 0 2px var(--ink-faint)}
.hud-chip.hot{color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.hud-balls{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;gap:8px;pointer-events:none}
.hud-balls i{width:12px;height:12px;background:var(--ink);box-shadow:0 0 0 2px #000, inset -3px -3px 0 #cfc8b8}
.hud-balls i.spent{background:transparent;box-shadow:0 0 0 2px var(--ink-faint)}
.callout{position:absolute;left:0;right:0;top:34%;text-align:center;font-family:var(--display);font-size:28px;pointer-events:none;opacity:0;
  color:var(--ink);text-shadow:3px 3px 0 #000}
.callout.show{animation:pop 1.1s steps(12) forwards}
.callout.hit{color:var(--beer);font-size:34px;text-shadow:3px 3px 0 var(--solo-dk),0 0 18px rgba(246,185,59,.8)}
.callout.miss{color:var(--cyan)}
.callout.info{color:var(--lime);font-size:18px}
@keyframes pop{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.15)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
.flick-tip{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:21px;color:var(--ink-dim);pointer-events:none;text-shadow:2px 2px 0 #000;transition:opacity .3s}
.flick-tip.ready{color:var(--gold);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

/* panel */
.panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.hint-card{background:var(--ink);color:#1a1030;padding:14px 16px 16px;position:relative;
  box-shadow:0 -4px 0 0 #1a1030,0 4px 0 0 #1a1030,-4px 0 0 0 #1a1030,4px 0 0 0 #1a1030,8px 8px 0 0 var(--solo)}
.hint-card.flash{animation:cardin .5s steps(6)}
@keyframes cardin{0%{transform:translateY(-10px) rotate(-2deg);opacity:.2}100%{transform:none;opacity:1}}
.hint-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hint-cup{font-family:var(--display);font-size:10px;background:var(--solo);color:#fff;padding:5px 6px}
.hint-label{font-family:var(--display);font-size:10px;letter-spacing:.5px;flex:1;text-transform:uppercase;color:#4a3870}
.hint-worth{font-family:var(--display);font-size:10px;color:#1a1030;background:var(--gold);padding:5px 6px}
.hint-text{font-size:31px;line-height:1.05;min-height:3.1em}

.shot{display:flex;gap:12px}
.combo{position:relative;flex:1;min-width:0}
#guess{width:100%;height:52px;padding:0 14px;font-size:26px;background:#0b0616;color:var(--ink);border:0;outline:0;
  box-shadow:0 0 0 3px var(--ink-faint)}
#guess:focus{box-shadow:0 0 0 3px var(--cyan),0 0 16px rgba(45,226,230,.35)}
#guess::placeholder{color:var(--ink-faint)}
#guess:disabled{opacity:.5}
.combo.shake{animation:shake .3s steps(6)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;list-style:none;background:#0b0616;max-height:288px;overflow:auto;box-shadow:0 0 0 3px var(--cyan),8px 8px 0 rgba(0,0,0,.5)}
.suggest li{padding:8px 14px;font-size:24px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.suggest li small{color:var(--ink-faint);font-size:18px}
.suggest li[aria-selected="true"],.suggest li:hover{background:var(--cyan);color:#0b0616}
.suggest li[aria-selected="true"] small,.suggest li:hover small{color:#0b0616}
.suggest li.used{opacity:.4;text-decoration:line-through;pointer-events:none}
.suggest li.none{color:var(--ink-faint);pointer-events:none}

.btn{font-family:var(--display);font-size:13px;padding:0 18px;height:52px;background:var(--solo);color:#fff;
  box-shadow:0 -4px 0 0 #000,0 4px 0 0 #000,-4px 0 0 0 #000,4px 0 0 0 #000,inset 0 -6px 0 var(--solo-dk),inset 0 4px 0 var(--solo-lt);transition:transform .06s}
.btn:hover:not(:disabled){filter:brightness(1.1)}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 -4px 0 0 #000,0 4px 0 0 #000,-4px 0 0 0 #000,4px 0 0 0 #000,inset 0 -2px 0 var(--solo-dk)}
.btn:disabled{background:#4a3a64;box-shadow:0 -4px 0 0 #000,0 4px 0 0 #000,-4px 0 0 0 #000,4px 0 0 0 #000,inset 0 -6px 0 #33264a;color:var(--ink-faint);cursor:not-allowed}
.btn-throw:not(:disabled){animation:throbe 1.2s steps(2) infinite}
@keyframes throbe{50%{background:#ff3b44}}
.btn-wide{width:100%;margin-top:6px}
.shot-meta{display:flex;justify-content:space-between;align-items:center;font-size:20px;color:var(--ink-dim);margin-top:-4px}
.shot-meta span{font-size:22px}
.link-btn{color:var(--cyan);font-size:20px;text-decoration:underline;text-underline-offset:4px}
.link-btn:disabled{color:var(--ink-faint);text-decoration:none;cursor:default}

.done-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--night-2);box-shadow:0 0 0 3px var(--gold)}
.done-bar p{font-size:22px}
.done-ans{color:var(--ink);font-size:26px !important;margin-bottom:2px}
.done-ans:empty{display:none}
.countdown{font-family:var(--display);font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums}

.log{background:rgba(28,16,51,.7);padding:12px 14px;box-shadow:0 0 0 3px var(--night-3)}
.log-title{font-family:var(--display);font-size:10px;color:var(--ink-faint);margin:2px 0 8px;letter-spacing:1px}
.log-title + .clue-list{margin-bottom:6px}
#missTitle{margin-top:12px}
.clue-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.clue-list li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:23px;color:var(--ink-dim)}
.clue-list li .n{font-family:var(--display);font-size:10px;width:28px;height:28px;display:grid;place-items:center;background:var(--solo-dk);color:#fff}
.clue-list li b{display:block;font-weight:400;font-family:var(--display);font-size:8px;color:var(--ink-faint);margin-bottom:3px;letter-spacing:.5px;text-transform:uppercase}
.clue-list li.current{color:var(--ink)}
.clue-list li.current .n{background:var(--solo)}
.clue-list li.locked{opacity:.45}
.clue-list li.locked .n{background:var(--night-3)}
.miss-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.miss-list li{font-size:21px;padding:3px 8px;background:#0b0616;box-shadow:0 0 0 2px var(--solo-dk);color:var(--ink-dim)}
.miss-list li::before{content:"✕ ";color:var(--solo-lt)}
.miss-list li.hit{box-shadow:0 0 0 2px var(--lime);color:var(--lime)}
.miss-list li.hit::before{content:"● ";color:var(--lime)}

.foot{text-align:center;color:var(--ink-faint);font-size:20px;padding:4px 18px 28px}

/* modals */
.modal{border:0;padding:0;background:transparent;color:var(--ink);margin:auto;max-width:min(520px,calc(100vw - 28px));width:100%}
.modal::backdrop{background:rgba(6,3,12,.78)}
.modal[open]{animation:mod .25s steps(5)}
@keyframes mod{from{transform:scale(.9);opacity:0}}
.modal-box{position:relative;background:var(--night-2);padding:26px 22px 22px;max-height:calc(100dvh - 40px);overflow:auto;
  box-shadow:0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),10px 10px 0 0 var(--neon)}
.close{position:absolute;top:10px;right:12px;font-size:34px;color:var(--ink-dim);line-height:1}
.close:hover{color:var(--neon)}
.modal-title{font-family:var(--display);font-size:20px;color:var(--beer);text-align:center;margin-bottom:14px;text-shadow:3px 3px 0 var(--solo-dk)}
.modal-title.lost{color:var(--cyan);text-shadow:3px 3px 0 #0b3b4a}
.lede{font-size:24px;margin-bottom:12px;color:var(--ink)}
.rules{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.rules li{font-size:23px;color:var(--ink-dim);padding-left:18px;position:relative}
.rules li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;background:var(--solo)}
.rules b{color:var(--ink);font-weight:400}
.points-row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:12px}
.points-row div{text-align:center;background:#0b0616;padding:8px 2px;box-shadow:0 0 0 2px var(--night-3)}
.points-row b{display:block;font-family:var(--display);font-size:8px;color:var(--ink-faint);margin-bottom:6px;font-weight:400}
.points-row span{font-family:var(--display);font-size:9px;color:var(--gold)}
.fine{font-size:18px;color:var(--ink-faint);margin-bottom:14px}

.answer{text-align:center;margin-bottom:16px;padding:14px;background:var(--ink);color:#1a1030;box-shadow:6px 6px 0 var(--solo)}
.answer-kicker{font-family:var(--display);font-size:9px;color:#6d5a92;margin-bottom:8px;letter-spacing:1px;text-transform:uppercase}
.answer-name{font-size:32px;line-height:1}
.answer-sub{font-size:20px;color:#4a3870;margin-top:6px}
.score-line{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin-bottom:16px}
.score-line > div{background:#0b0616;padding:10px 4px;box-shadow:0 0 0 2px var(--night-3)}
.big{display:block;font-family:var(--display);font-size:16px;color:var(--gold);font-variant-numeric:tabular-nums}
.cap{display:block;font-size:17px;color:var(--ink-faint);margin-top:6px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px;text-align:center;margin-bottom:16px}
.stat-grid b{display:block;font-family:var(--display);font-size:14px;font-weight:400;color:var(--ink)}
.stat-grid span{font-size:17px;color:var(--ink-faint)}
.dist-title{font-family:var(--display);font-size:9px;color:var(--ink-faint);margin-bottom:8px;letter-spacing:1px}
.dist{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.dist .row{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:center;font-size:18px}
.dist .row b{font-family:var(--display);font-size:9px;color:var(--ink-dim);font-weight:400}
.dist .bar{height:18px;background:var(--night-3);min-width:22px;padding:0 6px;font-size:17px;display:flex;align-items:center;justify-content:flex-end;color:var(--ink)}
.dist .row.today .bar{background:var(--solo)}
.res-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:3px dashed var(--night-3)}
.btn-share{background:var(--lime);color:#0b0616;box-shadow:0 -4px 0 0 #000,0 4px 0 0 #000,-4px 0 0 0 #000,4px 0 0 0 #000,inset 0 -6px 0 #5fb52a,inset 0 4px 0 #d2ffb0}
.share-fallback{width:100%;height:120px;margin-top:12px;background:#0b0616;color:var(--ink);border:0;padding:10px;font-size:18px;box-shadow:0 0 0 2px var(--cyan)}

@media (max-width: 880px){
  .stage{grid-template-columns:1fr;gap:20px;padding:8px 12px 20px}
  .table-wrap{max-width:min(100%, calc(52dvh * 256 / 272));margin:0 auto}
  .top{padding:10px 12px 4px}
  .brand h1{font-size:13px}
  .logo{width:34px;height:34px}
  .hint-text{font-size:25px;min-height:0}
}
@media (max-width: 420px){
  .btn{padding:0 12px;font-size:11px}
  .hud-chip{font-size:8px;padding:5px 6px}
  .callout{font-size:22px}.callout.hit{font-size:26px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

.foot a{color:var(--ink-dim);text-underline-offset:3px}
.foot a:hover{color:var(--cyan)}
.doc{max-width:720px;margin:0 auto;padding:28px 20px 10px}
.doc h1{font-family:var(--display);font-size:20px;color:var(--beer);text-shadow:3px 3px 0 var(--solo-dk);margin:14px 0 18px;line-height:1.4}
.doc h2{font-family:var(--display);font-size:12px;color:var(--neon);margin:22px 0 8px;line-height:1.5}
.doc p{font-size:24px;color:var(--ink);margin-bottom:12px;line-height:1.2}
.doc a{color:var(--cyan)}
.doc .back{font-size:22px}
.doc-meta{color:var(--ink-faint) !important;font-size:20px !important;margin-top:24px}