:root[data-presentation="broadcast"] {
  --broadcast-navy: #071521;
  --broadcast-panel: #102637;
  --broadcast-line: #3c6170;
  --broadcast-paper: #fff6e4;
  --broadcast-muted: #c8d9da;
  --broadcast-gold: #f6cd72;
  --broadcast-tide: #86e8d6;
  --broadcast-sun: #ffb09b;
  --broadcast-event-top: calc(var(--safe-top) + 49px);
  --broadcast-event-width: min(376px, calc(100% - var(--safe-left) - var(--safe-right) - 24px));
}

/* One tactical message is visible at a time. Control and score positions stay put. */
:root[data-presentation="broadcast"] .app[data-screen="play"] .scoreboard {
  border-color: #83a6ae8c;
  border-radius: 3px;
  background: linear-gradient(106deg, #163b40 0%, #102532 34%, #102532 65%, #472d35 100%);
  box-shadow: inset 3px 0 var(--broadcast-tide), inset -3px 0 var(--broadcast-sun), 0 5px 14px #0007;
}

:root[data-presentation="broadcast"] .scoreboard .score-value {
  padding: 1px 6px 2px;
  color: var(--broadcast-paper);
  background: #071521a8;
}

:root[data-presentation="broadcast"] .scoreboard:is([data-impact-team="0"], [data-impact-team="1"]) .score-value {
  box-shadow: inset 0 -2px #d9a859;
}

.scoreboard[data-impact-team="0"] #score0,
.scoreboard[data-impact-team="1"] #score1 {
  color: #ffe0a2;
  text-shadow: 0 0 7px #ffbd566b;
}

@media (prefers-reduced-motion: no-preference) {
  .scoreboard[data-impact-team="0"] #score0,
  .scoreboard[data-impact-team="1"] #score1 {
    animation: earned-score-kick 300ms ease-out;
  }
}

@keyframes earned-score-kick {
  24% { transform: scale(1.23); }
  100% { transform: scale(1); }
}

:root[data-presentation="broadcast"] .app:is([data-point], [data-replay]):not([data-tutorial]) .scoreboard {
  border-radius: 4px 4px 0 0;
  border-bottom-color: transparent;
  box-shadow: inset 3px 0 var(--broadcast-tide), inset -3px 0 var(--broadcast-sun);
}

:root[data-presentation="broadcast"] .app[data-screen="play"] #pause {
  border-color: #a9c8c98c;
  background: #071521ef;
}

