:root{--bg:#07080f;--panel:#121626e0;--panel-border:#7d8cc838;--text:#e8ecf5;--text-dim:#9aa3ba;--green:#1db35e;--yellow:#c9a227;--absent:#2c313c;--accent:#6ec3ff;font-size:16px}*{box-sizing:border-box}html,body{overscroll-behavior:none;background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;margin:0;font-family:Avenir Next,Helvetica Neue,Arial,sans-serif;overflow:hidden}#scene{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}.vignette{pointer-events:none;background:radial-gradient(#0000 52%,#00000580 100%);position:fixed;inset:0}.hud-header{padding:calc(14px + env(safe-area-inset-top,0px)) calc(22px + env(safe-area-inset-right,0px)) 14px calc(22px + env(safe-area-inset-left,0px));z-index:10;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.hud-header>*{pointer-events:auto}.title{letter-spacing:.42em;text-indent:.42em;background:linear-gradient(110deg,#e8ecf5 30%,#6ec3ff 50%,#c792ff 70%);-webkit-text-fill-color:transparent;-webkit-user-select:none;user-select:none;white-space:nowrap;-webkit-background-clip:text;background-clip:text;margin:0;font-size:1.45rem;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}.title span{font-weight:300}.header-actions{gap:10px;display:flex}.icon-btn{border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;touch-action:manipulation;background:#141a2e99;border-radius:12px;place-items:center;width:42px;height:42px;transition:background .15s,transform .1s;display:grid}.icon-btn:hover{background:#2e3a60bf}.icon-btn:active{transform:scale(.93)}.icon-btn svg{width:21px;height:21px;fill:var(--text-dim);stroke:var(--text-dim)}.icon-btn:hover svg{fill:var(--text);stroke:var(--text)}#btn-sound .slash{display:none}#btn-sound.muted .slash{display:block}#btn-sound.muted .wave{display:none}#toasts{top:calc(76px + env(safe-area-inset-top,0px));z-index:30;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{color:#10131f;letter-spacing:.04em;opacity:0;background:#e8ecf5f5;border-radius:10px;padding:10px 18px;font-weight:600;transition:opacity .22s,transform .22s;transform:translateY(-8px)scale(.96);box-shadow:0 8px 28px #00000073}.toast.show{opacity:1;transform:translateY(0)scale(1)}#modal-root{z-index:40;display:none;position:fixed;inset:0}#modal-root.open{display:block}.modal-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#03040a8c;animation:.2s fade-in;position:absolute;inset:0}.modal-panel{width:min(440px,100vw - 40px);max-height:calc(100vh - 80px);max-height:calc(100dvh - 60px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:18px;padding:26px 28px;animation:.28s cubic-bezier(.2,.9,.3,1.2) panel-in;position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:0 24px 80px #0009}@keyframes fade-in{0%{opacity:0}}@keyframes panel-in{0%{opacity:0;transform:translate(-50%,-47%)scale(.94)}}.modal-panel h2{letter-spacing:.06em;margin:0 0 10px;font-size:1.3rem}.modal-panel h3{text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);margin:20px 0 10px;font-size:.85rem}.modal-panel p{color:var(--text-dim);margin:8px 0;line-height:1.5}.modal-panel p strong,.modal-panel p b{color:var(--text)}.modal-close{width:32px;height:32px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:9px;font-size:1.4rem;line-height:1;position:absolute;top:14px;right:16px}.modal-close:hover{color:var(--text);background:#7886b42e}.help-rules{color:var(--text-dim);margin:10px 0;padding-left:20px;line-height:1.65}.mini-row{gap:5px;margin-top:16px;display:flex}.mini-tile{background:#1d2436;border:1px solid #7d8cc84d;border-radius:7px;place-items:center;width:36px;height:36px;font-weight:700;display:grid}.mini-tile.correct{background:var(--green);border-color:#0000}.mini-tile.present{background:var(--yellow);border-color:#0000}.mini-tile.absent{background:var(--absent);border-color:#0000}.help-footnote{margin-top:18px;font-size:.9rem}.end-sub{font-size:1.02rem}.end-answer strong{color:var(--accent);letter-spacing:.12em}.stats-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 4px;display:grid}.stat{text-align:center;background:#222a468c;border-radius:12px;padding:12px 6px}.stat b{font-size:1.6rem;font-weight:700;display:block}.stat span{text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-size:.68rem}.dist{flex-direction:column;gap:6px;display:flex}.dist-row{align-items:center;gap:10px;display:flex}.dist-label{text-align:right;width:14px;color:var(--text-dim);font-weight:600}.dist-bar{background:var(--absent);text-align:right;border-radius:6px;min-width:30px;padding:3px 9px;font-size:.85rem;font-weight:700;transition:width .4s}.dist-bar.highlight{background:var(--green)}.modal-actions{gap:12px;margin-top:24px;display:flex}.btn{letter-spacing:.05em;cursor:pointer;touch-action:manipulation;border:none;border-radius:12px;flex:1;padding:13px 18px;font-size:1rem;font-weight:700;transition:transform .1s,filter .15s}.btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.97)}.btn-primary{color:#fff;background:linear-gradient(135deg,#1db35e,#15945c)}.btn-secondary{color:var(--accent);background:#6ec3ff29;border:1px solid #6ec3ff66}.hud-footer{bottom:calc(12px + env(safe-area-inset-bottom,0px));text-align:center;letter-spacing:.06em;color:#9aa3ba8c;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:.78rem;position:fixed;left:0;right:0}.hud-footer b{color:#e8ecf5b3}.hud-footer .hint-touch{display:none}@media (pointer:coarse){.hud-footer .hint-keys{display:none}.hud-footer .hint-touch{display:inline}}@media (width<=600px){.title{letter-spacing:.18em;text-indent:.18em;font-size:.95rem;position:static;transform:none}.hud-header{padding:calc(10px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 10px calc(12px + env(safe-area-inset-left,0px))}.icon-btn{width:38px;height:38px}.header-actions{gap:6px}#toasts{top:calc(64px + env(safe-area-inset-top,0px))}.modal-panel{padding:22px 20px}}
