:root{--bg-base: #0a0a16;--bg-board: #10101e;--bg-panel: #161628;--bg-panel-hi: #1f1f38;--bg-panel-dim: #101018;--text: #e8e8f0;--text-muted: #9090a8;--text-dim: #606078;--text-disabled:#4a4a60;--accent: #46d8e0;--positive: #5fd97a;--danger: #ed5570;--warning: #f5c842;--stroke-soft: rgba(255, 255, 255, .08);--p-I: #2dd4ed;--p-O: #f5cf3a;--p-T: #c26fe8;--p-S: #5bd97c;--p-Z: #ed5570;--p-J: #5482f0;--p-L: #f08a3d;--p-X: #6a6a7e;--cell: 32px;--cell-mini: 14px;--radius: 8px;--radius-btn: 6px;--radius-cell: 6px;--radius-mini: 2px}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg-base);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;user-select:none;-webkit-user-select:none}#app{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;position:relative}.view{animation:viewIn .22s cubic-bezier(.16,1,.3,1)}@keyframes viewIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.lang-switcher{position:fixed;top:20px;right:24px;display:flex;gap:4px;align-items:center;z-index:50}.lang-btn{background:none;border:none;color:var(--text-dim);font:700 14px Inter;padding:6px 10px;cursor:pointer;border-radius:6px;transition:color .12s,background .12s}.lang-btn:hover{color:var(--text-muted)}.lang-btn.active{color:var(--accent)}.lang-sep{color:var(--text-dim);font-size:14px}.menu{display:flex;flex-direction:column;align-items:center;gap:14px}.menu-title{font-weight:900;font-size:64px;letter-spacing:6px;margin:0 0 4px}.menu-subtitle{font-weight:500;font-size:18px;color:var(--text-muted);letter-spacing:1px;margin:0 0 24px}.menu-modes{display:flex;flex-direction:column;gap:12px}.menu-button{width:380px;height:52px;background:var(--bg-panel);border:1px solid var(--stroke-soft);border-radius:var(--radius-btn);color:var(--text);font:600 20px Inter;cursor:pointer;letter-spacing:.5px;transition:background .12s,border-color .12s,color .12s}.menu-button:hover,.menu-button:focus-visible,.menu-button.focused{background:var(--bg-panel-hi);border-color:var(--accent);color:var(--accent);outline:none;box-shadow:0 0 0 2px #46d8e040}.menu-button-continue{border-color:var(--positive);color:var(--positive)}.menu-button-continue:hover,.menu-button-continue:focus-visible,.menu-button-continue.focused{background:var(--positive);color:var(--bg-base);border-color:var(--positive);box-shadow:0 0 0 2px #5fd97a4d}.menu-button.disabled{background:var(--bg-panel-dim);color:var(--text-disabled);font-weight:500;cursor:default}.menu-button.disabled:hover,.menu-button.disabled:focus-visible,.menu-button.disabled.focused{background:var(--bg-panel-dim);border-color:var(--stroke-soft);color:var(--text-disabled);box-shadow:none}.menu-hint{font:400 14px Inter;color:var(--text-dim);margin-top:16px}.diff-button{height:72px;padding:10px 24px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;text-align:left}.diff-button .diff-label{font-weight:700;font-size:20px}.diff-button .diff-desc{font-weight:400;font-size:13px;color:var(--text-muted)}.diff-button.disabled .diff-desc,.menu-button.disabled .diff-desc{color:var(--text-disabled)}.menu-button-secondary{font-size:16px;font-weight:500;color:var(--text-muted)}.menu-button-secondary:hover,.menu-button-secondary:focus-visible,.menu-button-secondary.focused{color:var(--text);border-color:var(--text-dim);background:var(--bg-panel-hi);box-shadow:0 0 0 2px #ffffff14}.difficulty-title,.settings-title{font-size:40px;letter-spacing:4px}.settings-body{display:flex;gap:24px;align-items:flex-start;width:760px;max-width:92vw;margin-top:16px}.settings-preview{display:flex;gap:8px;align-items:flex-end;flex-shrink:0}.settings-preview.attack-outer{flex-direction:row-reverse}.settings-list{display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}.settings-palette{display:flex;flex-wrap:wrap;gap:8px}.settings-tile{padding:8px 12px;border-radius:var(--radius-btn);border:1px solid var(--stroke-soft);background:var(--bg-panel);color:var(--text-muted);font:600 13px Inter;cursor:pointer;transition:all .12s}.settings-tile:hover,.settings-tile.focused{border-color:var(--accent);color:var(--text);background:var(--bg-panel-hi)}.settings-tabs{display:flex;gap:4px;width:760px;max-width:92vw;margin-top:14px;border-bottom:1px solid var(--stroke-soft)}.settings-tab{padding:10px 22px;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--text-muted);font:700 13px Inter;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:color .12s,border-color .12s}.settings-tab:hover{color:var(--text)}.settings-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--bg-panel);border:1px solid var(--stroke-soft);border-radius:var(--radius-btn);padding:14px 18px;cursor:pointer;transition:border-color .12s,background .12s}.settings-row:hover,.settings-row.focused{border-color:var(--accent);background:var(--bg-panel-hi)}.settings-row-value{font:700 15px Inter;color:var(--accent);letter-spacing:.5px;margin-left:auto}.settings-row-label{font:500 16px Inter;color:var(--text)}.toggle-pill{position:relative;width:56px;height:30px;padding:0;border-radius:8px;cursor:pointer;border:1px solid var(--stroke-soft);background:var(--bg-panel-dim);transition:border-color .15s;font-size:0;flex-shrink:0}.toggle-pill:before{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:var(--radius-cell);background:var(--text-muted);box-shadow:inset 0 0 0 1px #0000008c,inset 2px 2px 3px #ffffff3d,inset -2px -2px 3px #00000052,inset 0 0 0 3px #00000014;transition:transform .18s cubic-bezier(.16,1,.3,1),background .15s}.toggle-pill.toggle-on:before{background:var(--positive);transform:translate(26px)}.toggle-pill:hover{border-color:var(--accent)}.toggle-pill.focused{box-shadow:0 0 0 2px #46d8e08c;outline:none}.settings-btn{margin-top:8px;font-size:14px;height:40px;width:200px;align-self:center}.lobby-title{font-size:40px;letter-spacing:4px}.lobby{align-items:center;gap:8px}.lobby-hint{font:400 13px Inter;color:var(--text-dim);margin-bottom:8px;text-align:center;max-width:600px}.lobby-active-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:760px;max-width:92vw;min-height:32px;margin-bottom:4px}.lobby-active-bar .active-empty{font:400 13px Inter;color:var(--text-dim);align-self:center}.lobby-slots{display:flex;flex-direction:column;gap:8px;width:760px;max-width:92vw}.lobby-slot{display:grid;grid-template-columns:32px 56px 1fr auto;align-items:center;gap:16px;background:var(--bg-panel);border:1px solid var(--stroke-soft);border-radius:var(--radius-btn);padding:10px 14px;transition:opacity .12s,border-color .12s,background .12s}.lobby-slot.empty{background:var(--bg-panel-dim)}.lobby-slot:nth-child(1){border-left:3px solid var(--accent)}.lobby-slot:nth-child(2){border-left:3px solid var(--danger)}.lobby-slot:nth-child(3){border-left:3px solid var(--positive)}.lobby-slot:nth-child(4){border-left:3px solid var(--warning)}.lobby-slot.empty:nth-child(1){border-left-color:#46d8e059}.lobby-slot.empty:nth-child(2){border-left-color:#ed557059}.lobby-slot.empty:nth-child(3){border-left-color:#5fd97a59}.lobby-slot.empty:nth-child(4){border-left-color:#f5cf3a59}.slot-members{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:30px}.slot-empty-label{font-style:italic;color:var(--text-dim);font-size:13px}.add-ai-btn{background:var(--bg-base);border:1px dashed var(--stroke-soft);border-radius:8px;color:var(--text-muted);font:600 12px Inter;padding:6px 12px;cursor:pointer;height:30px;transition:all .12s}.add-ai-btn:hover{border-color:var(--p-T);color:var(--p-T);border-style:solid}.cursor-track{display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-height:18px}.lobby-slot .slot-num{font:700 16px Inter;color:var(--text-muted);letter-spacing:2px}.slot-device-cell{display:flex;align-items:center;gap:10px;min-width:0}.slot-device-label{font:500 14px Inter;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lobby-slot.empty .slot-device-label{color:var(--text-dim);font-style:italic}.team-cell{display:flex;gap:6px}.dev-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--bg-base);border:1px solid var(--stroke-soft);font:600 12px Inter;color:var(--text)}.dev-chip-key{font:800 11px Inter;padding:3px 6px;border-radius:999px;background:var(--dev-color, var(--accent));color:var(--bg-base);letter-spacing:.5px}.dev-chip-name{color:var(--text-muted);font-weight:500}.dev-chip-status{color:var(--text-dim);font-size:11px}.slot-device-cell .dev-chip{padding:3px 8px 3px 3px}.slot-device-cell .dev-chip-key{font-size:10px;padding:2px 5px}.dev-c1{--dev-color: var(--accent)}.dev-c2{--dev-color: var(--danger)}.dev-c3{--dev-color: var(--positive)}.dev-c4{--dev-color: var(--warning)}.dev-c5{--dev-color: var(--p-L)}.dev-c6,.dev-chip.dev-ai{--dev-color: var(--p-T)}button.dev-chip.dev-ai{cursor:pointer}button.dev-chip.dev-ai:hover{border-color:var(--text-muted)}.cursor-dot{display:inline-flex;align-items:center;justify-content:center;min-width:22px;padding:2px 6px;border-radius:999px;font:800 10px Inter;color:var(--bg-base);background:var(--dev-color, var(--accent));letter-spacing:.5px;animation:cursorPulse 1.6s ease-in-out infinite}@keyframes cursorPulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.pill{background:var(--bg-base);border:1px solid var(--stroke-soft);border-radius:8px;color:var(--text);font:600 14px Inter;padding:8px 12px;cursor:pointer;height:36px;display:inline-flex;align-items:center;gap:6px;transition:all .12s}.pill:hover{border-color:var(--text-muted)}.pill.focused{border-color:var(--accent);box-shadow:0 0 0 2px #46d8e040;outline:none}.team-pill{width:36px;padding:0;justify-content:center;color:var(--text-muted);font-weight:700}.team-pill.selected{color:var(--bg-base)}.team-pill.faded{opacity:.4}.team-pill.team-a.selected{background:var(--accent);border-color:var(--accent)}.team-pill.team-b.selected{background:var(--danger);border-color:var(--danger)}.team-pill.team-c.selected{background:var(--positive);border-color:var(--positive)}.team-pill.team-d.selected{background:var(--warning);border-color:var(--warning)}.lobby-actions{display:flex;gap:12px;width:760px;max-width:92vw;margin-top:12px}.lobby-actions .action-btn{flex:1;width:auto}.action-btn{width:220px;height:52px;border-radius:var(--radius-btn);font:600 18px Inter;cursor:pointer;background:var(--bg-panel);transition:all .12s;letter-spacing:.5px;border:1px solid var(--stroke-soft)}.action-btn:focus-visible{outline:none}.action-primary{border:1px solid var(--positive);color:var(--positive)}.action-primary:hover,.action-primary.focused{background:var(--positive);color:var(--bg-base)}.action-secondary{border:1px solid var(--stroke-soft);color:var(--text-muted)}.action-secondary:hover,.action-secondary.focused{background:var(--bg-panel-hi);border-color:var(--text-muted);color:var(--text)}.action-btn:disabled,.action-btn.disabled{opacity:.4;cursor:not-allowed}.action-btn:disabled:hover,.action-btn.disabled:hover{background:var(--bg-panel);color:var(--positive)}button.back-btn,button.back-btn.secondary,button.back-btn.action-secondary,button.back-btn.menu-button-secondary{border-color:#ed55708c!important;color:var(--danger)!important;background:var(--bg-panel)}button.back-btn:hover,button.back-btn:focus-visible,button.back-btn.focused{background:var(--danger)!important;border-color:var(--danger)!important;color:var(--bg-base)!important}.online-lobby{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:720px;padding:0 24px}.online-content{display:flex;flex-direction:column;gap:18px;align-items:center;width:100%;max-width:480px;margin-top:16px}.online-idle-primary{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center}.online-big-btn{width:320px}.online-divider{font:500 13px Inter;color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;margin-top:4px}.online-join-row{display:flex;gap:10px;align-items:center}.online-join-btn{width:140px}.online-code-input{width:220px;height:52px;background:var(--bg-panel);border:1px solid var(--stroke-soft);border-radius:var(--radius-btn);color:var(--text);font:700 20px Inter;letter-spacing:3px;padding:0 16px;text-transform:uppercase;text-align:center;box-sizing:border-box}.online-code-input::placeholder{color:var(--text-dim);letter-spacing:1px;font-weight:500}.online-code-input:focus-visible{outline:none;border-color:var(--accent)}.settings-nick-value{display:flex;align-items:center;gap:8px}.settings-nick-input{width:160px;padding:6px 10px;background:#0000004d;border:1px solid var(--stroke-soft);border-radius:var(--radius-btn);color:var(--text);font-family:inherit;font-size:14px;outline:none}.settings-nick-input:focus-visible{border-color:var(--accent)}.settings-nick-readonly{color:var(--text);font-weight:600}.overlay-winner-avatars{display:flex;gap:10px;justify-content:center;margin:4px 0 12px}.online-queue-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px 64px;background:var(--bg-panel);border:1px solid var(--stroke-soft);border-radius:16px}.online-queue-label{font:600 16px Inter;color:var(--text)}.online-spinner{width:36px;height:36px;border:3px solid var(--stroke-soft);border-top-color:var(--accent);border-radius:50%;animation:onlineSpin .9s linear infinite}@keyframes onlineSpin{to{transform:rotate(360deg)}}.online-code-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 22px;background:var(--bg-panel);border:1px solid var(--stroke-soft);border-radius:14px}.online-code-share{font:500 13px Inter;color:var(--text-muted)}.online-code-big{font:800 34px Inter;letter-spacing:8px;color:var(--accent)}.online-url-box{display:flex;gap:8px;align-items:center;margin-top:4px}.online-url-text{font:500 12px JetBrains Mono,monospace;color:var(--text-muted);background:var(--bg-base);padding:6px 10px;border-radius:8px;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.online-copy-btn{font:600 13px Inter;color:var(--text);background:var(--bg-panel-hi);border:1px solid var(--stroke-soft);padding:6px 12px;border-radius:8px;cursor:pointer}.online-copy-btn:hover{border-color:var(--accent);color:var(--accent)}.online-members{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.online-member{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg-panel);border:1px solid var(--stroke-soft);border-radius:10px;font:500 14px Inter}.online-member.me{border-color:var(--accent)}.online-member-nick{color:var(--text)}.online-member-tag{font:600 10px Inter;color:var(--warning);text-transform:uppercase;letter-spacing:1px}.online-member-row{font:500 12px Inter;color:var(--text-muted)}.online-rows{display:flex;flex-direction:column;gap:8px;width:100%}.online-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-panel);border:1px solid var(--stroke-soft);border-radius:var(--radius-btn);min-height:56px}.online-row.selected{border-color:var(--accent);box-shadow:0 0 0 2px #46d8e026 inset}.online-row:nth-child(1){border-left:3px solid var(--accent)}.online-row:nth-child(2){border-left:3px solid var(--danger)}.online-row:nth-child(3){border-left:3px solid var(--positive)}.online-row:nth-child(4){border-left:3px solid var(--warning)}.online-row-label{font:700 14px Inter;color:var(--text);min-width:80px}.online-row-members{flex:1;display:flex;gap:6px;flex-wrap:wrap}.online-row-tag{padding:4px 10px;background:var(--bg-base);border:1px solid var(--stroke-soft);border-radius:8px;font:500 13px Inter;color:var(--text)}.online-row-tag.me{border-color:var(--accent);color:var(--accent)}.online-row-empty{font:500 12px Inter;color:var(--text-muted);font-style:italic}.online-row-join{font:600 13px Inter;padding:6px 14px;border-radius:8px;background:var(--bg-panel-hi);border:1px solid var(--stroke-soft);color:var(--text-muted);cursor:pointer}.online-row-join:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.online-row-join:disabled{opacity:.5;cursor:default;border-color:var(--positive);color:var(--positive)}.online-row-bot{font:600 12px Inter;padding:6px 10px;margin-left:6px;border-radius:8px;background:var(--bg-base);border:1px solid var(--stroke-soft);color:var(--text-muted);cursor:pointer}.online-row-bot:hover,.online-row-tag.bot{border-color:var(--warning);color:var(--warning)}.online-reconnect-badge{margin:4px 0 8px;padding:6px 14px;background:#f5cf3a1f;border:1px solid var(--warning);border-radius:999px;font:600 13px Inter;color:var(--warning);text-align:center;align-self:center}.online-reconnect-badge.error{background:#ed55701f;border-color:var(--danger);color:var(--danger)}.sprint-hud{position:fixed;top:14px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 22px;background:#0a0a16d9;border:1px solid var(--stroke-soft);border-radius:14px;z-index:90;pointer-events:none}.sprint-timer{font:800 28px JetBrains Mono,Inter,monospace;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:1px}.sprint-progress{font:600 13px Inter;color:var(--text-muted);letter-spacing:1px}.match-reconnect-badge{position:fixed;top:14px;left:50%;transform:translate(-50%);padding:8px 18px;background:#f5cf3a29;border:1px solid var(--warning);border-radius:999px;font:600 13px Inter;color:var(--warning);z-index:200;pointer-events:none;animation:matchReconnectPulse 1.2s infinite ease-in-out}@keyframes matchReconnectPulse{0%,to{opacity:.75}50%{opacity:1}}.online-waiting{text-align:center;color:var(--text-muted);font:500 14px Inter}.lobby-error{display:flex;flex-direction:column;gap:2px;min-height:18px;color:var(--danger);font:500 13px Inter;text-align:center}.menu-button.disabled,.menu-button:disabled{opacity:.4;cursor:not-allowed}.match.players-3,.match.players-4{gap:24px;flex-wrap:wrap;justify-content:center}.match.players-3 .panels-col,.match.players-4 .panels-col{width:80px}.match.players-3 .panel,.match.players-4 .panel{padding:8px 6px}.player-area.team-a .board-area{border-color:#46d8e073}.player-area.team-b .board-area{border-color:#ed557073}.player-area.team-c .board-area{border-color:#5fd97a73}.player-area.team-d .board-area{border-color:#f5cf3a73}.replay-badge{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:60;padding:6px 16px;border-radius:999px;background:#ed557029;border:1px solid var(--danger);color:var(--danger);font:800 13px Inter;letter-spacing:2px;text-transform:uppercase;pointer-events:none}.incoming-meter{position:absolute;top:2px;bottom:2px;left:-9px;width:6px;border-radius:3px;background:#ed557026;overflow:hidden;pointer-events:none;transform-origin:center bottom}.incoming-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--danger);box-shadow:0 0 8px var(--danger);transition:height .16s ease-out}.incoming-meter.bump{animation:incomingBump .22s ease-out}@keyframes incomingBump{0%{transform:scaleX(1)}45%{transform:scaleX(2.1)}to{transform:scaleX(1)}}.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:70;pointer-events:none;opacity:0;font:900 120px Inter;letter-spacing:4px;color:var(--accent);text-shadow:0 4px 24px rgba(0,0,0,.6),0 0 40px currentColor}.countdown.pop{animation:countdownPop .6s cubic-bezier(.16,1,.3,1)}@keyframes countdownPop{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}.match{display:flex;gap:80px;align-items:center}.match.solo{gap:16px}.match.team-mode{gap:64px;flex-wrap:nowrap}.team-group{display:flex;gap:18px;align-items:center;padding-bottom:12px;border-bottom:3px solid transparent}.team-group.team-a{border-bottom-color:var(--accent)}.team-group.team-b{border-bottom-color:var(--danger)}.team-group.team-c{border-bottom-color:var(--positive)}.team-group.team-d{border-bottom-color:var(--warning)}.player-area{display:flex;gap:16px;align-items:flex-end}.player-area.right{flex-direction:row-reverse}.board-col{display:flex;flex-direction:column;gap:6px;align-items:center}.nameplate{display:flex;align-items:center;gap:8px;align-self:stretch;max-width:calc(var(--cell) * 10 + 4px);padding:0 2px}.nameplate-nick{font:700 14px Inter;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar{display:grid;gap:1px;flex-shrink:0;border-radius:4px;overflow:hidden;background:#ffffff0d}.avatar-cell{border-radius:1px}.avatar-cell.on{box-shadow:inset 0 0 0 1px #00000073}.avatar-image{object-fit:cover}.panels-col{display:flex;flex-direction:column;gap:12px;width:96px}.panel{padding:0;background:transparent;border:none}.panel-label{font:700 11px Inter;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;padding:0 4px 6px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:10px}.panel-content{display:flex;justify-content:center;align-items:center;min-height:56px}.next-list{display:flex;flex-direction:column;gap:10px}.next-item{display:flex;justify-content:center;align-items:center;min-height:44px;opacity:.7}.next-item:first-child{opacity:1}.hud-grid{display:flex;flex-direction:column;gap:10px;padding:2px}.hud-stat{display:flex;flex-direction:column;gap:1px}.hud-label{font:700 10px Inter;color:var(--text-muted);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}.hud-value{font:700 18px Inter;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1}.hud-value.combo-active{color:var(--accent)}.board-wrap{position:relative;display:inline-block;width:calc(var(--cell) * 10 + 4px);height:calc(var(--cell) * 20 + 4px);flex-shrink:0;transform:translateZ(0)}.board-area{position:absolute;inset:0;background:var(--bg-board);border:2px solid rgba(255,255,255,.22);border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px #0006,inset 0 0 60px #00000080}.board-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,var(--cell));grid-template-rows:repeat(20,var(--cell))}.board-grid.grid-lines{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:var(--cell) var(--cell)}.board-grid.grid-dots{background-image:radial-gradient(circle,rgba(255,255,255,.14) 1.1px,transparent 1.6px);background-size:var(--cell) var(--cell)}.cell{width:var(--cell);height:var(--cell);padding:1px}.cell.filled:before{content:"";display:block;width:100%;height:100%;border-radius:var(--radius-cell);background:var(--c, transparent);box-shadow:inset 0 0 0 1px #0006,inset 2px 2px 3px #ffffff3d,inset -2px -2px 3px #00000052,inset 0 0 0 3px #00000014}.piece-layer{position:absolute;inset:0;pointer-events:none}.piece-cell{position:absolute;top:0;left:0;width:var(--cell);height:var(--cell);padding:1px;will-change:transform}.piece-cell:before{content:"";display:block;width:100%;height:100%;border-radius:var(--radius-cell);background:var(--c);box-shadow:inset 0 0 0 1px #0006,inset 2px 2px 3px #ffffff3d,inset -2px -2px 3px #00000052,inset 0 0 0 3px #00000014}.piece-cell.ghost:before{background:transparent;border:2px solid var(--c);box-shadow:none;opacity:.28}.attack-bar{width:22px;height:calc(var(--cell) * 20 + 4px);flex-shrink:0;background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:5px;display:flex;flex-direction:column-reverse;overflow:hidden;pointer-events:none;padding:2px;gap:1px;order:1}.panels-col{order:0}.board-wrap{order:2}.match.attack-outer .player-area .attack-bar{order:3}.attack-cell{flex:1 0 0;min-height:0;border-radius:2px;background:transparent;transition:background .12s}.attack-cell.filled{box-shadow:inset 0 1px #fff3,inset 0 -1px #00000040}.attack-cell.zone-safe.filled{background:var(--positive)}.attack-cell.zone-low.filled{background:var(--warning)}.attack-cell.zone-mid.filled{background:var(--p-L)}.attack-cell.zone-high.filled{background:var(--danger)}.kind-I{--c: var(--p-I)}.kind-O{--c: var(--p-O)}.kind-T{--c: var(--p-T)}.kind-S{--c: var(--p-S)}.kind-Z{--c: var(--p-Z)}.kind-J{--c: var(--p-J)}.kind-L{--c: var(--p-L)}.kind-X{--c: var(--p-X)}.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:10}.fx-top{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:11}.board-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:transparent}.board-flash.fire{animation:clear-flash .28s cubic-bezier(.16,1,.3,1)}.board-flash.fire-tetris{animation:clear-flash-tetris .4s cubic-bezier(.16,1,.3,1)}@keyframes clear-flash{0%{background:#ffffff59;opacity:1}to{background:transparent;opacity:0}}@keyframes clear-flash-tetris{0%{background:#f5cf3a8c;opacity:1}40%{background:#fff6;opacity:.85}to{background:transparent;opacity:0}}.board-area.shake-heavy{animation:shake-heavy .14s cubic-bezier(.16,1,.3,1)}.board-area.shake-light{animation:shake-light .1s ease-out}@keyframes shake-heavy{0%,to{transform:translateY(0)}20%{transform:translateY(4px)}45%{transform:translateY(-2px)}70%{transform:translateY(2px)}90%{transform:translateY(-1px)}}@keyframes shake-light{0%,to{transform:translateY(0)}50%{transform:translateY(2px)}}.garbage-frag{position:fixed;z-index:60;border-radius:var(--radius-cell);pointer-events:none;transform:translate(-50%,-50%);will-change:transform,opacity}.board-area.impact{animation:impact-glow .32s ease-out}.board-area.impact-heavy{animation:impact-glow-heavy .42s ease-out}@keyframes impact-glow{0%{box-shadow:inset 0 0 0 3px #ed5570e6,0 0 18px #ed557099}to{box-shadow:inset 0 0 #ed557000}}@keyframes impact-glow-heavy{0%{box-shadow:inset 0 0 0 5px #ed5570,0 0 32px #ed5570d9}50%{box-shadow:inset 0 0 0 3px #f5cf3ab3,0 0 22px #f5cf3a80}to{box-shadow:inset 0 0 #ed557000}}.combo-badge,.b2b-badge{position:absolute;left:50%;font-family:Inter,sans-serif;font-weight:900;letter-spacing:1px;opacity:0;white-space:nowrap;transform:translate(-50%);text-shadow:0 2px 6px rgba(0,0,0,.5),0 0 12px currentColor}.combo-badge{top:30%;font-size:calc(var(--cell) * 1.05);color:var(--accent)}.combo-badge.tier-2{color:var(--warning);font-size:calc(var(--cell) * 1.2)}.combo-badge.tier-3{color:var(--p-L);font-size:calc(var(--cell) * 1.4)}.combo-badge.tier-4{color:var(--danger);font-size:calc(var(--cell) * 1.65)}.combo-badge.show{animation:comboFlash .9s cubic-bezier(.16,1,.3,1) forwards}@keyframes comboFlash{0%{opacity:0;transform:translate(-50%,20px) scale(.6)}15%{opacity:1;transform:translate(-50%,-10px) scale(1.15)}80%{opacity:1;transform:translate(-50%,-40px) scale(1)}to{opacity:0;transform:translate(-50%,-60px) scale(.95)}}.b2b-badge{top:22%;font-size:calc(var(--cell) * .78);color:var(--accent)}.b2b-badge.show{animation:b2bFlash .9s cubic-bezier(.16,1,.3,1) forwards}@keyframes b2bFlash{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}18%{opacity:1;transform:translate(-50%) scale(1.1)}80%{opacity:1;transform:translate(-50%,-30px) scale(1)}to{opacity:0;transform:translate(-50%,-50px) scale(.95)}}.tspin-badge{position:absolute;left:50%;top:28%;opacity:0;white-space:nowrap;font-size:calc(var(--cell) * .9);font-weight:800;color:var(--p-T);letter-spacing:1px;text-shadow:0 0 12px rgba(184,100,224,.5)}.tspin-badge.mini{font-size:calc(var(--cell) * .66);color:var(--text-muted);text-shadow:none}.tspin-badge.show{animation:tspinFlash 1.2s cubic-bezier(.16,1,.3,1) forwards}@keyframes tspinFlash{0%{opacity:0;transform:translate(-50%,20px) scale(.5)}12%{opacity:1;transform:translate(-50%) scale(1.2)}20%{opacity:1;transform:translate(-50%,-8px) scale(1)}85%{opacity:1;transform:translate(-50%,-30px) scale(1)}to{opacity:0;transform:translate(-50%,-50px) scale(.95)}}.mini-piece{display:grid;grid-template-columns:repeat(4,var(--cell-mini));grid-template-rows:repeat(4,var(--cell-mini))}.mini-cell{width:var(--cell-mini);height:var(--cell-mini);padding:1px}.mini-cell.filled:before{content:"";display:block;width:100%;height:100%;border-radius:var(--radius-mini);background:var(--c);box-shadow:inset 0 0 0 .5px #00000080,inset 1px 1px 1px #ffffff40,inset -1px -1px 1px #0000004d}.overlay{position:fixed;inset:0;background:#05050ca6;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:100;animation:viewIn .18s cubic-bezier(.16,1,.3,1)}.overlay-title{font:900 72px Inter;letter-spacing:4px;margin:0}.overlay-title.danger{color:var(--danger)}.overlay-title.positive{color:var(--positive)}.overlay-score{font:600 26px Inter;font-variant-numeric:tabular-nums}.overlay-hint{font:500 15px Inter;color:var(--text-muted)}.overlay-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px;align-items:center}.overlay-button{width:260px;height:52px;background:var(--bg-panel);border:1px solid var(--accent);border-radius:var(--radius-btn);color:var(--accent);font:600 18px Inter;cursor:pointer;letter-spacing:.5px;transition:background .12s,color .12s,border-color .12s}.overlay-button:hover,.overlay-button:focus-visible,.overlay-button.focused{background:var(--accent);color:var(--bg-base);outline:none}.overlay-button.secondary{border-color:var(--stroke-soft);color:var(--text-muted)}.overlay-button.secondary:hover,.overlay-button.secondary:focus-visible,.overlay-button.secondary.focused{background:var(--bg-panel-hi);border-color:var(--text-muted);color:var(--text)}