@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#0b0c12;--panel:#12141d;--line:#292c36;--muted:#8a8e9d;--white:#f4f4ed;--acid:#c9ff47;--fighter:#ffab43;font-family:Barlow,Arial,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white)}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--acid);outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}.topbar{height:94px;padding:0 4.5%;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:70px}.brand{display:flex;align-items:center;gap:9px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:30px;line-height:.8;font-weight:900;font-style:italic;letter-spacing:-.8px}.brand-mark{font-size:55px;color:var(--acid);transform:skew(-12deg)}.brand-rift{color:var(--acid);margin-left:4px}.brand small{display:block;font:600 10px Barlow,Arial,sans-serif;font-style:normal;letter-spacing:4.1px;margin-top:9px}.topbar nav{display:flex;align-self:stretch;gap:36px}.nav-button{border:0;background:none;font-size:13px;font-weight:700;letter-spacing:1px;padding:0 2px;position:relative;color:var(--muted)}.nav-button.active{color:var(--white)}.nav-button.active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--acid)}.nav-button span{margin-left:8px;color:var(--acid)}.top-tools{margin-left:auto;display:flex;gap:24px;align-items:center}.build-tag{font-size:11px;letter-spacing:2px;border:1px solid #343740;border-radius:4px;padding:6px 9px;color:#b3b6c2}.icon-button{background:transparent;border:0;font-size:25px;padding:7px;display:flex;align-items:center;gap:6px}.icon-button span{font-size:10px;color:var(--muted)}#lobby{max-width:1600px;padding:36px 4.5% 0;margin:auto}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2.7px;color:var(--muted)}.eyebrow>span{display:inline-block;width:7px;height:7px;vertical-align:1px;background:var(--acid);margin-right:6px}.selection-header h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(32px,3.3vw,51px);font-weight:800;letter-spacing:-.5px;margin:7px 0 0;line-height:1}em{font-style:normal;color:var(--acid)}.step-label{display:flex;align-items:center;gap:13px;font-size:12px;font-weight:700;letter-spacing:1px}.step-label b{font-size:35px;color:var(--acid);font-weight:500;font-family:'Barlow Condensed',Impact,sans-serif}.step-label small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.fighter-showcase{height:355px;position:relative;overflow:hidden;border:1px solid #333638;border-radius:6px;background:#161b20}.showcase-scenery{position:absolute;inset:0;background:linear-gradient(90deg,#15171cf2,#15171c83 55%,#111219cc),url('assets/sky.webp') center 46%/cover;opacity:.62;filter:saturate(.6)}.showcase-grid{position:absolute;inset:0;background:linear-gradient(110deg,#11131bcc,transparent 70%),repeating-linear-gradient(115deg,transparent 0,transparent 100px,#d9e0e207 100px,#d9e0e207 101px)}.giant-kanji{position:absolute;left:46%;top:-78px;font-size:410px;font-weight:900;line-height:1.3;color:var(--fighter);opacity:.08;user-select:none}.fighter-copy{position:relative;z-index:2;margin:32px;width:40%}.series-label{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--fighter);display:inline-block;padding:5px 8px;border:1px solid color-mix(in srgb,var(--fighter),transparent 65%);border-radius:2px}.fighter-number{display:inline-block;color:#959999;font:600 12px 'Barlow Condensed',sans-serif;letter-spacing:2px;margin-left:14px}.fighter-copy h2{font:900 clamp(60px,7vw,100px)/.95 'Barlow Condensed',Impact,sans-serif;font-style:italic;letter-spacing:-1px;margin:10px 0}.fighter-copy p{max-width:325px;color:#b8bdc8;font-size:14px;line-height:1.5;margin:12px 0}.fighter-tags{display:flex;gap:6px}.fighter-tags span{background:#ffffff0a;border:1px solid #ffffff12;color:#d5d8dd;font-size:10px;font-weight:700;letter-spacing:1px;padding:4px 7px}.fighter-stats{display:flex;gap:24px;margin-top:22px}.stat-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#9a9eaa;margin-bottom:6px}.stat-track{display:flex;gap:3px}.stat-track i{width:14px;height:4px;background:#ffffff1a;transform:skew(-20deg)}.stat-track i.on{background:var(--fighter)}.fighter-art-wrap{position:absolute;width:45%;height:120%;left:34%;bottom:-12%;pointer-events:none}.hero-orbit{width:290px;height:290px;border:1px solid #ffffff0d;position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}.hero-orbit:after{content:'';position:absolute;inset:-33px;border:1px dashed #ffffff0d;border-radius:50%}.hero-burst{position:absolute;inset:0;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--fighter),transparent 72%),transparent 64%)}#hero-art{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 16px #0008)}.player-sticker{position:absolute;bottom:16%;left:54%;transform:rotate(-4deg);background:var(--acid);color:#0b0c12;padding:6px 12px;font-weight:900;font-size:17px;box-shadow:5px 5px 0 #050608}.player-sticker span{font-size:9px;letter-spacing:1px;border-left:1px solid #14210066;margin-left:7px;padding-left:8px;vertical-align:2px}.move-feature{position:absolute;z-index:3;right:28px;top:50%;width:190px;transform:translateY(-50%)}.move-feature .eyebrow{font-size:9px;letter-spacing:2px}.move-feature h3{font:700 28px/.98 'Barlow Condensed',Impact,sans-serif;letter-spacing:.5px;margin:9px 0 13px;text-transform:uppercase}.move-feature p{font-size:12px;color:#969eac;line-height:1.5;max-width:155px}.keycap{display:inline-flex;min-width:22px;height:22px;align-items:center;justify-content:center;background:#1c2029;border:1px solid #3a3f4b;border-bottom-width:2px;border-radius:3px;color:#e0e3e7;padding:0 5px;font:700 11px Barlow,Arial,sans-serif}.roster{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:13px 0 29px}.fighter-card{position:relative;overflow:hidden;height:119px;border:1px solid #2b2e37;border-radius:4px;background:linear-gradient(130deg,#20212b,#141620);text-align:left;padding:0;transition:transform .18s,border-color .18s}.fighter-card:hover{border-color:var(--card-color);transform:translateY(-3px)}.fighter-card.selected{border:2px solid var(--acid);background:linear-gradient(130deg,#38402b,#20252a)}.fighter-card canvas{position:absolute;width:135px;height:155px;top:-15px;right:-18px;filter:drop-shadow(-6px 5px 6px #0009);transition:transform .2s}.fighter-card:hover canvas{transform:scale(1.05)}.fighter-card:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0c0e16 0%,transparent 80%);pointer-events:none}.fighter-card.selected:after{background:linear-gradient(0deg,#1b2713 0%,transparent 85%)}.fighter-card .card-index{position:absolute;z-index:1;top:10px;left:11px;font-size:10px;color:#9a9ead;font-weight:600}.fighter-card .card-name{position:absolute;bottom:12px;left:12px;z-index:1;font:800 24px/1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase}.fighter-card .card-series{position:absolute;bottom:39px;left:12px;z-index:1;font-size:8px;letter-spacing:1px;color:#b1b5bf;text-transform:uppercase}.fighter-card .selected-tag{display:none}.fighter-card.selected .selected-tag{display:block;position:absolute;right:0;top:0;background:var(--acid);color:#0a1207;font-size:10px;font-weight:800;padding:3px 6px;z-index:2}.battle-setup{display:grid;grid-template-columns:1.3fr 1fr;gap:32px}.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-label h3{font-size:11px;letter-spacing:1.8px;margin:0;font-weight:700}.section-label>span{font-size:10px;color:#6f7483;font-weight:600;letter-spacing:1px}.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stage-card{height:133px;position:relative;overflow:hidden;padding:0;border-radius:4px;border:1px solid #33343e;background:#252935;text-align:left}.stage-card img{width:100%;height:100%;object-fit:cover;opacity:.68;transition:transform .3s,opacity .3s}.stage-card:hover img{transform:scale(1.07);opacity:1}.stage-card:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#090c15ee,transparent 75%)}.stage-card.selected{border:2px solid var(--acid)}.stage-card.selected img{opacity:1}.stage-name{position:absolute;bottom:13px;left:13px;font:700 19px/1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;z-index:1}.stage-sub{position:absolute;bottom:36px;left:13px;color:#d1d5db;font-size:9px;letter-spacing:1px;z-index:1;text-transform:uppercase}.stage-check{display:none;position:absolute;top:8px;right:8px;background:var(--acid);color:#101605;border-radius:50%;width:17px;height:17px;text-align:center;font-size:11px;z-index:1}.stage-card.selected .stage-check{display:block}.rules-panel{padding-left:28px;border-left:1px solid var(--line)}.setup-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;gap:15px;font-size:12px;color:#9da2af}.segmented{display:flex;padding:3px;background:#171923;border:1px solid #2b2e38;border-radius:3px;gap:3px}.segmented button{background:none;border:0;padding:6px 11px;border-radius:2px;font-size:10px;font-weight:700;letter-spacing:.6px;color:#999fab}.segmented button.selected{background:#c9ff471c;color:var(--acid)}select{background:#191b25;border:1px solid #30333e;border-radius:3px;color:#e8e9ed;padding:7px 30px 7px 10px;min-width:175px;font-size:12px}select:disabled{opacity:.45}.rules-line{display:flex;gap:15px;font-size:9px;color:#828a98;letter-spacing:.6px;margin-top:13px}.launch-row{display:flex;gap:20px;justify-content:space-between;align-items:center;margin:26px 0 25px;padding-top:24px;border-top:1px solid var(--line)}.control-preview{display:flex;align-items:center;gap:5px}.control-preview>span:not(.keycap){font-size:9px;margin:0 16px 0 2px;color:#9ca1ad;font-weight:600;letter-spacing:.8px}.control-preview button{background:none;border:0;color:#acb1ba;font-size:9px;letter-spacing:.5px;padding:5px 0}.fight-button{height:58px;min-width:290px;background:var(--acid);color:#141c09;border:0;border-radius:3px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;box-shadow:0 4px 25px #c9ff4710;transition:background .2s,transform .2s}.fight-button:hover{background:#dcff8a;transform:translateY(-2px)}.fight-button span{font:800 25px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px}.fight-button b{font-size:29px}footer{border-top:1px solid #222530;display:flex;justify-content:space-between;gap:20px;padding:19px 0 23px;font-size:9px;letter-spacing:1.1px;color:#6f7484;font-weight:600}footer i{font-style:normal;color:#424653;margin:0 6px}#match{position:relative;height:calc(100dvh - 94px);background:#05070c;display:flex;align-items:center;justify-content:center;overflow:hidden}#game{display:block;width:100%;height:100%;object-fit:contain;outline:none;touch-action:none}.match-top{position:absolute;top:17px;left:23px;right:23px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font-size:11px;letter-spacing:2px;color:#dce4f2;text-shadow:0 1px 6px #000}.match-button{pointer-events:auto;background:#0b1028b0;border:1px solid #ffffff40;border-radius:4px;padding:7px 13px;font-size:18px;backdrop-filter:blur(10px)}.match-button span{font-size:10px;letter-spacing:1px;margin-left:7px}.match-bottom-hint{position:absolute;bottom:7px;color:#949eae;font-size:9px;letter-spacing:1px;pointer-events:none}dialog{background:#141722;color:#f4f4ed;border:1px solid #404754;border-radius:8px;padding:40px;max-width:650px;width:calc(100% - 32px);max-height:90dvh;box-shadow:0 30px 100px #000c}dialog::backdrop{background:#03050ccb;backdrop-filter:blur(12px)}dialog h2{font:800 60px/.95 'Barlow Condensed',Impact,sans-serif;margin:16px 0 20px;letter-spacing:-.5px}dialog p{font-size:14px;line-height:1.6;color:#a9b0bf}dialog .close-dialog[aria-label]{position:absolute;top:12px;right:15px;font-size:29px;border:0;background:none;color:#9ea6b7}.controls-table{border-top:1px solid #323746;margin:23px 0 16px}.controls-table>div{display:flex;border-bottom:1px solid #262c3a;align-items:center;gap:15px;padding:8px 0;font-size:12px}.controls-table b{min-width:98px;color:var(--acid);font-size:11px}.controls-table span{color:#c5cbd7}.secondary-controls{font-size:12px!important}.primary-button,.secondary-button{display:block;width:100%;border:0;border-radius:4px;padding:16px;font:800 21px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.5px;margin-top:13px}.primary-button{background:var(--acid);color:#101707}.secondary-button{background:#232939;color:#c7cddb;font-size:17px}#pause-dialog,#result-dialog{text-align:center;max-width:460px}#result-stats{display:flex;justify-content:center;gap:35px;margin:22px 0}#result-stats b{display:block;font:700 35px 'Barlow Condensed',sans-serif;color:var(--acid)}#result-stats span{font-size:10px;color:#9ea7b7;letter-spacing:1px}#touch-controls{display:none;position:absolute;inset:auto 12px 20px;justify-content:space-between;pointer-events:none;gap:20px}.touch-direction,.touch-actions{display:flex;align-items:flex-end;gap:7px}.touch-actions{flex-wrap:wrap;max-width:210px;justify-content:flex-end}#touch-controls button{pointer-events:auto;touch-action:none;user-select:none;width:48px;height:48px;border:1px solid #fff5;border-radius:50%;font-size:9px;background:#10182ab8;backdrop-filter:blur(5px);font-weight:800}.touch-direction button{font-size:17px;width:50px;height:50px}#touch-controls button.pressed{background:#c9ff4770}.loading-pulse{animation:pulse 1s infinite alternate}@keyframes pulse{from{opacity:.4}to{opacity:1}}@media(min-width:1600px){.fighter-showcase{height:395px}.fighter-card{height:130px}.stage-card{height:155px}}@media(max-width:1100px){.topbar{gap:35px;padding:0 3%}#lobby{padding:27px 3% 0}.fighter-copy{margin:27px;width:42%}.move-feature{width:145px;right:20px}.fighter-art-wrap{left:36%;width:46%}.fighter-copy h2{font-size:76px}.fighter-copy p{max-width:260px}.fighter-stats{gap:16px}.battle-setup{gap:22px;grid-template-columns:1.1fr 1fr}.rules-panel{padding-left:20px}.control-preview>span:not(.keycap){margin-right:8px}.control-preview button{display:none}.fight-button{min-width:235px}.roster{gap:7px}.fighter-card .card-name{font-size:21px}.fighter-card canvas{right:-34px}.rules-line{gap:9px;font-size:8px}}@media(max-width:760px){.topbar{height:73px;padding:0 5%;gap:20px}.brand{font-size:24px}.brand-mark{font-size:42px}.brand small{font-size:7px;letter-spacing:3.2px}.topbar nav{gap:12px;margin-left:auto}.nav-button{font-size:10px}.nav-button:first-child{display:none}.top-tools{margin-left:0;gap:4px}.build-tag{display:none}.icon-button{font-size:22px}.icon-button span{display:none}#lobby{padding:24px 5% 0}.selection-header{margin-bottom:20px}.selection-header h1{font-size:34px}.eyebrow{font-size:9px;letter-spacing:1.6px}.step-label{display:none}.fighter-showcase{height:325px}.fighter-copy{margin:22px;width:53%}.fighter-copy h2{font-size:68px;margin-top:17px}.fighter-copy p{font-size:12px;max-width:190px}.fighter-tags span{font-size:8px}.fighter-number{display:none}.series-label{font-size:9px}.fighter-art-wrap{left:40%;width:64%;bottom:-8%;height:106%}.giant-kanji{left:35%;font-size:350px;top:-20px}.move-feature{display:none}.fighter-stats{gap:14px;margin-top:21px}.stat-label{font-size:8px}.stat-track{gap:2px}.stat-track i{width:9px}.player-sticker{bottom:14%;left:45%;font-size:13px;white-space:nowrap;padding:5px 7px}.player-sticker span{font-size:7px}.roster{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:25px}.fighter-card{height:105px}.fighter-card canvas{right:-15px;width:115px;height:133px}.fighter-card .card-name{font-size:23px}.fighter-card .card-series{font-size:7px}.battle-setup{display:flex;flex-direction:column;gap:25px}.rules-panel{padding:0;border:0}.stage-card{height:115px}.stage-name{font-size:17px;bottom:10px;left:9px}.stage-sub{font-size:7px;bottom:31px;left:9px}.section-label h3{font-size:10px}.setup-row{font-size:13px}.segmented button{font-size:10px;padding:7px 10px}.rules-line{font-size:10px;gap:20px;justify-content:space-between;margin-top:20px}.launch-row{margin:23px 0 22px;padding-top:20px}.control-preview{display:none}.fight-button{width:100%;height:60px}.fight-button span{font-size:28px}footer{font-size:8px;flex-wrap:wrap;gap:10px}footer span:nth-child(2){display:none}#match{height:calc(100dvh - 73px)}.match-top{top:9px;left:10px;right:10px;font-size:8px}.match-button{padding:5px 9px}.match-button span{display:none}.match-bottom-hint{display:none}dialog{padding:27px}dialog h2{font-size:48px}#touch-controls{display:flex}}@media(pointer:coarse){#touch-controls{display:flex}.match-bottom-hint{display:none}}@media(max-height:560px) and (orientation:landscape){.topbar{height:55px}.topbar .brand small{display:none}#match{height:calc(100dvh - 55px)}#touch-controls{bottom:8px}.touch-actions{max-width:270px}#touch-controls button{width:42px;height:42px}.match-top{top:5px}.match-bottom-hint{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep game setup and reference controls legible at compact sizes. */
.eyebrow,.series-label,.fighter-number,.fighter-tags span,.stat-label,.card-index,.card-series,.section-label h3,.section-label>span,.stage-sub,.setup-row,.segmented button,select,.rules-line,.control-preview>span:not(.keycap),.control-preview button,.keycap,footer,.build-tag{font-size:12px!important}
.step-label small,.move-feature .eyebrow,.icon-button span{font-size:11px}
.fighter-tags{flex-wrap:wrap}.fighter-stats{margin-top:16px}.fighter-copy p{margin:10px 0}.rules-line{letter-spacing:0;gap:12px}.segmented button{letter-spacing:0;padding:6px 9px}.stage-sub{letter-spacing:.25px}.fighter-card .card-series{letter-spacing:.1px}.control-preview>span:not(.keycap){letter-spacing:0;margin-right:10px}
@media(max-width:1250px){.control-preview>span:not(.keycap){font-size:11px!important}.control-preview button{display:none}.rules-line{font-size:10px!important}.stage-sub{font-size:10px!important}}
@media(max-width:760px){.fighter-showcase{height:345px}.fighter-copy{margin:20px}.fighter-tags span{font-size:10px!important;padding:4px 5px}.stat-label{font-size:10px!important}.fighter-card .card-series{font-size:10px!important}.rules-line{font-size:11px!important}.stage-name{font-size:16px}.section-label h3{font-size:11px!important}.step-label small{font-size:10px}.controls-table>div{font-size:13px}.controls-table b{font-size:12px}.match-bottom-hint{display:none}}

