:root{color-scheme:dark;font:16px/1.5 system-ui,-apple-system,sans-serif;--ink:#fdf2dc;--sub:#b7bfd2;--night:#182233;--line:#495268;--warm:#ffe1a7;--pink:#ff9aa4;--sky:#93e3db}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#151b2a;color:var(--ink)}
body{background:radial-gradient(ellipse at 65% 3%,#302c46,transparent 54%),#151b2a}
.shell{width:min(100%,766px);margin:auto;padding:16px clamp(12px,3vw,25px) 18px}
header,.toolbar,.actions,.pads,.input-panel{display:flex;align-items:center;gap:8px}
header,.input-panel{justify-content:space-between}
header{margin-bottom:11px}
.toolbar{flex:none}
.eyebrow{font-size:10px;letter-spacing:.12em;color:var(--sky);font-weight:800}
.eyebrow i{display:inline-block;background:var(--pink);height:5px;width:5px;border-radius:100%;vertical-align:middle;margin:0 3px}
h1{font-size:clamp(23px,4.8vw,35px);line-height:1.05;margin:4px 0 0;letter-spacing:-.03em}
button{appearance:none;font:inherit;line-height:1.1;font-size:13px;font-weight:750;white-space:nowrap;color:var(--ink);background:#28354d;border:1px solid var(--line);border-radius:8px;padding:6px 11px;min-height:44px;cursor:pointer;touch-action:manipulation}
button:hover{background:#39495f}button:focus-visible,canvas:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
[data-lang]{padding-inline:8px;min-width:39px}[data-lang][aria-pressed=true]{color:#122b33;background:var(--sky);border-color:var(--sky)}
.status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0 0 7px}
.status div{display:flex;align-items:center;justify-content:space-between;gap:2px;padding:5px 9px;border-radius:7px;background:#242d42;border:1px solid #41485c;font-size:11px;color:var(--sub)}
.status strong{font-size:13px;color:var(--warm);white-space:nowrap}
#hearts{color:var(--pink);letter-spacing:.05em}
.stage{position:relative;max-height:55vh;aspect-ratio:832 / 576;margin:auto;display:flex;justify-content:center;border-radius:12px;isolation:isolate;overflow:hidden;background:#141c29;border:1px solid #56647b;box-shadow:0 7px 20px #0008}
canvas{display:block;height:100%;max-width:100%;object-fit:contain;touch-action:none;cursor:crosshair}
.veil{position:absolute;inset:0;display:grid;place-items:center;padding:8px;background:#1119279a}
.veil[hidden]{display:none}
.panel{width:min(100%,386px);text-align:center;padding:clamp(10px,3vw,24px);border-radius:14px;border:1px solid #75819a;background:#202940f5;box-shadow:0 8px 40px #000a}
.panel h2{margin:4px 0 6px;font-size:clamp(16px,4vw,24px);line-height:1.2}
.panel p{font-size:clamp(12px,2.4vw,14px);line-height:1.45;color:#e0e4ee;margin:0 0 9px}
.primary{background:var(--warm);color:#231c25;border-color:var(--warm);padding-inline:23px}.primary:hover{background:#ffedc6}
.activity{margin:7px 0 5px;color:#e9e9ee;font-size:13px;min-height:22px}
.input-panel p{margin:0;color:var(--sub);font-size:11px}
.movement{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,39px);gap:3px}
.movement button{min-height:0;padding:0;font-size:19px}
.up{grid-area:1/2}.left{grid-area:2/1}.down{grid-area:2/2}.right{grid-area:2/3}
.accent{color:var(--warm);border-color:#9a785d;background:#3c3540}
@media(max-width:550px){
  .shell{padding:9px 9px 8px}.status div{padding:4px 4px;font-size:10px;flex-direction:column;align-items:flex-start}.status strong{font-size:12px}.toolbar{gap:4px}button{padding-inline:7px}
  .input-panel{flex-direction:column;align-items:flex-start;gap:3px}.pads{width:100%;justify-content:space-between}.movement{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px)}.eyebrow{letter-spacing:.04em}.stage{max-height:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}