/**
 * «Горячо или холодно»: круг раунда.
 *
 * МОБИЛЬНЫЙ ЭКРАН ОДИН В ОДИН С ПРИЛОЖЕНИЕМ, и «один в один» это в первую
 * очередь ГЕОМЕТРИЯ. Числа из `lib/games/hotcold/hotcold_game.dart`:
 *
 *   строка колеса           108 (`itemExtent`)
 *   ряд видов               36, поле ТОЛЬКО СЛЕВА 16
 *   поля колеса и строки    20 по бокам (space5)
 *   низ экрана              16 по бокам и снизу, зазор между кнопками 8
 *   лицо в шапке «чей ход»  28, на передаче 72
 *   слова маски             зазор 6 по горизонтали и 10 по вертикали
 *   слово                   поля 8 и 6, радиус малый
 *
 * РЯД ВИДОВ БЕЗ ПОЛЯ СПРАВА, и это не забывчивость. Шесть видов не влезают в
 * телефон, ряд прокручивается, и обрезанный краем экрана значок это и есть
 * знак, что список продолжается. С полем справа последний значок садился в
 * тёмный зазор и читался как конец списка (комментарий приложения).
 *
 * КОМНАТА ПОЗАДИ ВСЕГО, тёмная сверху: там стоит строка, а строку надо читать.
 * Картинка та же, что в приложении (`assets/art/hotcold/room.webp`), прижата к
 * низу, и поверх неё градиент с теми же тремя ступенями прозрачности, что в
 * `_Room`: 0.86 наверху, 0.62 в середине, 0.78 внизу.
 */

.hc {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-bg);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Комната лежит под всем: сверху темнее, потому что там строка. */
.hc__komnata {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-bg) 86%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 62%, transparent) 55%,
      color-mix(in srgb, var(--c-bg) 78%, transparent) 100%),
    url('/next/images/hotcold-room.webp');
  background-size: cover, cover;
  /* Свет художник поставил внизу: картинка прижата к низу, как в приложении. */
  background-position: center, bottom center;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--c-bg);
}

.hc > :not(.hc__komnata) { position: relative; z-index: 1; }

/* ---------- шапка ---------- */

.hc__verkh {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-4) 0 var(--s-2);
}

.hc__schyot {
  margin-left: auto;
  font: 500 var(--t-label-s) var(--f-sans);
  color: var(--c-dim);
}

/* ---------- общий каркас шага ---------- */

.hc__ehkran {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Чей это экран: лицо и одна строка, отступ снизу 12 как в приложении. */
.hc__kto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0 var(--s-4) var(--s-3);
}

.hc__ktoTekst {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 var(--t-title-s) var(--f-sans);
}

/* Низ экрана: кнопки и одна строка над ними. */
.hc__niz {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 var(--s-4) var(--s-4);
}

.hc__prizrak {
  background: transparent;
  color: var(--c-text);
  border: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent);
}

.hc__tikho {
  margin: 0;
  text-align: center;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-dim);
}

.hc__podskazka {
  margin: 0 0 var(--s-1);
  text-align: center;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-dim);
}

/* Пока не закрыто ни одного слова, строка ЗОВЁТ, а не сообщает. */
.hc__podskazka--zovyot { color: var(--c-gold); }

/* ---------- ряд видов ---------- */

.hc__vidyi {
  display: flex;
  gap: var(--s-2);
  height: 36px;
  padding-left: var(--s-4);
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 0 auto;
}
.hc__vidyi::-webkit-scrollbar { display: none; }

.hc__vid {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent);
  background: color-mix(in srgb, var(--c-surface-high) 50%, transparent);
  color: var(--c-dim);
  font: 600 var(--t-label-l) var(--f-sans);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--m-micro) var(--m-ease),
              border-color var(--m-micro) var(--m-ease),
              color var(--m-micro) var(--m-ease);
}

.hc__vid[aria-pressed="true"] {
  background: color-mix(in srgb, var(--c-gold) 18%, transparent);
  border-color: color-mix(in srgb, var(--c-gold) 80%, transparent);
  color: var(--c-gold);
}

