/* ==========================================================================
   СЛОТЫ
   ==========================================================================
   Геометрия числами из приложения (lib/games/slots/), краска из наших токенов.
   Исключение одно и оно объявлено в `slots-api.js`: шесть цветов категорий, их
   в токенах нет и быть не должно.

   ЖАРА В ЭТОЙ ИГРЕ НЕТ. Ни полосы уровней, ни бейджа накала здесь не ищите:
   единственный выбор пары это какие категории в выдаче.
   ========================================================================== */

/* ==========================================================================
   НАСТРОЙКИ
   ==========================================================================
   Своих стилей у настроек больше НЕТ. Здесь стоял ряд из шести строк с
   переключателями, нарисованный только для этой игры: цветная полоска,
   название, подпись, тумблер. Владелец (02.09.2026): «пилюли ты почему-то от
   себя придумал, а не юзал наши стандартные». Категории теперь спрашиваются
   теми же пилюлями, что запас в напёрстках и накал в шашках: разметка в
   setup-kit, вид в общем листе каркаса (.choice__opt). Осталась одна строка,
   про пустой выбор.
   ========================================================================== */

/* Ни одной включённой: кнопка старта не врёт, а объясняет. */
.sl-pusto {
  margin: 0 0 var(--s-4);
  text-align: center;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-muted);
}

/* ==========================================================================
   БАРАБАН
   ========================================================================== */

/*
 * ЭКРАН ПАРТИИ ВЫРВАН ИЗ ПОТОКА КАРКАСА, как и все игровые экраны у нас
 * (`.sx-play` в сексополии, и там же объяснено про svh).
 *
 * Здесь стояло `min-height: calc(100svh - var(--s-8))` внутри обычного
 * содержимого, и это давало сразу две беды, обе на телефоне:
 *
 *   дождь не доходил до низа. Каркас держит снизу место под плавающую полосу
 *   разделов, и холст кончался на полсотни точек выше края экрана: слова
 *   исчезали над кнопкой, вместо того чтобы уходить за неё. Владелец
 *   (02.09.2026): «поле вниз ограничено и текст не падает будто за кнопку и
 *   вниз»;
 *
 *   и появлялась прокрутка. Почти целый экран плюс поля каркаса сверху и снизу
 *   давали чуть больше экрана, и страница ездила на несколько десятков точек:
 *   «почему-то на мобайле будто есть прокрутка вниз».
 *
 * `fixed` снимает обе разом: слой меряется от окна, а не от содержимого, поля
 * каркаса ему не достаются, и прокручивать нечего.
 *
 * svh, а не vh: это САМОЕ МАЛЕНЬКОЕ окно, со строкой браузера на месте. При
 * vh экран прыгал бы каждый раз, когда строка уезжает и возвращается.
 */
.sl-stol {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
}

