/* Duży telewizor (soon-bigtv.js; koncepcja A „Zbliżenie”: assets/concepts/tv_A.png). Klasy na <html>:
   bt-up — rekwizyty (.props: stolik, telewizor, tabliczka, przygaszenie, panel) idą nad kurtyny i fronton;
   bt-dark — przygaszenie z reflektorem; bt-big — telewizor (#tv, z tym samym odtwarzaczem) na środku ekranu.
   Wymiary w px liczy soon-bigtv.js: --bt-w (szer. telewizora), --bt-x / --bt-y (lewy górny róg), --bt-pw / --bt-px / --bt-py (panel).
   Warstwy w .props: przygaszenie 1 · panel i duchy lotu 2 · telewizor 3. Sznurki nagłówka: .bt-rig nad nagłówkiem (5). */

/* odtwarzacz wyższy niż ekran 4:3: YouTube wpisuje kadr na całą szerokość (cały widoczny), a swój tytuł u góry i logo u dołu
   kładzie na czarnych pasach poza ekranem (ucina je .tv-screen); pasy po 75 px, bo te napisy mają stałą wielkość w px */
.tv { --vid-h: calc(100% + 150px); }

html.bt-up .props { z-index: 12; }
html.bt-up .tv { z-index: 3; }
.bt-dim { position: fixed; inset: 0; z-index: 1; opacity: 0; visibility: hidden; cursor: zoom-out; transition: opacity .5s steps(5), visibility 0s .5s;
  background: radial-gradient(ellipse 46% 58% at 50% 46%, rgb(255 236 190 / .1), rgb(255 236 190 / 0) 100%), radial-gradient(ellipse 62% 72% at 50% 46%, rgb(14 9 4 / .52) 25%, rgb(14 9 4 / .86) 100%); }   /* reflektor: wokół telewizora scena w półmroku */
html.bt-dark .bt-dim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s steps(5); }

/* telewizor w trybie dużym (lot do tego układu i z powrotem robi soon-bigtv.js) */
html.bt-big .tv { position: fixed; left: var(--bt-x); top: var(--bt-y); bottom: auto; width: var(--bt-w); translate: none; }
html.bt-big .tv-sound { display: none; }
html.bt-big .tv-art { filter: sepia(.3) saturate(.8) brightness(.93) drop-shadow(10px 12px 0 rgb(14 9 4 / .4)); }
html.bt-big .tv-screen iframe { filter: grayscale(1) sepia(.55) contrast(1.18) brightness(.98); }   /* lżej niż w telewizorku: da się oglądać */
html.bt-up .tv-fx { z-index: 3; }                                   /* linie kineskopu także na planszy pauzy */
html.bt-up .tv.bt-tune .tv-snow { opacity: .62; transition: none; }   /* strojenie: przewijanie, buforowanie (obraz prześwituje) */
html.bt-up .tv.bt-tune.bt-warm .tv-snow { opacity: .94; }            /* rozgrzewanie po włączeniu: sam śnieg */
.tv.bt-blank .tv-screen > :not(.bt-crt) { opacity: 0 !important; transition: none !important; }
.bt-ghost { position: fixed; z-index: 2; pointer-events: none; transform-origin: 50% 50%; filter: sepia(.3) saturate(.8) brightness(.93); }

/* wyłączenie jak w kineskopie: jasna kreska przez środek, potem kropka */
.bt-crt { position: absolute; left: 0; top: 50%; width: 100%; height: 2.4%; translate: 0 -50%; z-index: 4; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, #fffbea 0 32%, rgb(255 246 214 / .8) 48%, rgb(255 240 200 / 0) 72%); box-shadow: 0 0 18px 6px rgb(255 244 210 / .5); }

/* pauza: plansza kontrolna z paskiem papieru (zasłania też tytuł i przycisk, które YouTube kładzie na zatrzymany obraz) */
.bt-pause { position: absolute; inset: 0; z-index: 2; visibility: hidden; }
.tv.bt-paused .bt-pause { visibility: visible; }
.bt-pause img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) sepia(.5) contrast(1.05) brightness(.96); }
.bt-pause span { position: absolute; left: 50%; bottom: 10%; translate: -50% 0; rotate: -1.5deg; padding: .55em .95em .45em; white-space: nowrap;
  background: var(--paper-light) var(--grain); border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgb(42 33 26 / .3);
  font: 700 max(10px, calc(var(--bt-w, 600px) * .022))/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }

