:root[data-presentation="broadcast"] {
  --broadcast-menu-ink: #0c1723;
  --broadcast-menu-panel: #132332;
  --broadcast-menu-control: #1b3446;
  --broadcast-menu-edge: #466374;
  --broadcast-menu-paper: #fff3dd;
  --broadcast-menu-muted: #b7cbd5;
  --broadcast-menu-gold: #ffd17c;
  --broadcast-menu-mint: #89dfd4;
}

:root[data-presentation="broadcast"] .home::after {
  background:
    linear-gradient(138deg, #0a192bb3 0%, #0b1d331a 39%, transparent 58%),
    linear-gradient(180deg, transparent 42%, #0c182ac2 74%, #0b1626 96%);
}

:root[data-presentation="broadcast"] .hero h1 {
  text-shadow: 0 2px 3px #050f1b, 0 8px 28px #071321f0;
}

:root[data-presentation="broadcast"] .title-rule {
  width: 76px;
  height: 4px;
  transform: skew(-21deg);
  background: linear-gradient(90deg, var(--broadcast-menu-gold) 39%, transparent 39% 46%, var(--broadcast-menu-mint) 46%);
}

:root[data-presentation="broadcast"] .app[data-screen="home"] .top-actions button {
  border: 1px solid #9ccbd2aa;
  border-radius: 50%;
  background: linear-gradient(145deg, #386174, #254352);
  color: #fff4df;
  box-shadow: inset 0 1px #caedf547, 0 2px 0 #112b3d;
}

:root[data-presentation="broadcast"] .app[data-screen="home"] .top-actions button:is(:active, [data-down]):not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 1px 3px #0a233d80;
}

:root[data-presentation="broadcast"] .home-actions > button {
  border-radius: 7px 7px 15px 7px;
  clip-path: none;
}

:root[data-presentation="broadcast"] .home-actions > :is(.start, .resume) {
  min-height: 54px;
  background: linear-gradient(108deg, #f5b957, #ffe3a0);
  box-shadow: inset 0 1px #fff4d2, 0 4px 14px #040d17b3;
  color: #112232;
}

:root[data-presentation="broadcast"] .home-actions > .resume {
  background: linear-gradient(108deg, #76d3c5, #a9eadf);
  box-shadow: inset 0 1px #d1fff5, 0 4px 14px #040d17b3;
}

:root[data-presentation="broadcast"] .home-actions:has(> .resume:not([hidden])) > .start {
  min-height: 46px;
  font-size: 16px;
  background: #132637f5;
  box-shadow: inset 0 0 0 1px #688394;
  color: var(--broadcast-menu-paper);
}

:root[data-presentation="broadcast"] .home-actions > .secondary {
  min-height: 46px;
  background: #112334f5;
  box-shadow: inset 0 0 0 1px #465f73;
}

:root[data-presentation="broadcast"] .home-actions > #ball-picker {
  background: #102134ed;
  box-shadow: inset 0 0 0 1px #436074;
}

:root[data-presentation="broadcast"] .home-actions > #ball-picker .ball-picker-value {
  color: #c4dce6;
}

:root[data-presentation="broadcast"] .app[data-screen="home"] #update {
  display: none;
}

:root[data-presentation="broadcast"] .app[data-screen="home"] #site-version {
  color: #b7cbd5;
}

:root[data-presentation="broadcast"] #dialog:not([data-panel="result"]) {
  color: var(--broadcast-menu-paper);
  background:
    linear-gradient(133deg, #1a3546 0%, #142635 36%, #101f2c 76%);
  border: 1px solid #577486;
  border-top: 3px solid var(--broadcast-menu-gold);
  border-radius: 12px 12px 17px 12px;
  box-shadow: 0 18px 54px #030b16ba, inset 0 0 0 1px #12202b;
  scrollbar-color: #5f7c8d var(--broadcast-menu-ink);
}

:root[data-presentation="broadcast"] #dialog::backdrop {
  background: #030e1ccc;
}

:root[data-presentation="broadcast"] #dialog:not([data-panel="result"]) .dialog-head {
  border-color: #7794a157;
  padding-block-end: 9px;
  margin-block-end: 12px;
}

:root[data-presentation="broadcast"] #dialog:not([data-panel="result"]) .dialog-head h2 {
  letter-spacing: .025em;
  text-shadow: 0 2px 3px #081520b3;
}

