/* ==========================================================================
   РОЛЕВЫЕ
   ==========================================================================
   Своих чисел здесь ровно столько, сколько нужно сетке карточек, свечению под
   значком и цветам накала. Общее берём из каркаса и не копируем: `.chip`,
   `.btn`, `.eyebrow`, `.mast`, `.screen`, `.sheet` живут в `frame.css`, и
   вторая их копия здесь разошлась бы с первой в первый же вечер.

   ЦВЕТА НАКАЛА ВЗЯТЫ С БОЕВОЙ СТРАНИЦЫ `/{язык}/games/role-play/` пипеткой, а
   не подобраны на глаз: игрок, пришедший оттуда, обязан узнать «BDSM» по цвету
   раньше, чем прочитает слово. Своих токенов у них нет и быть не должно, эти
   четыре цвета не встречаются больше нигде во внутрянке.
   ========================================================================== */

.rp-karta--soft,    .rp-verkh--soft,    .chip--soft    { --nakal: #bfdbfe; }
.rp-karta--medium,  .rp-verkh--medium,  .chip--medium  { --nakal: #f5d0a9; }
.rp-karta--intense, .rp-verkh--intense, .chip--intense { --nakal: #ff5577; }
.rp-karta--bdsm,    .rp-verkh--bdsm,    .chip--bdsm    { --nakal: #c8b3d4; }

/* ==========================================================================
   ПОЛОСА НАКАЛА
   ==========================================================================
   Полоса ОДНА. Владелец 02.09.2026: «сделать 1 полосу выбора бдсм, лайт и т.д.,
   не нужно две они путают». Была вторая, с категориями, и она отвечала на
   другой вопрос теми же на вид чипами.
   ========================================================================== */

/*
 * ПОЛОСА МОТАЕТСЯ ВБОК, А НЕ ПЕРЕНОСИТСЯ. Пять чипов в две строки съедают
 * высоту, которая нужна карточкам. Так же устроена полоса групп на «Играх».
 */
.rp-polosa {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  margin: var(--s-4) 0 var(--s-3);
  padding-bottom: 2px;
  scroll-padding-inline: var(--s-4);
}

.rp-polosa::-webkit-scrollbar { display: none; }
.rp-polosa .chip { flex: 0 0 auto; }

/*
 * ВЫБРАННЫЙ ЧИП КРАСИТСЯ В ЦВЕТ СВОЕГО УРОВНЯ, а не в общее золото. Владелец:
 * «выбранное подсвечивать цветом». Цвет тот же, что на бейдже карточки, и это
 * единственное, что связывает полосу с сеткой без подписи.
 *
 * У чипа «Все» уровня нет, значит нет и `--накал`: он остаётся золотым, как
 * все выбранные чипы каркаса. Запасное значение в `var()` делает это само, без
 * отдельного правила.
 */
.rp-polosa .chip--on {
  color: var(--nakal, var(--c-gold));
  border-color: var(--nakal, var(--c-gold));
  background: color-mix(in srgb, var(--nakal, var(--c-gold)) 16%, transparent);
  box-shadow: 0 0 14px -4px var(--nakal, var(--c-gold));
}

.rp-schyot {
  margin: 0 0 var(--s-3);
  font: 400 var(--t-label-s) var(--f-sans);
  color: var(--c-faint);
}

.rp-pusto {
  margin: var(--s-8) 0;
  text-align: center;
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-muted);
}

/* ==========================================================================
   БЕЙДЖ НАКАЛА
   ==========================================================================
   Заменил четыре точки. Точки это шкала без подписи: они сообщали «горячее
   трёх», но не говорили чего именно, и слово BDSM на них не читалось вовсе.
   Устройство бейджа боевое: цвет буквами, тот же цвет заливкой в одну десятую.
   ========================================================================== */

.rp-beydzh {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font: 600 11px/1.5 var(--f-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nakal, var(--c-gold));
  background: color-mix(in srgb, var(--nakal, var(--c-gold)) 12%, transparent);
}

/* ==========================================================================
   ПАНЕЛЬ: СЕТКА КАРТОЧЕК
   ========================================================================== */

.rp-setka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  padding-bottom: var(--s-6);
}

/*
 * ВЫСОТА ЯЧЕЙКИ ЗАДАНА ЧИСЛОМ, И ЭТО ПОЧИНКА.
 *
 * Владелец 02.09.2026: «когда нажимаешь вариант все то ячейки плывут и не
 * помещаются на мобайле». Причина измерена: боевые названия доходят до 38
 * знаков («Режиссёр Фильма для Взрослых и Актриса»), в колонке шириной сто с
 * небольшим точек это пять строк. Ряд с длинными именами вырастал на два
 * десятка точек над соседним, и сетка шла волной; после смены фильтра волна
 * перекладывалась на другие ряды, отчего и казалось, что ячейки «плывут».
 *
 * Высота одна на все, имя обрезается по ней. Ровный ряд важнее полного имени:
 * имя целиком читается на следующем экране, а рваная сетка мешает выбирать.
 */
.rp-karta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  height: 148px;
  padding: var(--s-3) var(--s-2) var(--s-2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  background: var(--c-card-bg);
  color: var(--c-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--m-standard) var(--m-ease),
              background var(--m-standard) var(--m-ease);
}

.rp-karta:hover { border-color: color-mix(in srgb, var(--nakal) 55%, transparent); }
.rp-karta:active { transform: scale(.97); }

/*
 * ВИНЬЕТКА И ПОДСВЕТКА ПОД ЗНАЧКОМ.
 *
 * Владелец: «нужна виньетка и подсветка». Значок неоновый, то есть светится
 * сам, но на плоской карточке это свечение висит в пустоте. Круглый отлив
 * позади него даёт источнику место, откуда светить, и ровно так же устроен
 * огонёк ожидания в каркасе (`.грузим__огонь::before`).
 *
 * Размер задан числом: ленивой загрузке нужно знать место заранее, иначе сетка
 * прыгает по мере подгрузки и палец попадает не в ту карточку.
 */
.rp-karta__svet {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
}

/*
 * ОТЛИВ НЕЙТРАЛЬНЫЙ, А НЕ ЦВЕТА НАКАЛА. Сперва он красился накалом, и это было
 * верно, пока значки были одноцветными. Теперь каждый светится своим: фиолетом,
 * маджентой, цианом, янтарём, и синий отлив «нежного» под фиолетовым значком
 * читается как грязь. Своё свечение у значка уже есть, отливу остаётся дать ему
 * место, откуда светить, а не спорить с ним цветом.
 */
.rp-karta__svet::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 245, 230, .10), transparent 70%);
}

