/* =========================================================================
   Zanivoq — премиальный интерактивный смартфон внутри страницы.
   Разделы: 1) токены  2) базовая страница  3) рамка телефона  4) статус-бар
   5) стек экранов/анимации  6) навигация  7) лента и реклама  8) игры
   9) кабинет рекламодателя  10) меню  11) адаптивность
   ========================================================================= */

/* 1. Токены -------------------------------------------------------------- */
:root {
  --bg-page: #08080a;
  --graphite-900: #0c0c0f;
  --graphite-800: #141417;
  --graphite-700: #1b1b1f;
  --graphite-600: #232327;
  --graphite-500: #2d2d33;

  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.055);

  --text-primary: #f5f5f7;
  --text-secondary: rgba(245, 245, 247, 0.62);
  --text-tertiary: rgba(245, 245, 247, 0.38);

  --accent: #8b8cf7;
  --accent-2: #c9a978;

  --font-display: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
button, input, textarea {
  font: inherit;
  color: inherit;
}
button {
  -webkit-tap-highlight-color: transparent;
}

/* 2. Базовая страница ------------------------------------------------------ */
.page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 46% at 50% -8%, rgba(139, 140, 247, 0.14), transparent 60%),
    radial-gradient(46% 36% at 88% 102%, rgba(201, 169, 120, 0.08), transparent 60%),
    var(--bg-page);
}

.page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 4vw, 38px) clamp(20px, 5vw, 56px) 0;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--text-primary);
}
.wordmark__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 2px rgba(139, 140, 247, 0.75);
}
.page__tag {
  font-size: 12.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.phone-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  perspective: 1800px;
}
.phone-glow {
  position: absolute;
  z-index: 0;
  width: min(560px, 72vw);
  height: min(560px, 72vw);
  background: radial-gradient(circle, var(--device-glow, rgba(139, 140, 247, 0.18)), transparent 65%);
  filter: blur(6px);
  pointer-events: none;
  transition: background 0.6s ease;
}

.stage-maximize-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 20, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.stage-maximize-btn svg { width: 17px; height: 17px; }
.stage-maximize-btn:active { transform: scale(0.9); }

.stage-flashlight-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 50;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 20, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.stage-flashlight-btn svg { width: 17px; height: 17px; }
.stage-flashlight-btn:active { transform: scale(0.9); }
.phone-stage.is-flashlight-on .stage-flashlight-btn {
  background: rgba(255, 214, 140, 0.22);
  border-color: rgba(255, 214, 140, 0.55);
  color: #ffe6b0;
}

/* Кирпичная стена за телефоном — чистый CSS-паттерн (4 диагональных
   градиента образуют кирпичи), без внешних изображений. Фонарик (кнопка
   выше) включает мягкий тёплый свет поверх неё через .stage-flashlight-glow. */
.brick-wall {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--wall-base);
  background-image:
    linear-gradient(335deg, var(--wall-mortar) 23px, transparent 23px),
    linear-gradient(155deg, var(--wall-mortar) 23px, transparent 23px),
    linear-gradient(335deg, var(--wall-mortar) 23px, transparent 23px),
    linear-gradient(155deg, var(--wall-mortar) 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 32px, 34px 4px;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.65);
  transition: background-color 0.4s ease;
}
.stage-flashlight-glow {
  position: absolute;
  inset: -25%;
  background: radial-gradient(closest-side, rgba(255, 244, 214, 0.55), rgba(255, 205, 130, 0.2) 45%, transparent 72%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}
.phone-stage.is-flashlight-on .stage-flashlight-glow { opacity: 1; }

/* Постеры покупной рекламы на стене (product category=ad_placement, format=wall) —
   отдельное, более заметное размещение, независимое от ленты (см. js/wall-ads.js).
   Показываются только там, где вокруг телефона реально видна стена (широкие экраны). */
.wall-ads { position: absolute; inset: 0; pointer-events: none; }
.wall-ad-poster {
  --decay: 1; /* 1 = свежее (крупно, близко, ярко) -> 0 = истекает (мелко, вдали, еле видно без фонарика) */
  display: none;
  position: absolute;
  width: 112px;
  pointer-events: auto;
  background: var(--graphite-800);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6);
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
  transform-origin: center;
  transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease, box-shadow 0.25s ease;
}
.wall-ad-poster:hover { filter: brightness(1.3) !important; box-shadow: 0 24px 52px rgba(0, 0, 0, 0.7); }
.wall-ad-poster--0 { left: 4%; top: 20%; }
.wall-ad-poster--1 { right: 4%; top: 54%; }

/* Фонарик "выхватывает из темноты" истекающие постеры — чем меньше --decay
   (ближе к концу срока), тем сильнее прибавка яркости и тем заметнее эффект. */
.phone-stage.is-flashlight-on .wall-ad-poster {
  opacity: calc(0.55 + 0.45 * var(--decay)) !important;
  filter: brightness(calc(1 + (1 - var(--decay)) * 1.6)) !important;
}
.wall-ad-poster__art { width: 100%; height: 96px; border-radius: 4px; object-fit: cover; display: block; background: var(--graphite-700); }
.wall-ad-poster__placeholder {
  width: 100%;
  height: 96px;
  border-radius: 4px;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-tertiary);
  padding: 6px;
}
.wall-ad-poster__brand { display: block; margin-top: 6px; font-size: 10px; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 900px) {
  .wall-ad-poster { display: block; }
}

/* Кнопка «На весь экран»: реальный Fullscreen API (где поддержан) + CSS-режим
   поверх — телефон занимает весь viewport даже там, где requestFullscreen()
   недоступен для произвольных элементов (например, старый iOS Safari). */
.phone-stage.is-maximized {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg-page);
  padding: 16px;
}
.phone-stage.is-maximized .phone-rig {
  width: min(calc(100vw - 32px), calc((100dvh - 32px) * 9 / 19.5));
}
body.is-stage-maximized, body.immersive-active { overflow: hidden; }