:root[data-presentation="broadcast"] #dialog:not([data-panel="result"]) :is(.dialog-copy, .guide, legend) {
  color: var(--broadcast-menu-muted);
}

:root[data-presentation="broadcast"] #dialog:not([data-panel="result"]) :is(
  .dialog-actions button, .pause-tools button, .zone-grid button, .close, .options label
) {
  background: var(--broadcast-menu-control);
  border-color: var(--broadcast-menu-edge);
  border-radius: 7px 7px 11px 7px;
}

:root[data-presentation="broadcast"] #dialog:not([data-panel="result"]) .dialog-actions .accent {
  color: #101d29;
  background: linear-gradient(100deg, #f5be62, #ffdfa0);
  border-color: #ffda95;
  box-shadow: inset 0 1px #ffe9b8;
}

:root[data-presentation="broadcast"] #dialog:not([data-panel="result"]) :is(
  .options input:checked + label, .zone-grid button[data-selected]
) {
  color: #0f2431;
  background: #87d9d0;
  border-color: #a6ebe3;
  box-shadow: inset 0 -3px #438987;
}

:root[data-presentation="broadcast"] #dialog:is([data-panel="settings"], [data-panel="pause"], [data-panel="tutorial-pause"]) {
  overflow: hidden;
  overflow: clip;
}

:root[data-presentation="broadcast"] #dialog:is([data-panel="settings"], [data-panel="pause"], [data-panel="tutorial-pause"]) #dialog-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 28px);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 28px);
  gap: 0;
}

:root[data-presentation="broadcast"] #dialog .presentation-dialog-body {
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  min-height: 0;
  padding: 3px 5px 6px 3px;
  margin-inline: -3px;
}

:root[data-presentation="broadcast"] #dialog:is([data-panel="settings"], [data-panel="pause"], [data-panel="tutorial-pause"]) .dialog-actions {
  position: static;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #7794a157;
  background: transparent;
  box-shadow: none;
}

:root[data-presentation="broadcast"] #dialog .presentation-dialog-body fieldset {
  margin-block: 11px;
  padding: 7px 9px 8px;
  background: #0d1b28a8;
  border: 1px solid #486172;
  border-radius: 8px;
}

:root[data-presentation="broadcast"] #dialog .presentation-dialog-body legend {
  padding-inline: 5px;
  color: var(--broadcast-menu-mint);
  letter-spacing: .04em;
}

:root[data-presentation="broadcast"] #dialog .presentation-dialog-body .dialog-copy {
  font-size: 12px;
  margin-block-end: 9px;
}

:root[data-presentation="broadcast"] #dialog .presentation-dialog-body .volume-control input {
  min-height: 32px;
  accent-color: var(--broadcast-menu-mint);
}

:root[data-presentation="broadcast"] #dialog .presentation-dialog-body .setting-note {
  color: var(--broadcast-menu-muted);
}

:root[data-presentation="broadcast"] #dialog .presentation-dialog-body .pause-tools button {
  min-height: 44px;
  box-shadow: none;
  font-size: 12px;
}

:root[data-presentation="broadcast"] #dialog[data-panel="settings"] .pause-tools [data-dialog="update"] {
  grid-column: auto;
  color: var(--broadcast-menu-muted);
  background: #102332;
}

:root[data-presentation="broadcast"] #dialog .practice-courses button {
  background: linear-gradient(120deg, #234052, #172c3d 75%);
  border-color: #4e6c7e;
  box-shadow: inset 2px 0 var(--broadcast-menu-mint);
  min-height: 70px;
}

:root[data-presentation="broadcast"] #dialog .practice-courses [data-dialog="free-practice"] {
  color: var(--broadcast-menu-gold);
  box-shadow: inset 2px 0 var(--broadcast-menu-gold);
}

:root[data-presentation="broadcast"] #dialog .ball-choice-label {
  background:
    radial-gradient(ellipse at 50% 32%, #3c5f78 1%, #23394e 39%, #192b3d 77%);
  border-color: #4d6e83;
  border-radius: 8px 8px 12px 8px;
}

:root[data-presentation="broadcast"] #dialog .ball-choice-preview {
  filter: drop-shadow(0 6px 4px #060c18db);
}

:root[data-presentation="broadcast"] #dialog .ball-choice-radio:checked + .ball-choice-label {
  background: radial-gradient(ellipse at 50% 25%, #4a756e, #233f50 53%, #192d3c 90%);
  border-color: var(--broadcast-menu-mint);
  box-shadow: inset 0 0 0 1px #86dfd4a8;
}

