/* Layout: one-screen arcade card; big number, big keypad, stopwatch always visible */
:root{
  --bg:#f3f6ee; --panel:#ffffff; --fg:#1c2a1f; --muted:#6b7a6e;
  --accent:#1f7a4d; --accent-fg:#ffffff; --sun:#f5b53f; --line:#d9e1d4;
  --good:#1f7a4d; --bad:#c8473c; --good-bg:#e2f3e8; --bad-bg:#fbe4e1;
  --display:"Fredoka","Nunito",system-ui,sans-serif; --body:"Nunito",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#141a16; --panel:#1e2621; --fg:#eef3ea; --muted:#9aa89e; --accent:#3fb278; --accent-fg:#0f1a13;
  --sun:#f5b53f; --line:#30403a; --good:#3fb278; --bad:#ef7a6e; --good-bg:#1d3a2a; --bad-bg:#44241f; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#141a16; --panel:#1e2621; --fg:#eef3ea; --muted:#9aa89e; --accent:#3fb278; --accent-fg:#0f1a13;
  --sun:#f5b53f; --line:#30403a; --good:#3fb278; --bad:#ef7a6e; --good-bg:#1d3a2a; --bad-bg:#44241f; color-scheme:dark }
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;
  padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:max(24px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));min-height:100vh}
.wrap{max-width:560px;margin:0 auto;display:grid;gap:14px}
h1{font-family:var(--display);font-weight:700;font-size:2rem;margin:0;text-wrap:balance;letter-spacing:.01em}
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:900}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px}
.btn{font-family:var(--display);font-weight:700;font-size:1.1rem;border:0;border-radius:14px;padding:14px 18px;min-height:48px;cursor:pointer;background:var(--accent);color:var(--accent-fg);touch-action:manipulation}
.btn.alt{background:transparent;color:var(--fg);border:2px solid var(--line)}
.btn:focus-visible,.key:focus-visible,.player:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.players{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.player{display:grid;gap:4px;text-align:left;border:2px solid var(--line);background:var(--panel);color:var(--fg);border-radius:16px;padding:14px;cursor:pointer;font-family:var(--body)}
.player .name{font-family:var(--display);font-size:1.4rem;font-weight:700}
.player .best{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.player .mast{font-size:.8rem;color:var(--accent);font-weight:900}
.hud{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums}
.hud .clock{font-family:var(--display);font-size:2.2rem;font-weight:700;color:var(--accent)}
.hud .prog{color:var(--muted);font-weight:900}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}
.q{font-family:var(--display);font-size:clamp(3rem,16vw,5rem);font-weight:700;text-align:center;line-height:1.1;padding:10px 0 0;font-variant-numeric:tabular-nums}
.q.small-q{font-size:clamp(2.4rem,12vw,3.6rem)}
.ans{font-family:var(--display);font-size:clamp(2.4rem,12vw,3.6rem);text-align:center;min-height:1.2em;font-variant-numeric:tabular-nums;color:var(--accent)}
.ans:empty::before{content:"?";color:var(--muted)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{font-family:var(--display);font-size:1.7rem;font-weight:700;border-radius:14px;padding:16px 0;min-height:56px;background:var(--bg);color:var(--fg);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.key.go{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.key.del{color:var(--bad)}
.flash{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;display:grid;place-items:center;font-family:var(--display);font-size:9rem;font-weight:700;color:#fff}
.flash.good{background:var(--good);opacity:.3}.flash.bad{background:var(--bad);opacity:.35}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:1.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.stat span{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:900}
.list{display:grid;gap:6px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;font-variant-numeric:tabular-nums}
.row.ok{background:var(--good-bg)}.row.no{background:var(--bad-bg)}
.row .t{color:var(--muted);font-size:.9rem;font-weight:700}
.row .yours{font-size:.85rem;color:var(--bad);font-weight:900}
.steps{display:grid;gap:10px}
.step{padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:1.15rem;line-height:1.4}
.step strong{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:1.3rem}
.step.final{background:var(--good-bg);border-color:var(--good)}
.strat{display:inline-block;background:var(--sun);color:#1c2a1f;font-weight:900;font-size:.8rem;padding:4px 10px;border-radius:99px;letter-spacing:.04em}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions .btn{flex:1}
.lb{display:grid;gap:6px}
.lb .row{background:var(--bg)}
.lb .row b{font-family:var(--display)}
.small{font-size:.85rem;color:var(--muted);margin:0}
.banner{background:var(--sun);color:#1c2a1f;border-radius:14px;padding:12px 14px;font-weight:900;text-align:center}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }
.stack-4{display:grid;gap:4px}.stack-10{display:grid;gap:10px}.stack-12{display:grid;gap:12px}.right{text-align:right}