.page__footer {
  text-align: center;
  padding: 0 24px clamp(22px, 4vw, 40px);
}
.page__footer p {
  margin: 0;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 3. Рамка телефона -------------------------------------------------------- */
/* .phone-rig держит размер/позицию в сцене и получает "прицельный" transform
   от js/flashlight-aim.js (наклон телефона при включённом фонарике) — отдельно
   от .phone, у которого свой transform для переворота (flip-to-back), чтобы
   два transform не перезаписывали друг друга на одном элементе. */
.phone-rig {
  position: relative;
  z-index: 1;
  width: min(390px, 88vw, calc(86dvh * 9 / 19.5));
  aspect-ratio: 9 / 19.5;
  transform-style: preserve-3d;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.phone {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.15, 1);
}
.phone.is-flipped { transform: rotateY(180deg); }

.phone__face {
  position: absolute;
  inset: 0;
  padding: 14px;
  border-radius: var(--device-radius, 54px);
  background: var(--device-frame, linear-gradient(155deg, #3c3c42, #131316 38%, #1a1a1d 62%, #48484e));
  box-shadow:
    0 60px 120px -24px rgba(0, 0, 0, 0.75),
    0 24px 50px -20px rgba(0, 0, 0, 0.6),
    0 0 46px -6px var(--device-glow, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: border-radius 0.6s cubic-bezier(0.32, 0.72, 0, 1), background 0.6s ease, box-shadow 0.6s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.phone__face--back { transform: rotateY(180deg); }

.phone__flip-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(20, 20, 23, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.phone__flip-btn svg { width: 16px; height: 16px; }
.phone__flip-btn:active { transform: scale(0.9); }
.phone__flip-btn--back { right: auto; left: 16px; }

.phone-back {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 42px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.25)), var(--graphite-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.9), inset 0 0 30px rgba(0, 0, 0, 0.5);
}
.phone-back::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 30% 0%, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
}
.phone-back__camera {
  position: absolute;
  top: 34px;
  left: 34px;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone-back__lens {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #55555c, #0a0a0c 70%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06), inset 0 0 6px rgba(0, 0, 0, 0.8);
}
.phone-back__lens--small { position: absolute; width: 14px; height: 14px; bottom: 8px; right: 8px; }
.phone-back__brand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.phone-back__glyph { font-size: 40px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4)); }
.phone-back__name { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: rgba(255, 255, 255, 0.82); letter-spacing: 0.02em; }
.phone-back__etch {
  position: absolute;
  bottom: 26px;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.28);
  font-weight: 700;
}

.phone__button {
  position: absolute;
  border: none;
  border-radius: 3px;
  background: linear-gradient(180deg, #4c4c52, #202024);
  padding: 0;
}
.phone__button--volume-up { left: -3px; top: 108px; width: 3px; height: 30px; }
.phone__button--volume-down { left: -3px; top: 146px; width: 3px; height: 50px; }
.phone__button--power {
  right: -3px;
  top: 130px;
  width: 3px;
  height: 64px;
  cursor: pointer;
}
.phone__button--power:active { background: linear-gradient(180deg, #5c5c62, #2a2a2e); }

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* .phone-rig выше выключает touch-action, чтобы ловить жест прицеливания
     фонариком на рамке телефона — здесь явно возвращаем обычный скролл/свайпы,
     иначе вертикальная прокрутка экранов и edge-swipe-back сломались бы на тачскринах. */
  touch-action: pan-y;
  border-radius: 42px;
  background: var(--graphite-900);
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.9),
    inset 0 0 34px rgba(0, 0, 0, 0.5);
}

.dynamic-island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 112px;
  height: 32px;
  background: #000;
  border-radius: 20px;
  z-index: 80;
}

.sleep-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.phone__screen.is-asleep .sleep-overlay { opacity: 1; pointer-events: auto; }
.sleep-overlay__time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  color: #fff;
}
.sleep-overlay__hint { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }

/* 4. Статус-бар -------------------------------------------------------------- */
.status-bar {
  position: relative;
  z-index: 40;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px 4px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14.5px;
}
.status-bar__icons { display: flex; align-items: center; gap: 6px; color: var(--text-primary); }
.status-bar__icons svg { fill: currentColor; display: block; }
.icon-signal { width: 18px; height: 11px; }
.icon-wifi { width: 14px; height: 11px; }
.icon-battery { width: 22px; height: 11px; }

/* 5. Стек экранов и анимации переходов --------------------------------------- */
.screen-stack {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow: hidden;
  touch-action: pan-y;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--graphite-900);
  transform: translateX(0);
  opacity: 1;
  will-change: transform;
}
.screen--visible {
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.32s ease;
}
.screen--push-enter { transform: translateX(100%); }
.screen--behind {
  transform: translateX(-18%);
  opacity: 0.6;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.38s ease;
}
.screen--exit {
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
}
.screen--enter-fade { opacity: 0; }
.screen--fading-out { opacity: 0; transition: opacity 0.26s ease; pointer-events: none; }
.screen--dragging { transition: none !important; }

.screen__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 20px 14px;
}
.screen__back {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--graphite-700);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.screen__back svg { width: 17px; height: 17px; }
.screen__back:active { transform: scale(0.92); background: var(--graphite-600); }

.screen__title-wrap { flex: 1; min-width: 0; }
.screen__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.screen__subtitle { margin: 3px 0 0; font-size: 12.5px; color: var(--text-tertiary); font-weight: 500; }
.screen__header-right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

.screen__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 20px 28px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screen__body::-webkit-scrollbar { display: none; }
/* screen__body doubles as a flex column (via its *-body modifier classes,
   e.g. .menu-body) purely for the `gap` shorthand — its children should
   scroll, never shrink. Without this, any bounded-height flex child that
   also has overflow:hidden (e.g. .menu-list, for rounded-corner clipping)
   gets an automatic min-height of 0 per the flexbox spec and collapses
   toward 0 instead of keeping its content height. */
.screen__body > * { flex-shrink: 0; }

/* 6. Нижняя навигация --------------------------------------------------------- */
.bottom-nav {
  position: relative;
  z-index: 60;
  flex-shrink: 0;
  display: flex;
  border-top: 1px solid var(--line);
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(20px);
}
.bottom-nav__pill {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 14px;
  width: calc((100% - 28px) / 4);
  background: var(--graphite-700);
  border-radius: 16px;
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 0;
}
.bottom-nav__item {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.25s ease;
}
.bottom-nav__item svg { width: 22px; height: 22px; }
.bottom-nav__item.is-active { color: var(--text-primary); }

/* 7. Лента и реклама ----------------------------------------------------------- */
.feed-body { padding-top: 8px; }
.feed-endcap { text-align: center; color: var(--text-tertiary); font-size: 12.5px; padding: 18px 0 8px; }

.feed-signin-banner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(139, 140, 247, 0.16), rgba(201, 169, 120, 0.06));
  border: 1px solid rgba(139, 140, 247, 0.3);
}
.feed-signin-banner__text { min-width: 0; }
.feed-signin-banner__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.feed-signin-banner__sub { margin: 2px 0 0; font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; }
.feed-signin-banner__btn { min-height: 40px; display: flex; align-items: center; justify-content: center; }

