:root {
  color-scheme: dark;
  --ground: #050606; --surface: #111413; --sunken: #1A1F1D; --ink: #EEF3F0; --muted: #8C9A92; --line: #232A27;
  --turf: #3DDC84; --turf-ink: #04140B; --turf-soft: rgba(61, 220, 132, .14);
  --goal: #FF7A45; --goal-soft: rgba(255, 122, 69, .16); --shot: #5AA9FF; --shot-soft: rgba(90, 169, 255, .15);
  --warn: #F5B94A; --warn-soft: rgba(245, 185, 74, .13);
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.55 var(--body); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-size: 1.45rem; text-transform: uppercase; letter-spacing: .01em; }
h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; }
p { margin: 0; }
a { color: var(--turf); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--turf); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* top bar */
.topbar { background: var(--ground); color: var(--ink); padding-inline: 16px; border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding-block: 14px; }
.crest { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--turf); color: var(--turf-ink); font-family: var(--display); font-weight: 700; font-size: 1.2rem; box-shadow: 0 0 0 4px var(--turf-soft); }
.topbar h1 { font-size: 1.9rem; text-transform: uppercase; }
.topbar .sub { font-size: .82rem; color: var(--muted); }
.topbar .spacer { flex: 1; }
.topbar a.switch { color: var(--turf); font-size: .82rem; text-decoration: none; border: 1px solid currentColor; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.demo-banner { background: var(--ground); color: var(--muted); border-bottom: 1px solid var(--line); font-size: .8rem; text-align: center; padding: 6px 16px; }

/* tabs */
.tabs { background: var(--ground); border-bottom: 1px solid var(--line); padding-inline: 16px; position: sticky; top: 0; z-index: 5; }
.tabs-inner { max-width: 1120px; margin: 0 auto; display: flex; gap: 4px; overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 12px 9px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--turf); }