:root[data-presentation="broadcast"] #dialog .ball-choice-radio:checked + .ball-choice-label .ball-choice-preview {
  transform: scale(1.10);
}

:root[data-presentation="broadcast"] #dialog[data-panel="tutorial-welcome"] .tutorial-welcome-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 1px;
  list-style: none;
  border: 1px solid #7fa7b385;
  border-top-color: #a4d0ccbb;
  border-radius: 8px;
  background: linear-gradient(113deg, #1e3948, #122635 62%, #182c3a);
  box-shadow: inset 0 -2px #0917257a;
}

:root[data-presentation="broadcast"] #dialog[data-panel="tutorial-welcome"] .tutorial-welcome-flow li {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px 7px;
}

:root[data-presentation="broadcast"] #dialog[data-panel="tutorial-welcome"] .tutorial-welcome-flow li + li {
  border-inline-start: 1px dashed #7fa7b386;
}

:root[data-presentation="broadcast"] #dialog[data-panel="tutorial-welcome"] .tutorial-welcome-flow strong {
  color: var(--broadcast-menu-paper);
  font-size: var(--type-label);
  line-height: 1.24;
}

:root[data-presentation="broadcast"] #dialog[data-panel="tutorial-welcome"] .tutorial-welcome-flow small {
  color: var(--broadcast-menu-muted);
  font-size: var(--type-label);
  font-weight: var(--type-weight-body);
  line-height: 1.3;
}

@container home-screen (orientation: portrait) and (max-height: 620px) {
  :root[data-presentation="broadcast"] .home-actions {
    bottom: 54px;
    gap: 6px;
  }
}

@container home-screen (orientation: landscape) and (max-height: 440px) {
  :root[data-presentation="broadcast"] .home-actions {
    bottom: 47px;
    gap: 5px;
  }

  :root[data-presentation="broadcast"] .home-actions > :is(.start, .resume, .secondary) {
    min-height: 44px;
  }
}

@media (orientation: landscape) and (max-height: 440px) {
  :root[data-presentation="broadcast"] #dialog:is([data-panel="settings"], [data-panel="pause"], [data-panel="tutorial-pause"]) #dialog-content {
    padding-block: 9px;
  }
}

