/* /hoops additions on top of the shared /course sheet */
:root, [data-theme="dark"] {
  --p1: #8fd18a;
  --p2: #e0b45c;
  --court-fill: #131a14;
  --paint-fill: #1b2a1d;
  --court-line: #56665a;
  --apron: #0f150f;
}
[data-theme="light"] {
  --p1: #2e7d32;
  --p2: #b07d20;
  --court-fill: #e9ead9;
  --paint-fill: #d5dfc6;
  --court-line: #7f8a7a;
  --apron: #efeee2;
}

.f-apron { fill: var(--apron); stroke: none; }
.f-court { fill: var(--court-fill); stroke: var(--court-line); stroke-width: .12; }
.f-paint { fill: var(--paint-fill); stroke: var(--court-line); stroke-width: .1; }
.f-line { stroke: var(--court-line); stroke-width: .1; fill: none; }
.f-line.dash { stroke-dasharray: .35 .3; }
.f-rim { stroke: var(--amber); stroke-width: .12; fill: none; }
.f-board { stroke: var(--ink-2); stroke-width: .14; }

.f-walk-p1 { stroke: var(--p1); stroke-width: .12; fill: none; opacity: .55; stroke-linejoin: round; stroke-linecap: round; }
.f-walk-p2 { stroke: var(--p2); stroke-width: .12; fill: none; opacity: .55; stroke-linejoin: round; stroke-linecap: round; }
.f-rel-p1 { fill: var(--p1); opacity: .95; }
.f-rel-p2 { fill: var(--p2); opacity: .95; }
.f-rel.degraded { opacity: .45; }
.f-heat-dot { fill: var(--ink); opacity: .16; }
.spot-num { font-family: var(--font-mono); font-size: .62px; font-weight: 700; fill: var(--ink); }
.spot-lbl { font-family: var(--font-mono); font-size: .5px; fill: var(--ink-2); }
.spot-hit { fill: transparent; cursor: pointer; }
.f-spotring { stroke: var(--ink-3); stroke-width: .08; fill: none; stroke-dasharray: .25 .2; opacity: .7; transition: all .18s; }
.f-spotring.hot { stroke: var(--accent); opacity: 1; stroke-width: .14; }
.now-marker { fill: none; stroke: var(--accent); stroke-width: .16; }

.lg-p1 { background: var(--p1); }
.lg-p2 { background: var(--p2); }
.lg-heat { background: var(--ink); opacity: .35; height: 8px; width: 8px; border-radius: 50%; filter: blur(1px); }
.lg-paint { background: var(--paint-fill); border: 1px solid var(--court-line); height: 8px; width: 14px; border-radius: 3px; }

.spot-strip { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 760px) { .spot-strip { grid-template-columns: repeat(4, 1fr); } }
.hc-ft { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; line-height: 1.2; }

.player-chips { display: flex; gap: 6px; }
.lchip.p1.on { color: var(--p1); border-color: var(--p1); background: color-mix(in oklab, var(--p1) 8%, var(--bg-2)); }
.lchip.p2.on { color: var(--p2); border-color: var(--p2); background: color-mix(in oklab, var(--p2) 8%, var(--bg-2)); }

