/* ===========================================================================
   PlayMischief — NIGHT ENGRAVING
   Единственная таблица стилей сайта. Порядок секций:

     00  Шрифты (свои, локальные)
     01  Токены
     02  Сброс и основа документа
     03  Типографика
     04  Каркас: wrap / section / сетки
     05  Гравюра: guilloche · rule · seal · arch · plate · overline · quiet
     06  Кнопки и метки
     07  Шапка: topline · site-head · nav · creed
     08  Карточки, залы, магазин
     09  Контент: hero · steps · stat · cta · note · списки · faq · legal
     10  Формы
     11  Игровой стенд
     12  Оверлеи: modal · gate · cookiebar
     13  Подвал
     14  Утилиты
     15  Фокус, адаптив, reduced-motion, печать

   Правила, которые здесь не нарушаются нигде:
   ни одной размытой тени (box-shadow не используется вообще), ни одного
   градиента (гильош рисует PHP-функция линиями), скругление только двух видов —
   var(--arch) у медиа и 50% у печати, переходы только по цвету и прозрачности
   и не длиннее 200 мс. При наведении ничто не сдвигается: меняется цвет.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   00. ШРИФТЫ
   Cormorant Garamond (300/600) и Karla (400/700) лежат в assets/fonts/ и
   отдаются с нашего же домена. Никакого @import и никакого обращения к
   Google Fonts: у сайта не должно быть ни одного внешнего запроса — это и
   приватность (ТЗ §4, данные контролера), и предсказуемая скорость первого
   экрана. Поднаборы latin и latin-ext разделены, чтобы браузер качал только
   нужный. font-display:swap — текст читается сразу, шрифт подменяется молча.
   Пути ниже обязаны совпадать с <link rel="preload"> в inc/head.php.
   --------------------------------------------------------------------------- */
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/karla-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/karla-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/karla-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/karla-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------------------------------------------------------------------------
   01. ТОКЕНЫ
   Палитра монохромная: ночь, туман, одно золото. Всё остальное — производные
   с прозрачностью от того же золота, чтобы волосковая линия всегда была
   родственна акценту, а не серой.
   --------------------------------------------------------------------------- */
:root {
  /* Фон */
  --night:   #0A0D13;   /* страница */
  --night-2: #0F131B;   /* панель, приглушённый блок */
  --night-3: #151A23;   /* приподнятая панель, поля формы */

  /* Акцент */
  --gold:     #C8A45C;
  --gold-2:   #E0C288;                      /* ярче: наведение, активная ссылка */
  --gold-dim: rgba(200, 164, 92, .26);      /* волосковая линия, декоративная */

  /* Текст */
  --fog:   #E8E3D8;
  --fog-2: #A8A296;
  --fog-3: #6E6A61;

  /* Состояния */
  --ember: #C4674E;     /* запрет, ошибка — приглушённая терракота */
  --jade:  #5F8F74;     /* согласие */

  /* Производные для ТЕКСТА состояний.
     --ember и --jade держат 5.0:1 и 5.2:1 к ночи: этого хватает для рамок,
     марок и иконок, но не для требования ТЗ «текст ≥ 7:1». Поэтому надписи
     об ошибке и об успехе печатаются осветлёнными вариантами (8.1:1 и 9.5:1),
     а исходные токены остаются такими, как записаны в спецификации. */
  --ember-2: #E39479;
  --jade-2:  #8FC0A2;

  /* Линии */
  --hair:   1px solid var(--gold-dim);              /* декоративная волосковая */
  --hair-2: 1px solid rgba(200, 164, 92, .55);      /* граница управляемого
                                                       элемента: кнопки, поля,
                                                       счётчик ставки — ей нужен
                                                       контраст 3:1 к фону */

  /* Геометрия */
  --arch: 999px 999px 0 0;   /* скругление ТОЛЬКО двух верхних углов */
  --wrap: 1180px;

  /* Шрифты */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ромб на .rule «прокалывает» линию цветом фона. На блоках с фоном --night-2
     переменная переопределяется, и ромб не выглядит наклейкой. */
  --rule-punch: var(--night);

  /* Единственная разрешённая длительность перехода. */
  --t: .18s;

  color-scheme: dark;
}

/* Тема тёмная и зафиксирована: сайт не переключается вслед за системой —
   ночь здесь часть содержания, а не настройка. */
:root[data-theme="light"],
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------------------------------------------------------------------------
   02. СБРОС И ОСНОВА
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  /* clip, а не hidden: hidden на корне ломает position:sticky у шапки. */
  overflow-x: clip;
  scrollbar-color: rgba(200, 164, 92, .38) var(--night);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--night);
  color: var(--fog);
  font: 400 1.0625rem/1.75 var(--font);   /* 17px */
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Меню-шторка, шлюз и модалки просят не прокручивать фон под собой. */
body[data-locked="true"] { overflow: hidden; }

img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

/* Размеры снимков проставляет photo() из width/height файла на диске,
   поэтому место под картинку зарезервировано и вёрстка не прыгает. */
picture { display: block; }

svg { fill: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

ul, ol { margin: 0 0 1.05em; padding-left: 1.4rem; }
li { margin: 0 0 .35em; }

hr { height: 0; border: 0; border-top: var(--hair); margin: 2rem 0; }

table { border-collapse: collapse; width: 100%; }

::selection { background: rgba(200, 164, 92, .28); color: var(--fog); }

/* Спрайт марок барабана: в потоке его быть не должно. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Иконки из icon(). Размер задаётся кеглем родителя, цвет — currentColor. */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -.18em;
}

