@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700&display=swap');
:root{color-scheme:dark;--gold:#f4c76e;--purple:#c0a4ff;--ink:#101217;--muted:#a2a6af}*{box-sizing:border-box}body{margin:0;background:#101217;color:#f6f5f1;font-family:'Noto Sans JP',sans-serif}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid white;outline-offset:4px}button{touch-action:manipulation}button,a{-webkit-tap-highlight-color:transparent}.app{max-width:1600px;margin:auto;padding:0 38px}.topbar{height:96px;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:#fff;font:700 25px/.9 'Barlow Condensed',sans-serif;letter-spacing:1px}.brand b{color:var(--gold)}.brand small{font:500 10px/1 sans-serif;letter-spacing:3px;display:block;margin-top:10px}.brand-mark{font-size:49px;color:var(--gold)}.top-actions{display:flex;align-items:center;gap:10px}.edition{font:600 13px 'Barlow Condensed',sans-serif;letter-spacing:2px;margin-right:20px}.edition i{display:block;font:10px sans-serif;letter-spacing:1px;color:var(--muted);margin-top:5px}.icon-btn{background:#1a1e25;border:1px solid #333941;color:#e0e2e7;border-radius:4px;min-width:42px;height:38px;font-size:14px}.icon-btn:hover{background:#30363f}.game-shell{border:1px solid #424348;box-shadow:0 20px 65px #0004}.arena{position:relative;aspect-ratio:16/9;isolation:isolate;overflow:hidden;background:#17242d}.arena:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;background:#121820;display:flex;align-items:center;justify-content:center}.arena:fullscreen canvas{object-fit:contain}canvas{display:block;width:100%;height:100%;object-fit:contain}.hud{position:absolute;top:4%;left:4%;right:4%;display:flex;align-items:flex-start;gap:24px;pointer-events:none;opacity:0;transition:opacity .3s}.playing .hud,.playing .meters{opacity:1}.fighter-info{flex:1;padding-top:8px}.fighter-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;text-shadow:0 2px 5px #000}.fighter-label>span{font:800 clamp(18px,2.4vw,36px)/1 'Barlow Condensed',sans-serif;letter-spacing:1px}.fighter-label small{font:600 12px 'Barlow Condensed',sans-serif;letter-spacing:1.8px}.right .fighter-label{flex-direction:row-reverse}.health{height:20px;background:#10131bbb;border:1px solid #f4d99388;position:relative;transform:skewX(-12deg);box-shadow:0 2px 8px #0006}.health>div{position:absolute;inset:3px;transform-origin:left;transition:transform .12s}.health .damage{background:#f35d54;transition:transform .6s .15s}.life{background:linear-gradient(90deg,#b78938,#ffe7a2)}.right .health{transform:skewX(12deg);border-color:#b5a2ee88}.right .health>div{transform-origin:right}.right .life{background:linear-gradient(90deg,#e1d2ff,#8b72cd)}.round-dots{display:flex;gap:7px;margin-top:8px}.right .round-dots{justify-content:flex-end}.round-dots i{width:11px;height:11px;border:1px solid #eedba1;background:#15171dcc;transform:rotate(45deg)}.round-dots i.won{background:var(--gold);box-shadow:0 0 10px #f4c76e}.right .round-dots i.won{background:var(--purple);box-shadow:0 0 10px #b096ec}.timer{text-align:center;background:#111722e0;padding:8px 18px 10px;border-top:2px solid var(--gold);clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%)}.timer small{font:600 12px 'Barlow Condensed';letter-spacing:2px}.timer strong{display:block;font:700 64px/.95 'Barlow Condensed';margin:3px 0 5px}.timer>span{font:600 9px 'Barlow Condensed';letter-spacing:1px;color:#b2b7c0}.stage-label{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);font:600 12px 'Barlow Condensed';letter-spacing:3px;color:#fff9;white-space:nowrap}.stage-label span{color:#ffffff55}.meters{position:absolute;bottom:5%;left:4%;right:4%;display:flex;justify-content:space-between;opacity:0}.meter-wrap{width:30%}.meter-wrap>span{display:flex;justify-content:space-between;font:600 12px 'Barlow Condensed';letter-spacing:1.5px;text-shadow:0 1px 4px #000}.meter-wrap b{color:var(--gold)}.meter{height:8px;background:#0a101cd9;margin-top:7px;border:1px solid #d3c29c70;overflow:hidden}.meter i{display:block;width:0;height:100%;background:var(--gold)}.right .meter i{float:right;background:var(--purple)}.meter-wrap.ready .meter{box-shadow:0 0 14px #f4c76e65}.right b{color:var(--purple)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#0c111bf2 0%,#0c111be8 41%,#0b142243 100%);padding:4.5% 6%;z-index:3}.hidden{display:none!important}.menu-panel{width:49%;max-width:560px}.eyebrow{color:var(--gold);font:600 clamp(10px,1vw,14px) 'Barlow Condensed';letter-spacing:3.5px}h1{font:900 clamp(48px,6.2vw,104px)/.78 'Barlow Condensed',Impact,sans-serif;margin:23px 0 14px;letter-spacing:-1px;position:relative;display:inline-block}h1 em{font-style:normal;color:var(--gold)}h1>span{font:600 16px 'Barlow Condensed';color:var(--gold);position:absolute;right:-39px;top:1px;letter-spacing:0;border:1px solid #c8a96880;padding:3px 5px}.menu-sub{font:600 clamp(15px,1.4vw,22px) 'Barlow Condensed';letter-spacing:6px;margin:20px 0 24px}.menu-sub>span{color:var(--gold);margin:0 8px}.select-caption{font:600 12px 'Barlow Condensed';letter-spacing:1.7px;display:flex;justify-content:space-between;margin-bottom:10px;color:#d4d7dc}.select-caption>span{font:10px 'Noto Sans JP';color:#9a9fa9;letter-spacing:0}.fighter-select{display:flex;gap:10px}.character{display:flex;align-items:center;text-align:left;position:relative;overflow:hidden;min-height:74px;flex:1;border:1px solid #ffffff35;background:#111926b0;color:white;padding:0}.character.selected{border-color:var(--gold);background:#f4c76e12;box-shadow:inset 0 -2px var(--gold)}.portrait{width:62px;height:74px;flex-shrink:0;background-repeat:no-repeat;background-color:#828082;background-size:245px auto}.portrait.suzune{background-image:url('assets/suzune-reference.png');background-position:0 -18px}.portrait.aoi{background-image:url('assets/aoi-reference.png');background-size:260px auto;background-position:0 -12px}.character-text{padding:8px}.character-text b{font:700 clamp(16px,1.7vw,24px) 'Barlow Condensed';letter-spacing:1px}.character-text small{display:block;font-size:9px;color:#b7bac3;margin-top:3px;white-space:nowrap}.character i{font:500 10px 'Barlow Condensed';position:absolute;top:5px;right:5px;color:#b2b8c7}.settings-row{display:flex;justify-content:space-between;align-items:center;margin:14px 0;font-size:12px;color:#c1c5cc}.settings-row select{background:#17212f;border:1px solid #49505d;color:#e2e5eb;font-size:12px;padding:7px 9px;border-radius:0}.primary{display:flex;justify-content:space-between;align-items:center;background:var(--gold);color:#161515;border:0;border-radius:0;width:100%;padding:15px 22px;letter-spacing:1px;font-size:16px;font-weight:700;transition:background .2s,transform .2s}.primary:hover{background:#ffde98}.primary:active{transform:translateY(2px)}.primary b{font-size:25px;line-height:1}.start-note{font-size:10px;text-align:center;color:#929aaa;margin:10px 0 0}.menu-side{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:25px;color:#fff9;margin-bottom:1%}.menu-side>span{font:700 clamp(24px,3vw,48px)/.95 'Barlow Condensed';letter-spacing:1px;text-shadow:0 3px 15px #111}.menu-side b{color:var(--gold)}.menu-side small{font:500 11px/1.6 'Barlow Condensed';letter-spacing:2px}.dialog{margin:auto;width:min(420px,90%);text-align:center}.dialog h2{font:800 clamp(42px,6vw,80px)/1 'Barlow Condensed';letter-spacing:2px;margin:16px 0;color:var(--gold)}.dialog p{font-size:14px;color:#c7cbd2}.dialog .primary{margin-top:25px}.secondary{width:100%;padding:12px;margin-top:10px;background:#151e2d;border:1px solid #ffffff40;color:#ddd;font-size:14px}.result-score{font:700 54px 'Barlow Condensed';margin-top:20px}.instructions{display:flex;justify-content:space-between;gap:20px;padding:22px 0 28px}.controls{display:flex;flex-wrap:wrap;gap:16px;align-content:flex-start}.controls>span{display:flex;align-items:center;gap:5px;font-size:12px;color:#b6bac2;white-space:nowrap}kbd{font:500 12px sans-serif;background:#20252e;border:1px solid #41464f;border-bottom:2px solid #454a54;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;width:25px;height:25px;color:#eee}.footnote{font-size:11px;color:#8b929f;line-height:1.8;text-align:right;white-space:nowrap}.footnote span{display:block}.touch-controls{display:none;justify-content:space-between;align-items:center;background:#151a23;padding:14px 20px}.touch-controls button{touch-action:none;user-select:none;-webkit-user-select:none;min-width:58px;height:56px;background:#242c38;border:1px solid #4e5869;border-radius:8px;color:white;font-size:20px}.touch-controls button.active{background:#b19452;color:#0d141f}.direction-pad{display:flex;align-items:center;gap:7px}.direction-pad>div{display:flex;gap:7px}.attack-pad{display:flex;gap:8px}.attack-pad button{border-radius:50%;font:700 22px 'Barlow Condensed';width:65px;height:65px}.attack-pad small{display:block;font:9px 'Noto Sans JP';margin-top:1px}.attack-pad button:last-child{color:var(--gold);border-color:#927849}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(pointer:coarse){.touch-controls{display:flex}.instructions .controls{display:none}.instructions{justify-content:center;padding:12px}.footnote{text-align:center}.footnote span:last-child{display:none}}
@media(min-width:1500px){.app{padding:0 48px}.menu-panel{max-width:500px}}
@media(max-width:900px){.app{padding:0 16px}.topbar{height:76px}.edition{display:none}.menu-panel{width:57%}h1{margin-top:15px;font-size:clamp(44px,7.5vw,70px)}.menu-sub{margin:14px 0;letter-spacing:4px}.overlay{padding:3% 4%}.character{min-height:61px}.portrait{height:61px;width:48px}.character-text{padding:5px}.character-text small{font-size:8px}.select-caption{font-size:10px}.select-caption span{display:none}.settings-row{margin:10px 0}.primary{padding:12px 16px;font-size:14px}.instructions{display:block}.footnote{text-align:left;margin-top:14px}.footnote span{display:inline;margin-right:15px}.hud{gap:12px}.timer strong{font-size:44px}.timer{padding:5px 13px 9px}.health{height:16px}.fighter-label small{font-size:10px}.fighter-label>span{font-size:24px}.stage-label{font-size:10px;letter-spacing:2px}.touch-controls button{min-width:47px;height:48px}.attack-pad button{width:55px;height:55px}}
@media(max-width:580px){.app{padding:0 8px}.topbar{height:68px}.brand{font-size:21px}.brand-mark{font-size:34px}.brand small{font-size:8px;letter-spacing:2px}.icon-btn{height:34px;min-width:34px;font-size:12px}.top-actions{gap:5px}.arena{aspect-ratio:4/3}.arena canvas{object-fit:cover}.overlay{padding:20px;background:linear-gradient(90deg,#0c111bf7,#0c111ba6)}.menu-panel{width:100%;max-width:360px;margin:auto}.menu-side{display:none}h1{font-size:48px;line-height:.78;margin:10px 0 3px}h1 br{display:none}h1 em{margin-left:7px}h1>span{font-size:10px;right:-23px}.eyebrow{font-size:9px;letter-spacing:2px}.menu-sub{font-size:13px;letter-spacing:4px;margin:12px 0}.select-caption{margin-bottom:7px}.character{min-height:60px}.portrait{height:60px;width:48px}.character-text b{font-size:21px}.character-text small{font-size:8px}.settings-row{margin:9px 0;font-size:11px}.settings-row select{font-size:11px;padding:5px}.primary{padding:10px 15px;font-size:14px}.start-note{font-size:9px;margin-top:7px}.hud{top:5%;left:3%;right:3%;gap:7px}.fighter-info{padding-top:2px}.fighter-label{margin-bottom:6px}.fighter-label>span{font-size:21px}.fighter-label small{display:none}.health{height:13px}.health>div{inset:2px}.timer{padding:4px 10px 9px}.timer small{font-size:9px}.timer strong{font-size:32px}.timer>span{display:none}.round-dots{gap:5px;margin-top:6px}.round-dots i{width:8px;height:8px}.meters{bottom:5%;left:4%;right:4%}.meter-wrap{width:36%}.meter-wrap>span{font-size:9px;letter-spacing:1px}.stage-label{bottom:1%;font-size:8px;letter-spacing:1px}.touch-controls{padding:12px 9px}.touch-controls button{min-width:36px;height:43px;font-size:18px}.direction-pad{gap:4px}.direction-pad>div{flex-direction:column;gap:4px}.direction-pad>div button{height:32px;font-size:16px}.attack-pad{gap:5px}.attack-pad button{width:48px;height:48px;font-size:20px}.attack-pad small{font-size:8px}.instructions{padding:15px 4px}.controls{gap:10px}.controls>span{font-size:10px}.footnote{white-space:normal;font-size:10px}.dialog h2{font-size:42px}.dialog p{font-size:12px}.result-score{font-size:32px;margin-top:8px}.dialog .primary{margin-top:14px}.secondary{font-size:12px;padding:9px}}
@media(max-height:520px) and (orientation:landscape){.app{max-width:1000px;padding:0 8px}.topbar{height:48px}.brand{font-size:18px}.brand small{display:none}.brand-mark{font-size:28px}.arena{aspect-ratio:16/7}.arena canvas{object-fit:cover}.menu-panel{width:60%;max-width:430px}.eyebrow{font-size:9px}h1{font-size:44px;margin:8px 0 0}h1 br{display:none}h1 em{margin-left:9px}.menu-sub{margin:8px 0;font-size:13px}.select-caption{display:none}.character{min-height:45px}.portrait{height:45px}.settings-row{margin:6px 0}.primary{padding:8px 14px}.start-note{margin-top:5px}.touch-controls{padding:6px 12px}.touch-controls button{height:37px}.attack-pad button{width:44px;height:44px}.direction-pad>div{flex-direction:row}.instructions{display:none}.menu-side{display:none}}
/* Character colors follow the selected fighter. */
.left .life{background:linear-gradient(90deg,var(--p1,#f4c76e),#fff3d0)}.right .life{background:linear-gradient(90deg,#eee6ff,var(--p2,#bba4ff))}.left .meter i{background:var(--p1,#f4c76e)}.right .meter i{background:var(--p2,#bba4ff)}.left .round-dots i.won{background:var(--p1,#f4c76e)}.right .round-dots i.won{background:var(--p2,#bba4ff)}
@media(max-width:580px){.arena.playing{aspect-ratio:16/10}.arena.playing canvas{object-fit:contain}.playing .hud{top:5%}.playing .meters{bottom:7%}.arena.playing .overlay{padding:16px}.arena.playing .dialog h2{font-size:34px;margin:6px 0}.arena.playing .dialog p{margin:7px 0}.arena.playing .result-score{font-size:27px;margin:3px 0}.arena.playing .dialog .primary{margin-top:8px}.arena.playing .secondary{margin-top:6px;padding:7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.game-shell:fullscreen{width:100vw;height:100dvh;display:flex;flex-direction:column;background:#111722;border:0}.game-shell:fullscreen .arena{flex:1;min-height:0;aspect-ratio:auto}.game-shell:fullscreen canvas{object-fit:contain}.game-shell:fullscreen .touch-controls{flex-shrink:0}.icon-btn#music,.icon-btn#sound{font:600 12px 'Barlow Condensed',sans-serif;letter-spacing:.5px;padding:0 8px}
@media(max-width:580px){.top-actions{gap:4px}.brand{font-size:18px;gap:7px}.brand-mark{font-size:29px}.brand small{font-size:7px}.icon-btn#music,.icon-btn#sound{font-size:10px;padding:0 5px}.icon-btn{min-width:29px}}