/* ТВ-версия: «10-футовый» интерфейс под пульт. Размеры от высоты экрана —
   приставки отдают то 1920×1080, то 960×540 CSS-пикселей. Без blur и тяжёлых
   теней: на Mi Box и подобных они тормозят видео. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #000; color: #eef0f3; font: 500 2.4vh/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
button { font: inherit; }
.hidden { display: none !important; }

.tv { position: fixed; inset: 0; }
.tv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* верхняя плашка и нижняя панель прячутся вместе */
.tv-top, .tv-bar { position: absolute; left: 0; right: 0; transition: opacity 0.25s, transform 0.25s; }
.tv.idle .tv-top { opacity: 0; transform: translateY(-1vh); }
.tv.idle .tv-bar { opacity: 0; transform: translateY(1vh); pointer-events: none; }
.tv-top { top: 0; display: flex; align-items: center; gap: 3vh; padding: 3vh 4vh 6vh; background: linear-gradient(#000c, #0000); }
.tv-brand { font-size: 2.8vh; font-weight: 900; letter-spacing: -0.02em; }
.tv-brand b { color: #ffb000; }
.tv-title { display: flex; flex: 1; align-items: center; gap: 1.6vh; min-width: 0; }
.tv-title strong { overflow: hidden; font-size: 3.2vh; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.tv-live { flex: none; padding: 0.4vh 1.2vh; border-radius: 0.8vh; background: #e03131; color: #fff; font-size: 1.9vh; font-weight: 900; letter-spacing: 0.08em; }
.tv-live.behind { background: #495057; }
.tv-meta { display: flex; gap: 2.4vh; color: #ced4da; font-size: 2.2vh; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tv-bar { bottom: 0; padding: 10vh 4vh 3.5vh; background: linear-gradient(#0000, #000c 40%, #000e); }
.tv-seek { margin-bottom: 2.4vh; }
.tv-seek-track { position: relative; height: 0.9vh; border-radius: 1vh; background: #ffffff40; }
.tv-seek-track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #ffb000; }
.tv-seek-track b { position: absolute; top: 50%; width: 2.2vh; height: 2.2vh; margin: -1.1vh 0 0 -1.1vh; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.4vh #0008; }
#seek-marks i { position: absolute; top: -0.5vh; bottom: -0.5vh; width: 0.5vh; margin-left: -0.25vh; border-radius: 0.3vh; background: #fff; box-shadow: 0 0 0 0.2vh #000a; }
.tv-seek-labels { display: flex; justify-content: space-between; margin-top: 1vh; color: #ced4da; font-size: 2vh; font-variant-numeric: tabular-nums; }

/* кнопки: своими иконками (эмодзи на приставках рисуются квадратами),
   слева управление просмотром, справа вид и настройки */
.tv-buttons { display: flex; align-items: center; gap: 1.2vh; }
.tv-gap { flex: 1; }
.tv-buttons button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.1vh;
  min-height: 7vh;
  padding: 0 2.4vh;
  border: 0.35vh solid transparent;
  border-radius: 1.4vh;
  background: #1d1d20e6;
  color: #eef0f3;
  font-size: 2.4vh;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.tv-buttons svg { width: 2.8vh; height: 2.8vh; flex: none; fill: currentColor; }
.tv-buttons button em { font-style: normal; }
.tv-buttons .tv-main { min-width: 20vh; justify-content: center; }
.tv-buttons .ic-play, .tv-buttons .paused .ic-pause { display: none; }
.tv-buttons .paused .ic-play { display: block; }
.tv-dot { width: 1.3vh; height: 1.3vh; border-radius: 50%; background: #868e96; }
/* «включено» — жёлтая черта снизу и жёлтый значок, а не подложка */
.tv-buttons button.on svg, .tv-buttons button.on .tv-dot { color: #ffb000; background-color: currentColor; }
.tv-buttons button.on svg { background-color: transparent; }
#btn-live.on .tv-dot { background: #e03131; }
.tv-buttons button.on::after { content: ""; position: absolute; left: 2.4vh; right: 2.4vh; bottom: 0.9vh; height: 0.35vh; border-radius: 0.3vh; background: #ffb000; }
/* фокус с пульта — главное, что должно быть видно издалека */
.tv-buttons button:focus, .tv-panel li:focus { outline: none; border-color: #ffb000; background: #ffb000; color: #1a1200; transform: scale(1.06); }
.tv-buttons button:focus svg, .tv-buttons button:focus .tv-dot { color: #1a1200; }
.tv-buttons button:focus::after { background: #1a1200; }
#btn-live.on:focus .tv-dot { background: #1a1200; }

.tv-osd { position: absolute; top: 42%; left: 50%; padding: 2vh 3.6vh; border-radius: 2vh; background: #000c; font-size: 4vh; font-weight: 800; transform: translate(-50%, -50%); }

.tv-chat {
  position: absolute;
  top: 12vh;
  right: 2vh;
  bottom: 30vh;
  width: 30vw;
  overflow: hidden;
  padding: 1.6vh 2vh;
  border-radius: 1.6vh;
  background: #000000a8;
  -webkit-mask-image: linear-gradient(#0000, #000 12%);
  mask-image: linear-gradient(#0000, #000 12%);
}
.tv.idle .tv-chat { bottom: 4vh; }
.tv-chat ol { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; margin: 0; padding: 0; list-style: none; }
.tv-chat li { padding: 0.5vh 0; font-size: 2.3vh; line-height: 1.3; overflow-wrap: anywhere; }
.tv-chat .who { font-weight: 800; }
.tv-chat .src { display: inline-block; margin-right: 0.8vh; padding: 0 0.6vh; border-radius: 0.5vh; font-size: 1.5vh; font-weight: 900; vertical-align: 0.3vh; }
.tv-chat .src.kick { background: #53fc18; color: #000; }
.tv-chat .src.vk { background: #4c9bff; color: #fff; }
.tv-chat img { height: 3vh; vertical-align: -0.8vh; }
.tv-chat .mention { color: #ffb000; font-weight: 700; }

.tv-offline { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.6vh; text-align: center; background: radial-gradient(#1c1a14, #000 70%); }
.tv-offline img { width: 16vh; }
.tv-offline h1 { margin: 0; font-size: 6vh; font-weight: 900; }
.tv-offline p { margin: 0; color: #ced4da; font-size: 2.8vh; }

.tv-panel { position: absolute; top: 6vh; right: 4vh; bottom: 6vh; width: 44vw; display: flex; flex-direction: column; padding: 3.2vh; border-radius: 2vh; background: #141416f5; box-shadow: 0 0 0 0.25vh #ffffff1f; }
.tv-panel h2 { margin: 0 0 2vh; font-size: 3.4vh; }
.tv-panel ol { flex: 1; margin: 0; padding: 0; overflow: auto; list-style: none; scrollbar-width: none; }
.tv-panel li { display: flex; gap: 2vh; padding: 1.4vh 2vh; border: 0.35vh solid transparent; border-radius: 1.2vh; font-size: 2.6vh; }
.tv-panel li small { flex: none; min-width: 9vh; color: inherit; opacity: 0.75; font-variant-numeric: tabular-nums; }
.tv-panel li.current { color: #ffb000; }
.tv-panel li.current::after { content: "сейчас"; margin-left: auto; padding-left: 2vh; font-size: 2vh; opacity: 0.8; }
.tv-panel li.empty { color: #adb5bd; }
/* текущий пункт под фокусом: жёлтый текст терялся на жёлтом фоне */
.tv-panel li.current:focus { color: #1a1200; }
.tv-hint { margin: 2vh 0 0; color: #adb5bd; font-size: 2vh; }