/* ---------------------------------------------------------------------------
   03. ТИПОГРАФИКА
   Антиква для заголовков, гуманистический гротеск для текста. Капса на сайте
   ровно два вида: .overline над заголовком и мелкие метки .tag — больше нигде.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fog);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 {
  font-weight: 300;
  font-size: clamp(2.9rem, 6.5vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.012em;
}

h2 {
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.008em;
}

h3 {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.32;
  letter-spacing: 0;
}

h4 {
  font-family: var(--font);
  font-weight: 700;
  font-size: .74rem;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

/* Единственный способ выделения внутри заголовка — курсив той же антиквы. */
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: inherit;
  color: var(--gold-2);
}

p {
  margin: 0 0 1.05em;
  max-width: 66ch;
  color: var(--fog-2);
}
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--fog); }
em { font-style: italic; }
small { font-size: .82rem; }

/* Строчная ссылка: золото и волосковое подчёркивание, которое гаснет. */
a {
  color: var(--gold-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(224, 194, 136, .5);
  transition: color var(--t) linear, text-decoration-color var(--t) linear;
}
a:hover { color: var(--fog); text-decoration-color: transparent; }

.overline {
  font-family: var(--font);
  font-weight: 700;
  font-size: .68rem;
  line-height: 1.3;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  max-width: none;
  margin: 0 0 .95rem;
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  color: var(--fog-2);
  max-width: 62ch;
}

.sect-head { margin: 0 0 clamp(2rem, 4.4vw, 3.2rem); max-width: 64ch; }
.sect-head h1, .sect-head h2 { margin-bottom: .45em; }
.sect-head .lead { margin-bottom: 0; }

.center { text-align: center; }
.center .sect-head,
.center .lead,
.center p { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   04. КАРКАС
   Одна колонка, много воздуха, одна мысль на экран.
   --------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.4rem);
}

.section { padding-block: clamp(3.4rem, 7vw, 6.4rem); }

.section--quiet {
  background: var(--night-2);
  border-block: var(--hair);
  --rule-punch: var(--night-2);
}

.quiet {
  background: var(--night-2);
  border: var(--hair);
  padding: clamp(1.2rem, 3vw, 1.9rem);
  --rule-punch: var(--night-2);
}

.grid { display: grid; gap: clamp(1.3rem, 2.8vw, 2.2rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cards {
  display: grid;
  gap: clamp(1.3rem, 2.8vw, 2.2rem);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Ссылка «пропустить к содержанию»: видна только с клавиатуры. */
.skip {
  position: fixed;
  top: -120px;
  left: 1rem;
  z-index: 200;
  background: var(--gold);
  color: var(--night);
  font-weight: 700;
  text-decoration: none;
  padding: .75rem 1.2rem;
  border: 0;
}
.skip:focus { top: 1rem; color: var(--night); }

/* ---------------------------------------------------------------------------
   05. ГРАВЮРА
   Пять приёмов, на которых держится вся система. Ни один из них не рисуется
   картинкой и ни один не требует внешнего файла.
   --------------------------------------------------------------------------- */

/* Гильош. Разметку (концентрические волны, stroke="currentColor") печатает
   PHP-функция guilloche($lines,$seed); CSS отвечает только за цвет, высоту и
   ширину. viewBox 600×60 с preserveAspectRatio="none" — значит высота
   назначается свободно, рисунок растягивается. */
.guilloche {
  display: block;
  width: 100%;
  height: 52px;
  color: var(--gold-dim);
  overflow: hidden;
}
.guilloche--foot { height: 40px; }

/* Волосковая линия с ромбом посередине — разделитель мысли, не раздела. */
.rule {
  position: relative;
  height: 0;
  border: 0;
  border-top: var(--hair);
  margin-block: clamp(2.2rem, 5vw, 3.4rem);
}
.rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--rule-punch);
  border: 1px solid var(--gold-dim);
}

/* Тиснёная печать. Два тонких кольца и разряженный капс внутри — единственное
   круглое пятно на сайте. Резинового штампа из первого проекта здесь нет:
   печать не оттиснута краской, а выдавлена. */
.seal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 82px;
  height: 82px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  font-family: var(--font);
  font-weight: 700;
  font-size: .78rem;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.seal::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
}
.seal--sm {
  width: 36px;
  height: 36px;
  font-size: .62rem;
  letter-spacing: .08em;
}
.seal--sm::before { inset: 3px; }

/* Арка: скругление только двух верхних углов. Ставится на медиа и на
   «порталы» — ссылки, ведущие в зал. На кнопках и полях ввода её нет. */
.arch { border-radius: var(--arch); }

/* Фотоплита: снимок и волосковая рамка, отступающая внутрь на 10 px.
   Рамка сидит на <picture>, а не на всей плите: подпись стоит под снимком
   и в тиснение попадать не должна. photo() всегда печатает <picture>. */
.plate { position: relative; margin: 0; }
.plate picture { position: relative; }
.plate picture::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: var(--hair);
  pointer-events: none;
}
/* Снимок в арке: рамка повторяет её верх, иначе углы расходятся. */
.plate picture:has(.arch)::after { border-radius: var(--arch); }

.plate__img { width: 100%; }

