:root{--bg:#ececea;--panel:#f7f7f5;--ink:#2f2f2f;--muted:#7b7b76;--line:#d6d6d1;--mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace}@media (prefers-color-scheme:dark){:root{--bg:#121317;--panel:#1b1c22;--ink:#e8e9ee;--muted:#8b8d99;--line:#2c2e37}}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.page{height:100dvh;display:flex;flex-direction:column;gap:clamp(6px,1.5vh,16px);padding:max(clamp(8px,2vw,20px),env(safe-area-inset-top)) clamp(8px,2vw,20px) max(clamp(8px,2vw,20px),env(safe-area-inset-bottom));cursor:pointer}.stageArea{position:relative;flex:1 1;min-height:0}.stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);line-height:0;--panel:#f7f7f5;--ink:#2f2f2f;--muted:#7b7b76;--line:#d6d6d1}.stage[data-night=true]{--panel:#1b1c22;--ink:#e8e9ee;--muted:#8b8d99;--line:#2c2e37}.canvas{display:block;image-rendering:pixelated}.ui{inset:0;pointer-events:none;line-height:1.4}.hud,.ui{position:absolute}.hud{top:clamp(6px,2%,10px);right:clamp(8px,2%,12px);left:clamp(8px,2%,12px);display:flex;align-items:flex-start;justify-content:flex-end;gap:12px}.scores{display:flex;gap:14px;align-items:baseline;font-size:clamp(11px,3.2vw,16px);font-weight:700;letter-spacing:.16em;color:var(--ink);transition:color .5s ease}.high{opacity:.55}.iconButton{pointer-events:auto;width:40px;height:40px;display:grid;place-items:center;font-size:16px;line-height:1;border:1.5px solid var(--line);border-radius:9px;background:color-mix(in srgb,var(--panel) 82%,transparent);color:var(--ink);cursor:pointer;touch-action:manipulation;transition:transform .12s ease,border-color .12s ease,color .5s ease,background .5s ease}.iconButton:hover{border-color:var(--muted)}.iconButton:active{transform:scale(.93)}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.6vh,10px);text-align:center;padding:16px;background:color-mix(in srgb,var(--panel) 62%,transparent);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);animation:fade .18s ease-out;color:var(--ink);transition:background .5s ease,color .5s ease}@keyframes fade{0%{opacity:0}}.title{margin:0;font-size:clamp(17px,5vw,30px);font-weight:800;letter-spacing:.28em;text-indent:.28em}.finalScore,.hint,.subhint{margin:0;letter-spacing:.1em}.hint{font-size:clamp(11px,3vw,14px)}.hint,.subhint{color:var(--muted)}.subhint{font-size:clamp(10px,2.6vw,12px);opacity:.85}.finalScore{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:clamp(12px,3.4vw,15px);font-weight:700}.finalHigh{color:var(--muted)}.restart{pointer-events:auto;margin-top:4px;padding:12px 26px;font:inherit;font-weight:700;letter-spacing:.2em;text-indent:.2em;color:var(--panel);background:var(--ink);border:none;border-radius:9px;cursor:pointer;touch-action:manipulation;transition:transform .12s ease,opacity .12s ease}.restart:hover{opacity:.88}.restart:active{transform:scale(.96)}.iconButton:focus-visible,.restart:focus-visible{outline:2px solid var(--muted);outline-offset:2px}.footer{flex:none;font-size:clamp(10px,2.4vw,11px);letter-spacing:.08em;color:var(--muted);text-align:center}kbd{font:inherit;padding:1px 5px;border:solid var(--line);border-width:1px 1px 2px;border-radius:4px;background:var(--panel)}.touchOnly{display:none}@media (pointer:coarse){.keyboardOnly{display:none}.touchOnly{display:inline}}