:root{--bg: #14161c;--panel: #1c1f28;--border: #2b3040;--text: #e6e8ef;--dim: #8b91a5;--ours: #5aa9f0;--theirs: #f0705a;--side-a: var(--ours);--side-b: var(--theirs);--active: #f0c04a;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 Segoe UI,system-ui,sans-serif}h1,h2{margin:0;font-size:14px;font-weight:600}.dim{color:var(--dim)}.app{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px;min-height:100vh;padding:8px 10px 10px}.topbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.topbar h1{font-size:16px}.turn-indicator{color:var(--active);font-weight:600}.modifier-chip{padding:2px 9px;border:1px solid #b0412e;border-radius:12px;color:#f0a58f;font-size:12px;cursor:help}.turn-indicator.busy{color:var(--dim)}.speed{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:12px}.speed button,.new-battle,.sound-toggle,button.primary{padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);font-size:12px;cursor:pointer}.speed button:hover,.new-battle:hover,.sound-toggle:hover,button.primary:hover{border-color:var(--active)}.speed .speed-on{border-color:var(--active);color:var(--active)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:7px 9px}.queue-list{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}.queue-item{display:flex;align-items:center;gap:5px;padding:3px 10px 3px 6px;border:1px solid var(--border);border-radius:20px;background:#22262f;font-size:12.5px}.queue-item.side-A{border-color:var(--side-a)}.queue-item.side-B{border-color:var(--side-b)}.queue-item.side-N{border-color:#d9b25f}.queue-now{outline:2px solid var(--active)}.class-icon{flex:none}.stage{display:grid;grid-template-columns:172px minmax(320px,auto) 172px minmax(230px,1fr);align-items:start;gap:8px;min-height:0}.column{display:flex;flex-direction:column;gap:6px;min-width:0}.board{display:grid;place-items:start center;min-width:0}.board canvas{display:block;max-height:calc(100vh - 345px);min-height:360px;border:1px solid var(--border);border-radius:8px;cursor:pointer}.log{align-self:stretch;height:0;min-height:100%}@media(max-width:1180px){.stage{grid-template-columns:160px minmax(280px,auto) 160px;grid-template-rows:auto minmax(140px,1fr)}.log{grid-column:1 / -1;height:180px;min-height:0}}@media(max-width:720px){.stage{grid-template-columns:minmax(0,1fr)}}.hero-card{background:var(--panel);border:1px solid var(--border);border-left-width:4px;border-radius:8px;padding:6px 8px}.hero-card.side-A{border-left-color:var(--side-a)}.hero-card.side-B{border-left-color:var(--side-b)}.hero-card.side-N{border-left-color:#d9b25f}.hero-active{outline:2px solid var(--active)}.hero-dead{opacity:.35;filter:grayscale(1)}.hero-card header{display:flex;align-items:center;gap:7px}.hero-title{display:flex;flex-direction:column;line-height:1.2;min-width:0}.hero-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-title .dim{font-size:11.5px}.hero-ap{margin-left:auto;color:var(--active);font-weight:700;white-space:nowrap}.hp-bar{position:relative;height:15px;margin-top:5px;border-radius:4px;background:#0f1116;overflow:hidden}.hp-fill{height:100%;background:linear-gradient(90deg,#3d9c6a,#4bbd7f);transition:width .18s ease-out}.hp-fill.hp-low{background:linear-gradient(90deg,#a03828,#d4674a)}.hp-text{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:11px;font-variant-numeric:tabular-nums}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px 10px;margin:6px 0 0}.stats div{display:flex;justify-content:space-between;gap:6px}.stats dt{color:var(--dim);font-size:12px}.stats dd{margin:0;font-variant-numeric:tabular-nums}.status-list{display:flex;flex-wrap:wrap;gap:3px;margin:6px 0 0;padding:0;list-style:none}.status{padding:1px 6px;border-radius:10px;font-size:11px;background:#2b3040;cursor:help}.status-debuff{background:#5a2b2b}.status-buff{background:#26502f}.status-special{background:#2a4763}.legend ul{margin:6px 0 0;padding:0;list-style:none;font-size:11.5px}.legend li{display:grid;grid-template-columns:18px auto 1fr;grid-template-areas:"tile name note";align-items:center;gap:2px 7px;padding:2px 0}.legend-tile{grid-area:tile;width:16px;height:16px;border-radius:3px}.legend-tile.legend-picture{width:20px;height:20px;background:none;border:none;border-radius:3px;image-rendering:pixelated}.legend-name{grid-area:name}.legend li .dim{grid-area:note;font-size:11px}.legend-rock{background:#6a7085;outline:2px dashed #f0c04a;outline-offset:-1px}.legend-column{background:#c9c2ae;border:2px solid #6f6856;border-radius:50%}.legend-high{background:#8a6d3b;border:2px solid #d9b25f}.legend-collapse{background:#2a0f0f;border:2px solid #b0412e}.legend-thicket{background:#2e6b40;outline:2px dashed #f0c04a;outline-offset:-1px}.legend-pit{background:#05070a;border:2px solid #3a4152}.legend-ice{background:#bfe6f5;border:2px solid #5aa9cf}.legend-smoke{background:#9aa0ab;outline:2px dashed #f0c04a;outline-offset:-1px}.legend-trap{background:transparent;border:3px solid #b8a27a;border-radius:50%}.legend-hint{margin:6px 0 0;font-size:11px}.log{display:flex;flex-direction:column}.log ol{flex:1;margin:5px 0 0;padding:0 0 0 2px;list-style:none;overflow:auto;font-size:12.5px}.log li{padding:1px 0;color:#c9cddb}.log li.log-turn{margin-top:5px;padding-top:3px;border-top:1px solid var(--border);color:var(--active);font-weight:600}.log li.log-hit{color:#ffbfae}.log li.log-heal{color:#8fe6b4}.log li.log-death{color:var(--theirs);font-weight:600}.controls{display:grid;grid-template-columns:250px minmax(0,1fr);gap:8px;align-items:start}@media(max-width:720px){.controls{grid-template-columns:minmax(0,1fr)}}.ability-row{display:flex;gap:6px;flex-wrap:wrap}.ability{display:grid;align-content:start;gap:2px;width:196px;padding:6px 9px;border:1px solid var(--border);border-radius:8px;background:#22262f;color:var(--text);text-align:left;cursor:pointer}.ability:hover:not(:disabled){border-color:var(--active)}.ability:disabled{opacity:.45;cursor:not-allowed}.ability-selected{border-color:var(--active);background:#3a3320}.ability-basic{background:#1f2632}.ability-head{display:flex;align-items:baseline;gap:6px}.ability-key{flex:none;min-width:14px;padding:0 3px;border:1px solid var(--border);border-radius:3px;color:var(--dim);font-size:10px;text-align:center}.ability-name{font-weight:600}.ability-meta{color:var(--dim);font-size:11px}.ability-text{font-size:11.5px;line-height:1.3;color:#b9c0d2}.ability-why{color:#e8905a;font-size:11px}.ability-end{width:130px}.hint{margin:7px 0 0;min-height:16px;color:var(--dim);font-size:12.5px}.hint-warn{color:#e8b45a}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0b0d12cc}.overlay-card{display:grid;gap:10px;justify-items:center;padding:28px 40px;border:1px solid var(--border);border-radius:12px;background:var(--panel);text-align:center}.overlay-card h1{font-size:28px}.overlay-card .won{color:#4bbd7f}.overlay-card .lost{color:var(--theirs)}.ability-no-target{border-style:dashed}.class-sprite{display:block;flex:none;background-repeat:no-repeat;border:2px solid transparent;border-radius:50%;box-sizing:content-box}.ability-icon{flex:none;width:20px;height:20px;background-color:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;opacity:.85}.ability-selected .ability-icon{color:var(--active);opacity:1}.stats div{cursor:help;border-radius:3px;padding:0 2px}.stats div:hover{background:#2b3040}.class-tinted{position:relative;isolation:isolate}.class-tinted:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--tint);mix-blend-mode:multiply}.sound-toggle.speed-on{border-color:var(--active);color:var(--active)}.board-failed{max-width:420px;margin:24px;padding:12px 16px;border:1px solid #6a2a22;border-radius:8px;background:#3a1f1c;color:#ffd7cf}.tip-anchor{cursor:help}.log-tip{color:#ffe08a;text-decoration:underline dotted;text-underline-offset:3px}.tip-card{position:fixed;z-index:50;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#11131a;box-shadow:0 6px 24px #000a;pointer-events:none;font-size:13px}.tip-plain p{margin:4px 0 0}.ability-info-head{display:flex;gap:6px;align-items:center}.ability-info-meta,.ability-info-left{margin:2px 0 0;font-size:12px}.ability-info-left{color:var(--active)}.ability-info-text{margin:4px 0 0}.hero-clickable{cursor:pointer}.hero-clickable:hover,.hero-clickable:focus-visible{outline:2px solid var(--active);outline-offset:1px}.inspector-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;background:#0b0d12cc}.inspector{position:relative;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.inspector h3{margin:12px 0 6px;font-size:13px;color:var(--dim);font-weight:600}.inspector-close{position:absolute;top:6px;right:8px;z-index:1;font-size:20px;line-height:1;padding:2px 8px}.inspector-abilities{display:grid;gap:8px}.inspector-abilities .ability-info{padding:8px 10px;border:1px solid var(--border);border-radius:8px}.inspector-traits{display:grid;gap:8px;margin:0}.inspector-traits dt{font-weight:600}.inspector-traits dd{margin:2px 0 0}.app.player-B{--side-a: var(--theirs);--side-b: var(--ours)}.score-you{color:var(--ours);font-weight:700}.score-enemy{color:var(--theirs);font-weight:700}.series{display:flex;align-items:center;gap:8px;padding:2px 10px;border:1px solid var(--border);border-radius:20px;background:var(--panel)}.series .score{font-size:16px}button{font:inherit}.overlay-buttons{display:flex;gap:8px}.overlay-buttons button{padding:6px 16px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);cursor:pointer}.overlay-buttons button.primary{border-color:var(--active);color:var(--active)}.menu{grid-row:1 / -1;display:grid;place-items:center}.menu-card{display:grid;gap:12px;width:min(440px,100%);padding:28px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.menu-card h1{font-size:26px}.menu-button{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:#22262f;color:var(--text);text-align:left;cursor:pointer}.menu-button strong{font-size:15px}.menu-button span{color:var(--dim);font-size:12.5px}.menu-button:hover{border-color:var(--active)}.menu-button.primary strong{color:var(--active)}.menu-difficulty{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}.menu-difficulty button{padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);font-size:13px;cursor:pointer}.menu-difficulty button:hover{border-color:var(--active)}.menu-difficulty .speed-on{border-color:var(--active);color:var(--active)}.menu-seed{display:flex;align-items:center;gap:8px}.menu-seed input{flex:1;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font:inherit}.menu-seed input.invalid{border-color:var(--theirs)}.draft-banner{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel)}.draft-banner h2{font-size:15px}.pick-timer{min-width:44px;padding:1px 8px;border-radius:12px;background:#2a2f3d;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}.pick-timer-low{background:#6a2a22;color:#ffd7cf}.pick-order{display:flex;gap:4px;margin:0 0 0 auto;padding:0;list-style:none}.pick-order li{display:grid;place-items:center;width:24px;height:24px;border:2px solid transparent;border-radius:50%;font-size:11px;font-weight:700;color:#0b0d12}.pick-order .pick-you{background:var(--ours)}.pick-order .pick-enemy{background:var(--theirs)}.pick-order .pick-done{opacity:.35}.pick-order .pick-now{border-color:var(--active);box-shadow:0 0 0 2px var(--bg)}.draft{display:grid;grid-template-columns:230px minmax(0,1fr) 230px;align-items:start;gap:10px;min-height:0}.draft-team{display:flex;flex-direction:column;gap:6px}.draft-team h2{padding:0 2px}.draft-team.side-A h2{color:var(--side-a)}.draft-team.side-B h2{color:var(--side-b)}.draft-slot{display:grid;place-items:center;height:64px;border:1px dashed var(--border);border-radius:8px;font-size:12px}.draft-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px}.draft-card{display:flex;flex-direction:column;gap:6px;padding:8px 9px;border:1px solid var(--border);border-radius:8px;background:var(--panel)}.draft-card header{display:flex;align-items:center;gap:8px}.draft-team .draft-card.side-A{border-left:4px solid var(--side-a)}.draft-team .draft-card.side-B{border-left:4px solid var(--side-b)}.draft-pickable{cursor:pointer}.draft-pickable:hover{border-color:var(--active);box-shadow:0 0 0 1px var(--active)}.draft-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin:0;font-size:12px}.draft-stats>div{display:grid;grid-template-columns:1fr auto;align-items:baseline;cursor:help}.draft-stats dt{color:var(--dim)}.draft-stats dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}.draft-stats .stat-primary dt,.draft-stats .stat-primary dd{color:var(--active)}.stat-meter{grid-column:1 / -1;height:3px;border-radius:2px;background:#2a2f3d;overflow:hidden}.stat-meter span{display:block;height:100%;background:#6f7890}.stat-primary .stat-meter span{background:var(--active)}.draft-compact .draft-stats{font-size:11px}.draft-compact .draft-abilities{gap:2px}.budget{display:grid;gap:3px;cursor:help}.budget-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:#2a2f3d}.budget-legend{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px}.budget-dot{display:inline-block;width:8px;height:8px;margin-right:4px;border-radius:2px}.budget-abilities{background:#b46ae0}.budget-stats{background:#4bbd7f}.budget-passive{background:#d4a13a}.budget-ultimate{background:#c0587a}.draft-locked{margin:0;padding:4px 0 0;border-top:1px solid var(--border);list-style:none;font-size:11.5px;font-style:italic}.draft-passive{font-size:12px;padding-top:4px;border-top:1px solid var(--border)}.draft-passive .draft-ability-text{margin-left:0}.hero-passive{margin:5px 0 0;font-size:12px;cursor:help}.budget-item{background:#5b6275}.draft-abilities{display:grid;gap:5px;margin:0;padding:0;list-style:none;font-size:12px}.draft-ability-head{display:flex;align-items:center;gap:5px}.draft-ability-head .ability-icon{width:18px;height:18px}.draft-ability-meta{margin:0 0 0 23px;font-size:11px}.draft-ability-text{margin:1px 0 0 23px;color:#c9cddb;font-size:11.5px;line-height:1.35}.draft-basic{margin:0;font-size:11px}.draft-pick-button{margin-top:auto;align-self:stretch;padding:4px 10px;border:1px solid var(--active);border-radius:6px;background:var(--panel);color:var(--active);cursor:pointer}@media(max-width:1100px){.draft{grid-template-columns:minmax(0,1fr)}.draft-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.draft-team h2{grid-column:1 / -1}}.stage.placement{grid-template-columns:220px minmax(320px,auto) 220px}.column-title{padding:0 2px}.place-hero{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-left-width:4px;border-radius:8px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer}.place-hero.side-A{border-left-color:var(--side-a)}.place-hero.side-B{border-left-color:var(--side-b)}.place-hero:disabled{cursor:default}.place-hero .hero-title{display:grid;font-size:12px}.place-selected{outline:2px solid var(--active)}.place-done{opacity:.55}.place-mark{margin-left:auto;font-size:11px}@media(max-width:1000px){.stage.placement{grid-template-columns:minmax(0,1fr)}}.overlay-wide{width:min(620px,calc(100vw - 32px))}.overlay-card h2{font-size:13px;color:var(--dim)}.big-score{margin:0;font-size:34px;font-weight:700}.level-up{display:grid;gap:6px;width:100%;margin:0;padding:0;list-style:none;text-align:left}.level-up li{display:grid;grid-template-columns:auto 110px 1fr;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--border);border-radius:8px;font-size:12.5px}.level-changes{display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--dim)}.level-changes b{color:#4bbd7f}.match-history{display:grid;gap:3px;margin:0;padding:0;list-style:none}.match-history .won{color:#4bbd7f}.match-history .lost{color:var(--theirs)}.upgrade{display:grid;grid-template-columns:minmax(0,1fr) 230px;align-items:start;gap:10px}.upgrade-list{display:grid;gap:10px}.upgrade-hero{display:grid;gap:6px;padding:10px;border:1px solid var(--border);border-left:4px solid var(--ours);border-radius:8px;background:var(--panel)}.upgrade-hero header{display:flex;align-items:center;gap:8px}.upgrade-owned{margin-left:auto;font-size:12px}.upgrade-hero .level-changes{margin:0;font-size:12px}.perk-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}.perk-card{display:grid;gap:3px;align-content:start;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#22262f;cursor:pointer}.perk-card:hover{border-color:var(--active)}.perk-category{font-size:11px;text-transform:uppercase;letter-spacing:.04em}.perk-text{font-size:12.5px;color:#c9cddb}.perk-chosen{border-color:var(--active);box-shadow:0 0 0 1px var(--active)}.perk-abilities{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.perk-abilities button{padding:2px 8px;border:1px solid var(--active);border-radius:6px;background:var(--panel);color:var(--active);font-size:12px;cursor:pointer}.upgrade-done{margin-left:auto;padding:5px 14px}.upgrade-done:disabled{opacity:.45;cursor:default}.upgrade-enemy{display:grid;gap:6px}.upgrade-enemy h2{color:var(--theirs)}.upgrade-enemy-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-left:4px solid var(--theirs);border-radius:8px;background:var(--panel);font-size:12.5px}.hero-perks{margin:3px 0 0;font-size:12px}@media(max-width:1000px){.upgrade{grid-template-columns:minmax(0,1fr)}.perk-row,.swap-row{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}}.unlock-block{margin:4px 0 8px}.unlock-title{display:block;margin:6px 0 4px;font-size:12px;font-weight:600;color:var(--active)}.unlock-card{border-color:#6b5a2e}.reward-block{margin:0 0 10px}.reward-rare{border-color:#3f6fb0}.reward-legendary{border-color:#b07a2e}.swap-block{display:grid;gap:6px;padding:10px;border:1px dashed var(--border);border-radius:8px}.swap-block header{display:flex;align-items:center;gap:10px}.swap-block header .unlock-title{margin:0}.swap-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;align-items:start}.swap-candidate{display:grid;gap:6px;padding:4px;border:1px solid transparent;border-radius:10px}.swap-candidate.perk-chosen{border-color:var(--active)}.swap-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12px}.upgrade-leaving{opacity:.55;border-left-color:var(--dim)}.upgrade-newcomer{border-left-color:var(--active)}.catch-up{color:var(--active);font-size:12.5px}.draft-class-trait{margin:2px 0 4px;font-size:12px}.online-card .menu-seed button,.room-code button,.upgrade-done button{padding:5px 12px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);cursor:pointer}.upgrade-done button.primary{border-color:var(--active);color:var(--active)}.online-card button:disabled,.upgrade-done button:disabled{opacity:.5;cursor:default}.online-status,.online-problem{margin:0}.online-problem{color:var(--theirs)}.room-code{display:flex;align-items:center;gap:12px}.room-code strong{font-size:28px;letter-spacing:4px;color:var(--active);font-variant-numeric:tabular-nums}.room-seats{display:grid;gap:6px;margin:0;padding:0;list-style:none}.room-seats li{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:#22262f}.room-seats li.seat-ready{border-color:#4f9a5a}.seat-mark{color:#7fd08a}.online-banner{position:fixed;top:52px;left:50%;z-index:30;transform:translate(-50%);padding:6px 16px;border:1px solid #6a2a22;border-radius:8px;background:#3a1f1c;color:#ffd7cf;box-shadow:0 4px 16px #0006}.chat-toggle{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--border);border-radius:18px;background:var(--panel);color:var(--text);cursor:pointer}.chat-unread{min-width:20px;padding:0 6px;border-radius:10px;background:var(--theirs);color:#fff;font-size:12px;font-weight:700;text-align:center}.chat-panel{position:fixed;right:16px;bottom:16px;z-index:40;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(320px,calc(100vw - 32px));height:300px;border:1px solid var(--border);border-radius:10px;background:var(--panel);box-shadow:0 6px 24px #00000073}.chat-panel header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid var(--border)}.chat-panel header button{border:none;background:none;color:var(--dim);font-size:18px;cursor:pointer}.chat-panel ol{margin:0;padding:6px 10px;overflow-y:auto;list-style:none;overflow-wrap:anywhere}.chat-panel form{display:flex;gap:6px;padding:6px;border-top:1px solid var(--border)}.chat-panel input{flex:1;min-width:0;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font:inherit}.chat-panel form button{padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);cursor:pointer}