:root {
  color-scheme:dark;
  font-family:system-ui,-apple-system,sans-serif;
  font-size:13px;
  color:#e5edf4;
  background:#101826;
  --muted:#96aabd;
  --line:#2f4052;
  --accent:#80d4b0
}

* {
  box-sizing:border-box
}
body {
  margin:0
}
main {
  padding:24px;
  max-width:1600px;
  margin:auto
}
header {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:20px
}
h1 {
  font-size:24px;
  margin:5px 0;
  font-weight:600;
  letter-spacing:-.6px
}
h1 span {
  font-size:11px;
  color:var(--muted);
  margin-left:12px;
  font-weight:400;
  letter-spacing:0
}
.eyebrow {
  font-size:9px;
  color:var(--accent);
  letter-spacing:2px;
  margin:0
}
a {
  color:#9fb8d0;
  text-decoration:none;
  font-size:11px
}
button,input[type=text],select,.file-button {
  background:#25384c;
  color:#e1eaf5;
  border:1px solid #42566d;
  border-radius:5px;
  padding:7px 10px;
  font:inherit;
  font-size:12px;
  cursor:pointer
}
button:hover:enabled,.file-button:hover {
  background:#354d64
}
button:disabled {
  cursor:default
}
button,.file-button,summary {
  touch-action:manipulation
}
button.primary {
  background:#82d5b2;
  border-color:#82d5b2;
  color:#10291e;
  font-weight:650;
  min-width:92px
}
button.primary:hover:enabled {
  background:#a0e5c9
}
fieldset {
  border:0;
  padding:0;
  margin:0;
  min-width:0
}
fieldset:disabled {
  opacity:.45
}
label {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px
}
input[type=range],input[type=checkbox] {
  accent-color:var(--accent)
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid #93e2bb;
  outline-offset:3px
}
#file,.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  clip-path:inset(50%);
  overflow:hidden
}
body:has(#file:focus-visible) .file-button {
  outline:2px solid var(--accent);
  outline-offset:3px
}

#player {
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:#192536
}
.player-heading {
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid var(--line)
}
.file-tools {
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0
}
#replay-name {
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  max-width:400px
}
.file-button {
  white-space:nowrap
}
.scoreboard {
  display:flex;
  align-items:center;
  gap:12px;
  font-variant-numeric:tabular-nums;
  font-size:11px;
  white-space:nowrap
}
.team {
  display:flex;
  gap:12px;
  align-items:center
}
.team b {
  font-size:19px;
  color:#f0f5fa
}
.red {
  color:#f49082
}
.blue {
  color:#89b4ff
}
.score-divider {
  color:#5f7287
}
.scoreboard output {
  margin-left:8px;
  padding-left:20px;
  border-left:1px solid var(--line);
  font-size:15px;
  font-weight:600;
  color:#e9eff7
}

#native-container {
  position:relative;
  width:100%;
  height:clamp(350px,calc(var(--viewer-height,100dvh) - 340px),820px);
  min-height:0;
  background:#2e343c;
  overflow:hidden
}
#native {
  width:100%;
  height:100%;
  border:0;
  display:block
}
#empty {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:radial-gradient(ellipse at 50% 45%,#22384a,#172331 65%);
  padding:24px
}
#empty[hidden],[hidden] {
  display:none!important
}
.empty-mark {
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid #476959;
  border-radius:50%;
  color:var(--accent);
  background:#233e38;
  padding-left:3px;
  font-size:20px;
  margin-bottom:12px
}
#empty h2 {
  font-size:22px;
  letter-spacing:-.6px;
  font-weight:500;
  margin:12px 0
}
#empty p {
  color:#a1b5c7;
  line-height:1.8;
  font-size:13px;
  margin:0
}
.local-note {
  font-size:10px;
  color:#748e9f;
  margin-top:24px
}
#no-game {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:10px 16px;
  border-radius:5px;
  background:#16222ee6;
  color:#adc0ce;
  pointer-events:none;
  text-align:center
}

