/* Экран телевизора (blox62 #1). Пишется НЕ как остальной фронт — и вот почему:

   · НИКАКИХ переменных дизайн-системы, grid и gap. Браузеру телевизора бывает семь лет
     (Tizen/webOS 2017 ≈ Chrome 47…56): переменные там появились не везде, grid — нет, а
     flex-gap не понимает даже Chrome 83. Неподдержанное свойство не ругается, оно молча
     игнорируется — и вёрстка расползается без единой ошибки на экране, который стоит в чужой
     гостиной и до которого не дотянуться отладчиком. Поэтому здесь только то, что работало в
     2016-м: flex без gap, отступы margin, цвета числом.
   · РАССТОЯНИЕ ПРОСМОТРА — три метра, а не тридцать сантиметров. Всё крупное: базовый кегль
     считается от ширины экрана (vw), кнопки — с ладонь.
   · ПОДСВЕТКА ФОКУСА ВМЕСТО НАВЕДЕНИЯ. У пульта нет курсора: единственный способ понять, что
     сейчас нажмётся «ОК», — видеть выделенный элемент. Класс .on ставит наш код (tv.js), а не
     :focus — старые телевизоры фокус на <div> не дают, а на <button> рисуют свою рамку, которую
     с трёх метров не видно.
   · OVERSCAN. Телевизор обрезает края картинки (до 5% с каждой стороны) — поэтому поля большие,
     и ни одна надпись не прижата к краю. */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #0f1420; color: #eef2f8;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 2.2vw;
  overflow: hidden;                 /* лист скроллим сами, страница не ездит */
}
.screen { padding: 4vh 4vw; height: 100%; display: flex; flex-direction: column; }
/* ПРЯЧЕМ ЧЕРЕЗ CSS, А НЕ ТОЛЬКО АТРИБУТОМ. Правило .screen{display:flex} перебивает
   встроенное [hidden]{display:none} браузера — без строки ниже все три экрана стоят друг под
   другом сразу (проверено снимком 18.09.2026: страница высотой в три экрана, первый пустой,
   потому что поверх него лёг видео-элемент второго). Тот же шрам, что в правиле проекта
   «display: в CSS бьёт атрибут hidden». */
.screen[hidden] { display: none; }
/* nowrap — имя из трёх слов с дефисом: без него телевизор рвёт его по дефису на две строки и
   шапка плеера подпрыгивает на одну строку вниз. */
.brand { color: #ffb23f; font-weight: 700; letter-spacing: .04em; font-size: 2.6vw;
         white-space: nowrap; }
