@font-face { font-family: 'Press Start 2P'; src: url('assets/fonts/PressStart2P-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root { color-scheme: dark; --paper: #e7dfcf; --muted: #969b99; --gold: #c5a474; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #101416; color: var(--paper); font-family: 'Segoe UI', sans-serif; }
main { max-width: 1600px; margin: auto; padding: 30px 5vw 22px; }
.masthead { display: flex; align-items: center; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid #ffffff16; }
.masthead a { color: var(--paper); text-decoration: none; font: 16px Georgia, serif; letter-spacing: .22em; }
.masthead a span { color: var(--gold); font-style: italic; }
.edition, .eyebrow, .scene-top, .scene-bottom, footer, label { font-size: 10px; letter-spacing: .17em; }
.edition { color: var(--muted); }
.heading { display: flex; justify-content: space-between; align-items: end; padding: 29px 0 25px; gap: 20px; }
.eyebrow { color: var(--gold); margin: 0 0 8px; }
h1 { font: normal clamp(32px, 4vw, 54px)/1.1 Georgia, serif; margin: 0; letter-spacing: -.025em; }
.description { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 0; text-align: right; }
.scenery-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 0 0 18px; }
.scenery-controls select { background: #192023; color: var(--paper); padding: 9px; border: 1px solid #c5a47442; }
.scenery-controls p { flex: 1 1 320px; margin: 0; max-width: 80ch; font-size: 12px; line-height: 1.7; color: #bfc3b9; }
.scenery-controls select:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.arena[data-scenery="spirit"] #fog-layer { filter: sepia(.65) saturate(1.2); }
.arena[data-scenery="spirit"] .sheet-sprite { filter: brightness(.92) saturate(.95); }
.arena[data-scenery="jungle"] #fog-layer { filter: sepia(.65) saturate(.8); }
.arena[data-scenery="jungle"] .sheet-sprite { filter: brightness(1.04) saturate(.95) sepia(.08); }
.arena[data-scenery="bloodsport"] #fog-layer { filter: sepia(.8) saturate(.8); }
.arena[data-scenery="bloodsport"] .sheet-sprite { filter: brightness(.85) saturate(.85) sepia(.12); }
button:disabled { color: #737b7d; cursor: not-allowed; }
.arena { position: relative; aspect-ratio: 16/9; isolation: isolate; overflow: hidden; background: #1b242b; border: 1px solid #c5a47442; }
.backdrop, canvas, .vignette, .arena-foreground { position: absolute; width: 100%; height: 100%; inset: 0; pointer-events: none; }
.backdrop, .arena-foreground { object-fit: cover; }
.arena-foreground { z-index: 3; }
.arena:not([data-scenery="bloodsport"]) #kumite-railing,
.arena:not([data-scenery="jungle"]) #jungle-foreground { display: none; }
.fighters { position: absolute; inset: 0; pointer-events: none; isolation: isolate; overflow: hidden; }
.fighter { position: absolute; bottom: calc(8% + var(--ground-offset, 0%)); height: 53%; aspect-ratio: 2/3; }
.fighter[data-attacking="true"] { z-index: 1; }
.fighter.kurt { left: 22%; }
.fighter.tong { right: 20%; height: 57%; }
.fighter::before { content: ''; position: absolute; width: 85%; height: 7%; left: 8%; bottom: 1%; background: radial-gradient(ellipse, #020609b8, transparent 70%); transform: scale(var(--shadow-scale, 1.3)); }
.fighter img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(.82) saturate(.86); }
.fighter .sprite-body { position: absolute; inset: 0; isolation: isolate; transform-origin: 50% 96%; }
.sprite-body img { position: absolute; inset: 0; mix-blend-mode: plus-lighter; }
.sheet-mode .fighter { aspect-ratio: 1; right: auto; transform: translateX(-50%); }
.sheet-mode .fighter:not([data-ready]) { visibility: hidden; }
.sheet-mode .fighter.tong { height: calc(53% * 600 / 650); bottom: calc(8% + var(--ground-offset, 0%) + (53% - 53% * 600 / 650) * 28 / 768); }
.sheet-mode .fighter.eric { height: calc(53% * 580 / 610); bottom: calc(8% + var(--ground-offset, 0%) + (53% - 53% * 580 / 610) * 28 / 768); }
.fighter canvas.sheet-sprite { position: absolute; inset: 0; width: 100%; height: 100%; filter: brightness(.82) saturate(.86); transform-origin: 50% 96%; }
.fighter[data-state="winner"] .sheet-sprite { animation: victory-breathe 2.4s ease-in-out infinite; }
.arena[data-motion-paused="true"] .fighter[data-state="winner"] .sheet-sprite { animation-play-state: paused; }
@keyframes victory-breathe { 0%, 100% { transform: var(--fighter-transform); } 50% { transform: var(--fighter-transform) translateY(-.35%) scale(1.003, 1.006) rotate(.2deg); } }
@media (prefers-reduced-motion: reduce) { .fighter[data-state="winner"] .sheet-sprite { animation: none; } }
.sheet-mode .fighter::before { width: 55%; left: 23%; bottom: 3%; }
.movement-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 0; border-bottom: 1px solid #ffffff16; font-size: 11px; color: var(--muted); }
.match-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 18px 0; border-bottom: 1px solid #ffffff16; }
.match-controls select { background: #192023; color: var(--paper); padding: 10px; border: 1px solid #c5a47470; }
.match-controls p { margin: 0; color: #c4c9c1; font-size: 12px; line-height: 1.6; }
.match-controls select:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.movement-controls select { background: #192023; color: var(--paper); padding: 8px; border: 1px solid #c5a47442; }
.movement-controls output { color: var(--gold); min-width: 70px; }
.movement-controls select:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.combat-hud { position: absolute; z-index: 1; top: 20px; left: 25px; right: 25px; display: flex; justify-content: space-between; gap: 8%; pointer-events: none; font-family: 'Press Start 2P', monospace; text-shadow: 2px 2px 0 #080c19; }
.combat-hud::after { content: attr(data-clock); position: absolute; left: 50%; top: 28px; transform: translateX(-50%); color: #ffe566; font: 18px 'Press Start 2P', monospace; text-shadow: 3px 3px 0 #8d244a, 5px 5px 0 #080c19; }
.fighter-vitals { display: grid; gap: 10px; width: 46%; padding: 12px 14px; border: 2px solid #eee4c4; border-radius: 0; background: #0b1124f5; box-shadow: inset 0 0 0 2px #294b78, 4px 4px 0 #050816; }
.condition-readout { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 10px; }
.fighter-vitals { position: relative; }
.round-wins { position: absolute; top: calc(100% + 6px); left: 10px; display: flex; gap: 6px; padding: 4px 7px; background: #0b1124e6; }
.fighter-vitals:last-child .round-wins { left: auto; right: 10px; flex-direction: row-reverse; }
.round-trophy { display: block; width: 22px; height: 22px; color: #8997ad; }
.round-trophy[data-won="true"] { color: #ffe149; }
.round-trophy[data-won="true"] .trophy-cup { fill: currentColor; }
@media (max-width: 760px) { .round-wins { top: calc(100% + 3px); left: 3px; gap: 4px; padding: 3px 4px; } .fighter-vitals:last-child .round-wins { right: 3px; } .round-trophy { width: 14px; height: 14px; } }
.combat-hud .condition-readout label { color: #fff0ca; letter-spacing: 0; font-size: 11px; font-weight: 400; line-height: 1.5; text-transform: uppercase; }
.fighter-vitals[data-slot="0"] .condition-readout:first-child label::before { content: '1P '; color: #59e8ff; }
.fighter-vitals[data-slot="1"] .condition-readout:first-child label::before { content: '2P '; color: #ff86aa; }
.combat-hud .condition-readout span { color: #fff0ca; font-size: 8px; line-height: 1.5; }
.combat-hud .condition-readout progress { --meter-fill: #40dfff; --meter-track: #152c52; appearance: none; grid-column: 1 / -1; grid-row: 2; width: 100%; height: 10px; overflow: hidden; border: 2px solid #dfdfcf; border-radius: 0; background: var(--meter-track); box-shadow: 2px 2px 0 #000; }
.combat-hud .condition-readout .health-bar { --meter-fill: #ffe149; --meter-track: #721d38; height: 20px; border-color: #fff0ca; }
.combat-hud progress::-webkit-progress-bar { border-radius: 0; background: var(--meter-track); }
.combat-hud progress::-webkit-progress-value { border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 11px, #0b1124 11px 14px), var(--meter-fill); box-shadow: inset 0 2px 0 #fff6; }
.combat-hud progress::-moz-progress-bar { border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 11px, #0b1124 11px 14px), var(--meter-fill); box-shadow: inset 0 2px 0 #fff6; }
.combat-hud .condition-readout:nth-child(2) label { color: #78eaff; font-size: 7px; letter-spacing: .05em; }
.fighter-vitals:last-child { text-align: right; }
.fighter-vitals:last-child progress { direction: rtl; }
.fighter-vitals:last-child label { grid-column: 2; grid-row: 1; }
.fighter-vitals:last-child span { grid-column: 1; grid-row: 1; text-align: left; }
.strike-readout { display: block; margin-top: 12px; }
.arena:fullscreen .combat-hud { width: calc(min(100vw, 177.7778vh) - 50px); left: 50%; right: auto; top: calc((100vh - min(100vh, 56.25vw)) / 2 + 20px); transform: translateX(-50%); }
@media (max-width: 760px) { .combat-hud { top: 8px; left: 8px; right: 8px; gap: 7%; } .combat-hud::after { top: 20px; font-size: 8px; text-shadow: 2px 2px 0 #8d244a; } .fighter-vitals { width: 46.5%; gap: 5px; padding: 6px; border-width: 1px; box-shadow: inset 0 0 0 1px #294b78, 2px 2px 0 #050816; } .combat-hud .condition-readout { gap: 3px; } .combat-hud .condition-readout label { font-size: 6px; letter-spacing: 0; white-space: nowrap; } .combat-hud .condition-readout span, .combat-hud .condition-readout:nth-child(2) label { font-size: 5px; } .combat-hud .condition-readout:first-child span { display: none; } .combat-hud .condition-readout:first-child label { grid-column: 1 / -1; } .combat-hud .condition-readout .health-bar { height: 11px; } .combat-hud .condition-readout progress { height: 6px; border-width: 1px; } }
#combat-status { margin: 12px 0; color: var(--gold); font-size: 12px; min-height: 18px; line-height: 1.5; }
.condition-readout span, #strike-force { font-size: 11px; color: #bfc3b9; font-variant-numeric: tabular-nums; }
.fighter-profiles { border-bottom: 1px solid #ffffff16; }
.fighter-profiles summary { padding: 18px 0; cursor: pointer; font: 20px Georgia, serif; color: var(--paper); }
.fighter-profiles summary span { margin-left: 14px; color: #bfc3b9; font: 11px 'Segoe UI', sans-serif; }
.fighter-profiles summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.profile-note { max-width: 85ch; margin: 0 0 22px; font-size: 13px; line-height: 1.7; color: #bfc3b9; }
.profile-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-bottom: 26px; }
.fighter-card { display: grid; grid-template-columns: 34% minmax(0, 1fr); background: #192023; border: 1px solid #c5a47442; }
.profile-portrait { align-self: stretch; display: flex; align-items: end; overflow: hidden; background: #131a1c; }
.profile-portrait img { width: 150%; max-width: none; height: 100%; max-height: 430px; object-fit: contain; margin-left: -25%; }
.profile-copy { padding: 25px 22px; }
.profile-copy h3 { margin: 0; font: normal 30px/1.1 Georgia, serif; }
.profile-style { color: var(--gold); margin: 9px 0 16px; font-size: 12px; }
.profile-description { color: #c4c9c1; font-size: 13px; line-height: 1.7; margin: 0 0 22px; }
.profile-metrics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.profile-hits { width: 100%; border-collapse: collapse; font-size: 12px; color: #ddc3ad; }
.profile-hits caption { text-align: left; color: var(--gold); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 0 0 10px; }
.profile-hits th { font-size: 10px; font-weight: 500; color: #bfc3b9; text-align: left; }
.profile-hits th, .profile-hits td { padding: 6px 0; border-bottom: 1px solid #a9846030; }
.profile-hits th:first-child, .profile-hits td:first-child { padding-right: 10px; white-space: nowrap; }
.profile-hits kbd, .profile-combo kbd { font: 11px monospace; color: #ffe1a8; }
.profile-combo { color: #ddc3ad; font-size: 12px; line-height: 1.8; margin: 14px 0 0; }
.profile-copy, .battle-profile { container-type: inline-size; }
@container (max-width: 310px) { .profile-metrics { grid-template-columns: 1fr; } }
.profile-stats { margin: 0; }
.profile-stats > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; margin: 11px 0; font-size: 12px; }
.profile-stats dt { color: #c4c9c1; }
.profile-stats dd { display: flex; align-items: center; gap: 12px; margin: 0; }
.profile-stats dd span { min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); }
.profile-stats meter { appearance: none; min-width: 0; width: 100%; height: 6px; background: #354042; border-radius: 0; }
.profile-stats meter::-webkit-meter-bar { background: #354042; border: 0; border-radius: 0; }
.profile-stats meter::-webkit-meter-optimum-value { background: var(--gold); }
.profile-stats meter::-moz-meter-bar { background: var(--gold); }
.profile-mechanics { color: #bfc3b9; font-size: 10px; line-height: 1.6; margin: 20px 0 12px; }
.profile-copy button { border: 1px solid #c5a47470; padding: 10px 14px; color: var(--paper); }
@media (max-width: 1100px) { .profile-cards { grid-template-columns: 1fr; } .profile-portrait img { max-height: 400px; } }
@media (max-width: 540px) { .fighter-card { grid-template-columns: 1fr; } .profile-portrait { height: 230px; justify-content: center; } .profile-portrait img { width: 100%; height: 100%; margin: 0; object-fit: contain; } .profile-copy { padding: 22px; } .fighter-profiles summary span { display: block; margin: 8px 0 0 21px; } .condition-readout { flex-wrap: wrap; } }
.arena:fullscreen .fighters { inset: auto; left: 50%; top: 50%; width: min(100vw, 177.7778vh); height: min(100vh, 56.25vw); transform: translate(-50%, -50%); }
.vignette { background: linear-gradient(#060b1070, transparent 20%, transparent 80%, #060b10b0); }
.scene-top, .scene-bottom { position: absolute; left: 25px; right: 25px; display: flex; justify-content: space-between; gap: 15px; text-shadow: 0 1px 6px #000; }
.scene-top { top: 128px; color: #d3d9d9; font-size: 9px; }
.scene-top i { display: inline-block; height: 5px; width: 5px; border-radius: 50%; background: #c5a474; box-shadow: 0 0 9px #ecb164; margin-right: 6px; vertical-align: 1px; }
.scene-bottom { bottom: 22px; font-size: 9px; }
.scene-bottom b { margin: 0 10px; color: var(--gold); }
.scene-bottom > :last-child { color: #b5bfbe; }
.controls { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid #ffffff16; }
.control-group { display: flex; align-items: center; gap: 18px; }
button { border: 0; background: transparent; color: #c7ccca; font: 12px 'Segoe UI', sans-serif; padding: 9px 0; cursor: pointer; white-space: nowrap; }
button:hover { color: #ffe0ac; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
button span { margin-left: 5px; color: var(--gold); font-size: 9px; }
button[aria-pressed="false"] span { color: #737b7d; }
#pause { min-width: 96px; text-align: left; color: var(--paper); }
.divider { width: 1px; height: 15px; background: #ffffff20; }
label { color: var(--muted); font-size: 9px; }
input[type="range"] { width: 85px; accent-color: var(--gold); cursor: pointer; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #858e91; font-size: 9px; padding-top: 15px; }
footer p { margin: 0; letter-spacing: .02em; font-size: 11px; }
.fog-controls { display: flex; flex-wrap: wrap; gap: 18px 32px; margin: 18px 0 0; padding: 12px 16px 16px; border: 1px solid #ffffff16; }
.fog-controls legend { padding: 0 8px; color: var(--gold); font-size: 9px; letter-spacing: .17em; }
.fog-controls > div { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; }
.fog-controls input { flex: 1; min-width: 50px; }
.fog-controls output { min-width: 40px; text-align: right; font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; }
#error { position: absolute; inset: 35% 10% auto; background: #101416e8; padding: 20px; text-align: center; }
.arena:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border: none; background: black; }
.arena:fullscreen .backdrop, .arena:fullscreen .arena-foreground { object-fit: contain; }
@media (max-width: 760px) { main { padding: 20px 4vw; } .edition { font-size: 8px; letter-spacing: .08em; } .masthead a { font-size: 12px; } .description { font-size: 10px; } .controls { flex-wrap: wrap; } .control-group { gap: 14px; } .scene-top, .scene-bottom { left: 12px; right: 12px; font-size: 7px; letter-spacing: .07em; } .scene-top { top: 74px; } .scene-bottom { bottom: 12px; } footer > :last-child { display: none; } footer p { text-align: right; font-size: 10px; } }
@media (max-width: 440px) { .description { display: none; } .scene-top > :last-child { display: none; } .control-group { width: 100%; justify-content: space-between; } }
.primary-action { background: #d5ad67; color: #11191b; padding: 12px 20px; font-weight: 700; }
.primary-action:hover { background: #efcb8b; color: #11191b; }
.match-setup { padding: 26px 0; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.match-setup h2 { margin: 0 0 8px; font: 30px Georgia, serif; }
.match-setup p { color: #c4c9c1; font-size: 13px; margin: 0; }
.fighter-picks { grid-column: 1 / -1; display: flex; gap: 20px; }
.fighter-picks button { flex: 1; display: grid; grid-template-columns: 110px 1fr; align-items: center; text-align: left; border: 2px solid #425051; padding: 10px; white-space: normal; }
.fighter-picks button[aria-pressed="true"] { border-color: #e6bc75; background: #242b2c; }
.fighter-picks img { width: 110px; height: 120px; object-fit: contain; grid-row: 1 / 3; }
.fighter-picks strong { font: 26px Georgia, serif; }
.fighter-picks span { margin: 0; color: #c4c9c1; line-height: 1.6; }
#start-match { grid-column: 2; grid-row: 1; }
#match-score { width: 100%; color: #ffe2ac; font-size: 12px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.match-banner { position: absolute; z-index: 2; top: 27%; left: 12%; right: 12%; display: grid; justify-items: center; gap: 14px; text-align: center; pointer-events: none; text-shadow: 2px 3px 3px #080c19; }
.match-banner > strong { color: #fff0ca; font: clamp(16px, 3vw, 42px)/1.3 'Press Start 2P', monospace; }
.match-banner > span { color: #ffe2ac; font: 16px/1.5 'Segoe UI', sans-serif; }
#match-actions { display: flex; gap: 14px; padding: 12px 20px; background: #101416ed; pointer-events: auto; }
.tool-panel { border-bottom: 1px solid #ffffff16; padding: 14px 0; }
.tool-panel summary { cursor: pointer; color: #e7dfcf; font-size: 13px; }
.tool-panel summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (max-width: 760px) {
  .match-setup { grid-template-columns: 1fr; }
  #start-match { grid-column: 1; grid-row: auto; }
  .fighter-picks { gap: 10px; }
  .fighter-picks button { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .fighter-picks img { grid-row: auto; width: 90px; height: 95px; }
  .fighter-picks strong { font-size: 19px; }
  .match-banner { top: 38%; gap: 6px; left: 4%; right: 4%; }
  .match-banner > strong { font-size: 16px; }
  .match-banner > span { font-size: 11px; }
  #match-actions { padding: 6px 10px; gap: 10px; }
  #match-actions button { padding: 8px 10px; font-size: 11px; }
}

.fighter.xian[data-state="winner"] .sheet-sprite { animation: none; }