/**
 * «Секс сценарии»: стол карточек и плитка наборов.
 *
 * ПРЕФИКС КЛАССА ЭТО ОБЩЕЕ ПРОСТРАНСТВО ИМЁН: стили всех игр лежат на одной
 * странице и красят всё, что подошло по селектору. Поэтому здесь всё под
 * `ss-`, и ни одного голого имени вроде `.карта` или `.плитка`.
 *
 * ЦВЕТ БЕРЁТСЯ ТОКЕНАМИ, а не числами: тройка уровней остроты это `--c-heat-*`,
 * те же, что красят жар в остальных играх. Своя палитра означала бы, что
 * «чёрный уровень» здесь и «жарко» в соседней игре выглядят разными шкалами.
 *
 * УРОВЕНЬ ПРИХОДИТ АТРИБУТОМ `data-жар`, а не классом: его ставит разметка из
 * числа, пришедшего с сервера, и превращать число в имя класса значило бы
 * завести таблицу перевода ради одного знака.
 */

/* ---------- уровни остроты ---------- */

.ss-urovni {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.ss-urovni::-webkit-scrollbar { display: none; }

.ss-urovenj {
  flex: 1 0 auto;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-muted);
  font: 600 var(--t-label-l) var(--f-sans);
  cursor: pointer;
  white-space: nowrap;
}
.ss-urovenj[data-zhar="1"][aria-pressed="true"] {
  color: var(--c-heat-1); border-color: var(--c-heat-1);
}
.ss-urovenj[data-zhar="2"][aria-pressed="true"] {
  color: var(--c-heat-2); border-color: var(--c-heat-2);
}
.ss-urovenj[data-zhar="3"][aria-pressed="true"] {
  color: var(--c-heat-5); border-color: var(--c-heat-5);
}

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

/*
 * СТОЛ: ЧИСЛО КОЛОНОК ЗАДАНО ПО ПОРОГАМ, а не отдано `auto-fill`.
 *
 * Автозаполнение честно заполняет ЛЮБУЮ ширину, и на мониторе оно заполнило
 * её крошками: пятнадцать колонок по полсотни пикселей, а римская «XXXVIII»
 * вылезла за край своей карты (скрин владельца 15.09.2026). Ровно поэтому в
 * каркасе у всех сеток колонки назначены по порогам, а не подобраны.
 *
 * На телефоне автозаполнение остаётся: там ширины так мало, что вариантов
 * всё равно нет, а мелкий телефон не должен получить четыре колонки только
 * потому, что их получил крупный.
 */
.ss-stol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
@media (min-width: 768px)  { .ss-stol { grid-template-columns: repeat(8, 1fr); gap: var(--s-3); } }
@media (min-width: 1024px) { .ss-stol { grid-template-columns: repeat(9, 1fr); } }
@media (min-width: 1440px) { .ss-stol { grid-template-columns: repeat(11, 1fr); } }
@media (min-width: 1800px) { .ss-stol { grid-template-columns: repeat(13, 1fr); } }

/*
 * РУБАШКА ЭТО КАРТИНКА, ОДНА НА УРОВЕНЬ ЖАРА.
 *
 * Рисунок у всех трёх один и тот же, меняется только металл: серебро, золото,
 * фиолет. На настоящей колоде это одна печатная форма и разная краска, и
 * читается стол как одна колода, а не как три разные игры.
 *
 * ВЕС: три файла по сорок килобайт на всю игру, а не на карточку. Плитка на
 * самом широком мониторе около ста тридцати пикселей, файл в четыреста
 * двадцать, то есть тройной запас по плотности и ни пикселя сверх.
 *
 * РАМКИ У ПЛИТКИ БОЛЬШЕ НЕТ: рамка нарисована внутри самой рубашки, и вторая
 * поверх неё читалась бы как ошибка печати.
 */
