/* Playful Premium theme
   Preserved checkpoints:
   - checkpoint/current-premium-blue-menu
   - checkpoint/current-premium-warm-blue-menu

   Approved visual direction:
   - The region page palette is the current reference.
   - Main menu must feel like the region page: lively dark blue / violet / cyan.
   - Orange is allowed only as a small warm accent, not as the dominant UI color.
*/

:root {
  --bg: #070817;
  --bg-2: #0f1225;
  --panel: #141a30;
  --panel-soft: #1b2340;
  --panel-border: rgba(118, 206, 255, 0.22);
  --text: #fffdf8;
  --muted: #d4d8ef;
  --muted-soft: #8f9ab9;
  --accent: #ff7a2f;
  --accent-2: #5de7ff;
  --accent-3: #ffd166;
  --success: #4ade80;
  --shadow: rgba(0, 0, 0, 0.48);
}

html {
  background: #0b0b18;
}

body {
  position: relative;
  background: #0b0b18;
}

/* Shared viewport background
   Mobile Telegram WebView stretches normal body backgrounds by page height.
   Region pages are much taller than the main menu, so the same gradient can look different.
   This fixed layer keeps the approved main-menu palette visually identical on all screens. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% -6%, rgba(78, 128, 255, 0.34), transparent 32%),
    radial-gradient(circle at 92% 3%, rgba(255, 122, 47, 0.2), transparent 30%),
    radial-gradient(circle at 16% 82%, rgba(93, 231, 255, 0.14), transparent 34%),
    radial-gradient(circle at 88% 92%, rgba(124, 58, 237, 0.14), transparent 36%),
    linear-gradient(180deg, #17172f 0%, #101225 42%, #0b0b18 100%);
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
}

.app {
  position: relative;
  z-index: 1;
}

/* Main menu: align with the approved region page palette */
.app:not(.region-page):not(.game-detail-page):not(.cart-page) .hero {
  border-color: rgba(93, 231, 255, 0.34);
  background:
    radial-gradient(190px 150px at 98% 0%, rgba(93, 231, 255, 0.27) 0%, rgba(93, 231, 255, 0.18) 42%, transparent 44%),
    radial-gradient(320px 210px at 50% -24%, rgba(78, 128, 255, 0.14), transparent 62%),
    radial-gradient(circle at 0% 100%, rgba(255, 122, 47, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(39, 68, 122, 0.98), rgba(22, 34, 68, 0.96) 48%, rgba(38, 26, 52, 0.94)),
    #141a30;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.42),
    0 0 42px rgba(93, 231, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero {
  border-color: rgba(93, 231, 255, 0.28);
  background:
    radial-gradient(190px 150px at 98% 0%, rgba(93, 231, 255, 0.24) 0%, rgba(93, 231, 255, 0.16) 42%, transparent 44%),
    radial-gradient(300px 200px at 48% -18%, rgba(78, 128, 255, 0.12), transparent 62%),
    radial-gradient(circle at 0% 100%, rgba(255, 122, 47, 0.14), transparent 26%),
    linear-gradient(145deg, rgba(35, 58, 108, 0.98), rgba(19, 29, 56, 0.96) 45%, rgba(33, 18, 39, 0.9)),
    #101827;
  box-shadow:
    0 24px 78px rgba(0, 0, 0, 0.52),
    0 0 42px rgba(93, 231, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* TIM ▶ PLAY rebrand hero — фон даёт картинка, рамку рисуем стилями.
   Радиус углов картинки вшит = 5.6% ширины (замерено: ~56px при 1024). Задаём радиус в
   ПРОЦЕНТАХ, а не фикс. px — тогда рамка повторяет углы картинки на ЛЮБОЙ ширине экрана
   (фикс. 20px совпадал только на узком экране, на широком рамка «съезжала» с угла). */
.hero--rebrand,
.app:not(.region-page):not(.game-detail-page):not(.cart-page) .hero--rebrand {
  background: transparent !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32) !important;
  border-radius: 5.6% / 11% !important;
}
.hero--rebrand::before { display: none !important; content: none !important; }

/* Рамка-кольцо поверх картинки (::after) — ПЛАВНЫЙ градиент по периметру, как на
   эталоне: ярко-циановый сверху и слева, тусклый синий справа, мягкий тёплый отблеск
   снизу. Обычный border так не умеет (плоский один цвет или резкие стыки в углах),
   поэтому кольцо строим градиентом + маской: фон-градиент по всему прямоугольнику,
   маска вырезает середину и оставляет только полоску по краю толщиной padding. */
.hero--rebrand::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  /* Сброс геометрии базового .hero::after (декоративная линия height:1px). */
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  /* Радиус в процентах — повторяет вшитые углы картинки на любой ширине. */
  border-radius: 5.6% / 11% !important;
  /* Толщина линии рамки. */
  padding: 1.6px !important;
  /* Плавный обход по кольцу: 0deg=верх, 25%=право, 50%=низ, 75%=лево. */
  background: conic-gradient(from 0deg,
    rgba(150, 222, 255, 0.92) 0%,     /* верх — яркий циан */
    rgba(120, 175, 255, 0.30) 25%,    /* право — тусклый синий */
    rgba(255, 188, 125, 0.42) 50%,    /* низ — мягкий тёплый */
    rgba(150, 222, 255, 0.82) 75%,    /* лево — циан */
    rgba(150, 222, 255, 0.92) 100%) !important;  /* обратно к верху */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  /* Мягкое свечение вокруг кольца. */
  box-shadow: 0 0 12px rgba(93, 231, 255, 0.4) !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

/* The previous separate pseudo-element could protrude as a rectangular underlay in Telegram WebView.
   The same visual depth is now baked into the hero background above. */
.hero::before {
  display: none !important;
  content: none !important;
}

.hero::after {
  background: linear-gradient(90deg, transparent, rgba(255, 209, 102, 0.82), transparent);
}

.hero-title {
  color: #ffffff;
}

.hero-title::after {
  background: linear-gradient(90deg, #5de7ff, #4e80ff 38%, #ffd166 68%, #ff7a2f);
}

.hero-subtitle {
  color: #edf3ff;
}

.section-title {
  color: #cbd7ff;
}

.section-title::before,
.shelf-title::before {
  background: linear-gradient(180deg, #5de7ff, #ff7a2f);
  box-shadow: 0 0 22px rgba(93, 231, 255, 0.45);
}

.app:not(.region-page):not(.game-detail-page):not(.cart-page) .card {
  border-color: rgba(93, 231, 255, 0.24);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 92% 18%, rgba(93, 231, 255, 0.1), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(255, 122, 47, 0.06), transparent 26%),
    linear-gradient(135deg, rgba(24, 48, 82, 0.98), rgba(22, 33, 64, 0.98) 58%, rgba(28, 24, 45, 0.98));
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.23),
    0 0 24px rgba(93, 231, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.card {
  border-color: rgba(93, 231, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 96% 20%, rgba(255, 122, 47, 0.08), transparent 28%),
    linear-gradient(135deg, rgba(18, 34, 60, 0.98), rgba(15, 24, 45, 0.98) 60%, rgba(15, 18, 34, 0.98));
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.card:active {
  border-color: rgba(255, 209, 102, 0.55);
  background: linear-gradient(135deg, rgba(24, 42, 72, 0.98), rgba(27, 25, 48, 0.98));
}

.card-title {
  color: #fffdf7;
}

.card-description {
  color: #d3dbf4;
}

.card-arrow,
.shelf-more {
  color: #5de7ff;
  text-shadow: 0 0 14px rgba(93, 231, 255, 0.45);
}

.card-icon {
  background: transparent;
  box-shadow: none;
}

.card-icon::after {
  display: none;
}

.card-icon-turkey,
.card-icon-cis,
.card-icon-india,
.card-icon-roblox,
.card-icon-appstore {
  background: transparent;
}

.benefit {
  border-color: rgba(93, 231, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(93, 231, 255, 0.08), rgba(255, 122, 47, 0.04)),
    rgba(14, 26, 48, 0.92);
  color: #eff6ff;
}

.benefit:nth-child(1) {
  border-color: rgba(255, 209, 102, 0.28);
}

.benefit:nth-child(2) {
  border-color: rgba(93, 231, 255, 0.28);
}

.benefit:nth-child(3) {
  border-color: rgba(255, 122, 47, 0.26);
}

.benefit:nth-child(4) {
  border-color: rgba(94, 234, 212, 0.22);
}

.back-button,
.product-row,
.sub-card,
.offer-card {
  border-color: rgba(93, 231, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    rgba(15, 26, 47, 0.94);
}

.hero-slide {
  border-color: rgba(93, 231, 255, 0.28);
  background:
    radial-gradient(circle at 28% 18%, rgba(93, 231, 255, 0.18), transparent 24%),
    radial-gradient(circle at 84% 20%, rgba(255, 122, 47, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(45, 76, 136, 0.42), rgba(16, 24, 43, 0.96)),
    #101827;
}

.hero-badge,
.sub-tab.is-active,
.game-cover-badge {
  background: linear-gradient(90deg, #5de7ff, #4e80ff 48%, #ff7a2f);
  color: #ffffff;
}

.hero-dot.is-active {
  background: #ff7a2f;
}

.game-cover {
  border-color: rgba(93, 231, 255, 0.22);
  background:
    radial-gradient(circle at 50% 25%, rgba(93, 231, 255, 0.16), transparent 24%),
    linear-gradient(145deg, #273f78, #101827 62%);
}

.game-tag {
  background: rgba(93, 231, 255, 0.11);
  color: #dff8ff;
}

.sub-price,
.product-price {
  color: #ffd166;
}