.stats-dashboard{white-space:normal;font-size:16px}
.stats-toolbar,.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.stats-toolbar{margin:24px 0}.stats-toolbar h2{font-size:22px;margin:0 0 4px}.stats-toolbar p{margin:0;font-size:13px}
.stats-period-label{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.stats-period-label select{font:inherit;color:var(--text);background:var(--surface);border:1px solid #614b3d;border-radius:8px;min-height:44px;padding:8px 30px 8px 12px}
.stats-kpis{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;border-block:1px solid var(--line2);padding:20px 0;margin-bottom:28px;gap:22px}
.stats-kpi{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0}.stats-kpi>strong{font-size:28px;line-height:1.2;font-weight:650;letter-spacing:-.025em}.stats-kpi:first-child>strong{font-size:22px}.stats-kpi>span{font-size:13px}.stats-kpi>small{font-size:12px}
.stats-kpi:has(.stats-rank-icon){padding-left:82px}.stats-rank-icon{position:absolute;left:0;top:0;width:70px;height:76px;object-fit:contain}.gain{color:var(--win)}.loss{color:var(--loss)}
.stats-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:32px}.rank-chart{min-width:0}.chart-heading h3,.stats-performance h3{font-size:17px;margin:0;font-weight:600}.chart-tabs{display:flex;gap:4px}
.chart-tabs button{min-height:40px;background:transparent;border:1px solid transparent;font-size:13px;padding:7px 12px;color:var(--muted);border-radius:7px}.chart-tabs button[aria-pressed=true]{border-color:#614b3d;color:var(--text);background:var(--surface2)}
.chart-readout{display:flex;align-items:baseline;gap:12px;min-height:36px;margin-top:14px;flex-wrap:wrap;font-size:12px}.chart-readout>strong{font-size:20px;letter-spacing:-.02em}
.chart-plot{width:100%;min-height:230px}.chart-plot svg{display:block;max-width:100%;overflow:visible;touch-action:pan-y}.chart-plot svg:focus{outline:none}.chart-plot svg:focus-visible .chart-focus{stroke:#fff;stroke-width:3}.chart-axis{fill:var(--muted);font:12px Onest,system-ui,sans-serif}.chart-grid{stroke:var(--line2);stroke-width:1}.chart-zero{stroke:#69564a;stroke-width:1;stroke-dasharray:4 5}.chart-line{fill:none;stroke:#dfbe90;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.chart-point{fill:#f3d3a1;stroke:var(--bg);stroke-width:1.5}.chart-point.win{fill:#61f2aa}.chart-point.loss{fill:#ff766f}.chart-focus{fill:none;stroke:#fff5de;stroke-width:2}.chart-note{font-size:12px;margin:22px 0 0;line-height:1.5}.chart-empty{padding:20px 0;margin:0}.chart-plot.empty{min-height:0}.chart-readout:empty,.chart-note:empty{display:none}.stats-layout:has(.stats-performance[hidden]){grid-template-columns:1fr}
.stats-performance{border-left:1px solid var(--line2);padding-left:28px;align-self:start}.stats-performance dl{margin:20px 0 12px;display:grid;gap:13px}.stats-performance dl>div{display:grid;grid-template-columns:1fr 90px;gap:14px}.stats-performance dt{font-size:14px}.stats-performance dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}.stats-time{display:grid;grid-template-columns:1fr 90px;gap:14px;border-top:1px solid var(--line2);margin-top:18px;padding-top:16px;font-size:14px}.stats-time strong{font-size:16px;font-weight:600}.stats-time:empty,.stats-coverage:empty{display:none}.stats-coverage{font-size:12px;line-height:1.6;margin:12px 0 0}
.stats-heroes{margin-top:24px;border-top:1px solid var(--line2);padding-top:20px}.stats-heroes .chart-heading>span{font-size:12px}.stats-hero-list{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;margin-top:14px}.stats-hero-row{display:grid;grid-template-columns:minmax(120px,1.4fr) 60px minmax(90px,1fr);gap:20px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.stats-hero-identity{display:flex;gap:10px;align-items:center;min-width:0}.stats-hero-identity img{width:38px;height:38px;object-fit:contain}.stats-hero-identity strong{font-size:14px;font-weight:500}.hero-games,.hero-winrate{display:flex;flex-direction:column;gap:6px}.hero-games{gap:2px}.hero-games strong,.hero-winrate strong{font-size:16px;font-weight:600}.hero-games span,.hero-winrate span{font-size:11px}.hero-winrate-label{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.hero-winrate-bar{height:5px;background:#302b28;border-radius:3px}.hero-winrate-bar>span{height:100%;display:block;border-radius:inherit;background:#e2be83}.hero-winrate-bar>.winning{background:#61dca0}.hero-winrate-bar>.losing{background:#f17f77}.stats-error{color:var(--loss);font-size:14px}
@media(max-width:1000px){.stats-layout{grid-template-columns:minmax(0,1fr) 190px;gap:20px}.stats-performance{padding-left:20px}.stats-hero-list{grid-template-columns:1fr}.stats-kpis{gap:16px}.stats-kpi>strong{font-size:25px}.stats-kpi:first-child>strong{font-size:19px}}
@media(max-width:680px){.stats-toolbar{align-items:flex-start;gap:12px}.stats-toolbar h2{font-size:20px}.stats-period-label{font-size:0;gap:0}.stats-period-label select{font-size:13px;max-width:145px}.stats-kpis{grid-template-columns:1fr 1fr;gap:22px 18px;padding:18px 0}.stats-kpi:first-child{grid-column:1/-1;min-height:72px;justify-content:center}.stats-kpi:first-child>strong{font-size:24px}.stats-kpi:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:baseline}.stats-kpi:last-child small{grid-column:1/-1}.stats-layout{grid-template-columns:1fr;gap:24px}.stats-performance{border-left:0;border-top:1px solid var(--line2);padding:20px 0 0}.stats-performance dl{grid-template-columns:1fr 1fr;gap:14px 24px}.stats-performance dl>div{grid-template-columns:1fr auto;gap:10px}.stats-time{display:flex;justify-content:space-between}.stats-coverage{margin:12px 0 0}.chart-plot{min-height:220px}.chart-plot.empty{min-height:0}.chart-readout{gap:5px 12px;min-height:60px}.chart-readout>span:last-child{flex-basis:100%}.stats-heroes{margin-top:24px}.stats-hero-row{gap:14px;grid-template-columns:minmax(100px,1fr) 42px 90px}.stats-kpi>strong{font-size:25px}}
@media(max-width:360px){.stats-hero-row{grid-template-columns:minmax(95px,1fr) 38px 78px;gap:10px}.stats-hero-identity{gap:7px}.stats-hero-identity img{width:32px;height:32px}.chart-heading{gap:8px}.chart-tabs button{padding:6px 8px}}

/* Long seasons scroll sideways; the rank scale stays put. */
.chart-plot{position:relative}
.chart-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.chart-scroll::-webkit-scrollbar{display:none}
.chart-scroll.draggable{cursor:grab}
.chart-scroll.dragging{cursor:grabbing;user-select:none}
.chart-plot .chart-scroll svg{max-width:none;touch-action:pan-x pan-y}
.chart-plot .chart-y-axis{position:absolute;left:0;top:0;pointer-events:none}

.chart-day{stroke:var(--line2);stroke-width:1;opacity:.55}
.chart-date{font-size:12px}
.chart-line-missing{stroke-dasharray:3 6;opacity:.55}
.chart-enter .chart-line:not(.chart-line-missing){stroke-dasharray:1;stroke-dashoffset:1;animation:chart-draw 1.1s cubic-bezier(.3,.7,.2,1) forwards}
.chart-enter .chart-point{opacity:0;animation:chart-pop .45s ease-out var(--d,0s) forwards}
.chart-enter .chart-line-missing{opacity:0;animation:chart-fade .6s ease-out .6s forwards}
@keyframes chart-draw{to{stroke-dashoffset:0}}
@keyframes chart-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes chart-fade{to{opacity:.55}}
.chart-point{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.chart-enter .chart-line,.chart-enter .chart-point,.chart-enter .chart-line-missing{animation:none;opacity:1;stroke-dashoffset:0}}
.chart-readout .chart-progress{margin-left:10px}
.chart-date{transition:opacity .18s ease}.chart-date.pushed{opacity:0}