*{box-sizing:border-box}
body{font-family:var(--font-sans)}
main{max-width:960px;margin:auto;padding:24px 24px 12px}
.intro{display:flex;align-items:baseline;gap:20px}
h1{font-size:clamp(2rem,4vw,3rem);font-weight:400;letter-spacing:-.045em;line-height:1.1;margin:0}
.intro p,#howto{color:var(--muted);font-size:.85rem}
.intro p{margin:0}
#howto{margin:10px 0 12px}
.touch-help{display:none}
.hud{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font:12px/1.5 var(--font-mono);margin:0 0 10px;contain:layout paint;min-height:18px}
.hud b{font-weight:500;font-variant-numeric:tabular-nums}
#lives-icons{letter-spacing:2px}
.canvas-wrap{display:flex;justify-content:center}
.field-wrap{width:100%}
#stage{position:relative;width:100%;max-width:760px;aspect-ratio:4/3;border-radius:18px;background:#080c17;overflow:hidden;touch-action:manipulation;border:1px solid #253049;isolation:isolate}
#stage:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#overlay{position:absolute;inset:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding:12px;text-align:center;background:rgba(8,12,23,.72);color:#eff3ff}
#overlay[hidden]{display:none}
#overlay h2{font-size:clamp(1.3rem,3vw,2rem);font-weight:400;letter-spacing:-.025em;margin:8px 0}
#detail{font-size:.8rem;line-height:1.5;color:#becae0;margin:0 0 20px;max-width:240px}
.overlay-kicker{font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.18em;color:#eac597;margin:0}
button{font:inherit;cursor:pointer;min-height:44px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--foreground);padding:0 16px}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#launch{border:1px solid #8191af;background:#eff3ff;color:#080c17;min-width:110px;font-size:.85rem}
.toolbar{display:flex;justify-content:center;align-items:center;gap:12px;margin:12px 0 0;touch-action:manipulation;font-size:.8rem}
.toolbar a{color:var(--muted);margin-left:12px;text-decoration:none;padding:12px 0}
.toolbar a:hover{color:var(--foreground)}
.pad{display:none;justify-content:center;align-items:center;gap:8px;margin:12px auto 0;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.pad button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;padding:0;width:64px;height:72px;font-size:26px;line-height:1}
.pad button *{-webkit-user-select:none;user-select:none;pointer-events:none}
.pad button:nth-child(3){margin-left:auto}
.pad button:nth-child(n+3){width:72px}
.pad span{display:block;font:10px var(--font-mono);margin-top:6px}
.pad button[aria-pressed="true"]{background:var(--foreground);color:var(--background)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.site-foot{margin-top:36px}
@media(pointer:coarse),(max-width:640px){.pad{display:flex;max-width:360px}.keys{display:none}.touch-help{display:inline}#stage{aspect-ratio:3/4}main{padding:16px 16px 12px}.intro{gap:8px}.intro p{font-size:12px}.hud{gap:10px;font-size:11px}#howto{margin:8px 0}.toolbar{gap:8px}.toolbar a{margin-left:4px}.site-foot{margin-top:32px}}
@media(max-width:360px){.pad{gap:6px}.pad button{width:64px}.pad button:nth-child(n+3){width:72px}.intro{display:block}.intro p{margin-top:4px}}
@media(prefers-reduced-motion:reduce){:root:not([data-motion="on"]) *,:root:not([data-motion="on"]) *::before,:root:not([data-motion="on"]) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

#scores{width:min(100%,320px);font-size:12px}
#scores h3{font-size:14px;margin:6px 0}#scores-status{margin:4px 0}
#score-list{margin:4px 0 10px;padding:0;list-style-position:inside;display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;text-align:left;font-variant-numeric:tabular-nums}
#score-list .new-score{color:#eac597;font-weight:bold}
#initials p{font-size:12px;margin:6px 0}#initial-slots{display:flex;justify-content:center;gap:8px}
.initial-slot{display:grid;justify-items:center}.initial-slot button{min-width:48px;min-height:44px}.initial-slot output{font:22px/1.2 monospace;padding:4px}
.initial-slot.active output{outline:2px solid #eac597}#initial-ok,#initial-skip{margin:6px 4px;min-width:64px}
.field-wrap:is(:fullscreen,:-webkit-full-screen,.immersive){background:#080c17;color:#eff3ff;width:100%;height:100%;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto}
.field-wrap.immersive{position:fixed;inset:0;z-index:9999;height:100dvh}
.field-wrap:is(:fullscreen,:-webkit-full-screen,.immersive) .hud{flex-shrink:0}
.field-wrap:is(:fullscreen,:-webkit-full-screen,.immersive) .pad{width:min(100%,360px);flex-shrink:0}
.toolbar{flex-wrap:wrap}.toolbar a{white-space:nowrap}.field-wrap .toolbar{flex-shrink:0}
body:has(.immersive){overflow:hidden}
@media(max-height:450px){main{padding:4px 12px}.intro,.intro p,#howto{display:none}.site-head,.site-foot{display:none}.hud{margin-bottom:3px}.pad{margin-top:4px}.pad button{height:64px}.toolbar{margin-top:4px}#overlay .overlay-kicker,#overlay #detail{display:none}#overlay h2{font-size:16px;margin:2px}#scores h3{margin:2px}#score-list{font-size:11px;gap:0 8px;margin:2px}#initials p{margin:2px}.initial-slot output{padding:0}#launch{min-height:44px}}

/* A short landscape field keeps the score dialog usable without changing world size. */
@media(max-height:450px){#overlay:not([hidden]){position:fixed;inset:8px;z-index:20;width:min(480px,calc(100vw - 16px));height:calc(100dvh - 16px);margin:auto;justify-content:flex-start;border:1px solid #253049;border-radius:12px;background:#080c17}#overlay:has(#initials:not([hidden])) #scores{display:none}#overlay:has(#initials:not([hidden])){justify-content:safe center}}

.field-wrap:is(:fullscreen,:-webkit-full-screen,.immersive) #fullscreen{position:fixed;top:8px;right:8px;z-index:30}

.field-wrap:is(:fullscreen,:-webkit-full-screen,.immersive){padding-top:64px}

/* Phones: Pause, Restart and Home sit above the field, away from the thumb pad. */
@media(pointer:coarse),(max-width:640px){.field-wrap{display:flex;flex-direction:column}.toolbar{order:-1;margin:0 0 8px}.pad{width:min(100%,360px)}}