/*
 * МОНЕТА ЛОЖИТСЯ НА ВЕСЬ КРУГ, а не в конец колонки.
 *
 * `.hc` это колонка флексбокса, и правило выше (`.hc > :not(.hc__комната)`)
 * ставит всем её детям `position: relative; z-index: 1`. Накладке монеты оно
 * достаётся тоже и перебивает её собственные `absolute` и `z-index: 5`: у
 * `.coin-over` вес селектора меньше. Монета переставала быть накладкой и
 * становилась ещё одним блоком колонки, то есть падала под кнопки, размером в
 * себя саму. На снимке это выглядело как монета, приклеенная к низу экрана.
 *
 * Ловушка общая для любого экрана, который держит детей флексом и зовёт
 * накладку: у крестиков монета ложится на доску, а не на экран, и потому там
 * этого не было.
 *
 * Вес тот же, что у правила выше, а стоит ниже: в каскаде побеждает последнее.
 */
.hc > .coin-over {
  position: absolute;
  inset: 0;
  z-index: 30;
}

/* ---------- барабан ---------- */

/*
 * БАРАБАН, А НЕ ПРОКРУТКА. Раньше здесь стоял `overflow-y: auto` с запасом
 * строк и перестановкой `scrollTop` у края; перестановка гасила инерцию, и
 * список читался списком с концом. Теперь строки лежат на боковой поверхности
 * цилиндра, положение это число, и крутить можно бесконечно в обе стороны.
 *
 * ГЕОМЕТРИЯ ЧИСЛАМИ ИЗ ПРИЛОЖЕНИЯ: `itemExtent: 108`, `diameterRatio: 2.2`,
 * `perspective: 0.004`. Радиус зависит от высоты окна, поэтому он считается в
 * `games/drum.js` и приезжает сюда готовым числом в `transform`.
 */
.hc__baraban {
  flex: 1;
  min-height: 0;
  margin-top: var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.hc__koleso {
  flex: 1;
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  perspective: 250px;
  touch-action: none;          /* палец крутит барабан, а не страницу */
  cursor: grab;
  outline: none;
  /* Края гаснут: это и делает список колесом, а не страницей. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
/*
 * Радиус кольца фокуса: здесь стоял `var(--r-2)`, а такого токена нет ни в
 * одной шкале (радиусы у нас именные: sm/md/lg/xl/sheet/pill/tag/ctl). Значит
 * объявление молча отбрасывалось и кольцо было прямоугольным. Ставлю `--r-sm`,
 * тот же, что уже выбран в этом файле ниже; какое число имелось в виду
 * изначально, восстановить неоткуда.
 */
.hc__koleso:focus-visible { box-shadow: inset 0 0 0 2px var(--c-gold); border-radius: var(--r-sm); }
.hc__koleso.drum--derzhat { cursor: grabbing; }

.drum__lenta {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.hc__stroka,
.drum__stroka {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 108px;
  margin-top: -54px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--s-5);
  /*
   * На телефоне строка тоже поднята на ступень: сжатие по косинусу отнимает у
   * дальних строк треть роста, и от прежних семнадцати пикселей на краю
   * оставалось одиннадцать, то есть нечитаемое.
   */
  font: 400 var(--t-headline-s) var(--f-serif);
  line-height: 1.25;
  color: color-mix(in srgb, var(--c-dim) 45%, transparent);
  cursor: pointer;
  backface-visibility: hidden;
  transition: color var(--m-micro) var(--m-ease);
}

/*
 * ТЕКСТ СТРОКИ ОТДЕЛЬНЫМ УЗЛОМ, потому что строка выше это флексбокс.
 *
 * Флексбокс не рисует пробелы на стыке своих детей, а имя партнёра приезжает
 * разметкой `<b class="имя">`: пока текст лежал в строке голым, вокруг имени
 * пробелы пропадали и выходило «ПрижмиArtлицом вниз за шею». Измерено шириной
 * содержимого: 416.7 без обёртки против 430.2 с ней, ровно два пробела.
 *
 * Узел заводит `games/drum.js`, там же записано, почему `innerText` этой беды
 * не видит и почему верить ему нельзя.
 *
 * ДВЕ СТРОКИ РАЗРЕШЕНЫ. Длинному заданию перенос нужнее, чем сжатие в одну
 * ленту: при кегле 28 две строки занимают 70 пикселей из 108, и в высоту
 * окошка они помещаются целиком.
 */
.drum__tekst {
  display: block;
  max-width: 100%;
}

/*
 * Строка под серединой окна: она и выбрана.
 *
 * РАЗМЕР ЗДЕСЬ НЕ ТРОГАЕМ. Раньше середина поднималась на ступень шрифта, и
 * это спорило со сжатием, которое считает `drum.js` по косинусу: одно меняло
 * кегль скачком и гнало пересчёт раскладки, второе плавно масштабировало ту же
 * строку. Приближение делает барабан, цвет делает css.
 */
.hc__stroka--tut,
.drum__stroka--tut { color: var(--c-text); }

/*
 * КНОПКИ ШАГА ТОЛЬКО ТАМ, ГДЕ ЕСТЬ ТОЧНЫЙ УКАЗАТЕЛЬ. На телефоне палец и так
 * знает, что делать, а на ноутбуке без них непонятно, чем крутить: колесо
 * мыши работает, но о нём не догадываются.
 */
.hc__shag {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-text) 8%, transparent);
  color: var(--c-dim);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background var(--m-micro) var(--m-ease), color var(--m-micro) var(--m-ease);
}
.hc__shag:hover { background: color-mix(in srgb, var(--c-text) 14%, transparent); color: var(--c-text); }
/* Шеврон нарисован линией в самой разметке: обе стороны своим путём, без поворотов. */
.hc__shag svg { width: 24px; height: 24px; display: block; }

