/* ═══════════════════════════════════════════════════════════════
   НОМЕРОК · Design System v1
   Токены → базовые стили → движение → утилиты.
   Правило производительности: анимируем ТОЛЬКО transform и opacity.
   backdrop-filter — только на оболочке (шапка, навбар, шторка),
   карточки используют «псевдо-стекло» (полупрозрачный градиент без blur).
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Поверхности ───────────────────────────────────────────── */
  --bg-0: #05060f;                 /* самый глубокий фон */
  --bg-1: #07091a;                 /* фон приложения */
  --bg-2: #0d1029;                 /* приподнятый фон */
  --surface-1: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --surface-3: rgba(255, 255, 255, .09);
  --surface-solid: #12152e;
  --overlay: rgba(4, 5, 14, .72);

  /* ── Стекло ────────────────────────────────────────────────── */
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  --glass-bg-strong: linear-gradient(180deg, rgba(22,25,56,.92), rgba(10,12,32,.94));
  --glass-border: rgba(255, 255, 255, .09);
  --glass-border-hi: rgba(255, 255, 255, .16);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .08);
  --glass-blur: blur(22px) saturate(160%);

  /* ── Текст ─────────────────────────────────────────────────── */
  --text-1: #f4f6ff;
  --text-2: rgba(226, 232, 255, .72);
  --text-3: rgba(226, 232, 255, .46);
  --text-inverse: #0a0b14;

  /* ── Бренд ─────────────────────────────────────────────────── */
  --gold-1: #fff1c1;
  --gold-2: #f5c451;
  --gold-3: #d99a1e;
  --gold-4: #8a5a0c;
  --gold-grad: linear-gradient(135deg, #fff1c1 0%, #f5c451 35%, #d99a1e 70%, #a86d10 100%);
  --cyan-1: #6ff3ff;
  --cyan-2: #22d3ee;
  --violet-1: #c4b5fd;
  --violet-2: #8b5cf6;
  --brand-grad: linear-gradient(120deg, #22d3ee 0%, #8b5cf6 55%, #ec4899 100%);

  /* ── Семантика ─────────────────────────────────────────────── */
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, .14);
  --danger: #f43f5e;
  --danger-soft: rgba(244, 63, 94, .14);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, .14);
  --info: #38bdf8;

  /* ── Редкости: цвет и неоновое свечение ────────────────────── */
  --r-common: #a1a1b5;         --r-common-glow: rgba(161,161,181,.35);
  --r-uncommon: #3b82f6;       --r-uncommon-glow: rgba(59,130,246,.45);
  --r-rare: #22c55e;           --r-rare-glow: rgba(34,197,94,.45);
  --r-epic: #a855f7;           --r-epic-glow: rgba(168,85,247,.55);
  --r-legendary: #f59e0b;      --r-legendary-glow: rgba(245,158,11,.6);
  --r-mythical: #ef4444;       --r-mythical-glow: rgba(239,68,68,.6);
  --r-super_mythical: #ec4899; --r-super_mythical-glow: rgba(236,72,153,.65);
  --r-top_secret: #fbbf24;     --r-top_secret-glow: rgba(251,191,36,.7);
  --rainbow: conic-gradient(from 0deg, #ef4444, #f59e0b, #facc15, #22c55e, #22d3ee, #6366f1, #a855f7, #ec4899, #ef4444);

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

  /* ── Отступы (4-pt сетка) ──────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --gutter: 16px;

  /* ── Тени и свечения ───────────────────────────────────────── */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, .55);
  --shadow-4: 0 30px 80px rgba(0, 0, 0, .65);
  --glow-gold: 0 0 24px rgba(245, 196, 81, .45), 0 0 64px rgba(217, 154, 30, .25);
  --glow-cyan: 0 0 24px rgba(34, 211, 238, .45);
  --glow-violet: 0 0 24px rgba(139, 92, 246, .45);

  /* ── Типографика ───────────────────────────────────────────── */
  --font-display: "Unbounded", "Inter", system-ui, sans-serif;
  --font-ui: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 14px;
  --fs-lg: 16px;  --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px;

  /* ── Движение ──────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, 1, .36, 1);       /* мягкое торможение */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* лёгкий перелёт */
  --ease-reel: cubic-bezier(.12, .8, .18, 1);     /* барабан рулетки */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; --dur-5: 900ms;

  /* ── Слои ──────────────────────────────────────────────────── */
  --z-bg: -1; --z-base: 1; --z-sticky: 20; --z-nav: 30;
  --z-modal: 100; --z-fx: 150; --z-toast: 200;

  /* ── Оболочка ──────────────────────────────────────────────── */
  --header-h: 64px;
  --nav-h: 68px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ── Легаси-алиасы (используются в inline-стилях JS-шаблонов) ─ */
  --bg-3: var(--bg-0);
  --card: var(--surface-2);
  --card-solid: var(--surface-solid);
  --card-2: var(--surface-3);
  --border: var(--glass-border);
  --border-strong: var(--glass-border-hi);
  --text: var(--text-1);
  --muted: var(--text-3);
  --cyan: var(--cyan-2);
  --emerald: var(--success);
  --violet: var(--violet-2);
  --pink: #ec4899;
  --gold: var(--gold-2);
  --red: var(--danger);
}

