:root{
  --bg:#0b0d12;--panel:#141824;--panel2:#1b2031;--ink:#e9ecf5;--muted:#8d95ad;--line:#2a3147;
  --green:#49c36b;--yellow:#ffd84d;--red:#ff5c5c;--blue:#4dc3ff;--purple:#c58cff;
  --t0:#444;--t1:#cfd6e6;--t2:#ffd84d;--t3:#49c36b;--t4:#4dc3ff;--t5:#c58cff;
  --pix:'Press Start 2P',monospace;--mono:'VT323','Courier New',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:22px;line-height:1.25}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:10px 16px 24px;background-image:radial-gradient(ellipse at top,#161b2b 0%,var(--bg) 60%)}
button{font-family:inherit}
.hidden{display:none!important}

.top{width:100%;max-width:960px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:6px 2px 10px;flex-wrap:wrap}
.brand{font-family:var(--pix);font-size:22px;letter-spacing:1px}
.logo span{color:var(--green)}
.brand .tag{color:var(--muted);font-size:12px;margin-left:4px}
.meta{display:flex;gap:14px;align-items:center;color:var(--muted);font-size:18px}
.chip{color:var(--yellow)}
.link{background:none;border:0;color:var(--blue);cursor:pointer;font-size:18px;padding:0;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:#fff}

.shell{width:100%;max-width:960px}
.arena-wrap{position:relative;width:100%;margin:0 auto;aspect-ratio:16/9;background:#000;border:5px solid #2a3147;border-radius:8px;overflow:hidden;box-shadow:0 0 0 3px #000,0 24px 70px rgba(0,0,0,.7)}
#arena{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.label{position:absolute;left:50%;top:14%;transform:translateX(-50%);font-family:var(--pix);font-size:max(11px,calc(var(--aw,640px) * 0.042));color:#fff;text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;white-space:nowrap;letter-spacing:1px}
.label.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{0%{transform:translateX(-50%) scale(.2);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}

.panel{background:var(--panel);border:2px solid var(--line);border-radius:8px;padding:18px 20px;margin-top:14px;box-shadow:inset 0 0 0 2px #0b0d12}
h1{font-family:var(--pix);font-size:22px;margin:4px 0 10px;color:var(--yellow);text-shadow:3px 3px 0 #000}
h2{font-family:var(--pix);font-size:clamp(15px,2.2vw,22px);line-height:1.4;margin:6px 0 2px;color:#fff}
.rule{color:var(--muted);margin:0 0 6px;font-size:16px;line-height:1.2}
.lineup{list-style:none;display:flex;gap:8px;padding:0;margin:10px 0;font-size:26px}
.lineup li{background:var(--panel2);border:2px solid var(--line);padding:4px 8px;border-radius:4px}
.tiers{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 16px;font-size:16px}
.tiers span{padding:3px 8px;border-radius:3px;color:#000;font-weight:bold}
.t1{background:var(--t1)}.t2{background:var(--t2)}.t3{background:var(--t3)}.t4{background:var(--t4)}.t5{background:var(--t5)}

.btn{font-family:var(--pix);font-size:12px;padding:12px 18px;background:var(--green);color:#06130a;border:0;border-radius:4px;cursor:pointer;box-shadow:0 4px 0 #1f7a3a,0 6px 0 #000;transition:transform .05s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #1f7a3a,0 3px 0 #000}
.btn.big{font-size:14px;padding:16px 22px}
.btn.ghost{background:var(--panel2);color:var(--ink);box-shadow:0 4px 0 #0e1120,0 6px 0 #000}

.hud{display:flex;justify-content:space-between;color:var(--muted);font-size:15px;letter-spacing:1px}
.sport{color:var(--blue)}
.clock{position:relative;height:14px;background:#0a0c12;border:2px solid var(--line);margin-top:2px;border-radius:3px;overflow:hidden}
#clock-bar{height:100%;background:var(--green);width:100%;transition:width .1s linear}
#clock-bar.hot{background:var(--red)}
#clock-num{position:absolute;right:6px;top:-3px;font-size:16px;color:#fff;mix-blend-mode:difference}

#answer-form{display:flex;gap:10px;margin-top:0}
#answer{flex:1;font-family:var(--mono);font-size:30px;padding:10px 14px;background:#0a0c12;color:#fff;border:2px solid var(--line);border-radius:4px;outline:none}
#answer:focus{border-color:var(--green)}
#answer:disabled{opacity:.5}
.hint{color:var(--yellow);margin:6px 0 0;font-size:18px}
.hint:empty{display:none}

.result{margin-top:8px;border-top:2px dashed var(--line);padding-top:8px;animation:rise .35s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.result-tier{font-family:var(--pix);font-size:11px;letter-spacing:1px;color:var(--muted)}
.result.tier-1 .result-tier{color:var(--t1)}.result.tier-2 .result-tier{color:var(--t2)}.result.tier-3 .result-tier{color:var(--t3)}.result.tier-4 .result-tier{color:var(--t4)}.result.tier-5 .result-tier{color:var(--t5)}.result.tier-0 .result-tier{color:var(--red)}
.result-row{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:2px}
.result-row>div:first-child{flex:1;min-width:0}
.result-row .btn{white-space:nowrap}
.result-name{font-size:24px;color:#fff;line-height:1.1}
.result-note{color:var(--muted);font-size:16px;margin-top:2px;line-height:1.2}
.result-fuzzy{color:var(--yellow);font-size:14px}
.points{text-align:right;font-family:var(--pix);line-height:1}
.points span{font-size:28px;color:var(--yellow);text-shadow:3px 3px 0 #000}
.points small{display:block;font-size:9px;color:var(--muted);margin-top:4px}
.result.tier-5 .points span{color:var(--t5)}.result.tier-4 .points span{color:var(--t4)}.result.tier-3 .points span{color:var(--t3)}.result.tier-0 .points span{color:var(--red)}

.book{margin-top:12px;background:#0a0c12;border:2px solid var(--line);border-radius:4px;padding:10px 12px;max-height:280px;overflow:auto;font-size:18px}
.book-tier{color:var(--muted);margin:8px 0 2px;font-size:16px;letter-spacing:1px}
.book ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.book li b{color:var(--yellow);margin-right:4px}
.book li.me{color:var(--green)}

.final{font-family:var(--pix);text-align:center;margin:6px 0 2px}
#final-score{font-size:44px;color:var(--yellow);text-shadow:4px 4px 0 #000}
#final-max{font-size:12px;color:var(--muted);margin-left:8px}
.grade{text-align:center;font-family:var(--pix);font-size:12px;color:var(--green);letter-spacing:2px;margin-bottom:12px}
.final-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:4px;font-size:19px}
.final-list li{display:grid;grid-template-columns:28px 28px 1fr auto 52px;gap:8px;align-items:center;background:var(--panel2);padding:6px 10px;border-radius:4px}
.final-list .pr{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.final-list .nm{color:#fff}
.final-list .pt{text-align:right;font-family:var(--pix);font-size:12px;color:var(--yellow)}
.final-list .tier-0 .pt{color:var(--red)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.streak{color:var(--yellow);margin:14px 0 2px}
.countdown{color:var(--muted);margin:0}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal-box{background:var(--panel);border:2px solid var(--line);border-radius:8px;padding:18px 20px;max-width:560px;font-size:20px}
.modal-box h3{font-family:var(--pix);font-size:14px;margin:0 0 10px;color:var(--yellow)}
.modal-box p{margin:0 0 10px}
.foot{color:#4a5168;font-size:12px;margin-top:10px;text-align:center;max-width:720px;line-height:1.2}
@media (max-width:520px){body{font-size:20px}.final-list li{grid-template-columns:24px 24px 1fr 44px}.final-list .nm{display:none}.result-name{font-size:26px}}

.hint .opt{font-family:var(--mono);font-size:18px;background:var(--panel2);color:#fff;border:2px solid var(--yellow);border-radius:4px;padding:2px 10px;margin:2px 6px 2px 0;cursor:pointer}
.hint .opt:hover{background:var(--yellow);color:#000}
.hint .opt.no{border-color:var(--muted);color:var(--muted)}
.hint .opt.no:hover{background:var(--muted);color:#000}

.muted{color:var(--muted)}
.archive-box{width:100%;max-width:640px;max-height:85vh;overflow:auto}
.archive-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.archive-list li.empty{color:var(--muted);padding:10px}
.archive-list a{display:grid;grid-template-columns:70px 1fr auto auto;gap:10px;align-items:center;background:var(--panel2);border:2px solid var(--line);border-radius:4px;padding:8px 12px;color:var(--ink);text-decoration:none}
.archive-list a:hover{border-color:var(--green)}
.archive-list .no{font-family:var(--pix);font-size:11px;color:var(--yellow)}
.archive-list .dt{color:var(--muted)}
.archive-list .sp{letter-spacing:1px}
.archive-list .st{font-family:var(--pix);font-size:10px;color:var(--green)}
.archive-list .st.done{color:var(--blue)}
@media (max-width:520px){.archive-list a{grid-template-columns:60px 1fr auto}.archive-list .sp{display:none}}

@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
#answer.shake{animation:shake .4s ease;border-color:var(--red)}
.final small{font-size:11px;color:var(--muted);margin-left:8px}
.hint .enter-hint{color:var(--muted);font-size:16px;margin-left:6px}

.small{font-size:16px}
.final-list li{display:block;padding:0}
.final-list .frow{display:grid;grid-template-columns:28px 28px 1fr auto 52px;gap:8px;align-items:center;padding:6px 10px;cursor:pointer}
.final-list li.open .frow{border-bottom:2px dashed var(--line)}
.final-list .book{margin:0;border:0;border-radius:0 0 4px 4px;max-height:260px}
@media (max-width:520px){.final-list .frow{grid-template-columns:24px 24px 1fr 44px}}
.final-list li.unreached{opacity:.45}
.final-list li.unreached .frow{cursor:default}

.qpanel{background:var(--panel);border:2px solid var(--line);border-radius:8px;padding:8px 18px 10px;margin:0 0 14px;box-shadow:inset 0 0 0 2px #0b0d12;text-align:center}
.qpanel .hud{justify-content:center;gap:18px}
.qpanel h2{margin-top:4px}
#play.panel{margin-top:14px;padding:12px 20px 12px}

/* ---- phones */
@media (max-width:600px){
  body{padding:6px 10px 16px;font-size:17px}
  .top{padding:4px 0 6px;gap:6px}
  .logo{font-size:16px}
  .meta{font-size:12px;gap:8px}
  .shell{max-width:100%}
  .qpanel{padding:8px 10px 10px;margin-bottom:8px}
  .qpanel .hud{font-size:13px;gap:10px;flex-wrap:wrap}
  .qpanel h2{font-size:15px;line-height:1.4;margin:6px 0 4px}
  .rule{font-size:15px;line-height:1.25;margin-bottom:6px}
  .clock{height:12px}
  #clock-num{font-size:13px;top:-2px}
  .arena-wrap{border-width:3px}
  .label{font-size:clamp(11px,4.2vw,18px)}
  .panel{padding:10px 12px;margin-top:8px}
  #play.panel{padding-top:10px}
  #answer-form{gap:6px}
  #answer{font-size:20px;padding:8px 10px}
  .btn{padding:10px 12px;font-size:10px}
  .btn.big{font-size:12px;padding:12px 16px}
  h1{font-size:16px}
  .lineup{font-size:20px;gap:6px}
  .result-row{flex-wrap:wrap;gap:6px 12px}
  .result-row>div:first-child{flex-basis:100%}
  .result-row .points{margin-right:auto;text-align:left}
  .result-name{font-size:20px}
  .result-note{font-size:14px}
  .points span{font-size:26px}
  .foot{font-size:11px;margin-top:10px}
}
@media (max-height:700px){
  .qpanel{padding:8px 14px 10px}
  .qpanel h2{font-size:clamp(14px,2.4vw,20px);margin:6px 0 4px}
  .rule{font-size:16px;margin-bottom:6px}
  .panel{padding:10px 14px}
  #answer{font-size:22px;padding:8px 12px}
}
@media (max-height:820px){.foot{display:none}}

/* ---- ads + consent (Phase 1) */
.ad{display:flex;justify-content:center;align-items:center}
.ad:has(> ins[data-ad-status="unfilled"]){display:none}   /* collapse units AdSense left empty (pre-approval, no fill) */
.ad-preview{display:flex;align-items:center;justify-content:center;border:2px dashed #3a4260;color:#4a5168;font-size:14px;letter-spacing:1px;border-radius:4px;max-width:100%}
.ad-top{width:100%;max-width:960px;min-height:90px;margin:0 auto 10px}
.ad-top .adsbygoogle,.ad-top .ad-preview{width:100%;max-width:728px;height:90px}
.ad-summary{margin:14px auto 4px;min-height:250px}
.ad-rail{display:none}
@media (min-width:1300px){
  .ad-rail{position:fixed;top:50%;transform:translateY(-50%);width:160px;height:600px;z-index:5}
  .ad-rail.left{left:calc(50% - 480px - 160px - 24px)}
  .ad-rail.right{right:calc(50% - 480px - 160px - 24px)}
  .ad-rail:not(.hidden){display:flex}
}
.ad-anchor{display:none}
@media (max-width:600px){
  .ad-anchor:not(.hidden){display:flex;position:fixed;left:0;right:0;bottom:0;height:50px;background:#000;border-top:2px solid var(--line);z-index:8}
  body[data-screen="play"]{padding-bottom:58px}
  .ad-top{min-height:50px}
}
@media (max-width:520px){.ad-top .ad-preview,.ad-top .adsbygoogle{width:320px;height:50px}}
.link.tiny{font-size:12px;color:#4a5168}
.consent{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:calc(100% - 24px);max-width:640px;background:var(--panel);border:2px solid var(--line);border-radius:8px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.6);z-index:20;font-size:18px}
.consent p{margin:0 0 10px;line-height:1.25}
.consent .btn{font-size:11px;padding:10px 14px}
@media (max-width:600px){.consent{font-size:15px;bottom:8px}.ad-anchor:not(.hidden)~.consent{bottom:60px}}