@media (pointer: fine) {
  .hc__shag { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .hc__stroka, .drum__stroka { transition: none; }
}

.hc__pusto {
  margin: var(--s-6) auto;
  text-align: center;
  color: var(--c-dim);
}

/* ---------- слова маски ---------- */

.hc__slova {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 10px 6px;
  padding: 0 var(--s-5);
}

.hc__slovo {
  padding: 6px 8px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid color-mix(in srgb, var(--c-text) 16%, transparent);
  background: color-mix(in srgb, var(--c-surface-high) 50%, transparent);
  color: var(--c-text);
  font: 400 var(--t-title-m) var(--f-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--m-micro) var(--m-ease),
              border-color var(--m-micro) var(--m-ease),
              color var(--m-micro) var(--m-ease);
}

/* Имя горит своим цветом и жирным, как везде, где показана строка. */
.hc__slovo[data-imya] { font-weight: 700; }

/* Закрытое слово видно сразу: то, что увидит второй, стоит на экране. */
.hc__slovo[data-zakryito] {
  background: color-mix(in srgb, var(--c-gold) 18%, transparent);
  border-color: color-mix(in srgb, var(--c-gold) 80%, transparent);
  color: var(--c-gold);
  letter-spacing: .08em;
}

/* ---------- середина: передача, поиск, раскрытие ---------- */

.hc__seredina {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-6);
  text-align: center;
}

.hc__seredina--stroka { gap: 0; padding: var(--s-5); }

.hc__krupno {
  margin: 0;
  font: 400 var(--t-headline-s) var(--f-serif);
}

.hc__tekst {
  margin: 0;
  text-align: center;
  font: 400 var(--t-headline-s) var(--f-serif);
  line-height: 1.3;
  color: var(--c-text);
}

.hc__uzkaya { align-self: center; padding-inline: var(--s-6); }

/* ---------- своя строка ---------- */

/* Значок перед подписью кнопки: замок, карандаш, кубик. */
.hc__znachok {
  width: 18px;
  height: 18px;
  margin-right: var(--s-2);
  vertical-align: -3px;
}

.hc__vlevo { text-align: left; }

/* Счётчик знаков виден всегда: поле, молча теряющее буквы, читается поломкой. */
.hc__znaki {
  margin: var(--s-1) 0 var(--s-4);
  text-align: right;
  font: 400 var(--t-label-s) var(--f-sans);
  color: var(--c-dim);
}

/* ---------- десктоп ---------- */

/*
 * СЛЕВА РЕЛЬС РАЗДЕЛОВ, И ЭКРАН НАЧИНАЕТСЯ ЗА НИМ. Экран раунда стоит `fixed`,
 * то есть меряется от окна, и без отступа он накрыл бы рельс вместе с выходом
 * из игры. Та же строка и по той же причине у слотов, сексополии, колеса и
 * «правды или действия», и число тут одно на всех.
 */
@media (min-width: 1024px) {
  .hc { left: var(--kolonka, 264px); }
}

/*
 * Строка длиной в монитор читается поворотом головы. Сужаем СОДЕРЖИМОЕ, а не
 * экран: колесо и текст живут в колонке, а шапка и низ держат края.
 */
