/* ============================================================
   AEGIS SMP — сайт сезона «1936»
   Палитра — по _shared/art/STYLE.md
   Шрифты: Montserrat (дисплей/кнопки) + Inter (текст/UI)
   Без стеклянных панелей и белых окантовок — заливки и тени.
   ============================================================ */

/* ---------- шрифты лежат у нас, а не на Google ----------
   Раньше страница тянула Montserrat и Inter с fonts.googleapis.com.
   У части игроков СНГ этот адрес не открывается (провайдер, DNS, школьный
   Wi-Fi) — и сайт приезжал системным шрифтом, с поехавшими заголовками.
   Теперь оба шрифта лежат рядом с сайтом, в assets/fonts. Файлы разрезаны
   по алфавитам: браузер скачает кириллицу и латиницу и не тронет остальное.
   Начертания переменные (400–700 и 700–900), поэтому файлов восемь,
   а не двадцать восемь. */

@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../assets/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../assets/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../assets/fonts/inter-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; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../assets/fonts/inter-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; }

@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700 900; font-display:swap;
  src:url(../assets/fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700 900; font-display:swap;
  src:url(../assets/fonts/montserrat-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700 900; font-display:swap;
  src:url(../assets/fonts/montserrat-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; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700 900; font-display:swap;
  src:url(../assets/fonts/montserrat-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; }

:root {
  --bg:      #0E0E10;
  --panel:   #171616;
  --panel-2: #1C1C20;
  --panel-3: #232228;
  --or:      #F58620;
  --gold:    #FAD46B;
  --gold-hi: #FCE68F;
  --spark:   #FFE081;
  --ember:   #854535;
  --burn:    #4D1C15;
  --brass:   #976B44;
  /* Третий по яркости цвет текста: им написаны подписи под ценами, пометки
     кейсов и китов, старые цены. Был #636166 — на панелях это 2,8:1, а буквы
     там по 11–13 пикселей: днём с телефона строка «по отдельности · выгода»
     просто не читается, и выгода, ради которой её и написали, проходит мимо.
     Поднят до порога 4,5:1 на самой светлой из панелей (#232228). Остаётся
     заметно темнее --muted, так что три ступени текста сохраняются. */
  --steel:   #8A888F;
  --ink:     #E8E6E1;
  --muted:   #9b978f;
  --red:     #FF4040;
  /* Тот же красный, но приглушённый до уровня, на котором белые буквы поверх
     него берут порог 4,5:1. На ярком #FF4040 белая «−21%» давала всего 3,5:1 —
     скидка написана мелко и жирно, и именно она должна читаться первой. Ярким
     --red остаются полоски и подсветки, где текста нет. */
  --red-lo:  #E03131;
  --grad:    linear-gradient(to top, var(--or), var(--gold-hi));
  --grad-h:  linear-gradient(90deg, var(--or), var(--gold-hi));
  --shadow:  0 14px 40px rgba(0, 0, 0, .5);
  --radius:  16px;
  /* Запасные на случай, если woff2 почему-то не приехал: похожая ширина
     знаков и тот же вес заголовков, чтобы вёрстка не поплыла. */
  --f-disp:  'Montserrat', 'Segoe UI Semibold', 'Segoe UI', system-ui, sans-serif;
  --f-text:  'Inter', 'Segoe UI', system-ui, 'Helvetica Neue', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #F58620 #0c0c0e;
  /* Место под ленту прокрутки держится всегда, даже когда страница целиком
     влезла в экран. Без этого переход с длинной страницы на короткую (например,
     на 404) сдвигает всю вёрстку на ширину ленты — читается как рывок. На
     телефоне лента рисуется поверх содержимого, и правило там ничего не
     занимает. */
  scrollbar-gutter: stable;
}

/* фирменная лента прокрутки */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0c0c0e; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FCE68F, #F58620 55%, #854535);
  border-radius: 8px;
  border: 2px solid #0c0c0e;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FFE081, #F58620);
}
::-webkit-scrollbar-corner { background: #0c0c0e; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16.5px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--gold); text-decoration: none; }

.pix { image-rendering: pixelated; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

::selection { background: var(--or); color: #1a0e05; }

/* ---------- типографика ---------- */

h1, h2, h3, .display {
  font-family: var(--f-disp);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: -.015em;
}

.grad-text {
  background: var(--grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kicker {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.section-head { margin-bottom: 44px; }
.section-head h2 { font-size: clamp(30px, 4.6vw, 52px); }

/* Короткая черта над заголовком раздела: она дорисовывается слева направо,
   когда раздел выезжает в окно. Держится на классе .in, который вешает
   наблюдатель из main.js, — если скрипт не отработал, черта просто стоит
   целиком, а не остаётся обрубком. */
.section-head::before {
  content: '';
  display: block;
  width: 62px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad-h);
  margin-bottom: 20px;
}
.section-head.reveal::before {
  transform: scaleX(.14);
  transform-origin: left center;
  transition: transform .75s cubic-bezier(.2,.8,.3,1) .12s;
}
.section-head.reveal.in::before { transform: scaleX(1); }
.section-head .sub {
  margin-top: 14px;
  max-width: 640px;
  color: var(--muted);
}

section { padding: 88px 0; }

/* Общая метка фокуса с клавиатуры. У кнопок и плиток она была своя, а обычные
   ссылки её не имели — идущий по сайту табом терял, где он сейчас стоит.
   :where() даёт нулевой вес, поэтому все частные правила фокуса (в том числе
   поля ввода со своей подсветкой вместо рамки) остаются главнее. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Первая остановка табуляции на любой странице. Шапка одинаковая везде, и без
   этой ссылки человек с клавиатуры (и экранный диктор) каждый раз проходит
   меню целиком, прежде чем добраться до текста. Мышью она не видна никогда:
   лежит выше экрана и выезжает только под фокусом. Tabindex="-1" на <main>
   нужен, чтобы после перехода табуляция продолжилась внутри содержимого, а не
   вернулась в начало, — Safari сам этого не делает. */
.skip-link {
  position: fixed;
  left: 14px;
  top: -80px;
  z-index: 300;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--panel-3);
  color: var(--ink);
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 14px; }

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color .18s ease, color .18s ease;
  white-space: nowrap;
  /* Кнопкой бывает и <button>, и ссылка. У <button> браузер не наследует
     межстрочный интервал страницы, а у ссылки наследует — те же 1.65, что у
     абзацев. От этого одинаковые с виду кнопки стояли разной высоты: в
     кабинете «Поменять» ссылкой выходило 43 пикселя, а «Сменить» кнопкой
     строкой ниже — 38, и столбик из двух действий выглядел неровным. Задаём
     интервал явно: normal — ровно то, что <button> и так считает, поэтому
     настоящие кнопки не меняются, а ссылки подстраиваются под них. */
  line-height: normal;
}

/* Отклик на наведение — только цвет заливки.
   Кнопка ничего вокруг себя не подсвечивает: оранжевое зарево под ней и белый
   блик, пробегавший по кнопке, овнер забраковал — «кнопки светятся». Раньше
   она ещё и подпрыгивала на 2px, от чего у нижней кромки уезжала из-под
   указателя и подсветка начинала мигать. Осталось то, что делают везде и что
   не спутать ни с чем: под курсором заливка гуще, при нажатии — темнее.

   В списке переходов выше стоит не сокращение background, а именно
   background-color. Картинку-градиент браузер переливать не умеет:
   background-image по стандарту меняется скачком, так что «плавные .18s» на
   оранжевых кнопках были выдумкой — заливка перекладывалась за один кадр. И
   кадр этот выходил кривой: слой кнопки (скруглённые углы + overflow) на нём
   перерисовывался целиком, и между старым и новым градиентом успевал мелькнуть
   собственный фон кнопки, то есть пустота, а сквозь неё — тёмная страница.
   Овнер видел это как «оранжевые кнопки промаргивают чёрным». Тёмные кнопки
   красятся цветом, а не картинкой, и переливаются честно — их правило ниже
   осталось прежним. */
.btn:active { filter: brightness(.94); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn-primary {
  background: var(--grad);
  color: #241203;
  /* своя система координат: слой наведения лежит ниже нуля и не должен
     провалиться под фон карточки, на которой стоит кнопка */
  isolation: isolate;
}
/* Густой градиент лежит готовым слоем поверх обычного и просто проявляется.
   Перерисовки нет — меняется одна прозрачность, а её браузер считает на
   видеокарте, поэтому чёрному кадру взяться неоткуда. z-index: -1 держит слой
   над собственной заливкой кнопки и под её надписью. */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to top, #E0761A, var(--gold));
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.btn-primary:hover::after { opacity: 1; }

.btn-dark {
  background: var(--panel-2);
  color: var(--ink);
}
.btn-dark:hover { background: var(--panel-3); }

.btn-sm { padding: 11px 20px; font-size: 13px; border-radius: 10px; }

/* Выключенная кнопка не отвечает ничем — иначе кажется, что по ней можно
   нажать ещё раз: заливка под курсором остаётся прежней. */
.btn[disabled] { opacity: .55; cursor: default; }
.btn[disabled]:hover { filter: none; }
/* У выключенной кнопки слоя наведения нет вовсе: иначе он проявился бы под
   курсором и она снова выглядела бы живой. */
.btn-primary[disabled]::after { content: none; }
.btn-dark[disabled]:hover { background: var(--panel-2); }

/* ---------- шапка ---------- */

/* Шапка залита фоном наглухо. Было 0.96 — четыре процента на вид ничего не
   добавляли, но текст, проезжающий под шапкой, просвечивал бледной тенью:
   на телефоне под шапку попадают крошки и заголовки, и это читается как
   недорисованный кадр, а не как приём. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}

.topbar-in {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 72px;
}

.brand { flex: 0 0 auto; }
.brand img { height: 46px; width: auto; }

.topnav {
  display: flex;
  gap: 26px;
  margin-left: auto;
  align-items: center;
}

/* Правила пунктов меню написаны через :not(.btn) не для красоты. В том же ряду
   стоят две кнопки — «Кабинет» и «Донат», — и раньше они попадали под общий
   отбор: приглушённая прозрачность .78 гасила оранжевую заливку доната (она
   сливалась с тёмной шапкой, овнер спросил, почему кнопка сверху справа такая
   тёмная), а цвет var(--ink) перебивал тёмную надпись кнопки, потому что
   `.topnav a` весит больше, чем `.btn-primary`. На наведении сверху ложился
   ещё и золотой текст — на оранжевом фоне он почти не читался. Кнопка в меню
   должна выглядеть как кнопка везде. */
.topnav a:not(.btn) {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .78;
  transition: opacity .15s, color .15s;
  white-space: nowrap;
}
.topnav a:not(.btn):hover { opacity: 1; color: var(--gold-hi); }
.topnav a:not(.btn).active { opacity: 1; color: var(--gold); }

.burger {
  display: none;
  margin-left: auto;
  background: var(--panel-2);
  border: none;
  border-radius: 10px;
  width: 46px;
  height: 46px;
  cursor: pointer;
  position: relative;
}
.burger span, .burger span::before, .burger span::after {
  content: '';
  position: absolute;
  left: 12px;
  width: 22px;
  height: 2.6px;
  border-radius: 2px;
  background: var(--gold);
}
.burger span { top: 22px; }
.burger span::before { top: -7px; left: 0; }
.burger span::after  { top: 7px;  left: 0; }

/* ---------- герой ---------- */

.hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../assets/img/hero.jpg') center 32% / cover no-repeat;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 4%, rgba(14, 14, 16, .78) 32%, rgba(14, 14, 16, .18) 68%, rgba(14, 14, 16, .38) 100%),
    linear-gradient(100deg, rgba(14, 14, 16, .72) 0%, rgba(14, 14, 16, .1) 55%);
}

/* Поля пишем по одному, а не сокращением: сокращение `padding: 140px 0 84px`
   заодно обнуляло боковые 24px, которые задаёт .container. На большом экране
   это не видно — блок узкий и стоит посреди страницы, — а на телефоне ширина
   контейнера равна ширине экрана, и заголовок, текст, обе кнопки и плашки
   отсчёта упирались прямо в край стекла. Ниже по странице поля на месте, так
   что первый экран выглядел съехавшим относительно всего остального. */
.hero-in {
  padding-top: 140px;
  padding-bottom: 84px;
  max-width: 760px;
}

.hero-logo {
  width: min(400px, 72vw);
  height: auto;
  margin-bottom: 30px;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .6));
}

.hero h1 {
  font-size: clamp(34px, 5.6vw, 64px);
  text-shadow: 0 4px 26px rgba(0, 0, 0, .55);
}

.hero .lead {
  margin: 22px 0 30px;
  max-width: 620px;
  font-size: 18.5px;
  color: #d9d5cd;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.count-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.chip {
  background: rgba(23, 22, 22, .88);
  border-radius: 12px;
  padding: 10px 18px;
  font-family: var(--f-text);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--muted);
}
.chip b { color: var(--gold-hi); font-weight: 700; margin-right: 6px; }

/* ---------- обратный отсчёт до открытия ----------

   Табло из четырёх ячеек: дни, часы, минуты, секунды. Каждая цифра сидит в
   своей клетке с обрезкой по краям — уходящая уезжает вверх, приходящая
   поднимается снизу. Никакого стекла и свечения: те же панели и та же
   акцентная полоска сверху, что у карточек сайта.
   Разметку собирает js/main.js от одной даты (OPEN_DATE). */

.cdown { margin-top: 30px; }

.cd-row { display: flex; gap: 12px; flex-wrap: wrap; }

.cd-cell {
  position: relative;
  min-width: 124px;
  padding: 14px 20px 12px;
  border-radius: 16px;
  background: linear-gradient(to bottom, #1F1E23, #151417);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  overflow: hidden;
  text-align: center;
  /* Появляются по очереди слева направо — порядковый номер ячейки js кладёт
     в --i. Both, чтобы до своей задержки ячейка не мигнула готовой. */
  animation: cd-rise .5s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--i) * .08s);
}

/* Акцентная полоска по верхней кромке — приём карточек, повторённый здесь,
   чтобы табло не выглядело деталью из другого проекта. */
.cd-cell::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--grad);
}

/* Искра по этой полоске. Пробегает один раз, когда в ячейке сменилось число,
   и только у дней, часов и минут: подсвечивать каждую секунду — мельтешение. */
