/* ═══════════════════════════════════════════════════════════
   LAREK GAMES — базовые стили, каркас, компоненты
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Сброс + запрет «браузерных» жестов ─────────────────── */

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

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;                 /* скроллит только .screen */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;        /* нет pull-to-refresh и bounce */
  touch-action: manipulation;       /* убивает зум двойным тапом */
}

body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;      /* нет меню «Копировать» по долгому тапу */
  -webkit-tap-highlight-color: transparent;
  position: fixed;
  inset: 0;
}

/* Выделение разрешено только там, где оно осмысленно */
input, textarea, [data-selectable] {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

img, svg, canvas { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
button svg, a svg, [data-icon] svg { pointer-events: none; }

button, input, select, textarea {
  font: inherit; color: inherit; background: none; border: 0; outline: none;
  appearance: none; -webkit-appearance: none;
}
button { cursor: pointer; touch-action: manipulation; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

::-webkit-scrollbar { width: 0; height: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 2. Каркас ─────────────────────────────────────────────── */

.app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
}
.app[hidden] { display: none; }

.screen {
  position: relative;
  /* Без этого строка «1fr» не ограничивает высоту: у элементов сетки
     min-height по умолчанию auto, и слишком высокое содержимое
     раздвигает каркас вместо того, чтобы прокручиваться. Игровой экран
     из-за этого мерил свободное место по уже растянутому контейнеру и
     не помещался в него. */
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-6) + var(--sp-4));
  scroll-behavior: smooth;
}
.screen > * { animation: screen-in var(--t-base) var(--ease-out) both; }

/*
 * Экран во всю площадь — для игр, которые рисуют собственную сцену.
 * Ставится из кода экрана на время его жизни: отступы контейнера и
 * прокрутка мешают такой сцене занять ровно то место, что есть.
 */
.screen.is-fullbleed {
  padding: 0;
  overflow: hidden;
}


@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── 3. Верхняя панель ─────────────────────────────────────── */

/*
 * Панель прижата к правому краю и стала ниже.
 *
 * Раньше её элементы растягивались на всю ширину и занимали слишком
 * много места сверху: на маленьком экране это съедало полосу выше
 * содержимого. Теперь блок компактный, а свободное место уходит влево.
 */
.topbar {
  position: relative;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: calc(var(--topbar-h) + var(--safe-top) + var(--ui-top-gap));
  padding: calc(var(--safe-top) + var(--ui-top-gap)) var(--sp-3) 0;
  background: linear-gradient(180deg, rgba(12,16,23,.96) 0%, rgba(0,0,0,.86) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}

/* Переключатель языка */
.lang {
  display: flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--text-dim);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  flex: 0 0 auto;
}
.lang:active { background: var(--surface-3); }
.lang svg { width: 15px; height: 15px; }

/* Главная синяя кнопка подключения кошелька */
.wallet-btn {
  /* Не растягиваем: панель прижата вправо и должна быть компактной */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 42vw;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  color: var(--text-on-blue);
  font-size: var(--fs-sm); font-weight: 700;
  box-shadow: var(--glow-blue-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.wallet-btn:active { transform: scale(.96); box-shadow: none; }
.wallet-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.wallet-btn--connected {
  background: var(--surface-2);
  border: 1px solid var(--stroke-blue);
  color: var(--blue-300);
  box-shadow: none;
}

/* Баланс */
.balance {
  display: flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 11px 0 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  font-size: var(--fs-sm); font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  transition: background var(--t-fast) var(--ease);
}
.balance:active { background: var(--surface-3); }
.balance__star {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--grad-gold);
  display: grid; place-items: center;
  box-shadow: var(--glow-gold);
}
.balance__star svg { width: 12px; height: 12px; color: #241300; }
.balance.is-bump { animation: bump var(--t-slow) var(--ease-out); }
@keyframes bump {
  0% { transform: none; } 35% { transform: scale(1.14); } 100% { transform: none; }
}

/* Аватар */
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-brand);
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 800;
  border: 1px solid var(--stroke-2);
  flex: 0 0 auto; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 88px; height: 88px; font-size: 34px; border-width: 2px; }
.avatar--sm { width: 26px; height: 26px; font-size: var(--fs-xs); }

/* ── 4. Нижняя навигация (5 вкладок, «Главная» — третья) ───── */

.tabbar {
  position: relative;
  z-index: var(--z-tabbar);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: linear-gradient(180deg, rgba(12,16,23,.94) 0%, rgba(0,0,0,.98) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--stroke);
}

.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: var(--text-mute);
  font-size: 10px; font-weight: 600; letter-spacing: .01em;
  transition: color var(--t-base) var(--ease);
}
.tab svg { width: 23px; height: 23px; transition: transform var(--t-base) var(--ease-out); }
.tab:active svg { transform: scale(.88); }