@media (min-width: 900px) {
  /*
   * НА ШИРОКОМ ЭКРАНЕ КОМНАТА СВЕТЛЕЕТ, и это не вкусовщина. Картинка снята
   * под телефон; растянутая на монитор, она показывает во всю ширину светлое
   * бельё, и строка над ним читается хуже, чем в приложении. Гасим сильнее
   * ровно там, где картинка выросла.
   */
  .hc__komnata {
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--c-bg) 94%, transparent) 0%,
        color-mix(in srgb, var(--c-bg) 82%, transparent) 55%,
        color-mix(in srgb, var(--c-bg) 90%, transparent) 100%),
      url('/next/images/hotcold-room.webp');
  }

  /*
   * БАРАБАН БЕРЁТ ВСЮ ВЫСОТУ МЕЖДУ ФИЛЬТРАМИ И КНОПКАМИ, как на телефоне и как
   * в приложении. Ограничение высоты я тут уже ставил и убираю его сам: под
   * колонкой в полтысячи пикселей оставалось пустое поле в пол-экрана, и
   * владелец сказал прямо, что полезное пространство не используется.
   *
   * Пустоты боялся не барабан, а кегль: строка падала до шестнадцати пикселей
   * и терялась в высоте. С починенным кеглем высота работает на игру: чем
   * выше окно, тем больше строк видно, и это ровно то, чем барабан отличается
   * от списка.
   *
   * Ширину держим ради КНОПОК ШАГА: они стоят по краям своего ряда, и без
   * предела улетали к самым краям монитора, переставая читаться как пара к
   * барабану.
   */
  .hc__baraban {
    max-width: 1100px;
    margin-inline: auto;
    width: 100%;
  }
  /*
   * РАЗМЕР ПОДНЯТ НА ДВЕ СТУПЕНИ, до заголовка экрана. Двадцать пикселей это
   * кегль пункта списка, а на барабане строка это единственное, что читают.
   * Дальние строки мельчают сами: их сжимает `drum.js` по косинусу.
   */
  /*
   * РАЗМЕР ЗАДАЁМ СОКРАЩЕНИЕМ `font`, А НЕ `font-size`, И ЭТО НЕ СТИЛЬ ЗАПИСИ.
   *
   * Токен размера у нас это ПАРА «кегль/интерлиньяж»: `--t-display-s` равен
   * `28px/34px`. Такая пара законна внутри сокращения `font` и незаконна в
   * `font-size`. Незаконное значение из переменной css не выбрасывает, а
   * объявляет свойство «недействительным на этапе вычисления», и свойство
   * берёт НАЧАЛЬНОЕ значение, то есть `medium`, то есть шестнадцать пикселей.
   *
   * Отсюда и «на десктопе всё ультра мелко»: правило десктопа не увеличивало
   * строку, оно роняло её до умолчания браузера, да ещё и ниже мобильных
   * семнадцати. Спросили сам браузер: при живых токенах кегль строки был 16px.
   *
   * И ОТСЮДА ЖЕ «СКЛЕИВАЕТСЯ С ИМЕНЕМ». Владелец назвал это второй бедой, а
   * беда одна: на шестнадцати пикселях пробел перед жирным именем в цвете
   * съедается глазом, и «Прикуси плечо Rema» читается слитно. Проверено
   * снимками: те же три строки на 16px читаются склеенными, на 28px нет.
   * Пробел при этом на месте всегда, и разметка ни при чём: сначала я решил,
   * что виноват флексбокс строки, и это оказалось неправдой.
   *
   * Инспектор такое показывает зачёркнутым и без объяснений, а глазами это
   * читается как «шрифт мелковат», а не как сломанное правило.
   */
  .hc__stroka, .drum__stroka {
    max-width: 960px;
    margin-inline: auto;
    font: 400 var(--t-display-s) var(--f-serif);
    line-height: 1.25;
  }
  /* Та же ловушка «пара в font-size»: строка выбранного задания молча падала
     до шестнадцати вместо двадцати двух. */
  .hc__tekst {
    max-width: 720px; margin-inline: auto;
    font: 400 var(--t-headline-m) var(--f-serif);
    line-height: 1.3;
  }
  .hc__slova { max-width: 720px; margin-inline: auto; }
  .hc__niz { max-width: 520px; margin-inline: auto; width: 100%; }
}

/*
 * ОЧЕНЬ ШИРОКИЙ МОНИТОР: строка ещё на ступень крупнее.
 *
 * Ступень, а не проценты: кегль у нас живёт токенами, и вводить ради одного
 * экрана свою шкалу значит завести вторую систему рядом с общей. На 1440 и
 * выше строка это `--t-display-m`, то есть тридцать два.
 *
 * Порог тот же, на котором каркас расширяет боковой рельс с 264 до 288, чтобы
 * два разных представления о «широком» не разъезжались.
 */
@media (min-width: 1440px) {
  .hc__baraban { max-width: 1240px; }
  .hc__stroka, .drum__stroka {
    max-width: 1080px;
    font: 400 var(--t-display-m) var(--f-serif);
    line-height: 1.25;
  }
}