@font-face { font-family: 'Anton'; src: url(fonts/Anton.ttf); font-display: swap; }
:root { --bg:#06080D; --s1:#0C1119; --line:#1B2330; --ink:#F2F4F7; --ink2:#A9B3C2; --ink3:#6E7A8E; --or:#F58426; --or2:#E06A10; --bl:#2F80D6; --tl:#19A08F; }
* { 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; overflow-x:hidden; }
a { color: var(--or); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.kick { margin:0 0 8px; color: var(--or); font-weight:700; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; }
h2 { font-family: Anton, Impact, sans-serif; font-weight:400; font-size: clamp(36px, 6vw, 72px); line-height:.95; margin:0 0 12px; letter-spacing:.3px; }
.sub { color: var(--ink2); max-width: 62ch; margin: 8px 0 0; font-size: 17px; }
.src { color: var(--ink3); font-size: 13px; margin: 14px 0 0; max-width: 82ch; }
.bar { position: fixed; inset: 0 0 auto 0; z-index: 20; display:flex; align-items:center; gap: 24px; height: 56px; padding: 0 24px; background: linear-gradient(rgba(6,8,13,.85), rgba(6,8,13,0)); }
.brand { font-family: Anton, Impact, sans-serif; font-size: 21px; color: var(--ink); text-decoration:none; letter-spacing:.5px; }
.brand span { color: var(--or); }
.bar nav { margin-left:auto; display:flex; gap:22px; }
.bar nav a { color: var(--ink2); text-decoration:none; font-size:14px; }
.bar nav a:hover { color: var(--ink); }
.snd { background: rgba(255,255,255,.06); border:1px solid var(--line); color: var(--ink2); border-radius: 999px; padding: 6px 12px; font: 500 13px Inter, sans-serif; cursor:pointer; }
.snd[aria-pressed="true"] { color: var(--ink); border-color: var(--or); }
.snd { display:inline-flex; align-items:center; gap:6px; } .snd svg { display:block; }
.snd .w1, .snd .w2 { display:none; } .snd[aria-pressed="true"] .w1, .snd[aria-pressed="true"] .w2 { display:inline; } .snd[aria-pressed="true"] .x { display:none; }
.bar { transition: background .3s; } .bar.solid { background: #06080D; border-bottom: 1px solid var(--line); }

/* ---------- Game Pulse hero ---------- */
.pulse { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #121a28 0%, var(--bg) 60%); display:flex; }
.lights { position:absolute; inset:0; pointer-events:none; }
.lights i { position:absolute; top:-30vh; width: 46vw; height: 110vh; border-radius: 50%; filter: blur(30px); opacity: .12; transform-origin: 50% 0;
  background: radial-gradient(closest-side, rgba(245,132,38,.55), rgba(245,132,38,0)); mix-blend-mode: screen; transition: opacity .25s; }
.lights i:nth-child(1) { left: -12vw; transform: rotate(18deg); }
.lights i:nth-child(2) { left: 10vw; transform: rotate(8deg); background: radial-gradient(closest-side, rgba(47,128,214,.5), rgba(47,128,214,0)); }
.lights i:nth-child(3) { left: 27vw; }
.lights i:nth-child(4) { left: 44vw; transform: rotate(-8deg); background: radial-gradient(closest-side, rgba(47,128,214,.5), rgba(47,128,214,0)); }
.lights i:nth-child(5) { left: 66vw; transform: rotate(-18deg); }
#fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index: 2; }
.pulse-in { position: relative; z-index: 3; width: 100%; max-width: 1240px; margin: 0 auto; padding: 76px 24px 20px; display:flex; flex-direction: column; }
.pulse-top { text-align:center; }
.pulse-top .kick { margin-bottom: 10px; }
.board { display:grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 3vw, 40px); }
.tm { display:flex; align-items: baseline; gap: 16px; font-variant-numeric: tabular-nums; }
.tm.nyk { justify-content: flex-end; } .tm.opp { justify-content: flex-start; }
.tm b { font: 700 clamp(14px, 2vw, 22px) Inter, sans-serif; letter-spacing: 2px; color: var(--ink2); }
.tm span { font-family: Anton, Impact, sans-serif; font-size: clamp(64px, 13vw, 168px); line-height: .9; }
.tm.nyk span { color: var(--or); text-shadow: 0 0 40px rgba(245,132,38,.35); }
.clock { display:flex; flex-direction: column; align-items:center; font-variant-numeric: tabular-nums; min-width: 92px; }
.clock span { color: var(--ink3); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight:600; }
.clock b { font: 700 clamp(22px, 3vw, 34px) Inter, sans-serif; }
.play { color: var(--ink2); min-height: 3em; margin: 14px auto 0; max-width: 70ch; font-size: 15px; transition: opacity .2s; }
.flash { position:absolute; left:0; right:0; top: 40%; text-align:center; font-family: Anton, Impact, sans-serif; font-size: clamp(56px, 12vw, 160px); color: var(--or); opacity: 0; pointer-events:none; text-shadow: 0 0 60px rgba(245,132,38,.6); z-index: 4; letter-spacing: 2px; }
.flash.on { animation: fl 1.6s ease-out; }
@keyframes fl { 0% { opacity:0; transform: scale(.7); } 15% { opacity:1; transform: scale(1.05);} 70% { opacity:.9; transform: scale(1);} 100% { opacity:0; transform: scale(1.1);} }
.flow { flex: 1; min-height: 240px; margin-top: 6px; position: relative; }
.flow svg { display:block; width:100%; height:100%; overflow: visible; }
.meter-v { position:absolute; right: 8px; top: 30%; height: 34%; width: 14px; display:flex; flex-direction:column; align-items:center; z-index: 4; }
.meter-v div { flex:1; width: 10px; border-radius: 6px; background: linear-gradient(to top, #1b2330 0%, #1b2330 100%); position: relative; overflow:hidden; }
.meter-v div::after { content:''; position:absolute; left:0; right:0; bottom:0; height: var(--e, 0%); background: linear-gradient(to top, var(--or2), var(--or) 60%, #ffd29c); transition: height .12s; }
.meter-v span { margin-top: 6px; font-size: 9px; letter-spacing: 1px; color: var(--ink3); text-align:center; line-height: 1.1; font-weight: 700; }
.pulse-ctl { display:flex; justify-content: space-between; gap: 16px; align-items:center; margin-top: 10px; flex-wrap: wrap; }
.chips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; max-width: 100%; }
.chips::-webkit-scrollbar { display:none; }
.chips button { flex:0 0 auto; background: rgba(12,17,25,.7); color: var(--ink2); border:1px solid var(--line); border-radius: 10px; padding: 7px 12px; font: 500 12px Inter, sans-serif; cursor:pointer; text-align:left; backdrop-filter: blur(6px); }
.chips button b { display:block; color: var(--ink); font-weight: 700; font-size: 13px; }
.chips .w { color: var(--or); } .chips .l { color: var(--ink3); }
.chips button.on { border-color: var(--or); background: rgba(245,132,38,.12); }
.btns { display:flex; gap: 8px; }
.btns button, .seg button { background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink); padding: 8px 14px; border-radius: 10px; font: 600 13px Inter, sans-serif; cursor: pointer; }
.btns button:hover { border-color: var(--or); }
.cap { color: var(--ink3); font-size: 12px; margin: 10px 0 0; text-align: center; }
.down { position:absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: var(--ink3); text-decoration:none; z-index:5; font-size: 18px; animation: bob 2s infinite; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }
.anno { fill: var(--ink); font: 600 13px Inter, sans-serif; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.anno-s { fill: var(--ink2); font-weight: 400; font-size: 12px; }
.tick { fill: var(--ink3); font: 12px Inter, sans-serif; font-variant-numeric: tabular-nums; }

/* ---------- summary ---------- */
.sum { padding-top: 56px; }
.sum-grid { display:grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: end; }
.sum-nums { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sum-nums div b { display:block; font-family: Anton, Impact, sans-serif; font-size: 48px; line-height: 1; font-weight: 400; }
.sum-nums div span { color: var(--ink3); font-size: 13px; }
.lines { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; margin-top: 24px; }
.lines th, .lines td { padding: 5px 12px; 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 { font-weight: 700; } .lines tr.opp td { color: var(--ink2); }

/* ---------- scrollytelling ---------- */
.scrolly { position: relative; margin-top: 96px; display:grid; grid-template-columns: 1.5fr 1fr; max-width: 1240px; margin-left:auto; margin-right:auto; padding: 0 24px; gap: 40px; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display:flex; align-items: center; }
.sticky-in { width: 100%; }
#pace { height: min(62vh, 520px); }
#pace svg { width:100%; height:100%; display:block; overflow: visible; }
.steps { padding: 30vh 0 40vh; }
.step { min-height: 80vh; display:flex; align-items:center; }
.step > div { background: rgba(12,17,25,.86); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; backdrop-filter: blur(8px); transition: border-color .3s, opacity .3s; opacity: .45; }
.step.on > div { border-color: var(--or); opacity: 1; }
.step h3 { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 34px; line-height: 1; margin: 0 0 8px; }
.step p { margin: 0; color: var(--ink2); }
.step em { color: var(--ink); font-style: normal; font-weight: 700; }

/* ---------- 3D court ---------- */
.court-sec { padding-top: 96px; }
.court-head { display:flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.c-ctl { display:flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.seg { display:inline-flex; gap: 6px; }
.seg button.on { border-color: var(--or); background: rgba(245,132,38,.12); }
.stats { display:flex; gap: 28px; }
.stats div b { display:block; font-family: Anton, Impact, sans-serif; font-weight:400; font-size: 44px; line-height: 1; }
.stats div span { color: var(--ink3); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.court3d { position: relative; height: min(78vh, 680px); margin-top: 20px; touch-action: pan-y; cursor: grab; background: radial-gradient(70% 60% at 50% 60%, #111a29, var(--bg) 75%); }
.court3d canvas { display:block; width: 100% !important; height: 100% !important; }
.c-hint { position:absolute; left: 50%; bottom: 14px; transform: translateX(-50%); color: var(--ink3); font-size: 12px; letter-spacing: 1px; pointer-events:none; }
.c-tip { position:absolute; left: 16px; top: 16px; max-width: 320px; background: rgba(12,17,25,.92); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--ink2); opacity: 0; transition: opacity .2s; pointer-events:none; }
.c-tip b { color: var(--ink); }

/* ---------- runs VU ---------- */
.block { padding-top: 110px; }
.vu-list { margin-top: 28px; display:flex; flex-direction: column; gap: 12px; }
.vu-row { display:grid; grid-template-columns: 170px 1fr 70px; gap: 16px; align-items:center; }
.vu-lab b { display:block; font-size: 15px; } .vu-lab span { color: var(--ink3); font-size: 12px; }
.leds { display:grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.leds i { height: 22px; border-radius: 3px; background: #141b26; transition: background .08s, box-shadow .08s; }
.leds i.on { background: var(--or); box-shadow: 0 0 12px rgba(245,132,38,.55); }
.leds i.on.hot { background: #ffb36b; box-shadow: 0 0 16px rgba(255,179,107,.8); }
.vu-row.opp .leds i.on { background: #5B6577; box-shadow: none; }
.vu-val { font-family: Anton, Impact, sans-serif; font-size: 30px; text-align: right; line-height: 1; }
.vu-row .det { grid-column: 2 / 4; color: var(--ink3); font-size: 12px; margin-top: -6px; }
.panel { background: var(--s1); border:1px solid var(--line); border-radius: 14px; padding: 16px; margin-top: 24px; }
.panel svg { display:block; overflow: visible; }
.lu-name { fill: var(--ink); font: 500 14px Inter, sans-serif; } .lu-val { fill: var(--ink); font: 700 14px Inter, sans-serif; }
.soon { padding-bottom: 24px; }
.foot { border-top: 1px solid var(--line); margin-top: 72px; padding-top: 24px; padding-bottom: 40px; color: var(--ink3); font-size: 13px; }
.tt { position: fixed; pointer-events:none; opacity:0; z-index:30; background:#151c28; border:1px solid #2A3444; border-radius:8px; padding:10px 12px; font-size:13px; max-width: 300px; }
.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; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  .bar { padding: 0 14px; gap: 12px; } .bar nav { display:none; } .snd { margin-left: auto; } .snd span { display:none; }
  .pulse-in { padding: 64px 14px 14px; }
  .tm { gap: 8px; } .tm b { letter-spacing: 1px; }
  .play { font-size: 13px; min-height: 4.2em; }
  .flow { min-height: 300px; }
  .meter-v { right: 2px; } .meter-v span { display:none; }
  .pulse-ctl { flex-direction: column-reverse; align-items: stretch; }
  .btns { justify-content: center; }
  .sum-grid { grid-template-columns: 1fr; gap: 16px; }
  .sum-nums div b { font-size: 36px; }
  .scrolly { grid-template-columns: 1fr; padding: 0 12px; gap: 0; }
  .sticky { height: 58svh; top: 56px; z-index: 3; background: var(--bg); align-items: flex-start; padding-top: 8px; }
  #pace { height: 42svh; }
  .steps { position: relative; z-index: 1; padding: 6svh 0 20svh; }
  .step { min-height: 46svh; align-items: center; }
  .step > div { padding: 16px 18px; }
  .step h3 { font-size: 26px; }
  .c-ctl { align-items: flex-start; }
  .court3d { height: 64svh; }
  .vu-row { grid-template-columns: 1fr 52px; gap: 6px 10px; }
  .vu-row .leds { grid-column: 1 / 3; grid-row: 2; }
  .vu-row .det { grid-column: 1 / 3; margin-top: 0; }
  .leds { gap: 3px; } .leds i { height: 16px; }
  .block { padding-top: 80px; }
}
@media (prefers-reduced-motion: reduce) { .flash.on { animation: none; } .down { animation: none; } }
/* ---------- live + win probability strip ---------- */
.wpr { margin: 2px auto 0; color: var(--ink3); font-size: 12px; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.wps { height: 46px; margin-top: 4px; position: relative; } .wps svg { display:block; width:100%; height:100%; }
.next { margin: 8px 0 0; text-align:center; color: var(--ink); font-size: 14px; font-weight: 600; } .next:empty { display:none; }
.chips .live-chip { border-color: #e5484d; } .chips .live-chip b { color: #ff6b6f; }
.is-live #p-kick { color: #ff6b6f; animation: lv 1.6s infinite; } @keyframes lv { 50% { opacity: .55; } }

.chips{display:flex;gap:8px;overflow-x:auto;padding-top:18px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink2);border-radius:999px;padding:7px 13px;font:600 13px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.chips button small{color:var(--ink3);font-weight:500;margin-left:6px;font-variant-numeric:tabular-nums}
.chips button.on{border-color:var(--or);color:var(--ink);background:rgba(245,132,38,.14)}
.c-legend{position:absolute;right:16px;bottom:14px;font-size:12px;color:var(--ink3);display:none;align-items:center;gap:8px;pointer-events:none}
.c-legend i{display:block;width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,#2F80D6,#5b6577 45%,#F58426 75%,#FFB25E)}
.court3d.towers .c-legend{display:flex}
@media (max-width: 760px){
  .stats{gap:18px}.stats div b{font-size:32px}
  .c-legend{top:12px;bottom:auto;right:12px;font-size:11px}.c-legend i{width:80px}
}