/* Миниапка — дизайн-токены v1.0.0 — СГЕНЕРИРОВАНО build-tokens.mjs из tokens.json, руками не править */
/* Шрифты: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800;900&family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"> */

:root {
  /* Палитра (не зависит от темы) */
  --mk-pal-brand-spark: #FF7A18;
  --mk-pal-brand-spark-hover: #FF8F3D;
  --mk-pal-brand-spark-press: #E8620A;
  --mk-pal-brand-spark-ink: #B83E00;
  --mk-pal-brand-on-spark: #1E0A00;
  --mk-pal-accent-portal: #7C5CFF;
  --mk-pal-accent-portal-fill: #7050FF;
  --mk-pal-accent-portal-soft: #A58FFF;
  --mk-pal-accent-portal-ink: #5B3DF0;
  --mk-pal-accent-neon: #22D3EE;
  --mk-pal-accent-neon-ink: #0B6F84;
  --mk-pal-accent-bubblegum: #E14BD8;
  --mk-pal-status-success: #3DDC84;
  --mk-pal-status-success-ink: #13783E;
  --mk-pal-status-danger: #FF3B5C;
  --mk-pal-status-danger-ink: #C8102E;
  --mk-pal-status-warning: #FFC53D;
  --mk-pal-status-warning-ink: #8A5300;
  --mk-pal-status-info: #5AA9FF;
  --mk-pal-status-info-ink: #1F5FD1;
  --mk-pal-rarity-common: #B0C3D9;
  --mk-pal-rarity-common-ink: #566A80;
  --mk-pal-rarity-rare: #4B69FF;
  --mk-pal-rarity-rare-ink: #3049E0;
  --mk-pal-rarity-rare-soft: #7D93FF;
  --mk-pal-rarity-epic: #9B4DFF;
  --mk-pal-rarity-epic-ink: #7228E0;
  --mk-pal-rarity-epic-soft: #BB86FF;
  --mk-pal-rarity-legendary: #FFC53D;
  --mk-pal-rarity-legendary-ink: #8A5300;

  /* Градиенты */
  --mk-gradient-sunset: linear-gradient(135deg, #FFB443 0%, #FF7A18 38%, #FF3B5C 72%, #E14BD8 100%);
  --mk-gradient-portal: linear-gradient(135deg, #7C5CFF 0%, #4B69FF 50%, #22D3EE 100%);
  --mk-gradient-treasure: linear-gradient(135deg, #FFE48A 0%, #FFC53D 45%, #FF8F3D 100%);
  --mk-gradient-night: radial-gradient(60% 50% at 85% 0%, rgba(255,122,24,.28) 0%, rgba(255,122,24,0) 70%), radial-gradient(55% 45% at 0% 100%, rgba(225,75,216,.24) 0%, rgba(225,75,216,0) 70%), linear-gradient(160deg, #140E30 0%, #1C1442 100%);

  /* Радиусы */
  --mk-radius-xs: 4px;
  --mk-radius-sm: 8px;
  --mk-radius-md: 12px;
  --mk-radius-lg: 16px;
  --mk-radius-xl: 24px;
  --mk-radius-pill: 999px;

  /* Отступы — шкала 4 px */
  --mk-space-0: 0px;
  --mk-space-1: 4px;
  --mk-space-2: 8px;
  --mk-space-3: 12px;
  --mk-space-4: 16px;
  --mk-space-5: 20px;
  --mk-space-6: 24px;
  --mk-space-8: 32px;
  --mk-space-10: 40px;
  --mk-space-12: 48px;
  --mk-space-16: 64px;
  --mk-space-20: 80px;

  /* Торец «блочной» кнопки */
  --mk-edge-button: 4px;
  --mk-edge-button-pressed: 1px;

  /* Шрифты */
  --mk-font-display: 'Unbounded', 'Rubik', system-ui, sans-serif;
  --mk-font-text: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Типографика: мобильная по умолчанию */
  --mk-type-display-size: 40px;
  --mk-type-display-line: 44px;
  --mk-type-display-tracking: -0.02em;
  --mk-type-display-weight: 800;
  --mk-type-h1-size: 28px;
  --mk-type-h1-line: 34px;
  --mk-type-h1-tracking: -0.01em;
  --mk-type-h1-weight: 700;
  --mk-type-h2-size: 22px;
  --mk-type-h2-line: 28px;
  --mk-type-h2-tracking: -0.01em;
  --mk-type-h2-weight: 700;
  --mk-type-h3-size: 18px;
  --mk-type-h3-line: 24px;
  --mk-type-h3-tracking: 0em;
  --mk-type-h3-weight: 600;
  --mk-type-h4-size: 16px;
  --mk-type-h4-line: 22px;
  --mk-type-h4-tracking: 0em;
  --mk-type-h4-weight: 700;
  --mk-type-body-size: 16px;
  --mk-type-body-line: 24px;
  --mk-type-body-tracking: 0em;
  --mk-type-body-weight: 400;
  --mk-type-small-size: 14px;
  --mk-type-small-line: 20px;
  --mk-type-small-tracking: 0.005em;
  --mk-type-small-weight: 400;
  --mk-type-caption-size: 12px;
  --mk-type-caption-line: 16px;
  --mk-type-caption-tracking: 0.02em;
  --mk-type-caption-weight: 500;
  --mk-type-overline-size: 11px;
  --mk-type-overline-line: 14px;
  --mk-type-overline-tracking: 0.12em;
  --mk-type-overline-weight: 700;
  --mk-type-score-size: 32px;
  --mk-type-score-line: 36px;
  --mk-type-score-tracking: 0em;
  --mk-type-score-weight: 800;
}

@media (min-width: 768px) {
  :root {
    --mk-type-display-size: 64px;
    --mk-type-display-line: 68px;
    --mk-type-display-tracking: -0.03em;
    --mk-type-h1-size: 40px;
    --mk-type-h1-line: 46px;
    --mk-type-h1-tracking: -0.02em;
    --mk-type-h2-size: 28px;
    --mk-type-h2-line: 34px;
    --mk-type-h2-tracking: -0.01em;
    --mk-type-h3-size: 22px;
    --mk-type-h3-line: 28px;
    --mk-type-h3-tracking: -0.005em;
    --mk-type-h4-size: 18px;
    --mk-type-h4-line: 24px;
    --mk-type-h4-tracking: 0em;
    --mk-type-body-size: 17px;
    --mk-type-body-line: 26px;
    --mk-type-body-tracking: 0em;
    --mk-type-small-size: 15px;
    --mk-type-small-line: 22px;
    --mk-type-small-tracking: 0.005em;
    --mk-type-caption-size: 13px;
    --mk-type-caption-line: 18px;
    --mk-type-caption-tracking: 0.02em;
    --mk-type-overline-size: 12px;
    --mk-type-overline-line: 16px;
    --mk-type-overline-tracking: 0.12em;
    --mk-type-score-size: 48px;
    --mk-type-score-line: 52px;
    --mk-type-score-tracking: 0em;
  }
}

/* Тёмная тема — по умолчанию (Telegram чаще тёмный) */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --mk-bg: #110B26;
  --mk-surface: #1B1340;
  --mk-surface-2: #271C57;
  --mk-line: #3D2F7E;
  --mk-text: #F7F3FF;
  --mk-text-2: #C9BEF0;
  --mk-text-3: #9C8FD0;
  --mk-brand: #FF7A18;
  --mk-brand-hover: #FF8F3D;
  --mk-brand-edge: #B83E00;
  --mk-brand-text: #FF9A4D;
  --mk-on-brand: #1E0A00;
  --mk-accent: #7050FF;
  --mk-accent-text: #A58FFF;
  --mk-on-accent: #FFFFFF;
  --mk-accent-2: #22D3EE;
  --mk-accent-2-text: #22D3EE;
  --mk-on-accent-2: #04232B;
  --mk-success: #3DDC84;
  --mk-danger: #FF5C77;
  --mk-warning: #FFC53D;
  --mk-info: #5AA9FF;
  --mk-rarity-common: #B0C3D9;
  --mk-rarity-rare: #7D93FF;
  --mk-rarity-epic: #BB86FF;
  --mk-rarity-legendary: #FFC53D;
  --mk-focus: #22D3EE;
  --mk-overlay: rgba(8, 4, 20, .72);
  --mk-shadow-1: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 6px rgba(0,0,0,.35);
  --mk-shadow-2: 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 28px rgba(0,0,0,.45);
  --mk-shadow-glow: 0 0 0 1px rgba(255,122,24,.5), 0 8px 32px rgba(255,122,24,.35);
}

/* Светлая тема — по системной настройке, если тема не задана явно */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --mk-bg: #FFF6EA;
    --mk-surface: #FFFFFF;
    --mk-surface-2: #FFEAD2;
    --mk-line: #EBCFAF;
    --mk-text: #1C1236;
    --mk-text-2: #4A3E6A;
    --mk-text-3: #6B5F8C;
    --mk-brand: #FF7A18;
    --mk-brand-hover: #FF8F3D;
    --mk-brand-edge: #B83E00;
    --mk-brand-text: #B83E00;
    --mk-on-brand: #1E0A00;
    --mk-accent: #7050FF;
    --mk-accent-text: #5B3DF0;
    --mk-on-accent: #FFFFFF;
    --mk-accent-2: #22D3EE;
    --mk-accent-2-text: #0B6F84;
    --mk-on-accent-2: #04232B;
    --mk-success: #13783E;
    --mk-danger: #C8102E;
    --mk-warning: #8A5300;
    --mk-info: #1F5FD1;
    --mk-rarity-common: #566A80;
    --mk-rarity-rare: #3049E0;
    --mk-rarity-epic: #7228E0;
    --mk-rarity-legendary: #8A5300;
    --mk-focus: #5B3DF0;
    --mk-overlay: rgba(28, 18, 54, .45);
    --mk-shadow-1: 0 1px 2px rgba(74,40,10,.10), 0 2px 6px rgba(74,40,10,.08);
    --mk-shadow-2: 0 2px 4px rgba(74,40,10,.08), 0 12px 28px rgba(74,40,10,.14);
    --mk-shadow-glow: 0 0 0 1px rgba(255,122,24,.55), 0 8px 28px rgba(255,122,24,.30);
  }
}

[data-theme="light"] {
  color-scheme: light;
  --mk-bg: #FFF6EA;
  --mk-surface: #FFFFFF;
  --mk-surface-2: #FFEAD2;
  --mk-line: #EBCFAF;
  --mk-text: #1C1236;
  --mk-text-2: #4A3E6A;
  --mk-text-3: #6B5F8C;
  --mk-brand: #FF7A18;
  --mk-brand-hover: #FF8F3D;
  --mk-brand-edge: #B83E00;
  --mk-brand-text: #B83E00;
  --mk-on-brand: #1E0A00;
  --mk-accent: #7050FF;
  --mk-accent-text: #5B3DF0;
  --mk-on-accent: #FFFFFF;
  --mk-accent-2: #22D3EE;
  --mk-accent-2-text: #0B6F84;
  --mk-on-accent-2: #04232B;
  --mk-success: #13783E;
  --mk-danger: #C8102E;
  --mk-warning: #8A5300;
  --mk-info: #1F5FD1;
  --mk-rarity-common: #566A80;
  --mk-rarity-rare: #3049E0;
  --mk-rarity-epic: #7228E0;
  --mk-rarity-legendary: #8A5300;
  --mk-focus: #5B3DF0;
  --mk-overlay: rgba(28, 18, 54, .45);
  --mk-shadow-1: 0 1px 2px rgba(74,40,10,.10), 0 2px 6px rgba(74,40,10,.08);
  --mk-shadow-2: 0 2px 4px rgba(74,40,10,.08), 0 12px 28px rgba(74,40,10,.14);
  --mk-shadow-glow: 0 0 0 1px rgba(255,122,24,.55), 0 8px 28px rgba(255,122,24,.30);
}

/* Рекорды, счёт, таймеры — цифры одинаковой ширины */
.mk-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Типографические классы */
.mk-display { font-family: var(--mk-font-display); font-weight: var(--mk-type-display-weight); font-size: var(--mk-type-display-size); line-height: var(--mk-type-display-line); letter-spacing: var(--mk-type-display-tracking); }
.mk-h1 { font-family: var(--mk-font-display); font-weight: var(--mk-type-h1-weight); font-size: var(--mk-type-h1-size); line-height: var(--mk-type-h1-line); letter-spacing: var(--mk-type-h1-tracking); }
.mk-h2 { font-family: var(--mk-font-display); font-weight: var(--mk-type-h2-weight); font-size: var(--mk-type-h2-size); line-height: var(--mk-type-h2-line); letter-spacing: var(--mk-type-h2-tracking); }
.mk-h3 { font-family: var(--mk-font-display); font-weight: var(--mk-type-h3-weight); font-size: var(--mk-type-h3-size); line-height: var(--mk-type-h3-line); letter-spacing: var(--mk-type-h3-tracking); }
.mk-h4 { font-family: var(--mk-font-text); font-weight: var(--mk-type-h4-weight); font-size: var(--mk-type-h4-size); line-height: var(--mk-type-h4-line); letter-spacing: var(--mk-type-h4-tracking); }
.mk-body { font-family: var(--mk-font-text); font-weight: var(--mk-type-body-weight); font-size: var(--mk-type-body-size); line-height: var(--mk-type-body-line); letter-spacing: var(--mk-type-body-tracking); }
.mk-small { font-family: var(--mk-font-text); font-weight: var(--mk-type-small-weight); font-size: var(--mk-type-small-size); line-height: var(--mk-type-small-line); letter-spacing: var(--mk-type-small-tracking); }
.mk-caption { font-family: var(--mk-font-text); font-weight: var(--mk-type-caption-weight); font-size: var(--mk-type-caption-size); line-height: var(--mk-type-caption-line); letter-spacing: var(--mk-type-caption-tracking); }
.mk-overline { font-family: var(--mk-font-display); font-weight: var(--mk-type-overline-weight); font-size: var(--mk-type-overline-size); line-height: var(--mk-type-overline-line); letter-spacing: var(--mk-type-overline-tracking); text-transform: uppercase; }
.mk-score { font-family: var(--mk-font-display); font-weight: var(--mk-type-score-weight); font-size: var(--mk-type-score-size); line-height: var(--mk-type-score-line); letter-spacing: var(--mk-type-score-tracking); font-variant-numeric: tabular-nums; }