:root[data-presentation="broadcast"] .app[data-screen="play"] :is(#duty-label, #control-hint, #callout) {
  top: calc(var(--safe-top) + 57px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(460px, calc(100% - var(--safe-left) - var(--safe-right) - 28px));
  padding: 4px 10px;
  border: 1px solid #9db8bd4d;
  border-left: 3px solid var(--broadcast-tide);
  border-radius: 3px;
  background: #071521ed;
  color: var(--broadcast-paper);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
}

:root[data-presentation="broadcast"] .app[data-screen="play"] #control-hint { border-left-color: var(--broadcast-gold); }
:root[data-presentation="broadcast"] .app[data-screen="play"] #callout {
  border-left-color: var(--broadcast-gold);
  color: var(--broadcast-gold);
}
:root[data-presentation="broadcast"] .app[data-control-hint] #duty-label,
:root[data-presentation="broadcast"] .app:has(#callout:not(:empty)) :is(#control-hint, #duty-label) { display: none; }

:root[data-presentation="broadcast"] .controls .circle-actions button:not(:disabled):not([data-standby]) {
  color: var(--broadcast-paper);
  border-color: #a0d5d2;
  box-shadow: 0 3px 10px #03101aa8, inset 0 0 0 1px #d9faf233;
}
:root[data-presentation="broadcast"] .controls .circle-actions button[data-slot="primary"]:not(:disabled) {
  background: radial-gradient(ellipse at 50% 15%, #315d63, #143641 80%);
  border-color: var(--broadcast-tide);
}
:root[data-presentation="broadcast"] .app:not([data-tutorial]) .controls[data-layout="serve"] .circle-actions :is(#toss, [data-gesture="attack"]):not(:disabled) {
  color: var(--broadcast-navy);
  border-color: #ffe4a7;
  background: linear-gradient(145deg, #ffe5a8, var(--broadcast-gold));
}
:root[data-presentation="broadcast"] .app:not([data-tutorial]) .controls[data-layout="serve"] .circle-actions :is(#toss, [data-gesture="attack"]):is([data-down], :active):not(:disabled) {
  box-shadow: inset 0 0 0 3px #69471e73, 0 3px 8px #041520a8;
}
:root[data-presentation="broadcast"] .controls .circle-actions button[data-standby] {
  color: #bdd1d3;
  border-color: #7ca4ad91;
}

:root[data-presentation="broadcast"] #drill-badge {
  border: 1px solid #91b6c393;
  border-left: 3px solid var(--broadcast-tide);
  border-radius: 3px;
  background: var(--broadcast-navy);
  font-weight: 800;
}
:root[data-presentation="broadcast"] .app[data-drill-wait] :is(#duty-label, #callout) { display: none; }
:root[data-presentation="broadcast"] #drill-overlay .drill-card {
  bottom: calc(var(--safe-bottom) + 9px);
  padding: 8px 12px;
  border: 1px solid #80a2ac83;
  border-left: 3px solid var(--broadcast-tide);
  border-radius: 4px 8px 8px 4px;
  background: linear-gradient(110deg, #102b3bee, #071521f9 75%);
  box-shadow: 0 5px 16px #0006;
}
:root[data-presentation="broadcast"] #drill-overlay[data-state="ready"] #drill-progress { display: none; }
:root[data-presentation="broadcast"] #drill-overlay .drill-card h2 { margin: 1px 0 2px; font-size: 16px; }
:root[data-presentation="broadcast"] #drill-overlay .drill-card p { margin: 0 0 6px; font-size: 12px; line-height: 1.35; }
.drill-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 7px;
}
.drill-stats > div {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 3px 2px 4px;
  border: 1px solid #577784;
  border-radius: 4px 4px 7px 4px;
  background: #172e3a;
}
.drill-stats dt {
  color: #c1d9de;
  font: 650 var(--type-meta, 11px)/1.16 var(--volley-ui, system-ui, sans-serif);
  text-align: center;
}
.drill-stats dd {
  margin: 0;
  color: #fff2dd;
  font: 700 18px/1 var(--volley-numeral, "Barlow Condensed", sans-serif);
  font-variant-numeric: tabular-nums;
}
.drill-stats > div:last-child { border-color: #a4895d; }
.drill-stats > div:last-child dd { color: #ffcf83; }
:root[data-presentation="broadcast"] #drill-overlay .drill-actions { gap: 5px; }
:root[data-presentation="broadcast"] #drill-overlay .drill-actions button { min-height: 44px; }

/* Keep the fixed scoreboard. The point strip only describes the point. */
:root[data-presentation="broadcast"] #point-overlay .point-card {
  top: var(--broadcast-event-top);
  width: var(--broadcast-event-width);
  padding: 7px 10px 8px;
  border: 1px solid #96b6c37a;
  border-top: 2px solid var(--point-color);
  border-radius: 5px 5px 10px 10px;
  background: linear-gradient(105deg, #153a42fa, #071521f7 66%);
  box-shadow: 0 4px 12px #0006;
}
:root[data-presentation="broadcast"] #point-overlay[data-team="1"] .point-card {
  background: linear-gradient(105deg, #4c3038fa, #071521f7 66%);
}
:root[data-presentation="broadcast"] #point-overlay .point-heading {
  display: flex;
  position: absolute;
  right: 10px;
  top: 7px;
  gap: 5px;
}
:root[data-presentation="broadcast"] #point-overlay :is(.point-kicker, .point-score) { display: none; }
:root[data-presentation="broadcast"] #point-overlay .point-plus {
  padding: 0 4px;
  font: 700 20px/1 "Barlow Condensed", "Arial Narrow", sans-serif;
}
:root[data-presentation="broadcast"] #point-overlay #point-team {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 36px 3px 0;
  font-size: 18px;
}
:root[data-presentation="broadcast"] #point-overlay #point-team::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: var(--point-mark) center / contain no-repeat;
  mask: var(--point-mark) center / contain no-repeat;
}
:root[data-presentation="broadcast"] #point-overlay .point-decision {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  padding: 0;
}
:root[data-presentation="broadcast"] #point-overlay #point-reason { font-size: 13px; }
:root[data-presentation="broadcast"] #point-overlay #point-detail { font-size: 12px; line-height: 1.35; }
:root[data-presentation="broadcast"] #point-overlay .point-feedback { margin-top: 2px; }
:root[data-presentation="broadcast"] #point-overlay .point-dock {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 12px);
  width: var(--broadcast-event-width);
  transform: translateX(-50%);
  padding: 6px;
  border: 1px solid var(--broadcast-line);
  border-radius: 11px;
  background: #071521f2;
  box-shadow: 0 4px 14px #0007;
}
:root[data-presentation="broadcast"] #point-overlay .point-actions { margin: 0; gap: 6px; }
:root[data-presentation="broadcast"] #point-overlay .point-actions button {
  min-height: 48px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 750;
}
:root[data-presentation="broadcast"] #point-overlay .point-next {
  margin: 0 0 5px;
  color: var(--broadcast-muted);
  font-size: 12px;
  text-align: center;
  letter-spacing: normal;
}
:root[data-presentation="broadcast"] #point-overlay[data-auto-replay] #point-watch {
  color: var(--broadcast-navy);
  background: var(--broadcast-gold);
  border-color: var(--broadcast-gold);
}
:root[data-presentation="broadcast"] #point-overlay[data-auto-replay] #point-next {
  color: var(--broadcast-paper);
  background: var(--broadcast-panel);
  border-color: var(--broadcast-line);
}
:root[data-presentation="broadcast"] #referee-inset {
  left: calc(var(--safe-left) + 12px);
  right: auto;
  bottom: calc(var(--safe-bottom) + 97px);
  width: clamp(84px, 25vw, 112px);
  border-color: #a1bfc6;
  border-radius: 7px;
}