.ss-plitka {
  position: relative;
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-surface-high) center / 100% 100% no-repeat;
  color: var(--c-accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ss-plitka[data-zhar="1"] { background-image: url('/next/images/scenarios/back-1.webp?v=20260915m'); }
.ss-plitka[data-zhar="2"] { background-image: url('/next/images/scenarios/back-2.webp?v=20260915m'); }
.ss-plitka[data-zhar="3"] { background-image: url('/next/images/scenarios/back-3.webp?v=20260915m'); }

/*
 * РАМКА ВЕРНУЛАСЬ, И ЭТО НЕ ОТКАТ, А ИСПРАВЛЕНИЕ. Я снял её, рассудив, что
 * рамка нарисована внутри самой рубашки, и это было верно про ОДНУ карту и
 * неверно про стол: узор доходит до края, у соседей он смыкается, и сетка
 * читается одним полотном. Кайма тонкая и золотая, то есть заодно с рисунком,
 * а тень отрывает карту от стола.
 */
/*
 * СВЕЧЕНИЕ ЦВЕТОМ КАТЕГОРИИ, ПОД КАРТОЙ.
 *
 * Тремя слоями в одной тени, и порядок важен:
 *   тонкая золотая кайма, заодно с рисунком рубашки;
 *   мягкое цветное свечение вокруг, оно и делает соседние карты разными;
 *   чёрная тень снизу, она отрывает карту от стола.
 *
 * ЦВЕТ ЛЕЖИТ СНАРУЖИ, А НЕ ПОВЕРХ РУБАШКИ. Цветное пятно поверх испортило бы
 * металл: золото стало бы зелёным или сиреневым. Снаружи он красит воздух
 * вокруг карты, и рубашка остаётся собой.
 *
 * Переменная --ac это ТРОЙКА ЧИСЕЛ, а не цвет: свечение собирается как
 * rgba(var(--ac), .3), то есть цвет и прозрачность склеиваются на месте.
 * Отдать сюда #9d174d значит получить нерабочее объявление, которое умрёт
 * молча, и свечения просто не будет. Так же устроена плитка каталога игр.
 */
.ss-plitka {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-gold) 30%, transparent),
    0 0 14px -2px rgba(var(--ac, 212, 175, 55), .34),
    0 4px 12px -4px rgba(0, 0, 0, .7);
}
.ss-plitka:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px var(--c-gold),
    0 0 22px -1px rgba(var(--ac, 212, 175, 55), .55),
    0 8px 20px -4px rgba(0, 0, 0, .8);
}

/*
 * РАЗМЕР НОМЕРА СЧИТАЕТСЯ ОТ ШИРИНЫ САМОЙ КАРТЫ, а не берётся из шкалы.
 *
 * Причина в том, что номера разной длины: «I» это один знак, «XXXVIII» восемь.
 * Постоянный кегль верен для коротких и вылезает за край на длинных, что и
 * было видно на скрине. `cqw` это процент от ширины КАРТЫ, поэтому карта
 * любого размера получает свой кегль сама.
 *
 * Трекинг снят до нуля: на восьми знаках он съедает те самые проценты, из-за
 * которых слово и не влезало.
 */
.ss-plitka { container-type: inline-size; }
/*
 * ЦИФРА ОДНОГО ЗОЛОТА НА ВСЕХ ТРЁХ УРОВНЯХ, и это правка по живому.
 *
 * Она красилась краской своего металла: серебряная на серебряной рубашке,
 * фиолетовая на фиолетовой. Выглядело складно и работало плохо: цифра
 * сливалась с собственной картой ровно там, где должна была от неё
 * отличаться. Владелец сказал прямо: «цифра должна быть другого отличимого
 * цвета от карточки».
 *
 * Тёплое золото годится на всех трёх: на серебре и фиолете оно чужое по тону
 * и потому заметное, а на золотой рубашке его отделяет приглушённый узор.
 *
 * КЕГЛЬ 20% ШИРИНЫ КАРТЫ, а не 17%. Номер это содержание плитки, а узор фон,
 * и до правки они были одного веса. Выше 22% восьмизначный «XXXVIII»
 * упирается в края.
 */
.ss-plitka__nomer {
  font: 400 var(--keglj, 22cqw)/1 var(--f-serif);
  letter-spacing: 0;
  padding: 0 3cqw;
  color: #f5d79a;
  /* Тень нужна не для красоты: номер садится на картон, а не на плоский цвет,
     и без неё он на светлом металле теряет край. */
  text-shadow: 0 2px 5px rgba(0, 0, 0, .9);
  /* Перенос запрещён: «XXXVIII» в две строки это не решение, а другая беда. */
  white-space: nowrap;
}