.plate__cap {
  margin-top: .85rem;
  font-family: var(--font);
  font-style: italic;
  font-size: .84rem;
  line-height: 1.6;
  /* По спецификации подпись набрана --fog-3. Но --fog-3 на ночи даёт 3.6:1,
     а мелкий текст обязан держать не меньше 4.5:1 — поэтому подпись печатается
     --fog-2 (7.7:1). Сам токен остаётся и служит нетекстовым нуждам. */
  color: var(--fog-2);
  max-width: 52ch;
}

/* ---------------------------------------------------------------------------
   06. КНОПКИ И МЕТКИ
   Прямоугольные, без скруглений и без тени. При наведении кнопка меняет цвет
   и остаётся на месте — это принципиально: в первом проекте она уезжала.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 1px solid var(--gold);
  border-radius: 0;
  background: var(--gold);
  color: var(--night);
  font-family: var(--font);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  padding: .85rem 1.6rem;
  cursor: pointer;
  transition: background-color var(--t) linear,
              border-color var(--t) linear,
              color var(--t) linear;
}
.btn:hover,
.btn:focus-visible {
  background: var(--gold-2);
  border-color: var(--gold-2);
  color: var(--night);
  text-decoration: none;
}
.btn[disabled], .btn:disabled {
  background: transparent;
  border-color: var(--gold-dim);
  color: var(--fog-3);
  cursor: not-allowed;
}

.btn--quiet {
  background: transparent;
  border: var(--hair-2);
  color: var(--fog);
}
.btn--quiet:hover,
.btn--quiet:focus-visible {
  background: transparent;
  border-color: var(--gold-2);
  color: var(--gold-2);
}

.btn--sm { padding: .55rem 1rem; font-size: .85rem; }
.btn--wide { width: 100%; }

.btn .ico { width: 1.05em; height: 1.05em; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  margin-top: 1.6rem;
}
.center .btn-row { justify-content: center; }

/* Метка: волосковая рамка и разряженный капс. Ничего не заливает. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: var(--hair);
  padding: .32rem .7rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: .66rem;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fog-2);
  text-decoration: none;
  white-space: nowrap;
}
.tag .ico { width: 1em; height: 1em; }
.tag--gold { color: var(--gold); border-color: rgba(200, 164, 92, .5); }
.tag--ember { color: var(--ember-2); border-color: rgba(196, 103, 78, .5); }

/* ---------------------------------------------------------------------------
   07. ШАПКА
   Ничего не бежит и не мигает: предупреждения стоят неподвижной полосой.
   --------------------------------------------------------------------------- */
.topline {
  border-bottom: var(--hair);
  background: var(--night);
}
.topline__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: .7rem;
}
.topline p {
  margin: 0;
  max-width: none;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--fog-2);
}
.topline b { color: var(--fog); }

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--night);
  border-bottom: var(--hair);
}
.site-head__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding-block: .9rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--gold);
  text-decoration: none;
  flex: none;
  transition: color var(--t) linear;
}
.logo:hover { color: var(--gold-2); }

.logo__mark { width: 42px; height: 42px; flex: none; }
.logo__mark--lg { width: 78px; height: 78px; }

.logo__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--fog);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.2vw, 1.9rem);
  margin-inline: auto;
}
.nav a {
  font-family: var(--font);
  font-size: .93rem;
  color: var(--fog-2);
  text-decoration: none;
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color var(--t) linear, border-color var(--t) linear;
  white-space: nowrap;
}
.nav a:hover { color: var(--fog); }
.nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold-dim); }

/* Кнопка закрытия шторки существует только на узком экране. */
.nav__close {
  display: none;
  color: var(--fog-2);
  transition: color var(--t) linear;
}
.nav__close:hover { color: var(--gold-2); }
.nav__close .ico { width: 22px; height: 22px; }

.head-actions {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-left: auto;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: var(--hair);
  padding: .38rem .75rem;
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-2);
  white-space: nowrap;
}
.chip .ico { width: 1em; height: 1em; color: var(--gold); }

/* Бургер: три волосковые линии, нарисованные одним span и его псевдоэлементами.
   При наведении меняется только цвет. */
.burger {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  border: var(--hair-2);
  color: var(--fog);
  transition: color var(--t) linear, border-color var(--t) linear;
}
.burger:hover { color: var(--gold-2); border-color: var(--gold-2); }
.burger span,
.burger span::before,
.burger span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1px;
  margin-left: -10px;
  background: currentColor;
}
.burger span { top: 50%; }
.burger span::before { content: ""; left: 0; margin-left: 0; top: -6px; }
.burger span::after  { content: ""; left: 0; margin-left: 0; top: 6px; }

/* Затемнение под шторкой меню. Полупрозрачная заливка, никакого размытия. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(6, 8, 12, .74);
  border: 0;
}

/* Пять обязательных предупреждений ТЗ. Стоят под шапкой на каждой странице. */
.creed {
  border-bottom: var(--hair);
  background: var(--night-2);
  --rule-punch: var(--night-2);
}
.creed__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem clamp(1rem, 2.6vw, 2rem);
  padding-block: .8rem;
}
.creed__item {
  display: inline-flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--fog-2);
}
.creed__item .ico {
  width: 15px;
  height: 15px;
  margin-top: .12em;
  color: var(--gold);
}

/* ---------------------------------------------------------------------------
   08. КАРТОЧКИ, ЗАЛЫ, МАГАЗИН
   --------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--night-2);
  border: var(--hair);
  --rule-punch: var(--night-2);
}
.card__art {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--arch);
}
.card__art img { width: 100%; }
.card__body { padding: clamp(1.1rem, 2.4vw, 1.5rem); }
.card__body p { max-width: none; }
.card__body > :last-child { margin-bottom: 0; }
.card__body h3 a { color: inherit; text-decoration: none; }
.card__body h3 a:hover { color: var(--gold-2); }

/* Римская цифра антиквой — та же нумерация, что у залов. */
.card__no {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gold);
  display: block;
  margin-bottom: .5rem;
}

