:root{color-scheme:dark;--paper:#e5e2d9;--muted:#787f7a;--accent:#d9ed91;--line:#303832}*{box-sizing:border-box}body{margin:0;background:#131916;color:var(--paper);font-family:Arial,Helvetica,sans-serif}main{max-width:1160px;margin:auto;padding:32px 48px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:26px}.brand{font-size:25px;letter-spacing:5px;font-weight:900;text-decoration:none;color:var(--paper)}.brand span{display:block;font-size:8px;letter-spacing:5px;margin-top:5px}.build,.eyebrow,.label,.status,.hint{font:10px monospace;letter-spacing:1.6px}.build{color:#a0a99f}i{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:8px}.eyebrow{color:var(--accent);margin:0 0 14px}h1{font-size:clamp(28px,4vw,48px);letter-spacing:-2px;margin:0;font-weight:500}h1 span{color:var(--accent)}.cabinet{border:1px solid #414c40;box-shadow:0 20px 70px #0003}.hud{display:flex;gap:40px;padding:18px 24px;background:#1b231d;align-items:center}.label{color:#909b8d;display:block;margin-bottom:7px;font-size:9px}.hud strong{font:16px monospace;letter-spacing:2px}.hud small{font:9px monospace;color:var(--accent);letter-spacing:1px;margin-left:5px}button{cursor:pointer;font:11px monospace;letter-spacing:1px}button:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#pause{background:none;border:1px solid #46523e;color:var(--paper);width:32px;height:32px}.viewport{position:relative;background:#141e21}canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#101b2190,#101a20db);text-align:center;padding:20px}.overlay[hidden]{display:none}.overlay h2{font-family:Georgia,serif;font-size:clamp(26px,5vw,54px);font-weight:400;margin:8px 0 12px}.overlay>p:not(.eyebrow):not(.hint){color:#b4bcb1;font-size:13px;line-height:1.5}#play{background:var(--accent);color:#202919;border:0;padding:17px 24px;margin-top:19px}#play span{margin-left:30px}.hint{color:#929e8a;margin-top:20px;font-size:9px}.status{display:flex;justify-content:space-between;padding:12px 20px;background:#1b231d;color:#919c89;font-size:9px}.status i{width:4px;height:4px}.controls{display:flex;justify-content:center;gap:28px;margin:26px 0 42px}.controls div{display:flex;align-items:center;gap:5px}.controls span{font-size:11px;color:#9ca597;margin-left:5px}kbd{font:10px monospace;border:1px solid #414c40;border-bottom:2px solid #414c40;padding:5px 8px;border-radius:3px;color:#bec7b5}.touch-controls{display:none;gap:10px;margin-bottom:24px}.touch-controls button{touch-action:none;background:#283326;color:var(--paper);border:1px solid #56664c;padding:16px;flex:1;user-select:none}@media(pointer:coarse){.touch-controls{display:flex}}@media(max-width:700px){main{padding:20px 14px}.hud{gap:15px;padding:12px}.hud strong{font-size:12px}.hud small{display:none}.hud #pause{margin-left:auto}.controls{gap:12px;flex-wrap:wrap;margin-bottom:28px}.status{font-size:7px;padding:10px}.overlay .eyebrow{font-size:8px}.overlay h2{margin:0}.overlay>p:not(.eyebrow):not(.hint){font-size:11px;margin:8px 0}#play{margin-top:5px;padding:12px}.hint{display:none}}

.boss-hud{padding:12px 24px;background:#302724;color:#efba96;font:10px monospace;letter-spacing:1px}.boss-hud[hidden]{display:none}.boss-hud>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}.boss-hud progress{display:block;width:100%;height:9px;accent-color:#de695e}.boss-hud progress::-webkit-progress-bar{background:#171d19}.boss-hud progress::-webkit-progress-value{background:#de695e}@media(max-width:700px){.boss-hud{padding:10px;font-size:8px}}.campaign-route{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 18px}.route-card{position:relative;background:#1c2626;border:1px solid #354444;border-top:3px solid #718c7e;padding:14px 12px;overflow:hidden}.route-card>span{display:block;font:9px monospace;letter-spacing:1.5px;color:#9bac9b}.route-card strong{display:block;font-size:13px;margin:10px 0}.route-card small{font:9px monospace;color:#a4b0a0}.route-card:nth-child(2){background:#302326;border-color:#744c40}.route-card:nth-child(3){background:#252136;border-color:#65547f}.route-card.boss-card{background:#352026;border-color:#aa5b5d;padding-right:48px}.route-card.current{outline:2px solid var(--accent);outline-offset:-2px}.boss-card>span{color:#efa391}.boss-preview{position:absolute;right:16px;top:33px;width:24px;height:38px;background:#de8779;box-shadow:-5px 8px 0 -1px #de8779,5px 8px 0 -1px #de8779}.boss-preview:before{content:'';position:absolute;left:2px;top:-7px;width:5px;height:10px;background:#de8779;box-shadow:15px 0 #de8779}.boss-preview:after{content:'';position:absolute;top:8px;left:4px;width:5px;height:3px;background:#291e24;box-shadow:11px 0 #291e24}.practice{background:transparent;color:#e9ad94;border:1px solid #8f6350;padding:10px 18px;margin-top:12px}.practice[hidden]{display:none}@media(max-width:700px){.campaign-route{grid-template-columns:repeat(2,1fr)}.route-card{padding:9px}.route-card strong{margin:6px 0}.route-card small{font-size:8px}.overlay .practice{padding:7px 12px;margin-top:7px;font-size:9px}.overlay .eyebrow{margin-bottom:5px}.overlay h2{font-size:24px}.overlay{padding:10px}}
.field-guide{border:1px solid var(--line);border-top:0;padding:14px 20px;background:#1a221d;font:10px monospace;color:#b1b9aa}.field-guide p{margin:0 0 12px;line-height:1.6}.field-guide strong{color:var(--accent);margin-right:12px}.field-guide>div{display:flex;gap:24px;flex-wrap:wrap}.enemy-chip small{display:block;color:#9ca597;font:10px Arial,sans-serif;margin-top:5px}.zombie{color:#8caa79}.shooter{color:#e49c61}.diver{color:#c283be}
/* Classic horizontal 4:3 CRT display; retain 256 × 224 logical coordinates. */
.viewport{max-width:768px;margin:0 auto}#game{aspect-ratio:4 / 3}.weapon-guide{font:10px monospace;line-height:1.8;color:var(--accent);text-align:center;padding:0 12px}.weapon-guide span{color:#9ca597}.touch-controls{flex-wrap:wrap}.hud{gap:22px}@media(max-width:700px){.hud{gap:12px}.hud strong{font-size:11px}.touch-controls button{padding:12px;min-width:44px}}
.character-select{border:0;padding:0;margin:12px 0 0;width:min(100%,560px);min-width:0}.character-select[hidden]{display:none}.character-select legend{font:9px monospace;letter-spacing:2px;color:#b8c3af;margin-bottom:10px;width:100%}.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.character-card{position:relative;padding:6px;background:#151e20;border:1px solid #586056;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}.character-card input{position:absolute;width:1px;height:1px;opacity:0}.character-card:has(input:checked){border-color:var(--accent);background:#354132;box-shadow:0 0 0 1px var(--accent)}.character-card:has(input:focus-visible){outline:2px solid #fff;outline-offset:4px}.character-portrait{display:block;overflow:hidden;background:#e9e7de}.character-portrait img{display:block;width:100%;height:122px;object-fit:cover;object-position:center 25%;filter:contrast(1.08)}.character-card strong{display:block;font:11px monospace;color:#e5e2d9;margin-top:8px}.character-card small{display:block;font:9px Arial,sans-serif;color:#aab4a6;margin:4px 0;line-height:1.3}.character-select>p{font:9px monospace;color:var(--accent);margin:12px 0 0}.overlay:has(.character-select:not([hidden])) h2{font-size:clamp(24px,4vw,42px);margin:0 0 5px}.overlay:has(.character-select:not([hidden]))>#overlay-copy{margin:4px 0}.overlay:has(.character-select:not([hidden]))>#play{margin-top:14px}@media(max-width:700px){.character-select{margin-top:6px}.character-select legend,.character-card small{display:none}.character-portrait img{height:62px}.character-card{padding:3px}.character-card strong{font-size:9px;margin:5px 0 2px}.character-grid{gap:5px}.character-select>p{font-size:8px;margin-top:7px}.overlay:has(.character-select:not([hidden]))>#play{margin-top:8px}.overlay:has(.character-select:not([hidden]))>#overlay-copy{font-size:10px}.overlay:has(.character-select:not([hidden])) .eyebrow{font-size:7px}}
.character-portrait img{image-rendering:pixelated;filter:none}
.gear-bar{display:flex;justify-content:space-between;gap:12px;padding:10px 24px;background:#273027;font:10px monospace;color:#c1cbb8}.gear-bar strong{color:var(--accent)}#weapon{font-size:12px;letter-spacing:0}.gear-paths{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}.gear-paths>div{border:1px solid var(--line);padding:12px;font:10px monospace;color:#afb9a5}.gear-paths strong{color:var(--paper);letter-spacing:1px}.gear-paths p{line-height:1.5;margin:6px 0 0}@media(max-width:700px){.gear-bar{padding:10px;flex-direction:column;gap:5px;font-size:9px}.gear-paths{grid-template-columns:1fr}#weapon{font-size:10px}.hud{gap:9px}}
@media(max-width:700px){.hud{flex-wrap:wrap}.hud>div{min-width:44px}}
.character-portrait{background:#30393b}.character-portrait img{object-fit:cover;object-position:center 25%}.sprite-studio-link{text-align:center;font:10px monospace;line-height:1.8}.sprite-studio-link a{color:var(--accent);padding:8px}.sprite-studio-link span{color:#93a08e}

#music-toggle{background:none;border:1px solid #46523e;color:var(--paper);padding:8px;font:9px monospace;white-space:nowrap}

.level-practice{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}.level-practice[hidden]{display:none}.level-practice .practice{margin:0;padding:8px 10px;font-size:10px}

.cover{position:relative;isolation:isolate;margin:28px 0 24px;overflow:hidden;background:#101b2c;border:1px solid #414c50}
.cover-art{display:block;width:100%;height:auto;image-rendering:pixelated}
.cover-copy{position:absolute;z-index:1;left:4%;top:12%;max-width:40%;text-shadow:2px 2px 0 #071422,0 2px 12px #071422}
.cover-copy .eyebrow{font-size:9px;line-height:1.8;letter-spacing:1px;color:#e8e7bd}
.cover-copy h1{font:bold clamp(30px,5.4vw,66px)/1 monospace;letter-spacing:-3px;color:#fff0cd}
.cover-copy h1 span{display:block;font-size:.34em;letter-spacing:5px;margin:12px 0 0;color:#c1e8e8}
.cover-subtitle{font:12px monospace;line-height:1.7;color:#fff0cd;margin:18px 0}
.cover-play{display:inline-block;background:#fff0cd;color:#101b2c;text-shadow:none;text-decoration:none;font:bold 11px monospace;padding:13px 15px;border:2px solid #fff0cd}
.cover-play:hover,.cover-play:focus-visible{background:#c1e8e8;border-color:#c1e8e8;outline-offset:4px}
#cabinet{scroll-margin-top:16px}
@media(max-width:700px){.cover-copy{position:relative;left:auto;top:auto;max-width:none;padding:20px;background:#101b2c}.cover-copy h1{font-size:38px}.cover-copy h1 span{display:inline-block;margin:0 0 0 16px;font-size:13px;letter-spacing:2px}.cover-copy .eyebrow{margin-bottom:12px}.cover-subtitle{margin:12px 0}.cover{margin-top:20px}}

/* Band logo retains its original silhouette with a transparent pixel-art export. */
.cover-copy{width:38%}
.cover-logo{display:block;width:100%;max-width:410px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 2px 4px #07142280)}
@media(max-width:700px){.cover-copy{width:auto}.cover-logo{width:min(100%,380px)}.cover-copy h1 span{display:block;margin:12px 0 0}}

/* Arcade title-screen typography, inspired by coverart/image.png. */
@font-face{font-family:'Leeward Arcade';src:url('public/fonts/PressStart2P-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--arcade-font:'Leeward Arcade',monospace;--arcade-gold:#eee2a2;--arcade-lilac:#d6b5f4;--arcade-shadow:2px 2px 0 #101020}
.brand{font-family:var(--arcade-font);font-size:20px;font-weight:400;letter-spacing:0;color:var(--arcade-gold);text-shadow:var(--arcade-shadow)}
.brand span{font-size:8px;line-height:1.8;letter-spacing:2px;margin-top:10px;color:#a9dfea}
.build{font-family:var(--arcade-font);font-size:8px;line-height:2;letter-spacing:0;text-align:right}
.cover-copy{text-shadow:var(--arcade-shadow)}
.cover-copy .eyebrow{font-family:var(--arcade-font);font-size:8px;line-height:2;letter-spacing:0;color:var(--arcade-gold)}
.cover-copy h1 span{font-family:var(--arcade-font);font-size:16px;font-weight:400;line-height:1.5;letter-spacing:2px;color:#a9dfea;text-shadow:2px 2px 0 #b5354a,4px 4px 0 #101020;margin-top:18px}
.cover-subtitle{font-family:var(--arcade-font);font-size:8px;line-height:2;letter-spacing:0;text-transform:uppercase;color:var(--arcade-gold)}
.cover-play{font-family:var(--arcade-font);font-size:14px;font-weight:400;line-height:2;letter-spacing:0;text-align:left;color:var(--arcade-lilac);background:transparent;border:0;padding:12px 0;margin-top:52px;text-shadow:var(--arcade-shadow)}
.cover-play:hover,.cover-play:focus-visible{color:#fff;background:transparent;text-shadow:2px 2px 0 #61418a}.cover-play:focus-visible{outline:2px dashed var(--arcade-lilac);outline-offset:6px}
/* The landing page's music switch, top right of the cover: the same setting as the scoreboard's. */
.cover-music{position:absolute;z-index:2;top:12px;right:12px;background:transparent;border:0;padding:8px;font-family:var(--arcade-font);font-size:8px;line-height:1;color:#fefdee;text-shadow:var(--arcade-shadow);cursor:pointer}
.cover-music:hover,.cover-music:focus-visible{color:var(--arcade-lilac)}.cover-music:focus-visible{outline:2px dashed var(--arcade-lilac);outline-offset:2px}
.route-card>span,.route-card strong,.route-card small,.gear-paths strong,.controls kbd{font-family:var(--arcade-font);font-weight:400;letter-spacing:0;line-height:1.9}
.route-card>span{font-size:8px;color:var(--arcade-lilac)}
.route-card strong{font-size:10px;color:var(--arcade-gold);text-shadow:var(--arcade-shadow)}
.route-card small{font-size:8px}
.gear-paths strong{font-size:9px;color:var(--arcade-gold)}
.controls kbd{font-size:8px;color:var(--arcade-gold)}
@media(max-width:700px){.brand{font-size:14px}.brand span{font-size:8px;letter-spacing:0}.build{font-size:6px;max-width:45%}.cover-copy h1 span{font-size:16px}.route-card strong{font-size:8px}.route-card small{font-size:7px}}

.cover-title-art{display:block;width:54%;max-width:225px;height:auto;margin:53px 0 0;image-rendering:pixelated;filter:drop-shadow(0 2px 3px #071422b3)}
/* The Streamo title sits 38px in; PRESS START, below it, is centred across the whole cover: its box
   spans the cover (the copy column is 38% wide, 4% in), so -4/38 and 100/38 of the column. */
.cover-title-art{margin-left:38px}
.cover-title-art+.cover-play{display:flex;justify-content:center;white-space:nowrap;width:263.16%;margin-top:63px;margin-left:-10.53%;color:#fefdee}
@media(min-width:701px) and (max-width:1000px){.cover-copy{top:6%}.cover-title-art{margin-top:47px}.cover-title-art+.cover-play{margin-top:51px}}
@media(max-width:700px){.cover-title-art{width:56%;max-width:211px}} /* PRESS START stays centred across the cover on phones too */

/* Live boss instructions stay readable in the fixed stage arena. */
.boss-hud>div{flex-wrap:wrap;line-height:1.7}.boss-preview{background:transparent;box-shadow:none;width:48px;height:48px;top:22px;right:0;background-image:url('public/enemies/hustler/hustler-sheet.png');background-size:288px 192px;image-rendering:pixelated}.boss-preview:before,.boss-preview:after{display:none}

/* Configured page sections must stay hidden even when styled as flex/grid. */
[data-page-ui][hidden]{display:none!important}

/* Compact arcade scoring, inspired by the original cabinet display. */
.gear-bar[hidden],.status[hidden],.arcade-scoreboard [hidden]{display:none!important}
.arcade-scoreboard{display:grid;grid-template-columns:1fr 1fr .65fr auto;gap:16px;align-items:start;padding:20px 24px 16px;background:#000;border:0}
.arcade-scoreboard .label,.arcade-scoreboard strong,.arcade-scoreboard button{font-family:var(--arcade-font);font-weight:400;letter-spacing:0;line-height:1.6;text-shadow:none}
.arcade-scoreboard .label{font-size:clamp(8px,1.2vw,12px);color:#f4e675;margin-bottom:2px;white-space:nowrap}
.arcade-scoreboard strong{display:block;font-size:clamp(12px,1.6vw,17px);color:#fff}
.arcade-scoreboard .score-best .label{color:#e65796}
.arcade-scoreboard .score-lives .label{color:#9ee8e7}
.arcade-scoreboard .score-actions{display:flex;align-items:center;gap:14px;padding-top:4px}
.arcade-scoreboard #music-toggle,.arcade-scoreboard #pause{background:transparent;border:0;color:#aaa;font-size:8px;padding:5px 0;margin:0;min-width:0;width:auto;height:auto;letter-spacing:0}
.arcade-scoreboard #pause{font-size:16px;min-width:24px}
.arcade-scoreboard button:hover{color:#fff!important}
.boss-hud{background:#000;color:#eee;font-family:var(--arcade-font);font-size:8px}
.boss-hud #boss-action{display:none}
.overlay>p:not(.eyebrow):not(.hint){font-family:var(--arcade-font);font-size:12px;line-height:1.9}
/* Phones: one row, as on desktop, drawn smaller and closer together, with MUSIC and pause at the top right */
@media(max-width:700px){.arcade-scoreboard{grid-template-columns:auto auto auto auto;justify-content:space-between;gap:8px;padding:8px 10px}.arcade-scoreboard .score-actions{grid-column:auto;justify-self:end;padding:0;gap:8px}.arcade-scoreboard #music-toggle{font-size:6px}.arcade-scoreboard .label{font-size:7px;margin-bottom:0}.arcade-scoreboard strong{font-size:10px}}

/* Scoreboard sits over the scene, without adding height above the canvas. */
.viewport .arcade-scoreboard{position:absolute;inset:0 0 auto;z-index:2;background:transparent;pointer-events:none}
.viewport .arcade-scoreboard button{pointer-events:auto}
.viewport .arcade-scoreboard .label,.viewport .arcade-scoreboard strong,.viewport .arcade-scoreboard button{text-shadow:2px 2px 0 #000,-1px -1px 0 #000}
.viewport .boss-hud{position:absolute;top:78px;left:0;right:0;z-index:2;background:transparent;pointer-events:none;text-shadow:1px 1px #000}
.viewport .overlay{z-index:3}
@media(max-width:700px){.viewport .boss-hud{top:94px}}

/* Character selection is an arcade menu on black, not a preview of the level. */
.overlay:has(.character-select:not([hidden])){background:#000;overflow-y:auto;justify-content:safe center}
.overlay h2,.overlay .eyebrow,.overlay .hint,.overlay button,.character-select legend,.character-card strong,.character-card small,.character-select>p{font-family:var(--arcade-font);font-weight:400;letter-spacing:0;line-height:1.8}
.overlay h2,.overlay:has(.character-select:not([hidden])) h2{font-size:clamp(16px,2.6vw,28px);color:#f4e675;line-height:1.6;margin:0 0 12px}
.character-select legend{font-size:10px;color:#9ee8e7}
.character-card strong{font-size:12px;color:#fff}
.character-card small{font-size:9px;line-height:1.8}
.character-select>p{font-size:10px;line-height:1.8}
.overlay .eyebrow,.overlay .hint{font-size:10px}
.overlay #play{font-size:12px;line-height:1.8}.overlay .practice{font-size:9px;line-height:1.8}
@media(max-width:700px){
  .overlay h2,.overlay:has(.character-select:not([hidden])) h2{font-size:14px;margin-bottom:6px}
  .overlay:has(.character-select:not([hidden]))>#overlay-copy{font-size:7px}
  .character-card strong{font-size:8px}
  .character-select>p{font-size:7px}
  .overlay #play{font-size:9px;padding:9px 10px}.overlay .practice,.level-practice .practice{font-size:8px;padding:7px 8px}
}

.character-select>#selected-name[hidden]{display:none}

#overlay-copy:empty{display:none}

/* Three-minute arcade clock, directly below the player's score. */
.arcade-scoreboard .score-time{margin-top:8px}
.arcade-scoreboard .score-time .label{color:#e8a9be}
.arcade-scoreboard #level-time{color:#9ee8e7}
.arcade-scoreboard #level-time.time-low{color:#ff7777}
.viewport .boss-hud{top:130px}
@media(max-width:700px){.arcade-scoreboard .score-time{margin-top:2px}.viewport .boss-hud{top:66px}}

/* Title and game occupy the same screen, never successive page sections. */
.game-screen{position:relative;width:100%;max-width:768px;aspect-ratio:4 / 3;margin:24px auto;background:#000}
.game-screen .viewport{width:100%;height:100%;max-width:none;margin:0}
.game-screen>.cover,.game-screen>.cabinet{position:absolute;inset:0;min-width:0;min-height:0;margin:0}
.game-screen>.cover{z-index:5;align-self:stretch;background:#000}
.game-screen>.cover[hidden]{display:none}
.game-screen.intro-visible>.cabinet{display:none}
.game-screen>.cover .cover-art{height:100%;object-fit:cover;object-position:center}
.game-screen>.cover{container-type:inline-size}
.game-screen #game{width:100%;height:100%}
.game-screen .overlay{overflow:auto;justify-content:safe center}
.game-screen .overlay>*{flex-shrink:0}
/* Keep title elements over the artwork even on small screens. */
.game-screen .cover-copy{position:absolute;left:4%;top:12%;width:38%;max-width:40%;padding:0;background:transparent}
.game-screen .cover-title-art{margin-top:calc(4cqw + 15px)}
.game-screen .cover-title-art+.cover-play{margin-top:calc(3cqw + 35px);font-size:clamp(8px,1.8cqw,14px);padding:6px 0}

/* Opening comic: opaque layer above the game, HUD and selection. */
.opening{position:absolute;inset:0;z-index:5;background:#fff;color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;gap:12px}
.opening[hidden]{display:none}
.opening img{display:block;min-height:0;width:100%;height:calc(100% - 48px);object-fit:contain;image-rendering:pixelated;flex:1}
.opening-controls{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;font:9px var(--arcade-font);color:#000}
.opening-controls button{font:9px var(--arcade-font);background:transparent;color:#000;border:0;padding:12px;line-height:1.5}
@media(max-width:500px){.opening{padding:6px;gap:6px}.opening-controls{gap:8px;font-size:7px}.opening-controls button{font-size:7px;padding:8px}}

/* The wide story panels use the cabinet width, not the gameplay canvas cap. */
.viewport:has(>.opening:not([hidden])){max-width:none;width:100%;background:#fff}
.viewport:has(>.opening:not([hidden]))>:not(.opening){display:none}
.viewport>.opening:not([hidden]){position:absolute;inset:0;width:100%;height:100%;padding:12px 0;gap:12px}
.viewport>.opening:not([hidden]) img{flex:1;min-height:0;height:0;width:100%;object-fit:contain}
.opening-controls{flex-shrink:0}
.opening-controls button:focus-visible{outline:none;text-decoration:underline;text-underline-offset:5px}

#twin-health{display:flex;gap:16px}#twin-health[hidden]{display:none}#twin-health label{flex:1}#twin-health progress{margin-top:4px}.boss-hud progress[hidden]{display:none}

.controller-setup { display: inline-block; margin-top: 10px; color: #d9ed91; font: 11px/1.5 var(--arcade-font); } /* Press Start 2P, loaded as Leeward Arcade */
/* The menu (and the other overlays) in the cover logo's palette: its yellow letters, orange
   shadow and deep brown shadow, sampled from public/cover/leeward-logo-user.png. */
:root{--leeward-yellow:#f8e000;--leeward-orange:#f07018;--leeward-brown:#802810} /* orange: the logo's #e04810, brightened: on small text it read as red */
.overlay h2,.overlay:has(.character-select:not([hidden])) h2{color:var(--leeward-yellow);text-shadow:2px 2px 0 var(--leeward-orange),4px 4px 0 var(--leeward-brown)}
.overlay .eyebrow{color:var(--leeward-orange)}
.overlay .hint{color:var(--leeward-yellow)}
.overlay #play{background:var(--leeward-yellow);color:var(--leeward-brown);box-shadow:4px 4px 0 var(--leeward-orange)}
.character-card{border-color:var(--leeward-brown)}
.character-card:has(input:checked){border-color:var(--leeward-yellow);background:#3a2410;box-shadow:0 0 0 1px var(--leeward-yellow)}
.character-card strong{color:var(--leeward-yellow)}
.character-card small{color:var(--leeward-orange)}
.overlay .practice{color:var(--leeward-yellow);border-color:var(--leeward-orange)}
.controller-setup{color:var(--leeward-yellow)}
.overlay #play{background:transparent;box-shadow:none;border:0;color:var(--leeward-yellow);text-shadow:2px 2px 0 var(--leeward-orange),3px 3px 0 var(--leeward-brown);padding:12px 8px}
.overlay #play::after{content:'';display:inline-block;width:80px;height:28px;margin-left:14px;vertical-align:middle;background:url('public/ui/guitar.png?v=3') no-repeat center/80px 28px;image-rendering:pixelated} /* after Thornton's guitar: 40x14 at 2x */
.overlay #play:hover,.overlay #play:focus-visible{color:#fff7a0}
/* PRESS START on the cover in the logo's colours: yellow letters stroked in brown (a 1px shadow
   each way), then the orange drop shadow (2px) and the brown (5px). */
.cover-title-art+.cover-play{color:var(--leeward-yellow);text-shadow:-1px -1px 0 var(--leeward-brown),0 -1px 0 var(--leeward-brown),1px -1px 0 var(--leeward-brown),-1px 0 0 var(--leeward-brown),1px 0 0 var(--leeward-brown),-1px 1px 0 var(--leeward-brown),0 1px 0 var(--leeward-brown),1px 1px 0 var(--leeward-brown),2px 2px 0 var(--leeward-orange),5px 5px 0 var(--leeward-brown)}
.cover-title-art+.cover-play:hover,.cover-title-art+.cover-play:focus-visible{color:#fff}
/* Desktop: the game screen fills the window. It keeps its 768x576 layout and is zoomed as a whole
   (--fit, set by page-ui.js from the window size), so the canvas, scoreboard, menus and cover all
   scale together; phones keep the layout above. */
@media(min-width:701px){main:has(.game-screen){max-width:none;padding:16px}.game-screen{width:768px;max-width:none;margin:0 auto;zoom:var(--fit,1)}}
/* The scoreboard's MUSIC ON and pause buttons in the bitmap arcade font. The arcade font has no
   pause or play sign, so those are drawn as pixel icons (the button's text stays for screen readers):
   two bars, or a stepped triangle once paused. */
.arcade-scoreboard #music-toggle{font-family:var(--arcade-font);font-size:8px;line-height:1}
.arcade-scoreboard #pause{font-size:0;line-height:0;display:flex;align-items:center;justify-content:center;min-height:16px}
.arcade-scoreboard #pause::before{content:'';width:8px;height:10px;background:linear-gradient(to right,currentColor 0 3px,transparent 3px 5px,currentColor 5px 8px)}
.arcade-scoreboard #pause.paused::before{width:6px;background:currentColor;clip-path:polygon(0 0,2px 0,2px 2px,4px 2px,4px 4px,6px 4px,6px 6px,4px 6px,4px 8px,2px 8px,2px 10px,0 10px)}
.arcade-scoreboard #music-toggle:hover,.arcade-scoreboard #pause:hover{color:#fff}
/* Phones and tablets: a Game Boy's controls below the game, emulating its face: the dark D-pad, the
   maroon A and B set on a slant, and the grey SELECT and START pills with their navy labels. They
   act as a gamepad (main.js). touch-action:none stops a quick double tap zooming the page and a
   drag scrolling it; no callout, selection or tap flash on a long hold. Hidden on desktop. */
.gameboy-pad{display:none}
@media(hover:none) and (pointer:coarse){
 /* the same size as the game screen above it: as wide, and 4:3, so the same height */
 .gameboy-pad{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"brand brand" "dpad ab" "meta meta";align-items:center;align-content:space-evenly;gap:8px 8px;width:100%;max-width:768px;aspect-ratio:4 / 3;margin:14px auto 24px;padding:12px 14px 10px;background:#d6d2c8;border-radius:10px 10px 44px 10px;box-shadow:inset 0 -3px 0 #b9b4a8;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
 .gameboy-pad *{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
 /* the maker and model under the screen, as on the Game Boy: a small rounded maker's name, then the
    model in wide, slanted capitals, both in the navy of the button labels */
 .gb-brand{grid-area:brand;display:flex;align-items:baseline;gap:5px;padding-left:6px;color:#2e2f7a;line-height:1;white-space:nowrap}
 .gb-maker{font:700 10px/1 "Arial Rounded MT Bold","Helvetica Rounded",ui-rounded,"Nunito","Varela Round",system-ui,sans-serif;letter-spacing:-.2px}
 .gb-model{display:inline-block;font:500 16px/1 "Futura","Century Gothic","Avenir Next","Trebuchet MS",sans-serif;letter-spacing:1px;transform:skewX(-12deg)}
 .gb-mark{font-size:6px;vertical-align:top;margin-left:2px;letter-spacing:0}
 /* the controls scale with the panel (--pad-scale, set by page-ui.js from its width) */
 .gb-brand,.gb-dpad,.gb-ab,.gb-meta{zoom:var(--pad-scale,1)}
 .gb-dpad{grid-area:dpad;position:relative;width:132px;height:132px;justify-self:center}
 .gb-dpad-cross,.gb-dpad-cross::before{position:absolute;background:#2b2b33;border-radius:5px;box-shadow:0 3px 0 #15151a}
 .gb-dpad-cross{left:0;right:0;top:44px;height:44px}
 .gb-dpad-cross::before{content:'';left:44px;width:44px;top:-44px;height:132px}
 .gb-dpad-cross::after{content:'';position:absolute;left:56px;top:12px;width:20px;height:20px;border-radius:50%;background:#24242b}
 /* held, the cross rocks a little toward the direction (diagonals too) */
 .gb-dpad-cross{transform:translate(var(--px,0),var(--py,0))}
 .gb-dpad[data-held~="left"]{--px:-3px}.gb-dpad[data-held~="right"]{--px:3px}.gb-dpad[data-held~="up"]{--py:-3px}.gb-dpad[data-held~="down"]{--py:3px}
 .gb-ab{grid-area:ab;position:relative;height:132px;justify-self:center;width:150px;transform:rotate(-25deg)}
 .gb-round{position:absolute;width:60px;height:60px;border-radius:50%;border:0;padding:0;background:#9a2257;box-shadow:0 4px 0 #5e1233;color:transparent;font:10px var(--arcade-font);cursor:pointer}
 .gb-round::after{content:attr(aria-label);position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);color:#2e2f7a;font:10px/1 var(--arcade-font);white-space:nowrap}
 .gb-b::after{content:'B'}.gb-a::after{content:'A'}
 .gb-b{left:0;top:44px}.gb-a{right:0;top:20px}
 .gb-round.down{transform:translateY(3px);box-shadow:0 1px 0 #5e1233;background:#86194a}
 .gb-meta{grid-area:meta;display:flex;justify-content:center;gap:22px;padding:0 20px 30px 0} /* the bottom padding is room for the labels hanging below the pills */
 .gb-pill{position:relative;width:62px;height:16px;border-radius:9px;border:0;padding:0;background:#8e8b93;box-shadow:0 3px 0 #66636b;color:transparent;transform:rotate(-25deg);cursor:pointer}
 .gb-pill::after{content:attr(data-pad);position:absolute;left:50%;top:26px;transform:translateX(-50%);color:#2e2f7a;font:8px/1 var(--arcade-font);text-transform:uppercase;letter-spacing:1px}
 .gb-pill.down{transform:rotate(-25deg) translateY(2px);box-shadow:0 1px 0 #66636b}
}
/* No double-tap zoom anywhere on the page (Safari on iPhone and iPad zooms on a double tap otherwise,
   for instance tapping the game screen quickly); pinch-to-zoom still works. */
html,body,.game-screen,#game{touch-action:manipulation}
/* Touch screens: pressing on the game screen (the canvas, the cover picture, the story panels)
   selects nothing, flashes no blue tap highlight, and brings up no long-press menu ("Save Image").
   The game canvas, focused by a tap, shows no focus outline either; on desktop it keeps it. */
.game-screen,.game-screen *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.game-screen img{-webkit-user-drag:none}
@media(hover:none) and (pointer:coarse){#game:focus,#game:focus-visible{outline:none}}
/* Safari on iPhone enlarges small text it thinks is hard to read ("text autosizing"): the pad's
   wordmark, MUSIC ON and other small arcade lettering came out too big and smeared. Text stays at
   the size it's set to. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Phones and tablets: the game screen ignores touches; everything is played from the Game Boy pad
   below it (START, the D-pad and A for the menus, A and SELECT for the stories), so a stray tap on the
   screen does nothing. Only the music switch stays tappable: no pad button turns the music off. */
@media(hover:none) and (pointer:coarse){
 .game-screen{pointer-events:none}
 .game-screen .cover-music,.game-screen #music-toggle{pointer-events:auto}
}