/*
 * КЕГЛЬ ЗАВИСИТ ОТ ДЛИНЫ НОМЕРА, и это не украшение, а единственный способ
 * уместить и «I», и «XXXVIII» в одну карту.
 *
 * Числа измерены настоящим шрифтом каркаса, а не подобраны: для каждой длины
 * взят самый широкий номер этой длины, и кегль выбран так, чтобы он занимал 86%
 * ширины карты. Влез он, влезут все остальные той же длины.
 *
 * Потолок 30% упирает короткие: по ширине «I» позволил бы и втрое больше, но
 * высота у него та же, и выше трети ширины карты цифра лезет в орнамент.
 */
.ss-plitka__nomer[data-znakov="1"],
.ss-plitka__nomer[data-znakov="2"],
.ss-plitka__nomer[data-znakov="3"],
.ss-plitka__nomer[data-znakov="4"] { --keglj: 30cqw; }
.ss-plitka__nomer[data-znakov="5"] { --keglj: 27cqw; }
.ss-plitka__nomer[data-znakov="6"] { --keglj: 24cqw; }
.ss-plitka__nomer[data-znakov="7"] { --keglj: 22cqw; }

/*
 * ЗАПЕРТАЯ КАРТОЧКА НЕ ПРЯЧЕТСЯ, А ГАСНЕТ. Стол виден целиком нарочно: пара
 * должна видеть, что покупает. Прятать запертые значило бы показать колоду из
 * шести карточек и продавать невидимое.
 */
.ss-plitka[data-zaperta] { opacity: .42; }
.ss-plitka[data-zaperta] .ss-plitka__zamok { opacity: 1; }

.ss-plitka__zamok,
.ss-plitka__galka {
  position: absolute;
  right: var(--s-1);
  top: var(--s-1);
  display: grid;
  place-items: center;
}
.ss-plitka__zamok .ico { width: 14px; height: 14px; }

/*
 * СДЕЛАННАЯ КАРТОЧКА ПОМЕЧАЕТСЯ ОДНОЙ ГАЛОЧКОЙ, И БОЛЬШЕ НИЧЕМ (владелец
 * 15.09.2026: «просто галочкой вверху без полной обводки»). Зелёная кайма
 * вокруг всей карты и зелёная подложка делали стол пёстрым и спорили с самой
 * рубашкой, хотя сказать надо ровно одно: эту уже брали. Поэтому карта
 * остаётся собой, а меняется только угол.
 */