/* Event context carries through to the replay without a second score. */
:root[data-presentation="broadcast"] #replay-overlay {
  --replay-accent: var(--broadcast-tide);
  background: linear-gradient(0deg, #06131db0, transparent 23%);
}
:root[data-presentation="broadcast"] #replay-overlay[data-team="1"] { --replay-accent: var(--broadcast-sun); }
:root[data-presentation="broadcast"] #replay-overlay .replay-rail {
  position: absolute;
  top: var(--broadcast-event-top);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: var(--broadcast-event-width);
  padding: 6px 9px;
  border: 1px solid #96b6c37a;
  border-top: 2px solid var(--replay-accent);
  border-radius: 5px 5px 10px 10px;
  background: var(--broadcast-navy);
  box-shadow: 0 4px 12px #0006;
}
:root[data-presentation="broadcast"] .app[data-tutorial] #replay-overlay .replay-rail {
  top: calc(var(--safe-top) + 12px);
}
:root[data-presentation="broadcast"] #replay-overlay .replay-badge {
  position: static;
  transform: none;
  gap: 6px;
  padding: 0;
  border: 0;
  color: var(--replay-accent);
  background: none;
  box-shadow: none;
  font-size: 13px;
  letter-spacing: normal;
}
:root[data-presentation="broadcast"] #replay-overlay .replay-badge i { width: 5px; height: 5px; background: currentColor; }
#replay-float:not([hidden]) {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #7dd6db7a;
  border-radius: 4px;
  background: #17414c;
  color: #c4fff4;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
#replay-overlay .replay-rail:has(#replay-float:not([hidden])) #replay-reason { display: none; }

#replay-progress {
  position: absolute;
  inset-inline: 7px;
  inset-block-end: 1px;
  height: 2px;
  border-radius: 2px;
  background: var(--replay-accent);
  opacity: .74;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
}

:root[data-presentation="broadcast"] #replay-reason {
  min-width: 0;
  padding-left: 8px;
  border-left: 1px solid var(--broadcast-line);
  color: var(--broadcast-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
:root[data-presentation="broadcast"] #replay-skip {
  left: auto;
  right: calc(var(--safe-right) + 12px);
  bottom: calc(var(--safe-bottom) + 12px);
  transform: none;
  min-width: 108px;
  min-height: 48px;
  padding: 5px 10px;
  border-radius: 7px;
  border-color: #a7c1c7;
  background: var(--broadcast-navy);
  color: var(--broadcast-paper);
  font-size: 13px;
  box-shadow: 0 4px 12px #0007;
}
:root[data-presentation="broadcast"] #replay-skip b { margin-left: 7px; }

@media (orientation: portrait) and (pointer: coarse) {
  :root[data-presentation="broadcast"] #tutorial-title:focus { outline: none; }
  :root[data-presentation="broadcast"] .app[data-tutorial] #tutorial-panel[data-aim-guide] #tutorial-hint {
    min-block-size: 2.72em;
  }
  :root[data-presentation="broadcast"] .app[data-tutorial] #tutorial-panel[data-touch-aim] #tutorial-hint {
    color: var(--broadcast-muted);
    font-weight: 600;
  }
}

/* Winner crest and large split-team score are the focal point of full time. */
:root[data-presentation="broadcast"] body:has(#dialog[open][data-panel="result"]) :is(#scoreboard, #pause, #controls) {
  visibility: hidden;
}

@media (max-height: 440px) and (orientation: landscape) {
  :root[data-presentation="broadcast"] #drill-overlay .drill-card {
    left: auto;
    right: calc(var(--safe-right) + 10px);
    width: min(330px, 49%);
  }
}