/* Активная вкладка подсвечивается синим */
.tab.is-active { color: var(--blue-400); }
.tab.is-active svg { filter: drop-shadow(0 0 8px rgba(47,123,255,.7)); }
.tab.is-active::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  width: 30px; height: 2.5px;
  transform: translateX(-50%);
  border-radius: 0 0 3px 3px;
  background: var(--grad-brand);
  box-shadow: var(--glow-blue-sm);
  animation: tab-mark var(--t-base) var(--ease-out) both;
}
@keyframes tab-mark { from { width: 0; opacity: 0; } to { width: 30px; opacity: 1; } }

/* ── 5. Компоненты ─────────────────────────────────────────── */

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 50px; padding: 0 var(--sp-5);
  /* Таблетка, а не прямоугольник со скруглением: так кнопки выглядят
     на образце, и в окне они читаются как отдельные действия, а не как
     полосы, приклеенные к краям. */
  border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: 700;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  width: 100%;
}
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }

.btn--primary { background: var(--grad-brand); color: var(--text-on-blue); box-shadow: var(--glow-blue); }
.btn--primary:active:not(:disabled) { box-shadow: var(--glow-blue-sm); }
.btn--ghost   { background: var(--surface-2); color: var(--text); border: 1px solid var(--stroke); }
.btn--outline { background: transparent; color: var(--blue-400); border: 1px solid var(--stroke-blue); }
.btn--gold    { background: var(--grad-gold); color: #241300; box-shadow: var(--glow-gold); }
.btn--danger  { background: rgba(255,77,94,.14); color: var(--danger); border: 1px solid rgba(255,77,94,.3); }
.btn--sm      { height: 38px; padding: 0 var(--sp-4); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--auto    { width: auto; }

/* Карточки */
.card {
  background: var(--surface-1);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.card--glow { background: var(--surface-1) var(--grad-surface) no-repeat; border-color: var(--stroke-blue); }
.card--flat { background: var(--surface-2); border-radius: var(--r-md); }

/* Заголовки секций */
.sec { margin: var(--sp-6) 0 var(--sp-3); display: flex; align-items: center; justify-content: space-between; }
.sec:first-child { margin-top: 0; }
.sec__title { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; }
.sec__link { font-size: var(--fs-sm); font-weight: 600; color: var(--blue-400); }

/* Сегментированный переключатель (Общий / PvP, Звёзды / Подарки) */
.seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
}
.seg__item {
  flex: 1; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-dim);
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.seg__item.is-active {
  background: var(--grad-brand);
  color: var(--text-on-blue);
  box-shadow: var(--glow-blue-sm);
}

/* Чипы */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--stroke);
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--text-dim);
  transition: all var(--t-fast) var(--ease);
}
.chip.is-active { background: var(--surface-4); border-color: var(--stroke-blue); color: var(--blue-300); }

/* Звезда — валюта */
.star { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-variant-numeric: tabular-nums; }
.star svg { width: 13px; height: 13px; color: var(--gold); }
.star--lg svg { width: 18px; height: 18px; }

/* Индикатор редкости */
.rar { --c: var(--rar-common); }
.rar[data-rar="uncommon"] { --c: var(--rar-uncommon); }
.rar[data-rar="rare"]     { --c: var(--rar-rare); }
.rar[data-rar="epic"]     { --c: var(--rar-epic); }
.rar[data-rar="legend"]   { --c: var(--rar-legend); }
.rar[data-rar="mythic"]   { --c: var(--rar-mythic); }

/* Пустое состояние */
.empty { padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--text-mute); }
.empty svg { width: 46px; height: 46px; opacity: .3; margin-bottom: var(--sp-3); }
.empty p { font-size: var(--fs-sm); }

/* Скелетон */
.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 220% 100%;
  animation: skel 1.2s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes skel { from { background-position: 220% 0; } to { background-position: -220% 0; } }

/* ── 6. Загрузчик ──────────────────────────────────────────── */

