/**
 * Напёрстки: комната, стол и шторка итога.
 *
 * КОМНАТА ЭТО СЛОИ, А НЕ ОДНА КАРТИНКА, и они из приложения (_Backdrop). Само
 * поле снято так, что освещённый камень поднимается туда, где стоят чашки, и
 * поэтому обрезано снизу. Обрезка оставляет наверху плоскую черноту, и над ней
 * лежат ещё два слоя: тёплая заливка, чтобы темнота была коричневой, а не
 * дырой, и сама лампа за кадром, которая заодно объясняет, откуда на столе
 * пятно света. Порядок слоёв менять нельзя: виньетка съест лампу.
 *
 * СВЕЧЕНИЕ В ЦВЕТЕ ТОГО, ЧЕЙ ХОД. Оно не украшение: на этом экране нет ни одной
 * надписи «твой ход» крупнее подписи, и цвет комнаты единственное, что видно
 * боковым зрением.
 *
 * ДЕСКТОП ЭТО НЕ «ШИРЕ», А КОЛОНКА. Стол на широком экране остаётся посреди, и
 * ограничивает его канва, а не эти правила: шаг между лунками считает
 * shell-table.js, потому что от него зависит и размер чашки. Здесь только
 * ширина колонки и то, что вокруг неё.
 */

/**
 * ПАРТИЯ ЗАБИРАЕТ ЭКРАН ЦЕЛИКОМ, как у шашек (`.ck`).
 *
 * Обычным экраном каркаса стол быть не может: сверху полоса, снизу пилюля
 * навигации, и то, что остаётся между ними, это не стол, а щель. Кнопка
 * уезжала под сгиб, а канва сплющивалась настолько, что чашки приходилось
 * ужимать до наперстков в буквальном смысле. Полосу и пилюлю снимает `nav.js`,
 * добавляя телу `без-полосы` и `без-верха`, а высоту забирает `inset: 0`.
 */
.sh {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
}

/* ---------- комната ---------- */

.sh__komnata {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Поле ФОНОМ, а не картинкой, и как у шашек: одним слоем на весь экран.
   Кадрируем по низу снимка, и это не вкус: там освещённый камень, и именно он
   обязан оказаться под чашками. Прижатое верхом поле (как у шашек, где верхом
   держат лампу) увело бы свет выше стола, и чашки стояли бы в темноте. */
.sh__pole {
  position: absolute;
  inset: 0;
  background: url('/next/images/shell/field.webp') center 92% / cover no-repeat;
}

/**
 * Слои экрана поднимаются над комнатой ПОИМЁННО, а не «все, кроме задника».
 *
 * Правило вида `.sh > :not(.sh__комната)` выглядит короче и ровно поэтому
 * опасно: оно накрывает и то, что в стол приходит СНАРУЖИ. Монета из caps
 * `coin.js` вешается прямо в `.sh` и живёт накладкой (`position: absolute;
 * inset: 0`), а это правило весомее её собственного и делало её обычным блоком
 * в конце колонки. На экране это выглядело как чёрное поле внизу вместо монеты
 * посреди стола. У шашек тот же `:not` записан как капкан, но там он про
 * задники, и я скопировал форму, не проверив, что в стол прилетает третьим.
 */
.sh__verkh,
.sh__igroki,
.sh__stol,
.sh__niz { position: relative; z-index: 1; }

/* Свечение в цвете того, чей ход. Меняется вместе с --цвет-хода. */
.sh__svet {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 55%,
    color-mix(in srgb, var(--tsvet-khoda, var(--c-player-1)) 16%, transparent) 0%,
    transparent 75%);
  transition: background 240ms ease;
}

/* Виньетка: держит взгляд на столе. */
.sh__tenj {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 65%,
    rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6) 100%);
}

/* Комната над столом: тёплая заливка и лампа, висящая чуть за кадром. */
.sh__lampa {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(68, 41, 15, 0.31) 0%,
      rgba(46, 28, 16, 0.12) 30%,
      rgba(0, 0, 0, 0) 66%),
    radial-gradient(circle at 50% 6%,
      rgba(245, 208, 169, 0.44) 0%,
      rgba(212, 175, 55, 0.18) 38%,
      rgba(0, 0, 0, 0) 100%);
}

/* ---------- верх ---------- */

.sh__verkh,
.sh__igroki,
.sh__niz {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
}

.sh__verkh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: max(12px, env(safe-area-inset-top));
}

