/* Цвета берутся из темы Telegram, запасные значения — для обычного браузера */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #000000);
  --hint: var(--tg-theme-hint-color, #8a8a8a);
  --button: var(--tg-theme-button-color, #2481cc);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #f0f0f0);
  --accent: var(--tg-theme-accent-text-color, #2481cc);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 12px 16px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body.no-scroll {
  overflow: hidden;
}

button {
  font: inherit;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
}

button.secondary,
button.primary {
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 15px;
}

button.secondary {
  background: var(--secondary-bg);
  color: var(--accent);
}

button.primary {
  background: var(--button);
  color: var(--button-text);
}

.header {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.header h1 {
  margin: 0;
  font-size: 22px;
}

.status {
  color: var(--hint);
  text-align: center;
}

.status:empty {
  display: none;
}

/* Сетка превью. Размер плиток выбирается в коллекции (#gallery[data-size]), форма у всех одна — 3:4 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

#gallery[data-size='small'] .grid {
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
}

#gallery[data-size='medium'] .grid {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

#gallery[data-size='large'] .grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

#gallery[data-size='small'] .tile .caption {
  padding: 10px 4px 3px;
  font-size: 10px;
}

#gallery[data-size='small'] .tile .badge,
#gallery[data-size='small'] .tile .tile-number {
  padding: 0 4px;
  font-size: 9px;
}

#gallery[data-size='large'] .tile .caption {
  padding: 18px 8px 7px;
  font-size: 14px;
}

.tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  background: var(--secondary-bg);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile.is-hidden img {
  opacity: 0.35;
}

.tile .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 6px 5px;
  font-size: 12px;
  color: #fff;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}

.tile .badges {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 4px;
}

.tile .badge {
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

/* Просмотр фото */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
}

.viewer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}

.viewer-counter {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.icon-button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  padding: 4px 8px;
}

.viewer-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 64px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 32px;
  line-height: 1;
}

.nav-button.prev {
  left: 8px;
}

.nav-button.next {
  right: 8px;
}

.viewer-info {
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}

.viewer-title {
  margin: 0 0 4px;
  font-size: 18px;
  word-break: break-word;
}

.viewer-file {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  word-break: break-all;
}

.hidden-label {
  margin-left: 6px;
  color: #ffb74d;
}

.admin-panel {
  margin-top: 12px;
}

.admin-actions,
.edit-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.edit-form input {
  flex: 1 1 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  /* 16px — чтобы iOS не увеличивал страницу при фокусе */
  font-size: 16px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.viewer button.secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

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

.balance {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

/* Закрытые (не купленные) картинки: размытое на сервере превью, поверх — замок и цена */
.tile.is-locked .lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.viewer-locked {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: 16px;
  font-size: 16px;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.viewer-locked .lock-icon {
  font-size: 48px;
}

/* Купленные 18+ при включённом размытии */
.tile.is-blurred img {
  filter: blur(14px);
  transform: scale(1.15); /* чтобы размытые края не просвечивали фоном */
}

.viewer-stage {
  overflow: hidden;
}

.viewer-stage img.blurred {
  filter: blur(28px);
}

.viewer-reveal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}

/* Настройки */
.settings {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.settings-sheet {
  width: 100%;
  max-width: 560px;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--bg);
  color: var(--text);
}

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

.settings-head h2 {
  margin: 0;
  font-size: 18px;
}

.settings-close {
  border: 0;
  background: transparent;
  color: var(--hint);
  font-size: 20px;
  padding: 4px 8px;
}

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--secondary-bg);
  cursor: pointer;
}

.setting span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.setting b {
  font-weight: 500;
}

.setting small {
  color: var(--hint);
  font-size: 13px;
}

.setting input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  accent-color: var(--button);
}

/* Редкость: цвет имени и рамки плитки */
.rarity-common {
  color: #ffffff;
}

.rarity-uncommon {
  color: #4cd964;
}

.rarity-rare {
  color: #ffe14d;
}

.rarity-mythic {
  color: #ff9933;
}

/* Шедевр — чёрный текст с чёткой белой обводкой (тени без размытия в 8 сторон).
   -webkit-text-stroke не подходит: рисует обводку поверх букв и «съедает» чёрную заливку */
.rarity-masterpiece {
  color: #0a0a0a;
  text-shadow:
    -1px -1px 0 #fff,
    0 -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 0 0 #fff,
    1px 0 0 #fff,
    -1px 1px 0 #fff,
    0 1px 0 #fff,
    1px 1px 0 #fff;
}

.viewer-rarity {
  font-weight: 600;
}

.viewer-title {
  width: fit-content;
  max-width: 100%;
}

.tile.tile-uncommon {
  box-shadow: inset 0 0 0 2px #4cd964;
}

.tile.tile-rare {
  box-shadow: inset 0 0 0 2px #ffe14d;
}

.tile.tile-mythic {
  box-shadow: inset 0 0 0 2px #ff9933;
}

.tile.tile-masterpiece {
  box-shadow:
    inset 0 0 0 3px #0a0a0a,
    inset 0 0 0 4px rgba(255, 255, 255, 0.8),
    0 0 8px rgba(255, 255, 255, 0.5);
}

/* Рамка поверх картинки */
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inherit;
  pointer-events: none;
}

/* Вкладки вида галереи */
.view-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--secondary-bg);
}

.view-tab {
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: 7px 0;
  font-size: 15px;
  background: transparent;
  color: var(--hint);
}

.view-tab.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Фильтры */
.filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-label {
  width: 100%;
  font-size: 12px;
  color: var(--hint);
}

.chip {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 14px;
  background: var(--secondary-bg);
  color: var(--text);
}

.chip.active {
  background: var(--button);
  color: var(--button-text);
}

.chip.reset {
  align-self: flex-start;
  background: transparent;
  color: var(--accent);
  padding-left: 0;
}

.chip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Цветные точки редкости в чипах (на светлом фоне белый текст не виден — поэтому точки) */
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.5);
}

.dot-common {
  background: #ffffff;
}

.dot-uncommon {
  background: #4cd964;
}

.dot-rare {
  background: #ffe14d;
}

.dot-mythic {
  background: #ff9933;
}

.dot-masterpiece {
  background: #0a0a0a;
  box-shadow: 0 0 0 1px #fff, 0 0 4px rgba(255, 255, 255, 0.8);
}

/* Группы по сетам */
.set-section + .set-section {
  margin-top: 20px;
}

.set-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.set-head h2 {
  margin: 0;
  font-size: 17px;
}

.set-progress {
  font-size: 13px;
  color: var(--hint);
  white-space: nowrap;
}

