/* VOICE: playful, tactile, like a toy you hold.
   IDEA: a pocket game console — plastic housing, recessed screen, chunky buttons.
   PICTURE: the live game field itself, large, inside the housing.
   COLOUR and TYPE: grass-green ground, warm plastic shell, moss screen, apple-red accent; Silkscreen pixel titles + Rubik.
   LAYOUT: one centered console; HUD above the screen, buttons and help below. */
:root{color-scheme:light dark;
--bg:light-dark(#3f7d3c,#14301a);--shell:light-dark(#efe7d4,#2a2a26);--shell2:light-dark(#d9cfb7,#1d1d1a);
--ink:light-dark(#2b2a22,#ece6d6);--muted:light-dark(#6d6656,#a49d8b);--red:#ff4d3d;--bezel:light-dark(#3a3a33,#0c0c0a)}
:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box;min-width:0}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:16px/1.5 Rubik,system-ui,sans-serif;overflow-x:clip;
background-image:radial-gradient(circle at 20% 10%,rgba(255,255,255,.12),transparent 40%),radial-gradient(circle at 85% 90%,rgba(0,0,0,.18),transparent 45%)}
.wrap{display:flex;justify-content:center;padding:clamp(16px,4vw,48px) 12px}
.console{width:min(100%,520px);background:linear-gradient(180deg,var(--shell),var(--shell2));border-radius:28px 28px 64px 28px;
padding:18px 18px 26px;box-shadow:0 2px 0 rgba(255,255,255,.5) inset,0 -6px 0 rgba(0,0,0,.12) inset,0 24px 50px rgba(0,0,0,.35)}
.brand{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 6px 10px}
h1{font:700 clamp(22px,5vw,30px)/1.05 Silkscreen,monospace;margin:0;letter-spacing:.5px}
h1 span{color:var(--red)}
.icons{display:flex;gap:8px}
.ib{width:44px;height:44px;border-radius:12px;border:0;background:var(--shell2);color:var(--ink);font-size:18px;cursor:pointer;
box-shadow:0 3px 0 rgba(0,0,0,.18)}
.ib:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.ib:focus-visible,.btn:focus-visible,.seg button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.bezel{background:var(--bezel);border-radius:16px;padding:12px;box-shadow:0 2px 6px rgba(0,0,0,.4) inset}
.hud{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:400 13px/1 Silkscreen,monospace;color:#cfe8b0;padding:2px 4px 10px}
.hud b{font-weight:700;color:#fff}
.stage{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;touch-action:none}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;
text-align:center;background:rgba(8,20,10,.78);color:#f3f1e6;backdrop-filter:blur(2px)}
.ov.hidden{display:none}
.ov h2{font:700 clamp(22px,6vw,32px)/1.05 Silkscreen,monospace;margin:0}
.ov p{margin:0;font-size:15px;color:#d9d5c4}
.ov .big{font:700 clamp(28px,8vw,44px)/1 Silkscreen,monospace;color:#ffd84d}
.opt{display:grid;gap:8px;width:min(100%,320px)}
.opt label{font-size:13px;color:#bdb8a6;text-align:left}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;background:rgba(255,255,255,.08);padding:4px;border-radius:12px}
.seg button{min-height:40px;border:0;border-radius:9px;background:transparent;color:#f3f1e6;font:500 14px Rubik,sans-serif;cursor:pointer}
.seg button.on{background:#f3f1e6;color:#1d2b1f}
.btn{min-height:48px;padding:0 28px;border:0;border-radius:14px;background:var(--red);color:#fff;font:700 16px Silkscreen,monospace;
cursor:pointer;box-shadow:0 4px 0 #b52a1e}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b52a1e}
.btn.ghost{background:transparent;color:#f3f1e6;box-shadow:none;border:2px solid rgba(255,255,255,.35)}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.toast{position:absolute;left:50%;top:14%;transform:translateX(-50%);font:700 22px Silkscreen,monospace;color:#ffd84d;
text-shadow:0 2px 0 #000;pointer-events:none;opacity:0;transition:opacity .3s}
.toast.show{opacity:1}
.pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px;justify-content:center;margin-top:18px}
.pad button{border:0;border-radius:12px;background:#3a3a33;color:#efe7d4;font-size:20px;cursor:pointer;box-shadow:0 4px 0 #1a1a16}
.pad button:active{transform:translateY(3px);box-shadow:0 1px 0 #1a1a16}
.pad .u{grid-area:1/2}.pad .l{grid-area:2/1}.pad .r{grid-area:2/3}.pad .d{grid-area:3/2}
.help{font-size:13px;color:var(--muted);text-align:center;margin:16px 6px 0}
.help kbd{font:12px Rubik,sans-serif;background:var(--shell2);border-radius:5px;padding:1px 6px;color:var(--ink)}
@media(hover:hover) and (pointer:fine){.pad{display:none}}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}