@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) {
  :root[data-presentation="broadcast"] {
    --broadcast-event-top: calc(var(--safe-top) + 55px);
  }

  :root[data-presentation="broadcast"] .app[data-screen="play"] .scoreboard {
    border-color: #6e8d9a99;
    border-radius: 7px;
    background: linear-gradient(90deg, #15353e 0%, #101f2c 33% 67%, #392832 100%);
    box-shadow: inset 2px 0 var(--broadcast-tide), inset -2px 0 var(--broadcast-sun), 0 5px 12px #020911a8;
  }

  :root[data-presentation="broadcast"] .app:is([data-point], [data-replay]):not([data-tutorial]) .scoreboard {
    border-radius: 7px 7px 2px 2px;
  }

  :root[data-presentation="broadcast"] .scoreboard .score-value {
    border-radius: 3px;
    background: #07131ee8;
    box-shadow: inset 0 0 0 1px #607e8a38;
  }

  :root[data-presentation="broadcast"] .scoreboard:is([data-impact-team="0"], [data-impact-team="1"]) .score-value {
    box-shadow: inset 0 0 0 1px #607e8a38, inset 0 -2px #d9a859;
  }

  :root[data-presentation="broadcast"] .app[data-screen="play"] :is(#duty-label, #control-hint, #callout) {
    border-color: #6384919c;
    border-left-color: var(--broadcast-tide);
    border-radius: 4px;
    background: linear-gradient(105deg, #142c38f7, #0a1825f7 65%);
    box-shadow: 0 3px 8px #020b1366;
  }

  :root[data-presentation="broadcast"] .app[data-screen="play"] :is(#control-hint, #callout) {
    border-left-color: var(--broadcast-gold);
  }

  /* Match cues share the point and replay anchor while keeping a compact footprint. */
  :root[data-presentation="broadcast"] .app[data-screen="play"]:not([data-tutorial], [data-drill]) :is(#duty-label, #control-hint, #callout) {
    --live-rail-accent: var(--broadcast-tide);
    top: var(--broadcast-event-top);
    max-width: calc(100% - 132px - max(var(--safe-left), var(--safe-right)) * 2);
    border-radius: 5px 5px 8px 8px;
    border-left-width: 1px;
    border-left-color: #638491b3;
    border-top: 2px solid var(--live-rail-accent);
    background: linear-gradient(110deg, #142c38fa, #0a1926fa 68%);
  }

  :root[data-presentation="broadcast"] .app[data-screen="play"]:not([data-tutorial], [data-drill]) :is(#control-hint, #callout:not([data-tone])) {
    --live-rail-accent: var(--broadcast-gold);
  }

  :root[data-presentation="broadcast"] .app[data-screen="play"]:not([data-tutorial], [data-drill]) #callout[data-tone="miss"] {
    --live-rail-accent: var(--broadcast-sun);
  }

  :root[data-presentation="broadcast"] .app:not([data-tutorial]) #controls .circle-actions button:not(:disabled) {
    background-image: linear-gradient(160deg, #effffc25, transparent 63%);
    box-shadow: inset 0 0 0 1px #e6fffe19, 0 3px 8px #030a139c;
  }

  :root[data-presentation="broadcast"] .app:not([data-tutorial]) #controls .circle-actions button:is([data-slot="mode"], [data-slot="quick"], [data-slot="call"]):not(:disabled) {
    --cov-action-bg: #132b37;
    --cov-action-rim: #7896a3;
    background-image: none;
  }

  :root[data-presentation="broadcast"] .app:not([data-tutorial]) #controls .circle-actions button[data-standby] {
    border-color: #577480;
    background: #0d222cf2;
    box-shadow: none;
  }

  :root[data-presentation="broadcast"] .app:not([data-tutorial]) #controls .circle-actions button:is([data-down], :active):not(:disabled) {
    background-image: linear-gradient(160deg, #02091045, transparent 74%);
    box-shadow: inset 0 0 0 2px #f2fffb72, inset 0 2px 8px #030a1366;
  }

  :root[data-presentation="broadcast"] #point-overlay .point-card {
    border-right-color: #6d909db3;
    border-bottom-color: #6d909db3;
    border-left-color: #6d909db3;
    border-radius: 5px 5px 8px 8px;
    box-shadow: 0 5px 12px #020b139c;
  }

  :root[data-presentation="broadcast"] #point-overlay #point-reason {
    padding-inline: 4px;
    border-radius: 3px;
    color: var(--broadcast-paper);
    background: #071521a6;
    box-shadow: inset 0 0 0 1px #7896a345;
  }

  :root[data-presentation="broadcast"] #point-overlay #point-detail { color: #dce7e6; }

  :root[data-presentation="broadcast"] #point-overlay:is([data-stage="whistle"], [data-stage="side"]) .point-dock {
    visibility: hidden;
  }

  :root[data-presentation="broadcast"] #point-overlay .point-dock {
    border-color: #627e8d;
    border-radius: 8px;
    background: linear-gradient(105deg, #142c38fa, #0a1926fa 66%);
    box-shadow: 0 5px 12px #020b139c;
  }

  :root[data-presentation="broadcast"] #point-overlay .point-actions button {
    box-shadow: inset 0 1px 0 #f5ffff29;
  }

  :root[data-presentation="broadcast"] #replay-overlay .replay-rail {
    border-right-color: #638491b3;
    border-bottom-color: #638491b3;
    border-left-color: #638491b3;
    border-radius: 5px 5px 8px 8px;
    background: linear-gradient(110deg, #142c38fa, #0a1926fa 68%);
    box-shadow: 0 5px 12px #020b139c;
  }

  :root[data-presentation="broadcast"] .app[data-screen="play"]:not([data-tutorial], [data-drill]) #replay-overlay .replay-rail {
    width: var(--broadcast-event-width);
    justify-content: center;
  }

  :root[data-presentation="broadcast"] #replay-overlay .replay-badge i {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 2px #b4dce637;
  }

  :root[data-presentation="broadcast"] #replay-reason { color: #dce7e6; }

  :root[data-presentation="broadcast"] #replay-skip {
    border-color: #7f9ba8;
    background: linear-gradient(120deg, #162d3a, #0a1926);
    box-shadow: inset 0 1px 0 #f5ffff16, 0 4px 10px #020b139c;
  }

  :root[data-presentation="broadcast"] #replay-skip b { color: var(--broadcast-gold); }

  :root[data-presentation="broadcast"] .app[data-screen="play"] #callout[data-tone="solid"] {
    border-left-color: var(--broadcast-tide);
    color: #b1f5e4;
  }

  :root[data-presentation="broadcast"] .app[data-screen="play"] #callout[data-tone="miss"] {
    border-left-color: var(--broadcast-sun);
    color: #ffd0c2;
  }

  :root[data-presentation="broadcast"] #drill-badge {
    border-color: #638491b3;
    border-left-color: var(--broadcast-tide);
    border-radius: 4px;
    background: linear-gradient(105deg, #142c38f7, #0a1926f7 65%);
  }

  :root[data-presentation="broadcast"] .app:has(#drill-overlay[data-state="result"]:not([hidden])) #drill-badge {
    visibility: hidden;
  }

  :root[data-presentation="broadcast"] #drill-overlay { --drill-edge: var(--broadcast-tide); }
  :root[data-presentation="broadcast"] #drill-overlay:is([data-outcome="ready"], [data-outcome="complete"]) {
    --drill-edge: var(--broadcast-gold);
  }
  :root[data-presentation="broadcast"] #drill-overlay[data-outcome="retry"] { --drill-edge: var(--broadcast-sun); }

  :root[data-presentation="broadcast"] #drill-overlay .drill-card {
    border-color: #638491b3;
    border-left-color: var(--drill-edge);
    border-radius: 6px 8px 8px 6px;
    background: linear-gradient(108deg, #152d3cfa, #0a1926fa 67%);
    box-shadow: 0 5px 12px #020b139c;
  }

  :root[data-presentation="broadcast"] #drill-overlay[data-state="result"] :is(#drill-title, #drill-progress) {
    color: var(--drill-edge);
  }

  :root[data-presentation="broadcast"] #drill-overlay[data-state="result"] #drill-title {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  :root[data-presentation="broadcast"] #drill-overlay:is([data-outcome="success"], [data-outcome="retry"]) #drill-title::before {
    display: grid;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
  }

  :root[data-presentation="broadcast"] #drill-overlay[data-outcome="success"] #drill-title::before { content: "✓" / ""; }
  :root[data-presentation="broadcast"] #drill-overlay[data-outcome="retry"] #drill-title::before { content: "!" / ""; }

  :root[data-presentation="broadcast"] #drill-overlay .drill-actions button {
    border-radius: 6px;
    box-shadow: inset 0 1px 0 #f5ffff25;
  }
}

@media (orientation: portrait) and (pointer: coarse) and (max-width: 360px) {
  :root[data-presentation="broadcast"] #controls button[data-slot="high"][data-standby] > svg {
    width: 18px;
    height: 18px;
  }
}