:root{--bg:#0f1218;--panel:#171c25;--line:#2a3140;--text:#e8ecf2;--dim:#98a3b5;--a:#4aa3ff;--b:#ff6b4a;--accent:#ffd54a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;font:16px/1.35 system-ui,-apple-system,Segoe UI,sans-serif}body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#app{height:100%}button{font:inherit;color:inherit;border:1px solid var(--line);cursor:pointer;touch-action:manipulation;background:#222a37;border-radius:10px;min-height:44px;padding:10px 14px}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);color:#1a1500;border-color:#0000;font-weight:700}.a{color:var(--a)}.b{color:var(--b)}.select{max-width:760px;padding:max(16px, env(safe-area-inset-top)) 16px 24px;height:100%;margin:0 auto;overflow-y:auto}.select h1{margin:8px 0 4px;font-size:1.8rem}.lead,.fine{color:var(--dim);margin:4px 0 14px}.cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;display:grid}.card{text-align:left;background:var(--panel);flex-direction:column;gap:6px;padding:12px;display:flex}.card-head{align-items:baseline;gap:8px;font-size:1.1rem;display:flex}.card-head .hp{color:var(--dim);margin-left:auto;font-size:.9rem}.card-line{color:var(--dim);font-size:.85rem}.card-line b{color:var(--text)}.card-line i{color:var(--accent);text-transform:uppercase;font-size:.75rem;font-style:normal}.role{text-transform:uppercase;letter-spacing:.05em;color:var(--dim);background:#2a3140;border-radius:6px;padding:2px 6px;font-size:.7rem}.role.frontline{color:#ffb347}.role.firepower{color:#ff8a8a}.role.support{color:#7fe7ff}.levels{gap:6px;margin:0 0 14px;display:flex}.level{flex:1;padding:8px}.level.chosen{border-color:var(--accent);background:#2d2a14}.look{background:var(--panel);border:1px solid var(--line);border-radius:10px;align-items:center;gap:12px;margin:0 0 14px;padding:10px 12px;display:flex}.look-preview{background:radial-gradient(circle at 50% 70%,#2b2160,#150a2e 70%);border-radius:8px;flex:none;width:80px;height:100px}.look-options{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.look-note{color:var(--dim);font-size:.85rem}.look-row{flex-wrap:wrap;gap:6px;display:flex}.look-row .level{flex:auto;padding:6px 8px;font-size:.85rem}.look-stage{flex-direction:column;flex:none;align-items:center;gap:4px;width:92px;display:flex}.look-caption{color:var(--dim);text-align:center;min-height:2em;font-size:.75rem}.look-help{color:var(--dim);margin:0;font-size:.8rem}.look-help b{color:var(--text)}.look-race{flex-direction:column;align-items:center;gap:2px;padding:4px 6px;display:flex}.look-row .look-race{flex:28%;min-width:52px;padding:4px;font-size:.75rem}.look-thumb{background:radial-gradient(circle at 50% 70%,#2b2160,#150a2e 70%);border-radius:6px;width:36px;height:45px}.look-plain{flex-wrap:wrap;align-items:center;gap:6px;font-size:.85rem;display:flex}.look-plain input{width:18px;height:18px;margin:0}.look-is-plain .look-row{opacity:.45}@media (orientation:landscape) and (min-width:1100px){.select.title{grid-template-rows:auto auto;grid-template-columns:minmax(400px,.8fr) 1.2fr;align-content:safe center;column-gap:32px;max-width:1440px;display:grid}.select.title .select-intro{grid-area:1/1}.select.title .select-foot{grid-area:2/1;align-self:start}.select.title .cards{grid-area:1/2/3;grid-template-columns:1fr 1fr;align-self:center}.select.picks{max-width:1280px}.select.picks .cards{grid-template-columns:repeat(4,1fr)}}.game{--gold:#ffd54a;--glass:#0f1218b8;height:100%;padding-top:env(safe-area-inset-top);grid-template-rows:auto 1fr auto;grid-template-columns:1fr;display:grid}.topbar{background:linear-gradient(180deg, #1b2130, var(--panel));border-bottom:1px solid var(--line);z-index:3;grid-template-columns:1fr auto 1fr;grid-template-areas:"turn score timer""energy energy energy";align-items:center;gap:4px 10px;padding:6px 12px 8px;display:grid;position:relative;box-shadow:0 2px 12px #00000059}.tb-turn{white-space:nowrap;grid-area:turn}.tb-turn b{font-variant-numeric:tabular-nums;font-size:1.15rem}.tb-turn small{color:var(--dim);font-size:.75rem}.tb-turn .you{margin:0;font-size:.7rem;display:block}.score{font-variant-numeric:tabular-nums;grid-area:score;align-items:center;gap:6px;font-size:1.35rem;font-weight:800;display:flex}.score .dash{color:var(--dim);font-weight:400}.pips{gap:3px;display:flex}.pips.a{flex-direction:row-reverse}.pips i{opacity:.55;border:1px solid;border-radius:50%;width:7px;height:7px}.pips i.on{opacity:1;background:currentColor;box-shadow:0 0 6px}.timer{grid-area:timer;justify-self:end;place-items:center;width:42px;height:42px;display:grid;position:relative}.timer svg{position:absolute;inset:0;transform:rotate(-90deg)}.timer circle{fill:none;stroke-width:3.5px}.timer .track{stroke:#2a3140}.timer .arc{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100px;transition:stroke-dashoffset .25s linear}.timer b{font-variant-numeric:tabular-nums;font-size:1.05rem;position:relative}.timer.low .arc{stroke:var(--b)}.timer.low b{color:var(--b);animation:1s infinite beat}@keyframes beat{50%{transform:scale(1.18)}}.tb-energy{grid-area:energy;align-items:center;gap:8px;min-width:0;display:flex}.tb-energy .bolt{color:var(--gold);text-shadow:0 0 8px #ffd54a99;font-size:1.1rem}.meter{border:1px solid var(--line);background:#0b0d11;border-radius:6px;flex:1;min-width:60px;height:10px;position:relative;overflow:hidden}.meter.big{border-radius:9px;height:18px}.meter .fill{background:linear-gradient(90deg, #b8860b, var(--gold));width:0;transition:width .4s;position:absolute;inset:0 auto 0 0}.meter .cost{background:repeating-linear-gradient(-45deg,#fff3b0 0 4px,#b8860b 4px 8px);animation:.9s ease-in-out infinite alternate spend;position:absolute;top:0;bottom:0}.meter .cost[hidden]{display:none}@keyframes spend{0%{opacity:.35}to{opacity:.85}}.meter .notch{z-index:1;background:#ffffff59;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.meter .num{z-index:2;color:#fff;text-shadow:0 0 3px #000,0 0 2px #000;place-items:center;font-size:.72rem;line-height:1;display:grid;position:absolute;inset:0}.meter:not(.big) .num{display:none}.meter[data-tier="1"]{box-shadow:0 0 6px #ffd54a4d}.meter[data-tier="2"]{box-shadow:0 0 10px #ffd54a80}.meter[data-tier="3"]{border-color:var(--gold);box-shadow:0 0 14px #ffd54ad9}.meter[data-tier="3"] .fill{background:linear-gradient(90deg,#ffb300,#fff3b0,#ffb300) 0 0/200% 100%;animation:1.2s linear infinite charged}@keyframes charged{to{background-position:-200% 0}}.boost{white-space:nowrap;background:#232a38;border-radius:20px;align-items:center;gap:6px;min-height:40px;padding:6px 12px;font-weight:700;display:flex}.boost .lvl{gap:3px;display:flex}.boost .lvl i{border:1px solid var(--gold);border-radius:50%;width:8px;height:8px}.boost kbd{font:inherit;color:var(--dim);border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:.65rem;display:none}.boost[data-level="1"],.boost[data-level="2"]{color:#1a1300;border-color:var(--gold);background:linear-gradient(#ffe27a,#e6a700);box-shadow:0 0 12px #ffd54a8c}.boost[data-level="1"] .lvl i:first-child,.boost[data-level="2"] .lvl i{background:#1a1300;border-color:#1a1300}.boost[data-level="2"]{box-shadow:0 0 20px #ffd54ae6}.boost:disabled{opacity:.4;filter:grayscale(.8)}.board{min-height:0;position:relative;overflow:hidden}.board canvas{touch-action:none;display:block;position:absolute;inset:0}.roster{flex-direction:column;gap:4px;display:flex}.rcard{border:1px solid var(--line);background:#1d2330;border-radius:10px;grid-template-columns:auto 1fr auto;grid-template-areas:"badge name hp""badge bars bars";align-items:center;gap:2px 8px;padding:5px 8px;display:grid}.rcard .badge{grid-area:badge}.rcard .rname{white-space:nowrap;text-overflow:ellipsis;grid-area:name;font-size:.85rem;font-weight:600;overflow:hidden}.rcard .rname em{color:#1a1300;background:var(--gold);vertical-align:1px;border-radius:4px;margin-left:2px;padding:0 4px;font-size:.65rem;font-style:normal}.rcard .rhp{color:var(--dim);font-variant-numeric:tabular-nums;grid-area:hp;font-size:.78rem}.rcard .bars{flex-direction:column;grid-area:bars;gap:2px;display:flex}.rcard.self{border-color:#ffd54a99}.rcard.down,.rcard.unseen{opacity:.45}.rcard[data-tier="2"] .bar.en i{box-shadow:0 0 6px var(--gold)}.rcard[data-tier="3"]{border-color:var(--gold);box-shadow:0 0 10px #ffd54a73,inset 0 0 12px #ffd54a26}.badge{color:#0b0d11;background:var(--own);border-radius:50%;flex:none;place-items:center;width:26px;height:26px;font-size:.85rem;font-weight:800;display:grid}.badge.team-A,.rcard.team-A .badge{background:var(--a)}.badge.team-B,.rcard.team-B .badge{background:var(--b)}.rcard.enemy .badge{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0}.bar{background:#0b0d11;border-radius:3px;height:5px;display:block;position:relative;overflow:hidden}.bar i{transition:width .35s;position:absolute;inset:0 auto 0 0}.bar.hp i{background:#58d68d}.bar.hp.low i{background:#f1c40f}.bar.en{height:3px}.bar.en i{background:var(--gold)}.team-head{letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:2px;font-size:.7rem}.roster.mini{z-index:2;pointer-events:none;width:74px;position:absolute;top:6px;left:6px}.roster.mini .rcard{background:var(--glass);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);grid-template-columns:auto 1fr;grid-template-areas:"badge bars";gap:5px;padding:3px 5px}.roster.mini .badge{width:20px;height:20px;font-size:.7rem}.roster.full,.team-head{display:none}.panel{background:var(--panel);border-top:1px solid var(--line);padding:8px 10px max(10px, env(safe-area-inset-bottom));z-index:3;flex-direction:column;gap:6px;display:flex;position:relative;box-shadow:0 -2px 12px #00000059}.panel>*{flex-shrink:0}.panel>.log{flex-shrink:1}.who{align-items:center;gap:8px;display:flex}.who .badge{box-shadow:0 0 0 2px var(--gold)}.who-main{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.who-line{align-items:baseline;gap:8px;display:flex}.who .hp-num{color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto;font-size:.85rem}.who .bar.hp{height:6px}.who .meter{border:0;flex:none;height:4px}.hint{color:var(--dim);min-height:2.4em;font-size:.88rem}.hint.warn{color:var(--accent)}.ready{color:var(--dim);font-size:.8rem}.ready:empty{display:none}.abilities{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.abilities:empty{display:none}.ability{text-align:center;background:linear-gradient(#262e3d,#1e2531);border-radius:12px;flex-direction:column;justify-content:center;min-height:58px;padding:8px 4px 6px;font-size:.9rem;line-height:1.15;display:flex;position:relative;overflow:hidden}.ability:before{content:"";background:var(--phase,#6b7385);height:3px;position:absolute;inset:0 0 auto}.ability[data-phase=prep]{--phase:#7fe7ff}.ability[data-phase=dash]{--phase:#58d68d}.ability[data-phase=blast]{--phase:#ff8a6a}.ability small{color:var(--dim);font-size:.74rem}.ability.chosen{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:linear-gradient(#3a3418,#2a2612)}.ability.boosted{box-shadow:0 0 0 1px var(--gold) inset, 0 0 14px #ffd54a99}.ability .boost-tag{color:#1a1300;background:var(--gold);border-radius:6px;padding:0 4px;font-size:.7rem;font-weight:800}.ability.ult{background:linear-gradient(90deg, #ffd54a38 var(--charge,0%), transparent var(--charge,0%)), linear-gradient(180deg, #262e3d, #1e2531);grid-column:1/-1;min-height:48px}.ability.ult:disabled{opacity:.75}.ability.ult.ready{color:#1a1300;border-color:var(--gold);background:linear-gradient(90deg,#ffb300,#fff3b0,#ffb300) 0 0/200% 100%;animation:1.6s linear infinite charged;box-shadow:0 0 16px #ffd54ab3}.ability.ult.ready small{color:#4a3a00}.ability.ult.chosen{box-shadow:inset 0 0 0 2px #fff,0 0 22px #ffd54af2}.ability .cd{color:#fff;background:#4a5263;border-radius:9px;place-items:center;min-width:18px;height:18px;font-size:.72rem;font-weight:800;display:grid;position:absolute;top:5px;right:6px}.actions{gap:8px;display:flex}.actions button{border-radius:12px}.actions .primary{flex:1;font-size:1.05rem;box-shadow:0 0 14px #ffd54a4d}.log{color:var(--dim);cursor:pointer;height:2.9em;font-size:.82rem;overflow-y:auto}@media (orientation:landscape) and (min-width:700px){.game{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);grid-template-rows:auto 1fr;grid-template-columns:1fr clamp(300px,21vw,380px)}.topbar{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;grid-template-areas:"turn score energy timer";gap:16px;padding:6px 16px}.tb-turn .you{margin-left:10px;display:inline}.tb-energy{justify-self:end;width:min(100%,420px)}.boost kbd{display:inline}.boost[data-level="1"] kbd,.boost[data-level="2"] kbd{color:#4a3a00;border-color:#4a3a00}.score{font-size:1.6rem}.pips i{width:9px;height:9px}.timer{width:46px;height:46px}.panel{border-top:0;border-left:1px solid var(--line);gap:8px;padding:12px;overflow-y:auto;box-shadow:-2px 0 12px #00000059}.who{background:#1d2330;border:1px solid #ffd54a59;border-radius:12px;padding:8px}.who .badge{width:34px;height:34px;font-size:1rem}.who .meter{height:5px}.abilities{grid-template-columns:1fr 1fr}.roster.mini{display:none}.roster.full{display:flex}.team-head{display:block}.roster.full .self{display:none}.log{flex:1;height:auto;min-height:4em}}@media (orientation:landscape) and (max-height:500px){.roster.full,.team-head{display:none}.ability{min-height:46px;padding:4px}.hint{min-height:0}}.result{background:#000000a6;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.result-box{background:var(--panel);border:1px solid var(--line);text-align:center;border-radius:14px;flex-direction:column;gap:10px;min-width:260px;padding:20px;display:flex}.result-box h2{margin:0;font-size:2rem}.result-box h2.win{color:#58d68d}.result-box h2.lose{color:var(--b)}.online{width:100%;margin-top:8px}.lobby{flex-direction:column;gap:10px;margin-top:12px;display:flex}.lobby label{color:var(--dim);flex-direction:column;gap:4px;font-size:.85rem;display:flex}.lobby input{font:inherit;color:var(--text);border:1px solid var(--line);background:#0c1017;border-radius:10px;min-height:44px;padding:10px 12px}.lobby .note{color:var(--accent);min-height:1.4em}.big{font-variant-numeric:tabular-nums;margin:6px 0;font-size:2.2rem;font-weight:700}.mates{color:var(--dim);margin:0 0 10px;font-size:.9rem}.card:disabled{opacity:.4}.you{color:var(--dim);margin-left:10px}.board canvas.gl{pointer-events:none}.viewtoggle{z-index:2;opacity:.85;min-width:56px;min-height:44px;padding:4px 12px;font-weight:700;position:absolute;top:6px;right:6px}.zoomtoggle{top:56px}.soundtoggle{font-size:1.1rem;top:106px}.cinetoggle{font-size:1.1rem;top:156px}.cinetoggle.off{opacity:.5;filter:grayscale();text-decoration:line-through}.board .turn{z-index:2;opacity:.8;border-radius:50%;min-width:48px;min-height:48px;padding:0;font-size:1.5rem;line-height:1;position:absolute;bottom:8px}.board .turn.left{left:8px}.board .turn.right{right:8px}.board .turn.tilt{min-width:40px;min-height:40px;font-size:.9rem;right:8px}.board .turn.tilt.down{bottom:64px}.board .turn.tilt.up{bottom:110px}.logline{border-left:3px solid #0000;padding:1px 0 1px 8px}.logline.own{border-left-color:var(--own)}.logline.enemy{border-left-color:var(--enemy)}.logline.turn{color:var(--text);border:0;margin-top:8px;padding-left:0;font-size:.85rem;font-weight:700}.logline.phase{color:var(--accent);text-transform:uppercase;letter-spacing:.04em;border-left-color:#0000;margin-top:4px;font-size:.7rem}.logline.hit{color:#ffb0a0}.logline.heal{color:#8fe3a8}.logline.shield{color:#8fd8ff}.logline.kill{color:var(--text);font-weight:700}.logline.info{color:var(--dim);font-style:italic}.logsheet{z-index:20;padding-top:env(safe-area-inset-top);background:#0f1218f7;flex-direction:column;display:flex;position:fixed;inset:0}.logsheet[hidden]{display:none}.logsheet-bar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.logsheet-body{padding:8px 14px max(16px, env(safe-area-inset-bottom));flex:1;width:100%;max-width:760px;margin:0 auto;font-size:.95rem;line-height:1.45;overflow-y:auto}.startpick{flex-direction:column;align-items:flex-start;gap:6px;margin:10px 0;display:flex}.startpick-head{align-items:center;gap:10px;display:flex}.startgrid{gap:6px;width:min(100%,260px);display:grid}.startgrid .tile{aspect-ratio:1;background:var(--panel);border:2px solid #0000;border-radius:6px;min-height:0;padding:0}.startgrid .tile:disabled{opacity:.3}.startgrid .tile.chosen,.startpick .chip.chosen{border-color:var(--accent);background:#ffd54a40}.emotetoggle{inset:auto auto 64px 8px}.emotebar{z-index:3;flex-wrap:wrap;gap:6px;max-width:calc(100% - 140px);display:flex;position:absolute;bottom:64px;left:74px}.emotebar button{color:#1a2030;background:#f4f6fb;border-color:#fff;padding:6px 12px;font-weight:700}.emotebar[hidden],.pingwheel[hidden]{display:none}.pingwheel{z-index:3;width:0;height:0;position:absolute}.pingwheel button{background:#0f141eeb;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:64px;min-height:64px;padding:4px 2px;line-height:1.1;display:flex;position:absolute;top:-32px;left:-32px}.pingwheel button span{font-size:1.5rem}.pingwheel button small{font-size:.62rem;font-weight:700}