@media (orientation: portrait) and (max-width: 599px) {
  :root[data-presentation="broadcast"] #dialog:is(
    [data-panel="settings"], [data-panel="practice-menu"], [data-panel="drill-setup"],
    [data-panel="setup"], [data-panel="appearance-picker"], [data-panel="ball-picker"]
  ) {
    border-top-width: 2px;
    border-radius: 12px;
    background: linear-gradient(155deg, #193443, #132837 40%, #0d1e2b 87%);
    box-shadow: 0 20px 55px #020a16c4;
  }

  :root[data-presentation="broadcast"] #dialog:is(
    [data-panel="settings"], [data-panel="practice-menu"], [data-panel="drill-setup"],
    [data-panel="setup"], [data-panel="appearance-picker"], [data-panel="ball-picker"]
  ) .dialog-head {
    border-color: #91b4be3b;
  }

  :root[data-presentation="broadcast"] #dialog:is(
    [data-panel="settings"], [data-panel="practice-menu"], [data-panel="drill-setup"],
    [data-panel="setup"], [data-panel="appearance-picker"], [data-panel="ball-picker"]
  ) .dialog-actions button {
    border-radius: 8px;
  }

  :root[data-presentation="broadcast"] #dialog:is([data-panel="settings"], [data-panel="setup"])
    :is(.options input:checked + label, .zone-grid button[data-selected]) {
    color: #e5fff8;
    background: #24545a;
    border-color: #78b9b0;
    box-shadow: inset 0 -2px #7ddcca;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="settings"] .presentation-dialog-body fieldset {
    background: #0b1d297a;
    border-color: #5675827a;
    border-radius: 9px;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="settings"] .volume-control output {
    min-width: 38px;
    padding: 1px 5px;
    border-radius: 4px;
    color: #ffdb8e;
    background: #253e4a;
    text-align: end;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="practice-menu"] .practice-courses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="practice-menu"] .practice-courses button {
    min-height: 66px;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid #7096a578;
    border-radius: 8px;
    background: linear-gradient(118deg, #1c3c4d, #142b3a 70%);
    box-shadow: none;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="practice-menu"] .practice-courses
    :is([data-dialog="drill-setup-serve"], [data-dialog="free-practice"]) {
    grid-column: 1 / -1;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="practice-menu"] .practice-courses strong {
    min-width: 0;
    padding-inline-end: 23px;
    line-height: 1.18;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="practice-menu"] .practice-courses span {
    color: #c1d8dc;
    text-align: start;
    word-break: keep-all;
    text-wrap: pretty;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="practice-menu"] .practice-course-icon {
    inset-inline-end: 8px;
    top: 9px;
    width: 19px;
    height: 19px;
    transform: none;
    color: var(--broadcast-menu-mint);
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="practice-menu"]
    [data-dialog="drill-setup-serve"] .practice-course-icon {
    inset-inline-end: 14px;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="practice-menu"] .practice-courses [data-dialog="drill-setup-serve"] {
    background:
      linear-gradient(90deg, #84d1c44a 0 2px, transparent 2px),
      linear-gradient(120deg, #1a3b48, #172e3b 68%);
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="practice-menu"] .practice-courses [data-dialog="free-practice"] {
    position: relative;
    min-height: 49px;
    padding-inline-end: 67px;
    border-color: #b99b626f;
    color: var(--broadcast-menu-paper);
    background: linear-gradient(105deg, #3d392c, #20303a 74%);
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="practice-menu"] [data-dialog="free-practice"]::after {
    content: "6 VS 6" / "";
    position: absolute;
    inset-inline-end: 11px;
    align-self: center;
    color: var(--broadcast-menu-gold);
    font: 700 14px/1 var(--volley-numeral);
    letter-spacing: .07em;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="practice-menu"] [data-dialog="free-practice"]::before {
    content: "";
    position: absolute;
    inset-block: 7px;
    inset-inline-end: 62px;
    border-inline-start: 1px dashed #cbaf786f;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] {
    overflow: hidden;
    overflow: clip;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] #dialog-content {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 28px);
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 28px);
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .dialog-actions {
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid #91b4be3b;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .setup-intro {
    padding: 6px 8px;
    border-inline-start: 2px solid #7cc5ba;
    border-radius: 3px 6px 6px 3px;
    background: #172d3b;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .setup-intro strong {
    color: var(--broadcast-menu-paper);
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .presentation-dialog-body fieldset {
    padding: 0;
    border: 0;
    background: none;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .presentation-dialog-body legend {
    padding-inline: 0;
    color: var(--broadcast-menu-muted);
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .setup-zone-court {
    display: grid;
    gap: 4px;
    margin-top: 5px;
    padding: 4px 6px;
    border: 1px solid #b2986768;
    border-radius: 7px;
    background: linear-gradient(180deg, #223d46, #18313d);
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .setup-zone-court
    :is(.setup-zone-net, .setup-zone-baseline) {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d4c7a6;
    font-size: var(--type-meta);
    line-height: 1.12;
    white-space: nowrap;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .setup-zone-court
    :is(.setup-zone-net, .setup-zone-baseline)::before,
  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .setup-zone-court
    :is(.setup-zone-net, .setup-zone-baseline)::after {
    content: "";
    flex: 1;
    border-top: 1px solid #c4ab788c;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .setup-zone-net::before,
  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .setup-zone-net::after {
    border-top-style: dashed;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .setup-zone-court [data-zone] {
    display: grid;
    min-height: 48px;
    min-width: 0;
    align-content: center;
    gap: 1px;
    padding: 3px 2px;
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .setup-zone-court [data-zone] strong {
    font: 700 19px/1 var(--volley-numeral);
  }

  :root[data-presentation="broadcast"] #dialog[data-panel="setup"] .setup-zone-court [data-zone] span {
    font-size: var(--type-meta);
    line-height: 1.16;
  }
}

@media (orientation: portrait) and (max-width: 599px) {
  :root[data-presentation="broadcast"] #dialog[data-scroll-more] .dialog-head {
    position: relative;
  }

  :root[data-presentation="broadcast"] #dialog[data-scroll-more] .dialog-head::after {
    content: "向下捲動";
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 58px;
    color: var(--broadcast-menu-muted);
    font-size: var(--type-meta);
    font-weight: var(--type-weight-label);
    pointer-events: none;
  }
}