* {
  box-sizing: border-box;
}

:root {
  /* ОБНОВЛЕННЫЕ ПЕРЕМЕННЫЕ И ШРИФТ */
  --font-main: 'Exo 2', sans-serif;

  /* ФОН: Стал темнее и получил "виньетку" для глубины */
  --bg: radial-gradient(ellipse at center, #1a1f2b 0%, #0c0d12 70%);

  /* Зимний фон */
  --bg-overlay: linear-gradient(180deg, rgba(12, 20, 35, 0.85) 0%, rgba(9, 12, 18, 0.95) 100%);

  /* Эффект инея (Frost) */
  --card-frost: rgba(30, 35, 48, 0.65);
  --border-frost: rgba(200, 230, 255, 0.15);
  --glow-frost: 0 0 15px rgba(76, 201, 240, 0.1);

  --logo-w: 61px;
  --logo-h: 55px;
  --logo-radius: 12px;

  /* КАРТОЧКИ: Стали полупрозрачным "стеклом" */
  --card: rgba(30, 35, 48, 0.7);
  /* Было #151821 */

  --text: #e7e9ee;
  --muted: #9aa3b2;

  /* АКЦЕНТ: Остается ярким */
  --accent: #4cc9f0;
  --accent-dark: #3db0d4;

  /* КНОПКИ: Тоже стали "стеклянными" */
  --btn: rgba(42, 47, 58, 0.7);
  /* Было #2a2f3a */

  --radius: 16px;
}

html,
body {
  margin: 0;
  padding: 0;
  /* ЗАМЕНИ URL на свой собственный. 
    Это должна быть большая, красивая, но ТЕМНАЯ и РАЗМЫТАЯ картинка
    (например, арт Dota 2, пропущенный через Gaussian Blur 20px)
  */
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('/assets/dota2_blur_bg.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  /* <-- ВАЖНО: фон не скроллится */

  color: var(--text);
  font: 16px/1.5 var(--font-main), system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  /* --- НАЧАЛО ИСПРАВЛЕНИЯ --- */
  background: rgba(12, 13, 18, 0.7);
  /* Полупрозрачный фон */
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* Ярче рамка */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* --- КОНЕЦ ИСПРАВЛЕНИЯ --- */
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  width: var(--logo-w);
  height: var(--logo-h);
  border-radius: var(--logo-radius);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #0b0c10;
  background: linear-gradient(135deg, #ff6a00, #ff3d00);
  overflow: hidden;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 2px;
}

.logo .fallback {
  font-weight: 800;
}

.name {
  display: none;
}

.nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--font-main);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #2a3040 0%, #1f2430 100%);
  color: #fff;
  border: none;
  /* Убираем старую рамку */
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.1s ease;
  top: 0;

  /* 3D Эффект */
  box-shadow:
    0 4px 0 #12151d,
    /* Темное "дно" кнопки */
    0 5px 10px rgba(0, 0, 0, 0.3);
  /* Тень */

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn:hover {
  background: linear-gradient(180deg, #323848 0%, #252a38 100%);
}

.btn:active {
  top: 3px;
  /* Сдвиг вниз */
  box-shadow:
    0 1px 0 #12151d,
    0 2px 5px rgba(0, 0, 0, 0.2);
  transform: none !important;
  /* Отключаем старый scale */
}

.btn[disabled] {
  opacity: 0.5;
  filter: grayscale(50%);
  cursor: not-allowed;
  pointer-events: none;
}

.btn.accent {
  position: relative;
  overflow: hidden;
  /* Чтобы блик не вылетал */
  background: linear-gradient(180deg, #4cc9f0 0%, #3da5c4 100%);
  color: #081a24;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow:
    0 4px 0 #2b7a94,
    0 0 15px rgba(76, 201, 240, 0.4);
  /* Свечение */
  border: none;
}

.btn.accent::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  animation: btnShine 4s infinite;
  pointer-events: none;
}

.btn.accent:hover {
  background: linear-gradient(180deg, #5dd5ff 0%, #4db5d4 100%);
  box-shadow:
    0 4px 0 #2b7a94,
    0 0 20px rgba(76, 201, 240, 0.5);
  border-color: transparent;
}

.btn.accent:active {
  top: 3px;
  box-shadow:
    0 1px 0 #2b7a94,
    0 0 5px rgba(76, 201, 240, 0.2);
}

.page {
  display: none;
  max-width: 980px;
  margin: 14px auto;
  padding: 0 14px;
}

.page.visible {
  display: block;
}

/* --- home: карточка без паддингов и без обрезания индикатора --- */
#page-home .card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  /* важно — иначе справа «съедает» число онлайн */
}

/* --- индикатор онлайн: зелёная точка + «таблетка» --- */
#online-indicator {
  margin-top: 8px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #e7e9ee;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dot-online {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .25), 0 0 8px rgba(34, 197, 94, .6);
}

/* --- универсальное «жидкое стекло» --- */
.glass {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* Главная: не показываем «блоки с закруглениями» за лентой и секциями кейсов */
#page-home .card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

#page-home .card h1 {
  margin: 14px 6px;
}

/* чтобы заголовки не прилипали */
.card {
  background: var(--card);
  /* border: 1px solid rgba(255, 255, 255, .06); <-- УДАЛЕНО */
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* <-- ЗАМЕНА (чуть ярче) */
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
  backdrop-filter: blur(12px);
  /* <-- ДОБАВЛЕНО */
  -webkit-backdrop-filter: blur(12px);
  /* <-- ДОБАВЛЕНО */
}

.card h1,
.card h2 {
  margin: 0 0 10px;
}

.card.mini {
  padding: 12px;
}

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

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

.label {
  color: var(--muted);
  font-size: 12px;
}

.value {
  font-size: 18px;
  font-weight: 600;
}

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

.field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}

.field label {
  grid-column: 1/-1;
  font-size: 14px;
  color: var(--muted);
}

.field input {
  padding: 10px 12px;
  background: #1a1f2b;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  color: var(--text);
}

/* Wallet-like inputs (как у TON) */
.wallet-input {
  height: 44px;
  background: #101523;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  color: var(--text);
  padding: 10px 12px;
  font-weight: 600;
}

.wallet-input::placeholder {
  color: #8a94a6;
}

.wallet-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(76, 201, 240, .22);
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.case-card {
  background: #1a1f2b;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 140px auto;
}

.case-card .cover {
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #9aa3b2;
}

.case-card .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-card .body {
  padding: 10px;
  display: grid;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
}

.case-card .body.v {
  grid-template-columns: 1fr;
  gap: 6px;
  text-align: center;
}

.case-card .case-price {
  display: flex;
  justify-content: center;
}

.badge {
  background: #222733;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  color: #9aa3b2;
}

.badge.price {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge.price img.coin {
  width: 14px;
  height: 14px;
  display: inline-block;
}

/* на случай старых карт */
.coin {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.badge.price svg.coin {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.case-title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.item {
  background: #1a1f2b;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 6px;
}

.item .thumb {
  height: 96px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item .name {
  font-weight: 600;
  font-size: 14px;
}

.item .rarity {
  font-size: 12px;
  opacity: .85;
}

/* Цвета редкостей (полный набор) */
.rarity-common {
  outline: 2px solid #9ca3af;
}

/* серый */
.rarity-uncommon {
  outline: 2px solid #9ca3af;
}

/* серый */
.rarity-rare {
  outline: 2px solid #3b82f6;
}

/* синий */
.rarity-mythical {
  outline: 2px solid #a855f7;
}

/* фиолетовый */
.rarity-legendary {
  outline: 2px solid #ef4444;
}

/* красный */
.rarity-ancient {
  outline: 2px solid #6366f1;
}

/* индиго */
.rarity-immortal {
  outline: 2px solid #f59e0b;
}

/* оранжевый */
.rarity-arcana {
  outline: 2px solid #22c55e;
}

/* ярко-зелёный */

.case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.roller-wrap {
  position: relative;
  height: 120px;
  margin: 14px 0;
  border-radius: 12px;
  background: #121622;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
}

.roller {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  gap: 8px;
  padding: 8px;
  will-change: transform;
}

.roller-item {
  width: 110px;
  height: 100%;
  border-radius: 10px;
  background: #1a1f2b;
  border: 1px solid rgba(255, 255, 255, .06);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.roller-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.roller-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  border-left: 2px dashed var(--accent);
  transform: translateX(-1px);
  pointer-events: none;
}

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hint {
  color: var(--muted);
  font-size: 14px;
}

.inv-list {
  display: grid;
  gap: 8px;
}

/* Инвентарь — плитки */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.inv-card {
  background: #1a1f2b;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 120px auto;
}

.inv-card .cover {
  background: #202636;
  display: grid;
  place-items: center;
}

.inv-card .cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inv-card .cover.ph {
  background: #202636;
}

.inv-card .cover {
  position: relative;
}

.inv-card .count-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  backdrop-filter: blur(2px);
}

.inv-card .inv-body {
  padding: 10px;
  display: grid;
  gap: 6px;
}

.inv-card .inv-name {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-card .inv-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

.case-type {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.case-type.deposit {
  background: #4CAF50;
  color: white;
}

.case-type.free {
  background: #FF9800;
  color: white;
}

.inv-card .inv-price {
  display: flex;
  justify-content: flex-start;
}

.inv-card .inv-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.btn.sell {
  background: #22c55e;
  color: #0b0c10;
  border-color: transparent;
}

.btn.sell-back {
  background: #3b82f6;
  color: white;
  border-color: transparent;
  font-size: 11px;
  padding: 4px 8px;
}

.inv-card .inv-actions .btn.sell:disabled {
  opacity: .6;
  filter: grayscale(40%);
}

.sell-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sell-buttons .btn {
  font-size: 12px;
  padding: 4px 8px;
  min-height: auto;
}

.inv-quantity {
  font-size: 12px;
  color: #9aa3b2;
  margin-top: 2px;
}

.collection-panel {
  margin-top: 16px;
}

.collection-progress {
  background: #0f1117;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.collection-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #d5d9e0;
}

.collection-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.collection-progress-bar-fill {
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width .35s ease;
}

.collection-progress-note {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.collection-card {
  background: #1a1f2b;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}

.collection-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .2);
}

.collection-card-image {
  background: #202636;
  padding: 12px;
  min-height: 120px;
  display: grid;
  place-items: center;
}

.collection-card-placeholder {
  width: 60%;
  height: 60%;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.collection-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.collection-card-body {
  padding: 10px;
  display: grid;
  gap: 4px;
}

.collection-card-title {
  font-weight: 700;
  font-size: 14px;
}

.collection-card-meta {
  font-size: 12px;
  color: var(--muted);
}

.collection-card-qty {
  font-size: 12px;
  color: #9aa3b2;
}

.empty-collection {
  margin-top: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, .3);
  text-align: center;
  color: var(--muted);
}

.collection-card-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 16px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.collection-card-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.collection-card-modal {
  width: min(720px, 100%);
  background: #0f1117;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  margin-bottom: 12px;
  transform: translateY(120%);
  transition: transform .3s ease;
}

.collection-card-modal-overlay.visible .collection-card-modal {
  transform: translateY(0);
}

.collection-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 20px;
  color: #fff;
}

.collection-modal-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.collection-modal-image {
  background: #1a1f2b;
  border-radius: 14px;
  padding: 12px;
  min-height: 220px;
  display: grid;
  place-items: center;
}

.collection-modal-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.collection-modal-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collection-modal-name {
  font-size: 18px;
  font-weight: 700;
}

.collection-modal-meta {
  font-size: 13px;
  color: var(--muted);
}

.collection-modal-description {
  margin: 0;
  font-size: 14px;
  color: #c1c6d1;
}

.collection-modal-stats {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}

.collection-modal-stats #collection-modal-value {
  font-weight: 600;
  color: #fff;
}

.collection-card-modal button.btn {
  margin-top: 6px;
}

@media (max-width: 640px) {
  .collection-card-modal {
    padding: 18px;
  }
  .collection-card-modal-overlay {
    padding: 16px;
  }
}

/* Тикер активности (адаптивный размер под ширину контейнера) */
.ticker {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: #121622;
  /* --- НАЧАЛО ИСПРАВЛЕНИЯ --- */
  /* Маска, чтобы скрыть края */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  /* --- КОНЕЦ ИСПРАВЛЕНИЯ --- */
}

.track {
  display: flex;
  gap: 12px;
  padding: 8px;
  width: max-content;
  /* Убрана постоянная анимация - движение только при появлении новых элементов */
}

.t-elem {
  width: var(--ticker-size, 120px);
  height: var(--ticker-size, 120px);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .06);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  /* Предотвращаем сжатие элементов */
  transition: transform 0.3s ease-out;
  /* Плавный сдвиг при появлении новых элементов */
}

.t-elem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Онлайн-индикатор — зелёная точка и число справа */
#online-indicator {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 12px;
  margin-top: 6px;
}

.dot-online {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .25), 0 0 8px rgba(34, 197, 94, .6);
}

.foot {
  opacity: .6;
  text-align: center;
  padding: 18px;
  font-size: 14px;
}

/* ——— Дисклеймер на главной ——— */
.disclaimer-card {
  margin-top: 12px;
}

.disclaimer-title {
  margin: 0 0 8px;
  font-size: 18px;
}

.disclaimer-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 8px;
}