.sh__stupenj {
  font: 600 11px/1 var(--f-mono, ui-monospace, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold, #d4af37);
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--c-gold, #d4af37) 50%, transparent);
  border-radius: 999px;
  background: rgba(20, 14, 14, 0.7);
}

/* ---------- игроки ---------- */

.sh__igroki {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
}

.sh__igrok {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 14, 14, 0.45);
  transition: border-color 200ms ease, background 200ms ease;
}

.sh__igrok--khodit {
  border-color: color-mix(in srgb, var(--tsvet) 85%, transparent);
  border-width: 1.4px;
  background: rgba(20, 14, 14, 0.9);
}

.sh__kto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.sh__imya {
  font-size: 14px;
  color: var(--c-text, #fafafa);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh__rolj {
  font: 600 10px/1.4 var(--f-mono, ui-monospace, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-dim, #a1a1aa);
}

.sh__igrok--khodit .sh__rolj { color: var(--tsvet); }

.sh__schyot {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--c-dim, #a1a1aa);
}

.sh__igrok--khodit .sh__schyot { color: var(--tsvet); }

.sh__vs {
  align-self: center;
  font: 600 10px/1 var(--f-mono, ui-monospace, monospace);
  letter-spacing: 0.15em;
  color: var(--c-dim, #a1a1aa);
}

/* ---------- стол ---------- */

/* СТОЛ УСТУПАЕТ, А НЕ ВЫТАЛКИВАЕТ. min-height: 0 обязателен: без него флекс
   не даёт колонке сжаться ниже содержимого, и на невысоком телефоне кнопка
   уезжает за нижний край. Именно это и случилось. */
.sh__stol {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.sh__stol canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Пока гадают, по столу и правда жмут. Курсор об этом говорит, а палец
     узнаёт по подсказке. */
  touch-action: manipulation;
}

/* ---------- низ ---------- */

.sh__niz {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

.sh__podskazka {
  /* Место под подсказку держим ВСЕГДА, даже когда её нет: иначе кнопка и стол
     подпрыгивают каждый раз, как она появляется и исчезает. */
  min-height: 40px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  color: var(--c-dim, #a1a1aa);
}

.sh__knopka {
  /* И под кнопку тоже: она есть только на открытии раунда. */
  min-height: 52px;
}

.sh__knopka .btn { width: 100%; }

/* ---------- шторка итога ---------- */

.sh-itog {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sh-itog__shapka { margin: 12px 0 8px; }

.sh-itog__priskazka {
  margin: 0 0 16px;
  font-size: 19px;
  line-height: 1.35;
  color: var(--c-text, #fafafa);
}

.sh-itog__khod {
  margin: 0;
  font-size: 15px;
  color: var(--c-dim, #a1a1aa);
}

.sh-itog__zadanie {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border-left: 3px solid var(--c-gold, #d4af37);
  background: rgba(255, 255, 255, 0.05);
}

.sh-itog__tekst {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.45;
}

.sh-itog__knopki {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

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

@media (min-width: 1024px) {
  /**
   * КОМНАТА ВО ВЕСЬ ЭКРАН И НА ШИРОКОМ.
   *
   * Экран носит класс `.screen`, а у того на широком стоит `max-width: var(--кол)`,
   * `margin-inline: auto` и `width: 100%`. Для списка это правильно, а для
   * экрана, лежащего `fixed` во весь монитор, означает вот что: комната
   * обрывается справа, и дальше идёт чёрное поле. Владелец нашёл это у колеса,
   * и у напёрстков ровно то же самое, потому что дефект общий и наследованный.
   *
   * Снимаем все три и берём то, что осталось от бокового рельса. Ширина рельса
   * приходит переменной: на 1440 и 1920 она уже не 264, а 288 и 320.
   */
  .sh {
    inset: 0 0 0 var(--kolonka, 264px);
    width: auto;
    max-width: none;
    margin: 0;
  }

  /* Стол шире, но не во весь монитор: чашки, разведённые в разные концы, не
     перемешиваются, а просто далеко стоят. Шаг между лунками ограничен в
     shell-table.js, здесь только колонка. */
  .sh__verkh,
  .sh__igroki,
  .sh__niz,
  .sh__stol { max-width: 760px; margin-inline: auto; }

  /* Ширина колонки и есть размер чашек: шаг между лунками считается от неё,
     и 760 дают чашку в 144 пикселя при натуральных 147, то есть один к одному
     без мыла. */

  .sh__podskazka { font-size: 17px; }

  /* Кнопка во всю ширину колонки на мониторе выглядит линейкой. */
  .sh__knopka .btn {
    width: auto;
    min-width: 280px;
    display: block;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh__svet { transition: none; }
  .sh__igrok { transition: none; }
}