/* metka na telewizorku: po najechaniu (na telefonie po stuknięciu); klik w nią też otwiera seans */
.bt-tag { position: absolute; left: 7%; top: -9%; z-index: 4; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; }
.bt-tag span { display: block; rotate: -4deg; padding: 3px 6px; white-space: nowrap; background: var(--paper-light); border: 1px solid var(--ink); box-shadow: 2px 2px 0 rgb(42 33 26 / .25);
  font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.tv:hover .bt-tag, .bt-tag:focus-visible, .tv.bt-hint .bt-tag { opacity: 1; pointer-events: auto; }
.bt-tag:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html.bt-up .bt-tag { display: none; }

/* panel ze skalą strojenia: wjeżdża od dołu jak z zapadni, telewizor stoi na nim (nóżki na górnej listwie); geometria okienka
   i gałek w % ryciny (zmienne --win-*, --k-*, --o-* ustawia soon-bigtv.js z tabeli PANEL); is-out = wysunięty */
.bt-panel { position: fixed; left: var(--bt-px); top: var(--bt-py); width: var(--bt-pw); aspect-ratio: var(--bt-par, 5); z-index: 2; visibility: hidden; container-type: inline-size; pointer-events: auto; }
.bt-panel.is-out { visibility: visible; }
.bt-panel-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: sepia(.3) saturate(.8) brightness(.93) drop-shadow(8px 10px 0 rgb(14 9 4 / .4)); }
.bt-scale { position: absolute; left: var(--win-l); top: var(--win-t); width: var(--win-w); height: var(--win-h); cursor: ew-resize; touch-action: none; outline: none; }
.bt-scale:focus-visible { outline: 2px solid var(--paper-light); outline-offset: 4px; }
.bt-mins span { position: absolute; top: 12%; translate: -50% 0; font: 700 2.6cqi/1 var(--font-mono); color: var(--ink); opacity: .82; pointer-events: none; }
.bt-needle { position: absolute; left: var(--p, 0%); top: -16%; height: 132%; width: auto; translate: -50% 0; pointer-events: none; filter: drop-shadow(2px 2px 0 rgb(42 33 26 / .35)); }
.bt-time { position: absolute; left: var(--p, 0%); bottom: calc(100% + 2.2cqi); translate: -50% 0; padding: .45em .6em .35em; white-space: nowrap; pointer-events: none;
  background: var(--paper-light); border: 1px solid var(--ink); box-shadow: 2px 2px 0 rgb(42 33 26 / .3); font: 700 max(10px, 1.7cqi)/1 var(--font-mono); letter-spacing: .08em; color: var(--ink);
  opacity: 0; transition: opacity .2s; }
.bt-panel.is-scrub .bt-time, .bt-scale:hover .bt-time, .bt-scale:focus-visible .bt-time { opacity: 1; }
.bt-knob { position: absolute; left: var(--k-l); top: var(--k-t); width: var(--k-w); aspect-ratio: 1; cursor: grab; touch-action: none; filter: drop-shadow(3px 4px 0 rgb(14 9 4 / .35)); }
.bt-panel.is-scrub .bt-knob { cursor: grabbing; }
.bt-off { position: absolute; left: var(--o-l); top: var(--o-t); width: var(--o-w); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.bt-off img { display: block; width: 100%; height: 100%; filter: drop-shadow(2px 3px 0 rgb(14 9 4 / .35)); }
.bt-off::after { content: "wył."; position: absolute; left: 50%; top: calc(100% + .5cqi); translate: -50% 0; padding: .35em .5em .25em; white-space: nowrap;
  background: var(--paper-light); border: 1px solid var(--ink); font: 700 max(9px, 1.3cqi)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.bt-off:focus-visible { outline: 2px solid var(--paper-light); outline-offset: 3px; }

/* sznurki z haczykami (nagłówek wciągany na czas seansu); bez ryciny sznurka — gładka linia */
.bt-rig { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.bt-cord { position: absolute; top: -40px; width: 5px; margin-left: -2.5px; background: var(--bt-cord, linear-gradient(#9b8a6c, #9b8a6c)) center top / 100% auto repeat-y; filter: drop-shadow(2px 3px 0 rgb(42 33 26 / .18)); }
.bt-cord::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 12px; height: 32px; translate: -50% 0; background: var(--eng-chain_hook) center bottom / contain no-repeat; }

@media (prefers-reduced-motion: reduce) { .bt-dim, html.bt-dark .bt-dim { transition-duration: 0s; transition-delay: 0s; } }