.ss-plitka__galka {
  color: var(--c-done);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
.ss-plitka__galka .ico { width: 18px; height: 18px; }

/* Сделанная гаснет самую малость: галочку видно и без этого, но стол так
   читается как «пройденное отступило», а не как «тут всё одинаковое». */
.ss-plitka[data-sdelana] { opacity: .62; }

/* ---------- карточка крупно ---------- */

.ss-zum {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  perspective: 1200px;
}
.ss-zum__fon {
  position: absolute;
  inset: 0;
  background: var(--c-scrim);
}

/*
 * РАМКА ЕДЕТ ТРАНСФОРМОМ, а не размерами. Переход по `width`/`top` заставляет
 * браузер пересчитывать раскладку на каждом кадре, и на телефоне это видно
 * рывками; трансформ не трогает раскладку вовсе.
 *
 * ПЕРЕХОД ВКЛЮЧАЕТСЯ ВТОРЫМ КАДРОМ (класс `--едет`). Поставь его сразу, и
 * браузер применит стартовое и конечное положение за один кадр, то есть
 * никакого движения не будет.
 */
.ss-zum__rama {
  position: relative;
  width: min(460px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.ss-zum__rama--edet {
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), opacity .2s ease;
}

.ss-karta {
  position: relative;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}
.ss-karta[data-zhar="1"] { border-top: 3px solid var(--c-heat-1); }
.ss-karta[data-zhar="2"] { border-top: 3px solid var(--c-heat-2); }
.ss-karta[data-zhar="3"] { border-top: 3px solid var(--c-heat-5); }

.ss-karta__shapka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.ss-karta__gr {
  color: var(--c-faint);
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ss-karta__gr[style*="--svoy"] { color: var(--svoy); }
.ss-karta__vremya {
  color: var(--c-gold);
  font: 600 var(--t-label-m) var(--f-mono);
}

.ss-karta__chto {
  margin: 0 0 var(--s-2);
  color: var(--c-accent);
  font: 500 var(--t-title-s) var(--f-sans);
}
.ss-karta__tekst {
  margin: 0;
  color: var(--c-text);
  font: 400 var(--t-body-l) var(--f-sans);
}
.ss-karta__rek {
  margin: var(--s-3) 0 0;
  color: var(--c-warn);
  font: 400 var(--t-body-s) var(--f-sans);
}

.ss-karta__niz { margin-top: var(--s-4); }
.ss-karta__niz .btn { width: 100%; margin-top: var(--s-2); }

.ss-karta__zakryitj {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  padding: var(--s-1);
  border: 0;
  background: none;
  color: var(--c-faint);
  cursor: pointer;
}

/* Шаг сценария это та же карточка, только не всплывшая, а лежащая в потоке. */
.ss-karta--shag {
  margin: var(--s-4) 0;
}

/*
 * ОКНО ПРОХОЖДЕНИЯ НА МОНИТОРЕ ЭТО ТА ЖЕ КАРТА, ЧТО В СТОЛЕ.
 *
 * Прохождение это отдельный экран, и на широком он честно занимал всю ширину:
 * шаг растягивался на тысячу с лишним пикселей, строка задания шла через
 * полэкрана, а полоса шагов превращалась в ниточку. В столе карточка
 * открывается окном шириной 460 и не шире, и владелец справедливо ждёт того же.
 *
 * ШИРИНА ТА ЖЕ, ЧТО У ЗУМА, и взята она не на глаз, а оттуда же: разойдись эти
 * два числа, и два окна одной игры станут разного размера.
 *
 * ЦЕНТРУЕМ ЧЕРЕЗ `margin-inline: auto`: один `max-width` прижимает блок влево,
 * и это в каркасе уже случалось.
 *
 * НА ТЕЛЕФОНЕ НИЧЕГО НЕ МЕНЯЕТСЯ: там ширины и так нет, а сужать её ещё значило
 * бы отнять место у текста задания.
 */
@media (min-width: 768px) {
  .ss-okno {
    width: min(460px, 100%);
    margin-inline: auto;
  }
}

/* ---------- полоса шагов ---------- */

.ss-polosa {
  display: flex;
  gap: var(--s-1);
  margin-top: var(--s-4);
}
.ss-polosa__shag {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-surface-alt);
}
.ss-polosa__shag[data-sostoyanie="proyden"] { background: var(--c-done); }
.ss-polosa__shag[data-sostoyanie="seychas"] { background: var(--c-gold); }

/* ---------- наборы ---------- */

.ss-pilyuli {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.ss-pilyuli::-webkit-scrollbar { display: none; }

.ss-pilyulya {
  flex: 0 0 auto;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-muted);
  font: 600 var(--t-label-l) var(--f-sans);
  cursor: pointer;
  white-space: nowrap;
}
.ss-pilyulya[aria-pressed="true"] {
  color: var(--c-on-gold);
  background: var(--c-gold);
  border-color: var(--c-gold);
}

/*
 * СВОЙ ЦВЕТ У КАТЕГОРИИ, И ТОТ ЖЕ, ЧТО НА ЧИПЕ НАСТРОЕК.
 *
 * Мера смешивания взята из frame.css (.choice__opt со своим цветом) один в
 * один: 45% на кайме у выключенной, 86% с чёрным на заливке у включённой.
 * Свои числа здесь означали бы, что «Власть» в настройках и «Власть» на
 * наборах это два разных цвета, хотя выбирается одно и то же.
 *
 * ПИЛЮЛЯ «ВСЕ» ОСТАЁТСЯ ЗОЛОТОЙ: у неё нет категории, и красить её чужим
 * цветом значило бы сказать, что она чья-то.
 */
.ss-pilyulya[style*="--svoy"] {
  border-color: color-mix(in srgb, var(--svoy) 45%, var(--c-border-strong));
}
.ss-pilyulya[style*="--svoy"][aria-pressed="true"] {
  background: color-mix(in srgb, var(--svoy) 86%, black);
  border-color: var(--svoy);
  color: #fff;
}

/*
 * ПЛИТКА СЦЕНАРИЯ ЭТО ПЛИТКА КАТАЛОГА `.art`, и здесь только то, чего у неё
 * своего нет. Сетку, пропорцию, скругление, свечение своего цвета, нажатие в
 * 0.96 и обрезку имени по двум строкам даёт `frame.css`, и ничего из этого
 * тут не повторяется: повторённое однажды разойдётся.
 */

/*
 * ОБЛОЖКА КАРТИНКОЙ, как у игры в каталоге. Геометрию даёт `.art img` из
 * `frame.css`, здесь только то, чего у него нет: подсветка своим цветом
 * поверх картинки, слабая, чтобы связать плитку с категорией и не перекрасить
 * саму иконку.
 *
 * Цветной холст, стоявший тут раньше, убран совсем: он был затычкой на время
 * без картинок, и держать оба значило бы оставить мёртвое правило, которое
 * однажды кто-нибудь включит обратно.
 */
/*
 * ЦВЕТ КАТЕГОРИИ ФОНОМ САМОЙ ПЛИТКИ, а не отдельным слоем. Обложка ложится
 * поверх и закрывает его целиком; нет обложки, остаётся цвет, и плитка цела.
 * Отдельный слой под картинкой был бы тем же самым, только лишним узлом на
 * каждой из пятидесяти плиток.
 */
.ss-nabor[style*="--svoy"] {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--svoy) 34%, transparent) 0%,
      transparent 62%),
    var(--c-surface-high);
}

