:root{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:#f5eddf;background:#0b131d;color-scheme:dark;--gold:#edbf79;--muted:#a3adb6}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}button,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;color:inherit;background:#19242eee;border:1px solid #ffffff28;border-radius:5px;padding:10px 15px;min-height:40px}button:hover{border-color:var(--gold)}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.4;cursor:default}button[hidden],[hidden]{display:none!important}canvas#arena{position:fixed;inset:0;width:100%;height:100%;z-index:0}a{color:inherit;text-decoration:none}.toolbar{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;z-index:20;pointer-events:none}.toolbar a,.toolbar button{pointer-events:auto}.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:12px;letter-spacing:1.5px}.brand>span>span{color:var(--gold);margin-left:4px}.toolbar-right{display:flex;gap:8px}.toolbar button{height:40px;min-width:42px;background:#101b26d9;padding:8px 11px}.toolbar button svg{width:21px;height:21px;display:block}.toolbar button[aria-pressed=true]{color:var(--gold);border-color:#edbf7966}.selection{position:fixed;inset:0;z-index:10;padding:84px max(4vw,24px) 22px;background:linear-gradient(110deg,#09121cf5,#102131d9 55%,#0b1825df);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}.selection-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;max-width:1300px;margin:0 auto}.kicker{color:var(--gold);font-size:10px;letter-spacing:2.5px;font-weight:700}h1{font-size:clamp(32px,5vw,72px);line-height:1;margin:12px 0 10px;letter-spacing:-2px;font-style:italic;font-weight:900}h1 em{color:var(--gold);font-style:inherit}#tagline{color:var(--muted);font-size:13px;margin-bottom:24px}.setup{display:flex;gap:12px;align-items:center;flex-wrap:wrap;max-width:1300px;margin:0 auto 24px}.modes,.formats{display:flex;gap:3px;background:#08121c88;padding:3px;border-radius:5px}.modes button,.formats button{border:0;background:none;font-size:12px}.modes button.active,.formats button.active{background:#ead4af;color:#17202a}.setup select{height:40px;border:1px solid #ffffff24;background:#142331;padding:0 12px;border-radius:4px;color:inherit}.roster-heading{display:flex;justify-content:space-between;align-items:center;max-width:1300px;margin:auto}.roster-heading h2{font-size:11px;letter-spacing:2px;font-weight:400;color:#d2d5d3}.roster-heading span{font-size:11px;color:var(--gold)}.roster{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:1300px;margin:10px auto 20px}.fighter-card{position:relative;min-width:0;padding:0;overflow:hidden;text-align:left;background:#162532;border:1px solid #ffffff19;border-radius:3px;transition:transform .15s,border-color .15s}.fighter-card canvas{display:block;width:100%;height:clamp(90px,11vh,145px);object-fit:contain;background:linear-gradient(150deg,#39506422,#0c172b44)}.fighter-card strong{display:block;padding:9px 10px 3px;font-size:13px;letter-spacing:.6px}.fighter-card small{display:block;padding:0 10px 10px;color:#9dabba;font-size:10px}.fighter-card.selected{border-color:var(--gold);background:#3b382d}.fighter-card .order{position:absolute;right:6px;top:6px;background:var(--gold);color:#111d28;font-size:12px;width:22px;height:22px;display:grid;place-items:center;border-radius:3px}.selection-bottom{max-width:1300px;margin:auto;display:flex;justify-content:space-between;gap:24px;align-items:center}#chosen-name{font-size:19px;color:var(--gold)}#chosen-skills{font-size:12px;color:#d1d3ce;margin:8px 0}#key-hint{font-size:11px;color:var(--muted)}.start-actions{display:flex;gap:10px;flex-shrink:0}.primary{background:var(--gold);color:#15202a;font-weight:800;border:0;padding:14px 25px;min-height:48px}.quiet{font-size:12px}.record{font-size:10px;color:#9aaaaf;text-align:center;margin:18px 0 0}.hud{position:fixed;top:72px;left:8%;right:8%;display:grid;grid-template-columns:1fr 74px 1fr;gap:25px;z-index:5;pointer-events:none}.fighter-label{display:flex;justify-content:space-between;font-size:14px;font-weight:bold;text-shadow:0 2px 3px #000}.fighter-label small{color:var(--gold);font-size:11px}.health{height:14px;background:#351c25;border:1px solid #eddfb960;margin-top:7px;transform:skewX(-12deg);overflow:hidden}.health i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#b39158,#f6df9e);transition:width .15s}.enemy .health i{margin-left:auto;background:linear-gradient(90deg,#74a4b9,#d0eff0)}.enemy .fighter-label{flex-direction:row-reverse}.guard{height:3px;background:#ffffff1c;margin:5px 0 10px}.guard i{display:block;height:100%;background:#a5cad1}.power{height:6px;background:repeating-linear-gradient(90deg,#ffffff20 0,#ffffff20 calc(33.333% - 3px),#0005 calc(33.333% - 3px),#0005 33.333%);position:relative}.power i{display:block;height:100%;background:#78c1e3;box-shadow:0 0 9px #71d5f480}.power span{position:absolute;top:9px;left:0;font-size:10px;color:#aad4e2}.enemy .power i,.enemy .guard i{margin-left:auto}.enemy .power span{left:auto;right:0}.timer{text-align:center}.timer strong{font-size:42px;line-height:1}.timer span{display:block;font-size:9px;letter-spacing:1px;color:#b9c5cb;margin-top:6px}.team-line{font-size:10px;color:#d5d0bd;margin-top:27px;letter-spacing:1px}.enemy .team-line{text-align:right}.announcement{position:fixed;top:40%;left:0;right:0;text-align:center;font-size:clamp(28px,7vw,76px);font-weight:900;font-style:italic;color:#f7dbac;letter-spacing:3px;text-shadow:0 5px 30px #000;z-index:6;pointer-events:none}.combo{position:fixed;top:33%;left:9%;font-size:28px;color:#ffe0a3;font-style:italic;z-index:6;pointer-events:none}.input-display{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);color:#d5ecf1;font:12px monospace;z-index:5}.touch-controls{position:fixed;inset:0;z-index:8;pointer-events:none}.attack-pad{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));pointer-events:auto}.attack-row,.skill-row{display:flex;gap:9px;margin-top:7px}.attack-row button{width:52px;height:47px;padding:0;border-radius:12px;background:#173047a6;border:1px solid #e7dbc66b;font-size:13px;font-weight:bold;touch-action:none}.skill-row button{width:52px;height:34px;min-height:34px;padding:0;font-size:9px;background:#55442ca6;color:#ffe0a3;border-color:#edbf797a;touch-action:none}.attack-pad button.pressed{background:#e4ba70;color:#112438;transform:scale(.96)}.joystick{position:absolute;right:max(30px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:114px;height:114px;pointer-events:auto;touch-action:none;border:1px solid #d3e5f059;border-radius:50%;background:#152e4480;box-shadow:inset 0 0 30px #0a141c88}.joystick-cross{position:absolute;inset:0;display:grid;place-items:center;font-size:80px;font-weight:100;color:#abc4d51f}.joystick i{position:absolute;left:35px;top:35px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#bfced799,#668399a0);border:1px solid #dce8f07a;box-shadow:0 3px 14px #0006}.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#050f1bcc;backdrop-filter:blur(9px);padding:20px}.panel{width:min(520px,100%);padding:38px;text-align:center;border:1px solid #c7b17b4d;background:linear-gradient(130deg,#1c2a37f7,#101b27fc);box-shadow:0 25px 100px #0007;border-radius:8px}.panel h2{font-size:40px;margin:15px 0;color:var(--gold)}.panel>p:not(.kicker){font-size:13px;color:#b8c4cf;line-height:1.8}.overlay-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:25px}dialog{z-index:50;width:min(720px,calc(100vw - 32px));max-height:85dvh;border:1px solid #756347;color:inherit;background:#14222f;padding:25px;border-radius:8px;overflow:auto;touch-action:pan-y}dialog::backdrop{background:#030b14cc;backdrop-filter:blur(8px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading h2{font-size:23px;color:var(--gold)}#guide{font-size:13px;line-height:1.9;color:#bdcbd6}.option{display:flex;align-items:center;gap:9px;padding:10px 0;font-size:13px}.bindings{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.bindings button{font-size:11px;display:flex;flex-direction:column;gap:8px;align-items:center}.bindings button span{color:var(--gold)}#bind-hint{font-size:12px;color:var(--muted)}.backup{display:flex;gap:10px;margin-top:24px}.training-tools{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:10px;z-index:10}.training-tools select{color:inherit;background:#1c2b3b;border:1px solid #556778;border-radius:4px}.rotate{position:fixed;inset:0;z-index:100;background:#0b1723;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px}.rotate>span{font-size:68px;color:var(--gold)}.rotate h2{font-size:26px}.rotate p{font-size:13px;color:var(--muted)}.loading-screen{position:fixed;inset:0;background:#0b1520;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.loading-screen p{font-size:30px;letter-spacing:4px;font-weight:bold}.loading-screen span{font-size:12px;color:var(--muted)}progress{width:220px;height:3px;accent-color:var(--gold)}
@media(pointer:coarse){.input-display{bottom:10px}.training-tools{bottom:12px}.training-tools button,.training-tools select{font-size:10px;max-width:130px}.selection{padding-top:65px}.fighter-card canvas{height:100px}}
@media(max-height:600px) and (orientation:landscape){.toolbar{top:max(7px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left))}.brand{font-size:9px}.brand img{width:24px;height:24px}.selection{padding:52px max(3vw,20px) 15px}.selection-heading h1{font-size:30px;margin:4px 0}.kicker{font-size:8px;margin:4px 0}#tagline{margin:5px 0 10px;font-size:10px}.setup{gap:6px;margin-bottom:8px}.setup button{font-size:10px;min-height:32px;padding:5px 9px}.setup select{height:32px;font-size:10px;max-width:140px}.roster{gap:6px;margin:5px auto 10px}.fighter-card canvas{height:65px}.fighter-card strong{font-size:10px;padding:5px 7px 2px}.fighter-card small{font-size:8px;padding:0 7px 5px}.roster-heading h2{font-size:9px}.fighter-card .order{width:16px;height:16px;font-size:9px}.selection-bottom{gap:10px}#chosen-name{font-size:14px}#chosen-skills{font-size:10px;margin:5px 0}#key-hint{font-size:9px}.primary{min-height:40px;padding:10px 20px;font-size:12px}.record{margin:8px 0;font-size:9px}.hud{top:45px;left:6%;right:6%;grid-template-columns:1fr 58px 1fr;gap:17px}.fighter-label{font-size:11px}.health{height:10px;margin-top:4px}.guard{margin:4px 0 5px}.timer strong{font-size:30px}.timer span{font-size:8px}.team-line{font-size:8px;margin-top:22px}.power span{font-size:8px}.attack-pad{bottom:8px}.attack-row button{height:44px;width:49px}.attack-row,.skill-row{margin-top:5px;gap:7px}.skill-row button{width:49px;height:38px;min-height:38px}.joystick{width:104px;height:104px;bottom:15px;right:max(25px,env(safe-area-inset-right))}.joystick i{left:30px;top:30px}.bindings{grid-template-columns:repeat(5,1fr)}.panel{padding:20px}.panel h2{font-size:30px}}
@media(max-width:700px) and (orientation:portrait){.roster{grid-template-columns:repeat(3,1fr)}}
/* Reserve a real slot for the shared Info control immediately left of Sound. */
#sound{margin-left:62px}
/* The real visible viewport includes browser chrome changes on iPhone. All game
   fixed layers share this containing block; no 720px letterbox or bottom tray. */
.game-viewport{--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);position:fixed;left:var(--view-left,0px);top:var(--view-top,0px);width:var(--view-width,100vw);height:var(--view-height,100dvh);overflow:hidden;transform:translateZ(0)}
.game-viewport .toolbar,.game-viewport .selection,.game-viewport .hud,.game-viewport .announcement,.game-viewport .combo,.game-viewport .input-display,.game-viewport .touch-controls,.game-viewport .overlay,.game-viewport .training-tools,.game-viewport .rotate,.game-viewport .loading-screen,.game-viewport canvas#arena{position:absolute}
.touchscreen.playing .brand>span{display:none}
.touchscreen .attack-pad{--attack-size:52px;display:grid;grid-template-columns:repeat(3,var(--attack-size));grid-template-rows:repeat(2,var(--attack-size));gap:7px;left:max(10px,var(--safe-left));bottom:max(12px,var(--safe-bottom))}
.touchscreen .attack-row,.touchscreen .skill-row{display:contents}
.touchscreen .attack-pad button{width:var(--attack-size);height:var(--attack-size);min-height:var(--attack-size);font-size:12px;border-radius:12px;padding:0;background:#192d4299;border-color:#dbe8f06b}
.touchscreen .attack-pad [data-attack=lp]{grid-column:1;grid-row:1}.touchscreen .attack-pad [data-attack=hp]{grid-column:2;grid-row:1}.touchscreen .attack-pad [data-attack=lk]{grid-column:1;grid-row:2}.touchscreen .attack-pad [data-attack=hk]{grid-column:2;grid-row:2}.touchscreen .attack-pad [data-attack=special]{grid-column:3;grid-row:1}.touchscreen .attack-pad [data-attack=super]{grid-column:3;grid-row:2}
.touchscreen .attack-pad [data-attack=special],.touchscreen .attack-pad [data-attack=super]{background:#59442b99;border-color:#eac47e9a;color:#ffe7b6;font-size:10px}
.touchscreen .attack-pad button.pressed{background:#eac47e;color:#122436}
.touchscreen .joystick{right:max(14px,var(--safe-right));bottom:max(12px,var(--safe-bottom));width:110px;height:110px;background:#17314880}
.touchscreen .joystick i{left:calc(50% - 22px);top:calc(50% - 22px)}
.touchscreen.compact .attack-pad{--attack-size:44px;gap:6px}
.touchscreen.compact .joystick{width:100px;height:100px}
.touchscreen.compact .toolbar{top:4px;left:max(10px,var(--safe-left));right:max(10px,var(--safe-right))}
.touchscreen.compact .toolbar button{height:32px;min-height:32px;min-width:34px;padding:5px 7px}.touchscreen.compact .toolbar-right{gap:6px}.touchscreen.compact #sound{margin-left:54px}
.touchscreen.compact .brand img{width:26px;height:26px}
.touchscreen.compact .hud{top:42px;left:max(10px,var(--safe-left));right:max(10px,var(--safe-right));gap:12px;grid-template-columns:1fr 42px 1fr}
.touchscreen.compact .fighter-label{font-size:10px;line-height:12px}.touchscreen.compact .health{height:8px;margin-top:3px}.touchscreen.compact .guard{height:2px;margin:3px 0 4px}.touchscreen.compact .power{height:4px}.touchscreen.compact .power span{display:none}.touchscreen.compact .team-line{margin-top:4px;font-size:8px;line-height:10px}.team-line:empty{display:none}
.touchscreen.compact .timer strong{font-size:27px}.touchscreen.compact .timer span{font-size:7px;margin-top:3px}
.touchscreen.compact .training-tools{bottom:8px}.touchscreen.compact .training-tools button,.touchscreen.compact .training-tools select{font-size:9px;min-height:30px;padding:4px 7px}.touchscreen.compact .combo{top:32%;font-size:23px;left:24%}
.game-info-content{max-height:calc(var(--game-visible-height,100dvh) - var(--info-panel-top,65px) - 14px)}
.training-tools{top:12px;bottom:auto}.touchscreen.compact .training-tools{top:4px;bottom:auto}