:root{--bg: #06080c;--bg-2: #0c1118;--panel: rgba(14, 20, 30, .92);--panel-stroke: #2a3645;--gold: #e8c87b;--gold-hi: #ffd98a;--radiant: #6fd66f;--dire: #d65656;--hp: #4dd16b;--hp-low: #d8453a;--mp: #4d8cd6;--xp: #b87fdc;--text: #d8dde6;--text-dim: #97a1ad;--danger: #ff5a4a;--shadow: 0 4px 18px rgba(0, 0, 0, .55);--font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;width:100%;background:#000;color:var(--text);font-family:var(--font);overflow:hidden;user-select:none;-webkit-user-select:none}body{cursor:default}#stage{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;background:#000;cursor:crosshair}#stage.cmd-target{cursor:cell}#boot{position:fixed;inset:0;z-index:1000;background:radial-gradient(ellipse at 50% 30%,#1a2236,#06080c 70%),linear-gradient(180deg,#07101e,#050308);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s ease}#boot.hide{opacity:0;pointer-events:none}#boot-logo{font-size:96px;font-weight:800;letter-spacing:8px;background:linear-gradient(180deg,#ffe9a8,#b07a25);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:0 0 40px rgba(230,180,80,.4);filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}#boot-logo span{color:#ff6c4a;-webkit-text-fill-color:#ff6c4a}#boot-tagline{color:var(--text-dim);letter-spacing:6px;margin-top:4px}#boot-bar{margin-top:36px;width:320px;height:6px;background:#1a2230;border-radius:3px;overflow:hidden}#boot-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,#ffb347,#ff6c4a);transition:width .25s ease}#boot-status{margin-top:12px;color:var(--text-dim);font-size:12px;letter-spacing:2px;text-transform:uppercase}#menu{position:fixed;inset:0;z-index:800;pointer-events:none}#menu.active{pointer-events:auto}.menu-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.55) saturate(1.05)}.menu-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 50%,#06080c)}.menu-title{position:absolute;top:8%;left:50%;transform:translate(-50%);font-size:84px;font-weight:800;letter-spacing:12px;background:linear-gradient(180deg,#ffe9a8,#b07a25);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 8px 24px rgba(0,0,0,.7))}.menu-title span{-webkit-text-fill-color:#ff6c4a}.menu-sub{position:absolute;top:calc(8% + 100px);left:50%;transform:translate(-50%);color:var(--gold);letter-spacing:10px;font-size:14px;text-transform:uppercase}.menu-buttons{position:absolute;bottom:12%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:12px;align-items:stretch}.menu-btn{background:linear-gradient(180deg,#2a3445,#141a25);border:1px solid #4a5668;color:var(--gold-hi);padding:14px 64px;font-size:18px;font-weight:700;letter-spacing:4px;cursor:pointer;text-transform:uppercase;box-shadow:var(--shadow);transition:transform .1s,box-shadow .1s,border-color .1s}.menu-btn:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 6px 22px #e6c86440}.menu-btn.primary{background:linear-gradient(180deg,#c47020,#6c3410);border-color:#ffb347;color:#fff8e0}.pick{position:absolute;inset:0;background:#06080cf5;display:flex;flex-direction:column;padding:32px}.pick-title{text-align:center;font-size:24px;letter-spacing:8px;color:var(--gold);margin-bottom:16px}.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;flex:1;overflow-y:auto;padding:12px}.pick-card{background:var(--panel);border:1px solid var(--panel-stroke);border-radius:6px;overflow:hidden;cursor:pointer;transition:transform .1s,border-color .1s;position:relative}.pick-card:hover{border-color:var(--gold);transform:translateY(-3px)}.pick-card.selected{border-color:var(--gold-hi);box-shadow:0 0 0 2px var(--gold)}.pick-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}.pick-card .pcap{padding:6px 8px;font-size:13px;color:var(--text);display:flex;justify-content:space-between;align-items:center}.pick-card .pcap .role{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}.pick-confirm{margin:12px auto 0}#hud{position:fixed;inset:0;pointer-events:none;z-index:200;font-family:var(--font)}#hud>*{pointer-events:auto}.topbar{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;gap:16px;align-items:center;background:var(--panel);border-bottom:1px solid var(--panel-stroke);padding:8px 18px;border-radius:0 0 8px 8px;box-shadow:var(--shadow)}.tb-score{font-size:22px;font-weight:700;letter-spacing:2px}.tb-score.radiant{color:var(--radiant)}.tb-score.dire{color:var(--dire)}.tb-time{font-size:18px;color:var(--gold);letter-spacing:2px;min-width:76px;text-align:center}.tb-dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}.player-panel{position:absolute;bottom:8px;left:8px;display:flex;gap:8px;align-items:flex-end}.portrait{width:110px;height:110px;border:2px solid var(--gold);border-radius:6px;background:#111 center/cover no-repeat;box-shadow:var(--shadow);position:relative;overflow:hidden}.portrait .level{position:absolute;bottom:4px;left:4px;background:#000000b3;color:var(--gold);padding:2px 6px;border-radius:3px;font-size:12px;font-weight:700}.bars{width:240px}.bar{background:#222;height:16px;border-radius:3px;overflow:hidden;position:relative;margin-bottom:2px;border:1px solid #000}.bar .fill{height:100%;transition:width .18s ease}.bar .fill.hp{background:linear-gradient(180deg,#62e07c,#2c8a3f)}.bar .fill.mp{background:linear-gradient(180deg,#69a8ff,#2554a0)}.bar .fill.xp{background:linear-gradient(180deg,#b87fdc,#6035a0);height:6px}.bar .lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.9);letter-spacing:1px}.xp-bar{height:8px}.xp-bar .lbl{font-size:9px}.stat-line{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--text);margin-top:4px}.stat-line .stat{display:flex;align-items:center;gap:4px}.stat-icon{width:12px;height:12px;border-radius:2px}.stat-icon.str{background:#d65a35}.stat-icon.agi{background:#4ad068}.stat-icon.int{background:#4d9cf0}.stat-icon.gold{background:var(--gold);border-radius:50%}.abilities{position:absolute;bottom:8px;left:50%;transform:translate(-50%);display:flex;gap:6px}.ability{width:64px;height:64px;background:#111 center/cover no-repeat;border:2px solid var(--panel-stroke);border-radius:4px;position:relative;cursor:pointer;box-shadow:var(--shadow)}@keyframes plus-pulse{0%,to{transform:scale(1);box-shadow:0 0 6px #ffd166}50%{transform:scale(1.15);box-shadow:0 0 14px #ffd166}}.ability:hover{border-color:var(--gold)}.ability.ready{border-color:var(--gold-hi)}.ability.disabled{filter:grayscale(.7) brightness(.6);cursor:not-allowed}.ability .key{position:absolute;top:2px;left:2px;background:#000000bf;color:var(--gold);font-size:10px;padding:1px 4px;border-radius:2px}.ability .cd{position:absolute;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;pointer-events:none}.ability .lvl{position:absolute;bottom:2px;right:2px;display:flex;gap:1px}.ability .pip{width:6px;height:6px;background:#333;border:1px solid #000}.ability .pip.on{background:var(--gold)}.inventory{position:absolute;bottom:8px;right:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--panel);padding:6px;border:1px solid var(--panel-stroke);border-radius:6px;box-shadow:var(--shadow)}.inv-slot{width:50px;height:50px;background:#111 center/cover no-repeat;border:1px solid #2a3645;border-radius:3px;position:relative;cursor:pointer}.inv-slot.empty{background:#0a0e14}.inv-slot .cd{position:absolute;inset:0;background:#0009;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border-radius:3px}.minimap{position:absolute;bottom:8px;right:200px;width:220px;height:220px;background:#060a10;border:2px solid var(--gold);border-radius:4px;box-shadow:var(--shadow);overflow:hidden}.minimap canvas{display:block;width:100%;height:100%}.shop{position:absolute;top:60px;left:8px;width:340px;max-height:78vh;overflow-y:visible;background:var(--panel);border:1px solid var(--panel-stroke);border-radius:6px;padding:12px;display:none;box-shadow:var(--shadow);z-index:250}.shop-scroll{max-height:70vh;overflow-y:auto;padding-right:4px}.shop-grid{position:relative}.shop.open{display:block}.shop h3{margin:0 0 8px;color:var(--gold);letter-spacing:2px;font-size:14px;text-transform:uppercase}.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.shop-item{width:100%;aspect-ratio:1;background:#111 center/cover no-repeat;border:1px solid #2a3645;border-radius:3px;cursor:pointer;position:relative}.shop-item:hover{border-color:var(--gold)}.shop-item:hover{z-index:30}.shop-item .price{position:absolute;bottom:0;left:0;right:0;background:#000000c7;color:var(--gold);font-size:10px;text-align:center;padding:1px 2px}.shop-tooltip{position:absolute;left:100%;top:0;margin-left:8px;width:240px;background:var(--panel);border:1px solid var(--gold);border-radius:4px;padding:10px;font-size:12px;display:none;pointer-events:none;z-index:320;box-shadow:0 6px 22px #000000b3;line-height:1.45}.shop-item:hover .shop-tooltip{display:block}.shop-tooltip b{color:var(--gold-hi);display:block;margin-bottom:4px;font-size:13px;letter-spacing:1px}.shop-tooltip .stat-row{color:#b8e2b8;font-size:11px}.shop-tooltip .active-row{color:#ffd166;font-size:11px;margin-top:4px;font-style:italic}.shop-tooltip .desc-row{color:var(--text-dim);font-size:11px;margin-top:4px}.killfeed{position:absolute;top:64px;right:8px;display:flex;flex-direction:column;gap:3px}.kill-row{background:var(--panel);border:1px solid var(--panel-stroke);border-radius:3px;padding:4px 8px;font-size:12px;color:var(--text);animation:kfadein .25s ease}@keyframes kfadein{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:none}}.kill-row .a{color:var(--radiant);font-weight:700}.kill-row.dire .a{color:var(--dire)}.kill-row .b{color:var(--text-dim)}.cursor-tip{position:fixed;padding:4px 8px;background:var(--panel);border:1px solid var(--gold);border-radius:3px;font-size:12px;pointer-events:none;z-index:300}.fct{position:fixed;pointer-events:none;font-weight:800;font-size:16px;text-shadow:0 0 4px #000,0 0 2px #000;animation:fct-rise 1s ease-out forwards;z-index:250}.fct.dmg{color:#ffe28a}.fct.crit{color:#ff8a3a;font-size:22px}.fct.heal{color:#6fd66f}.fct.gold{color:var(--gold)}.fct.mana{color:#6fbfff}@keyframes fct-rise{0%{opacity:0;transform:translate(-50%) scale(.6)}18%{opacity:1;transform:translate(-50%,-16px) scale(1.1)}to{opacity:0;transform:translate(-50%,-52px) scale(1)}}.death-banner{position:fixed;top:28%;left:50%;transform:translate(-50%);background:#780c0cd9;color:#ffe;padding:18px 36px;border:2px solid #ff5a4a;border-radius:6px;font-size:22px;letter-spacing:4px;text-align:center;box-shadow:0 6px 28px #0009;animation:kfadein .3s}.victory-banner{position:fixed;top:30%;left:50%;transform:translate(-50%);padding:22px 56px;border-radius:8px;font-size:36px;letter-spacing:8px;text-align:center;font-weight:800;box-shadow:0 8px 32px #000000b3;z-index:600}.victory-banner.radiant{background:linear-gradient(180deg,#2a6e2a,#163316);border:3px solid var(--radiant);color:#b8f8b8}.victory-banner.dire{background:linear-gradient(180deg,#6e2a2a,#331616);border:3px solid var(--dire);color:#ffbcbc}.unit-bar{position:fixed;pointer-events:none;transform:translate(-50%);z-index:90}.unit-bar .nm{font-size:10px;text-align:center;color:#fff;text-shadow:0 0 3px #000,0 1px 2px #000;letter-spacing:1px;line-height:1.05}.unit-bar .nm .pn{display:block;font-weight:800;font-size:11px;color:#fff}.unit-bar .nm .hn{display:block;font-weight:600;font-size:9px;color:#cdd6e2;opacity:.85}.unit-bar.dire .nm .pn{color:#ffd0cc}.unit-bar .hb{width:60px;height:6px;background:#0a0a0a;border:1px solid #000;border-radius:2px;overflow:hidden;position:relative;margin:2px auto 0}.unit-bar.hero .hb{width:90px;height:7px}.unit-bar .hb .fill{height:100%;background:var(--hp);transition:width .15s}.unit-bar .hb .fill.mp{background:var(--mp)}.unit-bar.dire .hb .fill{background:#d8453a}.unit-bar .mb{width:60px;height:3px;background:#0a0a0a;border:1px solid #000;border-radius:2px;overflow:hidden;margin:1px auto 0}.unit-bar.hero .mb{width:90px}.help-hint{position:absolute;top:64px;left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--panel-stroke);border-radius:4px;padding:6px 12px;font-size:11px;color:var(--text-dim);letter-spacing:1px;pointer-events:none}.topbar{max-width:96vw}.tb-center{display:flex;gap:16px;align-items:center}.tb-roster{display:flex;gap:5px;align-items:flex-start}.tb-roster.dire{flex-direction:row-reverse}.tb-hero{position:relative;width:42px;height:42px;border-radius:4px;cursor:pointer;border:2px solid var(--panel-stroke);overflow:hidden;flex:0 0 auto;transition:transform .08s ease,border-color .12s ease}.tb-roster.radiant .tb-hero{border-color:#6fd66f80}.tb-roster.dire .tb-hero{border-color:#d6565680}.tb-hero:hover{transform:translateY(2px) scale(1.06);border-color:var(--gold)}.tb-hero.dead{filter:grayscale(.85) brightness(.5)}.tb-hero .tb-pic{position:absolute;inset:0;background:#111 center/cover no-repeat}.tb-hero .tb-lvl{position:absolute;top:0;right:0;background:#000000c7;color:var(--gold);font-size:9px;font-weight:800;padding:0 3px;border-bottom-left-radius:3px;line-height:13px}.tb-hero .tb-hp{position:absolute;left:0;right:0;bottom:0;height:4px;background:#300}.tb-hero .tb-hp .fill{height:100%;background:linear-gradient(180deg,#62e07c,#2c8a3f);transition:width .18s ease}.kill-row.tip{border-color:var(--gold)}.kill-row.tip .a{color:var(--gold)}.kill-row.tip .b{color:var(--gold-hi)}.scoreboard{position:absolute;top:84px;left:50%;transform:translate(-50%);width:min(720px,92vw);background:var(--panel);border:1px solid var(--panel-stroke);border-radius:8px;box-shadow:var(--shadow);padding:14px 16px;z-index:240}.scoreboard .sb-head{display:flex;justify-content:space-between;font-size:18px;font-weight:800;letter-spacing:2px;margin-bottom:10px}.scoreboard .sb-head .radiant{color:var(--radiant)}.scoreboard .sb-head .dire{color:var(--dire)}.scoreboard .sb-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}.scoreboard .sb-col{display:flex;flex-direction:column;gap:3px}.scoreboard .sb-row{display:grid;grid-template-columns:1.4fr 1fr auto auto;gap:8px;align-items:center;padding:4px 8px;background:#141c28b3;border-radius:3px;font-size:13px}.scoreboard .sb-row.dead{opacity:.5}.scoreboard .sb-col.radiant .sb-name{color:var(--radiant);font-weight:700}.scoreboard .sb-col.dire .sb-name{color:var(--dire);font-weight:700}.scoreboard .sb-hero{color:var(--text-dim)}.scoreboard .sb-lvl{color:var(--gold);font-size:11px;letter-spacing:1px}.scoreboard .sb-kda{color:var(--text);font-variant-numeric:tabular-nums;min-width:56px;text-align:right}.pause-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#04070c8c;z-index:260;gap:8px;pointer-events:none}.pause-overlay .pause-title{font-size:56px;font-weight:900;letter-spacing:10px;color:var(--gold-hi);text-shadow:0 0 24px rgba(0,0,0,.8)}.pause-overlay .pause-sub{font-size:16px;letter-spacing:3px;color:var(--text)}