.brand.small { font-size: 1.6vw; opacity: .9; }
h1 { font-size: 3.4vw; margin: 2vh 0 1vh; font-weight: 700; }
.hint { color: #9fb0c8; font-size: 1.7vw; margin: 0 0 3vh; line-height: 1.4; }

/* --- сопряжение --- */
.cells { margin: 1vh 0 3vh; }
.cell {
  display: inline-block; width: 7vw; height: 10vh; line-height: 10vh; margin-right: 1vw;
  text-align: center; font-size: 5vw; font-weight: 700;
  background: #1b2334; border: 0.3vw solid #2c3850; border-radius: 1vw;
}
.cell.filled { border-color: #ffb23f; }
/* ширина под РЯД ИЗ ТРЁХ клавиш, включая широкие «Стереть»/«Готово»: не влезут —
   перенесутся на пятый ряд, и сетка фокуса (ряды по три) разойдётся с тем, что видно. */
.pad { max-width: 40vw; }
.key {
  display: inline-block; width: 8.5vw; height: 8vh; line-height: 8vh; margin: 0 1vw 1.2vh 0;
  text-align: center; font-size: 3vw; font-weight: 700; color: #eef2f8;
  background: #1b2334; border: 0.3vw solid #2c3850; border-radius: 1vw; cursor: default;
}
.key.wide { width: 12vw; font-size: 1.6vw; }
.key.on, .cbtn.on, .track.on, .foot-btn.on {
  /* Подсветка фокуса — заливкой и обводкой, БЕЗ тени: box-shadow как «ореол» у части старых
     телевизоров не рисуется вовсе, и выделенная кнопка переставала отличаться от соседней. */
  background: #ffb23f; color: #11182a; border-color: #ffd48a;
  outline: 0.3vw solid #ffd48a;
}
.msg { margin-top: 2vh; font-size: 1.8vw; color: #ff8f8f; min-height: 3vh; }
.msg.ok { color: #7fe0a6; }

/* --- плеер --- */
.top { margin-bottom: 2vh; }
.who { color: #9fb0c8; font-size: 1.6vw; margin-bottom: 1vh; }
.now { font-size: 3vw; font-weight: 700; margin-bottom: 1.5vh;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 1.2vh; background: #1b2334; border-radius: 1vh; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: #ffb23f; }
.time { color: #9fb0c8; font-size: 1.5vw; margin-top: .8vh; }

.ctrls { margin: 1vh 0 2vh; }
.cbtn {
  display: inline-block; min-width: 14vw; margin-right: 1.5vw; padding: 1.6vh 1vw;
  font-size: 3vw; font-weight: 700; color: #eef2f8;
  background: #1b2334; border: 0.3vw solid #2c3850; border-radius: 1.2vw;
}
.cbtn.big { min-width: 20vw; }
.cbtn span { display: block; font-size: 1.4vw; font-weight: 400; color: #9fb0c8; margin-top: .4vh; }
.cbtn.on span { color: #3a2f18; }

/* ПЕРЕКЛЮЧАТЕЛИ РЕЖИМА (blox62 #5) — уже, чем кнопки перемотки: они в одном ряду, и ряд обязан
   уместиться в ширину экрана за вычетом полей под overscan. Отбивка слева отделяет «чем управляю»
   от «что играю». */
.mbtn {
  display: inline-block; min-width: 9vw; margin-right: 1vw; padding: 1.6vh .8vw;
  font-size: 1.9vw; font-weight: 700; color: #9fb0c8;
  background: #161d2c; border: 0.3vw solid #2c3850; border-radius: 1.2vw;
  vertical-align: bottom;
}
.mbtn.first { margin-left: 2.5vw; }
/* ВЫБРАННЫЙ режим и ПОДСВЕЧЕННЫЙ фокус — разные вещи, и выглядеть обязаны по-разному: фокус
   заливает оранжевым (что нажмётся), выбор даёт оранжевый контур и подчёркивание (что играет).
   Подчёркивание нужно именно потому, что эти два состояния совпадают на одной кнопке: заливка
   фокуса иначе съела бы признак выбора, и с трёх метров стало бы не видно, какой режим включён. */
.mbtn.sel { border-color: #ffb23f; color: #ffb23f; text-decoration: underline; }
.mbtn.on { background: #ffb23f; color: #11182a; border-color: #ffd48a;
           outline: 0.3vw solid #ffd48a; }
.mbtn.sel.on { color: #11182a; }

/* ПОД КУРСОРОМ. Раньше :hover тут считался бессмысленным — «у пульта нет курсора». На приставке
   Xiaomi (Android TV) он есть: стрелки водят стрелку мыши, и человек целится, а не ходит по
   сетке. Без подсветки непонятно, во что попадёшь. Намеренно СЛАБЕЕ фокуса (только светлеет
   рамка): оранжевая заливка означает «выбрано пультом», и подменять её наведением нельзя. */
.cbtn:hover, .mbtn:hover, .track:hover, .foot-btn:hover, .key:hover { border-color: #5a6b88; }

.list { flex: 1 1 auto; overflow-y: auto; }
.track {
  padding: 1.4vh 1.5vw; margin-bottom: .8vh; border-radius: 1vw;
  background: #161d2c; border: 0.25vw solid transparent;
  font-size: 2vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.track.cur { border-color: #5a6b88; }
.track .tag { color: #ffb23f; font-size: 1.4vw; margin-left: 1vw; }
.track .plays { color: #6d7f99; font-size: 1.4vw; margin-left: 1vw; }
.track.on .tag, .track.on .plays { color: #3a2f18; }

.foot { padding-top: 1.5vh; color: #6d7f99; font-size: 1.4vw; }
.foot-btn {
  font: inherit; color: #9fb0c8; background: transparent;
  border: 0.2vw solid #2c3850; border-radius: .8vw; padding: .8vh 1.2vw; margin-right: 2vw;
}
.foot-hint { color: #5a6b88; }

/* МЕДИА-ЭЛЕМЕНТ ЛЕЖИТ ПОД ЭКРАНОМ, во всю его площадь. В плейлисте и песни, и клипы: у песни
   элемент просто чёрный (и сливается с фоном), у клипа — играет картинка, а список и кнопки
   остаются поверх на полупрозрачной подложке. Так одно и то же управление годится обоим видам,
   и не нужен второй набор экранов «а теперь видео». */
#media { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #0f1420;
         object-fit: contain; z-index: 0; }
/* Панели — НАД видео. z-index у них, а не у экрана целиком: видео-элемент лежит внутри того же
   экрана, и подними мы весь экран, картинка поднялась бы вместе с ним. */
#play .top, #play .ctrls, #play .list, #play .foot { position: relative; z-index: 1;
         background: rgba(15,20,32,.82); border-radius: 1vw;
         transition: opacity .4s linear; }
/* КИНОРЕЖИМ (blox62 #4). Для песни панели — весь экран, их прятать нельзя: под ними чёрный
   прямоугольник и больше ничего. Для КЛИПА они закрывают саму картинку — проверено на живом
   Samsung 19.09.2026, это первое, что видно в гостиной. Поэтому во время видео панели гаснут
   через 4 секунды без нажатий и возвращаются на любое. Прячем ОПАЦИТИ, а не display: пропавший
   из потока блок сдвинул бы остальные, и вернулись бы они рывком. pointer-events выключаем,
   иначе мышь на ноутбуке (отладка) попадала бы в невидимую кнопку. */
#play.dim .top, #play.dim .ctrls, #play.dim .list, #play.dim .foot {
         opacity: 0; pointer-events: none; }
#play .top { padding: 1.5vh 1.5vw; }
#play .ctrls { padding: 1vh 1.5vw; }
#play .list { padding: 1vh 1vw; }
#play .foot { padding: 1vh 1.5vw; }