:root{color-scheme:dark;--ink:#0b1018;--panel:#131c29;--line:#2b3544;--muted:#a0abba;--cream:#f5edda;--orange:#ff9d43;--cyan:#78d7ef;font-family:Arial,Helvetica,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--cream)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}[hidden]{display:none!important}a{color:inherit;text-decoration:none}#app{max-width:1480px;margin:auto;padding:0 clamp(16px,3.4vw,56px)}.masthead{height:104px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}.wordmark{font-family:Impact,'Arial Narrow',sans-serif;font-style:italic;font-size:28px;line-height:.9;letter-spacing:-.5px;color:var(--orange);position:relative;padding-right:116px;white-space:nowrap}.wordmark span{display:block;color:var(--cream)}.wordmark small{position:absolute;left:112px;top:17px;width:95px;font:11px/1.3 monospace;letter-spacing:2px;color:var(--muted)}.header-right{display:flex;gap:12px;align-items:center}.edition{font:12px monospace;letter-spacing:1px;margin-right:15px;color:var(--muted)}.edition i{color:var(--orange);margin:0 10px}.icon-btn{border:1px solid var(--line);background:transparent;min-height:38px;min-width:38px;padding:8px 11px;font:12px monospace;letter-spacing:.6px}.icon-btn:hover{background:var(--panel);border-color:var(--orange)}.section-heading{display:flex;justify-content:space-between;align-items:end;padding:28px 0 25px}.eyebrow{font:12px/1.4 monospace;letter-spacing:1.8px;color:var(--orange);margin:0 0 10px}h1,h2{font-family:Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:.3px}h1{font-size:clamp(32px,3.5vw,54px);line-height:1;margin:0}h1 em{font-style:normal;color:var(--orange)}.small-note{font:14px/1.55 monospace;text-align:right;color:var(--muted);margin:0}.selection-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px}.roster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.character-card{--accent:var(--orange);height:128px;position:relative;overflow:hidden;text-align:left;border:1px solid #354050;background:#172030;padding:0;isolation:isolate;transition:border-color .12s,transform .12s}.character-card img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;image-rendering:pixelated;opacity:.78;transition:opacity .12s}.character-card.expansion img{object-fit:contain;object-position:center top;transform:scale(1.08);transform-origin:top}.character-card:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#080c15ed 95%);z-index:1}.character-card:hover{border-color:var(--cream);transform:translateY(-2px)}.character-card:hover img,.character-card[aria-pressed=true] img{opacity:1}.character-card[aria-pressed=true]{border:2px solid var(--orange);box-shadow:0 0 0 2px #ff9d4330;background:#423227}.character-card[aria-pressed=true]:before{content:'P1';position:absolute;right:0;top:0;background:var(--orange);color:#151515;padding:3px 5px;z-index:3;font:bold 12px monospace}.card-number{position:absolute;top:7px;left:7px;font:11px monospace;color:#f5eddaaa;z-index:2}.card-name{position:absolute;left:8px;right:5px;bottom:8px;font:700 12px/1.2 Arial,sans-serif;z-index:2;letter-spacing:.2px}.stage-heading{display:flex;align-items:center;justify-content:space-between;margin:23px 0 11px}.stage-heading h2{font:12px monospace;letter-spacing:1.4px;margin:0}.text-btn{border:0;background:none;font:12px monospace;letter-spacing:1px;padding:10px 0;color:var(--muted)}.text-btn:hover,.text-btn[aria-pressed=true]{color:var(--orange)}.stage-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.stage-card{height:78px;position:relative;overflow:hidden;border:1px solid var(--line);background:#0b1018;padding:0;text-align:left}.stage-card img{width:100%;height:100%;object-fit:cover;opacity:.5}.stage-card span{position:absolute;bottom:9px;left:9px;right:4px;font:700 11px/1.2 monospace;text-shadow:1px 2px #000}.stage-card[aria-pressed=true]{border:2px solid var(--orange)}.stage-card[aria-pressed=true] img{opacity:.85}.fighter-detail{--accent:#446dc6;background:linear-gradient(155deg,#1e2b3c,var(--panel) 70%);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}.detail-top{display:flex;justify-content:space-between;padding:15px 18px;font:11px monospace;letter-spacing:1.5px;color:var(--muted);border-bottom:1px solid #ffffff0c}.detail-top span:first-child{color:var(--orange)}.showcase{position:relative;height:210px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at bottom,color-mix(in srgb,var(--accent) 35%,transparent),transparent 70%)}.showcase-letter{position:absolute;font:220px/.8 Impact,sans-serif;color:#ffffff06;bottom:-5px;left:16px}.showcase img{position:relative;max-height:184px;max-width:90%;image-rendering:pixelated;filter:drop-shadow(5px 7px 0 #0005);z-index:1}.selection-stamp{position:absolute;right:12px;bottom:12px;writing-mode:vertical-rl;font:10px monospace;color:#ffffff5c;letter-spacing:2px}.detail-copy{padding:18px;flex:1;display:flex;flex-direction:column}.detail-copy .eyebrow{font-size:11px;margin-bottom:5px;color:var(--muted)}.detail-copy h2{font-size:32px;line-height:1;margin:0 0 18px;color:var(--cream)}.stats{display:flex;gap:12px;margin-bottom:20px}.stat{flex:1}.stat span{font:10px monospace;color:var(--muted);letter-spacing:1px}.stat-track{height:4px;background:#354050;margin-top:8px}.stat-track i{display:block;height:4px;background:var(--orange)}.move-list{display:grid;gap:8px}.move-list>div{display:flex;gap:10px;align-items:center;font-size:13px}.move-list>div:last-child{color:var(--orange)}kbd{display:inline-grid;place-items:center;border:1px solid #4c5869;min-width:22px;height:22px;padding:0 4px;font:12px monospace;background:#ffffff04;color:#dbe2ea;vertical-align:middle}.special-note{font:12px/1.5 Arial,sans-serif;color:var(--muted);min-height:36px;margin:16px 0 19px}.fight-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:13px 17px;background:var(--orange);border:1px solid var(--orange);color:#141518;font-weight:900;letter-spacing:.7px;font-size:15px}.fight-btn:hover{background:#ffb970}.detail-copy .fight-btn{margin-top:auto}.fight-btn>span:last-child{font-size:25px;line-height:1}.match-note{text-align:center;font:10px monospace;letter-spacing:1px;color:var(--muted);margin:12px 0 0}.select-footer{display:flex;justify-content:space-between;gap:16px;margin:26px 0;padding:18px 0;border-top:1px solid var(--line);font:11px/1.5 monospace;color:var(--muted)}.select-footer kbd{margin-right:5px}.select-footer kbd:nth-of-type(3),.select-footer kbd:nth-of-type(4){margin-left:14px}
.fight-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 0;font:12px monospace;letter-spacing:1px;color:var(--muted)}.game-shell{position:relative;border:1px solid #485365;background:#182235;overflow:hidden;max-width:1100px;margin:auto}.hud{position:absolute;left:0;right:0;top:0;z-index:3;display:grid;grid-template-columns:1fr 70px 1fr;gap:20px;padding:20px 24px 35px;background:linear-gradient(#07101df5,#07101dbe,transparent);pointer-events:none}.hud-name{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:18px;margin-bottom:7px}.hud-name span{font:11px monospace;color:#ced4df}.enemy-hud .hud-name{flex-direction:row-reverse}.health-shell{height:18px;border:2px solid var(--cream);background:#4c202a;transform:skew(-12deg);overflow:hidden}.health-shell>div{height:100%;background:linear-gradient(90deg,#eeb052,#f5e5a1);transition:width .1s linear}.enemy-hud .health-shell>div{margin-left:auto}.debt-row{display:flex;align-items:center;gap:10px;margin-top:9px;font:10px monospace;color:var(--orange)}.debt-shell{width:45%;height:5px;background:#ffffff30}.debt-shell>div{height:100%;width:0;background:var(--orange)}.enemy-hud .debt-row{flex-direction:row-reverse}.penalty{font:9px monospace;color:#ff9c82;display:block;margin-top:6px}.enemy-hud .penalty{text-align:right}.round-clock{text-align:center}.round-clock b{font:44px/.95 Impact,sans-serif;display:block}.round-clock span{font:10px monospace;color:#c3cddc;white-space:nowrap}.round-clock.urgent{color:#ff765e}#arena{aspect-ratio:16/9;width:100%}#arena canvas{display:block;width:100%!important;height:100%!important}.announcer{position:absolute;inset:36% 0 auto;z-index:5;text-align:center;pointer-events:none;font:italic clamp(38px,7vw,85px)/1 Impact,sans-serif;color:var(--cream);text-shadow:3px 4px #9b321b,6px 7px #000;opacity:0;padding:0 16px}.announcer.visible{opacity:1}.hazard-notice{position:absolute;top:23%;left:50%;transform:translateX(-50%);color:var(--cream);background:#852b1e;padding:8px 14px;font:bold 12px monospace;opacity:0;white-space:nowrap;pointer-events:none}.hazard-notice.visible{opacity:1}.pause-overlay{position:absolute;inset:0;z-index:7;display:flex;justify-content:center;align-items:center;flex-direction:column;background:#070e1add;backdrop-filter:blur(5px)}.pause-overlay h2{font-size:64px;margin:4px 0 22px}.pause-overlay .fight-btn{width:240px}.pause-overlay .text-btn{margin-top:12px}.combat-panel{max-width:1100px;margin:auto;display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}.combat-panel strong{display:block;color:var(--orange);font:14px monospace}.combat-panel>div>span{display:block;color:var(--muted);font-size:13px;margin-top:6px}.keyboard-hint{font:11px monospace;color:var(--muted);align-self:center}.keyboard-hint kbd{margin-left:14px}.touch-controls{max-width:1100px;margin:15px auto;display:flex;justify-content:space-between;gap:15px;user-select:none;touch-action:none}.dpad,.attack-pad{display:flex;gap:8px}.touch-controls button{background:#152031;border:1px solid #536077;border-bottom:4px solid #030710;min-width:60px;height:58px;font:bold 19px monospace;touch-action:none}.touch-controls small{display:block;font:9px monospace;margin-top:4px}.touch-controls button.pressed{background:#41536c;border-bottom-width:1px}.attack-pad button{width:70px;border-top:2px solid var(--cyan)}.attack-pad button:nth-child(2){border-top-color:var(--orange)}.attack-pad button:nth-child(3){border-top-color:#f57871}.attack-pad button.ready{background:#604421;border-color:var(--orange);color:#ffe7a0}.utang-tip{max-width:1100px;margin:18px auto 25px;font:11px/1.6 monospace;color:var(--orange)}.utang-tip span{color:var(--muted);margin-left:12px}.game-dialog{width:min(490px,calc(100% - 32px));background:var(--panel);color:var(--cream);padding:38px;border:1px solid var(--orange);text-align:center;box-shadow:10px 10px #0006}.game-dialog::backdrop{background:#060a14dd;backdrop-filter:blur(5px)}.game-dialog h2{font-size:56px;margin:8px 0 22px;line-height:1;color:var(--orange)}.game-dialog p{font-size:16px;line-height:1.5}.game-dialog .text-btn{margin:15px auto 0}.result-score{font:13px monospace;color:var(--muted);margin:24px 0}.help-dialog{text-align:left;width:min(580px,calc(100% - 32px));max-height:90svh}.close-btn{float:right}.help-dialog dl{display:grid;grid-template-columns:1fr 1.2fr;font-size:14px;line-height:1.5;gap:10px}.help-dialog dt{font-family:monospace;color:var(--orange)}.help-dialog dd{margin:0}.muted{color:var(--muted)}.help-dialog p.muted{font-size:13px}.load-error{padding:18px;background:#622b2b;font-size:16px}
@media(min-width:1450px){.character-card{height:145px}}@media(max-width:1100px){.selection-layout{grid-template-columns:minmax(0,1fr) 270px;gap:18px}.roster{grid-template-columns:repeat(4,1fr)}.character-card{height:122px}.edition{display:none}.fighter-detail{align-self:start}.showcase{height:245px}.showcase img{max-height:210px}.card-name{font-size:12px}}@media(max-width:760px){#app{padding:0 16px}.masthead{height:82px}.wordmark{font-size:24px;padding-right:0}.wordmark small{display:none}.header-right{gap:8px}.section-heading{padding:23px 0}.small-note{display:none}h1{font-size:31px}.selection-layout{grid-template-columns:1fr;gap:18px}.roster{grid-template-columns:repeat(4,1fr);gap:7px}.character-card{height:124px}.fighter-detail{display:grid;grid-template-columns:125px 1fr;position:relative}.detail-top{grid-column:1/-1}.showcase{height:100%;min-height:240px}.showcase img{max-width:96%;max-height:180px}.showcase-letter{font-size:150px;left:0}.selection-stamp{display:none}.detail-copy{padding:16px 16px 16px 8px}.detail-copy h2{font-size:25px}.stats{margin-bottom:14px}.move-list{gap:6px}.special-note{margin:12px 0;font-size:12px;min-height:0}.detail-copy .fight-btn{margin-top:8px}.match-note{font-size:9px}.stage-card{height:75px}.stage-card span{font-size:10px}.select-footer{flex-direction:column;font-size:10px}.select-footer>span:first-child{display:none}.fight-toolbar{font-size:10px}.fight-toolbar .text-btn{font-size:10px}.fight-toolbar .icon-btn{font-size:10px}.hud{padding:11px 12px;gap:10px;grid-template-columns:1fr 40px 1fr}.hud-name{font-size:12px}.hud-name span{display:none}.health-shell{height:12px}.debt-row{font-size:8px;gap:5px;margin-top:5px}.round-clock b{font-size:28px}.round-clock span{font-size:8px}.penalty{font-size:7px}.combat-panel{padding:12px 0}.combat-panel strong{font-size:12px}.combat-panel>div>span{font-size:12px}.keyboard-hint{display:none}.touch-controls{gap:8px;flex-wrap:wrap}.dpad,.attack-pad{gap:6px}.touch-controls button{min-width:44px;width:44px;height:54px}.attack-pad button{width:49px;min-width:49px}.touch-controls small{font-size:8px}.utang-tip{font-size:10px}.utang-tip span{display:block;margin:5px 0}.hazard-notice{font-size:9px;padding:5px 8px;top:29%}.pause-overlay h2{font-size:36px;margin:0 0 10px}.pause-overlay .eyebrow{display:none}.pause-overlay .fight-btn{min-height:40px;width:200px;font-size:13px}.pause-overlay .text-btn{margin-top:4px;padding:7px}.game-dialog{padding:28px}.game-dialog h2{font-size:42px}}@media(max-width:390px){.roster{grid-template-columns:repeat(3,1fr)}.touch-controls{justify-content:center}.dpad,.attack-pad{flex:1;justify-content:space-between}.touch-controls button{flex:1}.fighter-detail{grid-template-columns:100px 1fr}.card-name{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Keep tactical labels readable across the compact arcade layout. */
.card-name{font-size:14px}.move-list>div{font-size:14px}.special-note{font-size:14px}.stage-card span{font-size:12px}
@media(max-width:760px){.card-name{font-size:13px}.special-note{font-size:13px}.move-list>div{font-size:13px}}
/* The browser must preserve the same nearest-neighbor pixels as Phaser. */
#arena canvas{image-rendering:pixelated;image-rendering:crisp-edges;margin:0!important;max-width:100%}
/* Shared sprite presentation for the complete roster. */
.character-card img{object-fit:contain;object-position:center;height:calc(100% - 22px);margin-top:3px;opacity:1;transform:none}
.character-card::after{background:linear-gradient(transparent 70%,#080c15ed 100%)}
.showcase img{width:192px;height:192px;max-height:192px;object-fit:contain;filter:none;image-rendering:pixelated}
#arena{position:relative;overflow:hidden}
#arena canvas{image-rendering:pixelated;image-rendering:crisp-edges;position:absolute;inset:0;margin:0!important;width:100%!important;height:100%!important}
/* Fit the full desktop arena and controls without cutting off the bottom edge. */
@media(min-width:761px){.game-shell,.combat-panel,.touch-controls,.utang-tip{max-width:min(1100px,calc((100svh - 400px)*16/9))}.game-shell{min-width:500px}.combat-panel,.touch-controls,.utang-tip{min-width:500px}}
@media(max-width:760px){.showcase img{width:192px;max-width:100%;height:192px;max-height:192px}}

/* Duel Edition: full 22-fighter roster, locked to a single default arena. */
.duel-mode .stage-picker{grid-template-columns:1fr}.duel-mode .stage-card{height:122px}.duel-mode .stage-card img{object-position:center 58%;opacity:.8}.duel-mode .stage-card span{font-size:16px;left:16px;bottom:14px}.duel-mode .stage-heading{margin-top:20px}.duel-mode .fighter-detail{align-self:stretch}.duel-mode .showcase{height:190px}.duel-mode .match-note{font-size:12px}
@media(max-width:760px){.duel-mode .stage-card{height:86px}.duel-mode .showcase{height:100%}.duel-mode .fighter-detail{align-self:start}}
@media(min-width:761px){body:has(#fight-screen:not([hidden])) .masthead{height:72px}.game-shell,.combat-panel,.touch-controls,.utang-tip{max-width:min(1152px,calc((100svh - 340px)*16/9))}}

.attack-pad button[data-control=light]{border-top-color:var(--cyan)}.attack-pad button[data-control=kick]{border-top-color:#a9dc96}.attack-pad button[data-control=special]{border-top-color:var(--orange)}.attack-pad button[data-control=super]{border-top-color:#f57871}
