/* Оболочка: шапка, навигация, подвал.
   ========================================================================
   Одна оболочка на весь сайт. До этого у /play и /app были разные шапки и
   разные представления о том, где что лежит; собрать их в одну — половина
   смысла этого этапа. */

@layer components {

/* --------------------------------------------------------------- шапка */

.hdr{
  position:sticky; top:0; z-index:var(--z-header);
  height:var(--header-h);
  background:var(--scrim-header);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--stroke);
  transition:transform var(--dur-2) var(--ease-out),
             background var(--dur-2) var(--ease-out);
}
/* На телефоне шапка уезжает при прокрутке вниз и возвращается при прокрутке
   вверх: экран маленький, 64px постоянной полосы — заметная потеря. */
.hdr[data-hidden="true"]{ transform:translateY(-100%) }

.hdr__row{
  height:100%; display:flex; align-items:center; gap:var(--sp-5);
  max-width:var(--grid-max); margin-inline:auto;
  padding-inline:var(--grid-pad);
}

.hdr__brand{ display:flex; align-items:center; gap:var(--sp-3); flex:none }
.hdr__mark{ height:30px; width:auto; flex:none;
            transition:transform var(--dur-2) var(--ease-out) }
.hdr__brand:hover .hdr__mark{ transform:translateY(-1px) scale(1.06) }
/* Логотип. Единственное место, где размеры вне шкалы, и намеренно:
   это не уровень текста, а начертание марки — 15 и 9 пикселей подобраны
   под высоту значка рядом. Загонять их в текстовую шкалу значит менять
   логотип ради стройности таблицы. Оба размера описаны в
   docs/FRONTEND.md как исключение. */
.hdr__name{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:.04em; color:var(--text); line-height:1;
  display:flex; flex-direction:column; gap:3px;
}
.hdr__sub{ font-family:var(--font-body); font-size:9px; font-weight:600;
           letter-spacing:.22em; text-transform:uppercase;
           color:var(--text-faint) }
@media (max-width:520px){ .hdr__sub{ display:none } }

.hdr__nav{ display:flex; align-items:center; gap:var(--sp-1) }
.hdr__link{
  padding:8px var(--sp-3); border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:500; color:var(--text-muted);
  transition:color var(--dur-1) var(--ease-out),
             background var(--dur-1) var(--ease-out);
}
.hdr__link:hover{ color:var(--text); background:var(--wash-2) }
.hdr__link[aria-current="page"]{ color:var(--accent-ink); background:var(--accent-soft) }

.hdr__right{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-2) }

/* Счётчик онлайна проекта. Пока данных нет — так и написано. */
.online-chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:7px var(--sp-3);
  border:1px solid var(--stroke); border-radius:var(--r-md);
  background:var(--bg-panel);
  font-size:var(--fs-sm); font-weight:500; color:var(--text-muted);
  white-space:nowrap;
}
.online-chip__dot{ width:7px; height:7px; border-radius:50%;
                   background:var(--unknown); flex:none }
.online-chip[data-state="live"] .online-chip__dot{ background:var(--online);
  animation:blip 2.4s var(--ease-in-out) infinite }
.online-chip[data-state="down"] .online-chip__dot{ background:var(--danger) }
.online-chip b{ color:var(--text); font-family:var(--font-data);
                font-variant-numeric:tabular-nums; font-weight:500 }

/* Аватар и счётчик онлайна стоят рядом, и высота у них должна быть одна.
   Была разная: у пилюли она складывалась из строки и отступов (37 px), у
   аватара стояла своя (28 px) — он висел на семь пикселей выше нижнего
   края соседа. Теперь высоту задаёт общая переменная, и подогнать её
   заново при смене шрифта нужно будет в одном месте. */
.hdr__right{ --pill-h:37px }
.online-chip{ min-height:var(--pill-h) }
.hdr__user{ display:flex; align-items:center; gap:var(--sp-2);
            min-height:var(--pill-h) }
