/* Persistent TV furniture and procedural transmission screens. */
:root { --tv-dock-height: 0px; --tv-screen-height: 100vh; --tv-control-gutter: 194px; }
@supports (height: 100dvh) { :root { --tv-screen-height: 100dvh; } }
#app { padding: 0; }
.tv-stage { position: absolute; inset: 0 0 var(--tv-dock-height); overflow: hidden; outline: none; }
.tv-channel { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink-muted) var(--ground); scroll-padding-top: 72px; scroll-padding-bottom: 24px; -webkit-overflow-scrolling: touch; }
.tv-tuning, .tv-clip-layer { position: absolute; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.tv-clip-layer { display: none; z-index: 51; }
.tv-clip-layer.is-playing { display: block; }
.tv-clip-layer video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.tv-osd { position: absolute; z-index: 55; top: max(20px, env(safe-area-inset-top, 0px)); left: max(24px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 48px); padding: 7px 10px; background: #090909e6; color: #fff; font: 11px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.tv-osd-channel { color: #fff; font-weight: 700; white-space: nowrap; }
.tv-osd-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c8c8c8; }
.tv-hint { position: absolute; z-index: 65; bottom: 326px; right: 24px; max-width: 188px; padding: 12px 14px; background: #121212ed; color: #dedede; border: 1px solid #464646; font: 10px/17px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.tv-hint::after { content: ''; position: absolute; right: 48px; bottom: -7px; width: 11px; height: 11px; border-right: 1px solid #464646; border-bottom: 1px solid #464646; background: #121212; transform: rotate(45deg); }
.tv-hint span { display: block; margin-top: 4px; color: #aeb0b1; }
.tv-announcement, .tv-volume-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Molded black plastic, lavender rubber, and a segmented volume rocker. */
.tv-controls-layer { position: absolute; inset: 0; z-index: 70; pointer-events: none; }
.tv-controls-layer > * { pointer-events: auto; }
.tv-remote { position: absolute; right: max(27px, env(safe-area-inset-right, 0px)); bottom: max(24px, env(safe-area-inset-bottom, 0px)); z-index: 80; width: 160px; box-sizing: border-box; padding: 15px 21px 18px; border: 2px solid #323435; border-bottom: 6px solid #101213; border-radius: 16px 16px 23px 23px; background: linear-gradient(107deg, #26292a, #191c1d 17%, #1d2021 75%, #0e1011); color: #c3c7d1; box-shadow: inset 0 0 0 4px #080a0b, inset 0 0 0 5px #383b3c, inset 7px 0 9px #ffffff08, 3px 6px 0 #08090a, 7px 16px 20px #0008; transform: perspective(700px) rotateX(6deg) rotateZ(-4deg); transform-origin: center bottom; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.tv-remote-utilities { display: flex; align-items: start; justify-content: space-between; gap: 11px; }
.tv-utility { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 1; min-width: 0; min-height: 34px; padding: 0; border: 0; background: none; color: #c5c9d2; font: 9px/12px Arial, sans-serif; letter-spacing: .035em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tv-utility i { width: 39px; height: 13px; border: 1px solid #737d99; border-radius: 14px; background: linear-gradient(#a0aac3, #808aa6); box-shadow: inset 0 1px 1px #e3e8ff4d, 0 0 0 3px #0c0e10, 0 2px 2px 3px #0008; }
.tv-utility[aria-expanded="true"] i { background: #bbc2dc; box-shadow: inset 0 1px 1px #fff6, 0 0 0 3px #090b0c, 0 0 6px #a9b3d955; }
.tv-remote-mini-brand, .tv-utility-volume { display: none; }
.tv-remote-labels { display: grid; grid-template-columns: 46px 46px; justify-content: space-between; margin-top: 9px; margin-bottom: 8px; text-align: center; color: #c6cad0; font: 11px/12px Arial, sans-serif; letter-spacing: .025em; }
.tv-remote-controls { position: relative; display: grid; grid-template-columns: 46px 46px; grid-template-rows: 46px 46px; justify-content: space-between; gap: 7px 12px; }
.tv-remote-controls::before { content: ''; position: absolute; z-index: -1; left: -4px; top: -5px; width: 52px; height: 108px; border: 1px solid #393d41; border-radius: 31px; background: linear-gradient(100deg, #080a0c, #24272a 50%, #090a0b); box-shadow: inset 1px 1px 2px #000; }
.tv-key { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 0; border: 1px solid #929bb5; border-right-color: #586079; border-bottom-color: #555f7a; background: linear-gradient(115deg, #a0a8c1, #8893b0 58%, #7984a2); color: #515d7b; box-shadow: inset 0 1px 2px #e1e6ff66, inset -1px -1px 1px #4f5c7759, 0 3px 2px #0009; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 100ms, filter 100ms, box-shadow 100ms; }
.tv-key-label { display: none; }
.tv-key-sign { display: block; font: 36px/38px Arial, sans-serif; font-weight: 400; text-shadow: 0 1px 1px #d5dcf282, 0 -1px 1px #49536b55; }
.tv-key-volume-down { grid-column: 1; grid-row: 2; border-radius: 4px 4px 25px 25px; }
.tv-key-volume-up { grid-column: 1; grid-row: 1; border-radius: 25px 25px 4px 4px; }
.tv-key-channel-down { grid-column: 2; grid-row: 2; border-radius: 50%; }
.tv-key-channel-up { grid-column: 2; grid-row: 1; border-radius: 50%; }
.tv-key-channel-down::before, .tv-key-channel-up::before { content: ''; position: absolute; z-index: -1; inset: -5px; border: 1px solid #393d41; border-radius: 50%; background: #090b0d; }
.tv-key:hover, .tv-utility:hover i { filter: brightness(1.12); }
.tv-key:active, .tv-utility:active i { transform: translateY(2px); box-shadow: inset 0 1px 3px #3a466777, 0 1px 0 #080a0c; }
.tv-key:focus-visible, .tv-utility:focus-visible { outline: 2px solid #ffe600; outline-offset: 5px; box-shadow: none; }
.tv-remote-meta { display: flex; justify-content: space-between; gap: 3px; margin-top: 12px; color: #a8acb6; font: 6px/8px Arial, sans-serif; letter-spacing: .05em; }
.tv-remote-brand { margin-top: 10px; text-align: center; color: #dce1ed; font: 900 24px/26px Georgia, 'Times New Roman', serif; letter-spacing: -.025em; white-space: nowrap; text-shadow: 0 1px 1px #ffffff20; }
.tv-remote-badge { width: 100%; box-sizing: border-box; margin: 8px auto 0; height: 19px; border-radius: 3px; color: #242a35; background: #b8c1d8; text-align: center; font: 17px/19px Arial, sans-serif; letter-spacing: .11em; box-shadow: inset 0 1px 0 #e6edff4d; }

/* Settings occupies the whole channel, with the remote above the blue picture. */
.tv-settings-overlay { position: absolute; inset: 0 0 var(--tv-dock-height); z-index: 70; display: flex; background: #104cce; overflow: hidden; }
.tv-settings-channel { display: flex; flex: 1; min-width: 0; min-height: 0; }
.tv-settings-screen { --menu-inset: clamp(24px, 6vw, 100px); position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: max(32px, env(safe-area-inset-top, 0px)) var(--menu-inset) max(24px, env(safe-area-inset-bottom, 0px)); overflow: hidden; background: radial-gradient(ellipse at 47% 42%, #1559da 0%, #104cce 56%, #0a39a4 100%); color: #f2f4ee; font: 700 clamp(24px, 3vw, 42px)/1.3 var(--font-mono); text-transform: uppercase; text-shadow: 0 0 3px #d5f1ff99, 1px 0 #fff3; outline: none; }
.tv-settings-screen::after { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(0deg, #00154a12 0 1px, transparent 1px 3px); box-shadow: inset 0 0 20px #00103e66; }
.tv-settings-title { flex: none; margin: 0 0 clamp(24px, 5vh, 54px); text-align: center; font: inherit; font-size: 1.2em; line-height: 1.3; letter-spacing: .025em; }
.tv-settings-items, .tv-settings-instructions, .tv-settings-actions { margin-right: max(0px, calc(var(--tv-control-gutter) - var(--menu-inset))); }
.tv-settings-items { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a5c3ee #1646ac; scroll-padding: 3px; overscroll-behavior: contain; }
.tv-settings-item { display: grid; grid-template-columns: .8em 1.5em minmax(0, 1fr) auto; align-items: center; gap: 4px; width: 100%; min-height: 1.7em; box-sizing: border-box; padding: 3px 5px 3px 0; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left; font: inherit; line-height: 1.3; text-transform: inherit; text-shadow: inherit; cursor: pointer; }
.tv-settings-items.is-unnumbered .tv-settings-item { grid-template-columns: .8em minmax(0, 1fr) auto; }
.tv-settings-item.is-selected { color: #ffffb3; background: #031c6a35; }
.tv-settings-item:hover { background: #031c6a55; }
.tv-settings-arrow { font-size: .9em; color: #ffffad; }
.tv-settings-number { white-space: nowrap; }
.tv-settings-label { overflow-wrap: anywhere; }
.tv-settings-value { margin-left: 8px; max-width: 160px; text-align: right; font-size: .77em; }
.tv-settings-item:focus-visible { outline: 1px solid #ffffbb; outline-offset: -1px; box-shadow: none; }
.tv-settings-instructions { display: flex; flex-direction: column; flex: none; margin-top: 20px; font-size: clamp(14px, 1.7vw, 23px); line-height: 1.4; letter-spacing: .025em; }
.tv-settings-actions { display: flex; justify-content: space-between; flex: none; gap: 12px; margin-top: 3px; }
.tv-settings-actions button { min-height: 44px; border: 0; padding: 2px 0; color: #ecf3ff; background: transparent; font: 700 12px/18px var(--font-mono); text-shadow: inherit; cursor: pointer; }
.tv-settings-actions button:only-child { margin-left: auto; }
.tv-settings-actions button:focus-visible { outline: 1px solid #ffffbb; outline-offset: 3px; box-shadow: none; }

/* Low contrast grain, restrained color bleed, and a slow tracking band. */
.tv-signal { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #303234; color: #fff; }
.tv-signal-noise, .tv-signal-bars, .tv-signal-scanlines, .tv-signal-interference { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tv-signal-noise { opacity: .8; image-rendering: pixelated; }
.tv-signal-bars { background: linear-gradient(90deg, #bfbfbf 0 14.285%, #bfbf00 14.285% 28.57%, #00bfbf 28.57% 42.855%, #00bf00 42.855% 57.14%, #bf00bf 57.14% 71.425%, #bf0000 71.425% 85.71%, #0000bf 85.71%); mix-blend-mode: soft-light; opacity: .14; animation: tv-color-drift 7s ease-in-out infinite; }
.tv-signal-scanlines { z-index: 1; background: repeating-linear-gradient(0deg, #0004 0px 1px, transparent 1px 4px); box-shadow: inset 0 0 15vw #0009; }
.tv-signal-interference { top: -24%; height: 18%; background: linear-gradient(0deg, transparent, #c8dbde15 20%, #0b10122b 35%, transparent); animation: tv-tracking 6s linear infinite; }
.tv-signal-caption { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100% - 48px); text-align: center; text-shadow: 2px 0 #0006, -1px 0 #0006; }
.tv-signal-kicker, .tv-signal-subtitle { display: block; font: 10px/17px var(--font-mono); letter-spacing: .16em; }
.tv-signal-kicker { color: #d8dcda; }
.tv-signal-title { margin: 15px 0 13px; font: 400 clamp(42px, 8vw, 116px)/.9 var(--font-display); letter-spacing: -.055em; white-space: nowrap; }
.tv-signal-subtitle { color: #d8dcda; }
.tv-signal-code { position: absolute; bottom: 30px; left: 26px; font: 9px/14px var(--font-mono); letter-spacing: .12em; color: #d5d8d5; }
.tv-signal-tuning .tv-signal-bars { opacity: .84; mix-blend-mode: normal; animation: none; }
.tv-signal-tuning .tv-signal-noise { z-index: 1; opacity: .26; mix-blend-mode: screen; }
.tv-signal-tuning .tv-signal-caption { padding: 12px 16px; background: #080808e0; }
.tv-signal-tuning .tv-signal-kicker, .tv-signal-tuning .tv-signal-subtitle, .tv-signal-tuning .tv-signal-code { display: none; }
.tv-signal-tuning .tv-signal-title { font: 700 12px/18px var(--font-mono); letter-spacing: .2em; margin: 0; }
.tv-signal-tuning .tv-signal-interference { z-index: 3; animation-duration: 350ms; opacity: .7; }
.tv-signal-still .tv-signal-bars, .tv-signal-still .tv-signal-interference { animation: none; }
@keyframes tv-color-drift { 0%, 34%, 67%, 100% { opacity: .09; transform: translateX(0); } 44%, 54% { opacity: .3; transform: translateX(-1.5%); } }
@keyframes tv-tracking { from { transform: translateY(0); } to { transform: translateY(760%); } }

@media (max-width: 767px) {
  :root { --tv-dock-height: calc(100px + env(safe-area-inset-bottom, 0px)); --tv-control-gutter: 0px; }
  .tv-osd { top: max(14px, env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); padding: 5px 8px; max-width: calc(100% - 32px); gap: 9px; font-size: 9px; line-height: 15px; }
  .tv-remote { inset: auto 0 0; width: 100%; height: var(--tv-dock-height); padding: 5px max(10px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); border: 0; border-top: 1px solid #3e4349; border-radius: 0; transform: none; box-shadow: 0 -4px 18px #0005, inset 0 1px 0 #ffffff0c; background: linear-gradient(110deg, #222629, #14181b); }
  .tv-remote-utilities { align-items: center; justify-content: flex-start; height: 34px; margin-bottom: 5px; gap: 12px; }
  .tv-remote-mini-brand { display: block; margin-right: auto; color: #dce1ed; font: 900 13px/18px Georgia, 'Times New Roman', serif; letter-spacing: -.04em; white-space: nowrap; }
  .tv-utility { flex: none; min-width: 44px; min-height: 32px; padding: 0 5px; font: 8px/12px var(--font-mono); letter-spacing: .025em; }
  .tv-utility i { display: none; }
  .tv-utility-settings { color: #d2d9ed; }
  .tv-utility[aria-expanded="true"] { color: #ffffbb; }
  .tv-utility-volume { display: block; color: #aab4ce; min-width: 43px; text-align: right; font: 7px/12px var(--font-mono); white-space: nowrap; }
  .tv-remote-labels, .tv-remote-meta, .tv-remote-brand, .tv-remote-badge { display: none; }
  .tv-remote-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 44px; gap: 10px; margin: 0; height: 44px; }
  .tv-remote-controls::before, .tv-key-channel-down::before, .tv-key-channel-up::before { display: none; }
  .tv-key { grid-column: auto; grid-row: auto; min-height: 44px; border-radius: 8px; gap: 6px; padding: 6px 3px; }
  .tv-key-label { display: inline; color: #303c5d; text-shadow: 0 1px 0 #e2e8ff44; font: 700 10px/14px var(--font-mono); }
  .tv-key-sign { font-size: 22px; line-height: 22px; }
  .tv-hint { right: 12px; bottom: calc(var(--tv-dock-height) + 15px); max-width: min(240px, calc(100% - 56px)); font-size: 9px; line-height: 15px; padding: 9px 11px; }
  .tv-hint::after { right: 28px; }
  .tv-settings-screen { --menu-inset: 20px; padding: max(24px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px)); font-size: clamp(18px, 4.5vw, 26px); }
  .tv-settings-title { margin-bottom: 28px; }
  .tv-settings-item { min-height: 44px; gap: 2px; }
  .tv-settings-value { max-width: 95px; margin-left: 4px; }
  .tv-settings-instructions { margin-top: 16px; font-size: 12px; line-height: 18px; }
  .tv-settings-actions button { font-size: 11px; }
  .tv-signal-kicker, .tv-signal-subtitle { font-size: 8px; line-height: 14px; letter-spacing: .07em; }
  .tv-signal-code { left: 16px; bottom: 20px; font-size: 8px; }
}
@media (max-height: 540px) {
  .tv-settings-screen { padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-bottom: 7px; font-size: 20px; }
  .tv-settings-title { margin-bottom: 7px; font-size: 20px; line-height: 24px; }
  .tv-settings-instructions { margin-top: 7px; font-size: 9px; line-height: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-signal-bars, .tv-signal-interference { animation: none; }
  .tv-key { transition: none; }
}
.tv-effects-reduced .sd-trip-ch, .tv-effects-reduced .sd-trip-tiles { display: none; }
.tv-effects-reduced .sd-trip-img { opacity: 1; }
.tv-effects-reduced .sd-marquee-track { animation: none; }
.tv-effects-reduced .sd-zoom-img { transform: none; transition: none; }
.tv-effects-reduced .sd-zoom-hint { display: none; }

/* The room supplies a physical remote; its TV picture uses the entire iframe. */
#app.tv-room-mode { --tv-dock-height: 0px; --tv-control-gutter: 0px; }

/* Grid browsing is opt-in for the room. Only the incoming channel is mounted. */
.tv-grid-mode .tv-osd { display: none; }
.tv-slide-right { animation: tv-slide-right 320ms cubic-bezier(.2,.7,.25,1) both; }
.tv-slide-left { animation: tv-slide-left 320ms cubic-bezier(.2,.7,.25,1) both; }
.tv-slide-down { animation: tv-slide-down 320ms cubic-bezier(.2,.7,.25,1) both; }
.tv-slide-up { animation: tv-slide-up 320ms cubic-bezier(.2,.7,.25,1) both; }
@keyframes tv-slide-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes tv-slide-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes tv-slide-down { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tv-slide-up { from { transform: translateY(-100%); } to { transform: none; } }
.tv-effects-reduced .tv-channel { animation: none; }
@media (prefers-reduced-motion: reduce) { .tv-channel { animation: none; } }

/* The CRT volume readout belongs to the picture, including in the 3D room. */
.tv-volume-display { position: absolute; z-index: 75; left: max(24px, env(safe-area-inset-left, 0px)); right: calc(var(--tv-control-gutter) + 24px); bottom: calc(var(--tv-dock-height) + 36px); max-width: 400px; box-sizing: border-box; padding: 14px 18px 16px; background: #001006d9; border: 1px solid #42ec572e; color: #79ff81; font: 700 clamp(18px, 2.4vw, 28px)/1.1 var(--font-mono); letter-spacing: .07em; text-shadow: 0 0 3px #00ff4580, 1px 1px #00250a; pointer-events: none; user-select: none; }
.tv-volume-heading { display: flex; justify-content: space-between; gap: 16px; }
.tv-volume-blocks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.tv-volume-blocks i { height: 17px; border: 1px solid #79ff8159; background: #19422680; }
.tv-volume-blocks i.is-lit { background: #79ff81; box-shadow: 0 0 5px #33ff4166; border-color: #a9ffac; }
@media (max-width: 767px), (max-height: 460px) {
  .tv-volume-display { left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(var(--tv-dock-height) + 18px); max-width: 360px; padding: 12px 14px; font-size: 20px; }
  .tv-volume-blocks { margin-top: 9px; }
  .tv-volume-blocks i { height: 13px; }
}