.boot {
  position: fixed; inset: 0; z-index: var(--z-boot);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4);
  background: var(--bg);
}
.boot[hidden] { display: none; }
/* Логотип — готовая иконка со своим фоном и свечением, поэтому у
   контейнера ни подложки, ни тени: они легли бы вторым слоем. */
.boot__logo {
  width: 74px; height: 74px; border-radius: 22px;
  display: grid; place-items: center;
  animation: boot-pulse 1.8s var(--ease) infinite;
}
.boot__mark {
  width: 100%; height: 100%; display: block;
  border-radius: inherit;
  filter: drop-shadow(0 6px 20px rgba(47, 123, 255, .45));
}
@keyframes boot-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}
.boot__name { font-size: 15px; font-weight: 800; letter-spacing: .22em; color: var(--text-dim); }
.boot__name span { color: var(--blue-400); }
.boot__bar { width: 130px; height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--grad-brand); animation: boot-bar 1.1s var(--ease) infinite; }
@keyframes boot-bar { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }

/* ── 7. Блокировка сессии ──────────────────────────────────── */

.lock {
  position: fixed; inset: 0; z-index: var(--z-lock);
  display: grid; place-items: center;
  padding: var(--sp-5);
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lock[hidden] { display: none; }
.lock__card {
  width: 100%; max-width: 330px;
  background: var(--surface-1);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  box-shadow: var(--sh-3);
}
.lock__icon {
  width: 62px; height: 62px; margin: 0 auto var(--sp-4);
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(47,123,255,.12);
  border: 1px solid var(--stroke-blue);
  color: var(--blue-400);
}
.lock__card h2 { font-size: var(--fs-h2); font-weight: 800; margin-bottom: var(--sp-2); }
.lock__card p  { font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: var(--sp-5); }

/* ── 8. Модалки / шторки ───────────────────────────────────── */

.layer { position: fixed; inset: 0; z-index: var(--z-layer); pointer-events: none; }
.layer:empty { display: none; }

.sheet-bg {
  position: absolute; inset: 0;
  /* В тон затемнению окон: шторки оставались заметно светлее, и на
     одном экране два разных полумрака выглядели как недосмотр. */
  background: rgba(2, 4, 8, .95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
  animation: fade-in var(--t-base) var(--ease) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/*
 * Шторка теперь окно по центру.
 *
 * Диалоги договорились показывать окошками, но часть экранов —
 * пополнение, вывод, правила — открывалась старой шторкой снизу. Вместо
 * того чтобы переписывать каждый вызов, переодета сама шторка: разметка
 * и вызовы прежние, вид общий со всеми окнами.
 *
 * Полоска-хват сверху оставлена намеренно: она подсказывает, что это
 * временный слой поверх экрана, а не новый экран.
 */
.sheet {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--sp-4) * 2);
  max-width: 360px;
  max-height: calc(100% - var(--safe-top) - var(--ui-top-gap)
                   - var(--safe-bottom) - var(--sp-6));
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r-xl);
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  pointer-events: auto;
  box-shadow: var(--sh-3);
  animation: sheet-in var(--t-base) var(--ease-out) both;
}
@keyframes sheet-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.sheet.is-out { animation: sheet-out var(--t-fast) var(--ease) both; }
@keyframes sheet-out {
  to { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.97); }
}
/*
 * Крестик окна. Стоит абсолютом от самой шторки, и это безопасно:
 * прокручивается только .sheet__body, шапка остаётся на месте.
 */
.sheet__close {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--stroke);
  color: var(--text-dim);
  line-height: 1;
  z-index: 2;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.sheet__close:active { background: var(--surface-4); transform: scale(.92); }
.sheet__close svg { width: 15px; height: 15px; }
.sheet__title {
  font-size: var(--fs-h2); font-weight: 800;
  margin-bottom: var(--sp-4); flex: 0 0 auto;
  /* Место справа под крестик, а с кнопкой действия — под обе. */
  padding-right: 38px;
}
.sheet:has(.sheet__action) .sheet__title { padding-right: 74px; }
/* Без заголовка содержимое начиналось прямо под крестиком. */
.sheet:not(:has(.sheet__title)) .sheet__body { padding-top: 34px; }

/*
 * Кнопка действия в углу шторки — «поделиться» у розыгрыша.
 *
 * Абсолютом от самой шторки, а не в потоке заголовка: заголовок
 * перерисовывается вместе с содержимым, и кнопка прыгала бы.
 */
