:root{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:16/9}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;top: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:black}.game-shell:fullscreen canvas{width:100%;height:100%;object-fit:contain}.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}
.touch-ui .pause-button{top:6px;right:6px;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:16/9;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:16/9}.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}}