.card--link { transition: border-color var(--t) linear; }
.card--link:hover { border-color: rgba(200, 164, 92, .5); }
.card--link a { text-decoration: none; }

/* Зал. Вертикальная плита: снимок в арке, под ним заголовок и метки. */
.room { display: flex; flex-direction: column; }

.room__art {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--arch);
  text-decoration: none;
}
.room__art img { width: 100%; }
/* Ровная тёмная вуаль поверх снимка: сводит шесть разных фотографий к одному
   тону и вытягивает контраст римской цифры. Заливка сплошная — не градиент. */
.room__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 13, 19, .42);
  transition: opacity var(--t) linear;
  pointer-events: none;
}
.room:hover .room__art::before { opacity: .55; }

.room__no {
  position: absolute;
  left: clamp(.9rem, 2.4vw, 1.4rem);
  bottom: clamp(.5rem, 1.6vw, .9rem);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.6vw, 3.6rem);
  line-height: 1;
  color: var(--gold);
  pointer-events: none;
}

.room__body { padding-top: 1.1rem; }
.room__body h3 { margin-bottom: .4rem; }
.room__body h3 a {
  color: var(--fog);
  text-decoration: none;
  transition: color var(--t) linear;
}
.room__body h3 a:hover { color: var(--gold-2); }
.room__body p { max-width: 44ch; margin-bottom: .9rem; }

.room__meta { display: flex; flex-wrap: wrap; gap: .45rem; }

/* Набор Glints. Реальных платежей на сайте нет: это витрина. */
.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
  background: var(--night-2);
  border: var(--hair);
  padding: clamp(1.4rem, 3vw, 2rem) 1.2rem clamp(1.3rem, 3vw, 1.8rem);
  --rule-punch: var(--night-2);
}
.pack__art { color: var(--gold); margin-bottom: .3rem; }
.pack__art .ico { width: 44px; height: 44px; }

.pack h3 { margin: 0; font-size: 1.15rem; }

.pack__coins {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.05;
  color: var(--fog);
  font-variant-numeric: tabular-nums;
}

.pack__price {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold-2);
}

.pack p { max-width: none; font-size: .84rem; }

/* Ярлык набора сидит в верхнем углу плиты, поверх волосковой рамки. */
.pack__tag {
  position: absolute;
  top: -1px;
  right: -1px;
  border: 1px solid rgba(200, 164, 92, .5);
  padding: .26rem .6rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--night-2);
}

.pack .btn { margin-top: .6rem; width: 100%; }

/* ---------------------------------------------------------------------------
   09. КОНТЕНТ
   --------------------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 5vw, 4.4rem);
  align-items: center;
}
.hero__body { max-width: 46ch; }
.hero__body h1 { margin-bottom: .35em; }
.hero__body .lead { margin-bottom: 0; }

/* Шаги. Нумерация римская, антиквой — как у залов. */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(1.5rem, 3.2vw, 2.6rem);
}
.step {
  position: relative;
  margin: 0;
  padding-left: 3.6rem;
}
.step::before {
  counter-increment: step;
  content: counter(step, upper-roman);
  position: absolute;
  left: 0;
  top: -.12em;
  min-width: 2.6rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--gold);
}
.step h3 { margin-bottom: .3rem; }
.step p { margin-bottom: 0; }

.stat { display: flex; flex-direction: column; gap: .3rem; }
.stat b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 3.1rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: .82rem; line-height: 1.5; color: var(--fog-2); }

.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--night-2);
  border: var(--hair);
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.2rem, 4vw, 3rem);
  --rule-punch: var(--night-2);
}
.cta h2 { margin-bottom: .4em; }
.cta p { margin-inline: auto; }
.cta .guilloche { margin-block: 1.4rem 0; }

/* Заметка: иконка слева, текст справа, волосковая рамка. */
.note {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--night-2);
  border: var(--hair);
  padding: clamp(1.1rem, 2.6vw, 1.4rem) clamp(1.1rem, 2.6vw, 1.5rem);
  --rule-punch: var(--night-2);
}
.note p { max-width: none; margin-bottom: .5em; }
.note > div > :last-child { margin-bottom: 0; }
.note__ico { color: var(--gold); flex: none; line-height: 1; }
.note__ico .ico { width: 24px; height: 24px; }

.note--gold { border-color: rgba(200, 164, 92, .5); }
.note--ember { border-color: rgba(196, 103, 78, .5); }
.note--ember .note__ico { color: var(--ember-2); }

/* Списки «можно / нельзя». Маркеры нарисованы бордюрами: ни одного символа
   в разметке и ни одной юникод-пиктограммы в CSS. */
.tick { list-style: none; padding: 0; margin: 0 0 1.05em; }
.tick li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .6em;
  color: var(--fog-2);
}
.tick li::before,
.tick li::after {
  content: "";
  position: absolute;
  left: 0;
}
/* Галочка — угол из двух бордюров, повёрнутый на 42°. */
.tick li::before {
  left: .35rem;
  top: .34em;
  width: .42rem;
  height: .78rem;
  border-right: 1.5px solid var(--jade-2);
  border-bottom: 1.5px solid var(--jade-2);
  transform: rotate(42deg);
}
.tick li::after { display: none; }

