/* ============================================================
   Свобода — общий файл стилей
   Подключается на КАЖДОЙ странице. Специфика конкретной
   страницы (например, лендинга) живёт в своём файле (home.css)
   и подключается отдельным <link> после этого файла.
   ============================================================ */

@import url('_var.css');
@import url('_utilities.css');

/* ---------- база ---------- */
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--rust); color:var(--paper); }

h1, h2, h3{
  font-family:var(--font-display); font-weight:600;
  text-wrap:balance; letter-spacing:.01em;
}
.num{ font-variant-numeric:tabular-nums; }

/* ---------- атмосфера: зерно + виньетка (используется на всех страницах) ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:60;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:59;
  background:radial-gradient(ellipse at 50% 30%, transparent 45%, rgba(0,0,0,.55) 100%);
}

/* ---------- шапка (общая для всех страниц) ----------
   Высота задаётся var(--header-h) в _var.css — используется
   в расчёте hero-экрана на лендинге (home.css). При изменении
   реальной высоты шапки (перенос на 2 строки и т.п.) значение
   в _var.css нужно поправить вручную. */
header{
  position:sticky; top:0; z-index:40;
  height:var(--header-h);
  background:linear-gradient(var(--ink) 60%, transparent);
}
.logo{
  display:flex; align-items:baseline;
  font-family:var(--font-number); font-size:1.6rem; letter-spacing:.06em; color:var(--paper);
}
.logo span{ color:var(--rust-bright); font-size:.95rem; font-family:var(--font-mono); letter-spacing:.05em; }
header nav a{ font-size:.86rem; letter-spacing:.03em; color:var(--paper-soft); transition:color .2s; }
header nav a:hover{ color:var(--brass-bright); }
/* компаунд-селектор нужен, чтобы точно перебить утилитный
   класс .flex, стоящий на этом же <nav> в разметке —
   специфичность класса иначе выигрывает у чистых селекторов тегов */
@media (max-width:759px){ header nav.flex{ display:none; } }

/* ---------- флеш-сообщения Yii (общие для всех публичных страниц) ----------
   Session-флеши (успех/ошибка/предупреждение после реальной отправки
   формы — вход, регистрация, восстановление пароля) рендерятся layout'ом
   frontend/views/layouts/public.php, не игровым HUD (у него нет флешей —
   раздел 8.5 не описывает этот случай для игровых страниц, а публичные
   формы уже реальны, не демо, начиная с итерации 2). */
.flash-banner{ border-left:3px solid var(--line); background:var(--ink-panel); font-size:.92rem; line-height:1.5; }
.flash-banner--success{ border-left-color:var(--petrol); color:var(--petrol-bright); }
.flash-banner--error{ border-left-color:var(--rust); color:var(--rust-bright); }
.flash-banner--warning{ border-left-color:var(--brass); color:var(--brass-bright); }
.flash-banner--info{ border-left-color:var(--line); color:var(--paper-soft); }
.flash-banner.is-hidden{ display:none; }

/* ---------- футер (общий для всех страниц) ----------
   Раскладка/отступы footer'а задаются классами утилит
   (.grid .gap-* .py-* и т.д.) прямо в разметке — здесь
   только то, что утилитой не выразить: асимметричные
   треки грида и цвет/типографика. */
footer{ border-top:1px solid var(--line); background:var(--ink-deep); }
.fgrid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
@media (max-width:759px){ .fgrid{ grid-template-columns:1fr 1fr; } }
.fcol h5{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }
.fcol a{ display:block; color:var(--paper-soft); font-size:.88rem; transition:color .2s; }
.fcol a:hover{ color:var(--paper); }
.fbrand{ font-family:var(--font-number); font-size:1.5rem; letter-spacing:.05em; }
.fnote{ color:var(--paper-soft); font-size:.86rem; max-width:32ch; line-height:1.6; }
.fbot{
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.74rem; color:var(--paper-soft); letter-spacing:.02em;
}