:root{--paper: #e9eef0;--paper-2: #dde5e9;--ink: #14304a;--ink-soft: #4a6276;--rule: #b9c7cf;--accent: #b3263e;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--paper: #0f2233;--paper-2: #16304a;--ink: #dce6ea;--ink-soft: #94aab8;--rule: #2b465d;--accent: #f0798d}}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--paper);color:var(--ink);font-family:system-ui,sans-serif;display:grid;place-items:start center}.game{width:min(100%,30rem);padding:1.5rem 1rem 2rem}header{display:grid;grid-template-columns:1fr auto;align-items:end;gap:.25rem 1rem;margin-bottom:1rem}.back{grid-column:1 / -1;color:var(--ink-soft);font-size:.875rem;text-decoration-color:var(--accent);text-underline-offset:.18em}h1{margin:0;font-size:2.5rem;font-weight:800;letter-spacing:-.04em;line-height:1}.scores{display:flex;gap:1.25rem;margin:0}.scores div{text-align:right}.scores dt{font-size:.8125rem;color:var(--ink-soft)}.scores dd{margin:0;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}.board{position:relative;aspect-ratio:1;border:2px solid var(--ink);border-radius:6px;overflow:hidden;touch-action:none}canvas{display:block;width:100%;height:100%}.overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.5rem;padding:1rem;text-align:center;background:color-mix(in srgb,var(--paper) 82%,transparent)}.overlay[hidden]{display:none}.overlay p{margin:0}.overlay .title{font-size:1.75rem;font-weight:800;letter-spacing:-.03em}button{font:inherit;color:var(--paper);background:var(--ink);border:0;border-radius:6px;padding:.6rem 1.2rem;cursor:pointer}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.pad{display:none;grid-template-columns:repeat(3,4rem);grid-template-areas:". up ." "left down right";gap:.5rem;justify-content:center;margin-top:1.25rem}.pad button{height:3.5rem;padding:0;font-size:1.25rem}.pad [data-dir=up]{grid-area:up}.pad [data-dir=left]{grid-area:left}.pad [data-dir=down]{grid-area:down}.pad [data-dir=right]{grid-area:right}@media(pointer:coarse){.pad{display:grid}}.help{color:var(--ink-soft);font-size:.875rem;margin-top:1.25rem}