/*
 * Слоты поз.
 *
 * СТРОЕНИЕ СПИСАНО У СЛОТОВ, и это не лень: владелец просил «как в слотах», а
 * дождь на полэкрана и дождь во весь экран это разные вещи. Стол `fixed` во всё
 * окно, холст позади всего, слой поверх держит безопасные зоны.
 *
 * ЦВЕТА ПАДАЮЩИХ ИМЁН ЗДЕСЬ НЕ ЗАДАНЫ. Их восемь, они идут из данных по
 * семейству позы и живут в `poses-rain.js`: канва не знает про CSS, а держать
 * одну палитру в двух местах значит однажды развести их.
 */

/*
 * ПРИНАДЛЕЖНОСТИ КАРКАСА УХОДЯТ на настройках и в партии: нижняя пилюля
 * разделов и верхняя полоса с названием.
 *
 * Пилюля по прямой просьбе: «на мобайле в игре и настройках нужно убрать
 * пилюлю Игры, я, мы».
 *
 * ПОЛОСА ПО ДРУГОЙ ПРИЧИНЕ, И ОНА ВАЖНЕЕ. Полоса стоит `z-index: 30`, а стол
 * игры `fixed` без своего слоя, поэтому «LovePlay» ложился ПОВЕРХ стрелки
 * назад. У заголовка свой обработчик, уводящий в каталог игр, и нажатие по
 * месту стрелки доставалось ему: «кнопка назад почему-то выбросила аж на экран
 * игры». Стрелка была ни при чём, до неё не доходило.
 *
 * Класс вешает и снимает сам экран, поэтому обе пропадают только тут, а не
 * навсегда после первого захода.
 */
/* Настройки: уходит только нижняя пилюля. Полоса с названием и лицом
   остаётся, потому что это обычный экран каркаса и выглядеть он обязан как
   все остальные страницы настроек. */
body.ps-bez-pilyuli .nav-phone { display: none; }

/* Партия: уходит и полоса. Экран занят игрой целиком, и обе принадлежности
   каркаса в нём лишние, а полоса вдобавок крадёт нажатие у стрелки. */
body.ps-vo-vesj-ehkran .nav-phone,
body.ps-vo-vesj-ehkran .topbar { display: none; }

/*
 * СТОЛ ВО ВСЁ ОКНО.
 *
 * svh, а не vh: это самое маленькое окно, со строкой браузера на месте. При vh
 * экран прыгал бы каждый раз, когда строка уезжает и возвращается.
 */
.ps-stol {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
}

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

/*
 * Слой поверх дождя. Безопасные зоны держит ОН, а не стол: холст обязан
 * доставать до самого края стекла, а стрелка не должна лезть под чёлку и
 * кнопка под полосу жеста.
 */
.ps-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));
}

/* Шапка живёт по краям окна, её ширину не ограничиваем: стрелка у левого края. */
.ps-verkh { flex: 0 0 auto; }

.ps-niz {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}

.ps-ostalosj {
  margin: 0;
  font-size: 12.5px;
  color: var(--c-dim);
  text-align: center;
  min-height: 16px;      /* держим место, чтобы кнопка не прыгала */
}

.ps-knopka { min-width: 200px; }

/* ---------- карточка выпавшей позы ---------- */

.ps-card { text-align: center; }

/*
 * РИСУНОК В КОЛЬЦЕ, как карточка скретчей.
 *
 * У рисунков поз свой светлый задник, и прямоугольник с ним лежал в тёмной
 * шторке заплаткой. Круг убирает углы, где этого задника больше всего, а
 * кольцо в цвет семейства связывает рисунок с именем, которое только что
 * горело этим же цветом на дожде.
 *
 * Размер задан числом, а не долей: круг обязан быть круглым на любом экране,
 * и процент от ширины шторки на узком телефоне дал бы блюдце.
 */
.ps-card__koljtso {
  --ps-krug: 232px;
  width: var(--ps-krug);
  height: var(--ps-krug);
  margin: 0 auto var(--s-4);
  border-radius: 50%;
  overflow: hidden;
  /* Кольцо толщиной три, как в приложении, плюс мягкое свечение своим же
     цветом: оно и склеивает круг с тёмным фоном шторки. */
  box-shadow:
    0 0 0 3px var(--ps-tsvet, var(--c-gold-light, #F0D68C)),
    0 0 22px -6px var(--ps-tsvet, transparent);
  background: var(--c-surface-high);
}

/*
 * cover, а не contain: в круге contain оставил бы поля по бокам и вернул тот
 * самый чужой задник, ради которого всё и затевалось.
 */
.ps-card__pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ps-card__name {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.2;
  /* Цвет семейства: он же на кольце и он же горел на дожде. */
  color: var(--ps-tsvet, var(--c-text));
}

.ps-card__text {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--c-text);
  text-align: left;
}

.ps-card__more { width: 100%; }

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

/*
 * СЛЕВА РЕЛЬС РАЗДЕЛОВ, И ЭКРАН НАЧИНАЕТСЯ ЗА НИМ. Стол стоит `fixed`, то есть
 * меряется от окна, и без этого отступа он накрыл бы рельс вместе с выходом из
 * игры. Та же строка и по той же причине стоит у слотов и сексополии.
 *
 * СУЖАЕТСЯ ТОЛЬКО НИЗ. Дождь идёт во всю ширину, шапка держит края, а колонка
 * нужна только кнопке: растянутая на весь монитор кнопка это линейка.
 */
@media (min-width: 1024px) {
  .ps-stol { left: var(--kolonka, 264px); }
  .ps-niz { max-width: 720px; margin-inline: auto; width: 100%; }
  .ps-knopka { min-width: 220px; }
  .ps-card__koljtso { --ps-krug: 280px; }
}

/*
 * Строка «выберите хотя бы одну сложность». Свой класс, а не слотовский:
 * правка в чужой игре не должна приезжать сюда молча.
 */
.ps-pusto {
  margin: var(--s-3) 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--c-dim);
}

/*
 * ШИЛЬДИК «NEW» НА ПЛИТКЕ КАТАЛОГА.
 *
 * Живёт здесь, а не в общих стилях каркаса: он относится к одной игре и уйдёт
 * вместе с её новизной. Правило в общем файле пришлось бы потом искать.
 *
 * Цвет золотой, как у всего, что просит внимания в каркасе, но подложка глухая:
 * плитка это фотография, и полупрозрачная метка на ней читается пятном.
 */
.art__new {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--c-gold, #D4AF37);
  color: #1a1207;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
  pointer-events: none;
}