.rp-karta__znachok {
  position: relative;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

/*
 * ВЫСОТА ИМЕНИ ЗАДАНА И НЕ СЖИМАЕТСЯ. Одного `line-clamp: 2` мало: колонка
 * гибкая, и при нехватке места браузер ужимал само поле имени до полутора
 * строк. Получалось худшее из возможного: вторая строка обрезана ПО ГОРИЗОНТУ
 * многоточием и ещё раз по вертикали, половинками букв. Ровно это и было видно
 * на первом снимке: «Режиссёр Фильма для» с отрезанным низом.
 */
.rp-karta__imya {
  flex: 0 0 auto;
  height: 2.5em;
  font: 600 var(--t-label-l) var(--f-sans);
  line-height: 1.25;
  /* Два ряда: третий не влезает в заданную высоту вместе с бейджем. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rp-karta__niz {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-1);
}

.rp-karta__zamok { display: inline-flex; color: var(--c-faint); }

/* Запертая приглушена, но ЧИТАЕТСЯ: пара должна видеть, что покупает. */
.rp-karta--zaperta { opacity: .62; }
.rp-karta--zaperta .rp-karta__znachok { filter: grayscale(.5); }

/* Открытая помечена волоском золота: к ней возвращаются. */
.rp-karta--otkryita { border-color: rgba(212, 175, 55, .4); }

/*
 * «Мне повезёт» стоит первой ячейкой и отличается от сценариев золотом, а не
 * размером: она того же роста и ширины, значит сетка остаётся сеткой. Бейджа у
 * неё нет, накала у случайности не бывает; пустой низ оставлен нарочно, он
 * держит имя на той же высоте, что и у соседей.
 */
.rp-karta--sluchay {
  border-color: rgba(212, 175, 55, .45);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-gold) 10%, transparent), var(--c-card-bg) 70%);
}

.rp-karta--sluchay:hover { border-color: var(--c-gold); }
.rp-karta--sluchay .rp-karta__imya { color: var(--c-gold-light); }

/* Бейдж у неё золотой: `--накал` не задан, и `var()` сам берёт запасное. Правило
   оставлено явным, чтобы сюда не пришли добавлять `--накал` «для порядка». */
.rp-karta--sluchay .rp-beydzh {
  color: var(--c-gold);
  background: color-mix(in srgb, var(--c-gold) 14%, transparent);
}