.disclaimer-list h3 {
  margin: 0 0 2px;
  font-size: 14px;
}

.disclaimer-list p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* ——— Низ профиля: ссылка на УА ——— */
.legal-note {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  opacity: .9;
}

.legal-note a {
  color: #7cc7ff;
  text-decoration: underline;
}

/* Профиль: шапка с аватаром (стекло + фото TG) */
.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 12px;
  padding: 12px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #20314a;
  color: #b9d8ff;
  display: grid;
  place-items: center;
  font-weight: 800;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* покажем из JS */
.profile-lines {
  display: grid;
  grid-auto-rows: min-content;
  row-gap: 6px;
}

.profile-lines .line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  flex-wrap: wrap;
}

.profile-lines .line .label {
  color: var(--muted);
  width: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  font-size: 20px;
  line-height: 1;
}

/* Специальные стили для строки с двумя свитчами */
.profile-lines .line:has(.toggle-square:nth-of-type(2)) {
  gap: 12px;
}

.profile-lines .line:has(.toggle-square:nth-of-type(2)) .label {
  width: auto;
  flex: 0 0 auto;
  min-width: 60px;
}


/* Empty state инвентаря */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px;
  background: #121622;
  border: 1px dashed rgba(255, 255, 255, .08);
  border-radius: 12px;
}

.empty-emoji {
  font-size: 36px;
}

.empty-title {
  font-weight: 700;
}

.empty-sub {
  color: var(--muted);
  font-size: 13px;
}

/* FREE бейдж — зеленый акцент */
.badge.free {
  color: #2ecc71;
  border-color: rgba(46, 204, 113, .35);
  font-weight: 700;
}

.badge.lock {
  color: #f87171;
  border-color: rgba(248, 113, 113, .35);
  font-weight: 700;
}

/* Немного компактнее тело карточки кейса */
.case-card .body {
  gap: 10px;
}

/* --- карточки кейсов: устойчивый размер и адаптив --- */
.case-card {
  grid-template-rows: auto auto;
  cursor: pointer;
}

.case-card .cover {
  aspect-ratio: 16 / 9;
}

/* прямоугольники выглядят аккуратнее */
.case-card .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-card .body {
  grid-template-columns: 1fr auto;
}

/* больше нет третьей колонки под кнопку */
.case-title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* на очень узких экранах — две карточки в ряд уже есть, но оставим, чтобы точно не ехало */
@media (max-width: 480px) {
  .cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Профиль: убираем «карту» страницы + стекло на внутренних блоках */
#page-profile .card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

#page-profile h1 {
  margin: 8px 6px 12px;
}

/* Балансы как крупные пилюли */
.balances {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.bal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font-weight: 800;
}

.bal-coins {
  font-size: 18px;
}

.bal-bonus {
  font-size: 16px;
  background: rgba(124, 77, 255, .18);
  border-color: rgba(124, 77, 255, .35);
}

.bal .icon {
  width: 22px;
  height: 22px;
  display: inline-block;
}

.balances .icon img.coin {
  width: 22px;
  height: 22px;
}

.balances .icon svg.coin {
  width: 22px;
  height: 22px;
}


#page-profile .field label {
  pointer-events: none;
}


.field.glass {
  padding: 12px 14px;
}

.field.glass label {
  color: #dfe5ee;
  font-weight: 700;
  margin-bottom: 4px;
}

.field .switch {
  justify-self: end;
}

/* кнопка-аватар в шапке */
.btn-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  /* Принудительно круглая форма */
  padding: 0 !important;
  /* Убираем padding */
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  /* Отключаем 3D эффект для аватара */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  top: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  border-radius: 50%;
  /* Круглое изображение */
}

.btn-avatar .ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #20314a;
  color: #b9d8ff;
  font-weight: 800;
  border-radius: 50%;
}

/* Кнопка переключателя снега */
.btn-snow-toggle {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #2a3040 0%, #1f2430 100%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transition: opacity 0.2s ease;
  top: 0 !important;
}

.btn-snow-toggle:hover {
  background: linear-gradient(180deg, #323848 0%, #252a38 100%);
}

.btn-snow-toggle:active {
  top: 1px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Мобайл-фиксы */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Мобильная адаптация депозита */
@media (max-width: 420px) {
  .field {
    grid-template-columns: 1fr;
  }

  .field .btn {
    width: 100%;
  }

  .actions .btn {
    padding: 8px 10px;
  }

  input[type="number"],
  input[type="email"],
  input[type="text"] {
    width: 100%;
  }
}

/* Перенос длинных строк, чтобы ничего не «ехало» за экран */
.card {
  overflow: hidden;
}

.hint,
.muted {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#ton-hint {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Блок «Поле + кнопка» на мобилке — колонкой */
@media (max-width: 540px) {
  .grid2 {
    grid-template-columns: 1fr;
  }

  /* ЮKassa/TON — в столбик */
  .field {
    grid-template-columns: 1fr;
  }

  .field .btn {
    width: 100%;
  }

  .actions {
    gap: 6px;
    flex-wrap: wrap;
  }

  .actions .btn {
    padding: 10px 12px;
  }

  input[type="number"],
  input[type="email"],
  input[type="text"] {
    width: 100%;
  }
}

#admin-only .btn {
  background: #7c3aed;
  border-color: transparent;
}

/* Админ-блок на странице профиля (без вложенного .actions) */
#page-profile .admin-box {
  display: grid;
  gap: 6px;
}

#page-profile .admin-box .btn {
  background: #7c3aed;
  border-color: transparent;
}

/* == FIX: карточки кейсов — стабильная сетка и видимая нижняя полоса == */
.cases-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.case-card {
  grid-template-rows: auto minmax(48px, auto);
}

.case-card .cover {
  /* квадраты как на скрине; хочешь прямоугольники — замени на 16 / 9 */
  aspect-ratio: 1 / 1;
}

.case-card .body {
  display: grid;
  grid-template-columns: 1fr auto;
  /* название | цена */
  align-items: center;
}

/* === Case items: overlays (price + title over image) === */
.item .thumb {
  position: relative;
  height: 140px;
}

/* было 96px */
.item .thumb .tag-price {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .12);
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(2px);
}

.item .thumb .tag-price .coin {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.item .thumb .tag-oos {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(220, 53, 69, .85);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}


.item .thumb .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.item .thumb .caption .name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 420px) {
  .item .thumb {
    height: 120px;
  }
}

/* === Переключатель звука (toggle) === */
.switch {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  width: 42px;
}

/* ВАЖНО: кликаемо только поле свитча, а не вся линия */
.switch {
  position: relative;
}

.switch input {
  position: absolute;
  inset: 0;
  /* под слайдером */
  width: 42px;
  height: 24px;
  opacity: 0;
  cursor: pointer;
}

.switch .slider {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #1a1f2b;
  border: 1px solid rgba(255, 255, 255, .12);
  position: relative;
  transition: background .2s ease;
}

.switch .slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9aa3b2;
  transition: transform .2s ease, background .2s ease;
}

.switch input:checked+.slider {
  background: var(--accent);
}

.switch input:checked+.slider::after {
  transform: translateX(18px);
  background: #0b0c10;
}

.switch .switch-text {
  display: none;
}

/* текста нет */