/* Крест — две полоски накрест, терракота. */
.tick.cross li::before,
.tick.cross li::after {
  display: block;
  left: .1rem;
  top: .74em;
  width: 1rem;
  height: 1.5px;
  border: 0;
  background: var(--ember-2);
  transform: rotate(45deg);
}
.tick.cross li::after { transform: rotate(-45deg); }

/* Вопросы и ответы. Работает и списком, и на <details>. */
.faq { display: grid; }
.faq > * { border-top: var(--hair); padding-block: clamp(1.2rem, 2.6vw, 1.7rem); }
.faq > *:last-child { border-bottom: var(--hair); }
.faq h3 { margin-bottom: .5rem; }

.faq details > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 2.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.32;
  color: var(--fog);
  transition: color var(--t) linear;
}
.faq details > summary::-webkit-details-marker { display: none; }
.faq details > summary:hover { color: var(--gold-2); }
/* Знак «плюс»: вертикальная черта гаснет, когда ответ раскрыт. */
.faq details > summary::before,
.faq details > summary::after {
  content: "";
  position: absolute;
  right: .3rem;
  top: .62em;
  background: var(--gold);
}
.faq details > summary::before { width: 13px; height: 1px; margin-top: 6px; }
.faq details > summary::after {
  width: 1px;
  height: 13px;
  margin-right: 6px;
  transition: opacity var(--t) linear;
}
.faq details[open] > summary::after { opacity: 0; }

.faq__a { margin-top: .6rem; max-width: 70ch; }
.faq__a p:last-child { margin-bottom: 0; }

/* Юридическая страница: узкая колонка, крупные интервалы между разделами. */
.legal { max-width: 800px; }
.legal h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.legal h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: var(--hair);
  scroll-margin-top: 6rem;
}
.legal h3 { margin-top: 1.8rem; }
.legal p, .legal li { max-width: 72ch; }
.legal ul, .legal ol { color: var(--fog-2); }

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
}

.toc {
  background: var(--night-2);
  border: var(--hair);
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.6vw, 1.7rem);
  --rule-punch: var(--night-2);
}
.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }
.toc li { position: relative; padding-left: 2.2rem; margin-bottom: .45em; }
.toc li::before {
  counter-increment: toc;
  content: counter(toc) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold);
}
.toc a { color: var(--fog-2); text-decoration: none; }
.toc a:hover { color: var(--gold-2); }

/* ---------------------------------------------------------------------------
   10. ФОРМЫ
   Форма отправляется обычным POST-ом и работает без JS (inc/contact.php).
   Поля прямоугольные: арка сюда не заходит.
   --------------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; max-width: 640px; }

.field { display: grid; gap: .4rem; }
.field > label {
  font-family: var(--font);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fog-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--night-3);
  border: var(--hair-2);
  border-radius: 0;
  color: var(--fog);
  font-size: 1rem;
  line-height: 1.5;
  padding: .78rem .9rem;
  transition: border-color var(--t) linear, background-color var(--t) linear;
}
.field textarea { min-height: 10.5rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--fog-3); opacity: 1; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(200, 164, 92, .75); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold); outline: none; }

.field [aria-invalid="true"] { border-color: var(--ember); }

/* Флажки согласия: 18+ и Privacy Policy. Галочка нарисована бордюрами. */
.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .1rem .75rem;
  align-items: start;
}
.check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  margin: .3rem 0 0;
  flex: none;
  background: var(--night-3);
  border: var(--hair-2);
  border-radius: 0;
  cursor: pointer;
  transition: border-color var(--t) linear;
}
.check input[type="checkbox"]:hover { border-color: rgba(200, 164, 92, .8); }
.check input[type="checkbox"]:checked { border-color: var(--gold); }
.check input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: .35rem;
  top: .08rem;
  width: .32rem;
  height: .6rem;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(42deg);
  opacity: 0;
  transition: opacity var(--t) linear;
}
.check input[type="checkbox"]:checked::after { opacity: 1; }
.check > label { font-size: .92rem; line-height: 1.6; color: var(--fog-2); cursor: pointer; }
.check .err { grid-column: 2; }

.hint { font-size: .8rem; line-height: 1.55; color: var(--fog-2); max-width: 60ch; }

/* Сообщение об ошибке поля. Пустое — не занимает места. */
.err {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ember-2);
  min-height: 0;
}
.err:empty { display: none; }

/* Общий итог отправки. Состояние проставляет сервер или main.js. */
.form-status {
  border: var(--hair);
  background: var(--night-2);
  padding: .9rem 1.1rem;
  font-size: .92rem;
  color: var(--fog-2);
  max-width: none;
}
.form-status:empty { display: none; }
.form-status[data-state="err"] { border-color: rgba(196, 103, 78, .55); color: var(--ember-2); }
.form-status[data-state="ok"]  { border-color: rgba(95, 143, 116, .55); color: var(--jade-2); }

/* Ловушка для ботов: поле убрано из видимого потока, но остаётся в DOM. */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* ---------------------------------------------------------------------------
   11. ИГРОВОЙ СТЕНД
   Data-атрибуты в разметке принадлежат assets/js/games/*.js и не меняются.
   Единственное движение на сайте живёт здесь: барабан и колесо. Это механика
   игры, а не украшение интерфейса, и она гаснет при prefers-reduced-motion.
   --------------------------------------------------------------------------- */