.ss-nabor__oblozhka {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Лёгкая подкраска, а не заливка: иконка уже нарисована цветом своей
     категории, и вторая краска поверх сделала бы её грязной. */
  filter: saturate(1.05);
}

.ss-nabor__meta {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, .72);
  font: 600 var(--t-label-m) var(--f-mono);
}

/* Угол плитки: замок или галочка, поверх завесы, но до текста. */
.ss-nabor__zamok,
.ss-nabor__galka {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
.ss-nabor__zamok { color: rgba(255, 255, 255, .72); }
.ss-nabor__galka { color: var(--c-done); }

/* Пройденный отступает, как и сделанная карточка: одно правило на всю игру. */
.ss-nabor[data-proyden] { opacity: .66; }
.ss-nabor[data-zapert] .art__name { color: rgba(255, 255, 255, .78); }

/* ---------- конец сценария ---------- */

.ss-finish {
  margin: var(--s-8) 0;
  text-align: center;
}
.ss-finish__galka { color: var(--c-done); }
.ss-finish__galka .ico { width: 48px; height: 48px; }
.ss-finish__chto {
  margin: var(--s-3) 0 0;
  color: var(--c-text);
  font: 400 var(--t-headline-s) var(--f-serif);
}

/* ---------- предупреждение ---------- */

/*
 * ЧЕСТНО СКАЗАТЬ, ЧТО НИЧЕГО НЕ ОСТАЛОСЬ (владелец 15.09.2026). Цвет
 * предупреждающий, а не выключенный: `--c-dim` значит «выключено», и строка,
 * объясняющая погасшую кнопку, сама выглядела бы погасшей.
 */
.set-preduprezhdenie {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--c-warn) 35%, transparent);
  background: color-mix(in srgb, var(--c-warn) 8%, transparent);
  color: var(--c-warn);
  font: 400 var(--t-body-s) var(--f-sans);
}

/* ---------- секундомер ---------- */

/*
 * ВИД ОБЩИЙ С ЧАСАМИ (`sx-часы` в sexopoly.css), потому что это тот же предмет
 * на экране. Здесь только то, чем секундомер от них отличается: заливки нет,
 * считать ей нечего, а рядом с цифрами стоит мерка «5+».
 */
.sx-chasyi--vverkh .sx-chasyi__merka {
  position: relative;
  color: var(--c-faint);
  font: 600 var(--t-label-m) var(--f-mono);
}