/* === Квадратный переключатель (toggle square) === */
.toggle-square {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.toggle-square:hover {
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.toggle-square:active {
  transform: scale(0.95);
}

.toggle-square.active {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-square.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 2px;
}

/* === Новый указатель рулетки (треугольник) и скрытие старого маркера === */
.roller-marker {
  display: none !important;
}

/* пунктир больше не показываем */

.roller-pointer {
  position: absolute;
  top: -2px;
  /* чуть над контейнером рулетки */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid var(--accent);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
  display: none;
  /* по умолчанию скрыт */
}

.roller-wrap.spinning .roller-pointer {
  display: block;
}

/* только во время спина */

/* --- Нажатие по карточке кейса --- */
.case-card {
  transition: transform .08s ease, filter .08s ease;
}

.case-card.pressed,
.case-card:active {
  transform: scale(.98);
  filter: brightness(.92);
}

/*  ——— кейс: шапка с ценами ——— */
#case-price {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#case-price .badge {
  padding: 4px 10px;
  border-radius: 12px;
  line-height: 1;
}

#case-price .badge.price {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}

#case-price .badge.bonus {
  background: rgba(124, 77, 255, .18);
  border: 1px solid rgba(124, 77, 255, .35);
}

/*  ——— карточки кейсов на главной ——— */
.case-card .case-price {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.case-card .badge.free {
  font-size: 12px;
  padding: 3px 8px;
}

/* FREE делаем чуть меньше */
.case-card .badge.bonus {
  background: rgba(124, 77, 255, .18);
  border: 1px solid rgba(124, 77, 255, .35);
}

/* --- Игры --- */
#page-games {
  padding: 16px;
}

.games-card {
  max-width: 840px;
  margin: 24px auto;
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.games-card h1 {
  margin: 0 0 12px 0;
  font-size: 22px;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.game-card {
  cursor: pointer;
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.game-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

.game-card img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.game-title {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

.fab-games {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 1000;
  width: 94px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 800;
  font-size: 15px;
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(30, 30, 30, .45);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
  color: #fff;
  user-select: none;
  cursor: pointer;
}

.fab-games:active {
  transform: translateX(-50%) scale(0.99);
  opacity: .96;
}

@media (max-width:420px) {
  .fab-games {
    width: 86px;
    height: 86px;
    font-size: 14px;
    border-radius: 16px;
    bottom: 10px;
  }
}

/* --- Викторина --- */
#page-quiz {
  padding: 16px;
}

.quiz-card {
  max-width: 840px;
  margin: 24px auto;
  padding: 18px 16px;
  border-radius: 16px;
  background: #0f1422;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}

.quiz-head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.quiz-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-img {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.quiz-btn {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #1a2134;
  color: #fff;
  font-weight: 700;
}

.quiz-btn:active {
  transform: scale(0.99);
  opacity: .96;
}

.quiz-hint {
  margin-top: 6px;
  text-align: right;
  color: #cbd5e1;
}

.badge.bonus {
  background: rgba(124, 77, 255, .18);
  border: 1px solid rgba(124, 77, 255, .35);
}

/* ───── ПРОКАСТ ───── */
.procast-card {
  max-width: 840px;
  margin: 24px auto;
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pc-block {
  background: #121622;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
}

.pc-block-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.pc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pc-pill {
  border-radius: 999px;
  background: #1f3a5f;
}

.pc-divider {
  display: flex;
  justify-content: center;
  padding: 6px;
}

.pc-round-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pc-spell {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.pc-spell-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #0b1020;
  object-fit: cover;
  display: none;
}

.pc-spell-icon.show {
  display: block;
}

.pc-spheres {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.pc-sphere {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #0b1020;
  background: #0b1020;
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
}

.pc-sphere img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1);
}

.pc-sphere .key {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.pc-sphere.q {
  box-shadow: inset 0 0 18px rgba(66, 165, 245, .4);
}

.pc-sphere.w {
  box-shadow: inset 0 0 18px rgba(186, 104, 200, .4);
}

.pc-sphere.e {
  box-shadow: inset 0 0 18px rgba(255, 183, 77, .4);
}

.pc-sphere.q .key {
  color: #bfe1ff;
}

.pc-sphere.w .key {
  color: #e6c1f2;
}

.pc-sphere.e .key {
  color: #ffe0b2;
}

.pc-picked {
  display: flex;
  gap: 10px;
  min-height: 58px;
  margin-top: 10px;
}

.pc-picked .pc-sphere {
  opacity: .95;
  width: 48px;
  height: 48px;
}

.pc-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pc-top {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.pc-top li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #1e293b;
}

/* ───── Anti-zoom UX (мобайл), без влияния на клики ───── */
html,
body {
  touch-action: manipulation;
}

#page-procast .pc-sphere {
  touch-action: manipulation;
}

img,
button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Быстрые кнопки в прокасте: явно запрещаем жесты/зум */
#pc-round .pc-actions .btn {
  touch-action: manipulation;
}

/* Кнопка "ИГРЫ" — меньше отступы, шрифт как был */
.btn--games-smaller {
  padding: 4px 8px !important;
  border-radius: 10px;
}

/* Контраст "Викторины" */
[data-view="quiz"],
#quiz-view {
  background: #f7f7f9 !important;
  color: #111 !important;
}

[data-view="quiz"] .question,
#quiz-view .question {
  color: #0b0b0b !important;
  font-weight: 600;
}

[data-view="quiz"] .option,
#quiz-view .option {
  color: #111 !important;
}

/* Лого без оранжевого круга */
.logo,
.app-logo {
  background: transparent !important;
  box-shadow: none !important;
}

/* Вопрос в викторине — высокий контраст */
.quiz-card #q-text,
.quiz-card .quiz-question {
  color: #fff;
  font-weight: 700;
}

/* === Compact disclaimer === */
.disclaimer-card {
  padding: 12px;
  margin-top: 10px;
}

.disclaimer-title {
  margin: 0 0 6px;
  font-size: 16px;
  /* было 18 */
  text-align: center;
  /* заголовок по центру */
}

.disclaimer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  /* было 8 */
}

.disclaimer-list li {
  padding: 4px 0;
}

.disclaimer-list h3 {
  margin: 0 0 2px;
  font-size: 13px;
  /* меньше */
  font-weight: 800;
  /* жирный как в макете */
  text-align: center;
  /* подзаголовки по центру */
}

.disclaimer-list p {
  margin: 0;
  font-size: 12px;
  /* меньше */
  line-height: 1.35;
  /* компактнее по высоте */
  color: var(--muted);
}

/* На очень узких экранах — ещё на полшага меньше главного заголовка */
@media (max-width: 420px) {
  .disclaimer-title {
    font-size: 15px;
  }
}

/* === ROSHAN (ивент) === */
.roshan-card {
  max-width: 840px;
  margin: 24px auto;
}

.roshan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.roshan-stage {
  display: grid;
  place-items: center;
  margin: 8px 0;
}

.roshan-stage video,
.roshan-stage img {
  width: 256px;
  height: 256px;
  will-change: transform, opacity;
  background: transparent;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  transition: all 0.5s ease-in-out, opacity 0.3s ease-in-out;
}

/* Специальные правила для iOS - убираем черный фон */
@supports (-webkit-touch-callout: none) {
  .roshan-stage video {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    mix-blend-mode: normal;
  }

  .roshan-stage video::-webkit-media-controls {
    background: transparent !important;
  }

  .roshan-stage video::-webkit-media-controls-panel {
    background: transparent !important;
  }
}

/* Эффект свечения при смене стадии */
.roshan-stage.stage-changing {
  position: relative;
  overflow: visible;
}

.roshan-stage.stage-changing::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  background: linear-gradient(45deg, #ffd700, #ffed4e, #ff6b35, #ffd700);
  border-radius: 20px;
  z-index: -1;
  animation: stageGlow 2s ease-in-out;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}

.roshan-stage.stage-changing::after {
  content: "⚡";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: #ffd700;
  z-index: 10;
  animation: stageSparkle 1.5s ease-in-out;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

@keyframes stageGlow {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  25% {
    opacity: 0.8;
    transform: scale(1.1);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }

  75% {
    opacity: 0.8;
    transform: scale(1.05);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes stageSparkle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

/* Скрываем контролы видео */
.roshan-stage video::-webkit-media-controls {
  display: none !important;
}

.roshan-stage video::-webkit-media-controls-panel {
  display: none !important;
}

.roshan-stage video::-webkit-media-controls-play-button {
  display: none !important;
}

/* Убираем все контролы видео */
.roshan-stage video::-webkit-media-controls {
  display: none !important;
}

.roshan-stage video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}

/* Дополнительные правила для iOS */
.roshan-stage video::-webkit-media-controls-panel {
  display: none !important;
}

.roshan-stage video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* Убираем кнопку play на iOS */
.roshan-stage video::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Убираем все элементы управления */
.roshan-stage video::-webkit-media-controls-enclosure {
  display: none !important;
}

/* Дополнительные стили для iOS - убираем черный фон */
.roshan-stage video {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  object-fit: contain !important;
  -webkit-background-size: contain !important;
  background-size: contain !important;
}

/* Убираем черный фон на iOS Safari */
.roshan-stage video::-webkit-media-controls {
  background: transparent !important;
}

.roshan-stage video::-webkit-media-controls-overlay-play-button {
  background: transparent !important;
}

.roshan-progress {
  margin-top: 8px;
  padding: 10px 12px;
}

.rp-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rp-bar {
  height: 12px;
  background: #0e1322;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

#rp-bar-inner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2b63ff, #00c2ff);
}

.roshan-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.roshan-panel {
  margin-top: 12px;
  padding: 12px;
  background: #121622;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
}

.shop-grid,
.feed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 480px) {

  .shop-grid,
  .feed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.shop-item,
.feed-item {
  background: #1a1f2b;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.shop-item .name,
.feed-item .name {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
}

.shop-item .meta,
.feed-item .meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.shop-item .actions,
.feed-item .actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.shop-item .actions .btn,
.feed-item .actions .btn {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}

.shop-item .icon,
.feed-item .icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #202636;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0 auto 8px;
}

.shop-item .icon img,
.feed-item .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.roshan-top {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.roshan-top li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #1e293b;
}

.roshan-claim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.roshan-cta-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.roshan-cta-text {
  font-weight: 800;
}

/* Трон */
.throne-wrap {
  display: grid;
  gap: 8px;
}

.throne-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.throne-area {
  background: #0e1322;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  height: 240px;
  will-change: transform;
  width: 100%;
  display: grid;
  place-items: center;
  user-select: none;
}

.throne-area img {
  width: 100%;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* Адаптивность трона для разных экранов */
@media (min-width: 768px) {
  .throne-area {
    height: 300px;
  }

  .throne-area img {
    max-width: 80%;
    max-height: 80%;
  }
}

@media (min-width: 1024px) {
  .throne-area {
    height: 350px;
  }

  .throne-area img {
    max-width: 70%;
    max-height: 70%;
  }
}

.throne-bar {
  height: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  overflow: hidden;
  background: #1a1f2b;
}

#throne-bar-inner {
  height: 100%;
  width: 100%;
  background: #ef4444;
}

@media (max-width:520px) {
  .roshan-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Roshan CTA (home) --- */
.roshan-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  padding: 12px 16px;
  min-height: 60px;
}

.roshan-cta-ill {
  position: relative;
  width: auto;
  pointer-events: none;
  flex-shrink: 0;
}

.roshan-cta-ill img {
  height: 60px;
  width: auto;
  opacity: .9;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3));
}

