.tv-focus { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; margin: 0; border: 0; overflow: clip; color: var(--ink); background: transparent; }
.tv-focus::backdrop { background: rgb(22 12 22 / .68); backdrop-filter: blur(5px); }
.tv-focus-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tv-focus-stage .set-image { filter: none; }
.tv-focus-stage .tv-screen { z-index: 2; pointer-events: auto; }
.tv-focus-stage .tv-screen video { filter: saturate(.88) contrast(1.08) brightness(.96); }
.tv-focus-stage .tv-screen:focus-visible { outline-offset: -9px; }
/* Power on at the original cabinet position, then carry the lit picture into
   the close-up. This selector stays unchanged across both controller phases. */
.tv-focus[data-power="on"] .tv-tuning { animation:tv-warmup 220ms ease-out both; }
.tv-focus[data-power="on"] #tv-preview { animation:tv-picture 220ms ease-out both; }
.tv-focus[data-power-paused="true"] .tv-tuning,.tv-focus[data-power-paused="true"] #tv-preview { animation-play-state:paused; }
@keyframes tv-warmup {
  0% { transform:scale(.08,.006);opacity:.6; }
  30% { transform:scale(.92,.012);opacity:.85; }
  65% { transform:scale(1,.95);opacity:.18; }
  80%,100% { transform:scale(1);opacity:0; }
}
@keyframes tv-picture {
  0%,15% { opacity:0; }
  55% { opacity:.65; }
  80%,100% { opacity:1; }
}
.set-layer[data-tv-focus-source="true"] { visibility: hidden; }
.tv-focus-header { position: absolute; inset: var(--edge-top) var(--gutter) auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; z-index: 3; }
.tv-focus-header h2 { margin: 0; font-size: 15px; font-weight: 450; line-height: 1.4; }
.tv-focus-footer { position: absolute; bottom: var(--edge-bottom); left: var(--gutter); right: var(--gutter); z-index: 3; display: flex; align-items: center; justify-content: center; gap: 24px; }
.tv-focus-footer p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.tv-focus-footer strong { color: var(--ink); font-weight: 650; }
.tv-focus[data-phase="closing"] .tv-focus-header, .tv-focus[data-phase="closing"] .tv-focus-footer { opacity: 0; }
.tv-focus-header, .tv-focus-footer { transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1); }
/* Preserve the cabinet travel and light-up without re-filtering the whole
   layered set behind the dialog on a phone, including landscape orientation. */
@media (max-width: 800px), (pointer: coarse) {
  .tv-focus::backdrop { background: rgb(22 12 22 / .76); backdrop-filter: none; }
}
@media (max-width: 600px) {
  .tv-focus-header h2 { max-width: 145px; font-size: 13px; }
  .tv-focus-header { gap: 12px; }
  .tv-focus-header .quiet-button { font-size: 13px; }
  .tv-focus-footer { align-items: center; flex-direction: column; gap: 10px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .tv-focus-footer p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-focus[data-power="on"] .tv-tuning,.tv-focus[data-power="on"] #tv-preview { animation: none; }
  .tv-focus::backdrop { backdrop-filter: none; }
  .tv-focus-header, .tv-focus-footer { transition: none; }
}