:root { color-scheme: dark; --gold:#ffc62f; --red:#ef3340; --navy:#07132d; --cream:#fff2c4; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#05070e; font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; overflow:hidden; }
body { display:grid; place-items:center; }
.cabinet { width:100vw; height:100vh; display:grid; place-items:center; background:radial-gradient(circle at 50% 30%,#1f2844 0,#090d19 48%,#020308 100%); }
.game { position:relative; width:min(100vw, 1120px); height:min(100vh, 760px); overflow:hidden; background:linear-gradient(#080c1d 0 23%,#1c1722 23% 49%,#10295c 49% 100%); image-rendering:pixelated; box-shadow:0 0 80px #000; user-select:none; }
.scanlines { position:absolute; inset:0; z-index:50; pointer-events:none; opacity:.16; background:repeating-linear-gradient(0deg,transparent 0 3px,#000 4px); mix-blend-mode:multiply; }
.hud { position:absolute; z-index:20; top:0; left:0; right:0; height:118px; padding:18px 28px; display:grid; grid-template-columns:1fr 190px 1fr; gap:22px; background:linear-gradient(#070b18e8,#071020da 76%,transparent); text-shadow:3px 3px #000; }
.fighter-card { min-width:0; }
.fighter-card .name { display:block; color:var(--cream); letter-spacing:2px; font-size:clamp(16px,2.4vw,28px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:7px; }
.opponent-card { text-align:right; }
.meter,.stamina { height:22px; padding:3px; background:#161616; border:3px solid #f2d36c; box-shadow:3px 3px #000; }
.meter i,.stamina i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#27cc74,#9cec3e); transition:width .2s; }
.stamina { height:10px; margin-top:6px; border-width:2px; border-color:#6581ae; }
.stamina i { background:#3dd6f5; }
.opponent-card .meter i { margin-left:auto; background:linear-gradient(90deg,#ff9929,#ef3340); }
.player-stars { color:var(--gold); font:22px/1 monospace; margin-top:5px; letter-spacing:4px; filter:drop-shadow(2px 2px #000); }
.round-box { text-align:center; color:var(--cream); letter-spacing:2px; }
.round-box span,.round-box small { display:block; font-size:14px; }
.round-box strong { display:block; color:var(--gold); font-size:38px; line-height:1.05; }
.music-toggle { position:absolute; z-index:26; top:122px; right:16px; border:2px solid #fff6; border-bottom-width:4px; border-radius:5px; padding:7px 10px; background:#071020df; color:#dce8ff; font:12px Impact,sans-serif; letter-spacing:1px; cursor:pointer; }
.music-toggle.off { color:#8090a7; opacity:.72; }
.music-toggle kbd { margin-left:5px; }
.power-box { position:absolute; z-index:26; top:124px; left:16px; min-width:215px; height:62px; display:flex; align-items:center; gap:9px; padding:5px 9px; border:3px solid #85631a; border-bottom-width:6px; border-radius:8px; background:linear-gradient(135deg,#151a29,#070911); color:#8e94a8; text-align:left; cursor:pointer; box-shadow:5px 6px #0008; transition:transform .12s,filter .12s,border-color .12s; }
.power-box .power-star { display:grid; place-items:center; width:45px; height:45px; color:#554819; font-size:42px; line-height:1; text-shadow:2px 2px #000; transition:color .15s,filter .15s; }
.power-copy { display:flex; flex:1; flex-direction:column; min-width:92px; font-family:Impact,sans-serif; letter-spacing:1px; }
.power-copy strong { font-size:17px; color:#eef1ff; }
.power-copy small { color:#8e94a8; font-size:10px; }
.power-box kbd { color:#fff; }
.power-box.ready { border-color:var(--gold); background:linear-gradient(135deg,#49340a,#13100a); animation:powerReady .65s steps(2) infinite; }
.power-box.ready .power-star { color:var(--gold); filter:drop-shadow(0 0 8px #fff06b); }
.power-box.ready .power-copy small { color:#ffe779; }
.power-box:active { transform:translate(3px,3px); box-shadow:2px 3px #0008; }
.star-burst { position:absolute; z-index:35; left:50%; top:35%; color:var(--gold); font-size:34px; opacity:0; pointer-events:none; text-shadow:0 0 12px white,4px 4px #7a3c00; }
.star-burst.show { animation:starEarn .72s ease-out; }
.callout { position:absolute; z-index:34; left:50%; top:28%; transform:translateX(-50%) skew(-7deg); color:#fff9ca; font:34px Impact,sans-serif; letter-spacing:3px; text-shadow:4px 4px #7a120f,-2px -2px #7a120f; opacity:0; white-space:nowrap; pointer-events:none; }
.callout.show { animation:callout .8s ease-out; }
.crowd { position:absolute; left:0; right:0; top:21%; height:31%; opacity:.55; background-color:#111426; background-image:radial-gradient(circle,#d3a665 0 3px,transparent 4px),radial-gradient(circle,#785042 0 4px,transparent 5px); background-size:34px 38px,47px 45px; background-position:0 0,14px 17px; }
.lights { position:absolute; z-index:1; left:10%; right:10%; top:110px; display:flex; justify-content:space-around; }
.lights i { width:13%; height:10px; background:#fff9d5; box-shadow:0 0 18px 8px #ffe880,0 0 80px 32px #7e8cff38; transform:perspective(40px) rotateX(15deg); }
.ring { position:absolute; z-index:2; inset:44% 0 0; overflow:hidden; background:linear-gradient(165deg,#3159a7,#162e68 61%); border-top:5px solid #d5e5ff; }
.ring:after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(110deg,transparent 0 80px,#ffffff09 82px 84px); }
.rope { position:absolute; z-index:4; left:-5%; width:110%; height:8px; border:2px solid #fff6da; background:var(--red); box-shadow:0 5px #0008; transform-origin:center; }
.rope-1 { top:7%; transform:rotate(-1deg); } .rope-2 { top:24%; transform:rotate(.5deg); } .rope-3 { top:42%; transform:rotate(-.6deg); }
.corner { position:absolute; z-index:5; top:0; bottom:0; width:18px; background:linear-gradient(90deg,#ddd,#777,#fff); box-shadow:0 0 0 4px #132143; }
.corner-left{left:4%}.corner-right{right:4%}
.mat-logo { position:absolute; right:9%; bottom:10%; transform:skewY(-8deg) rotate(-10deg); color:#ffffff1e; font-size:48px; text-align:center; letter-spacing:5px; }
.mat-logo span { font-size:20px; }
.opponent-wrap { position:absolute; z-index:7; width:min(55%,520px); height:73%; left:50%; bottom:7%; transform:translateX(-50%); transform-origin:50% 85%; transition:filter .12s; }
.opponent-wrap img { width:100%; height:100%; object-fit:contain; object-position:center bottom; mix-blend-mode:screen; filter:saturate(1.16) contrast(1.05); transform-origin:50% 72%; animation:breathe 1.3s ease-in-out infinite alternate; }
.opponent-wrap.telegraph { filter:drop-shadow(0 0 14px #ffd54a); }
.opponent-wrap.telegraph img { animation:windup .46s ease-in both; }
.opponent-wrap.attack-left img { animation:attackLeft .3s ease-in-out; }
.opponent-wrap.attack-right img { animation:attackRight .3s ease-in-out; }
.opponent-wrap.hit img { animation:opponentHit .25s steps(2); filter:saturate(2) brightness(1.3); }
.opponent-wrap.down img { animation:down .85s ease-in forwards; }
.tell { position:absolute; z-index:10; top:23%; left:50%; width:42px; height:42px; transform:translate(-50%,-50%) scale(0); border-radius:50%; border:8px double #fff; background:var(--gold); box-shadow:0 0 0 6px #ef3340,0 0 30px #fff; }
.telegraph .tell { animation:tell .55s steps(3); }
.player { position:absolute; z-index:12; left:50%; bottom:-34px; width:410px; height:240px; transform:translateX(-50%); transition:transform .15s ease; }
.player.dodge-left { transform:translateX(-83%) rotate(-10deg); }
.player.dodge-right { transform:translateX(-17%) rotate(10deg); }
.player.block .glove { top:30px; }
.glove { position:absolute; top:92px; width:126px; height:114px; border-radius:52% 46% 47% 48%; background:radial-gradient(circle at 40% 28%,#ff7077 0 6%,#ef3340 9% 55%,#9f111e 78%); border:7px solid #490912; box-shadow:inset 0 -12px #a31220,9px 12px 16px #0008; transition:top .15s,transform .15s; }
.glove:after { content:""; position:absolute; left:15%; right:15%; bottom:-35px; height:48px; background:repeating-linear-gradient(0deg,#efefdf 0 8px,#bbb 9px 11px); border:6px solid #490912; border-radius:8px; }
.glove.left { left:20px; transform:rotate(16deg); } .glove.right { right:20px; transform:rotate(-16deg); }
.glove.punch { z-index:3; animation:playerPunch .24s ease-out; }
.glove.super { z-index:4; filter:drop-shadow(0 0 18px #ffe55b); animation:superPunch .38s cubic-bezier(.1,.8,.2,1); }
.guard { position:absolute; left:50%; bottom:-50px; width:210px; height:160px; transform:translateX(-50%); background:radial-gradient(ellipse,#5f270f 0 30%,#2a1008 64%,transparent 66%); border-radius:50%; }
.hit-flash { position:absolute; z-index:30; inset:0; pointer-events:none; opacity:0; background:#ff2436; mix-blend-mode:screen; }
.hit-flash.show { animation:flash .18s steps(2); }
.message { position:absolute; z-index:40; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; background:radial-gradient(circle,#142d65e8,#030611f6 70%); color:var(--cream); text-shadow:4px 4px #000; }
.message.hidden { display:none; }
.message .eyebrow { margin:0 0 10px; color:var(--gold); letter-spacing:6px; font-size:17px; }
.message h1 { margin:0; font-size:clamp(60px,11vw,112px); line-height:.73; letter-spacing:3px; color:#fff4c5; transform:skew(-5deg); }
.message h1 em { color:var(--red); font-style:normal; font-size:.53em; letter-spacing:8px; }
.message p:not(.eyebrow) { max-width:580px; font:18px/1.45 system-ui,sans-serif; text-shadow:none; color:#d8def1; }
.message button { appearance:none; border:5px solid #fff1ba; padding:15px 35px; background:var(--red); color:white; box-shadow:7px 7px #05050b; font:26px Impact,sans-serif; letter-spacing:3px; cursor:pointer; transform:skew(-4deg); }
.message button:hover { background:#ff5360; transform:skew(-4deg) scale(1.05); }
.message span { margin-top:16px; font:12px system-ui,sans-serif; opacity:.58; letter-spacing:2px; text-transform:uppercase; }
.controls { position:absolute; z-index:25; left:18px; right:18px; bottom:12px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; font:12px system-ui,sans-serif; color:#dfe7ff; text-shadow:2px 2px #000; }
kbd { display:inline-grid; place-items:center; min-width:23px; height:22px; padding:0 5px; border:2px solid #fff6; border-bottom-width:4px; border-radius:4px; background:#111827; font:700 11px monospace; }
@keyframes breathe { to { transform:translateY(6px) scale(1.01); } }
@keyframes tell { 0%{transform:translate(-50%,-50%) scale(.2)} 70%{transform:translate(-50%,-50%) scale(1.1)} 100%{transform:translate(-50%,-50%) scale(.7)} }
@keyframes windup { to { transform:scale(.94) translateY(15px) rotate(-2deg); } }
@keyframes attackLeft { 45%{transform:translate(-110px,55px) scale(1.35) rotate(-9deg)} }
@keyframes attackRight { 45%{transform:translate(110px,55px) scale(1.35) rotate(9deg)} }
@keyframes opponentHit { 40%{transform:translateX(28px) rotate(5deg)} 75%{transform:translateX(-18px) rotate(-3deg)} }
@keyframes playerPunch { 40%{transform:translateY(-230px) scale(.8)} }
@keyframes superPunch { 25%{transform:translateY(18px) scale(1.1) rotate(-8deg)} 58%{transform:translateY(-310px) scale(.7) rotate(12deg)} }
@keyframes down { 35%{transform:rotate(12deg) translate(60px,20px)} 100%{transform:rotate(86deg) translate(180px,170px);opacity:.75} }
@keyframes flash { 50%{opacity:.7} }
@keyframes powerReady { 50%{filter:brightness(1.35);transform:scale(1.025)} }
@keyframes starEarn { 0%{opacity:0;transform:translate(-50%,40px) scale(.2) rotate(-90deg)} 35%{opacity:1;transform:translate(-50%,-10px) scale(2.4) rotate(15deg)} 100%{opacity:0;transform:translate(-430px,-160px) scale(.45) rotate(360deg)} }
@keyframes callout { 0%{opacity:0;transform:translateX(-50%) scale(.4) skew(-7deg)} 20%,65%{opacity:1;transform:translateX(-50%) scale(1.05) skew(-7deg)} 100%{opacity:0;transform:translateX(-50%) translateY(-35px) skew(-7deg)} }
@media (max-width:700px){ .hud{grid-template-columns:1fr 100px 1fr;padding:12px 10px;gap:8px}.round-box strong{font-size:28px}.round-box small{display:none}.opponent-wrap{width:72%;height:66%;bottom:13%}.player{transform:translateX(-50%) scale(.78);transform-origin:bottom}.controls{font-size:10px}.controls span:nth-child(-n+3){display:none}.message h1{font-size:58px}.power-box{top:116px;min-width:170px;height:54px}.power-star{font-size:34px!important}.music-toggle{top:117px}.player-stars{font-size:16px}.callout{font-size:25px} }