.roshan-cta-text {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(76, 201, 240, 0.08);
  border: 1px solid rgba(76, 201, 240, 0.2);
  border-radius: 12px;
  padding: 8px 16px;
  margin-right: 8px;
  min-height: 44px;
}

.roshan-cta-text h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #4cc9f0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.roshan-cta>.btn {
  position: relative;
  margin-left: auto;
  min-width: 100px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width:560px) {
  .roshan-cta-ill img {
    height: 50px;
  }

  .roshan-cta-text {
    padding: 6px 12px;
    min-height: 40px;
  }

  .roshan-cta-text h2 {
    font-size: 16px;
  }

  .roshan-cta>.btn {
    min-width: 80px;
    height: 40px;
    font-size: 14px;
  }
}

/* --- Hoodwink CTA (home) --- */
.hoodwink-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  padding: 12px 16px;
  min-height: 60px;
}

.hoodwink-cta-ill {
  position: relative;
  width: auto;
  pointer-events: none;
  flex-shrink: 0;
}

.hoodwink-cta-ill img {
  height: 60px;
  width: 60px;
  object-fit: contain;
  opacity: .9;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3));
}

.hoodwink-cta-text {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 12px;
  padding: 8px 16px;
  margin-right: 8px;
  min-height: 44px;
}

.hoodwink-cta-text h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #22c55e;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.hoodwink-cta>.btn {
  position: relative;
  margin-left: auto;
  min-width: 100px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width:560px) {
  .hoodwink-cta-ill img {
    height: 50px;
    width: 50px;
  }

  .hoodwink-cta-text {
    padding: 6px 12px;
    min-height: 40px;
  }

  .hoodwink-cta-text h2 {
    font-size: 16px;
  }

  .hoodwink-cta>.btn {
    min-width: 80px;
    height: 40px;
    font-size: 14px;
  }
}

/* --- Hoodwink Event Page --- */
.hoodwink-card {
  padding: 16px;
}

.hoodwink-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.hw-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hw-acorns {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  font-weight: 600;
}

.acorn-icon {
  width: 24px;
  height: 24px;
}

.hw-acorn-break {
  text-align: center;
  padding: 24px;
}

.hw-acorn-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  touch-action: manipulation;
}

.hw-acorn-counter {
  margin-top: 16px;
  font-size: 32px;
  font-weight: 800;
  color: #ffd54a;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hw-main {
  text-align: center;
}

.hw-pet-container {
  margin: 16px 0;
  display: flex;
  justify-content: center;
}

#hw-pet-video {
  /* Убирает черный фон на iOS, не ломая .webm на Android */
  mix-blend-mode: screen;
}

.hw-prizes-btn-container {
  margin: 12px 0;
}

.hw-progress {
  margin: 16px 0;
  padding: 12px;
  border-radius: 12px;
}

.hw-progress-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.hw-progress-bar {
  width: 100%;
  height: 12px;
  background: #0e1322;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

#hw-progress-bar-inner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  transition: width 0.3s ease;
}

.hw-actions-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.hoodwink-claim {
  text-align: center;
  padding: 24px;
  margin-top: 16px;
}

.hw-claim-text {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
}

.hoodwink-panel {
  margin-top: 16px;

  /* --- НАЧАЛО ИСПРАВЛЕНИЯ --- */
  /* Делаем панель "стеклянной", как .card */
  padding: 16px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* --- КОНЕЦ ИСПРАВЛЕНИЯ --- */
}

/* === ИСПРАВЛЕННЫЕ МОДАЛЬНЫЕ ОКНА (ФИКС СКРОЛЛА) === */

.hw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  /* Подняли выше, чтобы точно перекрывало всё */
  background: rgba(0, 0, 0, 0.8);
  /* Чуть темнее для фокуса */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  /* Центр по вертикали на ПК */
  justify-content: center;
  padding: 20px;

  /* ВАЖНО: Убираем скролл с оверлея, скролл будет внутри окна */
  overflow: hidden;
}

.hw-modal {
  width: 100%;
  max-width: 500px;

  /* ВАЖНО: Ограничиваем высоту окна, чтобы оно не вылезало за экран */
  max-height: 85vh;

  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

  /* Flex-layout: Заголовок стоит, контент едет */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Скрываем вылезающее за скругления */
  position: relative;
}

/* Заголовок модалки (где крестик) */
.hw-modal>div:first-child {
  padding: 16px 20px;
  background: rgba(30, 35, 48, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10;
  flex-shrink: 0;
  /* Не сжимать заголовок */
}

/* Контейнеры с контентом (Магазин, Инвентарь, Лидеры) */
/* Они будут занимать всё доступное место и скроллиться внутри */
.hw-shop-grid,
.hw-inventory-grid,
.hoodwink-top,
.hw-prizes-list,
#sj-leaderboard-content {
  flex: 1;
  /* Занять всё место */
  overflow-y: auto;
  /* ВКЛЮЧИТЬ СКРОЛЛ ЗДЕСЬ */
  padding: 16px 20px;
  min-height: 0;
  /* Фикс для Firefox/Flexbox */

  /* Плавный скролл на iOS */
  -webkit-overflow-scrolling: touch;
}

/* Подсказки внутри модалки */
.hw-modal>.hint {
  padding: 0 20px 12px 20px;
  flex-shrink: 0;
}

/* Уменьшенный размер для модальных окон Дупло и Магазин */
#modal-burrow .hw-modal,
#modal-shop .hw-modal {
  max-width: 480px;
}

/* --- АДАПТИВ ПОД МОБИЛКИ (Bottom Sheet) --- */
@media (max-width: 600px) {
  .hw-modal-overlay {
    padding: 0;
    align-items: flex-end;
    /* Прижимаем к низу */
  }

  .hw-modal {
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    /* Скругляем только верх */
    border-bottom: none;
    margin: 0;

    /* На мобилках даем больше места по высоте */
    max-height: 85vh;
    padding-bottom: env(safe-area-inset-bottom);
    /* Учет полоски iPhone */
  }

  /* Анимация выезда снизу */
  .hw-modal {
    animation: slideUpModal 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* На мобильных устройствах переопределяем padding для заголовка */
  .hw-modal>div:first-child {
    padding: 12px 16px;
  }

  /* На мобильных устройствах переопределяем padding для контента */
  .hw-shop-grid,
  .hw-inventory-grid,
  .hoodwink-top,
  .hw-prizes-list,
  #sj-leaderboard-content {
    padding: 12px 16px;
  }
}

