:root{--ink:#101326;--panel:#17192d;--paper:#f8f1d9;--gold:#ffcf58;--coral:#ef5873;--blue:#6be0ff;--muted:#b4b5c9}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0b0e1e;color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}body{background:radial-gradient(ellipse at 50% -15%,#45416a 0,transparent 52%),linear-gradient(170deg,#17192f 0%,#0b0d1c 68%);overscroll-behavior:none}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible{outline:3px solid #78ecff;outline-offset:4px}.hidden{display:none!important}.app{width:min(1480px,calc(100% - 32px));margin:0 auto}.topbar{height:82px;display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{color:#fff;text-decoration:none;display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{height:50px;width:54px;background:linear-gradient(145deg,#ffd775,#f85c63);border:3px solid #101326;box-shadow:3px 4px 0 #fbe5a4;transform:rotate(-8deg);display:grid;place-items:center;border-radius:11px;font:900 19px/1 Impact,'Arial Black',sans-serif;color:#222;position:relative}.brand-mark span{position:absolute;right:2px;bottom:2px;font-size:10px}.brand-text{font:900 29px/1 Impact,'Arial Black',sans-serif;letter-spacing:1px;white-space:nowrap}.brand-text b{color:var(--gold)}.brand-text small{display:block;font:600 10px/1.8 system-ui,sans-serif;letter-spacing:2px;color:#c8c8d7;margin-top:3px}.top-actions{display:flex;gap:8px;align-items:center}.pad-status,.top-btn{font:800 12px/1 system-ui,sans-serif;letter-spacing:.5px;padding:13px 15px;border:1px solid #454661;border-radius:9px;background:#23263d;color:#e7e3ec;white-space:nowrap}.pad-status{color:#c9d5e2}.pad-status.active{border-color:#49d4b8;color:#8cf1df}.pad-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#888e9e;margin-right:7px}.pad-status.active .pad-dot{background:#3fea99;box-shadow:0 0 8px #3fea99}.top-btn:hover{background:#3e405d}.game-shell{margin-top:4px}.frame{position:relative;aspect-ratio:16/9;background:#16172c;border:5px solid #101426;border-radius:17px;overflow:hidden;box-shadow:0 0 0 2px #787888,0 8px 0 #070812,0 32px 75px #07071190;isolation:isolate}.frame canvas{display:block;width:100%;height:100%;object-fit:fill}.vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,#0005 0,transparent 25%,transparent 65%,#01020a90 100%),radial-gradient(ellipse at 50% 50%,transparent 50%,#0005 100%);z-index:1}.screen{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;overflow:hidden}.section-kicker,.eyebrow{font:900 clamp(10px,1.3vw,16px)/1.3 system-ui,sans-serif;letter-spacing:2.5px;color:var(--gold);text-transform:uppercase}.home-screen{background:linear-gradient(90deg,#0d0a23c7 0%,#141030aa 45%,#12112595 100%)}.home-content{position:absolute;left:7.3%;top:12%;width:42%;z-index:5;text-shadow:0 3px 0 #10102090}.home-content h1{font:900 clamp(45px,7.3vw,124px)/.85 Impact,'Arial Black',sans-serif;letter-spacing:-1.5px;margin:23px 0 20px;color:#fff0c6;filter:drop-shadow(5px 7px 0 #170d22);transform:skew(-5deg);text-transform:uppercase;-webkit-text-stroke:1.5px #38252c}.home-content h1 em{font-style:normal;color:#ffcd5c;-webkit-text-stroke:1.8px #802d32;text-shadow:3px 3px 0 #a82f42}.home-content p{max-width:510px;font-size:clamp(11px,1.42vw,18px);font-weight:650;line-height:1.52;color:#e8e4f3}.home-buttons{display:flex;gap:10px;margin:24px 0 10px;flex-wrap:wrap}.big-button,.ghost-button,.subtle-button{font:900 clamp(11px,1.2vw,16px)/1 system-ui,sans-serif;letter-spacing:.3px;border-radius:8px;padding:15px 21px;white-space:nowrap}.big-button{border:2px solid #15172a;box-shadow:3px 4px 0 #0c0d1b;transition:transform .12s,filter .12s}.big-button:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.09)}.big-button:active{transform:translateY(1px)}.primary{background:linear-gradient(#ffe494,#ffbd39);color:#232032}.secondary{background:linear-gradient(#6de9ed,#31b6d9);color:#112130}.ghost-button{border:1.5px solid #9a9aae;background:#222438c7;color:#fbf7e8}.ghost-button:hover{background:#373c57}.subtle-button{border:none;background:#1f25408a;color:#fcf9e5;padding:11px 13px}.subtle-button:hover{text-decoration:underline}.home-cast{position:absolute;inset:0;z-index:2;pointer-events:none}.cast-person,.cast-breu{position:absolute;max-height:none;filter:drop-shadow(0 7px 12px #050411a0)}.cast-breu{height:64%;top:-7%;left:52%;opacity:.66;transform:translateX(-50%);filter:brightness(.62) drop-shadow(0 8px 24px #581ace)}.cast-jhonny{height:88%;right:11%;bottom:-19%;transform:scaleX(-1)}.cast-mamis{height:76%;right:-2%;bottom:-10%}.cast-lori{height:40%;right:21%;bottom:-10%;filter:drop-shadow(0 4px 6px #000)}.cast-manu{height:38%;right:0%;bottom:-7%;transform:scaleX(-1);filter:drop-shadow(0 4px 6px #000)}.home-gabi{position:absolute;right:32%;bottom:3%;height:31%;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;pointer-events:none}.home-gabi img{height:100%;width:auto;max-width:230px;object-fit:cover;object-position:50% 16%;border-radius:52% 52% 4% 4%;box-shadow:0 0 0 2px #f7ca6a,0 0 30px #ffc05c9c}.home-gabi span{position:absolute;bottom:-5px;white-space:nowrap;font:900 clamp(9px,.9vw,12px)/1.2 system-ui,sans-serif;color:#fff3c2;background:#b74b56;border:2px solid #ffd279;border-radius:4px;transform:rotate(-3deg);padding:5px 7px}.star{color:#ff79aa}.select-screen,.intro-screen,.result-screen,.how-screen,.ending-screen{background:#090d20cf;backdrop-filter:blur(8px)}.select-screen{display:block;padding:4% 5% 3%}.select-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.select-head h2,.intro-card h2,.result-card h2,.how-card h2,.ending-copy h2{font:900 clamp(28px,3.5vw,62px)/1 Impact,'Arial Black',sans-serif;letter-spacing:1px;color:#fff2cd;margin:10px 0 16px;text-shadow:3px 4px 0 #5e3446}.select-hint{font-size:12px;font-weight:900;color:#ccc8d9}.fighter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2%;height:61%;margin:1% 0 1.5%}.fighter-card{position:relative;display:flex;align-items:flex-end;justify-content:center;padding:0;border:3px solid #5a5669;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#3d405e,#151932 75%);transition:transform .15s,border-color .15s,box-shadow .15s}.fighter-card:nth-child(1){background:linear-gradient(160deg,#7e3444,#181625 72%)}.fighter-card:nth-child(2){background:linear-gradient(160deg,#7d466f,#21142c 72%)}.fighter-card:nth-child(3){background:linear-gradient(160deg,#3464a7,#101b3a 72%)}.fighter-card:nth-child(4){background:linear-gradient(160deg,#ab5e70,#2d172a 72%)}.fighter-card img{position:absolute;top:-5%;height:115%;width:100%;object-fit:contain;filter:drop-shadow(0 3px 8px #0009);transition:transform .18s}.fighter-card:hover img,.fighter-card.selected img{transform:scale(1.08)}.fighter-card.selected{border-color:var(--gold);box-shadow:0 0 0 3px #fff2,0 0 30px #ffd16773;transform:translateY(-4px)}.fighter-meta{z-index:2;display:flex;flex-direction:column;gap:4px;width:100%;text-align:center;background:linear-gradient(transparent,#11152fee 16%);padding:22px 4px 10px;color:white}.fighter-meta strong{font:900 clamp(18px,2.1vw,30px)/1 Impact,'Arial Black',sans-serif;letter-spacing:1.5px}.fighter-meta small{font-size:clamp(8px,.9vw,12px);font-weight:850;color:#ffe4a7}.select-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.selected-description{font-size:12px;text-align:center;font-weight:700;color:#e5e0e7}.intro-card,.result-card,.how-card{width:min(640px,90%);padding:clamp(20px,2.4vw,36px);text-align:center;border:3px solid #171b37;background:linear-gradient(#fff5dc,#f6e1b0);color:#191b32;box-shadow:8px 9px 0 #0d102a;border-radius:12px}.intro-card .section-kicker,.result-card .section-kicker,.how-card .section-kicker{color:#b74b59}.intro-card h2,.result-card h2,.how-card h2{color:#1e213d;text-shadow:2px 3px 0 #ffcf75}.intro-card p,.result-card p{font-weight:650;line-height:1.5;color:#464555}.intro-versus{height:clamp(110px,18vw,225px);display:flex;align-items:center;justify-content:center;gap:8%;background:linear-gradient(120deg,#b8d7fc,#f4c5e9);margin:15px -5px 6px;border:3px solid #20223e;border-radius:8px;overflow:hidden}.intro-versus img{height:115%;width:38%;object-fit:contain;filter:drop-shadow(0 5px 3px #0007)}.intro-versus strong{font:900 clamp(27px,5vw,67px)/1 Impact,sans-serif;color:#fff1c0;-webkit-text-stroke:2px #25233d;text-shadow:4px 4px 0 #9a415c;transform:rotate(-9deg)}.intro-opponent{display:block;font:900 11px system-ui,sans-serif;letter-spacing:2px;margin:9px}.result-actions{display:flex;justify-content:center;gap:10px;align-items:center;margin-top:20px}.fight-banner{position:absolute;z-index:4;top:40%;left:0;right:0;text-align:center;color:#ffe7a0;font:900 clamp(45px,7vw,108px)/1 Impact,'Arial Black',sans-serif;text-shadow:5px 7px 0 #662b59,0 0 30px #ffc052;pointer-events:none;transform:rotate(-4deg)}.combo-banner{position:absolute;z-index:4;bottom:20%;left:10%;font:900 clamp(22px,3vw,46px)/1 Impact,sans-serif;color:#fff7d0;text-shadow:3px 4px #a92450;pointer-events:none}.hud{position:absolute;z-index:4;inset:13px 22px auto;display:flex;align-items:flex-start;gap:16px;color:#17192b;pointer-events:none}.hud-fighter{flex:1;min-width:0}.hud-right{text-align:right}.hud-name{display:flex;gap:10px;justify-content:space-between;color:#fff4d4;font-weight:900;letter-spacing:1.3px;font-size:15px;text-shadow:2px 2px 0 #222}.hud-name span{font-size:10px;color:#fae8bc}.hud-right .hud-name{flex-direction:row-reverse}.life-outer,.meter-outer{border:3px solid #17172b;background:#10162d;box-shadow:2px 3px 0 #101326;margin-top:6px;border-radius:4px;overflow:hidden;height:23px}.life-fill{height:100%;transition:width .15s;background:linear-gradient(#9cffad,#36be73)}.life-enemy{background:linear-gradient(#ffb693,#f86b54)}.meter-outer{height:10px;margin-top:4px;border-width:2px}.meter-fill{height:100%;background:linear-gradient(90deg,#78d3ff,#386cff)}.meter-enemy{background:linear-gradient(90deg,#f3b5ff,#9e6de6)}.hud-right .life-fill,.hud-right .meter-fill{margin-left:auto}.hud-center{flex:0 0 100px;background:#16182f;color:#fff2d1;border:4px solid #ffce69;border-radius:9px;box-shadow:3px 4px 0 #090b17;text-align:center;margin-top:0;padding:5px 0 6px}.hud-center strong{display:block;font:900 42px/1 Impact,sans-serif}.hud-center span{font-size:9px;font-weight:900;letter-spacing:1px}.ending-screen{justify-content:space-around;padding:4%;background:radial-gradient(circle at 43% 60%,#357ab48a,#0c1024db 65%)}.ending-gabi{height:90%;max-width:46%;object-fit:contain;filter:drop-shadow(0 0 32px #78e2ff)}.ending-copy{max-width:48%;background:#17182ce6;border:2px solid #ffce8a;border-radius:12px;padding:3%;box-shadow:6px 8px #070a19}.ending-copy h2{color:#ffdc78}.ending-copy p{font-size:16px;line-height:1.5}.ending-copy button{margin-right:8px;margin-top:12px}.how-card{width:min(800px,92%)}.control-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}.control-columns h3{font:900 19px Impact,sans-serif;color:#bd5261}.control-columns p{font-size:13px;font-weight:700;line-height:1.6}.how-tip{background:#fee2ad;border:1px solid #e9a962;border-radius:7px;padding:9px;font-size:13px;font-weight:800}.below{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:15px}.control-strip{display:flex;gap:15px;flex-wrap:wrap;align-items:center;font-size:11px;color:#cfcede;font-weight:700}.control-strip>span:first-child{color:#ffc963}.mode-note{font-size:11px;color:#a7a6bc;white-space:nowrap}kbd{display:inline-block;color:#fff3ce;background:#373a58;border:1px solid #63637d;border-radius:4px;padding:3px 6px;font:900 11px system-ui,sans-serif;margin-right:2px}.touch-pad{display:none;justify-content:space-between;gap:12px;margin-top:20px}.touch-pad button{border:1px solid #898baa;background:#343a5d;color:white;border-radius:12px;font-size:20px;font-weight:900;min-width:47px;min-height:48px;touch-action:none}.touch-pad button:active,.touch-pad button.pressed{background:#fabd51;color:#16172d}.touch-direction,.touch-actions{display:flex;gap:6px}.app footer{text-align:center;padding:25px 0;color:#73758d;font-size:11px;font-weight:700;letter-spacing:.3px}
@media(hover:none) and (pointer:coarse){.touch-pad{display:flex}.app footer{display:none}}
@media(max-width:920px){.app{width:calc(100% - 16px)}.topbar{height:68px}.brand-text{font-size:23px}.brand-mark{height:42px;width:45px;font-size:16px}.pad-status,.top-btn{font-size:10px;padding:10px}.home-content{left:5%;top:9%;width:48%}.home-content h1{margin:14px 0 12px}.home-content p{margin:10px 0}.home-buttons{margin:10px 0}.big-button{padding:12px 15px}.select-screen{padding:3%}.fighter-grid{height:58%;gap:5px}.select-head h2{margin:3px 0 8px}.select-hint{display:none}.select-bottom{margin-top:3%}.ending-copy p{font-size:12px}.below{display:block}.mode-note{display:none}}
@media(max-width:580px){.brand-text{font-size:17px}.brand-text small{font-size:7px;letter-spacing:.5px}.brand-mark{width:37px;height:35px}.pad-status{display:none}.top-btn{padding:8px;font-size:9px}.topbar{height:51px}.frame{border-width:2px;border-radius:6px}.home-content{width:58%;top:9%}.home-content .eyebrow{font-size:6px;letter-spacing:1px}.home-content h1{font-size:38px;margin:8px 0}.home-content p{font-size:7px;line-height:1.4}.home-buttons{gap:4px}.big-button{font-size:8px;padding:8px}.subtle-button{font-size:8px;padding:4px}.home-gabi{right:25%;height:28%}.home-gabi span{font-size:7px}.cast-jhonny{right:4%;height:90%}.cast-mamis{right:-18%;height:80%}.cast-lori,.cast-manu{display:none}.select-head h2{font-size:18px}.section-kicker{font-size:8px;letter-spacing:1px}.fighter-card{border-width:1px;border-radius:4px}.fighter-meta{padding:8px 2px 3px}.fighter-meta strong{font-size:11px}.fighter-meta small{font-size:5px}.select-bottom .ghost-button{font-size:8px;padding:6px}.selected-description{font-size:7px}.intro-card,.result-card,.how-card{padding:9px;border-width:1px}.intro-card h2,.result-card h2,.how-card h2{font-size:23px;margin:4px}.intro-card p,.result-card p{font-size:9px}.intro-versus{height:80px;margin:5px}.intro-opponent{font-size:7px;margin:3px}.hud{inset:5px 6px auto;gap:5px}.hud-name{font-size:9px}.hud-name span{font-size:6px}.hud-center{flex-basis:38px;border-width:1px;padding:0}.hud-center strong{font-size:19px}.hud-center span{font-size:4px}.life-outer{height:10px;border-width:1px;margin-top:2px}.meter-outer{height:5px;border-width:1px;margin-top:2px}.control-strip{font-size:8px;gap:6px}.control-strip kbd{font-size:7px}.touch-pad{gap:5px;margin-top:6px}.touch-pad button{min-width:35px;min-height:35px;font-size:13px}.control-columns h3{font-size:13px}.control-columns p,.how-tip{font-size:7px;margin:4px 0}.how-card .big-button{margin-top:4px}.ending-copy h2{font-size:20px}.ending-copy p{font-size:8px}.ending-copy button{padding:5px;font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}