:root{--cy:#35e0ff;--cy2:#1b8cff;--red:#ff4a5e;--bg:#02060f;--panel:#040e1ed1;--b:clamp(58px, 15vmin, 96px);--sat:env(safe-area-inset-top,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);font-family:Segoe UI,Hiragino Sans,Yu Gothic UI,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{background:var(--bg);color:#dff4ff;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}button{font:inherit;color:inherit;cursor:pointer}.app{position:fixed;inset:0;overflow:clip}.stage,.stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.layers{pointer-events:none;position:absolute;inset:0;overflow:hidden}.fx-speed{opacity:0;mix-blend-mode:screen;background:repeating-conic-gradient(#a0e6ff00 0deg 4deg,#a0e6ff38 4.4deg 4.8deg,#a0e6ff00 5.2deg 9deg);transition:opacity 50ms;animation:.35s linear infinite spin-lines;position:absolute;inset:-10%;-webkit-mask-image:radial-gradient(circle,#0000 38%,#000 82%);mask-image:radial-gradient(circle,#0000 38%,#000 82%)}@keyframes spin-lines{to{transform:rotate(9deg)}}.fx-damage{opacity:0;background:radial-gradient(circle,#0000 45%,#ff1e3299 100%);position:absolute;inset:0}.fx-flash{opacity:0;mix-blend-mode:soft-light;background:#fff;position:absolute;inset:0}.overlay{padding:calc(var(--sat) + 12px) calc(var(--sar) + 14px) calc(var(--sab) + 12px) calc(var(--sal) + 14px);display:flex;position:absolute;inset:0}.overlay.center{justify-content:center;align-items:center}.overlay.dim{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#00040c99}.panel{background:var(--panel);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);border:1px solid #35e0ff66;flex-direction:column;gap:12px;min-width:min(86vw,340px);max-height:100%;padding:22px 26px;display:flex;overflow:auto;box-shadow:0 0 30px #1b8cff40,inset 0 0 30px #35e0ff0d}.panel h2{letter-spacing:.25em;text-align:center;color:var(--cy);margin:0 0 4px}.row{flex-wrap:wrap;gap:10px;display:flex}.row>*{flex:1}.btn{letter-spacing:.15em;color:#dff4ff;text-shadow:0 0 8px #35e0ff99;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);background:linear-gradient(#1b8cff47,#0a285a80);border:1px solid #35e0ff8c;padding:11px 22px;font-weight:700;transition:filter .1s,transform .1s}.btn:hover{filter:brightness(1.35)}.btn:active{transform:scale(.97)}.btn.primary{color:#fff;background:linear-gradient(#1fb8ff,#0a58d8);border-color:#9fefff;box-shadow:0 0 22px #35e0ff80}.btn.big{padding:14px 40px;font-size:clamp(18px,3.2vmin,26px)}.btn.small{padding:7px 12px;font-size:13px}.btn.on{color:#012;text-shadow:none;background:linear-gradient(#2fe6c0,#0a8a78);border-color:#b8fff0}.btn:disabled{opacity:.55;pointer-events:none}.loading{letter-spacing:.4em;color:var(--cy);text-shadow:0 0 12px var(--cy);pointer-events:none;animation:.9s infinite blink;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes blink{50%{opacity:.35}}.title{background:radial-gradient(at 50% 60%,#02081426,#000208c7 80%);justify-content:center;align-items:center}.title-box{text-align:center;flex-direction:column;align-items:center;gap:14px;max-width:760px;display:flex}.title-sub{letter-spacing:.5em;color:var(--cy);font-size:clamp(10px,2vmin,14px)}.title h1{letter-spacing:.06em;text-shadow:0 0 24px #35e0ffb3,0 0 60px #1b8cff80;margin:0;font-size:clamp(34px,9vmin,84px);font-style:italic;font-weight:900;line-height:1}.title h1 span{color:var(--cy)}.title-jp{letter-spacing:.3em;opacity:.85;margin:0 0 12px;font-size:clamp(11px,2vmin,15px)}.howto{opacity:.8;max-width:640px;margin-top:8px;font-size:clamp(11px,1.9vmin,14px);line-height:1.7}.howto b{color:var(--cy);padding:0 2px;font-weight:700}.select{pointer-events:none;flex-direction:column;justify-content:space-between;gap:8px}.select>*{pointer-events:auto}.sel-head{align-items:center;gap:14px;display:flex}.sel-head h2{letter-spacing:.3em;color:var(--cy);margin:0;font-size:clamp(13px,2.4vmin,20px)}.sel-info{border-left:3px solid var(--mc);width:min(340px,46vw);left:calc(var(--sal) + 14px);top:calc(var(--sat) + 62px);background:linear-gradient(90deg,#020a18d1,#020a1800);align-self:flex-start;padding:12px 14px;position:absolute}.mname{letter-spacing:.08em;color:var(--mc);text-shadow:0 0 14px var(--mc);font-size:clamp(18px,3.6vmin,28px);font-weight:900}.mkana{opacity:.8;letter-spacing:.2em;margin-bottom:6px;font-size:13px}.mdesc{opacity:.9;margin:4px 0 8px;font-size:clamp(11px,1.9vmin,13px);line-height:1.5}.stat-list{gap:4px;display:grid}.stat{letter-spacing:.1em;grid-template-columns:52px 1fr;align-items:center;font-size:11px;display:grid}.bar{background:#78b4ff26;border:1px solid #78c8ff59;height:7px;position:relative;overflow:hidden}.bar .fill{background:linear-gradient(90deg, var(--mc,var(--cy2)), #fff);height:100%;transition:width .25s}.weapons{gap:2px;margin-top:8px;font-size:12px;display:grid}.weapons b{width:52px;color:var(--cy);letter-spacing:.1em;font-size:11px;display:inline-block}.sel-bottom{flex-direction:column;gap:8px;margin-top:auto;display:flex}.cards{scrollbar-width:none;touch-action:pan-x;gap:8px;padding:4px 2px 6px;display:flex;overflow-x:auto}.cards::-webkit-scrollbar{display:none}.card{letter-spacing:.05em;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:#040e1ecc;border:1px solid #78c8ff4d;flex-direction:column;flex:none;align-items:center;gap:6px;min-width:clamp(74px,12vw,120px);padding:9px 10px;font-size:clamp(10px,1.8vmin,13px);display:flex}.card i{background:var(--mc);width:100%;height:6px;box-shadow:0 0 12px var(--mc)}.card.sel{border-color:var(--mc);box-shadow:0 0 18px var(--mc);background:#14325ad9;transform:translateY(-3px)}.sel-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.diff{gap:6px;display:flex}.hud{pointer-events:none;padding:calc(var(--sat) + 8px) calc(var(--sar) + 12px) calc(var(--sab) + 8px) calc(var(--sal) + 12px);letter-spacing:.08em;font-weight:700;position:absolute;inset:0}.hud-top{grid-template-columns:1fr auto 1fr;align-items:start;gap:10px;display:grid}.side .name{text-shadow:0 0 8px #000;margin-bottom:3px;font-size:clamp(10px,2.1vmin,15px)}.side.right{text-align:right}.bar.hp{background:#0000008c;border-color:#ffffff8c;height:clamp(10px,2.2vmin,18px);transform:skew(-18deg)}.side.right .bar.hp{transform:skew(18deg)}.side.right .bar.hp .fill,.side.right .bar.hp .ghost{margin-left:auto}.bar.hp .fill{z-index:2;background:linear-gradient(90deg,#26e0a0,#b6ff7a);height:100%;transition:width .12s;position:absolute;top:0}.side.right .bar.hp .fill{background:linear-gradient(270deg,#ff8a3a,#ffd66a);right:0}.bar.hp .ghost{opacity:.8;z-index:1;background:#fff;height:100%;transition:width .9s .35s;position:absolute;top:0}.side.right .bar.hp .ghost{right:0}.bar.hp.low .fill{background:linear-gradient(90deg,#ff3050,#ff8060);animation:.5s infinite blink}.pips{gap:5px;margin-top:5px;display:flex}.pips.flip{justify-content:flex-end}.pips i{background:#00000080;border:1px solid #fff;width:14px;height:14px;transform:rotate(45deg)}.pips i.on{background:var(--cy);box-shadow:0 0 10px var(--cy)}.hud-top .center{text-align:center;min-width:70px}.timer{text-shadow:0 0 14px var(--cy2);font-size:clamp(26px,7vmin,52px);font-weight:900;line-height:1}.timer.low{color:var(--red);text-shadow:0 0 14px var(--red);animation:.5s infinite blink}.round{opacity:.8;letter-spacing:.25em;font-size:10px}.pause-btn{pointer-events:auto;top:calc(var(--sat) + 70px);right:calc(var(--sar) + 12px);color:#fff;background:#040e1eb3;border:1px solid #78c8ff80;width:38px;height:38px;font-weight:900;position:absolute}.hud-bottom{left:calc(var(--sal) + 14px);bottom:calc(var(--sab) + 14px);position:absolute}.touch .hud-bottom{bottom:auto;top:calc(var(--sat) + 70px)}.gauge{gap:4px;width:clamp(150px,28vmin,260px);display:grid}.gauge .label{letter-spacing:.2em;opacity:.9;justify-content:space-between;align-items:center;font-size:11px;display:flex}.bar.boost{background:#0000008c;height:9px}.bar.boost .fill{background:linear-gradient(90deg,#1b8cff,#35e0ff,#fff);transition:width 50ms}.bar.boost.empty .fill{background:#ff5a3a}.pipsrow{gap:3px;display:inline-flex}.pipsrow i{background:#ffffff26;border:1px solid #ffffff80;width:9px;height:9px}.pipsrow i.on{background:#ffe27a;box-shadow:0 0 8px #ffb030}.reticle{aspect-ratio:1;color:#6dffb0;opacity:0;filter:drop-shadow(0 0 6px);width:clamp(70px,14vmin,130px);position:absolute;top:0;left:0}.reticle[data-near="1"]{color:#ff5a6a}.reticle svg{animation:2.2s linear infinite reticle}@keyframes reticle{to{transform:rotate(360deg)}}.reticle .dist{letter-spacing:.1em;text-shadow:0 0 6px #000;font-size:11px;position:absolute;top:100%;left:50%;transform:translate(-50%)}.warning{letter-spacing:.5em;color:#ff4a4a;text-shadow:0 0 16px red;border-top:2px solid #f44;border-bottom:2px solid #f44;padding:2px 16px;font-size:clamp(16px,3.6vmin,30px);animation:.35s infinite blink;display:none;position:absolute;top:22%;left:50%;transform:translate(-50%)}.banner{text-align:center;letter-spacing:.12em;text-shadow:0 0 30px var(--cy), 0 0 6px #fff;font-size:clamp(36px,11vmin,110px);font-style:italic;font-weight:900;animation:.5s cubic-bezier(.2,1.4,.4,1) pop;position:absolute;top:36%;left:0;right:0}.banner.ko{color:#ff6a4a;text-shadow:0 0 30px #f60,0 0 6px #fff}.banner.fight{color:#fff56a;text-shadow:0 0 30px #fa0,0 0 6px #fff}@keyframes pop{0%{opacity:0;transform:scale(2.4)}to{opacity:1;transform:scale(1)}}.result{text-align:center;min-width:min(90vw,420px)}.verdict{letter-spacing:.1em;font-size:clamp(34px,9vmin,64px);font-style:italic;font-weight:900}.verdict.win{color:#fff56a;text-shadow:0 0 28px #fa0}.verdict.lose{color:#ff6a7a;text-shadow:0 0 28px #f03}.vs{opacity:.85;letter-spacing:.1em;font-size:12px}.vs span{color:var(--cy)}.score{letter-spacing:.2em;font-size:28px;font-weight:900}.stats{border-collapse:collapse;width:100%;font-size:13px}.stats td,.stats th{border-bottom:1px solid #78c8ff33;padding:4px 8px}.stats th{color:var(--cy);letter-spacing:.2em}.touch-ui{pointer-events:none;position:absolute;inset:0}.stick-zone{pointer-events:auto;touch-action:none;width:46%;height:62%;position:absolute;bottom:0;left:0}.stick-hint{left:calc(var(--sal) + 6vmin);bottom:calc(var(--sab) + 8vmin);letter-spacing:.3em;color:#78dcff99;border:2px dashed #78dcff59;border-radius:50%;justify-content:center;align-items:center;width:26vmin;max-width:150px;height:26vmin;max-height:150px;font-size:11px;display:flex;position:absolute}.stick{pointer-events:none;background:#14508c40;border:2px solid #78e6ffb3;border-radius:50%;position:fixed;box-shadow:0 0 20px #35e0ff4d}.knob{background:radial-gradient(circle at 35% 30%,#fff,#35e0ff 60%,#1b8cff);border-radius:50%;width:46px;height:46px;margin:-23px 0 0 -23px;position:absolute;top:50%;left:50%;box-shadow:0 0 14px #35e0ff}.btn-grid{right:calc(var(--sar) + 2vmin);bottom:calc(var(--sab) + 2vmin);grid-template-columns:repeat(3, var(--b));grid-template-rows:repeat(2, var(--b));pointer-events:auto;gap:1.4vmin;display:grid;position:absolute}.tbtn{width:var(--b);height:var(--b);color:#fff;touch-action:none;background:radial-gradient(circle at 35% 30%,#50aaff8c,#081e46b3);border:2px solid #a0ebffbf;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;padding:0;line-height:1.1;display:flex;box-shadow:0 0 14px #35e0ff4d}.tbtn b{letter-spacing:.06em;font-size:clamp(10px,2.3vmin,15px)}.tbtn small{opacity:.8;text-overflow:ellipsis;white-space:nowrap;max-width:88%;font-size:clamp(7px,1.5vmin,10px);overflow:hidden}.tbtn.down{filter:brightness(1.6);transform:scale(.92)}.c-dash{grid-area:1/1}.c-jump{grid-area:1/2}.c-melee{background:radial-gradient(circle at 35% 30%,#ffbe508c,#461e08b3);border-color:#ffc860;grid-area:1/3}.c-lock{border-color:#ffe27a;grid-area:2/2}.c-shot{background:radial-gradient(circle at 35% 30%,#ff6e8299,#460814b3);border-color:#ff7a8a;grid-area:2/3}.c-dash{transform:translate(-.4vmin)}@media (orientation:portrait){.sel-info{width:100%;max-width:none;margin-top:4px;position:static}.select{justify-content:flex-start}.touch .hud-bottom{top:calc(var(--sat) + 92px)}.btn-grid{--b:clamp(54px, 19vw, 84px)}}@media (height<=460px){.panel{gap:8px;padding:12px 16px}.sel-info{top:calc(var(--sat) + 48px);width:min(300px,40vw)}.stat-list{grid-template-columns:1fr 1fr;column-gap:10px}.mdesc{display:none}}