/* DOT TV keeps the existing square pixel controls and leaves space for the room. */
body[data-scene="tv"] #workspace,
body[data-scene="tv"] #focus-menu,
body[data-scene="tv"] #music-panel,
body[data-scene="tv"] #music-empty,
body[data-scene="tv"] #music-menu,
body[data-scene="tv"] #sound-menu,
body[data-scene="tv"] .scene-caption { display: none !important; }
.tv-room { --tv-paper: #eee9df; position: fixed; z-index: var(--z-stage); top: calc(78px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(820px, calc(100vw - 40px), calc((100dvh - 480px) * 16 / 9)); min-width: min(320px, calc(100vw - 24px)); color: #f6f1e7; font: 12px var(--font); }
.tv-screen { aspect-ratio: 16 / 9; min-height: 200px; background: #080b12; border: 3px solid #53566a; box-shadow: 0 0 0 1px #080b12, 5px 5px 0 #0b0e18; }
.tv-screen > div,.tv-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Playback is controlled by the room buttons, never by taps inside the embed. */
.tv-screen iframe { pointer-events: none; }
/* The shared header dialog contains the schedule and connection status. */
.tv-menu.settings-dialog { --tv-paper: #eee9df; color: #f6f1e7; background: #151720; border: 1px solid #51405e; border-radius: 0; font: 12px var(--font); }
.tv-menu .dialog-heading button { color: #f6f1e7; }
.tv-progress { display: block; width: 100%; height: 3px; margin-top: 8px; border: 0; appearance: none; background: #35394a; accent-color: #ffa83a; }
.tv-progress::-webkit-progress-bar { background: #35394a; }
.tv-progress::-webkit-progress-value { background: #ffa83a; }
.tv-progress::-moz-progress-bar { background: #ffa83a; }
.tv-progress-marker { position: absolute; left: 0; top: calc(100% + 5px); width: 100%; height: 0; pointer-events: none; }
.tv-progress-marker[hidden] { display: none; }
.tv-progress-time { position: absolute; left: clamp(24px, var(--tv-progress-position, 0%), calc(100% - 24px)); bottom: 7px; transform: translateX(-50%); padding: 3px 5px; border: 1px solid #8f7657; background: #211c27; color: #ffe6bb; box-shadow: 2px 2px 0 rgba(9,12,23,.65); font: 10px/1.2 var(--font); white-space: nowrap; }
.tv-progress-time::after { content: ""; position: absolute; top: 100%; left: calc(50% - 3px); width: 6px; height: 4px; background: #8f7657; clip-path: polygon(0 0,100% 0,50% 100%); }
.tv-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tv-controls button,.developer-tv-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 1px solid #64687e; border-radius: 0; background: #252b3b; font-size: 11px; color: #f6f1e7; text-decoration: none; box-shadow: inset 1px 1px #444b60, 2px 2px #0b0e18; }
.tv-controls button:hover { background: #394154; }
.tv-controls #tv-watch { background: #e8d59e; color: #242a39; box-shadow: inset 1px 1px #fff4cf, 2px 2px #0b0e18; }
.tv-status { font-size: 10px; line-height: 1.5; margin: 8px 0 0; color: #c7c9d6; }
.tv-status:empty { display: none; }
.tv-schedule { margin-top: 10px; padding: 12px; background: var(--tv-paper); color: #252b3b; border: 2px solid #62677a; }
.tv-schedule h3 { font-size: 12px; margin: 0 0 4px; }
.tv-schedule > p { font-size: 10px; color: #656778; margin: 0 0 8px; }
.tv-schedule ol { list-style: none; margin: 0; padding: 0; max-height: min(40dvh, 320px); overflow-y: auto; overscroll-behavior: contain; }
.tv-schedule li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 10px 8px; border-top: 1px solid #d2d0c9; border-left: 3px solid transparent; font-size: 11px; line-height: 1.5; }
.tv-schedule-item-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tv-schedule li[aria-current="true"] { background: #fff0c8; color: #4f3516; border-left-color: #cc802a; box-shadow: inset 0 0 0 1px #e3c082; }
.tv-schedule li[aria-current="true"] time,.tv-schedule li[aria-current="true"] .tv-schedule-item-title { font-weight: bold; }
.tv-schedule-now { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 4px; padding: 2px 5px; background: #825020; color: #fff4db; font-size: 9px; line-height: 1.3; }
.tv-schedule-now::before { content: ""; width: 5px; height: 5px; background: #ffd87b; }
.tv-schedule li small { display: block; color: #686b79; font-size: 10px; margin-top: 3px; }
.developer-tv { margin: 18px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.developer-tv p { font-size: 11px; line-height: 1.7; margin: 8px 0 0; }
@media (max-width: 700px) {
  .tv-room { top: calc(66px + env(safe-area-inset-top)); width: calc(100vw - 24px); }
  .tv-controls button { font-size: 10px; padding-inline: 8px; }
}
@media (max-height: 540px) and (min-width: 600px) {
  .tv-room { top: calc(60px + env(safe-area-inset-top)); width: min(680px, calc(100vw - 32px)); }
}

body[data-scene="tv"] .app-header { z-index: var(--z-player); }
#move-down svg { transform: rotate(180deg); }

/* Coordinates come from the same canvas transform that paints the billboard frame. */
.tv-room.tv-billboard { left: var(--tv-x); top: var(--tv-y); width: var(--tv-width); min-width: 0; transform: none; display: block; }
.tv-billboard .tv-screen { height: var(--tv-height); min-height: 0; aspect-ratio: auto; border: 0; box-shadow: none; }
/* The progress bar sits below the clean title band. */
.tv-billboard .tv-progress { position: absolute; left: calc(var(--tv-unit) * -2); top: calc(var(--tv-height) + var(--tv-unit) * 11); width: calc(var(--tv-unit) * 164); height: max(2px, var(--tv-unit)); margin: 0; }
.tv-billboard .tv-progress-marker { left: calc(var(--tv-unit) * -2); top: calc(var(--tv-height) + var(--tv-unit) * 11); width: calc(var(--tv-unit) * 164); }
.tv-billboard .tv-playback-controls { position: absolute; top: calc(var(--tv-height) + var(--tv-unit) * 11 + max(2px, var(--tv-unit))); left: calc(var(--tv-unit) * -2); width: calc(var(--tv-unit) * 164); box-sizing: border-box; justify-content: center; flex-wrap: nowrap; padding: 6px 8px; background: #252330; border: 2px solid #554452; border-top: 0; box-shadow: inset 0 2px #393340, inset 0 -2px #11141f, 0 3px #090c17; }
.tv-playback-controls button { white-space: nowrap; border-color: #70616e; background: #263b49; color: #ecd5b2; box-shadow: inset 1px 1px #54717c, 2px 2px #171b25; }
.tv-playback-controls button:hover { background: #354e59; }
.tv-playback-controls #tv-watch { background: #675642; color: #fff0d0; box-shadow: inset 1px 1px #bb9769, 2px 2px #171b25; }
@media (max-width: 420px) { .tv-playback-controls { gap: 4px; padding: 5px; } .tv-playback-controls button { min-height: 32px; padding: 5px; font-size: 9px; } }
[data-scene="tv"] > .scene-thumbnail { object-position: center 60%; }

/* Only the title moves; the band has a flat, opaque background without glow. */
.tv-marquee { display: none; }
.tv-billboard .tv-marquee { display: block; position: absolute; left: calc(var(--tv-unit) * -2); top: calc(var(--tv-height) + var(--tv-unit) * 3); width: calc(var(--tv-unit) * 164); height: calc(var(--tv-unit) * 7); overflow: hidden; background: #10101c; color: #eac488; font: var(--tv-marquee-font, 11px)/calc(var(--tv-unit) * 7) var(--font); white-space: nowrap; text-shadow: none; pointer-events: none; }
.tv-marquee span { display: inline-block; padding-left: 100%; animation: tv-marquee var(--tv-marquee-time, 16s) linear infinite; }
@keyframes tv-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .tv-marquee span { padding-left: calc(var(--tv-unit) * 4); animation: none; } }

/* Preset talk menu and the small bubbles over guests' heads. */
/* Footer right; the menu opens upward. */
.tv-talk-toggle { position: fixed; z-index: var(--z-chrome); right: calc(32px + env(safe-area-inset-right)); bottom: var(--footer-bottom); display: grid; place-items: center; width: 54px; height: 54px; padding: 10px; color: #fff; opacity: .9; background: rgba(31,31,47,.58); border: 1px solid rgba(255,255,255,.35); box-shadow: 1px 2px 0 rgba(16,20,32,.3); touch-action: manipulation; }
.tv-talk-toggle:hover,.tv-talk-toggle:focus-visible,.tv-talk-toggle[aria-expanded="true"] { opacity: 1; }
.tv-talk-toggle svg { width: 30px; height: 30px; filter: drop-shadow(2px 2px 0 rgba(16,20,32,.65)); }
.tv-talk { position: fixed; z-index: var(--z-popover); right: calc(32px + env(safe-area-inset-right)); bottom: calc(var(--footer-bottom) + 56px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: min(300px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); padding: 10px; max-height: min(70dvh, 420px); overflow-y: auto; background: #10101cef; border: 1px solid #51405e; box-shadow: 3px 3px #07070fcc; }
.tv-talk-toggle[hidden],.tv-talk[hidden] { display: none; }
@media (max-width: 700px), (max-width: 900px) and (max-height: 540px) { .tv-talk-toggle,.tv-talk { right: calc(12px + env(safe-area-inset-right)); } }
.tv-talk button { grid-column: span 3; min-width: 0; min-height: 40px; padding: 7px 6px; border: 1px solid #64687e; border-radius: 0; background: #252b3b; color: #f6f1e7; font: 11px/1.4 var(--font); box-shadow: inset 1px 1px #444b60, 2px 2px #0b0e18; }
.tv-talk button:hover { background: #394154; }
.tv-talk button[data-kind="reaction"] { grid-column: span 1; display: grid; place-items: center; min-height: 44px; padding: 5px 0; border: 0; background: transparent; box-shadow: none; }
.tv-talk button[data-kind="reaction"]:hover { background: transparent; filter: brightness(1.2); }
.tv-talk button[data-kind="phrase"] { color: #ffedcf; font-size: 10px; letter-spacing: .03em; }
.tv-talk button[data-kind="reaction"]:focus-visible { outline: 2px solid #ffcf9f; outline-offset: -2px; }
.tv-talk-icon { display: block; width: 28px; height: 28px; image-rendering: pixelated; object-fit: contain; }
.tv-talk-bubble { position: fixed; z-index: var(--z-bubble); margin: 0; transform: translate(-50%, -100%); padding: 4px 8px 5px; background: #fff7df; color: #3c3448; border: 2px solid #393345; box-shadow: 2px 2px 0 #0a0e18; font: 11px/1.4 var(--font); white-space: nowrap; pointer-events: none; }
.tv-talk-bubble[data-self] { background: #ffe9a8; }
.tv-talk-bubble[data-kind="reaction"] { padding: 0; border: 0; background: transparent; box-shadow: none; }
.tv-talk-bubble[data-kind="reaction"]::after { display: none; }
.tv-talk-bubble .tv-talk-icon { width: 38px; height: 38px; }
.tv-talk-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; width: 6px; height: 4px; margin: 2px 0 0 -3px; background: #393345; clip-path: polygon(0 0,100% 0,100% 50%,66.7% 50%,66.7% 100%,33.3% 100%,33.3% 50%,0 50%); }

/* Place captions above the video while keeping menus above the captions. */
.tv-reactions { --bubble-paper: #fff7df; --bubble-ink: #3c3448; position: fixed; z-index: var(--z-bubble); width: min(330px, calc(100vw - 16px)); pointer-events: none; }
.tv-reaction { position: relative; display: block; padding: 10px 12px 8px; color: var(--bubble-ink); background: var(--bubble-paper); border: 2px solid #393345; box-shadow: 3px 3px 0 #0a0e18, inset 2px 2px 0 #fffdf3; font: 12px/1.7 var(--font); pointer-events: none; }
.tv-reaction-tail { position: absolute; top: 100%; left: var(--tail-x); transform: translateX(-50%); width: 16px; height: 12px; background: #393345; clip-path: polygon(0 0,100% 0,100% 33.333%,75% 33.333%,75% 66.667%,62.5% 66.667%,62.5% 100%,37.5% 100%,37.5% 66.667%,25% 66.667%,25% 33.333%,0 33.333%); }
.tv-reaction-tail::after { content: ""; position: absolute; top: -2px; left: 2px; width: 12px; height: 10px; background: var(--bubble-paper); clip-path: polygon(0 0,100% 0,100% 40%,75% 40%,75% 70%,62.5% 70%,62.5% 100%,37.5% 100%,37.5% 70%,25% 70%,25% 40%,0 40%); }
.tv-reactions[data-seat="1"] { --bubble-paper: #e5edff; }
.tv-reactions[data-seat="2"] { --bubble-paper: #f9e8ed; }
.tv-reactions[data-seat="3"] { --bubble-paper: #e3f2e8; }
.tv-reactions[data-seat="4"] { --bubble-paper: #eee6fb; }
.tv-reactions[data-kind="timed"] .tv-reaction-kind { color: #a06a36; }
.tv-reaction-copy { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; overflow-wrap: anywhere; }
.tv-reaction-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; margin-top: 6px; font-size: 9px; line-height: 1.3; color: #756477; }
.tv-reaction-kind { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv-reaction-likes { color: #9a536a; white-space: nowrap; }
@media (max-width: 700px) {
  .tv-reaction { padding: 9px 12px 8px; font-size: 11px; line-height: 1.6; }
  .tv-reaction-footer { margin-top: 6px; }
}

/* The prompt appears only when the browser starts the broadcast muted. */
.tv-sound-control { position: relative; display: inline-flex; flex: none; }
.tv-sound-hint { position: absolute; z-index: 10; left: 50%; bottom: calc(100% + 3px); width: 24px; height: 24px; transform: translateX(-50%); font-size: 0; pointer-events: none; filter: drop-shadow(1px 2px 0 #261b2d); animation: sound-hint-bounce 1s steps(2, end) infinite; }
.tv-sound-hint::after { content: ""; position: absolute; inset: 2px 5px; background: #ffe29a; clip-path: polygon(36% 0,64% 0,64% 53%,100% 53%,50% 100%,0 53%,36% 53%); }
.tv-sound-hint::before { content: ""; position: absolute; top: 1px; left: -2px; width: 3px; height: 3px; background: #fff5d4; box-shadow: 27px 4px #fff5d4, 23px -2px #ffc478; animation: sound-hint-sparkle .7s steps(2, end) infinite; }
.tv-sound-hint[hidden] { display: none; }
@keyframes sound-hint-bounce { 50% { transform: translate(-50%, 3px); } }
@keyframes sound-hint-sparkle { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tv-sound-hint,.tv-sound-hint::before { animation: none; } }

@media (orientation: landscape) and (pointer: coarse) and (max-height: 540px) {
  .tv-talk-toggle, .tv-talk { right: calc(10px + env(safe-area-inset-right)); }
  .tv-talk { max-height: calc(100dvh - var(--footer-bottom) - 80px - env(safe-area-inset-top)); }
}