.sheet__action {
  position: absolute;
  top: var(--sp-3); right: calc(var(--sp-3) + 36px);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--stroke);
  color: var(--text);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.sheet__action:active { background: var(--surface-4); transform: scale(.94); }
.sheet__action svg { width: 17px; height: 17px; }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ── 9. Тосты ──────────────────────────────────────────────── */

.toasts {
  position: fixed; z-index: var(--z-toast);
  left: 0; right: 0; top: calc(var(--safe-top) + var(--topbar-h) + 8px);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4);
  pointer-events: none;
}
.toast {
  max-width: 100%;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 11px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm); font-weight: 600;
  animation: toast-in var(--t-base) var(--ease-out) both;
}
.toast.is-out { animation: toast-out var(--t-base) var(--ease) both; }
.toast svg { width: 16px; height: 16px; flex: 0 0 auto; }
.toast--ok    { border-color: rgba(36,201,138,.4); color: var(--ok); }
.toast--err   { border-color: rgba(255,77,94,.4); color: var(--danger); }
.toast--info  { border-color: var(--stroke-blue); color: var(--blue-300); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(-14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* ── 10. Слой частиц ───────────────────────────────────────── */

.fx { position: fixed; inset: 0; z-index: var(--z-toast); pointer-events: none; }

/* ── Розыгрыши: действия и карточки истории ───────────────── */

.gw-actions {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-2);
}
.gw-actions .btn { gap: var(--sp-2); }

.gw-mine {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.gw-mine__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.gw-mine .btn { width: 100%; margin-top: var(--sp-3); }

/* ── Плинко ───────────────────────────────────────────────── */

.pk {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.pk__scene { width: 100%; display: block; }

.pk__peg { fill: var(--text-mute); opacity: .5; }

.pk__ball {
  fill: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8));
}

.pk__slot rect { fill: var(--surface-2); stroke: var(--line); stroke-width: .6; }
.pk__slot text {
  fill: var(--text);
  text-anchor: middle;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pk__slot.is-cold rect { fill: #14324f; }
.pk__slot.is-warm rect { fill: #1d4f6b; }
.pk__slot.is-hot  rect { fill: #8a3b12; }
.pk__slot.is-hit  rect {
  stroke: var(--accent, #2F7BFF);
  stroke-width: 2;
  animation: pk-pop .45s var(--ease);
}

@keyframes pk-pop {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

.pk__hist {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-top: var(--sp-2);
  min-height: 24px;
  scrollbar-width: none;
}
.pk__hist::-webkit-scrollbar { display: none; }

.pk__chip {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--line);
}
.pk__chip.is-win { color: #24C98A; border-color: rgba(36, 201, 138, .5); }

/* ── Кейсы: бесплатный, лента открытия ────────────────────── */

.free-case {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.free-case__art { font-size: 40px; line-height: 1; flex: none; }
.free-case__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.free-case__body b { font-size: var(--fs-body); }
.free-case__body span { font-size: var(--fs-sm); color: var(--text-dim); }
.free-case__tickets { color: var(--accent, #2F7BFF) !important; font-weight: 600; }
.free-case .btn { flex: none; width: auto; padding: 10px 18px; }

.reel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) 0;
}
.reel__mark {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: var(--grad-brand, #2F7BFF);
  box-shadow: 0 0 12px rgba(47, 123, 255, .8);
  z-index: 2;
}
.reel__strip { display: flex; gap: 8px; will-change: transform; }

/* Лента: те же карточки призов, что и в сетке содержимого */
.reel-card {
  flex: 0 0 76px;
  height: 76px;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.reel-card__art { width: 100%; height: 100%; display: block; }
.reel-card.is-win { /* обводка убрана: приз и так останавливается под меткой */ }

/* Нулевая лунка в центре: явно «мимо», а не просто холодный цвет */
.pk__slot.is-zero rect { fill: #2a2f38; stroke: #3a414d; }
.pk__slot.is-zero text { fill: var(--text-mute); }

/* Отсчёт до розыгрыша: моноширинные цифры не «прыгают» каждую секунду */
.gw__time {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.gw__time.is-soon { color: #FF4D5E; font-weight: 700; }

/* Прокрут колеса розыгрыша: длиннее, чем в PvP — 15 секунд */
.gw-wheel.is-spinning .pvp-wheel__svg {
  transition: transform 15s var(--ease-spin);
}


/*
 * Игровые экраны прячут шапку приложения.
 *
 * Язык, кошелёк и профиль во время игры не нужны, а полоса сверху
 * съедает высоту — на телефоне это заметно. Вместо неё остаётся
 * фон самой игры.
 */
/*
 * Панель не убирается из потока, а сжимается в ноль.
 *
 * display:none выкидывал её из сетки #app, и все строки съезжали:
 * экран получал нулевую высоту первой строки, а нижняя навигация
 * оказывалась наверху. Нулевая высота сохраняет структуру сетки.
 */
body.hide-topbar .topbar {
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  visibility: hidden;
}
body.hide-topbar #screen { padding-top: 0; }

/* ── Модальные окна ────────────────────────────────────────── */

/*
 * Диалоги показываются окном по центру, а не шторкой снизу: шторка
 * перекрывает содержимое экрана и требует лишнего движения, чтобы
 * увидеть то, что под ней.
 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  /*
   * Обязательно: слой #layer сквозной (pointer-events: none), иначе он
   * перехватывал бы нажатия по экрану, когда пусто. Окно этого правила
   * не отменяло и оставалось таким же сквозным — нажатия проваливались
   * сквозь него на то, что лежит под окном. В кейсах это выглядело так:
   * жмёшь «Открыть», попадаешь в карточку кейса позади, окно
   * открывается заново, и закрыть его тоже нельзя.
   */
  pointer-events: auto;
  display: grid;
  place-items: center;
  /*
   * Отступ сверху с безопасной зоной. Высокое окно — история игр,
   * например, — упиралось верхом в самый край экрана и уезжало под
   * шторку Telegram вместе с крестиком: закрыть его с телефона было
   * нечем. Снизу отступ по той же причине, только там домашняя полоса.
   */
  padding: calc(var(--safe-top) + var(--ui-top-gap) + var(--sp-4))
           var(--sp-4)
           calc(var(--safe-bottom) + var(--sp-4));
  /* Затемнение почти глухое: под окном лежит игровой экран, и при
     мягкой заливке он спорил с содержимым окна за внимание. */
  background: rgba(2, 4, 8, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade-in var(--t-base) var(--ease) both;
  overflow-y: auto;
}

.modal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  /* Не 88vh: высота считается от окна и не знает про отступы выше,
     поэтому окно всё равно вылезало за безопасную зону. */
  max-height: 100%;
  overflow-y: auto;
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  animation: modal-in .22s var(--ease-out) both;
}
.modal__card--tight { text-align: center; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.modal__title {
  font-size: var(--fs-lg);
  font-weight: 800;
  text-align: center;
  margin-bottom: var(--sp-3);
  padding-right: 28px;
}

/*
 * Крестик — липкий элемент в потоке, а не плавающий.
 *
 * Абсолютом он уезжал вверх вместе с содержимым: в длинном списке
 * закрыть окно было нечем. Плавающим — держался на месте, но отжимал
 * центрированное содержимое влево: карточка кейса, сумма в кошельке и
 * приз в итоговом окне вставали не по середине, потому что строка
 * сужалась на его ширину.
 *
 * Теперь окно — колонка, а крестик её первый элемент, прижатый вправо
 * своей строкой. Он ничего не сужает, а sticky удерживает его при
 * прокрутке.
 */
.modal__close {
  position: sticky;
  top: 0;
  align-self: flex-end;
  flex: 0 0 auto;
  z-index: 2;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--stroke);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  margin: -4px -4px 6px 0;
}
.modal__close svg { width: 15px; height: 15px; }
.modal__close:active { background: var(--surface-3); }

/* ── Кейсы: карточка и содержимое ──────────────────────────── */

.case-hero {
  text-align: center;
  margin: var(--sp-2) 0 var(--sp-3);
}
.case-hero img {
  width: min(56%, 180px);
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .6));
}

.case__free { font-size: var(--fs-xs); color: #24C98A; font-weight: 700; }
.case__soon { font-size: var(--fs-xs); color: var(--text-mute); }

/* Содержимое кейса — сетка слотов, а не список строк */
.case-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/*
 * Слот — карточка приза целиком, своей подложки под ней нет: у арта
 * есть и фон, и рамка. Снизу остаётся только шанс.
 */
.case-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.case-slot__art {
  width: 100%; aspect-ratio: 1; display: block;
  border-radius: var(--r-sm);
}
.case-slot__val { font-size: 11px; font-weight: 700; }
.case-slot__chance { font-size: 10px; color: var(--text-mute); }

/* Приз в итоговом окне */
/* Ширину задаём явно: .winner центрирует детей по содержимому, и
   процент внутри такого блока считать не от чего. */
.winner__art {
  width: 100%; text-align: center; line-height: 1;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .7));
}
.winner__star { width: min(46%, 150px); aspect-ratio: 1; border-radius: var(--r-md); }
.winner__emoji { font-size: 72px; }

/* Ввод промокода прямо в окне кейса */
.case-promo { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.case-promo .field { text-transform: uppercase; }

/* Текст поста розыгрыша: моноширинный, с выделением */
.gw-post {
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  user-select: all;
  max-height: 34vh;
  overflow-y: auto;
}

/* ── Окно баланса ──────────────────────────────────────────────
 *
 * Раньше содержимое лежало прямо на подложке окна: сумма, две строки
 * и две кнопки — без единой границы, поэтому блок читался как обрывок
 * экрана, а не как самостоятельное окно. Теперь каждая часть в своей
 * рамке, и видно, где заканчивается одна и начинается другая.
 */
.wallet { text-align: left; padding-top: var(--sp-5); }

.wallet__head {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-4) var(--sp-3);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.wallet__lbl {
  font-size: var(--fs-xs); color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.wallet__sum { font-size: 30px; font-weight: 900; }

/* Отыгровка */
.wallet__wager {
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--stroke-blue, var(--stroke));
}
.wallet__wager-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: 8px;
}
.wallet__wager-top b { font-size: var(--fs-body); font-weight: 800; }
.wallet__wager-top span {
  font-size: var(--fs-xs); color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.wallet__bar {
  height: 8px; border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.wallet__bar i {
  display: block; height: 100%;
  border-radius: inherit;
  background: var(--grad-brand);
  box-shadow: var(--glow-blue-sm);
  transition: width var(--t-slow) var(--ease-out);
}
.wallet__note {
  margin-top: 8px;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--text-dim);
}
.wallet__note b { color: var(--text); font-weight: 800; }

/* Холды по депозитам */
.wallet__holds {
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.wallet__holds-lbl {
  font-size: var(--fs-xs); color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  margin-bottom: 4px;
}
.wallet__holds .row { border: 0; padding: 4px 0; }

.wallet__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.wallet__actions .btn { width: 100%; }

.modal__card--tight .btn { width: 100%; margin-top: var(--sp-2); }
.wallet.modal__card--tight .btn { margin-top: 0; }


/* ── Плинко: компактные настройки ──────────────────────────── */

/*
 * Три отдельные секции с заголовками занимали пол-экрана, и доска —
 * ради которой всё и затевалось — оставалась крошечной. Настройки
 * ужаты в строки «подпись + кнопки», доске отдана высота.
 */
.pk-set {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 6px;
}

.pk-set__lbl {
  flex: 0 0 52px;
  font-size: var(--fs-xs);
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pk-set__row {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.pk-set__row--4 { grid-template-columns: repeat(4, 1fr); }

.pk-set__row button {
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-dim);
  transition: all var(--t-fast) var(--ease);
}
.pk-set__row button.is-on {
  background: var(--surface-4);
  border-color: var(--blue-500);
  color: #fff;
}

/*
 * Доска — главное на экране, поэтому забирает всё свободное место.
 * Ограничение по высоте оставлено, чтобы на планшете она не разъезжалась
 * на весь экран, но ширину занимает целиком.
 */
.pk { padding: var(--sp-2); margin-bottom: var(--sp-2); }
/* Высота ограничена так, чтобы кнопка броска осталась на экране */
.pk__scene { width: 100%; max-height: 42vh; }

/* Ставка и быстрые кнопки — одной компактной строкой */
.pk .bet-panel,
.mc .bet-panel { gap: var(--sp-2); }

.pk-bet {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 6px;
  align-items: center;
}
.pk-bet .bet-input { padding: 6px var(--sp-2); }
.pk-bet .bet-input input { font-size: 18px; }
.pk-bet button {
  height: 34px; padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--stroke);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-dim);
}

/* Крупная картинка подарка с его собственным фоном */
.gift-hero {
  width: 132px; height: 132px;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  font-size: 72px; line-height: 1;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .6));
}
.gift-hero img { width: 84%; height: 84%; object-fit: contain; }

/* Фон подарка на карточке в сетке */
.gift__art { border-radius: var(--r-sm); }

/* ── Компьютер: приложение в рамке телефона ─────────────────────
 *
 * Мини-апп рассчитан на телефон: колонка в 400 пикселей, кнопки под
 * большой палец, игровая сцена в вертикальных пропорциях. Растянутый
 * на широкий монитор, он выглядел полосой контента посреди пустоты.
 *
 * Порог в 720px выбран так, чтобы не задеть ни телефоны (там максимум
 * около 430), ни окно Telegram Desktop (оно и так узкое и уже само по
 * себе рамка) — вмешиваемся только когда места явно больше, чем нужно.
 *
 * Рамку получают все три корневых слоя сразу. Они лежат рядом, а не
 * вложены друг в друга, и если оставить окна и уведомления на весь
 * экран, диалог всплывал бы посреди монитора отдельно от приложения.
 * Заодно transform на слое делает его точкой отсчёта для position:
 * fixed внутри — окна сами собой остаются внутри рамки.
 */
@media (min-width: 720px) and (min-height: 560px) {
  :root {
    /*
     * Рамка тянется за окном браузера, а не стоит намертво.
     *
     * Ширина растёт вместе с окном до разумного предела, но не уходит
     * ниже пропорций телефона: у «Майнкрафта» шахта считается по
     * высоте, и в приземистом окне панель ставки уезжала за нижний
     * край. Так пользователь может растянуть окно и получить экран
     * побольше, а вёрстка при этом остаётся вертикальной.
     */
    --frame-h: min(96vh, 1000px);
    --frame-w: clamp(320px, min(46vw, calc(var(--frame-h) * 0.52)), 560px);
    --frame-r: 26px;
  }

  body {
    background:
      radial-gradient(120% 90% at 50% 0%, #16203a 0%, transparent 60%),
      #05070c;
  }

  .app, .layer, .toasts {
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--frame-w);
    height: var(--frame-h);
    border-radius: var(--frame-r);
  }

  .app {
    overflow: hidden;
    border: 1px solid var(--stroke);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .8),
                0 0 0 1px rgba(255, 255, 255, .04);
  }

  .layer { overflow: hidden; }

  /* Уведомления всплывают внутри рамки, а не поверх монитора */
  .toasts {
    justify-content: flex-start;
    padding-top: calc(var(--topbar-h) + var(--ui-top-gap) + 8px);
    overflow: hidden;
  }
}

/* ── Выбор способа вывода ──────────────────────────────────── */

.wd-methods { display: flex; flex-direction: column; gap: var(--sp-2); }
.wd-method {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px var(--sp-3);
  align-items: center;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  transition: border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.wd-method:active { transform: scale(.98); }
.wd-method:hover { border-color: var(--stroke-blue); }
.wd-method__title { font-size: var(--fs-body); font-weight: 800; }
.wd-method__hint {
  grid-column: 1; font-size: var(--fs-xs); color: var(--text-mute); line-height: 1.35;
}
.wd-method__go { grid-row: 1 / -1; grid-column: 2; color: var(--blue-400); }
.wd-method__go svg { width: 20px; height: 20px; }

/* ── Экран заморозки ───────────────────────────────────────── */

.frozen {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3);
  max-width: 320px; padding: var(--sp-5);
  text-align: center;
}
.frozen__icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 77, 94, .12);
  border: 1px solid rgba(255, 77, 94, .35);
  color: var(--danger);
}
.frozen__icon svg { width: 30px; height: 30px; }
.frozen__title { font-size: var(--fs-h2); font-weight: 900; }
.frozen__text { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; }
.frozen .btn { width: 100%; }
.frozen__at { font-size: var(--fs-xs); color: var(--text-mute); }

/* ── Калькулятор вывода ────────────────────────────────────── */

.wd-calc:empty { display: none; }
.wd-calc {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--stroke);
}
.wd-calc__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-dim);
}
.wd-calc__row b { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.wd-calc__row--fee b { color: var(--danger); }
.wd-calc__row--out {
  padding-top: 6px; margin-top: 2px;
  border-top: 1px solid var(--stroke);
}
.wd-calc__row--out b { font-size: var(--fs-body); color: var(--ok); }
.wd-calc__ton {
  margin-top: 4px;
  font-size: var(--fs-xs); color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.wd-calc__ton span { opacity: .75; }