:root{font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f8fafc;background:#07111f;--panel: rgba(15, 23, 42, .92);--panel-2: rgba(17, 27, 48, .9);--line: rgba(148, 163, 184, .18);--muted: rgba(226, 232, 240, .62);--accent: #facc15}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 14% 10%,rgba(59,130,246,.18),transparent 31%),radial-gradient(circle at 88% 90%,rgba(168,85,247,.14),transparent 32%),#07111f}body{min-height:100vh;overflow:hidden}button{font:inherit}.app-shell{width:min(1500px,100%);min-height:100vh;margin:0 auto;padding:12px;display:flex;flex-direction:column;gap:10px}.match-bar{min-height:66px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:8px 12px;background:#080f1cc7;border:1px solid var(--line);border-radius:18px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:flex;align-items:baseline;gap:7px}.brand strong{font-size:clamp(1.05rem,2vw,1.45rem)}.eyebrow{font-size:.62rem;letter-spacing:.2em;opacity:.6}.version{font-size:.68rem;opacity:.45}.match-center{display:flex;gap:8px}.rank-pill,.timer-pill,.score-pill{min-width:82px;display:grid;place-items:center;padding:6px 11px;border-radius:13px;background:#1e293bdb;border:1px solid var(--line)}.rank-pill span,.timer-pill span,.score-pill span{font-size:.58rem;letter-spacing:.14em;opacity:.58}.rank-pill strong,.timer-pill strong,.score-pill strong{font-size:1.25rem;line-height:1.05}.status{justify-self:end;display:inline-flex;align-items:center;gap:8px;font-size:.76rem;color:var(--muted)}.dot{width:9px;height:9px;border-radius:50%;background:#64748b}.dot.online{background:#22c55e;box-shadow:0 0 0 4px #22c55e1f}.play-layout{flex:1;min-height:0;display:grid;grid-template-columns:clamp(118px,12vw,166px) minmax(0,1fr) clamp(230px,23vw,320px);gap:10px}.players-rail,.arena-panel,.action-panel{min-height:0}.players-rail{display:grid;grid-template-rows:auto repeat(5,minmax(0,1fr));gap:7px}.rail-title{padding:2px 7px;font-size:.62rem;letter-spacing:.18em;color:var(--muted)}.mini-player{min-height:0;padding:6px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:5px;color:inherit;text-align:left;border:1px solid var(--line);border-radius:13px;background:#0f172ad6;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}.mini-player:hover,.mini-player:active{transform:scale(1.025);border-color:#facc157a;background:#1e293bf2}.mini-meta{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:4px;align-items:center;font-size:.63rem}.mini-meta b{width:19px;height:19px;border-radius:7px;display:grid;place-items:center;background:#facc1521;color:#fde68a}.mini-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-meta em{font-style:normal;color:var(--muted);font-size:.58rem}.mini-board,.overlay-board{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:1px;overflow:hidden;background:#020617e6;border-radius:7px;padding:2px;aspect-ratio:1 / 1}.mini-cell,.overlay-cell{border-radius:1.5px;background:#5e6979}.mini-cell.blue,.overlay-cell.blue{background:#3b82f6}.mini-cell.gold,.overlay-cell.gold{background:#f6c445}.mini-cell.purple,.overlay-cell.purple{background:#9b6df0}.arena-panel{display:flex;flex-direction:column;min-width:0;padding:8px;border-radius:18px;border:1px solid var(--line);background:#09101ed1}.arena-head{min-height:38px;display:flex;justify-content:space-between;align-items:center;padding:0 5px 7px}.arena-head>div{display:flex;gap:7px;align-items:baseline}.arena-label,.kicker{font-size:.59rem;letter-spacing:.15em;color:var(--muted)}.arena-head strong{font-size:.86rem}.hint{font-size:.7rem;color:var(--muted)}.board-frame{flex:1;min-height:0;display:grid;place-items:center;padding:7px;border-radius:17px;background:linear-gradient(145deg,#1e293bcc,#080f1cdb);box-shadow:inset 0 0 0 1px #94a3b814}.board{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:clamp(2px,.4vw,5px);width:min(100%,calc(100vh - 160px));max-height:100%;aspect-ratio:1 / 1;touch-action:manipulation;-webkit-user-select:none;user-select:none}.cell{position:relative;border:0;border-radius:clamp(4px,.7vw,9px);min-width:0;background:linear-gradient(145deg,#7b8797,#525f70);cursor:pointer;box-shadow:inset 0 1px #ffffff1f,0 3px 7px #0000002e;transition:transform .08s ease,filter .08s ease}.cell:hover{filter:brightness(1.08)}.cell:active{transform:scale(.95)}.cell.blue{background:linear-gradient(145deg,#67b2ff,#2868d9)}.cell.preview:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border:3px solid var(--accent);border-radius:inherit;box-shadow:0 0 13px #facc1599;pointer-events:none;z-index:2}.cell.center:before{content:"●";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:clamp(10px,1.8vw,22px);color:#fff;text-shadow:0 2px 4px #000;z-index:3;pointer-events:none}.cell:disabled{cursor:default;opacity:.78}.test-switch{min-height:34px;margin-top:7px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:.6rem;color:var(--muted)}.character{border:1px solid var(--line);border-radius:999px;padding:5px 9px;color:#f8fafc;background:#1e293bb3;cursor:pointer;font-size:.65rem;font-weight:800}.character.active{border-color:#facc15a6;color:#fde68a}.action-panel{display:flex;flex-direction:column;gap:8px}.character-card,.hud-card,.message{border:1px solid var(--line);background:var(--panel);border-radius:15px}.character-card{display:grid;grid-template-columns:50px minmax(0,1fr);gap:10px;align-items:center;padding:10px}.avatar{width:50px;aspect-ratio:1;border-radius:15px;display:grid;place-items:center;font-size:1.75rem;font-weight:1000;background:linear-gradient(145deg,#7c3aed,#4338ca);box-shadow:inset 0 1px #ffffff38}.character-card strong{display:block;font-size:1.12rem}.character-card small{display:block;margin-top:2px;color:var(--muted);font-size:.66rem}.hud-card{padding:10px 11px}.hud-card>span,.card-row span{font-size:.58rem;letter-spacing:.13em;color:var(--muted)}.points-card strong{display:block;font-size:clamp(1.6rem,3.4vw,2.45rem);line-height:1;margin:4px 0}.points-card small,.charge-card small{color:var(--muted);font-size:.68rem}.card-row{display:flex;justify-content:space-between;gap:8px;align-items:center}.card-row strong{font-size:.8rem}.mask-preview{margin-top:8px;min-height:50px;display:grid;place-items:center}.mask-grid{display:grid;grid-template-columns:repeat(7,11px);grid-template-rows:repeat(5,11px);gap:2px}.mask-dot{border-radius:3px;background:#4755695c}.mask-dot.hit{background:#facc15;box-shadow:0 0 8px #facc1540}.mask-dot.center{background:#fff}.charge-track{display:flex;gap:5px;margin:9px 0 7px}.charge-segment{flex:1;height:10px;border-radius:999px;background:#47556980;overflow:hidden}.charge-segment.ready{background:linear-gradient(90deg,#fde047,#f59e0b)}.charge-segment.loading{position:relative}.charge-segment.loading:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:var(--progress, 0%);background:linear-gradient(90deg,#fde047,#f59e0b)}.action-button{min-height:76px;border:0;border-radius:17px;color:#fff;cursor:pointer;font-weight:1000;box-shadow:0 10px 22px #0000002e}.action-button span{display:block;font-size:1.2rem;letter-spacing:.04em}.action-button small{display:block;margin-top:2px;font-size:.66rem;opacity:.8}.action-button.attack{background:linear-gradient(145deg,#f59e0b,#ef4444)}.action-button.super{background:linear-gradient(145deg,#7c3aed,#2563eb)}.action-button:disabled{opacity:.38;filter:grayscale(.3);cursor:default}.message{min-height:52px;padding:9px 10px;color:var(--muted);font-size:.72rem;line-height:1.35}.player-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:none;place-items:center}.player-overlay.open{display:grid}.overlay-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#020617c7;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay-card{position:relative;z-index:1;width:min(70vmin,620px);max-height:88vh;padding:13px;border-radius:20px;border:1px solid rgba(250,204,21,.34);background:#0c1628;box-shadow:0 28px 80px #00000085}.overlay-card header{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:9px}.overlay-card header strong{display:block;font-size:1.15rem}.overlay-score{color:#fde68a;font-weight:900;font-size:.82rem}.overlay-board{width:100%}.overlay-hint{display:block;text-align:center;margin-top:8px;color:var(--muted);font-size:.68rem}@media(max-width:920px){.status span:last-child{display:none}.match-bar{grid-template-columns:auto 1fr auto}.play-layout{grid-template-columns:104px minmax(0,1fr) 220px}.mini-meta em{display:none}}@media(orientation:portrait),(max-width:720px){body{overflow:auto}.app-shell{min-height:100svh;padding:8px}.match-bar{position:sticky;top:0;z-index:10;grid-template-columns:1fr auto}.match-center{grid-column:1 / -1;grid-row:2;justify-content:center}.status{grid-column:2;grid-row:1}.play-layout{grid-template-columns:1fr}.players-rail{order:2;grid-template-columns:repeat(5,minmax(96px,1fr));grid-template-rows:auto 112px;overflow-x:auto}.rail-title{grid-column:1 / -1}.arena-panel{order:1}.action-panel{order:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.character-card,.message{grid-column:1 / -1}.action-button{min-height:68px}.board{width:100%;max-height:none}}