.cd-cell::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 40%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--spark), transparent);
  transform: translateX(-110%);
  opacity: 0;
}
.cd-cell.bump::after { animation: cd-sweep .9s ease-out; }

.cd-num {
  display: flex;
  justify-content: center;
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 56px;
  line-height: 1.06;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}

/* Ширина клетки задана в em: цифры в Montserrat разной ширины, и без
   фиксированной клетки число дёргалось бы вбок на каждой смене.

   Клетка обрезает содержимое (иначе уезжающая цифра вылезла бы на соседнюю),
   и поэтому она обязана быть ШИРЕ самой широкой цифры, а не примерно равной
   ей. Было .66em — 36.9px при кегле 56. Замер в браузере: у Montserrat 900
   четвёрка занимает 40px по краске, ноль 38, восьмёрка 37 — то есть от каждой
   широкой цифры отрезало по полтора пикселя с боков. Овнер видел это как
   «цифры обрезаются чуть со сторон». .8em — 44.8px, запас по 2.4px с каждой
   стороны; цифры по-прежнему стоят ровным столбиком, потому что ширина клетки
   одна на всех. */
.cd-slot {
  position: relative;
  display: block;
  width: .8em;
  height: 1.06em;
  overflow: hidden;
}
.cd-slot b {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: block;
  font-weight: inherit;
}
.cd-nxt { opacity: 0; }
.cd-slot.roll .cd-cur { animation: cd-out .42s cubic-bezier(.22, .61, .36, 1) forwards; }
.cd-slot.roll .cd-nxt { animation: cd-in  .42s cubic-bezier(.22, .61, .36, 1) forwards; }

@keyframes cd-out { to   { transform: translateY(-105%); opacity: 0; } }
@keyframes cd-in  { from { transform: translateY(105%);  opacity: 0; }
                    to   { transform: translateY(0);     opacity: 1; } }
@keyframes cd-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes cd-sweep {
  0%   { transform: translateX(-110%); opacity: 0; }
  15%  { opacity: .95; }
  100% { transform: translateX(300%);  opacity: 0; }
}

.cd-lbl {
  margin-top: 4px;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Отсчёт кончился. Строка заменяет табло целиком: нули на месте отсчёта
   читаются как поломка, а не как «уже открыто». */
.cd-open {
  display: none;
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 44px;
  letter-spacing: .01em;
  color: var(--gold-hi);
}
.cdown.is-open .cd-row { display: none; }
.cdown.is-open .cd-open { display: block; }

/* Строка для читалок: табло от них скрыто (диктовать секунды нельзя),
   а эта строка словами обновляется раз в минуту. */
.cd-say {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cdown + .count-strip { margin-top: 18px; }

@media (max-width: 700px) {
  .cd-row { gap: 8px; }
  .cd-cell { flex: 1 1 0; min-width: 0; padding: 12px 6px 10px; border-radius: 14px; }
  .cd-num { font-size: 40px; }
  .cd-lbl { font-size: 10px; letter-spacing: .05em; }
  .cd-open { font-size: 32px; }
}
@media (max-width: 380px) {
  .cd-num { font-size: 33px; }
  .cd-lbl { font-size: 9px; }
  /* На узком экране кегль 33, и общей доли .8em остаётся всего по 1.2 px с
     каждого бока — меньше, чем размазывает сглаживание. Клетка тут чуть шире:
     запас становится 2.5 px, а в ячейку (63.8 px под две клетки) всё влезает. */
  .cd-slot { width: .88em; }
}

/* Меньше движения — цифры просто меняются: ни прокрутки, ни появления. */
@media (prefers-reduced-motion: reduce) {
  .cd-cell { animation: none; }
  .cd-cell.bump::after { animation: none; }
  .cd-slot.roll .cd-cur, .cd-slot.roll .cd-nxt { animation: none; }
}

/* ---------- полоса цифр ---------- */

.stats {
  background: var(--panel);
  padding: 34px 0;
}
.stats-in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat .num {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 44px);
  background: var(--grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .lbl {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* ---------- карточки ---------- */

/* Общее правило отклика для всех плиток сайта.

   Карточки больше НЕ подпрыгивают под курсором. Прыжок на 4–6px выглядел
   бодро на середине карточки и ломался у её нижнего края: карточка уезжала
   вверх, курсор оказывался уже вне её, отклик снимался, карточка падала
   обратно — и так по кругу, пока не уберёшь мышь. Отсюда и «бульки».

   Вместо движения: фон чуть светлеет, тень углубляется, а по верхней кромке
   слева направо прочерчивается линия акцента. Сам блок при этом неподвижен,
   попасть по нему можно откуда угодно. */
.card {
  position: relative;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: background .22s ease, box-shadow .22s ease;
}
.card:hover { background: var(--panel-2); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }

.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  z-index: 3;
  background: var(--grad-h);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s cubic-bezier(.2, .8, .3, 1);
}
.card:hover::before, .card:focus-within::before { transform: scaleX(1); }

/* сезонное бенто */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.bento .card-map { grid-column: span 3; }

.card-map .shot { height: 380px; }
.shot { position: relative; overflow: hidden; }
/* Картинка под курсором подъезжает на 4% и так же уезжает обратно.
   Покой записан явным scale(1), а не «никаким» transform: пока значение
   есть всегда, браузер держит картинку отдельным слоем и в конце возврата
   ничего не перерисовывает. Без этого последний кадр пересобирался заново —
   картинка на волосок дёргалась, вставая на место (слова овнера: «встают и
   такое микроподёргивание, чтобы встать на место»). will-change говорит о
   намерении заранее, чтобы слой не заводился уже в движении. */
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  will-change: transform;
  transition: transform .5s ease;
}
.card:hover .shot img { transform: scale(1.04); }
.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,14,16,.88), transparent 55%);
}

.card-body { padding: 26px 28px 30px; }
.card-body h3 { font-size: 21px; margin-bottom: 10px; }
.card-body p { color: var(--muted); font-size: 15px; }

/* Большая карточка карты: подпись лежит НА картинке целиком.
   Раньше блок подписи поднимали числом — margin-top: -86px, ровно под
   заголовок и две строки абзаца. Но числа в тексте живые (держав, провинций),
   строка стала третьей — и абзац разрезало нижним краем картинки: половина
   на карте, половина уже на серой панели.
   Теперь подъём не число: картинка и подпись лежат в одной ячейке сетки,
   подпись прижата к низу. Сколько бы строк в ней ни было, она целиком
   остаётся на картинке, а картинка тянется под неё. */
.card-map { display: grid; }
.card-map .shot, .card-map .card-body { grid-area: 1 / 1; }
.card-map .card-body {
  align-self: end;
  z-index: 1;
  padding-top: 40px;
  /* Затемнение под самой подписью, а не под низом картинки: у общей заливки
     .shot::after высота считается от карточки, и на узком экране, где текст
     занимает её половину, заголовок оказывался уже на светлой карте. */
  background: linear-gradient(to top,
    rgba(14, 14, 16, .92) 0%, rgba(14, 14, 16, .88) 62%, rgba(14, 14, 16, 0) 100%);
}
.card-map .card-body h3 { font-size: 26px; }
.card-map .card-body p { max-width: 640px; }

.icon-plate {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.icon-plate img { width: 40px; height: 40px; object-fit: contain; }
.icon-plate .pix { width: 44px; height: 44px; }

.bento .card:not(.card-map) .card-body { padding-top: 30px; }

/* арсенал */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.feature { padding: 30px 28px; }
.feature h3 { font-size: 19px; margin: 0 0 10px; }
.feature p { color: var(--muted); font-size: 14.5px; }

.more-line {
  margin-top: 30px;
  padding: 20px 28px;
  background: var(--panel-2);
  border-radius: 14px;
  color: var(--muted);
  font-size: 15px;
}
.more-line b { color: var(--gold); font-weight: 600; }

/* ---------- как зайти ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.step {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
}
.step .n {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 44px;
  background: var(--grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Полоска под номером шага набегает вместе с появлением карточки — четыре
   шага «Как зайти» дорисовываются один за другим и читаются как порядок,
   а не как четыре одинаковых плитки. Ничего не двигается под курсором. */
.step .n::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--grad-h);
}
.step.reveal .n::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.2,.8,.3,1) .18s;
}
.step.reveal.in .n::after { transform: scaleX(1); }
.step h3 { font-size: 16.5px; margin: 12px 0 8px; }
.step p { color: var(--muted); font-size: 14px; }

.join-note {
  margin-top: 30px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 26px 30px;
}
.join-note .txt { max-width: 640px; color: var(--muted); font-size: 15px; }
.join-note .txt b { color: var(--ink); }
/* второй, необязательный путь скачивания — тише основного текста */
.join-note .txt .muted { display: block; margin-top: 8px; font-size: 14px; opacity: .72; }
.join-note .txt .muted a { border-bottom: 1px solid rgba(214, 168, 74, .35); }

/* ---------- новости ---------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.news { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 12px; }
.news .date {
  align-self: flex-start;
  font-family: var(--f-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  color: #201305;
  background: var(--grad);
  border-radius: 8px;
  padding: 4px 12px;
}
.news h3 { font-size: 18px; }
.news p { color: var(--muted); font-size: 14.5px; }

/* Свежая новость — крупной карточкой во всю ширину ряда.
   Отдельного «главного» поля нет и не надо: крупной становится просто первая
   в списке, поэтому с выходом следующей эта сама уходит вниз к остальным. */
.news-lead {
  grid-column: 1 / -1;
  position: relative;
  padding: 32px 36px 34px;
  gap: 14px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(245, 134, 32, .10), transparent 58%),
    var(--panel);
}
/* У свежей новости линия акцента горит всегда, а не только под курсором:
   это её опознавательный знак. Отменяем общий для карточек scaleX(0). */
