/* 3D shot-arc viewer (assets/shots3d.js), client site: light only. Every colour is a token: the viewer reads the --s3d-* values with
   getComputedStyle, so it follows the site theme. They map onto the site tokens (site.css) where those exist.
   Outcome colours: blue / crimson (a pair that stays apart for red-green colour blindness: blue vs red-brown; >= 4.5:1 on white,
   >= 3:1 on the light court and on the dark surface), never the brand orange (UI chrome only); error landings also get a x mark.
   A theme can override them site-wide with --outcome-ok / --outcome-err / --outcome-other. */
.s3d {
  --s3d-ok: var(--outcome-ok, #0072b2);
  --s3d-err: var(--outcome-err, #c8233a);
  --s3d-other: var(--outcome-other, #8a8f98);
  --s3d-bg: var(--surface, #ffffff);
  --s3d-court: var(--court, #e3e8e0);
  --s3d-court-k: var(--court-k, #d6ddd1);
  --s3d-out: var(--court-out, #f1f2ee);
  --s3d-line: var(--court-line, #ffffff);
  --s3d-net: var(--net, #52514e);
  --s3d-ink: var(--ink, #111111);
  --s3d-ink-2: var(--ink-2, #555555);
  --s3d-muted: var(--muted, #75736d);
  --s3d-border: var(--border, rgba(0, 0, 0, 0.12));
  --s3d-chip: var(--surface-2, #f2f1ed);
  --s3d-sel: var(--sel, #111111);
  --s3d-sel-ink: var(--sel-ink, #ffffff);
  min-width: 0;
}

/* filters */
.s3d-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.s3d-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.s3d-row2 { justify-content: space-between; gap: 8px 16px; }
.s3d-row2 > .s3d-row { flex: 1 1 auto; }
.s3d-lab { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--s3d-muted); min-width: 58px; }
.s3d-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--s3d-border); background: var(--s3d-bg); color: var(--s3d-ink-2);
  border-radius: var(--radius-pill); padding: 3px 11px; font: inherit; font-size: 13px; line-height: 20px; min-height: 30px; cursor: pointer; white-space: nowrap; }
.s3d-chip:hover { color: var(--s3d-ink); border-color: var(--s3d-ink-2); }
.s3d-chip.on { background: var(--s3d-sel); border-color: var(--s3d-sel); color: var(--s3d-sel-ink); }
.s3d-chip:disabled { opacity: 0.4; cursor: default; }
.s3d-chip small { font-size: 11.5px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.s3d-chip .av { margin: 0 1px 0 -5px; }
.s3d-pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.s3d-av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ring, var(--s3d-border)); margin-left: -5px; }
.s3d-sw { display: inline-block; width: 12px; height: 4px; border-radius: 2px; flex: none; }
.s3d-seg { display: inline-flex; background: var(--s3d-chip); border-radius: var(--radius-xs); padding: 2px; gap: 2px; flex: none; }
.s3d-seg button { border: 0; background: transparent; padding: 4px 10px; border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer; color: var(--s3d-ink-2); min-height: 28px; }
.s3d-seg button.on { background: var(--s3d-sel); color: var(--s3d-sel-ink); }

/* stage: canvas + overlaid controls */
.s3d-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 300px; max-height: 74vh; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--s3d-border); background: var(--s3d-bg); }
.s3d-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
.s3d-cv:active { cursor: grabbing; }
.s3d-cv:focus-visible { box-shadow: inset 0 0 0 2px var(--s3d-ink); }
.s3d-views { position: absolute; top: 8px; left: 8px; display: flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--s3d-bg) 86%, transparent); border: 1px solid var(--s3d-border); }
.s3d-ib { width: 36px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: var(--radius-xs); background: transparent;
  color: var(--s3d-ink-2); cursor: pointer; padding: 0; }
.s3d-ib:hover { color: var(--s3d-ink); background: var(--s3d-chip); }
.s3d-ib.on { background: var(--s3d-sel); color: var(--s3d-sel-ink); }
.s3d-fsb { position: absolute; top: 8px; right: 8px; border: 1px solid var(--s3d-border); background: color-mix(in srgb, var(--s3d-bg) 86%, transparent); }
.s3d-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--s3d-ink-2); font-size: 14px; pointer-events: none; padding: 16px; text-align: center; }
.s3d-msg[hidden] { display: none; }
.s3d-tip { position: absolute; z-index: 3; pointer-events: none; display: none; max-width: 270px; background: var(--s3d-bg); color: var(--s3d-ink);
  border: 1px solid var(--s3d-border); border-radius: var(--radius-xs); padding: 7px 10px; font-size: 12.5px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16); }
.s3d-tip.on { display: block; }
.s3d-t1 { display: flex; align-items: center; gap: 6px; }
.s3d-mut { color: var(--s3d-muted); }

/* legend + info */
.s3d-foot { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.s3d-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; color: var(--s3d-ink-2); }
.s3d-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.s3d-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--s3d-ink-2); }
.s3d-ring { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--s3d-ink-2); }
.s3d-x { font-style: normal; font-weight: 700; font-size: 15px; line-height: 1; color: var(--s3d-ink-2); }
.s3d-info { font-size: 13px; color: var(--s3d-ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 30px; }
.s3d-info b { color: var(--s3d-ink); font-weight: 620; }
.s3d-selt { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.s3d-play { border: 1px solid var(--s3d-sel); background: var(--s3d-sel); color: var(--s3d-sel-ink); border-radius: var(--radius-xs); padding: 4px 12px; font: inherit;
  font-size: 13px; cursor: pointer; text-decoration: none; min-height: 30px; display: inline-flex; align-items: center; }
.s3d-clr { border: 1px solid var(--s3d-border); background: var(--s3d-bg); color: var(--s3d-ink-2); border-radius: var(--radius-xs); width: 30px; height: 30px; cursor: pointer; font-size: 16px; }
.s3d-hint { color: var(--s3d-muted); }

/* full screen (Fullscreen API or a fixed full-window layer where it is missing, e.g. iPhone Safari) */
.s3d.is-fs { position: fixed; inset: 0; z-index: 1000; background: var(--s3d-bg); padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; overflow: auto; }
.s3d.is-fs .s3d-stage { flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 240px; }
.s3d:fullscreen { width: 100%; height: 100%; }
html.s3d-lock, html.s3d-lock body { overflow: hidden; }

@media (max-width: 600px) {
  .s3d-stage { aspect-ratio: 4 / 5; max-height: 64vh; min-height: 280px; }
  .s3d-lab { min-width: 0; width: 100%; }
  .s3d-row[aria-label="Shot type"] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 0 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .s3d-row[aria-label="Shot type"]::-webkit-scrollbar { display: none; }
  .s3d-row[aria-label="Shot type"] .s3d-lab { position: sticky; left: 0; width: auto; display: none; }
  .s3d-chip { padding: 3px 9px; font-size: 12.5px; }
  .s3d-ib { width: 34px; }
  .s3d.is-fs .s3d-filters { gap: 4px; }
  .s3d.is-fs .s3d-lab { display: none; }
}