/* Spectator and practice tools stay outside the combat viewport. */
#match{flex-direction:column;justify-content:flex-start}#arena-wrap{position:relative;width:100%;flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}#practice-panel{width:100%;flex:none;max-height:36dvh;overflow:auto;background:#111521;border-top:1px solid #343e50;padding:12px 22px 10px}.practice-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.practice-toolbar>strong{font:800 18px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;color:var(--acid);margin-right:5px}.practice-toolbar label,.demo-content>label{display:flex;align-items:center;gap:8px;font-size:12px;color:#b7bfd0}.practice-toolbar select,.demo-content select{min-width:0;font-size:12px!important;padding:6px 22px 6px 8px}.practice-check{cursor:pointer}.practice-check input{accent-color:var(--acid);width:16px;height:16px;margin:0}.practice-toolbar button{font-size:12px;font-weight:700;padding:8px 10px;border:1px solid #3c465b;background:#242d3f;border-radius:3px;white-space:nowrap}.practice-toolbar button:hover,#demo-buttons button:hover{border-color:var(--acid);color:var(--acid)}.move-readout{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px;padding-top:9px;border-top:1px solid #272f40;font-size:13px;color:#d8dfeb}.move-readout span:last-child{text-align:right}.move-readout b{color:var(--acid);margin-right:7px}.move-readout span:last-child b{color:#ff8596}#move-lab{margin-top:9px;border-top:1px solid #272f40;padding-top:8px}#move-lab summary{cursor:pointer;color:var(--acid);font-size:12px;font-weight:800;letter-spacing:1px;padding:3px 0}#move-lab summary span{color:#919db3;font-size:12px;font-weight:400;letter-spacing:0;margin-left:10px}.demo-content{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:13px}.demo-content p{margin:0;font-size:12px;line-height:1.4;color:#919db3;width:100%}#demo-buttons{display:flex;flex-wrap:wrap;gap:6px}#demo-buttons button{font-size:12px;line-height:1.35;padding:8px 10px;background:#1d2536;border:1px solid #35415a;border-radius:3px;text-align:left;max-width:190px}#demo-buttons button b{display:block;font-size:11px;color:#90a4c5}#demo-buttons button[data-move="ultimate"]{color:var(--acid);border-color:#63783a}#match.spectating #touch-controls,#match.spectating .match-bottom-hint{display:none}#modes{display:grid;grid-template-columns:repeat(2,1fr);min-width:235px}.mode-description{font-size:12px;line-height:1.45;color:#97a3b7;margin:9px 0 11px}.practice-toolbar button:focus-visible,#move-lab summary:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
@media(max-width:760px){#practice-panel{padding:9px 12px;max-height:39dvh}.practice-toolbar{gap:8px}.practice-toolbar>strong{width:100%;font-size:16px}.practice-toolbar select{max-width:146px}.move-readout{font-size:12px;gap:8px}.move-readout b{display:block;margin-bottom:3px}#move-lab summary span{display:block;margin:4px 0 0}.demo-content{align-items:flex-start}#demo-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}#demo-buttons button{font-size:11px;padding:7px}#demo-buttons button b{font-size:10px}#modes{min-width:225px}}
@media(max-height:560px) and (orientation:landscape){#practice-panel{max-height:33dvh;padding:6px 12px}.practice-toolbar>strong{width:auto}.practice-toolbar{gap:6px}.practice-toolbar label,.practice-toolbar button{font-size:11px}.practice-toolbar select{padding:4px}.move-readout{margin-top:5px;padding-top:5px}#move-lab{margin-top:5px;padding-top:5px}}

.roster{grid-template-columns:repeat(9,minmax(0,1fr))}.fighter-card{height:120px}.fighter-card canvas{right:-38px}.fighter-card .card-name{font-size:23px}.fighter-card .card-series{font-size:10px!important}.stages{grid-template-columns:repeat(4,minmax(0,1fr))}.stage-card{height:126px}#modes button[data-mode="online"]{grid-column:1/-1;color:var(--acid);border-top:1px solid #424a3a}#network-status{font-size:12px;letter-spacing:0;background:#101827cc;border:1px solid #59677888;border-radius:4px;padding:6px 10px}.match-top{flex-wrap:wrap;gap:8px}.online-close{position:absolute;right:15px;top:10px;font-size:30px;background:none;border:0;color:#a5b1c8}#online-dialog{max-width:560px}.room-join{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:22px}.room-join label{grid-column:1/-1;font-size:14px;color:#b6c2d8}.room-join input{width:100%;min-width:0;background:#0d1321;border:1px solid #46516a;color:var(--acid);border-radius:4px;padding:13px;font:700 21px monospace;letter-spacing:3px}.room-join button{background:#283850;border:1px solid #506281;border-radius:4px;font-size:14px;font-weight:800;padding:10px 20px}#room-details{text-align:center;border:1px solid #3c4c38;padding:20px;border-radius:5px;margin-top:20px}#room-details>span{font-size:12px;color:#9caf99;letter-spacing:2px}#room-code-display{display:block;font:800 40px monospace;letter-spacing:7px;color:var(--acid);margin:12px 0}#online-message{color:#d9ecaa;min-height:20px}.online-note{font-size:12px!important;color:#8696b0!important}#disconnect-dialog{max-width:500px}#disconnect-dialog h2{font-size:50px}
@media(max-width:1150px){.roster{grid-template-columns:repeat(5,minmax(0,1fr))}.fighter-card canvas{right:-12px}.stages{grid-template-columns:repeat(3,minmax(0,1fr))}.battle-setup{grid-template-columns:1.2fr 1fr}}
@media(max-width:760px){.roster{grid-template-columns:repeat(3,minmax(0,1fr))}.stages{grid-template-columns:repeat(2,minmax(0,1fr))}.fighter-card{height:110px}.stage-card{height:116px}#network-status{font-size:10px;margin:auto;padding:4px;order:4}#room-code-display{font-size:29px;letter-spacing:4px}.fighter-copy h2{font-size:61px}.fighter-card .card-name{font-size:22px}}
/* Leave the center clear for the match timer. */
.match-top{justify-content:flex-start}#match-controls{margin-left:auto}#match-stage{max-width:24%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#network-status{position:absolute;left:0;top:45px;max-width:46%;line-height:1.4}input:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
@media(max-width:760px){#match-stage{max-width:28%}#network-status{top:31px;margin:0;max-width:42%;font-size:9px}}

/* Awakening update: twelve fighters, with readable roster cards. */
.roster{grid-template-columns:repeat(6,minmax(0,1fr))}.fighter-card canvas{right:-12px}.move-feature{top:24px;transform:none;width:210px}.form-preview{border-top:1px solid #ffffff26;padding-top:12px;margin-top:14px}.form-preview>span{font-size:12px;font-weight:700;color:var(--acid);letter-spacing:1px}.form-preview strong{display:block;font:700 22px 'Barlow Condensed',Impact,sans-serif;margin-top:5px}.form-preview p{margin:6px 0;font-size:12px}.form-preview small{font-size:12px;color:#bac5d6}.form-preview p{max-width:190px}.practice-check input{accent-color:var(--acid)}
@media(max-width:1100px){.move-feature{width:155px;right:17px}.move-feature h3{font-size:24px}.form-preview p{font-size:12px}.form-preview{margin-top:8px;padding-top:8px}.fighter-copy{width:38%}}
@media(max-width:760px){.roster{grid-template-columns:repeat(3,minmax(0,1fr))}.fighter-card canvas{right:-12px}.fighter-copy{width:53%}.touch-actions{max-width:290px}#touch-controls button{width:47px;height:47px;font-size:9px}}

#story-dialog{width:min(850px,92vw);max-width:850px}#story-chapters details{border-top:1px solid #343b4d;padding:16px 0}#story-chapters summary{font:700 21px 'Barlow Condensed',Impact,sans-serif;cursor:pointer;color:var(--acid)}#story-chapters p{font-size:16px;line-height:1.75;color:#ccd4e3;white-space:pre-line}#story-close{position:absolute;right:15px;top:10px;font-size:30px;background:none;border:0}#story-button{white-space:nowrap}.topbar nav{gap:24px}@media(max-width:760px){.topbar nav{gap:10px}.topbar{gap:12px}#howto{display:none}#story-button{font-size:10px}}
.story-timeline{overflow-x:auto;margin:18px 0}.story-timeline table{width:100%;min-width:590px;border-collapse:collapse;font-size:14px;line-height:1.6}.story-timeline th,.story-timeline td{text-align:left;vertical-align:top;padding:12px;border:1px solid #343b4d}.story-timeline th{color:var(--acid);background:#171e2a}.story-timeline td{color:#ccd4e3}.story-timeline td:first-child{width:23%;font-weight:700}

.controller-bar{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;border-bottom:1px solid #343b4d;padding:12px 0;color:#ced8e8;font-size:14px}.controller-bar strong{color:var(--acid);font-size:14px;letter-spacing:.08em}.controller-menu-hint{margin-left:auto;color:#aab7c9}.controller-rumble{display:flex;align-items:center;gap:10px;margin:18px 0;font-size:16px}.controller-rumble input{accent-color:var(--acid);width:18px;height:18px}.controller-navigation :is(button,select,input,summary):focus{outline:3px solid #c9ff47;outline-offset:4px}.controller-match-status{position:absolute;left:20px;bottom:30px;color:#bcd8e9;font-size:13px;pointer-events:none}.roster{grid-template-columns:repeat(7,minmax(0,1fr))}@media(max-width:900px){.roster{grid-template-columns:repeat(4,minmax(0,1fr))}.controller-menu-hint{margin-left:0}}@media(max-width:600px){.roster{grid-template-columns:repeat(3,minmax(0,1fr))}.controller-match-status{bottom:8px;font-size:12px}.controller-menu-hint{font-size:13px}}

.story-mode-link{display:flex;align-items:center;color:#d4ff90;font-size:12px;font-weight:800;letter-spacing:1px;white-space:nowrap}@media(max-width:600px){.story-mode-link{font-size:9px;max-width:60px;white-space:normal}.topbar{gap:12px}.topbar nav{gap:10px}}

#demo-beam{background:#292039;border:1px solid #77618d;border-radius:4px;padding:10px 16px;color:#ecd9ff;font-size:12px;font-weight:700}#demo-beam:disabled{cursor:default;opacity:.4}#beam-help{font-size:12px;color:#b5adc6;margin:6px 0 0}

/* Invite rooms and open challenges share the existing online connection flow. */
#online-dialog{max-width:660px;padding:30px}#online-dialog h2{font-size:50px;margin:12px 0}#online-dialog>p{margin:10px 0}.online-fighter{font-size:11px!important;letter-spacing:.5px;color:#d2e6b4!important;border-left:2px solid var(--acid);padding:6px 10px;background:#c9ff4707}
.room-host-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.room-host{border:1px solid #46536b;background:#1b2333;border-radius:5px;padding:17px;text-align:left;color:#f0f3f9}.room-host strong{display:flex;justify-content:space-between;gap:10px;font:800 22px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.4px}.room-host small{display:block;color:#adb9cb;font-size:12px;margin-top:7px;line-height:1.4}.room-host.open-host{border-color:#96ba45;background:linear-gradient(120deg,#26351a,#19241d)}.open-host strong{color:var(--acid)}.room-host:hover{border-color:var(--acid);background:#283528}#online-dialog button:focus-visible{outline:2px solid var(--acid);outline-offset:3px}#online-dialog button:disabled{opacity:.45;cursor:wait}
#online-dialog .room-join{margin-top:18px}#online-dialog .room-join label{font-size:12px}#online-dialog .room-join input{font-size:18px;padding:10px 12px}
#room-browser{margin-top:23px;border-top:1px solid #354052;padding-top:18px}.room-browser-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.room-browser-heading>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.room-browser-heading h3{font:800 20px 'Barlow Condensed',Impact,sans-serif;margin:0}.room-browser-heading span{font-size:10px;letter-spacing:.5px;color:var(--acid)}.room-refresh{background:none;border:1px solid #41506a;border-radius:4px;padding:8px;color:#bccae1;font-size:11px;white-space:nowrap}#room-browser-message{border:1px dashed #3b4960;background:#111827;padding:19px;text-align:center;font-size:13px;margin:12px 0}#open-room-list{padding:0;margin:12px 0 0;list-style:none;max-height:210px;overflow-y:auto;scrollbar-color:#536344 #121924}.open-room-row{display:flex;gap:12px;align-items:center;padding:10px;background:#0f1623;border:1px solid #2f3e50;border-radius:4px;margin-top:7px}.open-room-row:first-child{margin-top:0}.open-room-row img{width:80px;height:56px;object-fit:cover;border-radius:3px;flex-shrink:0}.open-room-row>div{min-width:0;flex:1}.open-room-row strong{display:block;font:700 23px 'Barlow Condensed',Impact,sans-serif}.open-room-row span{display:block;margin-top:4px;font-size:11px;color:#9fb0c8;line-height:1.4}.open-room-row button{border:1px solid #6c8742;border-radius:3px;background:#27371c;color:var(--acid);padding:12px;font-weight:800;font-size:12px;white-space:nowrap}.open-room-row button:hover{background:#3a5128}.room-refresh-note{font-size:11px!important;margin:10px 0 0;color:#8a9ab1!important}#online-message:empty{display:none}
@media(max-width:520px){#online-dialog{padding:23px 18px}#online-dialog h2{font-size:44px}.room-host{padding:12px}.room-host strong{font-size:19px}.room-host small{font-size:11px}.room-host strong span{display:none}.online-fighter{line-height:1.6}.open-room-row{gap:9px;padding:8px}.open-room-row img{width:55px;height:50px}.open-room-row strong{font-size:21px}.open-room-row button{padding:10px}.room-browser-heading>div{gap:5px}.room-browser-heading h3{font-size:18px}}

/* Battle finishers keep their action readable without covering either title lane. */
.finisher-preview{border-top:1px solid #ffffff20;margin-top:10px;padding-top:9px}.finisher-preview span{display:block;color:#f3c6ff;font-size:11px;letter-spacing:.7px}.finisher-preview strong{font-size:18px!important;margin:4px 0!important}.finisher-preview small{font-size:10px!important;line-height:1.4!important;display:block}.move-feature{top:24px}.form-preview{margin-top:12px}
#battle-action{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);max-width:340px;padding:8px 13px;border:1px solid #58658166;border-radius:4px;background:#070d1add;text-align:center;pointer-events:none;line-height:1.4}#battle-action strong{display:block;font-size:12px;color:#e8edf6}#battle-action span{display:block;font-size:11px;color:#a6b6cf;margin-top:3px}#battle-action.form-ready{border-color:#dba5ff88;background:#190e24e8}#battle-action.form-ready strong{color:#f2c9ff}#battle-action.form-ready span{color:#ebd3f6}#match.spectating #battle-action{display:none}#demo-buttons button[data-move="finisher"]{color:#efcaff;border-color:#985eb4}#demo-buttons button[data-move="finisher"] b{color:#d79fff}
@media(min-width:1101px){.roster{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:760px){#battle-action{bottom:4px;padding:5px 9px;max-width:46%;line-height:1.2}#battle-action strong{font-size:10px}#battle-action span{font-size:9px}.fighter-copy p{max-width:205px}}
@media(pointer:coarse){#battle-action{top:78px;bottom:auto;max-width:48%}}

@media(min-width:761px){.fighter-showcase{display:flex;justify-content:space-between;align-items:flex-start;height:auto;min-height:400px}.move-feature{position:relative;top:auto;right:auto;transform:none;flex-shrink:0;margin:24px 28px 24px 0}}

/* Selection move access remains visible on narrow and touch layouts. */
.ultimate-preview{border-top:1px solid #ffffff26;margin-top:12px;padding-top:10px}.ultimate-preview>span{display:block;font-size:11px;letter-spacing:.7px;color:#acd9ff}.ultimate-preview strong{display:block;font:700 21px/1.1 "Barlow Condensed",Impact,sans-serif;margin:5px 0}.ultimate-preview small{font-size:11px;color:#bac5d6}.selection-moves{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:14px 0 0}.selection-moves>span{font-size:12px;color:#aeb8c9}.selection-moves button{flex-shrink:0;min-height:44px;border:1px solid #414b5e;border-radius:4px;background:#192130;padding:10px 14px;font-size:12px;font-weight:700;letter-spacing:.6px}.selection-moves button:hover{border-color:var(--acid);color:var(--acid)}@media(max-width:480px){.selection-moves{align-items:flex-start;flex-direction:column;gap:7px}.selection-moves button{width:100%;text-align:left}.selection-moves>span{line-height:1.5}}
