*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden;font-family:Be Vietnam Pro,Segoe UI,Tahoma,sans-serif;background:#0a0a15;color:#fff;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}button{font-family:inherit;color:inherit}.screen{position:absolute;inset:0;display:flex;flex-direction:column}.hidden{display:none!important}#select-screen{align-items:center;justify-content:safe center;padding:24px 16px;overflow-y:auto;background:radial-gradient(circle at 50% 30%,rgba(168,85,247,.18) 0%,transparent 55%),radial-gradient(circle at center,#1a1a3a,#05050f)}#select-screen h1{font-size:clamp(30px,6vw,56px);font-weight:800;letter-spacing:6px;background:linear-gradient(90deg,gold,#f44,#00d4ff,#0f8,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px;text-align:center}.tagline{color:#ffd27a;font-size:16px;letter-spacing:3px;margin-bottom:4px;text-align:center}.subtitle{color:#aaa;margin-bottom:18px;font-size:14px;text-align:center}.mode-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;justify-content:center}.pill{padding:10px 22px;border-radius:999px;border:2px solid #444;background:#ffffff0a;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s}.pill.small{padding:6px 16px;font-size:13px}.pill:hover{border-color:#888}.pill.active{border-color:gold;background:#ffd70026;color:gold}.select-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;width:100%;max-width:1400px;margin-top:10px}.player-column h2{font-size:20px;margin-bottom:4px}.hint{font-size:12px;color:#888;font-weight:400}.char-list{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}.char-card{--el: #333;aspect-ratio:1;border:2px solid var(--el);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;padding:6px;font-size:12px;text-align:center;background:linear-gradient(180deg,#ffffff0d,#00000040);min-width:0}.char-card:hover{transform:translateY(-3px);box-shadow:0 0 14px var(--el)}.char-card.selected{border-color:gold;box-shadow:0 0 20px #ffd70099,inset 0 0 18px var(--el);background:#ffd70014}.char-card .icon{font-size:30px;margin-bottom:2px}.char-card .portrait{width:100%;flex:1;min-height:0;object-fit:contain;filter:drop-shadow(0 0 6px var(--el))}.char-card:has(.portrait){aspect-ratio:3 / 4;padding:4px 4px 6px;justify-content:flex-end}.char-card .name{font-weight:800;color:var(--el);font-size:12px;line-height:1.15}.char-card .meta{font-size:10px;color:#aaa;line-height:1.3}.picked{margin-top:12px;color:gold;font-size:14px;min-height:64px;line-height:1.4}.picked small{color:#bbb;font-size:12px}#start-btn{margin-top:22px;padding:16px 48px;font-size:20px;font-weight:800;letter-spacing:4px;background:linear-gradient(135deg,#f44,gold);color:#000;border:none;border-radius:10px;cursor:pointer;transition:transform .2s;flex-shrink:0}#start-btn:disabled{opacity:.45;cursor:not-allowed}#start-btn:not(:disabled):hover{transform:scale(1.05)}.footnote{margin-top:14px;color:#777;font-size:12px;text-align:center}#game-screen{overflow:hidden}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.hud-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 20px;z-index:10;pointer-events:none}.player-hud{flex:1;max-width:42%;background:#00000080;border:2px solid #444;border-radius:10px;padding:8px 12px;transition:box-shadow .3s}.player-hud.left{border-color:#4dd0e1}.player-hud.right{border-color:#ff8a65;text-align:right}.player-hud.low{animation:lowhp .8s infinite alternate}@keyframes lowhp{to{box-shadow:0 0 18px #ff2828e6}}.player-hud .name{font-size:15px;font-weight:800;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar{height:16px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin-bottom:4px;position:relative}.bar .fill,.bar .lag{position:absolute;top:0;bottom:0;left:0;width:100%}.player-hud.right .bar .fill,.player-hud.right .bar .lag{left:auto;right:0}.bar .fill{transition:width .12s ease-out}.bar .lag{background:#fff6;transition:width .6s ease .35s}.bar.hp .fill{background:linear-gradient(90deg,#ff3838,#ff6b6b)}.player-hud.right .bar.hp .fill{background:linear-gradient(90deg,#ff6b6b,#ff3838)}.bar.energy{height:8px}.bar.energy:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:#ffd700e6;z-index:2}.campaign-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}.stage{--el: #888;display:flex;align-items:center;gap:10px;padding:5px 10px;border:2px solid #3a3a55;border-left:5px solid var(--el);border-radius:8px;background:#ffffff0a;cursor:pointer;text-align:left;transition:transform .12s,border-color .12s}.stage:hover:not(:disabled){transform:translate(3px);border-color:#888}.stage.selected{border-color:gold;background:#ffd7001f;box-shadow:0 0 12px #ffd70059}.stage.locked{opacity:.4;cursor:not-allowed}.stage.boss{background:linear-gradient(90deg,#b4141440,#ffffff08)}.stage-no{font-weight:800;color:#ffd27a;min-width:44px;font-size:13px}.stage-face{width:34px;height:34px;object-fit:contain;font-size:24px;text-align:center;flex-shrink:0}.stage-info{flex:1;display:flex;flex-direction:column;min-width:0}.stage-info b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-info small{color:#aaa;font-size:11px}.stage-status{font-size:18px}.stage-badge{font-size:12px;font-weight:800;color:#ffd27a;background:#0000008c;border:1px solid #ffd27a88;border-radius:6px;padding:1px 8px;white-space:nowrap}#center-text.title{font-size:clamp(30px,6vw,72px);color:#ffd27a;letter-spacing:3px;padding:0 16px}.style-tag{display:inline-block;padding:0 4px;border-radius:4px;font-weight:700;font-size:9px}.style-tag.melee{background:#b71c1c;color:#fff}.style-tag.ranged{background:#1565c0;color:#fff}.bar.energy .fill{background:linear-gradient(90deg,#4facfe,#00f2fe);width:0%}.bar.energy .fill.full{background:linear-gradient(90deg,gold,#fff176);animation:glow .6s infinite alternate}@keyframes glow{to{filter:brightness(1.5)}}.center-info{display:flex;flex-direction:column;align-items:center;gap:6px}.timer{min-width:64px;text-align:center;font-size:34px;font-weight:800;color:gold;text-shadow:0 0 10px rgba(255,200,0,.7);background:#00000080;border:2px solid #ffd70088;border-radius:10px;padding:2px 10px}.timer.urgent{color:#ff5252;border-color:#ff5252;animation:glow .5s infinite alternate}.top-buttons{display:flex;gap:6px;pointer-events:auto}.icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid #555;background:#0000008c;font-size:16px;cursor:pointer}.icon-btn:hover{border-color:gold}#center-text{position:absolute;top:38%;left:0;right:0;text-align:center;font-size:clamp(56px,12vw,140px);font-weight:800;color:#fff;text-shadow:0 0 30px rgba(255,215,0,.8),0 6px 0 rgba(0,0,0,.6);z-index:15;pointer-events:none;transform:translateY(-50%)}#center-text.fight{color:gold}#center-text.ko{color:#ff3b3b;text-shadow:0 0 40px rgba(255,0,0,.9),0 6px 0 rgba(0,0,0,.6)}#center-text.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}@keyframes pop{0%{transform:translateY(-50%) scale(2.2);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}.hud-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:16px 24px;z-index:10;pointer-events:none}.skill-bar{display:flex;gap:8px;align-items:flex-end}.skill-bar.right{flex-direction:row-reverse}.skill-slot{background:#0009;border:2px solid #666;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:opacity .15s}.skill-slot .icon{font-size:22px;z-index:1}.skill-slot .key{position:absolute;top:2px;left:5px;font-size:11px;font-weight:800;color:gold;z-index:2}.skill-slot .cd-mask{position:absolute;bottom:0;left:0;right:0;height:0%;background:#000000b3;pointer-events:none;z-index:1}.skill-slot.ultimate{border-color:gold}.skill-slot.ultimate.charged{box-shadow:0 0 18px #ffd700e6;animation:glow .6s infinite alternate}.skill-slot.locked{opacity:.5}.skill-slot.block{border-color:#7dd3fc;border-radius:50%}.skill-slot.block.active{box-shadow:0 0 16px #7dd3fce6;border-color:#fff}.skill-slot[data-idx=b]{width:44px;height:44px}#screen-flash{position:absolute;inset:0;pointer-events:none;z-index:9;opacity:0}#screen-flash.on{animation:screenflash .6s ease-out}@keyframes screenflash{0%{opacity:.85}to{opacity:0}}.skill-slot[data-idx="0"]{width:44px;height:44px}.skill-slot[data-idx="1"]{width:54px;height:54px}.skill-slot[data-idx="2"]{width:66px;height:66px}.skill-slot[data-idx="3"]{width:80px;height:80px}.skill-slot[data-idx="3"] .icon{font-size:32px}.overlay{position:absolute;inset:0;background:#000000bf;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;padding:20px;text-align:center}.overlay h1{font-size:clamp(36px,7vw,68px);font-weight:800;color:gold;text-shadow:0 0 30px #ff0;margin-bottom:10px}#winner-sub{color:#ccc;margin-bottom:28px;min-height:1em}#pause-overlay h1{margin-bottom:28px}.overlay-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.btn{padding:14px 32px;font-size:17px;font-weight:800;letter-spacing:2px;background:#ffffff1a;border:2px solid #ffd700;border-radius:10px;cursor:pointer;transition:transform .15s}.btn.primary{background:gold;color:#000}.btn:hover{transform:scale(1.05)}#touch-controls{position:absolute;left:0;right:0;bottom:110px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:12;pointer-events:none}#touch-controls button{pointer-events:auto;touch-action:none;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:#00000073;font-size:22px;font-weight:800}#touch-controls button[data-idx]{--cd: 0%;background:conic-gradient(rgba(0,0,0,.7) var(--cd),transparent 0),#00000073}#touch-controls button.locked{opacity:.55}#touch-controls button.charged{box-shadow:0 0 16px #ffd700e6}#touch-controls button.pressed{background:#ffd70073;border-color:gold}.touch-mode .hud-bottom{display:none}.touch-mode #touch-controls{bottom:calc(18px + env(safe-area-inset-bottom))}.touch-move{display:flex;gap:14px}.touch-move button{width:72px;height:72px}.touch-skills{display:grid;grid-template-columns:repeat(3,60px);gap:10px}.touch-skills button{width:60px;height:60px}.touch-skills button[data-idx=b]{border-color:#7dd3fc}.touch-skills button[data-idx="3"]{border-color:gold;color:gold}@media (max-width: 768px){.select-grid{grid-template-columns:1fr;gap:12px}.char-list{gap:6px;grid-template-columns:repeat(4,1fr)}.char-card .icon{font-size:22px}.char-card .meta{display:none}.hud-top{padding:8px 10px}.player-hud{padding:5px 8px}.player-hud .name{font-size:12px}.timer{font-size:24px;min-width:48px}.hud-bottom{padding:8px 10px}.skill-slot[data-idx=b],.skill-slot[data-idx="0"]{width:34px;height:34px}.skill-slot[data-idx="1"]{width:40px;height:40px}.skill-slot[data-idx="2"]{width:46px;height:46px}.skill-slot[data-idx="3"]{width:54px;height:54px}.skill-slot .icon{font-size:16px}.skill-slot[data-idx="3"] .icon{font-size:22px}}@media (max-height: 500px){#touch-controls{bottom:70px}.hud-bottom{padding:6px 10px}}