:root{color-scheme:dark;--navy:#030b24;--text:#f6fbff;--muted:#89a5ca;--green:#39ff14;--fuchsia:#ff2bd6;--cyan:#00eaff;--grid:#4e78aa24}*{box-sizing:border-box}html{background:var(--navy)}body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--text);font-family:Rajdhani,Inter,ui-sans-serif,system-ui,sans-serif;background:radial-gradient(circle at 50% -10%,#123c77 0,#061737 30%,var(--navy) 72%)}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 46%,#00eaff08 46% 47%,transparent 47%),linear-gradient(25deg,transparent 0 72%,#ff2bd608 72% 73%,transparent 73%)}.scanlines{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.13;background:repeating-linear-gradient(0deg,transparent 0 3px,#00112a 3px 4px)}main{position:relative;width:min(1120px,calc(100% - 32px));margin:0 auto;padding:42px 0 30px}.hud-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:25px}.eyebrow,.kicker{margin:0 0 7px;color:var(--cyan);font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.eyebrow span{display:inline-block;width:26px;height:2px;margin:0 8px 3px 0;background:var(--green);box-shadow:0 0 10px var(--green)}h1,h2,p{margin-top:0}h1{margin:0;font-size:clamp(2.6rem,7vw,5.7rem);font-weight:950;line-height:.82;letter-spacing:-.06em;text-shadow:0 0 28px #00eaff44}h1 i{color:transparent;font-style:normal;-webkit-text-stroke:1px var(--fuchsia);text-shadow:0 0 18px #ff2bd677}.sync{display:flex;align-items:center;gap:12px;padding:11px 15px;border:1px solid #00eaff48;background:#071632cc;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.sync b,.sync small{display:block}.sync b{color:var(--green);font-size:.72rem;letter-spacing:.14em}.sync small{margin-top:2px;color:var(--muted);font-size:.72rem}.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);animation:pulse 1.5s infinite}
.arena-card,.history-panel{position:relative;width:100%;padding:clamp(18px,3vw,32px);border:1px solid #3b6b9f70;background:linear-gradient(145deg,#091c3df5,#040d24f7);box-shadow:0 30px 90px #00081fcc,inset 0 0 40px #0b5b8d14;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}.arena-card:before,.history-panel:before{content:"";position:absolute;top:0;left:18px;width:28%;height:2px;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}.card-top,.history-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.card-top h2,.history-head h2{margin:0;font-size:clamp(1.25rem,3vw,2rem)}.hint{color:var(--muted);font-size:.76rem}.plot-area{position:relative;width:100%;height:460px;margin:0 auto;padding-left:58px}.plot-area:after{content:"";position:absolute;inset:0 0 0 58px;border-bottom:1px solid #6593bd50;background:repeating-linear-gradient(to top,var(--grid) 0 1px,transparent 1px 25%),repeating-linear-gradient(to right,#4e78aa14 0 1px,transparent 1px 12.5%);pointer-events:none}.axis-label{position:absolute;z-index:3;left:0;width:46px;color:#7692b8;font:700 .65rem ui-monospace,monospace;text-align:right;transform:translateY(50%)}.bars{position:absolute;z-index:2;inset:0 0 0 58px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;gap:clamp(18px,7vw,88px)}.bar-button{position:relative;width:min(100%,176px);height:100%;padding:0;border:0;color:inherit;background:transparent;cursor:pointer}.bar{position:absolute;z-index:2;bottom:0;left:50%;display:block;width:100%;height:var(--height);max-width:176px;transform:translateX(-50%);border:1px solid var(--neon);border-radius:12px 12px 2px 2px;background:linear-gradient(180deg,var(--neon),color-mix(in srgb,var(--neon) 20%,#07152f) 62%,#07152f);box-shadow:0 0 22px color-mix(in srgb,var(--neon) 48%,transparent),inset 0 0 22px #ffffff22;transition:filter .2s,transform .2s;animation:rise .8s cubic-bezier(.2,.8,.2,1) both}.bar:after{content:"";position:absolute;inset:6px;border-top:2px solid #ffffff88;border-radius:8px}.bar-button:hover .bar,.bar-button:focus-visible .bar{filter:brightness(1.25);transform:translateX(-50%) scaleX(1.04)}.bar-button:focus-visible{outline:2px solid white;outline-offset:5px}.bar-value{position:absolute;z-index:4;left:50%;bottom:calc(var(--height) + 13px);transform:translateX(-50%);font-size:clamp(1.15rem,3vw,1.65rem);font-weight:950;text-shadow:0 2px 0 #030818,0 0 14px var(--neon);white-space:nowrap}.threshold-line{position:absolute;z-index:1;right:0;bottom:var(--threshold);left:58px;border-top:2px dashed #ffd52a;filter:drop-shadow(0 0 4px #ffd52a)}.threshold-line span{position:absolute;right:100%;bottom:5px;width:54px;color:#ffd52a;font:800 .58rem/1.15 ui-monospace,monospace;text-align:right;filter:none}
.player-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,7vw,88px);margin:18px 0 0 58px}.player-card{position:relative;min-width:0;padding:13px 8px 10px;border:1px solid #385b8955;color:var(--text);background:#07152dcc;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:border-color .2s,background .2s}.player-card:hover,.player-card:focus-visible{border-color:var(--neon);background:#0b2144;outline:none;box-shadow:inset 0 0 20px color-mix(in srgb,var(--neon) 12%,transparent)}.player-card strong,.player-card span{display:block;overflow:hidden;text-overflow:ellipsis}.player-card strong{font-size:clamp(.85rem,2vw,1.05rem);white-space:nowrap}.player-index{position:absolute;top:5px;left:7px;color:var(--neon);font:.58rem ui-monospace,monospace}.login{margin-top:7px;color:#b6c9e3;font-size:.68rem;white-space:nowrap}.login i{display:inline-block;width:5px;height:5px;margin:0 4px 1px 0;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green)}.queue{margin-top:5px;color:var(--muted);font-size:.61rem;letter-spacing:.03em}.legend{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:24px;color:var(--muted);font-size:.7rem}.legend span{display:flex;align-items:center;gap:6px}.legend b{color:var(--text)}.legend i{display:inline-block;width:18px}.legend-mmr{height:5px;background:var(--fuchsia);box-shadow:0 0 7px var(--fuchsia)}.legend-limit{height:0;border-top:2px dashed #ffd52a}.history-panel{margin-top:18px}.history-head{margin-bottom:12px}.history-head button{width:38px;height:38px;border:1px solid #ff2bd688;color:var(--fuchsia);background:#210b2e;font-size:1.7rem;cursor:pointer}.history-chart{min-height:310px}.history-chart svg{display:block;width:100%;height:auto;overflow:visible}.history-chart text{fill:#89a5ca;font:11px ui-monospace,monospace}.history-summary{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:.72rem}.history-summary b{color:var(--cyan)}.error{padding:24px;border:1px solid #ff2bd6;background:#2b0b35}footer{display:flex;justify-content:space-between;gap:20px;margin-top:16px;color:#52749f;font:.62rem ui-monospace,monospace;letter-spacing:.08em}@keyframes rise{from{height:0;opacity:.3}}@keyframes pulse{50%{opacity:.35;box-shadow:0 0 4px var(--green)}}
.bar,.bar-value{transition:height .8s cubic-bezier(.2,.8,.2,1),bottom .8s cubic-bezier(.2,.8,.2,1)}.range-switch{display:flex;gap:4px;padding:3px;border:1px solid #315b86;background:#04102a}.range-switch button{width:auto;height:auto;padding:8px 12px;border:0;color:var(--muted);background:transparent;font:800 .65rem ui-monospace,monospace;cursor:pointer}.range-switch button.active{color:#021124;background:var(--cyan);box-shadow:0 0 14px #00eaff88}.series-legend{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:.72rem}.series-legend span{display:flex;align-items:center;gap:7px}.series-legend i{display:block;width:22px;height:3px;background:var(--series);box-shadow:0 0 8px var(--series)}
@media(max-width:620px){main{width:min(100% - 16px,480px);padding-top:22px}.hud-header{align-items:flex-start;flex-direction:column;gap:16px}.sync{align-self:stretch}.arena-card,.history-panel{padding:17px 10px 20px}.card-top,.history-head{align-items:flex-start;flex-direction:column;gap:8px}.hint{font-size:.65rem}.plot-area{height:370px;padding-left:38px}.plot-area:after,.bars{left:38px}.bars{gap:9px}.axis-label{width:31px;font-size:.56rem}.threshold-line{left:38px}.threshold-line span{right:auto;bottom:5px;left:4px;width:auto;padding:2px 5px;color:#06122d;background:#ffd52a;font-size:.54rem}.bar-button{width:min(100%,92px)}.bar{width:84%;border-radius:9px 9px 2px 2px}.bar-value{font-size:1rem}.player-grid{gap:5px;margin-left:38px}.player-card{padding:14px 3px 9px}.player-card strong{font-size:.68rem}.login{font-size:.54rem;white-space:normal;line-height:1.2}.queue{font-size:.51rem}.legend{justify-content:flex-start;margin-left:38px;gap:11px}.history-chart{min-height:220px}.range-switch{align-self:stretch}.range-switch button{flex:1}footer{align-items:flex-start;flex-direction:column;gap:5px}}@media(prefers-reduced-motion:reduce){.bar,.pulse{animation:none}}
.threshold-line{border-color:var(--fuchsia);filter:drop-shadow(0 0 5px var(--fuchsia))}.threshold-line span{color:var(--fuchsia);background:transparent}.legend-limit{border-color:var(--fuchsia)}.history-chart{position:relative}.hover-zone{fill:transparent;pointer-events:all}.hover-line{stroke:#ffffff66;stroke-width:1;stroke-dasharray:4 4}.hover-line,.hover-dots{opacity:0;transition:opacity .15s}.is-hovering .hover-line,.is-hovering .hover-dots{opacity:1}.chart-tooltip{position:absolute;z-index:5;top:24px;display:none;min-width:190px;padding:10px 12px;transform:translateX(-50%);border:1px solid #00eaff66;color:var(--muted);background:#020a20ed;box-shadow:0 10px 30px #000a,0 0 20px #00eaff22;font:.68rem ui-monospace,monospace;pointer-events:none}.is-hovering .chart-tooltip{display:block}.chart-tooltip time{display:block;margin-bottom:7px;color:var(--text)}.chart-tooltip span{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:7px;margin-top:4px}.chart-tooltip i{width:6px;height:6px;border-radius:50%;box-shadow:0 0 7px currentColor}.chart-tooltip b{color:var(--text)}
footer a{color:inherit;text-decoration:none}footer a:hover{color:var(--cyan)}
.history-chart.has-chart{min-height:0}
.history-chart svg{touch-action:pan-y}
.sync.problem{border-color:#ff3158;background:#2a0918cc;box-shadow:0 0 22px #ff315844}.sync.problem .pulse{background:#ff3158;box-shadow:0 0 14px #ff3158}.sync.problem b{color:#ff5a78}
@media(max-width:620px){.chart-tooltip{top:6px;left:8px!important;min-width:176px;transform:none}.chart-tooltip.tip-right{right:8px;left:auto!important}}