@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:Inter,"Segoe UI",sans-serif;color:#d7e1e7;background:#0b121c;font-synthesis:none;--gold:#d7b581;--line:#26313e;--muted:#8293a4;--blue:#83caff}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #bce6ff;outline-offset:4px}button{transition:background .16s,border-color .16s,transform .16s}button:not(:disabled):hover{filter:brightness(1.15)}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.topbar{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:20px;background:#101722;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#e5e8e7;font:600 21px/1.05 'Barlow Condensed',sans-serif;letter-spacing:2.4px}.brand-mark{font:48px/1 sans-serif;color:var(--gold)}.brand small{display:block;color:var(--gold);font:500 12px Inter,sans-serif;letter-spacing:6px;margin-top:7px}.mode-switch{display:flex;gap:6px;height:100%;align-items:center}.mode-switch button{font-size:14px;color:#91a1b0;border:0;background:transparent;padding:29px 18px;position:relative}.mode-switch button.active{color:#e7cdab}.mode-switch button.active:after{content:"";position:absolute;bottom:0;left:18px;right:18px;height:2px;background:var(--gold)}.top-actions{display:flex;align-items:center;gap:17px}.build-tag{font-size:12px;letter-spacing:1.5px;color:#6f8496}.icon-button{width:31px;height:31px;border:1px solid #42505d;border-radius:50%;background:none;color:#a6b6c3}.text-button{background:none;border:0;color:#acbac7;padding:8px 4px;font-size:14px}.workspace{display:grid;grid-template-columns:260px 1fr;height:calc(100dvh - 80px);min-height:660px}.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--line);background:linear-gradient(160deg,#131d29,#0e1620);padding:25px 20px 12px;overflow:auto;z-index:3}.section-label{font-size:12px;letter-spacing:1.8px;font-weight:500;color:#8493a3;display:flex;justify-content:space-between;gap:8px}.section-label span{color:#4e6677;letter-spacing:0}.sidebar h1{font:500 30px/1.08 'Barlow Condensed',sans-serif;letter-spacing:.2px;margin:17px 0 8px}.muted{color:var(--muted);font-size:14px;line-height:1.6;margin:0}.roster{display:grid;gap:9px;margin:22px 0 15px}.hero-card{display:flex;align-items:center;gap:14px;text-align:left;border:1px solid #2a3543;background:#17212d;padding:12px 14px;min-height:72px;border-radius:3px;position:relative}.hero-card.selected{border-color:#a98d60;background:linear-gradient(110deg,#293036,#1d2630)}.hero-card.selected:before{content:"";position:absolute;inset:12px auto 12px -1px;width:3px;background:var(--gold)}.hero-symbol{font-size:31px;width:34px;text-align:center;color:var(--hero-color)}.hero-card b{font-size:16px;font-weight:600;display:block}.hero-card small{display:block;font-size:12px;margin-top:5px;color:#a3adba}.hero-check{margin-left:auto;color:var(--gold);font-size:14px}.hero-detail{min-height:57px;color:#a5b4c0;font-size:13px;line-height:1.55;margin-bottom:16px}.hero-detail p{margin:0 0 4px;color:#c6d0d9;font-size:14px}.primary-button{display:flex;justify-content:center;align-items:center;gap:16px;background:linear-gradient(100deg,#cfad77,#e5c89b);border:1px solid #e7cba3;border-radius:3px;color:#17202a;font-weight:600;font-size:15px;padding:14px 16px;min-height:48px}.primary-button span{margin-left:auto;font-size:22px}.session-note{font-size:10px;letter-spacing:1.1px;text-align:center;color:#63788b;margin:11px 0 25px}.match-brief{border-top:1px solid var(--line);padding-top:20px}.match-brief p{font-size:14px;line-height:1.7;color:#a4b3c0;margin:14px 0}.brief-stat{display:flex;justify-content:space-between;font-size:12px;color:#70869a;gap:6px}.brief-stat b{font-weight:500;color:#b5c2cc;font-size:12px}.battle-log{margin-top:24px;border-top:1px solid var(--line);padding-top:18px;flex:1;min-height:95px}.battle-log ol{list-style:none;padding:0;margin:12px 0;color:#8ea2b5;font-size:12px;line-height:1.5}.battle-log li{margin-bottom:8px;border-left:1px solid #455467;padding-left:9px}.battle-log li:first-child{color:#c9d3dc}.sidebar-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:9px}.sidebar-bottom button{font-size:12px}.battlefield{position:relative;overflow:hidden;min-width:0;background:#0a121b}canvas{display:block;width:100%;height:calc(100% - 124px);position:absolute;top:38px;left:0;touch-action:none;outline:none}.scoreboard{position:absolute;z-index:2;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;background:#0e1723ed;border:1px solid #2c3d4b;padding:12px 25px 13px;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}.team{display:flex;align-items:center;gap:17px;position:relative;padding-bottom:7px}.team>span{font-size:11px;letter-spacing:1.4px;font-weight:600}.team b{font:600 29px 'Barlow Condensed',sans-serif}.friendly{color:#8ad2ff}.hostile{color:#f197a4}.xp{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff10}.xp i{display:block;width:0;height:100%;background:currentColor}.match-clock{text-align:center;min-width:53px}.match-clock>span{display:block;font-size:18px;letter-spacing:1px;font-variant-numeric:tabular-nums}.match-clock small{font-size:12px;color:#8b9bad;display:block;margin-top:5px}.map-meta{position:absolute;left:25px;top:25px;color:#b1bcc3;pointer-events:none}.map-meta>span{font-size:12px;letter-spacing:1.3px}.map-meta small{font-size:10px;letter-spacing:1px;display:block;margin-top:6px;color:#637b8d}.objective{position:absolute;right:22px;top:111px;display:flex;gap:12px;background:#131e27d9;border:1px solid #3f4444;border-radius:3px;padding:13px 15px;pointer-events:none;max-width:247px}.objective-glyph{font-size:34px;color:var(--gold);line-height:1.3}.objective small{display:block;color:#a4947c;font-size:10px;letter-spacing:1.7px}.objective strong{display:block;color:#dbcaad;font-size:14px;font-weight:500;margin:5px 0}.objective div>span{display:block;font-size:11px;color:#7e919e;max-width:176px;line-height:1.4}.preplay{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;width:390px;padding:29px 24px;background:linear-gradient(90deg,#09131bec,#101d28ef,#09131bec);border-top:1px solid #8e816244;border-bottom:1px solid #8e816244;backdrop-filter:blur(4px)}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:2.2px}.preplay .primary-button{pointer-events:auto;margin:18px auto 0;min-width:180px}.preplay h2{font:500 47px/1.1 'Barlow Condensed',sans-serif;margin:11px 0;color:#f0e8dd}.preplay p{color:#9aaab6;font-size:14px;margin:0}.arena-notice{position:absolute;top:114px;left:50%;transform:translateX(-50%);max-width:55%;z-index:4;text-align:center;color:#f0d8ae;font-size:14px;line-height:1.5;background:#101b28ec;border:1px solid #665c44;padding:9px 18px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s}.arena-notice.visible{opacity:1}.hud{position:absolute;left:20px;right:20px;bottom:35px;display:flex;align-items:center;justify-content:center;gap:22px;border:1px solid #39444e;border-top-color:#776c57;background:linear-gradient(#1a2430f5,#121a25fc);padding:14px 18px;border-radius:5px;box-shadow:0 15px 40px #0006;min-height:100px}.hero-vitals{display:flex;align-items:center;gap:14px;min-width:190px;flex:1;max-width:285px}.hud-mark{font-size:38px;color:#b1d7f1;display:block;border:1px solid #546273;background:#202d3e;text-align:center;width:58px;line-height:58px;border-radius:4px}.vitals{flex:1}.vitals-label{display:flex;justify-content:space-between;gap:8px;margin-bottom:9px;font-size:14px}.vitals-label b{font-weight:500}.vitals-label small{font-size:10px;color:#95a4b2}.health-track,.energy-track{height:15px;background:#07121c;margin-top:5px;position:relative;overflow:hidden;border-radius:2px}.energy-track{height:10px}.health-track i,.energy-track i{position:absolute;inset:0 auto 0 0;width:100%;background:#608e75;transition:width .1s}.energy-track i{background:#4879a3}.health-track span,.energy-track span{position:absolute;inset:0;text-align:center;font-size:10px;line-height:15px;text-shadow:0 1px 3px #000}.energy-track span{font-size:9px;line-height:10px}.abilities{display:flex;gap:9px}.ability{position:relative;width:62px;height:63px;border:1px solid #627284;background:linear-gradient(135deg,#2a3a4f,#18283d);border-radius:3px;display:flex;align-items:center;justify-content:center;padding:0;color:#bcdfff}.ability .glyph{font-size:34px}.ability:nth-child(2){background:linear-gradient(135deg,#25463f,#1c2d37);color:#b4e2cf}.ability:nth-child(3){background:linear-gradient(135deg,#34475c,#1c2c3e);color:#c1e3ff}.ability:nth-child(4){background:linear-gradient(135deg,#574834,#292635);color:#ecd29b;border-color:#9a825e}.ability kbd{position:absolute;bottom:-6px;left:5px;background:#111b29;border:1px solid #607083;border-radius:2px;color:#eef5fa;line-height:18px;min-width:19px;font:11px/18px Inter,sans-serif}.ability .cooldown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-variant-numeric:tabular-nums;background:#0a111dd6}.ability .cooldown:empty{display:none}.ability.aiming{border-color:#fff0b9;box-shadow:0 0 0 2px #e5c68e5c}.utility-actions{border-left:1px solid #36404d;display:flex;gap:9px;padding-left:17px}.utility-actions button{position:relative;width:43px;height:47px;border:1px solid #495463;background:#1b2837;border-radius:3px}.utility-actions span{font-size:25px;color:#adbac9}.utility-actions kbd{font:10px Inter,sans-serif;position:absolute;bottom:-5px;left:4px;padding:2px 4px;background:#101723;color:#aebed0}.battlefield-footer{display:flex;justify-content:space-between;gap:12px;position:absolute;bottom:12px;left:25px;right:25px;font-size:10px;letter-spacing:1px;color:#728697}.battlefield-footer i{font-style:normal;margin:0 8px;color:#4d6878}.talent-nudge{position:absolute;bottom:150px;left:50%;transform:translateX(-50%)}.talent-nudge button{background:#2f2b27;color:#e7cba2;border:1px solid #aa8c5d;border-radius:3px;padding:10px 18px;font-size:14px}.talent-nudge kbd{margin-left:14px}.end-state{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#09131bdf;backdrop-filter:blur(5px);padding:30px;text-align:center}.end-state h2{font:500 76px 'Barlow Condensed',sans-serif;color:#e7ca9d;margin:12px 0}.end-state p{font-size:16px;color:#b8c7d5;max-width:460px;line-height:1.6;margin:0 0 25px}dialog{background:#14212f;color:#d6e2e9;border:1px solid #586270;border-radius:6px;padding:35px;width:min(590px,calc(100vw - 32px));max-height:85dvh;overflow:auto;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#040b14bd;backdrop-filter:blur(3px)}dialog h2{font:500 37px 'Barlow Condensed',sans-serif;margin:10px 0 20px}dialog p{font-size:14px;line-height:1.75;color:#b5c3ce}dialog dl{display:grid;grid-template-columns:100px 1fr;gap:15px;font-size:14px;line-height:1.6;margin:25px 0}dialog dt{color:#e7c898}dialog dd{margin:0;color:#a8b9c9}.close-dialog{position:absolute;right:14px;top:11px;font-size:25px;background:none;border:0;color:#a2b6c9}.talent-card{display:flex;width:100%;gap:17px;align-items:center;text-align:left;margin-top:13px;padding:19px;border:1px solid #4b5c6f;background:#1c2c3d;border-radius:3px}.talent-card>span{font-size:27px;color:var(--gold)}.talent-card b{display:block;font-size:15px}.talent-card small{display:block;font-size:13px;color:#a6b9ca;margin-top:6px}
@media(min-width:1600px){.workspace{grid-template-columns:290px 1fr}.sidebar{padding:30px 25px 15px}.hero-card{min-height:85px}.sidebar h1{font-size:34px}.roster{margin-top:26px}.hero-detail{margin-bottom:24px}.hud{left:6%;right:6%;gap:35px}.ability{width:74px;height:68px}.map-meta{left:35px;top:33px}}
@media(max-width:1200px){.map-meta{top:104px;left:20px}.objective{top:103px;right:17px;max-width:216px}.objective div>span{display:none}.workspace{grid-template-columns:225px 1fr}.sidebar{padding:24px 15px 10px}.hud{gap:13px;padding:13px 12px;left:12px;right:12px}.hero-vitals{min-width:144px;gap:8px}.hud-mark{display:none}.ability{width:53px;height:58px}.abilities{gap:6px}.utility-actions{gap:6px;padding-left:10px}.utility-actions button{width:34px}.build-tag{display:none}.battlefield-footer{font-size:9px}.battlefield-footer #runtime-state{display:none}}
@media(max-width:850px){.topbar{padding:0 15px;height:68px;gap:10px}.brand{font-size:17px;letter-spacing:1px;gap:6px}.brand-mark{font-size:34px}.brand small{font-size:9px;letter-spacing:4px}.mode-switch{gap:0}.mode-switch button{font-size:12px;padding:25px 9px}.top-actions{gap:10px}.workspace{height:auto;min-height:calc(100dvh - 68px);display:flex;flex-direction:column-reverse}.battlefield{height:calc(100dvh - 68px);min-height:520px}.sidebar{border-right:none;border-top:1px solid var(--line);overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;padding:23px}.sidebar>.section-label,.sidebar h1,.sidebar>.muted,.roster{grid-column:1/-1}.sidebar h1{margin:2px 0}.roster{display:flex;margin:10px 0}.hero-card{flex:1;min-width:0;padding:10px;gap:9px}.hero-card b{font-size:14px}.hero-symbol{font-size:25px;width:25px}.hero-check{display:none}.hero-detail{margin:0}.primary-button{align-self:start}.session-note{display:none}.match-brief{grid-column:1/-1}.battle-log{margin:5px 0;min-height:90px;grid-column:1/-1}.sidebar-bottom{grid-column:1/-1}.preplay{width:min(370px,80%)}.hud{justify-content:space-between}.hero-vitals{min-width:120px;max-width:190px}.scoreboard{top:15px;gap:16px;padding:10px 20px}.map-meta{top:100px}.objective{top:94px}.top-actions .text-button{font-size:12px}canvas{height:calc(100% - 103px)}.preplay p{max-width:270px;margin:auto}.arena-notice{top:165px;max-width:90%;width:max-content}.sidebar .section-label span{display:none}}
@media(max-width:520px){.brand>span:last-child{font-size:15px}.brand small{font-size:8px}.topbar{gap:7px;padding:0 10px}.top-actions{gap:7px}.top-actions .icon-button{width:25px;height:25px}.mode-switch button{font-size:11px;padding:26px 7px}.top-actions #pause{font-size:11px}.battlefield{min-height:540px}.hero-vitals{position:absolute;left:12px;right:12px;top:-43px;max-width:none;background:#13202ce8;padding:7px 9px;border:1px solid #37495a;border-radius:3px}.vitals{display:grid;grid-template-columns:70px 1fr 70px;align-items:center;gap:8px}.vitals-label{margin:0;font-size:11px}.vitals-label small{display:none}.energy-track,.health-track{margin:0;height:12px}.health-track span{line-height:12px}.hud{padding:11px 12px;bottom:30px;min-height:84px}.ability{width:49px;height:51px}.ability .glyph{font-size:27px}.abilities{gap:8px}.utility-actions{gap:7px}.utility-actions button{width:36px;height:41px}.scoreboard{gap:12px;padding:10px 18px}.team{gap:11px}.team>span{font-size:9px;letter-spacing:.8px}.team b{font-size:26px}.match-clock>span{font-size:16px}.objective{right:12px;top:103px;padding:9px 10px;gap:8px;max-width:200px}.objective-glyph{font-size:24px}.objective small{font-size:8px}.objective strong{font-size:11px}.map-meta{left:15px;top:103px}.map-meta>span{font-size:10px}.map-meta small{font-size:8px}.preplay{top:42%;padding:20px 14px}.preplay h2{font-size:36px}.preplay .eyebrow{font-size:9px}.preplay p{font-size:12px}.battlefield-footer{left:18px;bottom:10px;font-size:8px;letter-spacing:.7px}.roster{gap:6px}.hero-card{flex-direction:column;text-align:center;gap:5px}.hero-card b{font-size:13px}.hero-card small{font-size:10px}.sidebar{padding:20px 16px}.talent-nudge{bottom:170px}dialog{padding:30px 23px}dialog dl{grid-template-columns:80px 1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Keep every combat control inside the narrow-screen HUD. */
@media(max-width:520px){
  .hud{left:8px;right:8px;padding:11px 8px;gap:10px}
  .abilities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-width:0;flex:1;gap:5px}
  .ability{width:100%;min-width:0}
  .utility-actions{flex:none;padding-left:7px;gap:5px}
  .utility-actions button{width:30px;padding:0}
}