#controls {
  padding:12px 16px 0
}
.timeline-row {
  display:flex;
  align-items:center;
  gap:16px
}
.timeline {
  position:relative;
  flex:1;
  min-width:0;
  height:28px;
  display:flex;
  align-items:center
}
.seek-track {
  position:absolute;
  left:0;
  right:0;
  height:5px;
  background:#334457;
  border-radius:4px;
  pointer-events:none
}
#seek-cache,#seek-played {
  position:absolute;
  height:100%;
  left:0;
  top:0;
  border-radius:4px;
  width:0
}
#seek-cache {
  background:#477b66
}
#seek-played {
  background:#94e3c1
}
#markers {
  position:absolute;
  inset:0
}
#markers span {
  position:absolute;
  width:2px;
  height:9px;
  top:-2px;
  background:#a8b3bf
}
#markers .goal-red {
  background:#f29484
}
#markers .goal-blue {
  background:#8ab6ff
}
#seek {
  position:absolute;
  inset:0;
  width:100%;
  height:28px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer
}
#seek::-webkit-slider-runnable-track {
  background:transparent;
  height:5px
}
#seek::-moz-range-track {
  background:transparent;
  height:5px
}
#seek::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:13px;
  height:13px;
  border:2px solid #192536;
  border-radius:50%;
  background:#a9efd0;
  margin-top:-4px;
  box-shadow:0 0 0 1px #79c9a4
}
#seek::-moz-range-thumb {
  width:10px;
  height:10px;
  border:2px solid #192536;
  border-radius:50%;
  background:#a9efd0
}
#seek-preview {
  position:absolute;
  bottom:30px;
  background:#0c1521;
  padding:5px 9px;
  border:1px solid #456076;
  border-radius:4px;
  font-size:11px;
  transform:translateX(-50%);
  pointer-events:none
}
#time {
  font-variant-numeric:tabular-nums;
  font-size:11px;
  color:#c0d0df;
  white-space:nowrap;
  min-width:95px;
  text-align:right
}
.transport {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:8px 0 16px
}
.transport-group {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap
}
.speed-label select {
  min-width:62px
}
#restart {
  font-size:18px;
  padding:3px 10px
}
#mute[aria-pressed=true] {
  color:#f3bd91
}
.review-tools {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  border-top:1px solid var(--line);
  padding:12px 0
}
.review-tools button {
  padding:4px 8px;
  font-size:11px
}
.review-tools label {
  font-size:11px;
  color:#b6c7d6
}
.tool-label {
  font-size:9px;
  letter-spacing:1px;
  color:#8099ad;
  margin-right:2px
}
#jump {
  width:61px;
  padding:4px 7px;
  cursor:text;
  font-variant-numeric:tabular-nums
}
#extrapolation {
  width:105px
}
#ext-value {
  width:42px;
  font-variant-numeric:tabular-nums;
  color:var(--accent)
}

.cache {
  margin-top:8px
}
progress {
  width:100%;
  height:2px;
  display:block;
  appearance:none;
  border:0;
  background:#283849
}
progress::-webkit-progress-bar {
  background:#283849
}
progress::-webkit-progress-value {
  background:#538c72
}
progress::-moz-progress-bar {
  background:#538c72
}
.cache>div {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  font-size:10px;
  color:#8da4b9
}
.cache p {
  flex:1;
  min-width:150px;
  margin:9px 0
}
#frame,#cache-size {
  font-size:10px;
  font-variant-numeric:tabular-nums
}
#error,#action-status {
  padding:10px 12px;
  border-radius:4px;
  margin:8px 0;
  font-size:12px
}
#error {
  background:#492b35;
  color:#ffc4c4
}
#action-status {
  background:#20394c;
  color:#b9def5
}
#chat-panel {
  border:1px solid var(--line);
  border-radius:7px;
  margin-top:10px;
  background:#15202f
}
summary {
  cursor:pointer;
  padding:12px 15px;
  font-size:12px;
  color:#c2d2e0
}
summary span {
  font-size:10px;
  color:#8097ac;
  margin-left:10px
}
#chat-log {
  max-height:220px;
  overflow:auto;
  border-top:1px solid var(--line);
  padding:8px 15px;
  font-size:12px;
  line-height:1.6;
  overflow-wrap:anywhere
}
#chat-log p {
  margin:3px 0;
  white-space:pre-wrap
}
.chat-empty {
  color:#7e95aa
}
footer {
  font-size:9px;
  color:#7890a6;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px;
  margin-top:16px
}
body.dragging {
  outline:3px dashed #84d6b0;
  outline-offset:-5px
}

