/* The same radio and postcard, with room to stay a while. */
.broadcast-player {
  --player-gutter: var(--space-section);
  position: fixed; inset: var(--player-vtop, 0px) 0 auto; margin: 0;
  width: 100%; max-width: none; height: var(--player-vh, 100dvh); max-height: none;
  padding: 0; border: 0; border-radius: 0; overflow: hidden; overscroll-behavior: contain;
  background: radial-gradient(ellipse at 15% 10%, #273A50 0, transparent 55%), #0E1A2B;
  transform: translateY(100%); transition: transform 280ms cubic-bezier(.25, 1, .5, 1);
}
.broadcast-player[open] { display: flex; flex-direction: column }
.broadcast-player[data-visible=true] { transform: translateY(0) }
.broadcast-player[data-closing=true] { transition-duration: 180ms }
.broadcast-player[data-instant=true] { transition: none }
.broadcast-player::backdrop { background: rgba(4, 9, 16, .82) }
.player-heading { flex: none; min-height: 72px; margin: 0; gap: var(--space-control); padding: max(var(--space-control), env(safe-area-inset-top)) max(var(--player-gutter), env(safe-area-inset-right)) var(--space-control) max(var(--player-gutter), env(safe-area-inset-left)); border-bottom: 1px solid rgba(237,224,194,.16) }
.player-heading p { color: var(--paper); font-size: 14px; letter-spacing: .03em }
.player-heading p span { margin-right: var(--space-group); color: var(--tungsten); font-size: 12px; letter-spacing: .12em }
.player-heading button { border-radius: 3px; padding-inline: var(--space-group) }
.player-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); width: 100%; max-width: 1440px; margin-inline: auto }
.player-listening, .player-story { min-width: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #697582 transparent }
.player-listening { padding: var(--space-page) clamp(var(--space-section), 4vw, var(--space-16)) max(var(--space-page), env(safe-area-inset-bottom)); text-align: center }
.player-art { grid-template-columns: minmax(0, 1fr); position: relative; width: min(100%, 34dvh, 350px); min-height: 190px; aspect-ratio: 1; max-height: none; margin: 0 auto; gap: 12px; border: 8px solid var(--paper); border-radius: 1px; outline: 1px dashed rgba(237,224,194,.6); outline-offset: 4px; background: radial-gradient(circle at 50% 70%, #3B3D37, #172B42 72%); box-shadow: 0 14px 48px rgba(0,0,0,.24); overflow: hidden }
.player-art::before { content: ''; position: absolute; width: 68%; aspect-ratio: 1; border: 1px solid rgba(237,224,194,.12); border-radius: 50%; transform: scale(1.36); pointer-events: none }
.player-art img { width: clamp(90px, 17dvh, 165px); height: auto; z-index: 1 }
.player-art strong { font: 700 clamp(17px, 2.1vw, 23px)/1.4 var(--display); z-index: 1 }
.player-art small { letter-spacing: .24em; z-index: 1 }
.player-readout { max-width: 520px; margin: var(--space-page) auto 0; text-align: left }
.player-mode { gap: var(--space-control); align-items: center; margin-bottom: var(--space-text); letter-spacing: .06em }
.player-mode span:first-child::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: currentColor }
.player-readout h2 { font: 600 clamp(22px, 2.2vw, 32px)/1.4 var(--ui); letter-spacing: -.025em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden }
.player-program { margin-top: var(--space-text); font-size: 15px }
.player-state { margin-top: var(--space-group); min-height: 1.6em }
.player-transport { padding: var(--space-control) 0 }
.player-transport .transport, .player-transport .reaction-button { width: 72px; height: 72px }
.player-transport .transport { border: 0; box-shadow: 0 3px 18px rgba(255,182,92,.1) }
.player-transport .transport svg { width: 32px; height: 32px }
.player-volume { max-width: 350px; margin: 0 auto }
.player-volume .vol { margin: 0; min-height: 44px }
.player-live-note { margin: 0 0 var(--space-control); line-height: 1.6 }
.player-links { max-width: 520px; margin: var(--space-section) auto 0; gap: var(--space-text); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.player-links button { border-radius: 3px }
.player-links #playerPostcard { color: var(--ink); background: var(--paper); border-color: var(--paper) }
.player-extras { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-group); margin-top: var(--space-control) }
.player-extras .install-action { width: auto; margin: 0; border: 0; padding: 8px 2px; color: var(--mist); background: none; text-decoration: underline; text-underline-offset: 4px; font-size: 12px }
.player-listening .install-help { max-width: 520px; margin: var(--space-text) auto 0; text-align: left }
.player-story { display: flex; flex-direction: column; gap: var(--space-section); padding: var(--space-page) clamp(var(--space-section), 3.5vw, var(--space-12)) max(var(--space-10), env(safe-area-inset-bottom)); border-left: 1px solid rgba(237,224,194,.16); background: rgba(7,16,29,.35) }
.player-story > * { flex-shrink: 0 }
.player-story-heading { margin: 0 }
.player-story-heading p { margin: 0 0 var(--space-text); color: var(--tungsten); font-size: 11px; font-weight: 600; letter-spacing: .17em }
.player-story-heading h2 { margin: 0; font: 700 clamp(22px, 2.3vw, 29px)/1.5 var(--display); letter-spacing: -.035em }
.player-story .panel { padding: 0; background: none; align-self: auto }
.player-story .r-idle, .player-story #stationBar { display: none }
.player-story .r { order: 0 }
.player-story .card { order: 1; transform: none; padding: var(--space-section) var(--space-5) var(--space-group) }
.player-story .after { order: 2 }
.player-story .log { order: 3 }
.player-story .reply-paper { margin-top: 0; transform: none }
.player-story .q { min-height: calc(var(--write-row) * 3) }
.player-story .card-foot { gap: var(--space-text) }
.broadcast-player[data-state=sending] .card { animation: none; opacity: .5; pointer-events: none }
.broadcast-player[data-state=crisis] .player-story-heading, .broadcast-player[data-state=crisis] .log { display: none }
.broadcast-player[data-state=crisis] .player-toggle { pointer-events: none }
.broadcast-player .toast { z-index: 2 }
.broadcast-player .card-air { min-height: 44px }
.broadcast-player .card-air span { line-height: 1.6 }
@media (max-width: 899px) {
  .broadcast-player { --player-gutter: var(--space-5) }
  .player-heading { min-height: 62px }
  .player-heading p { font-size: 13px }
  .player-heading p span { margin-right: var(--space-text); font-size: 11px }
  .player-layout { display: block; overflow: auto; overscroll-behavior: contain }
  .player-listening, .player-story { overflow: visible }
  .player-listening { padding: var(--space-page) max(var(--player-gutter), env(safe-area-inset-right)) var(--space-section) max(var(--player-gutter), env(safe-area-inset-left)) }
  .player-art { width: min(64vw, 26dvh, 240px); min-height: 160px; gap: 6px }
  .player-art img { width: clamp(68px, 11dvh, 104px) }
  .player-art strong { padding-inline: 6px; font-size: clamp(14px, 3.7vw, 17px); line-height: 1.35; word-break: keep-all }
  .player-art small { font-size: 10px }
  .player-readout { margin-top: var(--space-section) }
  .player-readout h2 { font-size: 23px }
  .player-state { margin-top: var(--space-control) }
  .player-transport .transport, .player-transport .reaction-button { width: 64px; height: 64px }
  .player-story { padding: var(--space-section) max(var(--player-gutter), env(safe-area-inset-right)) max(var(--space-10), env(safe-area-inset-bottom)) max(var(--player-gutter), env(safe-area-inset-left)); border-left: 0; border-top: 1px solid rgba(237,224,194,.18) }
  .player-story .card { padding: var(--space-group) }
  .player-story .card-head { min-height: 58px }
}
@media (max-height: 550px) {
  .player-art { min-height: 100px; width: 125px; border-width: 5px }
  .player-art img { width: 64px }
  .player-art strong { display: none }
  .player-art small { font-size: 10px }
  .player-listening { padding-top: var(--space-5) }
}
.broadcast-player[data-keyboard=true] .player-art { display: none }
@media (prefers-reduced-motion: reduce) { .broadcast-player { transition: none } }