.avatar{
  width:var(--pill-h); height:var(--pill-h); flex:none;
  /* Радиус тот же, что у пилюль: прямые углы рядом со скруглёнными
     читаются как чужой элемент. */
  border-radius:var(--r-md);
  border:1px solid var(--stroke-strong);
  background:var(--bg-panel); object-fit:cover;
}

.hdr__burger{ display:none }

/* ---------------------------------------------------- меню на телефоне */

.tabbar{ display:none }

@media (max-width:860px){
  .hdr__nav{ display:none }
  .hdr__burger{ display:inline-grid }
  .hdr__row{ gap:var(--sp-3) }
  .online-chip{ padding:6px var(--sp-2); font-size:var(--fs-xs) }

  /* Нижняя навигация: большим пальцем до верха экрана не достать. */
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0;
    z-index:var(--z-header);
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:var(--scrim-drawer);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--stroke);
  }
  .tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px; min-height:48px;
    color:var(--text-faint); font-size:var(--fs-2xs); font-weight:600;
  }
  .tabbar a[aria-current="page"]{ color:var(--accent-ink) }
  .tabbar svg{ width:20px; height:20px; stroke:currentColor; fill:none;
               stroke-width:1.8 }

  /* Подвал не должен прятаться под нижней навигацией. */
  body{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)) }
}

/* ------------------------------------------------------- шторка меню */

.drawer{
  position:fixed; inset:0 auto 0 0; width:min(300px,84vw);
  z-index:var(--z-drawer);
  background:var(--bg-panel); border-right:1px solid var(--stroke);
  transform:translateX(-101%);
  transition:transform var(--dur-2) var(--ease-out);
  display:flex; flex-direction:column; padding:var(--sp-5);
  overflow-y:auto;
}
.drawer[data-open="true"]{ transform:none }
.drawer__nav{ display:grid; gap:var(--sp-1); margin-top:var(--sp-6) }
.drawer__link{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:12px var(--sp-3); border-radius:var(--r-md);
  color:var(--text-muted); font-size:var(--fs-md); font-weight:500;
}
.drawer__link:hover{ background:var(--wash-2); color:var(--text) }
.drawer__link[aria-current="page"]{ color:var(--accent-ink);
  background:var(--accent-soft) }
.drawer__link svg{ width:20px; height:20px; flex:none; stroke:currentColor;
  fill:none; stroke-width:1.8 }

/* Затемнение под шторкой.

   Слой обязан быть НИЖЕ шторки. Стоял --z-overlay (50) против --z-drawer
   (40) — то есть затемнение ложилось поверх меню и перехватывало все
   нажатия: меню открывалось, но не нажималось. Ошибка тихая, потому что
   на широком экране шторки нет вовсе и заметить её можно только с
   телефона. */
.scrim{
  position:fixed; inset:0; z-index:calc(var(--z-drawer) - 1);
  background:var(--scrim-soft); opacity:0; pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-out);
}
.scrim[data-open="true"]{ opacity:1; pointer-events:auto }

/* ------------------------------------------------------------- подвал */

.ftr{
  border-top:1px solid var(--stroke);
  margin-top:var(--sp-10);
  padding-block:var(--sp-8) var(--sp-7);
  background:var(--bg-panel);
}
.ftr__grid{
  max-width:var(--grid-max); margin-inline:auto;
  padding-inline:var(--grid-pad);
  display:grid; gap:var(--sp-7);
  /* Колонки заданы явно.

     Была запись `1.4fr repeat(auto-fit, minmax(140px,1fr))` — и она
     недействительна: авто-повтор нельзя смешивать с гибкой дорожкой (1.4fr).
     Браузер отбрасывал всё свойство целиком, и подвал схлопывался в одну
     колонку. Ошибка тихая: в консоли ничего, просто вёрстка «поехала». */
  grid-template-columns:1.7fr 1fr 1fr 1fr;
}
@media (max-width:980px){ .ftr__grid{ grid-template-columns:1fr 1fr } }
.ftr__social{ display:inline-flex; align-items:center; gap:var(--sp-2) }
.ftr__social svg{ width:16px; height:16px; stroke:currentColor; fill:none;
                  stroke-width:1.7 }
