:root{
  color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#06101d;
  color:#f7fbff;
  --surface:#0b1727;
  --surface-2:#101f31;
  --line:#29445c;
  --muted:#9bb0c3;
  --accent:#78e4ff;
  --accent-strong:#15b9e6;
  --good:#83f0b4;
  --bad:#ff9b9b;
  --focus:#fff08c;
  --fx-fast:140ms;
  --fx-emphasis:240ms;
  --safe-top:max(.65rem,env(safe-area-inset-top));
  --safe-right:max(.65rem,env(safe-area-inset-right));
  --safe-bottom:max(.65rem,env(safe-area-inset-bottom));
  --safe-left:max(.65rem,env(safe-area-inset-left));
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#06101d}
body{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overflow-x:hidden;
  background:
    radial-gradient(circle at 15% 5%,rgba(21,185,230,.16),transparent 32rem),
    radial-gradient(circle at 90% 85%,rgba(109,96,255,.12),transparent 28rem),
    #06101d;
}
html[data-reckon-active="true"],html[data-reckon-active="true"] body{height:100%;overflow:hidden}
button,select,input{font:inherit}
button,select{color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.game-shell{
  position:relative;
  width:min(100%,42rem);
  max-height:calc(100svh - var(--safe-top) - var(--safe-bottom));
  min-height:min(42rem,calc(100svh - var(--safe-top) - var(--safe-bottom)));
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:.6rem;
  padding:clamp(.7rem,2.3vw,1.25rem);
  border:1px solid rgba(117,191,224,.35);
  border-radius:clamp(1rem,3vw,1.5rem);
  background:linear-gradient(155deg,rgba(15,31,50,.98),rgba(7,18,31,.99));
  box-shadow:0 1.5rem 5rem rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.04);
  overflow:hidden;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:.7rem;min-width:0}
.brand-lockup{display:flex;align-items:center;gap:.65rem;min-width:0}
.brand-mark{
  flex:0 0 auto;width:2.35rem;height:2.35rem;display:grid;place-items:center;
  border:1px solid rgba(120,228,255,.55);border-radius:.75rem;
  background:linear-gradient(145deg,rgba(120,228,255,.14),rgba(21,185,230,.03));
  color:var(--accent);font-size:1.25rem;font-weight:900;
}
.eyebrow,.panel-kicker,.hud-label{display:block;text-transform:uppercase;letter-spacing:.13em;font-size:.62rem;font-weight:800;color:#89bed3}
.brand-lockup h1{margin:.08rem 0 0;font-size:clamp(1.25rem,5vw,1.75rem);line-height:1;letter-spacing:-.045em;white-space:nowrap}
.shell-actions{display:flex;align-items:center;gap:.35rem}
.icon-button{
  min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:.75rem;
  background:#102239;color:#eaf8ff;font-weight:850;
}
.icon-button:hover:not(:disabled){background:#17304b;border-color:#47728e}

.hud{
  display:grid;grid-template-columns:1.15fr .9fr .95fr;gap:.42rem;
  border-block:1px solid rgba(85,126,151,.25);padding:.48rem 0;
}
.hud-cell{min-width:0;padding:.1rem .48rem;border-left:1px solid rgba(85,126,151,.2)}
.hud-cell:first-child{border-left:0;padding-left:.15rem}
.hud-cell strong{display:block;margin-top:.08rem;font-size:clamp(1rem,4.5vw,1.35rem);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-cell small{display:block;margin-top:.08rem;color:var(--muted);font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timer-track{display:block;height:.22rem;margin-top:.3rem;border-radius:999px;background:#203248;overflow:hidden}
#timerFill{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent-strong),var(--accent));transform-origin:left center;transition:transform .08s linear,background var(--fx-emphasis) ease}
.game-shell[data-timer-urgency="medium"] #timerFill{background:linear-gradient(90deg,#f1c96a,#ffd889)}
.game-shell[data-timer-urgency="high"] #timerFill{background:linear-gradient(90deg,#ff8e7e,#ffc07a)}
.game-shell[data-timer-urgency="high"] #timerValue{color:#ffd2c9}

.game-stage{position:relative;min-height:0;display:grid;align-items:stretch;overflow:hidden}
.state-panel,.play-panel{min-height:0;height:100%}
.state-panel{display:grid;align-content:center;justify-items:center;gap:clamp(.55rem,2.2vh,1rem);text-align:center;padding:clamp(.55rem,2.4vh,1.35rem) clamp(.4rem,3vw,1.2rem)}
.state-panel h2{margin:0;max-width:18ch;font-size:clamp(1.45rem,6vw,2.25rem);line-height:1.05;letter-spacing:-.045em}
.state-panel p{margin:0;max-width:42ch;color:#b5c7d5;line-height:1.45;font-size:clamp(.84rem,3vw,.98rem)}
.notice{
  position:absolute;z-index:7;left:.45rem;right:.45rem;top:.25rem;margin:0;padding:.55rem .7rem;
  border:1px solid #6d8798;border-radius:.75rem;background:#142638;color:#dcebf3;font-size:.76rem;text-align:center;
}
.pulse-orbit{display:flex;align-items:center;justify-content:center;gap:.45rem;color:var(--accent);font-size:clamp(1.7rem,7vw,2.7rem);font-weight:900;font-variant-numeric:tabular-nums}
.pulse-orbit span:nth-child(odd){width:2.2em;height:2.2em;display:grid;place-items:center;border:1px solid rgba(120,228,255,.42);border-radius:50%;background:rgba(120,228,255,.06)}
.control-hints{display:grid;gap:.3rem;margin:0;padding:0;list-style:none;color:#a9bdcb;font-size:.76rem}
kbd{display:inline-grid;place-items:center;min-width:1.55rem;height:1.55rem;margin-right:.18rem;border:1px solid #526b7e;border-bottom-width:2px;border-radius:.35rem;background:#132538;color:#f4fbff;font:700 .72rem ui-monospace,SFMono-Regular,Consolas,monospace}
.start-actions,.result-actions{width:min(100%,28rem);display:grid;grid-template-columns:1.2fr .9fr;gap:.5rem}
.primary-action,.secondary-action{min-height:48px;border-radius:.9rem;padding:.7rem .9rem;font-weight:850;letter-spacing:.01em}
.primary-action{
  min-width:0;border:1px solid #79e7ff;background:linear-gradient(135deg,#0b93bd,#146ab8);color:white;box-shadow:0 .55rem 1.5rem rgba(5,95,149,.24);
}
.secondary-action{min-width:0;border:1px solid #53758b;background:#11283d;color:#e9f9ff}
.primary-action:hover:not(:disabled),.secondary-action:hover:not(:disabled){filter:brightness(1.08)}

.countdown-panel strong{font-size:clamp(5rem,28vw,9rem);line-height:.8;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 2rem rgba(120,228,255,.18)}
.play-panel{display:grid;align-items:center;padding:.1rem}
.question-content{display:grid;align-content:center;gap:clamp(.55rem,2.4vh,1rem);min-height:0;height:100%;padding:clamp(.25rem,1.7vh,.75rem) .05rem}
.question-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;color:#9fb4c4;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.tier-chip{padding:.26rem .55rem;border:1px solid #456b83;border-radius:999px;background:#12263a;color:#d6f4ff}
.equation{
  margin:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:clip;
  font-size:clamp(2.7rem,13vw,5.3rem);line-height:1.05;font-weight:900;letter-spacing:-.055em;font-variant-numeric:tabular-nums;
  color:#f9fcff;text-shadow:0 .1rem 1rem rgba(120,228,255,.08);
}
.answer-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.42rem,2vw,.75rem)}
.answer-button{
  position:relative;min-width:0;min-height:clamp(64px,12vh,88px);padding:.65rem .25rem;
  border:1px solid #365975;border-radius:clamp(.8rem,3vw,1.05rem);background:linear-gradient(160deg,#132b42,#0d2034);color:#f8fcff;
  display:grid;place-items:center;box-shadow:inset 0 1px rgba(255,255,255,.04),0 .3rem .8rem rgba(0,0,0,.18);
  transition:transform var(--fx-fast) ease;
}
.answer-button:hover:not(:disabled){transform:translateY(-2px);border-color:#68b9dd;background:#16344f}
.answer-button:active:not(:disabled){transform:translateY(0)}
.choice-value{font-size:clamp(1.65rem,7.5vw,2.6rem);font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.choice-key{position:absolute;left:.45rem;top:.38rem;min-width:1.25rem;height:1.25rem;display:grid;place-items:center;border-radius:.35rem;background:rgba(255,255,255,.08);color:#9eb8c8;font:800 .62rem ui-monospace,SFMono-Regular,Consolas,monospace}
.choice-state{position:absolute;right:.45rem;top:.36rem;min-width:1.2rem;font-size:.88rem;font-weight:900}
.answer-button.is-correct{border-color:#76e4aa;background:linear-gradient(160deg,#123d36,#0d2b2a)}
.answer-button.is-wrong{border-color:#ff9393;background:linear-gradient(160deg,#49262d,#2d1b25)}
.answer-button.is-muted{opacity:.58}
.feedback{min-height:1.35rem;margin:0;text-align:center;color:#b7c9d7;font-size:.82rem;font-weight:750}
.feedback.is-correct{color:var(--good)}
.feedback.is-wrong{color:#ffd0d0}

.pause-panel{background:radial-gradient(circle at 50% 45%,rgba(120,228,255,.08),transparent 15rem)}
.pause-shield{display:grid;place-items:center;width:5.2rem;height:5.2rem;border-radius:50%;border:1px solid #5f8296;background:#10283b;color:#8ddff5;font-size:1.2rem;letter-spacing:.2em}
.result-score-row{display:flex;align-items:baseline;justify-content:center;gap:.55rem}
.result-score-row strong{font-size:clamp(3.4rem,16vw,6rem);line-height:.85;font-variant-numeric:tabular-nums;letter-spacing:-.07em}
.result-score-row span{padding:.22rem .48rem;border:1px solid #537186;border-radius:999px;color:#a8c1d0;font-size:.66rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.result-score-row span.is-best{border-color:#76e4aa;color:#abffd1;background:rgba(118,228,170,.08)}
.result-grid{width:min(100%,31rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.38rem;margin:0}
.result-grid div{min-width:0;padding:.48rem .28rem;border:1px solid rgba(69,96,117,.45);border-radius:.72rem;background:rgba(10,27,43,.58)}
.result-grid dt{font-size:.6rem;color:#8ea9ba;text-transform:uppercase;letter-spacing:.07em}
.result-grid dd{margin:.18rem 0 0;font-size:.93rem;font-weight:850;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-note{font-size:.72rem!important}

.tutorial-panel{
  position:fixed;inset:auto;z-index:21;width:min(calc(100% - 1rem),34rem);max-height:min(calc(100dvh - 1rem),43rem);overflow:auto;
  padding:clamp(.7rem,2.5vw,1rem);color:#f7fbff;border:1px solid #53758b;border-radius:1rem;background:rgba(8,24,38,.99);box-shadow:0 1rem 3rem rgba(0,0,0,.45);
}
.tutorial-panel[open]{display:grid;gap:.7rem}.tutorial-panel::backdrop{background:rgba(1,8,15,.76);backdrop-filter:blur(3px)}
.tutorial-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.tutorial-head h2{margin:.08rem 0 0;font-size:1.45rem;letter-spacing:-.03em}.tutorial-lead{margin:0;color:#b7cbd8;font-size:.82rem;line-height:1.45}
.tutorial-presentation-mount{min-height:12.5rem;display:grid;place-items:center;overflow:hidden;border-radius:.9rem;background:rgba(5,16,28,.44)}
.tutorial-rules{display:grid;gap:.45rem}.tutorial-rules article{display:grid;grid-template-columns:2.2rem 1fr;align-items:start;gap:.6rem;padding:.55rem;border:1px solid rgba(83,117,139,.45);border-radius:.75rem;background:rgba(16,40,61,.55)}
.tutorial-rules article>b{display:grid;place-items:center;min-height:2.2rem;border:1px solid rgba(120,228,255,.38);border-radius:.6rem;color:var(--accent);font-size:.78rem}.tutorial-rules article div{display:grid;gap:.15rem}.tutorial-rules strong{font-size:.82rem}.tutorial-rules span{color:#a9c2d2;font-size:.72rem;line-height:1.4}
.tutorial-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:.5rem}.tutorial-actions button{min-height:44px}

.settings-panel{
  position:fixed;inset:auto;z-index:20;width:min(calc(100% - 1.5rem),22rem);max-height:min(calc(100dvh - 1.5rem),36rem);overflow:auto;
  grid-template-columns:1fr minmax(8rem,10rem);align-items:center;gap:.65rem;padding:.8rem;color:#f7fbff;
  border:1px solid #53758b;border-radius:1rem;background:rgba(8,24,38,.98);box-shadow:0 1rem 3rem rgba(0,0,0,.45);
}
.settings-panel[open]{display:grid}.settings-panel::backdrop{background:rgba(1,8,15,.72);backdrop-filter:blur(3px)}
.settings-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.settings-panel select{min-height:44px;border:1px solid #496980;border-radius:.65rem;background:#10263a;padding:.45rem .55rem}
.toggle-row{display:contents}.toggle-row input{justify-self:end;width:1.25rem;height:1.25rem}
.audio-preview-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.audio-preview-actions button{min-height:44px;border:1px solid #496980;border-radius:.65rem;background:#11283d;color:#e9f9ff;font-weight:750}
.audio-status{grid-column:1/-1;min-height:1.2rem;margin:0;color:#a9c2d2;font-size:.72rem}
.icon-button[aria-pressed="true"]{border-color:#a7bfcb;background:#1e2a35;color:#aebdc5}
.is-answer-pulse{animation:reckon-answer-pulse var(--fx-fast) ease-out}
.is-score-pulse{animation:reckon-score-pulse var(--fx-fast) ease-out}
.is-tier-pulse{animation:reckon-tier-pulse var(--fx-emphasis) ease-out}
.is-record-pulse{animation:reckon-record-pulse 420ms ease-out}
@keyframes reckon-answer-pulse{50%{transform:scale(1.018);text-shadow:0 0 1.15rem rgba(120,228,255,.28)}}
@keyframes reckon-score-pulse{50%{transform:scale(1.08);color:var(--accent)}}
@keyframes reckon-tier-pulse{50%{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(120,228,255,.08)}}
@keyframes reckon-record-pulse{45%{transform:scale(1.045);text-shadow:0 0 1.5rem rgba(131,240,180,.34)}}

.game-tip{position:absolute;left:50%;bottom:.7rem;z-index:18;display:flex;align-items:center;gap:.5rem;width:min(calc(100% - 1.4rem),30rem);padding:.62rem .8rem;border:1px solid #6bcce7;border-radius:999px;background:#0b2a3a;color:#e9fbff;box-shadow:0 .8rem 2rem rgba(0,0,0,.35);opacity:0;transform:translate(-50%,.5rem);transition:opacity .2s ease,transform .2s ease;cursor:pointer;font-size:.75rem}
.game-tip.is-visible{opacity:1;transform:translate(-50%,0)}
.game-tip.is-fading{opacity:0;transform:translate(-50%,.3rem)}

html[data-motion-profile="instant"] *,html[data-motion-profile="instant"] *::before,html[data-motion-profile="instant"] *::after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}

@media(max-width:360px){
  body{padding:.35rem}
  .game-shell{max-height:calc(100svh - .7rem);min-height:calc(100svh - .7rem);padding:.55rem;border-radius:1rem;gap:.38rem}
  .brand-mark{display:none}.brand-lockup h1{font-size:1.15rem}.eyebrow{display:none}
  .icon-button{min-width:44px;padding:0 .42rem}
  .tutorial-panel{width:calc(100% - .7rem);max-height:calc(100dvh - .7rem);padding:.55rem;gap:.48rem}.tutorial-presentation-mount{min-height:11.5rem}.tutorial-rules{gap:.3rem}.tutorial-rules article{padding:.42rem}.tutorial-actions{gap:.35rem}
  .hud{gap:.2rem;padding:.34rem 0}.hud-cell{padding-inline:.3rem}.hud-label{font-size:.54rem}.hud-cell small{font-size:.6rem}
  .state-panel{gap:.46rem;padding:.35rem .15rem}.control-hints{gap:.2rem;font-size:.68rem}
  .start-actions,.result-actions{grid-template-columns:1fr;gap:.35rem;width:min(100%,15rem)}
  .primary-action,.secondary-action{min-height:44px;padding:.55rem .65rem;font-size:.78rem}
  .equation{font-size:clamp(2.5rem,14vw,3.3rem)}
  .answer-group{gap:.34rem}.answer-button{min-height:62px;border-radius:.72rem}.choice-value{font-size:1.62rem}.choice-key{left:.3rem;top:.28rem}.choice-state{right:.3rem;top:.28rem}
  .result-grid{gap:.25rem}.result-grid div{padding:.38rem .18rem}.result-grid dt{font-size:.52rem}.result-grid dd{font-size:.78rem}
}

@media(max-height:650px) and (orientation:landscape){
  body{padding:.35rem}
  .game-shell{width:min(100%,52rem);max-height:calc(100svh - .7rem);min-height:calc(100svh - .7rem);padding:.5rem .7rem;gap:.3rem}
  .topbar{min-height:44px}.brand-mark{width:2rem;height:2rem}.brand-lockup h1{font-size:1.2rem}.eyebrow{font-size:.52rem}
  .hud{padding:.25rem 0}.hud-cell strong{font-size:1rem}.hud-cell small{font-size:.58rem}.hud-label{font-size:.52rem}
  .state-panel{gap:.34rem;padding:.2rem}.state-panel h2{font-size:1.45rem}.state-panel p{font-size:.75rem}.control-hints{grid-auto-flow:column;gap:.8rem;font-size:.62rem}
  .question-content{grid-template-columns:minmax(0,.85fr) minmax(18rem,1.25fr);grid-template-rows:auto 1fr auto;column-gap:1rem;row-gap:.35rem;align-items:center;padding:.15rem}
  .question-head{grid-column:1;grid-row:1}.equation{grid-column:1;grid-row:2;font-size:clamp(2.5rem,7vw,4.1rem)}
  .answer-group{grid-column:2;grid-row:1/3;align-self:center}.answer-button{min-height:70px}.feedback{grid-column:1/-1;grid-row:3}
  .result-panel{grid-template-columns:1fr 1.4fr;grid-template-rows:auto auto auto;column-gap:1rem;align-content:center}.result-panel>.panel-kicker,.result-panel>h2{grid-column:1}.result-score-row{grid-column:1}.result-grid{grid-column:2;grid-row:1/4}.result-note,.result-actions{grid-column:1/-1}
}

@media(min-width:700px){
  .game-shell{padding:1.15rem 1.3rem}.answer-button{min-height:84px}.game-stage{border-radius:1rem;background:rgba(7,20,34,.22)}
}