:root{--bg:#181a26;--panel:#23263a;--panel-2:#2d3150;--ink:#f4f1e8;--muted:#9aa0c3;--accent:#4fc3f7;--accent-2:#ff7043;--good:#7cf29a;--bad:#ff5252;--common:#9aa0c3;--uncommon:#7cf29a;--rare:#4fc3f7;--wild:#ff7043;--legendary:#fff176;color:var(--ink);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);-webkit-user-select:none;user-select:none;height:100%;margin:0;overflow:hidden}#app,#stage{position:fixed;inset:0}body.playing #stage canvas{cursor:none}#ui{pointer-events:none;position:fixed;inset:0}#ui button,#ui .card{pointer-events:auto}button{font:inherit;cursor:pointer;color:var(--ink);border:none;border-radius:10px}button.primary{background:var(--accent-2);color:#1d1f2b;letter-spacing:.08em;text-transform:uppercase;padding:.7rem 2.6rem;font-size:1.3rem;font-weight:800;box-shadow:0 4px #b3472a}button.primary:hover{filter:brightness(1.08)}button.primary:active{transform:translateY(2px);box-shadow:0 2px #b3472a}button.secondary{background:var(--panel-2);padding:.55rem 1.2rem;font-weight:600}button.secondary:hover{background:#3a3f66}kbd{background:var(--panel-2);border-bottom:2px solid #15172a;border-radius:5px;padding:.05rem .4rem;font-family:inherit;font-size:.8em;font-weight:700;display:inline-block}.panel{background:color-mix(in srgb, var(--panel) 94%, transparent);border:2px solid #34385a;border-radius:18px;padding:1.5rem 2rem;box-shadow:0 20px 60px #00000073}.screen{pointer-events:auto;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}#title{background:radial-gradient(circle at 50% 30%,#4fc3f71f,#0000 60%),#181a26b3}.title-panel{text-align:center;width:100%;max-width:560px}.logo{width:72px;height:72px}h1{letter-spacing:.06em;margin:.3rem 0 0;font-size:clamp(2.4rem,7vw,4rem);font-weight:900}.tagline{color:var(--muted);margin:.2rem 0 1.2rem}.chips{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1rem;display:flex}.chip{background:var(--panel-2);border:2px solid #0000;padding:.35rem .9rem;font-size:.9rem}.chip.selected{border-color:var(--accent)}.net-status{min-height:1.3em;color:var(--muted);margin-top:.5rem;font-size:.85rem}.net-status.error{color:var(--bad)}.title-actions{margin-top:.4rem}.offline{border-top:1px solid #34385a;margin-top:1rem;padding-top:.8rem}.offline .chips{margin:.5rem 0}.offline-label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem}#offline-arena{color:#fff2d1;max-width:100%;font:inherit;background:#202d40;border:1px solid #607186;border-radius:8px;padding:9px 12px}button.small{padding:.25rem .6rem;font-size:.8rem}#room-chip{background:#181a26b8;border-radius:10px;align-items:center;gap:.5rem;padding:.35rem .5rem .35rem .7rem;font-size:.85rem;font-weight:700;display:flex;position:absolute;bottom:12px;right:12px}#room-label.error{color:var(--bad)}#waiting-note{border:1px solid var(--accent);background:#181a26d9;border-radius:10px;padding:.4rem .9rem;font-weight:700;position:absolute;top:70px;left:50%;transform:translate(-50%)}.controls{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:.4rem 1rem;margin:1.4rem 0 .8rem;padding:0;font-size:.85rem;list-style:none;display:flex}.codex-wrap{border-top:1px solid #34385a;margin-top:1rem;padding-top:.8rem}.codex-label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;font-size:.8rem}#codex{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}.codex-entry{background:var(--panel-2);opacity:.55;border-radius:8px;align-items:center;gap:.4rem;padding:.3rem .6rem;font-size:.85rem;display:flex}.codex-entry.found{opacity:1;color:var(--legendary)}.codex-entry .icon{width:22px;height:22px}.hud-top{text-align:center;text-shadow:0 2px 4px #0009;position:absolute;top:12px;left:50%;transform:translate(-50%)}#round{letter-spacing:.1em;text-transform:uppercase;font-weight:800}#mapinfo{color:var(--ink);opacity:.8;font-size:.85rem;font-weight:600}#timer{color:var(--muted);min-height:1.2em;font-size:.9rem}#scoreboard{flex-direction:column;gap:4px;min-width:200px;display:flex;position:absolute;top:12px;left:12px}.score-row{background:#181a26b8;border-radius:8px;align-items:center;gap:.45rem;padding:.25rem .55rem;font-size:.9rem;display:flex}.score-row.me{outline:1px solid #ffffff40}.score-row.dead{opacity:.45}.swatch{border:2px solid #1d1f2b;border-radius:50%;flex:none;width:12px;height:12px}.score-name{font-weight:700}.score-cards{flex-wrap:wrap;flex:1;gap:1px;display:flex}.score-value{font-variant-numeric:tabular-nums;font-weight:800}.mini-icon{vertical-align:middle;width:16px;height:16px}#killfeed{flex-direction:column;align-items:flex-end;gap:4px;display:flex;position:absolute;top:12px;right:12px}.kill{background:#181a26b8;border-radius:8px;padding:.2rem .6rem;font-size:.85rem}#self{background:#181a26b8;border-radius:10px;flex-direction:column;gap:.35rem;min-width:180px;padding:.5rem .7rem;display:flex;position:absolute;bottom:12px;left:12px}#ammo{align-items:center;gap:4px;min-height:14px;display:flex}.pip{background:#3a3f66;border-radius:3px;width:10px;height:14px}.pip.full{background:var(--ink)}.reloading{color:var(--muted);margin-left:.3rem;font-size:.75rem}.cooldown{color:var(--muted);align-items:center;gap:.5rem;font-size:.75rem;display:flex}.cooldown span{width:3.2em}.bar{background:#3a3f66;border-radius:3px;flex:1;height:6px;overflow:hidden}.fill{background:var(--accent);width:100%;height:100%}#prompts{flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:calc(100% - 32px);display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.prompt{text-transform:uppercase;background:#181a26cc;border-radius:8px;align-items:center;gap:.4rem;padding:.3rem .6rem;font-size:.85rem;font-weight:700;transition:opacity .3s;display:flex}.prompt.done{opacity:.2}#banner{text-align:center;text-shadow:0 3px 8px #000000b3;max-width:calc(100% - 32px);position:absolute;top:26%;left:50%;transform:translate(-50%)}.banner-text{letter-spacing:.05em;text-transform:uppercase;font-size:clamp(1.8rem,5vw,3.2rem);font-weight:900;animation:.25s ease-out pop}.banner-sub{color:var(--ink);opacity:.8;font-weight:600}.banner-note{color:var(--legendary);text-transform:uppercase;letter-spacing:.05em;margin-top:.4rem;font-weight:800}@keyframes pop{0%{opacity:0;transform:scale(1.4)}}#draft{background:#0f101ab8}.draft-panel{text-align:center;width:100%;max-width:1100px}.draft-panel h2{text-transform:uppercase;letter-spacing:.06em;margin:0;font-size:2rem;font-weight:900}#draft-sub{color:var(--muted);margin:.3rem 0 1.2rem}#draft-cards{flex-wrap:nowrap;justify-content:center;gap:1rem;display:flex}.card{background:var(--panel);border:3px solid var(--common);text-align:center;border-radius:16px;flex-direction:column;flex:0 190px;align-items:center;gap:.4rem;min-width:140px;min-height:250px;padding:1rem .8rem;transition:transform .12s;animation:.25s ease-out backwards deal;display:flex;position:relative}.card:nth-child(2){animation-delay:50ms}.card:nth-child(3){animation-delay:.1s}.card:nth-child(4){animation-delay:.15s}.card:nth-child(5){animation-delay:.2s}@keyframes deal{0%{opacity:0;transform:translateY(30px)}}.card:hover{background:var(--panel-2);transform:translateY(-6px)}.card.rarity-uncommon{border-color:var(--uncommon)}.card.rarity-rare{border-color:var(--rare)}.card.rarity-wild{border-color:var(--wild)}.card.rarity-legendary{border-color:var(--legendary)}.card.comeback:after{content:"Comeback";background:var(--accent-2);color:#1d1f2b;text-transform:uppercase;border-radius:6px;padding:.1rem .5rem;font-size:.7rem;font-weight:800;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.card-key{color:var(--muted);font-weight:800;position:absolute;top:8px;left:10px}.card-rarity{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:.65rem;position:absolute;top:9px;right:10px}.card-icon{width:72px;height:72px;margin-top:.8rem}.card-name{font-size:1.15rem;font-weight:800}.card-level{color:var(--accent);font-size:.75rem;font-weight:700}.card-desc{color:var(--ink);opacity:.85;font-size:.9rem}.card-hint{color:var(--legendary);opacity:.8;margin-top:auto;font-size:.7rem}.draft-footer{justify-content:center;align-items:center;gap:1rem;margin-top:1.2rem;display:flex}.draft-timer{max-width:360px}#draft-timer-fill{background:var(--accent-2);transition:width .1s linear}#builds{width:min(720px,100% - 32px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#builds h3{text-transform:uppercase;letter-spacing:.1em;margin:0 0 .6rem}.build-row{border-bottom:1px solid #34385a;align-items:center;gap:.8rem;padding:.55rem 0;display:flex}.build-row:last-child{border-bottom:none}.build-info{flex:1;min-width:0}.build-cards{color:var(--muted);flex-wrap:wrap;gap:.3rem;margin-top:.3rem;font-size:.8rem;display:flex}.card-tag,.evo-tag{background:var(--panel-2);color:var(--ink);border-radius:6px;align-items:center;gap:.25rem;padding:.1rem .4rem;display:inline-flex}.evo-tag{color:var(--legendary);font-weight:700}.placement{text-align:right;width:2.6em;font-size:1.2rem;font-weight:900}.end-panel{width:min(760px,100%)}.end-panel h2{text-align:center;text-transform:uppercase;margin:0 0 .8rem;font-size:2.2rem;font-weight:900}.end-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:.7rem;margin-top:1.2rem;display:flex}@media (max-width:760px){#room-chip{top:140px;bottom:auto}#draft-cards{flex-wrap:wrap}.card{flex-basis:150px;min-height:210px}.card-icon{width:52px;height:52px}#scoreboard{min-width:0}}#practice-description{color:var(--muted);font-size:.85rem}#practice-controls{z-index:20;background:#181a26f2;border-radius:10px;align-items:center;gap:.6rem;padding:.4rem .6rem;font-size:.8rem;display:flex;position:absolute;top:54px;right:12px}#round-feedback,#pick-confirmation{text-align:center;background:#181a26f2;border-radius:10px;width:max-content;max-width:calc(100% - 32px);padding:.6rem .9rem;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}#round-feedback{top:110px}#pick-confirmation{z-index:21;color:var(--accent);top:18%}#health-label{font-size:.85rem;font-weight:700}#self>.bar{flex:none;width:100%}#health-fill{background:#7cf29a}#self-status{gap:.6rem;font-size:.8rem;font-weight:700;display:flex}#burn-status{color:#ffb36b}#freeze-status{color:#8bddff}#draft-help,#practice-result{color:var(--accent);font-weight:700}#playtest-panel{z-index:100;color:#fff2d1;background:#142538f5;border:1px solid #53758c;border-radius:10px;width:min(390px,100vw - 24px);position:fixed;top:48px;right:12px}#playtest-panel summary{cursor:pointer;padding:10px 14px;font-weight:700}#playtest-panel .test-body{max-height:calc(100vh - 120px);padding:0 14px 14px;overflow:auto}#playtest-panel label{margin:8px 0;font-size:13px;display:block}#playtest-panel select,#playtest-panel input,#playtest-panel textarea{box-sizing:border-box;color:#fff;background:#243d53;border:1px solid #658397;border-radius:4px;width:100%;padding:6px;display:block}#playtest-panel .test-actions{flex-wrap:wrap;gap:6px;display:flex}#playtest-panel button{color:#142b40;cursor:pointer;background:#30bdbe;border:1px solid #8fe5dd;border-radius:6px;padding:8px;font-size:12px}#playtest-panel button:disabled{opacity:.45;cursor:default}#playtest-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}#playtest-panel .test-help{font-size:12px;line-height:1.5}#test-message{color:#ffba69}#graphics-toggle{z-index:101;color:#fff2d1;cursor:pointer;background:#142b40;border:1px solid #30bdbe;border-radius:8px;padding:7px 12px;font-size:12px;position:fixed;top:10px;right:12px}#graphics-toggle:focus-visible{outline-offset:2px;outline:3px solid #fff2d1}#self{box-sizing:border-box;width:260px;max-width:calc(100vw - 24px)}#weapon-hud{border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;padding:9px 0}.weapon-heading,.weapon-hint{justify-content:space-between;align-items:center;gap:8px;display:flex}#ammo-count{font-variant-numeric:tabular-nums;font-size:1.2rem}#weapon-state{font-variant-numeric:tabular-nums;color:#7cf29a;font-size:.75rem}#ammo{flex-wrap:wrap;margin:6px 0}.pip{flex-shrink:0}#reload-track{height:8px;margin:7px 0}#reload-fill{background:#ffcf68}.weapon-hint{color:var(--muted);font-size:.7rem}.is-reloading #weapon-state,.is-low #weapon-state{color:#ffcf68}.is-reloading .pip{background:#574b36}.cooldown>span{flex-shrink:0;width:90px}.cooldown strong{text-align:right;font-variant-numeric:tabular-nums;min-width:48px;font-size:.72rem}.cooldown.is-ready strong{color:#7cf29a}.cooldown kbd,.weapon-hint kbd{padding:1px 3px;font-size:.6rem}#self-status{flex-wrap:wrap}@media (max-width:600px){#self{gap:3px;width:215px;padding:6px 8px}#weapon-hud{padding:5px 0}.cooldown>span{width:76px}}#rating-badge{z-index:20;background:#152b3eec;border-radius:8px;max-width:55vw;padding:8px 12px;font-size:12px;position:fixed;top:148px;left:12px}#rating-badge button{margin-left:8px}#clips-panel{z-index:25;background:#152b3ef5;border:1px solid #55758a;border-radius:9px;width:min(390px,40vw);padding:10px 14px;font-size:13px;position:fixed;top:100px;right:12px}#clips-panel summary{cursor:pointer;font-weight:700}.clip-controls{flex-wrap:wrap;gap:8px;padding-top:10px;display:flex}.clip-controls label,#clip-status{width:100%}.clip-controls input{width:auto;margin-right:8px}#clip-status{color:#a7d9ef}#clip-dialog{color:#f4f1e8;background:#182336;border:1px solid #658ca5;border-radius:14px;width:min(900px,92vw);max-height:88vh;overflow:auto}#clip-dialog::backdrop{background:#000b}#clip-dialog canvas{width:100%;display:block}.clip-row{border-top:1px solid #ffffff25;flex-wrap:wrap;gap:8px;padding:12px 0;display:flex}.clip-row span{width:100%}.clip-row button,.clip-controls button{padding:6px 10px;font-size:12px}#clip-dialog button,.clip-controls button{color:#f4f1e8;cursor:pointer;background:#263d56;border:1px solid #658ca5;border-radius:6px}#clip-dialog button:hover,.clip-controls button:hover{background:#365674}#clip-dialog button:disabled,.clip-controls button:disabled{opacity:.5;cursor:default}.ranked-help{color:var(--muted);max-width:420px;margin:8px auto;font-size:12px}#combat-streak{color:#ffe678;pointer-events:none;background:#142538ed;border-radius:9px;padding:6px 12px;font-size:22px;font-weight:900;position:absolute;top:80px;left:50%;transform:translate(-50%)}#death-recap{background:#192538f5;border:1px solid #a97c76;border-radius:9px;width:min(300px,40vw);max-height:38vh;padding:12px;font-size:12px;position:absolute;top:185px;left:12px;overflow:auto}#death-recap strong{color:#ffbc91;font-size:17px}#death-recap ul{padding-left:16px}.draft-choice{flex-direction:column;flex:180px;min-width:155px;max-width:250px;display:flex}.draft-choice .card{box-sizing:border-box;flex:1;width:100%}.stat-preview{color:#cdf1ff;font-size:12px;line-height:1.4;display:block}.preview-label,#draft-preview-note{color:#b7c2d7;font-size:11px}.card-details{text-align:left;background:#26374b;border-radius:0 0 8px 8px;padding:8px;font-size:12px}.card-details summary{cursor:pointer}#draft .draft-panel{max-height:95vh;overflow:auto}#test-metrics table{border-collapse:collapse;width:100%;font-size:11px}#test-metrics td,#test-metrics th{text-align:left;overflow-wrap:anywhere;border-bottom:1px solid #ffffff25;padding:5px}#ui .card-details,#ui #death-recap{pointer-events:auto}