:root{color-scheme:dark;font-family:Inter,Arial,sans-serif;background:#0e171c;color:#ece9df;--muted:#8c9a9d;--orange:#f47b55;--green:#a9cdb1;--line:#2e3b40}
*{box-sizing:border-box}body{margin:0;padding:28px max(22px,env(safe-area-inset-right)) 18px max(22px,env(safe-area-inset-left));min-height:100svh;background:radial-gradient(ellipse at 50% 30%,#213036 0%,#0e171c 65%)}
button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible{outline:2px solid #fbc29e;outline-offset:4px}button{border:0}button:active{transform:translateY(1px)}[hidden]{display:none!important}
.game-shell{max-width:1120px;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 27px}.brand{text-decoration:none;color:#f2ece0;display:flex;align-items:center;gap:12px;font-size:24px;font-weight:950;letter-spacing:-.8px}.brand small{display:block;font-size:8px;font-weight:600;letter-spacing:3px;color:#8d9da0;margin-top:5px}.brand-mark{width:40px;height:42px;display:grid;place-items:center;background:var(--orange);color:#142026;font-size:32px;font-weight:1000;transform:skew(-7deg);border-radius:2px}.brand-mark span{font-size:24px;position:absolute;right:3px;bottom:4px;color:#f8dfbf}.header-right{display:flex;align-items:center;gap:19px}.build{font-family:monospace;font-size:10px;letter-spacing:1.5px;color:#a3b5b3;border:1px solid var(--line);padding:9px 12px;border-radius:3px}.build i,.live-dot{display:inline-block;background:#9ac3a5;width:5px;height:5px;border-radius:50%;margin-right:7px}.icon-button{width:34px;height:34px;border:1px solid var(--line);background:transparent;color:#bbcbc6;font-size:25px;border-radius:3px}
.arena-section{box-shadow:0 20px 60px #0004}.arena-toolbar{display:flex;justify-content:space-between;align-items:center;background:#182328;border:1px solid #354046;border-bottom:0;padding:10px 15px;font:10px monospace;letter-spacing:1px;color:#b6c5c4}.arena-toolbar em{color:#5b706f;font-style:normal;padding:0 12px}.arena-toolbar button{background:transparent;color:#b5c1bf;font:10px monospace;padding:2px 9px}.arena-toolbar button+button{border-left:1px solid #44504f;margin-left:4px}.arena{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid #525951;background:#39495a}.arena>canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.arena::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 65px #10162235;pointer-events:none}.hud{position:absolute;inset:5% 4% auto;display:grid;grid-template-columns:1fr 84px 1fr;gap:22px;z-index:2;filter:drop-shadow(0 2px 2px #14202688)}.fighter-hud b{display:block;text-transform:uppercase;font-size:clamp(11px,2vw,22px);font-weight:900;font-style:italic;margin:5px 0 9px;letter-spacing:-.3px;text-shadow:2px 2px #1b2731}.fighter-label{display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1px;color:#e6d7bf}.fighter-label span:last-child{opacity:.7}.health-track{height:18px;transform:skew(-10deg);background:#4f3538;border:2px solid #263135;box-shadow:0 0 0 1px #e1d1aeaa;overflow:hidden}.health-track>div{height:100%;background:linear-gradient(#f5b08a 0 25%,#f47b55 25% 80%,#cf593f 80%);transform-origin:left;transition:transform .13s linear}.energy-track{height:5px;width:64%;margin-top:9px;background:#21373b;transform:skew(-10deg);box-shadow:0 0 0 1px #bcbb9980}.energy-track>div{height:100%;background:#eac88a;transform-origin:left}.p2{text-align:right}.p2 .fighter-label{flex-direction:row-reverse}.p2 .health-track>div{background:linear-gradient(#d8e6b8 0 25%,#abcda8 25% 80%,#78a591 80%);transform-origin:right}.p2 .energy-track{margin-left:auto}.p2 .energy-track>div{transform-origin:right}.clock-box{text-align:center;color:#ffdeb0}.clock-box>span{font:8px monospace;letter-spacing:1px}.clock-box strong{display:block;font:900 italic 48px Impact,Arial,sans-serif;line-height:1.07;text-shadow:3px 3px #273038}.round-dots{font-size:11px;letter-spacing:7px;margin-left:6px;color:#ffcd90}.stage-label{position:absolute;bottom:4%;left:4%;font:9px monospace;letter-spacing:1.3px;color:#d8d5b8;text-shadow:1px 1px #29392f;display:flex;align-items:center;gap:9px}.stage-label>span{font-size:16px;color:#ebc889}.stage-label small{font-size:8px;opacity:.55;border-left:1px solid #bebd9870;padding-left:9px}.arena-corner{position:absolute;bottom:13px;width:10px;height:10px;border-bottom:2px solid #d0c59680}.corner-left{left:13px;border-left:2px solid #d0c59680}.corner-right{right:13px;border-right:2px solid #d0c59680}
.match-overlay{position:absolute;inset:24% 0 auto;text-align:center;z-index:3;pointer-events:none}.match-overlay h1{font:900 italic clamp(30px,6vw,72px) Impact,Arial,sans-serif;color:#ffe4b4;text-shadow:4px 4px #26313b;margin:9px 0;letter-spacing:1px}.match-overlay>span{font:11px monospace;text-transform:uppercase;letter-spacing:2px;text-shadow:1px 1px #121c23}.match-overlay button{pointer-events:auto}.arena[data-phase="paused"]::before{content:"";position:absolute;inset:0;background:#0d171ca0;z-index:2}.primary-button{background:var(--orange);color:#192327;font-size:12px;font-weight:900;letter-spacing:1px;padding:18px 25px;border-radius:2px;box-shadow:inset 0 1px #ffc09b;white-space:nowrap}.primary-button:hover{background:#ff9870}.secondary-button{background:#1d2b2ee8;padding:17px 20px;font-size:12px;border:1px solid #97a296;margin-left:8px;border-radius:2px}
.selection{padding:23px 0 24px;border-bottom:1px solid var(--line)}.selection-heading{display:flex;justify-content:space-between;margin-bottom:12px;font:9px monospace;letter-spacing:1.5px}.eyebrow{color:#bdc8c3}.selection-heading>span:last-child{color:#829593;font-size:8px}.selection-content{display:flex;gap:22px;align-items:center}.fighter-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}.fighter-card{position:relative;display:flex;align-items:center;text-align:left;overflow:hidden;background:#19252b;border:1px solid #364449;border-radius:3px;height:90px;padding:0 14px 0 0;gap:9px}.fighter-card.selected{background:linear-gradient(110deg,#39382e,#253234);border-color:#bfa976;box-shadow:inset 3px 0 #eec38c}.fighter-card canvas{width:93px;height:86px;image-rendering:pixelated;align-self:flex-end}.fighter-card small{font:7px monospace;letter-spacing:.7px;color:#a6b2ad}.fighter-card strong{display:block;font-size:17px;margin:6px 0 5px;letter-spacing:-.4px;white-space:nowrap}.fighter-card em{display:block;font-size:10px;font-style:normal;color:#90a4a0}.fighter-card i{position:absolute;right:8px;top:7px;color:#e6c38e;font-size:11px;font-style:normal;opacity:0}.fighter-card.selected i{opacity:1}.start-area{min-width:207px}.start-area .primary-button{width:100%}.training-toggle{display:flex;justify-content:center;align-items:center;gap:5px;font-size:10px;color:#a6b5b1;margin-top:11px}.training-toggle input{accent-color:var(--orange);margin:0 3px 0 0}.training-toggle span{color:#687e7c;font-size:9px;margin-left:3px}
.controls{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:21px 6px}.controls button[data-action]{touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 3px 0 #050d11;border:1px solid #4d5b5d;background:#233137;color:#bccbc6;min-width:42px;min-height:42px}.controls button.is-pressed{background:#eab784;color:#172327;transform:translateY(2px);box-shadow:0 1px 0 #050d11}.dpad{display:grid;grid-template:repeat(3,34px)/repeat(3,38px);gap:3px}.dpad button[data-action]{font-size:20px;min-width:0;min-height:0;border-radius:3px}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.dpad-center{grid-area:2/2;display:grid;place-items:center;color:#627572;font-size:20px}.controls-note{max-width:380px;text-align:center}.controls-note>span{font:9px monospace;letter-spacing:1.5px;color:#b0bfb7}.controls-note p{font-size:11px;color:#758c8b;line-height:1.5;margin:9px 0 13px}.controls-note button{font:8px monospace;letter-spacing:1px;color:#a0b3aa;background:none;padding:3px 8px}.controls-note button+button{border-left:1px solid #425951}.attacks{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,48px);gap:8px}.attacks button[data-action]{border-radius:50%;height:48px;width:54px;min-height:44px}.attacks .block-button{grid-area:1/1/3/2;align-self:center}.attacks button span{font-size:9px;font-weight:900;letter-spacing:.3px;display:block}.attacks button small{font:7px monospace;color:#829794;display:block;margin-top:4px}.attacks button.special-button{border-color:#b08362;color:#edb584;background:#34352f}.attacks button.special-button small{color:#a9977c}.help-panel{padding:18px 25px;background:#1a292d;border:1px solid #384d4c;border-radius:3px;margin-bottom:20px}.help-panel h2{font-size:17px}.help-panel p{font-size:12px;line-height:1.9;color:#aabeb6}.help-panel b{color:#e8ddc7}footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:17px 0 0;font:8px monospace;letter-spacing:1px;color:#687f7e}
@media(min-width:1400px){body{padding-top:35px}.game-shell{max-width:1100px}}
@media(max-width:850px){.selection-content{flex-wrap:wrap;gap:15px}.fighter-options{flex-basis:100%}.start-area{display:flex;align-items:center;gap:24px;width:100%}.start-area .primary-button{width:50%}.training-toggle{margin:0}.controls-note{max-width:260px}.hud{gap:15px;grid-template-columns:1fr 68px 1fr}.fighter-hud b{font-size:17px}.clock-box strong{font-size:39px}}
@media(max-width:600px){body{padding:15px 12px}.topbar{margin-bottom:18px}.brand{font-size:20px}.brand-mark{width:34px;height:35px;font-size:28px}.brand small{font-size:6px;letter-spacing:1.8px}.build{padding:7px;font-size:8px;letter-spacing:.5px}.header-right{gap:7px}.icon-button{width:29px;height:29px;font-size:21px}.arena-toolbar{padding:9px 7px;font-size:7px;letter-spacing:.2px}.arena-toolbar em{padding:0 4px}.arena-toolbar button{font-size:8px;padding:2px 5px}.hud{inset:5% 4% auto;gap:10px;grid-template-columns:1fr 40px 1fr}.fighter-hud b{font-size:10px;margin:4px 0 6px}.fighter-label{font-size:6px;letter-spacing:.4px}.health-track{height:9px;border-width:1px}.energy-track{height:3px;margin-top:5px}.clock-box>span{font-size:5px;letter-spacing:0}.clock-box strong{font-size:27px}.round-dots{font-size:7px;letter-spacing:3px}.stage-label{font-size:6px;letter-spacing:.5px;gap:5px}.stage-label small{font-size:5px}.stage-label>span{font-size:10px}.selection{padding:18px 0}.selection-heading{font-size:8px;letter-spacing:.5px}.selection-heading>span:last-child{font-size:7px}.fighter-options{gap:8px}.fighter-card{height:82px;padding-right:6px;gap:2px}.fighter-card canvas{width:57px;height:70px}.fighter-card strong{font-size:12px;white-space:normal;line-height:1.15;margin:5px 0}.fighter-card small{font-size:5px;letter-spacing:0}.fighter-card em{font-size:7px}.fighter-card i{font-size:8px;right:5px;top:4px}.start-area{gap:12px}.start-area .primary-button{font-size:11px;padding:15px 11px;width:53%}.training-toggle{font-size:9px;flex-wrap:wrap}.training-toggle span{display:none}.controls{padding:20px 0 16px;flex-wrap:wrap;gap:14px}.dpad{grid-template:repeat(3,44px)/repeat(3,44px)}.controls-note{order:3;max-width:100%;width:100%;margin-top:5px}.controls-note>span{font-size:8px}.controls-note p{margin:7px 0 10px;font-size:10px}.attacks{grid-template-columns:repeat(3,49px);grid-template-rows:repeat(2,47px);gap:6px}.attacks button[data-action]{width:49px;height:47px}.controls-note button{min-height:32px}.match-overlay{inset:27% 0 auto}.match-overlay h1{font-size:32px;margin:4px 0}.match-overlay>span{font-size:7px;letter-spacing:1px}.match-overlay .primary-button,.match-overlay .secondary-button{padding:10px 12px;font-size:8px}.arena-corner{bottom:7px;width:6px;height:6px}.corner-left{left:7px}.corner-right{right:7px}footer{font-size:6px;line-height:1.7;letter-spacing:.5px;flex-direction:column;gap:5px;padding-top:14px}.help-panel{padding:14px}}
@media(orientation:landscape) and (max-height:520px){body{padding:7px 12px}.game-shell{max-width:900px}.topbar{display:none}.arena-toolbar{padding:5px 10px}.arena-section{max-width:calc((100svh - 46px)*16/9);margin:auto}.arena{aspect-ratio:16/9}.hud{inset:4% 5% auto;grid-template-columns:1fr 60px 1fr;gap:24px}.fighter-hud b{font-size:14px}.health-track{height:12px}.fighter-label{font-size:7px}.clock-box strong{font-size:32px}.selection{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:min(630px,85vw);padding:9px;background:#142025ee;border:1px solid #718073;z-index:5;border-radius:4px}.selection-heading{margin-bottom:7px}.selection-content{flex-wrap:nowrap;gap:10px}.fighter-options{flex-basis:auto}.fighter-card{height:57px}.fighter-card canvas{width:55px;height:57px}.fighter-card strong{font-size:11px;white-space:normal}.fighter-card small{font-size:5px}.fighter-card em{font-size:7px}.start-area{min-width:122px;width:122px;display:block}.start-area .primary-button{width:100%;padding:12px 6px;font-size:9px}.training-toggle{margin-top:6px;font-size:8px}.training-toggle span{display:none}.controls{position:fixed;inset:auto 25px 20px;padding:0;pointer-events:none;z-index:4}.controls button{pointer-events:auto}.controls-note{display:none}.dpad{grid-template:repeat(3,44px)/repeat(3,44px);opacity:.72}.attacks{grid-template-columns:repeat(3,45px);grid-template-rows:repeat(2,44px);gap:5px;opacity:.75}.attacks button[data-action]{width:45px;height:44px}.stage-label{bottom:4%;left:40%;font-size:6px}.stage-label small{display:none}body:has(.arena[data-phase="select"]) .controls{visibility:hidden}.help-panel,footer{display:none}.match-overlay{inset:28% 0 auto}.match-overlay h1{font-size:42px}.match-overlay .primary-button,.match-overlay .secondary-button{padding:10px 15px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.stage-label b{font-weight:inherit}
.arena[data-stage="arena-esplanada"]::before{content:"";position:absolute;inset:0 0 auto;height:27%;background:linear-gradient(#102a409c,#102a4040 65%,transparent);pointer-events:none}
.arena[data-stage="arena-esplanada"] .stage-label{color:#fff2d5;text-shadow:0 1px 3px #132c39;background:#183242c9;padding:5px 8px;border-radius:2px}
/* Roster grows from catalog; compact cards keep all three fighters visible. */
.fighter-options{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.fighter-card{min-width:0;gap:6px;padding-right:8px}.fighter-card canvas{width:68px;height:86px;flex-shrink:0}.fighter-card strong{font-size:14px;white-space:normal}.fighter-card small{font-size:6px;letter-spacing:.2px}.fighter-card em{font-size:8px}.opponent-picker{display:flex;flex-direction:column;gap:5px;font:8px monospace;letter-spacing:1px;color:#9cb2a7;margin-bottom:10px}.opponent-picker select{width:100%;background:#19292e;color:#e5dec9;border:1px solid #53645b;border-radius:2px;padding:7px 8px;font:11px Arial,sans-serif;min-height:32px}.opponent-picker select:focus-visible{outline:2px solid #edbb83;outline-offset:2px}
@media(max-width:850px){.start-area{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}.start-area .primary-button{width:100%}.opponent-picker{margin:0}.training-toggle{grid-column:1/-1;justify-content:flex-end}}
@media(max-width:600px){.fighter-card{height:140px;flex-direction:column;gap:3px;padding:5px 4px;text-align:center;justify-content:flex-start}.fighter-card canvas{width:68px;height:67px;align-self:center}.fighter-card strong{font-size:12px;margin:5px 0;min-height:27px;display:flex;align-items:center;justify-content:center;line-height:1.12}.fighter-card small{font-size:5px;letter-spacing:0}.fighter-card em{font-size:7px;line-height:1.3}.opponent-picker{font-size:7px}.opponent-picker select{min-height:34px;font-size:10px}.start-area .primary-button{height:47px;font-size:10px}.training-toggle{font-size:9px}}
@media(orientation:landscape) and (max-height:520px){.selection{width:min(790px,94vw)}.fighter-options{grid-template-columns:repeat(3,minmax(0,1fr))}.fighter-card{height:69px;flex-direction:row;text-align:left;padding:0 5px;gap:3px}.fighter-card canvas{width:42px;height:62px;align-self:flex-end}.fighter-card strong{display:block;font-size:10px;min-height:0}.fighter-card small{font-size:5px}.fighter-card em{font-size:6px}.start-area{display:block;min-width:137px;width:137px}.opponent-picker{font-size:6px;gap:3px;margin:0 0 5px}.opponent-picker select{font-size:9px;min-height:25px;padding:4px}.start-area .primary-button{height:auto;padding:9px 5px;font-size:8px}.training-toggle{font-size:7px;margin-top:5px}}/* Expanded roster: three columns on desktop, two on phones. */
.fighter-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.selected-moves{margin:13px 0 0;font:10px/1.6 monospace;color:#d8c296;letter-spacing:.2px}
@media(max-width:700px){.fighter-options{grid-template-columns:repeat(2,minmax(0,1fr))}.fighter-card{height:101px;flex-direction:row;text-align:left;padding:0 7px;gap:6px}.fighter-card canvas{width:62px;height:86px;align-self:flex-end}.fighter-card strong{display:block;min-height:0;font-size:12px}.fighter-card small{font-size:5px}.fighter-card em{font-size:8px}.selected-moves{font-size:9px}.fighter-card>span{min-width:0}}
@media(orientation:landscape) and (max-height:520px){.selection{max-height:75svh;overflow-y:auto;overscroll-behavior:contain}.fighter-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.fighter-card{height:68px;padding:0 4px;gap:3px}.fighter-card canvas{width:36px;height:58px}.fighter-card strong{font-size:9px}.fighter-card em{font-size:6px}.selected-moves{font-size:8px;margin-top:7px}}