@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root { color-scheme: dark; font-family: 'Press Start 2P', monospace; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #080808; color: #fff; display: grid; place-items: center; }


.arcade { width: min(1100px, 96vw); text-align: center; }
.screen { position: relative; aspect-ratio: 16 / 9; width: 100%; border: 5px solid #d6b76d; box-shadow: 0 0 0 5px #3c2415, 0 18px 60px #000; background: #000; overflow: hidden; }
video#fightVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 1; transition: opacity .28s ease; }
img#roundStill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: none; }
#roundHud { position: absolute; inset: 0 0 auto; height: 72px; overflow: hidden; z-index: 2; display: none !important; pointer-events: none; }
#roundHudImage { position: absolute; top: -158px; left: 0; width: 100%; height: auto; mix-blend-mode: multiply; }
canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; position: relative; z-index: 1; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 20px; background: rgba(4, 4, 8, .68); }
.overlay.hidden { display: none; }
.overlay img { width: min(690px, 84%); max-height: 300px; object-fit: contain; filter: invert(1); mix-blend-mode: screen; }
.overlay p { color: #ffd943; text-shadow: 3px 3px #8d1c16; font-size: clamp(12px, 2vw, 20px); }
.cover-overlay { gap: 12px; }
.cover-overlay .cover-kicker { margin: 0; color: #ffdf49; font-size: clamp(12px, 2vw, 19px); }
.cover-overlay .cover-copy { margin: 0 0 8px; color: #fff; font-size: clamp(9px, 1.3vw, 13px); text-shadow: 2px 2px #35120e; }
.sequence-overlay, .countdown-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(0,0,0,.48); pointer-events: none; }
.sequence-overlay.hidden, .countdown-overlay.hidden { display: none; }
.sequence-overlay span, .countdown-overlay span { color: #ff4d25; font: 700 clamp(22px, 5vw, 54px) Impact, monospace; letter-spacing: 2px; text-shadow: 3px 3px #55120b, 0 0 18px #ff4d25; text-align: center; }
.countdown-overlay { background: rgba(0,0,0,.2); }
.countdown-overlay span { font-size: clamp(48px, 10vw, 98px); }
button { border: 3px solid #ffd943; background: #b6211b; color: #fff; padding: 14px 18px; font: inherit; font-size: 11px; cursor: pointer; box-shadow: 0 4px #4a0d0b; }
button:hover { background: #e04a20; }
.fight-controls { display: flex; justify-content: center; gap: 14px; margin: 16px 0 2px; }
.fight-controls button { min-width: 150px; padding: 10px 14px; font-size: 10px; }
.fight-controls button span { color: #ffd943; margin-left: 7px; }
.finish-title { color: #fff !important; font-size: clamp(18px, 4vw, 34px) !important; }