/* Цвет редкости как переменная-контекст: class="rar-epic" → --rar / --rar-glow */
.rar-common         { --rar: var(--r-common);         --rar-glow: var(--r-common-glow); }
.rar-uncommon       { --rar: var(--r-uncommon);       --rar-glow: var(--r-uncommon-glow); }
.rar-rare           { --rar: var(--r-rare);           --rar-glow: var(--r-rare-glow); }
.rar-epic           { --rar: var(--r-epic);           --rar-glow: var(--r-epic-glow); }
.rar-legendary      { --rar: var(--r-legendary);      --rar-glow: var(--r-legendary-glow); }
.rar-mythical       { --rar: var(--r-mythical);       --rar-glow: var(--r-mythical-glow); }
.rar-super_mythical { --rar: var(--r-super_mythical); --rar-glow: var(--r-super_mythical-glow); }
.rar-top_secret     { --rar: var(--r-top_secret);     --rar-glow: var(--r-top_secret-glow); }

/* ═══ База ═══════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; background: var(--bg-1); }
body {
  height: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--text-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "cv11" 1;
  user-select: none; -webkit-user-select: none;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
input { font: inherit; user-select: text; -webkit-user-select: text; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--cyan-2); outline-offset: 2px; }

/* ═══ Движение: только transform / opacity ═══════════════════════ */
@keyframes ds-fade-in    { from { opacity: 0 } to { opacity: 1 } }
@keyframes ds-rise       { from { opacity: 0; transform: translate3d(0, 10px, 0) } to { opacity: 1; transform: none } }
@keyframes ds-pop        { 0% { opacity: 0; transform: scale(.92) } 60% { opacity: 1; transform: scale(1.02) } 100% { transform: scale(1) } }
@keyframes ds-sheet-up   { from { transform: translate3d(0, 100%, 0) } to { transform: none } }
@keyframes ds-grow-x     { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes ds-spin       { to { transform: rotate(360deg) } }
@keyframes ds-float      { 0%, 100% { transform: translate3d(0, 0, 0) } 50% { transform: translate3d(0, -6px, 0) } }
@keyframes ds-breathe    { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes ds-shimmer    { from { transform: translateX(-120%) skewX(-18deg) } to { transform: translateX(220%) skewX(-18deg) } }
@keyframes ds-skeleton   { from { transform: translateX(-100%) } to { transform: translateX(100%) } }
@keyframes ds-ring       { from { opacity: .9; transform: scale(.6) } to { opacity: 0; transform: scale(2.4) } }
@keyframes ds-marquee    { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ═══ Утилиты ════════════════════════════════════════════════════ */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--shadow-1);
  border-radius: var(--radius-md);
}
.glass-blur { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.text-gold {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-brand {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.neon { color: var(--rar, var(--cyan-2)); text-shadow: 0 0 12px var(--rar-glow, rgba(34,211,238,.5)); }
.pressable { transition: transform var(--dur-1) var(--ease-out); }
.pressable:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}