:root{color-scheme:dark;--bg:#091b36;--panel:#173764;--line:#426798;--white:#f6f9ff;--muted:#bed0e9;--gold:#ffd34d;--red:#ff786a;--blue:#62ceff;font-family:'Noto Sans JP','Yu Gothic UI','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#245591 0,transparent 70%),var(--bg);color:var(--white);min-width:320px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible+span{outline:3px solid #fff;outline-offset:4px}a{color:inherit;text-decoration:none}button{border:0}.app{max-width:1380px;padding:0 32px 24px;margin:auto}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-family:Impact,'Arial Black',sans-serif;font-size:43px;letter-spacing:1px;font-weight:900;display:flex;align-items:center;font-style:italic;text-shadow:0 3px 0 #071831}.brand-mark{color:var(--gold);font-size:38px;transform:rotate(20deg);margin-right:16px;letter-spacing:-7px;width:24px}.brand-dot{color:var(--gold)}.top-label{font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.06em}.top-label span{color:#728dab;margin:0 15px}.utility{display:flex;gap:8px}.icon-button{width:44px;height:42px;border:2px solid #4b71a3;border-radius:8px;background:#16345d;display:grid;place-items:center;font-family:Arial,sans-serif;font-size:22px;font-weight:800;box-shadow:0 3px 0 #05142b}.icon-button:hover{background:#285389}.icon-button svg{width:21px;height:21px}
.arena{position:relative;height:560px;min-height:440px;border:3px solid #547fae;border-radius:16px;overflow:hidden;background:#142943 url('./arena.webp') center/cover no-repeat;isolation:isolate;box-shadow:0 8px 0 #06142a,0 18px 45px #0004}.arena:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#103565c9 0%,#123c6245 42%,#07183145 70%,#081c38e8 100%);z-index:-1}canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.scoreboard{position:absolute;top:22px;left:26px;right:26px;display:grid;grid-template-columns:1fr 160px 1fr;gap:22px;pointer-events:none;z-index:2}.contestant{padding:10px 20px;background:linear-gradient(100deg,#822f37ec,#122747c9);border:2px solid #ec8178;border-bottom:5px solid var(--red);border-radius:10px}.contestant.cpu{background:linear-gradient(260deg,#155075ec,#122747c9);border-color:#6ecfff;border-bottom-color:var(--blue)}.competitor{display:flex;align-items:center;gap:10px}.competitor strong{font-family:Impact,'Arial Black',sans-serif;font-size:23px;letter-spacing:1.5px}.color-chip{width:7px;height:18px;background:var(--red);border-radius:2px}.cpu .color-chip{background:var(--blue)}.competitor-note{font-size:14px;color:#e3ecfa}.cpu .competitor{justify-content:flex-end}.score-line{display:flex;align-items:center;gap:24px}.cpu .score-line{justify-content:flex-end}.score{font-family:Impact,'Arial Black',sans-serif;font-size:61px;line-height:1.13;letter-spacing:3px;font-variant-numeric:tabular-nums;text-shadow:0 4px 0 #08172c}.lights{display:flex;gap:6px}.lights i{width:21px;height:8px;background:#d8e7fb30;display:block;transform:skewX(-15deg)}.player .lights i.on{background:var(--red);box-shadow:0 0 12px #ff786a88}.cpu .lights i.on{background:var(--blue);box-shadow:0 0 12px #62ceff88}.match-info{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:4px;text-shadow:0 2px 4px #000}.round-label{font-weight:800;font-size:14px;color:var(--gold);white-space:nowrap}.timer{font-family:Impact,'Arial Black',sans-serif;font-size:43px;line-height:1.05;letter-spacing:2px;font-variant-numeric:tabular-nums}.match-mode{font-size:12px;color:#d2e1f5;font-weight:700}.arena-meta{position:absolute;left:24px;top:50%;display:flex;flex-direction:column;gap:5px;font-size:12px;letter-spacing:1.5px;color:#b9d7ef7a;pointer-events:none}.energy-row{position:absolute;bottom:25px;left:28px;right:28px;display:grid;grid-template-columns:1fr 170px 1fr;align-items:end;gap:25px;pointer-events:none}.energy>div:first-child{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#d3e3f5;margin-bottom:7px}.energy-track{height:10px;background:#07172c;border:1px solid #728eaf;border-radius:4px;overflow:hidden}.energy-track i{height:100%;width:100%;display:block;background:var(--red);transition:width 60ms linear}.cpu .energy-track i{background:var(--blue);margin-left:auto}.distance-info{text-align:center;font-size:14px;font-weight:700;color:#e5f1ff}
.start-layer{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(90deg,#bd363426,transparent 42%,transparent 58%,#1689e12b);z-index:3}.lobby-heading{display:flex;justify-content:space-between;align-items:center;padding:23px 32px;background:linear-gradient(180deg,#10264dd9,#10264d00)}.eyebrow{font-family:'Arial Black',Impact,sans-serif;letter-spacing:2px;font-size:13px;color:var(--gold);font-weight:900}h1{font-size:32px;font-weight:900;line-height:1.25;margin:5px 0 0;text-shadow:0 3px 0 #0b1b37}.rule-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.rule-badges span{font-size:14px;font-weight:800;padding:8px 13px;background:#102952c9;border:1px solid #7798c3;border-radius:6px}.rule-badges span:first-child{color:var(--gold);border-color:#c49c48}.fighter-lineup{position:absolute;top:124px;left:0;right:0;display:grid;grid-template-columns:1fr 100px 1fr;align-items:start;pointer-events:none}.fighter-name{text-align:center;width:190px;justify-self:center;position:relative;padding:6px 14px 10px;background:linear-gradient(100deg,#922a3ada,#562c50aa);border-bottom:4px solid var(--red);border-radius:8px}.rival-name{background:linear-gradient(260deg,#155e88e0,#233969bb);border-bottom-color:var(--blue)}.fighter-name>span{display:block;font-size:11px;letter-spacing:2px;font-weight:800;color:#e6edfb}.fighter-name strong{display:block;font-family:Impact,'Arial Black',sans-serif;font-size:34px;letter-spacing:3px;font-style:italic;line-height:1.12;text-shadow:2px 3px 0 #07172e}.fighter-name small{display:block;font-size:14px;font-weight:800;margin-top:3px}.versus{align-self:center;text-align:center;font-family:Impact,'Arial Black',sans-serif;font-size:54px;font-style:italic;line-height:1;color:var(--gold);text-shadow:3px 4px 0 #4d370c,0 0 25px #ffd34d30;transform:rotate(-9deg)}.start-card{padding:20px 30px 18px;display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:end;background:linear-gradient(100deg,#143766fa,#102950fa);border-top:2px solid #5580af}.difficulty{border:0;padding:0;display:flex;gap:8px;margin:0;min-width:0}.difficulty legend{font-size:14px;font-weight:800;padding:0;margin-bottom:10px;color:#e6f0ff}.difficulty label{flex:1;position:relative;cursor:pointer;min-width:0}.difficulty input{position:absolute;opacity:0;width:1px;height:1px}.difficulty label>span{display:block;text-align:center;padding:10px 8px;border:2px solid #5075a7;border-radius:8px;color:#f1f6ff;background:#122a4f;box-shadow:0 3px 0 #06152e;transition:background .13s,border-color .13s}.difficulty b{font-size:16px;display:block}.difficulty small{font-size:12px;display:block;margin-top:4px;color:var(--muted);white-space:nowrap}.difficulty input:checked+span{border-color:var(--gold);background:#294d77;box-shadow:0 3px 0 #a37c14}.difficulty input:checked+span b{color:var(--gold)}.difficulty label:hover>span{background:#315781}.start-button{background:linear-gradient(#ffe77d,#ffce3d);color:#242643;font-weight:900;border:2px solid #fff0a4;border-bottom-color:#d5a72d;border-radius:10px;padding:15px 21px;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;font-size:19px;min-height:60px;box-shadow:0 5px 0 #946522,0 8px 12px #03132a55;text-shadow:0 1px 0 #ffec95;transition:filter .12s,transform .12s,box-shadow .12s}.start-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.start-button:active{transform:translateY(3px);box-shadow:0 2px 0 #946522}.start-button span{font-size:20px}.start-footnote{display:block;text-align:center;color:#c9d9ed;font-size:12px;margin-top:12px}.control-deck{display:flex;gap:24px;margin-top:24px}.group-label{font-size:13px;font-weight:800;letter-spacing:1px;display:flex;gap:10px;margin:0 0 9px;color:var(--gold)}.group-label b{font-size:14px;letter-spacing:.04em;color:#dce9fa}.movement-group{flex:0 0 29%}.action-group{flex:1;min-width:0}.movement-buttons{display:flex;gap:8px}.control{background:linear-gradient(#254976,#18365d);border:2px solid #5275a3;border-bottom-color:#203e62;border-radius:10px;min-height:91px;user-select:none;-webkit-user-select:none;touch-action:none;position:relative;box-shadow:0 4px 0 #04132c;transition:background .1s,border-color .1s,transform .1s}.control:hover{background:#335e90;border-color:#87acd7}.control.held,.control:active{transform:translateY(3px);background:#395e89;border-color:var(--gold);box-shadow:0 1px 0 #04132c}.control.movement{flex:1;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:6px;padding:12px 14px}.move-symbol{font-family:Arial,sans-serif;font-size:30px;grid-row:span 2;align-self:center;justify-self:start}.movement span:not(.move-symbol){font-size:14px;font-weight:800;white-space:nowrap}.control kbd{font-family:Arial,sans-serif;font-size:12px;color:#d3e2f6}.action-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.action-buttons .control{text-align:left;padding:10px 14px}.action-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}.action-icon{font-family:Arial,sans-serif;font-size:24px;height:26px;line-height:24px;color:#d6ecff}.action-top kbd{border:1px solid #7293bd;border-radius:4px;min-width:22px;text-align:center;padding:2px 4px;background:#0c2346}.control strong{display:block;font-size:15px;font-weight:800}.control small{font-size:12px;color:var(--muted);display:block;margin-top:3px}.control.attack{border-top-color:#ff9386}.control.lunge{border-top-color:var(--gold);background:linear-gradient(#3a5070,#283c59)}.lunge .action-icon{color:var(--gold)}.control.parry{border-top-color:var(--blue)}.control.disengage{border-top-color:#ba9eff}footer{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-top:20px}footer p{margin:0;font-size:13px;line-height:1.8;color:var(--muted)}.tip-label{color:var(--gold);font-size:12px;font-weight:800;margin-right:12px}.install-link{font-size:13px;font-weight:700;background:transparent;padding:8px 0;color:#d3e5ff;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.bout-call{position:absolute;top:37%;left:15px;right:15px;text-align:center;font-weight:900;font-size:clamp(26px,4.4vw,52px);font-style:italic;letter-spacing:2px;text-shadow:3px 4px 0 #07152c,0 0 16px #07152c;pointer-events:none;color:var(--white);z-index:2}.bout-call small{display:block;font-size:14px;margin-top:9px;letter-spacing:1px;font-weight:800;font-style:normal}.bout-call.player{color:var(--red)}.bout-call.cpu{color:var(--blue)}.bout-call.double{color:var(--gold)}.overlay{position:absolute;inset:0;background:#07152dc9;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:5}.small-card{width:420px;max-width:92%;text-align:center;padding:30px;background:linear-gradient(145deg,#244f83,#102850);border:3px solid #7899c3;border-radius:16px;box-shadow:0 8px 0 #06132b}.small-card h2{font-size:30px;font-weight:900;margin:10px 0 22px}.small-card p{font-size:14px;color:#d0dff2;margin:5px 0 23px;line-height:1.8}.text-button{background:transparent;font-size:14px;color:#dce9fc;margin-top:15px;padding:10px;text-decoration:underline;text-underline-offset:4px}.final-score{font-family:Impact,'Arial Black',sans-serif;font-size:76px;line-height:1;color:var(--gold);margin-bottom:20px;text-shadow:3px 4px 0 #543b14}.hidden{display:none!important}dialog{color:var(--white);background:linear-gradient(145deg,#20497d,#102749);border:2px solid #7296c6;border-radius:16px;max-width:640px;width:calc(100% - 30px);padding:0;max-height:90dvh;box-shadow:0 12px 40px #0006}dialog::backdrop{background:#030d22c9;backdrop-filter:blur(5px)}.help-content{padding:34px;position:relative}.help-content h2{font-size:26px;margin:10px 26px 18px 0;line-height:1.5}.help-content p{font-size:15px;line-height:1.9;color:#d2e1f5}.close-button{position:absolute;right:15px;top:14px;width:36px;height:36px;background:#0c2345;border:1px solid #6083ad;border-radius:8px;font-size:27px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.help-grid>div{padding:14px;border:1px solid #4b719e;background:#0f2d54;border-radius:8px}.help-grid b{display:block;color:var(--gold);font-size:14px;margin-bottom:7px}.help-grid span{font-size:14px;line-height:1.7;color:#d8e5f7}.help-content .rules{font-size:13px;padding-top:16px;border-top:1px solid #57789f}.install-steps h3{font-size:16px;color:var(--gold);margin:20px 0 8px}.install-steps ol{padding-left:22px;font-size:14px;color:#d8e5f7;line-height:1.9}.help-content .install-note{font-size:13px}.install-link[hidden],[hidden]{display:none!important}
html[data-phase='menu'] .scoreboard,html[data-phase='menu'] .energy-row,html[data-phase='menu'] .arena-meta{visibility:hidden}html[data-phase='menu'] .arena{border-color:#698ec2}html[data-phase='end'] .arena{border-color:var(--gold)}
@media(min-width:1100px){.arena{height:560px;min-height:560px}}
@media(max-width:1000px){.app{padding:0 20px 22px}.start-card{gap:22px;padding:20px}.scoreboard{left:20px;right:20px;gap:15px;grid-template-columns:1fr 125px 1fr}.contestant{padding:10px 13px}.lights{gap:4px}.lights i{width:16px}.score-line{gap:13px}.control-deck{gap:16px}.action-buttons .control{padding:10px}.movement-group{flex-basis:27%}.control.movement{padding:10px}.difficulty small{font-size:11px}.start-button{font-size:17px}.start-card .start-button{min-height:66px}}
@media(max-width:700px){.app{padding:0 12px 22px}.topbar{height:70px;gap:10px}.top-label{display:none}.brand{font-size:35px}.brand-mark{font-size:31px;width:19px;margin-right:13px}.icon-button{width:40px;height:38px}.arena{height:525px;min-height:525px;border-radius:12px}.lobby-heading{padding:20px 18px;align-items:flex-start}.eyebrow{font-size:11px}h1{font-size:27px}.rule-badges{gap:5px;max-width:155px}.rule-badges span{font-size:12px;padding:6px 9px}.rule-badges span:first-child{width:100%;text-align:center}.fighter-lineup{top:117px;grid-template-columns:1fr 58px 1fr}.fighter-name{width:135px;padding:6px 8px 8px}.fighter-name strong{font-size:29px}.fighter-name>span{font-size:10px;letter-spacing:1px}.fighter-name small{font-size:12px}.versus{font-size:39px}.start-card{display:block;padding:16px 18px 15px}.difficulty{gap:7px;margin-bottom:15px}.difficulty legend{font-size:13px;margin-bottom:8px}.difficulty label>span{padding:8px 4px}.difficulty b{font-size:14px}.difficulty small{font-size:10px}.start-card .start-button{min-height:51px;padding:10px 17px;font-size:18px}.start-footnote{margin-top:10px;font-size:11px}.scoreboard{top:15px;left:12px;right:12px;grid-template-columns:1fr 95px 1fr;gap:9px}.contestant{padding:9px 10px;border-bottom-width:4px}.competitor{gap:5px}.competitor strong{font-size:21px}.competitor-note{display:none}.score-line,.cpu .score-line{gap:0;justify-content:space-between}.score{font-size:48px;letter-spacing:1px}.lights{display:grid;gap:4px}.lights i{width:13px;height:5px}.timer{font-size:32px;letter-spacing:1px}.round-label{font-size:11px}.match-mode{font-size:10px;letter-spacing:0}.match-info{gap:9px}.arena-meta{display:none}.energy-row{left:16px;right:16px;bottom:23px;grid-template-columns:1fr 108px 1fr;gap:10px}.energy>div:first-child{font-size:10px}.distance-info{font-size:11px}.energy-track{height:8px}.control-deck{gap:12px;margin-top:20px;display:block}.movement-group{margin-bottom:17px}.movement-buttons{max-width:none}.control.movement{min-height:62px;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px}.movement .move-symbol{font-size:25px}.group-label{margin-bottom:7px;font-size:11px}.group-label b{font-size:12px}.action-buttons{gap:6px}.action-buttons .control{padding:9px 8px;min-height:92px}.control strong{font-size:13px}.control small{font-size:10px}.action-top kbd{font-size:11px;min-width:18px}.action-icon{font-size:21px}.control-deck kbd{display:none}footer{align-items:flex-start;gap:8px;flex-direction:column;margin-top:18px}footer p{font-size:12px}.tip-label{display:block;margin-bottom:3px}.help-content{padding:25px 20px}.help-content h2{font-size:22px}.help-grid{grid-template-columns:1fr;gap:8px}.help-grid>div{padding:12px}.small-card{padding:23px;max-width:90%}.small-card h2{font-size:27px}.final-score{font-size:62px}.bout-call{top:35%;font-size:31px;letter-spacing:1px}.bout-call small{font-size:12px}.start-action{max-width:none}}
@media(max-width:370px){.fighter-name{width:110px}.fighter-lineup{grid-template-columns:1fr 45px 1fr}.versus{font-size:33px}.rule-badges{max-width:134px}.lobby-heading{padding-left:14px;padding-right:14px}.difficulty small{display:none}.start-card{padding:15px}.action-buttons .control{padding:9px 5px}.scoreboard{grid-template-columns:1fr 84px 1fr;gap:5px}.contestant{padding:8px}.timer{font-size:29px}}
@media(max-height:550px) and (orientation:landscape){.app{padding:0 16px 14px}.topbar{height:58px}.arena{height:390px;min-height:390px}.lobby-heading{padding:13px 22px}h1{font-size:24px}.fighter-lineup{top:91px}.fighter-name{width:145px}.fighter-name strong{font-size:25px}.fighter-name small{font-size:11px}.start-card{display:grid;grid-template-columns:1.3fr 1fr;padding:12px 20px;gap:22px}.difficulty{margin:0}.difficulty small{display:none}.difficulty label>span{padding:8px}.start-card .start-button{min-height:49px;font-size:16px}.start-footnote{font-size:10px}.control-deck{display:flex}.movement-group{flex:0 0 27%;margin:0}.control.movement{min-height:83px;display:grid;gap:3px;padding:8px}.movement .move-symbol{grid-row:span 2}.action-buttons .control{min-height:83px}.group-label{font-size:11px}.scoreboard{top:15px}.score{font-size:46px}.energy-row{bottom:15px}.bout-call{top:40%}.small-card{padding:16px 24px}.small-card h2{margin:6px 0 15px}.final-score{font-size:56px;margin-bottom:10px}.small-card p{margin-bottom:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Match type (CPU / 2 players) and the 2-player key guide. */
.match-settings{display:grid;gap:12px;min-width:0}
.difficulty:disabled{opacity:.42}
.difficulty:disabled label{cursor:not-allowed}
.difficulty input:disabled+span{opacity:.45;cursor:not-allowed}
.versus-keys{display:none}
html[data-mode='versus']:not([data-phase='menu']) .control-deck{display:none}
html[data-mode='versus']:not([data-phase='menu']) .versus-keys{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.versus-side{display:grid;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#102952c9;font-size:14px}
.versus-side b{font-size:15px}.versus-side.p1 b{color:var(--red)}.versus-side.p2 b{color:var(--blue)}
.versus-keys kbd{display:inline-block;min-width:22px;padding:0 6px;margin-right:3px;border:1px solid #7798c3;border-radius:4px;background:#0b1f3d;font:700 12px/1.6 Arial,sans-serif;text-align:center}
.versus-keys p{grid-column:1/-1;margin:0;font-size:12px;color:var(--muted)}

html[data-mode='watch']:not([data-phase='menu']) .control-deck{display:none}