.gameshell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  align-items: start;
  padding-block: clamp(2rem, 5vw, 3.4rem);
}

.stage {
  display: grid;
  gap: clamp(1.1rem, 2.6vw, 1.6rem);
  background: var(--night-2);
  border: var(--hair);
  padding: clamp(1.2rem, 3vw, 2rem);
  --rule-punch: var(--night-2);
}
.stage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.stage__head h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin: 0; }
.stage__head .overline { margin-bottom: .4rem; }

.panel {
  background: var(--night-2);
  border: var(--hair);
  padding: clamp(1.2rem, 2.6vw, 1.6rem);
  --rule-punch: var(--night-2);
}
.panel h2 { font-size: 1.5rem; }
.panel h3 { font-size: 1.1rem; margin-top: 1.4rem; }
.panel p, .panel li { font-size: .9rem; max-width: none; }
.panel > :last-child { margin-bottom: 0; }

.wallet-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  background: var(--night-3);
  border: var(--hair);
  padding: .8rem 1.1rem;
  --rule-punch: var(--night-3);
}
.wallet-box .overline { margin-bottom: .15rem; }
.wallet-box b {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.9rem;
  line-height: 1.05;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.betbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1.1rem;
  background: var(--night-3);
  border: var(--hair);
  padding: .85rem 1.1rem;
  --rule-punch: var(--night-3);
}
.betbar .overline { margin: 0; }
.betbar .btn { margin-left: auto; }

.betbar__group {
  display: flex;
  align-items: center;
  border: var(--hair-2);
}
.betbar__group button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--fog);
  transition: color var(--t) linear, background-color var(--t) linear;
}
.betbar__group button:hover { color: var(--night); background: var(--gold-2); }
.betbar__group button[disabled] { color: var(--fog-3); background: none; cursor: not-allowed; }
.betbar__group button .ico { width: 16px; height: 16px; }

.betbar__val {
  min-width: 5.5ch;
  padding-inline: .4rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fog);
  border-inline: var(--hair-2);
  align-self: stretch;
  display: grid;
  place-items: center;
}

/* Строка исхода хода. Пустая — держит высоту, чтобы стенд не дёргался. */
.msg {
  min-height: 1.7em;
  margin: 0;
  max-width: none;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fog-2);
}
.msg[data-state="win"],  .msg.is-win  { color: var(--jade-2); }
.msg[data-state="lose"], .msg.is-lose { color: var(--fog-2); }
.msg[data-state="warn"], .msg.is-warn { color: var(--ember-2); }

/* --- барабаны --------------------------------------------------------------- */
.reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, 1.6vw, .9rem);
}
.reel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--night);
  border: var(--hair);
  display: grid;
  place-items: center;
  transition: border-color var(--t) linear;
}
.reel[data-win="true"], .reel.is-win { border-color: var(--gold); }
.reel__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  will-change: transform;
  transition: transform 420ms cubic-bezier(.2, .8, .3, 1);
}
.reel__inner > * {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  flex: none;
}
.reel svg { width: 46%; height: auto; color: var(--gold); }

/* Таблица выплат. Работает и как <table>, и как <ul>. */
.paytable { font-size: .88rem; color: var(--fog-2); }
.paytable th, .paytable td { text-align: left; padding: .45rem 0; border-bottom: var(--hair); }
.paytable th { font-weight: 700; color: var(--fog); }
.paytable td:last-child, .paytable th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.paytable svg { width: 20px; height: 20px; color: var(--gold); display: inline-block; }
.paytable ul, .paytable.list { list-style: none; padding: 0; margin: 0; }
.paytable li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .45rem 0;
  border-bottom: var(--hair);
}

/* --- колесо ----------------------------------------------------------------- */
.wheel-wrap {
  position: relative;
  width: min(420px, 100%);
  margin-inline: auto;
  aspect-ratio: 1;
}
.wheel-wrap svg { width: 100%; height: 100%; }
.wheel-wrap > svg { transition: transform 3.4s cubic-bezier(.15, .85, .2, 1); }
/* Указатель — сплошной треугольник из бордюров, без картинки и без тени. */
.wheel-pin {
  position: absolute;
  top: -4px;
  left: 50%;
  margin-left: -9px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 20px solid var(--gold);
  z-index: 2;
}

/* --- карты ------------------------------------------------------------------ */
.card-face {
  position: relative;
  display: grid;
  place-items: center;
  gap: .3rem;
  aspect-ratio: 5 / 7;
  width: min(180px, 100%);
  margin-inline: auto;          /* карта стоит по центру стола, а не у левого края */
  background: var(--night-3);
  border: var(--hair);
  color: var(--fog);
  padding: .8rem;
  --rule-punch: var(--night-3);
}
.card-face b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  line-height: 1;
}
.card-face svg { width: 34%; height: auto; }
.card-face[data-suit="heart"], .card-face[data-suit="diamond"] { color: var(--ember-2); }
.card-face[data-suit="spade"], .card-face[data-suit="club"] { color: var(--fog); }
.card-face[data-face="back"] { color: var(--gold); }

/* --- кости ------------------------------------------------------------------ */
.dice-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.7rem, 2vw, 1.2rem);
  justify-content: center;
}
.die {
  display: grid;
  place-items: center;
  width: clamp(74px, 18vw, 96px);
  aspect-ratio: 1;
  background: var(--night-3);
  border: var(--hair);
  color: var(--gold);
}
.die svg { width: 72%; height: auto; }

