:root{--order: #3f8fe0;--chaos: #e04a4a;--gold: #d8b45a;--gold-bright: #ffd77a;--bg-0: #05070d;--bg-1: #0b1018;--bg-2: #121a26;--bg-3: #1b2634;--border: #2c3a4d;--border-bright: #48607d;--text: #dfe6f0;--text-dim: #8fa0b8;--hp: #3fd06a;--mana: #4a8fe0;--xp: #c8a0ff;--font: "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-0);color:var(--text);font-family:var(--font);user-select:none}#app{position:relative;width:100vw;height:100vh}.game-canvas{position:absolute;inset:0;display:block}.overlay-canvas{position:absolute;inset:0;pointer-events:none;z-index:5}.screen{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 30%,#16233a 0%,var(--bg-0) 70%)}.screen.hidden{display:none}button{font-family:var(--font);cursor:pointer;border:1px solid var(--border-bright);background:linear-gradient(180deg,var(--bg-3),var(--bg-2));color:var(--text);padding:10px 18px;border-radius:4px;font-size:14px;letter-spacing:.04em;transition:all .12s ease}button:hover:not(:disabled){border-color:var(--gold);color:var(--gold-bright);transform:translateY(-1px)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:linear-gradient(180deg,#2c5f9e,#1b3f6e);border-color:#4a8fd0;font-weight:700}button.primary:hover:not(:disabled){background:linear-gradient(180deg,#3a76bd,#24518a)}button.danger{border-color:#a04040}.menu-root{align-items:center;justify-content:center;gap:26px}.title{font-size:78px;font-weight:200;letter-spacing:.22em;background:linear-gradient(180deg,#fff2c8,var(--gold) 55%,#8a6a28);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center}.subtitle{color:var(--text-dim);letter-spacing:.3em;font-size:13px;text-transform:uppercase;margin-top:-18px}.menu-buttons{display:flex;flex-direction:column;gap:12px;width:320px;margin-top:18px}.menu-buttons button{padding:15px;font-size:15px}.name-input{background:var(--bg-1);border:1px solid var(--border);color:var(--text);padding:12px;border-radius:4px;text-align:center;font-size:15px;font-family:var(--font);width:320px}.difficulty-row{display:flex;gap:8px;width:320px}.difficulty-row button{flex:1;padding:9px;font-size:13px}.menu-notice{max-width:560px;text-align:center;font-size:12px;line-height:1.75;color:var(--gold-bright);background:#d8b45a14;border:1px solid rgba(216,180,90,.4);border-radius:5px;padding:11px 16px;margin-top:4px}.difficulty-row button.active{border-color:var(--gold);color:var(--gold-bright);background:linear-gradient(180deg,#3a3222,#241e14)}.cs-root{padding:20px 28px;gap:14px}.cs-header{display:flex;justify-content:space-between;align-items:center}.cs-header h2{font-weight:300;letter-spacing:.2em;font-size:22px;color:var(--gold)}.cs-body{display:grid;grid-template-columns:230px 1fr 230px;gap:18px;flex:1;min-height:0}.team-column{display:flex;flex-direction:column;gap:8px;overflow-y:auto}.team-column h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);padding-bottom:4px}.cs-slot{display:flex;align-items:center;gap:10px;padding:9px;background:var(--bg-1);border:1px solid var(--border);border-left-width:3px;border-radius:4px}.cs-slot.order{border-left-color:var(--order)}.cs-slot.chaos{border-left-color:var(--chaos)}.cs-slot.me{background:var(--bg-3);border-color:var(--gold)}.cs-portrait{width:40px;height:40px;border-radius:3px;flex-shrink:0;border:1px solid var(--border-bright)}.cs-slot-info{min-width:0;flex:1}.cs-slot-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-slot-sub{font-size:11px;color:var(--text-dim);text-transform:capitalize}.cs-center{display:flex;flex-direction:column;gap:12px;min-height:0}.role-picker{display:flex;gap:8px;justify-content:center}.role-btn{padding:9px 16px;text-transform:capitalize;font-size:13px}.role-btn.active{border-color:var(--gold);color:var(--gold-bright)}.champ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px;overflow-y:auto;padding:6px;flex:1;background:#00000047;border:1px solid var(--border);border-radius:5px;min-height:0}.champ-card{position:relative;aspect-ratio:1;border-radius:4px;border:2px solid transparent;cursor:pointer;overflow:hidden;transition:transform .1s ease,border-color .1s ease}.champ-card:hover{transform:scale(1.06);border-color:var(--border-bright)}.champ-card.selected{border-color:var(--gold);box-shadow:0 0 14px #d8b45a80}.champ-card.taken{filter:grayscale(1) brightness(.4);cursor:not-allowed}.champ-card-name{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000000eb);font-size:10px;padding:12px 3px 3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.champ-detail{display:flex;gap:14px;background:var(--bg-1);border:1px solid var(--border);border-radius:5px;padding:12px;min-height:168px}.champ-detail-portrait{width:104px;height:104px;border-radius:4px;flex-shrink:0;border:1px solid var(--border-bright)}.champ-detail-info{flex:1;min-width:0}.champ-detail-info h3{font-size:19px;font-weight:500}.champ-detail-info .champ-title{color:var(--gold);font-size:12px;font-style:italic;margin-bottom:7px}.ability-row{display:flex;gap:7px;margin-top:8px}.ability-chip{flex:1;background:var(--bg-2);border:1px solid var(--border);border-radius:3px;padding:6px;font-size:10px;line-height:1.35}.ability-chip b{display:block;color:var(--gold-bright);font-size:11px;margin-bottom:2px}.ability-chip .key{display:inline-block;background:var(--bg-3);border:1px solid var(--border-bright);border-radius:2px;padding:0 4px;margin-right:4px;color:var(--text);font-size:9px}.cs-footer{display:flex;justify-content:center;gap:12px;align-items:center}.loading-root{align-items:center;justify-content:center;gap:30px}.loading-teams{display:flex;gap:60px}.loading-team{display:flex;flex-direction:column;gap:10px}.loading-player{display:flex;align-items:center;gap:10px;width:260px}.loading-player img,.loading-player .cs-portrait{width:54px;height:54px}.loading-bar{width:460px;height:5px;background:var(--bg-2);border-radius:3px;overflow:hidden}.loading-bar div{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:width .3s ease}.hud{position:absolute;inset:0;z-index:10;pointer-events:none}.hud>*{pointer-events:auto}.hud-top{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#080c14f2,#080c1499);border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;padding:7px 20px;font-size:14px}.hud-score{font-weight:700;font-size:17px;min-width:34px;text-align:center}.hud-score.order{color:var(--order)}.hud-score.chaos{color:var(--chaos)}.hud-timer{font-variant-numeric:tabular-nums;color:var(--text-dim);min-width:52px;text-align:center}.hud-objectives{display:flex;gap:10px;font-size:11px;color:var(--text-dim);border-left:1px solid var(--border);padding-left:12px}.obj-chip{display:flex;align-items:center;gap:4px}.obj-chip .dot{width:8px;height:8px;border-radius:50%}.kill-feed{position:absolute;top:52px;right:14px;display:flex;flex-direction:column;gap:4px;align-items:flex-end;max-width:380px}.kill-feed-item{background:#080c14e0;border:1px solid var(--border);border-left:3px solid var(--border-bright);border-radius:3px;padding:5px 10px;font-size:12px;animation:slideIn .24s ease}.kill-feed-item.order{border-left-color:var(--order)}.kill-feed-item.chaos{border-left-color:var(--chaos)}.kill-feed-item.objective{border-left-color:var(--gold);color:var(--gold-bright)}@keyframes slideIn{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}.hud-bottom{position:absolute;bottom:0;left:50%;transform:translate(-50%);display:flex;align-items:flex-end;gap:10px;padding:8px 14px 10px;background:linear-gradient(0deg,#080c14f5,#080c148c);border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0}.player-portrait-wrap{position:relative}.player-portrait{width:74px;height:74px;border-radius:4px;border:2px solid var(--border-bright)}.player-level{position:absolute;bottom:-5px;left:-5px;width:26px;height:26px;background:var(--bg-0);border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--gold-bright)}.bars-column{display:flex;flex-direction:column;gap:3px;width:240px}.bar{position:relative;height:17px;background:#0009;border:1px solid var(--border);border-radius:2px;overflow:hidden}.bar .fill{height:100%;transition:width .15s linear}.bar .fill.hp{background:linear-gradient(180deg,#56e888,var(--hp))}.bar .fill.mp{background:linear-gradient(180deg,#6ba8f0,var(--mana))}.bar .fill.xp{background:linear-gradient(180deg,#d8b0ff,var(--xp))}.bar .label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.9)}.bar.small{height:7px}.abilities-row{display:flex;gap:5px;align-items:flex-end}.ability-slot{position:relative;width:56px;height:56px;border:2px solid var(--border-bright);border-radius:4px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}.ability-slot.summoner{width:42px;height:42px}.ability-slot.ready{border-color:var(--gold)}.ability-slot.unlearned{filter:grayscale(1) brightness(.45)}.ability-slot .glyph{font-size:24px;font-weight:700;color:var(--text)}.ability-slot .key{position:absolute;bottom:1px;right:3px;font-size:10px;color:var(--gold-bright);font-weight:700;text-shadow:0 1px 2px #000}.ability-slot .rank{position:absolute;top:1px;left:3px;font-size:9px;color:var(--text-dim)}.ability-slot .cd{position:absolute;inset:0;background:#000000b8;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:#fff}.ability-slot .levelup{position:absolute;top:-8px;left:50%;transform:translate(-50%);width:18px;height:18px;border-radius:50%;background:var(--gold);color:#000;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;animation:pulse 1.1s infinite}@keyframes pulse{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.18)}}.stats-column{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--text-dim);min-width:96px}.stats-column span b{color:var(--text);font-weight:600}.items-grid{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(2,34px);gap:3px}.item-slot{width:34px;height:34px;border:1px solid var(--border);border-radius:3px;background:#00000073;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px;text-align:center;line-height:1.1;overflow:hidden}.item-slot.filled{border-color:var(--border-bright)}.trinket-slot{width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;background:#00000073;position:relative}.minimap-wrap{position:absolute;bottom:8px;right:8px;border:2px solid var(--border-bright);border-radius:4px;background:#04080eeb;padding:3px}.minimap{display:block;cursor:pointer}.hud-resources{position:absolute;bottom:112px;right:12px;display:flex;flex-direction:column;gap:3px;align-items:flex-end;font-size:13px;text-shadow:0 1px 3px #000}.hud-resources .gold{color:var(--gold-bright);font-weight:700}.scoreboard{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#060a10f7;border:1px solid var(--border-bright);border-radius:8px;padding:18px;min-width:880px;z-index:30}.scoreboard table{width:100%;border-collapse:collapse;font-size:13px}.scoreboard th{text-align:left;color:var(--text-dim);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:6px 8px;border-bottom:1px solid var(--border)}.scoreboard td{padding:6px 8px;border-bottom:1px solid rgba(44,58,77,.4)}.scoreboard tr.order td:first-child{border-left:3px solid var(--order)}.scoreboard tr.chaos td:first-child{border-left:3px solid var(--chaos)}.scoreboard tr.me{background:#d8b45a1f}.scoreboard .team-header{font-weight:700;letter-spacing:.1em;padding-top:12px}.sb-items{display:flex;gap:2px}.sb-item{width:19px;height:19px;border-radius:2px;border:1px solid var(--border)}.chat-box{position:absolute;bottom:118px;left:12px;width:380px;display:flex;flex-direction:column;gap:3px}.chat-log{max-height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;font-size:12px}.chat-msg{background:#060a10b3;padding:3px 8px;border-radius:3px;text-shadow:0 1px 2px #000}.chat-msg .who{font-weight:700}.chat-input{display:none;background:#060a10f2;border:1px solid var(--gold);color:var(--text);padding:6px 9px;border-radius:3px;font-size:13px;font-family:var(--font)}.chat-input.active{display:block}.shop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:940px;height:640px;background:#060a10fb;border:1px solid var(--border-bright);border-radius:8px;display:flex;flex-direction:column;z-index:30}.shop-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}.shop-header h3{font-weight:300;letter-spacing:.16em;color:var(--gold)}.shop-body{display:grid;grid-template-columns:160px 1fr 260px;flex:1;min-height:0}.shop-cats{border-right:1px solid var(--border);padding:10px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}.shop-cat{padding:7px 10px;border-radius:3px;font-size:12px;cursor:pointer;border:1px solid transparent}.shop-cat:hover{background:var(--bg-2)}.shop-cat.active{background:var(--bg-3);border-color:var(--gold);color:var(--gold-bright)}.shop-items{padding:12px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;align-content:start}.shop-item{position:relative;aspect-ratio:1;border:1px solid var(--border);border-radius:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;text-align:center;padding:3px;transition:all .1s ease;overflow:hidden}.shop-item:hover{border-color:var(--gold);transform:translateY(-2px)}.shop-item.affordable{border-color:#4a7a4a}.shop-item .cost{position:absolute;bottom:1px;right:3px;color:var(--gold-bright);font-weight:700;font-size:9px;text-shadow:0 1px 2px #000}.shop-detail{border-left:1px solid var(--border);padding:14px;overflow-y:auto;font-size:12px;line-height:1.5}.shop-detail h4{color:var(--gold-bright);font-size:15px;margin-bottom:3px}.shop-detail .stat-line{color:#8fd0a0}.shop-detail .passive{margin-top:8px;color:var(--text-dim)}.shop-detail .passive b{color:var(--gold)}.shop-footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.recommended-row{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);align-items:center;font-size:11px;color:var(--text-dim)}.ping-wheel{position:absolute;width:220px;height:220px;z-index:40;pointer-events:none;transform:translate(-50%,-50%)}.ping-option{position:absolute;width:56px;height:56px;border-radius:50%;background:#080c14f0;border:2px solid var(--border-bright);display:flex;align-items:center;justify-content:center;font-size:22px;transform:translate(-50%,-50%);transition:all .1s ease}.ping-option.hot{border-color:var(--gold);transform:translate(-50%,-50%) scale(1.22)}.modal-backdrop{position:absolute;inset:0;background:#020408d1;z-index:50;display:flex;align-items:center;justify-content:center}.modal{background:var(--bg-1);border:1px solid var(--border-bright);border-radius:8px;padding:22px;min-width:460px;max-height:82vh;overflow-y:auto}.modal h3{font-weight:300;letter-spacing:.16em;color:var(--gold);margin-bottom:16px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid rgba(44,58,77,.4);font-size:13px}.setting-row input[type=range]{width:180px}.keybind-btn{min-width:96px;font-size:12px;padding:5px 9px}.keybind-btn.listening{border-color:var(--gold);color:var(--gold-bright)}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.postgame{align-items:center;justify-content:center;gap:20px}.pg-result{font-size:76px;font-weight:200;letter-spacing:.2em}.pg-result.victory{color:#6ae08a;text-shadow:0 0 40px rgba(106,224,138,.4)}.pg-result.defeat{color:#e06a6a;text-shadow:0 0 40px rgba(224,106,106,.35)}.pg-sub{color:var(--text-dim);letter-spacing:.2em;font-size:13px;margin-top:-12px}.pg-table{background:#060a10e6;border:1px solid var(--border);border-radius:8px;padding:16px;min-width:960px}.pg-mvp{color:var(--gold-bright);font-weight:700}.toast{position:absolute;top:96px;left:50%;transform:translate(-50%);background:#080c14f2;border:1px solid var(--gold);color:var(--gold-bright);padding:9px 20px;border-radius:4px;font-size:14px;z-index:45;animation:slideIn .2s ease}.surrender-banner{position:absolute;top:140px;left:50%;transform:translate(-50%);background:#080c14f2;border:1px solid var(--border-bright);padding:10px 18px;border-radius:5px;z-index:40;font-size:13px}.hint-bar{position:absolute;bottom:6px;left:12px;font-size:11px;color:var(--text-dim);text-shadow:0 1px 2px #000;max-width:340px;line-height:1.6}.respawn-overlay{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:12;pointer-events:none}.respawn-overlay .big{font-size:62px;font-weight:200;color:#e06a6a;letter-spacing:.1em}.respawn-overlay .small{color:var(--text-dim);letter-spacing:.2em;font-size:13px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0000004d}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-bright)}