@keyframes slideUpModal {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* Для планшетов */
@media (min-width: 481px) and (max-width: 768px) {
  .hw-modal {
    max-width: 90%;
    padding: 20px;
  }
}

.hw-inventory-grid,
.hw-shop-grid {
  display: grid;
  /* Используем 3 колонки на ПК, 2 на планшетах, 1 на телефонах */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 0;
  /* Убираем margin-top, так как padding уже есть в общих стилях */
}

/* СТИЛИ ДЛЯ ИНВЕНТАРЯ (Дупло) */
.hw-inventory-item {
  display: flex;
  flex-direction: column;
  /* <-- ВАЖНО: было 'row' (по умолчанию) */
  align-items: center;
  /* <-- ВАЖНО: центрируем */
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.hw-inventory-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 4px;
}

/* СТИЛИ ДЛЯ МАГАЗИНА */
.hw-shop-item {
  display: flex;
  flex-direction: column;
  /* <-- ВАЖНО: было 'row' (по умолчанию) */
  align-items: center;
  /* <-- ВАЖНО: центрируем */
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.hw-shop-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 4px;
}

.hw-shop-item>div:last-child {
  margin-left: 0;
  /* <-- СБРОС */
  display: flex;
  flex-direction: column;
  /* <-- ВАЖНО: было 'row' (по умолчанию) */
  gap: 8px;
  width: 100%;
  /* Заставляем кнопки занять всю ширину */
}

.hoodwink-top {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.hoodwink-top li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.hoodwink-top li span {
  flex: 1;
}

.hoodwink-top li b {
  font-weight: 600;
  white-space: nowrap;
}

.hw-top-place {
  font-weight: 600;
  color: #4cc9f0;
  min-width: 40px;
}

.hw-top-name {
  flex: 1;
}

.hw-top-level {
  color: #22c55e;
  font-weight: 600;
}

.hw-top-pet {
  color: #9aa3b2;
  font-size: 14px;
}

.hw-top-xp {
  color: #fbbf24;
  font-weight: 600;
  font-size: 14px;
}

.hw-prizes-list {
  margin-top: 12px;
}

.hw-prize-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 12px;
}

.hw-prize-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.hw-prize-item>div {
  flex: 1;
}

/* --- Hoodwink Minigame --- */
.hoodwink-minigame-card {
  padding: 16px;
}

.hw-mg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.hw-mg-actions {
  display: flex;
  gap: 8px;
}

.hw-mg-rules {
  padding: 24px;
}

.hw-mg-rules-content {
  max-width: 600px;
  margin: 0 auto;
}

.hw-mg-rules-text {
  margin: 16px 0;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hw-mg-rules-text p {
  margin: 10px 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hw-mg-rules-text strong {
  color: #fff;
  font-weight: 600;
}

.hw-mg-rules-actions {
  margin-top: 24px;
  text-align: center;
}

.hw-mg-game {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 12px;
  min-height: 100vh;
  box-sizing: border-box;
}

@media (max-height: 800px) {
  .hw-mg-game {
    padding: 8px;
  }
}

.hw-mg-game-container {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
}

.hw-mg-stats {
  display: none;
  /* Скрываем старую панель статистики */
}

.hw-mg-field {
  position: relative;
  width: 100%;
  height: 667px;
  max-height: calc(100vh - 280px);
  aspect-ratio: 375 / 667;
  background: linear-gradient(180deg, #1a3a2e 0%, #2d5a4f 30%, #1e3a52 70%, #0f1f2e 100%);
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}

@media (max-height: 800px) {
  .hw-mg-field {
    max-height: calc(100vh - 240px);
    height: auto;
    min-height: 400px;
  }
}

@media (max-height: 700px) {
  .hw-mg-field {
    max-height: calc(100vh - 220px);
    min-height: 350px;
  }
}

.hw-mg-lives-display {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 30;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hw-mg-hits-display {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hw-mg-enemy {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  transition: left 0.1s linear;
}

.hw-mg-player {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.hw-mg-crosshair {
  position: absolute;
  bottom: 70px;
  left: 50%;
  width: 2px;
  height: 300px;
  pointer-events: none;
  transform-origin: bottom center;
  z-index: 10;
  /* ИСПРАВЛЕНИЕ: Используем background для отрисовки пунктирной линии от центра белки вверх */
  background: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.6) 0px,
      rgba(255, 255, 255, 0.6) 8px,
      transparent 8px,
      transparent 16px);
  box-sizing: border-box;
  /* Точное центрирование: сдвигаем на половину ширины влево */
  margin-left: -1px;
}

.hw-mg-projectile {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  transition: none;
}

.hw-mg-projectile img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.hw-mg-charge {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  max-width: 375px;
  margin-left: auto;
  margin-right: auto;
}

.hw-mg-charge-text {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: #4cc9f0;
  margin-top: 8px;
  margin-bottom: 12px;
}

.hw-mg-charge-button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.hw-mg-btn-charge {
  position: relative;
  overflow: hidden;
  width: 64px;
  height: 64px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.hw-mg-btn-charge-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.hw-mg-btn-charge-timer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.hw-mg-btn-charge-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: inherit;
  pointer-events: none;
}

@media (max-width: 480px) {
  .hw-mg-charge {
    margin-top: 8px;
    padding: 10px;
  }

  .hw-mg-charge-text {
    font-size: 14px;
    margin-top: 6px;
    margin-bottom: 10px;
  }

  .hw-mg-btn-charge {
    width: 56px;
    height: 56px;
  }

  .hw-mg-btn-charge-icon {
    width: 42px;
    height: 42px;
  }
}

.hw-mg-charge-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.hw-mg-charge-progress {
  height: 100%;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  border-radius: 4px;
  transition: width 0.1s linear;
}

.hw-mg-controls {
  display: none;
  /* Убрано, так как кнопка теперь внутри .hw-mg-charge */
}

.hw-mg-result {
  padding: 24px;
  text-align: center;
}

.hw-mg-result-content {
  max-width: 400px;
  margin: 0 auto;
}

.hw-mg-result-text {
  margin: 16px 0;
  font-size: 18px;
}

.hw-mg-result-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Трон: анимация тапа + «урон» */
#throne-area {
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.tap-pulse {
  animation: tapPulse 180ms ease-out;
}

@keyframes tapPulse {
  from {
    transform: scale(1);
  }

  50% {
    transform: scale(0.97);
  }

  to {
    transform: scale(1);
  }
}

.dmg-float {
  position: absolute;
  font-weight: 800;
  color: #ffd54a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: dmgRise .7s ease-out forwards;
}

@keyframes dmgRise {
  from {
    opacity: 1;
    transform: translate(-50%, -40%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -90%) scale(1.1);
  }
}

/* Уведомления о наградах */
.reward-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #ffd700;
  border-radius: 16px;
  padding: 20px;
  min-width: 280px;
  max-width: 90vw;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: rewardSlideIn 0.3s ease-out;
}

.reward-content {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.reward-content.fail {
  border-color: #ef4444;
}

.reward-content.error {
  border-color: #f59e0b;
}

.reward-icon {
  font-size: 48px;
  line-height: 1;
}

.reward-text {
  flex: 1;
}

.reward-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.reward-desc {
  font-size: 16px;
  color: #e5e7eb;
  font-weight: 600;
}

.reward-notification.fade-out {
  animation: rewardSlideOut 0.3s ease-in forwards;
}

@keyframes rewardSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes rewardSlideOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

/* ===== ТРИ В РЯД С ЛЯГУШКОЙ ===== */

.frog-match-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px;
}

.frog-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.frog-match-head h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.frh-actions {
  display: flex;
  gap: 8px;
}

/* Экран начала игры */
.frog-match-home {
  text-align: center;
  padding: 40px 20px;
}

.frog-match-start {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.frog-match-start .btn {
  font-size: 18px;
  padding: 16px 32px;
  min-width: 200px;
}

.frs-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Окно правил */
.frog-match-rules {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}

.frr-content h2 {
  margin: 0 0 20px 0;
  text-align: center;
  color: var(--accent);
}

.frr-rules {
  margin-bottom: 20px;
}

.frr-section {
  margin-bottom: 16px;
}

.frr-section h3 {
  margin: 0 0 8px 0;
  color: var(--accent);
  font-size: 16px;
}

.frr-section p {
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.frr-section ul {
  margin: 8px 0;
  padding-left: 20px;
}

.frr-section li {
  margin-bottom: 4px;
  line-height: 1.4;
}

.frr-actions {
  text-align: center;
}

/* Игровой экран */
.frog-match-game {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Враг */
.frog-enemy {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  justify-content: center;
}

.fe-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 200px;
}

.fe-bars-vertical {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-end;
  margin-top: 20px;
}

.fe-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fe-bar-icon {
  font-size: 14px;
  line-height: 1;
}

.fe-bar-bg-vertical {
  width: 8px;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.fe-bar-fill-vertical {
  width: 100%;
  position: absolute;
  bottom: 0;
  transition: height 0.3s ease;
}

.fe-bar-container:nth-child(1) .fe-bar-fill-vertical {
  background: linear-gradient(180deg, #ff4444, #ff6666);
}

.fe-bar-container:nth-child(2) .fe-bar-fill-vertical {
  background: linear-gradient(180deg, #4444ff, #6666ff);
}

.fe-bar-container:nth-child(3) .fe-bar-fill-vertical {
  background: linear-gradient(180deg, #ffaa00, #ffcc44);
}

.fe-bar-text {
  font-size: 12px;
  color: var(--text);
  min-width: 60px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.fe-sprite {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.fe-sprite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.2s ease;
}

.fe-sprite.shake {
  animation: enemyShake 0.1s ease-in-out infinite;
}

.fe-sprite.damage {
  filter: hue-rotate(0deg) saturate(2) brightness(1.2);
  animation: damageFlash 0.5s ease-out;
}

.fe-sprite.frozen {
  filter: hue-rotate(200deg) saturate(1.5) brightness(0.8);
  animation: freezeShake 0.1s ease-in-out infinite;
}

.fe-sprite.defeated {
  filter: grayscale(1) brightness(0.5);
  animation: none;
}

@keyframes enemyShake {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-2px, -2px);
  }

  50% {
    transform: translate(2px, 2px);
  }

  75% {
    transform: translate(-1px, 1px);
  }
}

@keyframes damageFlash {
  0% {
    filter: hue-rotate(0deg) saturate(2) brightness(1.2);
  }

  50% {
    filter: hue-rotate(0deg) saturate(3) brightness(1.5);
  }

  100% {
    filter: hue-rotate(0deg) saturate(2) brightness(1.2);
  }
}

@keyframes freezeShake {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1px, 0);
  }

  50% {
    transform: translate(1px, 0);
  }

  75% {
    transform: translate(-1px, 0);
  }
}

.fe-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.fe-hp,
.fe-mana {
  font-weight: 600;
}

.fe-status {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  text-align: center;
  margin-top: 4px;
  min-height: 16px;
}

/* Игровое поле 5x5 */
.frog-field {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 4px;
  aspect-ratio: 1;
  max-width: 400px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 8px;
}

.frog-cell {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.frog-cell:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.frog-cell.selected {
  background: var(--accent);
  transform: scale(1.1);
}

.frog-cell.dragging {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.frog-cell.matched {
  animation: sphereShoot 0.2s ease-out forwards;
}

.frog-sphere {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: all 0.2s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.frog-sphere.swapping {
  animation: sphereSwap 0.6s ease-in-out;
}

.frog-sphere.swapping-position {
  animation: sphereSwapPosition 0.6s ease-in-out;
}

.frog-sphere.shooting {
  animation: sphereShoot 1.2s ease-out forwards;
}

.frog-sphere.glowing {
  animation: sphereGlow 1s ease-in-out infinite;
}

.frog-sphere.falling {
  animation: sphereFall 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--fall-delay, 0ms);
}

.frog-sphere.dropping {
  animation: sphereDrop 0.4s ease-out forwards;
}

.frog-enemy.hit,
#frog-match-enemy-sprite.hit {
  animation: enemyHit 0.8s ease-in-out;
}

#frog-match-enemy-sprite.hit img {
  animation: enemyHitImage 0.6s ease-in-out;
}

@keyframes enemyHitImage {
  0% {
    filter: brightness(1) contrast(1);
    transform: scale(1);
  }

  25% {
    filter: brightness(1.5) contrast(1.2);
    transform: scale(1.1);
  }

  50% {
    filter: brightness(1.8) contrast(1.4);
    transform: scale(1.05);
  }

  75% {
    filter: brightness(1.3) contrast(1.1);
    transform: scale(0.98);
  }

  100% {
    filter: brightness(1) contrast(1);
    transform: scale(1);
  }
}

.frog-enemy.shake {
  animation: enemyShake 0.5s ease-in-out;
}

.frog-cell.damage-flash {
  animation: damageFlash 0.5s ease-out;
}

@keyframes sphereFall {
  0% {
    transform: translateY(calc(-1 * var(--fall-distance, 200px))) scale(0.5) rotate(0deg);
    opacity: 0;
  }

  30% {
    transform: translateY(calc(-0.7 * var(--fall-distance, 200px))) scale(0.8) rotate(180deg);
    opacity: 0.7;
  }

  60% {
    transform: translateY(calc(-0.3 * var(--fall-distance, 200px))) scale(1.15) rotate(300deg);
    opacity: 0.95;
  }

  80% {
    transform: translateY(calc(-0.05 * var(--fall-distance, 200px))) scale(0.98) rotate(350deg);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scale(1) rotate(360deg);
    opacity: 1;
  }
}

/* Анимация полета сферы к врагу */
@keyframes sphereFlyToEnemy {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) brightness(1.3);
  }

  20% {
    transform: translate(calc(var(--mid-x, 0px) * 0.3), calc(var(--mid-y, 0px) * 0.3)) scale(1.2) rotate(90deg);
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1)) brightness(1.5);
  }

  50% {
    transform: translate(calc(var(--mid-x, 0px) * 0.8), calc(var(--mid-y, 0px) * 0.8)) scale(1.1) rotate(180deg);
    opacity: 0.95;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) brightness(1.4);
  }

  80% {
    transform: translate(calc(var(--target-x, 0px) * 0.9), calc(var(--target-y, 0px) * 0.9)) scale(0.5) rotate(270deg);
    opacity: 0.8;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)) brightness(1.2);
  }

  100% {
    transform: translate(var(--target-x, 0px), var(--target-y, 0px)) scale(0.3) rotate(360deg);
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3)) brightness(1);
  }
}