.ad-art, .game-tile__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-art::after, .game-tile__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
  mix-blend-mode: overlay;
}
.ad-art__glyph { font-size: 42px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }
.ad-art__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ad-art--gold, .game-tile__art--gold, .ad-logo--gold-bg { background: linear-gradient(135deg, #3c3119, #1c1710 55%, #0f0d09); }
.ad-art--indigo, .game-tile__art--indigo { background: linear-gradient(135deg, #2b2b58, #17172c 55%, #0d0d18); }
.ad-art--emerald, .game-tile__art--emerald { background: linear-gradient(135deg, #173328, #101f1a 55%, #0a1310); }
.ad-art--rose, .game-tile__art--rose { background: linear-gradient(135deg, #3a1f2a, #1e1319 55%, #100a0d); }
.ad-art--graphite, .game-tile__art--graphite { background: linear-gradient(135deg, #2c2c31, #19191c 55%, #0e0e10); }

.ad-card {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.ad-card:active { transform: scale(0.98); }
.ad-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ad-card--card .ad-art { height: 100px; }
.ad-card--large .ad-art { height: 186px; }
.ad-card--large .ad-art__glyph { font-size: 58px; }
.ad-card--large .ad-card__title { font-size: 19px; }
.ad-card--fullscreen .ad-art { height: 320px; }
.ad-card--fullscreen .ad-art__glyph { font-size: 86px; }
.ad-card--fullscreen .ad-card__title { font-size: 22px; }
.ad-card--fullscreen { margin-bottom: 20px; }

.ad-card__body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 7px; }
.ad-card__meta { display: flex; align-items: center; gap: 8px; }

.ad-logo {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10.5px;
  color: #0c0c0f;
}
.ad-logo--gold { background: linear-gradient(135deg, #e9c988, #b98f45); }
.ad-logo--indigo { background: linear-gradient(135deg, #a9acff, #6f6ff2); }
.ad-logo--emerald { background: linear-gradient(135deg, #8be0bb, #3aa579); }
.ad-logo--rose { background: linear-gradient(135deg, #f3a9c4, #c9587f); }
.ad-logo--graphite { background: linear-gradient(135deg, #c7c7cf, #8c8c96); }

.ad-card__advertiser { font-size: 13px; font-weight: 700; }
.ad-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-soft);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.ad-card__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.28; }
.ad-card__desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ad-cta {
  margin-top: 4px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--graphite-600);
  border: 1px solid var(--line);
  color: var(--text-primary);
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.ad-cta svg { width: 13px; height: 13px; }
.ad-cta:active { transform: scale(0.95); }
.ad-cta--wide {
  align-self: stretch;
  width: 100%;
  justify-content: center;
  padding: 15px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, var(--accent), #6a67e8);
  font-size: 15px;
  color: #fff;
}

.ad-detail .screen__body { padding: 0 0 100px; }
.ad-detail .ad-art { height: 240px; }
.ad-detail .ad-art__glyph { font-size: 72px; }
.ad-detail__content { padding: 20px 20px 12px; }
.ad-detail__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ad-detail__meta .ad-logo { width: 44px; height: 44px; border-radius: 14px; font-size: 15px; }
.ad-detail__advertiser { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.ad-detail__title { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1.28; }
.ad-detail__desc { margin: 0 0 14px; font-size: 14.5px; color: var(--text-secondary); line-height: 1.55; }
.ad-detail__desc--muted { font-size: 12px; color: var(--text-tertiary); }
.ad-detail__ctabar {
  flex-shrink: 0;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  background: var(--graphite-900);
}

/* 8. Игры ----------------------------------------------------------------------- */
.games-body { padding-top: 8px; }
.games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.game-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 15px;
  border-radius: 20px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s ease;
}
.game-tile:active { transform: scale(0.97); }
.game-tile.is-locked { opacity: 0.42; cursor: not-allowed; }
.game-tile__art { width: 100%; aspect-ratio: 1.5 / 1; border-radius: 14px; font-size: 32px; }
.game-tile__title { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; }
.game-tile__tagline { font-size: 11.5px; color: var(--text-tertiary); }

.game-header-right { display: flex; align-items: center; gap: 8px; }
.game-score-badge {
  min-width: 32px;
  text-align: center;
  background: var(--graphite-700);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
}
.game-restart-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--graphite-700);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.game-restart-btn svg { width: 16px; height: 16px; }
.game-restart-btn:active { transform: scale(0.92); }

.leaderboard-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.leaderboard-tab {
  flex: 1;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--graphite-700);
  color: var(--text-tertiary);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}
.leaderboard-tab.is-active { background: var(--accent); color: #fff; border-color: transparent; }
.leaderboard-list { display: flex; flex-direction: column; gap: 6px; }
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--graphite-700);
  border: 1px solid var(--line);
}
.leaderboard-row--top { border-color: var(--accent-2); background: linear-gradient(135deg, rgba(201,169,120,0.14), var(--graphite-700)); }
.leaderboard-row__rank { min-width: 22px; text-align: center; font-weight: 800; font-size: 13px; color: var(--text-tertiary); }
.leaderboard-row--top .leaderboard-row__rank { font-size: 16px; }
.leaderboard-row__name { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-row__score { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--accent-2); }

.in-app-browser-screen .screen__title { font-size: 20px; }
.in-app-browser-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.in-app-browser__banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  background: var(--graphite-800);
  border-bottom: 1px solid var(--line);
}
.in-app-browser__banner-btn {
  margin-left: auto;
  flex-shrink: 0;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.in-app-browser__frame-wrap { position: relative; flex: 1; min-height: 0; background: #fff; }
.in-app-browser__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.in-app-browser__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: in-app-browser-spin 0.8s linear infinite;
}
@keyframes in-app-browser-spin { to { transform: rotate(360deg); } }

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: 480px;
  margin: 0 auto;
  background: var(--graphite-800);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.cookie-banner__text { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.cookie-banner__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.cookie-banner__link {
  border: none;
  background: none;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 4px;
}
.cookie-banner__accept {
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
}

.game-body { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
.game-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}
.game-canvas {
  touch-action: none;
  border-radius: 18px;
  background: var(--graphite-800);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.g2048 { position: relative; touch-action: none; }
.g2048__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  padding: 10px;
  background: var(--graphite-800);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.g2048__cell-bg { border-radius: 10px; background: rgba(255, 255, 255, 0.035); }
.g2048__tiles { position: absolute; inset: 0; }
.g2048__tile {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  transition: transform 0.12s ease;
}
.g2048__tile--new { animation: tilePop 0.2s cubic-bezier(0.2, 1, 0.3, 1); }
@keyframes tilePop {
  from { scale: 0.45; opacity: 0; }
  to { scale: 1; opacity: 1; }
}
.g2048__tile--2 { background: var(--graphite-600); color: var(--text-primary); }
.g2048__tile--4 { background: var(--graphite-500); color: var(--text-primary); }
.g2048__tile--8 { background: linear-gradient(135deg, #6f6ff2, #4f4fd1); color: #fff; }
.g2048__tile--16 { background: linear-gradient(135deg, #8b8cf7, #6a67e8); color: #fff; }
.g2048__tile--32 { background: linear-gradient(135deg, #a9acff, #7d7ff2); color: #0c0c0f; }
.g2048__tile--64 { background: linear-gradient(135deg, #caa8ff, #9a6ff2); color: #0c0c0f; }
.g2048__tile--128 { background: linear-gradient(135deg, #f3d28a, #d9a94c); color: #0c0c0f; }
.g2048__tile--256 { background: linear-gradient(135deg, #f6dc9e, #e0b65a); color: #0c0c0f; }
.g2048__tile--512 { background: linear-gradient(135deg, #f8e6b0, #e9c46b); color: #0c0c0f; }
.g2048__tile--1024 { background: linear-gradient(135deg, #fbeecb, #f0d27f); color: #0c0c0f; }
.g2048__tile--2048, .g2048__tile--max {
  background: linear-gradient(135deg, #fff3d6, #f5db8f);
  color: #0c0c0f;
  box-shadow: 0 0 18px rgba(245, 219, 143, 0.5);
}

.game-overlay[hidden] { display: none; }
.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  background: rgba(10, 10, 12, 0.86);
  backdrop-filter: blur(6px);
  border-radius: 18px;
}
.game-overlay__icon { width: 42px; height: 42px; color: var(--accent-2); }
.game-overlay h3 { margin: 0; font-family: var(--font-display); font-size: 19px; }
.game-overlay__score { margin: 0; color: var(--text-secondary); font-size: 14px; }
.game-overlay__btn {
  margin-top: 6px;
  background: linear-gradient(135deg, var(--accent), #6a67e8);
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 14px;
  cursor: pointer;
}
.game-overlay__btn:active { transform: scale(0.96); }

/* 9. Кабинет рекламодателя -------------------------------------------------------- */
.advertise-body { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.advertise-intro { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }

.advertise-stats { display: flex; flex-direction: column; gap: 10px; }
.advertise-stats__panel { display: flex; flex-direction: column; gap: 10px; }
.advertise-stats__lookup { display: flex; gap: 8px; }
.advertise-stats__email {
  flex: 1;
  min-width: 0;
  background: var(--graphite-800);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text-primary);
  font-size: 13px;
}
.advertise-stats__show {
  flex-shrink: 0;
  background: var(--graphite-700);
  border: 1px solid var(--line);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.advertise-stats__list { display: flex; flex-direction: column; gap: 8px; }
.advertise-stats__row { background: var(--graphite-800); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; }
.advertise-stats__row-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.advertise-stats__row-title { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.advertise-stats__row-status { flex-shrink: 0; font-size: 10px; text-transform: uppercase; color: var(--text-tertiary); }
.advertise-stats__row-nums { font-size: 11.5px; color: var(--text-secondary); }

.pricing-list { display: flex; flex-direction: column; gap: 10px; }
.pricing-card {
  text-align: left;
  border: 1px solid var(--line-soft);
  background: var(--graphite-800);
  border-radius: 16px;
  padding: 13px 15px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pricing-card.is-selected {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(139, 140, 247, 0.14), rgba(139, 140, 247, 0.02));
}
.pricing-card__row { display: flex; align-items: center; justify-content: space-between; }
.pricing-card__format { font-weight: 700; font-size: 14px; }
.pricing-card__radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; }
.pricing-card.is-selected .pricing-card__radio {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 40%, transparent 42%);
}
.pricing-card__price { margin: 6px 0 2px; font-size: 12.5px; font-weight: 700; color: var(--accent-2); }
.pricing-card__desc { margin: 0; font-size: 11.5px; color: var(--text-tertiary); }

.advertise-form { display: flex; flex-direction: column; gap: 13px; padding-bottom: 4px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.field input, .field textarea, .field select {
  background: var(--graphite-800);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 13px;
  color: var(--text-primary);
  font-size: 14px;
  resize: none;
  outline: none;
  transition: border-color 0.2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field--upload .upload-row { display: flex; align-items: center; gap: 10px; }
.upload-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--graphite-700);
  border: 1px solid var(--line);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.upload-btn svg { width: 14px; height: 14px; }
.upload-filename { font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-preview { margin-top: 10px; max-width: 100%; max-height: 140px; border-radius: 12px; border: 1px solid var(--line); object-fit: cover; }
.form-error { color: #f0a3a3; font-size: 12px; margin: 0; }
.form-status-banner {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #ffd699;
  background: rgba(255, 214, 140, 0.12);
  border: 1px solid rgba(255, 214, 140, 0.3);
}
.advertise-submit {
  margin-top: 2px;
  background: linear-gradient(135deg, var(--accent), #6a67e8);
  border: none;
  color: #fff;
  font-weight: 800;
  padding: 15px;
  border-radius: 16px;
  font-size: 15px;
  cursor: pointer;
}
.advertise-submit:active { transform: scale(0.98); }

.payment-screen .screen__body { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.order-summary { background: var(--graphite-800); border: 1px solid var(--line-soft); border-radius: 16px; padding: 2px 16px; }
.summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.summary-row:last-child { border-bottom: none; }
.summary-row__label { color: var(--text-tertiary); }
.summary-row__value { font-weight: 700; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-label { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); }

.payment-methods { display: flex; flex-direction: column; gap: 10px; }
.payment-method {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
}
.payment-method__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--graphite-700);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
}
.payment-method__icon svg { width: 18px; height: 18px; }
.payment-method__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.payment-method__label-row { display: flex; align-items: center; gap: 6px; }
.payment-method__label { font-weight: 700; font-size: 14px; }
.payment-method__recommended {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #0c0c0f;
  background: linear-gradient(135deg, var(--accent-2), #f0d27f);
  padding: 2px 7px;
  border-radius: 20px;
}
.payment-method__hint { font-size: 11px; color: var(--text-tertiary); }
.payment-method__go svg { width: 16px; height: 16px; color: var(--text-tertiary); }
.payment-method__badge {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.payment-method.is-soon { opacity: 0.72; }
.payment-method.is-loading { opacity: 0.6; pointer-events: none; }
.payment-method.shake { animation: shake 0.4s ease; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.payment-disclaimer { margin: 0; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; }

.usdt-screen .screen__body { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.wallet-card {
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 4px 16px;
}
.wallet-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 13px;
}
.wallet-card__label { color: var(--text-tertiary); }
.wallet-card__value { font-weight: 700; }
.wallet-card__qr {
  display: flex;
  justify-content: center;
  padding: 14px 0 4px;
  border-top: 1px solid var(--line-soft);
}
.wallet-card__qr svg {
  width: 148px;
  height: 148px;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}
.wallet-card__address-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.wallet-card__address {
  flex: 1;
  min-width: 0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 7px 9px;
  overflow-wrap: anywhere;
}
.wallet-card__copy {
  flex-shrink: 0;
  background: var(--graphite-600);
  border: 1px solid var(--line);
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.wallet-card__pending {
  margin: 0;
  padding: 12px 0 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.usdt-contact-btn {
  display: block;
  text-align: center;
  margin-top: 2px;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.wallet-card__value--amount { font-variant-numeric: tabular-nums; color: var(--accent-2); }
.pricing-loading { margin: 0; padding: 20px 0; text-align: center; color: var(--text-tertiary); font-size: 13px; }

.checkout-status {
  margin: 2px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  color: var(--text-secondary);
}
.checkout-status--verifying { color: var(--text-primary); }
.checkout-status--ok { color: #6fe0a8; border-color: rgba(111, 224, 168, 0.35); background: rgba(111, 224, 168, 0.08); }
.checkout-status--error { color: #e0a08b; border-color: rgba(224, 160, 139, 0.35); background: rgba(224, 160, 139, 0.08); }

/* Device Store (Personal Device) ------------------------------------------------- */
.device-store-screen .screen__body { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.store-grid { display: flex; flex-direction: column; gap: 10px; }
.store-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 12px 14px;
}
.store-card.is-active { border-color: var(--accent); background: linear-gradient(135deg, rgba(139, 140, 247, 0.12), rgba(139, 140, 247, 0.02)); }
.store-card__top { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.store-card__glyph {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: var(--graphite-700);
}
.store-card__info { min-width: 0; }
.store-card__name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.store-card__price { margin: 2px 0 0; font-size: 12px; color: var(--accent-2); font-weight: 700; }
.store-card__btn {
  flex-shrink: 0;
  background: var(--graphite-600);
  border: 1px solid var(--line);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 12px;
  cursor: pointer;
}
.store-card__btn:disabled { opacity: 0.5; cursor: default; }
.store-card__btn.is-owned { background: none; border-color: var(--accent); color: var(--accent); }
.consent-gate { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.consent-gate__row { display: flex; align-items: flex-start; gap: 8px; text-align: left; cursor: pointer; max-width: 280px; }
.consent-gate__checkbox { flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.consent-gate__text { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }
.consent-gate__link { color: var(--accent-2); text-decoration: underline; }
.consent-gate__google-host { display: flex; justify-content: center; min-height: 40px; width: 100%; }
.consent-gate__hint { margin: 0; font-size: 11px; color: var(--text-tertiary); text-align: center; }
.consent-gate__hint--warning { color: #e0a030; line-height: 1.5; padding: 6px 4px; }
.consent-gate__divider {
  width: 100%;
  max-width: 280px;
  margin: 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  position: relative;
}
.consent-gate__divider::before, .consent-gate__divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 16px);
  border-top: 1px solid var(--line-soft);
}
.consent-gate__divider::before { left: 0; }
.consent-gate__divider::after { right: 0; }

.email-auth-form { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }
.email-auth-form__input {
  width: 100%;
  background: var(--graphite-700);
  border: 1px solid var(--line-soft);
  color: var(--text-primary);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 10px;
}
.email-auth-form__input::placeholder { color: var(--text-tertiary); }
.email-auth-form__actions { display: flex; gap: 8px; }
.email-auth-form__btn {
  flex: 1;
  border: 1px solid var(--line-soft);
  background: var(--graphite-700);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.email-auth-form__btn--primary { background: var(--accent); border-color: transparent; color: #fff; }
.email-auth-form__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.email-auth-form__status { margin: 0; font-size: 11.5px; text-align: center; color: var(--text-secondary); }
.email-auth-form__status.is-error { color: #e08b8b; }

.store-signin { text-align: center; padding: 14px; border-radius: 14px; background: var(--graphite-800); border: 1px solid var(--line-soft); }
.store-signin p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary); }
.store-signin__btn { display: flex; justify-content: center; min-height: 40px; }
.store-note {
  margin: 0 0 4px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(111, 224, 168, 0.1);
  border: 1px solid rgba(111, 224, 168, 0.3);
  color: #6fe0a8;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

/* Games: Premium packs ------------------------------------------------------------ */
.games-premium-label { margin: 20px 0 8px; }
.packs-list { display: flex; flex-direction: column; gap: 10px; }
.pack-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 13px 14px;
}
.pack-card.is-owned { border-color: var(--accent); }
.pack-card__top { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.pack-card__glyph {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: linear-gradient(135deg, #6f6ff2, #4f4fd1);
}
.pack-card__info { min-width: 0; }
.pack-card__name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.pack-card__desc { margin: 2px 0 0; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.4; }
.pack-card__btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #6a67e8);
  border: none;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.pack-card.is-owned .pack-card__btn { background: var(--graphite-600); border: 1px solid var(--line); }

/* Account (Menu) -------------------------------------------------------------------- */
.menu-account-row { padding: 14px 16px; cursor: default; display: flex; align-items: center; gap: 12px; }
.menu-account-row__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--graphite-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-display);
}
.menu-account-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.menu-account-row__info { flex: 1; min-width: 0; }
.menu-account-row__name { margin: 0; font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-account-row__email { margin: 2px 0 0; font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-account-row__streak { margin-left: 6px; font-size: 11px; font-weight: 700; color: #e0b76a; }
.menu-account-row__signout {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.menu-account-row--signed-out { flex-direction: column; align-items: stretch; gap: 10px; }
.menu-account-row__hint { margin: 0; font-size: 12px; color: var(--text-secondary); text-align: center; }
.menu-account-row__btn { display: flex; justify-content: center; min-height: 40px; }

/* Memory game ------------------------------------------------------------------------ */
.memory-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.memory-levels { display: flex; flex-direction: column; gap: 8px; }
.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.memory-card {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: var(--graphite-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.memory-card:disabled { cursor: default; }
.memory-card.is-flipped { background: var(--graphite-600); animation: tilePop 0.2s cubic-bezier(0.2, 1, 0.3, 1); }
.memory-card.is-matched { background: rgba(111, 224, 168, 0.14); border-color: rgba(111, 224, 168, 0.4); }

/* Minesweeper ------------------------------------------------------------------------- */
.minesweeper { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.minesweeper__toolbar { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 2px; }
.minesweeper__mines { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--text-primary); }
.minesweeper__flag-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--graphite-700);
  font-size: 16px;
  cursor: pointer;
}
.minesweeper__flag-btn.is-active { background: var(--accent); border-color: var(--accent); }
.minesweeper__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; width: 100%; }
.minesweeper__grid .minesweeper__cell,
.minesweeper__grid button {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: none;
  background: var(--graphite-700);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.minesweeper__grid button.is-revealed { background: var(--graphite-900); cursor: default; }
.minesweeper__grid button.is-revealed[data-n="1"] { color: #6fb7ff; }
.minesweeper__grid button.is-revealed[data-n="2"] { color: #6fe0a8; }
.minesweeper__grid button.is-revealed[data-n="3"] { color: #e08b8b; }
.minesweeper__grid button.is-revealed[data-n="4"] { color: #a9acff; }
.minesweeper__grid button.is-mine { background: rgba(224, 139, 139, 0.25); }
.minesweeper__grid button.is-flagged { background: rgba(240, 210, 127, 0.14); }

/* Premium game tile badge -------------------------------------------------------- */
.game-tile { position: relative; }
.game-tile__premium-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--graphite-900);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.game-tile.is-locked-premium .game-tile__tagline { color: var(--accent-2); }

/* Store: Phone Access / Games Pass / Premium sections --------------------------------- */
.store-screen .screen__body { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.store-section { margin-bottom: 8px; }
.store-status-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(111, 224, 168, 0.1);
  border: 1px solid rgba(111, 224, 168, 0.3);
  color: #6fe0a8;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 10px;
}
.store-status-banner svg { width: 15px; height: 15px; flex-shrink: 0; }
.duration-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.duration-row::-webkit-scrollbar { display: none; }
.duration-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 92px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 12px 13px;
  cursor: pointer;
}
.duration-card:active { transform: scale(0.97); }
.duration-card__name { font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.duration-card__price { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--accent-2); }

.store-category-switch { margin-bottom: 12px; }
.store-project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* Profile ---------------------------------------------------------------------------- */
.profile-screen .screen__body { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.profile-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 0 18px; }
.profile-hero__glyph {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  margin-bottom: 8px;
}
.profile-hero__name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.profile-hero__sub { margin: 2px 0 0; font-size: 11.5px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.profile-status-box {
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 2px 16px;
  margin-bottom: 18px;
}
.profile-status-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.profile-status-row:last-child { border-bottom: none; }
.profile-status-row__label { color: var(--text-tertiary); font-weight: 600; }
.profile-status-row__value { font-weight: 700; color: var(--text-tertiary); }
.profile-status-row__value.is-active { color: #6fe0a8; }

/* Apps grid (Menu home-screen) --------------------------------------------------------- */
.apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
.app-tile__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-primary);
  transition: transform 0.15s ease, background 0.2s ease;
}
.app-tile__icon svg { width: 22px; height: 22px; }
.app-tile:active .app-tile__icon { transform: scale(0.92); background: var(--graphite-700); }
.app-tile__label { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); text-align: center; }

.sponsored-tile { position: relative; }
.sponsored-tile__icon { overflow: hidden; }
.sponsored-tile__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sponsored-tile__badge {
  position: absolute;
  top: 0;
  right: 6px;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0c0c0f;
  background: var(--accent-2);
  padding: 1.5px 5px;
  border-radius: 6px;
}

.external-confirm-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(4px);
}
.external-confirm-card {
  width: 100%;
  max-width: 280px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 18px 16px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.external-confirm-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 14.5px; }
.external-confirm-url { margin: 0 0 16px; font-size: 12px; color: var(--text-tertiary); word-break: break-all; }
.external-confirm-actions { display: flex; gap: 8px; }
.external-confirm-actions button {
  flex: 1;
  border-radius: 12px;
  padding: 10px 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--line);
}
.external-confirm-cancel { background: var(--graphite-700); color: var(--text-primary); }
.external-confirm-open { background: var(--accent); color: #fff; border-color: transparent; }

/* Camera ------------------------------------------------------------------------------- */
.camera-screen .screen__body { padding: 4px 20px 14px; display: flex; flex-direction: column; }
.camera-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  background: var(--graphite-800);
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-stage video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera-error { padding: 20px; text-align: center; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.camera-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
.camera-flash.is-active { opacity: 0.85; }
.camera-controls { display: flex; align-items: center; justify-content: center; padding: 22px 0 6px; }
.camera-shutter {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--graphite-600);
  cursor: pointer;
}
.camera-shutter:active { transform: scale(0.94); }

/* Gallery -------------------------------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery-grid__item { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: var(--graphite-800); }
.gallery-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 20px; text-align: center; }
.gallery-empty p { margin: 0; font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }
.gallery-empty .advertise-submit { padding: 11px 20px; }

/* Notes ------------------------------------------------------------------------------------ */
.notes-add-btn { font-size: 20px; font-weight: 700; line-height: 1; }
.notes-row { align-items: center; }
.notes-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.notes-row__title { font-size: 14px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-row__preview { font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-delete-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--graphite-700);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.notes-delete-btn svg { width: 13px; height: 13px; }
.notes-editor-screen .screen__body { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.notes-title-input {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  padding: 6px 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--text-primary);
  outline: none;
}
.notes-body-input {
  flex: 1;
  min-height: 40vh;
  background: none;
  border: none;
  resize: none;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  outline: none;
  font-family: inherit;
}

/* Calculator -------------------------------------------------------------------------------- */
.calculator-screen .screen__body { display: flex; flex-direction: column; padding: 10px 16px 16px; }
.calc-display {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px 8px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 12vw, 56px);
  color: var(--text-primary);
  word-break: break-all;
  text-align: right;
}
.calc-pad { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.calc-row { display: flex; gap: 10px; }
.calc-btn {
  flex: 1 1 0%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: none;
  background: var(--graphite-700);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
}
.calc-btn:active { filter: brightness(1.3); }
.calc-btn--op { background: var(--accent); color: #fff; font-weight: 700; }
.calc-btn--clear { background: var(--graphite-500); }
.calc-btn--wide { flex: 2 1 0%; aspect-ratio: auto; border-radius: 999px; text-align: left; padding-left: 26px; }

.quiz { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px; }
.quiz__progress { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--text-tertiary); background: var(--graphite-700); padding: 5px 11px; border-radius: 20px; }
.quiz__question { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.35; }
.quiz__options { display: flex; flex-direction: column; gap: 10px; }
.quiz__option {
  text-align: left;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  color: var(--text-primary);
  padding: 13px 15px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.quiz__option:disabled { cursor: default; }
.quiz__option.is-correct { border-color: #6fe0a8; background: rgba(111, 224, 168, 0.14); }
.quiz__option.is-wrong { border-color: #e08b8b; background: rgba(224, 139, 139, 0.14); }

.quiz__pick-title { margin: 0 0 2px; font-family: var(--font-display); font-weight: 800; font-size: 17px; text-align: center; }
.quiz__topics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quiz__topic-btn {
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  color: var(--text-primary);
  padding: 14px 8px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.quiz__topic-btn:active { transform: scale(0.97); }
.quiz__topic-btn--mix {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--accent), #6a67e8);
  border-color: transparent;
  color: #fff;
}

.success-screen .screen__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 36px; }
.success-badge {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6a67e8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.success-badge svg { width: 28px; height: 28px; }
.success-screen h2 { margin: 0; font-family: var(--font-display); font-size: 20px; }
.success-screen p { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }
.success-screen .advertise-submit { width: 100%; margin-top: 12px; }

/* 10. Меню ------------------------------------------------------------------------ */
.menu-body { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.menu-list { display: flex; flex-direction: column; background: var(--graphite-800); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; }
.menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  color: var(--text-primary);
}
.menu-row:last-child { border-bottom: none; }
.menu-row__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: var(--graphite-700); display: flex; align-items: center; justify-content: center; color: var(--accent-2); }
.menu-row__icon svg { width: 16px; height: 16px; }
.menu-row__label { flex: 1; text-align: left; font-size: 14px; font-weight: 600; }
.menu-row__value { font-size: 12.5px; color: var(--text-tertiary); font-weight: 600; }
.menu-row__chevron svg { width: 15px; height: 15px; color: var(--text-tertiary); }
.menu-version { margin: 0; text-align: center; font-size: 11.5px; color: var(--text-tertiary); }
.menu-section-label { margin: 18px 0 8px; }
.menu-section-label:first-child { margin-top: 0; }
.menu-row--lang { cursor: default; }
.lang-switch { margin-left: auto; display: flex; gap: 3px; background: var(--graphite-900); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.lang-switch__option {
  border: none;
  background: none;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.lang-switch__option.is-active { background: var(--graphite-600); color: var(--text-primary); }

.wall-theme-row { flex-wrap: wrap; row-gap: 10px; }
.wall-theme-swatches { margin-left: auto; display: flex; gap: 8px; }
.wall-theme-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.wall-theme-swatch.is-active { border-color: var(--accent-2); }

/* 11.5 Прогресс устройства -------------------------------------------------------- */
.device-card {
  display: block;
  width: 100%;
  text-align: left;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 15px 16px 16px;
  margin-bottom: 18px;
  cursor: pointer;
}
.device-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.device-card__glyph {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: var(--graphite-700);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.device-card__info { flex: 1; min-width: 0; }
.device-card__eyebrow { margin: 0 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); }
.device-card__name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 14.5px; }
.device-card__chevron svg { width: 15px; height: 15px; color: var(--text-tertiary); }

.device-progress-bar { position: relative; height: 8px; border-radius: 20px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.device-progress-bar__fill {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--device-accent, var(--accent)), var(--accent-2));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.device-progress-bar--lg { height: 12px; margin: 4px 0 10px; }

.device-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: 11.5px; }
.device-card__target { color: var(--text-secondary); font-weight: 600; }
.device-card__amount { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

.device-screen .screen__body { padding-top: 4px; }
.device-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 0 18px; }
.device-hero__glyph {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  margin-bottom: 8px;
  box-shadow: 0 0 30px -4px var(--device-glow, transparent);
}
.device-hero__sub { margin: 0; font-size: 11.5px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.device-hero__name { margin: 2px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 21px; }

.device-stats { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 18px; }
.device-stats__amount { margin: 0; font-weight: 700; font-size: 13.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.device-stats__pct { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--text-primary); }

.device-timeline { display: flex; flex-wrap: wrap; gap: 14px 10px; margin: 12px 0 20px; }
.device-timeline__node { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 54px; opacity: 0.4; }
.device-timeline__node.is-done, .device-timeline__node.is-current { opacity: 1; }
.device-timeline__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--graphite-600); border: 2px solid var(--line); }
.device-timeline__node.is-done .device-timeline__dot { background: var(--accent-2); border-color: var(--accent-2); }
.device-timeline__node.is-current .device-timeline__dot {
  background: var(--device-accent, var(--accent));
  border-color: var(--device-accent, var(--accent));
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}
.device-timeline__label { font-size: 10px; font-weight: 700; color: var(--text-tertiary); text-align: center; }
.device-timeline__node.is-current .device-timeline__label { color: var(--text-primary); }

.device-disclaimer { margin: 6px 0 4px; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.55; }

.world-stage-card {
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.world-stage-card__row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.world-stage-card__icon { font-size: 26px; flex-shrink: 0; }
.world-stage-card__name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 14.5px; }
.world-stage-card__desc { margin: 2px 0 0; font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; }
.world-stage-card__next { margin: 8px 0 0; font-size: 11.5px; color: var(--text-tertiary); }

.upgrade-overlay {
  position: absolute;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 30px;
  background: rgba(6, 6, 8, 0.88);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.upgrade-overlay.is-visible { opacity: 1; transform: scale(1); }
.upgrade-overlay__badge {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  background: var(--graphite-800);
  border: 1px solid var(--line);
  margin-bottom: 6px;
  animation: upgradeBadgePop 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes upgradeBadgePop {
  0% { scale: 0.5; opacity: 0; }
  60% { scale: 1.08; opacity: 1; }
  100% { scale: 1; }
}
.upgrade-overlay__eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--device-accent, var(--accent)); }
.upgrade-overlay__name { margin: 2px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; color: #fff; }
.upgrade-overlay__hint { margin: 8px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.menu-info-text { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

.guide-screen .screen__body { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.guide-text { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* 11. Адаптивность ------------------------------------------------------------------ */
/* На настоящем телефоне вордмарк/тег/футер вокруг макета — чистый балласт (сам
   макет "телефона" и так занимает почти весь настоящий экран устройства), а
   декоративные отступы вокруг .phone-rig отбирали заметную часть и без того
   небольшого экрана — из-за этого все игры/экраны внутри выглядели мельче,
   чем нужно. Убираем шапку/футер и расширяем макет почти на весь реальный
   экран уже в обычном (не maximize) режиме. */
@media (max-width: 480px) {
  .page__header, .page__footer { display: none; }
  .phone-stage { padding: 10px; }
  .phone-rig { width: min(94vw, calc(94dvh * 9 / 19.5)); }
}

@media (max-height: 620px) {
  .page__header, .page__footer { display: none; }
  .phone-stage { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen, .screen--visible, .screen--behind, .screen--exit,
  .bottom-nav__pill, .ad-card, .game-tile, .g2048__tile {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* 15. Chat + Achievements ------------------------------------------------------- */

.chat-screen .screen__body { padding: 4px 16px 12px; }
.chat-list { display: flex; flex-direction: column; gap: 10px; }
.chat-empty { text-align: center; color: var(--text-tertiary); font-size: 12.5px; padding: 24px 0; }

.chat-system-msg {
  align-self: center;
  max-width: 92%;
  text-align: center;
  white-space: pre-line;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: rgba(139, 140, 247, 0.1);
  border: 1px solid rgba(139, 140, 247, 0.22);
  border-radius: 14px;
  padding: 8px 14px;
  margin: 4px 0;
}

.chat-msg { position: relative; display: flex; gap: 8px; max-width: 100%; }
.chat-msg--mine { flex-direction: row-reverse; }
.chat-msg__avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--graphite-600);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
}
.chat-msg__bubble {
  min-width: 0;
  max-width: calc(100% - 70px);
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 7px 12px 9px;
}
.chat-msg--mine .chat-msg__bubble { background: rgba(139, 140, 247, 0.14); border-color: rgba(139, 140, 247, 0.28); }
.chat-msg__meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.chat-msg__name { font-size: 11.5px; font-weight: 700; color: var(--text-primary); }
.chat-msg__time { font-size: 10px; color: var(--text-tertiary); margin-left: auto; }
.chat-msg__text { margin: 0; font-size: 13.5px; line-height: 1.42; word-break: break-word; white-space: pre-wrap; }
.chat-msg__more {
  align-self: flex-start;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.chat-msg--blocked { padding: 6px 0; }
.chat-msg__blocked-notice { margin: 0; font-size: 11.5px; color: var(--text-tertiary); font-style: italic; }

.chat-msg-menu {
  position: absolute;
  top: 30px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 130px;
  background: var(--graphite-700);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
.chat-msg:not(.chat-msg--mine) .chat-msg-menu { left: 34px; }
.chat-msg--mine .chat-msg-menu { right: 34px; }
.chat-msg-menu button {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 12.5px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.chat-msg-menu button:hover { background: var(--graphite-600); }

.chat-input-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  background: var(--graphite-900);
}
.chat-input {
  flex: 1;
  min-width: 0;
  background: var(--graphite-800);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 10px 16px;
  color: var(--text-primary);
  font-size: 13.5px;
  outline: none;
}
.chat-input:focus { border-color: var(--accent); }
.chat-send-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-send-btn svg { width: 16px; height: 16px; }
.chat-send-btn:disabled { opacity: 0.5; cursor: default; }
.chat-input-error { flex-shrink: 0; margin: 0; padding: 0 16px 8px; font-size: 11.5px; color: #f0a3a3; }

.chat-signin-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  background: var(--graphite-900);
}
.chat-signin-bar p { margin: 0; font-size: 12px; color: var(--text-secondary); text-align: center; }

.achievement-toast {
  position: absolute;
  left: 50%;
  top: 64px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 88%;
  padding: 10px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(224, 183, 106, 0.22), rgba(139, 140, 247, 0.14));
  border: 1px solid rgba(224, 183, 106, 0.35);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -14px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(.32,.72,0,1), opacity 0.28s;
  pointer-events: none;
}
.achievement-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.achievement-toast__icon { font-size: 22px; flex-shrink: 0; }
.achievement-toast__label { margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
.achievement-toast__title { margin: 1px 0 0; font-size: 13px; font-weight: 800; font-family: var(--font-display); }

.profile-nickname-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}
.profile-streak-badge {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 16px 10px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(224, 183, 106, 0.14);
  border: 1px solid rgba(224, 183, 106, 0.35);
  color: #e0b76a;
  font-size: 12.5px;
  font-weight: 700;
}
.profile-nickname-row__value { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-nickname-row input {
  flex: 1;
  min-width: 0;
  background: var(--graphite-700);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 6px 10px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.profile-nickname-row button {
  flex-shrink: 0;
  background: var(--graphite-700);
  border: 1px solid var(--line);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.profile-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 13px; }
.profile-stat-row__label { color: var(--text-tertiary); }
.profile-stat-row__value { font-weight: 700; }

.flashlight-screen .screen__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding-top: 30px; }
.flashlight-toggle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.flashlight-toggle__icon svg { width: 40px; height: 40px; }
.flashlight-toggle__label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.flashlight-toggle.is-on {
  background: radial-gradient(circle, rgba(255, 214, 140, 0.28), rgba(255, 214, 140, 0.06));
  border-color: rgba(255, 214, 140, 0.55);
  box-shadow: 0 0 44px rgba(255, 214, 140, 0.35);
  color: #ffe6b0;
}
.flashlight-toggle.is-on .flashlight-toggle__label { color: #ffe6b0; }
.flashlight-description { margin: 0; max-width: 280px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }

.achievements-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px 16px 4px; }
.achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 14px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  text-align: center;
}
.achievement-badge--locked { opacity: 0.35; }
.achievement-badge__icon { font-size: 22px; }
.achievement-badge__title { font-size: 9.5px; line-height: 1.25; color: var(--text-secondary); }

/* 16. Advertiser profile + reviews + reports ("Проверка и репутация") ------------- */

.advertiser-profile-screen .screen__body { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.advertiser-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 0 10px; }
.advertiser-hero__logo {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background: var(--graphite-800);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  overflow: hidden;
  margin-bottom: 4px;
}
.advertiser-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.advertiser-hero__name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.advertiser-hero__badge { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: #6fe0a8; }
.advertiser-hero__badge-since { font-weight: 500; color: var(--text-tertiary); }
.advertiser-hero__disclaimer { margin: 4px 0 0; max-width: 280px; font-size: 10.5px; line-height: 1.5; color: var(--text-tertiary); }
.advertiser-hero__meta { margin: 4px 0 0; font-size: 12px; color: var(--text-secondary); }
.advertiser-hero__rating { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: #e0b76a; }

.advertiser-secondary-row { display: flex; gap: 8px; }
.advertiser-secondary-btn {
  flex: 1;
  background: var(--graphite-700);
  border: 1px solid var(--line);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.advertiser-secondary-btn--danger { color: #e08b8b; border-color: rgba(224, 139, 139, 0.35); }

.reviews-list { display: flex; flex-direction: column; gap: 8px; }
.review-row { background: var(--graphite-800); border: 1px solid var(--line-soft); border-radius: 14px; padding: 10px 12px; }
.review-row__top { display: flex; align-items: center; gap: 8px; }
.review-row__stars { color: #e0b76a; font-size: 13px; letter-spacing: 1px; }
.review-row__author { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
.review-row__text { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-primary); }

.review-form { display: flex; flex-direction: column; gap: 10px; background: var(--graphite-800); border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px; margin-top: 8px; }
.review-form__stars { display: flex; gap: 4px; }
.review-form__star { background: none; border: none; font-size: 22px; color: var(--graphite-500); cursor: pointer; padding: 0; line-height: 1; }
.review-form__star.is-active { color: #e0b76a; }
.review-form__text {
  background: var(--graphite-700);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-size: 12.5px;
  resize: none;
}

.ad-detail__trust { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: #6fe0a8; }
.ad-detail__report-btn {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 11.5px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0 0 8px;
}

.report-modal-card { max-width: 300px; text-align: left; }
.report-modal-card .external-confirm-title { text-align: center; }
.report-reason-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.report-reason-chip {
  background: var(--graphite-700);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  border-radius: 20px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.report-reason-chip.is-selected { background: rgba(224, 139, 139, 0.18); border-color: rgba(224, 139, 139, 0.5); color: #e08b8b; }
.report-details {
  width: 100%;
  min-height: 60px;
  background: var(--graphite-700);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-size: 12px;
  resize: none;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.report-modal-status { margin: 0 0 10px; font-size: 11.5px; color: #e08b8b; text-align: center; }
.report-modal-status.is-success { color: #6fe0a8; }

/* 17. Immersive-режим фонарика ---------------------------------------------------- */

.flashlight-immersive {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #050403;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  overflow: hidden;
  touch-action: none;
}
.flashlight-immersive.is-visible { opacity: 1; pointer-events: auto; }
.flashlight-immersive[hidden] { display: block; } /* JS управляет через .is-visible + отложенный [hidden], не через display */

.immersive-scene { position: absolute; inset: 0; perspective: 900px; overflow: hidden; }

/* Три слоя одного кирпичного паттерна на разной глубине внутри perspective —
   даёт ощущение настоящего пространства почти бесплатно по производительности
   (чистый CSS/GPU-transform, без WebGL/3D-движка — см. ТЗ п.10 "не перегружать"). */
/* Тема стены — глобальные переменные на body (а не только на immersive-оверлее),
   чтобы обычная кирпичная стена за телефоном (.brick-wall, видна всегда) и
   стена в immersive-режиме фонарика меняли цвет одним и тем же выбором в
   Меню → Внешний вид, а не только скрытая за отдельным экраном immersive-стена. */
:root { --wall-base: #1c1815; --wall-mortar: #0c0a08; }
body[data-wall-theme="concrete"] { --wall-base: #3a3d42; --wall-mortar: #1a1c1f; }
body[data-wall-theme="slate"] { --wall-base: #232b36; --wall-mortar: #0d1116; }
body[data-wall-theme="copper"] { --wall-base: #3a271a; --wall-mortar: #170f09; }
body[data-wall-theme="white"] { --wall-base: #e8e6df; --wall-mortar: #c7c4b8; }

.immersive-wall-layer {
  position: absolute;
  inset: -35%;
  background-color: var(--wall-base);
  background-image:
    linear-gradient(335deg, var(--wall-mortar) 23px, transparent 23px),
    linear-gradient(155deg, var(--wall-mortar) 23px, transparent 23px),
    linear-gradient(335deg, var(--wall-mortar) 23px, transparent 23px),
    linear-gradient(155deg, var(--wall-mortar) 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 32px, 34px 4px;
}
.immersive-wall-layer--far { transform: translateZ(-720px) scale(2.1); filter: brightness(0.4) blur(1.5px); }
.immersive-wall-layer--mid { transform: translateZ(-380px) scale(1.5); filter: brightness(0.55); }
.immersive-wall-layer--near { transform: translateZ(-120px) scale(1.15); filter: brightness(0.72); }

/* Более тёмная стена (выше) + туго собранное ядро луча с резким спадом (ниже) —
   вместе дают заметно более чёткий, "прожекторный" контраст вместо размытого
   ambient-свечения (правка "свет чётче и ярче"). */
.immersive-beam {
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle,
    rgba(255, 255, 250, 1) 0%,
    rgba(255, 248, 224, 0.92) 6%,
    rgba(255, 228, 175, 0.62) 15%,
    rgba(255, 210, 140, 0.28) 26%,
    rgba(255, 195, 120, 0.09) 40%,
    transparent 54%);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
  filter: contrast(1.25) saturate(1.1);
}

.immersive-ads { position: absolute; inset: 0; }
.immersive-ad {
  position: absolute;
  width: 92px;
  margin: -60px 0 0 -46px; /* центрируем относительно left/top, заданных в JS */
  border-radius: 8px;
  background: var(--graphite-800);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  padding: 6px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2,.8,.2,1), filter 0.35s ease;
}
.immersive-ad.is-exiting { opacity: 0 !important; transform: scale(0.15) !important; transition-duration: 0.9s; }
.immersive-ad__art { width: 100%; height: 60px; border-radius: 4px; object-fit: cover; display: block; background: var(--graphite-700); }
.immersive-ad__brand { display: block; margin-top: 4px; font-size: 9.5px; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.immersive-phone-hand {
  position: absolute;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%) rotate(-2.5deg);
  width: min(190px, 42vw);
  aspect-ratio: 9 / 19.5;
  pointer-events: none;
  z-index: 2;
}
.immersive-phone-hand__device {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 34px;
  background: var(--device-frame, linear-gradient(155deg, #3c3c42, #131316 38%, #1a1a1d 62%, #48484e));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), inset 0 0 0 2px rgba(0, 0, 0, 0.85), inset 0 0 30px rgba(255, 214, 140, 0.12);
}
.immersive-phone-hand__device::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #fff6de, #ffd68c 55%, transparent 75%);
  box-shadow: 0 0 24px 10px rgba(255, 214, 140, 0.55);
}

.immersive-exit-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 20, 23, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  border-radius: 22px;
  padding: 9px 16px 9px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.immersive-exit-btn__arrow { font-size: 16px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .flashlight-immersive, .immersive-ad { transition-duration: 0.01ms !important; }
}