@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Chakra+Petch:wght@500;600;700&display=swap');

:root { color-scheme: dark; --ink:#09070d; --panel:#15101d; --cream:#f4d893; --hot:#f04b36; --cyan:#67d7d1; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:#08060b; }
body { color:#f6ecd5; font-family:"Chakra Petch", system-ui, sans-serif; background:radial-gradient(circle at 50% 0,#261c32 0,#0c0911 58%,#050407 100%); overflow-x:hidden; }
.arcade-shell { width:min(100%, 1500px); min-height:100vh; margin:auto; padding:14px clamp(10px,2vw,28px) 18px; display:grid; grid-template-rows:auto 1fr auto; gap:12px; }
.topbar { min-height:58px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; border:2px solid #493b51; border-bottom-color:#90755f; background:linear-gradient(#21182a,#100c16); padding:8px 14px; box-shadow:0 4px 0 #030204, inset 0 0 18px #0008; }
.brand { font:clamp(18px,2vw,30px)/1 "Black Ops One",sans-serif; letter-spacing:1px; text-shadow:3px 3px #000; }
.brand span { color:var(--hot); }
.stage { display:flex; flex-direction:column; text-align:center; font-weight:700; letter-spacing:1px; }
.stage span { color:var(--cream); font-size:12px; }.stage strong { color:#fff; font-size:clamp(12px,1.2vw,17px); }
.sound { justify-self:end; color:#b6b0b9; background:#0a0810; border:1px solid #50465a; padding:8px 10px; font:700 12px inherit; cursor:pointer; }
.game-frame { position:relative; min-height:0; aspect-ratio:16/9; max-height:calc(100vh - 164px); margin:auto; width:100%; overflow:hidden; border:3px solid #5d4c62; outline:5px solid #0a080e; box-shadow:0 18px 50px #000c, inset 0 0 40px #000; background:#17111f; }
canvas { display:block; width:100%; height:100%; image-rendering:auto; outline:none; }
.loading,.start-card,.continue-card,.victory-card,.bryant-victory-card,.brian-splash-card,.final-splash-card,.next-fighter-card,.coming-soon-card,.runner-complete-card,.game-complete-card { position:absolute; inset:0; display:grid; place-content:center; text-align:center; background:#09070de8; z-index:10; }
.loading { z-index:20; font:20px "Black Ops One"; letter-spacing:3px; color:#fff; background:#000; }
.loading img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.loading span { position:relative; z-index:1; transform:translateY(clamp(76px,11vw,145px)); text-shadow:0 2px 0 #000,0 0 12px #ec174c; animation:loadingPulse .85s steps(2,end) infinite; }
.start-card { padding:clamp(32px,5vw,76px); isolation:isolate; overflow:hidden; background:#120b18; place-content:start; justify-items:start; text-align:left; }
.start-card::before { content:""; position:absolute; inset:0; z-index:-2; background:url("assets/splash-power-slide.png") center/cover no-repeat; animation:splashPush 10s ease-out infinite alternate; }
.start-card::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#09070dc7 0%,#120a17a8 34%,#08050b38 70%,#08050b72 100%),linear-gradient(0deg,#08050bbb 0%,transparent 55%,#08050b7a 100%); }
.start-card > * { position:relative; z-index:1; max-width:48%; }
.start-card[hidden],.loading[hidden],.continue-card[hidden],.victory-card[hidden],.bryant-victory-card[hidden],.brian-splash-card[hidden],.final-splash-card[hidden],.next-fighter-card[hidden],.coming-soon-card[hidden],.runner-complete-card[hidden],.game-complete-card[hidden] { display:none; }
.victory-card,.bryant-victory-card,.brian-splash-card { z-index:18; background:#000; place-content:stretch; }
.victory-card img,.bryant-victory-card img,.brian-splash-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.victory-card p,.bryant-victory-card p,.brian-splash-card p { position:absolute; z-index:1; left:50%; bottom:0; transform:translateX(-50%); width:max-content; max-width:92%; margin:0; padding:6px 16px; color:#fff25b; background:#050518d9; border:2px solid #4268ff; font:bold clamp(13px,1.7vw,22px) "Black Ops One",monospace; letter-spacing:1px; text-shadow:2px 2px #111; animation:loadingPulse .85s steps(2,end) infinite; }
.final-splash-card { z-index:22; background:#000; place-content:stretch; }
.final-splash-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.final-splash-card p { position:absolute; z-index:1; left:50%; bottom:15%; transform:translateX(-50%); width:max-content; max-width:92%; margin:0; color:#fff; font:bold clamp(20px,3vw,42px) "Black Ops One",monospace; letter-spacing:2px; text-shadow:4px 4px #ec174c,0 0 16px #ec174c; animation:loadingPulse .85s steps(2,end) infinite; }
.next-fighter-card { z-index:19; background:#000; place-content:stretch; }
.next-fighter-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.coming-soon-card { z-index:20; background:#000; }
.runner-complete-card,.game-complete-card { z-index:21; gap:10px; padding:24px; background:radial-gradient(circle at 50% 44%,#173f72e8,#070509f5 68%); }
.runner-complete-card h2,.game-complete-card h2 { margin:0; color:#fff25b; font:clamp(54px,10vw,120px) "Black Ops One",monospace; letter-spacing:5px; text-shadow:6px 6px #cf3128,10px 10px #09070d; }
.runner-complete-card p,.game-complete-card p { margin:0 0 18px; font:clamp(15px,2vw,26px) "Black Ops One",monospace; }
.runner-complete-card button,.game-complete-card button { justify-self:center; border:2px solid #fff25b; color:#fff25b; background:#08060ddd; padding:12px 20px; font:700 clamp(12px,1.5vw,18px) "Chakra Petch"; cursor:pointer; animation:loadingPulse .85s steps(2,end) infinite; }
.coming-soon-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.coming-soon-card p { position:relative; z-index:1; margin:0; transform:translateY(clamp(76px,11vw,145px)); color:#fff; font:bold clamp(17px,2.2vw,29px) "Black Ops One",monospace; letter-spacing:2px; text-shadow:0 2px #000,0 0 14px #ec174c; animation:loadingPulse .85s steps(2,end) infinite; }
.eyebrow { margin:0; color:var(--cyan); font-weight:700; letter-spacing:4px; }
h1 { margin:8px 0 4px; font:clamp(32px,5.1vw,72px)/.95 "Black Ops One"; color:var(--cream); text-shadow:5px 5px #9d291f,9px 9px #000; white-space:nowrap; }
.start-card p:not(.eyebrow) { margin:16px 0 22px; max-width:480px; font-size:clamp(17px,1.7vw,24px); font-weight:700; }
.start-card button { justify-self:start; border:2px solid var(--cream); color:#15101d; background:var(--cream); padding:12px 22px; font:700 clamp(14px,1.5vw,19px) "Chakra Petch"; box-shadow:5px 5px 0 #a33b2e; cursor:pointer; animation:pulse 1.2s infinite alternate; }
.music-hint { margin-top:18px; color:#d9ced9; font-size:11px; font-weight:700; letter-spacing:1.5px; opacity:.8; }
.continue-card { z-index:12; padding:24px; background:radial-gradient(circle,#26152ee8,#070509f5 70%); }
.continue-card h2 { margin:8px 0 4px; font:clamp(42px,7vw,92px)/1 "Black Ops One"; color:var(--cream); text-shadow:5px 5px #9d291f,9px 9px #000; }
.continue-image { width:min(520px,72vw); max-height:42vh; margin:10px auto 4px; object-fit:contain; border:0; box-shadow:none; background:transparent; }
.continue-image[hidden] { display:none; }
.continue-card p:not(.eyebrow) { margin:15px 0 22px; font-size:20px; }
.continue-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.continue-actions button { border:2px solid var(--cream); color:#15101d; background:var(--cream); padding:12px 20px; font:700 16px "Chakra Petch"; box-shadow:5px 5px 0 #a33b2e; cursor:pointer; }
.continue-actions .secondary { color:#e4d6e4; border-color:#7b687d; background:#1b1420; box-shadow:5px 5px 0 #080509; }
@keyframes pulse { to { transform:translateY(-3px); filter:brightness(1.12); } }
@keyframes splashPush { from { transform:scale(1.01); } to { transform:scale(1.055); } }
@keyframes loadingPulse { 50% { opacity:.45; } }
.hud { position:absolute; z-index:3; top:18px; left:18px; display:flex; align-items:center; gap:8px; filter:drop-shadow(3px 3px #000); pointer-events:none; }
.portrait { width:48px;height:48px;display:grid;place-items:center;background:#d55b31;color:#120b0d;border:3px solid #f4d893;font:20px "Black Ops One";transform:skew(-5deg); }
.health { width:190px; }.health span,.score span,.lives span { display:block;font-weight:700;color:#f4d893;letter-spacing:2px;font-size:13px; }.health>div { height:14px;background:#120d16;border:2px solid #ead9b7;padding:2px; }.health i { display:block;width:100%;height:100%;background:linear-gradient(90deg,#d73a2e,#f1ae35); }.score { margin-left:10px; }.score strong { font:19px "Black Ops One"; }.lives{margin-left:10px;text-align:center}.life-icons{display:flex;gap:2px;margin-top:1px}.life-icons img{width:25px;height:25px;object-fit:contain;filter:drop-shadow(1px 2px #000)}
.action-label { position:absolute; right:20px; bottom:18px; z-index:3; color:#fff9; font:15px "Black Ops One"; letter-spacing:2px; text-shadow:2px 2px #000; }
.mobile-controls { display:none; }
.controls { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; min-height:48px; align-items:center; }
.controls>div { display:flex; align-items:center; gap:5px; }.controls span { font-size:12px;font-weight:700;color:#b9adb9;letter-spacing:1px; }
kbd { min-width:27px; height:27px; display:inline-grid; place-items:center; padding:0 6px; border:1px solid #75627a; border-bottom-width:3px; border-radius:3px; background:#1d1623; font:700 12px inherit; color:#f6e9cf; }
@media (max-width:700px){.topbar{grid-template-columns:1fr auto}.stage{display:none}.health{width:120px}.score{display:none}.controls{display:none}.game-frame{max-height:none;margin-bottom:70px;overflow:visible}.sound{font-size:10px}.start-card{padding:24px;place-content:center;justify-items:center;text-align:center}.start-card > *{max-width:100%}.start-card::after{background:#09070d9c}.start-card button{justify-self:center}h1{white-space:normal}.action-label{bottom:18px;font-size:10px}.mobile-controls{position:absolute;z-index:8;left:8px;right:8px;bottom:-64px;display:flex;justify-content:space-between;align-items:end;pointer-events:none;touch-action:none;user-select:none}.mobile-pad{display:flex;gap:5px;pointer-events:auto}.mobile-controls button{width:clamp(38px,10vw,54px);height:clamp(38px,10vw,54px);padding:0;border:2px solid #f4d893;border-bottom-width:4px;border-radius:50%;color:#fff;background:#100b18e8;box-shadow:0 3px 0 #0008;font:700 clamp(13px,3.5vw,19px) "Black Ops One";touch-action:none}.mobile-actions button{border-color:#67d7d1;background:#10212aeb}.mobile-controls button:active,.mobile-controls button.is-pressed{transform:translateY(2px);filter:brightness(1.35);border-bottom-width:2px}}
@media (min-width:701px) and (max-width:900px) and (pointer:coarse){.controls{display:none}.game-frame{margin-bottom:70px;overflow:visible}.action-label{bottom:18px;font-size:10px}.mobile-controls{position:absolute;z-index:8;left:8px;right:8px;bottom:-64px;display:flex;justify-content:space-between;align-items:end;pointer-events:none;touch-action:none;user-select:none}.mobile-pad{display:flex;gap:5px;pointer-events:auto}.mobile-controls button{width:50px;height:50px;padding:0;border:2px solid #f4d893;border-bottom-width:4px;border-radius:50%;color:#fff;background:#100b18e8;box-shadow:0 3px 0 #0008;font:700 17px "Black Ops One";touch-action:none}.mobile-actions button{border-color:#67d7d1;background:#10212aeb}.mobile-controls button:active,.mobile-controls button.is-pressed{transform:translateY(2px);filter:brightness(1.35);border-bottom-width:2px}}

.continue-artwork { display:contents; }
.continue-background { display:none; }
.game-over .continue-artwork { display:block; }
.game-over .continue-background { display:block; }
/* Keep overlays in the artwork's 3:2 coordinates, including the red splat. */
.continue-card.game-over { padding:0; background:#000; display:block; container-type:size; }
.continue-card.game-over[hidden] { display:none; }
.game-over .continue-artwork { position:absolute; width:min(100cqw,150cqh); aspect-ratio:3/2; top:50%; left:50%; transform:translate(-50%,-50%); container-type:inline-size; }
.game-over .continue-background { position:absolute; inset:0; width:100%; height:100%; }
.game-over .continue-artwork > .eyebrow,.game-over .continue-artwork > .continue-image { display:none; }
.game-over .continue-artwork #continueTitle { position:absolute; left:52%; top:47%; width:44%; margin:0; font-size:4cqw; text-shadow:2px 2px #000; }
.game-over .continue-artwork #continueMessage { position:absolute; left:51%; top:83%; width:47%; margin:0; font-size:1.65cqw; line-height:1.2; color:#fff; text-shadow:1px 1px #000; }
.game-over .continue-artwork #continueCountdown { position:absolute; left:69%; top:66%; transform:translate(-50%,-50%); margin:0; color:#fff25b; font:9cqw/1 "Black Ops One",monospace; text-shadow:3px 3px #000; }
.game-over .continue-artwork .continue-actions { position:absolute; left:51%; top:91%; width:48%; gap:1cqw; flex-wrap:nowrap; }
.game-over .continue-artwork .continue-actions button { font-size:1.45cqw; padding:.6cqw 1cqw; box-shadow:2px 2px #000; }