.frog-sphere-flying {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@keyframes sphereDrop {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(var(--drop-distance, 0px));
  }
}

@keyframes sphereShoot {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  20% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }

  40% {
    transform: scale(1.4) rotate(-5deg);
    opacity: 0.9;
  }

  60% {
    transform: scale(1.1) rotate(0deg);
    opacity: 0.8;
  }

  80% {
    transform: scale(0.9) translateY(-10px);
    opacity: 0.6;
  }

  100% {
    transform: scale(0.7) translateY(-30px);
    opacity: 0.3;
  }
}

@keyframes sphereSwap {
  0% {
    transform: scale(1);
    z-index: 1;
  }

  25% {
    transform: scale(1.3) rotate(5deg);
    z-index: 10;
  }

  50% {
    transform: scale(1.5) rotate(0deg);
    z-index: 10;
  }

  75% {
    transform: scale(1.3) rotate(-5deg);
    z-index: 10;
  }

  100% {
    transform: scale(1);
    z-index: 1;
  }
}

@keyframes sphereSwapPosition {
  0% {
    transform: scale(1);
    z-index: 1;
  }

  25% {
    transform: scale(1.4) rotate(-8deg);
    z-index: 10;
  }

  50% {
    transform: scale(1.6) rotate(0deg);
    z-index: 10;
  }

  75% {
    transform: scale(1.4) rotate(8deg);
    z-index: 10;
  }

  100% {
    transform: scale(1);
    z-index: 1;
  }
}

@keyframes enemyHit {
  0% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }

  10% {
    transform: translateX(-8px) scale(1.05);
    filter: brightness(1.2);
  }

  20% {
    transform: translateX(8px) scale(0.95);
    filter: brightness(0.8);
  }

  30% {
    transform: translateX(-6px) scale(1.02);
    filter: brightness(1.1);
  }

  40% {
    transform: translateX(6px) scale(0.98);
    filter: brightness(0.9);
  }

  50% {
    transform: translateX(-4px) scale(1.01);
    filter: brightness(1.05);
  }

  60% {
    transform: translateX(4px) scale(0.99);
    filter: brightness(0.95);
  }

  70% {
    transform: translateX(-2px) scale(1.005);
    filter: brightness(1.02);
  }

  80% {
    transform: translateX(2px) scale(0.995);
    filter: brightness(0.98);
  }

  90% {
    transform: translateX(-1px) scale(1.002);
    filter: brightness(1.01);
  }

  100% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes enemyShake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-3px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(3px);
  }
}

@keyframes damageFlash {
  0% {
    background-color: rgba(255, 0, 0, 0.3);
  }

  100% {
    background-color: transparent;
  }
}

@keyframes sphereGlow {
  0% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }

  50% {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  }

  100% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }
}

/* Статистика игрока */
.frog-player-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  font-size: 14px;
}

.fps-hearts,
.fps-mana,
.fps-tries {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fps-label {
  font-size: 12px;
  color: var(--muted);
}

.fps-hearts-list {
  display: flex;
  gap: 2px;
}

.frog-heart {
  width: 16px;
  height: 16px;
  color: #ef4444;
}

.frog-heart.lost {
  color: #666;
  opacity: 0.3;
}

/* Кнопки управления */
.frog-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* Экран результата */
.frog-match-result {
  text-align: center;
  padding: 40px 20px;
}

.frog-match-result h2 {
  margin: 0 0 20px 0;
  font-size: 28px;
}

.frog-match-result .frr-content {
  max-width: 400px;
  margin: 0 auto;
}

.frr-reward {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  font-size: 16px;
  font-weight: 600;
}

.frr-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* Адаптивность */
@media (max-width: 480px) {
  .frog-field {
    max-width: 320px;
  }

  .frog-sphere {
    width: 28px;
    height: 28px;
  }

  .frog-player-stats {
    flex-direction: column;
    gap: 12px;
  }

  .fps-hearts,
  .fps-mana,
  .fps-tries {
    flex-direction: row;
    gap: 8px;
  }
}

/* Стили для кнопки сброса КД игры "Напасть на лягуха" */
.frog-reset-cooldown {
  background: #fbbf24 !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
  font-size: 0.9em;
}

.frog-reset-cooldown:hover {
  background: #f59e0b !important;
  border-color: #d97706 !important;
  color: #78350f !important;
}

/* ===== УНИВЕРСАЛЬНЫЙ ЭКРАН ЗАГРУЗКИ ===== */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loadingFadeIn 0.3s ease-out;
}

.loading-content {
  text-align: center;
  color: #fff;
  max-width: 300px;
  padding: 20px;
}

.loading-spinner {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}

.spinner-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top: 3px solid var(--accent);
  border-radius: 50%;
  animation: spinnerRotate 1.5s linear infinite;
}

.spinner-ring:nth-child(1) {
  animation-delay: 0s;
  border-top-color: #4cc9f0;
}

.spinner-ring:nth-child(2) {
  animation-delay: 0.2s;
  border-top-color: #7c4dff;
  width: 70px;
  height: 70px;
  top: 5px;
  left: 5px;
}

.spinner-ring:nth-child(3) {
  animation-delay: 0.4s;
  border-top-color: #ff6b35;
  width: 60px;
  height: 60px;
  top: 10px;
  left: 10px;
}

