/* ==========================================================================
   КРЕСТИКИ-ЖЕЛАНИЯ
   ==========================================================================
   ЧТО ЗДЕСЬ НЕ ПИШЕТСЯ. Кнопки, карточки, шторки, шапка игры и свод правил уже
   есть в `frame.css`. Своих копий не заводим: однажды они разойдутся.

   КРАСКА И ШРИФТ ТОЛЬКО ИЗ ТОКЕНОВ. Из приложения перенесены ГЕОМЕТРИЯ И
   ПРИЁМЫ, числами; сама доска рисуется на канве (`games/tictac-view.js`), и
   все её числа живут там, рядом с рисованием.

   МОБИЛЬНЫЙ И ДЕСКТОП РАЗНЫЕ, а не один растянутый. На телефоне доска занимает
   всю ширину и столько высоты, сколько осталось. На широком экране она
   перестаёт расти: поле в тысячу точек это уже не доска, а обои, и клетка на
   ней вырастает до полутора сантиметров.
   ========================================================================== */

/* Знак игрока: крест или кольцо. Едет с человеком по всем экранам, поэтому
   размер и толщину задаёт тот, кто его ставит, а не эта таблица. */
.tt-znak { flex: 0 0 auto; display: inline-block; vertical-align: -2px; }

/*
 * ЛИЦА В ПОЛОСЕ ПАРЫ ЛЕЖАТ ВНАХЛЁСТ, ровно как в приложении: лицо 34, второе со
 * сдвигом 22, то есть перекрытие двенадцать.
 *
 * ЗДЕСЬ ОНИ БЫЛИ РАЗВЕДЕНЫ, и это моя же прежняя правка. Рассуждение было
 * такое: у каждого на лице свой знак, знак сидит в правом нижнем углу, туда
 * наезжает второе лицо и съедает его. Вывод оказался неверным, а верным было
 * решение приложения: не разводить лица, а положить ПЕРВОЕ СВЕРХУ. Владелец так
 * и сказал: «они там идут внахлёст, но просто немного обратный, первый он и он
 * сверху на ней, это сделано специально, чтобы были видны крестик и нолик».
 *
 * Порядок наложения живёт в каркасе (`.faces > *:first-child`), здесь остаётся
 * только сам нахлёст: у полосы пары лицо 34, а не 40, поэтому и число своё.
 */
.duo .faces--sZnakom .faces__odno + .faces__odno { margin-left: -12px; }

/* ==========================================================================
   ЖЕЛАНИЕ
   ========================================================================== */

.tt-zhel { margin-top: var(--s-5); }