/* ==========================================================================
   СЦЕНАРИЙ: ШАПКА
   ========================================================================== */

.rp-verkh {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.rp-verkh__svet {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

/* Тот же нейтральный отлив, что на карточке, и по той же причине. */
.rp-verkh__svet::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 245, 230, .12), transparent 68%);
}

.rp-verkh__znachok { position: relative; width: 38px; height: 38px; object-fit: contain; }

.rp-verkh__imya {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 var(--t-title-s) var(--f-sans);
}

/* ==========================================================================
   СЦЕНАРИЙ: КОМПОНОВКА
   ==========================================================================
   СОДЕРЖИМОЕ СТОИТ В СЕРЕДИНЕ, А НЕ ПОД ШАПКОЙ. Владелец 02.09.2026: «зачем оно
   в самом верху на большом экране и на мобайле также, все прижато к верху, не
   используется пространство грамотно». Оба шага сценария короткие: правила с
   двумя кнопками, потом две карточки ролей. Прижатые к верху, они оставляли под
   собой пустой экран во всю высоту, и на 1440 это выглядело как недогруженная
   страница.

   Приём тот же, что у огонька ожидания в каркасе и у доски скретча: колонка во
   всю высоту, шапка сверху, а середина забирает свободное место с обеих сторон
   через `margin-block: auto`. Ни одного числа высоты здесь нет, поэтому клавиша
   на телефоне и полоса адреса ничего не ломают.
   ========================================================================== */

#rpP {
  display: flex;
  flex-direction: column;
  /* Динамическая единица, а не 100vh: на телефоне полоса адреса то есть, то
     нет, и на `vh` экран дёргается при каждой прокрутке. */
  min-height: calc(100svh - var(--s-8));
}

.rp-seredina { margin-block: auto; }

/* ==========================================================================
   СЦЕНАРИЙ: УГОВОР
   ==========================================================================
   Взят с боя (`safeWordModal`) и стоит ОТДЕЛЬНЫМ ШАГОМ, а не строкой над
   ролями: ролей до него не видно вовсе. Строку можно проскочить глазами, шаг
   нельзя, и в этом весь смысл разговора про стоп-слово.
   ========================================================================== */

.rp-ugovor {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--c-gold);
  background: rgba(255, 255, 255, .05);
}

.rp-ugovor__zagolovok {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font: 600 var(--t-title-s) var(--f-sans);
  color: var(--c-gold);
}

.rp-ugovor__lid {
  margin: 0 0 var(--s-2);
  font: 600 var(--t-body-m) var(--f-sans);
}

.rp-pravila {
  margin: 0;
  padding-left: var(--s-5);
  font: 400 var(--t-body-m) var(--f-sans);
  line-height: 1.6;
  color: var(--c-text);
}

.rp-pravila > li { margin-bottom: var(--s-1); }

.rp-ugovor__pripiska {
  margin: var(--s-3) 0 0;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-text);
}

/* Кнопки столбиком: сквозное правило внутрянки, docs/refactor/RULES.md. */
.rp-knopki {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-5) 0 var(--s-8);
}

/* ==========================================================================
   СЦЕНАРИЙ: РОЛИ
   ========================================================================== */

.rp-poryadok {
  margin: 0 0 var(--s-3);
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-text);
  text-align: center;
}

.rp-roli {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/*
 * КАРТОЧКА РОЛИ ВСЕГДА ЗАКРЫТА. Роль читается створкой и закрывается за собой,
 * как модальное окно на бою. Раскрытая насовсем карточка означала бы, что через
 * минуту обе роли лежат открытыми на одном экране, который пара передаёт из рук
 * в руки.
 */
.rp-rolj {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-4);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .04);
  text-align: center;
}

/* Лицо своего места: цвет ободка тот же, что у полосы пары в каркасе. */
.rp-rolj__litso {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-surface-alt);
  border: 2px solid var(--c-dim);
}

.rp-rolj--ego .rp-rolj__litso { border-color: var(--c-player-1); }
.rp-rolj--eyo  .rp-rolj__litso { border-color: var(--c-player-2); }

.rp-rolj__chjya { margin-top: var(--s-2); }

.rp-rolj__imya {
  margin: var(--s-1) 0 var(--s-2);
  font: 600 var(--t-title-s) var(--f-sans);
}

.rp-rolj__tayna {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  margin: 0 0 var(--s-3);
  font: 400 var(--t-label-s) var(--f-sans);
  color: var(--c-text);
}