/* run panel: two player cards + head-to-head */
.run-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .run-grid { grid-template-columns: 1fr; } }
.run-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.run-card h4 { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.run-card.p1 h4 { color: var(--p1); } .run-card.p2 h4 { color: var(--p2); }
.run-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.run-kpi .n { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.run-kpi .l { font-family: var(--font-mono); font-size: .66rem; color: var(--ink-3); margin-top: 2px; }
.run-blocks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.run-block { font-family: var(--font-mono); font-size: .68rem; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.run-h2h { margin-top: 10px; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-2); }
.run-h2h strong { color: var(--ink); }

/* the shared sheet pulses the now-marker in course meters; rescale for a court */
.now-marker { stroke-width: .14; animation: hoopPulse 1.2s ease-out infinite; }
@keyframes hoopPulse { 0% { r: .35; opacity: 1; } 100% { r: 1.1; opacity: .15; } }

/* the scan */
.scan-grid { display: grid; gap: 8px; margin-top: var(--space-6); }
.scan-row { display: grid; grid-template-columns: 160px 1fr; gap: 14px; align-items: baseline; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: inherit; text-decoration: none; }
a.scan-row:hover { border-color: var(--accent-dim); }
.scan-app { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.scan-how { font-size: var(--text-sm); color: var(--ink-2); }
.scan-note { margin-top: var(--space-6); max-width: 78ch; color: var(--ink); }
@media (max-width: 560px) { .scan-row { grid-template-columns: 1fr; gap: 4px; } }

/* timeline */
.timeline-wrap[hidden] { display: none; }
.timeline-wrap { border-top: 1px solid var(--line); background: var(--bg-2); padding: 10px 12px 8px; }
.timeline-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--ink-3); }
.tl-title { color: var(--ink-2); text-transform: uppercase; }
.tl-legend { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.lg-p1 { background: var(--p1); } .lg-p2 { background: var(--p2); }
.lg-line { display: inline-block; width: 16px; height: 0; border-top: 1.5px solid var(--ink-3); margin-left: 6px; }
.lg-made { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); margin-left: 6px; }
.timeline { display: block; width: 100%; height: 132px; cursor: pointer; }
.tl-lane { fill: var(--bg); stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tl-name { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.tl-p1 { fill: var(--p1); } .tl-p2 { fill: var(--p2); }
.tl-hr { fill: none; stroke-width: 1.5; opacity: .55; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tl-hr-p1 { stroke: var(--p1); } .tl-hr-p2 { stroke: var(--p2); }
.tl-rel line { stroke-width: 2; vector-effect: non-scaling-stroke; }
.tl-rel.tl-p1 line { stroke: var(--p1); } .tl-rel.tl-p2 line { stroke: var(--p2); }
.tl-rel circle { fill: var(--ink); stroke: var(--bg-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tl-rel circle.miss { fill: var(--bg-2); stroke: var(--ink-3); }
.tl-rel:hover line { stroke-width: 4; }
.tl-axis { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); }
.tl-tick { stroke: var(--line); vector-effect: non-scaling-stroke; }
.tl-cursor { stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.now-pos { stroke: var(--bg); stroke-width: .08; }
.now-pos-p1 { fill: var(--p1); } .now-pos-p2 { fill: var(--p2); }
.now-pos-label { font-family: var(--font-mono); font-size: .55px; font-weight: 700; fill: var(--bg); pointer-events: none; }
.n-sub { font-size: .55em; color: var(--ink-3); font-weight: 500; }
@media (max-width: 560px) { .timeline { height: 110px; } .tl-legend { display: none; } }
.run-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .run-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* wrist truth */
.truth-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 10px; font-size: var(--text-sm); color: var(--ink-3); }
.truth-row b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }
.zone-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line); margin-bottom: 12px; }
.zone-bar .z { display: block; position: relative; height: 100%; }
.zone-bar .z i { position: absolute; inset: 0; font: 600 9px/14px var(--font-mono); font-style: normal; color: var(--bg); text-align: center; white-space: nowrap; overflow: hidden; }
.zone-bar .z1 { background: #6b8fb3; } .zone-bar .z2 { background: #7fb5a3; } .zone-bar .z3 { background: #b9c26a; } .zone-bar .z4 { background: #e0b45c; } .zone-bar .z5 { background: #d9775a; }
.fatigue { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--ink-3); }
.fatigue-t { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); flex-basis: 100%; }
.fatigue .band b { color: var(--ink); font-family: var(--font-mono); }
.fatigue-n { flex-basis: 100%; color: var(--ink-3); }

/* ---- wrist files: terrain, reel button, loaders (Sep 16 2026) ---- */
#reelBtn { appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:7px 12px; border:1px solid var(--accent-dim); border-radius:4px; color:var(--ink); background:var(--bg-2); font:500 var(--text-xs)/1.2 var(--font-mono); cursor:pointer; }
#reelBtn:hover { border-color:var(--accent); color:var(--accent); }
#reelBtn svg { flex-shrink:0; }
.terrain-wrap[hidden] { display:none; }
.terrain-wrap { border-top:1px solid var(--line); background:var(--bg-2); padding:10px 12px 12px; }
.terrain-canvas { display:block; width:100%; height:300px; }
.tr-note { color:var(--ink-3); text-transform:none; letter-spacing:0; margin-left:8px; }
.terrain-foot { margin:8px 0 0; font-size:var(--text-xs); color:var(--ink-3); max-width:80ch; }
.run-card h4 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px) { .terrain-canvas { height:240px; } .tl-legend .tr-note { display:none; } #reelBtn { min-width:42px; min-height:42px; padding:8px; } }