:root{--screen-aspect:4/3;color-scheme:dark;--ink:#0d1518;--muted:#82938d;--acid:#d5ec69;--cream:#e6e8cf;--line:#2b3735}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 30%,#1c2c2a 0,#0b1316 60%,#080e10);color:var(--cream);font-family:Consolas,'Courier New',monospace;min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:none;border:1px solid var(--line);border-radius:3px;padding:10px 13px}button:hover,button:focus-visible{border-color:var(--acid);color:var(--acid);outline:none}button:disabled{opacity:.4;cursor:default}.cabinet{width:min(1160px,calc(100% - 64px));margin:auto}.masthead{height:100px;display:flex;justify-content:space-between;align-items:center;gap:20px}.masthead a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:16px;font-size:12px;letter-spacing:1px}.masthead b{display:block;color:var(--acid);font-size:16px;letter-spacing:5px;margin-top:6px}.logo-mark{font-family:Impact,'Arial Narrow',sans-serif;font-size:45px;color:var(--acid);font-style:italic;letter-spacing:-3px}.header-right{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:1px}.status{color:var(--muted);margin-right:12px}.status i{display:inline-block;width:6px;height:6px;background:var(--acid);border-radius:50%;margin-right:9px;box-shadow:0 0 10px #d5ec6960}.game-shell{position:relative;border:1px solid #3c4a3e;border-radius:5px;overflow:hidden;box-shadow:0 18px 80px #0009,0 0 0 8px #15201d,0 0 0 9px #263329;background:#0c1515;aspect-ratio:var(--screen-aspect);width:min(100%,calc((100dvh - 230px)*var(--screen-aspect)));margin-inline:auto}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;outline:none;touch-action:none}.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,#06100d23 2px 3px);z-index:3;opacity:.5}.pause-button{position:absolute;bottom:14px;right:14px;display:none;background:#10201bbb;padding:5px 10px;z-index:4}.below{display:flex;justify-content:space-between;gap:22px;padding:28px 0 22px;align-items:center}.chapter-label{font-size:10px;letter-spacing:2px;color:#a1afa0}.key-guide{display:flex;gap:14px;font-size:9px;color:var(--muted);flex-wrap:wrap}.key-guide span{white-space:nowrap}kbd{font:inherit;color:#d6dccb;border:1px solid #435347;border-bottom-width:3px;padding:3px 5px;margin-right:5px;border-radius:3px}footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #27332d;padding:20px 0;color:#62766d;font-size:9px;letter-spacing:1px}#overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:4%;pointer-events:none}#overlay>*{pointer-events:auto}.panel{width:100%;text-align:center;max-height:100%;overflow:auto;scrollbar-width:thin}.title-panel{padding-top:10px}.eyebrow{color:var(--acid);letter-spacing:5px;font-size:10px;margin:0 0 16px}.title-panel h1{font-family:Impact,'Arial Narrow',sans-serif;font-style:italic;font-weight:900;font-size:clamp(24px,4.6vw,68px);line-height:.92;margin:0;text-shadow:3px 3px #133228;letter-spacing:1px;color:#ecedd3}.title-panel h1 span{color:var(--acid);font-size:1.35em;margin-left:7px;text-shadow:4px 4px #506b2d}.subtitle{font-family:Impact,'Arial Narrow',sans-serif;letter-spacing:12px;font-size:clamp(24px,3.9vw,49px);color:#efad5e;margin:15px 0 12px}.deck{color:#b3c5ad;font-size:clamp(9px,1.1vw,13px);line-height:1.65;margin:0 0 24px}.menu-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.primary{background:var(--acid);color:#162218;border-color:var(--acid);font-weight:bold;letter-spacing:1px;padding:13px 25px}.primary:hover,.primary:focus-visible{background:#e7f59f;color:#162218}.secondary{background:#10201ce0;letter-spacing:1px;font-size:11px}.title-note{font-size:9px;color:#738d7d;margin-top:21px;letter-spacing:2px}.small-panel{background:#0e1d19ee;border:1px solid #49613e;max-width:610px;padding:24px 30px;box-shadow:0 10px 50px #0008;text-align:left}.small-panel h2{color:var(--cream);font-family:Impact,'Arial Narrow',sans-serif;font-size:34px;font-weight:normal;letter-spacing:1px;margin:0 0 15px}.small-panel p{font-size:12px;line-height:1.8;color:#b5c9b1}.small-panel .eyebrow{margin-bottom:10px}.small-panel .menu-buttons{justify-content:flex-start;margin-top:18px}.character-panel{background:#0e1918db;border:1px solid #374e40;padding:20px 22px}.character-panel h2{font-family:Impact,sans-serif;font-size:30px;letter-spacing:2px;font-weight:normal;margin:0 0 4px}.character-panel .eyebrow{margin-bottom:8px}.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.hero-card{padding:10px 5px;background:#162721e8;border:1px solid #354939;position:relative}.hero-card.selected{border-color:var(--acid);background:#2c3c24;box-shadow:inset 0 -3px var(--acid)}.hero-art{height:110px;display:flex;justify-content:center;align-items:flex-end}.hero-art canvas{width:100px;height:110px;image-rendering:pixelated}.hero-name{font-size:12px;font-weight:bold;margin:9px 0 5px}.hero-tag{font-size:8px;letter-spacing:1px;color:#99ae93}.hero-stats{display:flex;justify-content:center;gap:8px;margin-top:10px;font-size:8px;color:#b9c9b4}.select-row{display:flex;justify-content:space-between;align-items:center;gap:15px}.difficulty{display:flex;gap:6px}.difficulty button{font-size:10px;padding:8px 12px}.difficulty .selected{color:var(--acid);border-color:var(--acid)}.hint{font-size:10px;color:#9bb08f}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}.level-grid button{font-size:12px;background:#172921;text-align:left;min-height:62px}.level-grid span{display:block;font-size:9px;color:#9aac93;margin-bottom:5px}.controls-list{display:grid;grid-template-columns:100px 1fr;gap:8px;font-size:12px;line-height:1.5;color:#b5c9b1}.controls-list strong{color:var(--acid)}.touch-controls{display:none}.game-shell:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;aspect-ratio:auto;background:#000;display:grid;place-items:center}.game-shell:fullscreen canvas{width:min(100vw,calc(100vh*var(--screen-aspect)));height:auto;aspect-ratio:var(--screen-aspect)}.game-shell:fullscreen #overlay{padding:5% 15%}.game-shell:fullscreen .title-panel h1{font-size:80px}@media(max-width:950px){.below{flex-direction:column;align-items:flex-start;gap:15px}.cabinet{width:calc(100% - 36px)}.masthead{height:82px}.status{display:none}.hero-art{height:85px}.hero-art canvas{height:85px;width:78px}.character-panel{padding:12px}.hero-grid{margin:10px 0}.hero-stats{display:none}.subtitle{margin:10px 0}.deck{margin-bottom:15px}.eyebrow{margin-bottom:10px}.title-note{margin-top:13px}.small-panel{padding:16px 22px}.small-panel p{font-size:11px;line-height:1.6}}@media(max-width:600px){.cabinet{width:calc(100% - 20px)}.masthead{height:70px}.masthead a{font-size:8px;letter-spacing:0;gap:8px}.masthead b{font-size:12px;letter-spacing:3px}.header-right{gap:5px}.header-right button{font-size:8px;padding:7px}.logo-mark{font-size:32px}.chapter-label{font-size:8px}.below{padding:18px 0 10px}.key-guide{gap:10px;font-size:8px}footer{font-size:7px;line-height:1.6}.title-panel{padding:0}.eyebrow{font-size:7px;letter-spacing:2px;margin-bottom:6px}.subtitle{letter-spacing:7px;font-size:23px;margin:8px 0}.deck{margin-bottom:9px;font-size:8px}.menu-buttons{gap:5px}.menu-buttons button{font-size:8px;padding:8px 12px}.title-note{font-size:6px;margin-top:8px}.character-panel h2{font-size:17px}.hero-art{height:50px}.hero-art canvas{width:48px;height:53px}.hero-grid{gap:5px;margin:7px 0}.hero-card{padding:3px}.hero-name{font-size:8px;margin:4px 0}.hero-tag{font-size:5px}.hint{font-size:6px}.difficulty button{font-size:7px;padding:5px 7px}.small-panel h2{font-size:23px;margin-bottom:7px}.small-panel p{font-size:8px;line-height:1.5;margin:6px 0}.small-panel .menu-buttons{margin-top:9px}.controls-list{font-size:8px;grid-template-columns:65px 1fr;gap:5px}.small-panel{padding:11px 16px}.level-grid{gap:5px}.level-grid button{font-size:8px;min-height:40px;padding:6px}.level-grid span{font-size:6px}}

@media(max-width:600px){.character-panel{position:relative;padding:9px}.character-panel .hero-art{height:40px}.character-panel .hero-art canvas{height:42px;width:40px}.character-panel .hero-grid{margin:5px 0}.character-panel .hint{display:none}.character-panel .menu-buttons{position:absolute;top:6px;left:6px;margin:0}.character-panel .menu-buttons button{padding:4px;font-size:6px}.character-panel .select-row{gap:6px}.title-panel .title-note{display:none}.title-panel .menu-buttons{gap:4px}.title-panel .menu-buttons button{font-size:7px;padding:7px 9px}}

/* Sound room */ .sound-panel{max-height:94%;overflow:auto}.audio-settings{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}.audio-settings label{font-size:12px;display:flex;align-items:center;gap:10px}.audio-settings input{accent-color:#d5ec69;max-width:130px}.track-list{max-height:180px;overflow:auto;border-top:1px solid #486149}.track{display:flex;gap:12px;align-items:center;width:100%;padding:10px 8px;text-align:left;font:11px Consolas,monospace;background:transparent;color:#d6dec9;border:0;border-bottom:1px solid #263d32;cursor:pointer}.track span{color:#9baa7c}.track small{margin-left:auto;white-space:nowrap}.track:hover,.track.selected{background:#33432b;color:#ecf6b0}.sound-note{font-size:11px!important}
@media(max-width:600px){.game-shell:has(.small-panel){aspect-ratio:auto;height:340px;min-height:0;width:100%;box-sizing:border-box}.game-shell:has(.small-panel)>canvas{position:absolute;inset:0}.small-panel{max-height:94%;overflow-y:auto}}

/* Touch devices only (html.touch-ui is set in index.html). Desktop layout is unchanged.
   Controls never start a scroll, zoom, text selection or long-press menu, so presses are not cancelled. */
html.touch-ui,html.touch-ui body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
.touch-ui .touch-controls,.touch-ui .touch-controls *,.touch-ui canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch-ui .touch-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 4px 10px}
.touch-ui .stick{position:relative;width:min(42vw,170px);aspect-ratio:1;flex:none;border-radius:50%}
.touch-ui .stick-ring{position:absolute;inset:6%;border-radius:50%;border:2px solid #3c5446;background:radial-gradient(circle,#1a2b25 0 38%,#13211d 39% 100%);box-shadow:inset 0 0 18px #0008}
.touch-ui .stick-ring span{position:absolute;top:7%;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:#5f7666}
.touch-ui .stick-knob{position:absolute;left:50%;top:50%;width:40%;height:40%;margin:-20% 0 0 -20%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4f6a58,#253a30);border:2px solid #7d9a77;box-shadow:0 4px 12px #0009;pointer-events:none}
.touch-ui .stick.active .stick-ring{border-color:#7d9a77}.touch-ui .stick.running .stick-ring{border-color:var(--acid);box-shadow:0 0 14px #d5ec6955,inset 0 0 18px #0008}.touch-ui .stick.running .stick-ring span{color:var(--acid)}
.touch-ui .touch-actions{display:grid;grid-template-columns:repeat(2,auto);grid-template-areas:"pick special" "jump attack";gap:10px;align-items:center;justify-items:center}
.touch-ui .touch-actions button{width:66px;height:66px;padding:0;border-radius:50%;font-size:10px;line-height:1.25;background:#1c3027;border:2px solid #3c5446;color:#d6dccb;box-shadow:0 4px 10px #0008}
.touch-ui .touch-actions .t-pick{grid-area:pick}.touch-ui .touch-actions .t-special{grid-area:special;color:#efaa77;border-color:#7a5b44}.touch-ui .touch-actions .t-jump{grid-area:jump;color:#7dc4de;border-color:#3f6675}
.touch-ui .touch-actions .t-attack{grid-area:attack;width:80px;height:80px;color:var(--acid);border-color:var(--acid);font-size:11px}
.touch-ui .touch-actions button.held{background:#355842;transform:scale(.94);filter:brightness(1.25)}
.touch-ui body:not(.in-play) .touch-controls{opacity:.3;pointer-events:none}
/* The pause button stays out of the cabinet HUD, which fills the top rows edge to edge (slot 3, FREED, the objective
   arrow, the toast rows). On desktop it sits in the bottom-right corner (the empty third weapon-panel cell of a 1-player
   cabinet). On touch it sits at the bottom centre (the empty second cell): in landscape the stick and the action buttons
   float over the shell's lower corners, so the bottom right would be under JUMP (tests/mobile.cjs checks it is topmost). */
.touch-ui .pause-button{bottom:6px;right:auto;left:50%;transform:translateX(-50%);padding:6px 11px;font-size:14px;opacity:.85}
.touch-ui .below,.touch-ui footer{display:none}
.full-exit,.rotate-hint{display:none}
.touch-ui .header-right #full{min-width:40px;min-height:34px;font-size:16px}
/* Fullscreen on touch devices: no page header, the playfield takes the room, a clear exit button. */
html.touch-ui.is-full,html.touch-ui.is-full body{background:#05090a}
html.touch-ui.pseudo-full,html.touch-ui.pseudo-full body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden}
.touch-ui.is-full .masthead{display:none}
.touch-ui.is-full:not(.standalone) .full-exit{display:block;position:fixed;top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));z-index:30;width:36px;height:36px;padding:0;border-radius:50%;background:#0d1a17cc;border:1px solid #4a5f52;color:#d6dccb;font-size:15px}
/* Portrait phones: the playfield on top, the stick and buttons in the space below. */
@media (orientation:portrait){
  .touch-ui .cabinet{width:100%;padding:0 8px;min-height:100dvh;display:flex;flex-direction:column}
  .touch-ui .masthead{height:48px}.touch-ui .logo-mark{font-size:26px}
  .touch-ui .touch-controls{flex:1;align-items:center;max-height:280px}
  .touch-ui.is-full .cabinet{justify-content:center;padding-top:max(8px,env(safe-area-inset-top))}
  .touch-ui.is-full .rotate-hint{display:block;margin:10px auto 0;font-size:9px;letter-spacing:2px;color:#9fb79a;text-align:center}
  .touch-ui.is-full .touch-controls{flex:none;margin-top:14px}
}
/* Landscape phones and tablets: stick on the left, buttons on the right, playfield in the middle. */
@media (orientation:landscape){
  .touch-ui .cabinet{width:100%;height:100dvh;padding:2px max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center}
  .touch-ui .masthead{width:100%;height:30px;flex:none;gap:10px}.touch-ui .masthead a{font-size:8px;gap:8px}.touch-ui .masthead b{font-size:11px;letter-spacing:3px;margin-top:2px}.touch-ui .logo-mark{font-size:24px}.touch-ui .header-right button{font-size:9px;padding:5px 9px}.touch-ui .status{display:none}
  /* The playfield takes the full height; the stick and buttons float over its lower corners. */
  .touch-ui.is-full .cabinet{padding-top:0;justify-content:center}
  .touch-ui.is-full .game-shell,.touch-ui.is-full .game-shell:has(.small-panel){height:100dvh;box-shadow:none;border:0;border-radius:0}
  .touch-ui .game-shell,.touch-ui .game-shell:has(.small-panel){height:calc(100dvh - 36px);width:auto;max-width:100%;aspect-ratio:var(--screen-aspect);min-height:0;box-shadow:0 0 0 3px #263329}
  .touch-ui .touch-controls{position:fixed;inset:auto 0 0 0;padding:0 max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));z-index:20;pointer-events:none;align-items:flex-end}
  .touch-ui .stick,.touch-ui .touch-actions{pointer-events:auto}
  .touch-ui body:not(.in-play) .touch-controls .stick,.touch-ui body:not(.in-play) .touch-controls .touch-actions{pointer-events:none}
  .touch-ui .stick{width:min(150px,36vh)}.touch-ui .stick-ring{background:radial-gradient(circle,#1a2b25aa 0 38%,#13211d88 39% 100%)}
  .touch-ui .touch-actions{gap:8px}.touch-ui .touch-actions button{width:min(58px,15vh);height:min(58px,15vh);background:#1c3027bb}.touch-ui .touch-actions .t-attack{width:min(74px,19vh);height:min(74px,19vh)}
  .touch-ui .small-panel{padding:12px 16px}.touch-ui .small-panel h2{font-size:23px;margin-bottom:7px}.touch-ui .small-panel p{font-size:9px;line-height:1.5}.touch-ui .menu-buttons button{font-size:9px;padding:8px 11px}.touch-ui .eyebrow{font-size:8px;letter-spacing:2px}.touch-ui .deck{font-size:9px;margin-bottom:12px}.touch-ui .title-note{display:none}
  .touch-ui .title-panel{padding:0}.touch-ui .title-panel h1{font-size:clamp(20px,6.2vh,34px)}.touch-ui .subtitle{font-size:clamp(13px,4.4vh,22px);letter-spacing:6px;margin:4px 0 5px}.touch-ui .deck{font-size:8px;line-height:1.4;margin:0 0 7px}.touch-ui .title-panel .eyebrow{margin-bottom:6px}.touch-ui .title-panel .menu-buttons{gap:5px}.touch-ui .title-panel .menu-buttons button{font-size:8px;padding:7px 9px}
  .touch-ui .character-panel h2{font-size:19px}.touch-ui .hero-art,.touch-ui .character-panel .hero-art{height:50px}.touch-ui .hero-art canvas,.touch-ui .character-panel .hero-art canvas{height:50px;width:46px}.touch-ui .hero-name{font-size:8px}.touch-ui .hero-tag{font-size:6px}.touch-ui .hint{display:none}.touch-ui .hero-grid{margin:7px 0}
}

/* Native arcade selection art, with keyboard/touch hit areas and free-play difficulty controls. */
.character-panel.arcade-select{max-width:640px;padding:6px;background:#101726;border:2px solid #5376a5;overflow:auto}
.select-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;color:#b9d9ff;font-size:10px;letter-spacing:1px}.select-heading #back{font-size:9px;padding:4px 8px}
.classic-roster{position:relative;width:100%;aspect-ratio:8/3}.classic-roster canvas{width:100%;height:100%;image-rendering:pixelated}
.portrait-buttons{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}.portrait-choice{position:relative;border:2px solid transparent;padding:0;border-radius:0;background:transparent}.portrait-choice span{position:absolute;left:15%;right:15%;top:63%;font-size:clamp(9px,1.5vw,18px);font-weight:bold;font-style:italic;color:transparent}.portrait-choice:hover,.portrait-choice:focus-visible{border-color:#f4d565;background:#f4d56511}.portrait-choice.selected{border-color:#427aff;box-shadow:inset 0 -4px #427aff}.portrait-choice.selected span{background:#e2eaff;color:#174ef5}
.classic-select-bottom{display:grid;grid-template-columns:1fr 2fr;gap:3px;background:#465674;margin-top:3px}.classic-select-bottom #selection-stats{width:100%;height:100%;object-fit:contain;background:#000;image-rendering:pixelated}.select-options{background:#08111c;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;gap:5px}.select-options .difficulty{width:100%;gap:4px;justify-content:center}.select-options .difficulty button{padding:7px 6px;font-size:9px;white-space:nowrap}.select-options .difficulty .selected{background:#223c61;color:#fff0b1;border-color:#568cff}.difficulty-note{font-size:9px;color:#b5c3d5;line-height:1.4;margin:0;min-height:24px}.select-options #begin{padding:8px 18px;font-size:11px;background:#e6c467;border-color:#f3d789;color:#161e2c}
@media(max-width:600px){.game-shell:has(.arcade-select){height:320px;aspect-ratio:auto}.game-shell:has(.arcade-select)>canvas{position:absolute;inset:0}.select-heading{font-size:7px}.select-options{padding:5px;gap:3px}.select-options .difficulty button{font-size:6px;padding:6px 3px}.difficulty-note{font-size:7px;min-height:26px}.select-options #begin{font-size:9px;padding:6px 14px}}
@media(orientation:landscape){.touch-ui .character-panel.arcade-select{max-width:min(640px,calc((100dvh - 100px)*1.7))}.touch-ui .game-shell:has(.arcade-select){height:calc(100dvh - 36px);width:auto;max-width:100%;aspect-ratio:var(--screen-aspect)}.touch-ui.is-full .game-shell:has(.arcade-select){height:100dvh}.touch-ui .select-heading{font-size:7px}.touch-ui .select-options{padding:4px}.touch-ui .select-options .difficulty button{font-size:7px;padding:5px}.touch-ui .select-options #begin{padding:5px 12px;font-size:9px}.touch-ui .difficulty-note{font-size:7px;min-height:18px}}
/* Display aspect (ARCHITECTURE §1.4): the 768x448 canvas (384x224 at 2x) is shown at the cabinet's 4:3 by default; the
   SQUARE PIXELS setting (html.square-pixels, last-eden-settings.aspect) shows it at 12:7. The bitmap never changes. */
html.square-pixels{--screen-aspect:12/7}
/* G6 presentation (PLAN §7 G6, CAMPAIGN §4.7): the chapter card, the intermission panels, the tally, the attract story and
   the ending are drawn on the canvas in the arcade font; the overlay keeps a slim dock with their buttons at the bottom. */
.dock-panel{align-self:flex-end;margin-left:auto;width:auto;max-width:min(100%,520px);background:#08120fb0;border:1px solid #2f4535;padding:5px 6px;box-shadow:none;text-align:right;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dock-panel .eyebrow{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.dock-panel .dock-note{margin:0 4px;font-size:10px;color:var(--acid)}
.dock-panel .menu-buttons{gap:6px;margin:0}
.dock-panel .menu-buttons button{padding:6px 11px;font-size:10px}
.chapter-brief{min-height:5.4em;font-size:11px!important;color:#b5c9b1}
.chapter-brief b{color:var(--acid);letter-spacing:2px;font-weight:normal}
.title-logo{display:none}
.title-panel.rom-logo .title-logo{display:block;margin:0 auto 6px;width:min(100%,520px);height:auto;max-height:30vh;object-fit:contain;image-rendering:pixelated}
.title-panel.rom-logo h1,.title-panel.rom-logo .subtitle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:600px){.dock-panel{padding:4px;gap:4px}.dock-panel .menu-buttons button{padding:6px 9px;font-size:9px}}
.touch-ui .dock-panel{padding:4px;gap:4px}.touch-ui .dock-panel .menu-buttons button{padding:7px 10px;font-size:9px}
.touch-ui .title-panel.rom-logo .title-logo{max-height:24vh}
/* Online co-op (G9b): the title's PLAY WITH FRIENDS entry in the 2P slot blue; the lobby itself is lobby.css, linked by
 lobby.js when it first opens (net.js and lobby.js load only when online play is chosen). */
#mp-open{border-color:#5ab4ff;color:#cfe6ff}

/* ==================================================================================================================
   Site shell (2026-10): play.html shares the home page's look (home.css): night-ink surfaces, crown-gold primary pills,
   ghost secondaries, Inter for text and Jersey 10 for display headings. Everything below overrides the rules above;
   the element ids and classes the game, the lobby and the suites use are unchanged.
   ================================================================================================================== */
:root{--ink:#070b12;--ink-2:#0b121c;--ink-3:#111c2a;--text:#eef2f6;--muted:#a3b2c2;--dim:#7a8a9c;--gold:#ffcf4a;--gold-2:#ffb21f;--brass:#c9a35b;--teal:#3fe0c8;--sun:#ff8a4c;
  --line:rgba(170,205,230,.14);--line-2:rgba(170,205,230,.26);--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--display:"Jersey 10","Arial Narrow",Impact,sans-serif;--cream:#eef2f6;--acid:#ffcf4a}
body{background:radial-gradient(1200px 600px at 50% -10%,rgba(63,224,200,.07),transparent 70%),radial-gradient(900px 500px at 85% 110%,rgba(255,138,76,.08),transparent 70%),#070b12;color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font-family:var(--sans);font-weight:600;letter-spacing:.02em;border-radius:999px;border:1px solid var(--line-2);padding:10px 16px;transition:border-color .2s,background-color .2s,color .2s,transform .2s}
button:hover,button:focus-visible{border-color:var(--teal);color:#fff;background:rgba(20,60,70,.45)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cabinet{width:min(1680px,calc(100% - 48px))}
/* header: the home page's nav */
.masthead{height:64px;gap:18px}
.masthead .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-size:15px;letter-spacing:.01em;font-weight:700}
.masthead .logo-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(145deg,#ffe07a,var(--gold) 50%,var(--gold-2));color:#241700;font:400 22px/1 var(--display);font-style:normal;letter-spacing:0;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.masthead .brand-text{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.masthead .brand-text b{display:inline;color:var(--gold);font-size:15px;letter-spacing:0;margin:0}
.masthead .brand-text small{font-size:13px;font-weight:500;color:var(--muted);margin-left:4px}
.site-nav{display:flex;gap:4px;margin-left:8px;margin-right:auto}
.site-nav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:10px;transition:color .2s,background-color .2s;letter-spacing:0;gap:0}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--text);background:rgba(255,255,255,.06)}
.header-right{gap:10px;font-size:12px;letter-spacing:.04em}
.status{color:var(--muted);font-weight:600;font-size:12px;margin-right:4px}
.status i{background:var(--teal);box-shadow:0 0 0 3px rgba(63,224,200,.16),0 0 10px var(--teal)}
.header-right button{min-height:38px;padding:0 16px;font-size:13px;background:rgba(8,14,26,.5)}
.header-right #full{width:38px;padding:0;font-size:16px;display:inline-grid;place-items:center}
/* the playfield: as large as the window allows (header 64 + legend 56), framed like the home page's cards */
.game-shell{width:min(100%,calc((100dvh - 136px)*var(--screen-aspect)));border:1px solid var(--line-2);border-radius:14px;background:#05080e;box-shadow:0 40px 100px -40px rgba(0,0,0,.9),0 0 0 6px rgba(255,255,255,.025),0 0 80px -30px rgba(63,224,200,.25)}
.pause-button{border-radius:10px;background:rgba(8,14,26,.75);font-size:14px}
/* legend and footer */
.below{padding:16px 2px 14px;gap:18px}
.chapter-label{font-size:13px;letter-spacing:.02em;color:var(--muted);font-weight:500}
.key-guide{gap:8px 18px;font-size:13px;color:var(--muted);font-weight:500}
.key-guide span{display:inline-flex;align-items:center;gap:7px}
kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;margin:0;border-radius:7px;font:600 12px/1 var(--sans);color:var(--text);background:linear-gradient(180deg,#223247,#172436);border:1px solid rgba(255,255,255,.14);border-bottom-width:1px;box-shadow:0 2px 0 #060a10}
footer{border-top:1px solid var(--line);padding:22px 2px 30px;color:var(--dim);font-size:13px;letter-spacing:0;line-height:1.6;align-items:center;flex-wrap:wrap}
footer a{color:var(--muted)}footer a:hover{color:var(--text)}
footer .mostafa{font:400 20px/1 var(--display);color:var(--gold);letter-spacing:.04em}
/* overlay panels: the home page's cards and buttons */
.panel{font-family:var(--sans)}
.eyebrow{color:var(--brass);font:700 clamp(10px,min(1.35vh,1vw),13px)/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.primary{background:linear-gradient(180deg,#ffe07a,var(--gold) 45%,var(--gold-2));color:#241700;border-color:transparent;font-weight:700;letter-spacing:.03em;box-shadow:0 10px 28px -12px rgba(255,190,40,.7),inset 0 -2px 0 rgba(120,70,0,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.primary:hover,.primary:focus-visible{background:linear-gradient(180deg,#fff0a8,#ffd866 45%,var(--gold));color:#241700;border-color:transparent;transform:translateY(-1px)}
.secondary{background:rgba(8,14,26,.62);font-size:12px;letter-spacing:.06em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#mp-open{border-color:rgba(63,224,200,.55);color:#d8fff8}
#mp-open:hover,#mp-open:focus-visible{border-color:var(--teal);background:rgba(20,80,74,.55)}
.small-panel{background:linear-gradient(180deg,rgba(17,28,42,.94),rgba(9,15,24,.95));border:1px solid var(--line-2);border-radius:18px;box-shadow:0 30px 80px -30px #000c;padding:clamp(18px,3vh,30px) clamp(20px,3vw,34px);max-width:640px}
.small-panel h2{font:400 clamp(30px,min(5.4vh,4vw),52px)/.95 var(--display);letter-spacing:.01em;color:var(--text);margin:0 0 14px}
.small-panel p{font-size:clamp(12px,min(1.75vh,1.25vw),15px);line-height:1.65;color:var(--muted)}
.small-panel .menu-buttons{gap:10px}
.level-grid{gap:10px}.level-grid button{border-radius:12px;background:rgba(255,255,255,.04);font-size:13px;font-weight:600;padding:12px 14px;line-height:1.3}
.level-grid button:not(:disabled):hover{background:rgba(63,224,200,.1)}
.level-grid span{font-size:11px;letter-spacing:.12em;color:var(--brass);font-weight:700;text-transform:uppercase}
.controls-list{grid-template-columns:120px 1fr;gap:10px 14px;font-size:clamp(11px,min(1.6vh,1.15vw),14px);color:var(--muted)}
.controls-list strong{color:var(--gold);font-weight:700}
.audio-settings label{font-size:13px;color:var(--muted)}.audio-settings input{accent-color:var(--gold)}
.track-list{border-top:1px solid var(--line);border-radius:0 0 10px 10px}
.track{font:500 13px var(--sans);color:var(--text);border-radius:0;border-bottom:1px solid var(--line)}
.track span{color:var(--brass);font-weight:700}.track:hover,.track.selected{background:rgba(255,207,74,.1);color:#fff}
.dock-panel{border-radius:14px;background:rgba(7,11,18,.72);border:1px solid var(--line-2);padding:6px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dock-panel .dock-note{color:var(--gold);font-weight:600;font-size:12px}
.chapter-brief b{color:var(--gold)}
.character-panel.arcade-select{border-radius:12px;border-color:#5376a5}
/* the title: logo, deck and buttons in the upper part of the screen, so the Cadillac and the cast drawn on the canvas
   below (menuCast, the lower ~30% of the picture) are never covered */
.title-panel{align-self:flex-start;padding:0;display:flex;flex-direction:column;align-items:center;max-height:70%;overflow:visible}
#overlay:has(.title-panel){padding:3.2% 5% 0}
.title-panel .eyebrow{margin:0 0 clamp(4px,1vh,12px);text-shadow:0 2px 10px #000}
.title-panel.rom-logo .title-logo{width:min(58%,600px);max-height:27vh;margin:0 auto clamp(2px,.6vh,8px);filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
.deck{font:500 clamp(12px,min(1.9vh,1.35vw),18px)/1.5 var(--sans);color:#dfe7ee;margin:0 0 clamp(10px,2vh,22px);text-shadow:0 2px 10px #000,0 0 2px #000}
.title-actions{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,14px)}
.menu-main,.menu-more{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(6px,1vh,12px)}
.menu-main button{min-height:clamp(38px,5.4vh,54px);padding:0 clamp(16px,2vw,28px);font-size:clamp(12px,min(1.7vh,1.2vw),16px)}
.menu-main .primary{padding:0 clamp(20px,2.6vw,36px)}
.menu-more button{min-height:clamp(30px,3.9vh,40px);padding:0 clamp(12px,1.3vw,18px);font-size:clamp(10px,min(1.35vh,.95vw),13px);background:rgba(8,14,26,.5);border-color:rgba(170,205,230,.2);color:#c9d5e0}
.title-note{margin-top:clamp(8px,1.5vh,16px);font:600 clamp(9px,min(1.2vh,.85vw),12px)/1.3 var(--sans);letter-spacing:.16em;color:#c9d5e0;text-shadow:0 2px 8px #000;opacity:.85}
.game-shell:fullscreen #overlay:has(.title-panel){padding:3% 10% 0}
@media(max-width:950px){.site-nav,.masthead .brand-text small{display:none}.below{align-items:flex-start}.cabinet{width:calc(100% - 32px)}}
@media(max-width:600px){.masthead{height:60px}.masthead .brand{font-size:13px}.masthead .brand-text b{font-size:13px}.header-right button{min-height:34px;padding:0 12px;font-size:11px}.header-right #full{width:34px}.key-guide{font-size:12px;gap:8px 12px}kbd{min-width:22px;height:22px;font-size:11px}footer{font-size:12px}.title-panel .title-note{display:none}.menu-main button{font-size:11px}.menu-more button{font-size:9px;padding:0 9px;min-height:28px}}
/* touch devices keep their compact layout (tests/mobile.cjs): a slim header, the playfield, the floating controls */
.touch-ui .site-nav,.touch-ui .masthead .brand-text small{display:none}
@media (orientation:landscape){.touch-ui .masthead{height:30px}.touch-ui .masthead .brand{font-size:11px;gap:7px}.touch-ui .masthead .logo-mark{width:22px;height:22px;border-radius:6px;font-size:15px}.touch-ui .masthead .brand-text b{font-size:11px}.touch-ui .header-right button{min-height:24px;padding:0 10px;font-size:9px}.touch-ui .header-right #full{width:auto;min-width:32px;min-height:24px;font-size:14px}
  .touch-ui .game-shell,.touch-ui .game-shell:has(.small-panel){border-radius:8px}
  .touch-ui #overlay:has(.title-panel){padding:2% 4% 0}.touch-ui .title-panel.rom-logo .title-logo{max-height:22vh}.touch-ui .menu-main button{min-height:30px;font-size:9px;padding:0 12px}.touch-ui .menu-more button{min-height:26px;font-size:8px;padding:0 9px}.touch-ui .deck{font-size:9px;margin-bottom:7px}.touch-ui .title-actions{gap:6px}}
@media (orientation:portrait){.touch-ui .masthead{height:48px}.touch-ui .masthead .logo-mark{width:28px;height:28px;font-size:18px}.touch-ui .header-right button{min-height:32px;font-size:11px}}
.touch-ui .touch-actions button{font-family:var(--sans);font-weight:700;border-radius:50%}
.touch-ui .touch-actions .t-attack{color:var(--gold);border-color:var(--gold)}
.touch-ui .stick.running .stick-ring{border-color:var(--gold);box-shadow:0 0 14px rgba(255,207,74,.35),inset 0 0 18px #0008}.touch-ui .stick.running .stick-ring span{color:var(--gold)}
/* modal panels dim the picture behind them; the field guide gets the width its two columns need */
#overlay:has(.small-panel){background:radial-gradient(ellipse at 50% 45%,rgba(4,7,12,.35),rgba(4,7,12,.7))}
.small-panel:has(.controls-list){max-width:780px}
.small-panel:has(.controls-list) .controls-list{gap:6px 14px;line-height:1.45}
.small-panel:has(.controls-list) p{line-height:1.5}
/* small screens: the title packs into the top 70% of a 4:3 picture a phone is ~345 px wide for */
@media (max-width:600px),(orientation:portrait) and (pointer:coarse){
  #overlay:has(.title-panel),.touch-ui #overlay:has(.title-panel){padding:2.5% 3% 0}
  .title-panel .eyebrow{display:none}
  .title-panel.rom-logo .title-logo,.touch-ui .title-panel.rom-logo .title-logo{width:min(46vw,260px);max-height:none;margin-bottom:2px}
  .title-panel .deck,.touch-ui .title-panel .deck{font-size:9px;line-height:1.35;margin:0 0 6px}
  .title-actions,.touch-ui .title-actions{gap:4px}
  .menu-main,.menu-more{gap:4px}
  .menu-main button,.touch-ui .menu-main button{min-height:26px;font-size:9px;padding:0 11px}
  .menu-more button,.touch-ui .menu-more button{min-height:22px;font-size:7.5px;padding:0 7px;letter-spacing:.03em}
  .title-panel .title-note{display:none}
}