[hidden]{display:none!important}
#stage-change{position:fixed;top:8px;right:58px;z-index:7;padding:9px 12px;border:1px solid #d6f56c;border-radius:4px;background:#101311dd;color:#d6f56c;font:10px CampaignArcade,monospace;cursor:pointer}
#stage-change:hover,#stage-change:focus-visible{background:#d6f56c;color:#101311}
#match-select{position:fixed;inset:0;z-index:20;display:grid;place-items:center;overflow:auto;padding:24px;background:#000;color:#f4f5f0;font-family:CampaignArcade,monospace}
.match-selecting #touch-controls,.match-selecting #stage-change{display:none!important}
.stage-menu{width:min(1120px,100%);text-align:center}
.stage-eyebrow{margin:0 0 10px;color:#69e7b2;font:bold 12px/1.4 CampaignArcade,monospace;letter-spacing:.16em}
.selection-progress{margin:0 0 10px;color:#d6f56c;font:bold 12px/1.4 CampaignArcade,monospace;letter-spacing:.12em}
.stage-menu h1{margin:0;font-size:clamp(29px,5vw,54px);line-height:1.05}
.stage-instruction{margin:12px 0 25px;color:#c2cbd3;font-size:16px}
.stage-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stage-card{min-width:0;padding:0;overflow:hidden;border:3px solid #52606c;border-radius:12px;background:#202a34;color:#f6f7f5;text-align:left;cursor:pointer;box-shadow:0 15px 35px #0005;transition:transform .14s,border-color .14s,box-shadow .14s}
.stage-card:hover,.stage-card:focus-visible{transform:translateY(-3px);border-color:#98ebc3;outline:none}
.stage-card.selected{border-color:#65e5ab;box-shadow:0 0 0 3px #65e5ab44,0 15px 35px #0007}
.stage-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;image-rendering:pixelated}
.stage-card.fighter-card img{height:190px;aspect-ratio:auto;object-fit:contain;background:radial-gradient(circle at 50% 65%,#4b3940,#1c2632 68%)}
.stage-card.fighter-card span{display:block;text-align:center}
.stage-card span{display:block;padding:14px 16px;font-size:clamp(14px,1.7vw,20px);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-card b{margin-right:10px;color:#6de6b2;font:700 12px CampaignArcade,monospace}
.selection-actions{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:25px}
#selection-next,#selection-back{min-width:180px;max-width:100%;padding:15px 24px;border:0;border-radius:6px;font:bold 16px/1.2 CampaignArcade,monospace;cursor:pointer}
#selection-next{background:#d6f56c;color:#11181b}
#selection-back{background:#34414a;color:#f4f5f0;border:1px solid #91a2ab}
#selection-next:hover,#selection-next:focus-visible{background:#f1ffb1;outline:3px solid #6de6b2;outline-offset:3px}
#selection-back:hover,#selection-back:focus-visible{background:#4b5a65;outline:3px solid #6de6b2;outline-offset:3px}
.stage-help{margin:14px 0 0;color:#94a3ad;font:12px/1.4 CampaignArcade,monospace}
@media(max-width:700px){#match-select{place-items:start center;padding:24px 16px}.stage-instruction{margin-bottom:18px}.stage-options{grid-template-columns:1fr;gap:10px}.stage-card{display:grid;grid-template-columns:42% 1fr;align-items:center}.stage-card img{height:100%;min-height:88px}.stage-card.fighter-card img{height:92px}.stage-card span{white-space:normal;padding:10px;font-size:16px}.selection-actions{margin-top:18px}#selection-next,#selection-back{min-width:0;flex:1}}
@media(max-height:540px) and (min-width:701px){#match-select{place-items:start center;padding:12px 24px}.stage-eyebrow{margin-bottom:3px}.stage-menu h1{font-size:30px}.stage-instruction{margin:5px 0 12px}.stage-options{gap:12px}.stage-card span{padding:8px 12px;font-size:15px}.stage-card.fighter-card img{height:110px}.selection-actions{margin-top:12px}#selection-next,#selection-back{padding:10px 18px}.stage-help{margin-top:6px}}

@media(min-width:701px){.stage-options.fighter-options{grid-template-columns:repeat(7,minmax(0,1fr))}}

#title-screen{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#080b10} .title-frame{position:relative;width:min(100vw,177.777vh);aspect-ratio:16/9}.title-frame>img{background:url("stage.png?v=title-stage-9") center/100% 100% no-repeat;display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.title-actions{position:absolute;bottom:3%;left:0;right:0;display:flex;justify-content:center;align-items:center;min-height:40px}#title-screen #load{position:static;margin:0;padding:10px 22px;background:#080b10e6;color:#fff0bc;font:bold clamp(12px,2vw,18px) CampaignArcade,monospace;letter-spacing:.13em}#title-start{border:2px solid #ffe3a0;box-shadow:4px 4px 0 #080b10;padding:10px 30px;background:#a72720;color:#fff3bc;font:bold clamp(14px,2vw,20px) CampaignArcade,monospace;letter-spacing:.12em;cursor:pointer}#title-start:hover,#title-start:focus-visible{background:#d44923;outline:2px solid #fff;outline-offset:4px}body:has(#title-screen:not([hidden])) #touch-controls,body:has(#title-screen:not([hidden])) #rotate-phone{display:none!important}

#title-screen{background:#000}.mobile-start{display:none}@media(pointer:coarse){.desktop-start{display:none}.mobile-start{display:inline}.title-frame{width:min(100vw,177.777dvh)}.title-actions{bottom:3%}#title-start{min-height:44px}}

/* Authored wind-up, extension and impact; hold until real loading completes. */
.title-frame{overflow:hidden}.title-frame>.title-windup,.title-frame>.title-mid,.title-frame>.title-punch{position:absolute;inset:0;opacity:0;pointer-events:none;width:100%;height:100%;object-fit:fill}
.title-actions{z-index:5}.title-impact,.title-flash,.title-cracks{display:none}
.punching .title-windup{animation:intro-windup 900ms linear both}
.punching .title-mid{animation:intro-mid 900ms linear both}
.punching .title-punch{animation:intro-hit 900ms linear both}
@keyframes intro-windup{0%{opacity:0;transform:translateX(0)}12%,32%{opacity:1;transform:translateX(-.4%)}44%,100%{opacity:0;transform:translateX(0)}}
@keyframes intro-mid{0%,30%{opacity:0;transform:scale(.99)}42%,60%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.015)}}
@keyframes intro-hit{0%,58%{opacity:0;transform:scale(.99)}67%{opacity:1;transform:scale(1.025) translateX(-.3%)}76%{opacity:1;transform:scale(1.012) translateX(.3%)}90%,100%{opacity:1;transform:none}}
.impact-held .title-windup,.impact-held .title-mid{animation:none;opacity:0}.impact-held .title-punch{animation:none;opacity:1;transform:none}
.title-shards{position:absolute;inset:0;pointer-events:none;display:none;z-index:4;perspective:900px}.title-shard{position:absolute;inset:0;background:url('assets/title/foreground-v9/punch.png') center/100% 100% no-repeat,url('stage.png?v=title-stage-9') center/100% 100% no-repeat;will-change:transform,opacity}
.breaking .title-shards{display:block}.breaking .title-frame>img{visibility:hidden}.breaking .title-actions{visibility:hidden}.breaking .title-shard{animation:shard-fall 720ms cubic-bezier(.3,.05,.8,.5) both;animation-delay:var(--delay)}
@keyframes shard-fall{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.65)}}
@media(prefers-reduced-motion:reduce){.punching .title-windup,.punching .title-mid{animation:none;opacity:0}.punching .title-punch{animation:none;opacity:1}.breaking .title-shard{animation:none;opacity:0}}

/* Arcade roster: shared portrait framing and each fighter's own palette. */

#match-select{font-family:CampaignArcade,monospace}
.stage-menu h1{font:400 clamp(18px,2.8vw,34px)/1.6 CampaignArcade,monospace;text-transform:uppercase;margin:0 0 36px;text-shadow:none}
.stage-card.fighter-card{--card:#3d302e;--light:#88726c;background:var(--card);border-color:var(--light);border-radius:16px}
.fighter-card[data-choice="varti"]{--card:#581e32;--light:#aa5969}
.fighter-card[data-choice="nicanor"]{--card:#573723;--light:#b3844d}
.fighter-card[data-choice="tony-play"]{--card:#193e30;--light:#4d8b68}
.fighter-card[data-choice="dola"]{--card:#df8da5;--light:#f7b6c8;color:#301725}
.stage-card.fighter-card img{height:auto;aspect-ratio:1;object-fit:contain;background:var(--card);padding:12px 8px 0}
.stage-card.fighter-card span{background:var(--card)}
.stage-card span{font:600 clamp(14px,1.26vw,18px)/1.6 CampaignArcade,monospace;padding:18px 8px}
.stage-card b{font:400 9px CampaignArcade,monospace;color:#fff9;margin-right:6px}
.stage-card.selected{border-color:#fff0af;box-shadow:0 0 0 3px #ffe49855,0 0 26px #ffd46525}
.stage-card:focus-visible{outline:3px solid white;outline-offset:5px}
#selection-next,#selection-back{font:600 16px/1.5 CampaignArcade,monospace;padding:18px 28px;box-shadow:0 5px 0 #526223;min-width:180px}
#selection-back{box-shadow:0 5px 0 #182025;font-size:11px}
.selection-actions{margin-top:30px}
@media(max-width:700px){.stage-menu h1{font-size:18px;margin-bottom:24px}.fighter-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.stage-card.fighter-card{display:block}.stage-card.fighter-card img{height:auto;min-height:0}.stage-card span{font-size:12px;padding:12px 4px}.stage-card b{display:none}#selection-next,#selection-back{min-width:0;padding:16px 12px}.selection-actions{margin-top:24px}}
@media(max-height:540px) and (min-width:701px){.stage-menu h1{font-size:20px;margin-bottom:16px}.stage-card.fighter-card img{height:145px;aspect-ratio:auto}.stage-card span{font-size:12px;padding:10px 5px}.selection-actions{margin-top:16px}#selection-next,#selection-back{padding:12px 20px}}

.stage-card span{white-space:normal;overflow:visible;text-overflow:clip}

/* Five scenarios fit on one row; retain the mobile stacked layout. */
@media(min-width:701px){.stage-options:not(.fighter-options){grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Top-align desktop scenario art even when labels wrap to different heights. */
@media(min-width:701px){.stage-card:not(.fighter-card){display:flex;flex-direction:column;justify-content:flex-start}.stage-card:not(.fighter-card) img{flex:none}}

.fighter-card[data-choice="joao-dos-pe"]{--card:#10274d;--light:#426aab}
.fighter-card[data-choice="zeitune"]{--card:#dc791e;--light:#ffb75a;color:#281507}

.fighter-card[data-choice="joao-dos-pe"] span{font-size:clamp(9px,1vw,13px)}

/* The free fight uses the same Guaxupé stage as the campaign. */
#match-select:has(.versus-menu) {inset:0;display:grid;place-items:center;padding:0;background:#090969}
#match-select[hidden] {display:none}
#match-select .versus-menu {position:relative;isolation:isolate;width:min(100%,177.78dvh);max-width:none;aspect-ratio:16/9;margin:auto;color:#fff1bd;font-family:CampaignArcade,monospace;container-type:inline-size}
.versus-logo,.versus-map {position:absolute;display:block;image-rendering:pixelated}
.versus-logo {top:8%;left:5%;width:21%}
.versus-map {top:2%;left:31%;width:38%;z-index:-1}
.versus-menu #selection-title {position:absolute;top:16%;left:72%;width:24%;margin:0;text-align:center;font:1.25cqw/1.65 CampaignArcade,monospace;color:#fff1bd}
.versus-menu figure {position:absolute;bottom:13%;width:26%;margin:0;text-align:center}
.versus-player {left:6%}.versus-opponent {right:6%}
.versus-menu figure img {display:block;width:100%;aspect-ratio:1;object-fit:contain;image-rendering:pixelated}
.versus-menu figcaption {margin-bottom:1cqw}
.versus-menu figcaption small {display:block;font:1cqw/1.8 CampaignArcade,monospace}
.versus-menu figcaption strong {font:2cqw/1.6 CampaignArcade,monospace;color:#ffda80;text-shadow:.15cqw .15cqw #bd3424}
.versus-menu #selection-options {position:absolute;bottom:13%;left:32.5%;width:35%;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.24cqw;padding:.3cqw;border:2px solid #7479a4;background:#171436}
.versus-menu #selection-options.fighter-options {grid-template-columns:repeat(8,minmax(0,1fr));border:0;background:transparent}
.versus-menu .fighter-options > button {grid-column:span 2}
.versus-menu .fighter-options > button:nth-child(5) {grid-column:2 / span 2}
#match-select .versus-menu #online-open {display:none}
.versus-menu #selection-options button {display:flex;flex-direction:column;justify-content:flex-end;border:2px solid #787ca0;border-radius:0;box-shadow:none;background:#202455;padding:0;aspect-ratio:auto;transform:none}
.versus-menu #selection-options button.selected {border-color:#ffd963}
.versus-menu #selection-options button:focus-visible {outline:1px solid #fff4bc;outline-offset:-3px}
.versus-menu #selection-options img {height:auto;min-height:0;width:100%;padding:0;object-fit:contain;background:transparent}
.versus-menu #selection-options .fighter-card img {aspect-ratio:1}
.versus-menu #selection-options span {display:grid;place-items:center;width:100%;height:2.2cqw;box-sizing:border-box;padding:.1cqw;color:#ffe6a8;background:#101035;text-align:center;font:.74cqw/1.3 CampaignArcade,monospace}
.versus-menu .selection-actions {position:absolute;bottom:2%;inset-inline:1%;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6cqw}
#match-select .versus-menu .selection-actions button {position:static;display:block;min-width:0;margin:0;border:2px solid #858bb3;border-radius:0;background:#17174b;color:#fff2c7;padding:.65cqw .85cqw;box-shadow:none;font:.8cqw/1.4 CampaignArcade,monospace}
#match-select .versus-menu .selection-actions button[hidden] {display:none}
#match-select .versus-menu #selection-next {background:#ffcf6b;color:#211530}
@media (max-width:900px) and (orientation:portrait) {
 #match-select .versus-menu {width:min(100%,46.2dvh);aspect-ratio:780/1690;padding:0}
 .versus-menu .versus-map {display:none}
 .versus-menu .versus-logo {width:64%;left:18%;top:3.4%}
 .versus-menu #selection-title {width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .versus-menu #selection-options {width:85%;left:7.5%;top:40.8%;bottom:auto;transform:translateY(-50%);padding:0;gap:.28cqw;border:0}
 .versus-menu #selection-options.fighter-options {width:83%;left:8.5%}
 .versus-menu #selection-options img {height:auto;min-height:0}
 .versus-menu #selection-options span {height:5.2cqw;padding:0;font-size:1.65cqw;line-height:1.15}
 .versus-menu figure {width:47%;bottom:14.4%}
 .versus-menu .versus-player {left:3%}
 .versus-menu .versus-opponent {right:3%}
 .versus-menu figcaption {margin-bottom:2.2cqw}
 .versus-menu figcaption small {font-size:2.5cqw}
 .versus-menu figcaption strong {font-size:3.4cqw}
 .versus-menu .selection-actions {inset-inline:3.4%;bottom:3.4%;gap:.6cqw;flex-wrap:nowrap}
 #match-select .versus-menu .selection-actions button {flex:1 1 0;padding:0 .4cqw;min-height:8cqw;font-size:1.9cqw}
}

#match-select:not([data-step="2"]) .versus-menu #selection-title {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#match-select[data-step="0"] .versus-player small,
#match-select[data-step="1"] .versus-opponent small {color:#ffd963}

#match-select[data-step="0"] .versus-opponent {visibility:hidden}