dialog {
  background:#192536;
  border:1px solid #4a6074;
  border-radius:12px;
  color:#e1ebf5;
  padding:24px;
  width:min(660px,calc(100vw - 28px));
  max-height:calc(100dvh - 40px);
  overflow:auto;
  box-shadow:0 24px 100px #0008
}
dialog::backdrop {
  background:#07111ac4;
  backdrop-filter:blur(3px)
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.dialog-heading h2 {
  font-size:23px;
  margin:7px 0 0;
  letter-spacing:-.5px;
  font-weight:550
}
.dialog-heading button {
  border:0;
  background:#283b4e;
  font-size:16px;
  padding:6px 11px
}
.settings-note {
  font-size:11px;
  color:var(--muted);
  margin:14px 0 22px
}
.settings-columns {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:30px
}
.settings-columns h3 {
  font-size:12px;
  font-weight:600;
  margin:0 0 14px;
  color:#d1dfec
}
.settings-columns label {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:11px 0;
  font-size:12px
}
.settings-columns select {
  max-width:175px;
  font-size:11px;
  padding:6px
}
.settings-columns label.check {
  justify-content:flex-start;
  gap:8px;
  margin:14px 0;
  color:#b9cbd9
}
.check input {
  width:15px;
  height:15px;
  margin:0
}
.shortcuts-title {
  margin-top:30px!important
}
.shortcuts {
  font-size:10px;
  color:#c2d2df;
  line-height:2.3
}
.shortcuts span {
  color:#819bae;
  margin-left:10px
}

#player:fullscreen,#player.expanded {
  border:0;
  border-radius:0;
  width:100%;
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:#101826
}
#player:fullscreen #native-container,#player.expanded #native-container {
  height:auto;
  flex:1;
  min-height:0
}
#player:fullscreen .review-tools,#player.expanded .review-tools {
  padding-bottom:10px
}
html.player-expanded,body.player-expanded {
  overflow:hidden
}
#player.expanded {
  position:fixed;
  inset:0;
  z-index:10000
}

@media(max-width:750px) {
  main {
    padding:12px
  }
  .player-heading {
    padding:10px;
    gap:10px;
    flex-wrap:wrap
  }
  .scoreboard {
    margin-left:auto
  }
  #replay-name {
    max-width:170px
  }
  #native-container {
    height:clamp(290px,calc(var(--viewer-height,100dvh) * .5),500px)
  }
  #controls {
    padding:9px 10px 0
  }
  .transport {
    flex-wrap:wrap;
    gap:10px
  }
  .transport-group {
    gap:6px
  }
  button,input[type=text],select,.file-button {
    font-size:11px;
    padding:7px 8px
  }
  .review-tools {
    gap:10px
  }
  .timeline-row {
    gap:10px
  }
  #time {
    min-width:80px;
    font-size:10px
  }
  h1 {
    font-size:21px
  }
  h1 span {
    display:block;
    margin:6px 0 0
  }
  header a {
    font-size:10px
  }
  #fullscreen span {
    display:none
  }
  .settings-columns {
    grid-template-columns:1fr;
    gap:20px
  }
  dialog {
    padding:18px
  }
  .settings-columns select {
    max-width:60%
  }
  .shortcuts-title,.shortcuts {
    display:none
  }
  .scoreboard {
    font-size:10px;
    gap:8px
  }
  .team {
    gap:8px
  }
  .scoreboard output {
    font-size:13px;
    padding-left:12px
  }
  #empty h2 {
    font-size:18px
  }
  summary span {
    display:block;
    margin:5px 0 0 14px
  }
}