.loading-text {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.loading-subtext {
  font-size: 14px;
  color: var(--muted);
  opacity: 0.8;
}

@keyframes loadingFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

@keyframes spinnerRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Анимация пульсации для текста загрузки */
.loading-text {
  animation: loadingPulse 2s ease-in-out infinite;
}

@keyframes loadingPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* --- Стили для "Беличьи Прыжки" --- */
.squirrel-jump-game {
  position: relative;
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  /* Соотношение сторон 2:3 */
  aspect-ratio: 2 / 3;
  background: linear-gradient(180deg, #87ceeb 0%, #1e3a8a 100%);
  /* Градиент неба (fallback) */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  touch-action: none;
}

#squirrel-jump-canvas {
  width: 375px !important;
  /* Фиксированная ширина, не зависит от размера окна */
  height: 667px !important;
  /* Фиксированная высота, не зависит от размера окна */
  display: block;
  background: transparent;
  /* Фон рисуется через canvas */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Сохраняет пропорции при масштабировании */
}

.sj-ui {
  position: absolute;
  top: 8px;
  left: 8px;
  color: white;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.sj-ui-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  width: 80%;
  z-index: 20;
}

.sj-ui-overlay h2 {
  margin: 0 0 10px;
}

/* Контейнер для правил */
.sj-rules-container {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  padding: 0 16px;
}

.sj-rules-content {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.sj-rules-content h2 {
  margin: 0 0 16px 0;
  text-align: center;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}

/* Маленькие кнопки для правил */
.sj-btn-small {
  font-size: 14px !important;
  padding: 8px 12px !important;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sj-rules-text {
  text-align: left;
  margin: 0 0 24px 0;
  line-height: 1.7;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

.sj-rules-text::-webkit-scrollbar {
  width: 6px;
}

.sj-rules-text::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.sj-rules-text::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.sj-rules-text::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.sj-rules-text p {
  margin: 12px 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.sj-rules-text strong {
  color: #fff;
  font-weight: 600;
  display: inline-block;
  margin-right: 4px;
}

.sj-btn-start {
  width: 100%;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 700;
  margin-top: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sj-btn-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.sj-btn-start:active {
  transform: translateY(0);
}

/* Оверлей паузы */
.sj-pause-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
}

.sj-pause-content {
  text-align: center;
}

.sj-pause-content h2 {
  color: #ffffff;
  font-size: 64px;
  font-weight: bold;
  margin: 0;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Оверлей обратного отсчета */
.sj-countdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  background: transparent;
}

.sj-countdown-content {
  text-align: center;
}

.sj-countdown-content span {
  color: #ffffff;
  font-size: 120px;
  font-weight: bold;
  margin: 0;
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(255, 255, 255, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.8);
  animation: countdownPulse 0.5s ease-in-out;
}

@keyframes countdownPulse {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* In-game уведомление о разблокировке ачивки */
.sj-achievement-notification {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sj-achievement-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sj-achievement-notification-content {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.95) 0%, rgba(255, 193, 7, 0.95) 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 215, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 90vw;
  animation: achievementSlideIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes achievementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.sj-achievement-notification-icon {
  font-size: 32px;
  line-height: 1;
  animation: achievementIconBounce 0.6s ease-out;
}

@keyframes achievementIconBounce {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(-10deg);
  }
  50% {
    transform: scale(1.1) rotate(10deg);
  }
  75% {
    transform: scale(1.05) rotate(-5deg);
  }
}

.sj-achievement-notification-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sj-achievement-notification-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
}

.sj-achievement-notification-name {
  font-size: 16px;
  font-weight: 800;
  color: #000;
  margin: 0;
  line-height: 1.2;
}

.sj-achievement-notification-level {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  margin: 0;
}

/* Стили для списка ачивок в модальном окне */
.sj-achievement-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.sj-achievement-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.sj-achievement-item.completed {
  border-color: rgba(255, 215, 0, 0.5);
  background: rgba(255, 215, 0, 0.1);
}

.sj-achievement-item.claimed {
  opacity: 0.6;
}

.sj-achievement-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sj-achievement-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px 0;
}

.sj-achievement-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.4;
}

.sj-achievement-session-badge {
  display: inline-block;
  background: rgba(76, 201, 240, 0.2);
  border: 1px solid rgba(76, 201, 240, 0.4);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #4cc9f0;
  margin-top: 4px;
}

.sj-achievement-levels {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.sj-achievement-level {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 12px;
  position: relative;
}

.sj-achievement-level.completed {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.sj-achievement-level.claimed {
  opacity: 0.5;
}

.sj-achievement-level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sj-achievement-level-number {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.sj-achievement-level-reward {
  font-size: 14px;
  font-weight: 600;
  color: #ffd700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sj-achievement-progress {
  margin-top: 8px;
}

.sj-achievement-progress-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}

.sj-achievement-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.sj-achievement-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4cc9f0 0%, #22c55e 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sj-achievement-progress-fill.completed {
  background: linear-gradient(90deg, #ffd700 0%, #ffed4e 100%);
}

.sj-achievement-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progressShine 2s infinite;
}

@keyframes progressShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.sj-achievement-claim-btn {
  margin-top: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.sj-achievement-claim-btn:hover {
  background: linear-gradient(180deg, #16a34a 0%, #14532d 100%);
  transform: translateY(-1px);
}

.sj-achievement-claim-btn:active {
  transform: translateY(0);
}

.sj-achievement-claim-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.1);
}

/* --- Стили для "Белка в бездну" (Squirrel Abyss) --- */
.squirrel-abyss-game {
  position: relative;
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  /* Соотношение сторон 2:3 */
  aspect-ratio: 2 / 3;
  background: #0a0a1e;
  /* Темный фон по умолчанию */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  touch-action: none;
}

#squirrel-abyss-canvas {
  width: 375px !important;
  /* Фиксированная ширина */
  height: 667px !important;
  /* Фиксированная высота */
  display: block;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Кнопка парашюта */
.sa-parachute-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}

.sa-btn-parachute {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.sa-btn-parachute img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.sa-btn-parachute:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: rgba(255, 0, 0, 0.5);
}

.sa-parachute-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
}

/* Оверлей кулдауна (серый, заполняется) */
.sa-cooldown-overlay {
  background: rgba(0, 0, 0, 0.7);
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 0.1s linear;
}

/* Оверлей длительности (зеленый, пустеет) */
.sa-duration-overlay {
  background: rgba(34, 197, 94, 0.6);
  transform-origin: top;
  transform: scaleY(1);
  transition: transform 0.1s linear;
}

/* Модальное окно промокода */
.promo-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.promo-modal {
  width: 100%;
  max-width: 100%;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  padding: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-height: 50vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* ───── WINTER VISUAL ENHANCEMENTS ───── */

/* 2. ЭФФЕКТ "ИНЕЯ" НА КАРТОЧКАХ */
.card,
.glass,
.case-card,
.inv-card,
.procast-card,
.games-card,
.hoodwink-card {
  background: var(--card-frost);
  border: 1px solid var(--border-frost);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Легкое свечение при наведении на интерактивные карты */
.game-card:hover,
.case-card:hover {
  box-shadow: 0 8px 32px rgba(76, 201, 240, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  border-color: rgba(76, 201, 240, 0.3);
}

/* 3. ТАКТИЛЬНЫЕ 3D КНОПКИ (Геймерский стиль) */
.btn {
  position: relative;
  font-family: var(--font-main);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  /* Убираем старую рамку */
  background: linear-gradient(180deg, #2a3040 0%, #1f2430 100%);
  color: #fff;

  /* 3D Эффект */
  box-shadow:
    0 4px 0 #12151d,
    /* Темное "дно" кнопки */
    0 5px 10px rgba(0, 0, 0, 0.3);
  /* Тень */

  border-radius: 12px;
  padding: 10px 16px;
  transition: all 0.1s ease;
  top: 0;
}

/* Нажатие на кнопку */
.btn:active,
.btn.pressed {
  top: 3px;
  /* Сдвиг вниз */
  box-shadow:
    0 1px 0 #12151d,
    0 2px 5px rgba(0, 0, 0, 0.2);
  transform: none !important;
  /* Отключаем старый scale */
}

/* Акцентная кнопка (яркая) - стили уже определены выше с эффектом блика */

/* Зеленая кнопка (например, "Купить" или "Продать") */
.btn.sell,
.btn.buy {
  background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%);
  color: white;
  box-shadow: 0 4px 0 #1e8449;
}

.btn.sell:active {
  box-shadow: 0 1px 0 #1e8449;
}

/* 4. МИКРО-АНИМАЦИИ (Плавное появление) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Применяем анимацию к страницам */
.page.visible {
  animation: fadeInUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Каскадное появление предметов (Инвентарь/Магазин) */
.inv-card,
.shop-item,
.game-card,
.case-card {
  animation: fadeInUp 0.5s ease-out backwards;
}

/* Задержки для первых элементов */
.inv-card:nth-child(1) {
  animation-delay: 0.05s;
}

.inv-card:nth-child(2) {
  animation-delay: 0.1s;
}

.inv-card:nth-child(3) {
  animation-delay: 0.15s;
}

.inv-card:nth-child(4) {
  animation-delay: 0.2s;
}

/* 5. МОБИЛЬНЫЕ МОДАЛЬНЫЕ ОКНА (Bottom Sheet) */
@media (max-width: 600px) {

  .hw-modal,
  .promo-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    /* Не центрируем по вертикали */
    margin: 0;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    /* Закругляем только верх */
    border-bottom: none;
    animation: slideUpModal 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding-bottom: 30px;
    /* Учет Safe Area iPhone */
  }

  @keyframes slideUpModal {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }
}

/* Исправление заголовков для нового шрифта */
h1,
h2,
h3,
.brand .name {
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Ледяная полоска прогресса (Рошан/Худринк) */
.rp-bar,
.hw-progress-bar {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  background: #080a10;
}

#rp-bar-inner,
#hw-progress-bar-inner {
  background: linear-gradient(90deg, #4cc9f0, #7209b7);
  box-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
}

/* ───── VISUAL EFFECTS ENHANCEMENTS ───── */

/* 1. SHINE EFFECT (БЛИК) для редких предметов */
.rarity-mythical,
.rarity-legendary,
.rarity-ancient,
.rarity-immortal,
.rarity-arcana {
  position: relative;
  overflow: hidden;
}

.rarity-mythical::after,
.rarity-legendary::after,
.rarity-ancient::after,
.rarity-immortal::after,
.rarity-arcana::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-25deg);
  animation: shine 4s infinite;
  pointer-events: none;
}

@keyframes shine {

  0%,
  80% {
    left: -150%;
  }

  100% {
    left: 250%;
  }
}

/* 2. SPARKS (ИСКРЫ) */
.spark {
  position: fixed;
  width: 4px;
  height: 4px;
  background: #ffcc00;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 4px #ffaa00;
  animation: spark-fly 0.5s linear forwards;
}

@keyframes spark-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0);
  }
}

/* 3. SKELETON LOADING */
.skeleton {
  background: #1a1f2b;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Классы-заглушки */
.sk-card {
  height: 140px;
  width: 100%;
  margin-bottom: 10px;
}

.sk-text {
  height: 16px;
  width: 70%;
  background: rgba(255, 255, 255, 0.05);
  margin-top: 8px;
  border-radius: 4px;
}

/* === BONUS CREEP (СНЕГОВИК) === */
.bonus-creep {
  position: fixed;
  width: 64px;
  height: 64px;
  z-index: 9000;
  /* Поверх контента, но под модалками */
  cursor: pointer;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  animation: creepPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), creepShake 3s ease-in-out infinite;
  touch-action: manipulation;
  transition: filter 0.2s;
}

.bonus-creep:active {
  transform: scale(0.95);
  filter: brightness(1.2);
}

/* Анимация исчезновения (Пуф!) */
.bonus-creep.poof {
  pointer-events: none;
  animation: creepPoof 0.4s ease-out forwards;
}

@keyframes creepPopIn {
  from {
    transform: scale(0) translateY(20px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes creepShake {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  75% {
    transform: rotate(5deg);
  }
}

@keyframes creepPoof {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0px);
  }

  50% {
    transform: scale(1.4);
    opacity: 0.5;
    filter: blur(4px);
  }

  100% {
    transform: scale(2);
    opacity: 0;
    filter: blur(8px);
  }
}

/* Всплывающий текст +10 */
.float-text {
  position: fixed;
  color: #ffd700;
  font-weight: 900;
  font-size: 24px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 9001;
  pointer-events: none;
  animation: floatUpFade 1s ease-out forwards;
}

@keyframes floatUpFade {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }

  20% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }

  100% {
    transform: translateY(-60px) scale(1);
    opacity: 0;
  }
}

/* === BUTTON SHINE (БЛИК) === */
.btn.accent {
  position: relative;
  overflow: hidden;
  /* Чтобы блик не вылетал */
}

.btn.accent::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  animation: btnShine 4s infinite;
  pointer-events: none;
}

@keyframes btnShine {

  0%,
  80% {
    left: -100%;
  }

  /* Пауза */
  100% {
    left: 200%;
  }

  /* Пролет */
}

/* === DROP MODAL (Bottom Sheet) === */
.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000; /* Поверх всего */
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end; /* Прижимаем к низу */
  justify-content: center;
  opacity: 0;
  animation: fadeInOverlay 0.3s forwards;
}

.drop-sheet {
  position: relative;
  width: 100%;
  max-width: 500px;
  background: #121622; /* Темная подложка */
  background: linear-gradient(180deg, #1a1f2b 0%, #0c0d12 100%);
  border-radius: 32px 32px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
  padding: 32px 24px 40px;
  transform: translateY(100%);
  animation: slideUpSheet 0.4s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.1s;
  overflow: hidden;
  text-align: center;
}

/* Анимации */
@keyframes fadeInOverlay { to { opacity: 1; } }

@keyframes slideUpSheet { to { transform: translateY(0); } }

/* Эффект свечения позади предмета */
.drop-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-color, #fff) 0%, transparent 70%);
  opacity: 0.4;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: pulseGlow 3s infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.2); }
}

.drop-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.drop-header {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
}

.drop-item-view {
  position: relative;
  margin: 10px 0;
}

.drop-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
  animation: floatItem 3s ease-in-out infinite;
}

@keyframes floatItem {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.drop-rarity-badge {
  margin-top: 12px;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--glow-color, #fff);
  box-shadow: 0 0 15px var(--glow-color, rgba(255,255,255,0.2));
}

.drop-info h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.drop-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 16px;
  color: #cbd5e1;
}

.drop-price .coin-icon {
  width: 18px;
  height: 18px;
}

.drop-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