/* --- падение бусины --------------------------------------------------------- */
.dropboard {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--night);
  border: var(--hair);
}
.dropboard canvas,
.dropboard svg { width: 100%; height: 100%; }

.slots-legend {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border: var(--hair);
  border-top: 0;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--fog-2);
}
.slots-legend > * { padding: .45rem .2rem; border-left: var(--hair); }
.slots-legend > *:first-child { border-left: 0; }
.slots-legend > *[data-hit="true"] { color: var(--gold); }

/* --- гилдированная карточка ------------------------------------------------- */
.scratch {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--night-3);
  border: var(--hair);
  touch-action: none;
  cursor: crosshair;
  --rule-punch: var(--night-3);
}
.scratch canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scratch__prize {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 5.4vw, 2.8rem);
  line-height: 1.15;
  color: var(--gold);
  padding: 1rem;
}

/* ---------------------------------------------------------------------------
   12. ОВЕРЛЕИ
   Шлюз и баннер рендерит PHP только тем, кто ещё не ответил, поэтому они не
   мигают при загрузке. Появляются переключением display — ничего не выезжает.
   --------------------------------------------------------------------------- */
.modal, .gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  overflow-y: auto;
  background: rgba(6, 8, 12, .84);
}
.modal[data-show="true"], .gate[data-show="true"] { display: grid; }
.gate { z-index: 100; background: rgba(6, 8, 12, .95); }

.modal__box, .gate__box {
  position: relative;
  width: min(600px, 100%);
  background: var(--night-2);
  border: var(--hair);
  padding: clamp(1.5rem, 4.4vw, 2.6rem);
  --rule-punch: var(--night-2);
}
.modal__box h2, .gate__box h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.modal__box p, .gate__box p { max-width: none; }

.modal__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--fog-2);
  transition: color var(--t) linear;
}
.modal__close:hover { color: var(--gold-2); }
.modal__close .ico { width: 18px; height: 18px; }

.gate__box { text-align: center; }
.gate__box .overline { margin-inline: auto; }
.gate__box .guilloche { margin-block: 1.3rem; }
.gate__box .btn { margin-top: .4rem; }
.gate__logo { display: flex; justify-content: center; color: var(--gold); margin-bottom: 1.1rem; }

/* «Мне нет восемнадцати» — не кнопка, а тихая ссылка: отказ не должен
   выглядеть равноценным входу. */
.gate__deny {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: .88rem;
  color: var(--fog-2);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--t) linear;
}
.gate__deny:hover { color: var(--gold-2); }

/* Cookie-баннер. Держится внизу и не перекрывает первый экран. */
.cookiebar {
  position: fixed;
  left: clamp(.7rem, 3vw, 1.4rem);
  right: clamp(.7rem, 3vw, 1.4rem);
  bottom: clamp(.7rem, 3vw, 1.4rem);
  z-index: 80;
  display: none;
  gap: 1rem clamp(1rem, 3vw, 2rem);
  align-items: center;
  max-width: var(--wrap);
  margin-inline: auto;
  background: var(--night-2);
  border: var(--hair-2);
  padding: clamp(1rem, 2.6vw, 1.4rem);
  --rule-punch: var(--night-2);
}
.cookiebar[data-show="true"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.cookiebar__body p { margin: 0; max-width: 78ch; font-size: .9rem; }
.cookiebar .btn-row { margin: 0; flex-wrap: nowrap; }

/* ---------------------------------------------------------------------------
   13. ПОДВАЛ
   --------------------------------------------------------------------------- */
.site-foot {
  border-top: var(--hair);
  background: var(--night);
  margin-top: clamp(3rem, 7vw, 6rem);
}
.site-foot .guilloche--foot { margin-bottom: clamp(1rem, 3vw, 2rem); }

/* Пять обязательных предупреждений повторяются в подвале — второе заметное
   место по ТЗ §4. Формулировки те же и не редактируются. */
.foot-creed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .8rem clamp(1.2rem, 3vw, 2.2rem);
  padding-bottom: clamp(1.6rem, 3.4vw, 2.4rem);
  border-bottom: var(--hair);
}
.foot-creed > div {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--fog-2);
}
.foot-creed .ico { width: 16px; height: 16px; margin-top: .15em; color: var(--gold); }

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3.4vw, 2.8rem);
  padding-block: clamp(2rem, 4.4vw, 3rem);
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: .5em; }
.foot-grid a {
  font-size: .92rem;
  color: var(--fog-2);
  text-decoration: none;
  transition: color var(--t) linear;
}
.foot-grid a:hover { color: var(--gold-2); }

.foot-about { max-width: 42ch; }
.foot-about .logo { margin-bottom: 1rem; }
.foot-about p { font-size: .88rem; }

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold-2);
  margin-bottom: 0;
}

.foot-legal {
  border-top: var(--hair);
  padding-block: clamp(1.4rem, 3vw, 2rem);
  font-size: .84rem;
  line-height: 1.7;
  color: var(--fog-2);
}
.foot-legal p { max-width: 100ch; margin-bottom: .7em; font-size: inherit; }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 1.4rem;
  border-top: var(--hair);
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  font-size: .8rem;
  color: var(--fog-2);
}
.foot-bottom a { color: var(--fog-2); text-decoration: none; }
.foot-bottom a:hover { color: var(--gold-2); }

/* ---------------------------------------------------------------------------
   14. УТИЛИТЫ
   --------------------------------------------------------------------------- */
