@font-face { font-family: 'Anton'; src: url(fonts/Anton.ttf); font-display: swap; }
:root { --bg:#0B0F17; --surface:#0E131C; --line:#1E2633; --ink:#F2F4F7; --ink2:#A9B3C2; --ink3:#748094; --orange:#F58426; --blue:#2F80D6; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
a { color: var(--orange); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.top { position: sticky; top:0; z-index:5; background: rgba(11,15,23,.92); backdrop-filter: blur(8px); border-bottom:1px solid var(--line); }
.top-row { display:flex; align-items:center; justify-content:space-between; height:56px; }
.brand { font-family: Anton, Impact, sans-serif; font-size: 22px; letter-spacing:.5px; color: var(--ink); text-decoration:none; }
.brand span { color: var(--orange); }
nav a { color: var(--ink2); text-decoration:none; font-size:14px; margin-left:24px; }
nav a:hover { color: var(--ink); }
.hero { padding-top: 48px; }
.hero-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.kicker { margin:0 0 8px; color: var(--orange); font-weight:600; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; }
h1 { font-family: Anton, Impact, sans-serif; font-weight:400; font-size: clamp(44px, 7vw, 88px); line-height:.95; margin:0; letter-spacing:.5px; }
h2 { font-family: Anton, Impact, sans-serif; font-weight:400; font-size: clamp(32px, 4.5vw, 48px); line-height:1; margin:0 0 12px; letter-spacing:.3px; }
.sub { color: var(--ink2); max-width: 66ch; margin: 12px 0 0; }
.record { text-align:right; }
.record-num { display:block; font-size: 64px; font-weight:700; line-height:1; }
.record-lab { color: var(--ink3); font-size: 13px; text-transform: uppercase; letter-spacing:1.5px; }
.controls { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:32px 0 16px; flex-wrap:wrap; }
.chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.chips button { flex:0 0 auto; background:transparent; color:var(--ink2); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font:500 13px Inter, sans-serif; cursor:pointer; text-align:left; }
.chips button b { display:block; color:var(--ink); font-weight:600; }
.chips button .w { color: var(--orange); } .chips button .l { color: var(--ink3); }
.chips button.on { border-color: var(--orange); background: rgba(245,132,38,.08); }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; padding:2px; }
.seg button { background:transparent; border:0; color:var(--ink2); padding:8px 14px; border-radius:6px; font:500 13px Inter, sans-serif; cursor:pointer; }
.seg button.on { background: var(--line); color: var(--ink); }
.seg.small { margin: 8px 0 16px; }
.chart { background: var(--surface); border:1px solid var(--line); border-radius: 12px; padding: 16px; }
.chart svg { display:block; overflow: visible; }
.tick { fill: var(--ink3); font: 12px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.anno { fill: var(--ink); font: 600 13px Inter, sans-serif; }
.anno.big { font-size: 17px; }
.anno-s { fill: var(--ink2); font-weight: 400; font-size: 12px; }
.anno.big .anno-s { font-size: 15px; }
.lu-name { fill: var(--ink); font: 500 14px Inter, sans-serif; }
.lu-name.big { font-size: 20px; }
.lu-val { fill: var(--ink); font: 700 14px Inter, sans-serif; }
.lu-val.big { font-size: 20px; }
.game-foot { display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; margin-top:16px; }
.lines { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size:14px; }
.lines th, .lines td { padding: 4px 10px; text-align:right; border-bottom:1px solid var(--line); }
.lines th { color: var(--ink3); font-weight:500; }
.lines td:first-child, .lines th:first-child { text-align:left; padding-left:0; }
.lines tr.nyk td { color: var(--ink); font-weight:600; }
.lines tr.opp td { color: var(--ink2); }
.lines td.t { font-weight:700; }
.tops { display:flex; gap:24px; flex-wrap:wrap; }
.top-p b { display:block; font-size:28px; line-height:1.1; }
.top-p span { color: var(--ink2); font-size:13px; }
.src { color: var(--ink3); font-size: 13px; margin: 12px 0 0; max-width: 80ch; }
.block { padding-top: 96px; }
.split { display:grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items:start; }
.stats { display:flex; gap:32px; margin: 8px 0 8px; }
.stats div b { display:block; font-size: 40px; line-height:1.1; font-weight:700; }
.stats div span { color: var(--ink3); font-size:13px; }
.legend { color: var(--ink2); font-size: 14px; display:flex; align-items:center; gap:8px; }
.dot { display:inline-block; width:12px; height:12px; border-radius:50%; }
.dot.made { background: var(--orange); } .dot.miss { border:2px solid var(--ink3); margin-left:12px; }
.soon { padding-bottom: 32px; }
.foot { border-top:1px solid var(--line); margin-top: 64px; padding: 24px; color: var(--ink3); font-size: 13px; }
.tt { position: fixed; pointer-events:none; opacity:0; z-index:10; background:#171E2A; border:1px solid #2A3444; border-radius:8px; padding:10px 12px; font-size:13px; max-width: 300px; transition: opacity .1s; }
.tt-row { color: var(--ink2); margin: 2px 0; }
.tt-row b { color: var(--ink); }
.tt-key { display:inline-block; width:12px; height:2px; margin-right:6px; vertical-align: middle; }
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  nav { display:none; }
  .hero { padding-top: 28px; }
  .hero-head { flex-direction: column; align-items:flex-start; gap:12px; }
  .record { text-align:left; display:flex; align-items:baseline; gap:8px; }
  .record-num { font-size: 40px; }
  .split { grid-template-columns: 1fr; gap: 16px; }
  .chart { padding: 10px; }
  .block { padding-top: 64px; }
}
.anno { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }