body:not([data-screen="game"]) { background: #150e0b; }
#arena { container: arena / inline-size; }
.match-banner[data-phase="result"] { z-index: 4; top: 28%; left: 50%; right: auto; transform: translateX(-50%); width: min(760px, 86%); padding: 30px; gap: 18px; background: #20120af2; border: 1px solid #c5a474; box-shadow: 0 18px 48px #08040299; text-shadow: none; }
.match-banner[data-phase="result"] > strong { color: #f0ce8c; font-size: clamp(18px, 3vw, 38px); }
.match-banner[data-phase="result"] > span { color: #e0c4aa; }
.match-banner[data-phase="result"] #match-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; padding: 8px 0 0; background: none; }
.match-banner[data-phase="result"] #match-actions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 88px; padding: 20px 14px; white-space: normal; border: 1px solid #c5a474; background: #352117; color: #f0ce8c; transition: background .16s, border-color .16s; }
.match-banner[data-phase="result"] #match-actions button strong { font: 400 clamp(10px, 1.3vw, 16px)/1.5 'Press Start 2P', monospace; text-transform: uppercase; }
.match-banner[data-phase="result"] #match-actions button span { margin: 0; color: #ddc3ad; font-size: 12px; line-height: 1.5; }
.match-banner[data-phase="result"] #match-actions #rematch { background: #d5ad67; color: #211209; border-color: #d5ad67; }
.match-banner[data-phase="result"] #match-actions #rematch span { color: #352215; }
.match-banner[data-phase="result"] #match-actions button:hover { background: #57321c; border-color: #ffe1a8; }
.match-banner[data-phase="result"] #match-actions #rematch:hover { background: #efcb8b; }
.match-banner[data-phase="result"] #match-actions button:focus-visible { outline: 2px solid #ffe1a8; outline-offset: 5px; }
@container arena (max-width: 760px) {
  .match-banner[data-phase="result"] { top: 31%; width: 92%; padding: 12px; gap: 8px; }
  .match-banner[data-phase="result"] > strong { font-size: 18px; }
  .match-banner[data-phase="result"] > span { font-size: 11px; }
  .match-banner[data-phase="result"] #match-actions { gap: 12px; padding-top: 4px; }
  .match-banner[data-phase="result"] #match-actions button { min-height: 54px; padding: 10px; gap: 6px; }
  .match-banner[data-phase="result"] #match-actions button strong { font-size: 10px; }
  .match-banner[data-phase="result"] #match-actions button span { font-size: 10px; }
}
@container arena (max-width: 440px) {
  .match-banner[data-phase="result"] { padding: 8px 10px; gap: 6px; }
  .match-banner[data-phase="result"] > strong { font-size: 14px; }
  .match-banner[data-phase="result"] > span { font-size: 10px; }
  .match-banner[data-phase="result"] #match-actions button { min-height: 44px; padding: 8px; }
  .match-banner[data-phase="result"] #match-actions button strong { font-size: 8px; }
  .match-banner[data-phase="result"] #match-actions button span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .match-banner[data-phase="result"] #match-actions button { transition: none; } }
#menu-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
#menu-scene .arena { width: 100%; height: 100%; border: 0; aspect-ratio: auto; }
#menu-scene .fighters, #menu-scene #fighter-condition, #menu-scene #match-banner,
#menu-scene .scene-top, #menu-scene .scene-bottom, #menu-scene #blood-layer,
#menu-scene .arena-foreground { display: none; }
#menu-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #170c09f2, #170c098c 54%, #170c091a), linear-gradient(0deg, #110906e8, transparent 30%); }
.menu-screen { position: relative; min-height: 100svh; color: #fff0d5; }
.home-content { width: min(720px, 100%); padding: clamp(48px, 9vh, 100px) 7vw 110px; }
#game-title { color: #f0ce8c; font: 400 clamp(32px, 4.6vw, 66px)/1.4 'Press Start 2P', monospace; letter-spacing: -.035em; text-shadow: 0 5px 18px #180903; }
#game-title span { color: #c88b68; font-size: .52em; vertical-align: middle; }
.home-description { color: #e0c4aa; font-size: 16px; margin: 16px 0 38px; }
.home-actions { display: grid; gap: 4px; width: min(370px, 100%); }
.home-actions button { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 18px 0; color: #f0ce8c; text-align: left; border: 0; border-bottom: 1px solid #d2a07440; background: transparent; white-space: normal; transition: color .18s, padding .18s, background .18s; }
.home-actions strong { font: 400 15px/1.6 'Press Start 2P', monospace; }
.home-actions button span { max-width: 135px; color: #dec3ac; font-size: 12px; line-height: 1.5; text-align: right; }
.home-actions button:hover, .home-actions button:focus-visible { color: #fff7dd; background: #a752272b; padding-left: 12px; padding-right: 12px; }
.menu-screen button:focus-visible, .menu-screen input:focus-visible, .game-navigation button:focus-visible { outline: 2px solid #f0ce8c; outline-offset: 5px; }
.home-footer { position: absolute; bottom: 0; width: 100%; display: flex; justify-content: space-between; gap: 20px; padding: 26px 7vw; color: #dfc5ad; font-size: 11px; line-height: 1.6; }
.home-footer > :first-child { letter-spacing: .12em; }
.home-footer > :first-child span { padding: 0 10px; color: #c88b68; }
.game-navigation { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 22px; }
.game-navigation button, .screen-back { min-height: 44px; padding: 10px 16px; border: 1px solid #c5a47470; }
#game-screen { max-width: min(1800px, calc((100svh - 96px) * 16 / 9 + 48px)); padding: 16px 24px 24px; }
#game-screen > :not(.game-topbar):not(#arena) { display: none; }
#game-screen .scene-top, #game-screen .scene-bottom { display: none; }
.game-topbar { display: flex; align-items: center; gap: 20px; padding: 0 0 14px; white-space: nowrap; }
.game-topbar h1 { flex: 0 0 auto; font: 400 clamp(16px, 2vw, 25px)/1.2 Georgia, serif; letter-spacing: 0; }
.game-topbar .description { display: block; flex: 1; min-width: 0; color: #cfc2af; font-size: 12px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.game-topbar .game-navigation { flex: 0 0 auto; padding: 0; gap: 8px; }
.game-topbar .game-navigation button { padding: 10px 14px; }
#training-settings-controls select { color: var(--paper); }
@media (max-width: 600px) {
  #game-screen { padding: 10px 10px 16px; }
  .game-topbar { gap: 8px; padding-bottom: 10px; }
  .game-topbar h1 { font-size: 15px; }
  .game-topbar .description { font-size: 10px; }
  .game-topbar .game-navigation { gap: 4px; }
  .game-topbar .game-navigation button { padding: 8px; font-size: 11px; }
}
body[data-screen="settings"] #menu-scene::after { background: #170e0bea; }
.settings-content { max-width: 880px; padding: 36px 7vw 64px; margin: auto; box-sizing: content-box; }
#settings-title { font: 400 clamp(24px, 4vw, 38px)/1.5 'Press Start 2P', monospace; color: #f0ce8c; margin: 38px 0 12px; }
.settings-description { color: #e0c4aa; margin: 0 0 42px; }
.settings-keyboard { color: #ddc3ad; font-size: 12px; line-height: 1.8; margin: -20px 0 32px; }
.settings-group { padding: 26px 0; border-top: 1px solid #d2a07440; }
.settings-group h3 { font-size: 20px; font-weight: 500; margin: 0 0 20px; color: #f0ce8c; }
.settings-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.settings-fields button { min-height: 44px; padding: 10px 16px; background: #2e1b13; }
.settings-fields button:disabled { color: #ba9f88; background: #211713; }
.settings-fields input[type="range"] { flex: 1 1 180px; max-width: 280px; min-height: 32px; }
.settings-group p { color: #ddc3ad; font-size: 13px; line-height: 1.7; margin: 18px 0 0; }
.settings-group .tool-panel { margin-top: 16px; border-bottom: 0; }
.audio-volumes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 24px; }
.audio-volume { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.audio-volume label { color: #f0ce8c; font-size: 16px; }
.audio-volume output { color: #ddc3ad; font-size: 14px; font-variant-numeric: tabular-nums; }
.audio-volume input[type="range"] { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 44px; margin: 0; accent-color: #f0ce8c; }
@media (max-width: 560px) { .audio-volumes { grid-template-columns: 1fr; gap: 12px; } }
.menu-screen ::selection { background: #f0ce8c; color: #21100b; }
@media (max-width: 600px) {
  #menu-scene::after { background: linear-gradient(90deg, #170c09eb, #170c09a6), linear-gradient(0deg, #110906e8, transparent); }
  .home-content { padding-top: 11svh; }
  .home-description { margin-bottom: 30px; }
  .home-footer { flex-direction: column; gap: 8px; font-size: 10px; }
  .home-actions button span { max-width: 120px; }
  .home-actions strong { font-size: 13px; }
  .settings-fields { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .home-actions button { transition: none; } }
.setup-content { max-width: 1280px; margin: auto; padding: 32px 5vw 40px; }
body[data-screen="battle"] #menu-scene::after, body[data-screen="stage"] #menu-scene::after { background: #170e0be8; }
.setup-navigation { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.setup-steps { display: flex; gap: 30px; padding: 0; margin: 0; list-style-position: inside; color: #c7ab92; font-size: 13px; }
.setup-steps [aria-current="step"] { color: #ffe1a8; text-decoration: underline; text-underline-offset: 8px; }
.setup-heading { grid-column: 1 / -1; margin-bottom: 16px; }
.setup-heading h2, .setup-screen .setup-heading h2 { font: 400 clamp(20px, 2.5vw, 32px)/1.5 'Press Start 2P', monospace; color: #f0ce8c; margin: 0 0 16px; }
.setup-heading p, .setup-screen .setup-heading p { margin: 0; color: #ddc3ad; font-size: 14px; line-height: 1.7; }
.roster-eyebrow { display: block; margin-bottom: 14px; color: #c99f70; font-size: 10px; letter-spacing: .3em; }
#training-roster-picks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#training-roster-picks button { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; align-content: center; padding: 12px; text-align: left; white-space: normal; background: #28181080; border: 1px solid #a9846050; }
#training-roster-picks img { grid-row: 1 / 3; width: 48px; height: 60px; object-fit: contain; }
#training-roster-picks button[aria-pressed="true"] { border-color: #f0ce8c; background: #6e3b2059; box-shadow: inset 0 -2px #f0ce8c; }
#training-roster-picks span { display: block; margin: 0 0 6px; color: #ddc3ad; font-size: 11px; }
#training-roster-picks strong { color: #ffe1a8; font-size: 15px; font-weight: 500; }
.setup-screen .match-setup { grid-template-columns: minmax(0, 1.65fr) minmax(270px, 1fr); gap: 28px 40px; padding: 0; align-items: start; }
.setup-screen .fighter-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 1; align-self: start; gap: 12px; }
.setup-screen .fighter-picks button { position: relative; display: flex; flex-direction: column; justify-content: end; padding: 22px 8px 16px; background: linear-gradient(160deg, #39281d90, #1a110de6); border: 1px solid #a9846050; min-width: 0; overflow: hidden; transition: border-color .16s, background .16s; }
.setup-screen .fighter-picks button::before { content: attr(data-roster-number); position: absolute; top: 12px; left: 12px; color: #b79878; font: 10px/1.4 'Press Start 2P', monospace; }
.setup-screen .fighter-picks button[aria-pressed="true"] { background: linear-gradient(160deg, #7a492b99, #302017); border-color: #f0ce8c; box-shadow: inset 0 -3px #f0ce8c; }
.setup-screen .fighter-picks button[aria-pressed="true"]::after { content: 'SELECTED'; position: absolute; top: 12px; right: 10px; font: 7px/1.4 'Press Start 2P', monospace; color: #ffe1a8; }
.setup-screen .fighter-picks img { width: 100%; height: clamp(150px, 16vw, 215px); object-fit: contain; margin-bottom: 12px; filter: drop-shadow(0 10px 10px #0006); }
.setup-screen .fighter-picks strong { font: 400 clamp(9px, 1vw, 12px)/1.7 'Press Start 2P', monospace; color: #ffe1a8; text-align: center; }
.fighter-details { min-width: 0; padding: 4px 0 0 28px; border-left: 1px solid #a9846040; }
.battle-profile { align-self: start; }
.setup-screen .fighter-picks:has(button:nth-child(4)):not(:has(button:nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fighter-passive { display: block; color: #e0c5ed; font: 11px/1.5 sans-serif; padding-top: 4px; }
.fighter-vitals:has(.fighter-passive) { row-gap: 6px; padding-block: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.profile-passive { color: #ddc3ad; font-size: 12px; line-height: 1.7; margin: 16px 0 0; }
.profile-passive strong { display: block; color: #ffe1a8; font-weight: 500; margin-bottom: 4px; }
@media (max-width: 760px) {
  .fighter-passive { font-size: 8px; line-height: 1.35; padding-top: 0; }
  .fighter-vitals:has(.fighter-passive) { row-gap: 2px; padding-block: 4px; }
}
.setup-screen .fighter-picks:has(button:nth-child(4)) img { height: clamp(95px, 10vw, 135px); margin-bottom: 8px; }
.setup-screen .fighter-picks:has(button:nth-child(4)) button { padding-top: 22px; padding-bottom: 12px; }
.battle-profile h3 { font: 400 32px/1.2 Georgia, serif; color: #ffe1a8; margin: 0; }
.battle-profile .profile-style { margin: 12px 0 18px; }
.battle-profile .profile-description { color: #ddc3ad; margin: 0 0 20px; line-height: 1.7; }
.battle-profile .profile-stats dt { color: #ddc3ad; }
.battle-profile .profile-stats > div { margin: 12px 0; }
.battle-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px 12px; padding-top: 12px; }
.battle-options label[for="battle-difficulty"] { grid-column: 1; grid-row: 1; }
.battle-options label[for="battle-rival"] { grid-column: 2; grid-row: 1; }
.battle-options label { color: #ddc3ad; font-size: 12px; letter-spacing: .04em; }
.battle-options select { grid-row: 2; width: 100%; min-width: 0; font: inherit; color: #ffe1a8; background: #291b14; border: 1px solid #a9846070; padding: 12px; }
.battle-options p { grid-column: 1 / -1; margin: 4px 0 0; color: #ddc3ad; font-size: 12px; line-height: 1.7; }
.setup-screen #start-match { display: block; width: 100%; margin-top: 24px; min-height: 52px; }
#fighter-selection-error { grid-column: 1 / -1; color: #ffc4b2; }
.setup-screen button:focus-visible, .setup-screen select:focus-visible { outline: 2px solid #f0ce8c; outline-offset: 5px; }
.setup-screen button:not(:disabled):hover { border-color: #f0ce8c; }
.setup-keyboard { color: #ddc3ad; font-size: 12px; line-height: 1.8; margin: 30px 0 0; }
.stage-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); gap: 36px; align-items: center; margin: 28px 0; }
.stage-preview { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; background: #291b14; }
.stage-copy h3 { font: 400 32px/1.2 Georgia, serif; color: #ffe1a8; margin: 0 0 18px; }
.stage-copy p { color: #ddc3ad; font-size: 14px; line-height: 1.8; margin: 0; }
.stage-copy #stage-match-summary { font-size: 12px; color: #f0ce8c; margin-top: 28px; padding-top: 20px; border-top: 1px solid #a9846050; }
.stage-copy #stage-error { margin-top: 16px; color: #ffc4b2; }
.stage-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stage-picks button { position: relative; padding: 0 0 15px; text-align: left; white-space: normal; background: #28181080; border: 1px solid #a9846070; }
.stage-picks button[aria-pressed="true"] { border-color: #f0ce8c; background: #6e3b2059; }
.stage-picks button[aria-pressed="true"]::after { content: 'SELECTED'; position: absolute; top: 10px; right: 10px; padding: 8px; color: #ffe1a8; background: #21100bf0; font: 8px/1.5 'Press Start 2P', monospace; }
.stage-picks img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; margin-bottom: 14px; }
.stage-picks button span { display: block; padding: 0 16px; color: #ffe1a8; font-size: 17px; line-height: 1.5; margin-left: 0; }
.stage-picks small { display: block; padding: 4px 16px 0; font-size: 12px; color: #ddc3ad; line-height: 1.5; }
.setup-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; }
.setup-footer .setup-keyboard { margin: 0; }
.setup-footer button { min-height: 48px; }
.setup-screen .primary-action:disabled { background: #392b21; color: #d7bea6; }
@media (max-width: 760px) {
  .setup-content { padding: 24px 5vw 36px; }
  .setup-navigation { gap: 12px; margin-bottom: 28px; }
  .setup-steps { gap: 12px; font-size: 11px; }
  .setup-screen .match-setup { grid-template-columns: 1fr; gap: 24px; }
  .setup-screen .fighter-picks { gap: 8px; }
  .setup-screen .fighter-picks button { padding: 22px 5px 12px; }
  .setup-screen .fighter-picks img { height: clamp(110px, 28vw, 190px); }
  .setup-screen .fighter-picks strong { font-size: clamp(8px, 2vw, 11px); }
  .setup-screen .fighter-picks button::before { top: 9px; left: 8px; font-size: 8px; }
  .setup-screen .fighter-picks button[aria-pressed="true"]::after { top: 10px; right: 6px; font: 8px/1 sans-serif; letter-spacing: .02em; }
  .fighter-details { border-left: 0; border-top: 1px solid #a9846040; padding: 20px 0 0; }
  .battle-profile h3, .stage-copy h3 { font-size: 28px; }
  .setup-screen #start-match { grid-column: 1; justify-self: stretch; }
  .stage-layout { grid-template-columns: 1fr; gap: 24px; }
  .stage-picks { grid-template-columns: 1fr; gap: 14px; }
  .stage-picks button { display: grid; grid-template-columns: 38% 1fr; align-items: center; padding: 0; }
  .stage-picks img { grid-row: 1 / 3; height: 110px; aspect-ratio: auto; margin: 0; }
  .stage-picks button span { align-self: end; padding: 10px 14px 0; font-size: 16px; }
  .stage-picks small { align-self: start; padding: 4px 14px 10px; }
  .stage-picks button[aria-pressed="true"]::after { top: 6px; right: auto; left: 6px; font-size: 6px; padding: 5px; }
  .setup-footer { align-items: stretch; flex-direction: column-reverse; gap: 14px; }
}

@media (max-width: 600px) {
  .game-topbar { flex-wrap: wrap; }
  .game-topbar .description { display: none; }
  .game-topbar .game-navigation { margin-left: auto; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .setup-screen .fighter-picks button { transition: none; } }

.setup-screen .fighter-picks button:disabled { opacity: .45; }
.setup-screen .fighter-picks button:disabled::after { content: 'YOUR FIGHTER'; position: absolute; top: 12px; right: 8px; font-size: 8px; color: #ffe1a8; }
.battle-options { grid-template-columns: 1fr; }
@media (max-width: 600px) { .setup-steps { gap: 8px; font-size: 9px; } }
#loading-screen { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 42%, #3a1a10 0, #150e0b 62%); color: #fff0d5; transition: opacity .6s, visibility .6s; }
#loading-screen[data-state="done"] { opacity: 0; visibility: hidden; pointer-events: none; }
body[data-loading] { overflow: hidden; }
.loading-content { display: grid; justify-items: center; gap: 22px; width: min(520px, 100%); text-align: center; }
.loading-dragon { width: min(440px, 100%); height: auto; overflow: visible; }
.loading-dragon .dragon-empty { color: #3b2419; }
.loading-dragon .dragon-full { color: #ffe149; filter: drop-shadow(0 0 5px #ff8a3c99); }
.loading-dragon .dragon-eye { fill: #150e0b; }
#loading-percent { color: #f0ce8c; font: 400 clamp(22px, 5vw, 38px)/1 'Press Start 2P', monospace; text-shadow: 3px 3px 0 #8d244a; }
#loading-bar { appearance: none; width: min(420px, 100%); height: 20px; overflow: hidden; border: 2px solid #fff0ca; border-radius: 0; background: #721d38; box-shadow: 2px 2px 0 #000; }
#loading-bar::-webkit-progress-bar { border-radius: 0; background: #721d38; }
#loading-bar::-webkit-progress-value { border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 11px, #0b1124 11px 14px), #ffe149; box-shadow: inset 0 2px 0 #fff6; }
#loading-bar::-moz-progress-bar { border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 11px, #0b1124 11px 14px), #ffe149; box-shadow: inset 0 2px 0 #fff6; }
#loading-status { min-height: 1.6em; color: #dec3ac; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { #loading-screen { transition: none; } }