.rp-rolj__otkryitj { width: 100%; gap: var(--s-2); }

.rp-khvatit { width: 100%; margin: var(--s-4) 0 0; }

/* ==========================================================================
   СЦЕНАРИЙ: СТВОРКА С РОЛЬЮ
   ========================================================================== */

.rp-stvorka__chjya {
  display: block;
  font: 600 var(--t-label-s) var(--f-sans);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold);
}

.rp-stvorka__imya { display: block; font: 600 var(--t-title-m) var(--f-sans); }

.rp-rolj__metka {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-1);
  font: 600 var(--t-label-s) var(--f-sans);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold);
}

.rp-rolj__tekst {
  margin: 0;
  font: 400 var(--t-body-m) var(--f-sans);
  line-height: 1.5;
  color: var(--c-text);
}

/* Правила повторены внутри роли: так же на бою, где у каждой карточки свой
   раздел «Важно!». Читают роль по одному, и напоминание должно быть там же. */
.rp-stvorka__vazhno {
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--c-gold);
  background: rgba(255, 255, 255, .05);
}

.rp-stvorka__vazhno .rp-rolj__metka { margin-top: 0; }

/* ==========================================================================
   ШИРОКИЙ ЭКРАН
   ==========================================================================
   Панель это СПИСОК, значит ей верен общий предел содержимого, а не колонка
   формы: карточки растут числом в ряду, а не шириной. Сценарий наоборот читают
   сверху вниз, и ему нужна колонка, в которой строка не рвётся.
   ========================================================================== */

/*
 * НА ШИРОКОМ РАСТЁТ ЧИСЛО ЯЧЕЕК, А НЕ ИХ ШИРИНА.
 *
 * Владелец 02.09.2026: «на десктопе нужно сделать тоже ячейки как на „Я“, также
 * адаптивными и такого же размера». Было жёсткое число колонок, и ширина ячейки
 * ползла вместе с монитором: 114 на телефоне, 243 на 1900 и 330 на 2560 при
 * неизменной высоте 172. Значок в 64 точки терялся в этом прямоугольнике, а
 * карточка переставала быть карточкой.
 *
 * `auto-fill` с вилкой 150..190 держит ячейку в узкой полосе на любой ширине:
 * 158 при 700, 165 при 1024, 181 при 1280, 158 при 1900, 159 при 2560. Верхняя
 * граница нужна обязательно: с `1fr` вместо неё ячейка снова растянулась бы,
 * просто на другом числе колонок.
 *
 * На телефоне колонок ровно три и они заданы числом: там вилка дала бы две
 * колонки по 173, а трёхколоночная сетка это решение, а не следствие ширины.
 */
@media (min-width: 700px) {
  .rp-setka {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--s-3);
  }
  /*
   * Колонок столько, сколько влезет по нижней границе, а ширину карточки держит
   * её собственный предел. Жёсткий верх прямо в `minmax` тоже работает, но
   * считает колонки по ВЕРХНЕЙ границе и потому теряет по одной на каждой
   * ступени: на 1024 выходило три карточки в ряд вместо четырёх.
   */
  .rp-karta { height: 172px; max-width: 190px; margin-inline: auto; width: 100%; }
}

@media (min-width: 1024px) {
  .rp-karta__svet { width: 72px; height: 72px; }
  .rp-karta__znachok { width: 64px; height: 64px; }
  /* На широком полоса помещается целиком, и мотать её незачем. */
  .rp-polosa { overflow-x: visible; flex-wrap: wrap; }

  /*
   * СЦЕНАРИЙ КОЛОНКОЙ, И ДВЕ РОЛИ РЯДОМ. На широком экране роли встают в две
   * колонки: так видно обе разом, а закрытая соседка не заставляет мотать.
   * На телефоне это невозможно, там они друг под другом.
   */
  /*
   * Колонка сценария уже, чем список: 900 давали полосу правил во всю ширину,
   * и строка в ней читалась как заголовок, а не как текст. 720 держат обе
   * карточки ролей рядом и не растягивают абзац.
   */
  #rpP { max-width: 720px; margin-inline: auto; }
  .rp-roli { flex-direction: row; align-items: stretch; }
  .rp-roli > .rp-rolj { flex: 1 1 0; min-width: 0; }
  .rp-rolj__otkryitj { margin-top: auto; }
  .rp-khvatit { max-width: 320px; margin-inline: auto; display: block; }
  .rp-knopki { flex-direction: row-reverse; justify-content: center; }
  .rp-knopki > .btn { min-width: 240px; }
}