@font-face{font-family:RPGPixel;src:url('./assets/fonts/pixelify-sans.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
:root{--head:RPGPixel,monospace;--mono:RPGPixel,monospace;--sans:RPGPixel,monospace;--cream:#ffedc0;--lime:#f6c76c;--line:#547c76;--stage-accent:#a2d0ba}
body{background:#0b2027;color:#fff0cf;font-family:RPGPixel,monospace}
button,input,select{font-family:RPGPixel,monospace}
header{background:#0b2027ee;border-bottom:2px solid #577c72}
.brand{font-size:22px;color:#fff0ce}.brand small{font-size:10px;letter-spacing:2px}.nav-button{font-size:14px}.sound-button{background:#122c31;border-color:#638a7b}
.arcade-steps{font-size:13px}.arcade-steps span.active{color:#f7d48a}
.scene-overlay{background:#09202966!important}
body[data-screen='mode'] .scene-overlay{display:none}
body[data-screen='mode'] header{position:absolute;left:0;right:0;top:0;z-index:10;background:linear-gradient(#041a25b3,transparent);border:0}
body[data-screen='mode'] .brand,body[data-screen='mode'] .arcade-steps{visibility:hidden}
body[data-screen='mode'] header nav{margin-left:auto}
body[data-screen='mode']>footer{display:none}
body[data-screen='mode']{display:block}
body[data-screen='mode'] main{height:100dvh}
.title-screen{height:100%;max-width:none;padding:0;position:relative;display:flex;justify-content:center;isolation:isolate;overflow:auto;background:#0c2631}
.title-key-art{position:absolute;inset:0;z-index:-2;background:url('./assets/art/title-key-art.webp?v=12') 38% center/cover no-repeat}
.title-screen:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 25%,#05202a22 48%,#041a24a8 75%,#041720d9),linear-gradient(0deg,#031923aa,transparent 25%);pointer-events:none}
.title-menu{width:43%;max-width:570px;align-self:flex-end;margin:auto 5% auto auto;padding:60px 0 45px;position:relative}
.title-screen .mode-intro{display:block;padding:0;margin-bottom:24px}
.title-screen .mode-intro .eyebrow{position:static;font:15px RPGPixel;letter-spacing:3px;color:#b8dbcf;margin:0 0 15px}
.title-screen .mode-intro h1{font:700 clamp(72px,7.5vw,125px)/.82 RPGPixel;letter-spacing:-2px;color:#fff6cd;margin:0;transform:skew(-4deg);text-shadow:3px 0 #334844,-3px 0 #334844,0 -3px #334844,0 4px #334844,5px 7px #081a25}
.title-screen .mode-intro h1 span{display:block}.title-screen .mode-intro h1 span:last-child{color:#f7cc78}
.title-screen .mode-intro>p:last-child{font:18px RPGPixel;color:#c9ded3;margin:22px 0 0}
.title-screen .mode-options{display:flex;flex-direction:column;gap:5px;flex:none;padding:0}
.title-screen .mode-card{min-height:68px;display:flex;flex-direction:row;align-items:center;gap:14px;padding:8px 16px 9px 4px;border:0;border-bottom:1px solid #94bfb336;background:none;box-shadow:none;backdrop-filter:none;border-radius:0;overflow:visible;transition:none}
.title-screen .mode-card:after{display:none}.title-screen .mode-card:hover,.title-screen .mode-card:focus-visible{background:linear-gradient(90deg,#e7bd6126,transparent);box-shadow:none;border-color:#f2cb78;outline:none}
.title-screen .menu-arrow{font:34px RPGPixel;line-height:1;color:#f3d185;opacity:0;transform:translateX(-4px)}
.title-screen .mode-card:hover .menu-arrow,.title-screen .mode-card:focus-visible .menu-arrow{opacity:1;transform:none}
.title-screen .mode-card-copy{gap:2px;display:flex;flex-direction:column}.title-screen .mode-card-copy>strong{font:700 32px/1 RPGPixel;color:#fff0cf;white-space:normal}.title-screen .mode-card-copy>span{font:16px/1.25 RPGPixel;color:#bfd5cf}
.title-screen .cpu-settings{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 15px;margin:20px 0 0;padding:0;border:0;background:none;font:16px RPGPixel}
.title-screen .cpu-settings select{font:16px RPGPixel;border:1px solid #83a99e;background:#0b252dde;color:#ffe3a7;min-height:34px;padding:4px 10px;border-radius:0;max-width:180px}
.title-screen #cpu-note{grid-column:1/-1;font:13px/1.3 RPGPixel;color:#9bbcb4;max-width:340px}
.title-screen .mode-bottom{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}.title-screen .mode-bottom>button{font:16px RPGPixel;color:#f7d48d;text-decoration:underline;text-underline-offset:4px;letter-spacing:0}.title-screen .mode-bottom>span{font:14px RPGPixel;color:#a9c6bd;letter-spacing:0;max-width:none}
.title-edition{position:absolute;bottom:18px;left:28px;font:12px RPGPixel;letter-spacing:2px;color:#c7e2d3;text-shadow:1px 1px #0b2027}.title-edition span{color:#f7d48d}
.title-screen .mode-join{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}.title-screen .mode-join input{font:16px RPGPixel;padding:8px;min-width:130px;flex:1;background:#08242d;color:#fff0ce}.title-screen .mode-join button{font:14px RPGPixel}.title-screen .form-error{font:15px/1.4 RPGPixel}
.fighter-card{background:#112c34;border-color:#567c77}.fighter-card.selected{border-color:#a9e6d4}.fighter-card.on-team{border-color:#f4ce83;background:#34463e}.fighter-card>strong{font:14px/1 RPGPixel}.fighter-card.on-team:after{font:10px RPGPixel;color:#ffdfa2;background:#263a38}
.panel-heading h2{font:700 clamp(24px,3vw,40px)/1 RPGPixel}.panel-heading .tiny-label,.roster-footer{font:12px RPGPixel}.filters button{font:13px RPGPixel;padding:5px 8px}.roster-total{font-size:36px}.roster-total>span{font-size:11px}.roster-panel{background:#0e2630ed;border-color:#66867b}
.fighter-preview h2{font:700 clamp(40px,5vw,72px)/.9 RPGPixel;color:#fff1be}.fighter-preview #selected-tagline{font:13px RPGPixel;color:#bbd8c5}.fighter-preview #selected-bio{font:17px/1.25 RPGPixel;color:#c9ded2}.preview-top .tiny-label,.form-badge,.element-badge{font:12px RPGPixel;letter-spacing:0}.stat>span,.stat>strong{font:13px RPGPixel}.type-matchup{font:15px/1.3 RPGPixel;color:#dfc99b}.signature strong{font:17px RPGPixel}.fighter-extra>.outline-button{font:14px RPGPixel}.team-builder{font:14px RPGPixel}.team-slots>button,.team-slots>span{font:14px RPGPixel;background:#163039}.team-buttons>button{font:16px RPGPixel}.roster{gap:7px}
.character-top,.stage-flow{font:14px RPGPixel}.back-stage>span,.stage-summary,.stage-flow>span{font:14px RPGPixel}.stage-intro h1{font:700 clamp(44px,5vw,76px)/1 RPGPixel;color:#fff0bf}.stage-intro .eyebrow{font:13px RPGPixel}.stage-intro-copy{font:17px RPGPixel}.stage-card h2{font:700 clamp(24px,2.5vw,36px)/1 RPGPixel;color:#fff0c5}.stage-card-type,.stage-card-number{font:12px RPGPixel}.stage-card-copy p{font:15px/1.2 RPGPixel}.stage-bottom{font:12px RPGPixel}
.battle-heading h1{font:700 26px/1 RPGPixel;color:#ffe2a0}.battle-heading .eyebrow{font:13px RPGPixel}.battle-tools button{font:15px RPGPixel}.hud{background:linear-gradient(#071c28f2,#071c28ad 75%,transparent);padding:12px 18px 24px}.hud-name strong{font:700 20px RPGPixel;color:#fff0c3}.hud-name>span{font:13px RPGPixel;max-width:none}.hud-bottom>span:first-child,.win-dots{font:14px RPGPixel}.energy-label{font:12px RPGPixel}.team-bench{font:12px RPGPixel;margin:4px 0}.team-bench span{padding:2px 5px;background:#18333c}.timer-hud>strong{font:700 36px/1 RPGPixel}.timer-hud>span,.timer-hud>small{font:12px RPGPixel}.health-track{height:14px;transform:none;clip-path:none;border:2px solid #d7d4ad;background:#173039}.health-track i{background:#74c6a1}.right-hud .health-track i{background:#b496cf}.energy-track{height:4px;transform:none;clip-path:none}.type-feedback{font:20px RPGPixel;top:34%}.battle-info,.battle-info #battle-tip{font:14px RPGPixel}.touch-controls .attack-pad button{font:24px RPGPixel;background:#15333c;border-color:#809e93}.touch-controls .attack-pad button>span{font:13px RPGPixel}.touch-controls .attack-pad button:last-child{font-size:16px}.glass-joystick{background:#14353d;border-color:#7fa69a}.joystick-knob{background:#79bfaa;border-color:#d1ebc0}
.ready-countdown>strong{font:700 90px RPGPixel;color:#ffe2a2}.ready-countdown>p:first-child,.ready-countdown h2{font:700 25px/1.2 RPGPixel}.ready-controls{font:17px/1.4 RPGPixel}.count-number{font-family:RPGPixel}.count-caption,.round-result-sub,.reward-chip{font:18px RPGPixel}.round-result{font:700 38px/1.2 RPGPixel}.replacement-picker{font:22px/1.3 RPGPixel}.replacement-picker button{font:700 21px RPGPixel;min-width:150px;background:#14343c;border-color:#aacdb9}.replacement-picker button span{font:16px RPGPixel}.replacement-picker canvas{width:110px;height:110px}.match-actions button{font:18px RPGPixel}
dialog{background:#102e36;border:3px solid #a5b59a;font:18px RPGPixel}dialog h2{font:700 32px RPGPixel;color:#ffe0a2}.dialog-heading .tiny-label{font:13px RPGPixel}.dialog-intro,.fine-print,.setting-row,.control-rules span{font:18px/1.4 RPGPixel}.control-rules strong{font:700 20px RPGPixel;color:#f9d08a}.move-row strong,.move-row p{font:18px/1.3 RPGPixel}.move-row kbd{font:15px RPGPixel}.slider-label{font:15px RPGPixel}.room-strip>#room-status{font:16px RPGPixel}.room-strip>#copy-room,.room-strip>.text-button{font:14px RPGPixel}.room-strip strong{font:18px RPGPixel}.selection-wait h2{font:700 48px RPGPixel}.selection-wait p{font:20px RPGPixel}.toast{font:18px RPGPixel}
@media(max-width:900px){.title-menu{width:45%;margin-right:4%}.title-screen .mode-intro h1{font-size:76px}.title-screen .mode-card-copy>strong{font-size:27px}.title-screen .mode-card-copy>span{font-size:14px}.title-screen .mode-bottom{flex-wrap:wrap;gap:8px}.title-screen .mode-intro .eyebrow{font-size:12px}.brand{font-size:19px}.nav-button{font-size:12px}.stage-card h2{font-size:25px}.stage-card-type,.stage-card-number{font-size:10px}.filters button{font-size:11px;padding:4px 6px}.panel-heading h2{font-size:28px}.fighter-card>strong{font-size:12px}.fighter-preview #selected-bio{font-size:15px}.type-matchup{font-size:13px}.hud-name strong{font-size:15px}.hud-name>span{font-size:11px}.hud-bottom>span:first-child,.win-dots{font-size:12px}.energy-label{font-size:10px}.team-bench{font-size:10px}.timer-hud>strong{font-size:28px}.timer-hud>span,.timer-hud>small{font-size:10px}.battle-tools button{font-size:13px}.battle-info,.battle-info #battle-tip{font-size:12px}}
@media(max-width:620px) and (orientation:portrait){
 .title-key-art{background-size:auto 62%;background-position:27% top;background-color:#0b2631}
 .title-screen:after{background:linear-gradient(0deg,#061e28 2%,#061e28ed 33%,#061e2844 55%,transparent 72%)}
 .title-menu{width:auto;max-width:none;margin:auto 25px 25px;padding:190px 0 12px;align-self:stretch}
 .title-screen .mode-intro{margin-bottom:10px}.title-screen .mode-intro .eyebrow{font-size:11px;letter-spacing:2px;margin-bottom:10px}
 .title-screen .mode-intro h1{font-size:55px;line-height:.85;letter-spacing:-1px}.title-screen .mode-intro h1 span{display:inline}.title-screen .mode-intro h1 span+span:before{content:' '}.title-screen .mode-intro>p:last-child{font-size:15px;margin-top:12px}
 .title-screen .mode-card{min-height:52px;padding:6px 0;gap:10px}.title-screen .mode-card-copy>strong{font-size:26px}.title-screen .mode-card-copy>span{font-size:14px}.title-screen .cpu-settings{margin-top:12px;font-size:15px;gap:6px 12px}.title-screen .cpu-settings select{font-size:15px;min-height:30px}.title-screen #cpu-note{font-size:12px}.title-screen .mode-bottom{margin-top:12px;gap:10px}.title-screen .mode-bottom>button{font-size:15px}.title-screen .mode-bottom>span{font-size:12px}.title-edition{font-size:10px;bottom:9px;left:25px;letter-spacing:1px}
 .panel-heading h2{font-size:25px}.panel-heading .tiny-label{font-size:10px}.roster-total{font-size:30px}.roster-total>span{font-size:8px}.fighter-card>strong{font:10px RPGPixel;flex-basis:12px}.fighter-card.on-team:after{font-size:7px}.preview-top .tiny-label,.form-badge,.element-badge{font:11px RPGPixel}.pixel-mode .fighter-preview h2{font:700 32px/.9 RPGPixel}.pixel-mode .selected-stats{margin-top:5px;gap:12px}.pixel-mode .stat>span,.pixel-mode .stat>strong{font:10px RPGPixel}.pixel-mode .type-matchup{font:11px/1.2 RPGPixel;margin-top:6px}.pixel-mode .fighter-extra>.outline-button{font:10px RPGPixel;padding:5px}.pixel-mode .fighter-extra{bottom:32px}.team-builder{font:11px RPGPixel}.team-slots>button,.team-slots>span{font:10px RPGPixel;min-height:30px}.team-buttons>button{font:13px RPGPixel;height:34px;min-height:34px}.back-stage>span,.stage-summary{font:11px RPGPixel}.stage-intro h1{font-size:38px}.stage-intro-copy{font:14px RPGPixel}.stage-card h2{font-size:25px}.stage-card-type,.stage-card-number{font-size:10px}.stage-bottom{font-size:10px}.battle-heading h1{font-size:22px}.battle-heading .eyebrow{font-size:11px}.battle-tools button{font:12px RPGPixel;padding:4px}.hud{padding:8px 8px 18px;gap:4px;grid-template-columns:1fr 38px 1fr}.hud-name strong{font-size:13px}.hud-name>span{display:none}.hud-bottom>span:first-child,.win-dots{font-size:10px}.team-bench{font-size:8px;gap:2px}.team-bench span{padding:1px 3px}.energy-label{font-size:9px}.timer-hud>span,.timer-hud>small{font-size:9px}.timer-hud>strong{font-size:26px}.type-feedback{font-size:16px}.touch-controls .attack-pad button{font-size:23px}.touch-controls .attack-pad button>span{font-size:11px}.touch-controls .attack-pad button:last-child{font-size:14px}.ready-countdown>strong{font-size:70px}.ready-countdown>p:first-child,.ready-countdown h2{font:700 20px RPGPixel}.ready-controls{font:13px/1.4 RPGPixel}.replacement-picker{font-size:17px}.replacement-picker button{font-size:17px;min-width:105px;padding:6px}.replacement-picker button span{font-size:13px}.replacement-picker canvas{width:78px;height:78px}.battle-info,.battle-info #battle-tip{font:10px RPGPixel}
}
@media(max-width:360px) and (orientation:portrait){.title-menu{margin-left:20px;margin-right:20px;padding-top:145px;margin-bottom:20px}.title-screen .mode-intro h1{font-size:46px}.title-screen .mode-intro>p:last-child{font-size:13px;margin-top:8px}.title-screen .mode-intro .eyebrow{font-size:10px;margin-bottom:7px}.title-screen .mode-card{min-height:45px}.title-screen .mode-card-copy>strong{font-size:23px}.title-screen .mode-card-copy>span{font-size:12px}.title-screen .cpu-settings{margin-top:8px}.title-screen #cpu-note{display:none}.title-screen .mode-bottom{margin-top:8px}.title-screen .mode-bottom>button{font-size:13px}.title-screen .mode-bottom>span{font-size:10px}.title-edition{left:20px;font-size:9px}}
@media(max-height:600px) and (orientation:landscape){
 .title-menu{width:44%;margin:auto 5% auto auto;padding:38px 0 12px}.title-screen .mode-intro{margin-bottom:7px}.title-screen .mode-intro .eyebrow,.title-screen .mode-intro>p:last-child{display:none}.title-screen .mode-intro h1{font-size:45px;line-height:.83}.title-screen .mode-intro h1 span{display:inline}.title-screen .mode-intro h1 span+span:before{content:' '}.title-screen .mode-options{gap:2px}.title-screen .mode-card{min-height:41px;padding:4px;gap:7px}.title-screen .mode-card-copy>strong{font-size:24px}.title-screen .mode-card-copy>span{display:none}.title-screen .cpu-settings{margin-top:7px;gap:5px 8px;font-size:13px}.title-screen .cpu-settings select{min-height:25px;font-size:13px;padding:2px 6px}.title-screen #cpu-note{display:none}.title-screen .mode-bottom{margin-top:8px;gap:6px}.title-screen .mode-bottom>button{font-size:13px}.title-screen .mode-bottom>span{font-size:11px}.title-edition{font-size:9px;bottom:7px;left:18px}.title-screen .mode-join{margin-top:7px}.title-screen .mode-join input{height:27px;min-width:100px;font-size:13px}.title-screen .mode-join button{font-size:12px;min-height:27px;padding:4px 6px}
 .brand{font-size:16px}.nav-button{font-size:11px}.panel-heading h2{font-size:23px}.fighter-card>strong{font:9px RPGPixel;flex-basis:10px}.fighter-card.on-team:after{font-size:6px}.filters,.roster-footer{display:none}.pixel-mode .fighter-preview h2{font:700 26px RPGPixel}.pixel-mode .stat>span,.pixel-mode .stat>strong{font:9px RPGPixel}.pixel-mode .type-matchup{font:9px/1.2 RPGPixel}.pixel-mode .fighter-extra>.outline-button{font:8px RPGPixel}.team-slots>button,.team-slots>span{font:9px RPGPixel}.team-buttons>button{font:11px RPGPixel}.stage-intro h1{font-size:30px}.stage-card h2{font-size:22px}.stage-card-type,.stage-card-number{font-size:9px}.stage-flow>span,.back-stage>span{font-size:11px}.stage-bottom{font-size:10px}.battle-heading h1{font-size:20px}.battle-tools button{font-size:12px;min-height:26px}.hud{padding:5px 8px 12px;gap:8px}.hud-name strong{font-size:14px}.hud-name>span{font-size:10px}.hud-bottom>span:first-child,.win-dots{font-size:10px}.energy-label{font-size:9px}.team-bench{font-size:8px;margin:2px 0}.team-bench span{padding:1px 3px}.timer-hud>span,.timer-hud>small{font-size:9px}.timer-hud>strong{font-size:24px}.health-track{height:10px}.type-feedback{font-size:15px}.touch-controls .attack-pad button{font-size:20px}.touch-controls .attack-pad button>span{font-size:10px}.touch-controls .attack-pad button:last-child{font-size:12px}.ready-countdown>strong{font-size:48px}.ready-countdown>p:first-child,.ready-countdown h2{font:700 17px RPGPixel}.ready-controls{font:12px/1.3 RPGPixel}.replacement-picker{font-size:16px}.replacement-picker button{font-size:16px;min-width:110px}.replacement-picker canvas{width:62px;height:62px}.replacement-picker button span{font-size:12px}
}
/* The title header floats above the cover, rather than inheriting the grid row height. */
body[data-screen='mode'] header{height:72px;margin:0 3vw;align-items:center}
.touch-controls .attack-pad button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1}
.touch-controls .attack-pad button>span{display:block;line-height:1}
@media(max-width:900px){body[data-screen='mode'] header{height:60px}}
@media(max-width:620px) and (orientation:portrait){body[data-screen='mode'] header{height:54px}.pixel-mode .preview-art{inset:16px 0 76px}.touch-controls .attack-pad button:last-child{font-size:12px}}
@media(max-height:600px) and (orientation:landscape){body[data-screen='mode'] header{height:46px}.touch-controls{background:none;border:0;padding:0;left:20px;right:20px;bottom:10px;z-index:7;pointer-events:none}.touch-controls .joystick-wrap,.touch-controls .attack-pad{pointer-events:auto}.touch-controls .attack-pad button>span{font-size:9px}.touch-controls .attack-pad button:last-child{font-size:10px}.touch-controls .attack-pad{grid-template-columns:repeat(2,49px)}}