.tt-zhel__verkh {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

/* Чей сейчас шаг, ЛИЦОМ, а не строчкой текста. Из приложения дословно: «чья
   очередь печатать, это лицо, а не строка». Нужно только на одном телефоне: на
   двух каждый и так знает, кто он. */
.tt-zhel__kto {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.tt-zhel__imya { font: 600 var(--t-title-s) var(--f-sans); }

.tt-zhel__komu {
  margin: 0 0 var(--s-3);
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
}

.tt-zhel__pole { min-height: 96px; }

/* Одна строка о том, что желание не покажут до конца партии. Это ПРАВИЛО, а не
   пояснение: желание, подсмотренное заранее, перестаёт быть ставкой. */
.tt-zhel__tayna {
  margin: var(--s-3) 0 0;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-faint);
}

/* ==========================================================================
   ОЖИДАНИЕ ВТОРОГО
   ========================================================================== */

.tt-zhdyom {
  margin-top: var(--s-6);
  padding: var(--s-8) var(--s-5);
  min-height: 40svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-3);
  background: var(--c-card-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.tt-zhdyom__chto {
  max-width: 30ch;
  font: 400 var(--t-body-l) var(--f-sans);
  color: var(--c-text);
}

.tt-zhdyom__zachem {
  max-width: 34ch;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
}

/* ==========================================================================
   ЗАДНИК
   ==========================================================================
   Из приложения, `_Backdrop`, тремя слоями и по его числам. Слои прибиты к
   экрану (`fixed`), а не к содержимому: экран партии прокручиваться не должен,
   и задник обязан лежать под всем, включая липкую нижнюю полосу.
   ========================================================================== */

.tt-zadnik,
.tt-zadnik > i {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: block;
}

/* 1. Свечение в цвете того, чей ход. Круговой градиент из центра (0, -0.05),
      радиусом 0.95, цвет при 16% и до прозрачного к 75%. Числа из приложения. */
.tt-zadnik__svet {
  background: radial-gradient(circle at 50% 47.5%,
    color-mix(in srgb, var(--tt-svet, var(--c-gold)) 16%, transparent) 0%,
    transparent 75%);
  transition: background var(--m-standard) var(--m-ease);
}

/* 2. САМ СТОЛ, почти в полную силу. Из приложения дословно: «пустые клетки для
      того и пусты, чтобы смотреть в это, и глубина тут вся суть». Кладётся
      только на партию: на экранах желания он спорит с текстом. */
.tt-zadnik__stol {
  background: url('/next/images/tictac/field.webp') center / cover no-repeat;
  opacity: .9;
}

/* 3. Виньетка: тот же центр, радиус 1.15, прозрачная до 40% и чёрная при 62% к
      краю. Оттуда же: «середину едва трогаем, чтобы пустота осталась видна, а
      по углам стягиваем». */
.tt-zadnik__mgla {
  background: radial-gradient(circle at 50% 47.5%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, .62) 100%);
}

/* Всё, что не задник, лежит НАД ним. Иначе стол накрыл бы доску и карточки:
   он `fixed`, а фиксированное рисуется поверх обычного потока. */
#ttP > *:not(.tt-zadnik) { position: relative; z-index: 1; }

/*
 * ФЕЙД ЛИПКОЙ КНОПКИ СНИМАЕМ ТАМ, ГДЕ ПОД НЕЙ ЗАДНИК ИГРЫ.
 *
 * Общая липкая кнопка каркаса (`.set-go`) тянет за собой градиент к цвету фона:
 * на обычных настройках он не виден, потому что там фон и есть цвет фона. Здесь
 * под кнопкой лежит задник со свечением, и градиент читается ЧЁРНОЙ ПОЛОСОЙ
 * поперёк экрана, ровно как на снимке владельца.
 *
 * Убираем только краску, липкость оставляем: на низком экране с открытой
 * клавиатурой кнопка всё так же обязана оставаться под рукой.
 */
.screen:has(.tt-zadnik) .set-go { background: none; }

/* ==========================================================================
   КАРТОЧКИ ИГРОКОВ
   ==========================================================================
   Числа из приложения (`_playerCard`): поле 12 на 8, подложка при 90% у
   ходящего и 45% у ждущего, рамка его цветом при 85% толщиной 1.4 против общей
   при 16% толщиной 1, лицо 34. Между карточками слово «vs».
   ========================================================================== */

/* Полоса карточек живёт ВНУТРИ верхней строки, рядом со стрелкой назад, и
   забирает всё, что от неё осталось. Своих полей у неё нет: их держит строка. */
.tt-kartochki {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
}

.tt-karta {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-surface) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-border) 16%, transparent);
  transition: background var(--m-standard) var(--m-ease),
              border-color var(--m-standard) var(--m-ease);
}

.tt-karta--khodit {
  background: color-mix(in srgb, var(--c-surface) 90%, transparent);
  border: 1.4px solid color-mix(in srgb, var(--tt-tsvet, var(--c-gold)) 85%, transparent);
}

.tt-karta__tekst { min-width: 0; display: block; }

.tt-karta__imya {
  display: block;
  font: 500 var(--t-label-m) var(--f-sans);
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-karta--khodit .tt-karta__imya { color: var(--c-text); }

/* Состояние капителью: «Твой ход», «Ждёшь», «Победа». Разрядка 1.6, как в
   приложении. */
.tt-karta__chto {
  display: block;
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-muted);
  min-height: 1em;
}

