/* Режим телевизора: эфир на весь экран, крупные подписи (видно с 3 метров), ничего нажимать не нужно */
:root { --fg: #fff; --muted: #e8e4dc; --accent: #ffb54a; --live: #e0362c; --ink: #1d1206; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--fg); font: 20px/1.4 "Onest", system-ui, sans-serif; overflow: hidden; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tv { position: fixed; inset: 0; }
.tv.idle { cursor: none; }
#v, #still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.2s ease; background: #000; }
.fading #v, .fading #still { opacity: 0; }
.shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0) 28%, rgba(0,0,0,0) 55%, rgba(0,0,0,.78)); pointer-events: none; }
.clock { position: absolute; top: clamp(16px, 4vh, 48px); right: clamp(16px, 4vw, 64px); text-align: right; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.clock b { display: block; font: 800 clamp(48px, 9vw, 132px)/1 "Onest", sans-serif; letter-spacing: -0.02em; }
.clock span { font-size: clamp(18px, 2.4vw, 34px); color: var(--muted); }
.place { position: absolute; left: clamp(16px, 4vw, 64px); right: clamp(16px, 4vw, 64px); bottom: clamp(28px, 7vh, 80px); text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.tag { display: inline-block; font-weight: 800; font-size: clamp(16px, 2vw, 26px); padding: 4px 14px; border-radius: 8px; background: var(--live); color: #fff; text-shadow: none; }
.tag.rec { background: #f1ede6; color: #1d1206; }
.pname { margin: 10px 0 0; font: 800 clamp(36px, 6.4vw, 96px)/1.02 "Onest", sans-serif; letter-spacing: -0.01em; }
.ptime { margin: 6px 0 0; font-size: clamp(22px, 3vw, 44px); color: var(--muted); }
.psay { margin: 8px 0 0; font: italic 600 clamp(24px, 3.2vw, 46px)/1.15 "Cormorant Garamond", Georgia, serif; color: #fff; max-width: 1100px; }
.next { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255,255,255,.12); }
.next i { display: block; height: 100%; width: 0; background: var(--accent); }
.controls { position: absolute; top: clamp(16px, 4vh, 48px); left: clamp(16px, 4vw, 64px); display: flex; flex-wrap: wrap; gap: 10px; max-width: 60vw; transition: opacity .4s; }
.idle .controls { opacity: 0; pointer-events: none; }
.controls button { min-height: 56px; min-width: 56px; padding: 12px 20px; border-radius: 999px; border: 2px solid rgba(255,255,255,.75); background: rgba(0,0,0,.62); color: #fff; font: 600 20px/1 "Onest", sans-serif; cursor: pointer; }
.controls button:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
.controls button.on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.empty { position: absolute; inset: auto 0 45% 0; text-align: center; font-size: 32px; padding: 0 24px; }
@media (max-width: 600px) { .controls { max-width: 100%; right: 16px; top: auto; bottom: 46%; } .clock { top: 12px; } }
@media (prefers-reduced-motion: reduce) { #v, #still { transition: none; } }
.langlist { position: fixed; z-index: 50; display: grid; background: #161920; border: 1px solid #3a404c; border-radius: 14px; padding: 6px; }
.langlist button { background: none; border: 0; color: #fff; font: 600 20px/1 "Onest", sans-serif; padding: 14px 18px; text-align: left; border-radius: 10px; cursor: pointer; }
.langlist button[aria-selected="true"], .langlist button:hover { background: #2a2f39; }