:root{color-scheme:dark;--bg:#0b1815;--ink:#e8efd7;--muted:#8faaa0;--lime:#cdf879;--line:#31463b;--orange:#fb9a6b;--arcade:"Press Start 2P",ui-monospace,monospace;--pixel:"VT323",ui-monospace,monospace;font-family:var(--pixel)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 10%,#203c29 0,transparent 50%),var(--bg);color:var(--ink);min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible,.drag-pad:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button:disabled{opacity:.35;cursor:default}button[hidden],[hidden]{display:none!important}.layout{max-width:1240px;margin:auto;padding:36px 32px;display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1fr);gap:76px;align-items:center;min-height:100svh}.intro{padding:12px 0}.back{color:var(--muted);text-decoration:none;font:700 22px var(--pixel);letter-spacing:2px}.back:hover{color:var(--lime)}.edition{font:22px var(--pixel);letter-spacing:2px;color:var(--lime);margin:54px 0 20px;display:flex;align-items:center;gap:9px}.edition>span{width:6px;height:6px;background:var(--lime);box-shadow:0 0 14px #cdf87988}h1{font-size:clamp(62px,6.8vw,96px);letter-spacing:-6px;line-height:.86;margin:0;font-weight:950}h1>span{display:block;color:var(--lime)}h1 small{display:block;font:600 28px var(--pixel);letter-spacing:9px;color:var(--orange);margin:22px 0 30px}.lede{font-size:48px;line-height:1.25;letter-spacing:-.7px;margin:0 0 16px}.description{color:var(--muted);font-size:28px;line-height:1.8;max-width:320px}.field-notes{margin-top:32px;border-top:1px solid var(--line);padding-top:24px;display:grid;grid-template-columns:28px 1fr;gap:20px 12px;max-width:350px}.note-number{color:var(--orange);font:22px var(--pixel);padding-top:3px}.field-notes p{margin:0;color:var(--muted);font-size:24px;line-height:1.65}.field-notes b{color:var(--ink);font-size:20px;letter-spacing:1.6px}.local-label{font:18px var(--pixel);letter-spacing:1px;color:var(--muted);margin-top:36px}.local-label span{color:var(--lime);margin:0 8px}.cabinet{width:100%;max-width:600px;margin:auto;min-width:0}.scoreboard{display:flex;align-items:center;gap:24px;padding:18px 20px;background:#17271f;border:1px solid var(--line);border-radius:14px 14px 0 0}.scoreboard div{display:grid;gap:5px}.scoreboard span{font:18px var(--pixel);letter-spacing:1.5px;color:var(--muted)}.scoreboard strong{font:600 44px var(--pixel);letter-spacing:1px}.scoreboard div:first-child strong{color:var(--lime)}.scoreboard .wave{margin-left:auto}.scoreboard button{background:transparent;color:var(--ink);border:1px solid var(--line);width:38px;height:38px;border-radius:7px}.stage{position:relative;border:1px solid var(--line);border-top:0;overflow:hidden;background:#0d211b}canvas{width:100%;display:block;aspect-ratio:660/750;touch-action:none}.board-label{position:absolute;top:13px;left:18px;right:18px;display:flex;justify-content:space-between;pointer-events:none;font:16px var(--pixel);letter-spacing:1.3px;color:#9ab29c}.board-label span:last-child{color:var(--orange);font-size:26px;letter-spacing:4px}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(0deg,#091a17ec,#091a1744 90%);padding:20px}.screen-card{width:100%;max-width:355px;text-align:center;background:#10261ee8;border:1px solid #66865b66;box-shadow:0 25px 60px #0006;padding:30px 24px;border-radius:8px;backdrop-filter:blur(5px)}.kicker{color:var(--orange);font:18px var(--pixel);letter-spacing:1.5px}.screen-card h2{font-size:44px;line-height:1;letter-spacing:-2px;margin:20px 0;color:var(--ink)}.screen-card p{font-size:26px;color:#b4c8b8;line-height:1.8;margin:0 0 24px}.primary{background:var(--lime);color:#192919;border:0;padding:17px 18px;width:100%;font-size:22px;font-weight:800;letter-spacing:1px;border-radius:3px;display:flex;justify-content:space-between;align-items:center}.primary:hover{background:#e2ffb0}.primary span{font-size:38px}.secondary{border:0;background:none;color:var(--ink);font-size:24px;margin-top:18px;text-decoration:underline;text-underline-offset:4px}.screen-foot{display:block;font:16px var(--pixel);letter-spacing:2px;margin-top:20px;color:var(--muted)}.drag-pad{height:58px;touch-action:none;user-select:none;display:flex;align-items:center;justify-content:center;gap:15px;background:repeating-linear-gradient(90deg,#182b22 0,#182b22 1px,#15271e 1px,#15271e 18px);border:1px solid var(--line);border-top:0;color:#b1c4a7;font:18px var(--pixel);letter-spacing:2px;cursor:crosshair}.drag-pad span{color:var(--lime);font-size:40px}.drag-pad i{font:16px var(--pixel);color:var(--lime);letter-spacing:1px;border-left:1px solid var(--line);padding-left:14px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-top:0;padding:13px 17px;border-radius:0 0 10px 10px;color:var(--muted);font-size:20px}.toolbar button{background:none;border:0;color:var(--orange);font:18px var(--pixel);white-space:nowrap;padding:5px}.controls{text-align:center;color:var(--muted);font:18px var(--pixel);line-height:1.7}.banner{position:absolute;top:40%;left:0;right:0;text-align:center;color:var(--lime);font:800 30px var(--pixel);text-shadow:0 2px 15px #000;pointer-events:none}.banner:empty{display:none}
@media(min-width:900px) and (max-height:900px){.layout{max-width:1090px;padding:20px 30px;gap:60px;grid-template-columns:1fr 475px}.edition{margin-top:34px}.field-notes{margin-top:22px;gap:14px}.local-label{margin-top:24px}}
@media(max-width:760px){.layout{display:block;padding:14px;max-width:540px}.intro{padding:2px 2px 16px}.back{font-size:20px}.edition,.intro h1,.lede,.description,.field-notes,.local-label{display:none}.scoreboard{padding:12px 14px;gap:18px}.scoreboard strong{font-size:38px}.screen-card{padding:24px 20px}.screen-card h2{font-size:38px}.toolbar{font-size:18px}}
@media(max-height:540px) and (min-width:650px){.layout{display:grid;grid-template-columns:1fr 340px;padding:12px 25px;gap:25px;max-width:780px}.intro{display:block}.intro h1{display:block;font-size:62px}.intro .back{display:block}.intro .edition{display:flex;margin:24px 0 16px}.lede,.description,.field-notes,.local-label{display:none}.scoreboard{padding:8px 12px}.scoreboard strong{font-size:32px}.drag-pad{height:36px}.screen-card{padding:15px}.screen-card h2{font-size:28px;margin:12px 0}.screen-card p{font-size:22px;margin-bottom:12px}.screen-foot{margin-top:12px}.primary{padding:10px}.toolbar{padding:7px 12px}.controls{margin:5px 0}}
@media(max-height:540px) and (min-width:650px){.layout{grid-template-columns:1fr minmax(0,calc((100svh - 160px)*.88));min-height:100svh}.cabinet{max-width:340px}.scoreboard{gap:9px;padding:8px}.scoreboard span{font-size:14px;letter-spacing:.5px}.scoreboard strong{font-size:24px}.scoreboard button{width:26px;height:28px}.board-label{font-size:12px;left:8px;right:8px;top:7px;letter-spacing:0}.board-label span:last-child{font-size:18px;letter-spacing:1px}.overlay{padding:8px}.screen-card{padding:12px 10px}.screen-card h2{font-size:46px;margin:10px 0}.screen-card p{font-size:20px;line-height:1.4;margin-bottom:10px}.kicker{font-size:14px;letter-spacing:.5px}.primary{font-size:16px;padding:8px}.screen-foot{display:none}.secondary{font-size:18px;margin-top:10px}.drag-pad{font-size:14px;letter-spacing:.5px;gap:5px}.drag-pad i{font-size:12px;padding-left:5px}.drag-pad span{font-size:30px}.toolbar{padding:5px 7px;gap:5px;font-size:16px}.toolbar button{font-size:14px;padding:3px}.controls{font-size:14px;line-height:1.3}.banner{font-size:36px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.wave-guide{color:var(--orange)}
@media(max-height:540px) and (min-width:650px){.wave-guide{display:none}}
:root{--bg:#050505;--ink:#ffffe8;--muted:#b8b8aa;--lime:#00ff28;--line:#303030;--orange:#ffff00}
body{background:#050505}.scoreboard,.stage,.toolbar{background:#000}.scoreboard strong,.scoreboard div:first-child strong{color:#ff2424}.scoreboard .wave strong{color:#ffff00}.board-label{color:#bfbfbf}.board-label span:last-child{color:#ffff00}.overlay{background:linear-gradient(0deg,#000000ef,#00000066 90%)}.screen-card{background:#080808f2;border-color:#5d5d36;backdrop-filter:none}.screen-card p{color:#e0e0c9}.primary{background:#ffff00;color:#000;border:2px solid #000;box-shadow:0 0 0 1px #ffff00}.primary:hover{background:#fff57b}.drag-pad{background:repeating-linear-gradient(90deg,#202020 0,#202020 1px,#0c0c0c 1px,#0c0c0c 18px);color:#ffffb8}.edition>span{box-shadow:none}.screen-foot{color:#bfbfbf}
.layout{max-width:1420px;gap:48px;grid-template-columns:minmax(300px,1fr) minmax(0,600px);align-items:start}.intro{padding-top:18px}.edition{letter-spacing:1px;line-height:1.5;margin-top:34px}.description,.field-notes{max-width:100%}.description{line-height:1.5}.field-notes{grid-template-columns:32px 1fr}.field-notes p{line-height:1.5}.field-notes b{letter-spacing:1px}.local-label{line-height:1.6}.scoreboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px 18px}.scoreboard>div:nth-child(-n+2){grid-row:1 / span 2;min-width:0}.scoreboard .wave{grid-column:3;grid-row:1;margin:0}.scoreboard button{grid-column:3;grid-row:2;width:48px;height:42px;font-size:24px}.scoreboard span{letter-spacing:.5px}.scoreboard strong{font-size:40px;letter-spacing:0}.screen-card{max-width:520px;padding:24px}.screen-card h2{font-size:48px;letter-spacing:-1.5px;overflow-wrap:anywhere}.screen-card p{line-height:1.4}.kicker{letter-spacing:.6px;line-height:1.4}.primary{letter-spacing:.5px;text-align:left}.screen-foot{letter-spacing:1px;line-height:1.4}.board-label{letter-spacing:1px;align-items:center;gap:10px}.board-label span:last-child{letter-spacing:2px}.drag-pad{min-height:68px;height:auto;flex-wrap:wrap;padding:12px 8px;gap:10px;letter-spacing:1px}.toolbar{flex-wrap:wrap;font-size:20px;line-height:1.4}.toolbar button{margin-left:auto;min-height:44px}.controls{font-size:18px;line-height:1.5}.banner{font-size:38px}
@media(max-width:1100px) and (min-width:761px) and (min-height:541px){.layout{grid-template-columns:minmax(250px,1fr) minmax(0,520px);padding:24px;gap:28px}.scoreboard strong{font-size:34px}.scoreboard span{font-size:16px}.screen-card{padding:20px}.screen-card p{font-size:24px}.primary{font-size:20px}.screen-foot{font-size:14px}.lede{font-size:36px}}
@media(max-width:760px){.layout{display:block;max-width:570px;padding:12px}.intro{padding:4px 2px 16px}.back{font-size:18px;letter-spacing:1px}.scoreboard{padding:12px;gap:10px}.scoreboard strong{font-size:32px}.scoreboard span{font-size:14px}.scoreboard .wave strong{font-size:28px}.scoreboard button{width:40px;height:36px;font-size:22px}.board-label{font-size:14px;top:8px;left:12px;right:12px;letter-spacing:0}.board-label span:last-child{font-size:20px;letter-spacing:1px}.screen-card{padding:18px 14px}.screen-card h2{font-size:42px;margin:14px 0}.screen-card p{font-size:22px;line-height:1.35;margin-bottom:16px}.kicker{font-size:14px}.primary{font-size:18px;padding:14px 12px}.secondary{font-size:20px;margin-top:14px}.screen-foot{display:none}.toolbar{font-size:18px;padding:10px 12px;gap:4px}.toolbar button{font-size:16px}.drag-pad{font-size:16px;letter-spacing:.5px;gap:8px}.drag-pad span{font-size:28px}.drag-pad i{font-size:14px;padding-left:8px}.controls{font-size:16px}.banner{font-size:30px}}
@media(max-width:360px){.scoreboard strong{font-size:28px}.scoreboard span{font-size:12px}.screen-card h2{font-size:36px}.screen-card p{font-size:20px}.kicker{font-size:12px}.primary{font-size:16px}.secondary{font-size:18px}.drag-pad i{border:0;padding-left:0}.toolbar{font-size:16px}}
@media(max-height:540px) and (min-width:650px){.layout{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,calc((100svh - 28px)*.88));grid-template-rows:auto auto auto auto auto;gap:8px 20px;max-width:1050px;padding:12px;align-items:center}.intro{grid-column:1;grid-row:1;padding:0}.intro h1,.intro .edition{display:none}.intro .back{font-size:18px}.cabinet{display:contents}.scoreboard{grid-column:1;grid-row:2;padding:10px;gap:8px}.scoreboard span{font-size:14px}.scoreboard strong{font-size:30px}.scoreboard .wave strong{font-size:24px}.scoreboard button{width:38px;height:32px;font-size:22px}.stage{grid-column:2;grid-row:1 / span 5;border-top:1px solid var(--line)}.drag-pad{grid-column:1;grid-row:3;font-size:16px;min-height:52px;padding:6px;gap:8px}.drag-pad i{font-size:14px}.drag-pad span{font-size:26px}.toolbar{grid-column:1;grid-row:4;font-size:16px;padding:6px 10px}.toolbar button{font-size:14px;min-height:36px}.controls{grid-column:1;grid-row:5;font-size:14px;margin:0}.board-label{font-size:12px;top:8px;left:8px;right:8px}.board-label span:last-child{font-size:18px}.screen-card{padding:14px 12px}.screen-card h2{font-size:34px;margin:12px 0}.screen-card p{font-size:20px;line-height:1.35;margin-bottom:12px}.kicker{font-size:12px}.primary{font-size:16px;padding:12px}.secondary{font-size:18px;margin-top:12px}.screen-foot{display:none}.banner{font-size:28px}}
/* Arcade lettering: Press Start 2P runs far wider than the old monospace, so it gets its own fluid sizes. */
.layout h1{font-family:var(--arcade);font-weight:400;letter-spacing:0;line-height:1.15;font-size:clamp(30px,3.7vw,50px)}
.layout h1 small{font-family:var(--arcade);font-size:clamp(11px,1.1vw,14px);letter-spacing:4px;margin:20px 0 26px}
.layout .scoreboard strong{font-family:var(--arcade);font-weight:400;letter-spacing:0;font-size:clamp(14px,2.2vw,24px)}
.layout .scoreboard .wave strong{font-size:clamp(14px,2vw,22px)}
.layout .scoreboard span{font-family:var(--arcade);font-size:clamp(7px,.8vw,9px);letter-spacing:.5px}
.layout .board-label span:first-child{font-family:var(--arcade);font-size:clamp(7px,.9vw,10px)}
.layout .screen-card h2{font-family:var(--arcade);font-weight:400;letter-spacing:0;line-height:1.35;font-size:clamp(16px,2.3vw,26px)}
.layout .primary{font-family:var(--arcade);font-weight:400;font-size:clamp(10px,1.2vw,14px);letter-spacing:0}
.layout .primary span{font-family:var(--pixel);font-size:32px}
.layout .banner{font-family:var(--arcade);font-weight:400;font-size:clamp(14px,2.4vw,24px);color:#ff2020;text-shadow:0 0 0 #000,2px 2px 0 #000}
.layout .scoreboard{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;gap:12px}.layout .scoreboard .wave{grid-row:1 / span 2}.layout .scoreboard .header-actions{grid-column:4;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.layout .header-actions button{grid-column:auto;grid-row:auto;flex:none;margin:0}.layout .header-actions #sound{width:auto;min-width:88px;height:40px;padding:6px 8px;font:20px var(--pixel);white-space:nowrap;color:var(--orange)}.run-readout{border-radius:0;min-height:62px;padding:10px 16px;align-items:center}.drag-pad{border-radius:0 0 10px 10px}
@media(max-width:760px){.layout .scoreboard{gap:8px;padding:10px}.layout .header-actions #sound{min-width:68px;padding:4px;font-size:18px}.run-readout{font-size:20px;min-height:64px;padding:8px 12px}}
@media(max-width:360px){.layout .scoreboard{gap:5px;padding:8px}.layout .scoreboard strong{font-size:12px}.layout .scoreboard span{font-size:6px}.layout .header-actions #sound{min-width:58px;font-size:16px}.run-readout{font-size:18px}}
@media(max-height:540px) and (min-width:650px){.run-readout{grid-column:1;grid-row:3;min-height:52px;font-size:18px}.drag-pad{grid-row:4}.layout .header-actions #sound{font-size:18px;min-width:74px;height:36px}}
/* Size the board from the available height as well as width; never crop the playfield. */
html,body{min-height:0;height:100%}.layout{height:100svh;height:100dvh;min-height:0;max-width:1100px;padding:8px 16px;gap:24px;grid-template-columns:minmax(220px,1fr) minmax(0,600px);align-items:center}.intro{padding:0}.intro .description,.intro .field-notes,.intro .local-label{display:none}.intro .edition{margin-top:24px}.intro .lede{font-size:36px}.cabinet{display:flex;flex-direction:column;min-height:0;width:100%;max-width:600px;margin:0 auto}.layout .scoreboard{flex:none;height:104px;padding:6px 10px;gap:6px}.layout .scoreboard .header-actions{gap:4px}.layout .header-actions #sound,.layout .header-actions #pause{height:44px}.layout .header-actions #pause{width:44px}.run-readout{flex:none;height:64px;min-height:64px;padding:6px 12px;font-size:20px;line-height:1.05}.stage{flex:none;align-self:center;width:min(100%,calc((100svh - 296px)*.88));width:min(100%,calc((100dvh - 296px)*.88));height:auto;aspect-ratio:660/750;grid-column:auto;grid-row:auto}.stage canvas{display:block;width:100%;height:auto;aspect-ratio:660/750}.drag-pad{flex:none;height:52px;min-height:52px;padding:4px 8px;font-size:16px;gap:8px}.drag-pad span{font-size:26px}.drag-pad i{font-size:14px;padding-left:8px}.controls{flex:none;height:32px;margin:0;padding:3px 0;font-size:14px;line-height:1.05}.wave-guide{display:none}.screen-foot{display:none}.overlay{padding:8px}.screen-card{padding:12px}.layout .screen-card h2{font-size:clamp(16px,2vw,24px);margin:10px 0}.screen-card p{font-size:20px;line-height:1.15;margin-bottom:12px}.kicker{font-size:12px;line-height:1.2}.primary{min-height:44px;padding:6px 10px}.secondary{font-size:18px;margin-top:10px}
@media(max-width:760px){.layout{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:8px;gap:8px;max-width:570px}.intro{height:20px;padding:0}.intro .back{font-size:18px;line-height:20px}.intro .edition,.intro h1,.intro .lede{display:none}.layout .header-actions #sound{min-width:68px;font-size:18px}.screen-card p{font-size:18px}.run-readout{font-size:20px}}
@media(max-height:540px) and (min-width:650px){.layout{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,calc((100svh - 24px)*.88));grid-template-rows:28px 104px 64px 52px 32px;align-content:center;gap:8px 20px;padding:12px;max-width:1050px}.intro{grid-column:1;grid-row:1;height:auto}.intro .edition,.intro h1,.intro .lede{display:none}.cabinet{display:contents}.layout .scoreboard{grid-column:1;grid-row:2}.run-readout{grid-column:1;grid-row:3}.drag-pad{grid-column:1;grid-row:4}.controls{grid-column:1;grid-row:5}.stage{grid-column:2;grid-row:1 / span 5;width:100%;align-self:center}.screen-card p{font-size:18px}.board-label{top:8px}}
@media(max-height:360px) and (min-width:650px){.layout{grid-template-columns:minmax(260px,1fr) minmax(0,calc((100svh - 16px)*.88));grid-template-rows:24px 84px 50px 44px 30px;gap:4px 16px;padding:8px}.layout .scoreboard{height:84px}.layout .header-actions #sound,.layout .header-actions #pause{height:34px}.run-readout{height:50px;min-height:50px;font-size:18px}.drag-pad{height:44px;min-height:44px}.screen-card{padding:8px}.layout .screen-card h2{font-size:16px;margin:8px 0}.screen-card p{font-size:18px;line-height:1.05;margin-bottom:8px}.kicker{font-size:10px}.secondary{font-size:16px;margin-top:6px}}
/* Compact, borderless arcade header: scores, then audio/pause and lives. */
.layout{display:flex;justify-content:center;align-items:center;max-width:800px;padding:8px;gap:0}.intro{display:none}.cabinet{display:flex;flex-direction:column;max-width:760px}.cabinet>.back{display:block;flex:none;height:24px;margin:0;line-height:24px;font-size:18px;letter-spacing:1px}.layout .scoreboard{height:100px;min-height:100px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-rows:44px 44px;gap:4px 12px;padding:4px 0;border:0;border-radius:0;background:transparent}.layout .scoreboard>div:nth-child(-n+2){grid-row:1}.layout .scoreboard .wave{grid-column:3;grid-row:1}.layout .scoreboard .header-actions{grid-column:1 / -1;grid-row:2;display:flex;flex-direction:row;align-items:center;gap:8px}.layout .header-actions #sound,.layout .header-actions #music,.layout .header-actions #pause{height:44px;width:44px;min-width:44px;margin:0;padding:8px;border:0;border-radius:0;background:transparent;color:var(--orange);font:26px var(--pixel)}.header-actions svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.header-actions [aria-pressed="false"] svg{opacity:.5}.header-actions .mute-slash{display:none}.header-actions [aria-pressed="false"] .mute-slash{display:block}.layout .scoreboard #lives{margin-left:auto;color:var(--orange);font:24px var(--pixel);letter-spacing:4px}.stage{width:min(100%,calc((100svh - 188px)*.88));width:min(100%,calc((100dvh - 188px)*.88));border:0;border-radius:0;background:#000}.drag-pad{height:48px;min-height:48px;border:0;border-radius:0;background:none}.controls,.board-label{display:none}.screen-card{border:0;box-shadow:none}.primary{border:0;box-shadow:none}.layout .scoreboard strong{font-size:clamp(14px,2.2vw,24px)}.layout .scoreboard span{font-size:clamp(7px,.8vw,10px)}
@media(max-height:540px) and (min-width:650px){.layout{display:grid;max-width:1050px;grid-template-columns:minmax(240px,1fr) minmax(0,calc((100svh - 16px)*.88));grid-template-rows:24px 100px 48px;align-content:center;gap:8px 20px;padding:8px}.cabinet{display:contents}.cabinet>.back{grid-column:1;grid-row:1}.layout .scoreboard{grid-column:1;grid-row:2}.drag-pad{grid-column:1;grid-row:3}.stage{grid-column:2;grid-row:1 / span 3;width:100%;align-self:center}}
.bottom-controls{display:flex;align-items:center;flex:none;height:48px;gap:8px;width:100%}.bottom-controls .drag-pad{flex:1;min-width:0;white-space:nowrap;padding:4px;gap:4px;font-size:14px}.bottom-controls .drag-pad span{font-size:20px}.bottom-controls button{flex:none;height:44px;padding:4px;color:var(--orange);background:transparent;border:0;font:16px var(--pixel);white-space:nowrap}.bottom-controls #autoFire{width:104px}.bottom-controls #fire{width:52px;color:#ff3030;touch-action:none;user-select:none}.bottom-controls #autoFire[aria-pressed="false"]{color:var(--muted)}
@media(max-height:540px) and (min-width:650px){.bottom-controls{grid-column:1;grid-row:3}}

/* Reference layout: tall garden, capsule lives, and a separate full-width drag strip. */
.layout{max-width:800px;padding:8px;justify-content:center}
.cabinet{max-width:760px}
.layout .scoreboard{height:84px;min-height:84px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:48px 32px;gap:0 10px;padding:4px 0 0}
.layout .scoreboard .high-score{text-align:center}
.layout .scoreboard .wave{text-align:right;justify-self:end}
.layout .scoreboard strong{font-size:clamp(16px,4vw,24px)}
.layout .scoreboard span{font-size:clamp(8px,2vw,11px)}
.layout .scoreboard #lives{grid-column:1 / -1;grid-row:2;display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0;line-height:0}
#lives svg{display:block;width:22px;height:30px;shape-rendering:crispEdges}
.stage{width:100%;height:calc(100svh - 224px);height:calc(100dvh - 224px);aspect-ratio:auto}
.stage canvas{width:100%;height:100%;aspect-ratio:auto}
.bottom-controls{height:44px;gap:8px;justify-content:flex-end}
.bottom-controls .header-actions{display:flex;align-items:center;gap:0;margin-right:auto}
.layout .bottom-controls .header-actions button{width:32px;min-width:32px;height:44px;padding:4px;border:0;border-radius:0;background:transparent;color:var(--orange);font:26px var(--pixel)}
.bottom-controls .header-actions svg{width:24px;height:24px}
.bottom-controls #autoFire{width:112px;font-size:18px}
.bottom-controls #fire{width:72px;font-size:44px}
.cabinet>.drag-pad{height:56px;min-height:56px;width:100%;font-size:22px;letter-spacing:1px;gap:12px}
.cabinet>.drag-pad span{font-size:30px}
@media(max-height:540px) and (min-width:540px){
  .layout{max-width:1050px;grid-template-columns:minmax(260px,1fr) minmax(0,calc((100svh - 16px)*.733333));grid-template-rows:24px 84px 44px 56px;gap:8px 20px}
  .layout .scoreboard{grid-column:1;grid-row:2}
  .bottom-controls{grid-column:1;grid-row:3}
  .cabinet>.drag-pad{grid-column:1;grid-row:4}
  .stage{grid-column:2;grid-row:1 / span 4;width:100%;height:auto;aspect-ratio:660/900}
}

/* Keep the garden dimensions fixed while using the open footer for touch movement. */
.cabinet{position:relative}
.cabinet>.back{max-width:calc(100% - 104px);white-space:nowrap}
.cabinet>.header-actions{position:absolute;top:0;right:0;display:flex;align-items:center;gap:0;height:24px}
.layout .cabinet>.header-actions button{display:flex;align-items:center;justify-content:center;width:32px;min-width:32px;height:24px;padding:0;font-size:24px;line-height:1}
.layout .cabinet>.header-actions #pause{font-size:0}
.cabinet>.header-actions #pause::before{content:"";display:block;box-sizing:border-box;width:12px;height:16px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.cabinet>.header-actions svg{width:22px;height:22px}
.input-area{position:relative;width:100%;height:100px;flex:none}
.input-area>.drag-pad{position:absolute;inset:0;width:100%;height:100%;min-height:0;justify-content:center;align-items:flex-start;padding:12px 0 0;font-size:22px;letter-spacing:1px}
.input-area>.bottom-controls{position:absolute;bottom:0;right:0;width:auto;height:44px;gap:8px}
.bottom-controls #autoFire{width:224px;font-size:36px}
@media(max-height:540px) and (min-width:540px){
  .layout{position:relative}
  .cabinet>.header-actions{right:calc((100svh - 16px)*.733333 + 28px);top:calc(50% - 115px)}
  .input-area{grid-column:1;grid-row:3 / span 2;height:100%}
}

/* Keep start, pause and help actions reachable on short screens. */
.screen-card{max-height:100%;overflow-y:auto}
.help-button{display:block;margin:10px auto 0;font-size:18px}
#helpDialog{width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px;border:1px solid #ffffc0;background:#080808;color:#ffffc0;font:20px/1.3 var(--pixel);overflow-y:auto}
#helpDialog::backdrop{background:#000c}
#helpDialog .help-heading{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;background:#080808}
#helpDialog h2{margin:0;font:14px/1.5 var(--arcade);color:#ffff00}
#helpDialog #closeHelp{flex:none;min-width:44px;min-height:44px;border:0;background:none;color:#ffff00;font:32px var(--pixel)}
#helpDialog p{margin:0 0 14px}
@media(max-height:540px) and (min-width:540px) and (max-width:649px){
  .layout{display:grid;align-content:center;padding:8px;gap:8px 20px}
  .cabinet{display:contents}
  .cabinet>.back{grid-column:1;grid-row:1}
  .layout .scoreboard strong{font-size:clamp(12px,2.2vw,16px)}
  .layout .scoreboard span{font-size:8px}
  .input-area>.bottom-controls{width:100%}
  .bottom-controls #autoFire{width:calc(100% - 80px);max-width:224px;font-size:28px}
}