.news-lead::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-h);
  transform: none;
}
.news-lead h3 { font-size: clamp(22px, 3.2vw, 32px); line-height: 1.18; }
.news-lead p { font-size: clamp(15px, 1.5vw, 17px); max-width: 66ch; color: #c3bfb7; }

/* строка над заголовком: дата и пометка «свежее» */
.news-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.news-top .date { align-self: auto; }
.news-fresh {
  font-family: var(--f-text);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- CTA-полоса ---------- */

.cta-band {
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  overflow: hidden;
  padding: 64px 40px;
  text-align: center;
  background: url('../assets/img/hero.jpg') center 68% / cover no-repeat;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(14,14,16,.92), rgba(14,14,16,.68) 50%, rgba(14,14,16,.92));
}
.cta-band h2 { font-size: clamp(26px, 4vw, 44px); margin-bottom: 26px; }
.cta-band .hero-cta { justify-content: center; }

/* ---------- подвал ---------- */

footer {
  background: #0a0a0c;
  padding: 46px 0 40px;
  margin-top: 60px;
}
.foot-in {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.foot-in img { height: 52px; width: auto; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot-links a:hover { color: var(--gold); }
/* На телефоне ссылки подвала были высотой 21 px — палец в такую строку
   попадает через раз, а рядом ещё семь соседок. Добавляем поле сверху и снизу
   (нажимается 43 px) и убираем межстрочный зазор, чтобы подвал от этого
   не вырос. Вид строк не меняется: padding невидим. */
@media (max-width: 760px) {
  .foot-links { gap: 0 18px; }
  .foot-links a { padding: 11px 0; }
}
/* Сноска про Mojang стоит на каждой странице и была темнее любого другого
   текста на сайте (#6d6a63, 3,7:1) — а это юридическая строка, её должно быть
   видно. Берём обычный приглушённый цвет, отдельного тут не нужно. */
.foot-note { margin-top: 22px; color: var(--muted); font-size: 13px; max-width: 720px; }

/* ============================================================
   ДОНАТ
   ============================================================ */

.page-hero {
  position: relative;
  isolation: isolate;
  padding: 130px 0 70px;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../assets/img/hero.jpg') center 20% / cover no-repeat;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--bg) 2%, rgba(14,14,16,.86) 55%, rgba(14,14,16,.62));
}
.page-hero h1 { font-size: clamp(34px, 5vw, 58px); }
.page-hero .lead { margin-top: 18px; max-width: 660px; color: #d9d5cd; font-size: 17.5px; }

/* Служебные страницы (управление): та же шапка, но без парадной высоты —
   работать под ней, а не любоваться. */
.page-hero.short { padding: 108px 0 40px; }
.page-hero.short::before { background-position: center 34%; filter: saturate(.55); }
.page-hero.short h1 { font-size: clamp(30px, 3.6vw, 42px); }
.page-hero.short .lead { font-size: 16px; }

/* Полоса разделов липкая, и это её главная беда: пока страница едет, браузер
   обязан перерисовывать её каждый кадр, а перерисовать он успевает не всегда —
   строка отстаёт на кадр и возвращается, овнер видел это как «список категорий
   сверху скачет и дёргается при пролистывании вниз и вверх».
   Лечится двумя вещами сразу:
   1) заливка непрозрачная. Просвечивающие 4% заставляли браузер подмешивать
      к полосе то, что проезжает под ней, — а значит, считать её заново на
      каждый кадр. Ровно по этой причине выше уже сделана глухой шапка;
   2) will-change — просьба держать полосу отдельным слоем. Слой двигают
      целиком, как картинку, и перерисовывать при прокрутке нечего. */
.shop-tabs {
  position: sticky;
  top: 72px;
  z-index: 80;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  will-change: transform;
}
/* Поля пишем по одному: сокращение `padding: 12px 0` заодно обнуляло боковые
   24px, которые задаёт .container. Полоса разделов из-за этого стояла на 24px
   левее всего остального — и логотипа в шапке, и заголовков разделов под ней;
   на телефоне первая вкладка вообще упиралась в край стекла, а последняя, если
   долистать, упиралась в правый. Ряд, сдвинутый относительно всей страницы,
   читается как съехавшая вёрстка. У листаемой полосы поле работает с обеих
   сторон: содержимое становится шире на 48px, так что и в конце прокрутки
   остаётся такой же зазор, как в начале. */
.shop-tabs-in {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  overflow-x: auto;
}

/* Разделов в лавке двенадцать, и в одну строку они не влезают даже на большом
   мониторе: справа оставалось около 380 пикселей, спрятанных за боковой
   прокруткой. Читается это так, будто после «Амнистии» ничего нет — за край
   никто не листает то, о существовании чего не знает. На широком экране
   пускаем полосу в две строки; на узком оставляем листаемой, там две строки
   съели бы треть первого экрана, а листать вбок пальцем привычно.
   Маску краёв main.js снимет сам: без прокрутки sc-l/sc-r не выставляются. */
@media (min-width: 860px) {
  .shop-tabs-in { flex-wrap: wrap; overflow-x: visible; }
}

/* Полоса, которую можно листать вбок (вкладки лавки, сетка боевого пропуска).
   Класс и метки краёв вешает main.js. Затухание сделано маской, а не накладкой:
   маска держится за край самой полосы и не уезжает вместе с содержимым.
   Без скрипта не остаётся ничего лишнего — просто обычная прокрутка. */
.hscroll { scrollbar-width: thin; scrollbar-color: rgba(250,212,107,.35) transparent; }
.hscroll::-webkit-scrollbar { height: 8px; }
.hscroll::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 4px; }
.hscroll::-webkit-scrollbar-thumb { background: rgba(250,212,107,.35); border-radius: 4px; }
.hscroll::-webkit-scrollbar-thumb:hover { background: rgba(250,212,107,.6); }
.hscroll.sc-r {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent 100%);
}
.hscroll.sc-l {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 46px);
          mask-image: linear-gradient(to right, transparent 0, #000 46px);
}
.hscroll.sc-l.sc-r {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 46px,
                        #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 46px,
                        #000 calc(100% - 46px), transparent 100%);
}
.shop-tabs a {
  position: relative;
  isolation: isolate;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
  padding: 10px 20px;
  border-radius: 10px;
  white-space: nowrap;
  transition: color .15s ease;
}
/* Оранжевая заливка лежит готовым слоем и проявляется прозрачностью — тот же
   приём, что у кнопок. Градиент браузер переливать не умеет: прежнее
   `transition: background` перекладывало картинку за один кадр, и вся полоса
   (липкая, со скруглениями) перерисовывалась целиком. При прокрутке подсветка
   перескакивает с раздела на раздел постоянно — перерисовок набиралось столько,
   что строка дёргалась. Прозрачность считает видеокарта, перерисовки нет. */
.shop-tabs a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad);
  opacity: 0;
  transition: opacity .15s ease;
}
.shop-tabs a:hover, .shop-tabs a.active { color: #201305; }
.shop-tabs a:hover::before, .shop-tabs a.active::before { opacity: 1; }

.shop-section { padding: 70px 0 30px; }

/* Переход по вкладке приводил ровно к нулю — а наверху висят ДВЕ липкие
   полосы: своя шапка (72px) и полоса разделов. Заголовок раздела оказывался
   под ними, и человек попадал сразу в середину текста, не понимая, куда его
   принесло. Отступ считаем не от края секции, а от её заголовка: первые 70px
   секции — пустое поле, спрятать его под полосу не жалко.
   Два значения, потому что полоса разделов на широком экране идёт в две
   строки (см. выше), а на узком — в одну. */
.shop-section { scroll-margin-top: 80px; }
@media (min-width: 860px) {
  .shop-section { scroll-margin-top: 128px; }
}

/* привилегии */

.ranks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

.rank {
  position: relative;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 26px 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease;
}
/* Тонкая раскалённая кромка вместо прыжка вверх — см. комментарий у .card.
   Фон тут не трогаем: у «Популярного» он свой, градиентом. */
.rank:hover {
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(245, 134, 32, .38);
}

.rank .tier {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .3em;
  color: var(--muted);
  text-transform: uppercase;
}
.rank h3 { font-size: 24px; margin: 8px 0 2px; }

/* Девиз звания. Высота задана в строках, а не в пикселях: девизы разной длины,
   а ценники четырёх карточек должны стоять на одной линии. */
.rank .r-mot {
  margin: 6px 0 0;
  min-height: 2.8em;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}

.rank .price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 34px;
  margin: 14px 0 18px;
  background: var(--grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rank .price small { font-size: 16px; }

.perks { list-style: none; margin-bottom: 26px; flex: 1; }
.perks li {
  position: relative;
  padding: 7px 0 7px 26px;
  color: var(--muted);
  font-size: 14.5px;
}
.perks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 14px;
  width: 12px;
  height: 6px;
  border-radius: 2px;
  background: var(--grad-h);
}
.perks li.inherit {
  color: var(--gold);
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.perks li.inherit::before { background: var(--steel); }

.rank .btn { width: 100%; justify-content: center; }

.rank-hot { background: linear-gradient(to bottom, #241a0c, var(--panel) 40%); }
.rank-hot::before {
  content: 'Популярное';
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad);
  color: #201305;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 5px 16px;
}

.rank-top { background: linear-gradient(160deg, #2b1c08, #171616 60%); }
.rank-top h3 { background: var(--grad-h); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Высшие ступени.
   Их три, поэтому они идут отдельной строкой в три колонки — иначе в сетке
   на четыре карточки оставалась дырка размером с карточку. */
.ranks-3 { grid-template-columns: repeat(3, 1fr); }

/* Между «строевыми» и высшими званиями нужна не просто пустота, а объяснение,
   зачем верхние вообще существуют: иначе цена в 1590 ₽ читается как «плати
   за победу». */
.ranks-split { margin: 34px 0 20px; }
.ranks-split span {
  display: block;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
}
.ranks-split p {
  margin: 8px 0 0;
  max-width: 76ch;
  color: var(--muted);
  font-size: 14.5px;
}

/* Промежуточная ступень: чуть темнее панели, без «популярного» ярлыка и без
   золота — золото оставлено одной верхней карточке. */
.rank-elite { background: linear-gradient(165deg, #1e1b17, var(--panel) 62%); }

/* У высших званий нет строки «по отдельности»: таких услуг поштучно не
   продаётся, а выдуманный процент был бы враньём. */
.valueline.uniq { color: var(--steel); font-style: italic; }

.balance-note {
  margin-top: 30px;
  padding: 20px 28px;
  background: var(--panel-2);
  border-radius: 14px;
  color: var(--muted);
  font-size: 14.5px;
}
.balance-note b { color: var(--gold); }

/* киты и кейсы: сетки контейнеров.
   Сами плитки рисует js/shop.js — стили в блоке «ЛАВКА 3.0» ниже. */

.kits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* ступени редкости — общие для кейсов, полосы прокрутки и таблицы шансов */

.r-common { background: #2a2a2e; color: #b7b3ab; }
.r-often  { background: #33301f; color: var(--gold); }
.r-rare   { background: #3d2712; color: var(--or); }
.r-epic   { background: #2b1b3f; color: #c39bf5; }
.r-leg    { background: var(--grad); color: #201305; font-weight: 800; }

.case-note { margin-top: 26px; color: var(--muted); font-size: 14px; padding: 18px 26px; background: var(--panel-2); border-radius: 14px; }

/* наборы */

.bundles { display: grid; gap: 22px; }

.bundle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 32px;
  transition: background .2s ease, box-shadow .2s ease;
}
.bundle:hover {
  background: var(--panel-2);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(245, 134, 32, .3);
}

.bundle h3 { font-size: 23px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bundle .save {
  font-family: var(--f-text);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .06em;
  background: var(--red-lo);
  color: #fff;
  border-radius: 8px;
  padding: 4px 12px;
}
.bundle p { color: var(--muted); margin-top: 10px; max-width: 720px; font-size: 15px; }
.bundle .contents { margin-top: 8px; color: var(--gold); font-size: 14px; }

.bundle-buy { text-align: right; }
.bundle-buy .old {
  color: var(--steel);
  text-decoration: line-through;
  font-size: 17px;
  font-family: var(--f-disp);
  font-weight: 700;
}
.bundle-buy .price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 38px;
  background: var(--grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bundle-buy .btn { margin-top: 12px; }

/* как купить + дисклеймер */

.howto {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.disclaimer {
  margin-top: 40px;
  padding: 24px 30px;
  background: var(--panel-2);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
}
.disclaimer b { color: var(--ink); }

/* ---------- модалка покупки ---------- */

.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 5, 6, .8);
  /* Прокручивается сама подложка. Карточка заказа выше экрана — на телефоне это
     обычное дело, — и без этого нижний край с кнопкой «Оплатить» просто уходил
     за стекло: доскроллить было некуда, окно фиксированное. */
  overflow-y: auto;
}
.modal-wrap.open { display: flex; }

/* Страница под открытым окном не должна ехать. Иначе палец, ведущий по
   затемнению, листает лавку за окном: человек закрывает заказ и оказывается
   в другом месте страницы, будто нажатие «сбросило» её. Запрет ставится и на
   html, и на body — разные браузеры слушают разное. Содержимое под окном при
   этом становится шире на ширину ленты прокрутки, но видно его сквозь
   затемнение в 80%, так что перекладка не читается. */
html:has(.modal-wrap.open),
html:has(.modal-wrap.open) body { overflow: hidden; }

.modal {
  width: min(480px, 100%);
  background: var(--panel);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  padding: 34px 32px 32px;
  position: relative;
  /* Поля auto, а не только align-items: центрирование флексом при переполнении
     срезает ВЕРХ карточки — прокрутка туда не доходит. Автополя схлопываются в
     ноль, когда места не хватает, и тогда достаются оба края. */
  margin: auto;
}
.modal h3 { font-size: 22px; margin-bottom: 4px; }
.modal .m-item { color: var(--gold); font-weight: 600; font-size: 16.5px; }
.modal .m-price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 30px;
  margin: 10px 0 18px;
  background: var(--grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.modal label {
  display: block;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.modal input {
  width: 100%;
  background: var(--panel-2);
  border: none;
  outline: none;
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16.5px;
  padding: 13px 16px;
  margin-bottom: 18px;
}
.modal input:focus { background: var(--panel-3); box-shadow: inset 0 0 0 2px rgba(245,134,32,.5); }
.modal .m-steps { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.modal .m-steps b { color: var(--ink); }
.modal .btn { width: 100%; justify-content: center; }
/* кнопка оплаты, пока приём платежей не открыт */
.modal .btn[disabled] {
  background: var(--panel-3);
  color: var(--muted);
  cursor: default;
  box-shadow: none;
  transform: none;
}
.m-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 19px;
  cursor: pointer;
  line-height: 1;
}
.m-close:hover { color: var(--ink); background: var(--panel-3); }

/* ============================================================
   Объёмные элементы (js/aegis3d.js): скин, кубы блоков, шестерни
   ============================================================ */

.mc-stage {
  position: absolute;
  right: 5%;
  bottom: 96px;
  width: 240px;
  height: 340px;
  perspective: 900px;
  z-index: 2;
  pointer-events: none;
}
.mc-stage::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 160px;
  height: 28px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5), transparent 68%);
}

.mc-stage-page { bottom: 0; right: 8%; }

.p3d { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }

/* Разворот фигуры живёт отдельным узлом, потому что его двигает мышь
   (js/aegis3d.js), а на самой фигуре крутится дыхание. Один узел не может
   и то и другое: анимация перебивает transform целиком. Точка вращения —
   там же, где была раньше, под ногами. */
.mc-aim {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform-style: preserve-3d;
  transform: rotateX(var(--mc-rx, -4deg)) rotateY(var(--mc-ry, -22deg));
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.mc-char {
  position: absolute;
  left: 0;
  bottom: 0;
  transform-style: preserve-3d;
  animation: mc-breathe 6.5s ease-in-out infinite;
}
/* Было: фигура за 5.5 с отъезжала на 10° по курсу и поднималась на 5 px —
   со стороны это читалось как полёт, овнер так и сказал. Человек, стоящий
   на земле, в покое почти неподвижен: грудь приподнимается на волос и вес
   чуть переносится с ноги на ногу. Полтора пикселя на трёхсотпиксельной
   фигуре — это и есть «почти неподвижен», ноги при этом стоят. */
@keyframes mc-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg); }
  50%      { transform: translate3d(0, -1.5px, 0) rotateZ(.5deg); }
}

.p3d .f {
  position: absolute;
  left: 50%;
  top: 50%;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  /* Грань блока односторонняя: изнутри её не видно. В CSS по умолчанию
     наоборот — изнанка рисуется зеркальной копией лицевой стороны, и белая
     маска с лица проступала на затылке. В самом скине затылок чистый:
     head.back — сплошной тёмный, hat.back прозрачный и тёмный, маска есть
     только на head.front и hat.front (сверено по пикселям skin.png).
     Прячем изнанку — заодно до отрисовки доходит вдвое меньше граней. */
  backface-visibility: hidden;
}

/* Голова не водит из стороны в сторону без остановки — это и выглядело
   механически. Большую часть круга она стоит, один раз оглядывается на
   зрителя и возвращается. Долгие «полки» в кадрах ещё и дешевле: пока
   значение не меняется, перерисовывать нечего. */
.head-sway { animation: mc-glance 11s ease-in-out infinite; }
@keyframes mc-glance {
  0%, 34%   { transform: translate3d(0, var(--head-y, -196px), 0) rotateY(-2deg) rotateZ(0deg); }
  44%, 56%  { transform: translate3d(0, var(--head-y, -196px), 0) rotateY(14deg) rotateZ(-1.5deg); }
  66%, 100% { transform: translate3d(0, var(--head-y, -196px), 0) rotateY(-2deg) rotateZ(0deg); }
}

/* Рука с ключом больше не машет по кругу каждые полторы секунды. Она держит
   инструмент, еле заметно ведёт его вниз-вверх — и один раз за круг, ровно
   когда голова обернулась, коротко машет дважды. Круг общий с головой, 11 с:
   персонаж замечает зрителя, оглядывается и здоровается. */
.arm-wave {
  transform-origin: 0 0;
  animation: mc-hail 11s ease-in-out infinite;
}
@keyframes mc-hail {
  0%        { transform: rotateZ(-128deg); }
  20%       { transform: rotateZ(-131deg); }
  38%       { transform: rotateZ(-128deg); }
  46%       { transform: rotateZ(-147deg); }
  53%       { transform: rotateZ(-126deg); }
  60%       { transform: rotateZ(-145deg); }
  68%, 100% { transform: rotateZ(-128deg); }
}

/* Фигуры нет на экране — считать её незачем. Ровно это и подъедало кадры
   при прокрутке: сорок с лишним граней внутри preserve-3d видеокарте не
   отдать, их каждый кадр рисует тот же поток, что двигает страницу. */
.mc-off .mc-char,
.mc-off .head-sway,
.mc-off .arm-wave { animation-play-state: paused; }

.mc-tool {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  max-width: none;
  image-rendering: auto;
}

/* режим съёмки макета (?shot=1) */
.shotmode .hero { min-height: 880px; }
.shotmode .reveal { opacity: 1; transform: none; transition: none; }
/* В режиме съёмки макета линии тоже должны быть дорисованы: наблюдателя
   прокрутки там нет, класс .in никто не повесит. */
.shotmode .section-head.reveal::before,
.shotmode .step.reveal .n::after { transform: none; transition: none; }

/* ---------- появление при скролле ---------- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- адаптив ---------- */

@media (max-width: 1100px) {
  .mc-stage { display: none; }
}

@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .card-map { grid-column: span 2; }
  .grid-3, .news-grid, .kits { grid-template-columns: repeat(2, 1fr); }
  .ranks, .ranks-3 { grid-template-columns: repeat(2, 1fr); }
  .steps, .howto { grid-template-columns: repeat(2, 1fr); }
  .stats-in { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* Пунктов в шапке стало больше (земли, вики, обращения, эфиры, кабинет), и на
   ноутбучной ширине они начинали налезать на логотип. Поэтому меню
   сворачивается в кнопку уже с 1160px, а не с телефонной ширины.
   Порог поднимали дважды: 1080 хватало до появления «Земель». */
@media (max-width: 1160px) {
  .topnav {
    position: fixed;
    top: 72px;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    background: #131316;
    padding: 26px 24px 30px;
    gap: 20px;
    transform: translateY(-130%);
    /* Закрытое меню уезжает за верхний край, но остаётся на странице: без
       visibility табуляция с кнопки уходила в восемь невидимых ссылок, а
       читалка их проговаривала. visibility переключается скачком в конце
       перехода, поэтому выезд и уход остаются плавными. */
    visibility: hidden;
    transition: transform .25s ease, visibility .25s;
    box-shadow: 0 30px 40px rgba(0,0,0,.5);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .topnav.open { transform: none; visibility: visible; }
  /* Выпавшее меню — это список строк, а не кучка ссылок: палец попадает в
     строку целиком (46px), между строками волосяная черта. Раньше ссылка была
     высотой в 21px, и в неё надо было целиться. */
  .topnav { gap: 0; padding: 8px 24px 24px; }
  .topnav a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 46px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  .topnav .btn { justify-content: center; margin-top: 16px; }
  .topnav .btn + .btn { margin-top: 10px; }
  .burger { display: block; }
}

@media (max-width: 640px) {
  section { padding: 64px 0; }
  /* У кнопок стоит white-space:nowrap — на десктопе это правильно, а на
     телефоне длинная надпись («Пройти проверку и занять имя») задавала
     колонке ширину в 364px и всю страницу тащило вбок. Разрешаем перенос. */
  .btn { white-space: normal; text-align: center; }
  .bento, .grid-3, .news-grid, .kits, .ranks, .ranks-3, .steps, .howto, .cases { grid-template-columns: 1fr; }
  .bento .card-map { grid-column: span 1; }
  .card-map .shot { height: 240px; }
  /* На телефоне подпись на картинке не помещается: картинка тут 240 пикселей,
     а текста в ней под две сотни — наложение закрыло бы саму карту. Поэтому на
     узком экране карточка обычная: картинка сверху, подпись целиком под ней на
     панели. Оба режима держат одно правило — текст не разрезан краем картинки. */
  .card-map { display: block; }
  .card-map .card-body { background: none; padding-top: 24px; }
  /* На телефоне крупная карточка и так во всю ширину — лишние поля только
     съедают строку, оставляем обычные. */
  .news-lead { padding: 26px 24px 28px; }
  .bundle { grid-template-columns: 1fr; }
  .bundle-buy { text-align: left; }
  /* На телефоне сцена с персонажем скрыта, и низ героя оставался пустой
     тёмной полосой в полтораста пикселей перед цифрами — подбираем. */
  .hero-in { padding-top: 110px; padding-bottom: 40px; }
  .hero { min-height: 0; }
  .shop-tabs { top: 72px; }
  /* Полоса призыва внизу: по 40 пикселей полей с каждой стороны на телефоне
     оставляли содержимому 247 — и «Поддержать проект» не влезал в собственную
     кнопку, ломаясь на две строки. */
  .cta-band { padding: 48px 22px; }
  /* Пары кнопок-призывов на телефоне — столбиком во всю ширину. Строкой они и
     так переносились по одной, но ширину каждая брала по своей надписи:
     выходила лесенка из прямоугольников разной длины, а самые длинные подписи
     («Скачать лаунчер · 44 МБ») не помещались и рвались, оставляя «МБ» на
     второй строке в одиночестве. Во всю ширину — то, как это выглядит на
     телефоне везде, и подписи снова встают в одну строку. */
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  /* По 30 пикселей внутри кнопки — это ещё 60 к длине надписи, и «Скачать
     лаунчер · 44 МБ» (235 пикселей текста) переставал помещаться в отведённые
     ему 267. На телефоне поля внутри кнопки во всю ширину не нужны: кнопку и
     так не с чем спутать. */
  .hero-cta .btn, .join-note .btn {
    justify-content: center;
    padding-left: 22px;
    padding-right: 22px;
  }
  .join-note { padding: 22px 20px; }
  .join-note .btn { flex: 1 0 100%; }
}

/* ============================================================
   ЛАВКА 2.0 — валюта, премиум, пропуск, тиры китов, комбо
   Добавлено 23.08.2026 вместе с donate.html на червонцах.
   Ниже — только то, чего не было: базовые карточки (.rank, .kit,
   .case, .bundle, .modal) переиспользуются как есть.
   ============================================================ */

/* ---------- предупреждение над витриной ---------- */

.notice {
  margin-top: 30px;
  padding: 16px 24px;
  border-radius: 14px;
  background: var(--panel-2);
  border-left: 4px solid var(--or);
  color: var(--muted);
  font-size: 14.5px;
}
.notice b { color: var(--ink); }

/* ---------- пересчёт в валюту игрока под рублёвой ценой ---------- */
/* Дорисовывает js/money.js в каждый .price. Ценники в лавке набраны
   градиентом с background-clip:text, то есть у них color:transparent —
   поэтому здесь заливка текста возвращается принудительно, иначе строка
   наследует прозрачный цвет и просто исчезает. Строки не бывает вовсе,
   когда выбраны рубли: пересчитывать нечего.
   Отдельных классов под пакеты червонцев нет нарочно: раздел #coins собран
   на обычных .good, ценник у него такой же рублёвый, как у всего остального. */
.pr-rub {
  display: block;
  margin-top: 7px;
  font-family: var(--f-text);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ---------- выбор валюты ---------- */

.cur-pick {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.cur-lab {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Свой список вместо системного <select>: раскрытый список рисует
   операционная система, и на Windows он выходит белым, чужим шрифтом и с
   чужими отступами — посреди тёмной лавки это окно из другой программы.
   Разметку собирает js/money.js. */
.cur-box { position: relative; }
.cur-btn,
.cur-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-family: var(--f-text);
  font-size: 14.5px;
  color: var(--ink);
  text-align: left;
  background: var(--panel-2);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.cur-btn { min-width: 250px; }
.cur-btn:hover, .cur-opt:hover { background: var(--panel-3); border-color: rgba(245, 134, 32, .45); }
.cur-btn:focus-visible, .cur-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Знак валюты фишкой: у знаков разная ширина («₽» и «сум»), и без
   фиксированной клетки названия стран в списке стояли лесенкой. */
.cur-sign {
  flex: 0 0 34px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--gold);
  background: rgba(250, 212, 107, .12);
  border-radius: 8px;
}
.cur-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cur-code {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--steel);
}
.cur-arr { flex: 0 0 12px; width: 12px; height: 8px; color: var(--muted); transition: transform .18s ease; }
.cur-box.open .cur-arr { transform: rotate(180deg); }

.cur-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--panel-2);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px;
  box-shadow: var(--shadow);
  /* Одиннадцать стран влезают целиком на мониторе, но не на телефоне
     в альбомной ориентации — там список прокручивается. */
  max-height: min(58vh, 420px);
  overflow-y: auto;
}
/* Закрытый список прячет атрибут hidden, но собственный display: grid выше
   бьёт браузерное [hidden] { display: none } — без этой строки список висел
   раскрытым поверх страницы всегда. Гасим явно. */
.cur-menu[hidden] { display: none; }
.cur-menu .cur-opt { border-color: transparent; background: transparent; }
.cur-menu .cur-opt:hover { background: var(--panel-3); border-color: transparent; }
.cur-opt.on { background: rgba(245, 134, 32, .14); }
.cur-opt.on .cur-name { font-weight: 600; }
/* Safari на айфоне увеличивает страницу, когда трогают элемент управления
   со шрифтом мельче 16px. На сенсорных экранах поднимаем до порога;
   такое же правило для полей форм — в pages.css. */
@media (pointer: coarse) {
  .cur-btn, .cur-opt { font-size: 16px; padding: 10px 12px; }
}
.cur-note {
  flex: 1 1 320px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.cur-note b { color: var(--ink); font-weight: 600; }

/* ---------- переключатель срока / уровня ---------- */

.switch-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--panel);
  border-radius: 13px;
}
.switch button {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 11px 22px;
  border-radius: 9px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.switch button:hover { color: var(--ink); background: var(--panel-3); }
.switch button.on { color: #201305; background: var(--grad); }
.switch-hint {
  color: var(--muted);
  font-size: 14px;
  max-width: 560px;
  flex: 1 1 300px;
}

/* ---------- строка выгоды в карточке звания ---------- */

.rank .price .per,
.prem-price .per {
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 14px;
  color: var(--muted);
  margin-left: 8px;
  letter-spacing: 0;
  -webkit-text-fill-color: var(--muted);
}
.valueline {
  margin: -6px 0 18px;
  font-size: 13.5px;
  color: var(--steel);
}
.valueline .parts { color: var(--muted); font-weight: 600; text-decoration: line-through; }
.valueline .save-pc { color: var(--gold); font-weight: 700; }

/* ---------- премиум ---------- */

.prem {
  background: linear-gradient(150deg, #2b1c08, var(--panel) 55%);
  border-radius: var(--radius);
  padding: 34px 34px 32px;
  box-shadow: var(--shadow);
}
.prem-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid #2a2723;
}
.prem-top .tier {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.prem-top h3 {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 30px;
  text-transform: uppercase;
  background: var(--grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.prem-price { text-align: right; }
.prem-price .price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 38px;
  line-height: 1.1;
  color: var(--gold);
}
.prem-price .price small { font-size: 18px; }
.prem-back { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.prem-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 26px 0 28px;
}
.prem-h {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 14px;
}
.prem .perks { margin-bottom: 0; }
.stack {
  display: block;
  color: var(--steel);
  font-size: 12.5px;
  margin-top: 1px;
}
.prem > .prem-main > .btn { min-width: 260px; justify-content: center; }

/* ---------- боевой пропуск ---------- */

.bp-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 26px;
}
.bp-fact {
  background: var(--panel);
  border-radius: 14px;
  padding: 20px 22px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
}
.bp-fact b {
  display: block;
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  color: var(--gold);
  margin-bottom: 4px;
}
.bp-scroll {
  overflow-x: auto;
  padding-bottom: 12px;
  background: var(--panel);
  border-radius: var(--radius);
}
.bp-grid { display: flex; min-width: max-content; }
.bp-col {
  flex: 0 0 176px;
  padding: 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bp-col.mile { background: rgba(245, 134, 32, .07); }
.bp-legend {
  flex: 0 0 150px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel-2);
  padding-left: 20px;
}
.bp-lvl {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 20px;
  text-align: center;
  color: var(--steel);
  height: 26px;
}
.bp-col.mile .bp-lvl { color: var(--gold); }
.bp-legend .bp-lvl {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  line-height: 26px;
}
.bp-cell {
  flex: 1;
  border-radius: 11px;
  padding: 12px 13px;
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  min-height: 74px;
}
.bp-cell.free { background: var(--panel-2); color: var(--ink); }
.bp-cell.paid { background: #241a0c; color: var(--gold); }
.bp-col.mile .bp-cell.free { background: var(--panel-3); }
.bp-lgd {
  background: transparent !important;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  padding-left: 0;
}
.bp-lgd span {
  display: block;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--steel);
  margin-top: 3px;
}
.bp-hint { margin-top: 14px; color: var(--steel); font-size: 13.5px; max-width: 780px; }

.pass-buy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 30px;
}
.pb-card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 28px 28px 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.pb-card .tier {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel);
}
.pb-card h3 { font-family: var(--f-disp); font-weight: 900; font-size: 23px; margin: 8px 0 10px; text-transform: uppercase; }
.pb-card p { color: var(--muted); font-size: 14.5px; flex: 1; }
.pb-card p b { color: var(--ink); }
.pb-lines { margin-top: 18px; display: grid; gap: 10px; }
.pb-line {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel-2);
  border-radius: 12px;
  padding: 12px 16px;
}
.pb-line span { flex: 1; font-size: 14.5px; }
.pb-line b { font-family: var(--f-disp); font-weight: 800; color: var(--gold); }
.pb-order { background: linear-gradient(160deg, #2b1c08, var(--panel) 60%); }
.pb-foot {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pb-foot .price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 32px;
  color: var(--gold);
}
.pb-foot .price small { font-size: 16px; }

/* ---------- предметы поштучно ---------- */

.goods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.good {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 22px 24px 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .2s ease, box-shadow .2s ease;
}
.good:hover {
  background: var(--panel-2);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(245, 134, 32, .3);
}
.g-head { display: flex; align-items: center; gap: 16px; }
.g-head .icon-plate { margin: 0; flex: 0 0 auto; }
.g-head > div:nth-child(2) { flex: 1; }
.g-head h3 { font-family: var(--f-disp); font-weight: 800; font-size: 17.5px; }
.g-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.g-head .price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 22px;
  color: var(--gold);
  white-space: nowrap;
}
.g-head .price small { font-size: 13px; }
.good > .btn { align-self: flex-start; }

@media (max-width: 440px) {
  /* Три колонки в строке — плитка, название, цена — на телефоне делят 279 px,
     и названию оставалось 138: «Приоритетный вход» налезал на ценник, а у
     «Полёта» цена вовсе срывалась на отдельную строку и висела в пустоте.
     Плитка теперь держит обе строки слева, название занимает всю оставшуюся
     ширину, цена встаёт под описанием справа — как в обычном магазине:
     сначала что это, потом сколько стоит, потом кнопка. */
  .g-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
  }
  .g-head .icon-plate { grid-row: 1 / span 2; align-self: start; }
  .g-head .price { grid-column: 2; justify-self: end; font-size: 21px; }
}

/* ---------- чего нет в лавке ---------- */

.nope {
  margin-top: 26px;
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 26px 30px 28px;
  border-left: 4px solid var(--ember);
}
.nope-h {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 14px;
}
.nope ul { list-style: none; display: grid; gap: 8px; }
.nope li { color: var(--muted); font-size: 14.5px; padding-left: 22px; position: relative; }
.nope li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 11px;
  height: 2px;
  background: var(--ember);
}
.nope li b { color: var(--ink); font-weight: 600; }

/* ---------- без единого рубля ---------- */

.free-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.free-card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 24px 26px 26px;
  box-shadow: var(--shadow);
}
.fc-sum {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 27px;
  background: var(--grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.free-card h3 { font-family: var(--f-disp); font-weight: 800; font-size: 17px; margin: 6px 0 8px; }
.free-card p { color: var(--muted); font-size: 14px; }

/* Скупщик — не одна из наград, а основной заработок: поэтому он идёт широкой
   карточкой над сеткой бонусов, а не теряется в общем ряду третьим слева. */
.free-lead {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.free-lead .fl-l { flex: 0 0 auto; }
.free-lead .fc-sum { font-size: 34px; }
.free-lead h3 { margin-bottom: 0; }
.free-lead p { flex: 1 1 400px; font-size: 14.5px; line-height: 1.65; }

.free-total {
  margin-top: 22px;
  background: linear-gradient(150deg, #2b1c08, var(--panel) 60%);
  border-radius: var(--radius);
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.free-total h3 { font-family: var(--f-disp); font-weight: 900; font-size: 26px; margin: 4px 0 8px; text-transform: uppercase; }
.free-total p { color: var(--muted); font-size: 15px; max-width: 640px; }
.ft-num {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 68px);
  line-height: 1;
  background: var(--grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.ft-num small { font-size: 26px; }

/* ---------- мелочи ---------- */

.icon-plate .pix.wide { width: 44px; height: 22px; }
.modal .m-price small { font-size: 15px; color: var(--muted); font-weight: 500; }
.modal .m-alt {
  display: block;
  margin-top: 6px;
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.modal #mAlt { margin-top: 10px; }
/* у .modal label задан display: block — без этого атрибут hidden на нём не
   срабатывает, и подпись «Игровой ник» висит над спрятанным полем */
.modal [hidden] { display: none !important; }

/* ---------- адаптив лавки ---------- */

@media (max-width: 1100px) {
  .goods, .free-grid { grid-template-columns: repeat(2, 1fr); }
  .kits, .cases { grid-template-columns: repeat(3, 1fr); }
  .bp-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .prem-cols { grid-template-columns: 1fr; gap: 22px; }
  .pass-buy { grid-template-columns: 1fr; }
  .prem { padding: 26px 24px; }
  .kits, .cases { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* 1fr — это minmax(auto, 1fr), то есть колонка не бывает уже самой широкой
     карточки. У «Приоритетного входа» шапка в строку (иконка + заголовок +
     ценник с пересчётом в валюту, оба nowrap) даёт min-content 384 px, и на
     экране 375 px весь столбец вылезал за край на ~57 px. minmax(0, 1fr)
     держит колонку по контейнеру, а ценник переносится на свою строку. */
  .goods, .free-grid { grid-template-columns: minmax(0, 1fr); }
  .g-head { flex-wrap: wrap; }
  .g-head > div:nth-child(2) { flex: 1 1 130px; min-width: 0; }
  .g-head .price { margin-left: auto; }
  .kits, .cases { grid-template-columns: 1fr 1fr; }
  .bp-facts { grid-template-columns: 1fr 1fr; }
  .bp-legend { position: static; flex-basis: 130px; }
  .prem-price { text-align: left; }
  .free-total { padding: 24px 22px; }
  .switch { width: 100%; }
  .switch button { flex: 1; padding: 11px 8px; }
}

/* ============================================================
   ЛАВКА 3.0 — разбор RedBuzz от 24.08.2026.
   Кейсы стали кейсами (ящик, полоса прокрутки, продажа приза),
   киты — плитками с выбором уровня, ускорение — лестницей,
   пропуск — полосой на 60 этапов с заданиями и кругами.
   ============================================================ */

/* ---------- промокоды и скидка премиума ---------- */

.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.promo-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
  box-shadow: var(--shadow);
}
.pc-prem { background: linear-gradient(150deg, #241a0c, var(--panel) 55%); }
.pc-ic .icon-plate { margin: 0; }
.promo-card .tier {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel);
}
.promo-card h3 { font-family: var(--f-disp); font-weight: 800; font-size: 20px; margin: 6px 0 10px; }
.promo-card p { color: var(--muted); font-size: 14.5px; }
.promo-card p b { color: var(--ink); }
.pc-list { list-style: none; margin: 14px 0 0; display: grid; gap: 7px; }
.pc-list li {
  position: relative;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13.5px;
}
.pc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 4px;
  border-radius: 2px;
  background: var(--grad-h);
}
.pc-list li b { color: var(--ink); font-weight: 600; }
.pc-code {
  margin-top: 16px;
  background: var(--panel-2);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--gold);
  font-size: 13px;
  font-family: var(--f-disp);
  font-weight: 700;
}

/* ---------- префиксы в карточках званий ---------- */

.pfx {
  display: inline-block;
  border-radius: 6px;
  padding: 1px 8px;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
}
.pfx-1 { background: #2a2a2e; color: #cfcac1; }
.pfx-2 { background: #23301f; color: #9fd07a; }
.pfx-3 { background: #3d2712; color: var(--or); }
.pfx-4 { background: var(--grad); color: #201305; }
.pfx-5 { background: #3a1418; color: #ef9a9a; }
.pfx-7 { background: linear-gradient(90deg, var(--gold-hi), #fffdf5); color: #241a05; }

/* ---------- киты званий ---------- */

.rank-kits {
  margin-top: 26px;
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 26px 28px 28px;
}
.rk-h {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 18px;
}
.rk-sub {
  margin: -8px 0 18px;
  max-width: 88ch;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.rk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Верхние три кита идут своей строкой — по числу высших званий. */
.rk-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rk-grid + .rk-grid { margin-top: 16px; }
.rk-card {
  background: var(--panel);
  border-radius: 14px;
  padding: 20px 20px 18px;
}
.rk-top-tier { background: linear-gradient(160deg, #2b1c08, var(--panel) 65%); }
.rk-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rk-top .icon-plate { margin: 0; flex: 0 0 auto; width: 52px; height: 52px; }
.rk-top .icon-plate img { width: 32px; height: 32px; }
.rk-top .icon-plate img.pix { width: 36px; height: 36px; }
.rk-card h4 { font-family: var(--f-disp); font-weight: 800; font-size: 15.5px; }
.rk-card i {
  display: block;
  font-style: normal;
  color: var(--steel);
  font-size: 11.5px;
  margin-top: 2px;
}
.rk-card ul { list-style: none; display: grid; gap: 5px; }
.rk-card li { color: var(--muted); font-size: 13px; padding-left: 14px; position: relative; }
.rk-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 3px;
  border-radius: 2px;
  background: var(--steel);
}
.rk-card li b { color: var(--gold); font-weight: 600; }

/* ---------- пропуск: задания ---------- */

.tasks {
  margin: 26px 0;
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
}
.tasks-h {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 18px;
}
.tasks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.task {
  background: var(--panel);
  border-radius: 14px;
  padding: 20px 20px 18px;
  border-top: 3px solid var(--steel);
}
.t-easy  { border-top-color: #5a6f4a; }
.t-mid   { border-top-color: var(--gold); }
.t-hard  { border-top-color: var(--or); }
.t-super { border-top-color: var(--red); background: linear-gradient(165deg, #2a1410, var(--panel) 65%); }
.t-pts {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 25px;
  line-height: 1.1;
  color: var(--gold);
}
.t-super .t-pts { color: #ff7a5c; }
.task b { display: block; font-family: var(--f-disp); font-size: 15px; margin: 6px 0 8px; }
.task p { color: var(--muted); font-size: 13px; line-height: 1.45; }
.tasks-sum {
  margin-top: 18px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}
.tasks-sum b { color: var(--ink); }

/* ---------- пропуск: прыжок по этапам ---------- */

.bp-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bp-jump span {
  color: var(--steel);
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-right: 4px;
}
.bp-jump button {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
  background: var(--panel);
  border: 0;
  border-radius: 9px;
  padding: 8px 16px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.bp-jump button:hover { color: var(--ink); background: var(--panel-3); }
.bp-jump button.on { color: #201305; background: var(--grad); }
@media (max-width: 760px) {
  /* Номера этапов — 37 px в ширину и 32 в высоту, между ними 8: на телефоне
     это меньше подушечки пальца, и прыжок уезжал на соседний этап. */
  .bp-jump button { padding: 11px 16px; }
}

.bp-col.half { background: rgba(99, 97, 102, .12); }
.bp-col.half .bp-lvl { color: var(--ink); }
.bp-col.last { padding-right: 20px; }

/* ---------- пропуск: прокрут и круги ---------- */

.pb-feat {
  margin: 16px 0 0;
  background: var(--panel-2);
  border-left: 3px solid var(--or);
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.pb-feat b { color: var(--gold); }

.circles {
  margin-top: 30px;
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
}
.ci-h {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 18px;
}
.ci-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ci-card {
  background: var(--panel);
  border-radius: 14px;
  padding: 22px 22px 20px;
}
.ci-hot { background: linear-gradient(160deg, #241a0c, var(--panel) 60%); }
.ci-top { background: linear-gradient(160deg, #2b1c08, var(--panel) 55%); }
.ci-n {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  color: var(--steel);
}
.ci-hot .ci-n { color: var(--gold); }
.ci-top .ci-n {
  background: var(--grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ci-card h4 { font-family: var(--f-disp); font-weight: 800; font-size: 17px; margin: 8px 0 8px; }
.ci-card p { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.ci-card p b { color: var(--gold); font-weight: 600; }
.ci-note { margin-top: 16px; color: var(--steel); font-size: 13.5px; }

/* ---------- плитка кита ---------- */

.kit-tile {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  outline: none;
  transition: background .2s ease, box-shadow .2s ease;
}
.kit-tile:hover,
.kit-tile:focus-visible {
  background: var(--panel-2);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(245, 134, 32, .34);
}
.kit-tile:focus-visible { box-shadow: 0 0 0 2px var(--or), 0 20px 44px rgba(0, 0, 0, .55); }

.kt-icons { display: flex; gap: 8px; margin-bottom: 16px; }
.kt-cell {
  width: 46px;
  height: 46px;
  background: var(--panel-2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Ячейка осталась 46 px, а картинку внутри распустили почти во всю ширину:
   предмет узнаётся, а ряд из трёх ячеек никуда не поехал. */
.kt-cell img { width: 40px; height: 40px; object-fit: contain; }
.kt-cell img.pix { width: 40px; height: 40px; image-rendering: pixelated; }
.kt-cell img.pix.wide { width: 40px; height: 20px; }

.kit-tile h3 { font-family: var(--f-disp); font-weight: 800; font-size: 18px; }
.kt-sub {
  color: var(--steel);
  font-size: 12.5px;
  line-height: 1.4;
  margin: 4px 0 14px;
  flex: 1;
}
.kt-tiers { display: flex; gap: 6px; }
.kt-chip {
  flex: 1;
  background: var(--panel-2);
  border: 0;
  border-radius: 10px;
  padding: 9px 4px 8px;
  color: var(--muted);
  font-family: var(--f-text);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.kt-chip b {
  display: block;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 1px;
}
.kt-chip:hover { background: var(--panel-3); color: var(--ink); }
.kt-chip:hover b { color: var(--gold); }
.kt-open {
  margin-top: 12px;
  color: var(--steel);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kt-open span { transition: transform .2s ease; }
.kit-tile:hover .kt-open { color: var(--or); }
.kit-tile:hover .kt-open span { transform: translateX(4px); }

/* ---------- наборы мода AEGIS ----------
   Карточки статические: наводить на них нечего, нажимать нечего — поэтому
   ни подъёма, ни подсветки на :hover тут нарочно нет. Живой только ценник,
   и тот считает js/shop.js из data-price и data-v в самой разметке. */

.packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.pack {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
}

.pk-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.pk-head .kt-icons { margin-bottom: 0; flex: 0 0 auto; }
.pk-title .tier {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.pk-title h3 { font-family: var(--f-disp); font-weight: 800; font-size: 21px; margin: 3px 0 6px; }
.pk-sub { color: var(--muted); font-size: 13px; line-height: 1.45; }

.pk-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 15px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.pk-list li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; }
/* 22 px было мало: снаряды и посты в моде — высокие блоки, на такой картинке
   от них оставались цветные полоски и «непонятная текстура». Размер подняли
   до 34 px, а сами иконки пересняли с поднятой камеры (tools\icons_render.py):
   теперь у снаряда видна крышка, по которой он и узнаётся. */
.pk-list li img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 34px; }
.pk-list li img.pix { image-rendering: pixelated; }
/* Замок вместо предмета: модель ещё не показывали. */
img.hid { opacity: .7; }
.pk-list li span { flex: 1; color: var(--muted); line-height: 1.35; }
.pk-list li span b { color: var(--ink); font-weight: 700; }
.pk-list li em {
  font-style: normal;
  flex: 0 0 auto;
  color: var(--steel);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.pk-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pk-foot .valueline { margin: 0; font-size: 12.5px; }
.pk-buy { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.pk-buy .price { font-family: var(--f-disp); font-weight: 800; font-size: 26px; color: var(--gold); line-height: 1; }
.pk-buy .price small { font-size: 14px; color: var(--muted); font-weight: 700; }

.pk-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--steel);
  font-size: 12.5px;
  line-height: 1.55;
}
.pk-note b { color: var(--muted); }

/* ---------- весь арсенал одним заказом ---------- */

.pack-all {
  margin-top: 18px;
  background: var(--panel-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pa-left { flex: 1 1 380px; }
.pack-all h3 {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 23px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pack-all .save {
  font-family: var(--f-text);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .06em;
  background: var(--red-lo);
  color: #fff;
  border-radius: 8px;
  padding: 4px 12px;
}
.pack-all p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 10px 0 14px; max-width: 62ch; }
.pa-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pa-chips span {
  background: var(--panel-3);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  color: var(--muted);
}
.pa-buy { flex: 0 0 auto; text-align: right; }
.pa-buy .old { color: var(--steel); font-size: 12.5px; }
.pa-buy .old b { color: var(--muted); font-weight: 600; text-decoration: line-through; }
.pa-buy .price {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 34px;
  color: var(--gold);
  line-height: 1.05;
  margin: 3px 0 2px;
}
.pa-buy .price small { font-size: 17px; color: var(--muted); }
.pa-sub { color: var(--steel); font-size: 12px; margin-bottom: 14px; }
.pa-sub b { color: var(--muted); font-weight: 600; }

@media (max-width: 1020px) {
  /* тот же случай, что и у .goods: 1fr = minmax(auto, 1fr) и колонка тянулась
     под самый широкий пак (360 px при экране 375) */
  .packs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pack { padding: 20px 18px 16px; }
  .pk-head { gap: 13px; }
  .pk-title h3 { font-size: 19px; }
  .pk-list li { font-size: 13px; }
  .pk-foot { align-items: flex-start; }
  .pk-buy { margin-left: 0; width: 100%; justify-content: space-between; }
  .pack-all { padding: 22px 18px; gap: 20px; }
  .pa-buy { text-align: left; width: 100%; }
  .pa-buy .btn { width: 100%; }
}
@media (max-width: 440px) {
  /* Три значка набора занимают 154 px, и на телефоне заголовку рядом с ними
     оставалось 124 — «ОПОВЕЩЕНИЕ» упиралось в правый край карточки. Ставим
     значки строкой сверху, название под ними во всю ширину: так же устроена
     плитка кита, глазу это привычно. */
  .pk-head { flex-direction: column; gap: 12px; }
  .pk-title { width: 100%; }
}

/* ---------- карточка кита ---------- */

/* Высоту не ограничиваем и внутри не прокручиваем: крестик приклеен к верхнему
   правому углу самой карточки, и при внутренней прокрутке он уезжал вместе с
   содержимым — длинный кит листался, а закрыть его было нечем. Теперь длинную
   карточку целиком прокручивает подложка, крестик остаётся на своём углу. */
.modal-wide { width: min(760px, 100%); }

.km-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding-right: 44px; }
.km-icons { display: flex; gap: 8px; flex: 0 0 auto; }
.km-title .tier {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.km-title h3 { font-size: 23px; margin: 4px 0 2px; }
.km-sub { color: var(--muted); font-size: 13.5px; }
.km-switch { display: flex; width: 100%; margin-bottom: 18px; }
.km-switch button { flex: 1; padding: 11px 8px; }

.km-items { list-style: none; display: grid; gap: 6px; }
.km-items li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: var(--panel-2);
  border-radius: 10px;
  padding: 11px 16px;
}
.ki-what { flex: 1; color: var(--ink); font-size: 14.5px; }
.ki-n { color: var(--gold); font-family: var(--f-disp); font-weight: 700; font-size: 14px; }
.ki-v {
  flex: 0 0 70px;
  text-align: right;
  color: var(--steel);
  font-size: 13px;
}

.km-foot {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.km-value { color: var(--steel); font-size: 13.5px; }
.km-value b { color: var(--muted); font-weight: 600; }
.km-value b:first-of-type { text-decoration: line-through; }
.km-value b:last-of-type { color: var(--gold); text-decoration: none; }
.km-buy { display: flex; align-items: center; gap: 18px; }
.km-buy .price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 30px;
  color: var(--gold);
  white-space: nowrap;
}
.km-buy .price small { font-size: 16px; }
.km-buy .btn { width: auto; }
.km-note { margin-top: 16px; color: var(--steel); font-size: 13px; line-height: 1.5; }

/* ---------- плитка кейса ---------- */

.case-tile {
  position: relative;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
/* Плитка кейса стоит на месте — движется только её содержимое: крышка
   отъезжает, значок подаётся вверх, изнутри бьёт свет. Так отклик заметнее
   прежнего прыжка, а курсор всё это время остаётся на плитке. */
.case-tile:hover,
.case-tile:focus-visible {
  box-shadow: 0 22px 48px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(245, 134, 32, .34);
}
.case-tile:focus-visible { box-shadow: 0 0 0 2px var(--or), 0 22px 48px rgba(0, 0, 0, .6); }
.ct-top { background: linear-gradient(165deg, #2b1c08, var(--panel) 58%); }
.ct-pass { background: linear-gradient(165deg, #1b2430, var(--panel) 58%); }

/* ящик: крышка отъезжает вверх при наведении */
.ct-crate {
  position: relative;
  height: 104px;
  border-radius: 12px;
  margin-bottom: 14px;
  background:
    linear-gradient(180deg, #2c2a30 0%, #232128 44%, #1b1a1f 100%);
  box-shadow: inset 0 0 0 1px #34313a, inset 0 -14px 26px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ct-lid {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34px;
  background: linear-gradient(180deg, #3a3741, #2a2831);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform-origin: 50% 0;
  /* покой записан значением, а не пропуском — см. .shot img: слой крышки
     живёт всё время, и возврат не заканчивается лишней перерисовкой */
  transform: translateY(0);
  will-change: transform;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
  z-index: 3;
}
.ct-lid::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 34px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--grad);
  opacity: .75;
}
.case-tile:hover .ct-lid { transform: translateY(-30px) rotate(-2deg); }
.ct-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(6px);
  will-change: transform;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.ct-icon img { width: 46px; height: 46px; object-fit: contain; }
.ct-icon img.pix { width: 50px; height: 50px; image-rendering: pixelated; }
.ct-icon img.pix.wide { width: 54px; height: 27px; }
.case-tile:hover .ct-icon { transform: translateY(-2px); }
.ct-shine {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 130px;
  transform: translate(-50%, -50%) scale(.6);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 134, 32, .45), transparent 65%);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 1;
}
.case-tile:hover .ct-shine { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ct-top .ct-shine { background: radial-gradient(circle, rgba(250, 212, 107, .5), transparent 65%); }

.case-tile h3 { font-family: var(--f-disp); font-weight: 800; font-size: 17px; }
.ct-sub { color: var(--steel); font-size: 12.5px; line-height: 1.4; margin: 4px 0 12px; flex: 1; }

.ct-strip { display: flex; gap: 5px; margin-bottom: 14px; }
.ct-mini {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-mini img { width: 28px; height: 28px; object-fit: contain; }
.ct-mini img.pix { width: 28px; height: 28px; image-rendering: pixelated; }
.ct-mini img.pix.wide { width: 28px; height: 14px; }

.ct-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ct-price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 22px;
  color: var(--gold);
  white-space: nowrap;
}
.ct-price small { font-size: 13px; }
.ct-free {
  font-size: 12px;
  color: var(--steel);
  background: var(--panel-2);
  border-radius: 7px;
  padding: 4px 10px;
}
.ct-open {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-2);
  border-radius: 9px;
  padding: 8px 14px;
  transition: color .15s, background .15s;
}
.case-tile:hover .ct-open { color: #201305; background: var(--grad); }

/* ---------- карточка кейса ---------- */

.cm-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding-right: 44px; }
.cm-icon {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-icon img { width: 44px; height: 44px; object-fit: contain; }
.cm-icon img.pix { width: 48px; height: 48px; image-rendering: pixelated; }
.cm-icon img.pix.wide { width: 52px; height: 26px; }
.cm-title { flex: 1; }
.cm-title .tier {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.cm-title h3 { font-size: 23px; margin: 4px 0 2px; }
.cm-sub { color: var(--muted); font-size: 13.5px; }
#cmPrice {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 28px;
  color: var(--gold);
  white-space: nowrap;
}
#cmPrice small { font-size: 15px; }

.cm-controls {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--panel-2);
  border-radius: 14px;
  padding: 16px 18px;
}
.cm-row { display: grid; gap: 7px; }
.cm-lbl {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
}
.cm-controls .switch { background: var(--panel); }
.cm-controls .switch button { padding: 9px 15px; font-size: 12px; }
#cmSpin { margin-left: auto; width: auto; }

/* полоса прокрутки */

.cm-reels { display: grid; gap: 8px; margin-top: 16px; }
.cm-reels:empty { margin-top: 0; }
.reel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px #2a2830;
  height: calc(var(--cell) * .86);
  min-height: 44px;
}
.reel::before,
.reel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  z-index: 3;
  pointer-events: none;
}
.reel::before { left: 0; background: linear-gradient(90deg, var(--panel-2), transparent); }
.reel::after { right: 0; background: linear-gradient(270deg, var(--panel-2), transparent); }
.reel-track { display: flex; will-change: transform; height: 100%; }
/* ширина ячейки РОВНО var(--cell) вместе с зазором — иначе накопленный отступ
   уводит выигрышную ячейку мимо метки: скрипт считает шаг именно по --cell.
   Зазор делают прозрачные боковые бордюры при background-clip: padding-box. */
.reel .cell {
  flex: 0 0 var(--cell);
  width: var(--cell);
  height: calc(100% - 8px);
  margin: 4px 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
.reel .cell img {
  width: calc(var(--cell) * .38);
  height: calc(var(--cell) * .38);
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
}
.reel .cell img.pix { image-rendering: pixelated; }
.reel .cell i {
  font-style: normal;
  font-size: clamp(8px, calc(var(--cell) * .105), 12.5px);
  line-height: 1.2;
  text-align: center;
  padding: 0 3px;
  opacity: .85;
  max-height: 2.5em;
  overflow: hidden;
  word-break: break-word;
}
.reel-mark {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--grad);
  box-shadow: 0 0 14px rgba(245, 134, 32, .8);
  z-index: 4;
}
.reel.done .cell.win { box-shadow: inset 0 0 0 2px var(--gold); }

/* результат прокрутки */

.cm-result { display: none; margin-top: 14px; }
.cm-result.on { display: block; }
.cr-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-card {
  flex: 1 1 120px;
  border-radius: 12px;
  padding: 14px 12px 12px;
  text-align: center;
}
.cr-ic { display: block; margin-bottom: 6px; }
.cr-ic img { width: 34px; height: 34px; object-fit: contain; }
.cr-ic img.pix { width: 36px; height: 36px; image-rendering: pixelated; }
.cr-ic img.pix.wide { width: 40px; height: 20px; }
.cr-card b { display: block; font-size: 13.5px; font-weight: 600; }
.cr-card i {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
  margin-top: 3px;
}
.cr-sell {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  background: rgba(0, 0, 0, .28);
  border-radius: 7px;
  padding: 4px 6px;
}
.cr-sum { margin-top: 12px; display: grid; gap: 5px; color: var(--muted); font-size: 14px; }
.cr-sum b { color: var(--gold); }
.cr-shout { color: var(--or); }
.cr-quiet { color: var(--steel); }
.cr-demo { margin-top: 10px; color: var(--steel); font-size: 12.5px; }
.cr-demo code { color: var(--muted); }

/* таблица выпадений */

.cm-drops-h {
  margin: 24px 0 12px;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
}
.cm-drops { list-style: none; display: grid; gap: 6px; }
.cm-drops li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel-2);
  border-radius: 11px;
  padding: 10px 14px;
}
.cd-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-icon img { width: 28px; height: 28px; object-fit: contain; }
.cd-icon img.pix { width: 30px; height: 30px; image-rendering: pixelated; }
.cd-icon img.pix.wide { width: 32px; height: 16px; }
.cd-body { flex: 1; min-width: 0; }
.cd-body b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cd-body i { display: block; font-style: normal; color: var(--steel); font-size: 12.5px; margin-top: 2px; }
.cd-side { flex: 0 0 auto; text-align: right; display: grid; gap: 4px; justify-items: end; }
.cd-side .r {
  min-width: 66px;
  font-family: var(--f-text);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .06em;
  border-radius: 6px;
  text-align: center;
  padding: 3px 8px;
}
/* «Ч» не должна срываться на вторую строку — цена выкупа читается одной строкой */
.cd-sell { color: var(--steel); font-size: 11.5px; white-space: nowrap; }

.cm-notes { margin-top: 18px; display: grid; gap: 8px; }
.cm-notes p { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.cm-notes b { color: var(--gold); }
.cm-foot { margin-top: 18px; }
.cm-foot .btn { width: 100%; justify-content: center; }

/* ---------- правила кейсов ---------- */

.case-rules {
  margin-top: 26px;
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 26px 28px 26px;
}
.cr-h {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 18px;
}
.cr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cr-item { background: var(--panel); border-radius: 14px; padding: 18px 20px 16px; }
.cr-item b { display: block; font-family: var(--f-disp); font-weight: 800; font-size: 15px; color: var(--gold); margin-bottom: 6px; }
.cr-item p { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.cr-item p b { display: inline; font-family: var(--f-text); font-size: inherit; color: var(--ink); font-weight: 600; }

/* ---------- ускорение сервера ---------- */

.boost {
  background: linear-gradient(150deg, #241a0c, var(--panel) 52%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 30px 26px;
  margin-bottom: 22px;
}
.b-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.b-head .icon-plate { margin: 0; flex: 0 0 auto; }
.b-head > div:nth-child(2) { flex: 1; min-width: 220px; }
.b-head .tier {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel);
}
.b-head h3 { font-family: var(--f-disp); font-weight: 900; font-size: 23px; text-transform: uppercase; margin: 4px 0 2px; }
.b-price { text-align: right; }
.b-x {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 42px;
  line-height: 1;
  background: var(--grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.b-min { color: var(--muted); font-size: 13.5px; margin-top: 2px; }

/* Дорожка тонкая, но пальцем ловить надо всю полосу. Раньше сам `input` был
   высотой в дорожку — восемь пикселей, — и попадание чуть выше или ниже
   уходило мимо ползунка, хотя на вид ползунок 24px и промахнуться вроде бы
   негде. На телефоне это читается как «ползунок не берётся». Поэтому поле
   растянуто до 28px и само прозрачно, а полоску рисует дорожка: вид прежний,
   а ловится вся высота (проверено попаданием в 2, 14 и 26px от верха).
   Поля .b-slider уменьшены ровно на те же 20px, чтобы блок не подрос. */
.b-slider { margin: 12px 0 6px; }
.b-slider input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  outline: none;
  cursor: pointer;
}
/* Два одинаковых правила, а не одно через запятую: браузер выбрасывает ВЕСЬ
   набор, если хоть один селектор в списке ему незнаком, — и дорожка пропала бы
   в Chrome из-за соседнего -moz-, а в Firefox из-за -webkit-. */
.b-slider input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 5px;
  background: linear-gradient(90deg, #3a3038, #6a4a1e);
}
.b-slider input[type=range]::-moz-range-track {
  height: 8px;
  border-radius: 5px;
  background: linear-gradient(90deg, #3a3038, #6a4a1e);
}
.b-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grad);
  /* Тень тёмная, а не оранжевая: ползунок должен выступать над дорожкой,
     а не гореть. */
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
  /* (8 − 24) / 2: без этого ползунок сел бы на верх дорожки, а не по центру. */
  margin-top: -8px;
  cursor: pointer;
}
.b-slider input[type=range]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
  cursor: pointer;
}
/* Пальцем целятся хуже, чем мышью: на сенсорном экране растягиваем поле до 40px
   и ровно на столько же поджимаем поля блока — вид не меняется (полоску рисует
   дорожка, само поле прозрачное), а ловится вся высота. */
@media (pointer: coarse) {
  .b-slider { margin: 6px 0 0; }
  .b-slider input[type=range] { height: 40px; }
}
.b-marks { display: flex; gap: 4px; margin-top: 10px; }
.b-marks button {
  flex: 1;
  background: var(--panel-2);
  border: 0;
  border-radius: 9px;
  padding: 8px 2px;
  color: var(--muted);
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.b-marks button:hover { color: var(--ink); background: var(--panel-3); }
.b-marks button.on { color: #201305; background: var(--grad); }
@media (max-width: 760px) {
  /* Метки множителя ловили палец в 31 px, а стоят они вплотную друг к другу:
     промах попадал в соседнюю ставку и молча менял цену. Высота 39 px, вид
     тот же. */
  .b-marks button { padding: 12px 2px; }
}

.b-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.b-foot p { color: var(--muted); font-size: 14px; max-width: 720px; line-height: 1.55; }
.b-foot p b { color: var(--ink); }
.b-buy { display: flex; align-items: center; gap: 18px; }
.b-buy .price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 30px;
  color: var(--gold);
  white-space: nowrap;
}
.b-buy .price small { font-size: 16px; }

/* ---------- поштучные: мелочи ---------- */

.good-new { background: linear-gradient(160deg, #1e2430, var(--panel) 60%); }
.g-note { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: -4px; }
.g-head h3 code {
  font-family: var(--f-text);
  font-size: 15px;
  color: var(--gold);
  background: transparent;
  padding: 0;
}

/* ---------- очередь приоритета ---------- */

.prio {
  margin-top: 26px;
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
}
.prio-h {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 18px;
}
.prio-list { list-style: none; display: grid; gap: 7px; counter-reset: none; }
.prio-list li {
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: center;
  gap: 8px 18px;
  background: var(--panel);
  border-radius: 11px;
  padding: 12px 18px;
}
.p-n {
  grid-row: span 2;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
  background: var(--panel-2);
  border-radius: 8px;
  padding: 7px 4px;
  text-align: center;
}
.prio-list li b { font-size: 15px; font-weight: 600; color: var(--ink); }
.prio-list li i {
  font-style: normal;
  color: var(--steel);
  font-size: 12.5px;
  margin-top: -4px;
}
.p-adm { background: linear-gradient(120deg, #2b1c08, var(--panel) 45%); }
.p-adm .p-n { color: #201305; background: var(--grad); }
.prio-note { margin-top: 16px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.prio-note b { color: var(--gold); }

/* ---------- модалка: подпись «если есть» ---------- */

.m-opt {
  font-family: var(--f-text);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--steel);
}

/* ---------- если система просит меньше движения ---------- */

@media (prefers-reduced-motion: reduce) {
  /* Человек попросил систему не двигать картинку — значит не двигаем ничего:
     ни героя, ни плавную прокрутку, ни выезд блоков. */
  html { scroll-behavior: auto; }
  .mc-char, .head-sway, .arm-wave { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .kit-tile, .case-tile, .good, .rank, .bundle, .card {
    transition: none;
  }
  /* Подсветка кромки остаётся — она не движение, а цвет; убираем только то,
     что едет: прочерк линии, крышку ящика, зум картинки. */
  .card::before { transition: none; transform: scaleX(1); opacity: 0; }
  .card:hover::before, .card:focus-within::before { opacity: 1; }
  .card:hover .shot img { transform: none; }
  .ct-lid, .ct-icon, .ct-shine { transition: none; }
  .case-tile:hover .ct-lid { transform: none; }
  .stat .num { transition: none; }
  /* Меню на узком экране не выезжает, а просто появляется: visibility при этом
     переключается сразу, без ожидания конца перехода. */
  .topnav { transition: none; }
  /* Черта над разделом и полоска под номером шага рисуются сразу целиком. */
  .section-head.reveal::before,
  .step.reveal .n::after { transform: none; transition: none; }
  .reel-track { transition-duration: .4s !important; }
}

/* ---------- адаптив лавки 3.0 ---------- */

@media (max-width: 1100px) {
  .promo-grid { grid-template-columns: 1fr; }
  .rk-grid, .tasks-grid { grid-template-columns: repeat(2, 1fr); }
  .cr-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .ci-grid { grid-template-columns: 1fr; }
  .b-price { text-align: left; }
  .b-marks { flex-wrap: wrap; }
  .b-marks button { flex: 1 1 22%; }
  #cmSpin { margin-left: 0; width: 100%; }
  .cm-controls { flex-direction: column; align-items: stretch; }
}

/* ============================ регистрация (reg.html) ============================
   Слева — короткая форма, справа — объяснение, почему проверка именно такая.
   Тот же тёмный набор и один оранжевый акцент, никаких новых шрифтов. */

.reg-sec { padding: 10px 0 80px; }
.reg-wrap {
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.reg-card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  position: sticky;
  top: 92px;
}

/* важное: один аккаунт на человека */
.reg-hard {
  display: flex;
  gap: 14px;
  background: rgba(245, 134, 32, .09);
  border-left: 3px solid var(--or);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.reg-hard .mark {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--or);
  color: #14100b;
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Первая строка блока — заголовок предупреждения, он и стоит отдельной строкой.
   Остальные выделения живут внутри предложения: пока блочными были ВСЕ <b>,
   фраза разрывалась и следующая строка начиналась с запятой. */
.reg-hard b { color: var(--or); }
.reg-hard > div > b:first-child { display: block; margin-bottom: 4px; }

.reg-form label {
  display: block;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.reg-form input[type="text"],
.reg-form input[type="password"] {
  width: 100%;
  background: var(--panel-2);
  border: none;
  outline: none;
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16.5px;
  padding: 13px 16px;
}
.reg-form input[type="text"]:focus,
.reg-form input[type="password"]:focus {
  background: var(--panel-3);
  box-shadow: inset 0 0 0 2px rgba(245, 134, 32, .5);
}
.reg-hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0 18px;
}
.reg-form input + label { margin-top: 0; }

/* выбор службы проверки */
.reg-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-pick button {
  text-align: left;
  background: var(--panel-2);
  border: none;
  border-radius: 12px;
  padding: 13px 15px;
  color: var(--ink);
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}
.reg-pick button b {
  display: block;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 3px;
}
.reg-pick button span { display: block; color: var(--muted); font-size: 12.5px; }
.reg-pick button:hover:not([disabled]) { background: var(--panel-3); }
.reg-pick button.on { background: var(--panel-3); box-shadow: inset 0 0 0 2px var(--or); }
.reg-pick button.on b { color: var(--or); }
.reg-pick button[disabled] { opacity: .45; cursor: default; }
/* проверка разработчика: её видно только на этой машине, зато во всю ширину */
.reg-pick button[data-p="local"] { grid-column: 1 / -1; }

/* согласия */
.reg-check {
  display: flex !important;
  gap: 11px;
  align-items: flex-start;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: var(--f-text) !important;
  font-weight: 400 !important;
  font-size: 13.5px !important;
  line-height: 1.5;
  color: var(--muted) !important;
  margin-bottom: 12px !important;
  cursor: pointer;
}
.reg-check input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--or);
  cursor: pointer;
}

.reg-go { width: 100%; justify-content: center; margin-top: 10px; }
.reg-go.is-wait { opacity: .6; cursor: default; }
.reg-go[disabled] {
  background: var(--panel-3);
  color: var(--muted);
  cursor: default;
  box-shadow: none;
  transform: none;
}
.reg-say {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  background: var(--panel-2);
  border-radius: 10px;
  padding: 12px 14px;
}
.reg-say.is-bad { color: #dd7f68; }
.reg-say.is-good { color: #93bf7c; }

/* объяснение: почему именно так */
.reg-side { display: grid; gap: 18px; }
.reg-why {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 24px 26px 20px;
}
/* Здесь и ниже у .pf-view-say заголовок стал h2 вместо h3, а у .cab-why — h3
   вместо h4. Размер и начертание те же: правка не про вид, а про порядок
   заголовков. На странице стояли h1 и сразу h3 — экранный диктор читает такой
   разрыв как «пропущен уровень», и список заголовков, по которому незрячий
   ходит вместо прокрутки, разваливается. */
.reg-why h2 {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 19px;
  margin: 0 0 12px;
}
.reg-why p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; }
.reg-why p:last-child { margin-bottom: 4px; }
.reg-why b { color: var(--ink); }
/* Нумерованный список появился вместе с шагами привязки Discord: без своей
   строки он брал отступ браузера (40px) и висел правее соседнего маркированного. */
.reg-why ul, .reg-why ol { margin: 0 0 12px; padding-left: 20px; }
.reg-why ol { padding-left: 22px; }
.reg-why li { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-bottom: 6px; }
.reg-why li::marker { color: var(--or); }
.reg-why .reg-note {
  background: var(--panel-2);
  border-left: 2px solid rgba(245, 134, 32, .5);
  border-radius: 10px;
  padding: 13px 15px;
  margin-top: 16px;
}

@media (max-width: 1000px) {
  /* minmax(0,1fr), а не 1fr: у колонки «1fr» нижняя граница — min-content,
     и один широкий потомок (кнопка в одну строку) растягивал всю страницу. */
  .reg-wrap { grid-template-columns: minmax(0, 1fr); }
  .reg-card { position: static; }
}
@media (max-width: 640px) {
  .reg-card, .reg-why { padding: 20px 18px; }
  .reg-pick { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .rk-grid, .tasks-grid, .cr-grid { grid-template-columns: 1fr; }
  .kits, .cases { grid-template-columns: 1fr; }
  .promo-card { grid-template-columns: 1fr; gap: 14px; }
  .prio-list li { grid-template-columns: 1fr; }
  .p-n { grid-row: auto; justify-self: start; padding: 5px 12px; }
  .km-foot, .b-foot { flex-direction: column; align-items: stretch; }
  .km-buy, .b-buy { justify-content: space-between; }
  .modal-wide { padding: 28px 20px 24px; }
  .km-head, .cm-head { flex-wrap: wrap; gap: 12px; }
}

/* ========================= профиль: скин (profile.html) =========================
   Живёт на разметке страницы регистрации: та же карточка слева, объяснения справа.
   Новое здесь только две вещи — место, куда кладут png, и предпросмотр игрока. */

.pf-drop {
  background: var(--panel-2);
  border-radius: 12px;
  padding: 18px 18px 16px;
  text-align: center;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}
.pf-drop b {
  display: block;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
  word-break: break-all;
}
.pf-drop span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.pf-drop:hover { background: var(--panel-3); }
.pf-drop.is-over { background: var(--panel-3); box-shadow: inset 0 0 0 2px var(--or); }
.pf-drop.is-set { box-shadow: inset 0 0 0 2px rgba(245, 134, 32, .55); }
.pf-drop.is-set b { color: var(--or); }
.pf-drop.is-off { opacity: .45; cursor: default; }

/* снять скин: действие обратное главной кнопке, поэтому и выглядит тише */
.pf-drop-off {
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--f-text);
  font-size: 13.5px;
  padding: 8px 0;
  cursor: pointer;
  transition: color .16s ease;
}
.pf-drop-off:hover:not([disabled]) { color: #dd7f68; }
.pf-drop-off[disabled] { opacity: .45; cursor: default; }
/* Пальцем: 32px на строку мало, добираем полями до 36. Вид тот же. */
@media (pointer: coarse) { .pf-drop-off { padding: 10px 0; } }

/* предпросмотр: игрок спереди прямо из текстуры скина */
.pf-view {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.pf-view-in {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.pf-view canvas {
  display: block;
  width: 128px;
  height: 256px;
  background: var(--panel-2);
  border-radius: 12px;
  image-rendering: pixelated;
}
.pf-view-say h2 {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 19px;
  margin: 0 0 10px;
}
.pf-view-say p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0; }

@media (max-width: 640px) {
  .pf-view { padding: 20px 18px; }
  .pf-view-in { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .pf-view-say { text-align: center; }
}


/* ---------- апелляция и амнистия ----------
   Бесплатный путь стоит первым и набран крупнее платного. Это не вкусовщина:
   разбор ошибки модерации ничего не стоит по правилам, деньгами закрывается
   только лёгкий срок, и порядок блоков обязан читаться так же. */

.amn-free {
  background: linear-gradient(150deg, #2b1c08, var(--panel) 60%);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.amn-free-txt { flex: 1 1 520px; }
.amn-free h3 {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 24px;
  margin: 4px 0 10px;
  text-transform: uppercase;
}
.amn-free p { color: var(--muted); font-size: 14.5px; line-height: 1.65; max-width: 720px; }
.amn-free p b { color: var(--ink); }
.amn-back { margin-top: 10px; }
.amn-back b { color: var(--gold); }

.amn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.amn {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.amn-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.amn-h h3 { font-family: var(--f-disp); font-weight: 800; font-size: 17.5px; margin-top: 3px; }
.amn-h .price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 22px;
  color: var(--gold);
  white-space: nowrap;
  text-align: right;
}
.amn-h .price small { font-size: 13px; }
.amn p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.amn-no { list-style: none; display: grid; gap: 6px; }
.amn-no li { color: var(--steel); font-size: 13px; line-height: 1.5; padding-left: 18px; position: relative; }
.amn-no li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 2px;
  background: var(--steel);
}
/* кнопка прижата к низу карточки: текста в карточках разное количество,
   а ряд кнопок должен стоять на одной линии */
.amn > .btn { align-self: flex-start; margin-top: auto; }

/* третья карточка не товар, а условие — поэтому тише и без ценника деньгами */
.amn-rule { background: var(--panel-2); }
.amn-rule .price { color: var(--steel); }
.amn-where { color: var(--steel) !important; font-size: 13px !important; }

.amn-note { margin-top: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.amn-note b { color: var(--gold); }

@media (max-width: 1100px) {
  .amn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .amn-grid { grid-template-columns: 1fr; }
  .amn-free { padding: 24px 22px; }
  .amn-free .btn { width: 100%; text-align: center; }
}

/* ======================= РАНЦЫ =======================
   Ярусов шесть, а модель ранца в моде одна: ярус там отличается только цветом
   застёжки — полоска в три пикселя, которой в кадре предмета и не видно.
   Поэтому шести одинаковых картинок тут нет: ранец нарисован один раз крупно,
   а ярус читается числом ячеек и своим цветом строки (--t) — тем самым,
   что стоит у застёжки этого яруса в текстуре мода. */
.bags-hero {
  display: flex;
  align-items: center;
  gap: 34px;
  background: linear-gradient(120deg, #241a14, var(--panel) 62%);
  border-radius: var(--radius);
  padding: 30px 34px;
  box-shadow: var(--shadow);
  margin-bottom: 26px;
}
.bh-art {
  flex: 0 0 auto;
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(245, 134, 32, .18), transparent 68%);
}
.bh-art img { width: 132px; height: 132px; object-fit: contain; }
.bh-rules { flex: 1; display: grid; gap: 14px; }
.bh-rule { padding-left: 16px; position: relative; }
.bh-rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--grad);
}
.bh-rule b {
  display: block;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 15.5px;
  margin-bottom: 3px;
}
.bh-rule span { color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.bag-ladder { list-style: none; display: grid; gap: 10px; }
.bag-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 96px 96px 104px auto;
  align-items: center;
  gap: 18px;
  background: var(--panel);
  border-radius: 14px;
  padding: 16px 20px 16px 0;
  box-shadow: inset 4px 0 0 var(--t);
}
.bg-n {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 22px;
  color: var(--t);
  text-align: center;
  line-height: 1;
}
.bg-name h3 { font-family: var(--f-disp); font-weight: 800; font-size: 18px; }
.bg-name p { color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 3px; }
.bg-num { text-align: right; }
.bg-num b {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
}
.bg-num span { display: block; color: var(--steel); font-size: 12px; margin-top: 2px; }
.bag-row .price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 24px;
  color: var(--gold);
  text-align: right;
  line-height: 1;
}
.bag-row .price small { font-size: 13px; color: var(--muted); }

.bag-up { margin-top: 16px; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.bag-up b { color: var(--ink); }

/* два столбца модулей: что открывается и чего на сервере не будет.
   align-items:start — в правой колонке вдвое меньше строк, и если тянуть
   карточки на одну высоту, под запретами висит пустая панель в треть экрана */
.mods-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; align-items: start; }
.mod-col {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow);
}
.mod-col > .tier {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
}
.mod-col.no > .tier { color: var(--steel); }
.mod-col h3 { font-family: var(--f-disp); font-weight: 800; font-size: 21px; margin: 5px 0 6px; }
.mod-col > p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 18px; }
.mod-list { list-style: none; display: grid; gap: 13px; }
.mod-list li { display: flex; gap: 12px; align-items: flex-start; }
.mod-list img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  object-fit: contain;
  image-rendering: pixelated;
  background: var(--panel-3);
  border-radius: 8px;
  padding: 3px;
}
.mod-list div { min-width: 0; }
.mod-list b { font-size: 14px; font-weight: 700; }
.mod-list span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: 2px; }
.mod-col.no .mod-list img { filter: grayscale(1) brightness(.72); }
.mod-col.no .mod-list b { color: var(--steel); text-decoration: line-through; }

@media (max-width: 1040px) {
  .mods-two { grid-template-columns: 1fr; }
  /* ярус и название в строке, числа и цена — вторым рядом: так ничего
     не приходится ужимать до нечитаемого */
  .bag-row {
    grid-template-columns: 44px auto minmax(0, 1fr) auto;
    row-gap: 14px;
    padding: 16px 18px 16px 0;
  }
  .bg-name { grid-column: 2 / -1; }
  .bg-num { grid-column: auto; text-align: left; }
  /* первый .bg-num — это третий ребёнок строки (ярус, название, ячейки…);
     nth-of-type здесь не годится: он считает все div, а первый div — ярус */
  .bag-row > .bg-num:nth-child(3) { grid-column: 2; }
  .bag-row .price { text-align: right; }
  .bag-row .btn { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 640px) {
  .bags-hero { flex-direction: column; padding: 26px 22px; gap: 22px; }
  .bh-art { width: 112px; height: 112px; }
  .bh-art img { width: 104px; height: 104px; }
  .bag-row { grid-template-columns: 38px auto minmax(0, 1fr) auto; gap: 12px 12px; padding-left: 0; }
  .bag-row .btn { width: 100%; text-align: center; justify-self: stretch; justify-content: center; }
  .mod-col { padding: 22px 20px; }
}


/* ============================================================
   ПОДДЕРЖАТЬ ПРОЕКТ (donate.html, раздел без товара)
   Та же посуда, что у лавки: тёмная плита, кнопки-фишки .switch,
   крупный ценник. Отличие одно — число в ценнике задаёт человек.
   ============================================================ */

.sup {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 30px 32px;
  box-shadow: var(--shadow);
}
.sup-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.sup .switch { flex: 1 1 auto; }
.sup-own { flex: 0 1 190px; }
.sup-own label {
  display: block;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
/* Знак валюты — не внутри поля, а рядом с ним в общей рамке: так он не
   уезжает вместе с набранным числом и его нельзя стереть. */
.sup-in {
  display: flex;
  align-items: center;
  background: var(--panel-2);
  border-radius: 10px;
}
.sup-in:focus-within {
  background: var(--panel-3);
  box-shadow: inset 0 0 0 2px rgba(245, 134, 32, .5);
}
.sup-in input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 16.5px;
  padding: 13px 4px 13px 16px;
}
/* Стрелки-крутилки у числового поля: мелкие, попасть пальцем нечем, а
   ширину отъедают. Сумму и так набирают с клавиатуры или берут фишкой. */
.sup-in input::-webkit-outer-spin-button,
.sup-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sup-in input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.sup-in span {
  padding: 0 16px 0 2px;
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
}

.sup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.sup-foot .price {
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: 34px;
  line-height: 1.05;
  color: var(--gold);
}
.sup-foot .price small { font-size: 17px; color: var(--muted); }

.sup-note {
  margin-top: 16px;
  color: var(--steel);
  font-size: 13px;
  line-height: 1.6;
}
.sup-note b { color: var(--muted); }

@media (max-width: 640px) {
  .sup { padding: 24px 20px; }
  /* Столбиком: фишки во всю ширину, своё поле под ними. Строкой поле
     ужималось до 90 пикселей, и «1000» в нём уже не помещалось целиком. */
  .sup-row { flex-direction: column; align-items: stretch; gap: 18px; }
  .sup-own { flex: 1 1 auto; }
  /* Пять сумм в ряд на телефоне: при общих полях «1000 ₽» переносилось на
     вторую строку, и фишка вырастала вдвое против соседних. Поджимаем поля
     и запрещаем перенос — ряд остаётся ровным. */
  .sup .switch { gap: 3px; }
  .sup .switch button { padding: 11px 4px; font-size: 12.5px; white-space: nowrap; }
  .sup-foot { gap: 16px; }
  .sup-foot .btn { width: 100%; justify-content: center; }
}

/* ---------- чеки заказов ----------
   Список живёт в браузере игрока (localStorage) и появляется только когда
   в нём что-то есть: пустая плашка «чеков нет» никому не нужна. Это
   единственная бумажка, с которой можно прийти в обращения, если ошибся
   ником, — поэтому номер заказа тут крупнее всего остального. */

.rcpts {
  margin-top: 26px;
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
}
.rcpts-h { margin-bottom: 16px; }
.rcpts-h h3 { font-size: 19px; }
.rcpts-h span {
  display: block;
  margin-top: 4px;
  color: var(--steel);
  font-size: 13px;
}
.rcpts-list { display: grid; gap: 12px; }

.rcpt {
  background: var(--panel);
  border-radius: 14px;
  padding: 16px 18px 14px;
}
.rcpt-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.rcpt-top b { font-family: var(--f-disp); font-weight: 700; font-size: 15px; }
.rcpt-sum {
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 17px;
  color: var(--gold);
  white-space: nowrap;
}
/* Номер заказа читают вслух в тикете и перепечатывают руками — моноширинный
   шрифт и разрядка тут не украшение, а защита от «ноль или буква О». */
.rcpt-meta {
  margin-top: 6px;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--muted);
  word-break: break-word;
}
.rcpt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.rcpt-st {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 5px 10px;
  background: var(--panel-3);
  color: var(--muted);
}
.rcpt-st.is-paid { background: rgba(250, 212, 107, .14); color: var(--gold); }
.rcpt-st.is-failed { background: rgba(224, 49, 49, .16); color: #f08a8a; }

.rcpt-copy {
  background: var(--panel-3);
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.rcpt-copy:hover { background: var(--or); color: #201305; }
.rcpt-copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Запасной путь: если в браузере нет доступа к буферу, скрипт показывает сам
   текст чека и выделяет его — копировать руками неудобно, но возможно. */
.rcpt-text {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--panel-3);
  border-radius: 10px;
  color: var(--muted);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.rcpts-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--steel);
  font-size: 13px;
  line-height: 1.6;
}
.rcpts-note a { color: var(--gold); }

/* В окне заказа кнопок теперь две: «Оплатить» и «Скопировать чек». Вторая
   появляется по ходу дела, поэтому отступ вешаем на саму пару, а не на
   кнопку — иначе он остаётся висеть, пока чека ещё нет. */
.modal .btn + .btn { margin-top: 10px; }

@media (max-width: 640px) {
  .rcpts { padding: 22px 20px 20px; }
  .rcpt-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .rcpt-st { text-align: center; }
  .rcpt-copy { width: 100%; }
}

/* ======================= ЛАВКА ЗАКРЫТА =======================
   Флаг стоит в js/config.js (shopClosed), класс на <html> вешает строка
   в голове donate.html — до первой отрисовки, иначе ценники мигают.
   Здесь только «что спрятать»; ценники, которые лавка рисует сама, и подписи
   кнопок — в js/shop-closed.js.

   Правило простое: уходит всё, где названа сумма деньгами. Проценты («−29%»,
   «выгода 61%») сами по себе остаются — это разница, а не цена; уходят они
   только там, где стоят в одной строке с рублями (.valueline).

   Пары «открыто / закрыто» сделаны наоборот, через :not(): у .shut-only
   и .price-off нет своего display, они просто прячутся, пока лавка работает.
   Так их нормальный вид не надо угадывать и потом чинить. */
html.shop-closed .price:not([data-no-rub]),
html.shop-closed .valueline,
html.shop-closed .km-value,
html.shop-closed .pa-sub,
html.shop-closed .pk-list em,
html.shop-closed .old,
html.shop-closed .pc-code,
html.shop-closed .ct-price,
html.shop-closed .ki-v,
html.shop-closed .m-alt,
html.shop-closed .cur-pick,
html.shop-closed .sup,
html.shop-closed .sup-note,
html.shop-closed .rub { display: none !important; }

html:not(.shop-closed) .shut-only,
html:not(.shop-closed) .price-off { display: none !important; }

/* Вместо ценника — короткая строка того же места, чтобы карточка не выглядела
   сломанной и не приходилось гадать, потерялась цена или её пока нет. */
.price-off {
  color: var(--steel);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Кнопка, которая никуда не ведёт, и выглядеть должна так же: без заливки
   акцентом, без курсора-руки и без реакции на наведение.

   Правило нарочно без «html.shop-closed» впереди: закрытая дверь бывает не
   только в лавке — этим же видом помечена загрузка лаунчера на главной, а
   класса shop-closed там нет и быть не должно. Ничего лишнего это не красит:
   .btn-off ставится только руками и только там, где закрыто. */
.btn-off,
.btn-off:hover,
.btn-off:focus {
  background: rgba(255, 255, 255, .04);
  color: var(--steel);
  cursor: default;
  box-shadow: none;
  transform: none;
}
/* Заодно снимаем с неё слой наведения оранжевых кнопок — он лежит отдельной
   картинкой и заливку rgba выше не спрашивает. */
.btn-off::after { content: none; }

/* Кейс при закрытой лавке: смотреть можно всё, крутить нельзя. «Сколько
   крутить» и «Анимация» настраивают именно прокрутку — пока её нет, они
   только обманывают, поэтому уходят вместе с ней, а на их место встаёт
   строка .cm-shut. Кнопка прокрутки остаётся видимой, но выключенной: так
   сразу понятно, что это не поломка, а закрытая дверь. */
html.shop-closed .cm-controls .cm-row { display: none; }
html.shop-closed #cmSpin { margin-left: 0; }
.cm-shut {
  /* Основа именно auto. Стояло 220px — и на узком экране это выходило боком:
     ниже 900 px .cm-controls разворачивается в столбец, а основа в столбце —
     это ВЫСОТА. Строка в три строчки распирала панель до 220 px, и между ней
     и кнопкой зияла пустота. */
  flex: 1 1 auto;
  min-width: 200px;
  color: var(--steel);
  font-size: 13px;
  line-height: 1.5;
}