/*
 * Общее для всех страниц: токены тем, сброс, типографика, фоновый декор.
 *
 * Подключается первым на каждой странице — здесь живут переменные, на которые опирается всё остальное.
 */

/* ============================================================================
   Oikonym — оформление
   Все цвета приходят из src/themes.js в виде CSS-переменных на :root,
   поэтому здесь нет ни одного «зашитого» цвета кроме служебных.

   1. Токены и база        5. Секции и карточки регионов
   2. Фоновый декор        6. Экран игры
   3. Кнопки и выбор темы  7. Адаптив
   4. Шапка и герой
   ========================================================================= */

/* ── 1. Токены и база ───────────────────────────────────────────────────── */

:root {
  /* Значения по умолчанию — до того, как отработает applyTheme(). */
  --bg: #060910;
  --bg-top: #10203c;
  --decor-a: rgba(67, 227, 155, 0.5);
  --decor-b: rgba(86, 142, 255, 0.45);
  --grid-line: rgba(255, 255, 255, 0.035);
  --surface-1: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.09);
  --panel: rgba(15, 23, 40, 0.72);
  --panel-strong: rgba(11, 17, 30, 0.85);
  --scrim: rgba(5, 9, 17, 0.92);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-soft: rgba(255, 255, 255, 0.05);
  --text: #e9eff8;
  --muted: #8fa2c0;
  --dim: #63748f;
  --accent: #43e39b;
  --accent-2: #56b6ff;
  --accent-ink: #052416;
  --accent-soft: rgba(67, 227, 155, 0.18);
  --accent-faint: rgba(67, 227, 155, 0.06);
  --accent-shadow: rgba(67, 227, 155, 0.6);
  --thumb-1: #14243f;
  --thumb-2: #0a1122;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
  --shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, 0.8);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* Заголовочное начертание: им набраны и герой на главной, и HUD в игре. */
  --font-display: var(--font);
  --tracking-display: -0.03em;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Переход между страницами: браузеры, которые это умеют, покажут плавную
   смену вместо белой вспышки. Остальные просто перейдут как обычно. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: page-out 0.18s var(--ease) both; }
::view-transition-new(root) { animation: page-in 0.28s var(--ease) both; }

@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  /*
   * Высота по содержимому, а не по окну. С height: 100% тело кончалось на
   * первом экране, и липкая полоса сайта уезжала вверх вместе с его нижним
   * краем: на длинных страницах она пропадала на середине прокрутки.
   */
  min-height: 100%;
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* clip не делает тело прокручиваемым — липкая полоса остаётся липкой. */
  overflow-x: clip;
  transition: background 0.3s, color 0.3s;
}

h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }

::selection { background: var(--accent-soft); }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 6px;
}

.muted { color: var(--muted); }

/* Атрибут hidden должен побеждать любое display из класса: иначе завеса
   паузы остаётся на экране, хотя разметка её уже спрятала. */
[hidden] { display: none !important; }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
}

.grad {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 65%, var(--accent) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ── 2. Фоновый декор ───────────────────────────────────────────────────── */

.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg-top) 0%, transparent 60%),
    var(--bg);
}

/*
 * Карта на фоне.
 *
 * Не картинка со стороны и не звёзды, а те же контуры, по которым идёт игра:
 * материки одной тонкой линией в проекции Миллера (собирает
 * tools/make-backdrop.mjs). Линии белые, а насколько их видно, решает тема.
 * Фон получается тем самым, о чём сайт, и при этом почти не мешает тексту.
 */
.world-lines {
  position: absolute;
  inset: 0;
  background: url("../backdrop.svg") center 42% / min(1900px, 132%) auto no-repeat;
  /* Фон именно фон: контуры угадываются, но не спорят ни с текстом, ни с
     картами в карточках. */
  opacity: 0.035;
  mask-image: radial-gradient(120% 90% at 50% 42%, #000 30%, transparent 82%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 42%, #000 30%, transparent 82%);
}

/*
 * Луч поперёк экрана: узкая полоса света, из-за которой фон перестаёт быть
 * ровной заливкой. Идёт под тем же углом, что и блики на карточках.
 */
.sweep {
  position: absolute;
  inset: -20% -30%;
  background: linear-gradient(104deg,
    transparent 34%,
    color-mix(in srgb, var(--decor-a) 38%, transparent) 50%,
    transparent 66%);
  filter: blur(90px);
  opacity: 0.28;
}

:root[data-theme="atlas"] .world-lines {
  /* На светлой теме белым не порисуешь: линии становятся тенью. */
  filter: invert(1);
  opacity: 0.05;
}

:root[data-theme="atlas"] .sweep { opacity: 0.2; }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.45;
}

.blob--a {
  width: 46vw; height: 46vw;
  top: -14vw; left: -8vw;
  background: radial-gradient(circle, var(--decor-a), transparent 70%);
}

.blob--b {
  width: 52vw; height: 52vw;
  top: 4vw; right: -16vw;
  background: radial-gradient(circle, var(--decor-b), transparent 70%);
}

/* Раньше здесь была сетка квадратов — она читалась как обои и била в глаза
   на длинных экранах. Теперь фон держат две вещи: едва заметное зерно, чтобы
   заливка не выглядела мёртвой, и мягкая световая дуга сверху. */
.grid-lines {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* Уважение к настройке «меньше движения»: касается всех страниц. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}