/**
 * «Правда или действие»: стол.
 *
 * МОБИЛЬНЫЙ ЭКРАН ОДИН В ОДИН С ПРИЛОЖЕНИЕМ, и «один в один» это в первую
 * очередь ГЕОМЕТРИЯ, а не похожие блоки. Числа взяты из
 * `lib/games/truthdare/truthdare_game.dart` и `truthdare_split.dart`:
 *
 *   шапка с круглым выходом   8 слева, 4 сверху, 16 справа (space2/1/4)
 *   строка в проёме           поля 24 с каждой стороны (space6)
 *   от строки до кнопок       24 (space6)
 *   между кнопками            12 (space3)
 *   от кнопок до сноски       12 (space3)
 *   полоса хода               8, 8, 16, 8 и отступ снизу 12 (space2/2/4/2, space3)
 *   лицо в полосе             34
 *
 * САМИ СТВОРКИ ЗДЕСЬ НЕ ЛЕЖАТ. Половины это не прямоугольники: у каждой косой
 * край, и по нему идут тень в нишу, кайма и бегущий свет. Всё это на холсте
 * (js/games/truth-split.js), а стилям остаётся положить два холста друг на
 * друга и не мешать.
 *
 * ПРОЁМ ОБРЕЗАЕТСЯ МНОГОУГОЛЬНИКОМ, и его считает код в том же кадре, что и
 * створки: рез косой, прямоугольная обрезка выпустила бы строку на створку одним
 * углом. Поэтому `clip-path` тут пустой, его ставит экран.
 *
 * ПАРТИЯ ЗАБИРАЕТ ЭКРАН ЦЕЛИКОМ, как у колеса, напёрстков и «выпивки»: полосу и
 * пилюлю снимает nav.js по спискам СТРАНИЦЫ и БЕЗ_ВЕРХА, а высоту забирает
 * `inset: 0`. Иначе створкам некуда встать: они рисуются от края до края.
 */

.td {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: var(--c-bg);
  /* Монетка ложится поверх стола, а не поверх страницы. */
  isolation: isolate;
}

/* Два холста один на другом: тяжёлый слой снизу, кайма со светом сверху. */
.td__kholst {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

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

.td__verkh {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: var(--s-1) var(--s-4) 0 var(--s-2);
  z-index: 3;
}

/* ---------- проём ---------- */

/*
 * Слой во весь экран: обрезка делает из него проём, и она же его двигает.
 * Указатель проходит насквозь, пока створки не разведены: касание по стороне
 * ловит сам стол.
 */
.td__shchelj {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.td__vnutri {
  position: absolute;
  transform-origin: 50% 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: auto;
}

/*
 * Строка ВРЕЗАНА в заднюю стенку, а не положена на неё. Тень со смещением вниз
 * это то, что поднимает букву НАД поверхностью, поэтому тень идёт наоборот:
 * жёсткая тёмная кромка сверху, где стенка нависает над буквой, и тёплая
 * подсвеченная снизу, где свет со створок ловит рез. Все четыре числа из
 * приложения.
 */
.td__stroka {
  margin: 0;
  font: 500 20px/1.35 var(--f-serif);
  color: #DCD3D8;
  text-shadow:
    0 -1.4px 1.2px #05040A,
    0 1.2px .6px rgba(255, 233, 201, .4),
    0 0 16px rgba(0, 0, 0, .8);
}

.td__knopki {
  display: flex;
  gap: var(--s-3);
  width: 100%;
  margin-top: var(--s-6);
}

.td__knopka { flex: 1; }

/* Призрачная кнопка: та же высота и радиус, только без золота. */
.td__knopka--prizrak {
  background: transparent;
  color: var(--c-text);
  border: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent);
}

.td__snoska {
  margin: var(--s-3) 0 0;
  font: 400 var(--t-body-s) var(--f-sans);
  color: color-mix(in srgb, var(--c-dim) 75%, transparent);
}

/* ---------- полоса хода ---------- */

/*
 * Чей ход, внизу, где и так лежит большой палец. Своё лицо, свой цвет и счёт
 * пройденного вдвоём: из приложения (`_TurnStrip`), включая чёрную подложку
 * 0.42, кант в 0.35 цвета места и свечение 0.18 на восемнадцати пикселах.
 */
.td__polosa {
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
  border-radius: var(--r-pill, 999px);
  background: rgba(0, 0, 0, .42);
  border: 1px solid color-mix(in srgb, var(--svoy) 35%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--svoy) 18%, transparent);
  pointer-events: none;
}

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

.td__schyot {
  flex: none;
  font: 500 var(--t-label-s) var(--f-sans);
  color: var(--c-dim);
}

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

/*
 * НА МОНИТОРЕ СТВОРКИ ОСТАЮТСЯ ВО ВЕСЬ ЭКРАН, и это не лень. Вся игра держится
 * на том, что рез делит ЭКРАН, по которому и бьёт палец: сузив стол до колонки,
 * мы получили бы прямоугольник с диагональю посередине и полями по бокам, то
 * есть картинку игры, а не игру.
 *
 * Сужается только СОДЕРЖИМОЕ проёма: строка длиной в весь монитор читается
 * поворотом головы, и приложение ограничивает её той же логикой, поля 24 от
 * ширины ЭКРАНА телефона. Двадцать четыре пиксела от двух тысяч это не поля.
 */
/*
 * СЛЕВА РЕЛЬС РАЗДЕЛОВ, И СТВОРКИ НАЧИНАЮТСЯ ЗА НИМ. Экран партии стоит
 * `fixed`, то есть меряется от окна, и без этого отступа он накрыл бы рельс
 * собой вместе с выходом из игры. Та же строка и по той же причине стоит у
 * слотов, сексополии и колеса, и число тут одно на всех: `--колонка`.
 *
 * ПОРОГ 1024, А НЕ 900: рельс появляется именно на этой ширине (frame.css), и
 * свой порог развёл бы отступ с рельсом на сто двадцать четыре точки.
 */
@media (min-width: 1024px) {
  .td { left: var(--kolonka, 264px); }
}

/*
 * Ширину блока в проёме считает ЭКРАН, а не эта таблица: `местоВПроёме` меряет
 * высоту проёма по той же ширине, и разойдись они, строка либо не влезет, либо
 * ужмётся зря. Здесь остаётся только кегль и полоса хода.
 */
@media (min-width: 900px) {
  .td__stroka { font-size: 24px; }
  .td__polosa { left: 50%; right: auto; transform: translateX(-50%); min-width: 420px; }
}

/* ==========================================================================
   СВОИ ЗАДАНИЯ
   ==========================================================================
   Экран списка и редактора. Своего тут ровно одно: обрезка строки списка.
   Поле ввода это `.sheet-input`, отказ `.form-error`, дальше `.row`, `.card`,
   `.btn` и карта настроек, то есть части, которые обязаны выглядеть одинаково
   везде. Писать их заново значит разойтись с ними при первой же правке: своё
   поле было мельче шестнадцати пикселей, и Safari на айфоне приближал страницу
   при фокусе на нём.
   ========================================================================== */


/*
 * СТРОКА СПИСКА ПОКАЗЫВАЕТ ТЕКСТ ЦЕЛИКОМ, до трёх строк. Обрезать своё задание
 * многоточием на первой строке значит заставить открывать каждое, чтобы понять,
 * которое из них правишь.
 */
.tc-stroka .row__name {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}