/* Кнопки */
.btn-keep {
  width: 100%;
  padding: 16px;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%); /* Красная */
  border: none;
  box-shadow: 0 4px 0 #7f1d1d, 0 8px 20px rgba(239, 68, 68, 0.3);
  color: white;
  font-size: 16px;
  border-radius: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.1s;
}

.btn-keep:active {
  box-shadow: 0 1px 0 #7f1d1d;
  transform: translateY(3px);
}

.btn-melt {
  width: 100%;
  padding: 12px;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%); /* Зеленая */
  border: none;
  box-shadow: 0 4px 0 #14532d, 0 8px 20px rgba(34, 197, 94, 0.3);
  color: white;
  border-radius: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.1s;
}

.btn-melt:active {
  box-shadow: 0 1px 0 #14532d;
  transform: translateY(3px);
}

.btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.btn-content span:first-child {
  font-size: 15px; 
  font-weight: 700;
}

.btn-content .sub {
  font-size: 11px; 
  opacity: 0.9; 
  font-weight: 600;
}

#confetti-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* === FROG MATCH UPGRADE === */

/* 1. Дыхание врага (Idle Animation) */
.fe-sprite img {
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
  animation: enemyFloat 3s ease-in-out infinite;
}

@keyframes enemyFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.02); }
}

/* 2. Стеклянные колбы для статов */
/* ИСПРАВЛЕНИЕ ДЛЯ КОЛБОЧЕК (Жидкость на дне) */
.fe-bar-bg-vertical {
  position: relative !important; /* Важно: контейнер должен быть relative */
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
  border-radius: 10px !important; /* Более круглые */
  width: 12px !important; /* Чуть шире */
}

.fe-bar-fill-vertical {
  position: absolute !important; /* Важно: абсолютное позиционирование */
  bottom: 0 !important;          /* Приклеиваем к низу */
  left: 0;
  width: 100%;
  border-radius: 0 0 10px 10px; /* Закругление только снизу */
  transition: height 0.3s ease;
  z-index: 1;
  overflow: hidden;
}

/* Блик на жидкости */
.fe-bar-fill-vertical::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: rgba(255,255,255,0.4);
  filter: blur(1px);
}

/* 3. Игровое поле (Слот для рун) */
.frog-field {
  background: rgba(16, 20, 30, 0.85) !important;
  border: 2px solid rgba(76, 201, 240, 0.15);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.3);
  padding: 12px !important;
  gap: 6px !important;
}

/* 4. Ячейки (Глубина) */
.frog-cell {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
  border-radius: 12px !important;
}

.frog-cell:active {
  transform: scale(0.92) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* === PROCAST UPGRADE === */

/* 1. Сферы как магические шары */
.pc-sphere {
  border: 2px solid rgba(255,255,255,0.1);
  transition: all 0.1s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Эффект нажатия (активный неон) */
.pc-sphere:active, .pc-sphere.pressed {
  transform: scale(0.95);
}

.pc-sphere.q:active { 
  box-shadow: 0 0 20px #42a5f5, inset 0 0 10px #42a5f5; 
  border-color: #42a5f5; 
}

.pc-sphere.w:active { 
  box-shadow: 0 0 20px #ba68c8, inset 0 0 10px #ba68c8; 
  border-color: #ba68c8; 
}

.pc-sphere.e:active { 
  box-shadow: 0 0 20px #ffb74d, inset 0 0 10px #ffb74d; 
  border-color: #ffb74d; 
}

/* 2. Блок выбранных сфер (Result slots) */
.pc-picked {
  background: rgba(0,0,0,0.3);
  border-radius: 50px;
  padding: 8px;
  justify-content: center; /* Центрируем сферы */
  border: 1px solid rgba(255,255,255,0.05);
  min-height: 64px;
}

/* Анимация появления сферы в слоте */
.pc-picked .pc-sphere {
  animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin: 0 4px;
}

@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 3. Таймер опасности */
#pc-timer.danger {
  color: #ff4444;
  animation: pulseTimer 0.5s infinite;
}

@keyframes pulseTimer {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* === QUIZ UPGRADE === */

.quiz-card {
  background: linear-gradient(160deg, #1e2330 0%, #12141a 100%) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* 1. Блок вопроса */
.quiz-question {
  background: rgba(0,0,0,0.3);
  padding: 16px;
  border-radius: 12px;
  border-left: 4px solid var(--accent);
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

/* 2. Сетка вариантов (2x2 для десктопа, 1x4 для мобилок если узко) */
.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Две колонки */
  gap: 10px;
}

@media (max-width: 400px) {
  .quiz-options { 
    grid-template-columns: 1fr; /* Одна колонка на узких */
  }
}

/* 3. Кнопки ответов */
.quiz-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
  padding: 14px 10px !important;
  font-size: 14px !important;
  text-align: left !important;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.quiz-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px);
  border-color: var(--accent) !important;
}

.quiz-btn:active {
  transform: scale(0.98);
  background: var(--accent) !important;
  color: #000 !important;
}

/* Декоративная буква варианта (A, B, C, D) */
.quiz-btn::first-letter {
  font-weight: 900;
  color: var(--accent);
  margin-right: 4px;
}

/* === FROG MATCH ANIMATIONS === */

/* 1. Анимация падения с отскоком */
.frog-sphere {
  /* Убедимся, что сфера знает свое место */
  position: relative; 
  z-index: 1;
  /* Плавность для обычных состояний */
  transition: transform 0.2s, filter 0.2s; 
}

.frog-sphere.falling {
  animation: sphereLand 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; /* Эффект пружины */
}

@keyframes sphereLand {
  0% {
    opacity: 0;
    /* Падает с высоты, заданной в JS */
    transform: translateY(var(--drop-height, -100%)); 
  }
  60% {
    opacity: 1;
    transform: translateY(5px); /* Легкое проминание вниз */
  }
  80% {
    transform: translateY(-3px); /* Отскок вверх */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Финальная позиция */
  }
}

/* 2. Анимация уничтожения (Матч) */
.frog-cell.matched .frog-sphere {
  animation: matchPop 0.3s ease-in forwards;
}

@keyframes matchPop {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.3); filter: brightness(1.5); } /* Вспышка */
  100% { transform: scale(0); opacity: 0; }
}

/* 3. Супер-удар (Тряска экрана) */
.frog-match-game.shake-hard {
  animation: screenShake 0.5s ease-in-out;
}

/* Вспышка поверх игры при супер-ударе */
.frog-match-game.shake-hard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  animation: flashFade 0.5s ease-out forwards;
  pointer-events: none;
  z-index: 100;
  border-radius: 12px;
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-5px, -5px) rotate(-1deg); }
  20%, 40%, 60%, 80% { transform: translate(5px, 5px) rotate(1deg); }
}

@keyframes flashFade {
  0% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* 4. Эффект каскада (Комбо) */
.frog-field.combo-active {
  box-shadow: inset 0 0 30px #ffd700, 0 0 20px #ffd700;
  transition: box-shadow 0.3s ease;
  border-color: #ffd700;
}

/* Сферы во время каскада светятся */
.frog-field.combo-active .frog-sphere {
  filter: brightness(1.2);
}

/* =========================================
   MODERN ADMIN UI (V2)
   ========================================= */

/* --- 1. Сетка и Карточки --- */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  padding-bottom: 80px;
}

.adm-card {
  background: linear-gradient(145deg, rgba(30, 35, 50, 0.9), rgba(20, 25, 35, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s;
}

.adm-card:active { transform: scale(0.98); }

.adm-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #555;
}

.adm-card.active::before { background: #22c55e; box-shadow: 0 0 10px #22c55e; }
.adm-card.inactive::before { background: #ef4444; }
.adm-card.promo-coins::before { background: #fbbf24; }
.adm-card.promo-case::before { background: #a855f7; }

/* --- 2. Типографика Карточки --- */
.adm-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 8px;
}

.adm-code {
  font-family: 'ui-monospace', monospace;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(0,0,0,0.3);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px dashed rgba(255,255,255,0.2);
}

.adm-meta {
  font-size: 12px;
  color: #9aa3b2;
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* --- 3. Bottom Sheet (Шторка снизу) --- */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(4px);
}

.bottom-sheet-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.bottom-sheet {
  width: 100%;
  background: #1a1f2b;
  border-radius: 24px 24px 0 0;
  padding: 24px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  max-height: 85vh;
  overflow-y: auto;
}

.bottom-sheet-overlay.open .bottom-sheet {
  transform: translateY(0);
}

/* --- 4. UI Элементы --- */
.adm-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #4cc9f0;
  color: #000;
  font-size: 28px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(76, 201, 240, 0.4);
  cursor: pointer;
  z-index: 100;
  border: none;
}

.adm-fab:active { transform: scale(0.9); }

.type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.type-btn {
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  cursor: pointer;
  text-align: center;
}

.type-btn.selected {
  background: #4cc9f0;
  color: #000;
  border-color: #4cc9f0;
  font-weight: 700;
}

.tinder-card {
  background: #121622;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 20px;
  margin: 0 auto;
  max-width: 400px;
}

.tinder-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.tinder-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 24px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.tb-reject {
  background: #ef4444;
  color: white;
}

.tb-accept {
  background: #22c55e;
  color: white;
}

/* Toast уведомления */
.toast-notification {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 10001;
  background: rgba(26, 31, 43, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 20px;
  min-width: 200px;
  max-width: 90%;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.toast-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast-notification.toast-success {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.toast-notification.toast-error {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.toast-notification.toast-info {
  border-color: #4cc9f0;
  background: rgba(76, 201, 240, 0.15);
}

/* Overlay блокировки пользователя */
#ban-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(10px);
  animation: banFadeIn 0.5s ease-out;
}

@keyframes banFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ban-content {
  text-align: center;
  max-width: 500px;
  padding: 40px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
  border: 2px solid rgba(239, 68, 68, 0.5);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(239, 68, 68, 0.3);
  animation: banSlideIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes banSlideIn {
  from {
    transform: translateY(-30px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.ban-icon {
  font-size: 80px;
  margin-bottom: 20px;
  animation: banPulse 2s ease-in-out infinite;
}

@keyframes banPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.ban-title {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px 0;
  text-shadow: 0 2px 10px rgba(239, 68, 68, 0.5);
}

.ban-message {
  font-size: 18px;
  color: #fca5a5;
  margin: 0 0 24px 0;
  line-height: 1.6;
  font-weight: 500;
}

.ban-support {
  font-size: 14px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.6;
}

.ban-support a {
  color: #4cc9f0;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.ban-support a:hover {
  color: #22c55e;
}