.tt-karta--khodit .tt-karta__chto { color: var(--tt-tsvet, var(--c-gold)); }

.tt-vs {
  align-self: center;
  flex: 0 0 auto;
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: 1.5px;
  color: var(--c-faint);
}

/* Монетка своих стилей не имеет и иметь не должна: она сквозная (`coin.js`) и
   падает ПОВЕРХ поля, как в шашках и морском бое. Здесь когда-то был отдельный
   экран со своей монетой, своим текстом и своей кнопкой, и он выбивался из
   ряда: жребий обязан выглядеть одинаково во всех играх раздела. */

/* ==========================================================================
   ПАРТИЯ
   ========================================================================== */


.screen--partiya > #ttP {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/*
 * Верх: стрелка назад и ОБЕ КАРТОЧКИ ИГРОКОВ в одной строке.
 *
 * Владелец: «имена игроков должны быть напротив стрелочки назад». До этого
 * стрелка занимала строку в одиночку и не говорила ничего, а карточки шли
 * второй строкой; вдвоём они съедали высоту, которая нужна доске.
 */
.tt-verkh {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
}

/*
 * Полоса хода. Числа из приложения (`_turnStrip`): поле сверху и снизу 15,
 * скругление пилюлей, рамка в цвете того, чей ход, толщиной 1.4 при
 * прозрачности 85%, и тень того же цвета при 28% с размытием 22 и сжатием -6.
 *
 * ЦВЕТ ПРИХОДИТ ПЕРЕМЕННОЙ, а не классом: он меняется каждый ход, и заводить
 * два класса ради двух мест значило бы держать цвет в двух местах.
 */
.tt-khod {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 15px var(--s-4);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-surface) 85%, transparent);
  border: 1.4px solid color-mix(in srgb, var(--tt-khod, var(--c-gold)) 85%, transparent);
  box-shadow: 0 4px 22px -6px color-mix(in srgb, var(--tt-khod, var(--c-gold)) 28%, transparent);
  transition: border-color var(--m-standard) var(--m-ease),
              box-shadow var(--m-standard) var(--m-ease);
}

/* Длинное имя укорачивается многоточием, а не выталкивает «твой ход» с полосы.
   Замечание из приложения, там же. */
.tt-khod__chto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 var(--t-label-l) var(--f-sans);
  color: var(--c-text);
}

/*
 * ДВА ЧИСЛА ДОСКИ ЖИВУТ ЗДЕСЬ И ТОЛЬКО ЗДЕСЬ, потому что их читает и разметка, и
 * скрипт: число клеток считается ДО того, как доска встанет на экран, и держать
 * те же числа вторым списком в скрипте значило бы развести их в первый же раз.
 *
 *   --tt-доска-макс   докуда доске расти вширь;
 *   --tt-клетка       к какому размеру клетки стремимся.
 *
 * ЧИСЛА ВСЕГДА В ТОЧКАХ, и на телефоне тоже. Скрипт читает переменную как есть,
 * без подстановки: `100vw` он прочёл бы как сотню и ужал бы доску до ста точек.
 * Четыре тысячи это «предела нет» на языке, понятном обоим.
 *
 * КЛЕТКА 40 ЭТО ЧИСЛО ПРИЛОЖЕНИЯ (`_targetCell`), и на телефоне она такая же.
 * Дальше растёт по ступеням каркаса: на мониторе клетка в сорок точек это
 * россыпь спичечных коробков, а не доска.
 */
#ttP {
  --tt-doska-maks: 4000px;
  --tt-kletka: 40px;
}

/* Поле под доску. Забирает ВСЁ, что осталось между верхней строкой и нижней
   полосой, и во всю ширину: доска квадратная и вписывается в этот остаток. */