/* layout */
main { max-width: 1120px; margin: 0 auto; padding: 20px 16px 120px; display: flex; flex-direction: column; gap: 18px; }
.grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .grid.two { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
[hidden] { display: none !important; }

/* buttons & chips */
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .88rem; }
.btn.primary { background: var(--turf); border-color: var(--turf); color: var(--turf-ink); }
.btn:disabled { opacity: .5; cursor: default; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 11px; font-size: .8rem; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 9px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.pill.goal { background: var(--goal-soft); color: var(--goal); }
.pill.shot { background: var(--shot-soft); color: var(--shot); }
.pill.turf { background: var(--turf-soft); color: var(--turf); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
button.pill { border: 0; }
button.pill:disabled { cursor: default; }

/* video */
.player { background: #000; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; }
.player video { width: 100%; height: 100%; display: block; }
.now-playing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* match timeline */
.timeline { position: relative; height: 46px; background: var(--sunken); border-radius: 8px; margin-top: 4px; }
.timeline .half { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--line); }
.timeline .tick { position: absolute; bottom: 2px; font-size: .62rem; color: var(--muted); transform: translateX(-50%); font-family: var(--mono); }
.marker { position: absolute; top: 8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--shot); background: var(--surface); padding: 0; }
.marker.goal { border-color: var(--goal); background: var(--goal); }
.marker.comment { top: 24px; width: 10px; height: 10px; margin-left: -5px; border-radius: 2px; border-color: var(--ink); background: var(--ink); }
.marker.mine { box-shadow: 0 0 0 3px var(--turf); }
.marker[aria-current="true"] { transform: scale(1.35); }

/* event list */
.events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; border-top: 1px solid var(--line); }
.events li { display: grid; grid-template-columns: 78px auto 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.events li[aria-current="true"] { background: var(--turf-soft); }
.events .play { border: 0; background: none; text-align: left; padding: 0; font-weight: 600; white-space: nowrap; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.toggle input { width: 18px; height: 18px; accent-color: var(--turf); }

/* forms */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: .8rem; color: var(--muted); }
.input { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 9px 11px; width: 100%; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* upload slots */
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot { border: 1.5px dashed var(--line); border-radius: 8px; aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center;
  color: var(--muted); font-size: .8rem; position: relative; overflow: hidden; background: var(--sunken); }
.slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: inline-block; vertical-align: middle; }

/* tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--sunken); border: 1px solid var(--line); }
.dot.done { background: var(--turf); border-color: var(--turf); }
.dot.today { border: 2px solid var(--turf); }

/* comments */
.comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comments li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.comments .time { border: 0; background: var(--sunken); border-radius: 6px; padding: 2px 7px; font-family: var(--mono); font-size: .78rem; height: fit-content; }
.comments .who { font-weight: 600; font-size: .85rem; }

/* chat dock (player dashboard) */
.chat-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.chat-inner { max-width: 760px; margin: 0 auto; pointer-events: auto; background: rgba(17, 20, 19, .96); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 -8px 40px rgba(0,0,0,.7), 0 0 0 1px var(--turf-soft); overflow: hidden; }
.chat-log { max-height: min(55vh, 460px); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: .92rem; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: var(--turf); color: var(--turf-ink); border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--sunken); border-bottom-left-radius: 4px; }
.msg .ts { border: 0; background: var(--turf-soft); color: var(--turf); border-radius: 5px; padding: 0 5px; font-family: var(--mono); font-size: .82rem; }
.chat-suggest { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 0; }
.chat-suggest .chip { white-space: nowrap; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px; align-items: center; }
.chat-form input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; background: var(--ground); min-width: 0; }
.chat-toggle { border: 0; background: none; color: var(--muted); font-size: .8rem; padding: 4px 8px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat .label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat .value { font-family: var(--display); font-weight: 700; font-size: 2.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .value.accent { color: var(--turf); }
.stat .hint { font-size: .75rem; color: var(--muted); }
.stat .bar { height: 4px; border-radius: 2px; background: var(--sunken); overflow: hidden; margin-top: 6px; }
.stat .bar span { display: block; height: 100%; background: var(--turf); }
.card { box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.btn { background: var(--sunken); }
.btn.primary { box-shadow: 0 0 18px rgba(61, 220, 132, .25); }

/* box editor */
.editor { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--turf); border-radius: var(--radius); padding: 12px; background: var(--sunken); box-shadow: 0 0 0 3px var(--turf-soft); }
.editor-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.editor-stage { position: relative; }
.editor-stage video { pointer-events: none; }
.editor-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.editor-slider { width: 100%; accent-color: var(--turf); }
.editor-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.editor-controls .spacer { flex: 1; }
.editor-controls .btn[aria-pressed="true"] { background: #FFD400; color: #1a1400; border-color: #FFD400; }
.editor-panel { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.editor-empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cov-row { display: flex; flex-direction: column; gap: 6px; }
.cov { position: relative; display: flex; height: 14px; border-radius: 4px; overflow: hidden; cursor: pointer; background: var(--sunken); }
.cov .on { background: var(--turf); }
.cov .off { background: rgba(255, 90, 90, .55); }
.cov .out { background: repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 4px, rgba(255,255,255,.05) 4px 8px); }
.editor-head .job-chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; }
.editor-stage .off-note { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; }
.editor-stage .off-note span { background: rgba(0,0,0,.7); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.editor-stage .off-note span.sel { border-color: #FFD400; color: #FFD400; }
.cov .cov-now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #FFD400; }
.edit-btn { margin-left: auto; }

/* full-screen box editor */
body.editor-open { overflow: hidden; }
body.editor-open .chat-dock { display: none; }
.editor.fullscreen { position: fixed; inset: 0; z-index: 100; border: 0; border-radius: 0; box-shadow: none; background: #000;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 8px;
  /* the visible part of the screen, not the taller box an iPhone gives a fixed element (see above) */
  height: 100dvh; max-height: 100dvh; }
.editor.fullscreen .editor-head { flex-wrap: nowrap; align-items: center; }
.editor.fullscreen .editor-head .spacer { flex: 1; }
.editor.fullscreen .editor-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.editor-main { flex: 1; min-height: 0; display: grid; place-items: center; }
/* the video takes the space left between the head and the controls, whatever the screen, and never
   more: it can't slide over the buttons below it */
.editor.fullscreen .editor-main { container-type: size; }
.editor.fullscreen .editor-stage { width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; height: auto; border-radius: 10px; }
/* held upright, the video sits right under the head with the controls right under it */
@media (max-aspect-ratio: 1/1) {
  .editor.fullscreen .editor-main { flex: none; container-type: inline-size; }
}
.editor-bottom { display: flex; flex-direction: column; gap: 8px; width: min(100%, 1200px); margin: 0 auto; }
.editor.fullscreen .editor-panel { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(10px, env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 760px); max-height: 48dvh; z-index: 2; box-shadow: 0 -10px 40px rgba(0,0,0,.8); }
@media (max-width: 600px) {
  .editor-hint { display: none; }
  .editor-controls .btn { padding: 6px 10px; }
  .editor-tools .toggle { font-size: .75rem; }
}
/* a phone on its side: almost all video, one slim bar at the bottom, the rest behind More */
.editor.fullscreen.sideways { gap: 6px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.editor.fullscreen.sideways .editor-head { display: none; }
.editor.fullscreen.sideways .editor-stage { border-radius: 6px; }
.editor.fullscreen.sideways .editor-bottom { position: absolute; z-index: 3; flex-direction: row; align-items: center; gap: 8px;
  left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom));
  width: auto; padding: 4px 10px 4px 6px; border-radius: 14px; background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* the details panel sits above that bar */
.editor.fullscreen.sideways .editor-panel { bottom: calc(max(6px, env(safe-area-inset-bottom)) + 56px); max-height: 60dvh; }
.editor.fullscreen.sideways .editor-slider { flex: 1; min-width: 90px; }
.editor.fullscreen.sideways .editor-controls { flex: none; flex-wrap: nowrap; }
.editor.fullscreen.sideways .editor-controls .btn { min-height: 40px; padding: 4px 12px; white-space: nowrap; }
.editor-more[hidden] { display: none; }
.editor.fullscreen.sideways .editor-more { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 3; width: max-content; max-width: 100%;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(10, 12, 11, .95); box-shadow: 0 -8px 30px rgba(0, 0, 0, .6); }
.editor.fullscreen.sideways .editor-more .btn { min-height: 40px; }
.editor.fullscreen.sideways .editor-stage .add-ball, .editor.fullscreen.sideways .editor-stage .del-ball { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.editor-stage .off-note .off-toggle { pointer-events: auto; font: inherit; font-size: 12px; min-height: 32px; padding: 3px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .7); color: #fff; border: 1px solid rgba(255, 255, 255, .25); cursor: pointer; }
.editor-stage .add-ball { position: absolute; top: 10px; right: 10px; z-index: 3; }
.editor-stage .ball-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; background: #FFD400; color: #1a1400;
  font-weight: 600; font-size: .85rem; padding: 6px 12px; border-radius: 999px; pointer-events: none; }
.sync-label { white-space: nowrap; }
.editor-stage .del-ball { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(0,0,0,.65); border-color: #FF6B6B; color: #FFB3B3; }
.editor-toast { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(0,0,0,.8); color: #fff;
  border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; font-size: .85rem; pointer-events: none; white-space: nowrap; }
@media (min-width: 900px) { .grid.pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* every player's moments: a row per child that opens their list */
.ball-who { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.ball-who .small { flex: 1; min-width: 0; font-weight: 400; }
.ball-list li .play { white-space: nowrap; }

/* team-attributed events */
.pill.goal.opp, .pill.shot.opp { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.marker.goal.opp { background: var(--surface); border-color: var(--goal); }
.marker.shot.opp { border-color: var(--muted); }
.scoreline { display: inline-flex; align-items: center; gap: 8px; }
.scoreline .result { font-family: var(--body); font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--turf-soft); color: var(--turf); text-transform: none; letter-spacing: 0; }

/* player highlight on the normal video */
.player { position: relative; }
.spotlight-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the whole-game block: the video keeps its own box so the ring and ball trail land on the pitch */
.matchline { display: flex; flex-direction: column; gap: 8px; }
.matchline .player { margin: 0; }
.spotlight-bar { margin-top: -2px; }
.spotlight-bar .chips .chip { padding: 3px 10px; }
.btn.mark-ok { border-color: var(--turf); color: var(--turf); }
.btn.mark-bad { border-color: #FF6B6B; color: #FF9B9B; }

/* photo squares: kit, roster and the parent's photos of their child */
.slots.wide { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
.slot.mini { aspect-ratio: 1; width: 46px; border-radius: 8px; font-size: .62rem; }
.slot-note { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .68); color: var(--ink);
  font-size: .68rem; line-height: 1.25; padding: 3px 5px; }
.slot-note:empty { display: none; }
.slot-x { position: absolute; top: 4px; right: 4px; z-index: 2; width: 26px; height: 26px; padding: 0; line-height: 1;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .7); color: var(--ink); border-radius: 999px; font-size: .78rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.photo-grid figure { position: relative; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.photo-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--sunken); }
.photo-grid figcaption { font-size: .72rem; color: var(--muted); }
.roster-photo { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); display: block; }

/* guided photo capture */
.booth { position: fixed; inset: 0; z-index: 110; background: var(--ground); overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 10px; }
.booth-head { display: flex; align-items: center; gap: 10px; }
.booth-head .spacer { flex: 1; }
.booth-stage { display: none; position: relative; width: min(100%, 380px); margin: 0 auto; aspect-ratio: 3 / 4;
  background: #000; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.booth-stage.on { display: block; }
.booth-stage video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); }
.booth-count { position: absolute; top: 10px; right: 12px; min-width: 34px; text-align: center; font-family: var(--mono);
  font-size: 1.15rem; background: rgba(0, 0, 0, .6); border-radius: 999px; padding: 2px 10px; }
.booth-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.booth-flash.on { opacity: .7; transition: opacity .12s; }
.booth-say { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; text-align: center; min-height: 1.6em; text-wrap: balance; }
.booth-body, .booth-foot { width: min(100%, 720px); margin: 0 auto; }
.booth-body { display: flex; flex-direction: column; gap: 10px; }
.booth-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.booth-foot .btn { min-height: 44px; }
.booth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.booth-shot { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.booth-shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.booth-shot[data-keep="false"] img { opacity: .3; }

/* club dashboard + the parent's joining flow */
.narrow { max-width: 620px; }
ol.clean, ul.clean { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.crumbs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: .78rem; color: var(--muted); }
.crumb { white-space: nowrap; }
.crumb:last-child { color: var(--ink); font-weight: 600; }
.crumb.sep { color: var(--line); }
.team-row { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.team-row:last-child { border-bottom: 0; padding-bottom: 0; }
.team-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.team-head .row { flex-wrap: wrap; }
.waiting { background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 10px; padding: 8px 10px; }
.waiting .btn { min-height: 40px; }
.btn.big { min-height: 48px; padding: 12px 20px; font-size: 1rem; }
.big-code { font-size: 1.4rem; letter-spacing: .18em; text-align: center; max-width: 220px; }
.steps { display: flex; gap: 8px; flex-wrap: wrap; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.step { border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; }
.step[aria-current="true"] { background: var(--turf); border-color: var(--turf); color: var(--turf-ink); font-weight: 600; }
.who-box { background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.example { border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px; background: var(--sunken); display: flex; flex-direction: column; gap: 8px; }
.org-tree { display: flex; flex-direction: column; gap: 6px; }
.org-node { border-left: 2px solid var(--line); padding: 5px 0 5px 10px; }
.org-node .org-node { margin-top: 6px; margin-left: 10px; }
.org-node.owner { border-color: var(--turf); }
.org-node.club { border-color: var(--shot); }
.org-node.team { border-color: var(--goal); }
@media (max-width: 460px) {
  .topbar-inner.wrap { flex-wrap: wrap; row-gap: 8px; }
  .topbar-inner.wrap h1 { font-size: 1.5rem; }
  .topbar-inner.wrap .spacer { flex-basis: 100%; height: 0; }
}

/* tap-to-choose pickers (positions, numbers, scores) */
.chips.picker { flex-wrap: wrap; gap: 6px; }
.chips.picker .chip[aria-pressed="true"] { background: var(--turf, #3DDC84); color: #04140B; border-color: transparent; font-weight: 600; }
.picker-row { flex-wrap: wrap; gap: 8px; align-items: center; }
.pos-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pos-tags .tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(61,220,132,.16); color: var(--turf, #3DDC84); white-space: nowrap; }

/* the details panel needs a way out that never scrolls away: a head that stays put, and the rest of
   the panel scrolling under it (a head that only sticks drifts about on an iPhone mid-scroll) */
.editor-panel { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panel-head {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 2px 4px 10px;
  background: var(--panel, transparent);
}
.panel-close { white-space: nowrap; }

/* Yes / No answers on a clip: unanswered is neither, which is information too */
.answer { gap: 6px; flex-wrap: nowrap; }
.answer .chip { padding: 4px 10px; }
.answer .chip.yes { background: var(--turf, #3DDC84); color: #04140B; border-color: transparent; font-weight: 600; }
.answer .chip.no  { background: #FF6B6B; color: #1a0606; border-color: transparent; font-weight: 600; }

/* squad rows in the team admin view */
.squad { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.squad-row { gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); }

/* What it costs, shown before a parent signs up */
.price-note {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(61,220,132,.08); border: 1px solid rgba(61,220,132,.28);
}
.price-note p { margin: 0 0 4px; }
.price-note p:last-child { margin-bottom: 0; }

/* the 80% coverage bar */
.coverage { margin: 10px 0 4px; }
.cover-bar { position: relative; height: 10px; border-radius: 999px; overflow: visible; }
.cover-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--turf, #3DDC84); }
.cover-bar .gate { position: absolute; top: -3px; width: 2px; height: 16px; background: rgba(255,255,255,.55); }

/* per-player passing */
.pass-row { padding: 10px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
.pass-row:last-of-type { border-bottom: 0; }
.pass-row .bar { height: 6px; margin: 6px 0 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.pass-row .bar > span { display: block; height: 100%; background: var(--turf, #3DDC84); }
.pass-row p { margin: 0; }
.team-totals { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line, rgba(255,255,255,.08)); }

/* the match timeline: named stretches, moments as pins */
.mline-strip {
  position: relative; height: 54px; margin: 8px 0; border-radius: 10px;
  /* a finger that starts on the line still scrolls the page down; only a tap jumps */
  background: rgba(255,255,255,.05); overflow: hidden; cursor: crosshair; touch-action: pan-y;
}
.mline-span {
  position: absolute; top: 6px; bottom: 6px; border-radius: 6px; cursor: pointer;
  background: rgba(61,220,132,.22); border: 1px solid rgba(61,220,132,.5); overflow: hidden;
}
.mline-span.kind-break { background: rgba(255,107,107,.18); border-color: rgba(255,107,107,.45); }
.mline-span.kind-period { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.3); }
.mline-span.kind-note { background: rgba(255,212,0,.16); border-color: rgba(255,212,0,.45); }
.mline-span.dragging { background: rgba(255,255,255,.18); border-style: dashed; pointer-events: none; }
/* a short stretch is narrower than its name, so it ends in … rather than a word cut mid-letter */
.mline-label {
  position: absolute; left: 6px; right: 4px; top: 4px; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mline-pin { position: absolute; top: 4px; width: 3px; height: 14px; background: #9ad; border-radius: 2px; cursor: pointer; }
/* three pixels of ink is nothing to aim a finger at: each pin carries an invisible tap target */
.mline-pin::after { content: ""; position: absolute; inset: -8px -6px; }
.mline-pin.goal { background: #FF7A45; width: 4px; height: 20px; }
.mline-head { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; }
.mline-edit { margin-top: 8px; }

/* unfinished shots waiting for a goal or a save */
.shot-open { padding: 6px 8px; border-radius: 8px; gap: 8px; }
.shot-open.here { background: rgba(61,220,132,.10); border: 1px solid rgba(61,220,132,.35); }
.mark-step { margin: 8px 0 4px; opacity: .8; }
.update-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1000; display: flex; gap: 12px; align-items: center;
  background: var(--surface); color: var(--ink); border: 1px solid var(--turf); border-radius: 999px; padding: 8px 8px 8px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.5);
  max-width: calc(100vw - 32px); font-size: 14px; }

/* daily homework */
ol.homework { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 12px; }
ol.homework .hw { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
ol.homework .hw.done strong { color: var(--turf); }
ol.homework .hw-block { margin: 4px 0 0; }
ol.homework .hw-demo iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; }
button.dot.hw-set { width: 24px; height: 24px; padding: 0; cursor: pointer; }

/* check mode: answer a few questions about one child */
.check.fullscreen { position: fixed; inset: 0; z-index: 110; background: #000; display: flex; flex-direction: column; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); overflow-y: auto;
  /* the part of the screen actually on show: a fixed box on an iPhone otherwise runs on behind Safari's
     bar, and the picture is cut off at the bottom */
  height: 100dvh; max-height: 100dvh; }
.check-head { display: flex; align-items: center; gap: 10px; }
.check-head .spacer { flex: 1; }
/* the picture's own shape (--ar, set from the video): a juggling video filmed upright fills it with no bars beside it,
   so a tap's place across the stage is its place across the picture (11 Oct: taps on an upright video were saved off
   to the side, measured across a widescreen stage with the video in its middle) */
.check-stage { --ar: 16 / 9; position: relative; width: min(100%, calc((100dvh - 330px) * var(--ar))); aspect-ratio: var(--ar); margin: 0 auto; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.check-zoom { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .3s ease; }
.check-zoom video, .check-zoom canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.check-stage canvas { touch-action: none; }
.check-taps { position: absolute; inset: 0; pointer-events: none; }
.check-num { pointer-events: auto; position: absolute; transform: translate(-50%, -100%) scale(var(--unzoom, 1)); transform-origin: 50% 100%; min-width: 34px; height: 34px; border-radius: 17px;
  border: 2px solid #fff; background: rgba(0,0,0,.72); color: #fff; font: 600 16px/1 var(--body); padding: 0 8px; cursor: pointer; }
.check-num:focus-visible, .check-num:hover { background: var(--turf); color: var(--turf-ink); border-color: var(--turf); }
/* Pass Completion check: a player the team has named shows their name; the AI's guess is outlined amber */
.pass-table { display: flex; flex-wrap: wrap; gap: 6px; }
.pass-cue { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  background: rgba(0, 0, 0, .78); color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px;
  padding: 6px 14px; font: 600 15px/1.2 var(--body); white-space: nowrap; }
.pass-cue:empty { display: none; }
.pick-pop { position: absolute; z-index: 4; width: min(340px, calc(100% - 12px)); display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 12px; background: rgba(12, 14, 13, .95); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6); color: #fff; }
.pick-pop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.pick-pop-list .btn { padding: 6px 8px; font-size: 14px; }
/* Teaching moments: the coach's choices and drawing tools, and the drawing layer over the picture */
.btn.cand[aria-pressed="true"] { background: var(--turf, #3DDC84); color: #04140B; border-color: transparent; }
.btn.cand.swatch { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; min-width: max-content; }
.btn.cand.swatch[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: var(--ink); border-color: var(--lit); }
.lesson-sketch { pointer-events: none; touch-action: none; }
.sketch-bar { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 10px; }
.check-sheet textarea.input { width: 100%; resize: vertical; font: inherit; }
.learn-card .row { flex-wrap: wrap; }
.check-num.named { font-size: 13px; height: 28px; border-radius: 14px; border-color: var(--turf); }
.check-num.ai-guess { border-color: #FFB020; box-shadow: 0 0 0 2px rgba(255, 176, 32, .45); }
.check-bar { width: min(100%, calc((100dvh - 330px) * 16 / 9)); margin: 0 auto; height: 10px; flex-shrink: 0; cursor: default; }
.check-bar .unsure { background: #FFB020; }
.check-bar .check-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; opacity: .8; }
.check-status { text-align: center; min-height: 1.2em; }
.check-sheet { width: min(100%, 640px); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.check-q { font-size: 20px; font-weight: 600; margin: 0; }
.check-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-yesno .btn { min-height: 52px; font-size: 18px; }
.check-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Find and Fix: "Show everyone (3 more)" and "Mark the other team" (teamkit.js), above the sticky buttons */
.check-team { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
/* Room to say what the buttons can't — a throw-in, a deflection, who it was really meant for. */
.check-note { display: block; width: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: inherit; font: inherit; font-size: 14px; }
.check-note::placeholder { color: var(--muted); }
.check-note:focus-visible { outline: 2px solid var(--turf); outline-offset: 1px; }
/* Dragging the goal onto the goalposts: big enough to grab with a thumb. */
.goal-handle { pointer-events: auto; position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid #fff; background: rgba(61, 220, 132, .55); cursor: grab; touch-action: none;
  transform: scale(var(--unzoom, 1)); box-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.goal-handle:active { cursor: grabbing; background: var(--turf); }
/* Placing a player the tracker never found: the whole picture becomes the target. */
.check.placing .check-stage { cursor: crosshair; }
.check.placing .check-taps { background: rgba(61, 220, 132, .07); }
.check.placing .check-num { opacity: .35; }
.check-crops { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.check-crop { position: relative; padding: 0; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--sunken); cursor: pointer; }
.check-crop canvas { display: block; width: 100%; height: auto; }
.check-crop span { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.7); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 12px; }
.check-crop:hover, .check-crop:focus-visible { border-color: var(--turf); }
.check-summary { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }

/* the lineup board, in a drawer beside the video */
#lineup-dock { display: flex; flex-direction: column; gap: 8px; }
.drawer-toggle { align-self: flex-start; }
.drawer { display: none; }
.drawer.open { display: block; }
.drawer-body { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
@media (min-width: 1100px) {
  .drawer.open { position: fixed; right: 12px; top: 76px; width: 350px; max-height: 82dvh; overflow-y: auto; z-index: 50;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
  /* two drawers can be open beside the video: players hang from the top, the board from the bottom,
     so neither needs to know whether the other is open */
  .pick-dock .drawer.open { max-height: 46dvh; }
  #lineup-dock .drawer.open { top: auto; bottom: 12px; max-height: 46dvh; }
}

/* naming a box: the name, and under it why it was offered */
.cands { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.cand { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; line-height: 1.25; }
.cand-why { font-size: .68rem; color: var(--muted); }
.btn.cand.spent { opacity: .55; }

/* the roster beside the video: tap a child to put a ring at their feet, in their own colour */
.pick-dock { display: flex; flex-direction: column; gap: 8px; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 6px; }
.pick { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: var(--sunken); color: var(--ink); font: inherit; }
.pick:hover { border-color: var(--muted); }
.pick.on { border-color: var(--lit); box-shadow: inset 0 0 0 1px var(--lit); }
.pick-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.pick-num { color: var(--muted); font-size: .76rem; }
/* A link that does not shout: the way into the AI tools for anyone who wants them. */
.btn.quiet { background: transparent; border-color: transparent; color: var(--muted); padding-left: 0; }
.btn.quiet:hover, .btn.quiet:focus-visible { color: var(--ink); border-color: var(--line); padding-left: 12px; }
/* Nobody has marked this child in this part of the game, so lighting them up draws nothing. Say it
   on the chip and again underneath, because full screen hides the bar that normally carries it. */
.pick.unmarked .pick-name { opacity: .55; }
.pick.unmarked .lit-dot { border-style: dashed; }
.pick-missing { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255, 176, 32, .10); }
.lit-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--lit, transparent);
  border: 1px solid rgba(255, 255, 255, .32); }
.chip.lit { border-color: var(--lit); color: var(--ink); }
.chip.lit .lit-dot { margin-right: 5px; }
.pitch { position: relative; aspect-ratio: 3 / 4; background: #10351d; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; overflow: hidden; }
.pitch-half { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(255, 255, 255, .22); }
/* a position on the lineup board — scoped to the pitch: the photo boxes are called .slot too */
.pitch .slot { position: absolute; transform: translate(-50%, -50%); min-width: 58px; padding: 4px 6px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .45); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pitch .slot.filled { border-color: var(--turf); background: rgba(61, 220, 132, .2); }
.pitch .slot.picking { outline: 2px solid #FFD400; outline-offset: 1px; }
.slot-pos { font-size: 9px; letter-spacing: .05em; color: rgba(255, 255, 255, .7); }
.slot-name { font-size: 12px; font-weight: 600; }
.slot-num { font-size: 10px; color: rgba(255, 255, 255, .75); }
.opp-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .3); transform: translate(-50%, -50%); }
.squad-edit { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; margin: 6px 0; border: 1px dashed var(--line); border-radius: 10px; }

/* the season calendar, beside the schedule */
.schedule-layout { align-items: start; }
.cal { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head span { font-size: 11px; color: var(--muted); text-align: center; letter-spacing: .04em; }
.cal-day { min-height: 62px; display: flex; flex-direction: column; gap: 2px; padding: 3px; border: 1px solid transparent; border-radius: 8px; background: var(--sunken); }
.cal-day.other { opacity: .4; }
.cal-day.today { border-color: var(--turf); }
.cal-num { align-self: flex-start; padding: 1px 4px; border: 0; border-radius: 4px; background: none; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.cal-num:hover, .cal-num:focus-visible { background: var(--turf-soft); color: var(--ink); }
.cal-game { display: flex; flex-direction: column; overflow: hidden; padding: 2px 4px; border: 0; border-radius: 6px;
  background: var(--turf); color: var(--turf-ink); font-size: 10px; line-height: 1.25; text-align: left; cursor: pointer; }
.cal-game.away { background: var(--turf-soft); color: var(--ink); }
.cal-game.picked { outline: 2px solid #FFD400; }
.cal-time { font-weight: 600; }
.cal-opp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fixture-row { flex-wrap: wrap; row-gap: 4px; }
.fixture-row .venue { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .cal-day { min-height: 52px; } .cal-game { font-size: 9px; } }

/* train the AI: the roster, with where each child stands across the match's clips */
.train-list { display: flex; flex-direction: column; gap: 6px; }
.train-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr auto; gap: 12px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); }
.train-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.train-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.train-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); gap: 1px; }
.train-seg { display: block; height: 100%; }
.train-seg.ok, .train-dot.ok { background: var(--turf); }
.train-seg.busy { background: repeating-linear-gradient(45deg, var(--turf), var(--turf) 4px, var(--turf-soft) 4px, var(--turf-soft) 8px); }
.train-seg.found, .train-dot.found { background: var(--shot); }
.train-seg.out, .train-dot.out { background: #4A534F; }
.train-seg.todo, .train-dot.todo { background: var(--line); }
.train-key { display: flex; flex-wrap: wrap; gap: 14px; }
.train-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
@media (max-width: 640px) {
  .train-row { grid-template-columns: 1fr auto; }
  .train-bar { grid-column: 1 / -1; order: 3; }
}
/* the whole game, five minutes to a cell, filled by how much of it is named */
.train-full { gap: 10px; }
.train-slices { display: grid; grid-template-columns: repeat(auto-fit, minmax(14px, 1fr)); gap: 3px; }
.train-slice { height: 18px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
.train-slice::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--fill, 0) * 100%); background: var(--turf); }
/* one child written down more than once: the other names, and the button that makes them one */
.train-dupes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-top: 6px; border-top: 1px dashed var(--line); }
.train-dupes .btn { margin-left: auto; }

/* full screen that keeps the highlight: the whole player goes full screen, with its settings in a
   panel over the side of the picture that ⚙ tucks away and brings back */
.spot-btn { position: absolute; top: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .55); color: #fff; font-size: 18px; line-height: 1;
  opacity: .8; }
.spot-btn:hover, .spot-btn:focus-visible { opacity: 1; }
.spot-fs { right: 10px; }
.spot-side-tab { right: 56px; display: none; }
.spot-side-tab[aria-pressed="true"] { border-color: var(--turf); color: var(--turf); }
/* follow-zoom: 🔍 beside ⚙ while big, and the player's own slim bar while the picture is zoomed (the
   video's controls would be zoomed with it) */
.spot-zoom-btn { right: 102px; display: none; }
.player.spot-big .spot-zoom-btn { display: block; }
.spot-zoom-btn[aria-pressed="true"] { opacity: 1; border-color: var(--turf); color: var(--turf); background: rgba(0, 0, 0, .7); }
.spot-zoombar { display: none; }
.player.spot-zoomed .spot-zoombar { display: flex; align-items: center; gap: 10px; position: absolute; z-index: 3;
  left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); padding: 4px 10px 4px 4px; border-radius: 12px; background: rgba(0, 0, 0, .45); }
.spot-zoom-play { flex: none; width: 38px; height: 38px; border-radius: 9px; cursor: pointer; font-size: 15px;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .55); color: #fff; }
.spot-zoom-seek { flex: 1; min-width: 60px; accent-color: var(--turf); }
.spot-zoom-time { color: #fff; font-size: 12px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.spot-side { display: none; }
.player:fullscreen, .player:-webkit-full-screen, .player.spot-theatre {
  width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
/* filling the window has to win over anything the page set on the player */
.player.spot-theatre { position: fixed !important; inset: 0 !important; z-index: 2000; margin: 0 !important;
  width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; }
body.spot-theatre-open { overflow: hidden; }
.player.spot-big video { object-fit: contain; }
.player.spot-big .spot-side-tab { display: block; }
.player.spot-big.spot-side-open .spot-side {
  display: flex; flex-direction: column; gap: 10px; position: absolute; z-index: 3;
  top: 58px; right: 10px; max-height: calc(100% - 122px); width: min(340px, calc(100vw - 20px)); overflow-y: auto;
  padding: 12px; border-radius: 12px; background: rgba(10, 12, 11, .84); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.spot-side .spotlight-bar { margin: 0; }
.spot-side .spotlight-bar > .row { flex-direction: column; align-items: stretch; gap: 10px; }
.spot-side .spotlight-bar .row { flex-wrap: wrap; }
.spot-side .spotlight-bar select { width: 100% !important; }
.spot-side-only { display: none; }
.spot-side .spot-side-only { display: block; }
/* the full roster is in the panel: the bar's short picker would only repeat it */
.spot-side.with-list .spot-pick { display: none; }
.spot-side .pick-body { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
/* a phone held upright: the picture is a strip across the screen, so it moves up under the buttons,
   keeps its own play controls, and the panel takes the space below it */
@media (max-aspect-ratio: 1/1) {
  .player.spot-big.spot-side-open video { height: auto; aspect-ratio: 16 / 9; margin-top: 58px; }
  .player.spot-big.spot-side-open .spot-side { top: calc(56.25vw + 68px); left: 10px; right: 10px; width: auto;
    max-height: calc(100% - 56.25vw - 78px); }
}


/* ---------- a family's training on their child's page (family.js) ---------- */
.fam-row { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.fam-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--sunken); gap: 2px; }
.fam-seg.ok { background: var(--turf); }
.fam-seg.busy { background: var(--warn); }
.fam-seg.no { background: rgba(140, 154, 146, .45); }
.fam-seg.todo { background: transparent; }

/* ---------- phones ----------
   Nine in ten parents and players watch and answer on a phone. On a phone the child's page puts the
   video first (and, held upright, keeps it on screen while the clips scroll by), the clip list gets
   thumb-sized answers, the chat opens from 💬 Ask instead of sitting over everything, and the full-screen
   tools keep the picture in view while their choices scroll. Computers and tablets keep the layout above. */
.phone-only, .chat-close { display: none; }

/* a phone, upright or on its side */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .phone-only { display: inline-flex; }
  .phone-only[hidden] { display: none; }
  .desk-only { display: none !important; }
  /* the highlight's own "Check Evan" button is there whenever the highlight is on */
  body[data-page="player"] .spotlight-bar:has(.row.small .btn) + .now-playing .phone-only { display: none; }
  .tabs { padding-inline: 6px; }
  .tabs button { padding: 12px 9px 9px; }
  .tabs .tab-ask { margin: 0 0 0 auto; align-self: center; border: 1px solid var(--turf); background: var(--turf-soft); color: var(--turf);
    border-radius: 999px; padding: 6px 14px; font: 600 .9rem var(--body); white-space: nowrap; }

  /* the child's page: less above the video */
  body[data-page="player"] .stats { display: none; }
  /* one list the page scrolls, not a box that scrolls inside the page */
  .events { max-height: none; overflow: visible; }
  .events li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 6px; padding: 10px 4px; }
  .events li .answer { margin-left: auto; }
  /* time, what happened and the answer on one line: the half ("P1") is the least of it */
  .events li > .small.muted { display: none; }
  .answer .chip { min-height: 44px; min-width: 56px; justify-content: center; white-space: nowrap; }
  /* a tap anywhere on a clip's row plays it; ✓ Yes / ✗ No sit above that and still answer */
  .events li { position: relative; }
  /* the child's page only: the team page's rows have no answers beside them, and keep their height */
  body[data-page="player"] .events li .play { min-height: 44px; }
  .events li .play::after { content: ""; position: absolute; inset: 0; }
  .events li .answer { position: relative; z-index: 1; }
  .now-playing .btn { min-height: 44px; }
  /* "▶ 6 of Evan's moments" plays them: a thumb-sized button here, and a long name wraps inside it
     rather than pushing a narrow phone's page sideways */
  #moment-count { min-height: 40px; max-width: 100%; padding: 0 14px; font-size: .85rem; white-space: normal; }

  /* the chat opens from 💬 Ask in the tabs, as a sheet at the bottom */
  .chat-dock:not(.open) .chat-inner { display: none; }
  .chat-inner { position: relative; overflow: visible; }
  /* close sits just above the sheet, clear of the messages */
  .chat-dock.open .chat-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: -46px; right: 4px;
    z-index: 1; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }

  /* full-screen tools (Check mode, the pass check, teaching moments, lessons) */
  .check-head { flex-wrap: wrap; row-gap: 2px; }
  .check-head .check-where { display: none; }
  /* number bubbles sized for a picture this small; the pictures below are the big targets */
  .check-num { min-width: 26px; height: 26px; border-radius: 13px; font-size: 13px; padding: 0 6px; }
  .check-num.named { height: 24px; font-size: 12px; }
  /* the buttons that finish a step stay in reach at the bottom */
  .check-sheet .check-actions { position: sticky; bottom: 0; z-index: 2; padding: 12px 0 4px;
    background: linear-gradient(rgba(0, 0, 0, 0), #000 26%); }
  .check-sheet .btn { min-height: 44px; }
  .pass-cue { white-space: normal; text-align: center; max-width: calc(100% - 24px); font-size: 13px; }
}

/* held upright: the picture stays on screen while things scroll under it */
@media (max-width: 640px) {
  body[data-page="player"] .topbar-inner { padding-block: 10px; }
  body[data-page="player"] .topbar h1 { font-size: 1.5rem; }
  body[data-page="player"] main { padding: 12px 10px 90px; gap: 12px; }
  body[data-page="player"] .card { padding: 12px; }
  /* the video stays just under the tabs while the list of clips scrolls under it */
  body[data-page="player"] .card > .player:not(.spot-theatre) { position: sticky; top: 48px; z-index: 4; }
  /* thirty dots across a phone are too small to tap: the list below does the same job */
  body[data-page="player"] #timeline, body[data-page="player"] #timeline + p { display: none; }
  .check.fullscreen { padding-left: 10px; padding-right: 10px; }
  .check-stage { position: sticky; top: 0; z-index: 2; }
}

/* the narrowest phones:  💬 Ask is the one thing on this bar a parent comes back for, and at 320 px it
   hung off the end of the strip where only a sideways scroll would have found it. Tighter gaps and
   padding fit all four tabs on screen; nothing here touches phones with room to spare. */
@media (max-width: 360px) {
  .tabs { padding-inline: 4px; }
  .tabs-inner { gap: 2px; }
  .tabs button { padding: 12px 6px 9px; }
  .tabs .tab-ask { padding: 6px 10px; font-size: .85rem; }
}


/* ---------- watching full screen: point your child out without leaving it ---------- */
.spot-find-btn { display: none; left: 10px; width: auto; padding: 0 14px; font: 600 14px/1 var(--body); }
.player.spot-big .spot-find-btn { display: inline-flex; align-items: center; opacity: 1; background: var(--turf); color: var(--turf-ink);
  border-color: transparent; }
.player.spot-big .spot-find-btn[aria-pressed="true"] { background: rgba(0, 0, 0, .7); color: #fff; border-color: rgba(255, 255, 255, .3); }
.spot-find { display: none; }
.player.spot-big.spot-find-open .spot-find { display: flex; flex-direction: column; gap: 8px; position: absolute; z-index: 4;
  top: 0; right: 0; bottom: 0; width: min(46%, 440px); overflow-y: auto;
  padding: 58px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) 12px;
  background: rgba(8, 10, 9, .93); border-left: 1px solid rgba(255, 255, 255, .12); color: var(--ink); }
.player.spot-big.spot-find-open .spot-fs, .player.spot-big.spot-find-open .spot-side-tab { z-index: 5; }
/* on its side, the picture moves over to the left of the pictures, so every player stays in view */
@media (min-aspect-ratio: 1/1) {
  .player.spot-big.spot-find-open video { width: calc(100% - min(46%, 440px)); }
}
.spot-find-head { align-items: center; }
.spot-find .check-crops { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
.spot-find .check-q, .spot-find-head strong { font-size: 17px; }
.spot-find-note { color: var(--turf); margin: 0; }
/* "not in view" and ▶ Keep watching stay in reach at the bottom, however many pictures there are */
.player.spot-big.spot-find-open .spot-find .check-actions { position: sticky; bottom: 0; z-index: 2; padding: 12px 0 4px;
  background: linear-gradient(rgba(8, 10, 9, 0), rgba(8, 10, 9, .97) 26%); }
/* ‹ › between clips, and where this one is in the list: at the top, clear of 🎯 on the left and ⚙ ✕ */
.spot-clipnav { display: none; }
.player.spot-big:not(.spot-find-open) .spot-clipnav { display: flex; align-items: center; gap: 6px; position: absolute; z-index: 3;
  top: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 380px); }
.spot-clipnav .spot-btn { position: static; opacity: 1; flex: none; font-size: 22px; }
.spot-clipnav .spot-btn:disabled { opacity: .35; cursor: default; }
.spot-clipnav-label { height: 38px; min-width: 0; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .55); color: #fff; font: 600 14px/36px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* held upright, the pictures take the space under the picture; ‹ › sit just under it, and make way for ⚙ */
@media (max-aspect-ratio: 1/1) {
  .player.spot-big.spot-find-open video { height: auto; aspect-ratio: 16 / 9; margin-top: 58px; }
  .player.spot-big.spot-find-open .spot-find { top: calc(56.25vw + 68px); left: 0; width: auto; border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 12px; }
  .player.spot-big:not(.spot-find-open) .spot-clipnav { top: calc(50% + 28.125vw + 12px); max-width: calc(100% - 20px); }
  .player.spot-big.spot-side-open .spot-clipnav { display: none; }
}

/* ---------- full-screen tools on a phone on its side ----------
   The picture fills the height; the question and its answers sit in a thin column down the right edge,
   70% see-through so the field shows behind it, with the buttons and words solid. The column scrolls
   for more (a finger, or a mouse drag), the ‹ › handle tucks it away to see the whole picture, and a
   new question brings it back. */
.sheet-toggle { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .check.fullscreen { display: block; padding: 0; overflow: hidden; }
  .check.fullscreen > .check-head { position: absolute; z-index: 5; top: 0; left: 0; right: 0; flex-wrap: nowrap;
    padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 18px max(12px, env(safe-area-inset-left));
    background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); }
  .check.fullscreen > .check-stage { position: absolute; top: 0; bottom: 0; left: env(safe-area-inset-left); height: 100%; width: auto;
    max-width: calc(100% - var(--sheet-w)); max-height: 100dvh; aspect-ratio: var(--ar); margin: 0; border-radius: 0; }
  .check.fullscreen.sheet-hidden > .check-stage { left: 50%; transform: translateX(-50%); }
  .check.fullscreen > .check-bar, .check.fullscreen > .check-status { display: none; }
  .check.fullscreen .pass-cue { top: 54px; }
  .check.fullscreen { --sheet-w: clamp(150px, 22vw, 210px); }
  .check.fullscreen > .check-sheet { position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; width: var(--sheet-w); margin: 0; gap: 8px;
    padding: 56px max(10px, env(safe-area-inset-right)) 14px 10px; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(8, 10, 9, .3); border-left: 1px solid rgba(255, 255, 255, .1); text-shadow: 0 1px 3px rgba(0, 0, 0, .95); cursor: grab; }
  .check.fullscreen > .check-sheet .check-yesno, .check.fullscreen > .check-sheet .check-actions, .check.fullscreen > .check-sheet .cands {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .check.fullscreen > .check-sheet .check-actions { position: static; padding: 0; background: none; }
  .check.fullscreen > .check-sheet .btn { width: 100%; min-height: 42px; white-space: normal; text-shadow: none; cursor: pointer; }
  .check.fullscreen > .check-sheet .btn:not(.cand) { text-align: center; }
  .check.fullscreen > .check-sheet .check-yesno .btn { min-height: 46px; font-size: 16px; }
  .check.fullscreen > .check-sheet .small { font-size: 12px; color: rgba(255, 255, 255, .88); }
  .check.fullscreen.sheet-hidden > .check-sheet { display: none; }
  .check.fullscreen .check-crops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check.fullscreen .check-q { font-size: 15px; }
  .check.fullscreen > .sheet-toggle { display: inline-flex; align-items: center; justify-content: center; position: absolute; z-index: 6;
    top: 50%; transform: translateY(-50%); right: var(--sheet-w); width: 30px; height: 68px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .25); border-right: 0; border-radius: 10px 0 0 10px; background: rgba(8, 10, 9, .55);
    color: #fff; font-size: 22px; }
  .check.fullscreen.sheet-hidden > .sheet-toggle { right: 0; }
}

/* ---------- the child's numbers: each a button that plays the clips behind it ---------- */
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat-play { font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.stat-play:not(:disabled):hover { border-color: var(--turf); }
.stat-play:disabled { cursor: default; }
.stat-play:disabled .value { color: var(--muted); }
.stat-play .watch { margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--turf); min-height: 1em; }
.playlist-bar { align-items: center; gap: 6px; }
.playlist-bar .btn { min-height: 40px; min-width: 44px; justify-content: center; }
.period-chips { margin-bottom: 10px; flex-wrap: wrap; }
.period-chips .chip { min-height: 40px; }
.summary { margin: 0 0 12px; }
.summary p { margin: 0 0 8px; line-height: 1.5; }
.summary .best-btn { min-height: 44px; color: var(--turf); font-weight: 600; padding-inline: 0; }
.ai-pill { margin-left: 8px; vertical-align: middle; }

/* ---------- parents' phone videos as extra angles (shared/angles.js) ---------- */
.angles-stage { position: relative; }
.angle-view { position: absolute; inset: 0; z-index: 6; background: #000; }
.angle-view video { width: 100%; height: 100%; display: block; object-fit: contain; }
.angle-top, .angle-bottom { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.angle-top { top: 0; background: linear-gradient(rgba(0,0,0,.7), transparent); }
.angle-bottom { bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.angle-btn { border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.5); color: #fff; border-radius: 999px;
  padding: 6px 12px; font: inherit; font-size: .82rem; font-weight: 600; min-height: 36px; cursor: pointer;
  white-space: nowrap; flex: none; }
.angle-who { color: #fff; font-size: .82rem; text-shadow: 0 1px 2px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.angle-scrub { flex: 1; min-width: 0; accent-color: var(--turf); }
.angle-time { font-family: var(--mono); font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.angle-view .angle-time { color: #fff; }
.angles-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.angles-bar .spacer, .angle-sheet .spacer { flex: 1; }
.angle-chip[aria-pressed="true"] { background: var(--turf); color: var(--turf-ink); border-color: var(--turf); }
.angle-sheet-back { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.65); display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.angle-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; width: min(720px, 100%);
  max-height: calc(100dvh - 32px); overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.angle-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.angle-sheet-head h3 { margin: 0; }
.angle-sheet p { margin: 0; }
.angle-rows { display: flex; flex-direction: column; gap: 10px; }
.angle-row { gap: 8px; padding: 12px; }
.angle-progress { width: 100%; accent-color: var(--turf); }
.angle-tags { gap: 6px; }
.angle-pair { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.angle-steps { gap: 6px; margin-top: 6px; }
.angle-poster { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; background: var(--sunken);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.angle-meta { display: flex; flex-direction: column; min-width: 0; }
.angle-optout { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.angle-told { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.angle-told select { width: 100%; max-width: 420px; }
.angle-told .warn-text { color: var(--warn); margin: 0; }
.mline-pin.angle { background: #7CC4FF; }
@media (max-width: 640px), (pointer: coarse) {
  .angle-sheet-back { padding: 0; align-items: stretch; }
  .angle-sheet { width: 100%; max-height: 100dvh; border-radius: 0; border: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .angle-pair { grid-template-columns: 1fr; }
  .angle-steps .btn, .angle-row .btn, .angles-bar .btn, .angle-chip, .angle-sheet-head .btn, .angle-btn { min-height: 44px; }
}

/* shot map (shared/shotmap.js): half a pitch, goal at the top, a dot per checked shot */
.shotmap svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; touch-action: manipulation; }
.sm-turf { fill: #0D2618; }
.sm-stripe { fill: rgba(238, 243, 240, .03); }
.sm-line { fill: none; stroke: rgba(238, 243, 240, .45); stroke-width: .22; }
.sm-paint { fill: rgba(238, 243, 240, .45); }
.sm-goal { fill: rgba(238, 243, 240, .07); stroke: rgba(238, 243, 240, .75); stroke-width: .3; }
.sm-dot { cursor: pointer; outline: none; }
.sm-hit { fill: transparent; }
.sm-mark { stroke: var(--ground); stroke-width: .35; }
.sm-dot.goal .sm-mark { fill: var(--goal); }
.sm-dot.on .sm-mark { fill: var(--shot); }
.sm-dot.off .sm-mark { fill: #0D2618; stroke: var(--shot); stroke-width: .5; }
.sm-dot.blocked .sm-mark { fill: #0D2618; stroke: var(--muted); stroke-width: .5; stroke-dasharray: .75 .5; }
.sm-ring { fill: none; stroke: var(--ink); stroke-width: .3; }
.sm-dot:focus-visible .sm-ring, .sm-dot:focus-visible .sm-mark { stroke: var(--turf); }
.sm-faint { opacity: .35; pointer-events: none; }
.sm-marker .sm-mark { fill: var(--turf); }
.sm-marker .sm-ring { stroke: var(--turf); }
.shotmap.placing svg { cursor: crosshair; touch-action: none; }   /* a finger drags the dot, not the page */
/* the AI's guess (event.ai_spot): dashed, marked AI, with a faint ring as wide as it may be off */
.sm-err { fill: rgba(238, 243, 240, .07); stroke: rgba(238, 243, 240, .4); stroke-width: .15; stroke-dasharray: .5 .4; }
.sm-ai-label { font: 700 1.9px system-ui, sans-serif; fill: var(--ink); stroke: #0D2618; stroke-width: .45px; paint-order: stroke; pointer-events: none; }
.sm-dot.ai .sm-mark, .sm-marker.ai:not(.moved) .sm-mark { stroke: var(--ink); stroke-width: .35; stroke-dasharray: .55 .4; }
.sm-marker.ai:not(.moved) .sm-ring { stroke: var(--ink); stroke-dasharray: .7 .5; }
.sm-marker.moved .sm-ai-only { display: none; }
.sm-ghost { opacity: .5; pointer-events: none; }
.sm-ghost .sm-mark { fill: none; stroke: var(--ink); stroke-width: .3; stroke-dasharray: .55 .4; }
.shotmap-legend i.ai { border: 2px dashed var(--ink); }
.shotmap-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--muted); }
.shotmap-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.shotmap-legend i.goal { background: var(--goal); }
.shotmap-legend i.on { background: var(--shot); }
.shotmap-legend i.off { border: 2px solid var(--shot); }
.shotmap-legend i.blocked { border: 2px dashed var(--muted); }
.shotmap-picked, .shotmap-sheet-head, .shotmap-sheet-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shotmap-picked .spacer, .shotmap-sheet-foot .spacer { flex: 1; }
.shotmap-wait { display: flex; flex-direction: column; gap: 8px; }
/* placing: a panel along the bottom, so the shot keeps playing in the video above it */
.shotmap-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--surface);
  border-top: 1px solid var(--line); box-shadow: 0 -12px 32px rgba(0, 0, 0, .55); display: flex; flex-direction: column;
  gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); max-height: 60dvh; overflow-y: auto; }
.shotmap-sheet-head { justify-content: space-between; }
.shotmap-sheet .shotmap svg { width: auto; max-width: 100%; max-height: 34dvh; }
.shotmap-sheet .btn { min-height: 44px; }
@media (min-width: 700px) {
  .shotmap-sheet { left: 50%; right: auto; width: 560px; transform: translateX(-50%); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; }
}

/* the 2D view (shared/board.js): the clip on a drawn pitch, under the video. The whole pitch across the width on a
   phone held upright; no wider than a phone's on a computer, so it reads as the same picture */
.board { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.board-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-body { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; margin: 0 auto; min-width: 0; }
.board-canvas { display: block; width: 100%; height: auto; border-radius: 8px; background: #36763C; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.board-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; font-size: .76rem; color: var(--muted); }
.board-legend i, .board-me i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px;
  vertical-align: -1px; border: 1.5px solid #fff; }
.board-legend i.own { background: #2F6EF0; }
.board-legend i.opp { background: #E2443F; }
.board-legend i.ref { background: #FFCD28; border-color: #1E2320; }
.board-legend i.unsure { background: #9CA2A8; }
.board-legend i.ball { width: 8px; height: 8px; background: #FAFAFA; border: 1px solid #1E1E1E; }
.board-legend i.air { width: 9px; height: 9px; background: transparent; border-color: #F0F0F0; }
.board-legend i.view { border-radius: 2px; background: rgba(255, 255, 255, .16); border-color: rgba(225, 240, 225, .6); }
.board-me i.me { background: #2F6EF0; box-shadow: 0 0 0 2px var(--turf); }
.board-me, .board-note { text-align: center; }
.board-me { color: var(--ink); }
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .board-toggle { min-height: 44px; padding: 0 14px; }
}

/* ---------- one question as a clip ends (shared/whoshot.js) ---------- */
/* Over the video, not under it: the frozen kick is what the question is about, and on a phone held
   sideways anything below the video is off the screen entirely. See-through so the moment still reads. */
.ask-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, rgba(0,0,0,.82) 38%);
  color: #fff;
}
.ask-q { margin: 0; font-weight: 600; font-size: 1rem; text-shadow: 0 1px 3px #000; }
.ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ask-btn {
  min-height: 44px; padding-inline: 18px; font-weight: 600; flex: 1 1 auto;
  border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.45); color: #fff;
}
.ask-btn.yes { background: var(--turf); border-color: var(--turf); color: var(--turf-ink); }
/* a way out that does not look switched off: underlined, full white, still clearly the quiet one */
.ask-skip { flex: 0 0 auto; min-height: 44px; color: #fff; padding-inline: 10px;
  text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
/* Over the video only while there is video to spare. On the page the player is about 190 px tall and
   a question with three answers needs a good 100 px of that, so more than half the frozen kick would
   be behind the thing asking about it. There it drops below the video instead, where the page has
   room. Chosen from the measured height, not a media query: the same player is 190 px in the page and
   nearly the whole screen full screen. */
.ask-strip.ask-below {
  position: static; background: var(--sunken, rgba(255,255,255,.06)); color: inherit;
  border-radius: 0 0 12px 12px; padding-bottom: 12px;
}
.ask-strip.ask-below .ask-q { text-shadow: none; }
.ask-strip.ask-below .ask-btn { background: transparent; border-color: var(--line, rgba(255,255,255,.2)); color: inherit; }
.ask-strip.ask-below .ask-btn.yes { background: var(--turf); border-color: var(--turf); color: var(--turf-ink); }
.ask-strip.ask-below .ask-skip { color: inherit; }

/* Where's the ball? (shared/balltag.js): the pass check's full-screen layout, a ring where the ball was tapped */
.balltag .check-taps { pointer-events: auto; cursor: crosshair; }
.balltag-mark { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--turf);
  border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); pointer-events: none; }
.balltag-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.balltag-actions .btn { min-height: 44px; }
.balltag-undo { padding: 0 4px; min-height: 0; font-size: inherit; }
.balltag-block { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- the stats card (shared/stats.js): one row per count, the number itself the ▶ ----------
   Built for a thumb first: every number and every part of one is a 44 px target, the rows stack, and
   our team's number sits beside theirs in two narrow columns that still fit a 360 px phone. */
.stats-group { font-family: var(--body); font-size: .7rem; letter-spacing: .12em; color: var(--muted); font-weight: 600; margin-top: 4px; }
.stat-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.stat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.stat-row.vs { grid-template-columns: minmax(0, 1fr) 68px 68px; }
.stat-row.vs.head { padding: 6px 0 0; border-bottom: 0; font-size: .72rem; color: var(--muted); text-align: center; }
.stat-row.vs.head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-row .what { display: flex; flex-direction: column; min-width: 0; }
.stat-row .label { font-weight: 600; }
.stat-row .hint { font-size: .78rem; color: var(--muted); }
.stat-row > .chips, .stat-row > .stat-nudge { grid-column: 1 / -1; }
.stat-num { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 64px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); color: var(--ink); cursor: pointer;
  font: 700 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
.stat-num .go { font-size: .8rem; color: var(--turf); }
.stat-num:not(:disabled):hover { border-color: var(--turf); }
.stat-num:disabled { color: var(--muted); background: transparent; border-color: transparent; cursor: default; }
.stat-part { min-height: 44px; color: var(--turf); font-weight: 600; }
.stat-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border-radius: 10px;
  background: var(--warn-soft); font-size: .82rem; line-height: 1.45; }
.stat-nudge .btn.quiet { min-height: 44px; color: var(--turf); font-weight: 600; text-decoration: none; text-align: left; }
.stat-nudge .btn.quiet:hover, .stat-nudge .btn.quiet:focus-visible { padding-left: 0; border-color: transparent; text-decoration: underline; }

/* ---------- "More of Evan?" (shared/more.js): the Mac's likeliest other moments of a child, a picture at a time ----------
   Phone first: the sheet fills the screen, the picture takes what's left above three 44 px answers, and on its side
   the picture sits beside the answers. Above the full-screen player (z 2000), which Find leaves first anyway. */
.more-row { align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.more-row .more-open { min-height: 44px; }
.more-sheet-back { position: fixed; inset: 0; z-index: 2100; background: rgba(0, 0, 0, .7); display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.more-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; width: min(440px, 100%);
  max-height: calc(100dvh - 32px); overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.more-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.more-head h3 { margin: 0; }
.more-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.more-pic { display: flex; align-items: center; justify-content: center; min-height: 200px; background: var(--sunken);
  border-radius: 10px; overflow: hidden; }
.more-canvas { display: block; max-width: 100%; max-height: 46dvh; width: auto; height: auto; }
.more-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.more-meta .more-watch { min-height: 44px; color: var(--turf); }
.more-shirt { font-size: .85rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--sunken);
  border: 1px solid var(--line); }
.more-q { font-weight: 600; font-size: 1.05rem; }
.more-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.more-actions .btn { min-height: 48px; padding-inline: 8px; }
.more-actions .btn.primary { grid-column: 1 / -1; }
.more-video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 640px), (pointer: coarse) {
  .more-sheet-back { padding: 0; align-items: stretch; }
  .more-sheet { width: 100%; max-height: 100dvh; border-radius: 0; border: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .more-head .btn { min-height: 44px; }
  .more-row .more-open { flex: 1 1 100%; }
}
/* a phone on its side: the picture on the left, the question and answers in a column on the right */
@media (orientation: landscape) and (max-height: 500px) {
  .more-sheet-back { padding: 0; align-items: stretch; }
  .more-sheet { width: 100%; max-height: 100dvh; border-radius: 0; border: 0; padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .more-sheet { padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
  .more-body:has(> .more-pic) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 40%);
    grid-template-rows: auto auto auto 1fr; gap: 6px 12px; align-items: start; }
  .more-body > .more-pic { grid-column: 1; grid-row: 1 / span 4; min-height: 0; height: calc(100dvh - 90px); }
  .more-body > :not(.more-pic) { grid-column: 2; }
  .more-canvas { max-height: calc(100dvh - 90px); }
}

/* "Your videos" on the child's page (shared/myvideos.js): the family's uploads, and what each one is */
.myvideos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.myvideos li { padding: 8px 0; border-top: 1px solid var(--line); }
/* the Mac's small picture of each video (poc/posters.py); gone when there's none */
.myvideos li { gap: 10px; align-items: center; flex-wrap: nowrap; }
.myvideos li > span:not(.spacer) { flex: 1; min-width: 0; }
.myvideos li > .spacer { display: none; }
.myvideos-thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--sunken); }
.myvideos-thumb:empty { display: none; }
.myvideos-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.myvideos-step { display: grid; gap: 10px; }
.myvideos-types { display: grid; gap: 8px; }
.myvideos-type { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px 14px; min-height: 56px; }
.myvideos-sending { display: grid; gap: 4px; margin-top: 8px; }
.myvideos-start { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--turf); border-radius: 12px; background: var(--turf-soft); }
.myvideos-sending progress { width: 100%; }
/* "🎥 Evan up close" (shared/closeups.js) */
.closeups-row { align-items: center; gap: 10px; }
/* a juggling video's count (shared/skill.js) */
.skill-card { display: grid; gap: 10px; margin-top: 12px; }
.skill-runs { flex-wrap: wrap; gap: 8px; }
.skill-share { display: grid; gap: 8px; }
.skill-profile { display: grid; gap: 6px; }
.skill-profile h3 { margin: 4px 0 0; }
.skill-row { display: flex; gap: 12px; align-items: baseline; }
.skill-row .label { min-width: 72px; color: var(--muted, #9aa); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; }
.skill-share-video { display: block; width: 100%; max-height: 70dvh; background: #000; border-radius: 10px; }
.closeups-video { display: block; width: 100%; max-height: 60dvh; background: #000; border-radius: 10px; }
.closeups-list { display: flex; flex-wrap: wrap; gap: 6px; }
.closeups-list .chip[aria-current="true"] { border-color: var(--turf); color: var(--turf); }

/* the skill path (shared/skillpath.js): juggling challenges as levels on a winding path, like chess.com's puzzles and
   Duolingo's course. Round coins: gold for levels to come, turf for passed, the child's initial on the one they're on. */
:root { --gold: #F2C14E; --gold-deep: #9A6B12; --gold-soft: rgba(242, 193, 78, .15); --turf-deep: #1F8F50;
  --sec-beginner: #3DDC84; --sec-intermediate: #5AA9FF; --sec-expert: #C08CFF; --daily: #FF7AB6; --daily-soft: rgba(255, 122, 182, .13); }
.path-badges { gap: 6px; }
.path-streak { background: var(--goal-soft); color: var(--goal); }
.path-streak.cold { background: var(--sunken); color: var(--muted); }
.path-points { background: rgba(90, 169, 255, .15); color: var(--shot); font-variant-numeric: tabular-nums; }
.path-banner { display: grid; gap: 2px; border-radius: 14px; padding: 12px 14px; color: #06140C;
  background: var(--sec-beginner); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.path-banner.intermediate { background: var(--sec-intermediate); color: #04101F; }
.path-banner.expert { background: var(--sec-expert); color: #160926; }
.path-banner .eyebrow { color: inherit; opacity: .75; font-weight: 600; }
.path-banner strong { font: 700 1.35rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.path-daily { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--daily); background: var(--daily-soft);
  border-radius: 14px; padding: 10px 12px; }
.path-daily.done { border-color: var(--turf); background: var(--turf-soft); }
.path-daily-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px;
  background: var(--daily); box-shadow: 0 3px 0 #A8306B; }
.path-daily.done .path-daily-icon { background: var(--turf); color: var(--turf-ink); box-shadow: 0 3px 0 var(--turf-deep); font-weight: 700; }
.path-daily-text { display: grid; gap: 2px; min-width: 0; }
.path-daily-text .eyebrow { color: var(--daily); }
.path-daily.done .path-daily-text .eyebrow { color: var(--turf); }
.path-now { display: flex; gap: 16px; align-items: center; }
.path-now-text { display: grid; gap: 2px; min-width: 0; }
.path-coach { display: flex; gap: 10px; align-items: flex-start; }
.path-coach-face { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--turf-soft);
  box-shadow: 0 0 0 2px var(--turf); display: grid; place-items: center; font-size: 20px; }
.path-coach-say { position: relative; background: var(--ink); color: var(--ground); border-radius: 14px; padding: 9px 13px;
  font-size: .9rem; line-height: 1.4; }
.path-coach-say::before { content: ""; position: absolute; left: -6px; top: 13px; border: 6px solid transparent;
  border-left: 0; border-right-color: var(--ink); }
.path-actions { align-items: center; gap: 8px; }
.path-actions .spacer { flex: 1; }
a.path-go { text-decoration: none; box-shadow: 0 3px 0 var(--turf-deep); }
a.path-go.big { display: block; text-align: center; padding: 14px; border-radius: 14px; font: 700 1.3rem/1 var(--display);
  text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 5px 0 var(--turf-deep); }
.path-maybe { border: 1px solid var(--warn); background: var(--warn-soft); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.path-maybe .row { flex-wrap: wrap; gap: 8px; align-items: center; }
.path-maybe .spacer { flex: 1; }
.path-node { position: relative; display: inline-grid; place-items: center; }
.path-node-face { position: relative; display: grid; place-items: center; width: 72px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FFE08A, var(--gold) 60%, #DFA62E); color: #3A2604; font: 700 1.7rem/1 var(--display);
  box-shadow: 0 8px 0 var(--gold-deep), 0 14px 22px rgba(0, 0, 0, .45); }
.path-node.small .path-node-face { width: 56px; height: 50px; font-size: 1.35rem; box-shadow: 0 6px 0 var(--gold-deep); }
.path-node.passed .path-node-face { background: radial-gradient(circle at 50% 35%, #9DF5C3, var(--turf) 60%, #2CB86A); color: var(--turf-ink);
  box-shadow: 0 8px 0 var(--turf-deep), 0 14px 22px rgba(0, 0, 0, .45); }
.path-node.small.passed .path-node-face { box-shadow: 0 6px 0 var(--turf-deep); }
.path-node.open .path-node-face, .path-node.maybe .path-node-face, .path-node.skipped .path-node-face {
  background: #39403D; color: #8C9A92; box-shadow: 0 8px 0 #222826, 0 14px 22px rgba(0, 0, 0, .35); }
.path-node.skipped .path-node-face { opacity: .6; }
.path-node.bonus:not(.passed) .path-node-face { background: #2B3A1C; color: #D8F07A; box-shadow: 0 8px 0 #1A2510, 0 14px 22px rgba(0, 0, 0, .35); }
.path-unit.bonus { color: #D8F07A; }
.path-node.maybe .path-node-face { outline: 2px dashed var(--warn); outline-offset: 3px; }
.path-node.current .path-node-face { box-shadow: 0 8px 0 var(--gold-deep), 0 0 0 7px var(--ground), 0 0 0 11px var(--gold); animation: path-bob 1.8s ease-in-out infinite; }
.path-node.small.current .path-node-face { box-shadow: 0 6px 0 var(--gold-deep); animation: none; }
.path-node-side { position: absolute; right: -4px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--ground); font: 700 .8rem/1 var(--body); }
@keyframes path-bob { 50% { transform: translateY(-4px); } }
.path-marker { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: var(--ground); display: grid; place-items: center; font: 700 1.05rem/1 var(--display);
  box-shadow: 0 0 0 3px var(--turf); z-index: 1; }
.path-screen { position: fixed; inset: 0; z-index: 110; display: flex; flex-direction: column; gap: 10px; background: var(--ground);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.path-top { display: grid; gap: 10px; }
.path-head { display: flex; align-items: center; gap: 8px; }
.path-head .spacer { flex: 1; }
.path-track { flex: 1; min-height: 200px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 8px 0 30px; }
.path-daily-row { align-self: stretch; }
.path-section { align-self: stretch; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--sec-beginner);
  padding-bottom: 4px; margin-top: 10px; }
.path-section strong { font: 700 1.25rem/1 var(--display); text-transform: uppercase; color: var(--sec-beginner); }
.path-section.intermediate { border-color: var(--sec-intermediate); }
.path-section.intermediate strong { color: var(--sec-intermediate); }
.path-section.expert { border-color: var(--sec-expert); }
.path-section.expert strong { color: var(--sec-expert); }
.path-section.ahead { opacity: .7; }
.path-unit { align-self: stretch; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; }
.path-unit::before, .path-unit::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.path-step { position: relative; display: grid; justify-items: center; gap: 8px; transform: translateX(calc(var(--k, 0) * min(15vw, 76px))); }
.path-node-btn { background: none; border: 0; padding: 0; border-radius: 50%; }
.path-step.picked .path-node-face { outline: 3px solid var(--ink); outline-offset: 5px; }
.path-jump { background: var(--surface); color: var(--daily); border: 2px solid var(--line); border-radius: 12px; padding: 6px 12px;
  font: 700 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.path-chest, .path-trophy { font-size: 2.2rem; line-height: 1; filter: grayscale(1) brightness(.6); }
.path-chest.open, .path-trophy.won { filter: none; }
.path-chest.open { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--turf);
  color: var(--turf-ink); font: 700 1.5rem/1 var(--display); }
.path-detail { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px;
  max-height: 40vh; overflow-y: auto; }
.path-detail .path-actions { flex-wrap: nowrap; }
.path-detail-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.path-detail-head > div { display: grid; gap: 4px; min-width: 0; }
.path-thumb { position: relative; flex: none; width: 60px; height: 80px; border-radius: 10px; overflow: hidden; background: var(--sunken);
  box-shadow: 0 0 0 2px var(--line); }
.path-thumb:empty { display: none; }
.path-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.path-thumb::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.1rem;
  background: rgba(0, 0, 0, .25); text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.path-thumb:empty::after { content: none; }
.path-detail .path-actions .btn { text-decoration: none; white-space: nowrap; }
.path-detail .path-go.big { flex: 1; }
.path-step:has(.path-marker) { margin-top: 30px; }
@media (prefers-reduced-motion: reduce) { .path-node.current .path-node-face { animation: none; } }

/* a juggling challenge's page (challenge/challenge.js): the video to beat, the number, the board */
.chal { max-width: 560px; }
.chal-brand { color: var(--turf); font-weight: 600; font-size: .85rem; letter-spacing: .04em; }
.chal-title { font-size: 2rem; text-transform: uppercase; }
.chal-video { display: block; width: 100%; max-height: 62dvh; background: #000; border-radius: 14px; object-fit: contain; }
.chal-target { display: flex; align-items: center; gap: 14px; }
.chal-number { font: 700 4.4rem/1 var(--display); color: var(--gold, #F2C14E); }
.chal-take { gap: 10px; }
.chal-go { padding: 14px; font: 700 1.2rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; border-radius: 14px; }
.chal-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chal-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sunken); }
.chal-row.me { outline: 2px solid var(--turf); }
.chal-rank { width: 2em; text-align: center; font-weight: 700; }
.chal-name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.chal-score { font: 700 1.5rem/1 var(--display); font-variant-numeric: tabular-nums; }
.chal-score.muted { font: 600 .85rem/1.2 var(--body); }
.chal-share .btn { flex: 1; padding: 12px; }
.chal-kids { display: grid; gap: 8px; }
.chal-kid { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; font: inherit; color: inherit; }
.chal-kid:disabled { opacity: .6; }
.chal-kid-name { display: grid; }
.chal-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
  background: var(--turf-soft); color: var(--turf); font: 700 1.2rem/1 var(--display); }
.chal-row .chal-avatar { width: 32px; height: 32px; font-size: 1rem; }
.chal-form { display: grid; gap: 8px; }
.chal-form-top { display: flex; gap: 10px; align-items: center; }
.chal-form-name { flex: 1; display: grid; gap: 8px; min-width: 0; }
.chal-form-area { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chal-face { width: 84px; height: 84px; flex: none; border-radius: 50%; border: 2px dashed var(--line); background: var(--sunken); font-size: 1.6rem; overflow: hidden; padding: 0; }
.chal-face img { width: 100%; height: 100%; object-fit: cover; }
.chal-switch { justify-self: start; padding: 2px 0; font-size: .85rem; }
.chal-filters { display: grid; gap: 8px; }
.chal-where { width: auto; max-width: 100%; }
.chal-meta { flex-basis: 100%; }
/* a link's page as a bio link (shared/getapp.js, 16 Oct 2026): Juke Soccer's logo on top, the way into the app at the end */
.juke-head { display: grid; gap: 4px; justify-items: start; margin-bottom: -6px; }
.juke-head img { display: block; width: min(200px, 56vw); height: auto; }
.juke-head .chal-brand { margin: 0; }
.juke-app { gap: 10px; border-color: rgba(250, 200, 50, .35); }
.juke-app-line { margin: 0; font-weight: 600; font-size: 1.05rem; line-height: 1.35; }
.juke-app .juke-open { display: block; text-align: center; text-decoration: none; }
.juke-app-hint, .juke-get { margin: 0; }
.juke-store { color: var(--turf); font-weight: 600; }
/* a one-time friend invite's page (friend/friend.js, 19 Oct 2026): its card, then one big Accept */
.invite-card { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: 16px; object-fit: cover;
  background: linear-gradient(135deg, #144FA9, #950A46); }
.invite-card-plain { display: grid; place-items: center; align-content: center; gap: 10px; color: #fff; font: 700 1.6rem/1 var(--display); text-transform: uppercase; }
.invite-initial { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--turf); color: var(--turf-ink); font-size: 3rem; }
.invite-title { font-size: 1.8rem; }
.invite-accept { display: block; width: 100%; text-align: center; text-decoration: none; font-size: 1.5rem; padding: 18px; }
.invite-get { margin: 0; font: 700 1.5rem/1 var(--display); text-transform: uppercase; color: var(--gold, #F2C14E); }
.invite-done { margin: 0; font-weight: 600; font-size: 1.1rem; color: var(--turf); }
.chal-kid[aria-pressed="true"] { border-color: var(--turf); box-shadow: 0 0 0 2px var(--turf-soft); }
/* on its side (a phone in landscape): the card on the left, Accept beside it, so both fit without scrolling */
@media (orientation: landscape) and (max-height: 540px) {
  .chal.invite { max-width: 900px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 22px; row-gap: 12px; align-content: start; }
  .chal.invite > .juke-head { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 12px; margin-bottom: 0; }
  .chal.invite > .juke-head img { width: min(120px, 30vw); }
  .chal.invite > .invite-card { grid-column: 1; grid-row: 2 / span 6; }
  .chal.invite > :not(.juke-head):not(.invite-card) { grid-column: 2; }
  .chal.invite .invite-title { font-size: 1.5rem; }
}
.chal-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.skill-design-box summary { cursor: pointer; font-weight: 600; color: var(--turf); padding-block: 6px; }
.skill-design-box .row { gap: 8px; flex-wrap: nowrap; }
.skill-design-box .input { flex: 1; min-width: 0; }
.skill-design { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--sunken); }
.skill-design h4 { margin: 0; }
.connect-code { font: 500 1.6rem/1.2 var(--mono, "IBM Plex Mono", ui-monospace, monospace); letter-spacing: .12em; text-align: center; text-transform: uppercase; }

/* the family's challenges on the child's page (shared/mychallenges.js) */
.mych-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mych-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: var(--sunken); color: inherit; text-decoration: none; }
.mych-poster { width: 48px; height: 64px; flex: none; border-radius: 8px; object-fit: cover; background: var(--line); }
.mych-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mych-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mych-go { color: var(--muted); font-size: 1.4rem; }
.mych-gold { color: var(--gold, #F2C14E); font-weight: 600; }
.mych-turf { color: var(--turf); font-weight: 600; }
.mych-news { display: grid; gap: 6px; }
.mych-news h3 { margin: 0; letter-spacing: .06em; }
.mych-event { color: inherit; text-decoration: none; }
.connect-confirm { font: 700 3.2rem/1 var(--mono, "IBM Plex Mono", ui-monospace, monospace); letter-spacing: .3em; text-align: center; margin: 8px 0; color: var(--turf); }
.connect-found { display: grid; gap: 10px; }
.connect-devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.connect-devices li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chal-parent { display: flex; gap: 8px; align-items: flex-start; }
.chal-parent input { margin-top: 3px; flex: none; }

/* a player's page (page/page.js): their card, then a grid of their videos, like a profile */
.pg { max-width: 560px; }
.pg-back { color: var(--muted); text-decoration: none; }
.pg-head { display: flex; align-items: center; gap: 16px; }
.pg-face { width: 84px; height: 84px; font-size: 2.2rem; box-shadow: 0 0 0 3px var(--turf); }
.pg-who { min-width: 0; display: grid; gap: 2px; }
.pg-level { color: var(--turf); font-weight: 600; }
.pg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pg-bio { margin: 6px 0 0; overflow-wrap: anywhere; }
.pg a.btn { text-decoration: none; }
.pg-stat { display: grid; justify-items: center; padding: 10px 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.pg-stat strong { font: 700 1.7rem/1 var(--display); font-variant-numeric: tabular-nums; }
.pg-mine { display: grid; gap: 6px; }
.pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 12px; overflow: hidden; }
.pg-tile { position: relative; aspect-ratio: 3 / 4; max-width: 100%; padding: 0; border: 0; background: var(--sunken); overflow: hidden; }
.pg-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-tile-count { position: absolute; left: 6px; bottom: 6px; font: 700 1.3rem/1 var(--display); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.pg-tile-kind, .pg-tile-who { position: absolute; top: 5px; font-size: .8rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.pg-tile-kind { left: 6px; }
.pg-tile-who { right: 6px; }
/* the AI's check of a family's own post (src/videocheck.ts): over the picture, under the count's corner */
.pg-tile-check { position: absolute; left: 6px; right: 6px; top: 26px; justify-content: center; font-size: .66rem; }
.chal-check { margin: 8px 0 0; }
/* the owner's "Videos held for a check" (reports/) */
.vc-play { display: block; width: 100%; max-height: 50dvh; background: #000; border-radius: 12px; object-fit: contain; margin: 6px 0; }
.pg-line { text-decoration: none; }
.pg-line .chal-kid-name { flex: 1; min-width: 0; }
.pg-count { white-space: nowrap; }
.pg-add-count { width: 40px; flex: none; text-align: center; font: 700 1.6rem/1 var(--display); color: var(--turf); }
.pg-empty { padding: 24px 0; text-align: center; }

/* the policy pages (juke/privacy, juke/terms, juke/support) */
.doc { max-width: 680px; }
.doc h2 { margin-top: 10px; }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.doc p, .doc li { line-height: 1.6; }

/* who says yes (connect, challenge join) and why it's reported (shared/report.js) */
.connect-who, .report-reasons { display: grid; gap: 8px; }
/* a birth month and year (shared/born.js): side by side, each half */
.born-row { display: grid; gap: 6px; padding-left: 26px; }
.born-row p { margin: 0; }
.born-pick { display: flex; gap: 8px; }
.born-pick select { flex: 1; min-width: 0; }
.chal-more { padding: 2px 8px; font-size: 1.1rem; }
.pg-report { justify-self: start; }
.pg-link { word-break: break-all; overflow-wrap: anywhere; }
.pg-tile video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pg-tile-game { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: .72rem; color: #fff; text-align: left; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.pg-tile-game strong { background: var(--turf); color: var(--turf-ink); border-radius: 4px; padding: 0 4px; margin-right: 2px; text-shadow: none; }
.pg-teams { display: grid; gap: 12px; }
/* many posts at once (20 Oct 2026, page/page.js bulkSheet): Select, ticks on the tiles, a bar at the bottom of the screen */
.pg-select-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pg-select-row .btn { min-height: 44px; }
.pg-tick { display: none; position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff;
  background: rgba(0, 0, 0, .35); box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.pg-grid.selecting .pg-tick { display: block; }
.pg-grid.selecting .pg-tile-kind { display: none; }
.pg-tile.picked { outline: 3px solid var(--turf); outline-offset: -3px; }
.pg-tile.picked img, .pg-tile.picked video { opacity: .75; }
.pg-tile.picked .pg-tick { background: var(--turf); border-color: var(--turf); }
.pg-tile.picked .pg-tick::after { content: "✓"; display: block; text-align: center; font: 700 15px/20px var(--body); color: var(--turf-ink); }
.pg-bulkbar { position: sticky; bottom: 0; z-index: 20; display: grid; gap: 8px; margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(0, 0, 0, .45); }
.pg-bulkbar[hidden] { display: none; }
.pg-bulkbar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pg-bulkbar-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.pg-bulkbar-acts .btn { min-height: 44px; padding: 6px 4px; font-size: .86rem; white-space: nowrap; }
.pg-bulk-choices { display: grid; gap: 8px; }
.pg-bulk-choice { display: grid; gap: 2px; text-align: left; padding: 12px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--sunken); color: var(--ink); }
.pg-bulk-choice[aria-checked="true"] { border-color: var(--turf); box-shadow: 0 0 0 2px var(--turf-soft); }
.pg-bulk-summary { font: 700 1.25rem/1.25 var(--display); }
.pg-newvideos { display: grid; gap: 6px; }
.stats-table { overflow-x: auto; }
.stats-table table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stats-table th { color: var(--muted); font-size: .8rem; font-weight: 600; }

/* team juggling tables (tables/tables.js): the week, filters that wrap on a phone, the family's own team lifted */
.tables-week { display: flex; gap: 8px; margin: 4px 0 14px; }
.tables-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 14px 0; }
.tables-table td.num, .tables-table th.num { text-align: right; }
.tables-table td { vertical-align: top; }
.tables-sub { display: block; white-space: normal; }
.tables-table tr.tables-mine td { background: var(--turf-soft); }
.tables-card h2 { margin: 2px 0 6px; }
.tables-players { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.tables-players li span { float: right; font-variant-numeric: tabular-nums; }
.tables-table th, .tables-table td { padding: 8px 6px; }
.tables-table td:nth-child(2) { white-space: normal; width: 100%; }

/* the team feed (feed/feed.js) */
.feed-list { display: grid; gap: 14px; margin-top: 12px; }
.feed-card { display: grid; gap: 10px; }
.feed-who { display: flex; align-items: center; gap: 10px; }
.feed-who a { color: var(--ink); text-decoration: none; }
.feed-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.feed-initial { display: grid; place-items: center; background: var(--turf-soft); color: var(--turf); font-weight: 700; }
.feed-video { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.feed-line { margin: 0; }
.feed-challenge, .feed-table { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.feed-challenge { grid-template-columns: 72px 1fr; align-items: center; gap: 12px; }
.feed-challenge img, .feed-trophy { width: 72px; height: 96px; object-fit: cover; border-radius: 10px; }
.feed-trophy { display: grid; place-items: center; font-size: 2rem; background: var(--sunken); }
.feed-challenge-text { display: grid; gap: 2px; }
.feed-reactions { display: flex; flex-wrap: wrap; gap: 8px; }
.feed-react { background: var(--sunken); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .95rem; cursor: pointer; }
.feed-react.on { border-color: var(--turf); background: var(--turf-soft); }

/* the AI check's one-time question (shared/aicheck.js, 21 Oct 2026): a small dialog over any page, phone width first */
dialog.aicheck { color: var(--ink); max-width: min(420px, calc(100vw - 32px)); margin: auto; box-sizing: border-box; }
dialog.aicheck::backdrop { background: rgba(0, 0, 0, .6); }
dialog.aicheck h2 { margin: 0; font-size: 1.15rem; }
dialog.aicheck p { margin: 0; }