/* Номер в сете на плитке */
.tile .tile-number {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

/* ==================== Меню ==================== */

.profile-card {
  border-radius: 16px;
  overflow: hidden;
  background: var(--secondary-bg);
  margin-bottom: 16px;
}

/* Баннер — одна из открытых картинок; без неё — градиент с подсказкой */
.banner {
  position: relative;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: linear-gradient(135deg, var(--button), #9775fa);
}

.banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-hint {
  font-size: 13px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.banner.has-image .banner-hint {
  display: none;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 14px;
}

.avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  margin-top: -28px; /* аватар наполовину на баннере */
  position: relative;
  border-radius: 50%;
  border: 3px solid var(--secondary-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  background: var(--button);
  color: var(--button-text);
}

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

.profile-info {
  flex: 1;
  min-width: 0;
  padding-top: 8px;
}

.profile-name {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.balances {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.balance-chip {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: var(--bg);
}

.icon-round {
  align-self: flex-end;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  background: var(--bg);
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.menu-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 116px;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  text-align: left;
  background: var(--secondary-bg);
  color: var(--text);
}

.menu-tile:active {
  transform: scale(0.97);
}

.menu-icon {
  font-size: 30px;
  margin-bottom: auto;
}

.menu-title {
  font-size: 17px;
  font-weight: 600;
}

.menu-sub {
  font-size: 12px;
  color: var(--hint);
}

.menu-tile.dark {
  background: linear-gradient(135deg, #1b1b22, #2d1f3d);
  color: #f1e9ff;
}

.menu-tile.dark .menu-sub {
  color: #b9a6d6;
}

.hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--hint);
}

.banner-button {
  margin-top: 10px;
}

/* ==================== Паки ==================== */

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

.pack {
  padding: 14px;
  border-radius: 14px;
  background: var(--secondary-bg);
}

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

.pack-head h2 {
  margin: 0;
  font-size: 17px;
}

.pack-price {
  font-weight: 700;
  white-space: nowrap;
}

.pack-desc {
  margin: 4px 0 0;
  font-size: 14px;
}

.pack-meta {
  margin: 4px 0 8px;
  font-size: 12px;
  color: var(--hint);
}

.chances {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 12px;
  font-size: 12px;
}

.chance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

button.wide,
.pack-buy {
  width: 100%;
  padding: 11px;
  font-size: 15px;
  font-weight: 600;
}

/* Чёрный рынок — тёмная витрина в любой теме */
.market-screen .pack-dark {
  background: linear-gradient(160deg, #17151d, #2a1d38);
  color: #eee6ff;
}

.market-screen .pack-dark .pack-meta {
  color: #a898c4;
}

.market-screen .pack-dark .pack-buy {
  background: #8e5cf7;
  color: #fff;
}

/* ==================== Результат открытия пака ==================== */

.results {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.8);
}

.results-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  overflow-y: auto;
  text-align: center;
  color: #fff;
}

.results-title {
  margin: 0 0 16px;
}

.results-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.result-card {
  width: 140px;
  aspect-ratio: 3 / 4.4;
  perspective: 800px;
}

.result-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.result-card.flipped .result-inner {
  transform: rotateY(180deg);
}

.result-back,
.result-front {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  overflow: hidden;
}

.result-back {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(135deg, #3b5bdb, #9775fa);
}

.result-front {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  background: #1c1c22;
}

.result-image {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-image img.blurred {
  filter: blur(14px);
  transform: scale(1.15);
}

.result-title {
  padding: 6px 6px 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-rarity {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.result-badge {
  margin: 6px;
  padding: 3px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.result-badge.new {
  background: #2f9e44;
}

.result-badge.duplicate {
  background: #5f3dc4;
}

/* Свечение редких карт после переворота */
.result-card.flipped.rarity-glow-rare .result-inner {
  box-shadow: 0 0 14px rgba(255, 225, 77, 0.6);
  border-radius: 12px;
}

.result-card.flipped.rarity-glow-mythic .result-inner {
  box-shadow: 0 0 18px rgba(255, 153, 51, 0.75);
  border-radius: 12px;
}

.result-card.flipped.rarity-glow-masterpiece .result-inner {
  box-shadow: 0 0 0 2px #fff, 0 0 22px rgba(255, 255, 255, 0.8);
  border-radius: 12px;
}

.results-summary {
  min-height: 20px;
  margin: 0 0 14px;
  font-size: 14px;
}

/* ==================== Игры ==================== */

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

.limit-text {
  font-size: 13px;
  color: var(--hint);
  margin-bottom: 4px;
}

.limit-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--secondary-bg);
  overflow: hidden;
}

.limit-fill {
  height: 100%;
  background: var(--button);
}

.game-card {
  padding: 14px;
  border-radius: 14px;
  background: var(--secondary-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.game-head h2 {
  margin: 0;
  font-size: 17px;
}

.game-sub {
  font-size: 12px;
  color: var(--hint);
  text-align: right;
}

.game-result {
  min-height: 18px;
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.game-result.win {
  color: #2fb344;
}

.game-result.lose {
  color: #e03131;
}

.game-result.even {
  color: var(--hint);
}

/* Ежедневный бонус */
.streak {
  display: flex;
  gap: 6px;
  justify-content: space-between;
}

.streak-day {
  flex: 1;
  padding: 6px 0;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  background: var(--bg);
  color: var(--hint);
}

.streak-day.done {
  background: var(--button);
  color: var(--button-text);
  font-weight: 600;
}

/* Колесо фортуны */
.wheel-wrap {
  position: relative;
  width: min(260px, 100%);
  aspect-ratio: 1;
  margin: 6px auto 0;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid var(--bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  position: relative;
}

.wheel.spinning {
  transition: transform 4s cubic-bezier(0.15, 0.85, 0.25, 1);
}

.wheel-label {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  padding-top: 14px;
  pointer-events: none;
}

.wheel-label b {
  font-size: 16px;
  color: #1a1a1a;
}

.wheel-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 26px;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Монетка */
.coin-wrap {
  display: flex;
  justify-content: center;
  perspective: 600px;
}

.coin {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #6b4b00;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c94c 55%, #c99a1a);
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.25);
}

.coin.flipping {
  animation: coin-flip 1.2s ease-out;
}

@keyframes coin-flip {
  from {
    transform: rotateY(0) translateY(0);
  }
  50% {
    transform: rotateY(900deg) translateY(-30px);
  }
  to {
    transform: rotateY(1800deg) translateY(0);
  }
}

.coin-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.coin-buttons button {
  padding: 11px;
  font-weight: 600;
}

.bet-chips {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Слоты */
.reels {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.reel {
  width: 76px;
  height: 84px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  background: var(--bg);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
}

.reel.rolling {
  filter: blur(1px);
}

.paytable summary {
  font-size: 13px;
  color: var(--hint);
  cursor: pointer;
}

.paytable-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
  font-size: 13px;
}

/* ==================== Уведомление из админки ==================== */

.announcement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  background: #fff4d6;
  color: #5c4300;
  white-space: pre-wrap;
}

.announcement span {
  flex: 1;
}

.announcement-close {
  border: 0;
  padding: 0 4px;
  font-size: 16px;
  background: transparent;
  color: inherit;
  opacity: 0.7;
}

/* ==================== Картинки интерфейса (webapp/ui) ==================== */

.ui-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-icon .ui-img {
  width: 40px;
  height: 40px;
}

.pack-art {
  margin: -14px -14px 12px;
  height: 120px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}

.pack-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-back .ui-img {
  object-fit: cover;
}

/* ==================== Язык ==================== */

.lang-switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--secondary-bg);
}

.lang-switch button {
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  background: transparent;
  color: var(--hint);
}

.lang-switch button.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}

/* ==================== Аркады ==================== */

.game-note {
  margin: 0;
  font-size: 12px;
  color: var(--hint);
  text-align: center;
}

.arcade-timer {
  min-height: 18px;
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.tap-area {
  width: 100%;
  height: 160px;
  border: 0;
  border-radius: 16px;
  font-size: 32px;
  font-weight: 700;
  background: var(--button);
  color: var(--button-text);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.tap-area.active {
  background: linear-gradient(135deg, #ff922b, #f06595);
  color: #fff;
}

.tap-area:active {
  transform: scale(0.98);
}

.memory-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.memory-board:empty {
  display: none;
}

.memory-card {
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  font-size: 30px;
  background: var(--button);
  color: var(--text);
  transition: background 0.2s;
}

.memory-card.open {
  background: var(--bg);
}

.memory-card.matched {
  background: var(--bg);
  opacity: 0.55;
}

/* ==================== Значки сетов ==================== */

.set-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.3em;
  vertical-align: -0.2em;
  object-fit: contain;
}

.set-icon.emoji {
  width: auto;
  height: auto;
  vertical-align: baseline;
}

/* На миниатюре: значок и номер в одной плашке */
.tile .tile-number {
  display: inline-flex;
  align-items: center;
}

.tile .tile-number .set-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  vertical-align: middle;
}

.tile .tile-number .set-icon.emoji {
  font-size: 11px;
  width: auto;
  height: auto;
}

.set-head h2,
.pack-head h2 {
  display: flex;
  align-items: center;
}

/* ==================== Сетка паков (прямоугольные плитки) ==================== */

/* Телефон — 2 колонки; на широких экранах колонки добавляются, а плитка не шире ~280px */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 600px) {
  .pack-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1000px) {
  .pack-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
  }
}

.pack-tile {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  background: var(--secondary-bg);
  color: var(--text);
}

.pack-tile:active {
  transform: scale(0.98);
}

.pack-tile-cover,
.pack-detail-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--button), #9775fa);
}

/* Высота обложки задаётся через padding-top (а не aspect-ratio): старые WebView Telegram
   не знают aspect-ratio, и обложка с абсолютно позиционированным содержимым схлопывалась в 0 */
.pack-tile-cover {
  position: relative;
  flex-shrink: 0;
  height: 0;
  padding-top: 56.25%; /* 16:9 */
}

.pack-tile-cover > img,
.pack-detail-cover > img {
  position: absolute;
  top: 0;
  left: 0;
}

.pack-tile-cover > .pack-cover-icon,
.pack-detail-cover > .pack-cover-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pack-tile-cover.dark,
.pack-detail-cover.dark {
  background: linear-gradient(135deg, #1b1b22, #4a2d6b);
}

.pack-tile-cover img,
.pack-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pack-cover-icon {
  font-size: 34px;
  line-height: 1;
}

.pack-cover-icon .set-icon {
  width: 44px;
  height: 44px;
  margin: 0;
}

.pack-tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
}

.pack-tile-title {
  display: flex;
  flex-wrap: wrap; /* бейдж «эксклюзив/скрыто» переносится под название на узких плитках */
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.pack-tile-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.pack-tile-title .visibility-badge {
  margin-left: 0;
  white-space: nowrap;
}

.pack-tile-price {
  font-size: 14px;
  font-weight: 700;
}

.pack-tile-meta {
  font-size: 11px;
  color: var(--hint);
}

.market-screen .pack-tile.pack-dark {
  background: linear-gradient(160deg, #17151d, #2a1d38);
  color: #eee6ff;
}

.market-screen .pack-tile.pack-dark .pack-tile-meta {
  color: #a898c4;
}

/* ==================== Окно пака ==================== */

.pack-detail {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.pack-detail-sheet {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 0 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--bg);
  color: var(--text);
}

.pack-detail-top {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  height: 0;
}

.pack-detail-top .settings-close {
  margin: 8px -8px 0 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.pack-detail-cover {
  position: relative;
  height: 0;
  padding-top: 41.67%; /* 2.4:1 */
  margin: 0 -16px 12px;
}

.pack-detail-cover .pack-cover-icon {
  font-size: 48px;
}

.pack-detail-cover .set-icon {
  width: 64px;
  height: 64px;
}

.pack-head h2 .set-icon {
  margin-right: 6px;
}

.pack-detail-buy {
  margin: 4px 0 6px;
}

.pack-section-title {
  margin: 18px 0 8px;
  font-size: 15px;
}

/* Шансы */
.chance-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chance-row {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr 48px;
  align-items: center;
  gap: 4px 8px;
  font-size: 13px;
}

.chance-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chance-bar {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--secondary-bg);
}

.chance-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 3px;
}

.fill-common { background: #ced4da; }
.fill-uncommon { background: #4cd964; }
.fill-rare { background: #ffd43b; }
.fill-mythic { background: #ff9933; }
.fill-masterpiece { background: #0a0a0a; box-shadow: inset 0 0 0 1px #fff; }

.chance-percent {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chance-count {
  grid-column: 2 / 4;
  margin-top: -4px;
  font-size: 11px;
  color: var(--hint);
}

/* Миниатюры карт внутри пака */
.pack-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}

.pack-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: var(--secondary-bg);
}

.pack-thumb-image {
  position: absolute;
  inset: 0;
}

.pack-thumb-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pack-thumb-image img.blurred {
  filter: blur(10px);
  transform: scale(1.15);
}

/* Ещё не собранные — чуть приглушены */
.pack-thumb.not-owned .pack-thumb-image img {
  filter: saturate(0.6) brightness(0.85);
}

.pack-thumb-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 6px 4px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.pack-thumb-owned {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  background: #2f9e44;
  color: #fff;
}

/* Рамка редкости поверх миниатюры (как у плиток галереи) */
.pack-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inherit;
  pointer-events: none;
}

.pack-thumb.tile-uncommon { box-shadow: inset 0 0 0 2px #4cd964; }
.pack-thumb.tile-rare { box-shadow: inset 0 0 0 2px #ffe14d; }
.pack-thumb.tile-mythic { box-shadow: inset 0 0 0 2px #ff9933; }
.pack-thumb.tile-masterpiece { box-shadow: inset 0 0 0 3px #0a0a0a, inset 0 0 0 4px rgba(255, 255, 255, 0.8); }

/* ==================== Обложка пака: три карты с диагональными переходами ==================== */

.pack-tile-cover,
.pack-detail-cover {
  position: relative;
}

.pack-mosaic {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #1c1c22;
}

.pack-mosaic-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.pack-mosaic-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pack-mosaic-layer img.blurred {
  filter: blur(8px);
  transform: scale(1.15);
}

/* Каждая карта — своя диагональная полоса с чёткой границей (clip-path).
   Между полосами — светлая линия 2px: это фон мозаики, видный в зазоре между полосами */
.pack-mosaic {
  background: rgba(255, 255, 255, 0.9);
}

.pack-mosaic-layer {
  left: 0;
  right: 0;
}

/* Картинка занимает только свою полосу (по её ширине), а не всю обложку */
.pack-mosaic-layer img {
  position: absolute;
  top: 0;
  height: 100%;
}

.pack-cover-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 3;
  display: inline-flex;
  padding: 3px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
}

.pack-cover-badge .set-icon {
  width: 20px;
  height: 20px;
  margin: 0;
}

/* ==================== Иконка пака, инвентарь, кнопки открыть/купить ==================== */

.pack-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.3em;
  vertical-align: -0.25em;
  object-fit: contain;
}

.pack-cover-icon .pack-icon {
  width: 48px;
  height: 48px;
  margin: 0;
}

.pack-cover-badge .pack-icon {
  width: 22px;
  height: 22px;
  margin: 0;
}


.pack-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}

.pack-inventory-line {
  margin: 0;
  font-weight: 600;
}

.pack-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pack-action-row button {
  padding: 10px 6px;
  font-size: 14px;
  font-weight: 600;
}



/* Карта-награда: значок и сумма вместо картинки */
.reward-face {
  position: absolute;
  inset: 0 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(160deg, #343a40, #1c1c22);
  color: #fff;
}

.reward-icon {
  font-size: 30px;
}

.result-front.reward {
  position: absolute;
}

.result-front.reward .reward-face {
  inset: 0 0 46px;
  font-size: 15px;
}

.result-front.reward .result-rarity {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
}

.result-front.reward .result-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.result-badge.reward {
  background: #e8590c;
}

/* Много карт (открытие пачкой) — карты поменьше */
.results-cards.many .result-card {
  width: 104px;
}

.results-cards.many .result-title {
  font-size: 11px;
}

/* ==================== Свои паки: зелёная плитка и количество в углу ==================== */

.pack-tile {
  position: relative;
}

.pack-tile.has-packs,
.market-screen .pack-tile.pack-dark.has-packs {
  background: linear-gradient(160deg, #2f9e44, #237a35);
  color: #fff;
  box-shadow: 0 0 0 2px #40c057;
}

.pack-tile.has-packs .pack-tile-meta,
.market-screen .pack-tile.pack-dark.has-packs .pack-tile-meta {
  color: rgba(255, 255, 255, 0.85);
}

.pack-count {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  background: #40c057;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* ==================== Промокоды ==================== */

.menu-tile.wide {
  grid-column: 1 / -1;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f76707, #e64980);
  color: #fff;
}

.menu-tile.wide .menu-icon {
  margin: 0;
}

.menu-tile.wide .menu-sub {
  color: rgba(255, 255, 255, 0.85);
  margin-left: auto;
  text-align: right;
}

.promo-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.promo-form input {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border: 2px solid var(--secondary-bg);
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--text);
}

.promo-form input:focus {
  outline: none;
  border-color: var(--button);
}

.promo-form button {
  padding: 0 16px;
  font-weight: 600;
}

.promo-result {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
}

.promo-result.success {
  background: rgba(64, 192, 87, 0.15);
  border: 1px solid #40c057;
}

.promo-result.error {
  background: rgba(224, 49, 49, 0.12);
  border: 1px solid #e03131;
}

.promo-rewards {
  margin: 6px 0 0;
  padding-left: 20px;
}

.promo-card-name {
  font-weight: 600;
}

.promo-section-title {
  margin: 8px 0;
  font-size: 16px;
}

.promo-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.promo-history-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--secondary-bg);
}

.promo-history-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.promo-date {
  font-size: 12px;
  color: var(--hint);
}

/* ---------- Эксклюзивные и тестовые карты и паки ---------- */

.tile.is-exclusive {
  box-shadow: 0 0 0 2px #be4bdb;
}

.visibility-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
  background: rgba(127, 127, 127, 0.18);
}

.visibility-badge.visibility-exclusive {
  color: #be4bdb;
}

.visibility-badge.visibility-test {
  color: #f76707;
}

.pack-exclusive-note {
  margin: 4px 0 8px;
  font-size: 13px;
  color: #be4bdb;
}

/* Видимость пака (администратор) */
.pack-admin {
  margin: 4px 0 12px;
}

.pack-admin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pack-admin-row .chip.active {
  opacity: 1;
}

/* ---------- Рамки паков: эксклюзив — фиолетовая, тест — жёлто-чёрная ---------- */
/* Рамка рисуется поверх плитки (::after), поэтому не спорит с зелёной подсветкой «есть паки» */
.pack-tile.vis-exclusive,
.pack-tile.vis-test,
.pack-detail-cover.vis-exclusive,
.pack-detail-cover.vis-test {
  position: relative;
}

.pack-tile.vis-exclusive::after,
.pack-tile.vis-test::after,
.pack-detail-cover.vis-exclusive::after,
.pack-detail-cover.vis-test::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 3px;
  border-radius: inherit;
  pointer-events: none;
  /* Оставляем только полосу по краю */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.pack-tile.vis-exclusive::after,
.pack-detail-cover.vis-exclusive::after {
  background: linear-gradient(135deg, #da77f2, #7048e8, #be4bdb);
}

.pack-tile.vis-exclusive {
  box-shadow: 0 0 12px rgba(190, 75, 219, 0.55);
}

.pack-tile.vis-test::after,
.pack-detail-cover.vis-test::after {
  padding: 4px;
  background: repeating-linear-gradient(-45deg, #fcc419 0 8px, #141414 8px 16px);
}

/* У плитки с паками зелёная подсветка остаётся снаружи рамки */
.pack-tile.has-packs.vis-exclusive {
  box-shadow: 0 0 0 2px #40c057, 0 0 12px rgba(190, 75, 219, 0.55);
}

/* ==================== Три в ряд ==================== */

.match3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 24px;
}

.m3-tile {
  grid-column: 1 / -1;
}

.m3-section-title {
  margin: 4px 0 0;
  font-size: 17px;
}

/* Камни */
.gem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 28%;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}

.gem.inline {
  width: 18px;
  font-size: 10px;
  vertical-align: middle;
}

.gem-ruby { background: radial-gradient(circle at 35% 30%, #ff8fa3, #e03131); }
.gem-sapphire { background: radial-gradient(circle at 35% 30%, #a5d8ff, #1c7ed6); }
.gem-emerald { background: radial-gradient(circle at 35% 30%, #b2f2bb, #2f9e44); }
.gem-topaz { background: radial-gradient(circle at 35% 30%, #fff3bf, #f59f00); }
.gem-amethyst { background: radial-gradient(circle at 35% 30%, #e5dbff, #7048e8); }

/* Колода */
.deck-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 8px 0;
}

.deck-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 6px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.deck-slot.active {
  border-color: var(--button);
}

.deck-slot-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: var(--secondary-bg);
  color: var(--hint);
  font-size: 20px;
}

.deck-slot-image img,
.m3-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deck-slot-image img.blurred,
.m3-card-image img.blurred {
  filter: blur(8px);
}

.deck-slot-gem {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  font-size: 10px;
}

.deck-slot-bonus {
  font-size: 12px;
  font-weight: 600;
}

.m3-slot-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.m3-rarity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
}

.m3-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.m3-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--secondary-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.m3-card.in-deck {
  border-color: var(--button);
}

.m3-card-image {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg);
}

.m3-card-title {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m3-card-bonus {
  font-size: 11px;
  color: var(--hint);
}

.m3-card-gem {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  font-size: 11px;
}

/* Уровни */
.m3-levels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m3-level {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--secondary-bg);
}

.m3-level-icon {
  font-size: 30px;
}

.m3-level-info {
  flex: 1;
  min-width: 0;
}

.m3-level-name {
  font-weight: 600;
}

.m3-stars {
  color: #f59f00;
  font-size: 12px;
  letter-spacing: 1px;
}

.m3-level-stats,
.m3-level-record {
  font-size: 13px;
  color: var(--hint);
}

.m3-level-5 {
  background: linear-gradient(135deg, var(--secondary-bg), rgba(224, 49, 49, 0.18));
}

.m3-result {
  text-align: center;
}

.m3-result h2 {
  margin: 0 0 6px;
}

.m3-result-win {
  box-shadow: 0 0 0 2px #40c057;
}

.m3-result-lose,
.m3-result-forfeit {
  box-shadow: 0 0 0 2px #fa5252;
}

.m3-result-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Бой */
.hp {
  position: relative;
  height: 18px;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(127, 127, 127, 0.25);
}

.hp-fill {
  height: 100%;
  transition: width 0.4s ease;
}

.hp-enemy .hp-fill {
  background: linear-gradient(90deg, #fa5252, #ff8787);
}

.hp-player .hp-fill {
  background: linear-gradient(90deg, #40c057, #8ce99a);
}

.hp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.m3-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--secondary-bg);
}

.m3-panel.hit {
  animation: m3-shake 0.35s;
}

.m3-enemy-icon {
  font-size: 32px;
}

.m3-panel-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

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

.m3-panel-note {
  font-size: 12px;
  color: var(--hint);
}

.m3-float {
  position: absolute;
  top: 4px;
  right: 14px;
  font-size: 20px;
  font-weight: 800;
  pointer-events: none;
  animation: m3-float 1.1s ease-out forwards;
}

.m3-float.damage {
  color: #f59f00;
}

.m3-float.hurt {
  color: #fa5252;
}

.m3-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 6px;
  border-radius: 14px;
  background: var(--secondary-bg);
  touch-action: none;
  user-select: none;
}

.m3-board.shake {
  animation: m3-shake 0.35s;
}

.m3-cell {
  padding: 0;
  border: 0;
  border-radius: 28%;
  background: none;
  transition: transform 0.15s;
}

.m3-cell.selected {
  transform: scale(0.82);
  outline: 3px solid var(--button);
  outline-offset: 1px;
}

.m3-cell.pop .gem {
  animation: m3-pop 0.28s forwards;
}

.m3-cell.drop .gem {
  animation: m3-drop 0.26s ease-out;
}

.m3-mults {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.m3-mult {
  display: flex;
  align-items: center;
  gap: 3px;
}

.m3-forfeit {
  align-self: center;
}

@keyframes m3-pop {
  to { transform: scale(0); opacity: 0; }
}

@keyframes m3-drop {
  from { transform: translateY(-60%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes m3-float {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-28px); opacity: 0; }
}

@keyframes m3-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.m3-stars-off {
  color: var(--hint);
  opacity: 0.35;
}

/* Обычная редкость — белый текст; на светлом фоне колоды он не виден */
.m3-rarity-legend .rarity-common,
.m3-card-title.rarity-common {
  color: var(--text);
  text-shadow: none;
}

/* ---------- Три в ряд: герои ---------- */

.hero-portrait {
  position: relative;
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  background: var(--secondary-bg);
}

.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Заглушка: прямоугольник с именем героя, номером портрета и именем файла, который нужно добавить */
.hero-placeholder {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: inherit;
  color: #fff;
  font-size: 13px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-placeholder small {
  font-size: 9px;
  opacity: 0.8;
  word-break: break-all;
}

.hero-maid { background: linear-gradient(160deg, #f783ac, #862e9c); }
.hero-epicatis { background: linear-gradient(160deg, #ff8787, #c92a2a); }
.hero-sora { background: linear-gradient(160deg, #74c0fc, #1864ab); }
.hero-thanaton { background: linear-gradient(160deg, #868e96, #212529); }

.hero-portrait.large { width: 110px; }
.hero-portrait.small { width: 84px; }
.hero-portrait.mini { width: 40px; border-radius: 6px; }
.hero-portrait.tiny { width: 44px; border-radius: 6px; }

.hero-portrait.mini .hero-placeholder,
.hero-portrait.tiny .hero-placeholder {
  border-width: 1px;
  font-size: 0;
}

.hero-portrait.mini .hero-placeholder span,
.hero-portrait.tiny .hero-placeholder span {
  font-size: 11px;
}

.hero-card,
.hero-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hero-choice {
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--secondary-bg);
}

.hero-choice.selected {
  border-color: var(--button);
}

.heroes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.hero-name {
  font-size: 16px;
  font-weight: 700;
}

.hero-level {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--button);
  color: var(--button-text);
  font-size: 11px;
  vertical-align: middle;
}

.hero-stats,
.hero-passive,
.hero-variants-label {
  font-size: 13px;
  color: var(--hint);
}

.hero-passive {
  color: var(--text);
}

.xp {
  position: relative;
  height: 14px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(127, 127, 127, 0.25);
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #fab005, #ffd43b);
}

.xp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.hero-variants {
  display: flex;
  gap: 6px;
}

.hero-variant {
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
}

.hero-variant.active {
  border-color: var(--button);
}

.m3-level-up {
  font-weight: 700;
  color: #f59f00;
}

.m3-float.heal {
  color: #40c057;
}

/* Карточка героя на экране уровней: портрет слева (у .game-card колонка по умолчанию) */
.game-card.hero-card {
  flex-direction: row;
}

/* В маленьких портретах — только номер варианта */
.hero-portrait.mini .hero-placeholder b,
.hero-portrait.mini .hero-placeholder small,
.hero-portrait.tiny .hero-placeholder b,
.hero-portrait.tiny .hero-placeholder small {
  display: none;
}

/* Герои: закрытые герои и образы */
.hero-choice.locked .hero-portrait {
  filter: grayscale(0.7);
}

.hero-level.locked {
  background: var(--hint);
}

.hero-variants {
  flex-wrap: wrap;
}

.hero-variant {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 56px;
  color: var(--text);
  font: inherit;
}

.hero-variant.locked .hero-portrait {
  filter: grayscale(1) brightness(0.7);
}

.hero-variant-lock {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 16px;
}

.hero-variant-title {
  width: 100%;
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-variant-title.rarity-common {
  color: var(--text);
}

/* Образы героев в паках */
.skin-thumb,
.skin-result {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skin-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ---------- Три в ряд: энергия, способности, анимации ---------- */

.gem-energy {
  background: radial-gradient(circle at 35% 30%, #c5f6fa, #1098ad 60%, #0b7285);
  color: #fff3bf;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 0 6px rgba(21, 170, 191, 0.55);
}

.gem-energy .gem-symbol {
  font-size: 1.15em;
  text-shadow: 0 0 4px rgba(255, 212, 59, 0.9);
}

/* Обмен камней: оба едут на место друг друга */
.m3-cell.swapping {
  z-index: 2;
  transition: transform 0.17s ease-in-out;
}

/* Собранный камень: вспышка и исчезновение */
.m3-cell.pop .gem {
  animation: m3-pop2 0.24s ease-in forwards;
}

/* Падение: камень стартует выше на --fall клеток и падает с отскоком */
.m3-cell.falling .gem {
  animation: m3-fall calc(0.16s + var(--fall) * 0.045s) cubic-bezier(0.33, 1.35, 0.6, 1) both;
}

@keyframes m3-pop2 {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.18); filter: brightness(1.8); }
  100% { transform: scale(0); opacity: 0; filter: brightness(2); }
}

@keyframes m3-fall {
  from { transform: translateY(calc(var(--fall) * (-100% - 4px))); }
  to { transform: none; }
}

.energy {
  position: relative;
  height: 14px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(127, 127, 127, 0.25);
}

.energy-fill {
  height: 100%;
  background: linear-gradient(90deg, #15aabf, #66d9e8);
  transition: width 0.4s ease;
}

.energy-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.m3-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.m3-effect {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.18);
  font-size: 11px;
  font-weight: 600;
}

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

.m3-ability {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 8px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--secondary-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  transition: transform 0.1s, border-color 0.2s;
}

.m3-ability:disabled {
  opacity: 0.5;
}

.m3-ability.ready:not(:disabled) {
  border-color: #15aabf;
  box-shadow: 0 0 8px rgba(21, 170, 191, 0.4);
}

.m3-ability:active:not(:disabled) {
  transform: scale(0.96);
}

.m3-ability-head {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}

.m3-ability-cost {
  flex-shrink: 0;
  color: #0c8599;
}

.m3-ability-text {
  font-size: 11px;
  color: var(--hint);
  line-height: 1.25;
}

.m3-float.energy {
  color: #15aabf;
}

.hero-actives {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.35;
}

/* Новые камни появляются из-за верхнего края поля, а не поверх панели врага */
.m3-board {
  overflow: hidden;
}

/* ---------- Энергия — жёлтая, крупный значок; чёрные дыры ---------- */

.gem-energy {
  background: radial-gradient(circle at 35% 30%, #fff9db, #ffd43b 45%, #f59f00);
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 0 7px rgba(252, 196, 25, 0.6);
}

.gem-energy .gem-symbol {
  font-size: 1.9em;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  text-shadow: none;
}

.gem.inline.gem-energy .gem-symbol {
  font-size: 1.3em;
}

.energy-fill {
  background: linear-gradient(90deg, #f59f00, #ffd43b);
}

.m3-float.energy,
.m3-ability-cost {
  color: #e67700;
}

.m3-ability.ready:not(:disabled) {
  border-color: #fab005;
  box-shadow: 0 0 8px rgba(250, 176, 5, 0.45);
}

/* Чёрная дыра */
.gem-hole {
  position: relative;
  overflow: visible;
  background: radial-gradient(circle, #000 35%, #2b0a3d 60%, #6741d9 85%, #9775fa);
  box-shadow: 0 0 8px rgba(103, 65, 217, 0.8), inset 0 0 6px #000;
  border-radius: 50%;
}

.hole-swirl {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(229, 219, 255, 0.85);
  border-left-color: rgba(151, 117, 250, 0.6);
  animation: m3-spin 1.6s linear infinite;
}

.hole-counter {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 17px;
  padding: 0 3px;
  border-radius: 8px;
  background: #fff;
  color: #5f3dc4;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 0 1px #5f3dc4;
}

.m3-cell.hole {
  cursor: default;
}

.m3-cell.hole-new .gem {
  animation: m3-hole-in 0.6s cubic-bezier(0.2, 1.4, 0.5, 1);
}

/* «Поглощение»: съеденные камни затягиваются и темнеют */
.m3-board.devouring .m3-cell.pop .gem {
  animation: m3-devour 0.24s ease-in forwards;
}

/* «Коллапс»: дыры вспыхивают, поле трясётся */
.m3-board.collapse {
  animation: m3-shake 0.35s 2;
}

.m3-board.collapse .m3-cell.pop .gem {
  animation: m3-blast 0.24s ease-out forwards;
}

@keyframes m3-spin {
  to { transform: rotate(360deg); }
}

@keyframes m3-hole-in {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes m3-devour {
  to { transform: scale(0) rotate(200deg); filter: brightness(0.2); opacity: 0; }
}

@keyframes m3-blast {
  0% { transform: scale(1); }
  50% { transform: scale(1.6); filter: brightness(2.5); }
  100% { transform: scale(2); opacity: 0; filter: brightness(3); }
}

/* ---------- Энергия: молнии летят в полосу, полоса вспыхивает ---------- */

.energy-spark {
  position: fixed;
  z-index: 50;
  margin: -10px 0 0 -8px;
  font-size: 18px;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(252, 196, 25, 0.9));
  transition: transform 0.45s cubic-bezier(0.5, -0.2, 0.7, 1), opacity 0.45s ease-in;
}

.energy-fill,
.hp-fill {
  transition: width 0.4s ease;
}

.energy.gain {
  animation: m3-energy-gain 0.5s ease-out;
}

@keyframes m3-energy-gain {
  0% { box-shadow: 0 0 0 rgba(252, 196, 25, 0); }
  35% { box-shadow: 0 0 10px 2px rgba(252, 196, 25, 0.85); filter: brightness(1.25); }
  100% { box-shadow: 0 0 0 rgba(252, 196, 25, 0); }
}

.m3-float {
  white-space: nowrap;
}

/* ---------- Плитка «Три в ряд» в меню игр ---------- */

.m3-tile {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 2px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(135deg, #241640, #3b1f5e 55%, #1c2a52) padding-box,
    linear-gradient(135deg, #ffd43b, #b197fc 45%, #4dabf7) border-box;
  color: #fff;
  font: inherit;
  text-align: left;
  box-shadow: 0 0 14px rgba(151, 117, 250, 0.45), 0 4px 14px rgba(0, 0, 0, 0.18);
  animation: m3-tile-glow 3s ease-in-out infinite;
  overflow: hidden;
}

/* Блик, пробегающий по плитке */
.m3-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: m3-tile-shine 4.5s ease-in-out infinite;
  pointer-events: none;
}

.m3-tile:active {
  transform: scale(0.98);
}

.m3-tile .menu-icon {
  margin: 0;
  font-size: 34px;
  filter: drop-shadow(0 0 6px rgba(255, 212, 59, 0.6));
}

.m3-tile-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.m3-tile .menu-title {
  font-size: 19px;
  font-weight: 700;
}

.m3-tile .menu-sub {
  color: rgba(229, 219, 255, 0.85);
}

.m3-tile-gems {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}

.m3-tile-gems .gem {
  width: 22px;
  font-size: 10px;
  animation: m3-tile-gem 2.4s ease-in-out infinite;
}

.m3-tile-gems .gem-energy .gem-symbol {
  font-size: 1.5em;
}

.m3-tile-arrow {
  font-size: 30px;
  color: rgba(255, 255, 255, 0.7);
}

@keyframes m3-tile-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(151, 117, 250, 0.4), 0 4px 14px rgba(0, 0, 0, 0.18); }
  50% { box-shadow: 0 0 22px rgba(255, 212, 59, 0.45), 0 4px 14px rgba(0, 0, 0, 0.18); }
}

@keyframes m3-tile-shine {
  0%, 60% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes m3-tile-gem {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ---------- Рамка портрета героя по редкости образа ---------- */
.hero-portrait.frame-common { box-shadow: 0 0 0 2px #ced4da; }
.hero-portrait.frame-uncommon { box-shadow: 0 0 0 2px #4cd964; }
.hero-portrait.frame-rare { box-shadow: 0 0 0 2px #ffd43b; }
.hero-portrait.frame-mythic { box-shadow: 0 0 0 2px #ff9933, 0 0 9px rgba(255, 153, 51, 0.65); }
.hero-portrait.frame-masterpiece { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0a0a0a, 0 0 10px rgba(0, 0, 0, 0.45); }

.hero-portrait.large.frame-common,
.hero-portrait.small.frame-common { box-shadow: 0 0 0 3px #ced4da; }
.hero-portrait.large.frame-uncommon,
.hero-portrait.small.frame-uncommon { box-shadow: 0 0 0 3px #4cd964; }
.hero-portrait.large.frame-rare,
.hero-portrait.small.frame-rare { box-shadow: 0 0 0 3px #ffd43b; }
.hero-portrait.large.frame-mythic,
.hero-portrait.small.frame-mythic { box-shadow: 0 0 0 3px #ff9933, 0 0 12px rgba(255, 153, 51, 0.7); }
.hero-portrait.large.frame-masterpiece,
.hero-portrait.small.frame-masterpiece { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #0a0a0a, 0 0 14px rgba(0, 0, 0, 0.5); }

/* Закрытый образ — рамка тусклая */
.hero-variant.locked .hero-portrait {
  opacity: 0.85;
}

.hero-variant {
  padding: 4px;
}

/* ---------- Горящие камни (Эпикатис) ---------- */
.gem.burning {
  position: relative;
  overflow: visible;
  animation: m3-burn 1.1s ease-in-out infinite alternate;
}

.gem-fire {
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 0 3px rgba(255, 120, 0, 0.9));
  animation: m3-flame 0.6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes m3-burn {
  from { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 0 4px 1px rgba(255, 110, 0, 0.6); }
  to { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 0 9px 3px rgba(255, 70, 0, 0.85); }
}

@keyframes m3-flame {
  from { transform: scale(0.9) rotate(-6deg); }
  to { transform: scale(1.15) rotate(6deg); }
}

/* Огонь перекинулся */
.m3-cell.ignite .gem {
  animation: m3-ignite 0.6s ease-out, m3-burn 1.1s ease-in-out 0.6s infinite alternate;
}

@keyframes m3-ignite {
  0% { filter: brightness(2.5) saturate(0.5); transform: scale(1.25); }
  100% { filter: none; transform: none; }
}

/* Пламя гаснет («Хтоническое преобразование») */
.m3-cell.quench .gem-fire {
  animation: m3-quench 0.45s ease-in forwards;
}

.m3-cell.quench .gem {
  animation: m3-quench-gem 0.45s ease-in forwards;
}

@keyframes m3-quench {
  to { transform: translateY(-10px) scale(0.3); opacity: 0; filter: grayscale(1); }
}

@keyframes m3-quench-gem {
  to { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 0 8px 2px rgba(80, 60, 140, 0.6); }
}

/* Горящие камни разлетаются огнём */
.m3-board.burst .m3-cell.pop .gem {
  animation: m3-fire-burst 0.24s ease-out forwards;
}

@keyframes m3-fire-burst {
  0% { transform: scale(1); filter: brightness(1); }
  45% { transform: scale(1.4); filter: brightness(2) sepia(1) saturate(4) hue-rotate(-20deg); }
  100% { transform: scale(1.8); opacity: 0; filter: brightness(3) sepia(1) saturate(5); }
}

/* Кнопки способностей — всегда по трети ширины, длинные названия переносятся */
.m3-abilities {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.m3-ability-head {
  flex-direction: column;
  gap: 1px;
  font-size: 11px;
}

.m3-ability-head > span:first-child {
  min-width: 0;
  overflow-wrap: break-word;
}

/* «Искажение»: поле мерцает, перекрашенные камни вспыхивают */
.m3-board.distorting {
  animation: m3-distort 0.5s ease-in-out;
}

@keyframes m3-distort {
  0%, 100% { filter: none; }
  40% { filter: hue-rotate(90deg) saturate(1.6); }
  70% { filter: hue-rotate(-60deg) saturate(1.3); }
}

/* «Искажение»: посчитанные камни самого частого цвета пульсируют */
.m3-cell.counted .gem {
  animation: m3-counted 0.55s ease-in-out;
}

@keyframes m3-counted {
  0%, 100% { transform: none; filter: none; }
  45% { transform: scale(1.18); filter: brightness(1.7); }
}

/* ---------- Способности карт ---------- */

.ability-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 16px;
}

.abilities-hint {
  padding: 0 16px;
}

.ability-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px;
  border: 0;
  border-radius: 12px;
  background: var(--secondary-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.ability-row.is-locked .ability-thumb img {
  filter: grayscale(0.6) blur(1.5px);
}

.ability-thumb {
  flex-shrink: 0;
  width: 54px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg);
}

.ability-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ability-thumb img.blurred {
  filter: blur(8px);
}

.ability-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ability-name {
  font-weight: 700;
}

.ability-name.rarity-common,
.deck-abilities .rarity-common {
  color: var(--text);
}

.ability-rarity {
  font-size: 12px;
  color: var(--hint);
}

.ability-text {
  font-size: 13px;
}

.deck-slot-number {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--button);
  color: var(--button-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.deck-slot-bonus {
  font-size: 16px;
}

.deck-abilities {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.4;
}

.m3-card-slot {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  border-radius: 6px;
  background: var(--button);
  color: var(--button-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.m3-card-bonus {
  font-size: 11px;
  line-height: 1.25;
}

.m3-mult.boosted {
  font-weight: 700;
  color: #2b8a3e;
}

/* Карта не работает с героем — красная подсветка */
.deck-slot.inactive,
.m3-card.inactive {
  border-color: #fa5252 !important;
  box-shadow: 0 0 0 1px #fa5252, 0 0 8px rgba(250, 82, 82, 0.45);
}

.deck-slot.inactive .deck-slot-image img,
.m3-card.inactive .m3-card-image img {
  filter: grayscale(0.8) brightness(0.8);
}

.deck-slot.inactive .deck-slot-bonus::after {
  content: ' ✕';
  color: #fa5252;
  font-weight: 800;
}

.deck-abilities li.inactive {
  color: #e03131;
}

.deck-abilities li.inactive .card-ability-text {
  text-decoration: line-through;
  text-decoration-color: rgba(224, 49, 49, 0.6);
}

.card-inactive-note {
  display: inline;
  text-decoration: none;
  font-weight: 600;
}

/* Значок способности карты: эмодзи или своя картинка */
.ability-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.2em;
}

.ability-icon img {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
}

.deck-slot-bonus .ability-icon img {
  width: 22px;
  height: 22px;
}

/* ---------- Значки способностей героев, название образа ---------- */
.hero-ability-icon img {
  width: 1.3em;
  height: 1.3em;
}

.hero-skin-name {
  margin-top: -3px;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
}

.hero-skin-name.rarity-common {
  color: var(--hint);
}

/* ---------- Коллекция → Герои ---------- */
.collection-heroes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 16px;
}

.collection-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--secondary-bg);
}

.collection-hero.locked .collection-hero-head .hero-portrait {
  filter: grayscale(0.6);
}

.collection-hero-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.collection-skins-title {
  font-size: 13px;
  color: var(--hint);
}

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

.collection-skin {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.collection-skin.locked .hero-portrait {
  filter: grayscale(1) brightness(0.75);
}

.collection-skin-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.collection-skin-title {
  font-weight: 700;
}

.collection-skin-title.rarity-common {
  color: var(--text);
}

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

.collection-skin-desc {
  font-size: 13px;
  line-height: 1.35;
}

/* ---------- Кнопки активных способностей (исправленная раскладка) ---------- */
.m3-abilities {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.m3-ability {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  padding: 7px 7px 10px;
  opacity: 1;
}

/* Накопление энергии до стоимости способности */
.m3-ability::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: var(--charge, 0%);
  background: linear-gradient(90deg, #f59f00, #ffd43b);
  transition: width 0.4s ease;
}

.m3-ability:disabled {
  opacity: 1;
}

.m3-ability:disabled .m3-ability-top .ability-icon,
.m3-ability:disabled .m3-ability-name {
  opacity: 0.55;
}

.m3-ability:disabled .m3-ability-top .ability-icon {
  filter: grayscale(0.8);
}

.m3-ability.ready::after {
  background: linear-gradient(90deg, #40c057, #8ce99a);
}

/* Энергии хватает, но применить нельзя (нет дыр, горящих камней…) */
.m3-ability.blocked::after {
  background: repeating-linear-gradient(-45deg, #adb5bd 0 6px, #ced4da 6px 12px);
}

.m3-ability-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.m3-ability-top .ability-icon {
  font-size: 20px;
  line-height: 1;
}

.m3-ability-top .ability-icon img {
  width: 24px;
  height: 24px;
}

.m3-ability-cost {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.m3-ability-name {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
}

.m3-ability-text {
  font-size: 10.5px;
  line-height: 1.25;
}

/* Урон камней под полем — пять равных ячеек, не вылезают за край */
.m3-mults {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  justify-items: center;
}

.m3-mult {
  min-width: 0;
  white-space: nowrap;
}

.m3-ability-name.long {
  font-size: 9.5px;
  letter-spacing: -0.15px;
}

/* Название применённой способности: поверх поля и полосок, в разметке не участвует */
.m3-ability-banner {
  position: fixed;
  top: 40%;
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 48px);
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(20, 16, 40, 0.86);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 0 2px rgba(255, 212, 59, 0.75), 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: m3-banner 2.1s ease-out forwards;
}

.m3-ability-banner > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.m3-ability-banner .ability-icon {
  font-size: 24px;
}

.m3-ability-banner .ability-icon img {
  width: 28px;
  height: 28px;
}

@keyframes m3-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  20% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(0.95); }
}

/* ---------- Магазин: описание на плитке ---------- */
.pack-tile-desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.8;
}

/* ---------- Обложка пака образов: зигзаг ---------- */
.skin-mosaic .skin-layer {
  overflow: hidden;
}

.skin-mosaic .skin-layer img,
.skin-mosaic .skin-layer-name {
  position: absolute;
  top: 0;
  height: 100%;
  object-fit: cover;
}

.skin-layer-name {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.skin-layer.not-owned img {
  filter: saturate(0.6) brightness(0.85);
}

.skin-mosaic-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.skin-mosaic-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 212, 59, 0.9), rgba(177, 151, 252, 0.9));
  box-shadow: 0 0 6px rgba(255, 212, 59, 0.6);
}

/* ---------- Коллекция: надеть образ ---------- */
.collection-skin {
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.collection-skin.worn {
  background: rgba(127, 127, 127, 0.12);
  box-shadow: inset 0 0 0 2px var(--button);
}

.collection-skin.wearable {
  cursor: pointer;
}

.collection-skin.wearable:active {
  transform: scale(0.98);
}

.collection-skin-worn {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--button);
  color: var(--button-text);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

.collection-skin-wear {
  font-size: 12px;
  color: var(--accent);
}

/* Заглушка образа без картинки в узкой полосе обложки — только цвет героя, без текста */
.skin-mosaic .skin-layer-name {
  font-size: 0;
}

/* Линии зигзага на обложке пака образов (SVG) */
svg.skin-mosaic-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

svg.skin-mosaic-lines line {
  stroke: rgba(255, 224, 102, 0.95);
  stroke-width: 2.5px;
  filter: drop-shadow(0 0 3px rgba(255, 212, 59, 0.7));
}

.skin-mosaic-line {
  display: none;
}

.collection-skin-buy {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 12px;
  font-size: 13px;
}

/* ---------- Открытие карт: свечение по редкости ---------- */
.result-card {
  position: relative;
  --glow: #ced4da;
  --glow-soft: rgba(206, 212, 218, 0.45);
}

.result-card.rarity-glow-uncommon { --glow: #51cf66; --glow-soft: rgba(81, 207, 102, 0.5); }
.result-card.rarity-glow-rare { --glow: #ffd43b; --glow-soft: rgba(255, 212, 59, 0.55); }
.result-card.rarity-glow-mythic { --glow: #ff922b; --glow-soft: rgba(255, 146, 43, 0.6); }
.result-card.rarity-glow-masterpiece { --glow: #fff3bf; --glow-soft: rgba(255, 255, 255, 0.7); }

.result-inner {
  z-index: 1;
}

/* Разгорание рубашки */
.result-card.charging .result-back {
  animation: result-charge 0.45s ease-in-out infinite alternate;
}

.result-card.charging.rarity-glow-rare .result-inner,
.result-card.charging.rarity-glow-mythic .result-inner {
  animation: result-shake 0.18s linear infinite;
}

/* Шедевр: дрожит сильнее и чуть приподнимается */
.result-card.charging.rarity-glow-masterpiece .result-inner {
  animation: result-shake-big 0.12s linear infinite;
}

@keyframes result-shake-big {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(1.05); }
  25% { transform: translate(-3px, 1px) rotate(-1.8deg) scale(1.05); }
  75% { transform: translate(3px, -1px) rotate(1.8deg) scale(1.05); }
}

@keyframes result-charge {
  from { box-shadow: 0 0 6px 1px var(--glow-soft), inset 0 0 10px var(--glow-soft); filter: brightness(1); }
  to { box-shadow: 0 0 22px 6px var(--glow), inset 0 0 22px var(--glow); filter: brightness(1.35); }
}

@keyframes result-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-2px, 1px) rotate(-1.2deg); }
  75% { transform: translate(2px, -1px) rotate(1.2deg); }
}

@keyframes result-lift {
  to { transform: scale(1.06); }
}

/* Переворот с «подскоком» */
.result-card.flipped .result-inner {
  transition: transform 0.55s cubic-bezier(0.3, 1.5, 0.5, 1);
  transform: rotateY(180deg) scale(1);
  animation: none;
}

.result-card.revealed {
  animation: result-pop 0.5s ease-out;
}

@keyframes result-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Вспышка света в цвет редкости */
.result-burst {
  position: absolute;
  inset: -45%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, var(--glow-soft) 30%, transparent 65%);
  opacity: 0;
  pointer-events: none;
}

.result-card.revealed .result-burst {
  animation: result-burst 0.9s ease-out forwards;
}

.result-card.revealed.rarity-glow-common .result-burst {
  animation-duration: 0.5s;
}

@keyframes result-burst {
  0% { opacity: 0.95; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Лучи: мифические и шедевры */
.result-rays {
  position: absolute;
  inset: -60%;
  z-index: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--glow-soft) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%);
  mask: radial-gradient(circle, #000 25%, transparent 68%);
  opacity: 0;
  pointer-events: none;
}

.result-card.revealed .result-rays {
  animation: result-rays 2.4s ease-out forwards;
}

@keyframes result-rays {
  0% { opacity: 0; transform: rotate(0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0.35; transform: rotate(120deg) scale(1.05); }
}

/* Искры: шедевры */
.result-sparks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.result-sparks span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px #ffd43b;
  opacity: 0;
}

.result-card.revealed .result-sparks span {
  animation: result-spark 1s ease-out var(--d) forwards;
}

@keyframes result-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-120px) scale(0.3); }
}

/* После открытия — мягкое пульсирующее свечение (у всех, сильнее у редких) */
.result-card.revealed .result-inner {
  border-radius: 12px;
  animation: result-glow 2.2s ease-in-out 0.6s infinite alternate;
}

.result-card.revealed.rarity-glow-common .result-inner {
  animation: none;
  box-shadow: 0 0 8px var(--glow-soft);
}

@keyframes result-glow {
  from { box-shadow: 0 0 8px 1px var(--glow-soft); }
  to { box-shadow: 0 0 20px 5px var(--glow); }
}

.result-card.revealed.rarity-glow-masterpiece .result-inner {
  animation-name: result-glow-master;
}

@keyframes result-glow-master {
  from { box-shadow: 0 0 0 2px #fff, 0 0 12px 2px rgba(255, 255, 255, 0.6); }
  to { box-shadow: 0 0 0 2px #fff, 0 0 28px 8px #ffd43b; }
}

.results-cards {
  cursor: pointer;
}

/* Вспышки и лучи у крайних карт не должны давать горизонтальную прокрутку */
#pack-results {
  overflow-x: hidden;
}

.results-cards {
  overflow-x: clip;
  overflow-y: visible;
  padding: 18px 4px;
}

/* ==================== Темы оформления ==================== */
:root[data-theme='light'] {
  --bg: #ffffff;
  --text: #111111;
  --hint: #8a8a8a;
  --button: #2481cc;
  --button-text: #ffffff;
  --secondary-bg: #f0f2f5;
  --accent: #2481cc;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #17212b;
  --text: #f5f5f5;
  --hint: #708499;
  --button: #5288c1;
  --button-text: #ffffff;
  --secondary-bg: #232e3c;
  --accent: #6ab3f3;
  color-scheme: dark;
}

:root[data-theme='gray'] {
  --bg: #2b2b2e;
  --text: #ececee;
  --hint: #9a9aa1;
  --button: #8e8e95;
  --button-text: #ffffff;
  --secondary-bg: #3a3a3f;
  --accent: #d0d0d6;
  color-scheme: dark;
}

:root[data-theme='space'] {
  --bg: #0b0820;
  --text: #ece8ff;
  --hint: #9c94c9;
  --button: #7c5cff;
  --button-text: #ffffff;
  --secondary-bg: rgba(38, 28, 86, 0.78);
  --accent: #5ce1e6;
  color-scheme: dark;
}

/* Космос: звёздное небо и туманности (фон не прокручивается) */
:root[data-theme='space'] body {
  background:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 200px 160px, #cfc4ff, transparent),
    radial-gradient(1px 1px at 300px 40px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 60px 200px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 340px 220px, #9be7ff, transparent),
    radial-gradient(1px 1px at 260px 300px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(ellipse at 15% 10%, rgba(124, 92, 255, 0.35), transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(92, 225, 230, 0.18), transparent 55%),
    #0b0820;
  background-size: 360px 340px, 360px 340px, 360px 340px, 360px 340px, 360px 340px, 360px 340px, 360px 340px, 100% 100%, 100% 100%, auto;
  background-attachment: fixed;
}

:root[data-theme='space'] .menu-tile,
:root[data-theme='space'] .game-card,
:root[data-theme='space'] .pack-tile {
  backdrop-filter: blur(2px);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.25);
}

/* В тёмных темах «обычная» редкость — светлым текстом, на светлой — тёмным */
:root[data-theme='light'] .rarity-common {
  color: #343a40;
}

.setting-column {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.theme-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--secondary-bg);
}

.theme-switch button {
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hint);
  font: inherit;
  font-size: 13px;
}

.theme-switch button.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
}

.support-button {
  margin-top: 14px;
}

/* ==================== Поддержка ==================== */
.support {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.support-ticket {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 0;
  border-left: 4px solid var(--hint);
  border-radius: 12px;
  background: var(--secondary-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
}

.support-ticket.status-open { border-left-color: #fab005; }
.support-ticket.status-answered { border-left-color: #40c057; }

.support-ticket-head,
.support-thread-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.support-status {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--hint);
}

.support-ticket-meta {
  font-size: 12px;
  color: var(--hint);
}

.support-ticket-last {
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.support-label {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
}

.support-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.support input,
.support textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--secondary-bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.support input:focus,
.support textarea:focus {
  outline: none;
  border-color: var(--button);
}

.support-counter {
  align-self: flex-end;
  font-size: 11px;
  color: var(--hint);
}

.support-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support-message {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--secondary-bg);
}

.support-message.from-user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--button);
  color: var(--button-text);
}

.support-message.from-admin {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.support-message-author {
  margin-bottom: 2px;
  font-size: 11px;
  opacity: 0.75;
}

.support-message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

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

.support-actions button {
  flex: 1;
}

/* ---------- Чёрный рынок: предложения дня ---------- */
.market-tabs {
  margin-bottom: 10px;
}

.offers-head {
  margin-bottom: 10px;
  font-size: 13px;
  color: #b9a6d6;
}

/* Витрина: тёмная полка с картами, снизу — таймер */
.offers-showcase {
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #241b31, #141218);
  box-shadow: inset 0 0 0 1px rgba(151, 117, 250, 0.2);
}

.offers-footer {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(151, 117, 250, 0.2);
}

.offers-reset {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 13px;
  color: #d0bff0;
  white-space: nowrap;
}

.offers-timer {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffd43b;
}

/* Телефон — 2 в ряд; шире — колонки фиксированной ширины по центру, как на витрине */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 600px) {
  .offers-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
    justify-content: center;
    gap: 14px;
  }
}

.offer-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(160deg, #17151d, #2a1d38);
  color: #eee6ff;
  box-shadow: inset 0 0 0 1px rgba(151, 117, 250, 0.25);
}

.offer-card.tile-rare { box-shadow: inset 0 0 0 2px rgba(255, 212, 59, 0.6); }
.offer-card.tile-mythic { box-shadow: inset 0 0 0 2px rgba(255, 146, 43, 0.75), 0 0 12px rgba(255, 146, 43, 0.35); }
.offer-card.tile-masterpiece { box-shadow: inset 0 0 0 2px #fff, 0 0 14px rgba(255, 255, 255, 0.4); }

/* Высота 3:4 через padding-top — работает и в старых WebView без aspect-ratio */
.offer-image {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-top: 133.33%;
  border-radius: 10px;
  background: #0f0d14;
}

.offer-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-image img.blurred {
  filter: blur(10px);
}

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

.offer-title.rarity-common {
  color: #eee6ff;
}

.offer-rarity {
  font-size: 12px;
  color: #a898c4;
}

.offer-price {
  font-weight: 700;
}

.offer-card button {
  margin-top: auto;
  padding: 8px;
  font-size: 13px;
}

.offer-card.offer-bought,
.offer-card.offer-owned {
  opacity: 0.7;
}

/* ---------- Карточки героев: способности читаемыми блоками ---------- */
.hero-card,
.hero-choice,
.game-card.hero-card {
  flex-direction: column;
  align-items: stretch;
}

.hero-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hero-abilities {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-ability {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.1);
}

.hero-ability.is-passive {
  background: linear-gradient(90deg, rgba(252, 196, 25, 0.16), rgba(127, 127, 127, 0.08));
}

.hero-ability > .ability-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.16);
  font-size: 20px;
  vertical-align: 0;
}

.hero-ability > .ability-icon img {
  width: 28px;
  height: 28px;
}

.hero-ability-body {
  flex: 1;
  min-width: 0;
}

.hero-ability-head {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  justify-content: space-between;
}

.hero-ability-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.25;
}

.hero-ability-tag {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.hero-ability-tag.cost {
  background: rgba(252, 196, 25, 0.22);
  color: #e67700;
}

.hero-ability-tag.passive {
  background: rgba(127, 127, 127, 0.2);
  color: var(--hint);
}

.hero-ability-text {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  opacity: 0.85;
}

.hero-choice > .primary,
.hero-choice > .secondary {
  width: 100%;
}

/* ---------- Противники: портрет, описание ---------- */
.m3-level-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.m3-level-icon.has-image,
.m3-enemy-icon.has-image {
  overflow: hidden;
  border-radius: 12px;
}

.m3-level-icon img,
.m3-enemy-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m3-enemy-icon.has-image {
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.m3-level-desc {
  margin: 1px 0 2px;
  font-size: 13px;
  line-height: 1.35;
}

.m3-stars-5 {
  background: linear-gradient(135deg, var(--secondary-bg), rgba(224, 49, 49, 0.18));
}

/* Фильтры вкладки «Способности» в коллекции */
.ability-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.ability-filters .chip.reset {
  align-self: flex-start;
}

/* ---------- Браузер: экран входа и замена кнопок Telegram ---------- */
body.auth-open > :not(.auth-screen) {
  display: none !important;
}

.auth-screen {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 40px 16px;
  background: var(--bg);
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  padding: 24px 20px;
  border-radius: 20px;
  background: var(--secondary-bg);
}

.auth-langs {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.auth-langs button,
.auth-tabs button {
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hint);
  font: inherit;
  cursor: pointer;
}

.auth-langs button.active,
.auth-tabs button.active {
  background: var(--button);
  color: var(--button-text);
}

.auth-title {
  margin: 0;
  font-size: 24px;
  text-align: center;
}

.auth-sub,
.auth-hint,
.auth-rules {
  margin: 0;
  color: var(--hint);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(127, 127, 127, 0.12);
}

.auth-tabs button {
  flex: 1;
  font-size: 13px;
}

.auth-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(224, 49, 49, 0.12);
  color: #e03131;
  font-size: 13px;
}

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

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--hint);
}

.auth-field input {
  padding: 10px 12px;
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.auth-telegram {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
}

.auth-widget {
  display: flex;
  justify-content: center;
  min-height: 48px;
}

.account-form {
  margin-top: 6px;
}

.logout-button {
  margin-top: 6px;
  color: #e03131;
}

/* Кнопка «Назад» и главная кнопка вместо кнопок Telegram */
.browser-back {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--secondary-bg);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

body.in-browser .screen > .header {
  padding-left: 52px;
}

.browser-main-button {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 60;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--button);
  color: var(--button-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.browser-main-button.loading {
  opacity: 0.6;
}

body.has-main-button .viewer {
  padding-bottom: 72px;
}

/* Экран входа: размеры с учётом отступов (карточка не вылезает за край узкого экрана) */
.auth-screen,
.auth-card,
.auth-field input {
  box-sizing: border-box;
}

.auth-screen {
  width: 100%;
}

.auth-field input {
  width: 100%;
}

.auth-card > div > .auth-hint {
  margin-bottom: 8px;
}

/* ---------- Экран входа: оформление и детали ---------- */
.auth-screen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(84, 169, 235, 0.22), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(151, 117, 250, 0.22), transparent 45%),
    var(--bg);
}

.auth-card {
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  animation: auth-in 0.35s ease-out;
}

@keyframes auth-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.auth-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.auth-logo {
  position: relative;
  width: 76px;
  height: 64px;
  margin-bottom: 4px;
}

.auth-logo span {
  position: absolute;
  top: 6px;
  left: 50%;
  font-size: 44px;
  line-height: 1;
  transform-origin: bottom center;
}

.auth-logo span:nth-child(1) {
  transform: translateX(-80%) rotate(-14deg);
  opacity: 0.55;
}

.auth-logo span:nth-child(2) {
  transform: translateX(-30%) rotate(8deg);
  animation: auth-card-float 3s ease-in-out infinite;
}

.auth-logo span:nth-child(3) {
  top: -4px;
  left: 78%;
  font-size: 20px;
  animation: auth-sparkle 2s ease-in-out infinite;
}

@keyframes auth-card-float {
  50% {
    transform: translateX(-30%) translateY(-4px) rotate(4deg);
  }
}

@keyframes auth-sparkle {
  50% {
    opacity: 0.3;
    transform: scale(0.8);
  }
}

.auth-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}

.auth-features span {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.14);
  font-size: 12px;
}

.auth-password {
  position: relative;
  display: flex;
}

.auth-password input {
  padding-right: 44px;
}

.auth-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0.7;
}

.auth-caps,
.auth-field-hint {
  color: #e8590c;
  font-size: 12px;
}

.auth-field-hint:empty {
  display: none;
}

.auth-strength {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.auth-strength-bar {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(127, 127, 127, 0.2);
}

.auth-strength-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 10%;
  border-radius: 2px;
  background: #e03131;
  transition: width 0.2s, background 0.2s;
}

.auth-strength[data-level='1'] .auth-strength-bar::after {
  width: 34%;
  background: #f76707;
}

.auth-strength[data-level='2'] .auth-strength-bar::after {
  width: 67%;
  background: #fab005;
}

.auth-strength[data-level='3'] .auth-strength-bar::after {
  width: 100%;
  background: #2f9e44;
}

.auth-strength small {
  font-size: 12px;
}

.auth-submit.loading {
  opacity: 0.75;
}

.auth-hint.small {
  margin-top: 4px;
  font-size: 12px;
}

.auth-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(127, 127, 127, 0.25);
  border-top-color: var(--button);
  border-radius: 50%;
  animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-footer {
  margin: 4px 0 0;
  color: var(--hint);
  font-size: 12px;
  text-align: center;
}

.auth-footer:empty {
  display: none;
}

.auth-footer a {
  color: var(--link, var(--button));
  font-weight: 600;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .auth-card,
  .auth-logo span {
    animation: none !important;
  }
}

.auth-tabs button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Своя картинка экрана входа (админка → «Оформление») */
.auth-logo.auth-logo-image {
  width: 96px;
  height: 96px;
}

.auth-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: auth-in 0.35s ease-out;
}

/* Вход через Telegram недоступен на этом адресе */
.auth-domain-hint {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: rgba(250, 176, 5, 0.12);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.auth-domain-hint p {
  margin: 0;
}

.auth-site-link {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--button);
  color: var(--button-text);
  text-decoration: none;
}

/* ---------- Темы «Кафе», «Сакура», «Океан» ---------- */
:root[data-theme='cafe'] {
  --bg: #f6eadb;
  --text: #3b2a1e;
  --hint: #8c7462;
  --button: #8b5a3c;
  --button-text: #fffaf3;
  --secondary-bg: #fffaf3;
  --accent: #b5703f;
  color-scheme: light;
}

:root[data-theme='cafe'] body {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(181, 112, 63, 0.16), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(139, 90, 60, 0.12), transparent 50%),
    #f6eadb;
  background-attachment: fixed;
}

:root[data-theme='cafe'] .menu-tile,
:root[data-theme='cafe'] .game-card,
:root[data-theme='cafe'] .pack-tile {
  box-shadow: 0 2px 8px rgba(95, 60, 35, 0.08), inset 0 0 0 1px rgba(139, 90, 60, 0.12);
}

:root[data-theme='sakura'] {
  --bg: #fff0f4;
  --text: #3d2430;
  --hint: #a07a8a;
  --button: #e0607e;
  --button-text: #ffffff;
  --secondary-bg: #ffffff;
  --accent: #d6457a;
  color-scheme: light;
}

:root[data-theme='sakura'] body {
  background:
    radial-gradient(circle at 10% 15%, rgba(255, 183, 206, 0.45), transparent 35%),
    radial-gradient(circle at 90% 85%, rgba(255, 214, 226, 0.6), transparent 40%),
    #fff0f4;
  background-attachment: fixed;
}

:root[data-theme='sakura'] .menu-tile,
:root[data-theme='sakura'] .game-card,
:root[data-theme='sakura'] .pack-tile {
  box-shadow: 0 2px 10px rgba(224, 96, 126, 0.1);
}

:root[data-theme='ocean'] {
  --bg: #06243a;
  --text: #e3f4ff;
  --hint: #7fa6c0;
  --button: #1fa2c8;
  --button-text: #ffffff;
  --secondary-bg: rgba(11, 58, 88, 0.85);
  --accent: #5fe0d6;
  color-scheme: dark;
}

:root[data-theme='ocean'] body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(95, 224, 214, 0.18), transparent 55%),
    linear-gradient(180deg, #08304b 0%, #06243a 45%, #041826 100%);
  background-attachment: fixed;
}

:root[data-theme='ocean'] .menu-tile,
:root[data-theme='ocean'] .game-card,
:root[data-theme='ocean'] .pack-tile {
  box-shadow: inset 0 0 0 1px rgba(95, 224, 214, 0.18);
}

/* Обычная редкость на светлых темах — тёмным текстом */
:root[data-theme='cafe'] .rarity-common,
:root[data-theme='sakura'] .rarity-common {
  color: #343a40;
}

/* ---------- Экран входа: переключатель тем и фон по теме ---------- */
.auth-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.auth-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.12);
}

.auth-themes button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
}

.auth-themes button:hover {
  opacity: 1;
  transform: scale(1.1);
}

.auth-themes button.active {
  background: var(--secondary-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  opacity: 1;
}

.auth-langs {
  margin-left: auto;
}

:root[data-theme='dark'] .auth-screen,
:root[data-theme='gray'] .auth-screen {
  background:
    radial-gradient(circle at 15% 10%, rgba(82, 136, 193, 0.25), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(151, 117, 250, 0.18), transparent 45%),
    var(--bg);
}

:root[data-theme='space'] .auth-screen {
  background: transparent;
}

:root[data-theme='space'] .auth-card {
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(124, 92, 255, 0.35);
}

:root[data-theme='cafe'] .auth-screen {
  background:
    radial-gradient(circle at 12% 12%, rgba(181, 112, 63, 0.22), transparent 40%),
    radial-gradient(circle at 88% 88%, rgba(139, 90, 60, 0.18), transparent 42%),
    repeating-linear-gradient(45deg, rgba(139, 90, 60, 0.035) 0 12px, transparent 12px 24px),
    #f6eadb;
}

:root[data-theme='cafe'] .auth-card {
  border: 1px solid rgba(139, 90, 60, 0.15);
  box-shadow: 0 12px 40px rgba(95, 60, 35, 0.15);
}

:root[data-theme='sakura'] .auth-screen {
  background:
    radial-gradient(circle at 8% 20%, rgba(255, 183, 206, 0.7) 0 6px, transparent 7px),
    radial-gradient(circle at 92% 30%, rgba(255, 183, 206, 0.6) 0 5px, transparent 6px),
    radial-gradient(circle at 20% 85%, rgba(255, 160, 190, 0.55) 0 7px, transparent 8px),
    radial-gradient(circle at 80% 75%, rgba(255, 200, 216, 0.7) 0 4px, transparent 5px),
    radial-gradient(circle at 15% 10%, rgba(255, 183, 206, 0.45), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(255, 214, 226, 0.7), transparent 45%),
    #fff0f4;
}

:root[data-theme='sakura'] .auth-card {
  box-shadow: 0 12px 40px rgba(224, 96, 126, 0.18);
}

:root[data-theme='ocean'] .auth-screen {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(95, 224, 214, 0.22), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(31, 162, 200, 0.35), transparent 55%),
    linear-gradient(180deg, #08304b, #041826);
}

:root[data-theme='ocean'] .auth-card {
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(95, 224, 214, 0.25);
}

:root[data-theme='ocean'] .auth-field input,
:root[data-theme='space'] .auth-field input {
  background: rgba(0, 0, 0, 0.25);
}

/* ---------- Настройки: вкладки и карточки тем ---------- */
.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--secondary-bg);
}

.settings-tabs button {
  flex: 1;
  padding: 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--hint);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.settings-tabs button.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.settings-pane-hint {
  margin: 10px 0;
  color: var(--hint);
  font-size: 13px;
}

.theme-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding-bottom: 6px;
}

.theme-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--secondary-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.theme-card:active {
  transform: scale(0.97);
}

.theme-card.active {
  border-color: var(--button);
  font-weight: 600;
}

.theme-card .theme-preview {
  height: 54px;
}

/* Превью темы: фон, карточка и кнопка в цветах темы (не зависит от текущей темы) */
.theme-preview {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--p-bg);
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.25);
}

.theme-preview i {
  position: absolute;
  display: block;
  border-radius: 4px;
}

.theme-preview i:nth-child(1) {
  top: 18%;
  left: 10%;
  width: 55%;
  height: 26%;
  background: var(--p-card);
}

.theme-preview i:nth-child(2) {
  top: 56%;
  left: 10%;
  width: 35%;
  height: 22%;
  background: var(--p-button);
}

.theme-preview i:nth-child(3) {
  top: 18%;
  right: 10%;
  width: 16%;
  height: 26%;
  border-radius: 50%;
  background: var(--p-accent);
}

.theme-preview-auto { --p-bg: linear-gradient(135deg, #ffffff 50%, #17212b 50%); --p-card: #f0f2f5; --p-button: #2481cc; --p-accent: #6ab3f3; }
.theme-preview-light { --p-bg: #ffffff; --p-card: #f0f2f5; --p-button: #2481cc; --p-accent: #2481cc; }
.theme-preview-dark { --p-bg: #17212b; --p-card: #232e3c; --p-button: #5288c1; --p-accent: #6ab3f3; }
.theme-preview-gray { --p-bg: #2b2b2e; --p-card: #3a3a3f; --p-button: #8e8e95; --p-accent: #d0d0d6; }
.theme-preview-space { --p-bg: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 70%, #cfc4ff, transparent), radial-gradient(ellipse at 20% 10%, rgba(124, 92, 255, 0.5), transparent 60%), #0b0820; --p-card: rgba(38, 28, 86, 0.9); --p-button: #7c5cff; --p-accent: #5ce1e6; }
.theme-preview-cafe { --p-bg: #f6eadb; --p-card: #fffaf3; --p-button: #8b5a3c; --p-accent: #b5703f; }
.theme-preview-sakura { --p-bg: radial-gradient(circle at 80% 80%, #ffb7ce 0 4px, transparent 5px), #fff0f4; --p-card: #ffffff; --p-button: #e0607e; --p-accent: #d6457a; }
.theme-preview-ocean { --p-bg: linear-gradient(180deg, #08304b, #041826); --p-card: rgba(11, 58, 88, 0.95); --p-button: #1fa2c8; --p-accent: #5fe0d6; }

/* ---------- Экран входа: выпадающий список тем ---------- */
.auth-theme-picker {
  position: relative;
}

.auth-theme-toggle {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.12);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.auth-theme-caret {
  color: var(--hint);
  font-size: 11px;
  transition: transform 0.15s;
}

.auth-theme-toggle.open .auth-theme-caret {
  transform: rotate(180deg);
}

.auth-theme-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  padding: 6px;
  border-radius: 14px;
  background: var(--secondary-bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(127, 127, 127, 0.15);
  animation: auth-in 0.15s ease-out;
}

.auth-theme-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.auth-theme-item:hover {
  background: rgba(127, 127, 127, 0.12);
}

.auth-theme-item.active {
  background: rgba(127, 127, 127, 0.18);
  font-weight: 600;
}

.auth-theme-item .theme-preview {
  flex-shrink: 0;
  width: 34px;
  height: 24px;
  border-radius: 6px;
}

.auth-card {
  overflow: visible;
}

/* Кнопка нового входа через Telegram (OpenID Connect) */
.auth-telegram-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 11px 22px;
  border-radius: 12px;
  background: #54a9eb;
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(84, 169, 235, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}

.auth-telegram-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(84, 169, 235, 0.45);
}

/* ==================== Широкие экраны (браузер на мониторе) ==================== */
/* Контент — колонка по центру: ширина своя у каждого экрана, чтобы кнопки и карточки не растягивались на весь монитор.
   Ширина задаётся переменной --page-w; кнопка «Назад» в браузере встаёт к левому краю колонки */
@media (min-width: 900px) {
  :root {
    --page-w: 1100px; /* коллекция, магазин, чёрный рынок — сетки карт и паков */
  }

  :root:has(#screen-menu:not([hidden])) {
    --page-w: 820px;
  }

  :root:has(#screen-games:not([hidden])),
  :root:has(#screen-match3:not([hidden])) {
    --page-w: 860px;
  }

  :root:has(#screen-promo:not([hidden])),
  :root:has(#screen-support:not([hidden])) {
    --page-w: 760px;
  }

  body:not(.auth-open) {
    padding-right: max(16px, calc(50% - var(--page-w) / 2));
    padding-left: max(16px, calc(50% - var(--page-w) / 2));
  }

  .browser-back {
    left: max(10px, calc(50% - var(--page-w) / 2 - 6px));
  }

  /* Меню: колонка уже, поэтому баннер можно сделать повыше */
  .banner {
    height: 180px;
  }

  .menu-grid {
    gap: 14px;
  }
}

/* ==================== Коллекция: размер плиток и избранное ==================== */

/* Старые WebView без aspect-ratio: высота плитки через padding-top, картинка — поверх */
@supports not (aspect-ratio: 1) {
  .tile {
    height: 0;
    padding-top: 133.33%;
  }

  .tile img {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: -4px 0 10px;
}

.gallery-toolbar-label {
  color: var(--hint);
  font-size: 13px;
}

.size-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--secondary-bg);
}

.size-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hint);
}

.size-switch button.active {
  background: var(--bg);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Значки размера — прямоугольники 3:4 разной величины */
.size-icon {
  display: block;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.size-icon-small {
  width: 9px;
  height: 12px;
  border-radius: 2px;
}

.size-icon-medium {
  width: 12px;
  height: 16px;
}

.size-icon-large {
  width: 15px;
  height: 20px;
}

/* Звёздочка избранного — справа внизу, подпись к ней не залезает */
.tile .tile-fav {
  position: absolute;
  right: 5px;
  bottom: 4px;
  z-index: 2;
  color: #ffd43b;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.tile.is-favorite .caption {
  padding-right: 22px;
}

#gallery[data-size='small'] .tile .tile-fav {
  right: 3px;
  bottom: 3px;
  font-size: 11px;
}

#gallery[data-size='small'] .tile.is-favorite .caption {
  padding-right: 15px;
}

#gallery[data-size='large'] .tile.is-favorite .caption {
  padding-right: 26px;
}

.viewer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.viewer-actions .banner-button {
  margin-top: 0;
}

.favorite-button.active {
  color: #f59f00;
}

/* Значок валюты из пресета (картинка вместо 💰 / 💠 в тексте) */
.currency-img {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
  vertical-align: -0.25em;
}