/* ==========================================================================
   Токены оформления.

   «Изумрудное сукно»: тёмно-зелёный фон, как у игрового стола, белые
   карточки с тёмным текстом и акцент тёмного золота. Красный остаётся только
   у мастей и опасных действий. Тема одна, цвета Telegram не используются.
   ========================================================================== */

:root {
  /* ----- Палитра: деним и белое ----- */
  --bg: #0f3b2e;
  --bg-secondary: #0c3227;
  --section-bg: #ffffff;
  --text: #1c2630;
  /* Текст прямо на фоне: заголовки экранов, плитки главного меню */
  --on-bg: #ffffff;
  --on-bg-hint: rgba(240, 230, 200, 0.78);
  /* Тонкие линии между плитками на фоне */
  --line-on-bg: rgba(232, 214, 160, 0.24);
  /* Светлые пилюли сегментов и плиток режимов на фоне */
  --pill: #d3e3d9;
  --pill-text: #0f3b2e;
  /* Подписи: 4.5:1 и на белом, и на светлой пилюле (проверено аудитом ui-ux-pro-max) */
  --hint: #5b6572;
  /* Акцент — тёмное золото: 4.5:1 и как текст на белом, и под белым текстом */
  --accent: #9c6c14;
  --link: #1c2630;
  --button: #1c2630;
  --button-text: #ffffff;
  --destructive: #d9272e;
  --separator: rgba(28, 38, 48, 0.12);
  --header-bg: var(--bg);

  /* Карточка: кромка и короткая тень */
  --card-line: rgba(28, 38, 48, 0.12);
  --shadow-ui: 0 1px 0 rgba(0, 0, 0, 0.08), 0 8px 18px -12px rgba(0, 0, 0, 0.5);
  --tab-ink: #ffffff;
  /* Цвета мастей таб-бара: как на карте */
  --suit-black: #1c2630;
  --suit-red: #d9272e;

  /* Прежние имена оставлены, чтобы не переписывать каждое правило разом */
  --bg-elevated: var(--section-bg);
  --bg-sunken: var(--bg-secondary);
  --surface: var(--section-bg);
  --surface-strong: color-mix(in srgb, var(--text) 8%, transparent);
  --border: var(--separator);
  --border-strong: color-mix(in srgb, var(--text) 20%, transparent);
  --text-muted: var(--hint);
  --text-dim: var(--hint);
  --accent-soft: var(--accent);
  --accent-ink: var(--button-text);
  --danger: var(--destructive);
  --success: #34c759;
  --warning: #ff9500;

  /* ----- Палитра разделов (плашки иконок) ----- */
  --tint-blue: #3390ec;
  --tint-cyan: #2aabee;
  --tint-green: #34c759;
  --tint-orange: #ff9500;
  --tint-red: #ff3b30;
  --tint-purple: #af52de;
  --tint-pink: #ff2d55;
  --tint-gray: #8e8e93;
  --tint-teal: #00c7be;
  --stars: #ffb800;

  /* ----- Игровой стол: собственная палитра, её меняют скины ----- */
  --felt-900: #0a241c;
  --felt-700: #0f3a2d;
  --felt-500: #165541;
  --table-felt: var(--felt-700);
  --table-felt-edge: var(--felt-900);
  --table-edge: #a87c2a;
  --table-glow: rgba(255, 184, 0, 0.18);
  --table-text: #ffffff;
  --table-hint: rgba(255, 255, 255, 0.62);

  /* ----- Карты (всё меняется скином) ----- */
  --card-face: #ffffff;
  --card-face-edge: #f1f1f5;
  --card-ink: #17212b;
  --card-red: #ff3b30;
  --card-accent: #ff9500;
  /* Карты — прямоугольные, углы скруглены чуть-чуть, как у настоящих */
  --card-radius: 5px;
  --card-pattern: none;
  --card-pattern-size: auto;
  --card-frame-inset: 3px;
  --card-frame-width: 0;
  --card-frame-color: transparent;
  --card-frame-radius: 5px;
  --card-corner-size: 0;
  --card-corner-color: transparent;
  --card-index-font: var(--font-body);
  --card-pip-scale: 0.5;
  --card-pip-opacity: 1;
  --card-glow: 0 0 0 transparent;
  --card-index-weight: 800;
  /* Колода-картинка целиком (скин карт): без неё лицо рисуется переменными выше */
  --card-sheet: none;
  --card-own-face: inherit;

  /* ----- Рубашка (меняется скином) ----- */
  --back-base: #1b3b55;
  --back-accent: #7fd8ff;
  --back-line: rgba(255, 255, 255, 0.14);
  --back-edge: #ffffff;
  --back-pattern:
    repeating-linear-gradient(45deg, transparent 0 5px, var(--back-line) 5px 6px),
    repeating-linear-gradient(-45deg, transparent 0 5px, var(--back-line) 5px 6px);
  --back-pattern-size: auto;
  --back-seat-size: 6px 6px;
  --back-frame-inset: 3px;
  --back-frame-width: 0;
  --back-frame-color: transparent;
  --back-frame-radius: 3px;

  /* ----- Фон приложения (меняется скином стола) ----- */
  --bg-from: var(--bg-secondary);
  --bg-to: var(--bg-secondary);
  --bg-accent: transparent;

  /* ----- Рамка аватара и титул (меняется скином) ----- */
  --frame-color: transparent;
  --frame-glow: transparent;
  --title-color: var(--accent);

  /* ----- Типографика (27.10.2026): Manrope везде — решение владельца. С
     кириллицей и узбекской латиницей: у прежних шрифтов кириллицы не было ----- */
  --font-display: "Manrope", -apple-system, sans-serif;
  --font-body: "Manrope", -apple-system, "SF Pro Text", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  /* Размеры как в Telegram: заголовок 17, текст 16–17, вторичный 14–15, капс 13 */
  --step--2: 12px;
  --step--1: 14px;
  --step-0: 16px;
  --step-1: 18px;
  --step-2: 22px;
  --step-3: 26px;
  --step-4: 32px;

  /* ----- Ритм ----- */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 10px;
  --gap-4: 14px;
  --gap-5: 18px;
  --gap-6: 24px;
  --gap-7: 32px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.42);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.18);

  /* ----- Движение. Кривые сильнее стандартных: вход — резкий ease-out,
     движение по экрану — ease-in-out, шторки — кривая iOS. Всё до 300 мс ----- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;

  /* ----- Слои ----- */
  --z-table: 1;
  --z-hand: 20;
  --z-header: 40;
  --z-flight: 50;
  --z-sheet: 60;
  --z-modal: 70;
  --z-toast: 90;

  /* ----- Имена прежней палитры -----
     Оставлены как псевдонимы цветов темы, пока переписываются экраны: иначе
     интерфейс смешивал бы две цветовые системы. Убираются вместе с
     последним старым правилом. */
  --brass-400: var(--accent);
  --brass-500: var(--accent);
  --brass-600: var(--accent);
  --cream-100: #ffffff;
  --game-gold: var(--stars);
  /* Линейные значки главного экрана: светлое золото на сукне */
  --hub-icon: #ecd49c;
  --game-gold-deep: #ff9500;
  --game-outline: var(--separator);
  --ink-600: var(--bg-secondary);
  --ink-800: var(--bg);
  --rose-400: var(--destructive);
  --rose-500: var(--destructive);
  --sage-300: var(--hint);

  /* ----- Размеры ----- */
  --tabbar-h: 0px;
  --card-w: 46px;
  --card-h: 66px;
  /* Отступы безопасной зоны: клиент присылает свои, иначе берём системные */
  --safe-top: var(--tg-safe-top, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--tg-safe-bottom, env(safe-area-inset-bottom, 0px));
  --content-top: var(--tg-content-top, 0px);
  --content-bottom: var(--tg-content-bottom, 0px);
}

/* Крупные экраны: карты чуть больше */
@media (min-width: 390px) {
  :root {
    --card-w: 52px;
    --card-h: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }

  /* Бесконечные пульсации, мерцание скелетонов и задержки появления тоже
     гасим: раньше они продолжали двигаться и при «меньше движения» */
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}