/* Холст дождя. Позади всего, событий не ловит. */
.sl-dozhdj {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/*
 * Слой поверх дождя. БЕЗОПАСНЫЕ ЗОНЫ ДЕРЖИТ ОН, А НЕ СТОЛ: холст обязан
 * доставать до самого края стекла, а вот шапка не должна лезть под чёлку, а
 * кнопка под полосу жеста.
 */
.sl-poverkh {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding:
    calc(env(safe-area-inset-top, 0px) + var(--s-3))
    var(--s-4)
    calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
}

/*
 * ШАПКА ВО ВСЮ ШИРИНУ ОКНА: стрелка и название у левого края, лицо у правого.
 *
 * Ширину ей НЕ ограничиваем, и это отдельное правило, а не недосмотр. Колонка
 * содержимого в 720 точек верна для середины и низа, но, натянутая на шапку,
 * она сажает стрелку с названием в середину монитора: «на больших десктоп
 * экранах стрелка назад и LoveSlots находятся почти по центру, что плохо»
 * (владелец 02.09.2026). Шапка живёт по краям экрана.
 */
.sl-verkh {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.sl-verkh__imya {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 var(--t-title-s) var(--f-sans);
  /* Название тоже стоит поверх дождя: без просвета по нему летели чужие слова. */
  text-shadow: 0 0 8px var(--c-bg), 0 0 16px var(--c-bg);
}

/*
 * ЛИЦО ТОГО, ЧЕЙ ХОД, В ПРАВОМ ВЕРХНЕМ УГЛУ (владелец 02.09.2026: «аватарка
 * должна быть в правом верхнем углу»). Рисует его сквозной `лицо()`: круг в
 * цвете места, кольцо и свечение. Здесь только место в углу.
 */
.sl-verkh__kto { flex: 0 0 auto; display: inline-flex; }

/*
 * КАРТОЧЕК КОЛОНОК БОЛЬШЕ НЕТ, и стилей у них тоже.
 *
 * Здесь стояла сетка из четырёх боксов с рамкой, меткой и словом внутри, по
 * центру экрана. Владелец: «на игровой странице убрать квадраты какие-то по
 * центру». Слова, на которых встали колонки, рисует теперь сам холст, каждое на
 * своей высоте: это остановившийся дождь, а не таблица поверх него. Смотри
 * функцию посадки в slots-play.js.
 */

/*
 * НИЗ ЭКРАНА: строка о том, что дальше, и кнопки. Прижаты книзу, середина
 * отдана дождю и севшим словам.
 *
 * САМОГО ЗАДАНИЯ ЗДЕСЬ НЕТ. Оно живёт в общей шторке (`task-sheet.js`), той
 * же, что в шашках и сексополии: там лицо платящего, имя партнёра в его цвете
 * и два выхода. Своя плашка с фразой, стоявшая на этом месте, была восьмой
 * копией одного и того же и на десктопе выглядела иначе, чем везде.
 */
.sl-niz { margin-top: auto; }

/* Строка под кнопками: «Можно сделать, можно крутить заново». */
.sl-podpisj {
  margin: 0 0 var(--s-2);
  font: 400 var(--t-label-s) var(--f-sans);
  color: var(--c-dim);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  /* Мелкая строка поверх дождя жжёт себе просвет: иначе читается вместе с
     пролетающим мимо словом. */
  text-shadow: 0 0 6px var(--c-bg), 0 0 14px var(--c-bg);
  min-height: 1em;
}

/*
 * ДВЕ КНОПКИ, И ТОЛЬКО ПОСЛЕ БРОСКА. До броска стоит одна золотая.
 *
 * Было четыре с лишним: тянуть, засчитать, «на сегодня хватит», плюс четыре
 * нажимаемые колонки. Владелец: «зачем так много кнопок по сравнению с
 * приложением». Уход с экрана живёт стрелкой в шапке, где ему и место.
 */
.sl-knopki {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-6);
}

.sl-knopki > .btn { flex: 1 1 0; min-width: 0; }

/* Обычная кнопка полупрозрачна, и сквозь неё летели чужие слова. */
.sl-knopki .btn:not(.btn--gold) { background: var(--c-surface); }

/* ==========================================================================
   ШИРОКИЙ ЭКРАН
   ==========================================================================
   Владелец 02.09.2026: «на десктопе явно больше текста должно лететь на экране
   игры, чтобы заполнять доступное пространство». Плотность дождя задаётся не
   здесь, а числом в `slots-play.js`: холст один, и сколько в нём капель, знает
   только он. Здесь только колонка содержимого.
   ========================================================================== */

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

  /*
   * СУЖАЕТСЯ ТОЛЬКО НИЗ, А НЕ ВЕСЬ СЛОЙ.
   *
   * Здесь стояло `max-width` на `.sl-поверх`, то есть на всём сразу, и вместе
   * с кнопками к середине уезжала шапка: стрелка «назад» и название вставали
   * посреди монитора вместо левого верхнего угла, а лицо игрока вместо правого.
   * Дождь идёт во всю ширину, шапка держит края, и колонка нужна только
   * кнопкам: растянутая на 2560 точек кнопка «Крутить» это линейка.
   */
  .sl-niz { max-width: 720px; margin-inline: auto; width: 100%; }
  .sl-knopki > .btn { min-width: 220px; }
}