@media (max-width:560px){ .ftr__grid{ grid-template-columns:1fr } }
.ftr h4{ font-size:var(--fs-xs); font-weight:600; color:var(--text-faint);
         letter-spacing:var(--tracking-caps); text-transform:uppercase;
         margin-bottom:var(--sp-3) }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2) }
.ftr a{ color:var(--text-muted); font-size:var(--fs-sm) }
.ftr a:hover{ color:var(--text) }
/* В подвале стоит вариант знака с белой подписью COUNTER-STRIKE: он
   читается на тёмном фоне без подсветки, в отличие от версии с металлом. */
.ftr__logo{ width:min(260px,72%); height:auto; margin-bottom:var(--sp-4) }
.ftr__note{ color:var(--text-faint); font-size:var(--fs-xs); max-width:44ch;
            line-height:1.6 }
.ftr__bottom{
  max-width:var(--grid-max); margin-inline:auto;
  padding:var(--sp-6) var(--grid-pad) 0; margin-top:var(--sp-7);
  border-top:1px solid var(--stroke);
  display:flex; gap:var(--sp-4); flex-wrap:wrap; align-items:center;
  color:var(--text-faint); font-size:var(--fs-xs);
}
.ftr__build{ font-family:var(--font-data) }

/* ------------------------------------------------- страницы состояний */

.page-state{
  min-height:60vh; display:grid; place-content:center; justify-items:center;
  gap:var(--sp-4); text-align:center; padding:var(--sp-9) var(--grid-pad);
}
.page-state__code{
  font-family:var(--font-display); font-size:var(--fs-3xl);
  font-weight:700; color:var(--stroke-strong); line-height:1;
}
.page-state p{ color:var(--text-muted); max-width:46ch }

/* ------------------------------------------------------- содержимое */

/* Отступы страницы. min-height здесь стоял и был причиной вертикальных
   провалов.

   Смысл у него был верный: короткая страница не должна оставлять подвал
   посреди экрана. Но `.page` — это не страница, а её блок, и на /play
   таких блоков четыре подряд. Каждый получал «не ниже половины экрана»,
   и под коротким блоком повисала пустота: у «Как начать» содержимое
   кончалось на 1906, а секция тянулась до 2031 — сто двадцать пять
   пикселей ни о чём. При окне повыше провал растёт вместе с ним: 50vh
   от 3000 это полторы тысячи пикселей.

   Требование «подвал не должен подниматься» относится ко всей странице
   целиком, поэтому и живёт теперь на main. Для страниц с одним блоком
   поведение не изменилось. */
.page{ padding-block:var(--sp-7) var(--sp-8) }
main{ min-height:50vh }

} /* @layer components */

/* Переходы между страницами объявлены один раз — в components.css.
   Здесь было второе объявление @view-transition и своя пара анимаций
   вдвое короче: два описания одного механизма в разных файлах, и какое
   победит, решал порядок загрузки. Оставлены только длительности,
   объявление убрано. */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:vt-out 120ms var(--ease-out) both }
  ::view-transition-new(root){ animation:vt-in 180ms var(--ease-out) both }
}
@keyframes vt-out{ to{ opacity:0 } }
@keyframes vt-in{ from{ opacity:0 } }

@layer components {

/* Значок уведомлений в шапке. Живёт рядом с аватаром и есть на всех
   страницах, потому что шапка одна на весь сайт. */
.hdr__bell{
  position:relative;
  display:grid; place-items:center;
  width:var(--pill-h, 37px); height:var(--pill-h, 37px);
  border:1px solid var(--stroke); border-radius:var(--r-md);
  background:var(--bg-panel); color:var(--text-muted);
  transition:color var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out);
}
.hdr__bell:hover{ color:var(--text); border-color:var(--stroke-strong) }
.hdr__bell--on{ color:var(--accent-ink); border-color:var(--accent-line) }
.hdr__bell svg{ width:18px; height:18px }

.hdr__bell-n{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center;
  border-radius:var(--r-pill);
  background:var(--accent); color:var(--text-on-accent);
  font-size:10px; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion:reduce){ .hdr__bell{ transition:none } }

}