.tt-pole {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Нижняя полоса: полоса хода или кнопка итога. Снизу с запасом на домашнюю
   полоску телефона, и она же не даёт полосе уйти под нижнюю грань. */
.tt-niz {
  flex: 0 0 auto;
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
}

.tt-niz__kn { width: 100%; }

.tt-pole canvas { display: block; touch-action: manipulation; }

/* ==========================================================================
   ИТОГ
   ========================================================================== */

.tt-itog__litso { display: flex; justify-content: center; margin-bottom: var(--s-3); }

.tt-itog__chto {
  margin: 0 0 var(--s-2);
  text-align: center;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
}

/* Само желание. Крупно и засечными: это то, ради чего играли. */
.tt-itog__zhelanie {
  margin: 0 0 var(--s-5);
  text-align: center;
  font: 400 var(--t-headline-s) var(--f-serif);
  color: var(--c-text);
}

/* ==========================================================================
   ШИРОКИЙ ЭКРАН
   ========================================================================== */

@media (min-width: 1024px) {

  /*
   * ЗАДНИК ТОЖЕ НАЧИНАЕТСЯ ПОСЛЕ РЕЛЬСА. Он прибит к экрану (`fixed`), а
   * прибитое отмеряется от окна, а не от слоя, в котором лежит: со своим
   * `inset: 0` он затягивал рельс своей мглой, даже когда сам слой стоял
   * правильно.
   */
  .tt-zadnik,
  .tt-zadnik > i { left: var(--kolonka, 264px); }

  /*
   * КЛЕТКА РАСТЁТ ПО СТУПЕНЯМ КАРКАСА, и это ответ на «на десктопе сделай
   * ячейки побольше» и «адаптивность выше 1440 даже».
   *
   * Растёт КЛЕТКА, а не доска: колонок движок берёт от шести до четырнадцати
   * (число приложения), и растягивать четырнадцать клеток по сорок точек на
   * весь монитор нечем. Крупнее клетка, крупнее и вся доска, а знаки на ней
   * остаются той же доли, что на телефоне.
   *
   * ПРЕДЕЛ ШИРИНЫ ИДЁТ ЗА КЛЕТКОЙ: четырнадцать клеток плюс запас. Меньше
   * предел, меньше колонок, и доска стала бы уже, чем есть место.
   */
  #ttP {
    --tt-kletka: 56px;
    --tt-doska-maks: 800px;
  }

  /* Полоса хода не растягивается на всю ширину монитора: строка в тысячу
     точек читается хуже, чем строка в четыреста. */
  .tt-khod { max-width: 480px; margin: 0 auto; }

  /*
   * КАРТОЧКИ ПО ЦЕНТРУ ЭКРАНА, а не «после стрелки» (владелец: «на десктопе
   * имена отцентрируй»). Стрелка при этом остаётся у левого края.
   *
   * Ради этого она уходит из потока: пока она стоит в ряду, любое центрирование
   * считается от ОСТАТКА ряда, и пара имён оказывается сдвинутой вправо ровно на
   * половину стрелки. На телефоне такого вопроса нет, там карточки занимают всё,
   * что осталось, и центрировать нечего.
   */
  .tt-verkh {
    position: relative;
    justify-content: center;
    padding: var(--s-3) 0;
    gap: var(--s-4);
  }
  .tt-verkh .back-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Карточки на широком не жмутся: места хватает, и лицо с именем читаются
     спокойнее. */
  .tt-kartochki { flex: 0 1 720px; }
  .tt-karta { padding: var(--s-2) var(--s-3); gap: var(--s-3); }
}

@media (min-width: 1440px) {
  #ttP { --tt-kletka: 64px; --tt-doska-maks: 920px; }
}

@media (min-width: 1800px) {
  #ttP { --tt-kletka: 72px; --tt-doska-maks: 1040px; }
}

@media (min-width: 2400px) {
  #ttP { --tt-kletka: 84px; --tt-doska-maks: 1200px; }
}

/* Монета в шаге: та же разметка, что во вкладке «Мы», просто по центру. */
.tt-moneta .coin { margin: 0 auto; }