@media(prefers-reduced-motion:no-preference) {
  button {
    transition:background .12s
  }
}

/* Review workspace and overlays share the existing player palette. */
#native-container { isolation:isolate }
#drawing-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2 }
#drawing-canvas.drawing { pointer-events:auto; cursor:crosshair; touch-action:none }
#drawing-tools { position:absolute; z-index:3; bottom:12px; left:12px; right:12px; width:fit-content; max-width:calc(100% - 24px); padding:10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:#13212ff2; border:1px solid #6e8d89; border-radius:8px; box-shadow:0 5px 25px #0005 }
#drawing-tools label { font-size:10px }
#drawing-tools input[type=color] { width:30px; height:30px; padding:1px; background:transparent; border:0; cursor:pointer }
#draw-duration { width:48px; padding:5px; border:1px solid #42566d; border-radius:4px; background:#25384c; color:inherit }
#draw-text { width:150px }
#annotate[aria-pressed=true] { background:#634c23; border-color:#ffda75 }
#clip-window { position:absolute; top:-5px; height:15px; border:1px solid #f7cb74; background:#c7952522; border-radius:2px; pointer-events:none }
#drawing-markers { position:absolute; inset:0; pointer-events:none }
#drawing-markers span { position:absolute; top:11px; height:2px; opacity:.8 }
#seek-preview { width:192px; max-width:100%; bottom:32px; top:auto; padding:5px; border:1px solid #637e8b; border-radius:7px; background:#111d2b; z-index:8; text-align:center; box-shadow:0 6px 20px #0008; white-space:normal }
#preview-canvas { display:block; width:100%; height:auto; border-radius:3px; background:#2e343b }
#preview-time { display:block; margin-top:5px; font-variant-numeric:tabular-nums }
#preview-loading { position:absolute; left:5px; right:5px; top:35%; color:#b7c9d9; font-size:10px }
#workspace { border:1px solid var(--line); background:#152231; border-radius:9px; margin:18px 0 12px; min-width:0; overflow:hidden }
.workspace-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); padding:6px 8px; background:#121d2b }
.workspace-tabs button { border:0; background:transparent; padding:10px 14px; border-radius:4px; color:#9fb5c8 }
.workspace-tabs button[aria-selected=true] { background:#254039; color:#a7eacc }
[role=tabpanel] { padding:20px; min-width:0 }
.panel-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; flex-wrap:wrap; margin-bottom:16px }
.panel-heading h2 { margin:0 0 6px; font-size:18px; letter-spacing:-.3px; font-weight:550 }
.panel-heading p { margin:0; color:#9bb1c4; font-size:12px; line-height:1.6 }
#clip-length { color:#ffda75; font-size:11px; font-variant-numeric:tabular-nums }
.clip-points,.export-options,.project-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px }
.clip-points { padding-bottom:18px; border-bottom:1px solid var(--line) }
.clip-points input { width:96px; font-variant-numeric:tabular-nums }
.export-options { padding-top:18px }
.panel-note { color:#8fa6ba; font-size:11px; line-height:1.7; margin:12px 0 0 }
#export-job { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:15px; color:#a9d5c2 }
#export-job progress { flex:1; min-width:120px; height:5px }
#export-status { font-size:11px }
#downloads { margin-top:12px }
.workspace-output { padding:0 20px 14px }
.download-item { margin-top:8px }
.download-link { display:inline-block; padding:9px 12px; border:1px solid #4c7766; border-radius:5px; color:#a7eacc; background:#203c32; font-size:12px }
#video-preview { display:block; width:100%; max-width:720px; max-height:360px; margin-top:12px; background:#0a111b; border-radius:6px }
#load-analysis { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden }
#drawing-count { color:#ffda75; font-size:12px }
.team-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0 }
.game-selection,.keeper-selection { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:14px 0 }
#game-status { color:#c6b58f; font-size:11px }
.game-selection label,.keeper-selection label,.heatmap-heading label { min-width:0; max-width:100% }
#stats-game,#keeper-red,#keeper-blue,#heatmap-subject { max-width:100%; min-width:0 }
#keeper-red,#keeper-blue,#heatmap-subject { width:160px }
.team-stat { border:1px solid var(--line); padding:14px; border-radius:6px; background:#1a2a3b }
.team-stat h3 { margin:0 0 8px; font-size:12px; font-weight:500 }
.team-stat strong { font-size:22px; font-weight:550; letter-spacing:-.5px; color:#e5edf4 }
.team-stat p { color:#9eb4c6; font-size:11px; line-height:1.6; margin:8px 0 0 }
.team-stat.red { border-top:2px solid #d67f73; color:#efac9f }
.team-stat.blue { border-top:2px solid #79a8df; color:#a6c5f2 }
.stats-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr); gap:20px; margin:20px 0 }
.heatmap-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:10px }
.stats-layout h3 { font-size:13px; font-weight:550; margin:0 }
#heatmap { width:100%; display:block; border-radius:6px }
.stats-scroll { overflow:auto; max-width:100%; margin-top:20px; border:1px solid var(--line); border-radius:5px }
#player-stats { border-collapse:collapse; width:100%; white-space:nowrap; text-align:right; font-size:11px; font-variant-numeric:tabular-nums }
#player-stats th,#player-stats td { padding:12px; border-bottom:1px solid #2f405288 }
#player-stats th { font-weight:500; background:#1c2f41; color:#9cb9ca }
#player-stats th:first-child,#player-stats td:first-child { text-align:left; max-width:160px; overflow:hidden; text-overflow:ellipsis }
.goal-events { max-height:400px; overflow:auto }
.goal-events h3 { margin-bottom:14px }
.goal-moment { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:10px 0 }
.goal-moment span { color:#9eb4c6; font-size:11px; overflow-wrap:anywhere }
#camera-note { font-size:10px; line-height:1.6; color:#ffda75 }
@media(max-width:750px) {
  [role=tabpanel] { padding:14px }
  .workspace-tabs { padding:5px }
  .workspace-tabs button { padding:10px 9px; font-size:11px }
  .clip-points { gap:8px }
  .clip-points label { min-width:calc(50% - 10px) }
  .team-stats { grid-template-columns:1fr }
  .stats-layout { grid-template-columns:minmax(0,1fr) }
  #drawing-tools { bottom:6px; left:6px; right:6px; max-width:calc(100% - 12px); padding:7px; gap:6px }
  #draw-text { width:130px }
  #draw-duration { width:40px }
  .team-stat strong { font-size:20px }
}

.player-tracking { margin-top:20px; padding-top:16px; border-top:1px solid var(--line) }
.tracking-players { display:flex; flex-wrap:wrap; gap:8px 16px; margin:12px 0 }
.tracking-players label { display:flex; align-items:center; gap:6px; font-size:12px }
.player-tracking input[type=number] { width:65px }
.player-tracking input[type=color] { width:42px; height:30px; padding:2px }

#drawing-canvas.moving { cursor:grab }
#drawing-canvas.moving:active { cursor:grabbing }
#pose-note { position:absolute; z-index:3; top:8px; left:12px; right:12px; width:fit-content; max-width:calc(100% - 24px); margin:0; padding:7px 10px; border-radius:5px; background:#152231e8; color:#ffe1a1; font-size:11px; pointer-events:none }
#start-moving[aria-pressed=true] { background:#634c23; border-color:#ffda75 }