:root{
  --bg:#0b0b0f; --panel:#16161d; --panel2:#1f1f29; --line:#34343f;
  --fg:#f5f5f7; --mut:#b4b4c0; --ye:#ffcb00; --ye2:#ffe066;
  --ok:#4ade80; --okbg:#0f3a22; --bad:#ff6b6b; --badbg:#451a1a; --storm:#7c3aed;
  --u:clamp(15px,2.2vmin + 9px,26px);   /* base font scales with the smaller viewport side */
  --r:14px;
}
body.live{--u:clamp(18px,2.6vmin + 10px,30px)}
body.live .hud{font-size:.85em}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden;
  font:600 var(--u)/1.25 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.app{position:fixed;inset:0;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--ye2);outline-offset:2px}
h1,h2,p{margin:0}

/* ---------- splash / menu / result ---------- */
.splash,.menu,.result{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(var(--u)*.7);padding:calc(var(--u)*.8);text-align:center;overflow:auto}
.splash img{height:min(34vh,240px);width:auto}
.menu{justify-content:center}
.menu>*{flex:0 0 auto}
.menu .hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*.5);width:100%}
.menu .hero img,.result .hero img{height:clamp(110px,26vh,290px);width:auto}
.logo{font-weight:900;letter-spacing:.02em;line-height:1.02;color:var(--ye);font-size:calc(var(--u)*2.1);text-transform:uppercase}
.logo small{display:block;font-size:.42em;letter-spacing:.14em;color:var(--fg);font-weight:700;margin-top:.3em}
.card{background:var(--panel);border:2px solid var(--line);border-radius:var(--r);padding:calc(var(--u)*.6) calc(var(--u)*.8);width:min(100%,560px)}
.rank{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;font-weight:800}
.rank b{color:var(--ye)}
.xp{height:.6em;background:var(--panel2);border-radius:99px;overflow:hidden;margin-top:.4em;border:1px solid var(--line)}
.xp i{display:block;height:100%;background:linear-gradient(90deg,var(--ye),var(--ye2));width:0;transition:width .5s}
.sub{color:var(--mut);font-weight:600;font-size:.82em}
.btn{background:var(--ye);color:#111;font-weight:900;border-radius:var(--r);min-height:calc(var(--u)*2.6);padding:0 calc(var(--u)*1.6);
  font-size:calc(var(--u)*1.15);box-shadow:0 4px 0 #a98600;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #a98600}
.btn.alt{background:var(--panel2);color:var(--fg);box-shadow:0 4px 0 #000;border:2px solid var(--line)}
.btn.big{min-width:min(100%,360px)}
.row{display:flex;gap:calc(var(--u)*.5);flex-wrap:wrap;justify-content:center;align-items:center;width:min(100%,640px)}
.chip{min-height:48px;min-width:48px;padding:0 calc(var(--u)*.8);border-radius:99px;border:2px solid var(--line);background:var(--panel);
  display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.9em}
.chip[aria-pressed="true"]{border-color:var(--ye);background:#2a2400;color:var(--ye2)}
.chip .dot{width:1.1em;height:1.1em;border-radius:50%;border:2px solid currentColor;display:inline-block;position:relative}
.chip[aria-pressed="true"] .dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:currentColor}
.seg{display:inline-flex;border:2px solid var(--line);border-radius:99px;overflow:hidden}
.seg button{min-height:44px;min-width:48px;padding:0 .9em;background:var(--panel);font-weight:800}
.seg button[aria-pressed="true"]{background:var(--ye);color:#111}
.badge{display:inline-block;background:var(--ye);color:#111;border-radius:99px;padding:.1em .7em;font-weight:900}
.note{color:var(--ye2);font-size:.9em}
.stats{display:grid;grid-template-columns:1fr auto;gap:.2em 1em;text-align:left;font-weight:700}
.stats b{text-align:right;color:var(--ye2)}

/* ---------- play ---------- */
.play{flex:1;min-height:0;display:flex;flex-direction:column;padding:calc(var(--u)*.5) calc(var(--u)*.7) calc(var(--u)*.6);gap:calc(var(--u)*.45)}
.hud{display:flex;align-items:center;justify-content:space-between;gap:.5em;flex:0 0 auto;font-weight:800}
.lives{display:flex;gap:.25em;align-items:center}
.pip{width:.95em;height:.95em;border-radius:50%;border:2px solid var(--ok);background:var(--ok);position:relative;transition:all .3s}
.pip.off{background:transparent;border-color:var(--bad);opacity:.8}
.pip.off::after{content:"×";position:absolute;inset:0;display:grid;place-items:center;color:var(--bad);font-size:.9em;line-height:1}
.score{font-size:1.25em;color:var(--ye);min-width:4ch;text-align:center}
.combo{background:var(--panel2);border:2px solid var(--line);border-radius:99px;padding:.05em .55em;font-size:.9em;white-space:nowrap}
.combo.hot{border-color:var(--ye);color:var(--ye2)}
.prog{color:var(--mut);font-size:.9em;white-space:nowrap}
.stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(var(--u)*.45)}
.zone{flex:0 0 clamp(110px,29dvh,300px);position:relative;display:grid;place-items:center;transition:flex-basis .25s;min-height:0}
.play[data-state="reveal"] .zone{flex-basis:clamp(84px,16dvh,170px)}
.zone svg{position:absolute;height:100%;max-width:100%;aspect-ratio:1;left:50%;transform:translateX(-50%)}
.zone .soly{position:absolute;inset:0;margin:auto;height:78%;width:auto;max-width:90%;z-index:2;transition:transform .25s;pointer-events:none}
.zone .soly.bump{transform:scale(1.08) rotate(-3deg)}
.bubble{position:absolute;z-index:3;right:0;top:0;max-width:46%;background:var(--fg);color:#111;border-radius:12px;padding:.3em .6em;font-size:.82em;font-weight:800;line-height:1.15;opacity:0;transform:translateY(4px);transition:all .2s}
.bubble.show{opacity:1;transform:none}
.bubble::after{content:"";position:absolute;left:14%;bottom:-8px;border:8px solid transparent;border-top-color:var(--fg);border-bottom:0}
#safe,#hole{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.qa{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(var(--u)*.45);overflow-y:auto;overscroll-behavior:contain}
.timer{display:flex;align-items:center;gap:.6em;flex:0 0 auto}
.timer .track{flex:1;height:.7em;background:var(--panel2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.timer .bar{height:100%;background:var(--ye);transform-origin:left;transform:scaleX(1)}
.timer.low .bar{background:var(--bad)}
.timer span{min-width:2.4ch;text-align:right;font-variant-numeric:tabular-nums;font-weight:900}
.timer.low span{color:var(--bad)}
.q{font-size:1.28em;font-weight:800;line-height:1.2;text-wrap:balance}
body.live .q{font-size:1.4em}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:calc(var(--u)*.45)}
.opt{display:flex;align-items:center;gap:.65em;text-align:left;background:var(--panel);border:2px solid var(--line);border-radius:var(--r);
  padding:.55em .8em;min-height:calc(var(--u)*2.7);font-weight:700;line-height:1.15;transition:background .12s,border-color .12s}
.opt:hover:not(:disabled){border-color:var(--ye)}
.opt .k{flex:0 0 auto;width:1.7em;height:1.7em;border-radius:8px;background:var(--panel2);display:grid;place-items:center;font-weight:900;color:var(--ye)}
.opt .t{flex:1}
.opt .m{flex:0 0 auto;font-weight:900;font-size:1.1em;min-width:1em}
.opt:disabled{cursor:default;opacity:1}
.opt.ok{background:var(--okbg);border-color:var(--ok)}
.opt.ok .m{color:var(--ok)}
.opt.bad{background:var(--badbg);border-color:var(--bad)}
.opt.bad .m{color:var(--bad)}
.opt.dim{opacity:.55}
.explain{background:var(--panel);border:2px solid var(--line);border-left:6px solid var(--ye);border-radius:var(--r);padding:.55em .8em;display:flex;gap:.8em;align-items:center;justify-content:space-between;flex:0 0 auto}
.explain[hidden]{display:none}
.explain .why{flex:1;font-weight:600;font-size:.95em}
.explain .verdict{display:block;font-weight:900;margin-bottom:.15em}
.explain .verdict.ok{color:var(--ok)} .explain .verdict.bad{color:var(--bad)}
.explain .btn{font-size:1em;min-height:48px;padding:0 1.2em;white-space:nowrap}
.autobar{height:4px;background:var(--ye);transform-origin:left;margin-top:.4em;border-radius:2px}
.pop{position:absolute;z-index:4;left:50%;top:30%;transform:translateX(-50%);font-weight:900;color:var(--ye);font-size:1.5em;text-shadow:0 2px 0 #000;pointer-events:none;opacity:0}
.pop.go{animation:pop .9s ease-out}
@keyframes pop{0%{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-30px)}}
.dlg{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;z-index:10;padding:1em}
.dlg[hidden]{display:none}
.dlg .card{width:min(100%,560px);text-align:left;max-height:90dvh;overflow:auto}
.dlg ul{margin:.4em 0 .8em;padding-left:1.2em;font-weight:600;font-size:.92em}
.dlg li{margin:.25em 0}

/* wide viewports (16:9, 21:9, 32:9): zone left, question right */
@media (min-aspect-ratio:13/10){
  .stage{flex-direction:row;gap:calc(var(--u)*.8)}
  .zone{flex:0 0 clamp(200px,34%,480px);align-self:stretch}
  .play[data-state="reveal"] .zone{flex-basis:clamp(200px,34%,480px)}
  .zone svg{height:auto;width:100%;max-height:100%;aspect-ratio:1}
  .zone .soly{height:66%}
  .menu .hero{flex-direction:row;gap:calc(var(--u)*1.2)}
  .qa{justify-content:center}
  .menu{justify-content:center}
  .q{font-size:1.5em}
}
/* very wide */
@media (min-aspect-ratio:21/9){ .zone{flex-basis:26%} .q{font-size:1.3em} }
/* square-ish: keep zone compact so text always fits */
@media (min-aspect-ratio:9/10) and (max-aspect-ratio:13/10){
  body.live{--u:clamp(16px,2.2vmin + 8px,25px)}
  .zone{flex-basis:clamp(96px,17dvh,190px)}
  .play[data-state="reveal"] .zone{flex-basis:clamp(56px,9dvh,90px)}
}
/* short viewports */
@media (max-height:520px){ .logo{font-size:calc(var(--u)*1.5)} .menu .hero img{height:32vh} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.paused *{animation-play-state:paused!important}
/* short portrait phones / tiny frames: keep explanation + next button on screen */
@media (max-height:700px){
  .opt{min-height:calc(var(--u)*2.2);padding:.4em .7em}
  .q{font-size:1.12em}
  .zone{flex-basis:clamp(84px,18dvh,150px)}
  .play[data-state="reveal"] .zone{flex-basis:clamp(44px,8dvh,72px)}
  .explain{padding:.4em .6em}
}

/* ---------- 3D scene (lazy, scene3d.js) ---------- */
/* (order matters: portrait defaults first, ratio/live overrides below) */
.zone .scene{position:absolute;inset:0;display:none;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(ellipse at 50% 58%,#202433 0%,#12141c 55%,#0b0b0f 100%);border:1px solid var(--line)}
.zone.has3d .scene{display:block}
.zone.has3d>svg{display:none}
.zone.has3d{flex-basis:clamp(170px,37dvh,380px)}
.play[data-state="reveal"] .zone.has3d{flex-basis:clamp(150px,34dvh,350px)}
.zone.has3d .soly{inset:auto auto 1% 1%;margin:0;height:30%;width:auto;max-width:34%}
.zone.has3d .bubble{left:34%;right:auto;top:2%;max-width:56%}
.s3{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.s3:active{cursor:grabbing}
.s3v,.s3o{position:absolute;inset:0}
.s3o{pointer-events:none;overflow:hidden}
.s3c{width:100%;height:100%;display:block}
.s3l{position:absolute;left:0;top:0;white-space:nowrap;background:rgba(245,245,247,.95);color:#111;border-radius:99px;padding:.08em .55em;
  font-size:max(13px,calc(var(--u)*.74));font-weight:800;line-height:1.25;will-change:transform;box-shadow:0 0 0 2px rgba(0,0,0,.75),0 2px 4px rgba(0,0,0,.5)}
.s3l.cmp{background:#9aa3b2;color:#111;min-width:1.5em;text-align:center}
.s3l.zn,.s3l.rg{background:rgba(12,12,20,.92);color:#fff;font-weight:700;border:1px solid rgba(255,255,255,.55)}
.s3l.bl,.s3l.bv{background:rgba(12,12,20,.92);color:#fff;font-weight:800;border:1px solid rgba(255,255,255,.3)}
.s3l.bv{color:var(--ye2)}
.s3l.ltr{background:var(--ye);color:#111;font-size:max(16px,calc(var(--u)*1));font-weight:900;width:1.6em;height:1.6em;padding:0;display:grid;place-items:center;border:2px solid #111}
.s3l.ltr.ok{background:var(--ok)} .s3l.ltr.bad{background:var(--bad)} .s3l.ltr.dim{opacity:.5}
body.live .s3l{font-size:max(14px,calc(var(--u)*.74))}
@media (max-aspect-ratio:13/10){ body.live .play[data-state="reveal"] .zone.has3d{flex-basis:clamp(110px,22dvh,230px)} }
@media (min-aspect-ratio:13/10){
  .zone.has3d,.play[data-state="reveal"] .zone.has3d{flex-basis:clamp(260px,46%,640px)}
  .zone.has3d .soly{height:26%}
}
@media (min-aspect-ratio:9/10) and (max-aspect-ratio:13/10){
  .zone.has3d{flex-basis:clamp(120px,31dvh,260px)}
  .play[data-state="reveal"] .zone.has3d{flex-basis:clamp(100px,25dvh,200px)}
}
@media (max-height:700px) and (max-aspect-ratio:9/10){
  .zone.has3d{flex-basis:clamp(130px,29dvh,230px)}
  .play[data-state="reveal"] .zone.has3d{flex-basis:clamp(110px,24dvh,190px)}
}