/* ============================================================
   LUCKYBOX - оформление
   Яркая неоново-фантазийная тема: розовый, фуксия, фиолетовый.
   Mobile-first, крупные элементы - сайт чаще открывают с телефона.
   ============================================================ */

/*
 * Палитра приглушённая намеренно.
 *
 * Раньше здесь стояли чистые неоновые тона (#ff2e8a, #00f0ff, #00ff9d) - те
 * самые, что светятся в темноте. Вместе со свечениями они давали ощущение
 * дешёвой вывески: глазу не за что зацепиться, потому что кричит всё сразу.
 * Тона сдвинуты к более спокойным и чуть более серым, фон - к нейтральному
 * тёмно-фиолетовому. Строй остался тот же, громкость убавлена.
 */
:root {
  /* Фон и поверхности */
  --bg: #120a1c;
  --bg-soft: #1b1229;
  --card: #241a36;
  --card-hi: #302543;
  --line: #40325c;
  --text: #f1ebf7;
  --muted: #a698c0;

  /* Акценты */
  --pink: #e0518c;
  --magenta: #cc59ab;
  --violet: #9366d0;
  --purple: #7d5cc2;
  --red: #d95a68;
  --orange: #d98a5c;
  --gold: #dfbe62;
  --cyan: #6bbdcc;
  --green: #63bf94;

  /* Редкости */
  --t-common: #948aa6;
  --t-uncommon: #5fb2cc;
  --t-rare: #9d76d4;
  --t-epic: #e0518c;
  --t-legendary: #d95a68;
  --t-mythic: #d98f4d;
  --t-unique: #dfbe62;

  --radius: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Элементы с display:flex/grid игнорируют атрибут hidden - без этого правила
   скрытые оверлеи остаются на экране и перехватывают все нажатия. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior: none;
  font-size: 17px;
}

/* Отступ снизу был рассчитан на нижнюю панель навигации. Панель убрана, и
   отступ остался пустой полосой в 84 пикселя под каждым экраном. */
body {
  min-height: 100vh;
  padding-bottom: calc(12px + var(--safe-bottom));
  overflow-x: hidden;
}

/* ---------- Фоновая атмосфера ---------- */

.bg-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
/* Прозрачность втрое ниже прежней: пятна должны давать глубину фону, а не
   подсвечивать интерфейс снизу. */
.bg-glow-1 { width: 380px; height: 380px; background: var(--magenta); top: -140px; left: -110px; opacity: 0.14; }
.bg-glow-2 { width: 340px; height: 340px; background: var(--violet); top: 38%; right: -140px; opacity: 0.12; }
.bg-glow-3 { width: 320px; height: 320px; background: var(--pink); bottom: -120px; left: -80px; opacity: 0.1; }

/* Падающие символы валюты - чистая декорация */
.money-rain { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }

.money-drop {
  position: absolute;
  top: -40px;
  font-size: 22px;
  opacity: 0.16;
  animation: fall linear infinite;
  filter: drop-shadow(0 0 8px -6px var(--gold));
}
@keyframes fall {
  0%   { transform: translateY(-40px) rotate(0deg); }
  100% { transform: translateY(105vh) rotate(360deg); }
}

/* ---------- Шапка ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  background: rgba(13, 3, 24, 0.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

/* Логотип теперь картинка и одновременно кнопка «на главную». Ни фона, ни
   рамки у кнопки нет: видимая кнопка вокруг логотипа выглядела бы ошибкой
   вёрстки, а нажимаемость показывает курсор и отклик на нажатие. */
.brand {
  display: flex; align-items: center;
  min-width: 0;
  padding: 0; border: none; background: none;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.brand:active { transform: scale(0.96); }
.brand-logo {
  display: block;
  /* Подписи «Кейсы и игры» в картинке больше нет, и знак чуть крупнее. */
  height: 37px; width: auto;
  /* Логотип нарисован для тёмного фона, подложка ему не нужна. */
  object-fit: contain;
}

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

   Кнопкой элемент остался: нажатие ведёт в кассу, и отнимать этот путь у тех,
   кто к нему привык, незачем. Видимой кнопкой он быть перестал. */
.balance-chip {
  display: flex; align-items: center;
  padding: 6px 2px;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--text);
  transition: transform 0.25s;
  min-width: 0;
}
.balance-chip.bump { transform: scale(1.12); }
.balance-value {
  font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}
/* Знак рубля тяжелее самой суммы: цифры набраны обычным начертанием, и без
   этого рубль терялся хвостиком в конце строки. */
.balance-value .rub { font-weight: 900; }

/* ---------- Общее ---------- */

main { position: relative; z-index: 2; padding: 18px; }

/*
 * Экран кейса лежит внутри <main>, а у <main> свой z-index - то есть свой
 * слой. Внутри этого слоя экран кейса не может подняться выше липкой шапки,
 * которая лежит слоем выше: на телефоне шапка накрывала кнопку возврата.
 * Поэтому на время открытого кейса поднимается сам <main>.
 *
 * На компьютере наоборот: там кейс - обычная часть страницы, и шапка обязана
 * оставаться сверху, поэтому правило ограничено телефоном.
 */
@media (max-width: 1023px) {
  body.case-open main { z-index: 40; }
}

.view { display: none; animation: fade 0.28s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.notice {
  font-size: 13px;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
  margin-top: 20px;
  line-height: 1.5;
}

.section-title { font-size: 20px; font-weight: 900; margin: 24px 0 14px; }

.game-head { text-align: center; margin-bottom: 18px; }

.game-title {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 3px;
  margin: 0;
  background: linear-gradient(90deg, var(--cyan), var(--pink), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 46, 138, 0.5));
}
.game-sub { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; }

/* ---------- Бонус ---------- */

.bonus-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 214, 10, 0.24), rgba(255, 107, 53, 0.14));
  border: 2px solid var(--gold);
  box-shadow: 0 0 26px rgba(255, 214, 10, 0.11);
}
.bonus-text { flex: 1; font-size: 13px; line-height: 1.45; }
.bonus-text strong { display: block; font-size: 15px; margin-bottom: 3px; color: var(--gold); }
.bonus-text span { color: var(--muted); }

/* ---------- Вкладки категорий ---------- */

.tabs {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 20px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

/* Размер подобран так, чтобы четвёртая вкладка выглядывала за краем - иначе
   прокрутка ничем себя не выдаёт и категорию «Риск» просто не находят. */
.tab {
  flex: 0 0 auto;
  padding: 12px 17px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}
.tab.active {
  background: linear-gradient(135deg, var(--pink), var(--violet));
  border-color: var(--magenta);
  color: #fff;
  box-shadow: 0 6px 24px rgba(255, 46, 138, 0.22);
  transform: scale(1.04);
}

/* ---------- Обложки кейсов ---------- */

.case-grid { display: flex; flex-direction: column; gap: 18px; }

.case-card {
  position: relative;
  min-height: 210px;
  padding: 22px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 78% 18%, var(--cat-color) 0%, transparent 58%),
    linear-gradient(150deg, var(--card-hi), var(--card));
  border: 2px solid var(--cat-color);
  box-shadow: 0 10px 40px -8px var(--cat-color);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.case-card:active { transform: scale(0.97); }

/* Блик, пробегающий по обложке */
.case-card::after {
  content: '';
  position: absolute;
  top: -60%; left: -60%;
  width: 45%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: rotate(22deg);
  /* Едет transform, а не left: left перерисовывал обложку каждый кадр, и
     полка из шестидесяти кейсов грузила телефон, даже пока на неё никто не
     смотрит. Путь тот же: от -60% до 130% ширины карточки, в долях самого
     блика (45%) это 190 / 45 = 422%. */
  animation: shine 4.5s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes shine {
  0%, 65% { transform: translateX(0) rotate(22deg); }
  100%    { transform: translateX(422%) rotate(22deg); }
}

.case-top { display: flex; align-items: flex-start; gap: 16px; position: relative; z-index: 2; }

.case-art {
  position: relative;
  width: 96px; height: 96px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.case-box {
  font-size: 58px;
  animation: float 3.2s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-9px) rotate(4deg); }
}

/* Символы валюты, вращающиеся вокруг обложки */
.case-orbit {
  position: absolute;
  inset: -8px;
  animation: spin 9s linear infinite;
  pointer-events: none;
}
.case-orbit span {
  position: absolute;
  font-size: 19px;
  font-weight: 900;
  color: var(--gold);
  animation: spin 9s linear infinite reverse;
}
.case-orbit span:nth-child(1) { top: 0;    left: 50%; margin-left: -8px; }
.case-orbit span:nth-child(2) { bottom: 0; left: 50%; margin-left: -8px; }
.case-orbit span:nth-child(3) { left: 0;   top: 50%;  margin-top: -11px; }
.case-orbit span:nth-child(4) { right: 0;  top: 50%;  margin-top: -11px; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.case-info { flex: 1; min-width: 0; padding-top: 6px; }

.case-name {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 6px;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
}
.case-tagline { font-size: 13.5px; color: var(--muted); line-height: 1.35; }

.case-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  position: relative; z-index: 2;
  margin-top: 18px;
}

.case-price-tag {
  display: flex; align-items: baseline; gap: 6px;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #2a1400;
  box-shadow: 0 6px 22px rgba(255, 214, 10, 0.2);
}
.case-price-tag b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.case-price-tag i { font-style: normal; font-size: 12px; font-weight: 800; opacity: 0.8; }

.case-stats { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.case-stat {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
}
.case-stat b { color: var(--cyan); }
.case-stat.max b { color: var(--gold); }

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

.btn {
  border: none;
  border-radius: 16px;
  padding: 15px 22px;
  font-size: 16px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
  background: var(--card-hi);
  color: var(--text);
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #fff;
  box-shadow: 0 8px 26px rgba(255, 46, 138, 0.2);
}
.btn-outline { background: transparent; border: 2px solid var(--line); color: var(--text); }
.btn-bonus {
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #2a1400;
  box-shadow: 0 6px 20px rgba(255, 214, 10, 0.18);
}
.btn-sm { padding: 12px 18px; font-size: 14px; }
.btn-wide { width: 100%; margin-top: 16px; }

.btn-huge {
  width: 100%;
  padding: 20px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1.5px;
  border-radius: 18px;
}
.btn-crash { background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #04121a; box-shadow: 0 8px 30px rgba(0, 240, 255, 0.18); }
.btn-crash.cashout { background: linear-gradient(135deg, var(--green), var(--gold)); color: #062012; box-shadow: 0 8px 30px rgba(0, 255, 157, 0.22); }
/* «Крутить» в рулетке - главная кнопка экрана, и выглядеть она должна как
   фишка казино, а не как бледная плашка: рубиновый лак с золотой кромкой,
   глянец сверху, толщина снизу (нажатие её «съедает») и мягкий пульс света.
   Блик пробегает раз в несколько секунд, как у «Открыть» в кейсе. */
.btn-roulette {
  position: relative; overflow: hidden;
  border: 0;
  font-family: 'Unbounded', 'Manrope', system-ui, sans-serif; font-weight: 800; letter-spacing: 0.08em;
  color: #fff; text-shadow: 0 2px 0 rgba(90, 0, 20, 0.6), 0 0 14px rgba(255, 200, 120, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 46%) padding-box,
    linear-gradient(180deg, #ff4d6d 0%, #e0163a 48%, #a50a26 100%) padding-box,
    linear-gradient(160deg, #fff3c4, #e8a024 45%, #ffd34d 70%, #c8781a) border-box;
  border: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 5px 0 #6b0418,
    0 14px 30px -8px rgba(255, 40, 80, 0.7), 0 0 0 0 rgba(255, 80, 110, 0.5);
  animation: roulPulse 2.4s ease-in-out infinite;
  margin-bottom: 5px;
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn-roulette::after {
  content: ''; position: absolute; inset: 0; translate: -130% 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  animation: openSheen 4s cubic-bezier(0.65, 0, 0.35, 1) infinite 1s;
}
.btn-roulette:not(:disabled):active {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 #6b0418, 0 8px 18px -8px rgba(255, 40, 80, 0.6);
}
/* Пока крутится, кнопка не гаснет до серого, а притихает: видно, что игра
   идёт, а не что кнопка сломана. */
.btn-roulette:disabled { opacity: 1; filter: saturate(0.55) brightness(0.8); animation: none; }
.btn-roulette:disabled::after { animation: none; }
@keyframes roulPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 5px 0 #6b0418, 0 14px 30px -8px rgba(255, 40, 80, 0.7), 0 0 0 0 rgba(255, 80, 110, 0.45); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 5px 0 #6b0418, 0 14px 36px -6px rgba(255, 60, 100, 0.9), 0 0 0 8px rgba(255, 80, 110, 0); }
}
@media (prefers-reduced-motion: reduce) { .btn-roulette, .btn-roulette::after { animation: none; } }

/* ---------- Панель ставки ---------- */

.bet-panel {
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--card);
  border: 2px solid var(--line);
}

.bet-row { display: flex; gap: 10px; margin-bottom: 12px; }

.bet-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 15px 16px;
  color: var(--gold);
  font-family: inherit;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.bet-input:focus { outline: none; border-color: var(--pink); }
.bet-input::-webkit-outer-spin-button,
.bet-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bet-quick { display: flex; gap: 6px; }
.bet-chips { display: flex; gap: 8px; margin-bottom: 14px; }

.chip {
  flex: 1;
  padding: 12px 10px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--card-hi);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:active { transform: scale(0.94); }
.chip:hover { border-color: var(--pink); }
.bet-quick .chip { flex: 0 0 auto; min-width: 52px; }

/* ---------- Краш ---------- */

/* Сцена краша - открытый космос: туманность, звёзды на холсте позади
   кривой и частицы на холсте впереди (createCrashFx в app.js). */
.crash-stage {
  position: relative;
  height: 270px;
  border-radius: 22px;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(255, 46, 138, 0.22), transparent 70%),
    radial-gradient(70% 80% at 10% 100%, rgba(80, 40, 220, 0.35), transparent 70%),
    radial-gradient(ellipse at 50% 100%, rgba(160, 32, 255, 0.25), transparent 70%),
    linear-gradient(180deg, #120428, #05010c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 40px -24px #000;
  overflow: hidden;
}
.crash-stars, .crash-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crash-fx { z-index: 3; }
.crash-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 4; }
.crash-flash.is-boom { background: radial-gradient(circle at 60% 40%, rgba(255, 90, 40, 0.75), rgba(255, 20, 60, 0.2) 50%, transparent 75%); animation: crFlash 0.7s ease-out; }
.crash-flash.is-win { background: radial-gradient(circle at 50% 40%, rgba(255, 211, 77, 0.55), transparent 70%); animation: crFlash 0.7s ease-out; }
@keyframes crFlash { from { opacity: 1; } to { opacity: 0; } }
/* Надпись рубежа: вылетает из-под числа, растёт и гаснет. */
.crash-mile {
  position: absolute; left: 50%; top: 118px; z-index: 5; pointer-events: none;
  font: 800 38px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: #fff;
  text-shadow: 0 0 18px var(--c), 0 0 40px var(--c), 0 2px 0 rgba(0, 0, 0, 0.5);
  animation: crMile 1.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes crMile {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.4); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(1); }
}

.crash-graph { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash-line { fill: none; stroke: var(--pink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
              filter: drop-shadow(0 0 8px -6px var(--pink)); vector-effect: non-scaling-stroke; }
.crash-area { fill: url(#crashFill); }

/* Число прижато к верху, а не по центру: кривая растёт снизу вверх и
   перечёркивала бы его ровно посередине сцены. */
.crash-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding-top: 20px;
  pointer-events: none;
}

.crash-multiplier {
  font: 800 52px/1 'Unbounded', 'Manrope', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  text-shadow: 0 0 24px currentColor, 0 3px 0 rgba(0, 0, 0, 0.45);
  transition: color 0.3s;
  position: relative; z-index: 2;
}
.crash-multiplier.is-pulse { animation: crPulse 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes crPulse { 40% { transform: scale(1.22); } }
.crash-multiplier.busted { color: var(--red); animation: shake 0.45s; }
.crash-multiplier.cashed { color: var(--green); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-11px) rotate(-3deg); }
  40% { transform: translateX(11px) rotate(3deg); }
  60% { transform: translateX(-7px); }
  80% { transform: translateX(7px); }
}

.crash-status { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--muted); }
.crash-status.win { color: var(--green); }
.crash-status.lose { color: var(--red); }

/* Ракета стоит на старте и в полёте; transform ставит drawCrashGraph. */
.crash-rocket {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 70px; height: 30px;
  transform-origin: 35px 15px;
  opacity: 0.85;
  transition: opacity 0.2s;
  filter: drop-shadow(0 0 10px rgba(255, 46, 138, 0.6));
}
.crash-rocket svg { width: 100%; height: 100%; overflow: visible; display: block; }
.crash-rocket .cr-flame { transform-origin: 15px 16px; opacity: 0.35; }
.crash-rocket.flying { opacity: 1; }
.crash-rocket.flying .cr-flame { opacity: 1; animation: crFlame 0.09s steps(2) infinite; }
@keyframes crFlame { 50% { transform: scaleX(1.35) scaleY(0.85); } }
.crash-rocket.gone { opacity: 0; transition: opacity 0.05s; }

.crash-recent { display: flex; gap: 7px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.crash-recent::-webkit-scrollbar { display: none; }

.recent-pill {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid currentColor;
  background: rgba(0, 0, 0, 0.3);
}
.recent-pill.low { color: var(--red); }
.recent-pill.mid { color: var(--cyan); }
.recent-pill.high { color: var(--gold); }
.recent-pill.red { color: var(--red); }
.recent-pill.black { color: var(--muted); }
.recent-pill.green { color: var(--green); }

/* ---------- Рулетка ---------- */

/* Колесо: золотой обод с лампами, лунки по краю, сектора, шар и самоцвет
   сверху. Размеры - доли ширины, поэтому колесо одинаково собрано на любом
   экране; радиусы желоба и лунок продублированы в app.js (ROUL_TRACK_R,
   ROUL_POCKET_R) и обязаны совпадать с отступом .rw-wheel. */
/* На телефоне колесо не шире 300 точек: крупнее, и кнопка «Крутить» уходит
   за нижний край экрана. */
.rw-stage {
  position: relative;
  width: min(78vw, 300px); margin: 0 auto;
  padding-top: 18px;
}
@media (min-width: 1024px) { .rw-stage { width: 380px; } }
.rw-aura {
  position: absolute; inset: 4% -6% -4%; border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 60, 255, 0.35), transparent 65%);
  filter: blur(14px); pointer-events: none;
}
.rw-stage.is-spinning .rw-aura { animation: rwAura 1.2s ease-in-out infinite; }
@keyframes rwAura { 50% { opacity: 0.6; transform: scale(1.04); } }
.rw-stage.is-landed.is-red .rw-aura { background: radial-gradient(circle, rgba(255, 60, 90, 0.4), transparent 65%); }
.rw-stage.is-landed.is-green .rw-aura { background: radial-gradient(circle, rgba(25, 240, 160, 0.45), transparent 65%); }
.rw-stage.is-landed.is-black .rw-aura { background: radial-gradient(circle, rgba(201, 168, 255, 0.35), transparent 65%); }

.rw-wrap { position: relative; aspect-ratio: 1; }
/* Обод - чаша: золото снаружи, тёмный желоб внутри, по которому катится шар. */
.rw-rim {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 83.5%, #1a0a10 84%, #2b1408 88%, #120706 91.5%, transparent 92%),
    conic-gradient(from 20deg, #fff3c4, #c8781a, #ffe58a, #8a4f08, #ffd34d, #c8781a, #fff3c4, #8a4f08, #fff3c4);
  box-shadow: 0 0 0 2px #3a1d00, 0 20px 40px -12px rgba(0, 0, 0, 0.9), 0 0 50px -10px rgba(255, 190, 60, 0.45),
    inset 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.rw-rim i {
  position: absolute; left: 50%; top: 50%; width: 3.4%; aspect-ratio: 1; margin: -1.7% 0 0 -1.7%; border-radius: 50%;
  transform: rotate(var(--a)) translateY(-1410%);
  background: radial-gradient(circle at 40% 35%, #fffbe6, #ffd34d 55%, #c8781a);
  box-shadow: 0 0 6px 1px rgba(255, 220, 120, 0.7);
  opacity: 0.55;
}
/* Лампы бегут по кругу во время прокрута и мигают золотом на выигрыше. */
.rw-stage.is-spinning .rw-rim i { animation: rwBulb 0.9s linear infinite; animation-delay: calc(var(--i) * -45ms); }
@keyframes rwBulb { 0%, 70% { opacity: 0.35; } 80% { opacity: 1; box-shadow: 0 0 12px 3px #ffe58a; } }
.rw-stage.is-won .rw-rim i { animation: rwBlink 0.5s steps(2) 6; animation-delay: calc(var(--i) % 2 * 0.25s); }
@keyframes rwBlink { 50% { opacity: 1; box-shadow: 0 0 14px 4px #ffe58a; } }

.rw-wheel { position: absolute; inset: 8%; border-radius: 50%; will-change: transform; }
.rw-wheel svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)); }
.rw-frets path { stroke: #ffd34d; stroke-width: 1.6; opacity: 0.85; }
.rw-hl { fill: #fff; opacity: 0; mix-blend-mode: overlay; transition: opacity 0.3s; }
.rw-stage.is-landed .rw-hl { animation: rwHl 1.2s ease-in-out 3; }
@keyframes rwHl { 50% { opacity: 0.55; } }
/* Во время прокрута метки смазываются: колесо быстрое, и чёткие метки на нём
   читались бы как остановленный кадр. */
.rw-stage.is-spinning .rw-mark { opacity: 0.75; }

/* Ступица: золотой купол с гранями. */
.rw-hub {
  position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fffbe6, #ffd34d 30%, #c8781a 62%, #5a3006);
  box-shadow: 0 0 0 3px #2b1408, 0 0 0 5px #e8a024, 0 10px 22px rgba(0, 0, 0, 0.7), inset 0 -6px 12px rgba(90, 40, 0, 0.6);
  display: grid; place-items: center;
}
.rw-hub span {
  width: 42%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #6a3cbf, #24104a 70%);
  box-shadow: inset 0 0 0 2px rgba(255, 211, 77, 0.7), 0 0 14px rgba(160, 80, 255, 0.6);
}

/* Шар: стоит в центре колеса и уезжает на радиус поворотом (см. placeRouletteBall). */
.rw-ball {
  position: absolute; left: 50%; top: 50%; width: 5.4%; aspect-ratio: 1; margin: -2.7% 0 0 -2.7%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff, #e9e6f2 35%, #a7a0b8 75%, #6d6680);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 255, 255, 0.35);
  z-index: 2;
}

/* Самоцвет сверху: указывает на лунку, под которой сел шар. */
.rw-pointer {
  position: absolute; left: 50%; top: 4px; width: 30px; height: 38px; margin-left: -15px; z-index: 3;
  background: linear-gradient(160deg, #fff3c4, #ffd34d 40%, #c8781a);
  clip-path: polygon(50% 100%, 0 30%, 18% 0, 82% 0, 100% 30%);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(255, 200, 60, 0.6));
}
.rw-pointer::after {
  content: ''; position: absolute; inset: 6px 7px 12px;
  background: radial-gradient(circle at 40% 30%, #ff9ab0, #c1121f 70%);
  clip-path: polygon(50% 100%, 0 30%, 18% 0, 82% 0, 100% 30%);
}
.rw-stage.is-landed.is-green .rw-pointer::after { background: radial-gradient(circle at 40% 30%, #b6ffe0, #00a36a 70%); }
.rw-stage.is-landed.is-black .rw-pointer::after { background: radial-gradient(circle at 40% 30%, #e5d4ff, #5b2bb0 70%); }

/* Световой столб из выигравшей лунки вверх. */
.rw-beam {
  position: absolute; left: 50%; top: -60px; width: 70px; height: 150px; margin-left: -35px; z-index: 2;
  background: linear-gradient(0deg, var(--beam, #ff3b5c), transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  opacity: 0; transform: scaleY(0); transform-origin: 50% 100%;
  pointer-events: none; filter: blur(2px);
}
.rw-stage.is-landed .rw-beam { animation: rwBeam 1.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.rw-stage.is-landed.is-won .rw-beam { animation-duration: 2.6s; }
.rw-stage.is-green { --beam: #19f0a0; }
.rw-stage.is-black { --beam: #c9a8ff; }
@keyframes rwBeam {
  0% { opacity: 0; transform: scaleY(0); }
  25% { opacity: 0.85; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1.1); }
}

.fx-burst { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.fx-burst i {
  position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; background: var(--c); box-shadow: 0 0 10px 2px var(--c);
  animation: fxBurst 1s cubic-bezier(0.2, 0.7, 0.3, 1) both var(--d);
}
@keyframes fxBurst { to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rw-stage.is-spinning .rw-rim i, .rw-stage.is-won .rw-rim i, .rw-stage.is-spinning .rw-aura { animation: none; }
}

.roulette-result {
  text-align: center;
  min-height: 40px;
  margin-top: 14px;
}
.roulette-result b { display: inline-block; font: 800 20px/1.2 'Unbounded', 'Manrope', system-ui, sans-serif; animation: pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.roulette-result.win b {
  background: linear-gradient(180deg, #fff8dc, #ffd34d 55%, #e8a024);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 211, 77, 0.4));
}
.roulette-result.lose b { color: var(--muted); }

.color-picker { display: flex; gap: 10px; margin-top: 18px; }

.color-btn {
  flex: 1;
  padding: 18px 8px;
  border-radius: 18px;
  border: 3px solid transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.color-btn small { font-size: 12px; font-weight: 700; opacity: 0.85; }
.color-btn:active { transform: scale(0.95); }
.color-btn.red { background: linear-gradient(160deg, #ff4d6d, #c1121f); color: #fff; }
.color-btn.black { background: linear-gradient(160deg, #3a2a55, #16091f); color: #cbb6e8; }
.color-btn.green { background: linear-gradient(160deg, #00ff9d, #009e63); color: #04241a; flex: 0.7; }
.color-btn.selected { border-color: var(--gold); box-shadow: 0 0 28px -13px var(--gold); transform: scale(1.05); }
/* Фишки ставки: глянец сверху и кромка снизу, как у остальных объёмных
   плашек. Выбранная приподнята и обведена золотом. */
.color-btn {
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.3), 0 6px 14px -8px #000;
}
.color-btn::before {
  content: ''; position: absolute; inset: 0 0 55%; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
}
.color-btn span { font-family: 'Unbounded', 'Manrope', system-ui, sans-serif; font-weight: 800; }
.color-btn.selected { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 2px var(--gold), 0 10px 26px -10px var(--gold), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

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

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 1, 12, 0.78);
  backdrop-filter: blur(5px);
  display: flex; align-items: flex-end;
  animation: fade 0.2s;
}

.sheet {
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-soft);
  border-radius: 28px 28px 0 0;
  border-top: 2px solid var(--pink);
  padding: 12px 18px calc(24px + var(--safe-bottom));
  animation: slideUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }

.sheet-handle { width: 46px; height: 5px; background: var(--line); border-radius: 3px; margin: 0 auto 18px; }

.sheet-title { font-size: 28px; font-weight: 900; }
.sheet-tagline { font-size: 14px; color: var(--muted); margin-top: 4px; margin-bottom: 16px; }

.sheet-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.badge {
  font-size: 12.5px;
  padding: 8px 13px;
  border-radius: 10px;
  background: var(--card);
  border: 1.5px solid var(--line);
  color: var(--muted);
  font-weight: 600;
}
.badge strong { color: var(--gold); }

.items-title {
  font-size: 13px; color: var(--muted);
  margin-bottom: 10px;
  display: flex; justify-content: space-between;
  font-weight: 700;
}

.item-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--card);
  border-left: 5px solid var(--tier-color);
  margin-bottom: 8px;
}
.item-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tier-color);
            box-shadow: 0 0 12px -6px var(--tier-color); flex: 0 0 auto; }
.item-info { flex: 1; min-width: 0; }
.item-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-mult { font-size: 12px; color: var(--muted); margin-top: 2px; }
.item-right { text-align: right; flex: 0 0 auto; }
.item-value { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--tier-color); }
.item-chance { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }


/* ---------- Экран открытия ---------- */

.opener {
  position: fixed; inset: 0; z-index: 80;
  background: radial-gradient(ellipse at 50% 40%, #2a0f45 0%, #0a0215 72%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.opener-inner { width: 100%; max-width: 580px; }

/* ---------- Тема кейса ---------- */

/* Тона приходят из самой обложки (см. applyCaseTheme). Здесь из них
   собираются два рабочих цвета, а дальше всё на экране красится ими - фон,
   рамка барабана, маркер, блок фриспинов. Значения по умолчанию нужны для
   кейсов без присланного арта: у них тонов нет, и экран остаётся прежним. */
.opener.is-themed {
  --case-a: hsl(var(--case-h1, 275) 92% 60%);
  --case-b: hsl(var(--case-h2, 275) 88% 58%);
  background:
    radial-gradient(85% 55% at 50% 0%,
      hsl(var(--case-h1, 275) 88% 45% / 0.5), transparent 74%),
    radial-gradient(95% 60% at 50% 100%,
      hsl(var(--case-h2, 275) 82% 40% / 0.3), transparent 76%),
    radial-gradient(ellipse at 50% 40%, #150726 0%, #06010c 72%);
}

.opener-theme {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Размытая обложка во всю ширину: она и даёт воздуху цвет самой картинки, а
   не усреднённый оттенок. Размытие сильное намеренно - узнаваться должен
   цвет, а не сюжет, иначе фон начинает спорить с содержимым. */
.opener-theme-wash {
  position: absolute;
  /* Сдвиг в точках, а не в процентах: проценты считаются от высоты всего
     экрана кейса (около трёх тысяч точек вместе с составом), и при -14%
     картинка уезжала за верх экрана - фон пропадал, хотя слой был на месте. */
  left: 50%; top: -230px;
  width: 240%;
  transform: translateX(-50%);
  filter: blur(34px) saturate(1.6) brightness(1.2);
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 24%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 24%, transparent 80%);
}

/* Затемнение поверх фона. Размытая обложка поднимает яркость всего экрана, и
   без него текст и кнопки теряют контраст - особенно на светлых обложках
   вроде ледяной «Мерзлоты». */
.opener-theme::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 1, 12, 0.16), rgba(6, 1, 12, 0.42) 46%, rgba(6, 1, 12, 0.82));
}

/* Чёткая копия в углу, водяным знаком. Это и есть «деталь с обложки»: кейс
   узнаётся с первого взгляда, но картинка не мешает читать экран - она уходит
   в прозрачность маской. */
.opener-theme-mark {
  position: absolute;
  right: -8%; top: 3%;
  width: 58%;
  opacity: 0.2;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(70% 70% at 60% 40%, #000 25%, transparent 78%);
}

/* Содержимое поднимается над фоном: иначе водяной знак лёг бы поверх текста. */
.opener-scroll { position: relative; z-index: 1; }

/* Барабан, маркер и блок фриспинов подхватывают тон кейса. */
.opener.is-themed .reel-wrap {
  background:
    radial-gradient(120% 100% at 50% 0%,
      hsl(var(--case-h1, 275) 80% 45% / 0.26), transparent 70%) padding-box,
    linear-gradient(180deg, #120424, #08010f) padding-box,
    linear-gradient(160deg, var(--case-a),
      color-mix(in srgb, var(--case-b) 45%, var(--case-a)) 50%, var(--case-a)) border-box;
  box-shadow: 0 0 30px -10px var(--case-a);
}
/*
 * Стрелки остаются золотыми при любой теме - металл есть металл, а под тон
 * кейса подкрашивается только свечение вокруг них. Фон здесь задавать нельзя:
 * у маркера теперь своя ширина в 22 точки, и фон залил бы прямоугольник во всю
 * высоту ленты вместо стрелок.
 */
.opener.is-themed .reel-marker::before,
.opener.is-themed .reel-marker::after {
  filter:
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 14px color-mix(in srgb, var(--case-a) 55%, transparent));
}
.opener.is-themed .opener-case span { color: var(--case-a); }

.reel-wrap {
  position: relative;
  height: 148px;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.42);
  border: 2px solid var(--line);
}

.reel { display: flex; gap: 10px; padding: 12px 0; height: 100%; will-change: transform; }

.reel-tile {
  border-radius: 14px;
  background: linear-gradient(160deg, var(--tier-color) -35%, var(--card) 58%);
  border: 2px solid var(--line);
  border-bottom: 4px solid var(--tier-color);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 9px;
  text-align: center;
}
.tile-icon { font-size: 26px; }
.tile-name {
  font-size: 11.5px; line-height: 1.2; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile-value { font-size: 13px; font-weight: 900; color: var(--tier-color); font-variant-numeric: tabular-nums; }

/*
 * Маркер выигрыша - две стрелки навстречу друг другу, сверху и снизу ленты.
 * Полоска во всю высоту перечёркивала карточку как раз там, куда игрок
 * смотрит: по центру плитки стоит рисунок предмета, и линия шла прямо по нему.
 * Стрелки указывают на ту же точку, оставаясь на поле ленты.
 *
 * Треугольник задан clip-path, а не рамками (border-left/right + border-top):
 * у треугольника из рамок нет содержимого, значит в него нельзя залить
 * градиент, а металл - это именно градиент, а не плоский цвет.
 *
 * Размер стрелки живёт в переменных: ширина плитки на компьютере втрое
 * больше, и стрелка в 22 точки на плитке в 300 читается как опечатка.
 */
.reel-marker {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  --arrow-w: 22px;
  --arrow-h: 13px;
  width: var(--arrow-w);
  margin-left: calc(var(--arrow-w) / -2);
  z-index: 3;
  pointer-events: none;
}
.reel-marker::before,
.reel-marker::after {
  content: '';
  position: absolute;
  left: 0;
  width: var(--arrow-w);
  height: var(--arrow-h);
  /*
   * Блики идут ПОПЕРЁК стрелки, а не вдоль: продольный градиент даёт ровную
   * заливку с затемнением к острию - это окрашенный треугольник, а не металл.
   * Металл читается по чередованию света и тени на одной плоскости.
   */
  background:
    /*
     * Верхний слой - ребро по оси стрелки: левая половина светлее правой.
     * Без него стрелка остаётся плоской заливкой; настоящая металлическая
     * стрелка согнута по центру, и именно этот перелом света её выдаёт.
     */
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.24) 0 49%,
      rgba(0, 0, 0, 0.30) 51% 100%),
    linear-gradient(100deg,
      #6d4708 0%, #a9761f 11%, #e8c25d 24%, #fff6d8 40%,
      #f0cf72 52%, #c2922c 68%, #7c5410 84%, #d8ad46 100%);
  filter:
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 12px rgba(223, 190, 98, 0.45));
}
.reel-marker::before {
  top: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.reel-marker::after {
  bottom: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.reel-fade { position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.reel-fade-l { left: 0; background: linear-gradient(90deg, #0d0318, transparent); }
.reel-fade-r { right: 0; background: linear-gradient(270deg, #0d0318, transparent); }

/* ---------- Результат ---------- */

.result { text-align: center; margin-top: 30px; animation: pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes pop { from { opacity: 0; transform: scale(0.78); } to { opacity: 1; transform: none; } }

.result-tier {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 999px;
  border: 2px solid var(--tier-color);
  color: var(--tier-color);
  margin-bottom: 12px;
}
.result-name { font-size: 24px; margin-bottom: 10px; }
.result-value {
  font-size: 44px; font-weight: 900;
  color: var(--tier-color);
  font-variant-numeric: tabular-nums;
}
/* Строка под суммой: только то, что из самой суммы не прочитать - множитель,
   подарок, фриспины. Зелёного «+сумма» здесь больше нет: он повторял число,
   которое стоит прямо над ним крупными цифрами. */
.result-net {
  font-size: 13px; font-weight: 700; margin-top: 8px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.result-actions { display: flex; gap: 10px; margin-top: 26px; align-items: flex-start; }
.result-actions .btn { flex: 1; }
.result-actions .take-btn { flex: none; }
/* Пачка ставит кнопки сразу под списком, и у неё «Ещё раз» тоже золотая. */
.result-actions .again-cta { margin-bottom: 5px; min-height: 54px; }

/* Имя выпавшего предмета залито металлом его материала. Тон редкости
   подмешан в каждый градиент: карточка за 300 ₽ и за 300 000 ₽ одного
   материала всё равно различаются цветом, как и на ленте. */
.result-name {
  --g: linear-gradient(180deg, #fff 15%, color-mix(in srgb, var(--tier-color) 70%, #fff) 85%);
  display: block; width: fit-content; max-width: 100%; margin-inline: auto;
  font-family: 'Unbounded', 'Manrope', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.15;
  background: var(--g);
  background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 22px color-mix(in srgb, var(--tier-color) 40%, transparent));
}
.result-name[data-material="gold"] { --g: linear-gradient(180deg, #fffbe6 8%, #ffe08a 40%, #e0a02a 62%, #fff0b0 92%); }
.result-name[data-material="chrome"] { --g: linear-gradient(180deg, #ffffff 10%, #c9d3e3 42%, #6f7f99 58%, #eef2f8 90%); }
.result-name[data-material="glass"] { --g: linear-gradient(180deg, #ffffff 10%, color-mix(in srgb, var(--tier-color) 45%, #fff) 60%, #ffffff 95%); }
.result-name[data-material="crystal"] { --g: linear-gradient(160deg, #f2fdff 10%, #9ae6ff 40%, color-mix(in srgb, var(--tier-color) 70%, #fff) 70%, #ffffff 95%); }
.result-name[data-material="holo"] {
  --g: linear-gradient(100deg, #ffd1f5, #c8b6ff 25%, #a6f0ff 45%, #c9ffd8 62%, #fff3b0 80%, #ffd1f5);
  background-size: 220% 100%;
  animation: nameHolo 5s linear infinite;
}
@keyframes nameHolo { to { background-position: 220% 0; } }
.result-name[data-material="neon"] {
  --g: linear-gradient(180deg, #ffffff 20%, color-mix(in srgb, var(--tier-color) 85%, #fff) 70%);
  filter: drop-shadow(0 0 6px var(--tier-color)) drop-shadow(0 0 20px var(--tier-color));
}
.result-name[data-material="carbon"] { --g: linear-gradient(180deg, #f4f4f6 10%, #a9adb8 55%, color-mix(in srgb, var(--tier-color) 60%, #ddd) 95%); }
.result-name[data-material="matte"] { --g: linear-gradient(180deg, #ffffff 15%, color-mix(in srgb, var(--tier-color) 55%, #fff) 90%); }
@media (prefers-reduced-motion: reduce) { .result-name[data-material="holo"] { animation: none; } }

/* ---------- Статистика и история ---------- */

.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.stat-card {
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--card-hi), var(--card));
  border: 1.5px solid var(--line);
}
.stat-label { font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.stat-value { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.stat-value.plus { color: var(--green); }
.stat-value.minus { color: var(--red); }

.history-list { display: flex; flex-direction: column; gap: 8px; }

.history-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--card);
  border-left: 5px solid var(--tier-color);
}
.history-ico { font-size: 22px; flex: 0 0 auto; }
.history-main { flex: 1; min-width: 0; }
.history-item { font-size: 15px; font-weight: 700; }
.history-case { font-size: 12px; color: var(--muted); margin-top: 2px; }
.history-right { text-align: right; }
.history-value { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.history-mult { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.history-mult.plus { color: var(--green); }
.history-mult.minus { color: var(--muted); }

.empty { text-align: center; color: var(--muted); font-size: 15px; padding: 50px 20px; }

/* ---------- Честность ---------- */

/* Раздел собран как история: печать и обещание, почему этому можно верить,
   как это устроено и только потом ключи. Всё движение здесь - при входе в
   раздел (класс .active у .view) и одна бесконечная деталь, кольцо печати. */
.fair-hero { text-align: center; padding: 8px 0 6px; }
.fair-seal { width: 132px; height: 132px; margin: 0 auto 6px; position: relative; }
.fair-seal::before {
  content: ''; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 70, 0.4), transparent 70%);
  filter: blur(10px);
}
.fair-seal svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.fair-seal-ring { transform-origin: 60px 60px; animation: fairRing 26s linear infinite; }
@keyframes fairRing { to { transform: rotate(360deg); } }
.fair-seal-check { stroke-dasharray: 48; stroke-dashoffset: 48; }
#view-fair.active .fair-seal-check { animation: fairCheck 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards; }
@keyframes fairCheck { to { stroke-dashoffset: 0; } }
#view-fair.active .fair-seal svg { animation: fairSeal 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes fairSeal { from { transform: scale(0.6) rotate(-14deg); opacity: 0; } }

.fair-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #c9a8ff;
}
.fair-title {
  margin: 8px 0 10px;
  font: 800 clamp(26px, 8vw, 38px)/1.05 'Unbounded', 'Manrope', system-ui, sans-serif;
  background: linear-gradient(180deg, #fff8dc 10%, #ffd34d 55%, #d98a12 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(90, 30, 0, 0.6)) drop-shadow(0 0 22px rgba(255, 190, 60, 0.25));
}
.fair-lead { font-size: 14.5px; line-height: 1.6; color: #d4c8ea; max-width: 520px; margin: 0 auto 22px; }

/* Партнёры: тёмная плашка с золотой кромкой, знаки крупно и светло. */
.fair-partners {
  position: relative; overflow: hidden;
  margin-bottom: 18px; padding: 20px 18px 18px;
  border-radius: 20px; text-align: center;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 200, 70, 0.14), transparent 70%),
    linear-gradient(180deg, #1b0b30, #10061f);
  box-shadow: inset 0 0 0 1px rgba(255, 211, 77, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fair-partners::after {
  content: ''; position: absolute; inset: 0; translate: -130% 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 230, 160, 0.12) 50%, transparent 60%);
  animation: openSheen 6s cubic-bezier(0.65, 0, 0.35, 1) infinite 1.5s;
}
.fair-partners-title { margin: 8px 0 14px; font: 800 19px/1.2 'Unbounded', 'Manrope', system-ui, sans-serif; color: #fff; }
.fair-marks { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px; }
.fair-mark {
  width: 120px; height: 46px; padding: 8px 12px; border-radius: 14px;
  color: #fff3d0;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.fair-mark svg { width: 100%; height: 100%; display: block; }
.fair-partners-text { font-size: 13.5px; line-height: 1.65; color: #d4c8ea; margin: 0 auto 14px; max-width: 520px; }
.fair-pledges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fair-pledges span {
  padding: 6px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #ffe58a;
  background: rgba(255, 211, 77, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 211, 77, 0.3);
}
.fair-pledges span::before { content: '✓ '; color: #7dffb3; }

/* Три шага с линией между значками: по линии бежит свет от первого шага к
   третьему - так читается, что это одна цепочка, а не три пункта. */
.fair-steps { position: relative; display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.fair-steps::before {
  content: ''; position: absolute; left: 25px; top: 30px; bottom: 30px; width: 2px;
  background: linear-gradient(180deg, rgba(201, 168, 255, 0.5), rgba(255, 211, 77, 0.5));
}
.fair-steps::after {
  content: ''; position: absolute; left: 22px; top: 30px; width: 8px; height: 40px; border-radius: 4px;
  background: linear-gradient(180deg, transparent, #fff6cf, transparent);
  filter: blur(1px);
  animation: fairFlow 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes fairFlow { from { top: 30px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 70px); opacity: 0; } }
.fair-step { position: relative; display: flex; gap: 14px; align-items: flex-start; }
#view-fair.active .fair-step { animation: fairStepIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.45s + var(--i) * 0.14s); }
@keyframes fairStepIn { from { opacity: 0; transform: translateX(-16px); } }
.fair-step-ico {
  position: relative; z-index: 1; flex: none;
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  color: #ffd34d;
  background: linear-gradient(160deg, #2c1452, #160828);
  box-shadow: inset 0 0 0 1px rgba(255, 211, 77, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 18px -10px rgba(0, 0, 0, 0.8);
}
.fair-step-ico svg { width: 24px; height: 24px; }
.fair-shackle { transform-origin: 16px 11px; }
#view-fair.active .fair-shackle { animation: fairLock 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both 0.9s; }
@keyframes fairLock { from { transform: translateY(-4px); } }
.fair-step b { display: block; font: 800 14.5px/1.2 'Unbounded', 'Manrope', system-ui, sans-serif; color: #fff; margin: 4px 0 5px; }
.fair-step p { margin: 0; font-size: 13px; line-height: 1.55; color: #bfb2d8; }

.fair-card {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1a0a2e, #12061f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
}
.fair-keys .mono-box { box-shadow: 0 0 22px -12px var(--cyan); }
.fair-rotate { margin-top: 16px; font-size: 13px; }
.fair-revealed { box-shadow: inset 0 0 0 1px rgba(125, 255, 179, 0.35); }
.fair-h3 { font: 800 15px/1.2 'Unbounded', 'Manrope', system-ui, sans-serif; margin: 0 0 12px; }
@media (prefers-reduced-motion: reduce) {
  .fair-seal-ring, .fair-steps::after, .fair-partners::after { animation: none; }
}
.fair-label { display: block; font-size: 12px; color: var(--muted); margin: 15px 0 7px; font-weight: 600; }
.fair-label:first-child { margin-top: 0; }
.fair-note { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 12px 0 0; }
.fair-note strong { color: var(--pink); }

.mono-box {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  line-height: 1.5;
  color: var(--cyan);
}

.seed-row { display: flex; gap: 10px; }
.seed-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  color: var(--text);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px;
}
.seed-input:focus { outline: none; border-color: var(--pink); }

.code-block {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  overflow-x: auto;
  margin: 0;
  line-height: 1.7;
  color: var(--green);
}

/* ---------- Нижнее меню ---------- */








/* ---------- Тост ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(100px + var(--safe-bottom));
  transform: translateX(-50%);
  /* Над всеми окнами, включая запуск и экран игры казино (150 и 200):
     сообщение об ошибке, спрятанное под окном, выглядит как зависание. */
  z-index: 220;
  background: var(--card-hi);
  border: 2px solid var(--pink);
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 14.5px;
  font-weight: 700;
  max-width: 88vw;
  text-align: center;
  animation: toastIn 0.25s;
  box-shadow: 0 10px 34px rgba(255, 46, 138, 0.16);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translateX(-50%); } }

/* Тост с кнопкой шире обычного: в одну строку помещаются текст и действие. */
.toast.toast-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 18px;
  text-align: left;
}
.toast .toast-btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 13.5px;
  border-radius: 11px;
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .case-box, .case-orbit, .case-orbit span, .money-drop { animation: none; }
  .case-card::after { display: none; }
}

@media (min-width: 620px) {
  .case-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
  main { max-width: 720px; margin: 0 auto; }
}

/* ============================================================
   ШАПКА-ПОСТЕР
   ============================================================ */

/*
 * НАСТОЯЩИЕ ПРОПОРЦИИ ФАЙЛОВ. Все размеры баннеров считаются от них, и это
 * единственное место, где числа заданы руками. Поменяли картинку - поменяйте
 * число здесь, и вся вёрстка сойдётся сама.
 *
 * ПОЧЕМУ ВЫСОТА НЕ ЗАДАНА НИГДЕ. Высоту даёт aspect-ratio от ширины. Если
 * задать ещё и высоту, aspect-ratio начнёт считать ШИРИНУ от неё, и баннер
 * вылезет за свою колонку. На сезонном баннере это уже ломалось.
 */
:root {
  /*
   * ПРОПОРЦИИ ГОТОВЫХ ФАЙЛОВ. Их печатает tools/banners.mjs при каждом
   * запуске - сверяйте по его выводу, а не на глаз. Заменили картинку,
   * забыли поправить число - пара баннеров разъедется по нижней линии, и
   * заметно это будет только на большом экране.
   */
  --hero-ratio: 2;            /* hero-1..4.webp, 1600x800 */
  --promo-wide-ratio: 3.285;  /* promo-wide.webp, 1600x487 */
  --promo-square-ratio: 1.151;/* promo-casino.webp, 900x782 */
  /* Пара стоит почти вплотную: промежуток виден, но не разрывает связку. */
  --banner-gap: 4px;
}

/* Баннеры больше не выходят за поля main: главный баннер выделен рамкой, а
   рамку у самого края экрана не видно. Сверху свой отступ - баннер не должен
   лежать вплотную к шапке.

   Столбик, а не просто поток: на компьютере эта же стопка становится сеткой,
   и порядок блоков там задаётся областями. На телефоне порядок обычный -
   баннер, лента, пара, сезонный кейс. */
.banner-stack { display: flex; flex-direction: column; margin: 14px 0 18px; }

/*
 * На телефоне обёртка верхней строки не должна существовать как блок: порядок
 * здесь прежний - баннер, лента, пара, сезонный кейс, - и сезонный кейс обязан
 * оказаться НИЖЕ ленты, хотя в разметке он лежит рядом с баннером. display:
 * contents убирает обёртку из раскладки, и её дети становятся элементами той
 * же колонки, а order расставляет их в нужном порядке.
 *
 * Разметка при этом одна: на компьютере обёртка оживает и становится строкой.
 */
.banner-top { display: contents; }
.banner-top > .hero { order: 0; }
.feed { order: 1; }
.promo-pair { order: 2; }
.banner-top > .featured-slot { order: 3; }

.featured-slot:empty { display: none; }

/*
 * Рамка со всех сторон. Толщина в две точки, а не в одну: одноточечная на
 * экране с двойной плотностью превращается в еле заметный волосок, и весь
 * смысл выделения теряется.
 *
 * Внутренняя тень поверх картинки нужна из-за скруглённых углов: без неё край
 * фотографии лежит впритык к рамке и на светлых баннерах выглядит обрезанным.
 */
.hero {
  position: relative;
  aspect-ratio: var(--hero-ratio);
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--bg-soft);
}

/*
 * Слайды лежат стопкой и переключаются прозрачностью. Ушедший слайд не
 * прячется display: none, а становится прозрачным: display нельзя анимировать,
 * и переход получился бы рывком.
 *
 * Прозрачный слайд перехватывал бы нажатия, поэтому у неактивных выключены
 * события указателя.
 */
.hero-slides { position: absolute; inset: 0; }

.hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* contain, а не cover: на баннерах есть надписи у самого края кадра, и
     обрезка съедала бы слово. Картинка видна целиком. */
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
.hero-img.active { opacity: 1; pointer-events: auto; }

/* Точки переключения. Лежат на самом баннере снизу по центру. */
.hero-dots {
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  display: flex; justify-content: center; gap: 6px;
  z-index: 2;
}
.hero-dot {
  width: 7px; height: 7px;
  padding: 0; border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  transition: width 0.25s, background 0.25s;
}
.hero-dot.on { width: 20px; border-radius: 4px; background: #fff; }

/*
 * ПАРА БАННЕРОВ ПОД ГЛАВНЫМ: широкий слева, квадратный справа.
 *
 * Верх и низ у них обязаны совпадать. Добиться этого подбором пикселей нельзя:
 * ширина экрана разная у всех. Поэтому ширины заданы не числами, а долями
 * свободного места, равными пропорциям самих картинок.
 *
 * Почему это работает. flex-basis у обеих нулевой, значит вся ширина строки за
 * вычетом промежутка делится между ними строго в отношении flex-grow. Ставим
 * flex-grow равным пропорции картинки - и получаем w1/w2 = 2.5/1, то есть
 * ровно то отношение, при котором обе картинки дают одинаковую высоту.
 * Промежуток при этом вычитается ДО деления, поэтому он высоту не сдвигает.
 */
.promo-pair {
  display: flex;
  align-items: flex-start;
  gap: var(--banner-gap);
}
/* min-width: 0 обязателен. У картинки минимальная ширина по умолчанию равна
   её собственной, то есть 900 и 1600 пикселей: без этой строки обе отказались
   бы сжиматься и вылезли бы за экран. */
/* Оба баннера теперь кнопки: широкий ведёт на Lucky Fortune, квадратный - в
   «Казино». Кнопка не должна ничего добавлять к размеру, иначе пара
   разъедется по высоте: ни полей, ни рамки, ни собственного фона. */
.promo-pair button {
  display: block;
  padding: 0; border: none; background: none;
  min-width: 0;
  font: inherit; color: inherit;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
.promo-pair button:active { transform: scale(0.98); }
.promo-pair img {
  display: block;
  width: 100%; height: auto; min-width: 0;
  border-radius: 12px;
}
/*
 * Записано отдельными свойствами, а не сокращением flex. Сокращение с var()
 * внутри браузер разбирает уже после подстановки, и если разбор не удался,
 * свойство молча сбрасывается целиком - пара разъезжается, а в отладчике
 * ничего не подсвечено. Отдельные свойства такой ловушки не имеют.
 */
.promo-wide { flex-grow: var(--promo-wide-ratio); flex-shrink: 1; flex-basis: 0%; }
.promo-square { flex-grow: var(--promo-square-ratio); flex-shrink: 1; flex-basis: 0%; }

/* ============================================================
   СОБСТВЕННЫЕ ИКОНКИ
   ============================================================ */

.ico { width: 100%; height: 100%; display: block; }

[data-ico] { display: inline-block; line-height: 0; }

.balance-ico[data-ico] { width: 18px; height: 18px; }
.history-ico[data-ico] { width: 26px; height: 26px; }
.tier-ico { width: 100%; height: 100%; }



/* ============================================================
   ОБЛОЖКИ КЕЙСОВ
   ============================================================ */

.case-cover {
  position: relative;
  height: 132px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  margin: -22px -22px 14px;
}
.cover-svg { width: 100%; height: 100%; display: block; }

.cover-badges {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.cover-badge {
  font-size: 10.5px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10, 2, 18, 0.72);
  border: 1.5px solid currentColor;
  backdrop-filter: blur(3px);
}
.cover-badge.perk { color: var(--gold); }

.cover-top {
  position: absolute;
  bottom: 8px; left: 12px;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 2px 8px #000;
}

/* Плашка активных плюшек над сеткой */
.perk-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.perk-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(0, 255, 157, 0.2), rgba(255, 214, 10, 0.14));
  border: 1.5px solid var(--green);
  color: var(--green);
}
.perk-chip [data-ico] { width: 18px; height: 18px; }
/* Бонусный счёт: золото, как деньги, и курсор - плашка ведёт в кассу. */
.perk-chip.is-bonus { cursor: pointer; border-color: var(--gold); color: var(--gold);
  background: linear-gradient(135deg, rgba(223, 190, 98, 0.18), rgba(224, 81, 140, 0.1)); }
.perk-chip.gift { border-color: var(--pink); color: var(--pink);
  background: linear-gradient(135deg, rgba(255, 46, 138, 0.22), rgba(160, 32, 255, 0.14)); }

.case-card.free-ready { box-shadow: 0 0 0 3px -6px var(--green), 0 10px 40px -8px var(--green); }

/* ============================================================
   СЕЗОННЫЙ КЕЙС
   ============================================================ */

.cover-badge.soon { color: var(--cyan); letter-spacing: 0.4px; }

/* --- Витрина сезонного кейса над полками --- */

/* Сверху нужен воздух: над витриной стоит пара баннеров, и без отступа
   постер прилипал к ним и читался как их продолжение. */
.featured { margin: 22px 0 26px; }

.featured-card {
  position: relative;
  margin: 0 auto;
  max-width: 560px;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(160deg, #2a0a2e, #14061f 60%);
  border: 2px solid var(--pink);
  box-shadow: 0 0 0 1px rgba(255, 214, 10, 0.14),
              0 18px 60px -14px var(--pink),
              0 0 90px -30px var(--gold);
}
.featured-card:active { transform: scale(0.985); }

/*
 * Пульс свечения. Анимировать саму тень нельзя: тень с размытием в 120 точек
 * браузер перерисовывает каждый кадр, и этот один постер грузил телефон
 * сильнее всей остальной страницы (замер: в 12 раз больше работы отрисовки),
 * причём и тогда, когда он спрятан под открытым кейсом. Поэтому сильная тень
 * нарисована один раз на слое под карточкой, а дышит только его прозрачность.
 * Слой на .featured, а не внутри карточки: у карточки overflow: hidden, и
 * тень изнутри обрезалась бы по её краю.
 */
.featured { position: relative; isolation: isolate; }
.featured::before {
  content: '';
  position: absolute;
  inset: 0;
  max-width: 560px;
  margin: 0 auto;
  border-radius: 24px;
  z-index: -1;
  box-shadow: 0 0 0 1px rgba(255, 214, 10, 0.24),
              0 18px 74px -10px var(--pink), 0 0 120px -22px var(--gold);
  opacity: 0;
  animation: featuredPulse 3.4s ease-in-out infinite;
  pointer-events: none;
  will-change: opacity;
}
@keyframes featuredPulse { 50% { opacity: 1; } }

.featured-cover {
  position: relative;
  height: 172px;
  overflow: hidden;
}
/* Обложка та же, но заметно сочнее соседних - витрина должна бить в глаза. */
.featured-cover .cover-svg {
  width: 100%; height: 100%;
  filter: saturate(1.35) contrast(1.12) brightness(1.12);
}
/* Закрытый сезонный кейс на витрине не гасим - см. featuredHtml. */
.featured-card.is-locked .cover-svg { filter: saturate(1.35) contrast(1.12) brightness(1.12); }

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

   Постер вертикальный, поэтому карточка на телефоне уже остальных: во всю
   ширину экрана он дал бы полосу в полтора экрана высотой. */
/*
 * НА ТЕЛЕФОНЕ КАРТОЧКА ГОРИЗОНТАЛЬНАЯ: постер слева, подпись справа.
 *
 * Постер вертикальный (942 на 1100), и карточка, повторяющая его пропорцию,
 * занимала пол-экрана в высоту и выглядела как отдельная страница, а не как
 * строка между баннерами и полками. В строку она укладывается в 200 точек
 * высоты вместо 420.
 *
 * Сам постер при этом не обрезается: contain показывает его целиком. Обрезать
 * нельзя - у него надписи у самого края кадра.
 */
.featured-card.own-art {
  max-width: none;
  display: flex;
  align-items: stretch;
}
.featured-card.own-art .featured-cover {
  flex: 0 0 40%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  padding: 10px 0 10px 10px;
}
/* Постер целиком: у него надписи у самого края кадра, обрезать нельзя. */
.featured-card.own-art .cover-photo { object-fit: contain; }

.featured-card.own-art .featured-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  text-align: left;
}
.featured-card.own-art .featured-foot { justify-content: flex-start; }

/*
 * Плашка со сроком вынута из потока. В строке из двух колонок она была бы
 * ТРЕТЬИМ элементом строки и забирала бы себе треть ширины: именно так
 * карточка и разъехалась в первый раз.
 */
.featured-card.own-art .featured-badges {
  position: absolute;
  top: 10px; right: 12px;
  padding: 0;
  justify-content: flex-end;
  z-index: 3;
}
.featured-card.own-art .featured-date { font-size: 9.5px; padding: 4px 9px; letter-spacing: 0.6px; }
.cover-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.featured-card.own-art .featured-cover::after { display: none; }

/* Присланный арт с прозрачным фоном.
   contain, а не cover: у картинки нет своей подложки, она ложится прямо на
   фон карточки. При cover прозрачные поля обрезались бы вместе с объектом, и
   у высоких обложек срезало бы верх и низ композиции. */
/* Присланный арт: вырезанная композиция на прозрачном фоне.
   contain, а не cover: у картинки нет своей подложки, обрезка съела бы её
   края вместе с рисунком. Тень отделяет арт от фона страницы - без неё
   композиция выглядит наклеенной. */
.cover-art {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  /* Прижат к низу слота. Высота слота одна на всю полку, а пропорции обложек
     внутри неё чуть разные - при выравнивании по центру каждая вторая обложка
     висела бы на своей высоте. Прижатые к низу они стоят на общей линии, а
     разница уходит наверх, в воздух между полками. */
  object-position: 50% 100%;
  /*
   * Четыре тени подряд, и все по форме выреза - drop-shadow работает по альфе,
   * а не по прямоугольнику элемента.
   *
   * Первая - плотный контур вплотную к силуэту: он отделяет рисунок от фона,
   * иначе вырез выглядит наклейкой, положенной сверху.
   * Вторая - тесное свечение ближним тоном обложки: оно держит воздух в её
   * собственной гамме.
   * Третья - широкий ореол дальним тоном, тем, чем эта обложка отличается от
   * остальных. Он и делает кейсы разными на глаз.
   * Четвёртая - тень вниз: она сажает предмет на поверхность.
   *
   * Оба тона считаются по самой картинке при её подготовке, см.
   * tools/case-covers.mjs.
   */
  /*
   * Теней осталось две вместо четырёх, и это не про вкус, а про скорость.
   *
   * drop-shadow считается по альфе картинки: браузер повторно размывает всю
   * непрозрачную часть обложки на каждый кадр перерисовки. При обложке в 300
   * пикселей и трёх десятках кейсов на экране четыре таких размытия съедали
   * больше половины кадров - прокрутка шла на 24 кадрах в секунду вместо 60,
   * и это ощущалось именно как «сайт лагает». Замер: с ними 24, без них 58.
   *
   * Здесь остались только дешёвые: плотный контур в пару пикселей и тень вниз.
   * Широкий ореол в тонах обложки никуда не делся - он переехал на подложку
   * (.case-cover::before) обычным градиентом, а градиент рисуется один раз и
   * дальше только накладывается.
   */
  filter:
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.55))
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
  transition: filter 0.2s;
}

/*
 * Ореол вокруг арта. Раньше его давали два drop-shadow по форме выреза, теперь
 * это радиальный градиент под картинкой: на глаз почти то же самое, а стоит
 * он ничего.
 */
.case-card.has-art .case-cover { position: relative; }
.case-card.has-art .case-cover::before {
  content: '';
  position: absolute;
  inset: 8% 2% 2%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    var(--art-glow, rgba(160, 32, 255, 0.45)),
    var(--art-glow-far, var(--art-glow, rgba(160, 32, 255, 0.3))) 55%,
    transparent 78%);
  opacity: 0.75;
  pointer-events: none;
  z-index: -1;
}

/* Запасной вариант для кейсов без присланного арта: тона обложки взять
   неоткуда, остаётся цвет категории. */
.case-card.has-art {
  --art-glow: color-mix(in srgb, var(--cat-color) 45%, transparent);
}

/* На нажатии обложка чуть «оживает» - подсветка усиливается. */
/* На нажатии усиливается подложка, а не фильтр: добавлять размытия обратно
   ради полусекунды нажатия - тот же расход кадров. */
.case-card.has-art:active .case-cover::before { opacity: 1; transform: scale(1.06); }

.featured-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 12%, rgba(255, 214, 10, 0.3), transparent 62%),
              linear-gradient(to top, rgba(10, 2, 18, 0.55), transparent 48%);
  pointer-events: none;
}

/* Блик, пробегающий по обложке. */
.featured-shine {
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-18deg);
  animation: featuredShine 4.2s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes featuredShine {
  0%, 62% { transform: translateX(0) skewX(-18deg); }
  100%    { transform: translateX(400%) skewX(-18deg); }
}

/* Плашки отдельной полосой над обложкой: поверх картинки они закрывали
   крышу машины - главное, ради чего эта обложка и рисовалась. */
.featured-badges {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 14px 16px 12px;
  pointer-events: none;
}

.featured-tag, .featured-date {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(3px);
}
.featured-tag {
  color: #1a0510;
  background: linear-gradient(135deg, var(--gold), #ff9b2e);
  box-shadow: 0 4px 18px -4px var(--gold);
}
.featured-date {
  color: var(--cyan);
  background: rgba(10, 2, 18, 0.82);
  border: 1.5px solid var(--cyan);
}

.featured-top {
  position: absolute; bottom: 10px; right: 16px;
  font-size: 13px; font-weight: 900;
  color: var(--gold);
  text-shadow: 0 2px 10px #000;
}

.featured-body { padding: 16px 20px 20px; text-align: center; }

.featured-name {
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(100deg, #fff, var(--gold) 55%, var(--pink));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.featured-sub { margin-top: 4px; font-size: 13px; color: var(--muted); }

.featured-foot {
  margin-top: 14px;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.featured-price { font-size: 24px; font-weight: 900; color: var(--gold); }
.featured-max, .featured-chip {
  font-size: 12px; font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  color: var(--cyan);
}

/* У кейса с готовым баннером в строку добавляется ещё и потолок выигрыша -
   вчетвером они не влезают на узкий экран и переносятся, оставляя одинокую
   плашку. Поджимаем, чтобы строка осталась одной. */
.featured-card.own-art .featured-foot { gap: 7px; margin-top: 11px; }
.featured-card.own-art .featured-price { font-size: 20px; }
.featured-card.own-art .featured-max,
.featured-card.own-art .featured-chip { font-size: 10.5px; padding: 4px 8px; }
.featured-card.own-art .featured-body { padding: 30px 16px 16px; }
.featured-card.own-art .featured-name { font-size: 21px; }
.featured-card.own-art .featured-sub { font-size: 12px; }

@media (max-width: 420px) {
  .featured-cover { height: 148px; }
  .featured-name { font-size: 23px; }
}

/* Карточка до старта остаётся кликабельной: состав посмотреть можно,
   открыть - нет. Поэтому приглушаем обложку, а не блокируем нажатие. */
.case-card.locked { box-shadow: 0 0 0 2px -6px var(--cyan), 0 10px 40px -12px var(--cyan); }
.case-card.locked .cover-svg { filter: saturate(0.75) brightness(0.78); }
.case-card.locked .case-price { color: var(--cyan); }

.badge.badge-soon { border-color: var(--cyan); color: var(--cyan); }

/* Витринная строка в составе кейса и витринная плитка в ленте: обе видно,
   но обе честно подписаны как не участвующие в розыгрыше. */
.showcase-row {
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.16), rgba(10, 2, 18, 0.5));
  border-style: dashed;
}
.showcase-row .item-chance { color: var(--muted); font-style: italic; }

.reel-tile.is-showcase { border-style: dashed; opacity: 0.92; }
/* Машина вытянутая: в квадрате 38×38 от неё осталась бы полоска в 11 px. */
.reel-tile.is-showcase .tile-icon { width: 100%; height: 34px; filter: none; }
.tile-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
}
.tile-showcase {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: var(--muted);
}

/* ============================================================
   АДМИНКА
   ============================================================ */

/* Вкладок стало пять, и в ширину телефона они уже не помещаются. Ряд
   листается вбок, а не переносится: перенос сдвигал бы всю панель вниз. */
.admin-tabs {
  display: flex; gap: 8px; margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs .tab { flex: 0 0 auto; }
.admin-pane { display: none; }
.admin-pane.active { display: block; }

.admin-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }

.kpi {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--card-hi), var(--card));
  border: 1.5px solid var(--line);
}
.kpi-label { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.kpi-value { font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
.kpi-value.plus { color: var(--green); }
.kpi-value.minus { color: var(--red); }
.kpi-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left; font-size: 11px; color: var(--muted);
  padding: 8px 6px; border-bottom: 1.5px solid var(--line); font-weight: 700;
}
.admin-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); }
.admin-table tr:active { background: var(--card-hi); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.admin-search { display: flex; gap: 10px; margin-bottom: 14px; }

/* ============================================================
   ПАНЕЛЬ УПРАВЛЕНИЯ: ОБОЛОЧКА
   ============================================================ */

/*
 * Разделов стало пятнадцать, и в ленту вкладок они больше не укладываются:
 * на телефоне это лента длиной в три экрана, в которой невозможно найти
 * нужное. Поэтому разделы сгруппированы и вынесены в колонку слева, а на
 * телефоне колонка превращается в ту же ленту, но с заголовками групп.
 */
.bo-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.bo-title { font-size: 22px; font-weight: 900; letter-spacing: -0.4px; }
.bo-who { font-size: 12px; color: var(--muted); margin-top: 4px; }

.bo-shell { display: block; }

/* Подтверждение входа в панель: одна карточка по центру, пока панель скрыта. */
.bo-gate { display: flex; justify-content: center; padding: 24px 0; }
.bo-gate-card {
  width: 100%; max-width: 440px;
  padding: 24px 20px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.bo-gate-title { font-size: 20px; font-weight: 900; margin-bottom: 10px; }
.bo-gate-card p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.bo-gate-card p b { color: var(--text); }
.bo-gate-card .btn-wide { margin-top: 10px; }
.bo-gate-wait { margin-top: 16px; }
.bo-gate-status { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.bo-gate-code { display: flex; gap: 8px; }
.bo-gate-code .seed-input { flex: 1; letter-spacing: 0.2em; }

.bo-nav {
  display: flex; gap: 14px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 6px; margin-bottom: 16px;
  border-bottom: 1.5px solid var(--line);
}
.bo-nav::-webkit-scrollbar { display: none; }
.bo-group { flex: 0 0 auto; }
.bo-group-name {
  font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.bo-link {
  display: inline-block;
  padding: 8px 13px; margin-right: 6px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.bo-link.active {
  border-color: var(--pink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 30%, transparent), transparent);
  color: #fff;
}

/* Таблицы в панели широкие по существу: у отчёта десять столбцов, и сжать
   их до ширины телефона значит сделать нечитаемыми все десять. Едет вбок
   сама таблица, а не страница. */
.bo-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
.bo-scroll .admin-table { min-width: 560px; }

.bo-sub { font-size: 11px; color: var(--muted); }
.bo-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; }
.bo-ok { color: var(--green); font-weight: 700; }
.bo-no { color: var(--red); font-weight: 700; }
.bo-off { opacity: 0.45; }
.bo-subtitle { font-size: 15px; font-weight: 800; margin: 18px 0 8px; }

.bo-userlink {
  background: none; border: none; padding: 0;
  color: var(--cyan); font: inherit; font-size: 12.5px;
  text-decoration: underline; cursor: pointer;
}

/* ---------- Столбики ---------- */

.bo-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 120px; margin-bottom: 18px;
  padding: 10px 10px 0;
  border-radius: 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.bo-chart::-webkit-scrollbar { display: none; }
.bo-bar {
  flex: 1 0 14px; min-width: 14px;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
}
.bo-bar i { display: block; border-radius: 3px 3px 0 0; }
.bo-bar span {
  font-size: 8px; color: var(--muted); text-align: center;
  margin-top: 3px; white-space: nowrap;
}

/* ---------- Формы панели ---------- */

.bo-settings { display: grid; gap: 10px; margin-bottom: 14px; }
.bo-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.bo-field b { font-size: 13px; font-weight: 700; }
.bo-field i { font-size: 11px; color: var(--muted); font-style: normal; }

.bo-toggle {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border-radius: 12px;
  background: var(--card); border: 1.5px solid var(--line);
  cursor: pointer;
}
.bo-toggle input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; }
.bo-toggle span { display: flex; flex-direction: column; gap: 2px; }
.bo-toggle b { font-size: 13px; }
.bo-toggle i { font-size: 11px; color: var(--muted); font-style: normal; }

.bo-daybar {
  padding: 10px 13px; border-radius: 12px; margin-bottom: 16px;
  background: var(--card); border: 1.5px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.bo-daybar b { color: var(--text); font-variant-numeric: tabular-nums; }

.bo-note {
  padding: 10px 13px; border-radius: 12px; margin-bottom: 8px;
  background: var(--card); border-left: 3px solid var(--cyan);
  font-size: 13px;
}
.bo-note .bo-sub { margin-top: 5px; display: flex; gap: 8px; align-items: center; }

/* ---------- Роли и права ---------- */

.bo-roles { display: grid; gap: 10px; margin-bottom: 16px; }
.bo-role {
  padding: 13px; border-radius: 14px;
  background: var(--card); border: 1.5px solid var(--line);
}
.bo-role b { font-size: 14px; }
.bo-role p { font-size: 12px; color: var(--muted); margin: 5px 0 6px; }
.bo-role span { font-size: 11px; color: var(--cyan); display: block; }

.bo-perms { display: grid; gap: 12px; margin-bottom: 14px; }
.bo-perm-group {
  padding: 12px; border-radius: 14px;
  background: var(--card); border: 1.5px solid var(--line);
}
.bo-perm {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.bo-perm:last-child { border-bottom: none; }
.bo-perm span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bo-perm b { font-size: 12.5px; font-weight: 600; }
.bo-perm i { font-size: 10.5px; color: var(--muted); font-style: normal; }
.bo-perm label {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 900; color: var(--muted);
  cursor: pointer;
}
.bo-perm label input { width: 16px; height: 16px; }

.bo-rowact { display: flex; gap: 6px; }
.bo-rowact .btn { padding: 6px 10px; font-size: 11.5px; }


.user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  margin-bottom: 8px;
  cursor: pointer;
}
.user-row.blocked { border-color: var(--red); opacity: 0.7; }
.user-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-weight: 900; font-size: 16px;
  background: linear-gradient(135deg, var(--pink), var(--violet)); color: #fff;
}
.user-main { flex: 1; min-width: 0; }
.user-name { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.user-bal { text-align: right; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--gold); }

.admin-detail {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  overflow-y: auto;
  padding: calc(16px + var(--safe-top)) 18px calc(24px + var(--safe-bottom));
}
.detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.detail-head .btn { padding: 10px 14px; }
.detail-head [data-ico] { width: 20px; height: 20px; }

.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.admin-actions .btn { flex: 1; min-width: 120px; }

.amount-row { display: flex; gap: 8px; margin-bottom: 10px; }
.amount-row .seed-input { font-size: 16px; font-weight: 800; color: var(--gold); }

.log-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 10px; background: var(--card);
  font-size: 12.5px; margin-bottom: 6px;
}
.log-row b { font-variant-numeric: tabular-nums; }
.log-row .plus { color: var(--green); }
.log-row .minus { color: var(--red); }

/* ---------- Правки под новую карточку кейса ---------- */

/*
 * Здесь лежало правило .case-card { min-height: auto; padding: 22px }, а
 * перед ним - обрывок селектора .nav-admin без тела. Комментарий между ними
 * браузер выбрасывает, и правило всё это время читалось как
 * «.nav-admin .case-card», то есть не применялось нигде. Вёрстка карточки
 * сложилась без него и принята такой, поэтому правило убрано, а не
 * восстановлено: включить его сейчас значит поменять то, что уже утверждено.
 */

.case-info { margin-bottom: 14px; }
.case-name { font-size: 24px; margin-bottom: 5px; }
.case-tagline { font-size: 13px; min-height: 0; }

.case-bottom { margin-top: 0; }

.item-ico { width: 26px; height: 26px; flex: 0 0 auto; }

/* Монеты фона - теперь SVG, размер задаётся инлайном */
.money-drop { font-size: 0; }
.money-drop svg { width: 100%; height: 100%; }

/* Селект в админке выглядит как остальные поля ввода */
select.seed-input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.admin-actions .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.admin-actions .btn [data-ico], .btn-wide [data-ico] { width: 18px; height: 18px; }

.admin-tag {
  font-size: 9.5px; font-weight: 900; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 6px; vertical-align: middle;
  background: linear-gradient(135deg, var(--gold), var(--orange)); color: #2a1400;
}
.tile-value .ico { width: 18px; height: 18px; margin: 0 auto; }

/* ============================================================
   ПОЛКИ КЕЙСОВ (горизонтальная прокрутка)
   ============================================================ */

.shelves { display: flex; flex-direction: column; gap: 20px; }

/*
 * Полки за экраном не отрисовываются.
 *
 * Обложек больше шестидесяти, и распакованная картинка стоит куда дороже
 * своего файла. Держать их все живыми телефон не может: память кончается, и
 * вкладка перезагружается прямо во время прокрутки. content-visibility
 * заставляет браузер пропускать полки вне экрана целиком - вместе с
 * распаковкой их обложек, - а contain-intrinsic-size сохраняет высоту, чтобы
 * полоса прокрутки не прыгала.
 *
 * ПОЛЯ ОБЯЗАТЕЛЬНЫ. content-visibility включает обрезку по краям элемента, и
 * свечение вокруг обложек упиралось в границы полки ровными линиями - как
 * будто картинку обрезали ножницами. Поля дают свечению место внутри полки,
 * а отрицательные отступы возвращают саму сетку на прежнее место. По бокам
 * поле ровно такое, как у main: полка растягивается до краёв экрана, и
 * обрезка приходится на его край, где её не видно.
 */
.shelf {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
  padding: 48px 18px;
  margin: -48px -18px;
}


/* Заголовок полки по центру: ряд больше не листается вбок, и выключка влево
   с ценой справа выглядела остатком от прежней карусели. */
.shelf-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; margin-bottom: 8px; text-align: center;
}

/* Заголовок полки: дисплейный шрифт, сплошной светлый тон с мягким
   свечением и по золотой черте с ромбом по бокам. Градиентной заливки в
   буквах нет намеренно: на длинных названиях она читается хуже сплошного
   тона. Орнамент - картинка фоном псевдоэлемента, а не узлы разметки: полок
   десять, и лишние элементы в каждой ради украшения не нужны. */
.shelf-title {
  display: inline-flex; align-items: center; gap: 12px;
  font: 800 21px/1.15 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: -0.005em;
  margin: 0;
  color: #fbf7ff;
  text-shadow: 0 0 18px rgba(190, 150, 255, 0.35), 0 2px 0 rgba(0, 0, 0, 0.35);
}
.shelf-title::before, .shelf-title::after {
  content: ''; flex: none; width: 34px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmln'http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cdefs%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-color='%23ffd34d' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ffd34d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='4.5' width='26' height='1' fill='url(%23a)'/%3E%3Cpath d='M29.5 1.5 33 5l-3.5 3.5L26 5z' fill='%23ffd34d'/%3E%3C/svg%3E") center / contain no-repeat;
}
.shelf-title::after { transform: scaleX(-1); }
.shelf-hint {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #a99cc4; margin-top: 7px;
}
.shelf-range {
  margin-top: 8px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #bff4ff; font-variant-numeric: tabular-nums;
  background: rgba(107, 189, 204, 0.1); box-shadow: inset 0 0 0 1px rgba(107, 189, 204, 0.28);
  white-space: nowrap;
}

/*
 * ПОЛКА - FLEX, А НЕ СЕТКА, И ЭТО ЕДИНСТВЕННОЕ, ЧТО ЗДЕСЬ РАБОТАЕТ.
 *
 * Карусели нет намеренно: горизонтальная прокрутка прятала половину полки, и
 * до дальних кейсов никто не долистывал.
 *
 * А сетку пришлось заменить на flex, потому что центрировать ОСТАТОК сетка не
 * умеет вообще. Полка из десяти кейсов по четыре в ряд заканчивается двумя, и
 * сетка прижимает их к левому краю: справа зияет дыра в половину ширины. Flex
 * переносит строки и центрирует каждую отдельно, включая последнюю.
 *
 * Число кейсов в ряду задаётся не колонками, а долей ширины: два на телефоне,
 * четыре от 620 точек (сюда попадает и телефон, повёрнутый горизонтально), три
 * крупных на компьютере - см. конец файла.
 */
/*
 * ПРОМЕЖУТОК И ЧИСЛО КОЛОНОК ЗАДАНЫ ПЕРЕМЕННЫМИ, И ЭТО НЕ УКРАШАТЕЛЬСТВО.
 *
 * Ширина карточки считается из них же. Как только промежуток и вычитаемое из
 * ширины число разъезжаются, строка перестаёт вмещать нужное количество
 * карточек и полка рассыпается по одной в ряд. Ровно это и случилось с
 * полками «Направления» и «Игра престолов»: у них свой промежуток 12 точек,
 * а ширина считалась от 10, и два кейса переставали влезать в строку.
 *
 * Поэтому переопределять здесь можно только --shelf-gap и --shelf-cols.
 * Писать gap или ширину числом напрямую нельзя.
 */
.shelf-row {
  --shelf-gap: 10px;
  --shelf-cols: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 4px var(--shelf-gap);
}

.shelf-row > .case-card {
  flex: 0 0 var(--shelf-cell);
  max-width: var(--shelf-cell);
}

/* Ширина одной ячейки: из ширины полки вычитаются все промежутки. */
.shelf-row {
  --shelf-cell: calc((100% - (var(--shelf-cols) - 1) * var(--shelf-gap)) / var(--shelf-cols));
}

/* ---------- Компактная карточка ---------- */

.shelf-row .case-card {
  width: 100%;
  min-height: 0;
  padding: 0 0 12px;
  border-radius: 18px;
  border: 2px solid var(--cat-color);
  background: linear-gradient(160deg, var(--card-hi), var(--card));
  box-shadow: 0 6px 22px -8px var(--cat-color);
  scroll-snap-align: start;
  display: block;
  overflow: hidden;
}
.shelf-row .case-card:active { transform: scale(0.95); }
.shelf-row .case-card::after { display: none; }

/* Обложка вытянутая, а не квадратная: 178x74 - это 2.4:1, близко к пропорции
   самого рисунка (340x130), поэтому сундук не обрезается по бокам. */
.shelf-row .case-cover {
  height: 104px;
  margin: 0 0 10px;
  border-radius: 16px 16px 0 0;
}


.shelf-row .case-name {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 12px 8px;
  text-shadow: none;
  /* Две строки максимум: иначе длинное название растягивает всю полку. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 32px;
}

.case-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin: 0 12px;
}

.case-price {
  font-size: 15px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.case-max {
  font-size: 10.5px; font-weight: 800;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
}

/* Бейджи на маленькой обложке компактнее */
.shelf-row .cover-badges { top: 6px; left: 7px; right: 7px; }
.shelf-row .cover-badge { font-size: 8px; padding: 2px 6px; border-width: 1px; }
.shelf-row .cover-top { font-size: 9px; bottom: 5px; left: 9px; }

/* Планшет и телефон, повёрнутый горизонтально: четыре в ряд. */
@media (min-width: 620px) {
  .shelf-row { --shelf-cols: 4; }
  .shelf-row .case-cover { height: 120px; }
}

/* ============================================================
   ЭКРАН ПРОКРУТА: шапка, риск-игра, история, баланс
   ============================================================ */

.opener { align-items: stretch; padding: 0; }

.opener-scroll {
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(14px + var(--safe-top)) 18px calc(24px + var(--safe-bottom));
}
.opener-inner { max-width: 580px; margin: 0 auto; }

.opener-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
/* Логотип и строка со зрителями под ним. Логотип не растягивается: у него
   свои прозрачные поля, и растянутый он перевешивал бы кнопку возврата. */
.opener-brand { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.opener-logo { display: block; height: 30px; width: auto; }
.opener-viewers { font-size: 11px; color: var(--muted); }

.opener-close {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--text);
  padding: 10px;
  cursor: pointer;
}
.opener-close:active { transform: scale(0.94); }

.opener-case {
  text-align: center; font-size: 17px; font-weight: 800;
  color: var(--text); margin-bottom: 16px;
}
.opener-case span { color: var(--gold); }

/* Баланс стоит над лентой, сразу под названием кейса: во время прокрута на
   него смотрят чаще всего, а внизу экрана его приходилось искать. */
.opener-balance {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto 14px;
  padding: 8px 16px;
  width: fit-content;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 46, 138, 0.16), rgba(160, 32, 255, 0.12));
  border: 1.5px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.opener-balance-ico { width: 16px; height: 16px; }
.opener-balance-ico svg { width: 100%; height: 100%; }
.opener-balance b {
  font-size: 17px; font-weight: 900; color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.opener-history { margin-top: 28px; }

/* Заголовок раздела на экране кейса: дисплейный шрифт, короткая золотая
   черта слева и число плашкой. Прежний мелкий серый текст терялся между
   карточками и читался как сноска, а не как начало раздела. */
.sec-head {
  display: flex; align-items: center; gap: 10px;
  margin: 26px 0 12px;
}
.sec-head::before {
  content: ''; width: 4px; height: 18px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, #ffe58a, #e8a024);
  box-shadow: 0 0 12px rgba(255, 200, 60, 0.55);
}
.sec-title {
  font: 800 15px/1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: 0.01em;
  background: linear-gradient(180deg, #ffffff 30%, #d9c8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-chip {
  margin-left: auto;
  padding: 5px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #d9c8ff; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.hist-empty {
  padding: 18px 16px; border-radius: 16px; text-align: center;
  font-size: 13px; line-height: 1.45; color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}

/* Выпадения карточками: те же пропорции, что у состава, но мельче - по три
   в ряд на телефоне (у состава два), по шесть на широком (у состава четыре).
   Флекс, а не сетка: неполный последний ряд встаёт по центру, а не
   прижимается к левому краю. */
.hist-grid {
  --hist-cols: 3; --hist-rows: 3; --hist-gap: 8px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hist-gap);
}
.hist-card.drop-card.rw-skin {
  position: relative;
  flex: 0 0 calc((100% - (var(--hist-cols) - 1) * var(--hist-gap)) / var(--hist-cols));
  min-width: 0;
  border-radius: 13px;
  font-family: inherit; color: inherit; cursor: pointer;
  animation: histIn 0.42s cubic-bezier(0.2, 1.2, 0.4, 1) both;
  animation-delay: calc(var(--k, 0) * 40ms);
}
@keyframes histIn { from { opacity: 0; transform: translateY(12px) scale(0.92); } }
.hist-card.drop-card.rw-skin .drop-name { padding: 0 7px; font-size: 10px; }
.hist-card.drop-card.rw-skin .drop-value { padding: 2px 7px 8px; font-size: 12.5px; }
.hist-x2 {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  padding: 3px 5px; border-radius: 7px;
  font: 800 9.5px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: #3a1d00;
  background: linear-gradient(180deg, #ffe58a, #e8a024);
}
.hist-more {
  display: block; margin: 14px auto 0; padding: 10px 22px;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #e6dcf5; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.hist-more:active { background: rgba(255, 255, 255, 0.1); }
.hist-more[hidden] { display: none; }
@media (min-width: 560px) {
  .hist-grid { --hist-cols: 6; --hist-rows: 2; --hist-gap: 10px; }
}

/* Во время прокрута выпадения остаются строками, но строка - кнопка: она
   открывает предмет крупно, как и карточка. */
.mini-row {
  width: 100%; border: 0; color: inherit; font-family: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.28);
  border-left: 4px solid var(--tier-color);
  font-size: 13px;
}
.mini-row .mini-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-row .mini-val { font-weight: 900; color: var(--tier-color); font-variant-numeric: tabular-nums; }
.mini-row em { font-style: normal; font-weight: 800; color: #ffd34d; }
div.mini-row { cursor: default; }

/* ---------- Риск-игра ---------- */

/* Кнопка риска - предложение, а не главное действие. Она меньше «Ещё раз»,
   стоит под ней по центру и не пульсирует: громкой на экране остаётся одна
   золотая кнопка. Красно-золотая кромка и масть говорят «карты» без слов. */
.gamble-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 14px auto 0; padding: 7px 8px 7px 9px;
  border: 1px solid transparent; border-radius: 999px;
  background:
    linear-gradient(180deg, #2a0d1c, #16061a) padding-box,
    linear-gradient(120deg, #ff5d7a, #ffd34d 55%, #ff5d7a) border-box;
  box-shadow: 0 8px 22px -12px rgba(255, 70, 110, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #ffe7ee; font-family: inherit; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.1s;
}
.gamble-cta:active { transform: scale(0.97); }
.gamble-cta[hidden] { display: none; }
.gamble-cta::after {
  content: ''; position: absolute; inset: 0; translate: -130% 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 220, 230, 0.22) 50%, transparent 65%);
  animation: openSheen 5s cubic-bezier(0.65, 0, 0.35, 1) infinite 2s;
}
.gamble-cta-suit {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8aa0, #c1121f 70%);
  box-shadow: 0 0 12px -2px rgba(255, 60, 90, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
}
.gamble-cta-suit svg { width: 16px; height: 16px; }
.gamble-cta-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.gamble-cta-txt b { font: 800 13px/1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: 0.02em; }
.gamble-cta-txt small { margin-top: 3px; font-size: 11px; font-weight: 700; color: #f5b9c6; font-variant-numeric: tabular-nums; }
.gamble-cta-x {
  padding: 6px 9px; border-radius: 999px;
  background: linear-gradient(180deg, #ffe58a, #e8a024);
  color: #3a1d00; font: 800 11px/1 'Unbounded', 'Manrope', system-ui, sans-serif;
}

.gamble { margin-top: 18px; animation: fade 0.3s; position: relative; }

.gamble-rules { text-align: center; margin-bottom: 18px; }
.gr-eyebrow {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase;
  color: #ff8aa0;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 70, 110, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 90, 120, 0.3);
}
/* Заголовок дисплейным шрифтом с металлом золота и тенью: прежняя строка
   тонким серым текстом читалась как сноска к картам, а не как правило игры. */
.gr-title {
  margin: 10px 0 6px;
  font: 800 clamp(21px, 6.4vw, 30px)/1.1 'Unbounded', 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff8dc 10%, #ffd34d 55%, #d98a12 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(90, 30, 0, 0.6)) drop-shadow(0 0 18px rgba(255, 190, 60, 0.25));
}
.gr-sub { font-size: 13px; line-height: 1.45; color: #c9bde0; max-width: 320px; margin: 0 auto; }
.gr-stakes { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.gr-stake {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 112px; padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.gr-stake b { font: 800 16px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.gr-stake small { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gr-stake.is-prize b { color: #ffd34d; }
.gr-mult {
  font: 800 14px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: #ffd34d;
  padding: 8px 10px; border-radius: 999px;
  background: rgba(255, 211, 77, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 211, 77, 0.35);
}

/* Выиграл: плашка ставки становится выигрышем, сверху ложится печать. */
.gr-stake.is-stamped { box-shadow: inset 0 0 0 1.5px #ffd34d, 0 0 30px -8px rgba(255, 211, 77, 0.8); background: rgba(255, 211, 77, 0.1); }
.gr-stake.is-stamped b { color: #ffe58a; }
.gr-stamp {
  position: absolute; right: -14px; top: -16px;
  padding: 6px 9px; border-radius: 10px;
  font: 800 15px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: #3a1d00;
  background: linear-gradient(180deg, #fff3c4, #ffd34d 45%, #e8a024);
  box-shadow: 0 4px 0 #8a4f08, 0 10px 24px -6px rgba(255, 170, 40, 0.8);
  rotate: -12deg;
  animation: grStamp 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes grStamp {
  from { opacity: 0; transform: scale(3.2); filter: blur(4px); }
  60%  { opacity: 1; filter: none; }
  to   { transform: scale(1); }
}
.gamble.is-lost .gr-stake:first-child b { color: #8a7b9e; text-decoration: line-through; text-decoration-color: #ff5d7a; animation: grAsh 0.9s ease-out both; }
@keyframes grAsh { 0%, 30% { color: #fff; } 45% { color: #ff9a3c; } to { color: #8a7b9e; } }

.gamble-table { position: relative; }
.gamble-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  perspective: 900px;
}

.gcard {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  perspective: 700px;
  background: none;
  padding: 0;
  transition: transform 0.35s cubic-bezier(0.2, 1.2, 0.4, 1), opacity 0.35s, filter 0.35s;
}
/* Раздача: из колоды над столом на свои места, с поворотом и вразнобой. */
.gamble.is-dealing .gcard {
  animation: gDeal 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.05) both;
  animation-delay: calc(260ms + var(--i) * 85ms);
  pointer-events: none;
}
@keyframes gDeal {
  from { transform: translate(var(--fx), var(--fy)) rotate(var(--rot)) scale(0.7); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
/* Разложенные карты чуть дышат вразнобой: зовут нажать, но не мигают. */
/* Качается внутренность, а не сама кнопка: у кнопки рамка стоит на месте, и
   нажатие не промахивается мимо уплывшей карты. */
.gamble.is-ready:not(.is-picked) .gcard-inner { animation: gIdle 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.55s); }
@keyframes gIdle { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.gamble.is-picked .gcard:not(.picked) { opacity: 0.55; filter: saturate(0.6); transform: scale(0.96); }
.gamble.is-picked .gcard.flipped { opacity: 1; filter: none; }
.gcard.picked { transform: translateY(-10px) scale(1.06); z-index: 2; }
.gcard.picked:not(.flipped) .gcard-back { animation: gPulse 0.65s ease-in-out infinite; }
@keyframes gPulse { 50% { box-shadow: 0 0 0 2px #ffd34d, 0 0 34px -4px rgba(255, 211, 77, 0.9); } }

.gcard-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.4, 1);
  border-radius: 14px;
}
.gcard.flipped .gcard-inner { transform: rotateY(180deg); }

.gcard-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 30px; font-weight: 900;
  overflow: hidden;
}
/* Рубашка: тёмно-фиолетовое поле, золотая рамка, ромбовая сетка и масть в
   медальоне. Знак вопроса на прежней рубашке говорил «здесь неизвестно что»,
   а не «здесь карта». */
.gcard-back {
  background:
    radial-gradient(70% 50% at 50% 50%, rgba(255, 211, 77, 0.12), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 211, 77, 0.07) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(255, 211, 77, 0.07) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, #3b1a6e, #1a0838);
  box-shadow: inset 0 0 0 1.5px rgba(255, 211, 77, 0.55), inset 0 0 0 5px #1a0838,
    inset 0 0 0 6px rgba(255, 211, 77, 0.25), 0 10px 20px -10px rgba(0, 0, 0, 0.8);
}
.gcard-back::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.12) 48%, transparent 56%);
}
.gcard-emblem {
  width: 44%; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a2585, #24104a);
  box-shadow: inset 0 0 0 1.5px rgba(255, 211, 77, 0.6), 0 0 18px -6px rgba(255, 211, 77, 0.6);
  color: #ffd34d;
}
.gcard-emblem svg { width: 55%; height: 55%; }
.gcard-front { transform: rotateY(180deg); }
.gcard-front.ace {
  background:
    radial-gradient(80% 60% at 50% 45%, rgba(255, 255, 255, 0.35), transparent 70%),
    linear-gradient(160deg, #ff6b85, #c1121f 70%, #8a0a17);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), inset 0 0 0 5px rgba(140, 10, 25, 0.6), inset 0 0 26px rgba(0, 0, 0, 0.35);
}
.ace-suit { width: 52%; filter: drop-shadow(0 4px 8px rgba(80, 0, 10, 0.6)); }
.ace-suit svg { width: 100%; height: auto; display: block; }
.ace-corner { position: absolute; left: 9px; top: 7px; font: 800 16px/1 'Unbounded', 'Manrope', system-ui, sans-serif; }
.ace-corner.is-bottom { left: auto; top: auto; right: 9px; bottom: 7px; rotate: 180deg; }
.gcard.is-ace.flipped { filter: none; opacity: 1; }
.gcard.is-ace .gcard-inner { box-shadow: 0 0 34px -6px rgba(255, 70, 100, 0.9); }
.gamble.is-won .gcard.picked { transform: translateY(-14px) scale(1.12); }
.gamble.is-won .gcard.picked .gcard-inner { animation: gAceGlow 1.6s ease-in-out infinite 0.6s; }
@keyframes gAceGlow { 50% { box-shadow: 0 0 0 2px #ffd34d, 0 0 48px -2px rgba(255, 211, 77, 0.9); } }
.gcard-front.blank {
  background: linear-gradient(160deg, #2a1550, #14082a);
  color: var(--muted);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.1);
}
/* Выбранная пустая карта обугливается по краям: выигрыш сгорел вместе с ней. */
.gcard.is-burnt .gcard-front.blank {
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(255, 120, 40, 0.5) 70%, #1a0505 92%),
    linear-gradient(160deg, #2a1218, #0e0508);
  animation: gBurn 1.1s ease-out both 0.25s;
}
@keyframes gBurn { from { filter: brightness(1.8) saturate(1.6); } to { filter: brightness(0.7); } }
.gcard.is-burnt { animation: gShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both 0.3s; }
@keyframes gShake {
  20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; }
}
.gcard.disabled { cursor: default; }
.gcard:not(.disabled):active { transform: scale(0.95); }

/* Искры выигрыша поверх стола. */
.gamble-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.gfx-spark {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: #ffe58a; box-shadow: 0 0 10px 2px rgba(255, 211, 77, 0.8);
  animation: gfxSpark 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both var(--d);
}
@keyframes gfxSpark {
  from { transform: none; opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}
.gfx-ring {
  position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 3px solid #ffd34d;
  animation: gfxRing 0.8s ease-out both;
}
@keyframes gfxRing { from { transform: scale(0.4); opacity: 1; } to { transform: scale(6); opacity: 0; } }

.gamble-outcome {
  text-align: center;
  min-height: 30px;
  margin: 18px 0 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.gamble-outcome b { font: 800 22px/1.1 'Unbounded', 'Manrope', system-ui, sans-serif; animation: pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.gamble-outcome span { font-size: 13px; line-height: 1.4; color: #c9bde0; animation: fade 0.5s both 0.15s; }
.gamble-outcome.win b {
  background: linear-gradient(180deg, #fff8dc, #ffd34d 55%, #e8a024);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 211, 77, 0.45));
}
.gamble-outcome.lose b { color: #ff8aa0; }

/* Тихая кнопка рядом с золотой: «Забрать» и «Забрать без риска». */
.take-btn {
  border: 0; border-radius: 16px;
  padding: 0 20px; min-height: 54px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #e6dcf5; font-family: inherit; font-size: 14px; font-weight: 800;
  cursor: pointer; transition: background 0.15s;
}
.take-btn:active { background: rgba(255, 255, 255, 0.1); }
.take-wide { width: 100%; min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
  .gamble.is-dealing .gcard, .gamble.is-ready .gcard-inner, .gamble-cta::after { animation: none; }
}

/* ---------- Плитки в ленте ---------- */

/* Собрано по присланному эталону.

   Плитка там не просто прямоугольник с обводкой: у неё двойной неоновый
   контур, стеклянный блик наискось, точечная сетка у низа и полоска света по
   нижнему краю. Прежняя плитка была плоской заливкой с рамкой, и лента
   выглядела таблицей, а не барабаном.

   Рамка ленты тоже оттуда: фиолетовый контур со свечением вместо серой
   линии - он собирает барабан в отдельный прибор на странице. */
.reel-wrap {
  height: 172px;
  border: 2px solid transparent;
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(120, 60, 220, 0.22), transparent 70%)
      padding-box,
    linear-gradient(180deg, #120424, #08010f) padding-box,
    linear-gradient(160deg, #a855f7, #5b21b6 50%, #a855f7) border-box;
  box-shadow: 0 0 26px -10px rgba(160, 32, 255, 0.36);
}

.reel-tile {
  position: relative;
  flex: 0 0 138px;
  width: 138px;
  gap: 7px;
  padding: 13px 10px 15px;
  border-radius: 16px;
  border: 2px solid var(--tier-color);
  background:
    radial-gradient(110% 80% at 50% 0%,
      color-mix(in srgb, var(--tier-color) 26%, transparent), transparent 68%),
    linear-gradient(165deg, var(--card-hi), var(--card));
  box-shadow:
    0 0 18px -6px var(--tier-color),
    inset 0 0 30px -10px var(--tier-color),
    inset 0 0 22px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* Второй контур внутри первого и блик наискось. Оба в одном псевдоэлементе:
   это чистое оформление поверх содержимого, лишний узел под него не нужен. */
.reel-tile::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--tier-color) 45%, transparent);
  background: linear-gradient(118deg,
    transparent 38%, rgba(255, 255, 255, 0.07) 42%,
    rgba(255, 255, 255, 0.07) 56%, transparent 60%);
  pointer-events: none;
}

/* Полоска света по нижнему краю - плитка от неё будто стоит на подсветке. */
.reel-tile::after {
  content: '';
  position: absolute;
  left: 26%; right: 26%; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--tier-color);
  box-shadow: 0 0 14px 3px var(--tier-color);
  pointer-events: none;
}

.tile-icon {
  width: 38px; height: 38px;
  filter: drop-shadow(0 0 10px -6px var(--tier-color));
  position: relative; z-index: 1;
}
.tile-name { font-size: 12px; font-weight: 600; position: relative; z-index: 1; }
.tile-value {
  font-size: 17px; font-weight: 900;
  position: relative; z-index: 1;
}

/* Плитка стала выше - стрелка растёт вместе с ней, иначе указывает ни на что. */
.reel-marker { --arrow-w: 26px; --arrow-h: 15px; }

/* ---------- Крупнее числа в составе кейса ---------- */

.item-row {
  padding: 15px 16px;
  border-left-width: 6px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tier-color) 14%, transparent), transparent 45%),
    var(--card);
}
.item-ico { width: 32px; height: 32px; filter: drop-shadow(0 0 8px -6px var(--tier-color)); }
.item-name { font-size: 16px; font-weight: 700; }
.item-mult { font-size: 12.5px; }
.item-value { font-size: 20px; font-weight: 900; }
.item-chance { font-size: 12px; }

.result-value { font-size: 52px; }
.result-name { font-size: clamp(20px, 6.2vw, 27px); }

/* Знак пустой карты: вскрытая карта не должна выглядеть как рубашка */
.gcard-empty {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.35;
  position: relative;
}
.gcard-empty::after {
  content: '';
  position: absolute;
  left: 50%; top: -4px; bottom: -4px;
  width: 2px; margin-left: -1px;
  background: currentColor;
  transform: rotate(45deg);
}

/* ---------- Мультиоткрытие и звук ---------- */

/* ---------- Партнёрский экран ---------- */

/* Долг по обороту закрывает вывод, поэтому он должен бросаться в глаза, а не
   всплывать неожиданной ошибкой в кассе. */
.wager-note {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 214, 10, 0.4);
  background: rgba(255, 214, 10, 0.1);
  color: var(--gold);
  font-size: 12.5px; font-weight: 700;
  margin-bottom: 14px;
}

.partner-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }

.promo-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  margin-bottom: 8px;
}
.promo-row.off { opacity: 0.5; }
.promo-code {
  font-family: ui-monospace, monospace;
  font-size: 14px; font-weight: 900; color: var(--gold);
  letter-spacing: 0.08em;
}
.promo-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.promo-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.admin-form {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(10, 2, 18, 0.4);
  margin-bottom: 16px;
}
.admin-form .form-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px;
}
/* Ячейки обязаны сжиматься: по умолчанию элемент сетки не уже своего
   минимального содержимого, а у полей ввода оно около 170 px. Двух таких
   колонок хватает, чтобы распереть страницу вширь на телефоне. */
.admin-form .form-grid > div { min-width: 0; }
.admin-form .form-grid .seed-input { width: 100%; }
.admin-form label {
  display: block; font-size: 10.5px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
}
.admin-form .wide { grid-column: 1 / -1; }
.admin-form .check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text); font-weight: 700;
  text-transform: none; letter-spacing: 0;
}

/* ============================================================
   ПРАЗДНИЧНЫЕ ЭФФЕКТЫ
   ============================================================ */

/* Слой поверх всего: эффекты не должны перехватывать нажатия и не должны
   влиять на раскладку, поэтому это отдельный фиксированный слой. */
.fx-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
}

/* ---------- Салют ---------- */

.fx-spark {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fx-color, #ffd60a);
  box-shadow: 0 0 12px 2px var(--fx-color, #ffd60a);
  animation: fxSpark var(--fx-dur, 1.1s) cubic-bezier(0.15, 0.6, 0.4, 1) forwards;
}
@keyframes fxSpark {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  /* Небольшое падение к концу: без него искры разлетаются как в невесомости. */
  100% { transform: translate(var(--fx-x), calc(var(--fx-y) + 60px)) scale(0.25); opacity: 0; }
}

/* ---------- Конфетти ---------- */

.fx-confetti {
  position: absolute;
  top: -24px;
  width: 9px; height: 14px;
  background: var(--fx-color, #ff2e8a);
  border-radius: 2px;
  animation: fxFall var(--fx-dur, 2.4s) linear forwards;
}
@keyframes fxFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(var(--fx-spin, 720deg)); opacity: 0; }
}

/* ---------- Вспышка экрана ---------- */

.fx-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%,
              var(--fx-color, rgba(255, 214, 10, 0.5)), transparent 65%);
  animation: fxFlash 0.75s ease-out forwards;
}
@keyframes fxFlash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Крупная надпись ---------- */

.fx-shout {
  position: absolute;
  left: 0; right: 0; top: 34%;
  text-align: center;
  font-size: 40px; font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 4px 12px #000;
  /* Задержка стоит между вылетом и уходом: --fx-hold добавляет паузу, на
     которой надпись просто висит. Растягивать всю анимацию нельзя - вместе с
     показом замедлился бы и вылет, а он должен быть резким. */
  animation:
    fxShoutIn 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) forwards,
    fxShoutOut 0.5s ease-in forwards calc(1.1s + var(--fx-hold, 0ms));
}
.fx-shout small {
  display: block; margin-top: 6px;
  font-size: 17px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--fx-color, #ffd60a);
}
@keyframes fxShoutIn {
  0%   { transform: scale(0.4) translateY(20px); opacity: 0; }
  62%  { transform: scale(1.12) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes fxShoutOut {
  0%   { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(1.06) translateY(-26px); opacity: 0; }
}

@media (max-width: 420px) {
  .fx-shout { font-size: 32px; }
  .fx-shout small { font-size: 15px; }
}

/* ---------- Покупка фриспинов ----------
   Три плитки: число, FREE SPINS, цена. Объёмные, но тише золотой кнопки
   «Открыть»: свет сверху, глянец на верхней половине, кромка снизу даёт
   толщину, и при нажатии плитка проседает на неё. Цвет приглушённый и без
   анимаций: пачки - дополнительное действие и не должны спорить с главным. */
.fsbuy { margin-top: 18px; padding-top: 7px; }

.fsbuy-row { display: flex; align-items: stretch; gap: 9px; }

.fsbuy-btn {
  flex: 1;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 6px 10px;
  margin-bottom: 3px;
  border: 0;
  border-radius: 16px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(190, 150, 255, 0.26), transparent 62%),
    linear-gradient(180deg, #2b1650 0%, #190a31 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(170, 130, 255, 0.28),
    inset 0 -12px 18px -12px rgba(0, 0, 0, 0.65),
    0 3px 0 #10051f,
    0 12px 20px -10px rgba(0, 0, 0, 0.7);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  /* Без этого плитка не сожмётся уже своей цены, и у дорогих кейсов
     («2 639 974 ₽») третья вылезает за край. */
  min-width: 0;
  transition: transform 0.08s, box-shadow 0.08s;
}
/* Глянец: светлая верхняя половина, как у выпуклой поверхности. */
.fsbuy-btn::before {
  content: '';
  position: absolute; left: 1px; right: 1px; top: 1px; height: 48%;
  border-radius: 15px 15px 40% 40% / 15px 15px 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.fsbuy-btn:not(:disabled):active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(170, 130, 255, 0.28),
    inset 0 -12px 18px -12px rgba(0, 0, 0, 0.65),
    0 1px 0 #10051f,
    0 6px 12px -8px rgba(0, 0, 0, 0.7);
}
.fsbuy-btn:disabled { opacity: 0.4; cursor: default; }

/* Число с тиснением: металл тот же, что у FREE SPINS в прологе серии. */
.fsbuy-count {
  position: relative;
  font: 800 20px/1 'Unbounded', 'Manrope', system-ui, sans-serif;
  background: linear-gradient(180deg, #fffbe8 0%, #ffd34d 55%, #e39a24 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(110, 60, 6, 0.9)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.fsbuy-word {
  position: relative;
  font-size: 9px; font-weight: 800; letter-spacing: 0.14em;
  color: #cdbdf0; text-transform: uppercase; white-space: nowrap;
}
.fsbuy-price {
  position: relative;
  max-width: 100%;
  /* Цена растёт вместе с ценой кейса: у «Вершины» это семизначное число.
     Поэтому кегль привязан к ширине экрана, а не задан жёстко. */
  font-size: clamp(10.5px, 3.2vw, 12.5px); font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Выделенная ступень: золотой кант и тёплый свет сверху. Пометку задаёт
   сервер - она про лесенку скидок, а не про вёрстку. */
.fsbuy-btn.is-popular {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 211, 77, 0.2), transparent 62%),
    linear-gradient(180deg, #2f1a46 0%, #1b0b2c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 200, 0.35),
    inset 0 0 0 1.5px #ffd34d,
    inset 0 -12px 18px -12px rgba(0, 0, 0, 0.65),
    0 3px 0 #3a2306,
    0 12px 22px -10px rgba(255, 190, 60, 0.35);
}
.fsbuy-btn.is-popular:not(:disabled):active {
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 200, 0.35),
    inset 0 0 0 1.5px #ffd34d,
    inset 0 -12px 18px -12px rgba(0, 0, 0, 0.65),
    0 1px 0 #3a2306,
    0 6px 12px -8px rgba(255, 190, 60, 0.3);
}
.fsbuy-flag {
  position: absolute; top: -7px; right: 8px; z-index: 1;
  padding: 2px 6px; border-radius: 6px;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #2a1300;
  background: linear-gradient(180deg, #ffe58a, #ffc93a);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* Тема кейса красит кант обычных плиток, выделенная остаётся золотой. */
.opener.is-themed .fsbuy-btn:not(.is-popular) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px color-mix(in srgb, var(--case-a) 45%, transparent),
    inset 0 -12px 18px -12px rgba(0, 0, 0, 0.65),
    0 3px 0 #10051f,
    0 12px 20px -10px rgba(0, 0, 0, 0.7);
}

/* ---------- Управление открытием ----------
   Одна строка: икс, золотая кнопка с ценой, переключатель авто. Громкая на
   экране одна кнопка, остальное тихое: когда выбранный икс залит тем же
   цветом, что и «Открыть», глаз прыгает между двумя одинаково яркими
   пятнами. Металл кнопки тот же, что у FREE SPINS и BIG WIN: она начинает
   историю, которую заканчивает экран выигрыша. */
.open-bar { display: flex; gap: 8px; margin-top: 16px; align-items: stretch; }

.open-stepper {
  flex: none;
  display: flex; align-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: opacity 0.2s;
}
/* Автооткрытие крутит по одному кейсу: икс гаснет, чтобы не обещать пачку. */
.open-stepper.is-off { opacity: 0.35; pointer-events: none; }
.step-btn {
  width: 32px; min-height: 54px; height: 100%;
  border: 0; background: none; color: #d9c8ff;
  font-family: inherit; font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer;
}
.step-btn:active { color: #fff; }
.step-val {
  min-width: 28px; text-align: center;
  font: 800 15px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: #ffe9a0;
}

.open-cta {
  flex: 1; min-width: 0;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 9px 11px 15px;
  border: 0; border-radius: 18px;
  color: #3a1d00; font-family: inherit; cursor: pointer;
  background: linear-gradient(180deg, #fff3c4 0%, #ffd34d 38%, #e8a024 62%, #ffcf5a 100%);
  /* Нижняя кромка даёт толщину, и нажатие её «съедает»: кнопка
     проваливается, как настоящая. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(120, 60, 0, 0.35),
    0 5px 0 #8a4f08, 0 14px 30px -8px rgba(255, 170, 40, 0.5);
  transition: transform 0.08s, box-shadow 0.08s;
  margin-bottom: 5px;
}
.open-cta:not(:disabled):active {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(120, 60, 0, 0.35),
    0 1px 0 #8a4f08, 0 8px 18px -8px rgba(255, 170, 40, 0.45);
}
.open-cta:disabled { filter: grayscale(0.85) brightness(0.6); cursor: default; }
/* Денег не хватает: кнопка выглядит приглушённой, но жмётся и ведёт в кассу. */
.open-cta.is-short { filter: grayscale(0.6) brightness(0.75); }
/* Блик раз в четыре секунды: притягивает взгляд, но не мигает. */
.open-cta::after {
  content: ''; position: absolute; inset: 0; translate: -130% 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%);
  animation: openSheen 4s cubic-bezier(0.65, 0, 0.35, 1) infinite 1.2s;
}
.open-cta:disabled::after { animation: none; }
/* «Забрать» после серии фриспинов - та же золотая кнопка, что «Открыть»:
   это деньги игрока, и бледная розовая плашка терялась на ярком итоге
   серии. Глянец сверху лежит отдельным слоем, блик бежит общий. */
.fs-collect {
  flex: none; width: 100%; margin-top: 16px;
  justify-content: center; padding: 17px 16px;
  font: 800 17px/1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.fs-collect[hidden] { display: none; }
.fs-collect::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 50%; pointer-events: none;
  border-radius: 18px 18px 40% 40% / 18px 18px 14px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.08));
}
@keyframes openSheen { 0%, 70% { translate: -130% 0; } 100% { translate: 130% 0; } }
.open-act {
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  font: 800 15px/1 'Unbounded', 'Manrope', system-ui, sans-serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.open-act > span, .open-act small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.open-act small {
  margin-top: 4px;
  font: 700 10px/1.1 'Manrope', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.75; text-shadow: none;
}
/* Цена - отдельной плашкой: это деньги игрока, и читаться они должны
   первыми, а не последним словом фразы капсом. */
.open-price {
  flex: none;
  padding: 8px 9px; border-radius: 12px;
  background: #2a1405; color: #ffd34d;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5);
  font: 800 clamp(11px, 3.3vw, 13px)/1 'Unbounded', 'Manrope', system-ui, sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.open-price[hidden] { display: none; }
/* Надпись не влезла рядом с ценой (см. fitOpenBtn): цена переезжает под неё,
   и обе строки читаются целиком. */
.open-cta.is-tight { flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; padding: 10px 10px 11px; }
.open-cta.is-tight .open-act { align-items: center; text-align: center; }
.open-cta.is-tight .open-price { text-align: center; }

.open-auto {
  flex: none; width: 52px;
  display: grid; place-items: center; align-content: center; gap: 1px;
  border: 0; border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #d9c8ff; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.open-auto svg { width: 22px; height: 22px; }
.open-auto small { font-size: 9px; font-weight: 800; line-height: 1; }
.open-auto small:empty { display: none; }
.open-auto.active { background: rgba(107, 189, 204, 0.16); box-shadow: inset 0 0 0 1.5px var(--cyan); color: #bff4ff; }

/* Подпись «Авто» слева: без неё три числа под кнопкой не говорили, что
   они такое. Повторное нажатие на выбранное число выключает авто. */
.auto-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.auto-row-label {
  flex: 0 0 auto; padding: 0 4px 0 2px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.auto-btn {
  flex: 1;
  padding: 9px 0;
  border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #b9add0;
  font-family: inherit; font-size: 13px; font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.auto-btn.active { background: rgba(107, 189, 204, 0.14); box-shadow: inset 0 0 0 1.5px var(--cyan); color: #bff4ff; }

@media (prefers-reduced-motion: reduce) { .open-cta::after { animation: none; } }

/* Ряд чисел в панели идущей серии: своё число подсвечено, под ним полоса
   прогресса и подпись «стоп» - нажатие останавливает серию. */
.auto-run-row { margin: 4px 0 12px; }
.auto-run-row .auto-btn:disabled { opacity: 0.35; cursor: default; }
.auto-btn.is-running {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 8px;
}
.auto-btn.is-running small { font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #ff8aa0; }
.auto-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%);
  background: linear-gradient(90deg, var(--cyan), #bff4ff);
  box-shadow: 0 0 8px var(--cyan);
  transition: width 0.35s ease;
}
.auto-btn.is-running:not(.is-stopping) { animation: autoRun 1.6s ease-in-out infinite; }
@keyframes autoRun { 50% { box-shadow: inset 0 0 0 1.5px var(--cyan), 0 0 14px -2px var(--cyan); } }
.auto-btn.is-stopping { opacity: 0.6; }

/* ---------- Подтверждение покупки ---------- */

.confirm-backdrop {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 1, 12, 0.8);
  backdrop-filter: blur(6px);
  animation: fade 0.2s ease;
}

.confirm-sheet {
  width: 100%; max-width: 340px;
  padding: 22px 20px 18px;
  border-radius: 24px;
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 214, 10, 0.2), transparent 60%),
    linear-gradient(170deg, #2d1758, #180a30);
  border: 1px solid rgba(255, 214, 10, 0.35);
  box-shadow: 0 30px 70px -20px #000;
  animation: sheetIn 0.28s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes sheetIn {
  from { transform: scale(0.86) translateY(18px); opacity: 0; }
}

/* Круг с числом прокрутов вместо иконки: сразу видно, что именно покупаешь. */
.confirm-art {
  width: 84px; height: 84px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 30px; font-weight: 900; color: #2a1400;
  background: linear-gradient(150deg, #fff3b0, #ffb020);
  box-shadow: 0 0 0 6px rgba(255, 214, 10, 0.06), 0 10px 30px -8px rgba(255, 214, 10, 0.32);
  animation: confirmPulse 2.2s ease-in-out infinite;
}
@keyframes confirmPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.confirm-title { font-size: 19px; font-weight: 900; margin-bottom: 14px; }

.confirm-rows {
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(10, 2, 18, 0.45);
  padding: 4px 12px;
  margin-bottom: 12px;
}
.confirm-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 0;
  font-size: 13px;
}
.confirm-row + .confirm-row { border-top: 1px solid var(--line); }
.confirm-row span { color: var(--muted); }
.confirm-row b { font-variant-numeric: tabular-nums; }
.confirm-row b.gold { color: var(--gold); font-size: 15px; }

.confirm-note { font-size: 11.5px; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1; }

/* Долг по обороту закрывает вывод, поэтому он должен бросаться в глаза, а не
   всплывать неожиданной ошибкой в кассе. */
.wager-note {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 214, 10, 0.4);
  background: rgba(255, 214, 10, 0.1);
  color: var(--gold);
  font-size: 12.5px; font-weight: 700;
  margin-bottom: 14px;
}

.partner-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }

.promo-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  margin-bottom: 8px;
}
.promo-row.off { opacity: 0.5; }
.promo-code {
  font-family: ui-monospace, monospace;
  font-size: 14px; font-weight: 900; color: var(--gold);
  letter-spacing: 0.08em;
}
.promo-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.promo-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.admin-form {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(10, 2, 18, 0.4);
  margin-bottom: 16px;
}
.admin-form .form-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px;
}
/* Ячейки обязаны сжиматься: по умолчанию элемент сетки не уже своего
   минимального содержимого, а у полей ввода оно около 170 px. Двух таких
   колонок хватает, чтобы распереть страницу вширь на телефоне. */
.admin-form .form-grid > div { min-width: 0; }
.admin-form .form-grid .seed-input { width: 100%; }
.admin-form label {
  display: block; font-size: 10.5px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
}
.admin-form .wide { grid-column: 1 / -1; }
.admin-form .check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text); font-weight: 700;
  text-transform: none; letter-spacing: 0;
}

/* ============================================================
   ПРАЗДНИЧНЫЕ ЭФФЕКТЫ
   ============================================================ */

/* Слой поверх всего: эффекты не должны перехватывать нажатия и не должны
   влиять на раскладку, поэтому это отдельный фиксированный слой. */
.fx-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
}

/* ---------- Салют ---------- */

.fx-spark {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fx-color, #ffd60a);
  box-shadow: 0 0 12px 2px var(--fx-color, #ffd60a);
  animation: fxSpark var(--fx-dur, 1.1s) cubic-bezier(0.15, 0.6, 0.4, 1) forwards;
}
@keyframes fxSpark {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  /* Небольшое падение к концу: без него искры разлетаются как в невесомости. */
  100% { transform: translate(var(--fx-x), calc(var(--fx-y) + 60px)) scale(0.25); opacity: 0; }
}

/* ---------- Конфетти ---------- */

.fx-confetti {
  position: absolute;
  top: -24px;
  width: 9px; height: 14px;
  background: var(--fx-color, #ff2e8a);
  border-radius: 2px;
  animation: fxFall var(--fx-dur, 2.4s) linear forwards;
}
@keyframes fxFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(var(--fx-spin, 720deg)); opacity: 0; }
}

/* ---------- Вспышка экрана ---------- */

.fx-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%,
              var(--fx-color, rgba(255, 214, 10, 0.5)), transparent 65%);
  animation: fxFlash 0.75s ease-out forwards;
}
@keyframes fxFlash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Крупная надпись ---------- */

.fx-shout {
  position: absolute;
  left: 0; right: 0; top: 34%;
  text-align: center;
  font-size: 40px; font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 4px 12px #000;
  animation: fxShout 1.6s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.fx-shout small {
  display: block; margin-top: 6px;
  font-size: 17px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--fx-color, #ffd60a);
}
@keyframes fxShout {
  0%   { transform: scale(0.4) translateY(20px); opacity: 0; }
  22%  { transform: scale(1.12) translateY(0); opacity: 1; }
  34%  { transform: scale(1); }
  78%  { opacity: 1; }
  100% { transform: scale(1.04) translateY(-26px); opacity: 0; }
}

@media (max-width: 420px) {
  .fx-shout { font-size: 32px; }
  .fx-shout small { font-size: 15px; }
}

/* ---------- Автооткрытие ---------- */

/* Ряд авто идёт отдельной строкой под количеством: это не «сколько кейсов за
   один прокрут», а «сколько прокрутов подряд», и смешивать их в одну строку
   значило бы предлагать выбрать одно вместо другого. */
.auto-panel {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(10, 2, 18, 0.5);
  text-align: center;
}
.auto-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.auto-left { font-size: 13px; font-weight: 800; color: var(--muted); }

.auto-total {
  font-size: 40px; font-weight: 900; line-height: 1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.auto-total.bump { animation: bump 0.3s ease; }
.auto-sub { font-size: 12px; color: var(--muted); margin: 6px 0 12px; }

/* Лог держит фиксированную высоту: без неё панель дёргалась бы по вертикали
   на каждом прокруте, и лента над ней прыгала бы вместе с ней. */
.auto-log {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  max-height: 68px; overflow: hidden;
}
.auto-chip {
  font-size: 11px; font-weight: 800;
  padding: 4px 9px; border-radius: 999px;
  border: 1.5px solid var(--tier-color, var(--line));
  color: var(--tier-color, var(--text));
  background: rgba(10, 2, 18, 0.6);
  animation: fsChip 0.3s ease both;
}

/* ============================================================
   ОБРЯД ОТКРЫТИЯ: кейс на сцене вместо ленты
   ============================================================ */

/* До первого нажатия на экране стоит сам кейс. Высота сцены равна высоте
   ленты, которая придёт ей на смену: иначе при подмене экран прыгал бы, и
   кнопка «Открыть» уезжала бы из-под пальца. */
/* Высота сцены - по содержимому, а не по формуле.
   
   Обложки у кейсов разной формы: вертикальные городские почти вдвое выше
   своей ширины, престольные наоборот шире. Ряд ограничивает их по ширине, и у
   широкой обложки при ×4 картинка выходит низкой - с фиксированной высотой
   под ней повисала пустая полоса в треть экрана. Поэтому потолок высоты задан
   картинке, а сцена облегает то, что получилось.
   
   Нижняя граница нужна, чтобы экран не прыгал между кейсами с очень разными
   обложками. */
.case-stage {
  position: relative;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Воздух сверху и снизу: кейс висит свободно, а не прижат к балансу и
     к кнопкам. Без него сцена читалась как картинка, вставленная между
     строками. Сверху больше: кейс покачивается вверх на 7 точек. */
  padding: 22px 0 16px;
}

/* Ряд кейсов. Ширина каждого считается из их числа, поэтому ×5 помещается на
   телефон без отдельного правила под каждое количество. */
.case-stage-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* Коробка под одну обложку. Ширина - доля ряда, высота - доля отведённых
   сцене 236 точек (было 196: на телефоне кейс выглядел мелким среди
   свободного места), поделённых на число рядов. Оба числа приходят из разметки,
   поэтому перенос по строкам происходит ровно там, где рассчитано, а общая
   высота сцены одинакова хоть при одном кейсе, хоть при пяти. */
.case-stage-box {
  flex: 0 0 min(86%, calc((100% - (var(--cols, 1) - 1) * 8px) / var(--cols, 1)));
  height: calc((236px - (var(--rows, 1) - 1) * 8px) / var(--rows, 1));
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.case-stage-art {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Свечение берётся из тона самой обложки - того же, которым покрашен экран
     кейса. Своих цветов у сцены нет. */
  filter:
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 26px hsl(var(--case-h1, 275) 85% 55% / 0.5))
    drop-shadow(0 0 60px hsl(var(--case-h2, 275) 85% 55% / 0.32));
  animation: caseFloat 3.4s ease-in-out var(--float-delay, 0ms) infinite;
  will-change: transform;
}

/* Кейс чуть дышит на месте: запечатанный, но живой. */
@keyframes caseFloat {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50%      { transform: translateY(-7px) rotate(0.6deg); }
}

.case-stage-hint {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  font-weight: 800;
  color: hsl(var(--case-h1, 275) 70% 72% / 0.75);
}

/* Тряска. Кейс ходит всё резче, потому что печать поддаётся не сразу. */
.case-stage.is-shaking .case-stage-art {
  animation: caseShake 0.26s ease-in-out var(--shake-delay, 0ms) infinite;
}
@keyframes caseShake {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  20%  { transform: translate(-6px, 2px) rotate(-3deg) scale(1.02); }
  40%  { transform: translate(5px, -3px) rotate(3.5deg) scale(1.03); }
  60%  { transform: translate(-5px, -1px) rotate(-3deg) scale(1.02); }
  80%  { transform: translate(4px, 3px) rotate(2.5deg) scale(1.03); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
.case-stage.is-shaking .case-stage-hint { animation: hintPulse 0.5s ease-in-out infinite; }
@keyframes hintPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Уход со сцены: кейс проваливается вниз, освобождая место ленте. */
.case-stage.is-leaving { animation: stageOut 0.26s ease-in forwards; }
@keyframes stageOut {
  to { opacity: 0; transform: scale(0.9); }
}

/* Пыль из-под кейса. Каждый клуб идёт своей дорогой: разлёт, подъём, размер и
   задержка задаются переменными при рождении, поэтому облако не повторяется. */
/* Пыль лежит поверх кейса, а не за ним: из-под него она и валит, и клубы
   должны затягивать его низ, а не прятаться позади. */
/* Пыль привязана к низу ряда с кейсами, а не к низу сцены: под рядом теперь
   стоит подпись, и от неё отсчитывать было бы неверно. */
.case-stage-dust {
  position: absolute;
  left: 0; right: 0;
  bottom: 22px;
  height: 0;
  z-index: 2;
  pointer-events: none;
}

/* Стелющаяся у земли муть. Без неё клубы висят в пустоте: видно, что они
   откуда-то летят, но не видно, что кейс стоит в пыли. */
.case-stage-dust::before {
  content: '';
  position: absolute;
  left: 12%; right: 12%; bottom: -26px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 60%,
    hsl(var(--case-h1, 275) 24% 70% / 0.4), transparent 72%);
  filter: blur(6px);
  opacity: 0;
  animation: dustHaze 0.5s ease-out forwards;
}
@keyframes dustHaze { to { opacity: 1; } }

/* Клубы идут кругами всё время, пока кейс трясётся: одного залпа не хватает,
   печать ломается дольше, чем живёт клуб. */
.dust-puff {
  position: absolute;
  left: var(--start);
  bottom: 0;
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  border-radius: 50%;
  /* Насыщенность низкая, края размыты: с плотным цветом и резкой границей
     клуб читается пузырём, а не пылью. Тон при этом всё равно берётся у
     обложки - у другого кейса пыль будет своего цвета. */
  background: radial-gradient(circle at 42% 42%,
    hsl(var(--case-h1, 275) 26% 74% / 0.62),
    hsl(var(--case-h2, 275) 22% 58% / 0.28) 52%,
    transparent 74%);
  filter: blur(9px);
  opacity: 0;
  animation: dustPuff 1.05s ease-out infinite;
}
@keyframes dustPuff {
  0%   { opacity: 0; transform: translate(0, 8px) scale(0.3); }
  25%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--rise) * -1)) scale(1.7); }
}

.reels { display: flex; flex-direction: column; gap: 10px; }
/* В пачке на телефоне ленты полноразмерные. Раньше они сжимались втрое: пять
   полных не помещались на экран. Пачка теперь не больше двух, обе полные
   ленты встают в один экран телефона, и выигрыш в пачке читается так же,
   как одиночный, а не мелким шрифтом. */

.batch-summary { margin-top: 22px; animation: pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1); }
.batch-total {
  text-align: center; font-size: 40px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.batch-total.plus { color: var(--green); }
.batch-total.minus { color: var(--muted); }
.batch-sub { text-align: center; font-size: 13px; color: var(--muted); margin: 6px 0 16px; }
.batch-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }

.sound-btn {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  padding: 9px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--cyan);
  cursor: pointer;
  line-height: 0;
}
.sound-btn:active { transform: scale(0.94); }
.sound-btn.off { color: var(--muted); opacity: 0.65; }

/* Шапка на узком экране: бренд ужимается, чтобы баланс влезал целиком. */
.topbar { gap: 8px; }
.brand { min-width: 0; flex: 0 1 auto; }
.balance-chip { padding: 7px 4px; flex: 0 0 auto; }
.balance-value { font-size: 15px; white-space: nowrap; }

@media (max-width: 400px) {
  .opener-logo { height: 26px; }
  .balance-value { font-size: 13.5px; }
  .balance-ico[data-ico] { width: 16px; height: 16px; }
}

/* ============================================================
   ПОДВАЛ И ПРАВОВЫЕ ДОКУМЕНТЫ
   ============================================================ */

.site-footer {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  padding: 26px 18px 30px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(10, 4, 16, 0.9));
  text-align: center;
}







.footer-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 460px;
  margin: 0 auto 20px;
}









/* ---------- Читалка документов ---------- */

.doc-backdrop {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(6, 1, 12, 0.85);
  backdrop-filter: blur(5px);
  display: flex; align-items: flex-end;
}

.doc-sheet {
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border-radius: 24px 24px 0 0;
  border-top: 2px solid var(--pink);
  animation: slideUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.doc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.doc-title { flex: 1; font-size: 19px; font-weight: 900; margin: 0; }

.doc-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 18px calc(28px + var(--safe-bottom));
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.doc-body h3 {
  font-size: 15px; font-weight: 900; color: var(--text);
  margin: 22px 0 8px;
}
.doc-body h3:first-child { margin-top: 0; }
.doc-body p { margin: 0 0 12px; }
.doc-body b { color: var(--text); }
.doc-body ul { margin: 0 0 14px; padding-left: 20px; }
.doc-body li { margin-bottom: 7px; }

.doc-mail {
  display: inline-block;
  font-size: 16px; font-weight: 800;
  color: var(--cyan); text-decoration: none;
}

.doc-entity {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; margin-bottom: 10px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 12.5px;
}
.doc-entity b { font-size: 13.5px; margin-bottom: 3px; }

/* ============================================================
   КАССА
   ============================================================ */

.balance-chip { cursor: pointer; font-family: inherit; }
.balance-chip:active { transform: scale(0.95); }

.payout-row {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-left: 5px solid var(--muted);
  margin-bottom: 10px;
}
.payout-row.pending { border-left-color: var(--cyan); }
.payout-row.processing { border-left-color: #ffd60a; }
.payout-row.paid { border-left-color: var(--green); }
.payout-row.rejected { border-left-color: var(--red); }
.payout-row.cancelled { border-left-color: var(--line); opacity: 0.7; }

.payout-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.payout-head b { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }

.payout-status {
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.4px;
  padding: 4px 10px; border-radius: 999px;
  border: 1.5px solid currentColor;
}
.payout-status.pending { color: var(--cyan); }
.payout-status.processing { color: #ffd60a; }
.payout-status.paid { color: var(--green); }
.payout-status.rejected { color: var(--red); }
.payout-status.cancelled { color: var(--muted); }

.payout-date { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.payout-comment {
  margin-top: 10px; padding: 10px 12px;
  border-radius: 10px; background: rgba(0, 0, 0, 0.3);
  font-size: 13px; line-height: 1.5;
}
.payout-cancel { margin-top: 12px; width: 100%; }
.payout-note { width: 100%; margin-top: 12px; font-size: 13px; }
.payout-row.admin .admin-actions { margin-bottom: 0; }

/* Плашка проверки заявки на вывод. Цвет - единственное, что сотрудник должен
   увидеть с первого взгляда, поэтому вся плашка залита им, а не только точка. */
/* ---------- Панель: пополнения и споры ---------- */

.bo-badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 900; text-align: center; vertical-align: 1px;
}
.kpi.kpi-alert { box-shadow: inset 0 0 0 1.5px var(--red); }
.dep-ids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dep-id {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
  padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03); color: var(--text); font: inherit; cursor: pointer;
}
.dep-id span { font-size: 10.5px; color: var(--muted); }
.dep-id b { font: 700 12px/1.2 'JetBrains Mono', ui-monospace, monospace; overflow-wrap: anywhere; }
.dep-id:active { transform: scale(0.97); }
.dep-fact { font-size: 12px; font-weight: 700; color: var(--muted); }
.dep-dispute {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255, 214, 10, 0.06);
}
.dep-dispute.is-new { border-color: var(--red); background: rgba(255, 23, 68, 0.07); }
.dep-dispute.is-won { border-color: var(--green); background: rgba(0, 200, 120, 0.06); }
.dep-dispute b { display: block; font-size: 13px; }
.dep-dispute small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.dep-dispute p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; }
.dep-error { color: var(--red); }
.dep-receipt { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--gold); font-size: 12px; }
.dep-receipt img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.dep-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dep-form { margin-top: 10px; display: grid; gap: 6px; }
.dep-label { font-size: 11.5px; color: var(--muted); }
.dep-export {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.dep-export .seed-input { width: 110px; flex: 0 0 auto; padding: 6px 10px; }
#depMore { width: 100%; margin-top: 4px; }
.payout-row.admin a[data-dep-user] { color: var(--gold); }
.dep-file {
  display: block; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px dashed var(--line); color: var(--muted); font-size: 12.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.risk-plate {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 11px 12px;
  border-radius: 12px; border: 1px solid;
}
.risk-green { background: rgba(99, 191, 148, 0.12); border-color: rgba(99, 191, 148, 0.45); }
.risk-red { background: rgba(217, 90, 104, 0.14); border-color: rgba(217, 90, 104, 0.55); }
.risk-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; }
.risk-green .risk-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(99, 191, 148, 0.18); }
.risk-red .risk-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(217, 90, 104, 0.2); }
.risk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.risk-text b { font-size: 14px; }
.risk-green .risk-text b { color: var(--green); }
.risk-red .risk-text b { color: #ff9aa6; }
.risk-text small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.risk-more {
  flex: none; padding: 7px 10px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.18); background: transparent;
  color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.risk-override { margin-top: 6px; font-size: 12px; color: var(--muted); }
.risk-details { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.risk-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.risk-list li { display: flex; gap: 10px; }
.risk-list li > span {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-size: 12px; font-weight: 800;
}
.risk-list li.ok > span { background: rgba(99, 191, 148, 0.18); color: var(--green); }
.risk-list li.bad > span { background: rgba(217, 90, 104, 0.2); color: #ff9aa6; }
.risk-list li.info > span { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.risk-list b { display: block; font-size: 13px; }
.risk-list small { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); word-break: break-word; }
.risk-summary { font-size: 12px; line-height: 1.5; color: var(--muted); margin-bottom: 8px; }
.risk-note { width: 100%; margin-top: 10px; resize: vertical; font-family: inherit; }

.field-label { color:var(--muted); font-size:12px; margin-bottom:-6px; }
.payout-requisites { margin-top:8px; padding:9px 11px; border-radius:10px; background:rgba(255,255,255,.045); color:var(--muted); line-height:1.45; }
.settings-help { color:var(--muted); font-size:12px; line-height:1.45; margin:0; }

.log-row small { color: var(--muted); font-size: 11px; }


/* ============================================================
   ФРИСПИНЫ
   ============================================================ */

.freespins { text-align: center; padding: 6px 0 2px; }

.fs-head {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 6px;
}
.fs-title {
  font-size: 13px; font-weight: 900; letter-spacing: 3px;
  background: linear-gradient(100deg, var(--gold), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fs-left {
  font-size: 12px; font-weight: 800; color: var(--cyan);
  padding: 3px 10px; border: 1.5px solid var(--cyan); border-radius: 999px;
}

/* Главное число экрана: ради него всё и крутится, поэтому оно крупнее
   любого другого текста в приложении. */
.fs-total {
  font-size: 46px;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, var(--gold) 60%, #ff9b2e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fs-total.bump { animation: fsBump 0.42s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes fsBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.fs-sub { font-size: 11px; color: var(--muted); letter-spacing: 1px; margin-bottom: 12px; }

.fs-reel-wrap { margin-bottom: 12px; }

.fs-log {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  min-height: 26px; margin-bottom: 12px;
}
.fs-chip {
  font-size: 11px; font-weight: 800;
  padding: 4px 9px; border-radius: 999px;
  border: 1.5px solid var(--tier-color, var(--line));
  color: var(--tier-color, var(--text));
  background: rgba(10, 2, 18, 0.6);
  animation: fsChip 0.3s ease both;
}
@keyframes fsChip { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 420px) {
  .fs-total { font-size: 38px; }
}

/* Полка направлений собрана по теме, а не по цене - выделяем её рамкой,
   чтобы разброс цен внутри не читался как ошибка сортировки. */
.shelf-country .shelf-title {
  background: linear-gradient(100deg, var(--cyan), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}

/* ============================================================
   КАРТОЧКА С ПРИСЛАННЫМ АРТОМ
   ============================================================ */

/* Оправы нет вовсе: ни рамки, ни подложки, ни тени блока. Арт вырезан по
   контуру и ложится прямо на фон страницы, поэтому любой прямоугольник вокруг
   него сразу читается как лишняя рамка вокруг пустоты. */
.shelf-row .case-card.has-art,
.shelf-row .case-card.has-art.free-ready {
  padding: 0 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.shelf-row .case-card.has-art::after { display: none; }

/*
 * У карточек с вырезанным артом нет оправы, поэтому обводка «подарок готов» и
 * «скоро откроется» рисовала прямоугольник вокруг пустоты - рамку вокруг
 * ничего. Вместо неё цветной ореол под самим рисунком: он читается так же, а
 * границ не выдумывает.
 */
.shelf-row .case-card.has-art.free-ready,
.shelf-row .case-card.has-art.locked { box-shadow: none; }
.shelf-row .case-card.has-art.free-ready .case-cover {
  background: radial-gradient(58% 42% at 50% 72%,
    color-mix(in srgb, var(--green) 30%, transparent), transparent 70%);
}
.shelf-row .case-card.has-art.locked .case-cover {
  background: radial-gradient(58% 42% at 50% 72%,
    color-mix(in srgb, var(--cyan) 28%, transparent), transparent 70%);
}

/* Высота слота идёт от пропорции самих обложек: её проставляет полка в
   переменной --art-ar (см. renderCases). Так вертикальные городские, почти
   квадратные и горизонтальные престольные арты получают каждый свою высоту,
   и ни один не оказывается ни обрезан, ни утоплен в пустой полосе.
   Отрицательные поля по бокам дают арту выйти за колонку - между карточками
   и так только прозрачный воздух. */
.shelf-row .case-card.has-art .case-cover {
  aspect-ratio: var(--art-ar, 1);
  height: auto;
  margin: 0 -8px 2px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.shelf-row .case-card.has-art .case-name {
  min-height: 0;
  margin: -2px 4px 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.shelf-row .case-card.has-art .case-foot { justify-content: center; margin: 0; }

/* Цена - единственный акцент под артом, поэтому она плашкой, а не строкой:
   иначе на пёстром рисунке её просто не видно. */
.shelf-row .case-card.has-art .case-price {
  padding: 6px 13px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ffb04a, #ff8438);
  color: #241307;
  box-shadow: 0 5px 16px rgba(255, 139, 56, 0.1);
}

/* Бесплатный «Начало»: плашка зелёная с золотым отливом - подарок, а не
   цена, и среди оранжевых цен она должна читаться иначе. */
.shelf-row .case-card.has-art.is-gift .case-price {
  background: linear-gradient(135deg, #7ff0a8, #2fbf74 55%, #e6c75a);
  color: #052414; -webkit-text-fill-color: #052414;
  box-shadow: 0 5px 16px rgba(47, 191, 116, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* «FREE» и число подарков - одна склеенная плашка из двух частей: слева
   яркое FREE, справа тёмный хвост с ×N. Хвост тише (тёмный фон, светлый
   текст без насыщенности): число - справка, а не главное. */
.case-price-pair { display: inline-flex; align-items: stretch; }
.shelf-row .case-card.has-art.is-gift .case-price-pair .case-price { border-radius: 7px 0 0 7px; }
.case-count {
  display: inline-flex; align-items: center;
  padding: 0 8px 0 7px;
  border-radius: 0 7px 7px 0;
  background: rgba(8, 36, 22, 0.85);
  box-shadow: inset 0 0 0 1px rgba(127, 240, 168, 0.35);
  color: #b9efcc;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* У этих двух полок арт вырезан по контуру и шире своей колонки, поэтому
   промежуток больше. Меняем ТОЛЬКО переменную: ширина ячейки пересчитается
   сама. */
.shelf-country .shelf-row,
.shelf-got .shelf-row { --shelf-gap: 12px; row-gap: 2px; }

.shelf-got .shelf-title {
  background: linear-gradient(100deg, #e8c56a, #c2410c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}

/* Перезапуск серии - редкое и приятное событие, его стоит выделить. */
.fs-chip.retrigger {
  border-color: var(--gold);
  color: #1a0510;
  background: linear-gradient(135deg, var(--gold), #ff9b2e);
  box-shadow: 0 0 16px -3px var(--gold);
}

/* ============================================================
   МЕНЮ-СЕТКА
   ============================================================ */

.top-right { display: flex; align-items: center; gap: 8px; }

.menu-btn {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: grid; place-items: center;
  color: var(--cyan);
  background: rgba(20, 6, 34, 0.85);
  border: 1px solid var(--line);
}
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn:active { transform: scale(0.94); }

.menu-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 1, 12, 0.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  /* Отступ сверху заметный: меню открывается кнопкой в шапке, и лист,
     прижатый к самому верху, наезжал на неё. */
  padding: 76px 16px 24px;
  overflow-y: auto;
}

/* Лист меню телефона - те же плитки, что в боковой панели компьютера
   (решение заказчика: «одинаково и пункты, и оформление»), в тёмной
   панели того же тона. Разделы - три в ряд, касса и поддержка ниже. */
.menu-sheet {
  width: 100%; max-width: 460px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(120, 78, 190, 0.34);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 30%),
    linear-gradient(180deg, #170932, #0d0420);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}
.menu-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; }
.menu-head-title { margin: 0; font: 800 20px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: #fff; }
.menu-close {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(160, 120, 255, 0.45); border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #24104a, #170a31); color: #fff;
}
.menu-close::before {
  content: ''; width: 9px; height: 9px; margin-left: 4px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.menu-nav .side-list { grid-template-columns: repeat(3, 1fr); gap: 9px; }
.menu-nav .side-item.is-sq .side-title { font-size: 12px; }
.menu-nav .side-bottom { margin-top: 12px; padding-top: 12px; }
.menu-nav .side-item.is-tall { min-height: 76px; padding: 12px 14px 12px 10px; }

/* ============================================================
   ЭКРАН КЕЙСА: СОСТАВ ПОД КНОПКОЙ
   ============================================================ */

.case-panel { margin-top: 14px; }

/* «Содержимое» тем же заголовком раздела, что и «Ваши выпадения». */
.drops-head {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0 12px;
}
.drops-head::before {
  content: ''; width: 4px; height: 18px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, #ffe58a, #e8a024);
  box-shadow: 0 0 12px rgba(255, 200, 60, 0.55);
}
.drops-head > span:first-child {
  font: 800 15px/1 'Unbounded', 'Manrope', system-ui, sans-serif;
  background: linear-gradient(180deg, #ffffff 30%, #d9c8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.drops-head > span:last-child {
  margin-left: auto; padding: 5px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #d9c8ff;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Два предмета в ряд на телефоне, от дорогого к дешёвому. */
.drops-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* То же правило для состава кейса: непарный хвост по центру. */
.drops-grid > *:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 5px);
}

/*
 * Плитка содержимого залита цветом своей редкости.
 *
 * Раньше цвет был только в рамке и в цене, а сама плитка у всех одинаково
 * тёмная - список из двадцати одинаковых прямоугольников, по которому не
 * видно, где дорогое, а где нет. Теперь редкость читается заливкой: сверху
 * плотнее, книзу сходит на нет.
 *
 * Заливка приглушённая (треть цвета), а свечения нет вовсе: двадцать светящихся
 * плиток разом - это витрина ларька, а не список предметов.
 */
.drop-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--tier-color) 34%, transparent),
    color-mix(in srgb, var(--tier-color) 9%, transparent) 58%,
    rgba(10, 2, 18, 0.5));
  border: 1px solid color-mix(in srgb, var(--tier-color) 42%, transparent);
}
.drop-card.is-showcase { border-style: dashed; }
.drop-ico { width: 34px; height: 34px; }
.drop-ico svg { width: 100%; height: 100%; }
.drop-name { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.drop-value { font-size: 15px; font-weight: 900; color: var(--tier-color); }

@media (min-width: 560px) {
  .drops-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   ПОДВАЛ
   ============================================================ */

.site-footer { padding: 26px 16px 40px; text-align: center; }

/* Ссылки - тонкий текст, без плиток: это служебная часть страницы. */
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 8px;
  margin-bottom: 22px;
}
.footer-link {
  background: none; border: none; padding: 0;
  font-size: 12px; font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.footer-link:hover { color: var(--cyan); }
.footer-dot { color: var(--line); font-size: 11px; }

.footer-counters {
  display: flex; justify-content: center; gap: 30px;
  margin-bottom: 20px;
}
.footer-counter { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.footer-counter-ico { width: 24px; height: 24px; }
.footer-counter-ico svg { width: 100%; height: 100%; }
.footer-counter-value {
  font-size: 19px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.footer-counter-label { font-size: 10.5px; color: var(--muted); letter-spacing: 0.4px; }

/* Обёртка нужна, чтобы кнопка не вставала в одну строку с «18+»:
   inline-flex сам по себе перенос не создаёт. */
.footer-tg-row { display: block; margin-bottom: 22px; }
.footer-tg {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--cyan);
  color: var(--cyan);
  font-size: 12.5px; font-weight: 800;
  text-decoration: none;
}
.footer-tg:active { transform: scale(0.96); }
.footer-tg-ico { width: 18px; height: 18px; }
.footer-tg-ico svg { width: 100%; height: 100%; }

/* Знаки партнёров. Приглушены намеренно: это подпись, а не реклама, и
   яркий ряд эмблем перетянул бы на себя весь низ страницы. */
.footer-marks {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 14px 20px;
  margin: 0 auto 16px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--line);
  max-width: 760px;
}
.footer-mark {
  display: block;
  width: 88px; height: 28px;
  color: rgba(205, 192, 228, 0.55);
  transition: color 0.15s;
}
.footer-mark svg { width: 100%; height: 100%; display: block; }
.footer-mark:hover { color: rgba(230, 220, 250, 0.9); }

/*
 * БАННЕРЫ ПОДДЕРЖКИ И КАНАЛА В САМОМ НИЗУ.
 *
 * Кликабельна вся карточка, а не только нарисованная на ней кнопка: попадать
 * пальцем в прямоугольник шириной в палец на картинке высотой в три
 * сантиметра неудобно, а промах по такой ссылке читается как «не работает».
 * Подсветка над нарисованной кнопкой показывает, куда ведёт нажатие.
 *
 * Координаты подсветки заданы долями картинки, а не пикселями: пиксели
 * разъехались бы на первом же экране другой ширины. Числа сняты с файлов.
 */
.footer-promos {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 560px;
  margin: 20px auto 18px;
}
.footer-promo {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.15s;
}
.footer-promo:active { transform: scale(0.985); }
.footer-promo img { display: block; width: 100%; height: auto; }

.footer-promo-hit {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.16);
  transition: opacity 0.15s;
}
.footer-promo:hover .footer-promo-hit,
.footer-promo:active .footer-promo-hit { opacity: 1; }

/* «Обратиться в поддержку»: кнопка во всю ширину в нижней трети. */
.footer-promo-hit.support { left: 2%; right: 2%; top: 65%; bottom: 8%; }
/* «Подписаться»: кнопка справа. */
.footer-promo-hit.channel { left: 61%; right: 6%; top: 62%; bottom: 10%; }

/*
 * Нижняя строка. Копирайт слева, возраст справа - и оба приглушены: это
 * служебная подпись, а не часть оформления. Возрастная отметка крупнее
 * копирайта намеренно, её обязаны заметить.
 */
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  max-width: 760px;
  margin: 18px auto 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.footer-copy { font-size: 11px; color: rgba(185, 160, 220, 0.6); }
.footer-age-mark {
  font-size: 14px; font-weight: 900;
  color: rgba(185, 160, 220, 0.75);
  letter-spacing: 0.5px;
}

/* Реквизиты - строкой во всю ширину, а не узким столбиком. */
.footer-entities { max-width: 760px; margin: 0 auto 14px; }
.footer-entity {
  font-size: 10.5px; line-height: 1.55; color: var(--muted);
  margin: 0 0 5px;
}
.footer-entity b { color: var(--text); font-weight: 800; }

.footer-mail {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); text-decoration: none;
}
.footer-mail:hover { color: var(--cyan); }
.footer-mail-ico { width: 16px; height: 16px; }
.footer-mail-ico svg { width: 100%; height: 100%; }

/* На узком экране логотип сжимается первым: важнее уместить баланс и меню. */
@media (max-width: 420px) {
  .brand-logo { height: 31px; }
  .balance-value { font-size: 14px; }
}

/* ============================================================
   LUCKY FORTUNE
   ============================================================ */

.fortune-page { max-width: 560px; margin: 0 auto; }

/* ---------- Витрина ----------
 *
 * Нарисована разметкой (прежде - присланная картинка с нарисованной на ней
 * кнопкой). Ночное небо с цветными туманностями, сверху крупное колесо с
 * блик-куполом, под ним надпись золотом и призы плашками. Ничего не
 * движется само: украшения только на нажатие, раздел уже падал на iPhone.
 */
.fortune-card {
  position: relative; overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(60% 40% at 50% 30%, rgba(255, 196, 70, 0.28), transparent 70%),
    radial-gradient(70% 50% at 10% 15%, rgba(53, 196, 255, 0.28), transparent 70%),
    radial-gradient(70% 55% at 95% 60%, rgba(255, 62, 180, 0.32), transparent 70%),
    radial-gradient(80% 60% at 30% 100%, rgba(122, 77, 255, 0.45), transparent 70%),
    linear-gradient(180deg, #1b0a3a, #0d0420);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* Звёзды - неподвижные точки фоном, без анимации. */
.fortune-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.7;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 12%, #ffe9a8, transparent 60%),
    radial-gradient(1px 1px at 68% 34%, #fff, transparent 60%),
    radial-gradient(1px 1px at 22% 52%, #cfe6ff, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 48%, #fff, transparent 60%),
    radial-gradient(1px 1px at 8% 76%, #ffd6f2, transparent 60%),
    radial-gradient(1px 1px at 55% 8%, #fff, transparent 60%);
}
.fortune-card-img { display: block; position: relative; width: 100%; padding: 22px 18px 0; text-align: center; }
.fc-art { position: relative; width: min(78%, 330px); aspect-ratio: 1; margin: 0 auto; }
.fc-art::before {
  content: ''; position: absolute; inset: -9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 200, 80, 0.45), rgba(255, 80, 190, 0.18) 60%, transparent);
}
.fc-wheel { position: relative; display: block; width: 100%; height: 100%; transform: rotate(-12deg); }
.fc-gloss, .fortune-gloss {
  position: absolute; inset: 2%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(60% 38% at 34% 22%, rgba(255, 255, 255, 0.42), transparent 70%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.16), transparent 42%, transparent 70%, rgba(0, 0, 0, 0.25));
}
.fc-hub {
  position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%);
  padding: 4.5%; border-radius: 50%;
  background: linear-gradient(160deg, #fff6c4, #f2b53a 35%, #8a4d0a 60%, #ffd76a 85%, #7a3f06);
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.75);
}
.fc-hub .fh-core b { font-size: clamp(12px, 3.6vw, 20px); }
.fc-text { position: relative; margin-top: 10px; }
.fc-logo {
  font: 900 34px/0.95 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe07a 40%, #f0a21f 62%, #ffe9a6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0.6px rgba(90, 40, 0, 0.6);
}
.fc-logo span {
  display: block; margin-top: 4px;
  font: 600 15px/1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: 0.62em; margin-right: -0.62em;
  background: linear-gradient(180deg, #ffffff, #d8c8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0;
}
.fc-lead { margin: 10px 0 12px; color: #e7dcf7; font: 600 14px/1.35 'Manrope', system-ui, sans-serif; }
.fc-prizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fc-prizes li {
  padding: 6px 10px; border-radius: 999px;
  color: #fff; font: 700 12px/1 'Manrope', system-ui, sans-serif; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.fc-prizes li.is-gold {
  color: #3a1800;
  background: linear-gradient(180deg, #fff3c4, #ffc84a 55%, #e3901a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px -4px rgba(255, 180, 40, 0.8);
}
.fortune-card-go {
  position: relative; display: block; width: calc(100% - 36px); margin: 18px auto 18px;
  padding: 15px 18px; border: 0; border-radius: 16px; cursor: pointer;
  color: #3a1800; font: 900 17px/1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: 0.02em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08) 50%, transparent 51%),
    linear-gradient(180deg, #fff1b3, #ffc63d 55%, #e08a12);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(150, 70, 0, 0.45), 0 12px 28px -10px rgba(255, 170, 30, 0.85);
  transition: transform 0.12s;
}
.fortune-card-go:active { transform: scale(0.98); }

/* ---------- Колесо ---------- */

.fortune-head { text-align: center; margin-bottom: 14px; }
.fortune-title {
  margin: 0;
  font: 900 30px/1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe07a 40%, #f0a21f 62%, #ffe9a6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fortune-title span {
  background: linear-gradient(180deg, #ffffff, #d8c8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fortune-sub { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }

/*
 * Колесо, указатель и ступица лежат в одном квадрате.
 *
 * Крутится ТОЛЬКО рисунок колеса. Ступица со словом SPIN, блик-купол и
 * указатель стоят неподвижно поверх: вращать их вместе с колесом значило
 * бы, что надпись кувыркается, а указатель уезжает с трёх часов.
 */
.fortune-wheel-box {
  position: relative;
  width: min(100%, 420px);
  margin: 0 auto;
  aspect-ratio: 1;
}
/* Свечение за колесом: тёплое сверху, розовое снизу. Неподвижное. */
.fortune-aura {
  position: absolute; inset: -8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 196, 70, 0.4), rgba(255, 70, 190, 0.2) 62%, transparent);
}
.fortune-wheel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  /* will-change обязателен: без него длинный поворот крупного рисунка идёт
     перерисовкой на каждом кадре и заметно дёргается на телефоне. */
  will-change: transform;
}

/* Лампы обода: бегут только во время прокрута. */
.fortune-wheel-box.is-spinning .lf-lamp-0 { animation: lfChase 0.32s steps(1) infinite; }
.fortune-wheel-box.is-spinning .lf-lamp-1 { animation: lfChase 0.32s steps(1) 0.16s infinite; }
@keyframes lfChase { 50% { opacity: 0.25; } }

/* Указатель на трёх часах: золотой клин с рубином. */
.fortune-pin {
  position: absolute;
  right: -4%; top: 50%;
  width: 12%; aspect-ratio: 36 / 44;
  transform: translateY(-50%);
  pointer-events: none;
}
.fortune-pin svg { display: block; width: 100%; height: 100%; filter: drop-shadow(-2px 3px 4px rgba(0, 0, 0, 0.55)); }

/* Ступица: глянцевая фиолетовая кнопка в золотом кольце. */
.fortune-hub {
  position: absolute;
  left: 50%; top: 50%;
  width: 27%; height: 27%;
  transform: translate(-50%, -50%);
  padding: 4.5%; border: none; border-radius: 50%;
  background: linear-gradient(160deg, #fff6c4, #f2b53a 35%, #8a4d0a 60%, #ffd76a 85%, #7a3f06);
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.75), 0 0 0 2px rgba(60, 25, 0, 0.6);
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
.fh-core {
  display: grid; place-content: center; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(70% 45% at 40% 25%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(circle at 50% 60%, #b04dff, #5a16b8 70%, #2c0866);
  box-shadow: inset 0 -4px 8px rgba(20, 0, 50, 0.6), inset 0 2px 2px rgba(255, 255, 255, 0.35);
}
.fh-core i { font-style: normal; color: #ffe58a; font-size: clamp(10px, 3.2vw, 16px); line-height: 1; text-align: center; }
.fh-core b {
  color: #fff; font: 900 clamp(14px, 4.6vw, 24px)/1 'Unbounded', 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(40, 0, 80, 0.7);
}
.fortune-hub:active { transform: translate(-50%, -50%) scale(0.94); }
.fortune-hub:disabled { cursor: default; filter: grayscale(0.55) brightness(0.7); }
/* Прокрутов нет: кнопка приглушена, но нажимается - нажатие объясняет, как
   получить ещё. */
.fortune-hub.locked { filter: grayscale(0.5) brightness(0.78); }

.fortune-status { text-align: center; margin: 18px 0 4px; }
.fortune-status-main { display: block; font-size: 16px; font-weight: 800; }
.fortune-status-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

.fortune-log { margin: 22px 0 0; }
.fortune-log-head {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.fortune-log-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  margin-bottom: 6px;
  font-size: 13.5px;
}
.fortune-log-date { color: var(--muted); flex: 0 0 auto; }

/* ---------- Окно «Выполните 2 шага» ---------- */

.fortune-steps {
  width: 100%; max-width: 420px;
  max-height: 92vh; overflow-y: auto;
  position: relative;
  border-radius: 26px;
}
/* Шапка окна: верхняя половина колеса выглядывает из туманности. */
.fortune-steps-art {
  position: relative; height: 150px; overflow: hidden; border-radius: 24px 24px 0 0;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(255, 196, 70, 0.35), transparent 70%),
    radial-gradient(60% 60% at 10% 20%, rgba(53, 196, 255, 0.25), transparent 70%),
    radial-gradient(60% 60% at 90% 30%, rgba(255, 62, 180, 0.3), transparent 70%),
    linear-gradient(180deg, #1b0a3a, #120628);
}
.fsa-wheel, .fsa-gloss { position: absolute; left: 50%; top: 18px; width: 240px; height: 240px; margin-left: -120px; }
.fsa-gloss { border-radius: 50%; background: radial-gradient(60% 38% at 34% 22%, rgba(255, 255, 255, 0.42), transparent 70%); }
.fsa-hub.fc-hub { top: 138px; width: 64px; height: 64px; padding: 6px; }
.fsa-hub .fh-core b { font-size: 15px; }
.fortune-steps-close {
  position: absolute; top: 10px; right: 10px;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10, 2, 20, 0.72);
  color: var(--text);
  font-size: 22px; line-height: 1;
  cursor: pointer;
}

.fortune-steps-panel {
  /* Панель встаёт под шапку с колесом, чуть наезжая на неё: колесо
     уходит за панель, как за горизонт. */
  position: relative;
  margin-top: -14px;
  padding: 20px 18px calc(20px + var(--safe-bottom));
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-hi), var(--bg-soft));
}
.fortune-steps-title {
  margin: 0; text-align: center;
  font-size: 26px; font-weight: 900;
}
.fortune-steps-title b { color: var(--pink); }
.fortune-steps-lead {
  margin: 4px 0 18px; text-align: center;
  font-size: 14px; color: var(--muted);
}

/*
 * Строка шага: кружок, текст, отметка справа и пояснение отдельной строкой
 * под ними.
 *
 * minmax(0, 1fr) обязателен. Без нуля в минимуме текстовый столбец не
 * ужимается ниже своего содержимого, и длинное название наезжало на отметку
 * «Выполнено» вместо того чтобы перенестись.
 */
.fortune-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'mark body flag'
    'mark note note';
  align-items: center;
  gap: 6px 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.fortune-step-mark { grid-area: mark; }
.fortune-step-body { grid-area: body; min-width: 0; }
.fortune-step-flag { grid-area: flag; }
.fortune-step-note { grid-area: note; }
.fortune-step-mark {
  display: grid; place-items: center;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: 2px solid var(--line);
  font-size: 16px; font-weight: 900;
}
.fortune-step-no {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
/* Длинное слово обязано переноситься: «Зарегистрироваться» одним куском шире
   своего столбца, и без разрешения на перенос оно наезжало на отметку. */
.fortune-step-name {
  display: block; margin-top: 2px;
  font-size: 14.5px; font-weight: 800;
  overflow-wrap: anywhere;
}
.fortune-step-note {
  display: block; margin-top: 2px;
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
}
.fortune-step-note:empty { display: none; }
.fortune-step-flag {
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}

/* Выполненный шаг зелёный, невыполненный красный. Цвет не единственный
   признак: у выполненного в кружке галочка, у невыполненного - номер. */
.fortune-step.done .fortune-step-mark { border-color: #24c78a; color: #24c78a; }
.fortune-step.done .fortune-step-flag { color: #24c78a; }
.fortune-step.todo { border-color: rgba(255, 70, 100, 0.55); }
.fortune-step.todo .fortune-step-mark { border-color: #ff4664; color: #ff4664; }
.fortune-step.todo .fortune-step-flag { color: #ff4664; }

.fortune-steps-go { width: 100%; margin-top: 6px; }

/* На узком экране отметка уезжает под текст: в строку с названием она
   отбирала у него половину ширины, и «Пополнить счёт на сумму от 500 ₽»
   ломалось на три строки при свободном месте справа. */
@media (max-width: 460px) {
  .fortune-step {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'mark body' 'mark note' 'mark flag';
  }
  .fortune-step-flag { justify-self: start; margin-top: 2px; }
}

/* ---------- Окно выигрыша Lucky Fortune ---------- */

.fortune-win-backdrop { background: radial-gradient(110% 80% at 50% 35%, rgba(70, 20, 110, 0.82), rgba(6, 1, 12, 0.92)); }
.fortune-win {
  position: relative; width: min(340px, 100%); text-align: center;
  padding: 0 20px 18px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(52, 22, 84, 0.96), rgba(20, 9, 32, 0.98) 55%);
  border: 1px solid rgba(220, 160, 255, 0.28);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 230, 255, 0.16);
}
.fortune-win-backdrop.is-in .fortune-win { animation: fwIn 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes fwIn { from { transform: translateY(30px) scale(0.9); opacity: 0; } }
.fw-stage { position: relative; height: 190px; margin: -70px -10px 6px; display: grid; place-items: center; }
.fw-rays {
  position: absolute; inset: 0; margin: auto; width: 270px; height: 270px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 130, 0.22) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%);
  mask: radial-gradient(closest-side, #000 25%, transparent 100%);
  animation: sgSpin 24s linear infinite;
}
.fw-ring {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 2px solid rgba(255, 220, 140, 0.5); opacity: 0;
}
.fortune-win-backdrop.is-in .fw-ring { animation: fwRing 1s ease-out 0.35s; }
@keyframes fwRing { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.7); } }
.fortune-win-art { position: relative; display: grid; place-items: center; }
.fortune-win-backdrop.is-in .fortune-win-art { animation: fwPop 0.75s cubic-bezier(0.2, 1.6, 0.4, 1) 0.1s both; }
@keyframes fwPop { from { transform: scale(0.2) rotate(-25deg); opacity: 0; } }
.fortune-win-kind {
  font: 800 11px/1 'Manrope', system-ui, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #e2b8ff;
}
.fortune-win-value {
  margin-top: 8px; font: 900 34px/1.05 'Unbounded', 'Manrope', system-ui, sans-serif;
  background: linear-gradient(180deg, #fff6d6, #ffd04f 55%, #f08a1c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fortune-win-backdrop[data-kind="percent"] .fortune-win-value { background-image: linear-gradient(180deg, #d6ffe6, #3ee08a 55%, #1b9e5c); }
.fortune-win-note { margin: 10px 0 16px; color: #cbb8de; font: 500 13px/1.45 'Manrope', system-ui, sans-serif; }
.fw-take {
  position: relative; overflow: hidden; width: 100%; padding: 15px; border: 0; border-radius: 16px; cursor: pointer;
  color: #2a0d3a; font: 800 15px/1 'Unbounded', 'Manrope', system-ui, sans-serif;
  background: linear-gradient(180deg, #fff3c4 0%, #ffd34d 40%, #e8a024 65%, #ffcf5a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 0 #8a4f08, 0 14px 30px -8px rgba(255, 170, 40, 0.5);
}
.fw-take::after {
  content: ''; position: absolute; inset: 0; translate: -130% 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
  animation: openSheen 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite 0.9s;
}
.fw-take:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 #8a4f08; }

/* Процент: изумрудный медальон, вокруг кружат мелкие проценты. */
.fw-medal {
  position: relative; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #b8ffd6, #2fbf74 45%, #0d5a33 100%);
  box-shadow: 0 0 0 6px rgba(255, 214, 110, 0.85), 0 0 0 10px rgba(120, 60, 0, 0.5), 0 18px 40px rgba(20, 200, 110, 0.45);
}
.fw-medal b { font: 900 64px/1 'Unbounded', system-ui, sans-serif; color: #f2fff7; text-shadow: 0 3px 0 rgba(0, 60, 30, 0.6); }
.fw-medal i {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  animation: fwOrbit 6s linear infinite; animation-delay: calc(var(--k, 0) * -1s);
}
.fw-medal i::before { content: '%'; position: absolute; translate: 74px -8px; color: #8cf5b4; font: 900 15px/1 'Unbounded', system-ui, sans-serif; text-shadow: 0 0 8px #3ee08a; }
.fw-medal i:nth-of-type(2) { --k: 1; } .fw-medal i:nth-of-type(3) { --k: 2; }
.fw-medal i:nth-of-type(4) { --k: 3; } .fw-medal i:nth-of-type(5) { --k: 4; } .fw-medal i:nth-of-type(6) { --k: 5; }
@keyframes fwOrbit { to { rotate: 360deg; } }

/* ×2 и запасной приз: золотая монета, переворачивается вокруг оси. */
.fw-coin {
  width: 122px; height: 122px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffcf45 40%, #c98612 75%, #7a4a06);
  box-shadow: inset 0 0 0 7px rgba(255, 240, 190, 0.55), inset 0 -6px 12px rgba(90, 50, 0, 0.5), 0 18px 34px rgba(255, 170, 40, 0.45);
  animation: fwFlip 3.4s ease-in-out 0.9s infinite;
}
.fw-coin b { font: 900 46px/1 'Unbounded', system-ui, sans-serif; color: #5a3200; text-shadow: 0 2px 0 rgba(255, 240, 190, 0.7); }
@keyframes fwFlip { 0%, 70% { transform: rotateY(0); } 85% { transform: rotateY(180deg) scale(1.05); } 100% { transform: rotateY(360deg); } }

/* Кейс: его обложка, крупно и с тенью. */
.fw-case { width: 190px; height: 190px; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 180, 70, 0.35)); animation: sgFloat 3.6s ease-in-out 1s infinite; }

/* Ваучер: золотой билет с вырезами по бокам и перфорацией. */
.fw-ticket {
  position: relative; width: 196px; height: 98px; display: grid; place-items: center; align-content: center; gap: 4px;
  rotate: -8deg; color: #4a2600;
  background: linear-gradient(135deg, #fff4c6, #ffd04f 45%, #e7a42a 100%);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
          radial-gradient(circle 12px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 12px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 12px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  filter: drop-shadow(0 14px 22px rgba(255, 170, 40, 0.45));
}
.fw-ticket::before { content: ''; position: absolute; inset: 10px 26px; border: 2px dashed rgba(120, 60, 0, 0.35); border-radius: 8px; }
.fw-ticket span { font: 800 12px/1 'Manrope', system-ui, sans-serif; letter-spacing: 0.4em; }
.fw-ticket b { font: 900 26px/1 'Unbounded', system-ui, sans-serif; }

/* Деньги: стопка монет, каждая падает на свою высоту. */
.fw-stack { position: relative; width: 120px; height: 120px; }
.fw-stack i {
  position: absolute; left: 50%; width: 92px; height: 26px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #fff6c8, #ffcf45 45%, #b97810);
  box-shadow: 0 6px 0 #8a5608, 0 10px 14px rgba(0, 0, 0, 0.4);
  animation: fwDrop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.fw-stack i:nth-child(1) { bottom: 6px; animation-delay: 0.2s; }
.fw-stack i:nth-child(2) { bottom: 26px; animation-delay: 0.32s; }
.fw-stack i:nth-child(3) { bottom: 46px; animation-delay: 0.44s; }
.fw-stack i:nth-child(4) { bottom: 66px; animation-delay: 0.56s; }
@keyframes fwDrop { from { transform: translateY(-120px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fw-rays, .fw-take::after, .fw-medal i, .fw-coin, .fw-case, .fw-stack i { animation: none; }
  .fortune-win-backdrop.is-in .fortune-win, .fortune-win-backdrop.is-in .fortune-win-art, .fortune-win-backdrop.is-in .fw-ring { animation: none; }
}

/* ============================================================
   ЛЕНТА ВЫИГРЫШЕЙ
   ============================================================ */

/* Витрина выпадений.

   Раньше это была крупная панель в неоновой рамке с большими карточками. На
   первом экране она занимала треть высоты и спорила с самими кейсами - хотя
   это фон, чужая игра, а не то, ради чего сюда пришли. Поэтому здесь всё
   поджато: карточки вытянутые и узкие, неон снят, промежутки между ними
   почти нулевые. Панель читается лентой, которая идёт мимо.

   Ширина карточки вынесена в переменную: её же использует анимация въезда, а
   два разных числа рано или поздно разъезжаются. */
.feed {
  /* Ширина карточки больше не фиксированная - см. .feed-card. Здесь остался
     только нижний предел и промежуток. */
  --feed-min: 158px;
  --feed-gap: 6px;
  position: relative;
  margin: 12px 0;
  padding: 7px 0 8px;
  border: 1px solid rgba(150, 70, 235, 0.3);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(21, 6, 42, 0.9), rgba(12, 2, 24, 0.9));
  overflow: hidden;
}

/* Строка заголовка: точка, надпись и тонкая линия, уходящая вправо. Линия
   во всю ширину делила панель пополам; отрезок, идущий от надписи и
   растворяющийся, читается подписью к ленте, а не разделителем. */
.feed-head {
  display: flex; align-items: center; gap: 9px;
  margin: 0 12px 8px;
  padding-bottom: 7px;
}
.feed-head::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(160, 32, 255, 0.45), transparent);
}
/* Точка тем же цветом, что и «игроков онлайн» в шапке: одно и то же
   обозначение живого, а не два разных. */
.feed-live {
  width: 6px; height: 6px; flex: 0 0 auto;
  border-radius: 50%;
  background: #24c78a;
  box-shadow: 0 0 0 3px rgba(36, 199, 138, 0.16);
}

/* Заголовок набран моноширинным с широкой разрядкой - так подписывают табло,
   а не рекламные баннеры. Прежний был жирным неоном с мигающей точкой рядом,
   то есть ровно тем набором приёмов, который выдаёт машинный дизайн.

   Моноширинный взят не из прихоти: другого способа сменить характер шрифта
   без внешней загрузки нет. Системный гротеск на телефоне один, узкие его
   начертания есть не везде, а веб-шрифт - это запрос по сети, которого у
   проекта пока нигде нет. Моноширинный есть на любой системе. */
.feed-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(219, 208, 240, 0.82);
}

/* Горизонтальная лента. Свайп пальцем работает, полосу прокрутки прячем.
   Промежуток задан полем карточки, а не gap: gap нельзя анимировать у
   отдельного элемента, а въезжающая карточка должна раздвигать соседей
   вместе со своим отступом. */
.feed-track {
  display: flex;
  padding: 0 10px 1px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.feed-track::-webkit-scrollbar { display: none; }

/*
 * КАРТОЧКА ЛЕНТЫ: РИСУНОК СЛЕВА, НАЗВАНИЕ И СУММА СПРАВА.
 *
 * Раньше всё стояло столбиком в узкой карточке шириной 74 точки. Из-за этого
 * название переносилось на две строки и обрезалось, а крупная сумма не
 * помещалась в строку и уезжала в многоточие: «3 620 00...». Рядом с
 * присланными баннерами блок читался технической врезкой, а не витриной.
 *
 * Сетка, а не флекс: рисунок обязан занимать обе строки по высоте, и только
 * grid-row это выражает без лишней обёртки в разметке.
 */
.feed-card {
  position: relative;
  display: grid;
  /* auto, а не 1fr: карточка обязана подстроиться под содержимое. При
     фиксированной ширине крупные суммы не помещались и обрезались
     многоточием - «3 620 00...», - а ради этих сумм ленту и смотрят. */
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  flex: 0 0 auto;
  width: auto;
  min-width: var(--feed-min);
  /* Верхний предел нужен только анимации въезда: она разводит соседей,
     упираясь в max-width, а собственная ширина карточки всегда меньше. */
  max-width: 420px;
  margin-right: var(--feed-gap);
  padding: 9px 11px 10px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Принадлежность к редкости показывает полоса слева и лёгкая подложка под
     рисунком, а не рамка целиком: рамка в цвет редкости на семи карточках
     подряд превращала ленту в светофор. */
  border-left: 3px solid var(--tier-color, var(--line));
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--tier-color, #fff) 13%, transparent), transparent 58%),
    rgba(255, 255, 255, 0.045);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.feed-card:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.08); }

/* Новый выигрыш въезжает слева, раздвигая остальные вправо. */
.feed-card.is-new { animation: feedIn 0.55s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes feedIn {
  from {
    max-width: 0; margin-right: 0; padding-left: 0; padding-right: 0;
    opacity: 0; transform: scale(0.8);
  }
  to {
    max-width: 420px; margin-right: var(--feed-gap);
    padding-left: 11px; padding-right: 11px;
    opacity: 1; transform: none;
  }
}

.feed-art {
  grid-row: 1 / 3;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--tier-color, #fff) 16%, rgba(0, 0, 0, 0.28));
}
.feed-art svg { width: 26px; height: 26px; display: block; }

/* Высота подписи задана жёстко на две строки.
   Иначе длинное название переносится, карточка вырастает, и сумма уезжает
   вбок к остаткам названия вместо того чтобы стоять под ним. */
/* Многоточие остаётся только у НАЗВАНИЯ: оно второстепенно, и длинное имя
   предмета не должно растягивать карточку через весь экран. */
.feed-name {
  grid-column: 2;
  display: block;
  max-width: 180px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; font-weight: 600; line-height: 1.2;
  color: rgba(255, 255, 255, 0.72);
}

/* Сумма не сжимается и не обрезается НИКОГДА: ни overflow, ни многоточия
   здесь нет намеренно. Карточка шире - пусть будет шире. */
.feed-value {
  grid-column: 2;
  display: block;
  margin-top: 3px;
  font-size: 15px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--tier-color, var(--text));
  white-space: nowrap;
}

/* ---------- Выигрыш из ленты: сцена «откуда выпало» ----------
   Слои снизу вверх: затемнение с размытием, лучи в тон кейса, пылинки,
   кейс-источник, луч между ним и карточкой, сама карточка, подписи. Всё
   движение - классы is-in / is-out и переменные, без анимаций с заполнением:
   повторное открытие начинает сцену с нуля. */
.feed-scene {
  position: fixed; inset: 0; z-index: 96;
  display: grid; place-items: center;
  padding: 16px;
  overflow: hidden;
}
.feed-scene[hidden] { display: none; }
.fsc-dim {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 35%, rgba(30, 8, 50, 0.72), rgba(4, 0, 10, 0.94));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.45s;
}
.fsc-sky { position: absolute; left: 50%; top: 32%; width: 0; height: 0; pointer-events: none; }
.fsc-rays {
  position: absolute; left: -380px; top: -380px; width: 760px; height: 760px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--glow-a) 32%, transparent) 0deg 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%); mask: radial-gradient(circle, #000 8%, transparent 62%);
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.9s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  animation: fscSpin 60s linear infinite;
}
.fsc-rays.is-back {
  background: repeating-conic-gradient(from 9deg,
    color-mix(in srgb, var(--glow-b) 22%, transparent) 0deg 3deg, transparent 3deg 14deg);
  animation-duration: 90s; animation-direction: reverse;
}
@keyframes fscSpin { to { rotate: 360deg; } }

.fsc-motes { position: absolute; left: 50%; top: 34%; pointer-events: none; }
.fsc-motes i {
  position: absolute; left: var(--x); top: 60px;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff4cf; box-shadow: 0 0 8px 2px var(--glow-a);
  opacity: 0;
}
.feed-scene.is-in .fsc-motes i { animation: fscMote var(--t) ease-out infinite var(--d); }
@keyframes fscMote {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift), -150px) scale(1.2); }
}

.fsc-body {
  position: relative; width: min(100%, 400px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.fsc-stage { position: relative; width: 100%; height: 300px; }
/* Кейс-источник: поднимается из света за карточкой, чуть выше и левее, -
   так оба читаются разом и не закрывают друг друга. */
.fsc-cover {
  position: absolute; left: 50%; top: 0; width: 240px; height: 225px; margin-left: -168px;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transform: translateY(60px) scale(0.6); filter: blur(6px) brightness(2);
  transition: opacity 0.6s 0.35s, transform 0.9s 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s 0.35s;
}
.fsc-cover img, .fsc-cover svg {
  max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 26px var(--glow-a)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.7));
}
/* Луч от кейса к карточке: та самая связь «выпал отсюда». */
.fsc-beam {
  position: absolute; left: 50%; top: 120px; width: 90px; height: 120px; margin-left: -60px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--glow-a) 70%, #fff), transparent 80%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  transform-origin: 50% 0; rotate: -28deg;
  opacity: 0; transform: scaleY(0); filter: blur(3px);
  transition: opacity 0.5s 0.7s, transform 0.6s 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Карточка: вылетает с плитки ленты (--fx, --fy, --fs), делает оборот и
   садится справа внизу сцены, поверх кейса. */
.fsc-card {
  position: absolute; left: 50%; bottom: 0; width: 150px; margin-left: -40px;
  perspective: 900px;
  transform: translate(var(--fx), var(--fy)) scale(var(--fs)) rotateY(0deg);
  opacity: 0;
}
.fsc-card .drop-card.rw-skin { width: 100%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier-color) 60%, transparent), 0 24px 40px -12px rgba(0, 0, 0, 0.8), 0 0 40px -10px var(--tier-color); }
.feed-scene.is-in .fsc-card { animation: fscCard 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes fscCard {
  0%   { opacity: 1; transform: translate(var(--fx), var(--fy)) scale(var(--fs)) rotateY(0deg) rotate(0deg); }
  55%  { transform: translate(calc(var(--fx) * 0.2), calc(var(--fy) * 0.2 - 50px)) scale(1.1) rotateY(300deg) rotate(-6deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotateY(360deg) rotate(4deg); }
}
.feed-scene.is-in .fsc-dim { opacity: 1; }
.feed-scene.is-in .fsc-rays { opacity: 1; transform: scale(1); }
.feed-scene.is-in .fsc-cover { opacity: 1; transform: none; filter: none; }
.feed-scene.is-in .fsc-beam { opacity: 0.55; transform: scaleY(1); }

.fsc-info { margin-top: 18px; min-height: 0; }
.fsc-info > * { opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.feed-scene.is-in .fsc-info > * { opacity: 1; transform: none; }
.feed-scene.is-in .fsc-info > :nth-child(1) { transition-delay: 0.75s; }
.feed-scene.is-in .fsc-info > :nth-child(2) { transition-delay: 0.82s; }
.feed-scene.is-in .fsc-info > :nth-child(3) { transition-delay: 0.9s; }
.feed-scene.is-in .fsc-info > :nth-child(4) { transition-delay: 1s; }
.feed-scene.is-in .fsc-info > :nth-child(5) { transition-delay: 1.06s; }
.fsc-tier {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 10px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tier-color); box-shadow: inset 0 0 0 1.5px var(--tier-color);
  background: color-mix(in srgb, var(--tier-color) 12%, transparent);
}
.fsc-name.result-name { margin-top: 10px; margin-bottom: 4px; font-size: clamp(19px, 5.6vw, 24px); }
.fsc-value {
  font: 800 34px/1.1 'Unbounded', 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff8dc 10%, #ffd34d 55%, #d98a12 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(90, 30, 0, 0.6)) drop-shadow(0 0 18px rgba(255, 190, 60, 0.3));
}
.fsc-from {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-top: 14px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #a99cc4;
}
.fsc-from::before, .fsc-from::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #a99cc4); }
.fsc-from::after { transform: scaleX(-1); }
.fsc-case { margin-top: 6px; font: 800 17px/1.2 'Unbounded', 'Manrope', system-ui, sans-serif; color: #fff; }

.fsc-actions {
  display: flex; gap: 10px; width: 100%; margin-top: 20px; align-items: flex-start;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s 1.15s, transform 0.6s 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.fsc-actions .open-cta { min-height: 54px; }
.fsc-actions .open-cta[hidden] { display: none; }
.feed-scene.is-in .fsc-actions { opacity: 1; transform: none; }

/* Уход - быстрый и общий: всё гаснет разом, без обратного полёта. */
.feed-scene.is-out .fsc-dim,
.feed-scene.is-out .fsc-body,
.feed-scene.is-out .fsc-sky,
.feed-scene.is-out .fsc-motes { opacity: 0; transition: opacity 0.17s; transition-delay: 0s; }
.feed-scene.is-out .fsc-body { transform: scale(0.96); transition: opacity 0.17s, transform 0.17s; }

/* ============================================================
   FREE MONEY: РАЗДЕЛ ИВЕНТОВ
   ============================================================ */

/*
 * Бенто: плитки одной сетки, одного радиуса и одной рамки, а цвет несёт
 * только содержимое (фото машины, колесо, стекло «Начала»). Раньше у каждого
 * ивента был свой фон и своя кнопка, и вместе они не сочетались (замечание
 * заказчика). Общая палитра - в переменных ниже; кнопка одна, золотая.
 *
 * Без filter и backdrop-filter на том, что движется: на iPhone раздел уже
 * падал из-за мигающих фильтров (см. историю в CLAUDE.md, «Free Money»).
 */
#view-freemoney {
  --fm-tile: #150c24;
  --fm-line: rgba(255, 255, 255, 0.08);
  --fm-text: #f5f0fb;
  --fm-muted: #a99bbd;
  --fm-gold-1: #fff3c4;
  --fm-gold-2: #ffc84a;
  --fm-gold-3: #e3901a;
  --fm-radius: 24px;
}
.fm-title {
  margin: 18px 2px 12px; text-align: left;
  font: 800 21px/1.2 'Unbounded', 'Manrope', system-ui, sans-serif; color: #fff;
}

/* Вкладки стоят наверху раздела и за прокруткой не едут (решение
   заказчика). Переход по вкладке прокручивает к ивенту под шапкой. */
.fm-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -18px 18px; padding: 8px 18px;
  border-top: 1px solid var(--fm-line); border-bottom: 1px solid var(--fm-line);
}
.fm-tabs::-webkit-scrollbar { display: none; }
.fm-tab {
  flex: none; padding: 8px 12px; border: 0; border-radius: 11px; cursor: pointer;
  background: none; color: #c9bedb;
  font: 600 15px/1 'Manrope', system-ui, sans-serif; white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
/* Выбранный пункт - фиолетовой заливкой и жирным (не золотом: золото у
   кнопок действия, и вкладка с ним спорила). */
.fm-tab.active {
  color: #fff; font-weight: 800;
  background: linear-gradient(180deg, #a55bff, #7a2fe0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px -8px rgba(160, 80, 255, 0.9);
}

/* Между плитками заметный воздух (просьба заказчика): плитки читаются отдельными. */
.fm-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.fm-tile {
  grid-column: span 2; position: relative; min-width: 0;
  border-radius: var(--fm-radius); padding: 14px;
  background: var(--fm-tile); border: 1px solid var(--fm-line);
  scroll-margin-top: calc(var(--topbar-h, 64px) + 60px);
}
.fm-tile[hidden] { display: none; }
.fm-start, .fm-bot { grid-column: span 1; padding: 0; overflow: hidden; }
.fm-drive { padding: 0; overflow: hidden; }
.fm-tile-head { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 12px; flex-wrap: wrap; }
.fm-tile-title { margin: 0; font: 800 16px/1.15 'Unbounded', 'Manrope', system-ui, sans-serif; color: var(--fm-text); }
/* «Ваши подарки» - кнопка во всю плитку, список раскрывается под ней. */
.fm-gifts { padding: 0; overflow: hidden; }
.fm-gifts-toggle {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 0; cursor: pointer; text-align: left; color: var(--fm-text); font: inherit;
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(255, 200, 74, 0.22), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}
.fm-gifts-ico {
  flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #2b1500;
  background: linear-gradient(180deg, var(--fm-gold-1), var(--fm-gold-2) 55%, var(--fm-gold-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 0 #8a4f08;
}
.fm-gifts-ico svg { width: 24px; height: 24px; }
.fm-gifts-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fm-gifts-txt b { font: 800 15px/1.1 'Unbounded', 'Manrope', system-ui, sans-serif; }
.fm-gifts-txt small { color: var(--fm-muted); font: 600 12px/1 'Manrope', system-ui, sans-serif; }
.fm-gifts-chev {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.08);
  display: grid; place-items: center; transition: transform 0.25s;
}
.fm-gifts-chev::before {
  content: ''; width: 8px; height: 8px; margin-top: -3px; rotate: 45deg;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.fm-gifts-toggle[aria-expanded="true"] .fm-gifts-chev { transform: rotate(180deg); }
.fm-gifts-body { padding: 4px 14px 16px; }
.fm-gifts-body[hidden] { display: none; }
.fm-tile-note { margin-left: auto; color: var(--fm-muted); font: 600 12px/1.2 'Manrope', system-ui, sans-serif; }

/* Одна главная кнопка на весь раздел: золото с тёмным текстом. */
.fm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 18px; border: 0; border-radius: 14px; cursor: pointer; text-decoration: none;
  color: #2b1500; font: 800 14px/1 'Manrope', system-ui, sans-serif; white-space: nowrap;
  background: linear-gradient(180deg, var(--fm-gold-1), var(--fm-gold-2) 55%, var(--fm-gold-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 0 #8a4f08;
}
.fm-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 0 #8a4f08; }
.fm-btn-glass {
  color: #fff; background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.fm-btn-glass:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }

/* ---------- Ваши подарки ---------- */
/* Простые плитки, не карточки полки (почему - в renderBonuses). */
.fm-gift-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fm-gift {
  position: relative; flex: 0 1 calc((100% - 10px) / 2); max-width: 220px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 10px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--fm-line);
  background: radial-gradient(90% 70% at 50% 30%, rgba(255, 200, 90, 0.14), transparent 70%), rgba(255, 255, 255, 0.03);
  color: var(--fm-text); font: inherit; text-align: center;
}
.fm-gift img { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: contain; }
.fm-gift-n {
  position: absolute; top: 8px; right: 8px; padding: 6px 10px; border-radius: 999px;
  color: #3a2200; background: linear-gradient(180deg, var(--fm-gold-1), var(--fm-gold-2) 55%, var(--fm-gold-3));
  font: 800 15px/1 'Unbounded', 'Manrope', system-ui, sans-serif;
}
.fm-gift-name { font: 800 15px/1.15 'Unbounded', 'Manrope', system-ui, sans-serif; }
.fm-gift-go {
  padding: 9px 14px; border-radius: 12px; color: #2b1500; white-space: nowrap;
  background: linear-gradient(180deg, var(--fm-gold-1), var(--fm-gold-2) 55%, var(--fm-gold-3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 0 #8a4f08; font: 800 13px/1 'Manrope', system-ui, sans-serif;
}

/* ---------- Dream Car (розыгрыш автомобиля) ----------
   По образцу 1Win: фото во всю плитку, заголовки широким жирным шрифтом
   поверх неба, низ фото уходит в цвет плитки. */
.dv-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.dv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.dv-photo::before, .dv-photo::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
/* Сверху лёгкое затемнение под заголовки, снизу фото тает в плитку. */
.dv-photo::before { top: 0; height: 46%; background: linear-gradient(180deg, rgba(8, 20, 48, 0.55), rgba(8, 20, 48, 0)); }
.dv-photo::after { bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(21, 12, 36, 0), var(--fm-tile)); }
.dv-badge {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 7px 9px; border-radius: 99px;
  color: #fff; font: 700 11px/1 'Manrope', system-ui, sans-serif; letter-spacing: 0.04em;
  background: rgba(10, 18, 40, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.dv-badge i { width: 8px; height: 8px; border-radius: 50%; background: #3ef08f; box-shadow: 0 0 0 3px rgba(62, 240, 143, 0.25); }
.dv-head {
  position: relative; z-index: 1; padding: 50px 14px 0; text-align: center; color: #fff;
  font-family: 'Unbounded', 'Manrope', system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 20, 60, 0.45);
}
.dv-kicker { font-size: 15.5px; font-weight: 600; line-height: 1.15; letter-spacing: 0.02em; }
.dv-give { margin-top: 12px; font-size: 22px; font-weight: 800; line-height: 1; }
/* Марка - самое жирное на плитке, «Дарим» - следующее по жирности. */
.dv-brand { margin-top: 6px; font-size: clamp(26px, 8.4vw, 46px); font-weight: 900; line-height: 1; letter-spacing: -0.01em; }
.dv-model { margin-top: 8px; font-size: clamp(20px, 6vw, 30px); font-weight: 600; line-height: 1; letter-spacing: 0.02em; }
.dv-body { position: relative; padding: 2px 16px 16px; }
.dv-lead { margin: 0 0 14px; color: #ece6f5; font: 500 14px/1.4 'Manrope', system-ui, sans-serif; }
.dv-count { margin-bottom: 10px; color: var(--fm-muted); font: 600 16px/1 'Manrope', system-ui, sans-serif; }
.dv-count b { color: #fff; font-weight: 800; }
/* Билеты - контур с выемкой снизу, как у образца; полученные залиты золотом. */
.dv-tickets { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-bottom: 12px; }
.dv-t {
  position: relative; display: grid; place-items: center; aspect-ratio: 0.82;
  border: 1.5px solid rgba(255, 255, 255, 0.28); border-radius: 7px;
  color: rgba(255, 255, 255, 0.45); font: 700 11px/1 'Manrope', system-ui, sans-serif; font-style: normal;
}
.dv-t::after {
  content: ''; position: absolute; left: 50%; bottom: -1.5px; width: 9px; height: 5px; translate: -50% 0;
  border-radius: 9px 9px 0 0; background: var(--fm-tile);
  border: 1.5px solid rgba(255, 255, 255, 0.28); border-bottom: 0;
}
.dv-t.got {
  border-color: transparent; color: #3a2200;
  background: linear-gradient(180deg, var(--fm-gold-1), var(--fm-gold-2) 55%, var(--fm-gold-3));
}
.dv-t.got::after { border-color: transparent; }
.dv-next { color: var(--fm-muted); font: 600 13px/1.3 'Manrope', system-ui, sans-serif; }
.dv-next b { color: #fff; }
.dv-body .fm-btn { width: 100%; }

/* ---------- Бесплатный кейс «Начало»: стекло ----------
   Жидкое стекло без backdrop-filter: под плиткой цветное пятно, сверху
   полупрозрачные слои и блики по кромке. Размытие за стеклом на iPhone
   пересчитывалось бы на каждом кадре прокрутки. */
.st-glass {
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center;
  padding: 12px 12px 14px; text-align: center; color: var(--fm-text);
  background:
    radial-gradient(90% 60% at 20% 100%, rgba(255, 140, 60, 0.45), transparent 70%),
    radial-gradient(80% 60% at 100% 40%, rgba(255, 70, 160, 0.35), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)), #24123a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -14px 24px -18px rgba(255, 255, 255, 0.35);
}
.st-glass::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)); pointer-events: none;
}
.st-cover { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.st-cover img { width: 92px; height: 92px; object-fit: contain; display: block; }
.st-badge {
  position: absolute; right: -8px; top: -2px; padding: 4px 7px; border-radius: 99px;
  color: #3a2200; font: 800 11px/1 'Unbounded', system-ui, sans-serif;
  background: linear-gradient(180deg, var(--fm-gold-1), var(--fm-gold-2) 55%, var(--fm-gold-3));
}
.st-kicker { margin-top: 6px; color: rgba(255, 255, 255, 0.75); font: 700 10px/1 'Manrope', system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.st-name { margin-top: 5px; font: 800 15px/1.15 'Unbounded', 'Manrope', system-ui, sans-serif; }
.st-name small { display: block; margin-top: 3px; color: var(--fm-gold-2); font: 700 12px/1 'Manrope', system-ui, sans-serif; }
.st-segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: 100%; margin-top: 10px; }
.st-segs i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.st-segs i.on { background: linear-gradient(180deg, var(--fm-gold-1), var(--fm-gold-2)); }
.st-line { margin: 7px 0 10px; color: rgba(255, 255, 255, 0.82); font: 600 12px/1.25 'Manrope', system-ui, sans-serif; }
.st-cta { margin-top: auto; width: 100%; padding: 10px 12px; }

/* ---------- Telegram-бот: пара к «Начало» ---------- */
.bt-tile {
  height: 100%; display: flex; flex-direction: column; align-items: center; padding: 14px 12px;
  text-align: center; color: var(--fm-text);
  background:
    radial-gradient(90% 70% at 80% 100%, rgba(55, 174, 226, 0.5), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), #10203a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.bt-ico {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #4cc3f0, #1e8fc4); box-shadow: 0 8px 20px -8px rgba(40, 160, 220, 0.9);
}
.bt-ico svg { width: 30px; height: 30px; }
.bt-kicker { margin-top: 12px; color: rgba(255, 255, 255, 0.75); font: 700 10px/1 'Manrope', system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.bt-name { margin-top: 5px; color: #fff; font: 800 14px/1.2 'Unbounded', 'Manrope', system-ui, sans-serif; cursor: pointer; word-break: break-all; }
.bt-sub { margin: 8px 0 10px; color: rgba(255, 255, 255, 0.75); font: 600 12px/1.3 'Manrope', system-ui, sans-serif; }
.bt-open { margin-top: auto; width: 100%; padding: 10px 12px; }
/* Кнопка «Открыть» - только на телефоне: там Telegram стоит приложением, и
   ссылка tg:// его открывает. На компьютере ник копируется нажатием. */
@media (min-width: 1024px) { .bt-open { display: none; } }

/* ---------- Колесо удачи ----------
   Яркое и сказочное: свой цвет у каждого сектора, сундуки цветом вместо
   подписей, самоцветы и лампочки на золотом ободе. Фон плитки - цветные
   туманности, чтобы колесо светилось. */
.fm-wheel {
  background:
    radial-gradient(70% 45% at 50% 55%, rgba(255, 79, 193, 0.28), transparent 70%),
    radial-gradient(60% 40% at 15% 20%, rgba(47, 210, 255, 0.22), transparent 70%),
    radial-gradient(60% 40% at 90% 85%, rgba(122, 77, 255, 0.35), transparent 70%),
    var(--fm-tile);
}
.pw-card { position: relative; text-align: center; }
.pw-wheel { position: relative; width: min(360px, 100%); aspect-ratio: 1; margin: 0 auto; }
.pw-svg { width: 100%; height: 100%; display: block; }
.pw-rotor { transform-origin: 0 0; }
.pw-lbl {
  fill: #fff; font: 800 17px/1 'Unbounded', system-ui, sans-serif;
  paint-order: stroke; stroke: rgba(30, 6, 50, 0.6); stroke-width: 3.5px;
}
.pw-seams line { stroke: #fff3c4; stroke-width: 2; opacity: 0.85; }
.pw-star { fill: #fff; opacity: 0.85; }
.pw-sec.is-win path { opacity: 1; stroke: #fff; stroke-width: 3; }
.pw-bulb { fill: #fff7d6; }
/* Лампочки мигают только во время прокрута: вечная анимация на iPhone - это
   лишний слой (см. блок выше). */
.pw-card.is-spinning .pw-bulb { animation: pwBulb 0.24s steps(1) infinite; }
.pw-card.is-spinning .pw-bulb.odd { animation-delay: 0.12s; }
@keyframes pwBulb { 0% { fill: #fff7d6; } 50% { fill: #7a4a10; } }
.pw-pin {
  position: absolute; left: 50%; top: -4px; z-index: 3; width: 30px; height: 40px; translate: -50% 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #ff7ad9, #c21f8e);
  clip-path: polygon(50% 100%, 0 30%, 18% 0, 82% 0, 100% 30%);
}
.pw-card.is-spinning .pw-pin { animation: pwPin 0.12s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes pwPin { to { rotate: -8deg; } }
/* Поле промокода - крупное, прямо поверх колеса. */
.pw-code-box {
  position: absolute; left: 7%; right: 7%; top: 50%; translate: 0 -50%; z-index: 4;
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 20px;
  background: rgba(20, 6, 40, 0.92);
  box-shadow: 0 0 0 2px #ffd46a, 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 79, 193, 0.35);
}
.pw-code-box[hidden] { display: none; }
.pw-code {
  flex: 1; min-width: 0; padding: 12px 0; border: 0; outline: 0; background: none; color: #fff;
  font: 800 20px/1 'Unbounded', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
}
.pw-code::placeholder { color: rgba(255, 255, 255, 0.4); }
.pw-ok {
  flex: none; width: 50px; height: 50px; border: 0; border-radius: 14px; cursor: pointer; color: #2b1500;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #fff3c4, #ffc84a 55%, #e3901a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 0 #8a4f08;
}
.pw-ok svg { width: 24px; height: 24px; }
.pw-spin {
  position: absolute; left: 50%; top: 50%; z-index: 4; width: 34%; aspect-ratio: 1; translate: -50% -50%;
  border: 0; border-radius: 50%; cursor: pointer; color: #3a1500;
  font: 800 clamp(18px, 6vw, 26px)/1 'Unbounded', system-ui, sans-serif; letter-spacing: 0.04em;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle, #ffe68a, #ffb12e 60%, #c46a06);
  box-shadow: 0 0 0 4px #3a1500, 0 0 0 7px #ffe7a0, 0 10px 26px rgba(0, 0, 0, 0.55), 0 0 34px rgba(255, 200, 74, 0.6);
}
.pw-spin[hidden] { display: none; }
.pw-spin:active { scale: 0.96; }
.pw-spin:disabled { cursor: default; }
.pw-code-chip {
  margin: 12px auto 0; display: block; padding: 7px 12px; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: var(--fm-muted); font: 600 12px/1 'Manrope', system-ui, sans-serif;
}
.pw-code-chip b { color: #fff; letter-spacing: 0.04em; }
.pw-code-chip[hidden] { display: none; }
.pw-err { margin-top: 10px; color: #ff9a9a; font: 700 13px/1.3 'Manrope', system-ui, sans-serif; }
.pw-win-pct {
  position: relative; font: 900 64px/1 'Unbounded', system-ui, sans-serif;
  background: linear-gradient(180deg, #d6ffe6, #3ee08a 55%, #1b9e5c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sgRise 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) 0.1s both;
}

/* Lucky Fortune живёт в плитке как есть и стоит по её центру. */
.fm-fortune .fortune-page { margin: 0 auto; max-width: 560px; }

@media (prefers-reduced-motion: reduce) {
  .pw-card.is-spinning .pw-bulb, .pw-card.is-spinning .pw-pin { animation: none; }
}

/* ============================================================
   БЕСПЛАТНЫЙ КЕЙС «НАЧАЛО»
   ============================================================ */

/* Цена на карточке - «Бесплатно» зелёно-золотым: это не скидка, а подарок. */
.case-card.is-gift .case-price {
  background: linear-gradient(90deg, #8cf5b4, #ffe58a 60%, #ffb648);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 0.01em;
}
.case-card.is-gift.free-ready .case-cover::after {
  content: ''; position: absolute; inset: 8% 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 90, 0.38), transparent);
  animation: sgPulse 2.4s ease-in-out infinite;
}

/* Сцена-приглашение: кейс поднимается из света, лучи медленно вращаются. */
.sg-scene {
  position: fixed; inset: 0; z-index: 260;
  display: grid; place-items: center; padding: 18px;
  background: radial-gradient(120% 80% at 50% 30%, rgba(60, 30, 4, 0.72), rgba(8, 3, 14, 0.9));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.28s;
}
.sg-scene.is-in { opacity: 1; }
.sg-scene.is-out { opacity: 0; transition-duration: 0.22s; }
.sg-glow {
  position: absolute; left: 50%; top: 30%; width: 120vmin; height: 120vmin; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 190, 70, 0.28), transparent 70%);
  pointer-events: none;
}
.sg-card {
  position: relative; width: min(360px, 100%);
  padding: 0 20px 18px; border-radius: 26px; text-align: center;
  background: linear-gradient(180deg, rgba(48, 30, 12, 0.96), rgba(22, 12, 30, 0.97) 46%);
  border: 1px solid rgba(255, 210, 120, 0.28);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 236, 190, 0.18),
    0 0 0 6px rgba(255, 190, 70, 0.05);
  transform: translateY(26px) scale(0.94); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.3s;
}
.sg-scene.is-in .sg-card { transform: none; opacity: 1; }
.sg-scene.is-out .sg-card { transform: scale(0.96); opacity: 0; transition-duration: 0.2s; }
.sg-close {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #f3e3c4; font: 400 22px/1 system-ui, sans-serif;
}
.sg-hero { position: relative; height: 196px; margin: -54px -10px 4px; display: grid; place-items: center; }
.sg-rays {
  position: absolute; inset: 0; margin: auto; width: 260px; height: 260px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, 0.22) 0 7deg, transparent 7deg 20deg);
  mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  animation: sgSpin 26s linear infinite;
}
.sg-cover {
  position: relative; width: 210px; height: 210px; object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(255, 176, 60, 0.35));
  transform: translateY(40px) scale(0.6); opacity: 0;
}
.sg-scene.is-in .sg-cover {
  animation: sgRise 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) 0.12s forwards, sgFloat 3.6s ease-in-out 1s infinite;
}
.sg-kicker {
  font: 800 11px/1 'Manrope', system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
  color: #ffcf6a;
}
.sg-title {
  margin: 8px 0 6px; color: #fff4dc;
  font: 800 21px/1.22 'Unbounded', 'Manrope', system-ui, sans-serif;
}
.sg-title b {
  background: linear-gradient(180deg, #fff1b8, #ffc23d 60%, #f08a1c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sg-sub { margin: 0 0 14px; color: #cdbfa6; font: 500 13px/1.4 'Manrope', system-ui, sans-serif; }
.sg-steps {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.sg-steps li {
  position: relative; padding: 12px 6px 10px; border-radius: 14px;
  background: rgba(255, 220, 150, 0.06); border: 1px solid rgba(255, 210, 120, 0.14);
  color: #ead9b8; font: 600 11px/1.3 'Manrope', system-ui, sans-serif;
  opacity: 0; transform: translateY(10px);
}
.sg-scene.is-in .sg-steps li { animation: sgStep 0.45s ease-out forwards; }
.sg-scene.is-in .sg-steps li:nth-child(2) { animation-delay: 0.12s; }
.sg-scene.is-in .sg-steps li:nth-child(3) { animation-delay: 0.24s; }
.sg-steps li:first-child { animation-delay: 0s; }
.sg-steps i {
  display: grid; place-items: center; width: 22px; height: 22px; margin: 0 auto 6px; border-radius: 50%;
  font: 800 11px/1 'Unbounded', system-ui, sans-serif; font-style: normal; color: #2a1405;
  background: linear-gradient(180deg, #fff1b8, #ffbe38);
}
.sg-meter { margin: 0 0 16px; }
.sg-meter-bar {
  position: relative; height: 12px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.sg-meter-bar i {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #ff9d2a, #ffe07a);
  box-shadow: 0 0 14px rgba(255, 196, 70, 0.6);
}
.sg-scene.is-in .sg-meter-bar i { animation: sgFill 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards; }
.sg-meter-row {
  display: flex; justify-content: space-between; margin-top: 6px;
  color: #cdbfa6; font: 700 12px/1 'Manrope', system-ui, sans-serif;
}
.sg-meter-row span:first-child { color: #ffd76a; }
.sg-cta {
  position: relative; overflow: hidden; width: 100%; padding: 15px 16px; border: 0; border-radius: 16px;
  cursor: pointer; color: #3a1d00; font: 800 15px/1 'Unbounded', 'Manrope', system-ui, sans-serif;
  background: linear-gradient(180deg, #fff3c4 0%, #ffd34d 38%, #e8a024 62%, #ffcf5a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 0 #8a4f08, 0 14px 30px -8px rgba(255, 170, 40, 0.55);
  margin-bottom: 4px;
}
.sg-cta::after {
  content: ''; position: absolute; inset: 0; translate: -130% 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
  animation: openSheen 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite 0.9s;
}
.sg-cta:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 #8a4f08; }
.sg-later {
  margin-top: 8px; padding: 8px 14px; border: 0; background: none; cursor: pointer;
  color: #a5967f; font: 600 13px/1 'Manrope', system-ui, sans-serif;
}
@keyframes sgSpin { to { rotate: 360deg; } }
@keyframes sgRise { to { transform: none; opacity: 1; } }
@keyframes sgFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes sgStep { to { opacity: 1; transform: none; } }
@keyframes sgFill { to { width: var(--p); } }
@keyframes sgPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sg-rays, .sg-cta::after, .case-card.is-gift.free-ready .case-cover::after { animation: none; }
  .sg-scene.is-in .sg-cover { animation: none; transform: none; opacity: 1; }
  .sg-scene.is-in .sg-steps li { animation: none; opacity: 1; transform: none; }
  .sg-scene.is-in .sg-meter-bar i { animation: none; width: var(--p); }
}

@media (prefers-reduced-motion: reduce) {
  .fsc-rays, .feed-scene.is-in .fsc-motes i { animation: none; }
  .feed-scene.is-in .fsc-card { animation: none; opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
  .fsc-body { width: 440px; }
  .fsc-stage { height: 340px; }
  .fsc-cover { width: 260px; height: 240px; margin-left: -170px; }
  .fsc-card { width: 170px; }
}

/* ============================================================
   БЕСПЛАТНЫЙ КЕЙС ЗА ПОДПИСКУ
   ============================================================ */

.free-case {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(160, 32, 255, 0.16));
  border: 2px solid var(--cyan);
  box-shadow: 0 0 26px rgba(0, 240, 255, 0.1);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.free-case[disabled] {
  opacity: 0.55;
  border-color: var(--line);
  box-shadow: none;
  cursor: default;
}

.free-case-ico { width: 34px; height: 34px; flex: 0 0 auto; }
.free-case-ico svg { width: 100%; height: 100%; }
.free-case-text { flex: 1; min-width: 0; }
.free-case-title { display: block; font-size: 15px; font-weight: 900; }
.free-case-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.free-case-go {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--cyan);
  color: #04121a;
  font-size: 12px; font-weight: 900;
}
.free-case[disabled] .free-case-go { background: var(--line); color: var(--muted); }

/* ============================================================
   АПГРЕЙД
   ============================================================ */

/* Экран апгрейда собран так, чтобы кольцо, множители, ставка и кнопка
   помещались на телефон целиком: листать вниз ради каждого запуска - это
   лишнее движение на самом частом действии раздела.
   Кольцо ограничено и по ширине, и по высоте видимой области. */
#view-upgrade.view { padding-bottom: 8px; }
#view-upgrade .game-head { margin-bottom: 8px; }
#view-upgrade .game-title { font-size: 26px; letter-spacing: 2px; }
#view-upgrade .game-sub { font-size: 11.5px; margin-top: 4px; }

.upg-stage {
  position: relative;
  width: min(100%, 250px, 34vh);
  margin: 0 auto;
  aspect-ratio: 1;
}

.upg-ring { width: 100%; height: 100%; display: block; overflow: visible; }

/* Подложка под кольцом - свечение, а не заливка, иначе центр глушит цифры. */
.upg-halo {
  fill: none;
  stroke: rgba(160, 32, 255, 0.12);
  stroke-width: 24;
}

.upg-track {
  fill: none;
  stroke: #1b0b33;
  stroke-width: 22;
}

/* Сектор выигрыша. Длина дуги приходит с сервера вместе с результатом.
   Концы обязательно butt, а не round: скруглением дуга растягивается на
   половину толщины с каждой стороны - это лишние 12 градусов, и указатель
   вставал бы «внутри» нарисованного сектора при проигрыше. */
.upg-arc {
  fill: none;
  stroke: url(#upgArcGrad);
  stroke-width: 22;
  stroke-linecap: butt;
  stroke-dasharray: 0 999;
  transition: stroke-dasharray 0.35s ease;
}

.upg-ticks line { stroke: rgba(255, 242, 255, 0.16); stroke-width: 2; }

.upg-needle {
  transform-origin: 130px 130px;
  transform: rotate(0deg);
  filter: drop-shadow(0 0 8px rgba(255, 214, 10, 0.8));
}

/* Прокрут ведёт upgSpin в app.js кадр за кадром: зарядка, рывок, шлейф и
   замедленный финал. Классы на .upg-stage отвечают только за свет. */
.upg-stage { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s; }
.upg-stage::before {
  content: ''; position: absolute; inset: -12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(160, 32, 255, 0.35), transparent 62%);
  opacity: 0; transition: opacity 0.4s;
}
.upg-stage.is-charging::before { opacity: 1; animation: upgCharge 0.25s ease-in-out infinite alternate; }
@keyframes upgCharge { to { transform: scale(1.06); opacity: 0.7; } }
.upg-stage.is-charging .upg-halo { stroke: rgba(255, 211, 77, 0.35); }
.upg-stage.is-spinning::before { opacity: 0.7; }
/* Стоп-кадр: последние градусы сцена приближается, а края темнеют. */
.upg-stage.is-slowmo { transform: scale(1.07); }
.upg-stage.is-slowmo::before { opacity: 1; background: radial-gradient(circle, transparent 40%, rgba(5, 0, 12, 0.6) 70%); }
.upg-trail {
  fill: none; stroke: #ffd60a; stroke-width: 22; stroke-linecap: butt; opacity: 0.35;
  mix-blend-mode: screen; pointer-events: none;
}
.upg-stage.is-won .upg-arc { stroke: #ffd34d; filter: drop-shadow(0 0 14px #ffd34d); animation: upgWin 0.5s ease-in-out 3; }
@keyframes upgWin { 50% { stroke-width: 30; } }
.upg-stage.is-won::before { opacity: 1; background: radial-gradient(circle, rgba(255, 211, 77, 0.45), transparent 62%); }
.upg-stage.is-won .upg-target {
  background: linear-gradient(180deg, #fff8dc, #ffd34d 55%, #e8a024);
  -webkit-background-clip: text; background-clip: text;
  animation: pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.upg-crack path {
  fill: none; stroke: #ff5d7a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 80; stroke-dashoffset: 80; opacity: 0;
  filter: drop-shadow(0 0 4px #ff2e5a);
}
.upg-stage.is-lost .upg-crack path { opacity: 1; animation: upgCrack 0.45s ease-out forwards; }
.upg-stage.is-lost .upg-crack path:nth-child(2) { animation-delay: 0.08s; }
.upg-stage.is-lost .upg-crack path:nth-child(3) { animation-delay: 0.14s; }
.upg-stage.is-lost .upg-crack path:nth-child(4) { animation-delay: 0.2s; }
@keyframes upgCrack { to { stroke-dashoffset: 0; } }
.upg-stage.is-lost .upg-needle { filter: drop-shadow(0 0 8px rgba(255, 60, 90, 0.8)); }
.upg-stage.is-lost .upg-arc { opacity: 0.45; }

.upg-needle-tip { fill: var(--gold); }

.upg-center {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}

.upg-label {
  font-size: 9px; font-weight: 900; letter-spacing: 2px;
  color: var(--muted);
}

.upg-target {
  font-size: clamp(20px, 7vw, 28px); font-weight: 900; line-height: 1.1;
  margin-top: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.upg-mult {
  margin-top: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 214, 10, 0.14);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 13px; font-weight: 900;
}

.upg-outcome {
  min-height: 22px;
  margin: 6px 0 2px;
  text-align: center;
  font-size: 15px; font-weight: 900;
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
}
.upg-outcome b { font: 800 15px/1.2 'Unbounded', 'Manrope', system-ui, sans-serif; animation: pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.upg-outcome span { font-size: 12.5px; color: var(--muted); }
.upg-outcome.win b {
  background: linear-gradient(180deg, #fff8dc, #ffd34d 55%, #e8a024);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.upg-outcome.lose b { color: #ff8aa0; }

.upg-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.upg-opt {
  padding: 8px 3px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px; font-weight: 900;
  cursor: pointer;
  transition: all 0.15s;
}

/* Панель ставки на этом экране плотнее общей: там, где у краша и рулетки
   есть место, здесь его съедает кольцо. */
#view-upgrade .bet-panel { margin-top: 8px; padding: 10px; border-radius: 16px; }
#view-upgrade .bet-row { margin-bottom: 7px; }
#view-upgrade .bet-input { padding: 10px 12px; font-size: 17px; }
#view-upgrade .bet-quick .chip,
#view-upgrade .bet-chips .chip { padding: 7px 6px; font-size: 12.5px; border-radius: 10px; }
#view-upgrade .bet-chips { margin-bottom: 0; }

/* Низкий экран: подзаголовок уходит, заголовок ужимается. Правило раздела
   важнее вводной фразы, если выбор стоит между ней и кнопкой запуска. */
@media (max-height: 700px) {
  #view-upgrade .game-sub { display: none; }
  #view-upgrade .game-title { font-size: 21px; }
  #view-upgrade .game-head { margin-bottom: 4px; }
  .upg-picker { gap: 5px; }
  .upg-opt { padding: 6px 3px; font-size: 12.5px; }
}
#view-upgrade .btn-huge { margin-top: 8px; padding: 14px; font-size: 17px; }

.upg-opt.active {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(255, 214, 10, 0.24), rgba(255, 107, 53, 0.14));
  color: var(--gold);
  box-shadow: 0 0 20px rgba(255, 214, 10, 0.12);
}

.btn-upgrade {
  background: linear-gradient(135deg, var(--cyan), var(--violet), var(--pink));
  color: #fff;
  box-shadow: 0 8px 30px rgba(160, 32, 255, 0.2);
}

@media (min-width: 700px) {
  .upg-picker { grid-template-columns: repeat(8, 1fr); }
  .feed { --feed-w: 116px; }
}
.deposit-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.payment-method{padding:8px;border:1px solid #4b3a62;border-radius:12px;min-height:72px;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;background:#181124;color:#fff}.payment-method.active{border-color:#ffd60a;box-shadow:0 0 0 1px #ffd60a}.payment-method small{display:block;color:#8f829e}.payment-checkout{padding:18px;border:1px solid #ffd60a;border-radius:16px;background:linear-gradient(145deg,#201629,#15101d);text-align:center;margin:12px 0}.payment-status{padding:5px 9px;border-radius:99px;font-size:11px}.payment-status.PAID{background:#154b37;color:#61f1ac}.payment-status.PENDING{background:#5b4610;color:#ffd966}.payment-status.EXPIRED,.payment-status.MANUAL_REVIEW{background:#5b2028;color:#ff8b99}.payment-history{padding:12px;margin:8px 0;background:#191321;border-radius:12px}.settings-grid{display:grid;gap:10px}.settings-grid label{display:grid;gap:4px;color:#ac9fba}.settings-grid input{padding:10px;border-radius:8px;border:1px solid #4b3a62;background:#17111f;color:#fff}

/* ============================================================
   КРИПТОКАССА
   ============================================================ */

/* Сетка монет. Три в ряд на телефоне: четыре превращают название монеты в
   обрубок, две оставляют половину экрана пустой. */
.coin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
@media (min-width: 480px) { .coin-grid { grid-template-columns: repeat(4, 1fr); } }

.coin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 6px 9px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18));
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.2s;
}
.coin-card:active { transform: scale(0.97); }

/* Выбранная монета подсвечивается своим цветом, а не общим акцентом: так
   видно не только что выбрано, но и что именно. */
.coin-card.active {
  border-color: var(--coin);
  box-shadow: 0 0 0 1px -6px var(--coin), 0 6px 20px -8px var(--coin);
  background: linear-gradient(180deg, color-mix(in srgb, var(--coin) 18%, transparent), rgba(0,0,0,0.2));
}

.coin-mark { display: block; flex: none; }
.coin-code { font-size: 12.5px; font-weight: 800; color: var(--text); letter-spacing: 0.4px; }
.coin-name {
  font-size: 9.5px; color: var(--muted); text-align: center; line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* В форме вывода сетка теснее: там под ней ещё три поля и кнопка. */
.coin-grid.compact .coin-card { padding: 8px 4px 7px; gap: 3px; }
.coin-grid.compact .coin-name { display: none; }

.coin-note {
  font-size: 11px; line-height: 1.4; color: var(--muted);
  margin: 8px 0 4px;
}

/* Строка курса. Три уровня по важности: сумма крупно, курс мельче,
   оговорка совсем мелко - её читают один раз и запоминают. */
.rate-line { margin: 10px 0 14px; min-height: 20px; }
.rate-amount {
  display: flex; align-items: center; gap: 7px;
  font-size: 17px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rate-course { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.rate-note { display: block; font-size: 10.5px; color: var(--muted); opacity: 0.75; margin-top: 3px; }

.quick-row { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.quick-btn {
  flex: 1 1 auto; padding: 9px 12px; border-radius: 11px;
  border: 2px solid var(--line); background: rgba(255,255,255,0.03);
  color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer;
}
.quick-btn:active { transform: scale(0.97); }

/* display:flex у .payment-method перебивает атрибут hidden: без этой строки
   вкладка «СБП и карта» была бы видна и там, где шлюз не настроен. Третий
   способ встаёт в отдельную строку во всю ширину. */
.payment-method[hidden] { display: none; }
.deposit-methods .payment-method:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 52px; }

/* Ожидание оплаты СБП / картой: окно шлюза открыто отдельно, здесь сумма
   крупно и три действия. Кнопки во всю ширину - по ним жмут большим пальцем. */
/* Рамку и фон даёт .payment-checkout вокруг: вторая рамка внутри читалась
   коробкой в коробке. */
.sicilia-wait { display: grid; gap: 10px; text-align: center; }
.sicilia-wait-sum { font-size: 30px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.sicilia-wait-sub { font-size: 13px; font-weight: 700; color: var(--text); }
.sicilia-wait p { margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.sicilia-create .coin-note { margin-top: 10px; }

/* Счёт на оплату. Рамка красится цветом монеты - экран оплаты биткоином и
   экран оплаты USDT не должны выглядеть одинаково. */
.crypto-invoice {
  border: 2px solid color-mix(in srgb, var(--coin) 55%, var(--line));
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--coin) 10%, transparent), rgba(0,0,0,0.25));
  box-shadow: 0 10px 34px -18px var(--coin);
}
.invoice-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.invoice-sum {
  font-size: 22px; font-weight: 900; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.invoice-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Адрес - кнопка во всю ширину: по нему нажимают, чтобы скопировать, и
   промахнуться мимо мелкой иконки на телефоне слишком легко. */
.invoice-address {
  display: block; width: 100%; text-align: left;
  padding: 11px 13px; margin-bottom: 12px;
  border-radius: 12px; border: 2px dashed var(--line);
  background: rgba(0,0,0,0.3); color: var(--text); cursor: pointer;
}
.invoice-address span {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.45; word-break: break-all;
}
.invoice-address small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 5px; }

.invoice-warn {
  font-size: 11.5px; line-height: 1.45; color: #ffd08a;
  background: rgba(255, 170, 40, 0.1);
  border-left: 3px solid #ffaa28;
  padding: 9px 11px; border-radius: 0 10px 10px 0; margin-bottom: 14px;
}
.invoice-status { font-size: 12.5px; color: var(--muted); margin-top: 10px; text-align: center; }

/* Адрес кошелька в списке заявок. Моноширинный и с переносом по символам:
   администратор сверяет его посимвольно перед отправкой. */
.payout-address {
  display: block; margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.4; color: var(--muted); word-break: break-all;
}
.payout-rate { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); opacity: 0.8; }

/* Лента значков монет над полем суммы: показывает, чем можно заплатить,
   но выбор делается уже на странице шлюза. */
.coin-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.coin-strip .coin-mark { opacity: 0.9; }

/* Объяснение, почему доступно меньше баланса. Отдельной строкой и мельче:
   это пояснение к числу, а не второе число. */
.withdraw-locked {
  display: block; margin-top: 6px;
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}

/* QR-код адреса приходит от шлюза готовой картинкой. Белая подложка
   обязательна: телефон не считывает код на тёмном фоне. */
.invoice-qr {
  display: block;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  image-rendering: pixelated;
}


/* ============================================================
   КАССА: оформление
   ============================================================ */

/*
 * Касса держится на одной шкале: стеклянные поверхности с тонкой границей,
 * розовый только для выбора и действия, золото только для денег. Раньше
 * каждый блок был в своём стиле: жёлтая рамка со свечением у баланса, две
 * кнопки разных градиентов, жёлтые обводки у способов, пунктир у бонуса,
 * моноширинный шрифт в полях и рамка в рамке у счёта. Всё правило ниже
 * привязано к #view-wallet: .payout-row и .payment-status живут ещё и в
 * панели, и её трогать незачем.
 */
#view-wallet {
  --c-surface: rgba(255, 255, 255, 0.035);
  --c-border: rgba(255, 255, 255, 0.08);
  --c-border-2: rgba(255, 255, 255, 0.15);
  --c-text-2: rgba(241, 235, 247, 0.66);
  --c-text-3: rgba(241, 235, 247, 0.44);
  --c-accent: var(--pink);
  --c-accent-soft: rgba(224, 81, 140, 0.12);
  --c-accent-line: rgba(224, 81, 140, 0.62);
  --c-ok: var(--green);
  --c-wait: var(--gold);
  --c-fail: var(--red);
  --c-review: var(--cyan);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: 'Manrope', system-ui, sans-serif;
}

#view-wallet .cash-ico { width: 18px; height: 18px; flex: none; display: block; }

/* ---------- Баланс ---------- */

#view-wallet .cash-hero {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  margin-bottom: 0;
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(223, 190, 98, 0.12), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(147, 102, 208, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--c-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 40px -24px rgba(0, 0, 0, 0.8);
}
.cash-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cash-eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-text-3);
}
.cash-secure {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px 5px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: var(--c-text-2);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--c-border);
}
#view-wallet .cash-secure .cash-ico { width: 14px; height: 14px; color: var(--c-ok); }

.cash-balance {
  margin: 14px 0 18px;
  font: 800 clamp(30px, 9vw, 40px)/1 'Unbounded', 'Manrope', system-ui, sans-serif;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}
.cash-cur { margin-left: 8px; font-size: 0.55em; color: var(--gold); letter-spacing: 0; }

.cash-stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.cash-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 12px; }
.cash-stat:first-child { padding-left: 0; }
.cash-stat + .cash-stat { border-left: 1px solid var(--c-border); }
.cash-stat span { font-size: 11.5px; color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cash-stat b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cash-stat.is-pending b { color: var(--c-wait); }

/* Бонусный счёт под балансом: отдельной плашкой, золотом, как деньги, но
   тише своих - он не выводится, пока не отыгран. */
.cash-bonus {
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: rgba(223, 190, 98, 0.08); border: 1px solid rgba(223, 190, 98, 0.25);
}
.cash-bonus-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cash-bonus-head span { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.cash-bonus-head b { font: 800 18px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: var(--gold); }
.cash-bonus p { margin: 8px 0 10px; font-size: 12px; line-height: 1.5; color: var(--c-text-2); }
.cash-bonus p b { color: var(--text); }
.cash-bonus-refuse {
  padding: 7px 12px; border-radius: 10px; border: 1px solid var(--c-border-2);
  background: transparent; font: 700 12px/1 'Manrope', system-ui, sans-serif; color: var(--c-text-2); cursor: pointer;
}

/* ---------- Переключатель «Пополнить / Вывести» ---------- */

#view-wallet .cash-switch {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 14px 0;
  padding: 4px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--c-border);
}
.cash-switch-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px -8px rgba(0, 0, 0, 0.8);
  transition: transform 0.38s var(--ease-out);
}
.cash-switch[data-mode="withdraw"] .cash-switch-thumb { transform: translateX(100%); }
.cash-tab {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; border: 0; background: none;
  font: 800 15px/1 'Manrope', system-ui, sans-serif; color: var(--c-text-3);
  cursor: pointer;
  transition: color 0.25s;
}
.cash-tab.active { color: #fff; }
#view-wallet .cash-tab .cash-ico { width: 17px; height: 17px; transition: transform 0.3s var(--ease-out), color 0.25s; }
#view-wallet .cash-tab.active .cash-ico { color: var(--c-accent); }
#view-wallet .cash-tab:active .cash-ico { transform: scale(0.85); }

#view-wallet .wallet-pane { animation: none; }
#view-wallet .wallet-pane.is-entering { animation: cashIn 0.38s var(--ease-out); }
@keyframes cashIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Панель с формой ---------- */

#view-wallet .cash-panel {
  padding: 16px;
  margin: 0;
  border-radius: 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

/* Подписи шагов: мелкие и спокойные, форма читается сверху вниз сама. */
.cash-step {
  margin: 20px 2px 10px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-text-3);
}
.cash-panel > .cash-step:first-child,
.cash-panel > .deposit-offer[hidden] + .cash-step { margin-top: 2px; }

/* Бонус первого пополнения: купон. Слева крупный процент, справа два
   условия, ниже - раскрывашка с правилами. Блик проходит раз в несколько
   секунд: предложение живое, но не мигает. */
#view-wallet .deposit-offer {
  position: relative; overflow: hidden;
  margin: 0 0 14px; padding: 0;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(255, 200, 80, 0.22), transparent 55%),
    linear-gradient(110deg, #2b1830, #1d1328 60%);
  border: 1px solid rgba(255, 205, 110, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.12), 0 12px 30px -18px rgba(255, 180, 60, 0.6);
}
#view-wallet .deposit-offer::after {
  content: ''; position: absolute; inset: 0; translate: -130% 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 190, 0.16) 50%, transparent 60%);
  animation: openSheen 5s cubic-bezier(0.65, 0, 0.35, 1) infinite 1s;
}
.do-main { display: flex; align-items: center; gap: 14px; padding: 14px 14px 12px; }
.do-pct {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding-right: 14px; border-right: 2px dashed rgba(255, 205, 110, 0.3);
}
.do-pct b {
  font: 900 32px/1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff3c4, #ffc93f 55%, #f08a1c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 180, 60, 0.35));
}
.do-pct span { color: #f3dfb7; font: 700 10px/1.25 'Manrope', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; }
.do-terms { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.do-terms span { color: #cdbad6; font: 600 12.5px/1.2 'Manrope', system-ui, sans-serif; }
.do-terms b { color: #fff; font-weight: 800; }
.do-more { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.do-more summary {
  list-style: none; cursor: pointer; padding: 9px 14px;
  color: #e8c27a; font: 700 12px/1 'Manrope', system-ui, sans-serif;
}
.do-more summary::-webkit-details-marker { display: none; }
.do-more summary::after { content: ' ›'; display: inline-block; transition: transform 0.2s; }
.do-more[open] summary::after { transform: rotate(90deg); }
.do-more p { margin: 0; padding: 0 14px 12px; color: #b9a8c6; font: 500 12px/1.5 'Manrope', system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { #view-wallet .deposit-offer::after { animation: none; } }

/* Способ пополнения */
#view-wallet .deposit-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
#view-wallet .payment-method {
  min-height: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px;
  padding: 12px; min-width: 0;
  border-radius: 16px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: none;
  color: var(--text); font: inherit; text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
#view-wallet .payment-method:active { transform: scale(0.98); }
#view-wallet .payment-method.active {
  border-color: var(--c-accent-line);
  background: var(--c-accent-soft);
  box-shadow: inset 0 0 0 1px rgba(224, 81, 140, 0.3);
}
/* Если способ один (шлюз Sicilia не настроен), плитка во всю ширину и в строку. */
#view-wallet .deposit-methods .payment-method:last-child:nth-child(odd),
#view-wallet .deposit-methods .payment-method[hidden] + .payment-method {
  grid-column: 1 / -1; flex-direction: row; align-items: center;
}
.cash-method-ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-text-2);
  transition: background 0.2s, color 0.2s;
}
#view-wallet .payment-method.active .cash-method-ico { background: rgba(224, 81, 140, 0.18); color: var(--c-accent); }
.cash-method-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cash-method-text b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cash-method-text small { font-size: 11.5px; color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Монеты: выбранная подсвечивается своим цветом, как и раньше, но без
   двойной рамки - одна тонкая линия и мягкий фон. */
#view-wallet .coin-grid { gap: 8px; margin: 0; }
#view-wallet .coin-card {
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-surface);
  font: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
#view-wallet .coin-card.active {
  border-color: color-mix(in srgb, var(--coin) 70%, transparent);
  background: color-mix(in srgb, var(--coin) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coin) 35%, transparent);
}
#view-wallet .coin-name { font-size: 10px; color: var(--c-text-3); }
#view-wallet .coin-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--c-text-3); }

/* Сумма: крупное поле с рублём справа, без стрелок числового поля. */
.cash-amount {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  height: 60px; padding: 0 12px 0 16px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--c-border);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: text;
}
.cash-amount:focus-within { border-color: var(--c-accent-line); box-shadow: 0 0 0 4px rgba(224, 81, 140, 0.12); }
.cash-amount input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: none; padding: 0;
  font: 800 24px/1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: -0.02em;
  color: #fff; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.cash-amount input::-webkit-outer-spin-button,
.cash-amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cash-amount input::placeholder { color: var(--c-text-3); font-size: 18px; }
.cash-amount-cur { font: 800 18px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: var(--c-text-3); }
.cash-amount-all {
  height: 34px; padding: 0 12px;
  border: 1px solid var(--c-border-2); border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font: 800 13px/1 'Manrope', system-ui, sans-serif; color: var(--text);
  cursor: pointer;
  transition: transform 0.15s;
}
.cash-amount-all:active { transform: scale(0.94); }

#view-wallet .quick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px; margin: 8px 0 0; }
#view-wallet .quick-btn {
  height: 36px; padding: 0 6px;
  border: 1px solid var(--c-border); border-radius: 11px;
  background: var(--c-surface);
  font: 700 12.5px/1 'Manrope', system-ui, sans-serif; color: var(--c-text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}
#view-wallet .quick-btn:active { transform: scale(0.95); }
#view-wallet .quick-btn.active { color: #fff; border-color: var(--c-accent-line); background: var(--c-accent-soft); }

/* Пересчёт в монету: сводка, а не три строки разного кегля вразнобой. */
#view-wallet .rate-line { margin: 12px 0 0; min-height: 0; }
#view-wallet .rate-line:empty { display: none; }
#view-wallet .rate-line:has(.rate-amount) {
  padding: 12px 14px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--c-border);
}
#view-wallet .rate-amount { font-size: 17px; font-weight: 800; }
#view-wallet .rate-course { font-size: 12px; color: var(--c-text-2); margin-top: 4px; }
#view-wallet .rate-note { font-size: 11px; line-height: 1.45; color: var(--c-text-3); opacity: 1; margin-top: 6px; }

/* Главная кнопка: один стиль на всю кассу, без неонового ореола. */
.cash-cta {
  position: relative; overflow: hidden;
  width: 100%; height: 54px; margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 16px;
  background: linear-gradient(180deg, #ea6299, #d4457f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px -14px rgba(224, 81, 140, 0.9);
  font: 800 16px/1 'Manrope', system-ui, sans-serif; color: #fff;
  font-variant-numeric: tabular-nums; text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, filter 0.2s;
}
.cash-cta:hover { filter: brightness(1.06); }
.cash-cta:active { transform: scale(0.98); filter: brightness(0.95); }
#view-wallet .cash-cta .cash-ico { width: 19px; height: 19px; transition: transform 0.3s var(--ease-out); }
.cash-cta:hover .cash-ico { transform: translateX(3px); }
.cash-cta:disabled { opacity: 1; cursor: default; }
.cash-cta.is-busy { color: transparent; pointer-events: none; }
#view-wallet .cash-cta.is-busy .cash-ico { opacity: 0; }
.cash-cta.is-busy::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: cashSpin 0.7s linear infinite;
}
@keyframes cashSpin { to { transform: rotate(360deg); } }

.cash-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cash-ghost {
  height: 46px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--c-border-2); border-radius: 14px;
  background: transparent;
  font: 700 14px/1 'Manrope', system-ui, sans-serif; color: var(--text);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.cash-ghost:active { background: rgba(255, 255, 255, 0.05); transform: scale(0.98); }
#view-wallet .cash-ghost .cash-ico { width: 16px; height: 16px; color: var(--c-text-2); }

.cash-fine { margin: 12px 6px 0; font-size: 11.5px; line-height: 1.55; color: var(--c-text-3); text-align: center; }

/* ---------- Ожидание оплаты (СБП и карта) ---------- */

#view-wallet .payment-checkout {
  margin: 16px 0 0; padding: 16px;
  border: 1px solid var(--c-border); border-radius: 18px;
  background: rgba(0, 0, 0, 0.22);
  text-align: left;
  animation: cashIn 0.45s var(--ease-out);
}
#view-wallet .sicilia-wait { display: block; text-align: left; }
.cash-wait-head { display: flex; align-items: center; gap: 12px; }
.cash-pulse { position: relative; width: 10px; height: 10px; flex: none; margin: 0 4px; border-radius: 50%; background: var(--c-wait); }
.cash-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: cashPing 1.6s var(--ease-out) infinite;
}
@keyframes cashPing { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3.2); opacity: 0; } }
.cash-wait-status { font-size: 14px; font-weight: 800; color: var(--c-wait); }
#view-wallet .sicilia-wait-sub { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--c-text-3); }
#view-wallet .sicilia-wait-sum {
  margin: 16px 0 6px;
  font: 800 32px/1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: -0.02em;
  color: #fff;
}
#view-wallet .sicilia-wait p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--c-text-2); }

#view-wallet .invoice-status { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--c-text-2); text-align: center; }
#view-wallet .invoice-status:empty { display: none; }

/* ---------- Перевод по реквизиту (Sicilia через API) ---------- */

/* Два сегмента вместо трёх: плашка шириной в половину. */
#view-wallet .cash-seg.is-2 { grid-template-columns: repeat(2, 1fr); }
#view-wallet .cash-seg.is-2::before { width: calc((100% - 6px) / 2); }
#view-wallet .cash-seg.is-2 .cash-seg-btn { display: flex; align-items: center; justify-content: center; gap: 7px; }
#view-wallet .cash-seg.is-2 .cash-ico { width: 16px; height: 16px; opacity: 0.8; }
.cash-step small {
  margin-left: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--c-text-3); opacity: 0.8;
}
/* Пять банков в строку на любом телефоне: подписи короткие намеренно. */
#view-wallet .sic-banks { grid-template-columns: repeat(5, 1fr); }

#view-wallet .payment-checkout:has(.sic-pay),
#view-wallet .payment-checkout:has(.sic-done) { padding: 18px 16px 14px; }
.sic-pay { display: grid; gap: 16px; }
.sic-pay > * { min-width: 0; }

/* Сумма и таймер одной строкой: это два главных числа экрана. */
.sic-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sic-amount-row { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.sic-amount-num {
  font: 800 30px/1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: -0.02em;
  color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#view-wallet .sic-icon-btn {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--c-border-2); border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text); cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
#view-wallet .sic-icon-btn:active { transform: scale(0.92); }
#view-wallet .sic-icon-btn .cash-copy { display: grid; place-items: center; padding: 0; background: none; }
#view-wallet .sic-icon-btn.is-copied { border-color: rgba(99, 191, 148, 0.55); background: rgba(99, 191, 148, 0.1); }

.sic-clock { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.sic-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sic-clock circle { fill: none; stroke-width: 2.6; }
.sic-clock-bg { stroke: rgba(255, 255, 255, 0.08); }
.sic-clock-fg {
  stroke: var(--c-ok); stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.3s;
}
.sic-clock-text { position: relative; line-height: 1; }
.sic-clock-text b { font: 700 13.5px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--text); font-variant-numeric: tabular-nums; }
.sic-pay[data-hurry="1"] .sic-clock-fg { stroke: var(--c-wait); }
.sic-pay[data-hurry="1"] .sic-clock-text b { color: var(--c-wait); animation: sicBlink 1s ease-in-out infinite; }
.sic-pay[data-expired] .sic-clock { opacity: 0.4; }
.sic-pay[data-expired] .sic-clock-text b { animation: none; }
@keyframes sicBlink { 50% { opacity: 0.45; } }

/*
 * Реквизит на карточке размером с банковскую (1.586:1). Номер - то, ради
 * чего экран открыт, поэтому он самый крупный шрифт карточки и стоит там,
 * где на настоящей карте выбит номер. Цвета свои, проекта: карточка
 * показывает, куда переводить, а не выдаёт себя за карту банка.
 */
.sic-card-stage { display: flex; justify-content: center; perspective: 900px; }
#view-wallet .sic-card {
  --rx: 0deg; --ry: 0deg; --gx: 30%;
  --card-a: #5d2b80; --card-b: #82214f; --card-c: #1c1029;
  /* Пропорция карты - нижняя граница, а не клетка: обрезку несёт слой
     блика (.sic-card-fx), и длинное имя на узком телефоне растит карточку,
     а не уходит под край. */
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  width: 100%; max-width: 380px; aspect-ratio: 1.586;
  padding: 16px 18px 15px;
  border: 0; border-radius: 20px;
  text-align: left; color: #fff; cursor: pointer;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--card-a) 0%, transparent 58%),
    radial-gradient(110% 130% at 100% 100%, var(--card-b) 0%, transparent 62%),
    linear-gradient(135deg, #2b1742, var(--card-c) 62%, #261230);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 26px 50px -22px rgba(0, 0, 0, 0.9),
    0 12px 34px -16px rgba(224, 81, 140, 0.45);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.25s var(--ease-out), box-shadow 0.3s, filter 0.4s;
  animation: sicCardIn 0.8s var(--ease-out) both;
}
#view-wallet .sic-card[data-kind="sbp"] { --card-a: #2a5f78; --card-b: #5b2b86; --card-c: #141a2c; }
#view-wallet .sic-card[data-kind="account"] { --card-a: #6b5422; --card-b: #3d2a6e; --card-c: #18142a; }
#view-wallet .sic-card:active { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(0.985); }
#view-wallet .sic-card.is-copied {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1.5px rgba(99, 191, 148, 0.75),
    0 26px 50px -22px rgba(0, 0, 0, 0.9),
    0 12px 34px -16px rgba(99, 191, 148, 0.5);
}
@keyframes sicCardIn {
  from { opacity: 0; transform: translateY(26px) rotateX(24deg) scale(0.94); }
  to { opacity: 1; transform: none; }
}

.sic-card-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
/* Гильош: тонкие кольца, как на защитной сетке карты. Без края и без картинки. */
.sic-card-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 112% 118%, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 13px),
    radial-gradient(60% 70% at var(--gx) 0%, rgba(255, 255, 255, 0.1), transparent 70%);
}
/* Блик проходит по карточке один раз, когда она легла: взгляд идёт к номеру. */
.sic-card-sheen {
  position: absolute; inset: -30% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.2) 50%, transparent 58%);
  transform: translateX(-70%);
  animation: sicSheen 1.5s 0.55s var(--ease-out) both;
}
@keyframes sicSheen { to { transform: translateX(70%); } }

.sic-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sic-card-bank {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 800 15px/1.1 'Manrope', system-ui, sans-serif; letter-spacing: 0.01em;
}
.sic-card-tag {
  flex: none; margin-left: auto; padding: 5px 9px; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font: 800 10px/1 'Manrope', system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.sic-card-mid { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.sic-chip { width: 38px; height: 28px; }
.sic-chip rect { fill: #d6b35e; stroke: rgba(80, 52, 8, 0.5); }
.sic-chip path { fill: none; stroke: rgba(80, 52, 8, 0.55); stroke-width: 1; }
.sic-waves { width: 22px; height: 22px; fill: none; stroke: rgba(255, 255, 255, 0.65); stroke-width: 1.8; stroke-linecap: round; }

.sic-card-label {
  margin-top: auto;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.sic-card-num {
  margin-top: 5px;
  font: 600 clamp(17px, 5.6vw, 23px)/1.15 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  /* Выбитые цифры: свет сверху, тень снизу. */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(255, 255, 255, 0.14);
}
.sic-card-holder {
  margin-top: 9px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 12.5px/1.2 'Manrope', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
}
.sic-card-holder small {
  display: block; margin-bottom: 3px;
  font-size: 9px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.5);
}
#view-wallet .sic-card .cash-copy {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font: 800 12px/1 'Manrope', system-ui, sans-serif; color: #fff; white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
#view-wallet .sic-card .cash-copy .cash-ico { width: 15px; height: 15px; }
#view-wallet .sic-card.is-copied .cash-copy { background: rgba(99, 191, 148, 0.22); color: #bff0d6; }

/* Срок вышел: номер уже заменён маской, карточка гаснет, сверху печать. */
.sic-card-stamp {
  position: absolute; left: 50%; top: 50%;
  padding: 7px 14px; border: 2px solid rgba(255, 128, 140, 0.85); border-radius: 10px;
  font: 800 14px/1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 150, 160, 0.95);
  transform: translate(-50%, -50%) rotate(-9deg) scale(1.6);
  opacity: 0; pointer-events: none;
}
/* Гасится всё, кроме печати: фильтр на самой карточке обесцветил бы и её. */
#view-wallet .sic-card:disabled { cursor: default; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
#view-wallet .sic-card:disabled::after {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: rgba(14, 9, 20, 0.62); pointer-events: none;
}
#view-wallet .sic-card:disabled > :not(.sic-card-stamp):not(.sic-card-fx) { filter: grayscale(0.9); }
#view-wallet .sic-card:disabled .cash-copy { visibility: hidden; }
.sic-card-stamp { z-index: 1; }
.sic-card:disabled .sic-card-stamp { animation: sicStamp 0.45s var(--ease-spring) forwards; }
@keyframes sicStamp { to { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); } }

#view-wallet .sic-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 12px 11px 14px;
  border: 1px solid var(--c-border-2); border-radius: 14px;
  background: rgba(0, 0, 0, 0.3); color: var(--text); text-align: left; cursor: pointer;
  font: 600 15px/1.2 'JetBrains Mono', ui-monospace, monospace;
}
.sic-line small { display: block; margin-bottom: 4px; font: 700 11px/1 'Manrope', system-ui, sans-serif; color: var(--c-text-3); }
#view-wallet .sic-line .cash-copy {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.07); font: 800 12px/1 'Manrope', system-ui, sans-serif;
}
#view-wallet .sic-line.is-copied { border-color: rgba(99, 191, 148, 0.55); }
.sic-abroad { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-text-2); }
#view-wallet .sic-abroad .cash-ico { width: 16px; height: 16px; color: var(--c-review); }

/* Три шага вместо абзаца: читаются за секунду и по порядку действий. */
.sic-steps { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0 2px; }
.sic-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; line-height: 1.45; color: var(--c-text-2);
  animation: sicStep 0.5s var(--ease-out) both;
}
.sic-steps li:nth-child(1) { animation-delay: 0.35s; }
.sic-steps li:nth-child(2) { animation-delay: 0.45s; }
.sic-steps li:nth-child(3) { animation-delay: 0.55s; }
.sic-steps i {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: -1px; border-radius: 50%;
  font: 800 11px/1 'Manrope', system-ui, sans-serif; font-style: normal; color: #fff;
  background: var(--c-accent-soft); border: 1px solid rgba(224, 81, 140, 0.42);
}
.sic-steps b { color: var(--text); }
@keyframes sicStep { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sic-actions { display: grid; gap: 8px; }
#view-wallet .sic-actions .cash-cta { margin: 0; }
#view-wallet .sic-actions .cash-ghost { width: 100%; height: 50px; }
#view-wallet .sic-actions .cash-ghost .cash-ico { color: var(--c-ok); }

#view-wallet .sic-pay .invoice-status { margin: -6px 0 0; }
#view-wallet .invoice-status.is-wait::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px;
  border-radius: 50%; background: var(--c-wait);
  animation: sicBlink 1.2s ease-in-out infinite;
}

.sic-note { display: flex; gap: 9px; margin: 0; padding: 0 4px; font-size: 12px; line-height: 1.5; color: var(--c-text-3); }
#view-wallet .sic-note .cash-ico { width: 15px; height: 15px; margin-top: 1px; color: var(--c-wait); opacity: 0.85; }

/* Отмена - тихая ссылка: рядом с главной кнопкой её нажимали бы по ошибке. */
#view-wallet .sic-cancel {
  justify-self: center; margin-top: -4px; padding: 8px 12px;
  border: 0; background: none; cursor: pointer;
  font: 700 12.5px/1.3 'Manrope', system-ui, sans-serif; color: var(--c-text-3);
  text-decoration: underline; text-decoration-color: rgba(241, 235, 247, 0.22); text-underline-offset: 4px;
  transition: color 0.2s;
}
#view-wallet .sic-cancel.is-armed { color: #ff8b99; text-decoration-color: rgba(255, 139, 153, 0.4); }
#view-wallet .sic-pay[data-expired] .sic-cancel { color: var(--text); }

/* Деньги пришли: кольцо и галка рисуются линией, сумма всплывает. */
.sic-done { display: grid; justify-items: center; gap: 4px; padding: 10px 0 2px; text-align: center; }
.sic-done-mark { width: 78px; height: 78px; margin-bottom: 6px; }
.sic-done-ring {
  fill: rgba(99, 191, 148, 0.1); stroke: var(--c-ok); stroke-width: 2.6;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); transform-origin: 32px 32px;
  animation: sicDraw 0.65s var(--ease-out) forwards;
}
.sic-done-tick {
  fill: none; stroke: var(--c-ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: sicDraw 0.4s 0.5s var(--ease-out) forwards;
}
@keyframes sicDraw { to { stroke-dashoffset: 0; } }
.sic-done-title { font: 800 15px/1.2 'Manrope', system-ui, sans-serif; color: var(--c-text-2); }
.sic-done-sum {
  min-height: 34px;
  font: 800 30px/1.1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: -0.02em;
  color: #fff; font-variant-numeric: tabular-nums;
  animation: sicStep 0.5s 0.7s var(--ease-out) both;
}
#view-wallet .sic-done .cash-ghost { width: 100%; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  #view-wallet .sic-card, .sic-card-sheen, .sic-steps li, .sic-done-sum { animation: none; }
  .sic-card-sheen { display: none; }
  .sic-clock-fg { transition: none; }
  .sic-done-ring, .sic-done-tick { animation: none; stroke-dashoffset: 0; }
  .sic-card:disabled .sic-card-stamp { animation: none; opacity: 1; transform: translate(-50%, -50%) rotate(-9deg); }
}


/* ---------- Счёт криптовалютой ---------- */

/* Цвет монеты остаётся, но одной линией: счета USDT и биткоина различимы
   и без светящейся рамки внутри рамки. */
#view-wallet .crypto-invoice {
  border: 0; padding: 0; background: none; box-shadow: none;
}
#view-wallet .payment-checkout:has(.crypto-invoice) {
  border-color: color-mix(in srgb, var(--coin, #fff) 30%, var(--c-border));
}
#view-wallet .invoice-head { gap: 14px; margin-bottom: 16px; }
.invoice-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); }
#view-wallet .invoice-sum { margin-top: 3px; font: 800 24px/1.1 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: -0.01em; }
#view-wallet .invoice-sub { margin-top: 4px; font-size: 12.5px; color: var(--c-text-2); }
#view-wallet .invoice-qr { margin: 0 auto 16px; border-radius: 14px; }
#view-wallet .payment-checkout .field-label { display: block; margin: 0 2px 6px; }

#view-wallet .invoice-address {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin: 0 0 10px; padding: 12px 12px 12px 14px;
  border: 1px solid var(--c-border-2); border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  text-align: left; color: var(--text); cursor: pointer;
  transition: border-color 0.2s;
}
#view-wallet .invoice-address.is-copied { border-color: rgba(99, 191, 148, 0.55); }
#view-wallet .invoice-address .cash-copy-label { display: inline; font: inherit; }
#view-wallet .invoice-address .invoice-addr {
  flex: 1; min-width: 0;
  font: 400 12.5px/1.5 'JetBrains Mono', ui-monospace, monospace; word-break: break-all;
}
/* Селектор длинный нарочно: старое .invoice-address span делает любой span
   внутри адреса моноширинным блоком, и подпись падала под значок. */
#view-wallet .invoice-address .cash-copy {
  display: flex; align-items: center; gap: 6px; flex: none;
  font-family: 'Manrope', system-ui, sans-serif; line-height: 1; white-space: nowrap;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 12px; font-weight: 800; color: var(--text);
  transition: background 0.2s, color 0.2s;
}
#view-wallet .cash-copy .cash-ico { width: 15px; height: 15px; }
#view-wallet .cash-copy .cash-ico + .cash-ico { display: none; }
.is-copied .cash-copy { color: var(--c-ok); background: rgba(99, 191, 148, 0.12); }
#view-wallet .is-copied .cash-copy .cash-ico:first-child { display: none; }
#view-wallet .is-copied .cash-copy .cash-ico + .cash-ico { display: block; animation: cashPop 0.35s var(--ease-spring); }
@keyframes cashPop { from { transform: scale(0.3); } to { transform: scale(1); } }

#view-wallet .invoice-warn {
  display: flex; gap: 10px;
  margin: 0; padding: 11px 12px;
  border: 1px solid rgba(223, 190, 98, 0.22); border-left: 1px solid rgba(223, 190, 98, 0.22);
  border-radius: 14px;
  background: rgba(223, 190, 98, 0.07);
  font-size: 12.5px; line-height: 1.5; color: var(--c-text-2);
}
#view-wallet .invoice-warn .cash-ico { width: 17px; height: 17px; margin-top: 1px; color: var(--c-wait); }

/* ---------- Вывод ---------- */

#view-wallet .withdraw-form { margin: 0; }
#view-wallet .withdraw-hint {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin: 8px 2px 0;
  font-size: 12.5px; color: var(--c-text-3);
}
#view-wallet .withdraw-hint b { color: var(--c-text-2); font-weight: 800; }
#view-wallet .withdraw-hint i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
#view-wallet .withdraw-locked {
  flex-basis: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 12px;
  background: rgba(223, 190, 98, 0.07); border: 1px solid rgba(223, 190, 98, 0.2);
  font-size: 12px; line-height: 1.5; color: var(--c-text-2);
}

/* Способ вывода: три сегмента с плашкой, которая едет под выбранный. */
#view-wallet .cash-seg {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 0; padding: 3px; border-radius: 13px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--c-border);
}
#view-wallet .cash-seg::before {
  content: '';
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.35s var(--ease-out);
}
#view-wallet .cash-seg[data-active="card"]::before { transform: translateX(100%); }
#view-wallet .cash-seg[data-active="crypto"]::before { transform: translateX(200%); }
.cash-seg-btn {
  position: relative; height: 38px;
  border: 0; background: none;
  font: 800 14px/1 'Manrope', system-ui, sans-serif; color: var(--c-text-3);
  cursor: pointer; transition: color 0.2s;
}
.cash-seg-btn.active { color: #fff; }

#view-wallet .cash-fields { display: grid; gap: 12px; margin: 14px 0 0; }
.cash-field { display: grid; gap: 6px; }
#view-wallet .field-label { margin: 0 0 0 2px; font-size: 12px; font-weight: 700; color: var(--c-text-3); }
#view-wallet .cash-field .seed-input {
  width: 100%; height: 50px; padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--c-border);
  background: rgba(0, 0, 0, 0.3);
  font: 600 16px/1 'Manrope', system-ui, sans-serif; color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#view-wallet .cash-field .seed-input.cash-mono { font: 400 14px/1 'JetBrains Mono', ui-monospace, monospace; }
#view-wallet .cash-field .seed-input::placeholder { color: var(--c-text-3); }
#view-wallet .cash-field .seed-input:focus { border-color: var(--c-accent-line); box-shadow: 0 0 0 4px rgba(224, 81, 140, 0.12); }
#view-wallet .cash-field select.seed-input {
  padding-right: 40px;
  background: rgba(0, 0, 0, 0.3) url("data:image/svg+xml,%3Csvg xmln'http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a698c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}
#view-wallet .cash-field select.seed-input option { background: var(--bg-soft); color: #fff; }
#view-wallet #coinNetwork { margin-top: 12px; }

/* ---------- История ---------- */

.cash-h2 {
  margin: 26px 4px 10px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-text-3);
}
.cash-list {
  border-radius: 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  overflow: hidden;
}
.cash-list > .skel-line { margin: 14px; }
.cash-tx {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  padding: 12px 14px;
}
.cash-tx + .cash-tx { border-top: 1px solid var(--c-border); }
.cash-tx-ico {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: var(--c-text-2);
}
#view-wallet .cash-tx-ico .cash-ico { width: 17px; height: 17px; }
.cash-tx-main, .cash-tx-side { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cash-tx-side { align-items: flex-end; }
.cash-tx-main b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cash-tx-side b { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cash-tx small { font-size: 12px; color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cash-tx.tone-ok .cash-tx-ico { color: var(--c-ok); background: rgba(99, 191, 148, 0.12); }
.cash-tx.tone-ok .cash-tx-side b, .cash-tx.tone-ok .cash-tx-side small { color: var(--c-ok); }

/* Оплата не пришла: строка ожидающей оплаты и форма с чеком. */
.cash-issue { padding: 12px 14px; display: grid; gap: 4px; }
.cash-issue + .cash-issue { border-top: 1px solid var(--c-border); }
.cash-issue-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cash-issue-head b { font: 800 16px/1.2 'Unbounded', 'Manrope', system-ui, sans-serif; }
.cash-issue-head span { font-size: 12px; font-weight: 700; color: var(--c-wait); text-align: right; }
.cash-issue small { font-size: 12px; color: var(--c-text-3); overflow-wrap: anywhere; }
.cash-issue-note { margin: 4px 0 0; font-size: 12.5px; color: var(--c-text-2); }
.cash-issue-btn { justify-self: start; margin-top: 6px; }
.cash-issue-form { display: grid; gap: 8px; margin-top: 8px; }
.cash-issue-form[hidden] { display: none; }
#view-wallet .cash-issue-form textarea { font: 500 14px/1.4 'Manrope', system-ui, sans-serif; resize: vertical; }
.cash-issue-form p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--c-text-2); }
.cash-issue-file {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer;
  border-radius: 12px; border: 1px dashed var(--c-border-2); color: var(--c-text-2); font-size: 13px; font-weight: 700;
}
.cash-issue-file.is-picked { border-style: solid; border-color: var(--c-ok); color: var(--c-ok); }
.cash-issue-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-wallet .cash-issue-file .cash-ico { width: 17px; height: 17px; flex: none; }

/* Заявки на вывод: та же строка списка, цвет статуса - точкой и словом,
   а не толстой полосой слева. Печать выплаты и её удар остались. */
#view-wallet .payout-row {
  margin: 0; padding: 14px 16px;
  border: 0; border-radius: 0;
  background: none;
}
#view-wallet .payout-row + .payout-row { border-top: 1px solid var(--c-border); }
#view-wallet .payout-row.cancelled { opacity: 0.55; }
#view-wallet .payout-head b { font: 800 17px/1.2 'Unbounded', 'Manrope', system-ui, sans-serif; letter-spacing: -0.01em; }
#view-wallet .payout-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0;
  font-size: 12px; font-weight: 800; letter-spacing: 0;
}
#view-wallet .payout-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#view-wallet .payout-status.pending { color: var(--c-wait); }
#view-wallet .payout-status.processing { color: var(--c-review); }
#view-wallet .payout-row.pending .payout-status::before { animation: cashBlink 1.6s ease-in-out infinite; }
@keyframes cashBlink { 50% { opacity: 0.35; } }
#view-wallet .payout-date { margin-top: 4px; font-size: 12px; color: var(--c-text-3); }
#view-wallet .payout-requisites {
  margin-top: 10px; padding: 9px 11px; border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 12.5px; color: var(--c-text-2);
}
#view-wallet .payout-comment {
  margin-top: 8px; padding: 9px 11px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12.5px; color: var(--c-text-2);
}
#view-wallet .payout-cancel {
  width: auto; height: 34px; margin-top: 10px; padding: 0 12px;
  border: 1px solid var(--c-border-2); border-radius: 10px; background: none;
  font: 700 13px/1 'Manrope', system-ui, sans-serif; color: var(--text); cursor: pointer;
}

.cash-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 20px; text-align: center; }
.cash-empty-ico {
  width: 44px; height: 44px; margin-bottom: 8px; display: grid; place-items: center;
  border-radius: 14px; background: rgba(255, 255, 255, 0.05); color: var(--c-text-3);
}
#view-wallet .cash-empty-ico .cash-ico { width: 20px; height: 20px; }
.cash-empty b { font-size: 14.5px; font-weight: 800; }
.cash-empty small { font-size: 12.5px; color: var(--c-text-3); }

@media (prefers-reduced-motion: reduce) {
  #view-wallet *, #view-wallet *::before, #view-wallet *::after {
    animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
  }
}

/* ---------- Первый заход ---------- */

/*
 * Онбординг перекрывает экран целиком и закрывается только кнопкой. Промах
 * мимо карточки здесь ничего не закрывает намеренно: это единственный экран,
 * который игрок видит один раз в жизни, и случайно смахнуть его жалко.
 */
.onb-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(6, 1, 12, 0.9);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  animation: fade 0.2s;
}

.onb-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-soft);
  border: 2px solid var(--pink);
  border-radius: 24px;
  padding: 26px 22px calc(22px + var(--safe-bottom));
  text-align: center;
  box-shadow: 0 18px 50px rgba(255, 46, 138, 0.11);
}

.onb-art { font-size: 44px; line-height: 1; margin-bottom: 14px; }
.onb-title { font-size: 21px; font-weight: 900; }
.onb-text { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.onb-text b { color: var(--text); }

/* Отдельным абзацем и чуть тише основного текста: это уточнение, а не
   заголовок экрана. */
.onb-note {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
}

.onb-dots { display: flex; gap: 7px; justify-content: center; margin: 20px 0 18px; }
.onb-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); transition: background 0.2s, width 0.2s;
}
.onb-dots i.on { width: 20px; border-radius: 4px; background: var(--pink); }

.onb-actions { display: flex; gap: 10px; }
.onb-actions .btn { flex: 1; padding: 14px; }

/* ---------- Вход на сайт ---------- */

/*
 * Гостю в шапке две кнопки вместо баланса. На телефоне место в шапке
 * дорогое, поэтому кнопки компактные, а «Войти» - контуром: главное
 * действие нового посетителя - регистрация.
 */
.top-auth { display: flex; gap: 6px; }
.top-auth .btn { padding: 9px 12px; font-size: 13px; border-radius: 12px; white-space: nowrap; }
.top-auth .btn-outline { border-width: 1px; }
/*
 * «Войти» и «Регистрация» - глянцевые, тем же языком, что «Пополнить»: блик
 * по верхней половине, светлая кромка сверху, тень снизу (решение заказчика:
 * прежние были бледными). Главная - регистрация, она в фирменной
 * розово-фиолетовой заливке; вход - во фиолетовом стекле, заметный, но
 * тише. Блик - фон и тени, без фильтров и вечных анимаций.
 */
.top-auth .top-register,
.top-auth .top-login {
  position: relative;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(60, 0, 70, 0.45);
}
.top-auth .top-register {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.1) 50%, transparent 51%),
    linear-gradient(135deg, #ff4fa8, #b23cff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(80, 0, 90, 0.35),
    0 8px 22px -8px rgba(255, 46, 160, 0.75);
}
.top-auth .top-login {
  border: 1px solid rgba(206, 176, 255, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.06) 50%, transparent 51%),
    linear-gradient(135deg, #7b4dff, #4a23c9);
  box-shadow:
    inset 0 1px 0 rgba(235, 220, 255, 0.6),
    inset 0 -2px 0 rgba(30, 0, 80, 0.35),
    0 8px 20px -10px rgba(140, 90, 255, 0.8);
}
.top-auth .top-register:active,
.top-auth .top-login:active { transform: translateY(1px); filter: brightness(0.95); }

.account-btn {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(20, 6, 34, 0.85);
  border: 1px solid var(--line);
}
.account-btn svg { width: 18px; height: 18px; }
.account-btn:active { transform: scale(0.94); }

/*
 * Окно входа выше остальных сцен: его открывает отказ сервера посреди любого
 * действия, и спрятаться под сценой, которая его вызвала, оно не должно.
 * Соглашение (.doc-backdrop) открывается из него и стоит ещё выше.
 */
.auth-backdrop {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(6, 1, 12, 0.88);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  overflow-y: auto;
  animation: fade 0.2s;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: auto;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px 20px calc(20px + var(--safe-bottom));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(224, 81, 140, 0.08);
}

.auth-close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px;
  border: none; border-radius: 12px;
  background: transparent; color: var(--muted);
  font-size: 26px; line-height: 1;
  cursor: pointer;
}
.auth-close:hover { color: var(--text); }

.auth-logo { display: block; height: 34px; margin: 0 auto 10px; }
.auth-title { text-align: center; font-size: 20px; font-weight: 900; margin-bottom: 16px; }

.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; margin-bottom: 16px;
  border-radius: 14px;
  background: var(--card);
}
.auth-tab {
  border: none; border-radius: 10px;
  padding: 10px;
  background: transparent; color: var(--muted);
  font: inherit; font-weight: 800; font-size: 14px;
  cursor: pointer;
}
.auth-tab.active { background: var(--card-hi); color: var(--text); }

.auth-form { display: flex; flex-direction: column; gap: 12px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span:first-child { font-size: 13px; font-weight: 700; color: var(--muted); }
.auth-field input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font: inherit; font-size: 16px;
  outline: none;
  transition: border-color 0.15s;
}
.auth-field input:focus { border-color: var(--violet); }

.auth-pass { position: relative; display: block; }
.auth-pass input { padding-right: 46px; }
.auth-eye {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border: none; background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
}
.auth-eye svg { width: 20px; height: 20px; }

.auth-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.45; color: var(--muted);
}
.auth-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--pink); flex: none; }
.auth-check a { color: var(--text); }

.auth-error {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(217, 90, 104, 0.12);
  border: 1px solid rgba(217, 90, 104, 0.4);
  color: #f2b7be;
  font-size: 13px; line-height: 1.45;
}
.auth-note { font-size: 13px; line-height: 1.5; color: var(--muted); }

.auth-submit { margin-top: 4px; }
.auth-link {
  align-self: center;
  border: none; background: transparent;
  color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.auth-link:hover { color: var(--text); }

/* Переход между входом и регистрацией: внизу окна, тихой строкой с одной
   яркой ссылкой. */
.auth-switch {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  text-align: center; font-size: 14px; color: var(--muted);
}
.auth-switch-go {
  border: 0; background: none; padding: 0 2px; cursor: pointer;
  font: inherit; font-weight: 800;
  color: #ff7ac0; text-decoration: underline; text-underline-offset: 3px;
}
.auth-switch-go:hover { color: #ffa3d4; }

/* Значок гостя - тот же, что у игрока, но с розовой точкой: «войдите». */
.top-auth .top-guest { position: relative; }
.top-auth .top-guest::after {
  content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: #ff4fa8; box-shadow: 0 0 0 2px #0d0418;
}

.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 12px;
  color: var(--muted); font-size: 12px; font-weight: 700;
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Кнопку рисует сам Telegram в iframe, мы только ставим её по центру. */
.auth-tg { display: flex; justify-content: center; min-height: 40px; }

.auth-account { display: flex; flex-direction: column; }
.acc-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.acc-row span { color: var(--muted); }
.acc-row b { text-align: right; overflow-wrap: anywhere; }
.acc-hint { margin: 14px 0 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.auth-account .auth-tg { margin-bottom: 4px; }
.acc-logout { color: var(--muted); }

/* ---------- Воронка ---------- */

/*
 * Полоса рисуется шириной от когорты, а не от предыдущего шага: так видно
 * настоящую потерю, а не красивую картинку, где каждый шаг почти полный.
 */
.funnel-step {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  position: relative;
  overflow: hidden;
}
.funnel-bar {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(255, 46, 138, 0.34), rgba(255, 46, 138, 0.12));
  z-index: 0;
}
.funnel-step > * { position: relative; z-index: 1; }
.funnel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.funnel-title { font-weight: 800; font-size: 14px; }
.funnel-users { font-weight: 900; font-size: 15px; }
.funnel-sub { margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.funnel-drop { color: #ff6b6b; }

/* ============================================================
   КОМПЬЮТЕР
   ============================================================

   Всё, что ниже, живёт под медиазапросами и на телефоне не срабатывает.
   Отдельного набора вёрстки для компьютера нет намеренно: две вёрстки
   расходятся через месяц, и починенное в одной остаётся сломанным в другой.

   Порог 1024px, а не 768: планшет в альбомной ориентации ближе к телефону,
   боковая панель на нём съедает треть ширины.

   Что здесь происходит по сути:
   1. Меню переезжает из листа по кнопке в постоянную боковую панель.
   2. Контент получает предел ширины и центрируется - строка в 1800 пикселей
      нечитаема, а растянутые на весь монитор кейсы выглядят как ошибка.
   3. Полки из двух кейсов в ряд становятся сеткой по 5-6.
   4. Появляются состояния наведения, которых на телефоне не бывает.
   ============================================================ */

/* Ширина боковой панели: одно число, от которого пляшет весь сдвиг. */
/* Ширина боковой панели: одно число, от которого пляшет весь сдвиг.
   Под плитки с рисунком и двумя строками текста нужно больше прежнего. */
/* Панель шире прежней: в макете подписи вроде «Открывай и побеждай» идут
   одной строкой, а в 268 точках они упирались в многоточие. */
:root { --side-w: 306px; }

.side-nav { display: none; }
.top-deposit { display: none; }
.top-stats { display: none; }
.top-motto { display: none; }

@media (min-width: 1024px) {

  /* ---------- Боковая панель ---------- */

  /*
   * Боковая панель: те же плитки, что в листе меню телефона (общие правила
   * в блоке «ПЛИТКИ МЕНЮ»), здесь только сама панель и наведение.
   */
  .side-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
    width: var(--side-w);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 14px 18px;
    background: var(--bg-soft);
    border-right: 1px solid var(--line);
    overflow-y: auto;
  }

  /* Логотип боковой панели - тот же файл, что и в шапке, и та же кнопка:
     нажатие возвращает на главную. */
  .side-brand {
    display: block;
    width: 100%;
    padding: 4px 6px 20px;
    margin-bottom: 4px;
    border: none; background: none;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: transform 0.15s;
  }
  .side-brand:active { transform: scale(0.97); }
  .side-brand-logo { display: block; width: 100%; max-width: 216px; height: auto; }

  /* Глянец логотипа (просьба заказчика): светлая верхняя половина и
     тонкая кромка блика, наложенные ровно по контуру букв - маской из того
     же файла. Без фильтров и без вечной анимации: блик проходит один раз,
     при наведении. */
  .side-brand { position: relative; overflow: hidden; }
  .side-brand::after {
    content: '';
    position: absolute; left: 6px; top: 4px;
    width: calc(100% - 12px); max-width: 216px; aspect-ratio: 900 / 235; /* logo.webp */
    pointer-events: none;
    -webkit-mask: url(/assets/ui/logo.webp) left top / 100% auto no-repeat;
    mask: url(/assets/ui/logo.webp) left top / 100% auto no-repeat;
    background:
      linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.75) 47%, transparent 56%) -260px 0 / 300% 100% no-repeat,
      linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.14) 50%, transparent 53%);
    transition: background-position 0s;
  }
  .side-brand:hover::after {
    background-position: 260px 0, 0 0;
    transition: background-position 0.9s ease-out;
  }

  /* «Пополнить» в шапке - глянцевая: блик по верхней половине, светлая
     кромка сверху, тень снизу. Блик - отдельный слой, а не фильтр. */
  .top-deposit {
    position: relative; overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 50%, transparent 51%),
      linear-gradient(135deg, #ff4fa8, #b23cff);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -2px 0 rgba(80, 0, 90, 0.35),
      0 10px 26px -8px rgba(255, 46, 160, 0.65);
    text-shadow: 0 1px 1px rgba(90, 0, 70, 0.4);
  }
  .top-deposit::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
  }
  .top-deposit:hover::after { left: 130%; transition: left 0.8s ease-out; }

  /* Касса и поддержка залиты своим цветом: при наведении они светлеют, а
     не перекрашиваются в общий фиолетовый. */
  .side-item.is-wide:hover, .side-item.is-tall:hover { filter: brightness(1.12); }
  .side-item:not(.is-wide):not(.is-tall):hover {
    border-color: rgba(168, 120, 255, 0.7);
    background:
      linear-gradient(145deg, rgba(168, 120, 255, 0.2), transparent 62%),
      linear-gradient(180deg, #1c0d33, #130823);
  }
  .side-item:hover .side-go { border-color: var(--text); transform: rotate(45deg) translate(2px, -2px); }


  /* Поддержка стоит последней плиткой того же вида: в макете она такая же. */
  #sideSupport { margin-top: 4px; }

  /* ---------- Шапка и общий сдвиг ---------- */

  body { padding-left: var(--side-w); }

  .topbar {
    padding: 14px 32px;
    /* Слева показатели, справа баланс: полоса перестала пустовать. */
    justify-content: space-between;
  }
  .topbar .brand { display: none; }

  .top-stats {
    display: flex; align-items: center; gap: 22px;
    font-size: 13.5px; color: var(--muted);
  }
  .top-stat b, .top-online b { color: var(--text); font-weight: 800; }

  .top-online { display: flex; align-items: center; gap: 8px; }
  /* Показатели не сжимаются и не переносятся: уступает место надпись. */
  .top-stats { flex: none; white-space: nowrap; }

  /* Каллиграфия в шапке: золото с бликом сверху, тонкая тёмная обводка,
     чтобы тонкие штрихи не терялись на тёмной полосе. Стоит посередине
     свободного места и сжимается первой, если окно узкое. */
  .top-motto {
    /* Не сжимается: обрезанная каллиграфия хуже пустого места. Где ей не
       хватает ширины, она прячется целиком (медиазапрос ниже). Поля auto
       ставят её посередине свободной полосы. */
    display: block; flex: 0 0 auto; margin: 0 auto; padding: 0 6px;
    text-align: center; white-space: nowrap;
    font: 400 34px/1.15 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive;
    letter-spacing: 0.5px;
    background: linear-gradient(180deg, #fff6d0 0%, #ffd56a 45%, #e7a23a 70%, #fff0c0 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 8px rgba(255, 190, 80, 0.25));
  }
  /* Уже 1440 точек надпись не помещается рядом со счётчиками с воздухом, а
     обрезанная каллиграфия хуже пустого места: прячем. */
  @media (max-width: 1439px) { .top-motto { display: none; } }

  /*
   * Зелёная точка мигает медленно и без резкого гашения: частое мигание в углу
   * экрана раздражает сильнее, чем убеждает. Полторы секунды на цикл - примерно
   * такт спокойного дыхания.
   */
  .online-dot {
    position: relative;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--green);
    animation: onlinePulse 1.6s ease-in-out infinite;
  }
  /* Расходящееся кольцо - отдельный слой с transform и opacity, а не тень:
     точка стоит в шапке на каждом экране, и тень перерисовывалась бы всегда. */
  .online-dot::after {
    content: '';
    position: absolute; inset: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--green) 55%, transparent);
    animation: onlineRing 1.6s ease-out infinite;
  }
  @keyframes onlinePulse { 50% { opacity: 0.55; } }
  @keyframes onlineRing {
    0%   { transform: scale(1); opacity: 1; }
    50%, 100% { transform: scale(2.35); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .online-dot, .online-dot::after { animation: none; } }
  .menu-btn { display: none; }

  .top-right { gap: 14px; }
  .top-deposit { display: inline-block; padding: 11px 22px; font-size: 15px; }
  .balance-chip { padding: 10px 18px; }
  .balance-value { font-size: 17px; }

  /* Меню-картинка на компьютере не показывается никогда: её место заняла
     боковая панель. Правило страхует от случайного вызова openMenu(). */
  .menu-backdrop { display: none !important; }

  /* Крупнее весь текст разом: на мониторе телефонные 17 пикселей выглядят
     мелким шрифтом в договоре. Всё, что задано в em и rem, вырастет само. */
  html, body { font-size: 19px; }

  main {
    max-width: 1520px;
    margin: 0 auto;
    padding: 26px 34px 60px;
  }

  .section-title { font-size: 26px; }
  .game-sub { font-size: 16px; }
  .notice { font-size: 15px; }
  .btn { font-size: 17px; padding: 16px 24px; }
  .btn-sm { font-size: 15px; padding: 13px 20px; }
  .tab { font-size: 15px; }

  /* Фоновые пятна на широком экране были маленькими кляксами в углах. */
  .bg-glow-1 { width: 620px; height: 620px; top: -220px; left: 180px; }
  .bg-glow-2 { width: 560px; height: 560px; top: 30%; right: -180px; }
  .bg-glow-3 { width: 520px; height: 520px; bottom: -200px; left: 240px; }

  /* ---------- Первый экран ---------- */

  /*
   * ШИРИНА БАННЕРОВ НА КОМПЬЮТЕРЕ ОГРАНИЧЕНА ДВАЖДЫ, И ОБА РАЗА НЕ ПРОСТО ТАК.
   *
   * Баннер показывается целиком, без обрезки, значит его высота жёстко
   * привязана к ширине: при пропорции 2:1 растянутый на 1450 px баннер даёт
   * 725 px высоты и занимает экран ноутбука один, без остатка. Поэтому:
   *
   *   1. --banner-max держит разумный предел по ширине;
   *   2. вторая граница считается от высоты окна: ширина не больше, чем
   *      (высота окна минус запас) x пропорция. Запас - это шапка, лента над
   *      ней и та часть пары баннеров, которая обязана попасть на первый
   *      экран. Так баннер остаётся крупным на большом мониторе и сам
   *      ужимается на низком окне, вместо того чтобы выдавить собой всё
   *      остальное.
   *
   * --banner-min не даёт второй границе ужать баннер до марки. На окне
   * высотой 720 px она сама по себе выдавала 520 px ширины: баннер терялся
   * посреди пустой колонки, и весь смысл большой рекламной картинки пропадал.
   * Ниже этой планки баннер просто уходит под сгиб, и это меньшее зло.
   */
  /*
   * ПЕРВЫЙ ЭКРАН НА КОМПЬЮТЕРЕ: слайд-шоу слева, постер сезонного кейса
   * справа, лента и пара баннеров - во всю ширину под ними.
   *
   * Стопка занимает всю колонку содержимого, от боковой панели до правого
   * края: лента должна тянуться именно так.
   *
   * Ширины колонок не заданы числами. Слайд-шоу и постер стоят рядом и обязаны
   * быть одной высоты, а высота у обоих идёт от ширины - значит доли ширины
   * должны совпасть с пропорциями картинок. Сетка так не умеет, поэтому
   * верхняя строка сама флекс: доля каждого равна его пропорции, и высоты
   * сходятся при любой ширине окна. Тот же приём, что у пары баннеров.
   */
  .banner-stack {
    display: grid;
    grid-template-areas: 'top' 'feed' 'pair';
    width: 100%;
    margin: 6px 0 24px;
  }

  .banner-top {
    grid-area: top;
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }
  .banner-top > .hero { flex-grow: var(--hero-ratio); flex-shrink: 1; flex-basis: 0%; min-width: 0; }
  /*
   * ВЫСОТУ СТРОКИ ЗАДАЁТ ТОЛЬКО СЛАЙД-ШОУ.
   *
   * Карточка кейса вынута из потока (position: absolute внутри слота) и
   * поэтому на высоту строки не влияет вовсе. Иначе на узком окне она
   * оказывалась выше слайд-шоу и низы не сходились: под постером стоит подпись
   * с названием и ценой, а её высота от ширины окна почти не зависит.
   *
   * Постер внутри показывается через contain - он виден целиком при любой
   * ширине колонки, остаток высоты забирает подпись. Доля 0.65 подобрана так,
   * чтобы полей у постера почти не оставалось на обычных ширинах: при 1440
   * идеальная доля 0.61, при 1920 - 0.68, при 2560 - 0.70.
   */
  .banner-top > .featured-slot {
    position: relative;
    flex-grow: 0.65;
    flex-shrink: 1; flex-basis: 0%; min-width: 0;
    align-self: stretch;
  }
  .banner-top .featured { position: absolute; inset: 0; margin: 0; }
  .banner-top .featured-card.own-art {
    max-width: none;
    height: 100%;
    display: flex; flex-direction: column;
    margin: 0;
  }
  /* Постер забирает всю высоту, которая осталась от подписи. aspect-ratio
     здесь снят намеренно: высоту теперь задаёт строка, а не пропорция. */
  .banner-top .featured-card.own-art .featured-cover {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
  }
  .banner-top .featured-card.own-art .cover-photo { object-fit: contain; }
  .banner-top .featured-card.own-art .featured-cover { padding: 0; }
  .banner-top .featured-card.own-art .featured-body {
    flex: 0 0 auto;
    padding: 14px 18px 18px;
  }
  /* В селекторах стоит .own-art: телефонные правила для постера тоже названы
     через .own-art, и без него они оказывались специфичнее этих. */
  .banner-top .featured-card.own-art .featured-name { font-size: 24px; }
  .banner-top .featured-card.own-art .featured-sub { font-size: 13px; margin-top: 4px; }
  .banner-top .featured-card.own-art .featured-foot { margin-top: 10px; gap: 10px; }
  .banner-top .featured-card.own-art .featured-price { font-size: 22px; }
  .banner-top .featured-card.own-art .featured-max,
  .banner-top .featured-card.own-art .featured-chip { font-size: 12px; padding: 5px 11px; }
  /* Сезонного кейса нет - слайд-шоу занимает строку целиком. */
  .banner-stack.no-featured .banner-top > .featured-slot { display: none; }

  .banner-stack > .feed { grid-area: feed; }
  .banner-stack > .promo-pair { grid-area: pair; }

  .hero { border-radius: 24px; border-width: 3px; }
  .hero-dots { bottom: 14px; }
  .hero-dot { width: 9px; height: 9px; }
  .hero-dot.on { width: 26px; border-radius: 5px; }

  .promo-pair img { border-radius: 16px; }

  /* ---------- Лента ---------- */

  /* На компьютере карточек в ряд помещается много, и мелкие там особенно
     заметны. Плитка шире, сумма крупнее. */
  .feed { --feed-min: 190px; --feed-gap: 8px; }
  .feed-name { max-width: 230px; }
  .feed-title { font-size: 13px; }
  .feed-card { padding: 11px 13px 12px; }
  .feed-art { width: 44px; height: 44px; }
  .feed-art svg { width: 30px; height: 30px; }
  .feed-name { font-size: 12.5px; }
  .feed-value { font-size: 17px; }

  /* ---------- Lucky Fortune ---------- */

  .fortune-page { max-width: 720px; }

  /* В строку - и по одной линии сверху и снизу. Доли ширины равны пропорциям
     самих картинок, поэтому высота у обеих выходит одинаковой сама собой:
     тот же приём, что у пары баннеров на первом экране. Числа печатает
     tools/banners.mjs. */
  .footer-promos { max-width: 860px; flex-direction: row; }
  .footer-promo { flex-shrink: 1; flex-basis: 0%; min-width: 0; }
  .footer-promo:nth-child(1) { flex-grow: 2.893; }  /* footer-support.webp, 1400x484 */
  .footer-promo:nth-child(2) { flex-grow: 3.846; }  /* footer-channel.webp, 1400x364 */
  .fortune-title { font-size: 38px; }
  .fortune-sub { font-size: 16px; }
  .fortune-wheel-box { width: min(100%, 480px); }
  .fortune-status-main { font-size: 18px; }
  .fortune-log-row { font-size: 15px; padding: 11px 15px; }

  .fortune-steps { max-width: 460px; }

  /* Знаки партнёров на широком экране стоят в одну строку. */
  .footer-mark { width: 104px; height: 33px; }

  /* ---------- Полки ---------- */

  .shelf { padding: 34px 0; margin: -34px 0; }

  /* Всё по центру: и заголовок полки, и сами кейсы. Выключка влево оставляла
     неполный последний ряд прижатым к краю, и полка выглядела оборванной. */
  .shelf-head { align-items: center; text-align: center; margin-bottom: 18px; }
  .shelf-title { font-size: 30px; gap: 16px; }
  .shelf-title::before, .shelf-title::after { width: 48px; height: 14px; }
  .shelf-hint { font-size: 12.5px; }
  .shelf-range { font-size: 13px; }

  /*
   * Три кейса в ряд вместо пяти: обложки нарисованы крупными (582 пикселя по
   * длинной стороне), и на пяти колонках они показывались вчетверо мельче
   * своего размера.
   *
   * Здесь flex, а не сетка, и это принципиально. Сетка ставит карточки по
   * колонкам, поэтому неполный последний ряд всегда липнет влево: четвёртый
   * кейс встаёт в первую колонку и висит у края. Выровнять по центру именно
   * ОСТАТОК сетка не умеет вообще. Flex переносит строки и центрирует каждую
   * отдельно, включая последнюю, - ровно то, что нужно.
   */
  /* Вплотную, но не касаясь: у вырезанного арта есть собственные прозрачные
     поля, и щель в пару пикселей здесь читается как воздух. */
  .shelf-row { --shelf-gap: 2px; --shelf-cols: 3; }

  /* Предел в 420 точек: на широком мониторе треть полки - это обложка в
     полэкрана. Ширина ячейки при этом та же переменная, что и везде. */
  .shelf-row > .case-card {
    flex-basis: min(420px, var(--shelf-cell));
    max-width: 420px;
  }
  .shelf-row .case-cover { height: 300px; }
  /*
   * Название в полтора раза крупнее: рядом с обложкой в 300 пикселей прежние
   * 14 пикселей читались подписью под картинкой, а не именем кейса.
   *
   * Правило перечисляет и вариант с вырезанным артом. Без него не работает
   * вовсе: у .case-card.has-art .case-name специфичность выше, и оно
   * перебивало размер независимо от порядка в файле.
   */
  .shelf-row .case-name,
  .shelf-row .case-card.has-art .case-name { font-size: 21px; min-height: 48px; }
  .shelf-row .case-price { font-size: 19px; }
  .shelf-row .case-max { font-size: 13px; }


  /*
   * Кейсы с вырезанным артом ставим в слот одной высоты.
   *
   * На телефоне высота слота идёт от пропорции самого рисунка (--art-ar), и
   * при двух карточках в ряду разнобой не виден. При пяти в ряду названия и
   * цены встают на пяти разных уровнях, и полка выглядит осыпавшейся.
   * Фиксированная высота это чинит без потерь: арт внутри всё равно
   * вписывается по contain и прижат к низу, то есть не обрезается.
   */
  .shelf-row .case-card.has-art .case-cover {
    aspect-ratio: auto;
    height: 330px;
  }
  .shelf-country .shelf-row .case-card.has-art .case-cover,
  .shelf-got .shelf-row .case-card.has-art .case-cover { height: 350px; }

  /* ---------- Витрина сезонного кейса ---------- */

  /*
   * На телефоне это карточка в столбик: обложка сверху, описание снизу. На
   * широком экране столбик в 560 пикселей посреди пустой строки выглядит
   * забытым, поэтому витрина разворачивается в баннер во всю ширину.
   */
  .featured::before { max-width: none; }
  .featured-card {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    /* Области заданы явно: бейджи на телефоне идут отдельной полосой сверху и
       в сетке заняли бы первую ячейку, вытолкнув описание на вторую строку.
       Здесь они уходят из потока и ложатся поверх обложки. */
    grid-template-areas: 'cover body';
    align-items: stretch;
  }
  .featured-cover { grid-area: cover; height: 100%; min-height: 270px; }
  .featured-body {
    grid-area: body;
    display: flex; flex-direction: column; justify-content: center;
    padding: 28px 36px;
    text-align: left;
  }
  .featured-name { font-size: 34px; }
  .featured-sub { font-size: 15px; margin-top: 8px; }
  .featured-foot { justify-content: flex-start; gap: 14px; margin-top: 18px; }
  .featured-price { font-size: 30px; }
  .featured-badges {
    position: absolute;
    top: 18px; left: 18px;
    z-index: 2;
    padding: 0;
    justify-content: flex-start;
  }

  /*
   * Кейс с присланным баннером - исключение: его макет сведён целиком, с
   * клетчатым флагом слева и ящиком справа. Разрезать такую картинку на
   * колонку нельзя, поэтому эта витрина остаётся в столбик, только шире.
   * Пропорция задаёт высоту от ширины, а не наоборот: наоборот баннер вылезал
   * за свою колонку и наезжал на описание.
   */
  .featured-card.own-art {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'cover' 'body';
    max-width: 900px;
    margin: 0 auto;
  }
  .featured-card.own-art .featured-cover {
    height: auto;
    min-height: 0;
    aspect-ratio: 942 / 1100;
  }
  .featured-card.own-art .featured-body { text-align: center; padding: 22px 28px 26px; }
  .featured-card.own-art .featured-foot { justify-content: center; }

  /* ---------- Экран кейса ---------- */

  /*
   * На компьютере кейс перестаёт быть слоем во весь экран и становится обычной
   * частью страницы: сверху шапка с балансом, слева меню, снизу подвал. Слой во
   * весь экран оставлял вокруг кейса пустое поле, и приложение выглядело
   * оборванным именно там, где игрок проводит больше всего времени.
   */
  .opener {
    position: static;
    inset: auto;
    height: auto;
    overflow: visible;
    background: transparent;
  }
  .opener-theme { position: absolute; inset: 0; }
  .opener-scroll { position: relative; overflow: visible; height: auto; padding: 0; }
  .opener-inner { max-width: 940px; }

  /* Пока открыт кейс, остальные разделы прячем: иначе они окажутся над ним на
     той же странице. */
  body.case-open main > .view { display: none !important; }

  /* Свой заголовок кейса дублировал бы шапку страницы - она теперь на месте.
     Остаётся только кнопка возврата. */
  body.case-open .opener-top .opener-brand { display: none; }
  .opener-top { justify-content: flex-end; }

  /* Шапка страницы липкая и лежит поверх содержимого. Без этого запаса любая
     прокрутка «к элементу» - браузерная, по якорю, с клавиатуры - заводит
     верх кейса вместе с кнопкой возврата под неё. */
  .opener { scroll-margin-top: 96px; }
  .opener-close { position: relative; z-index: 1; }

  /* ---------- Барабан на компьютере ---------- */

  /*
   * ПРОКРУТ УВЕЛИЧЕН ПРИМЕРНО В 2.2 РАЗА ОТ ТЕЛЕФОННОГО.
   *
   * Дело не в красоте. На мониторе телефонная лента высотой 172 точки
   * занимает седьмую часть высоты экрана, а страница вокруг неё пустая:
   * главное событие игры игрок смотрит как в замочную скважину. Лента - это
   * то, ради чего кейс и открывают, и на компьютере она должна быть главным
   * предметом на экране, а не строчкой в нём.
   *
   * Ширина колонки поднята вместе с плиткой: при плитке в 300 точек в прежние
   * 940 влезало меньше трёх штук, и соседей по барабану не было видно вовсе -
   * лента переставала читаться как лента.
   *
   * Шаг плитки нигде не зашит числом: measureReel() снимает его с разметки
   * перед каждым прокрутом, поэтому увеличение - чистая вёрстка, и
   * арифметика остановки подстраивается сама.
   */
  .opener-inner { max-width: 1240px; }

  .reels:not(.compact) .reel-wrap { height: 380px; border-radius: 28px; }
  .reels:not(.compact) .reel { gap: 22px; padding: 26px 0; }
  .reels:not(.compact) .reel-tile {
    flex: 0 0 300px;
    width: 300px;
    gap: 14px;
    padding: 26px 20px 30px;
    border-radius: 30px;
  }
  .reels:not(.compact) .reel-tile::before { inset: 8px; border-radius: 22px; }
  .reels:not(.compact) .reel-tile::after { height: 4px; bottom: 4px; }
  .reels:not(.compact) .tile-icon { width: 84px; height: 84px; }
  .reels:not(.compact) .tile-name { font-size: 22px; }
  .reels:not(.compact) .tile-value { font-size: 36px; }
  .reels:not(.compact) .reel-tile.is-showcase .tile-icon { height: 76px; }
  .reels:not(.compact) .reel-marker { --arrow-w: 40px; --arrow-h: 23px; }
  .reels:not(.compact) .reel-fade { width: 130px; }

  /*
   * Пачка растёт скромнее: пять лент по 380 точек - это две с половиной
   * высоты экрана, и результат пачки уезжает далеко вниз. Полуторный рост
   * держит все пять в одном экране ноутбука.
   */
  .reels.compact .reel-wrap { height: 168px; }
  .reels.compact .reel { gap: 14px; padding: 14px 0; }
  .reels.compact .reel-tile {
    flex-basis: 160px; width: 160px;
    padding: 10px 9px 13px;
    gap: 5px;
    border-radius: 18px;
  }
  .reels.compact .reel-tile::before { inset: 5px; border-radius: 13px; }
  .reels.compact .tile-icon { width: 38px; height: 38px; }
  .reels.compact .tile-name { font-size: 14px; }
  .reels.compact .tile-value { font-size: 19px; }
  .reels.compact .reel-fade { width: 80px; }

  /* Лента фриспинов живёт вне #reels, поэтому правила выше её не задевают.
     Растёт она мягче: серия идёт долго, и во весь экран она утомляет. */
  .fs-reel-wrap { height: 250px; }
  .fs-reel-wrap .reel { gap: 16px; padding: 18px 0; }
  .fs-reel-wrap .reel-tile {
    flex: 0 0 200px; width: 200px;
    padding: 18px 14px 20px;
    gap: 10px;
    border-radius: 22px;
  }
  .fs-reel-wrap .tile-icon { width: 56px; height: 56px; }
  .fs-reel-wrap .tile-name { font-size: 16px; }
  .fs-reel-wrap .tile-value { font-size: 24px; }
  .fs-reel-wrap .reel-fade { width: 90px; }

  /* Сам кейс на широком экране крупнее: в колонке 940 пикселей рисунок высотой
     в 196 тонет в пустоте вокруг. */
  .case-stage { min-height: 200px; padding: 30px 0 22px; }
  .case-stage-box { height: calc((300px - (var(--rows, 1) - 1) * 8px) / var(--rows, 1)); }

  /* На мониторе три плитки во всю колонку растянулись бы в полосу: ряд
     ограничен шириной, при которой плитки остаются плитками. */
  /* Управление и пачки одной ширины: золотая полоса во всю колонку над
     узким рядом пачек выглядела как два разных экрана. */
  .open-bar, .auto-row, .fsbuy { max-width: 460px; margin-left: auto; margin-right: auto; }

  /* Состав кейса по четыре в ряд: по два он растягивался на пол-экрана,
     и до конца списка приходилось листать втрое дольше нужного. */
  .drops-grid { grid-template-columns: repeat(4, 1fr); }
  .drops-grid > *:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }

  /* Выбор количества и автооткрытий в один ряд каждый - места хватает. */

  /* ---------- Игры и разделы в одну колонку ---------- */

  /*
   * Краш, рулетку, апгрейд и остальное растягивать на 1400 пикселей нельзя:
   * колесо рулетки шириной с монитор смотрится нелепо, а поле ставки в
   * полторы тысячи пикселей просто неудобно. Ограничиваем колонку и
   * центрируем - ровно то, что делают все, у кого эти игры есть.
   */
  #view-crash, #view-roulette, #view-upgrade, #view-fair,
  #view-bonuses, #view-partner {
    max-width: 860px;
    margin: 0 auto;
  }

  .game-head { text-align: center; }
  .game-title { font-size: 40px; }

  /* ---------- Касса в две колонки ---------- */

  /*
   * Слева баланс и кнопки, справа то, что открыто: пополнение или вывод.
   * Формы вместе с историями лежат внутри этих панелей, поэтому колонку под
   * них берём широкую, а баланс с кнопками остаётся узким и липким - он нужен
   * перед глазами, пока заполняешь форму.
   *
   * .active обязателен: правило с идентификатором перебивает .view{display:none},
   * и без него касса показывалась бы поверх любого другого раздела.
   */
  #view-wallet.active {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    grid-template-areas:
      'card  pane'
      'acts  pane'
      '.     pane';
    gap: 18px 30px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
  }
  #view-wallet > .wallet-card { grid-area: card; margin: 0; position: sticky; top: 90px; }
  #view-wallet > .wallet-actions { grid-area: acts; margin: 0; }
  /* Баланс липкий, и переключатель липнет сразу под ним: иначе полупрозрачная
     карточка баланса наезжала бы на него при прокрутке истории. Высоту
     карточки кладёт в --cash-hero-h код (watchCashHero). */
  #view-wallet > .wallet-card { z-index: 2; }
  #view-wallet > .cash-switch { position: sticky; top: calc(90px + var(--cash-hero-h, 190px) + 18px); z-index: 2; }
  #view-wallet .cash-panel { padding: 20px; }
  #view-wallet > .wallet-pane { grid-area: pane; margin: 0; }

  .coin-grid { grid-template-columns: repeat(6, 1fr); }

  /* ---------- Админка ---------- */

  /* Админка наоборот распахивается на всю ширину: там таблицы. */
  #view-admin { max-width: none; }
  .admin-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

  /* На мониторе разделы уходят в колонку слева: пятнадцать кнопок в строку
     не помещаются даже здесь, а прокручивать их вбок на мыши неудобно. */
  .bo-shell {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .bo-nav {
    display: block;
    position: sticky; top: 96px;
    border-bottom: none;
    padding: 0; margin: 0;
    overflow: visible;
  }
  .bo-group { margin-bottom: 16px; }
  .bo-link { display: block; width: 100%; text-align: left; margin: 0 0 5px; }
  .bo-title { font-size: 28px; }
  .bo-scroll .admin-table { min-width: 0; }
  .bo-roles { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .bo-perms { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .bo-settings { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .bo-chart { height: 160px; }

  /* Карточка игрока на мониторе - не слой во весь экран, а колонка справа:
     слой прятал список, и после каждой правки приходилось искать игрока
     заново. */
  .admin-detail {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(620px, 52vw);
    border-left: 1.5px solid var(--line);
    box-shadow: -30px 0 80px -40px #000;
    padding: 26px 28px 60px;
  }


  /* ---------- Наведение ---------- */

  /* Телефон состояний наведения не знает, и без них интерфейс на компьютере
     кажется неживым: непонятно, что вообще нажимается. */
  .case-card { transition: transform 0.16s, box-shadow 0.16s; }
  .shelf-row .case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -10px var(--cat-color);
  }
  .btn:hover:not(:disabled) { filter: brightness(1.08); }
  .chip:hover, .tab:hover { filter: brightness(1.12); }
  .feed-card:hover { filter: brightness(1.12); }
}

/* Совсем широкие мониторы: шестой кейс в ряду вместо воздуха по краям. */
/* Очень широкий монитор: четвёртый кейс в ряду, но не мельче. */
@media (min-width: 1800px) {
  .shelf-row > .case-card { flex-basis: min(420px, calc((100% - 6px) / 4)); }
  main { max-width: 1780px; }
}

/* Полоса прокрутки в цвет темы: белая системная на тёмном фоне бросается
   в глаза сильнее самого интерфейса. */
@media (min-width: 1024px) {
  * { scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--violet); }
}

/* Переключатель режима начисления в админке. Подпись длинная намеренно: от
   этой галочки зависит, сможет ли игрок вывести деньги, и угадывать её смысл
   поддержка не должна. */
.adj-mode {
  display: flex; align-items: center; gap: 9px;
  margin: 10px 0 6px;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer;
}
.adj-mode input { width: 18px; height: 18px; accent-color: var(--pink); }
.adj-hint { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }


/* ============================================================
   СЛОТЫ
   ============================================================

   Вёрстка mobile-first, как и весь файл: сначала телефон, компьютерная
   раскладка собрана в конце блока под @media (min-width: 1024px).

   ОФОРМЛЕНИЕ РАЗЛИЧАЕТСЯ ПО data-theme НА КОРНЕ ЭКРАНА, а не отдельными
   наборами правил на каждую игру. Общая часть одна: сетка, панель, окна,
   поведение. Тема меняет только картинки рамки, фон и цвет золота - четыре
   переменные и три фоновых слоя. Иначе вторая игра означала бы вторую копию
   восьмисот строк, и починенное в одной оставалось бы сломанным в другой.
   ============================================================ */

#view-slots { padding: 0; }

/* ---------- Полка игр ---------- */

.sl-shelf {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0 12px 20px;
}

.sl-card {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 214, 120, .3);
  background: linear-gradient(180deg, rgba(14, 26, 42, .96), rgba(6, 14, 24, .96));
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sl-card:active { transform: scale(.99); }

/*
 * Обложка это сам игровой экран, сжатый до значка. Рисовать отдельную
 * картинку значит обещать не то, что внутри: игрок нажимает на одно, а
 * открывается другое.
 */
.sl-card-cover {
  display: block;
  width: 100%;
  aspect-ratio: 640 / 380;
  object-fit: cover;
}

.sl-card-body { display: block; padding: 10px 12px 12px; }
.sl-card-name {
  display: block;
  font-size: 17px; font-weight: 900; letter-spacing: .06em; color: #fff;
}
.sl-card-tag {
  display: block; margin-top: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #ffd45e;
}
.sl-card-blurb {
  display: block; margin-top: 6px;
  font-size: 12px; line-height: 1.4; color: #9fb8cc;
}
.sl-card-facts {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.sl-card-facts span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: 10px; font-weight: 700; color: #cfe4f5;
}

/* ---------- Сцена игры ---------- */

.sl-stage {
  position: relative;
  min-height: 100%;
  padding: 10px 10px 24px;
  overflow: hidden;

  /* Тема задаёт только это. Всё остальное общее. */
  --sl-gold: #ffd45e;
  --sl-ink: #071624;
  --sl-frame: rgba(255, 214, 120, .3);
}

.sl-stage[data-theme='pirate'] {
  background: linear-gradient(180deg, #123a5c 0%, #0d2740 55%, #071624 100%);
}
.sl-stage[data-theme='temple'] {
  --sl-gold: #f3c55a;
  --sl-ink: #0a0c18;
  background: linear-gradient(180deg, #2a1a3a 0%, #14101f 45%, #07060d 100%);
}

/*
 * Фон собирается из слоёв, а не кладётся одной картинкой. Макет нарисован
 * под широкий экран: положенный целиком на телефон, он либо обрезается по
 * бокам (и скала с водопадом уезжает), либо сжимается в полоску. Небо
 * тянется по ширине, боковые виды появляются только на широком экране.
 */
.sl-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat;
  background-position: top center, left 74px, right 74px;
  background-size: 100% auto, auto 0, auto 0;
}
.sl-stage[data-theme='pirate'] .sl-bg {
  background-image: url('/assets/ui/slot-bg-sky.webp'),
                    url('/assets/ui/slot-bg-cliff.webp'),
                    url('/assets/ui/slot-bg-jungle.webp');
}
.sl-stage[data-theme='temple'] .sl-bg {
  background-image: url('/assets/ui/gl-bg-sky.webp'),
                    url('/assets/ui/gl-bg-left.webp'),
                    url('/assets/ui/gl-bg-right.webp');
}

.sl-stage > *:not(.sl-bg) { position: relative; z-index: 1; }

/* ---------- Шапка ---------- */

.sl-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sl-back {
  display: flex; align-items: center; gap: 2px;
  padding: 5px 9px 5px 5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(8, 16, 28, .8);
  font-size: 11px; font-weight: 700; color: #cfe4f5;
  cursor: pointer;
}

.sl-logo { width: 116px; height: auto; justify-self: end; }

.sl-jackpots {
  grid-column: 1 / -1;
  display: flex;
  gap: 4px;
}

.sl-jp {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 8px;
  padding: 3px 4px 4px;
  text-align: center;
  border: 1px solid var(--sl-frame);
  background: linear-gradient(180deg, rgba(10, 22, 36, .92), rgba(6, 14, 24, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.sl-jp-grand { border-color: #e8574a; background: linear-gradient(180deg, #5c1410, #2a0a08); }
.sl-jp-major { border-color: #9d6ae8; background: linear-gradient(180deg, #34175c, #1a0b2c); }
.sl-jp-minor { border-color: #57b6e8; background: linear-gradient(180deg, #123c5c, #08202e); }
.sl-jp-mini  { border-color: #5ac86a; background: linear-gradient(180deg, #14451e, #08220e); }

.sl-jp-name {
  display: block;
  font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #ffe6a8;
}
.sl-jp-sum {
  display: block;
  font-size: 11px; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sl-bonus-badge {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid var(--sl-gold);
  background: rgba(8, 18, 30, .92);
}
.sl-bonus-title { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--sl-gold); }
.sl-bonus-left { font-size: 12px; font-weight: 800; color: #fff; }

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

/*
 * На телефоне столбик кнопок из макета лёг бы поверх барабанов: ширины на
 * отдельную колонку нет. Поэтому он разворачивается в строку над машиной, а
 * в боковой столбец возвращается только на компьютере.
 */
.sl-rail {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
}

.sl-round {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(180deg, rgba(22, 40, 60, .95), rgba(8, 18, 30, .95));
  color: #cfe4f5;
  cursor: pointer;
}
.sl-stage[data-theme='temple'] .sl-round {
  border-color: rgba(243, 197, 90, .45);
  background: linear-gradient(180deg, rgba(38, 28, 18, .95), rgba(14, 10, 8, .95));
  color: var(--sl-gold);
}
.sl-round:active { transform: scale(.94); }
.sl-ico { width: 19px; height: 19px; }
.sl-ico-sm { width: 14px; height: 14px; }

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

/*
 * Поля машины - это и есть место под рамку. Раньше доски висели снаружи
 * через отрицательные отступы и наползали на крайние барабаны: на телефоне
 * левый столбец символов уходил под дерево наполовину.
 */
.sl-machine {
  position: relative;
  margin: 0 auto;
  max-width: 560px;
  padding: 13px 15px 21px;
}

/*
 * Рамка нарисована одним элементом с несколькими фоновыми слоями, а не
 * четырьмя картинками в разметке. Слоёв у разных тем разное число, и
 * держать в разметке четыре доски, из которых половина не нужна, значит
 * возить по экрану пустые узлы.
 */
.sl-frame {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-repeat: no-repeat;
}
.sl-stage[data-theme='pirate'] .sl-frame {
  background-image: url('/assets/ui/slot-frame-top.webp'),
                    url('/assets/ui/slot-frame-bottom.webp'),
                    url('/assets/ui/slot-frame-left.webp'),
                    url('/assets/ui/slot-frame-right.webp');
  background-position: top left, bottom left, top left, top right;
  background-size: 100% 14px, 100% 22px, 15px 100%, 15px 100%;
}
/*
 * У храма рамка это две колонны и арка. Арка вырезана правой половиной и
 * ставится дважды: второй слой отражён по горизонтали через background с
 * тем же файлом и позиционированием от левого края - зеркалить приходится
 * поворотом самого слоя, поэтому левая половина лежит на отдельном
 * псевдоэлементе.
 */
.sl-stage[data-theme='temple'] .sl-frame {
  background-image: url('/assets/ui/gl-col-left.webp'),
                    url('/assets/ui/gl-col-right.webp'),
                    url('/assets/ui/gl-arch.webp');
  background-position: left 12px, right 12px, right top;
  background-size: 16px calc(100% - 12px), 16px calc(100% - 12px), 50% 14px;
}
.sl-stage[data-theme='temple'] .sl-frame::before {
  content: '';
  position: absolute; left: 0; top: 0; width: 50%; height: 14px;
  background: url('/assets/ui/gl-arch.webp') left top / 100% 100% no-repeat;
  transform: scaleX(-1);
}

.sl-reels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 4px;
  border-radius: 6px;
  background: var(--sl-ink);
  border: 2px solid rgba(0, 0, 0, .6);
  overflow: hidden;
}

/*
 * Высота барабана задаётся ТРЕМЯ ячейками, а ячейка - квадрат от своей
 * ширины. Так окно всегда показывает ровно три символа при любой ширине
 * экрана, и лента не встаёт между ними.
 */
.sl-reel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 3;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .25));
  border-radius: 4px;
}

.sl-strip { will-change: transform; }

.sl-cell {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 4%;
}
.sl-sym { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Выигрышная клетка светится, а не прыгает: прыжок сбивает чтение линии. */
.sl-cell.is-win { animation: sl-pulse 620ms ease-in-out infinite alternate; }
.sl-cell.is-scatter { animation: sl-scatter 520ms ease-in-out infinite alternate; }

@keyframes sl-pulse {
  from { filter: none; }
  to { filter: drop-shadow(0 0 7px #ffd45e) brightness(1.18); }
}
@keyframes sl-scatter {
  from { filter: none; }
  to { filter: drop-shadow(0 0 9px #6ee0ff) brightness(1.25); }
}

/* Барабан, который решает бонус, подсвечивается рамкой. */
.sl-reel.is-anticipating {
  box-shadow: inset 0 0 0 2px var(--sl-gold), 0 0 14px rgba(255, 212, 94, .5);
}
.sl-reel.is-expanded {
  box-shadow: inset 0 0 0 2px #7ef0ff, 0 0 16px rgba(126, 240, 255, .45);
}

.sl-lines {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  pointer-events: none;
  z-index: 3;
}
.sl-line { opacity: .9; filter: drop-shadow(0 0 2px currentColor); }

.sl-linetag {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  z-index: 4;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--sl-gold);
  background: rgba(6, 12, 20, .94);
  font-size: 11px; font-weight: 700; color: var(--sl-gold);
  white-space: nowrap;
}

/* ---------- Плашка события ---------- */

.sl-banner {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgba(4, 10, 18, .82);
  animation: sl-pop 260ms ease-out;
}
.sl-banner-title {
  font-size: 30px; font-weight: 900; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff3c4, #ffb02e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sl-banner-sub { margin-top: 6px; font-size: 15px; font-weight: 700; color: #ffe6a8; }

@keyframes sl-pop {
  from { transform: scale(.86); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- Панель ---------- */

/*
 * Отступ сверху с запасом: нижняя часть рамки вынесена из потока и висит на
 * краю машины. Без запаса она ложится поверх баланса.
 */
.sl-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
  align-items: stretch;
}

.sl-balance, .sl-bet {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid var(--sl-frame);
  background: linear-gradient(180deg, rgba(14, 28, 44, .95), rgba(6, 14, 24, .95));
}
.sl-balance { flex-direction: column; gap: 1px; }
.sl-bet-box {
  border: 0; background: none; padding: 0; text-align: center; min-width: 0;
  color: inherit; cursor: pointer;
}
.sl-label {
  display: block;
  font-size: 9px; font-weight: 800; letter-spacing: .1em; color: #8fb2cc;
}
.sl-value { display: block; font-size: 15px; font-weight: 800; color: #fff; }
.sl-bet-btn { width: 30px; height: 30px; }
.sl-bet-btn .sl-ico { width: 15px; height: 15px; }

/*
 * Кнопка прокрута - единственный элемент панели, который обязан быть
 * большим: в неё целятся сотни раз за сессию, и промах по ней стоит дороже
 * любой другой ошибки интерфейса.
 */
.sl-spin {
  grid-column: 1 / -1;
  justify-self: center;
  position: relative;
  width: 92px; height: 92px;
  border: 0; padding: 0; background: none; cursor: pointer;
}
.sl-spin img { width: 100%; height: 100%; display: block; transition: transform 120ms; }
.sl-spin:active img { transform: scale(.95); }
.sl-spin:hover img { filter: brightness(1.1); }
.sl-spin.is-spinning img { animation: sl-turn 900ms linear infinite; }
.sl-spin:disabled { cursor: default; }
.sl-spin-count {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 900; color: #2a1400;
  pointer-events: none;
}
@keyframes sl-turn { to { transform: rotate(360deg); } }

.sl-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; line-height: 1.15;
  color: #eaf4ff;
  text-align: center;
  cursor: pointer;
}
.sl-btn-max { background: linear-gradient(180deg, #12508c, #0a2c50); }
.sl-btn-auto { background: linear-gradient(180deg, #3a2a8c, #1c1450); }
.sl-btn-auto.is-on { border-color: var(--sl-gold); box-shadow: 0 0 10px rgba(255, 212, 94, .4); }
.sl-btn-buy {
  grid-column: 1 / -1;
  flex-direction: row; gap: 8px;
  background: linear-gradient(180deg, #7a2050, #3c0f28);
}
.sl-stage[data-theme='temple'] .sl-btn-max { background: linear-gradient(180deg, #4a3714, #241a08); }
.sl-stage[data-theme='temple'] .sl-btn-auto { background: linear-gradient(180deg, #3d2a4c, #1c1226); }
.sl-stage[data-theme='temple'] .sl-btn-buy { background: linear-gradient(180deg, #6d4a12, #33220a); }
.sl-ico-gift { width: 22px; height: 22px; color: #ff8fc0; }
.sl-stage[data-theme='temple'] .sl-ico-gift { color: var(--sl-gold); }
.sl-btn-buy span { text-align: left; }

.sl-win {
  margin: 10px auto 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--sl-gold);
  background: rgba(8, 18, 30, .9);
  width: max-content;
}
.sl-win .sl-label { display: inline-block; }
.sl-win-sum { font-size: 17px; font-weight: 900; color: var(--sl-gold); }

.sl-tools { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }

/* ---------- Боковые панели ---------- */

/* На телефоне они живут в окнах: место на экране дороже. */
.sl-side { display: none; }

.sl-card-panel {
  border-radius: 14px;
  border: 1px solid var(--sl-frame);
  background: linear-gradient(180deg, rgba(10, 22, 36, .96), rgba(6, 14, 24, .96));
  padding: 10px;
}
.sl-panel-head {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 12px; font-weight: 900; letter-spacing: .1em; color: var(--sl-gold);
  margin-bottom: 8px;
}

.sl-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sl-pay {
  display: flex; align-items: center; gap: 8px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}
.sl-pay-img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.sl-pay-nums { display: flex; flex-direction: column; font-size: 11px; font-weight: 700; color: var(--sl-gold); }
.sl-pay-text { font-size: 11px; line-height: 1.35; color: #cfe4f5; }
.sl-pay-special { display: grid; gap: 6px; margin-top: 8px; }
.sl-pay-note { margin-top: 10px; font-size: 11px; line-height: 1.45; color: #8fb2cc; }

.sl-history-list { display: flex; flex-direction: column; gap: 3px; }
.sl-history-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  font-size: 11px; font-weight: 700; color: #cfe4f5;
}
.sl-h-win { color: #8fb2cc; }
.sl-h-win.is-win { color: #6ee36e; }
.sl-h-time { color: #6e8aa2; }
.sl-history-empty { padding: 10px; text-align: center; font-size: 12px; color: #8fb2cc; }

/* ---------- Окна ---------- */

.sl-modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(3, 8, 14, .8);
}
.sl-modal-box {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: 86vh; overflow-y: auto;
  padding: 18px 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 214, 120, .35);
  background: linear-gradient(180deg, #14182a, #080a14);
}
.sl-modal-close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #cfe4f5; cursor: pointer;
}
.sl-modal-title {
  margin: 0 0 10px; text-align: center;
  font-size: 15px; font-weight: 900; letter-spacing: .1em; color: #ffe6a8;
}
.sl-modal-lead { margin: 0 0 10px; font-size: 13px; color: #cfe4f5; text-align: center; }
.sl-modal-note { margin-top: 10px; font-size: 11px; line-height: 1.45; color: #8fb2cc; }
.sl-rules { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: #cfe4f5; }
.sl-rules li { margin-bottom: 7px; }

/* Золотая кнопка из макета: рамка, градиент, блик сверху. */
.sl-gold-btn {
  display: block; width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid #c9992f;
  background: linear-gradient(180deg, #f6d271, #c2871f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  font-size: 13px; font-weight: 900; letter-spacing: .08em; color: #2a1a04;
  cursor: pointer;
}
.sl-gold-btn:active { transform: scale(.98); }
.sl-gold-btn-quiet {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 214, 120, .35);
  box-shadow: none;
  color: #ffe6a8;
}

.sl-menu-list { display: flex; flex-direction: column; gap: 6px; }
.sl-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  font-size: 13px; font-weight: 700; color: #eaf4ff;
  cursor: pointer;
}
.sl-menu-item .sl-ico { color: var(--sl-gold, #ffd45e); }

.sl-switch {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px;
  font-size: 13px; font-weight: 700; color: #eaf4ff;
  cursor: pointer;
}
.sl-switch span { flex: 1 1 auto; }
.sl-switch .sl-ico { color: #ffd45e; }

/*
 * Переключатель из макета - пилюля с бегунком, а не системная галочка.
 * Системная выглядит по-разному на iOS, Android и в вебе и не красится, а
 * весь экран собран в одном стиле.
 */
.sl-switch input {
  appearance: none; -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 44px; height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 214, 120, .35);
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: background 160ms;
}
.sl-switch input::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #cfe4f5;
  transition: transform 160ms, background 160ms;
}
.sl-switch input:checked { background: linear-gradient(180deg, #f6d271, #c2871f); }
.sl-switch input:checked::after { transform: translateX(20px); background: #2a1a04; }

.sl-chip {
  min-width: 52px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 214, 120, .35);
  background: rgba(255, 255, 255, .05);
  font-size: 13px; font-weight: 800; color: #eaf4ff;
  cursor: pointer;
}
.sl-chip.is-on { border-color: #ffd45e; background: rgba(255, 212, 94, .18); color: #ffe6a8; }
.sl-chip.is-off { opacity: .4; }
.sl-auto-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sl-bet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.sl-buy-art, .sl-free {
  border-radius: 12px;
  background-size: cover; background-position: center;
  text-align: center;
}
.sl-buy-art {
  display: grid; place-items: center;
  height: 72px; margin-bottom: 10px;
}
.sl-buy-art span {
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(6, 10, 18, .7);
  font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #ffe6a8;
}
.sl-buy-price {
  text-align: center; font-size: 26px; font-weight: 900; color: #ffd45e;
  margin: 8px 0 4px;
}

.sl-free { padding: 16px 12px; }
.sl-free-count {
  font-size: 54px; font-weight: 900; line-height: 1;
  background: linear-gradient(180deg, #fff6d0, #f0b537);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sl-free-sub {
  margin-top: 2px;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; color: #ffe6a8;
}
.sl-free-note { margin: 6px 0 0; font-size: 11px; color: #cfe4f5; }

.sl-bigwin { text-align: center; padding: 6px 0 0; }
.sl-bigwin-title {
  font-size: 40px; font-weight: 900; letter-spacing: .04em; line-height: 1;
  background: linear-gradient(180deg, #fff6d0, #f0a021);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sl-bigwin-in 420ms cubic-bezier(.2, 1.4, .4, 1);
}
.sl-bigwin.is-mega .sl-bigwin-title {
  background: linear-gradient(180deg, #fff, #ff6b5a);
  -webkit-background-clip: text; background-clip: text;
}
.sl-bigwin-sum {
  margin-top: 8px;
  font-size: 26px; font-weight: 900; color: #ffe6a8;
}
@keyframes sl-bigwin-in {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.sl-alert { text-align: center; }
.sl-ico-alert { width: 40px; height: 40px; color: #ff6b5a; }

/* ============================================================
   СЛОТЫ: КОМПЬЮТЕР
   ============================================================ */

@media (min-width: 1024px) {
  .sl-shelf { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 0 0 24px; }
  .sl-card:hover { border-color: var(--sl-gold, #ffd45e); }
  .sl-card-name { font-size: 20px; }

  .sl-stage {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 310px;
    grid-template-areas: 'top top top' 'rail main side';
    gap: 14px;
    padding: 16px 18px 26px;
    align-content: start;
  }

  .sl-top { grid-area: top; grid-template-columns: auto auto 1fr auto; gap: 14px; }
  .sl-logo { width: 190px; justify-self: start; }
  .sl-jackpots { grid-column: auto; gap: 8px; max-width: 700px; }
  .sl-jp { padding: 5px 10px 6px; border-radius: 10px; }
  .sl-jp-name { font-size: 12px; }
  .sl-jp-sum { font-size: 16px; }
  .sl-bonus-badge { grid-column: auto; margin-top: 0; }

  .sl-rail {
    grid-area: rail;
    display: flex; flex-direction: column; gap: 12px; align-items: center;
    padding-top: 16px;
  }
  .sl-round { width: 46px; height: 46px; }
  .sl-ico { width: 22px; height: 22px; }

  .sl-main { grid-area: main; }
  .sl-side { grid-area: side; display: flex; flex-direction: column; gap: 12px; }

  /*
   * Боковые виды появляются только здесь: это часть макета, которая
   * читается лишь на широком экране. Они за содержимым и кликов не ловят.
   */
  .sl-bg { background-size: 100% auto, auto 440px, auto 440px; }

  .sl-machine { max-width: 820px; padding: 18px 22px 30px; }
  .sl-reels { gap: 4px; padding: 6px; border-radius: 8px; }
  .sl-stage[data-theme='pirate'] .sl-frame {
    background-size: 100% 20px, 100% 31px, 22px 100%, 22px 100%;
  }
  .sl-stage[data-theme='temple'] .sl-frame {
    background-size: 22px calc(100% - 18px), 22px calc(100% - 18px), 50% 20px;
  }
  .sl-stage[data-theme='temple'] .sl-frame::before { height: 20px; }

  /*
   * На компьютере панель это ряд, а не сетка: кнопки разной ширины, и
   * колоночная раскладка выносила «Купить бонус» за пределы колонки -
   * надпись обрезало боковым столбцом. Ряд с переносом сам укладывается.
   */
  .sl-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
  }
  .sl-spin, .sl-btn-buy { grid-column: auto; }
  .sl-btn { flex: 0 0 auto; }
  .sl-balance, .sl-bet { padding: 9px 16px; }
  .sl-value { font-size: 18px; }
  .sl-bet-btn { width: 36px; height: 36px; }
  .sl-spin { width: 116px; height: 116px; }
  .sl-btn { min-height: 56px; font-size: 12px; padding: 8px 16px; }

  .sl-tools { justify-content: flex-end; margin-top: 14px; }

  .sl-pay-img { width: 38px; height: 38px; }
  .sl-bet-grid { grid-template-columns: repeat(5, 1fr); }

  /* Во весь экран: рамка раздела перестаёт ограничивать ширину. */
  .sl-stage.is-full {
    position: fixed; inset: 0; z-index: 50;
    overflow-y: auto;
  }
  .sl-stage:fullscreen { overflow-y: auto; }
}

/* ============================================================
   СИСТЕМА КАРТОЧЕК ВЫИГРЫША
   ============================================================

   Раньше вид карточки собирался из одной переменной --tier-color: фон,
   рамка, подчёркивание и цена были её производными. Семь цветов на 820
   названий, и лента читалась как один повторяющийся элемент разных оттенков.

   Теперь независимых осей шесть, и они комбинируются свободно:

     data-family    композиция: форма, поверхность, декор, шрифт подписи
     data-shape     силуэт карточки (clip-path)
     data-material   чем залит рисунок предмета
     --tier-color   редкость: только акцент, но НЕ стиль
     размер         компактная плитка или крупная карточка
     анимация       блик и свечение

   Семейство приходит от темы кейса (server/themes.js -> VISUALS), поэтому
   решение принимается 41 раз, а не 820.

   ВАЖНО: редкость не равна стилю. Легендарный предмет в семействе slate
   остаётся сдержанным. Иначе игрок читает «ярче - значит дороже и
   вероятнее», а это неправда: вероятность решается уравнением в cases.js.

   Поверхность и декор рисуются псевдоэлементами, а не узлами разметки: в
   ленте кейса сорок плиток одновременно, и два лишних div на каждую - это
   восемьдесят узлов на ровном месте. */

/* ---------- Слой B. Материалы ----------
   Остановки градиента читают эти переменные (public/item-art.js). Поэтому
   поверхность предмета выбирается в стилях, а мотив остаётся один. */
[data-material="gold"]    { --mat-1:#fbeaa8; --mat-2:#e8c25f; --mat-3:#b8862c; }
[data-material="chrome"]  { --mat-1:#f2f6fa; --mat-2:#aab6c4; --mat-3:#6e7a8a; }
[data-material="glass"]   { --mat-1:#dff1fa; --mat-2:#9cc8de; --mat-3:#5a8fa8; }
[data-material="holo"]    { --mat-1:#9fe9ff; --mat-2:#c79cff; --mat-3:#ff9ecb; }
[data-material="crystal"] { --mat-1:#e4f7ff; --mat-2:#9ccdea; --mat-3:#5f8fc4; }
[data-material="neon"]    { --mat-1:#bff4ff; --mat-2:#6bbdcc; --mat-3:#3a7f93; }
/* Углерод осветлён относительно поверхности карточки намеренно: предмет
   лежит НА тёмной карточке, и материал цвета фона превратил бы его в пятно. */
[data-material="carbon"]  { --mat-1:#8f96a1; --mat-2:#4a515b; --mat-3:#6d7480; }
/* Матовый берёт цвет редкости - это прежнее поведение, сохранённое
   намеренно: часть кейсов должна выглядеть как раньше, иначе обновление
   читается как смена продукта, а не как его развитие. */
[data-material="matte"]   {
  --mat-1: color-mix(in srgb, var(--tier-color) 55%, #ffffff);
  --mat-2: var(--tier-color);
  --mat-3: color-mix(in srgb, var(--tier-color) 62%, #000000);
}

/* ---------- Слой A. Геометрия ----------
   Форма обрезает СОДЕРЖИМОЕ, а содержимое о форме не знает: цена уезжала под
   грань шестиугольника. Поэтому безопасный отступ объявляет сама форма.
   Падинг сжимает только поток; слои поверхности позиционированы абсолютно от
   padding-box и закрывают карточку целиком. */
.rw-skin {
  --safe-b: 0px;
  --safe-x: 0px;
  position: relative;
  isolation: isolate;
  padding-bottom: var(--safe-b);
  padding-left: var(--safe-x);
  padding-right: var(--safe-x);
}
.rw-skin > * { position: relative; z-index: 1; }
.rw-skin::before,
.rw-skin::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.rw-skin::after { z-index: 0; }

.rw-skin[data-shape="notch"] {
  --safe-b: 4px; --safe-x: 5px;
  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.rw-skin[data-shape="ticket"] {
  --safe-x: 3px;
  clip-path: polygon(0 0, 100% 0, 100% 38%, calc(100% - 5px) 42%, 100% 46%, 100% 100%,
                     0 100%, 0 46%, 5px 42%, 0 38%);
}
/* Скос задан В ПИКСЕЛЯХ, а не в долях высоты, намеренно.
   Падинг в процентах всегда считается от ШИРИНЫ, скос в процентах - от
   высоты. На карточке 3:4 они сходились, на низкой и широкой - расходились,
   и цена снова уезжала под грань. В пикселях безопасная зона перекрывает
   скос при любой пропорции. */
.rw-skin[data-shape="hex"] {
  --safe-b: 17px; --safe-x: 5px;
  clip-path: polygon(50% 0, 100% 14px, 100% calc(100% - 14px), 50% 100%,
                     0 calc(100% - 14px), 0 14px);
}

/* ============================================================
   Слой C+D. Восемь семейств. Различаются композицией, а не оттенком.
   ============================================================ */

/* VAULT - шлифованный металл, гравированные уголки, предмет на подиуме */
.rw-skin[data-family="vault"] { background: #17161c; border-color: #2c2a33; }
.rw-skin[data-family="vault"]::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(168deg, #2c2a33, #121117 72%);
}
.rw-skin[data-family="vault"]::after {
  background:
    linear-gradient(90deg, var(--tier-color), transparent 42%) 7px 7px/26px 1.2px no-repeat,
    linear-gradient(180deg, var(--tier-color), transparent 42%) 7px 7px/1.2px 26px no-repeat,
    linear-gradient(270deg, var(--tier-color), transparent 42%) right 7px bottom 7px/26px 1.2px no-repeat,
    linear-gradient(0deg, var(--tier-color), transparent 42%) right 7px bottom 7px/1.2px 26px no-repeat;
  opacity: .8;
}

/* CIRCUIT - техническая сетка и угловые засечки */
.rw-skin[data-family="circuit"] { background: #0a1020; border-color: #1b2b4d; }
.rw-skin[data-family="circuit"]::before {
  background:
    repeating-linear-gradient(0deg, rgba(107,189,204,.07) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, rgba(107,189,204,.07) 0 1px, transparent 1px 11px),
    radial-gradient(90% 70% at 50% 0%, #17254a, #070b17 76%);
}
.rw-skin[data-family="circuit"]::after {
  background:
    linear-gradient(90deg, var(--tier-color), var(--tier-color)) 6px 6px/10px 1.2px no-repeat,
    linear-gradient(90deg, var(--tier-color), var(--tier-color)) 6px 6px/1.2px 10px no-repeat,
    linear-gradient(90deg, var(--tier-color), var(--tier-color)) right 6px top 6px/10px 1.2px no-repeat,
    linear-gradient(90deg, var(--tier-color), var(--tier-color)) right 6px top 6px/1.2px 10px no-repeat;
}

/* FELT - сукно игрового стола и двойная линейка */
.rw-skin[data-family="felt"] { background: #10241c; border-color: #1d4435; }
.rw-skin[data-family="felt"]::before {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0) 0 0/5px 5px,
    radial-gradient(85% 65% at 50% 32%, #1d4435, #0b1a14 78%);
}
.rw-skin[data-family="felt"]::after {
  background:
    linear-gradient(90deg, transparent, var(--tier-color), transparent) 0 8px/100% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--tier-color), transparent) 0 10.5px/100% .5px no-repeat,
    linear-gradient(90deg, transparent, var(--tier-color), transparent) 0 calc(100% - 3px)/100% 1px no-repeat;
  opacity: .55;
}

/* PRISM - переливающаяся фольга и вырубленное окно под предмет */
.rw-skin[data-family="prism"] { background: #140d24; border-color: #3a2a5c; }
.rw-skin[data-family="prism"]::before {
  background: conic-gradient(from 210deg, #6bbdcc, #9366d0, #e0518c, #dfbe62, #63bf94, #6bbdcc);
  filter: saturate(.7) brightness(.6);
}
.rw-skin[data-family="prism"]::after {
  background: radial-gradient(circle at 50% 38%, #140d24 30%, transparent 31%);
  box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.28);
}

/* PAPER - отрывной билет: корешок, перфорация, штамп */
.rw-skin[data-family="paper"] { background: #1a1713; border-color: #3a3228; }
.rw-skin[data-family="paper"]::before {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.03) 1px, transparent 0) 0 0/3px 3px,
    linear-gradient(142deg, #2a241c, #15120e 76%);
}
/* Перфорация горизонтальная и уведена под верхний край.
   Вертикальная, как на высоком билете, в сетке предметов проходила ровно по
   названию: карточки здесь низкие и широкие, а текст в них по центру. */
.rw-skin[data-family="paper"]::after {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 4px, transparent 4px 8px)
              0 5px/100% 1px no-repeat;
}

/* GEODE - гранёное поле и световые полосы */
.rw-skin[data-family="geode"] { background: #0d1824; border-color: #1b3147; }
.rw-skin[data-family="geode"]::before {
  background:
    linear-gradient(118deg, rgba(255,255,255,.1) 0 22%, transparent 22%),
    linear-gradient(-54deg, rgba(255,255,255,.07) 0 34%, transparent 34%),
    linear-gradient(72deg, rgba(107,189,204,.16) 0 46%, transparent 46%),
    linear-gradient(200deg, #1b3147, #080e16 74%);
}
.rw-skin[data-family="geode"]::after {
  background: linear-gradient(104deg, transparent 40%, rgba(255,255,255,.13) 46%, transparent 52%);
}

/* SLATE - тихое семейство. Без декора: когда громких большинство,
   тихие перестают читаться как тихие, и наоборот. */
.rw-skin[data-family="slate"] { background: #0e0d12; border-color: #22202a; }
.rw-skin[data-family="slate"]::before {
  background: linear-gradient(185deg, #16151c, #0b0a0e 70%);
}
.rw-skin[data-family="slate"]::after {
  background: radial-gradient(62% 46% at 50% 36%,
    color-mix(in srgb, var(--tier-color) 17%, transparent), transparent 72%);
}

/* SIGNATURE - тематические и лимитированные: свет во всё поле и фольга */
.rw-skin[data-family="signature"] { background: #1a0d1e; border-color: #43265a; }
.rw-skin[data-family="signature"]::before {
  background: radial-gradient(78% 56% at 50% 32%,
    color-mix(in srgb, var(--tier-color) 44%, transparent), #14081a 76%);
}
.rw-skin[data-family="signature"]::after {
  background: linear-gradient(104deg, transparent 30%, rgba(255,255,255,.26) 37%,
    color-mix(in srgb, var(--tier-color) 62%, transparent) 43%, transparent 53%);
}

/* ---------- Плитка ленты под новой системой ----------
   Фон и нижнюю подсветку задаёт семейство, поэтому прежний градиент из
   --tier-color снимаем: иначе две поверхности спорят и обе проигрывают.
   Размеры НЕ трогаем: высоту ячейки барабан снимает с разметки, и любая
   правка высоты здесь ломает остановку ленты. */
.reel-tile.rw-skin {
  background: none;
  border: 1px solid transparent;
  border-bottom-width: 1px;
}
.reel-tile.rw-skin .tile-value { color: var(--tier-color); }
.reel-tile.rw-skin[data-family="slate"] .tile-value,
.reel-tile.rw-skin[data-family="prism"] .tile-value { color: #fff; }

/* ---- Типографика семейств ----

   Шрифт - такая же ось различия, как поверхность и форма. Соседние карточки
   в одном кейсе принадлежат разным семействам, и по набору подписи их видно
   раньше, чем по цвету.

   Веб-шрифты не подключаем: сайт часто открывают с телефона по мобильной сети,
   и ради подписи в одиннадцать точек тянуть файл шрифта нельзя. Разницу дают
   системные стеки, регистр, разрядка и насыщенность - этого достаточно.

   Капс с разрядкой проверен на обеих поверхностях: плитка барабана 138 точек,
   карточка сетки шире. Если плитку когда-нибудь сузят, проверять надо именно
   это: одно слово шире плитки не переносится, оно обрезается. */

/* VAULT - гравировка: капс, широкая разрядка, тяжёлая цифра.
   Дисплейный Unbounded берут только vault и signature: он выразительный, и
   если отдать его всем, различать семейства снова будет нечем. */
.rw-skin[data-family="vault"] .drop-name,
.rw-skin[data-family="vault"] .tile-name,
.rw-skin[data-family="vault"] .drop-value,
.rw-skin[data-family="vault"] .tile-value { font-family: 'Unbounded', system-ui, sans-serif; }
.rw-skin[data-family="vault"] .drop-name,
.rw-skin[data-family="vault"] .tile-name { letter-spacing: .09em; text-transform: uppercase; font-weight: 600; }
.rw-skin[data-family="vault"] .drop-value,
.rw-skin[data-family="vault"] .tile-value { letter-spacing: .01em; font-weight: 900; }

/* SIGNATURE - именная серия: самый широкий трекинг в наборе. */
.rw-skin[data-family="signature"] .drop-name,
.rw-skin[data-family="signature"] .tile-name,
.rw-skin[data-family="signature"] .drop-value,
.rw-skin[data-family="signature"] .tile-value { font-family: 'Unbounded', system-ui, sans-serif; }
.rw-skin[data-family="signature"] .drop-name,
.rw-skin[data-family="signature"] .tile-name { letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.rw-skin[data-family="signature"] .drop-value,
.rw-skin[data-family="signature"] .tile-value { font-weight: 900; letter-spacing: .02em; }

/* CIRCUIT - приборная панель: моноширинный, строчные. */
.rw-skin[data-family="circuit"] .drop-name,
.rw-skin[data-family="circuit"] .tile-name,
.rw-skin[data-family="circuit"] .drop-value,
.rw-skin[data-family="circuit"] .tile-value {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -.01em;
}
.rw-skin[data-family="circuit"] .drop-name,
.rw-skin[data-family="circuit"] .tile-name { font-weight: 500; }

/* PAPER - билет: моноширинный в названии, капс в номинале. */
.rw-skin[data-family="paper"] .drop-name,
.rw-skin[data-family="paper"] .tile-name {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 400;
}
.rw-skin[data-family="paper"] .drop-value,
.rw-skin[data-family="paper"] .tile-value {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700; letter-spacing: .04em;
}

/* FELT - игорный стол: антиква в цифре, как в печатной таблице выплат. */
.rw-skin[data-family="felt"] .drop-name,
.rw-skin[data-family="felt"] .tile-name { letter-spacing: .07em; text-transform: uppercase; font-weight: 700; }
.rw-skin[data-family="felt"] .drop-value,
.rw-skin[data-family="felt"] .tile-value {
  font-family: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, 'Times New Roman', serif;
  font-weight: 700; letter-spacing: .01em;
}

/* GEODE - минерал: лёгкий набор с разрядкой, цифра не кричит. */
.rw-skin[data-family="geode"] .drop-name,
.rw-skin[data-family="geode"] .tile-name { letter-spacing: .11em; text-transform: uppercase; font-weight: 500; }
.rw-skin[data-family="geode"] .drop-value,
.rw-skin[data-family="geode"] .tile-value { font-weight: 700; letter-spacing: .03em; }

/* PRISM - коллекционная фольга: разрядка без капса, цифра светлая. */
.rw-skin[data-family="prism"] .drop-name,
.rw-skin[data-family="prism"] .tile-name { letter-spacing: .08em; font-weight: 600; }
.rw-skin[data-family="prism"] .drop-value,
.rw-skin[data-family="prism"] .tile-value { font-weight: 800; letter-spacing: .02em; }

/* SLATE - тихое семейство: обычный набор без единой выходки. Оно и держит
   контраст: когда у всех разрядка и капс, их перестают замечать. */
.drop-card.rw-skin, .reel-tile.rw-skin { font-family: 'Manrope', system-ui, -apple-system, sans-serif; }
.rw-skin[data-family="slate"] .drop-name,
.rw-skin[data-family="slate"] .tile-name { font-weight: 500; letter-spacing: 0; }
.rw-skin[data-family="slate"] .drop-value,
.rw-skin[data-family="slate"] .tile-value { font-weight: 800; }

/* ---------- Слой F. Анимация ----------
   Блик только на крупной карточке результата. В ленте он выключен намеренно:
   сорок одновременных анимаций роняют кадры на телефоне, а разглядеть блик
   на летящей плитке всё равно нельзя. */
.rw-skin.rw-sheen > .rw-gloss {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(108deg, transparent 36%, rgba(255,255,255,.16) 48%, transparent 60%);
  transform: translateX(-120%);
  animation: rw-sweep 5.2s ease-in-out infinite;
}
@keyframes rw-sweep {
  0%, 72% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .rw-skin.rw-sheen > .rw-gloss { animation: none; opacity: 0; }
}

@media (min-width: 1024px) {
  /* На компьютере плитка крупнее, поэтому декор можно показать полностью:
     на телефоне те же уголки в 26 точек съедали бы четверть карточки. */
  .rw-skin[data-family="vault"]::after { opacity: 1; }
  .rw-skin[data-family="felt"]::after { opacity: .7; }
}

/* ---------- Прежние поверхности под новой системой ----------
   У карточки выпадения фон строился из --tier-color (плашка ленты семейства
   не носит и свою прежнюю заливку сохранила, см. feedCardHtml).
   Семейство рисует свою поверхность, поэтому старую снимаем: две заливки
   друг поверх друга дают грязь, и обе перестают читаться.
   Рамка остаётся цветом редкости - это единственное место, где редкость
   видна прямо, и убирать её нельзя. */
.drop-card.rw-skin {
  background: none;
}
.drop-card.rw-skin { border-color: color-mix(in srgb, var(--tier-color) 34%, transparent); }

/* Тихие семейства не подсвечивают цену цветом редкости: в slate и prism
   акцент живёт в ореоле и в фольге, а белая цифра читается лучше. */
.rw-skin[data-family="slate"] .drop-value,
.rw-skin[data-family="prism"] .drop-value { color: #fff; }


/* ============================================================
   КОМПОЗИЦИЯ КАРТОЧКИ
   ============================================================

   Поверхность и материал - половина дела. Вторая половина - пропорция и
   место предмета. В старой плитке стоял значок в 34 точки на низкой широкой
   коробке: под любым семейством она остаётся списком, а не витриной.

   Теперь карточка высокая (3:4), предмет занимает всю свободную площадь, а
   название и цена прижаты к низу. Предмет - главный, подпись - служебная.

   Отступы вокруг предмета задаёт СЕМЕЙСТВО: в geode предмет мелкий и
   заключён в толщу граней, в slate он почти во всю карточку. Это и есть
   разница композиций, ради которой семейства заведены. */

.drop-card.rw-skin {
  aspect-ratio: 3 / 4;
  align-items: stretch;
  text-align: left;
  gap: 0;
  padding: 0 var(--safe-x) var(--safe-b);
  overflow: hidden;
}

/* Значок перестаёт быть значком: это область рисунка, и она забирает всё,
   что осталось от подписи. min-height нужен, иначе flex не даёт сжиматься
   и карточка распирается содержимым. */
.drop-card.rw-skin .drop-ico {
  width: auto;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--art-pad, 15% 14% 7%);
}
.drop-card.rw-skin .drop-ico svg { width: 100%; height: 100%; max-width: 100%; }

.drop-card.rw-skin .drop-name {
  padding: 0 11px;
  font-size: 11.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.drop-card.rw-skin .drop-value { padding: 2px 11px 11px; font-size: 16px; }

/* Та же логика в барабане. Ширину и высоту плитки НЕ трогаем: барабан
   снимает высоту ячейки с разметки и по ней останавливается. */
.reel-tile.rw-skin { gap: 0; padding: 0 var(--safe-x) var(--safe-b); }
.reel-tile.rw-skin .tile-icon {
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  padding: var(--art-pad, 13% 14% 6%);
  font-size: 0;
}
.reel-tile.rw-skin .tile-icon svg { width: 100%; height: 100%; }
/*
 * В барабане подпись в ОДНУ строку с многоточием.
 *
 * Не из экономии места. `-webkit-line-clamp` требует `display: -webkit-box`,
 * а `.tile-name` - flex-элемент: у flex-элементов display блокифицируется,
 * и обрезка по строкам не работает здесь в принципе. Она и не работала -
 * просто при старой вёрстке места хватало и этого не было видно. Коробка
 * высотой в две строки при содержимом в три резала вторую посередине, и
 * из-под неё выглядывала цена.
 *
 * Одна строка с многоточием детерминирована при любом названии. Полное имя
 * игрок видит в сетке предметов и на экране результата, а на летящей плитке
 * вторую строку всё равно не прочитать.
 */
.reel-tile.rw-skin .tile-name {
  flex: 0 0 auto;
  /* У плитки align-items: center, поэтому коробка подписи по умолчанию
     шириной в текст и вылезает за края. Растягиваем её по плитке. */
  align-self: stretch;
  min-width: 0;
  padding: 0 8px;
  display: block;
  overflow: hidden;
}
.reel-tile.rw-skin .tile-value {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 0;
  padding: 3px 8px 9px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Отступы вокруг предмета по семействам ---- */
.rw-skin[data-family="vault"]     { --art-pad: 15% 14% 9%; }
.rw-skin[data-family="circuit"]   { --art-pad: 16% 18% 8% 12%; }
.rw-skin[data-family="felt"]      { --art-pad: 17% 16% 5%; }
.rw-skin[data-family="prism"]     { --art-pad: 16% 25% 11%; }
/* Отступ симметричный: асимметрия осталась от вертикального корешка, а
   перфорация теперь горизонтальная, и предмет просто выглядел сбитым вбок. */
.rw-skin[data-family="paper"]     { --art-pad: 16% 14% 8%; }
.rw-skin[data-family="geode"]     { --art-pad: 21% 25% 13%; }
.rw-skin[data-family="slate"]     { --art-pad: 11% 11% 4%; }
.rw-skin[data-family="signature"] { --art-pad: 17% 16% 9%; }

/* ---- Подпись по семействам ---- */

/* VAULT: волосок отделяет подпись от подиума, как шов на металле. */
.rw-skin[data-family="vault"] .drop-name,
.rw-skin[data-family="vault"] .tile-name { border-top: 1px solid rgba(255,255,255,.1); padding-top: 7px; }

/* PRISM и SIGNATURE: под подписью своя подложка, иначе текст тонет в
   переливе и в световом пятне. */
.rw-skin[data-family="prism"] .drop-name,
.rw-skin[data-family="prism"] .tile-name { background: rgba(20,13,36,.82); padding-top: 7px; }
.rw-skin[data-family="prism"] .drop-value,
.rw-skin[data-family="prism"] .tile-value { background: rgba(20,13,36,.82); }
.rw-skin[data-family="signature"] .drop-name,
.rw-skin[data-family="signature"] .tile-name {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.62) 70%);
  padding-top: 14px;
}
.rw-skin[data-family="signature"] .drop-value,
.rw-skin[data-family="signature"] .tile-value { background: rgba(0,0,0,.62); }

/* Витринный предмет остаётся пунктирным: это его единственная метка. */
.drop-card.rw-skin.is-showcase { border-style: dashed; }

@media (min-width: 560px) {
  /* На широком экране карточка чуть менее вытянутая: четыре в ряд при 3:4
     дают колонку высотой в полтора экрана, и список перестаёт читаться. */
  .drop-card.rw-skin { aspect-ratio: 4 / 5; }
}


/* ---- Обрезка подписи по двум строкам ----
   `-webkit-line-clamp` требует `display: -webkit-box`, а у flex-элемента
   display блокифицируется - обрезка не работает. Поэтому текст завёрнут в
   span: он уже обычный блок внутри блока, и обрезка к нему применима.
   Без этого длинное название выталкивало цену за пределы карточки, а в
   барабане резалось посередине строки и наезжало на цену. */
.drop-card.rw-skin .drop-name > span,
.reel-tile.rw-skin .tile-name > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.22;
}

/* ============================================================
   ВЕРТИКАЛЬНАЯ ПЛИТКА БАРАБАНА И НЕРАЗРЫВНАЯ СУММА
   ============================================================ */

/*
 * Сумма не переносится НИКОГДА.
 *
 * «3 650 ₽» разрывалось между числом и знаком рубля: пробел внутри суммы -
 * обычный, и перенос по нему разрешён. Карточка при этом выглядит сломанной,
 * а сумма - главное, что на ней читают.
 *
 * Пробел внутри числа тоже чиним, но в коде: money() ставит неразрывный,
 * иначе «329 000» разъезжается между разрядами.
 */
.tile-value, .drop-value, .feed-value, .rw-skin .drop-value {
  white-space: nowrap;
}

/*
 * Плитка барабана вытянута по вертикали (примерно 3:4).
 *
 * Была почти квадратной: 138 на 148. Предмет в такой плитке мелкий, а
 * карточка читается как ячейка списка. Вытянутая даёт рисунку высоту и
 * выглядит карточкой, а не строкой.
 *
 * Числа здесь - чистая вёрстка: measureReel() снимает шаг и ширину с разметки
 * перед каждым прокрутом, поэтому арифметика остановки подстраивается сама.
 * Высоту ячейки нигде не зашиваем числом - на этом уже ломались барабаны
 * мини-игр и слотов.
 */
.reel-wrap { height: 186px; }
.reel-tile { flex-basis: 120px; width: 120px; }

@media (min-width: 1024px) {
  .reels:not(.compact) .reel-wrap { height: 392px; }
  .reels:not(.compact) .reel-tile { flex-basis: 252px; width: 252px; }

  /* На мониторе две ленты по 392 точки с итогом не помещаются в экран ноутбука, поэтому
     пачка ниже одиночной, но заметно крупнее телефонной: плитка 200 точек. */
  .reels.compact .reel-wrap { height: 300px; }
  .reels.compact .reel-tile { flex-basis: 200px; width: 200px; }
  .reels.compact .tile-name { font-size: 16px; }
  .reels.compact .tile-value { font-size: 24px; }

  .fs-reel-wrap { height: 264px; }
  .fs-reel-wrap .reel-tile { flex-basis: 172px; width: 172px; }
}

/* ---- Медальон для мелкого мотива ----
   Мотивы item-art.js нарисованы под значок в 34 точки. Растянутые на всю
   карточку они выглядят плоско, поэтому показываются в своём размере на диске.
   Разнобоя не возникает: рядом либо крупный предмет, либо эмблема на пластине,
   и то и другое выглядит намеренным. */
.art-medal {
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.07), transparent 62%),
    color-mix(in srgb, var(--tier-color) 10%, rgba(0, 0, 0, 0.42));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.art-medal svg { width: 52%; height: 52%; }

/* В барабане медальон мельче: плитка узкая, и диск во всю ширину съедает
   место у подписи. */
.reel-tile .art-medal { width: 80%; }
.reel-tile .art-medal svg { width: 56%; height: 56%; }

/* Крупный мотив занимает всю отведённую площадь - у него своя композиция. */
.drop-ico > svg, .tile-icon > svg { width: 100%; height: 100%; }

/* ============================================================
   ПОКАЗ ВЫИГРЫША И ФРИСПИНОВ (public/motion.js)
   ============================================================
   Свой слой поверх окна кейса (у того z-index 80). Нажатия слой пропускает:
   ловят их только окно крупного выигрыша и его кнопка. */

.mo-root { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.mo-layer, .mo-top { position: absolute; inset: 0; pointer-events: none; }
.mo-layer { perspective: 1000px; }
.mo-top { z-index: 2; }
.mo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* Сцена уходит назад классом: так у неё одно состояние, и оно снимается
   наверняка (см. recede в motion.js).
   Затемнением, а не размытием. blur на всём экране кейса пересчитывался на
   каждом кадре, пока под ним что-то двигалось (точки серии, качающийся знак
   фриспинов, сама лента), и на телефоне показ выигрыша и пролог серии шли
   рывками. Прозрачность и масштаб - работа видеокарты, перерисовки нет. */
.opener-scroll { transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
body.mo-receded .opener-scroll { opacity: .42; transform: scale(.94); }
.reel-tile.mo-lifted { visibility: hidden; }

.mo-flash { position: absolute; inset: 0; mix-blend-mode: screen; }
.mo-ring {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  border: 2px solid var(--c); box-shadow: 0 0 22px var(--c), inset 0 0 22px var(--c);
  will-change: transform, opacity;
}
.mo-slash {
  position: absolute; left: -20%; width: 140%; height: 3px; transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent);
  box-shadow: 0 0 14px #fff, 0 0 40px var(--c, #ffd34d);
}
.mo-float {
  position: absolute; white-space: nowrap; translate: -50% -50%;
  font: 800 15px/1 'Unbounded', 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 0 12px var(--c, #9dffcf), 0 2px 0 rgba(0,0,0,.5);
}
.mo-float.is-muted { color: #cfc6dc; text-shadow: 0 2px 0 rgba(0,0,0,.5); font-size: 13px; }

/* Печать удвоителя: золотой знак на тёмной плашке с зубчатым краем, как
   оттиск на документе. Плашка нужна, чтобы ×2 читался поверх любой плитки. */
.mo-x2 {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 14px 8px; border-radius: 16px;
  background: radial-gradient(circle at 50% 30%, #4a1d00, #1c0a00 75%);
  box-shadow: 0 0 0 2px #ffd34d, 0 0 0 5px rgba(28, 10, 0, 0.85), 0 0 0 6px rgba(255, 211, 77, 0.6),
    0 12px 30px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 190, 60, 0.55);
}
.mo-x2 b { font: 800 40px/1 'Unbounded', 'Manrope', system-ui, sans-serif; }
.mo-x2 small {
  font: 800 9px/1 'Manrope', system-ui, sans-serif; letter-spacing: 0.22em; text-transform: uppercase;
  color: #ffd34d;
}
/* Плитка, на которой сработал удвоитель, остаётся помеченной до конца показа. */
.reel-tile.mo-x2-tile { box-shadow: 0 0 0 2px #ffd34d, 0 0 26px -4px rgba(255, 200, 60, 0.9); }
.reel-tile.mo-x2-tile .tile-value { color: #ffe58a; }

/* Металлическая надпись: заливка градиентом, глубина - цепочкой теней
   фильтра. text-shadow под прозрачным текстом с background-clip ложится
   поверх заливки, поэтому объём набран drop-shadow. */
.mo-metal {
  display: inline-block;
  background: linear-gradient(180deg, var(--m1, #fff6cf) 0%, var(--m2, #ffd34d) 42%, var(--m3, #c8781a) 52%, var(--m4, #ffe9a0) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #a8620c) drop-shadow(0 1px 0 #7a4208) drop-shadow(0 1px 0 #4a2604) drop-shadow(0 8px 14px rgba(0,0,0,.6)) drop-shadow(0 0 22px var(--glow, rgba(255,200,60,.45)));
}

/* ---------- Лучи и свечение: общие у выигрыша и пролога серии ---------- */
.mo-sky { position: absolute; left: 50%; top: 34%; width: 0; height: 0; }
.mo-rays {
  position: absolute; width: 980px; height: 980px; margin: -490px;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c2, #ffd34d) 30%, transparent) 0deg 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 22%, transparent 52%);
  mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 22%, transparent 52%);
}
.mo-rays.b { background: repeating-conic-gradient(from 5deg, color-mix(in srgb, var(--c1, #fff6cf) 16%, transparent) 0deg 2.5deg, transparent 2.5deg 10deg); }
.mo-bloom {
  position: absolute; width: 440px; height: 440px; margin: -220px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow, rgba(255,200,60,.5)), transparent 64%);
}

/* ---------- Пролог серии ---------- */
.mo-orb {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0%, #fff4c0 22%, #ffd34d 46%, #ff8a1f 70%, rgba(255,90,0,0) 72%);
  box-shadow: 0 0 30px 8px rgba(255,200,60,.65), 0 0 90px 20px rgba(255,120,40,.35);
}
.mo-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(12,4,26,.55), rgba(4,1,10,.94) 72%); }
.mo-fs-show { position: absolute; inset: 0; }
.mo-fs-emblem {
  position: absolute; left: 50%; top: 29%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.6));
  /* Свой слой с самого начала: рисунок с тенью растрируется один раз, а
     разворот и масштаб дальше делает видеокарта. */
  will-change: transform;
}
.mo-fs-emblem svg { width: 100%; height: 100%; display: block; }
.mo-fs-title {
  position: absolute; left: 0; right: 0; top: 46%; display: flex; justify-content: center; gap: 12px;
  font: 800 34px/1 'Unbounded', 'Arial Black', system-ui, sans-serif; letter-spacing: .01em;
}
.mo-fs-count { position: absolute; left: 0; right: 0; top: 52.5%; text-align: center; font: 800 92px/1 'Unbounded', 'Arial Black', system-ui, sans-serif; }
.mo-fs-sub {
  position: absolute; left: 0; right: 0; top: 67.5%; text-align: center;
  font-size: 12px; font-weight: 800; letter-spacing: .16em; color: #e8dcff; text-transform: uppercase;
}
.mo-tok {
  position: absolute; width: var(--s, 26px); height: var(--s, 26px);
  margin: calc(var(--s, 26px) / -2) 0 0 calc(var(--s, 26px) / -2); border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fffbe0 0%, #ffd85a 34%, #d89420 72%, #7a4508 100%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,255,255,.7), 0 0 12px rgba(255,200,60,.55);
  display: grid; place-items: center;
}
.mo-tok svg { width: 62%; height: 62%; }

/* ---------- Итог серии крупно (seriesTotal) ----------
   Число - тот же металл, что надписи показа; движется только transform и
   opacity. Свечение - отдельный слой с радиальной заливкой, без фильтра. */
.mo-st { position: absolute; inset: 0; }
/* Плотная середина: под числом стоит кнопка «Забрать» с той же суммой, и
   проступая сквозь затемнение, она двоила надпись. */
.mo-st-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(14, 5, 30, 0.88), rgba(4, 1, 10, 0.96) 70%); }
.mo-st-glow {
  position: absolute; left: 50%; top: 42%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 70, 0.42), rgba(168, 85, 247, 0.16) 42%, transparent 66%);
  opacity: 0;
}
.mo-st:not(.is-paid) .mo-st-glow { background: radial-gradient(circle, rgba(196, 170, 255, 0.28), transparent 62%); }
.mo-st-box {
  position: absolute; left: 0; right: 0; top: 42%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 0 16px;
}
.mo-st-eyebrow {
  font: 800 12px/1 'Manrope', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #d9c8ff;
  opacity: 0;
}
.mo-st-num { font: 800 clamp(40px, 13vw, 76px)/1.05 'Unbounded', 'Arial Black', system-ui, sans-serif; white-space: nowrap; will-change: transform; }
.mo-st:not(.is-paid) .mo-st-num .mo-metal { --m1: #ffffff; --m2: #e9e2f7; --m3: #a99cc4; --m4: #f4efff; --glow: rgba(200, 180, 255, .25); }
.mo-st-pill {
  padding: 7px 14px; border-radius: 999px; opacity: 0;
  font: 800 13px/1 'Manrope', system-ui, sans-serif; letter-spacing: .04em; color: #3a1d00;
  background: linear-gradient(180deg, #fff3c4, #ffd34d 55%, #e8a024);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px -6px rgba(255, 170, 40, .7);
}
/* Кнопка «Забрать» вспыхивает, когда в неё упала сумма: блик проходит раз. */
.fs-collect.is-glint::after { animation: openSheen 0.7s cubic-bezier(0.65, 0, 0.35, 1) 1; }

/* ---------- Окно крупного выигрыша ---------- */
.mo-wl {
  position: absolute; inset: 0; pointer-events: auto;
  --c1: #fff6cf; --c2: #ffd34d; --c3: #ff9a1f; --glow: rgba(255,200,60,.5);
}
.mo-wl[data-tier="mega"] { --c1: #ffe6fb; --c2: #ff5bd8; --c3: #8a3dff; --glow: rgba(255,80,220,.5); }
.mo-wl[data-tier="epic"] { --c1: #ffffff; --c2: #7df9ff; --c3: #ffd34d; --glow: rgba(140,240,255,.55); }
.mo-wl-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, rgba(12,4,26,.45), rgba(4,1,10,.93) 70%); }
.mo-tunnel { position: absolute; left: 50%; top: 34%; opacity: 0; }
.mo-tunnel i {
  position: absolute; width: 140px; height: 140px; margin: -70px; border-radius: 50%;
  border: 2px solid var(--c2); box-shadow: 0 0 18px var(--c2);
  animation: moTunnel 2.2s cubic-bezier(.5,0,.75,0) infinite;
  animation-delay: calc(var(--i) * -.31s);
}
@keyframes moTunnel { from { transform: scale(.15); opacity: 0; } 30% { opacity: .7; } to { transform: scale(7); opacity: 0; } }
.mo-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 3; }
.mo-bar.t { top: 0; } .mo-bar.b { bottom: 0; }
.mo-card-slot { position: absolute; left: 50%; top: 34%; width: 0; height: 0; transform-style: preserve-3d; perspective: 1000px; }
.mo-label { position: absolute; left: 0; right: 0; top: 59%; text-align: center; --m1: var(--c1); --m2: var(--c2); --m3: var(--c3); --m4: var(--c1); }
.mo-word { display: block; font: 800 40px/1 'Unbounded', 'Arial Black', system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.mo-word.out { position: absolute; left: 0; right: 0; top: 0; }
.mo-amount {
  position: absolute; left: 0; right: 0; top: 69%; text-align: center;
  font: 800 34px/1 'Unbounded', 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 18px var(--glow), 0 3px 0 rgba(0,0,0,.55);
}
.mo-sub { position: absolute; left: 0; right: 0; top: 76.5%; text-align: center; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; color: var(--c1); opacity: 0; }
.mo-take {
  position: absolute; left: 50%; bottom: 7%; width: min(74%, 340px); translate: -50% 0;
  border: 0; border-radius: 18px; padding: 15px; overflow: hidden; opacity: 0; pointer-events: none;
  font: 800 15px 'Unbounded', 'Manrope', system-ui, sans-serif; color: #2a1300;
  background: linear-gradient(180deg, #fff1b8, #ffd34d 45%, #e59a1e);
  box-shadow: 0 1px 0 #fff8 inset, 0 -3px 0 #a8620c inset, 0 0 30px var(--glow);
  transition: bottom .6s cubic-bezier(.16,1,.3,1);
}
.mo-take::after {
  content: ''; position: absolute; inset: 0; translate: -120% 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.8) 50%, transparent 65%);
  animation: moSweep 2.2s cubic-bezier(.65,0,.35,1) infinite .4s;
}
@keyframes moSweep { 0%, 60% { translate: -120% 0; } 100% { translate: 120% 0; } }
/* Кинорамка EPIC закрывает низ кадра: кнопка поднимается над ней. */
.mo-wl[data-tier="epic"] .mo-take { bottom: 12%; }
.mo-skip {
  position: absolute; left: 0; right: 0; bottom: 3%; text-align: center;
  font-size: 10px; letter-spacing: .14em; font-weight: 800; color: rgba(255,255,255,.4); text-transform: uppercase;
}

/* ---------- Карточка выигрыша ----------
   Своя крупная карточка, а не увеличенная плитка ленты: у плитки текст и
   отступы рассчитаны на 104 точки, и в три раза больше она разваливается. */
.mo-lift { position: absolute; width: 0; height: 0; perspective: 600px; }
.mo-hero {
  --cut: 18px;
  --surf: linear-gradient(160deg, #17161d, #0b0a0f);
  position: absolute; width: 196px; height: 250px; left: -98px; top: -125px;
  transform-style: preserve-3d;
}
.mo-hero[data-family="vault"]     { --surf: linear-gradient(160deg, #24222b, #121117); }
.mo-hero[data-family="circuit"]   { --surf: linear-gradient(160deg, #0f1a33, #070c18); }
.mo-hero[data-family="felt"]      { --surf: radial-gradient(120% 90% at 50% 20%, #1a3a2d, #0b1c15); }
.mo-hero[data-family="prism"]     { --surf: linear-gradient(160deg, #22143c, #0f0920); }
.mo-hero[data-family="paper"]     { --surf: linear-gradient(160deg, #262019, #15120e); }
.mo-hero[data-family="geode"]     { --surf: linear-gradient(160deg, #13243a, #08111c); }
.mo-hero[data-family="signature"] { --surf: radial-gradient(120% 90% at 50% 10%, #3a1640, #150818); }
.mo-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; padding: 16px 12px;
  background: var(--surf);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 70%, #fff 10%), inset 0 0 40px color-mix(in srgb, var(--tc) 22%, transparent);
}
.mo-face[data-shape="notch"]  { clip-path: polygon(0 var(--cut), var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.mo-face[data-shape="ticket"] { clip-path: polygon(0 0, 100% 0, 100% 38%, calc(100% - 7px) 42%, 100% 46%, 100% 100%, 0 100%, 0 46%, 7px 42%, 0 38%); }
.mo-face[data-shape="hex"]    { clip-path: polygon(50% 0, 100% calc(var(--cut) * 1.4), 100% calc(100% - var(--cut) * 1.4), 50% 100%, 0 calc(100% - var(--cut) * 1.4), 0 calc(var(--cut) * 1.4)); }
.mo-front::before {
  /* Кант: светлее сверху, темнее снизу - край, на который падает свет. */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(170deg, color-mix(in srgb, var(--tc) 70%, #fff), color-mix(in srgb, var(--tc) 40%, transparent) 30%, transparent 55%, color-mix(in srgb, var(--tc) 70%, #000));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.mo-back {
  transform: rotateY(180deg); justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,211,77,.12) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-45deg, rgba(255,211,77,.12) 0 2px, transparent 2px 12px),
    radial-gradient(circle at 50% 50%, #3a1a10, #120806);
  box-shadow: inset 0 0 0 2px #ffd34d, inset 0 0 0 6px #120806, inset 0 0 0 7px rgba(255,211,77,.5);
}
.mo-back b { font: 800 46px 'Unbounded', 'Arial Black', system-ui, sans-serif; }
.mo-hero-glow {
  position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tc) 55%, transparent), transparent 66%);
  transform: translateZ(-1px);
}
/* Свет за рисунком: предмет стоит под лампой, а не лежит на фоне. */
.mo-hero-spot {
  position: absolute; left: 50%; top: 4px; width: 210px; height: 190px; translate: -50% 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tc) 42%, transparent), transparent);
}
.mo-hero-art { position: relative; width: 150px; height: 150px; flex: none; filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); }
.mo-hero-art svg, .mo-hero-art img { width: 100%; height: 100%; display: block; object-fit: contain; }
.mo-hero-name { position: relative; margin-top: 10px; font: 700 14px/1.15 'Unbounded', 'Manrope', system-ui, sans-serif; text-align: center; color: #fff; }
.mo-hero-sheen {
  position: absolute; inset: -40%;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  translate: -70% 0; mix-blend-mode: overlay;
  animation: moHeroSheen 2.8s cubic-bezier(.65,0,.35,1) infinite .6s;
}
@keyframes moHeroSheen { 0%, 45% { translate: -70% 0; } 100% { translate: 70% 0; } }
/* Фольга только у голографических материалов: радуга на хроме выглядит
   ошибкой печати, а на голограмме - тем, за что её и любят. */
.mo-hero-foil { position: absolute; inset: 0; opacity: 0; }
.mo-hero[data-material="holo"] .mo-hero-foil,
.mo-hero[data-material="crystal"] .mo-hero-foil,
.mo-hero[data-material="neon"] .mo-hero-foil {
  opacity: .5; mix-blend-mode: color-dodge; overflow: hidden;
  -webkit-mask: linear-gradient(115deg, transparent 20%, #000 45%, transparent 60%, #000 80%, transparent);
  mask: linear-gradient(115deg, transparent 20%, #000 45%, transparent 60%, #000 80%, transparent);
}
/*
 * Перелив крутится поворотом слоя, а не углом градиента: угол в переменной
 * (@property) заставлял перерисовывать фольгу каждый кадр, а поворот готового
 * слоя делает видеокарта. Слой вдвое больше карточки, центр градиента на
 * 45% его высоты - это те же 40% высоты карточки, что были.
 */
.mo-hero[data-material="holo"] .mo-hero-foil::before,
.mo-hero[data-material="crystal"] .mo-hero-foil::before,
.mo-hero[data-material="neon"] .mo-hero-foil::before {
  content: '';
  position: absolute; inset: -50%;
  background: conic-gradient(at 50% 45%, #ff6ad5, #ffd34d, #7df9ff, #a07bff, #ff6ad5);
  animation: moFoil 5s linear infinite;
  will-change: transform;
}
@keyframes moFoil { to { transform: rotate(360deg); } }

/* ---------- Просмотр предмета из состава ----------
   Тот же оборот и та же карточка, что у выигрыша, но тише: лучи цвета
   редкости и медленнее, вместо надписи WIN - редкость и стоимость готовым
   числом. Это витрина, и путать её с начислением нельзя. */
.mo-inspect { --c1: #fff; cursor: grab; touch-action: none; }
.mo-inspect:active { cursor: grabbing; }
.mo-inspect .mo-rays { opacity: 0.55; }
.mo-inspect .mo-rays.b { opacity: 0.4; }
.mo-spinner { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.mo-insp { position: absolute; left: 0; right: 0; top: 59%; text-align: center; opacity: 0; pointer-events: none; }
.mo-insp-tier {
  font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c2);
}
.mo-insp-value {
  margin-top: 8px;
  font: 800 28px/1 'Unbounded', 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.5);
}
.mo-insp-sub { margin-top: 8px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6); }
.mo-insp-close {
  position: absolute; left: 50%; bottom: 8%; translate: -50% 0;
  padding: 12px 28px; border: 0; border-radius: 14px; opacity: 0;
  font: 800 14px 'Manrope', system-ui, sans-serif; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.drop-card { cursor: pointer; transition: transform 0.15s; }
.drop-card:active { transform: scale(0.97); }
.drop-card.mo-lifted { visibility: hidden; }

/* ---------- Бонусный режим окна кейса ----------
   Фон темы и фон серии лежат слоями и меняются прозрачностью: смена фона
   одним переключением выглядела бы как перезагрузка экрана. */
.opener-bonus {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity .9s cubic-bezier(.65,0,.35,1);
  background:
    radial-gradient(80% 50% at 50% 30%, rgba(130,70,255,.55), transparent 70%),
    radial-gradient(120% 90% at 50% 20%, #3a1680 0%, #170a3a 50%, #07031a 100%);
}
.opener-bonus::before {
  content: ''; position: absolute; left: 50%; top: 32%; width: 170%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0 10%, rgba(255,211,77,.18) 14%, transparent 22% 45%, rgba(120,220,255,.16) 52%, transparent 60% 80%, rgba(255,90,210,.18) 88%, transparent 96%);
  filter: blur(24px);
  animation: moSpin 26s linear infinite;
}
@keyframes moSpin { to { rotate: 360deg; } }
.opener.is-bonus .opener-bonus { opacity: 1; }
.opener.is-bonus .opener-theme { opacity: 0; transition: opacity .9s; }

/* Шапка серии: эмблема и ячейка на каждый прокрут. Число отвечает
   «сколько», ряд ячеек показывает это телом: видно, сколько осталось и как
   серия выросла после ретриггера. */
.fs-emblem { width: 92px; height: 92px; margin: 0 auto 2px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.55)); }
.fs-emblem:empty { display: none; }
.fs-emblem svg { width: 100%; height: 100%; display: block; }
.opener.is-bonus .fs-emblem { animation: moBobble 3.2s ease-in-out infinite; }
@keyframes moBobble { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.fs-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 260px; margin: 2px auto 10px; }
.fs-pips:empty { display: none; }
.fs-pip { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,211,77,.35); transition: background .3s, box-shadow .3s; }
.fs-pip.full {
  background: radial-gradient(circle at 36% 30%, #fffbe0, #ffd85a 40%, #c8841a 80%);
  box-shadow: 0 0 8px rgba(255,200,60,.6), inset 0 -1px 2px rgba(0,0,0,.3);
}
.fs-pip.spent { background: rgba(255,211,77,.12); box-shadow: inset 0 0 0 1.5px rgba(255,211,77,.18); }
.fs-pip.is-current { animation: moPip .9s ease-in-out infinite alternate; }
@keyframes moPip { to { box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 14px rgba(255,220,120,.9); } }
.fs-pip.pop { animation: fsBump .42s cubic-bezier(.2,1.6,.4,1); }
/* Рамка ленты серии: по ней бежит золото, пока идёт бонус. */
.opener.is-bonus .fs-reel-wrap { box-shadow: 0 0 0 1.5px rgba(255,211,77,.55), 0 0 26px rgba(255,170,60,.25); }
/* Итог серии одной строкой: окупилась она или нет, считает motion.js
   вместе с app.js, здесь только тон. */
.fs-verdict { margin: -4px 0 12px; font-size: 13px; font-weight: 800; }
.fs-verdict:empty { display: none; }
.fs-verdict em { font-style: normal; color: #9dffcf; }

@media (prefers-reduced-motion: reduce) {
  .mo-take::after, .mo-hero-sheen, .opener-bonus::before, .opener.is-bonus .fs-emblem { animation: none; }
}

/* ============================================================
   ЖИВОЙ ГЛАВНЫЙ ЭКРАН И ПОПОЛНЕНИЕ
   ============================================================ */

/* Обложки на полках дышат вразнобой (фаза - от имени кейса, см.
   caseCardHtml): едва заметный подъём и рост, без поворотов. Доступные по
   балансу раз в несколько секунд вспыхивают бликом. Анимируются только
   transform и filter картинки: это не трогает раскладку полки. */
.shelf-row .case-card.has-art .cover-art {
  animation: caseBreath 5.5s ease-in-out infinite;
  animation-delay: var(--breath, 0s);
  transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.shelf-row .case-card.has-art.can-afford .cover-art {
  animation: caseBreath 5.5s ease-in-out infinite, caseGlint 9s ease-in-out infinite;
  animation-delay: var(--breath, 0s), var(--glint, 0s);
}
@keyframes caseBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.022); }
}
@keyframes caseGlint {
  0%, 90%, 100% { filter: none; }
  94% { filter: brightness(1.35) saturate(1.25) drop-shadow(0 0 12px var(--art-glow, rgba(255, 210, 90, 0.6))); }
}
/* Под пальцем и курсором кейс приподнимается и разгорается ореолом. */
.shelf-row .case-card.has-art:hover .case-cover::before,
.shelf-row .case-card.has-art:active .case-cover::before { opacity: 1; transform: scale(1.08); }
.shelf-row .case-card.has-art .case-cover::before { transition: opacity 0.25s, transform 0.25s; }
/* Подъём - у слота, а не у картинки: у картинки transform занят дыханием. */
.shelf-row .case-card.has-art .case-cover { transition: transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.shelf-row .case-card.has-art:active .case-cover { transform: translateY(-6px) scale(1.03); }
@media (hover: hover) {
  .shelf-row .case-card.has-art:hover .case-cover { transform: translateY(-8px) scale(1.04); }
}
.case-cover > .fx-burst { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .shelf-row .case-card.has-art .cover-art { animation: none; }
}

/* Монеты пополнения летят поверх всего. */
.coin-shower { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.coin-fly { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; filter: drop-shadow(0 0 8px rgba(255, 200, 60, 0.8)); }
.coin-fly svg { width: 100%; height: 100%; }

/* Сундук первого пополнения. */
.chest-scene { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; }
.chest-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(40, 10, 70, 0.8), rgba(4, 0, 10, 0.94)); opacity: 0; transition: opacity 0.4s; }
.chest-rays {
  position: absolute; left: 50%; top: 40%; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 211, 77, 0.22) 0deg 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%); mask: radial-gradient(circle, #000 10%, transparent 62%);
  opacity: 0; transform: scale(0.4); transition: opacity 0.8s 0.6s, transform 1.2s 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  animation: fscSpin 40s linear infinite;
}
.chest-body { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.chest { width: 190px; transform: translateY(40px) scale(0.6); opacity: 0; transition: transform 0.6s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.3s; }
.chest svg { width: 100%; display: block; overflow: visible; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.7)); }
.chest-lid { transform-origin: 80px 60px; transform-box: view-box; transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.6s; }
.chest-glow { opacity: 0; transition: opacity 0.4s 0.7s; }
.chest-eyebrow, .chest-sum, .chest-note, .chest-go { opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.chest-eyebrow { margin-top: 18px; font-size: 11px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #c9a8ff; }
.chest-sum {
  margin-top: 6px; font: 800 40px/1.1 'Unbounded', 'Manrope', system-ui, sans-serif;
  background: linear-gradient(180deg, #fff8dc 10%, #ffd34d 55%, #d98a12 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(90, 30, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 190, 60, 0.35));
}
.chest-note { margin-top: 6px; color: #d4c8ea; font-size: 14px; }
.chest-go { margin-top: 20px; min-width: 200px; justify-content: center; }
.chest-scene.is-in .chest-dim { opacity: 1; }
.chest-scene.is-in .chest-rays { opacity: 1; transform: scale(1); }
.chest-scene.is-in .chest { opacity: 1; transform: none; }
.chest-scene.is-in .chest-lid { transform: translateY(-14px) rotate(-28deg); }
.chest-scene.is-in .chest-glow { opacity: 1; }
.chest-scene.is-in .chest-eyebrow { opacity: 1; transform: none; transition-delay: 0.9s; }
.chest-scene.is-in .chest-sum { opacity: 1; transform: none; transition-delay: 1s; }
.chest-scene.is-in .chest-note { opacity: 1; transform: none; transition-delay: 1.1s; }
.chest-scene.is-in .chest-go { opacity: 1; transform: none; transition-delay: 1.25s; }
.chest-scene.is-out { opacity: 0; transition: opacity 0.24s; }

/* Колесо фортуны: клин под указателем на торможении и итоговый сектор. */
.fortune-hl {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  will-change: transform; overflow: visible;
}
.fortune-hl path { fill: rgba(255, 246, 207, 0.32); stroke: #ffe58a; stroke-width: 0.8; opacity: 0; mix-blend-mode: screen; }
.fortune-hl.is-on path { opacity: 1; }
.fortune-hl.is-blink path { animation: fortuneBlink 0.35s ease-out; }
@keyframes fortuneBlink { from { fill: rgba(255, 255, 255, 0.7); } }
.fortune-hl.is-final path { fill: rgba(255, 211, 77, 0.35); animation: fortuneFinal 0.6s ease-in-out 4 alternate; }
/* Без drop-shadow в ключевых кадрах: мигающий фильтр ронял Safari. */
@keyframes fortuneFinal { to { fill: rgba(255, 246, 207, 0.6); } }

/* ---------- Покупка фриспинов: сцена ----------
   Тот же язык, что у сцены выигрыша из ленты: затемнение, лучи, предмет
   вылетает с плитки (--fx, --fy, --fs) и разворачивается, подписи и кнопка
   приходят следом. Вокруг жетона - кольцо жетонов по числу прокрутов. */
.buy-scene { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 16px; overflow: hidden; }
.buy-scene[hidden] { display: none; }
.bs-dim {
  position: absolute; inset: 0;
  /* Без backdrop-filter: под сценой живёт экран кейса с бегущим бликом
     кнопки, и размытие пересчитывалось бы на каждом кадре. Плотнее
     затемнение - тот же эффект отделения от фона. */
  background: radial-gradient(120% 80% at 50% 35%, rgba(40, 12, 70, 0.86), rgba(4, 0, 10, 0.97));
  opacity: 0; transition: opacity 0.4s;
}
.bs-rays {
  position: absolute; left: 50%; top: 32%; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(255, 211, 77, 0.2) 0deg 5deg, transparent 5deg 18deg),
    radial-gradient(circle, rgba(168, 85, 247, 0.35), transparent 55%);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%); mask: radial-gradient(circle, #000 8%, transparent 62%);
  opacity: 0; transform: scale(0.4); transition: opacity 0.8s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  animation: fscSpin 50s linear infinite;
}
.bs-body { position: relative; width: min(100%, 400px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.bs-stage { position: relative; width: 230px; height: 230px; display: grid; place-items: center; }
.bs-token {
  position: relative; z-index: 2; width: 150px; height: 150px; display: grid; place-items: center;
  filter: drop-shadow(0 0 30px rgba(255, 200, 70, 0.55)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.7));
  opacity: 0; transform: translate(var(--fx), var(--fy)) scale(var(--fs));
}
.bs-token svg, .bs-token img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bs-token b { font: 800 60px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: #ffd34d; }
.buy-scene.is-in .bs-token { animation: bsToken 0.9s cubic-bezier(0.16, 1, 0.3, 1) both, bsFloat 3.4s ease-in-out 1s infinite; }
@keyframes bsToken {
  0%   { opacity: 1; transform: translate(var(--fx), var(--fy)) scale(var(--fs)) rotateY(0deg); }
  60%  { transform: translate(calc(var(--fx) * 0.15), calc(var(--fy) * 0.15 - 30px)) scale(1.15) rotateY(320deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes bsFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
/* Кольцо жетонов: вращается медленно, каждый жетон проявляется по очереди. */
.bs-orbit { position: absolute; inset: 0; animation: fscSpin 22s linear infinite; }
.bs-orbit i {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  /* Маленькая фишка, а не точка: кант, белая середина и блик, как у жетона. */
  background:
    radial-gradient(circle at 50% 50%, #3b1a6e 0 32%, transparent 34%),
    repeating-conic-gradient(#fffbe6 0 30deg, #ffd34d 30deg 60deg);
  box-shadow: inset 0 0 0 1.5px #c8781a, 0 0 9px rgba(255, 200, 60, 0.85);
  transform: rotate(var(--a)) translateY(-108px) scale(0);
  opacity: 0;
}
.buy-scene.is-in .bs-orbit i { animation: bsOrb 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) var(--d) forwards; }
@keyframes bsOrb { to { opacity: 1; transform: rotate(var(--a)) translateY(-108px) scale(1); } }

.bs-info > * { opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.buy-scene.is-in .bs-info > * { opacity: 1; transform: none; }
.buy-scene.is-in .bs-info > :nth-child(1) { transition-delay: 0.55s; }
.buy-scene.is-in .bs-info > :nth-child(2) { transition-delay: 0.62s; }
.buy-scene.is-in .bs-info > :nth-child(3) { transition-delay: 0.7s; }
.buy-scene.is-in .bs-info > :nth-child(4) { transition-delay: 0.78s; }
.buy-scene.is-in .bs-info > :nth-child(5) { transition-delay: 0.86s; }
.bs-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #c9a8ff; }
.bs-title { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 6px; }
.bs-count, .bs-word {
  font: 800 34px/1 'Unbounded', 'Manrope', system-ui, sans-serif;
  background: linear-gradient(180deg, #fff8dc 10%, #ffd34d 55%, #d98a12 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(90, 30, 0, 0.6)) drop-shadow(0 0 18px rgba(255, 190, 60, 0.3));
}
.bs-word { font-size: 18px; letter-spacing: 0.06em; }
.bs-case { margin-top: 8px; font-weight: 800; font-size: 14px; color: #fff; }
.bs-rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.bs-rows span {
  padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #d9c8ff;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.bs-note { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--muted); max-width: 330px; }
.bs-actions {
  display: flex; gap: 10px; width: 100%; margin-top: 18px; align-items: flex-start;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s 0.95s, transform 0.6s 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.bs-actions .open-cta { min-height: 54px; }
.buy-scene.is-in .bs-dim { opacity: 1; }
.buy-scene.is-in .bs-rays { opacity: 1; transform: scale(1); }
.buy-scene.is-in .bs-actions { opacity: 1; transform: none; }
.buy-scene.is-out .bs-dim, .buy-scene.is-out .bs-body, .buy-scene.is-out .bs-rays { opacity: 0; transition: opacity 0.18s; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .bs-rays, .bs-orbit, .buy-scene.is-in .bs-token { animation: none; }
  .buy-scene.is-in .bs-token { opacity: 1; transform: none; }
}

/* ---------- Подарок по промокоду ---------- */
.gift-scene { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; cursor: pointer; }
.gift-body { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.gift { width: 180px; transform: translateY(40px) scale(0.6); opacity: 0; transition: transform 0.6s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.3s; }
.gift svg { width: 100%; display: block; overflow: visible; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.7)); }
.gift-bow { transform-origin: 80px 44px; transform-box: view-box; transition: transform 0.4s cubic-bezier(0.6, 0, 0.8, 0.4) 0.45s, opacity 0.3s 0.6s; }
.gift-lid { transform-origin: 80px 58px; transform-box: view-box; transition: transform 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) 0.75s; }
.gift-glow { opacity: 0; transition: opacity 0.4s 0.85s; }
.gift-text { margin-top: 8px; max-width: 320px; font: 800 18px/1.35 'Unbounded', 'Manrope', system-ui, sans-serif; color: #fff;
  opacity: 0; transform: translateY(14px); transition: opacity 0.5s 1.1s, transform 0.6s 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.gift-scene.is-in .chest-dim { opacity: 1; }
.gift-scene.is-in .chest-rays { opacity: 1; transform: scale(1); }
.gift-scene.is-in .gift { opacity: 1; transform: none; }
.gift-scene.is-in .gift-bow { transform: scale(1.6) translateY(-10px); opacity: 0; }
.gift-scene.is-in .gift-lid { transform: translateY(-44px) rotate(-14deg); }
.gift-scene.is-in .gift-glow { opacity: 1; }
.gift-scene.is-in .chest-eyebrow { opacity: 1; transform: none; transition-delay: 1s; }
.gift-scene.is-in .gift-text { opacity: 1; transform: none; }
.gift-scene.is-out { opacity: 0; transition: opacity 0.24s; }

/* ---------- Конверт заявки на вывод ---------- */
.env-scene { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; pointer-events: none; }
.env { position: relative; width: 220px; height: 140px; transform: scale(0.6); opacity: 0; transition: transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.25s; }
.env-back, .env-front, .env-flap { position: absolute; left: 0; right: 0; }
.env-back { inset: 0; border-radius: 10px; background: linear-gradient(180deg, #3b1a6e, #24104a); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7); }
.env-front { bottom: 0; height: 100%; border-radius: 10px; z-index: 3;
  background: linear-gradient(160deg, #4a2585, #2c1452);
  clip-path: polygon(0 30%, 50% 70%, 100% 30%, 100% 100%, 0 100%); }
.env-flap { top: 0; height: 60%; z-index: 4; transform-origin: 50% 0; transform: rotateX(180deg);
  background: linear-gradient(180deg, #5b2bb0, #3b1a6e); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform 0.35s cubic-bezier(0.6, 0, 0.4, 1) 0.6s; }
.env-letter { position: absolute; left: 14px; right: 14px; top: 10px; height: 110px; z-index: 2; border-radius: 6px;
  background: linear-gradient(180deg, #fffbe6, #f2e3b8); color: #3a1d00; text-align: center; padding-top: 16px;
  transform: translateY(-80px); transition: transform 0.45s cubic-bezier(0.3, 1.2, 0.5, 1) 0.15s; }
.env-letter small { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.env-letter b { display: block; margin-top: 6px; font: 800 20px/1 'Unbounded', 'Manrope', system-ui, sans-serif; }
.env-seal { position: absolute; left: 50%; top: 52%; z-index: 5; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; font: 800 13px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: #5a3006;
  background: radial-gradient(circle at 38% 30%, #fffbe6, #ffd34d 45%, #c8781a);
  box-shadow: 0 0 0 3px rgba(138, 79, 8, 0.5), 0 6px 14px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: scale(2.6); }
.env-caption { position: absolute; top: calc(50% + 100px); font: 800 15px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: #fff;
  opacity: 0; transition: opacity 0.3s 0.95s; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.env-scene.is-in .env { transform: none; opacity: 1; }
.env-scene.is-in .env-letter { transform: translateY(0); }
.env-scene.is-in .env-flap { transform: rotateX(0deg); }
.env-scene.is-in .env-seal { animation: envSeal 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) 0.9s forwards; }
@keyframes envSeal { to { opacity: 1; transform: scale(1); } }
.env-scene.is-in .env-caption { opacity: 1; }
.env-scene.is-gone .env { transition: transform 0.7s cubic-bezier(0.6, 0, 0.8, 0.3), opacity 0.7s; transform: translate(140px, -320px) rotate(-18deg) scale(0.3); opacity: 0; }
.env-scene.is-gone .env-caption { opacity: 0; transition: opacity 0.3s; }

/* Печать выплаченной заявки: золотая, на новой - с ударом. */
.payout-row { position: relative; }
.payout-seal {
  position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font: 900 16px/1 'Manrope', sans-serif; color: #5a3006;
  background: radial-gradient(circle at 38% 30%, #fffbe6, #ffd34d 45%, #c8781a);
  box-shadow: 0 0 0 2px rgba(138, 79, 8, 0.45), 0 4px 10px rgba(0, 0, 0, 0.5);
  rotate: -12deg;
}
.payout-seal.is-new { animation: envSeal 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 0.3s both, sealGlow 1.2s ease-in-out 0.8s 2; }
@keyframes sealGlow { 50% { box-shadow: 0 0 0 2px rgba(138, 79, 8, 0.45), 0 0 24px 6px rgba(255, 211, 77, 0.7); } }

/* ---------- Заглушки загрузки ---------- */
/* Мерцающие силуэты вместо пустоты: видно, что здесь сейчас что-то будет,
   и экран не прыгает, когда оно приходит. */
.skel {
  display: block; border-radius: 14px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 70%) 0 0 / 300% 100%;
  animation: skel 1.4s ease-in-out infinite;
}
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel-feed { flex: 0 0 150px; height: 64px; }
.skel-shelf { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0; }
.skel-title { width: 180px; height: 22px; }
.skel-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: 100%; }
.skel-case { flex: 0 0 calc(50% - 7px); aspect-ratio: 1 / 1.1; border-radius: 22px; }
@media (min-width: 1024px) { .skel-case { flex-basis: calc(33.3% - 10px); } }
.skel-line { height: 58px; margin-bottom: 8px; }
.skel-hist { flex: 0 0 calc((100% - (var(--hist-cols) - 1) * var(--hist-gap)) / var(--hist-cols)); aspect-ratio: 3 / 4; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ============================================================
   КОМПЬЮТЕР: ЧЁТКОСТЬ ВМЕСТО ДЫМКИ
   ============================================================

   Заказчик увидел на мониторе то, чего не видно на телефоне: «всё какое-то
   мутное». Причины нашлись конкретные, и каждая убрана здесь, а не размазана
   по файлу.

   1. Экран кейса. Фон - обложка, размытая на 58 точек и растянутая в
      полтора раза, плюс тёмная заливка прямоугольником. На телефоне фон
      уходит за край экрана, а на мониторе он лежит в колонке, и размытие
      стекает с её краёв мутной рамкой. Здесь фон - чистые радиальные
      свечения в тоне кейса, которые сходят в ноль сами: у них нет края,
      значит нечему и мылиться.
   2. Шапка полупрозрачная с размытием того, что под ней: на мониторе под ней
      проезжают крупные обложки, и полоса выглядела запотевшей. Шапка теперь
      плотная, с бликом и чёткой гранью.
   3. Падающие монеты на фоне. На телефоне их несколько штук на узком экране,
      на мониторе - россыпь серых точек по всему полю, которая читается как
      пыль на экране. На компьютере их нет.
   4. Сглаживание шрифтов и блик на панелях: стекло вместо матового пластика.

   Телефон этот блок не трогает: там заказчика всё устраивает. */
@media (min-width: 1024px) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .money-rain { display: none; }

  .topbar {
    background: linear-gradient(180deg, rgba(22, 8, 40, 0.985), rgba(14, 4, 26, 0.985));
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px -18px rgba(0, 0, 0, 0.9);
  }

  .side-nav {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 30%),
      linear-gradient(180deg, #170932, #0d0420);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.4), 12px 0 40px -30px rgba(0, 0, 0, 0.9);
  }
  /* Блик по верхней кромке плитки: панель читается стеклом, а не тканью. */
  .side-item { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
  .side-item.active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(160, 32, 255, 0.35),
      0 8px 26px -12px var(--violet);
  }

  /* Экран кейса: размытая обложка вернулась и на компьютер (заказчик её
     хватился). Раньше она стекала мутью за края колонки - теперь слой
     обрезан своей колонкой (overflow у .opener-theme), а по бокам уходит в
     фон страницы маской, без прямоугольника. Кейс на сцене остаётся резким:
     размыт только фон. */
  .opener.is-themed { background: transparent; }
  .opener-theme {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .opener-theme-wash { width: 100%; top: -260px; opacity: 0.5; }
  .opener-theme-mark { width: 34%; right: 2%; }
  /* Кейс на сцене - резкий, со своим контурным светом, а не в дымке. */
  .case-stage-art { image-rendering: auto; }
}


/* ============================================================
   ПЛИТКИ МЕНЮ: ОДНИ НА КОМПЬЮТЕР И ТЕЛЕФОН
   ============================================================
   Раньше эти правила жили только в блоке компьютера, а на телефоне меню
   было присланной картинкой с прозрачными кнопками. Заказчик попросил
   одинаковое меню на обеих версиях, поэтому плитки описаны здесь, вне
   @media: боковая панель компьютера и лист меню телефона собирает одна
   функция (navTilesHtml в app.js). Наведение и переливы рамки остались в
   блоке компьютера: на телефоне наведения нет, а вечная анимация в
   открытом листе ни к чему. */
.side-list { display: flex; flex-direction: column; gap: 9px; }

/*
 * ПЛИТКА ПО ПРИСЛАННОМУ МАКЕТУ: рисунок слева, название и подпись, стрелка
 * справа.
 *
 * Собрана разметкой, а не взята картинкой целиком, и это не упрямство. В
 * макете подписи вшиты в рисунок, активная плитка подсвечена намертво, а
 * блок «Админ» заказчик просил убрать - ни одного из трёх нельзя сделать с
 * картинкой. Из макета взяты только рисунки (tools/banners.mjs), остальное
 * повторено стилями.
 */
.side-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 14px 9px 9px;
  border: 1px solid rgba(120, 78, 190, 0.34);
  border-radius: 18px;
  /* Подложка темнее фона панели и с бликом сверху слева - как в макете. */
  background:
    linear-gradient(145deg, rgba(150, 100, 235, 0.13), transparent 62%),
    linear-gradient(180deg, #170a29, #10061d);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.side-item:active { transform: scale(0.985); }

/*
 * Рисунок вырезан из макета вместе с частью почти чёрного фона плитки, а фон
 * снят по яркости - см. keyDark в tools/banners.mjs. Пропорция вырезки
 * 250x150, поэтому слот такой же: при квадратном рисунок обрезало бы по
 * бокам, при contain в квадрате он ужимался бы вдвое.
 */
.side-art {
  width: 62px; height: 37px; flex: 0 0 auto;
  object-fit: contain;
  display: block;
}
.side-ico[data-ico] {
  width: 62px; height: 37px; padding: 6px; flex: 0 0 auto;
  color: var(--violet);
}

.side-text { min-width: 0; }
/* Название белым в верхнем регистре, как в макете. Прежний синий остался от
   мобильной картинки, где подписи такие; здесь они белые. */
.side-title {
  display: block;
  font-size: 15px; font-weight: 900; letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text);
}
.side-sub {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: #9f8ec7;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* Стрелка справа. Рисуется бордюром, а не значком: один угол в две линии
   дешевле любой картинки и не мылится ни на каком экране. */
.side-go {
  width: 9px; height: 9px; flex: 0 0 auto;
  margin-right: 2px;
  border-right: 2px solid #8e7ac0;
  border-top: 2px solid #8e7ac0;
  transform: rotate(45deg);
  transition: border-color 0.15s, transform 0.15s;
}

/* Активный раздел: рамка и свечение, как у подсвеченной плитки в макете. */
.side-item.active {
  border-color: var(--violet);
  background:
    linear-gradient(145deg, rgba(160, 32, 255, 0.28), rgba(255, 46, 138, 0.1) 70%),
    linear-gradient(180deg, #1d0d36, #140826);
  box-shadow: 0 0 0 1px rgba(160, 32, 255, 0.35), 0 8px 26px -12px var(--violet);
}
.side-item.active .side-go { border-color: var(--text); }
.side-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.side-item { position: relative; overflow: hidden; isolation: isolate; }
.side-item::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 20% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%);
}
.side-item::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}
.side-item.is-sq {
  aspect-ratio: 1; padding: 10px 8px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  text-align: center; border-radius: 20px;
  transition: transform 0.18s cubic-bezier(0.2, 1.4, 0.4, 1), border-color 0.15s, box-shadow 0.2s;
}
.side-item.is-sq .side-art { width: 100%; height: auto; max-height: 62%; flex: 1 1 auto; min-height: 0; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)); transition: transform 0.25s; }
.side-item.is-sq .side-ico[data-ico] { width: 58%; height: auto; flex: 1 1 auto; padding: 8% 0 0; color: #c9a8ff; filter: drop-shadow(0 6px 10px rgba(120, 60, 255, 0.5)); }
.side-item.is-sq .side-title { font-size: 13px; letter-spacing: 0.6px; }
.side-item.is-sq .side-sub, .side-item.is-sq .side-go { display: none; }
.side-item.is-sq.active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(200, 120, 255, 0.55), 0 12px 30px -12px var(--violet); }

/* Касса и поддержка: внизу панели, отдельно от игр. */
.side-bottom { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); }
.side-item.is-wide {
  /* Касса и поддержка были бледными (заказчик), а золото и голубой - чужие
     проекту. Цвета свои: касса - розово-фиолетовая, как кнопка
     «Пополнить» (это то же действие), поддержка - глубокий фиолетовый, тише.
     Глянец сверху и светлая кромка - как у остальных плиток. */
  border-color: rgba(255, 92, 190, 0.6);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 48%, transparent 50%),
    radial-gradient(120% 140% at 0% 0%, rgba(255, 79, 168, 0.45), transparent 62%),
    linear-gradient(135deg, #5a1470, #3a0c58 55%, #1f0838);
  box-shadow: inset 0 1px 0 rgba(255, 210, 240, 0.3), 0 8px 22px -12px rgba(255, 60, 170, 0.7);
}
.side-item.is-wide .side-title { color: #fff; }
.side-item.is-wide .side-sub { color: #f0c9ec; }
.side-item.is-wide .side-go { border-color: #f6d4f0; }
.side-item.is-tall {
  padding: 18px 16px 18px 12px; min-height: 92px; border-radius: 20px;
  border-color: rgba(178, 120, 255, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 48%, transparent 50%),
    radial-gradient(120% 140% at 0% 0%, rgba(160, 90, 255, 0.4), transparent 62%),
    linear-gradient(135deg, #3b1880, #26105a 55%, #170a36);
  box-shadow: inset 0 1px 0 rgba(225, 205, 255, 0.28), 0 8px 22px -12px rgba(150, 80, 255, 0.7);
}
.side-item.is-tall .side-art { width: 76px; height: 56px; }
.side-item.is-tall .side-title { font-size: 16px; color: #fff; }
.side-item.is-tall .side-sub { color: #d6c6f5; }
.side-item.is-tall .side-go { border-color: #e2d6ff; }

/* ============================================================
   КАЗИНО: ЛОББИ ИГР ПРОВАЙДЕРОВ
   ============================================================

   Вид согласован с заказчиком по макету лобби в духе 1Win.
   Разметку собирает public/casino.js.

   ПЛИТКА 3:4, А НЕ ВО ВСЮ СТРОКУ. На телефоне три в ряд, на компьютере
   auto-fill от 150 точек: в колонке содержимого встаёт шесть-семь плиток,
   как у Stake и 1Win. Растянутые на всю ширину обложки заказчик прямо
   запретил.

   Сетка здесь grid, а не flex, как у полок кейсов, и это не противоречие:
   у полки неполный ряд центрируется, а каталог на тысячи игр читают слева
   направо, и прижатый влево остаток - норма любой витрины.
   ============================================================ */
/* Ленты и чипы выходят за поля main до края экрана: отступ main здесь. */
.cz, #view-casino { --cz-gutter: 18px; }
.cz { padding: 4px 0 24px; }

/* ---------- Меню вкладок ----------
   По образцу 1Win: одна капсула во всю ширину, вкладки делят её поровну,
   выбранная залита. Шрифт Inter, как у них: у Manrope на этом кегле
   кириллица шире, и «Быстрые игры» не помещались в треть телефона. */
.cz-seg {
  display: flex; gap: 4px; padding: 4px; margin: 10px 0 12px;
  border-radius: 14px; background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.cz-seg:empty { display: none; }
.cz-seg-btn {
  /* Доля ширины по длине подписи, а не поровну: «Быстрые игры» длиннее
     «Слотов», и при равных третях на телефоне обрезалось именно оно. */
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 8px; border: 0; border-radius: 11px; cursor: pointer;
  background: none; color: var(--muted);
  font: 600 13px/1 'Inter', 'Manrope', system-ui, sans-serif; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .18s, color .18s;
}
.cz-seg-btn[aria-selected="true"] {
  color: #fff; font-weight: 700;
  background: linear-gradient(180deg, #e0518c, #b8407a);
  box-shadow: 0 4px 14px rgba(224, 81, 140, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ---------- Баннеры ----------
   На телефоне как на главной: слайд-шоу, под ним пара. Классы .hero и
   .promo-pair те же, что на главной, поэтому пропорции и выравнивание пары
   по высоте работают без своей копии правил. */
.cz-banners { display: flex; flex-direction: column; gap: var(--banner-gap); margin-bottom: 14px; }
.cz-banners[hidden] { display: none; }
.cz-banners > .promo-pair { order: 0; }

/* ---------- Поиск и «Провайдеры» ---------- */
.cz-tools { display: flex; gap: 8px; align-items: center; }
.cz-search {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid rgba(255, 255, 255, 0.07); color: var(--muted);
}
.cz-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  color: var(--text); font: 500 14px 'Inter', 'Manrope', system-ui, sans-serif;
}
.cz-search input::placeholder { color: var(--muted); }
.cz-provbtn {
  flex: 1 1 0; min-width: 0; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; cursor: pointer;
  background: var(--bg-soft); border: 1px solid rgba(255, 255, 255, 0.07); color: var(--text);
  font: 600 14px/1 'Inter', 'Manrope', system-ui, sans-serif;
}
.cz-provbtn svg { color: var(--pink); }
.cz-provbtn:active { transform: scale(.98); }

/* ---------- Чипы категорий ----------
   Лента с прокруткой пальцем: категорий больше, чем влезает в строку
   телефона, и переносить их в два ряда значило бы отодвинуть игры. */
.cz-chips {
  display: flex; gap: 6px; margin: 10px calc(-1 * var(--cz-gutter)) 0; padding: 0 var(--cz-gutter) 2px;
  overflow-x: auto; scrollbar-width: none; scroll-padding: 0 var(--cz-gutter);
}
.cz-chips::-webkit-scrollbar { display: none; }
.cz-chips[hidden] { display: none; }
.cz-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 13px; border-radius: 10px; cursor: pointer;
  background: var(--bg-soft); border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--muted); font: 600 13px/1 'Inter', 'Manrope', system-ui, sans-serif;
}
.cz-chip { padding-left: 6px; }
.cz-chip[aria-pressed="true"] {
  color: #fff; border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cz-ico { flex: 0 0 auto; width: 20px; height: 20px; }
/* Плашка значка: свой градиент у категории, белый контур, глянец сверху. */
.cz-ib {
  flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  color: #fff; background: linear-gradient(145deg, var(--a), var(--b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 4px rgba(0, 0, 0, 0.18), 0 4px 10px -4px var(--b);
}
.cz-ib .cz-ico { width: 16px; height: 16px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25)); }
.cz-chip .cz-ib { width: 24px; height: 24px; border-radius: 7px; }
.cz-chip .cz-ib .cz-ico { width: 14px; height: 14px; }
.cz-btitle .cz-ib { width: 30px; height: 30px; border-radius: 9px; }
.cz-btitle .cz-ib .cz-ico { width: 18px; height: 18px; }

/* ---------- Блоки лобби ---------- */
.cz-body { margin-top: 6px; }
.cz-block { margin-top: 18px; }
.cz-bhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; min-height: 32px; }
.cz-btitle {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--text);
  font: 700 17px/1.1 'Inter', 'Manrope', system-ui, sans-serif; letter-spacing: -0.2px;
}
.cz-btitle > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-btitle > svg:last-child { flex: 0 0 auto; color: var(--muted); }
.cz-arrows { display: flex; gap: 6px; flex: 0 0 auto; }
.cz-arrow {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; cursor: pointer;
  background: var(--bg-soft); border: 1px solid rgba(255, 255, 255, 0.07); color: var(--text);
}
.cz-arrow:active { transform: scale(.94); }
/* На телефоне ленту листают пальцем, стрелки там лишние. */
@media (hover: none) { .cz-arrows { display: none; } }

/*
 * ЛЕНТА БЛОКА. Плитка шириной в треть экрана минус промежутки, и край
 * четвёртой выглядывает: так видно, что лента листается. На компьютере
 * плитка фиксированной ширины, сколько влезет.
 * «Популярные» в две строки: grid с потоком по колонкам.
 */
.cz-track {
  --cz-tile: calc((100vw - 2 * var(--cz-gutter) - 2 * 10px) / 3.25);
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--cz-tile);
  gap: 12px 10px; margin: 0 calc(-1 * var(--cz-gutter)); padding: 0 var(--cz-gutter) 4px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--cz-gutter);
  scrollbar-width: none;
}
.cz-track::-webkit-scrollbar { display: none; }
.cz-track.is-two { grid-template-rows: auto auto; }
.cz-track > .cz-tile { scroll-snap-align: start; }

/* Плитка «Все N»: тот же размер, что у игры, чтобы лента не ломалась. */
.cz-all .cz-art {
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(224, 81, 140, 0.22), rgba(147, 102, 208, 0.18)), var(--bg-soft);
}
.cz-track.is-two > .cz-all { grid-row: span 2; }
.cz-track.is-two > .cz-all .cz-art { height: 100%; aspect-ratio: auto; }
.cz-all-in { display: grid; justify-items: center; gap: 4px; color: var(--text); font: 600 14px/1 'Inter', 'Manrope', system-ui, sans-serif; }
.cz-all-in b { font-size: 20px; font-weight: 800; color: #fff; }
.cz-all-in small { font-size: 13px; font-weight: 600; color: var(--muted); }

/* Множитель настоящего раунда на плитке «Лучших выигрышей». */
.cz-mult {
  position: absolute; left: 6px; top: 6px; z-index: 1;
  padding: 4px 7px; border-radius: 8px;
  background: linear-gradient(180deg, #ffe58a, #f2b230); color: #3a1d00;
  font: 800 12px/1 'Inter', 'Manrope', system-ui, sans-serif;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.cz-prov.cz-win { color: var(--gold); font-weight: 800; }

/* Пустая вкладка: честная строка вместо пустоты. */
.cz-soon {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  margin-top: 18px; padding: 34px 18px; border-radius: 18px;
  background: var(--bg-soft); border: 1px solid rgba(255, 255, 255, 0.06);
}
.cz-soon b { font: 700 17px/1.2 'Inter', 'Manrope', system-ui, sans-serif; color: var(--text); }
.cz-soon span { color: var(--muted); font-size: 13px; max-width: 320px; }
.cz-soon-btn {
  margin-top: 8px; height: 42px; padding: 0 20px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #e0518c, #b8407a); color: #fff; font: 700 14px/1 'Inter', 'Manrope', system-ui, sans-serif;
}
.cz-skel-title { display: block; width: 140px; height: 18px; border-radius: 8px; }

/* Отдача под лобби: та же настройка, что в окне запуска и в «Честности». */

/* ---------- Заголовок списка: Назад, название, счёт ---------- */
.cz-listhead { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; min-height: 40px; }
.cz-back {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  height: 36px; padding: 0 12px 0 8px; border-radius: 10px; cursor: pointer;
  background: var(--bg-soft); border: 1px solid rgba(255, 255, 255, 0.07); color: var(--text);
  font: 600 13px/1 'Inter', 'Manrope', system-ui, sans-serif;
}
.cz-listtitle {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
  font: 700 17px/1.1 'Inter', 'Manrope', system-ui, sans-serif; color: var(--text);
}
.cz-listtitle > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-listtitle .cz-ib { width: 30px; height: 30px; border-radius: 9px; }
.cz-count { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 700; }

/* ---------- Провайдеры ----------
   Плитка со знаком: знаки разной формы, поэтому у всех одна высота и
   предел ширины, а плитка центрирует. Название текстом - где знака нет. */
.cz-pgrid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .cz-pgrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.cz-pcard {
  display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 8px;
  height: 104px; padding: 14px 10px 10px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), var(--bg-soft);
  border: 1px solid rgba(255, 255, 255, 0.07); color: var(--text);
  transition: border-color .15s, transform .15s;
}
.cz-pcard:active { transform: scale(.97); }
@media (hover: hover) { .cz-pcard:hover { border-color: rgba(224, 81, 140, 0.5); } }
.cz-pmark { display: grid; place-items: center; min-width: 0; width: 100%; overflow: hidden; }
.cz-plogo { display: block; max-width: 86%; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.cz-pword {
  display: block; max-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 800 16px/1.1 'Inter', 'Manrope', system-ui, sans-serif; letter-spacing: -0.3px; color: #fff;
}
.cz-pcount { color: var(--muted); font-size: 11.5px; font-weight: 600; }
/* Знак в заголовке блока и списка: строчный, по высоте текста. */
.cz-plogo.is-inline { max-height: 22px; max-width: 150px; }
.cz-plogo.is-title { max-height: 28px; max-width: 180px; }
.cz-pword.is-inline, .cz-pword.is-title { font-size: 17px; text-align: left; }

.cz-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Live казино: плитки крупнее, чем у слотов и быстрых игр (просьба
   заказчика). Обложка стола горизонтальная, поэтому кадр 4:3 и без размытой
   подложки: картинка стола заполняет кадр целиком. */
.cz[data-cz-kind="live"] .cz-track { --cz-tile: calc((100vw - 2 * var(--cz-gutter) - 10px) / 1.55); }
.cz[data-cz-kind="live"] .cz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cz[data-cz-kind="live"] .cz-art { aspect-ratio: 4 / 3; }
.cz[data-cz-kind="live"] .cz-art.is-wide .cz-blur { display: none; }
.cz[data-cz-kind="live"] .cz-art.is-wide .cz-fit { object-fit: cover; }
.cz[data-cz-kind="live"] .cz-name { font-size: 14px; }
@media (min-width: 600px) {
  .cz-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); }
}
.cz-tile { display: block; position: relative; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
/* block обязателен: .cz-art - span внутри кнопки, а у строчного элемента
   aspect-ratio не действует, и плитка схлопывается в ноль. */
.cz-art {
  display: block; position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 3 / 4;
  background: var(--bg-soft);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s;
}
.cz-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Запасная обложка горизонтальная: целиком поверх своей размытой копии,
   а не обрезанная под 3:4 - обрезка съедает название игры. */
.cz-art.is-wide .cz-blur { filter: blur(14px) saturate(1.3) brightness(.7); transform: scale(1.2); }
.cz-art.is-wide .cz-fit { object-fit: contain; }
.cz-art::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 30%);
}
.cz-hover {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: rgba(13, 7, 22, 0.5); opacity: 0; transition: opacity .18s;
}
.cz-play {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #ffe58a, #f2b230); box-shadow: 0 6px 18px rgba(242, 178, 48, 0.45);
}
@media (hover: hover) {
  .cz-tile:hover .cz-art { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(224, 81, 140, 0.5), 0 14px 26px rgba(0, 0, 0, 0.5); }
  .cz-tile:hover .cz-hover { opacity: 1; }
}
.cz-tile:active .cz-art { transform: scale(.97); }
.cz-name { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-prov { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Название игры провайдера под обложкой не пишется (решение заказчика): оно
   уже нарисовано на самой обложке. Строка остаётся в разметке для экранных
   чтецов и поиска по тексту, но на экране её нет; ряд под обложкой начинается
   сразу с провайдера или «N играют». */
.cz-tile[data-game] .cz-name, .cz-skel .cz-name {
  /* Внутри плитки (у неё position: relative): иначе скрытая строка
     выпадала из ленты и раздвигала страницу вбок. */
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.cz-tile[data-game] .cz-prov, .cz-tile[data-game] .cz-live { margin-top: 7px; }
/* «N играют»: зелёная точка дышит, число белое, как у образца. Провайдер
   при этом уходит: под обложкой одна строка, а не две. */
.cz-live {
  display: flex; align-items: center; gap: 5px; margin-top: 3px;
  color: var(--muted); font: 400 12px/1 'Inter', 'Manrope', system-ui, sans-serif; white-space: nowrap;
}
/* Строка тонкая (просьба заказчика): это фон под обложкой, не призыв. */
.cz-live b { color: #fff; font-weight: 500; }
.cz-live i { width: 7px; height: 7px; border-radius: 50%; background: #3ee08a; animation: czLive 2.4s ease-in-out infinite; }
@keyframes czLive { 0%, 100% { box-shadow: 0 0 0 0 rgba(62, 224, 138, 0.6); } 60% { box-shadow: 0 0 0 5px rgba(62, 224, 138, 0); } }
.cz-tile:has(.cz-live) .cz-prov { display: none; }
@media (prefers-reduced-motion: reduce) { .cz-live i { animation: none; } }
.cz-skel { pointer-events: none; }
.cz-skel .cz-name { height: 12px; width: 70%; border-radius: 6px; }

.cz-empty { padding: 40px 0; text-align: center; color: var(--muted); font-weight: 600; }
.cz-more { margin-top: 18px; display: grid; justify-items: center; gap: 10px; }
.cz-progress { width: min(260px, 70%); height: 4px; border-radius: 2px; background: var(--bg-soft); overflow: hidden; }
.cz-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--violet)); }
.cz-more small { color: var(--muted); font-size: 12px; font-weight: 700; }
.cz-more button {
  height: 44px; padding: 0 22px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08); background: var(--card); color: var(--text); font: 800 14px/1 'Manrope', system-ui, sans-serif;
}
.cz-more button:disabled { opacity: .6; }

/* ---------- Окно запуска ---------- */
.cz-sheet { position: fixed; inset: 0; z-index: 150; display: grid; place-items: end center; }
.cz-sheet[hidden] { display: none; }
.cz-sheet-dim { position: absolute; inset: 0; background: rgba(5, 2, 10, 0.72); }
.cz-sheet-card {
  position: relative; width: min(100%, 460px);
  border-radius: 22px 22px 0 0; overflow: hidden;
  background: var(--bg-soft); border: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: var(--safe-bottom);
  transform: translateY(40px); opacity: 0;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), opacity .2s;
}
.cz-sheet.is-in .cz-sheet-card { transform: none; opacity: 1; }
.cz-sheet-art { aspect-ratio: 1004 / 494; background: var(--card) center / cover no-repeat; }
/* Без широкой картинки окно берёт вертикальную обложку: верх кадра, где
   обычно название, а не середину. */
.cz-sheet-art.is-cover { background-position: center 20%; }
.cz-sheet-body { padding: 16px; }
.cz-sheet-body h4 { margin: 0; font: 800 18px/1.2 'Unbounded', 'Manrope', system-ui, sans-serif; color: var(--text); }
.cz-sheet-body p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.cz-sheet-actions { display: flex; gap: 10px; margin-top: 14px; }
.cz-sheet-actions > * { flex: 1; }
.cz-sheet-actions .open-cta { justify-content: center; }
@media (min-width: 700px) {
  .cz-sheet { place-items: center; }
  .cz-sheet-card { border-radius: 22px; }
}

/* ---------- Экран игры ---------- */
/* Поверх всего, включая боковую панель: игра занимает экран целиком. */
.cz-frame {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: #05020a;
  padding-top: var(--safe-top);
}
.cz-frame[hidden] { display: none; }
.cz-frame-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 10px;
  background: var(--bg); border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cz-frame-close {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08); background: var(--bg-soft); color: var(--text);
}
.cz-frame-name { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-frame-balance { flex: 0 0 auto; padding: 7px 10px; border-radius: 10px; font-weight: 800; font-size: 13px; color: var(--gold); background: var(--bg-soft); }
.cz-frame-host { flex: 1; position: relative; }
.cz-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
body.cz-playing { overflow: hidden; }

@media (min-width: 1024px) {
  /*
   * Баннеры строкой: слайд-шоу слева, справа столбиком Free Money над
   * «Кейсами». Доли ширины равны пропорциям, как у пары на главной: столбик
   * шириной W высотой W/3.285 + W/1.151 = 1.173W, слайд-шоу шириной H высотой
   * H/2, и высоты сходятся при H = 2.346W - при любой ширине окна.
   */
  .cz-banners { flex-direction: row; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
  .cz-banners > .cz-hero { flex-grow: 2.346; flex-shrink: 1; flex-basis: 0%; min-width: 0; }
  .cz-banners > .cz-promo {
    flex-grow: 1; flex-shrink: 1; flex-basis: 0%; min-width: 0;
    flex-direction: column; gap: var(--banner-gap);
  }
  /* В столбике доли пары не нужны: каждая картинка во всю ширину столбика. */
  .cz-promo > button { flex-grow: 0; flex-shrink: 0; flex-basis: auto; width: 100%; }
  .cz-seg { max-width: 560px; }
  /* Обложки на компьютере в полтора раза крупнее прежних 156 (просьба
     заказчика): на мониторе мелкие плитки читались значками. Live ещё
     крупнее - у стола картинка горизонтальная. */
  .cz-track { --cz-tile: 234px; gap: 16px 14px; margin: 0; padding: 0 0 4px; scroll-padding: 0; }
  .cz[data-cz-kind="live"] .cz-track { --cz-tile: 340px; }
  .cz[data-cz-kind="live"] .cz-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .cz-chips { margin: 12px 0 0; padding: 0 0 2px; flex-wrap: wrap; overflow: visible; }
  .cz-tools { max-width: 720px; }
  .cz-btitle { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .cz-art, .cz-sheet-card { transition: none; }
}

/* «Честность»: карточка казино. Число отдачи крупно и золотом - его ищут
   глазами, ради него карточку и открывают. */
.fair-casino p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.fair-casino-rtp {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  background: rgba(223, 190, 98, 0.08); box-shadow: inset 0 0 0 1px rgba(223, 190, 98, 0.25);
  font-weight: 700; font-size: 13px; color: var(--text);
}
.fair-casino-rtp b { font: 800 22px/1 'Unbounded', 'Manrope', system-ui, sans-serif; color: var(--gold); }
.fair-casino-note { font-size: 12px !important; }

/* ============================================================
   КОМПЬЮТЕР: МЕНЮ ПЛИТКАМИ, РИСК-ИГРА, КНОПКИ, БАННЕРЫ
   ============================================================ */

@media (min-width: 1024px) {
  /*
   * Меню по просьбе заказчика: разделы - квадратными плитками в сетке по две,
   * касса и поддержка - прямоугольниками внизу. Глянец - двумя слоями поверх
   * подложки: блик сверху слева и узкая светлая кромка; при наведении плитка
   * поднимается и подсвечивается, у активной рамка переливается.
   */
  .side-item.is-sq:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 28px -14px rgba(160, 100, 255, 0.8); }
  .side-item.is-sq:hover .side-art { transform: scale(1.06) translateY(-2px); }
  .side-item.is-sq.active::after { animation: sideSheen 3.4s ease-in-out infinite; }
  @keyframes sideSheen { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
  #sideSupport { margin-top: 0; }

  /* «Главный приз дня» - в пустоте между разделами и кассой. Отступы auto
     сверху у карточки и у кассы делят свободное место пополам: карточка
     стоит посередине, а не прилипает к разделам. */
  .side-prize {
    position: relative; overflow: hidden; isolation: isolate;
    flex-shrink: 0; margin: auto 0 0; padding: 10px 12px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: 1px solid rgba(255, 200, 110, 0.35); border-radius: 20px; cursor: pointer;
    text-align: center; color: var(--text); font: inherit;
    background:
      radial-gradient(80% 60% at 50% 35%, color-mix(in srgb, var(--tier-color) 30%, transparent), transparent 70%),
      linear-gradient(180deg, #1d0d36, #120722);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.18s, box-shadow 0.2s;
  }
  .side-prize:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 28px -14px rgba(255, 190, 80, 0.7); }
  .side-prize-kicker {
    font: 800 10.5px/1 'Manrope', system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
    color: #ffd98a;
  }
  .side-prize-art { width: 60px; height: 60px; margin: 4px 0 2px; display: grid; place-items: center; }
  .side-prize-art > * { width: 100%; height: 100%; }
  .side-prize-name { font: 800 13px/1.2 'Manrope', system-ui, sans-serif; }
  .side-prize-value {
    font: 900 20px/1.1 'Unbounded', 'Manrope', system-ui, sans-serif;
    background: linear-gradient(180deg, #fff6d0, #ffc84a 60%, #e08a12);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .side-prize-case { font: 600 11.5px/1.2 'Manrope', system-ui, sans-serif; color: #a99bbd; }
  .side-prize + .side-bottom { margin-top: auto; }
  /* Рисунок крупнее только там, где по высоте есть место. */
  @media (min-height: 980px) { .side-prize-art { width: 92px; height: 92px; margin: 6px 0 4px; } }
  /* На низком окне карточке нет места: меню важнее. */
  @media (max-height: 860px) { .side-prize { display: none; } }

  /* Риск-игра на мониторе: карты в столбике разумной ширины, а не на весь
     экран - раньше один туз занимал полэкрана. */
  .gamble { max-width: 560px; margin-left: auto; margin-right: auto; }
  .gamble-cards { max-width: 400px; margin: 0 auto; gap: 14px; }

  /* Кнопки итога и риска не тянутся на всю колонку: на мониторе кнопка в
     полторы тысячи точек читается полосой, а не кнопкой. */
  .result-actions { max-width: 560px; margin-left: auto; margin-right: auto; }
  .gamble-cta, #gambleSkipBtn, .take-wide { max-width: 560px; margin-left: auto; margin-right: auto; }
  .open-bar { max-width: 640px; margin-left: auto; margin-right: auto; }

  /* Пара баннеров под слайд-шоу больше не во всю ширину: высота пары
     идёт от ширины, и на мониторе она становилась гигантской. */
  .banner-stack > .promo-pair { width: 100%; max-width: 900px; justify-self: center; }

  /* Free Money: бенто в три колонки. Розыгрыш слева на два ряда, справа
     пара «Начало» и бот, под ними колесо; подарки и Lucky Fortune во всю
     ширину. Фото машины 4:5 в узкой колонке не растягивается на весь экран. */
  #view-freemoney { max-width: 1240px; margin-left: auto; margin-right: auto; }
  .fm-bento { grid-template-columns: 1.15fr 1fr 1fr; gap: 34px; }
  /* Заголовок справа, по правому краю плиток, и с воздухом до вкладок. */
  .fm-title { text-align: right; margin: 22px 0 22px; }
  /* Бот: надписи по центру плитки, а не прижаты к верху. */
  .bt-tile { justify-content: center; }
  /* Переход по вкладке: плитка на секунду приподнимается - «это я». Одна
     короткая анимация на нажатие, не вечная (iPhone, см. CLAUDE.md). */
  .fm-tile.fm-hello { animation: fmHello 1s ease-out; z-index: 2; }
  .fm-gifts, .fm-fortune { grid-column: 1 / -1; }
  .fm-drive { grid-column: 1; grid-row: span 2; }
  .fm-start { grid-column: 2; }
  .fm-bot { grid-column: 3; }
  .fm-wheel { grid-column: 2 / span 2; }
  .fm-tabs { margin: 0 0 30px; padding-left: 0; padding-right: 0; }
}
@keyframes fmHello {
  0% { transform: scale(1); }
  30% { transform: scale(1.035); box-shadow: 0 0 0 2px rgba(165, 91, 255, 0.85), 0 24px 60px -20px rgba(165, 91, 255, 0.8); }
  100% { transform: scale(1); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .side-item.is-sq.active::after { animation: none; }
}

/* Промокод в регистрации: необязательное поле, приписка мельче подписи. */
.auth-opt { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
#authPromo { text-transform: uppercase; }

/*
 * Пока открыт кейс (body.case-open), всё, что под ним, стоит на паузе: полки
 * с дыханием обложек и бликами, постер, дождь монет. Их не видно, а телефон
 * продолжал их считать, и каждая карточка выигрыша поверх кейса открывалась
 * рывками. Пауза, а не отключение: закрыли кейс - всё поехало с того же кадра.
 */
body.case-open #app > .view *, body.case-open #app > .view *::before,
body.case-open #app > .view *::after, body.case-open .money-rain * { animation-play-state: paused !important; }