/* Кнопка, притворяющаяся ссылкой («Cookie settings» в подвале). */
.linklike {
  font: inherit;
  color: var(--fog-2);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--t) linear;
}
.linklike:hover { color: var(--gold-2); }

.muted { color: var(--fog-2); }

/* Цифры одной ширины: балансы и ставки не должны шевелить строку. */
.mono-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Совместимость с main.js: при ответе «мне нет 18» скрипт подставляет в шлюз
   разметку с классами .ticket/.eyebrow/.perf, доставшимися от первого проекта.
   Переписывать общее ядро нельзя, поэтому классы просто приводятся к здешней
   системе, а декоративная перфорация гасится. */
.gate__box.ticket { border: var(--hair); }
.gate__box .eyebrow {
  font-family: var(--font);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .95rem;
  max-width: none;
}
.gate__box .perf { display: none; }

/* ---------------------------------------------------------------------------
   15. ФОКУС, АДАПТИВ, ДВИЖЕНИЕ, ПЕЧАТЬ
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

html { scroll-behavior: smooth; }

/* --- 1080: подвал теряет одну колонку --------------------------------------- */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
  .gameshell { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* --- 900: меню уходит в шторку, стенд и герой становятся в одну колонку ------ */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__body { max-width: none; }
  .gameshell { grid-template-columns: minmax(0, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .burger { display: grid; place-items: center; }

  /* Шторка справа. Она не выезжает: появляется и гаснет прозрачностью —
     на сайте ничего не двигается, включая меню. */
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    width: min(340px, 86vw);
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--night-2);
    border-left: var(--hair);
    padding: 4.5rem 1.6rem 2rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t) linear, visibility 0s linear var(--t);
  }
  .nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--t) linear;
  }
  .nav a {
    font-size: 1.05rem;
    padding-block: .85rem;
    border-bottom: var(--hair);
  }
  .nav a[aria-current="page"] { border-bottom-color: var(--gold-dim); }
  .nav__close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
  }

  .cookiebar[data-show="true"] { grid-template-columns: minmax(0, 1fr); }
  .cookiebar .btn-row { flex-wrap: wrap; }
}

/* --- 700: одна колонка почти везде ------------------------------------------ */
@media (max-width: 700px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-about { grid-column: 1 / -1; max-width: none; }

  /* Полоса предупреждений сворачивается в колонку: строки не режутся и
     ничего не уезжает за правый край. */
  .creed__in { flex-direction: column; align-items: flex-start; gap: .45rem; }

  .topline__in { align-items: flex-start; }
  .stage__head { align-items: flex-start; }
  .betbar .btn { margin-left: 0; width: 100%; }
  .plate picture::after { inset: 7px; }
}

/* --- 520: самая узкая раскладка --------------------------------------------- */
@media (max-width: 520px) {
  body { font-size: 1rem; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-bottom { flex-direction: column; }
  .head-actions .chip { display: none; }
  .logo__word { font-size: 1.25rem; }
  .logo__mark { width: 34px; height: 34px; }
  .seal { width: 68px; height: 68px; font-size: .7rem; }
  .btn-row .btn { width: 100%; }
  .step { padding-left: 2.9rem; }
  .step::before { font-size: 1.7rem; min-width: 2rem; }
}

/* Читателю, попросившему покой, движение не показываем вовсе — включая
   барабаны и колесо: игра остаётся играбельной, просто результат появляется
   сразу. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

/* Печать: тёмный текст на белом, без шапки, подвала и оверлеев. */
@media print {
  .topline, .site-head, .creed, .site-foot, .gate, .modal, .cookiebar,
  .scrim, .skip, .burger, .nav, .guilloche, .sprite { display: none !important; }

  html, body {
    background: #fff !important;
    color: #14161c !important;
    font-size: 11pt;
  }
  h1, h2, h3, h4, p, li, td, th, .lead, .muted, .hint,
  .plate__cap, .msg, .foot-legal { color: #14161c !important; }
  .overline, .tag, .card__no, .room__no, .stat b, .step::before,
  .pack__coins, .pack__price, .toc li::before { color: #6d5522 !important; }

  .card, .pack, .note, .panel, .stage, .quiet, .toc, .cta, .section--quiet {
    background: transparent !important;
    border-color: #b9b3a6 !important;
  }
  .rule, hr { border-top-color: #b9b3a6 !important; }
  .rule::after { background: #fff !important; border-color: #b9b3a6 !important; }

  a { color: #14161c !important; text-decoration: underline; }
  .legal h2 { break-after: avoid; }
  .room, .card, .pack, .note { break-inside: avoid; }
  img { max-width: 100% !important; }
}


/* == Дополнения ============================================================
   Классы, которые появились в разметке залов позже: символ из спрайта,
   строка со счётчиками и центрированный ряд кнопок.
   ========================================================================= */

/* Марка из спрайта: размер наследуется от контейнера, поэтому и в барабане,
   и на кости, и на карте она встаёт по месту без отдельных правил. */
.sym {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.reel__inner .sym { width: 62%; height: auto; }
.die .sym        { width: 76%; height: auto; }
.card-face .sym  { width: 34%; height: auto; }

/* Счётчики под игровым полем: банк, серия, сумма броска. */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.2rem, 4vw, 2.6rem);
  margin: 1.2rem 0 0;
  padding: .9rem 0 0;
  border-top: var(--hair);
}
.stat-row > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}
.stat-row b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1;
  color: var(--gold);
}

/* Ряд кнопок выбора по центру поля. */
.btn-row--centre { justify-content: center; }