/* Общие цветовые токены платформы и игр. Светлая тема по умолчанию,
   тёмная — по системной настройке или явному выбору (data-theme на <html>). */
:root {
  --bg: oklch(0.97 0.006 90);
  --surface: oklch(0.995 0.004 90);
  --ink: oklch(0.24 0.02 260);
  --muted: oklch(0.48 0.02 260);
  --line: oklch(0.89 0.01 90);
  --accent: oklch(0.52 0.12 175);
  --accent-ink: oklch(0.99 0.01 175);
  --accent-soft: oklch(0.93 0.05 175);
  --shadow: 0 8px 24px oklch(0.3 0.03 260 / .12);

  --r-btn: 14px;
  --r-card: 20px;
  --r-win: 24px;
  --tap: 44px;
  --dur: 300ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.2 0.015 260);
    --surface: oklch(0.25 0.018 260);
    --ink: oklch(0.95 0.008 90);
    --muted: oklch(0.75 0.015 260);
    --line: oklch(0.35 0.02 260);
    --accent: oklch(0.74 0.11 175);
    --accent-ink: oklch(0.2 0.03 175);
    --accent-soft: oklch(0.33 0.05 175);
    --shadow: 0 8px 24px oklch(0.1 0.02 260 / .5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: oklch(0.2 0.015 260);
  --surface: oklch(0.25 0.018 260);
  --ink: oklch(0.95 0.008 90);
  --muted: oklch(0.75 0.015 260);
  --line: oklch(0.35 0.02 260);
  --accent: oklch(0.74 0.11 175);
  --accent-ink: oklch(0.2 0.03 175);
  --accent-soft: oklch(0.33 0.05 175);
  --shadow: 0 8px 24px oklch(0.1 0.02 260 / .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  transition: background-color var(--dur) ease, color var(--dur) ease;
}

button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Подтверждение перехода в каталог (shared/leave.js) */
.leave-scrim { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: oklch(0.2 0.02 260 / .45); }
.leave-modal { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 22px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 40px oklch(0.2 0.02 260 / .3); }
.leave-modal h2 { margin: 0; font-size: 20px; }
.leave-modal p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.leave-row { display: flex; gap: 10px; margin-top: 6px; }
.leave-row button { flex: 1 1 0; min-height: 48px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.leave-row .leave-ok { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.leave-row button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Мини-загрузка при переходе между страницами (shared/page-loader.js) */
.pl { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--ink); opacity: 0; transition: opacity .3s ease; user-select: none; -webkit-user-select: none; }
.pl.show { opacity: 1; }
.pl-box { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(260px, 70vw); }
.pl-logo { width: 84px; height: 84px; animation: pl-float 1.6s ease-in-out infinite; }
.pl-text { margin: 0; font-size: 15px; font-weight: 600; color: var(--muted); }
.pl-text::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: pl-dots 1.2s steps(4, end) infinite; }
@keyframes pl-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.06); } }
@keyframes pl-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
html.pl-arrive::after { content: ""; position: fixed; inset: 0; z-index: 2000; background: var(--bg); pointer-events: none; animation: pl-out .5s ease .1s forwards; }
@keyframes pl-out { to { opacity: 0; visibility: hidden; } }

/* Пока сервер не ответил, число баланса — копия из браузера: показываем притушенным, чтобы не выдавать его за настоящее */
.bal, .bal-chip, .bal-line, .stackline, #wallet-open, .wallet-balance { transition: opacity .35s ease; }
html.wallet-wait :is(.bal, .bal-chip, .bal-line, .stackline, #wallet-open, .wallet-balance) { opacity: .45; }

/* Принудительная тёмная тема браузера (Samsung Internet, «тёмная тема для сайтов» в Chrome) перекрашивает и картинки:
   рисованные обложки и значки она принимает за иконки и инвертирует (белые карты становятся тёмными). Картинки просим не трогать —
   у сайта своя тёмная тема, а обложки одинаково хороши на любом фоне. */
img { color-scheme: only light; }