.tv-room { position: fixed; z-index: 1000; overflow: hidden; isolation: isolate; container-type: inline-size; container-name: tvroom; background: #764831; color: #fff3da; font-family: 'Malgun Gothic',sans-serif; }
.tv-room * { box-sizing: border-box; }
.tv-wall { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tv-audience { position: absolute; pointer-events: none; overflow: hidden; }
.tv-toolbar { position: absolute; top: 0; left: 0; right: 0; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 5px 14px; background: #302015e8; }
.tv-toolbar h2 { margin: 0; font-size: 18px; white-space: nowrap; }
.tv-close { margin-left: auto; flex: none; min-height: 36px; padding: 4px 10px; font-size: 14px; }
.tv-player { position: absolute; background: #000; }
.tv-iframe { display: block; width: 100%; height: 100%; border: 0; }
.tv-info { display: flex; flex: 0 1 auto; min-width: 0; max-width: 440px; gap: 10px; align-items: center; padding: 5px 9px; background: #173b31; border: 1px solid #a7b58b; border-radius: 6px; }
.tv-status { margin: 0; min-width: 0; font-size: 14px; font-weight: 700; line-height: 20px; color: #fff5d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-external { color: #fff1b8; font-size: 12px; white-space: nowrap; }



.tv-policy { flex: none; color: #fff1b8; font-size: 12px; white-space: nowrap; }
.tv-consent { height: 100%; overflow: auto; padding: 12px 18px; background: #192b29; color: #fff4df; font-size: 14px; line-height: 1.5; }
.tv-consent h3 { margin: 0 0 8px; font-size: 18px; }
.tv-consent p { margin: 8px 0; }
.tv-consent-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tv-consent a { color: #ffe1a0; }
.tv-consent-actions { display: flex; gap: 12px; }
.tv-consent button { min-height: 36px; padding: 6px 12px; }

/* Video selection stays in the rotated room; no native portrait popup. */
.tv-toolbar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 6px 14px; padding: 6px 14px; }
.tv-video-picker { justify-self: start; min-height: 36px; padding: 5px 14px; color: #fff0cf; background: #493427; border: 1px solid #bf9a64; border-radius: 6px; font-size: 14px; white-space: nowrap; }
.tv-close { grid-column: 3; grid-row: 1; }
.tv-info { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; max-width: none; gap: 4px 14px; padding: 4px 8px; }
.tv-status { flex: 1 1 280px; overflow: visible; text-overflow: clip; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; font-size: 14px; line-height: 20px; }
.tv-external,.tv-policy { flex: none; font-size: 13px; line-height: 20px; white-space: nowrap; }
.tv-video-catalog { height: 100%; overflow: auto; padding: 10px 14px; background: #172a28; color: #fff3da; }
.tv-video-catalog h3 { margin: 0 0 8px; font-size: 18px; line-height: 24px; }
.tv-video-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.tv-video-choice { display: flex; min-width: 0; min-height: 46px; flex-direction: column; gap: 3px; align-items: start; padding: 8px 12px; text-align: left; font-size: 14px; line-height: 1.5; white-space: normal; word-break: keep-all; }
.tv-video-choice small { font-size: 13px; font-weight: normal; line-height: 1.5; }
.tv-all-videos { grid-column: 1 / -1; border-color: #c9ad6b; }
@container tvroom (max-width: 520px) {
  .tv-toolbar { gap: 4px 6px; padding: 6px 8px; }
  .tv-toolbar h2 { grid-column: 1; grid-row: 1; font-size: 15px; }
  .tv-video-picker { grid-column: 2; grid-row: 1; padding: 5px 8px; font-size: 13px; }
  .tv-info { display: flex; padding: 4px 7px; gap: 3px 12px; }
  .tv-status { flex-basis: 100%; font-size: 13px; line-height: 19px; }
}

.tv-video-search { width: 100%; min-height: 36px; margin: 0 0 10px; padding: 6px 10px; background: #253e35; color: #fff3da; border: 1px solid #a69b74; border-radius: 6px; font-size: 14px; }
.tv-video-choice[hidden] { display: none; }