:root{--gold: #c9a45c;--gold-dim: #8a6d3b;--panel-bg: linear-gradient(180deg, rgba(32, 26, 18, .96), rgba(16, 12, 8, .98));--panel-border: 1px solid #5e4a28}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0a0c10;font-family:Georgia,Times New Roman,serif;color:#d8cdb0;user-select:none}#app{position:relative;width:100%;height:100%}#app>canvas{display:block;position:absolute;inset:0}#overlay-canvas{position:absolute;inset:0;pointer-events:none;z-index:5}#hud{position:absolute;inset:0;pointer-events:none;z-index:10}#hud button,#hud .minimap,#hud .ability-box{pointer-events:auto}.topbar{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:18px;padding:6px 26px 8px;background:var(--panel-bg);border:var(--panel-border);border-top:none;border-radius:0 0 12px 12px;box-shadow:0 4px 18px #0009}.topbar .score{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:2px}.topbar .score .num{font-size:24px;font-weight:700}.topbar .dawn .num{color:#7ad97a}.topbar .gloom .num{color:#e8604a}.topbar .dawn .faction{color:#9ec890}.topbar .gloom .faction{color:#d09084}.topbar .timer{font-size:18px;color:var(--gold);min-width:56px;text-align:center;font-variant-numeric:tabular-nums}.help-line{position:absolute;top:6px;right:10px;font-size:11px;color:#d8cdb08c;font-family:Verdana,sans-serif}.bottom-panel{position:absolute;bottom:0;left:50%;transform:translate(-50%);display:flex;align-items:stretch;gap:14px;padding:10px 22px 12px;background:var(--panel-bg);border:var(--panel-border);border-bottom:none;border-radius:14px 14px 0 0;box-shadow:0 -6px 26px #000000b3;min-width:560px}.portrait-box{position:relative;width:86px;height:86px;border:2px solid var(--gold-dim);border-radius:6px;overflow:hidden;align-self:center}.level-badge{position:absolute;bottom:2px;right:2px;background:#0a0804e6;border:1px solid var(--gold-dim);color:var(--gold);font-size:13px;font-weight:700;padding:1px 6px;border-radius:4px}.respawn-overlay{position:absolute;inset:0;background:#0a0404c7;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:#ff7a5a}.panel-center{display:flex;flex-direction:column;gap:4px;justify-content:center}.hero-name-row{display:flex;align-items:baseline;gap:12px}.hero-name{font-size:15px;color:var(--gold);letter-spacing:.5px}.hero-role{font-size:11px;color:#9a8a68;letter-spacing:2px;text-transform:uppercase}.stat-bar{position:relative;width:320px;height:15px;background:#14100a;border:1px solid #443622;border-radius:3px;overflow:hidden}.stat-bar .fill{height:100%;transition:width .12s linear}.hp-bar .fill{background:linear-gradient(180deg,#5ecf52,#2a8a2e)}.mana-bar{height:12px}.mana-bar .fill{background:linear-gradient(180deg,#4a8ae8,#2351a8)}.bar-text{position:absolute;inset:0;text-align:center;font-size:10px;line-height:14px;color:#ffffffeb;font-family:Verdana,sans-serif;text-shadow:0 1px 2px #000}.ability-row{display:flex;gap:8px;margin-top:5px}.ability-box{position:relative;width:52px;height:52px;border:2px solid #5e4a28;border-radius:5px;overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s}.ability-box:hover{border-color:var(--gold)}.ability-box.targeting{border-color:#ffe8a0;box-shadow:0 0 12px #ffe8a0b3}.ability-box.no-mana canvas{filter:saturate(.2) brightness(.55) hue-rotate(180deg)}.ability-box.dead canvas{filter:grayscale(1) brightness(.4)}.ability-box.passive{border-style:dashed;cursor:default}.ability-key{position:absolute;bottom:1px;right:3px;font-size:11px;font-weight:700;color:#ffe8a0;text-shadow:0 1px 2px #000;font-family:Verdana,sans-serif}.ability-mana{position:absolute;bottom:1px;left:3px;font-size:9px;color:#7ab0ff;text-shadow:0 1px 2px #000;font-family:Verdana,sans-serif}.ability-cd{position:absolute;left:0;right:0;bottom:0;background:#08060cc7;pointer-events:none}.ability-cd-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none;font-family:Verdana,sans-serif}.xp-bar{width:320px;height:4px;background:#14100a;border:1px solid #3a3022;border-radius:2px;overflow:hidden;margin-top:4px}.xp-bar .fill{height:100%;background:linear-gradient(90deg,#b89a4a,#e8d06b)}.panel-right{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:110px}.gold-display{font-size:19px;color:#ffd02a;text-shadow:0 0 8px rgba(255,208,42,.35)}.gold-display .coin{font-size:15px}.hero-stats{display:flex;gap:10px;font-size:13px;font-family:Verdana,sans-serif}.hero-stats label{display:block;font-size:9px;color:#8a7a5a;letter-spacing:1px}.kda-display{font-size:11px;color:#b0a080;font-family:Verdana,sans-serif}.minimap-wrap{position:absolute;bottom:10px;left:10px;border:2px solid var(--gold-dim);border-radius:6px;box-shadow:0 0 24px #000c;overflow:hidden;line-height:0}.minimap{cursor:crosshair}.cast-hint{position:absolute;bottom:158px;left:50%;transform:translate(-50%);background:#100c08eb;border:1px solid var(--gold-dim);padding:5px 16px;border-radius:6px;font-size:13px;color:#ffe8a0;display:none}.announce-stack{position:absolute;top:64px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}.announce{font-size:19px;text-shadow:0 2px 6px #000;letter-spacing:.5px;transition:opacity .7s;animation:announce-in .25s ease-out}.announce.fade{opacity:0}@keyframes announce-in{0%{transform:scale(1.25);opacity:0}to{transform:scale(1);opacity:1}}.killfeed{position:absolute;top:56px;right:12px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}.kill-entry{background:#0e0a08d9;border:1px solid #3e3220;border-radius:4px;padding:3px 10px;font-size:12px;font-family:Verdana,sans-serif}.sel-info{position:absolute;bottom:158px;left:14px;background:#100c08e6;border:1px solid #4a3a22;border-radius:6px;padding:5px 14px;font-size:13px;display:none}.scoreboard{position:absolute;top:80px;left:50%;transform:translate(-50%);background:var(--panel-bg);border:1px solid var(--gold-dim);border-radius:10px;padding:16px 22px;min-width:460px;box-shadow:0 10px 40px #000c}.scoreboard h3{color:var(--gold);font-size:15px;margin-bottom:10px;text-align:center;letter-spacing:1px}.scoreboard table{width:100%;border-collapse:collapse;font-size:12px;font-family:Verdana,sans-serif}.scoreboard td,.scoreboard th{padding:3px 10px;text-align:center}.scoreboard .n{text-align:left}.scoreboard .head th{color:#8a7a5a;font-size:10px;letter-spacing:1px}.scoreboard .team-row td{color:#7ad97a;font-size:11px;letter-spacing:2px;padding-top:8px;text-transform:uppercase}.scoreboard .team-row.gloom td{color:#e8604a}.scoreboard .me{background:#c9a45c1f}.end-screen{position:absolute;inset:0;background:#040302b8;display:flex;align-items:center;justify-content:center;pointer-events:auto}.end-box{text-align:center;padding:50px 90px;background:var(--panel-bg);border:2px solid var(--gold-dim);border-radius:14px;box-shadow:0 0 80px #000000e6}.end-box h1{font-size:64px;letter-spacing:10px;margin-bottom:10px}.end-box.victory h1{color:#ffd86b;text-shadow:0 0 30px rgba(255,216,107,.6)}.end-box.defeat h1{color:#c0392b;text-shadow:0 0 30px rgba(192,57,43,.6)}.end-box p{color:#b0a080;margin-bottom:26px}.end-box button,.hs-start{font-family:Georgia,serif;font-size:17px;letter-spacing:2px;padding:12px 38px;background:linear-gradient(180deg,#6e5426,#3e2e12);color:#ffe8b0;border:1px solid var(--gold);border-radius:6px;cursor:pointer;transition:filter .15s,transform .1s}.end-box button:hover,.hs-start:hover{filter:brightness(1.25)}.hero-select{position:absolute;inset:0;z-index:50;background:radial-gradient(ellipse at 20% 110%,rgba(46,80,40,.3),transparent 55%),radial-gradient(ellipse at 80% -10%,rgba(110,40,30,.3),transparent 55%),radial-gradient(ellipse at center,#16120c,#08070a);display:flex;flex-direction:column;align-items:center;padding:28px 20px;overflow-y:auto;transition:opacity .35s}.hero-select.closing{opacity:0}.hs-title{text-align:center;margin-bottom:22px}.hs-title h1{font-size:58px;letter-spacing:14px;color:#e8d8b0;text-shadow:0 0 40px rgba(201,164,92,.5),0 4px 12px #000}.hs-title h1 span{color:var(--gold)}.hs-title p{margin-top:6px;color:#8a7a5a;font-size:14px;letter-spacing:1px}.hs-grid{display:grid;grid-template-columns:repeat(5,128px);gap:12px;margin-bottom:18px}.hs-card{background:#14100ae6;border:2px solid #3a3022;border-radius:8px;padding:8px;cursor:pointer;text-align:center;transition:border-color .15s,transform .12s,box-shadow .15s}.hs-card:hover{border-color:#7a6238;transform:translateY(-3px)}.hs-card.selected{border-color:var(--gold);box-shadow:0 0 22px #c9a45c73}.hs-portrait{height:86px;border-radius:5px;display:flex;align-items:center;justify-content:center;margin-bottom:7px}.hs-sigil{font-size:44px;font-weight:700;text-shadow:0 3px 10px #000}.hs-name{font-size:11.5px;color:#d8cdb0;min-height:28px;line-height:1.2}.hs-role-tag,.hs-role{display:inline-block;margin-top:4px;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:2px 8px;border-radius:8px;background:#00000080}.role-tank{color:#e8a04a}.role-carry{color:#e85a4a}.role-mage{color:#6aa8ff}.role-assassin{color:#c89be8}.role-support{color:#7ad97a}.hs-detail{width:700px;max-width:94vw;background:#120e09f0;border:1px solid #4a3a22;border-radius:10px;padding:16px 22px;margin-bottom:18px}.hs-detail h2{font-size:22px;margin-bottom:4px}.hs-lore{color:#9a8a68;font-size:13px;font-style:italic;margin:8px 0 12px}.hs-abilities{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.hs-ability{display:flex;gap:10px;align-items:flex-start;font-size:12px}.hs-ability small{color:#8a7a60;line-height:1.35}.hs-key{flex:0 0 auto;width:24px;height:24px;border:1px solid;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;margin-top:2px}.hs-start{margin-bottom:30px}#sound-toggle{position:absolute;top:10px;right:12px;z-index:20;width:40px;height:40px;font-size:19px;line-height:1;border:1px solid rgba(201,164,92,.45);border-radius:9px;background:#120d08b8;color:#e8dcc0;cursor:pointer;backdrop-filter:blur(3px);transition:border-color .15s,background .15s,transform .08s}#sound-toggle:hover{border-color:#c9a45ce6;background:#241a0ed9}#sound-toggle:active{transform:scale(.92)}#sound-toggle.muted{opacity:.62}