*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#0b1424;color:#f1f5f9;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow:hidden}
button{font:inherit;color:inherit}
#app{position:relative;height:100%;width:100%}
.screen{position:absolute;inset:0;display:none}
.screen.active{display:flex}
#splash{background:#000;align-items:center;justify-content:center;cursor:pointer}
#splash img{max-width:92vw;max-height:80vh;object-fit:contain;animation:fadeIn 1s ease-out both}
@keyframes fadeIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
#title{align-items:center;justify-content:center;background:radial-gradient(circle at 50% 0%,#223a66 0%,#101524 58%,#06070d 100%)}
.title-card{text-align:center;padding:2vh 4vw}
.title-icon{width:min(38vh,60vw);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
.title-card h1{font-size:clamp(28px,6vh,64px);color:#fcd34d;margin-top:2vh}
.title-sub{font-size:clamp(15px,2.6vh,26px);color:#cbd5e1;margin-top:.8vh}
.title-btns{display:flex;gap:14px;justify-content:center;margin-top:3vh;flex-wrap:wrap}
.btn{background:#334155;border:3px solid transparent;border-radius:12px;padding:.55em 1.1em;font-weight:700;font-size:clamp(14px,2.1vh,22px);cursor:pointer;transition:transform .08s,background .15s}
.btn:hover{background:#3f4f66}
.btn:active{transform:scale(.97)}
.btn:focus{outline:none}
.btn:focus-visible,.btn.kfocus{border-color:#fde047;box-shadow:0 0 0 3px rgba(253,224,71,.35)}
.btn.primary{background:#10b981;color:#04130d}
.btn.primary:hover{background:#34d399}
.btn.on{background:#fbbf24;color:#111}
.btn.on.mix{background:#34d399;color:#04130d}
.btn.pace.on[data-pace=regular]{background:#0e7490;color:#e0f7ff}
.btn.pace.on[data-pace=calm]{background:#047857;color:#e3fff3}
.btn.icon{width:2.4em;height:2.4em;padding:0;border-radius:50%;font-size:clamp(16px,2.4vh,24px)}
.btn.mute[aria-pressed=true]{background:#7f1d1d;text-decoration:line-through}
.panel{background:#1e293b;border-radius:18px;padding:clamp(16px,3vh,32px);box-shadow:0 20px 60px rgba(0,0,0,.5);width:min(680px,92vw);max-height:92vh;overflow:auto}
.panel h2{color:#fcd34d;text-align:center;font-size:clamp(22px,4vh,40px);margin-bottom:1.6vh}
.howto-panel ol{padding-left:1.4em;display:grid;gap:.6em;font-size:clamp(15px,2.3vh,22px);line-height:1.35}
#howto{align-items:center;justify-content:center;background:#0f172a}
.row{display:flex;gap:12px;margin-top:2.4vh}.center{justify-content:center}
.col{display:grid;gap:12px;margin-top:2vh}
.layer{position:absolute;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;z-index:20}
.layer[hidden]{display:none}
.lead{text-align:center;font-size:clamp(16px,2.6vh,24px)}
.note{text-align:center;color:#cbd5e1;margin-top:1.4vh;font-size:clamp(13px,2vh,18px)}
.summary{background:#334155;border-radius:12px;padding:1.4vh 1.4em;margin-top:1.6vh;display:grid;grid-template-columns:1fr 1fr;gap:.4em 1em;font-size:clamp(15px,2.3vh,21px)}
.summary b{color:#fde047}
#game{background:#0f172a}
.wrap{display:flex;flex-direction:column;width:min(1100px,100%);margin:0 auto;padding:clamp(6px,1.4vh,16px) clamp(8px,2vw,24px);height:100%;gap:clamp(4px,1vh,10px)}
.top{display:flex;align-items:center;justify-content:center;position:relative}
.brand{text-align:center}
.brand h1{font-size:clamp(20px,4vh,40px);color:#fcd34d;line-height:1.1}
.day{color:#e2e8f0;font-size:clamp(12px,2vh,19px)}
.top .mute{position:absolute;right:0;top:0}
.stats{text-align:center;font-weight:700;color:#fde047;font-size:clamp(12px,1.9vh,19px)}
.modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.modes.small .btn{font-size:clamp(12px,1.8vh,18px);padding:.4em 1em}
.card{flex:1;min-height:0;overflow:auto;background:#1e293b;border-radius:16px;padding:clamp(8px,1.8vh,20px);display:flex;flex-direction:column;gap:clamp(4px,1vh,10px)}
.hud{display:grid;gap:4px;text-align:center}
.time{font-size:clamp(18px,3.2vh,32px);font-weight:800;color:#fcd34d}
.time.low{color:#f87171}
.meter{height:8px;background:#0f172a;border-radius:6px;overflow:hidden}
#timeBar{height:100%;width:100%;background:linear-gradient(90deg,#34d399,#fbbf24);transition:width 1s linear}
.sub{background:rgba(15,23,42,.8);border-radius:8px;padding:4px 8px;font-weight:700;color:#a5f3fc;font-size:clamp(12px,1.9vh,19px)}
.msg{white-space:pre-line;text-align:center;font-weight:800;color:#fde047;font-size:clamp(14px,2.3vh,22px);min-height:1.3em}
.msg.good{color:#6ee7b7}.msg.bad{color:#fca5a5}
.fact{text-align:center;color:#e2e8f0;font-size:clamp(13px,2vh,19px);min-height:1.2em;line-height:1.3}
.q{text-align:center;font-size:clamp(18px,3.4vh,34px);line-height:1.25;color:#f8fafc}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,1.2vh,14px);flex:1 0 auto;align-content:center}
.opt{background:#334155;border:3px solid transparent;border-radius:14px;font-weight:800;font-size:clamp(15px,2.8vh,28px);padding:.6em .8em;cursor:pointer;min-height:clamp(48px,9vh,110px);display:flex;align-items:center;gap:.6em;text-align:left}
.opt .k{flex:none;width:1.7em;height:1.7em;border-radius:50%;background:#0f172a;color:#94a3b8;display:inline-flex;align-items:center;justify-content:center;font-size:.7em}
.opt:hover:not([disabled]){background:#3f4f66}
.opt:focus{outline:none}
.opt:focus-visible,.opt.kfocus{border-color:#fde047}
.opt.right{background:#059669}.opt.wrong{background:#dc2626}
.opt[disabled]{cursor:default}
.opt.dim{opacity:.6}
.bottom{display:flex;gap:10px;justify-content:center}
@media (max-width:600px){.opts{grid-template-columns:1fr;align-content:start}.opt{min-height:46px;font-size:17px;padding:.45em .7em}.q{font-size:20px}.brand h1{font-size:24px;padding:0 44px}.stats,.sub{font-size:12px}.modes .btn{font-size:14px;padding:.4em .8em}.time{font-size:20px}.msg{font-size:15px}.fact{font-size:13px}.card{gap:6px;padding:10px}}
@media (max-height:500px){.title-icon{width:30vh}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}