/* =====================================================================
   RefugeLab — стили сайта
   Один файл, без фреймворков. Цвета и шрифты — в :root.
   ===================================================================== */

/* ---------- Шрифты (свои, с подмножествами — грузится только нужное) ---------- */
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(../fonts/unbounded-cyrillic-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(../fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(../fonts/unbounded-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(../fonts/unbounded-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Шрифт логотипа со старого сайта (font-family: logo → Agency FB Bold), только латиница — для названия RefugeLab */
@font-face { font-family: "RL Logo"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(../fonts/agency-fb-bold-latin.woff2) format("woff2"); }

@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/onest-cyrillic-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/onest-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/onest-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/onest-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Токены ---------- */
:root {
  --abyss:  #08060F;   /* фон — ночь из старого сайта */
  --night:  #130E20;   /* приподнятые поверхности */
  --dusk:   #1E1630;
  --line:   rgba(204, 204, 255, .14);
  --bone:   #CCCCFF;   /* основной текст — бренд-лаванда вместо белого */
  --fog:    #9C9CC8;   /* вторичный текст */
  --violet: #AA22DD;   /* бренд — фиолетовый */
  --plum:   #7700CC;   /* бренд — глубокий фиолетовый */
  --lagoon: #77DDEE;   /* бренд — бирюза: ссылки, фокус */
  --game:   #AA22DD;   /* сплошной цвет игры (обводки, свечения); меняется на странице игры */
  --game-2: #77DDEE;   /* второй цвет градиента игры */
  --grad-brand: linear-gradient(135deg, var(--violet) 0%, var(--plum) 100%);

  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-logo: "RL Logo", "Agency FB", "Arial Narrow", sans-serif;
  --f-text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-0: .8125rem;
  --fs-1: 1rem;
  --fs-2: 1.1875rem;
  --fs-3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-4: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-5: clamp(2.1rem, 1.5rem + 2.8vw, 3.5rem);

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --cut: 12px;         /* срез угла — фирменная форма кнопок и медиа */
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
/* Градиент считается там, где задан --game, чтобы цвет игры со страницы/карточки попадал в него */
:root, [style*="--game"] { --grad: linear-gradient(135deg, var(--game-2) 0%, var(--game) 100%); }

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--abyss); color: var(--bone);
  font: 400 1.0625rem/1.6 var(--f-text);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, iframe, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--lagoon); }
:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 3px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--violet); color: var(--bone); }

.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text { max-width: calc(46rem + var(--gutter) * 2); }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--lagoon); color: var(--abyss); font-weight: 600; }
.skip:focus { top: 12px; }
.muted { color: var(--fog); }
.small { font-size: var(--fs-0); }

/* Типографика */
.h1, .h2, .h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.h1 { font-size: var(--fs-5); font-weight: 700; }
.h2 { font-size: var(--fs-4); margin-bottom: 1.25em; }
.h3 { font-size: var(--fs-3); margin-bottom: .8em; }
.lead { font-size: var(--fs-2); color: var(--fog); max-width: 38em; }
.lead + .lead { margin-top: 1em; }

.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(24px, 4vw, 48px) clamp(64px, 8vw, 112px); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 1.25em; }
.section__head .h2 { margin: 0; }
.link-more { color: var(--lagoon); font-weight: 500; white-space: nowrap; }

/* ---------- Кнопки: срезанный угол + неон при наведении ----------
   Как на старом сайте, три слоя:
   1) мягкое размытое свечение — тени самой кнопки (box-shadow), два цвета медленно ходят по кругу;
   2) ::after — тонкая яркая кромка: по ней бегут две световые волны (conic-gradient, повёрнутый на --glow-turn);
   3) ::before — лицо кнопки, на --edge пикселя меньше, поэтому кромку видно по всему контуру, включая срезы.
   Цвета волн и свечения — --glow-1 и --glow-2 у каждого вида кнопки; @property даёт им плавно проявляться. */
@property --glow-a { syntax: '<color>'; inherits: true; initial-value: rgba(170, 34, 221, 0); }
@property --glow-b { syntax: '<color>'; inherits: true; initial-value: rgba(119, 221, 238, 0); }
@property --glow-turn { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

.btn {
  --bg: var(--bone); --fg: var(--abyss); --ring: transparent;
  --glow-1: #AA22DD; --glow-2: #77DDEE; --glow-size: 14px;
  --glow-dim: 38%;      /* яркость размытого свечения: 0% — нет, 100% — как раньше */
  --edge: 1.5px;        /* толщина яркой кромки */
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 1.4em;
  background: none; color: var(--fg); border: 0; cursor: pointer;
  font: 600 .95rem/1 var(--f-text); text-decoration: none; letter-spacing: .01em;
  /* 1) мягкое свечение: две цветные тени по форме кнопки (drop-shadow повторяет срезанные углы),
        в противоположные стороны; в новых браузерах они вращаются (см. @supports ниже) */
  --sx: 4px; --sy: 0px;
  filter: brightness(var(--bright, 1))
    drop-shadow(calc(var(--sx) * -1) calc(var(--sy) * -1) calc(var(--glow-size) * .7) color-mix(in srgb, var(--glow-a) var(--glow-dim), transparent))
    drop-shadow(var(--sx) var(--sy) calc(var(--glow-size) * .7) color-mix(in srgb, var(--glow-b) var(--glow-dim), transparent));
  transition: color .2s, transform .2s var(--ease), filter .25s, --glow-a .45s ease-out, --glow-b .45s ease-out;
}
/* 3) лицо кнопки */
.btn::before {
  content: ""; position: absolute; inset: var(--edge); z-index: -1;
  background: var(--bg);
  clip-path: polygon(0 0, calc(100% - var(--cut) + var(--edge) * .41) 0, 100% calc(var(--cut) - var(--edge) * .41), 100% 100%, calc(var(--cut) - var(--edge) * .41) 100%, 0 calc(100% - var(--cut) + var(--edge) * .41));
  transition: background-color .2s;
}
/* 2) кромка: две яркие волны с затухающими хвостами поверх обычной рамки (--ring) */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    conic-gradient(from var(--glow-turn),
      transparent 0deg, color-mix(in srgb, var(--glow-a) 25%, transparent) 40deg, var(--glow-a) 84deg, transparent 92deg,
      transparent 180deg, color-mix(in srgb, var(--glow-b) 25%, transparent) 220deg, var(--glow-b) 264deg, transparent 272deg),
    linear-gradient(var(--ring), var(--ring)),
    var(--bg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
@supports (width: calc(cos(0deg) * 1px)) {
  .btn { --sx: calc(cos(var(--glow-turn)) * 4px); --sy: calc(sin(var(--glow-turn)) * 3px); }
}
.btn:hover, .btn:focus-visible { color: var(--fg); --glow-a: var(--glow-1); --glow-b: var(--glow-2); }
.btn:focus-visible { outline: none; }
.btn:active { transform: translateY(1px); --glow-size: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover, .btn:focus-visible { animation: glow-turn 2.6s linear infinite; }
  @keyframes glow-turn { to { --glow-turn: 360deg; } }
}
@media (hover: none) { .btn:hover { --glow-a: rgba(170, 34, 221, 0); --glow-b: rgba(119, 221, 238, 0); } .btn:active { --glow-a: var(--glow-1); --glow-b: var(--glow-2); } }
.btn .icon { width: 1.15em; height: 1.15em; flex: none; }
.btn--game  { --bg: var(--grad); --fg: var(--abyss); font-weight: 700; }
.btn--game:hover { --bright: 1.1; --ring: transparent; }
.btn--brand { --bg: var(--grad-brand); --fg: var(--bone); --glow-1: #AA22DD; --glow-2: #CCCCFF; }
.btn--brand:hover { --bright: 1.12; }
.btn--ghost { --bg: color-mix(in srgb, #CCCCFF 8%, #0C0915); --fg: var(--bone); --ring: rgba(204, 204, 255, .28); --glow-size: 12px; }
.btn--ghost:hover { --bg: color-mix(in srgb, #CCCCFF 13%, #0C0915); }
.btn--sm { min-height: 38px; padding: 0 1em; font-size: .875rem; --cut: 9px; --glow-size: 11px; }
.btn--lg { min-height: 56px; padding: 0 1.7em; font-size: 1rem; --glow-size: 18px; }
.btn.is-disabled, .btn:disabled { opacity: .55; cursor: default; transform: none; --glow-a: rgba(170, 34, 221, 0); --glow-b: rgba(119, 221, 238, 0); }

/* ---------- Шапка ---------- */
.site-head { position: sticky; top: 0; z-index: 50; transition: background-color .3s, box-shadow .3s; }
.site-head.is-scrolled { background: rgba(8, 6, 15, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.site-head__in { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 600 1.05rem/1 var(--f-display); letter-spacing: -.01em; }
.brand:hover { color: var(--bone); }
.brand img { width: 40px; height: 40px; }
.brand span { font: 400 1.75rem/1 var(--f-logo); letter-spacing: .05rem; translate: 0 .06em; }
.site-nav { display: flex; align-items: center; flex: 1; gap: 24px; }
.site-nav ul { display: flex; gap: 4px; margin-inline: auto; }
.site-nav ul a { display: block; padding: 8px 14px; text-decoration: none; color: var(--fog); font-weight: 500; }
.site-nav ul a:hover, .site-nav ul a[aria-current] { color: var(--bone); }
.site-nav ul a { position: relative; }
/* Линия под выбранной страницей. При переходе между страницами браузер плавно переносит её
   на новый пункт (View Transitions, см. «Плавные переходы между страницами» ниже) */
.nav-ink { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--lagoon), var(--violet)); box-shadow: 0 0 10px rgba(170, 34, 221, .6); view-transition-name: nav-ink; }
.site-nav__side { display: flex; align-items: center; gap: 16px; }
/* Выбор языка: глобус + название, по клику — всплывающий список */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu__btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: .9375rem; font-weight: 500; color: var(--bone); transition: background-color .2s, color .2s; }
.lang-menu__btn:hover, .lang-menu[open] > .lang-menu__btn { background: rgba(204, 204, 255, .08); }
.lang-menu__btn:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.lang-menu__globe { width: 20px; height: 20px; flex: none; }
.lang-menu__caret { width: 7px; height: 9px; flex: none; opacity: .75; transition: rotate .2s var(--ease); }
.lang-menu[open] .lang-menu__caret { rotate: 90deg; }
.lang-menu__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 200px; max-height: min(70vh, 420px); overflow-y: auto; display: grid; padding: 6px;
  background: var(--dusk); box-shadow: 0 0 0 1px var(--line), 0 18px 48px rgba(0, 0, 0, .55);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.lang-menu[open] .lang-menu__list { animation: menu-in .18s var(--ease); }
.lang-menu__list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; text-decoration: none; color: var(--bone); }
.lang-menu__list a small { font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--fog); }
.lang-menu__list a:hover, .lang-menu__list a:focus-visible { background: rgba(204, 204, 255, .08); outline: none; }
.lang-menu__list a[aria-current] { color: var(--lagoon); box-shadow: inset 2px 0 0 var(--lagoon); }
.lang-menu__list a[aria-current] small { color: var(--lagoon); }
@media (max-width: 940px) { .lang-menu__list { position: static; margin-top: 8px; animation: none !important; } .lang-menu { width: 100%; } }
.nav-toggle { display: none; }

@media (max-width: 940px) {
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; background: none; border: 0; cursor: pointer; }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 22px; height: 2px; background: var(--bone); transition: transform .25s var(--ease), opacity .2s; }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -7px; } .nav-toggle__bars::after { top: 7px; }
  [aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  [aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
  [aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

  .site-nav { position: fixed; inset: 72px 0 auto 0; height: calc(100dvh - 72px); flex-direction: column; align-items: stretch; gap: 32px;
    padding: 24px var(--gutter) 40px; background: var(--abyss); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s; }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s var(--ease); }
  .site-nav ul { flex-direction: column; margin: 0; gap: 0; }
  .site-nav ul a { padding: 16px 0; font: 600 1.5rem/1.2 var(--f-display); color: var(--bone); border-bottom: 1px solid var(--line); }
  .site-nav ul a[aria-current] { box-shadow: none; color: var(--lagoon); }
  .site-nav__side { justify-content: space-between; }
  body.nav-open { overflow: hidden; }
  .site-head:has(.is-open) { background: var(--abyss); }
}

/* ---------- Первый экран игры ---------- */
.hero { position: relative; min-height: min(100svh, 980px); margin-top: -72px; padding-top: 72px; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; }
.hero__art { position: absolute; inset: 0; z-index: -2; }
.hero__art picture, .hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,6,15,.55) 0%, rgba(8,6,15,0) 30%, rgba(8,6,15,.35) 60%, var(--abyss) 100%),
              linear-gradient(90deg, rgba(8,6,15,.8) 0%, rgba(8,6,15,0) 60%); }

/* Запасной фон, пока нет ключевого арта: горизонт и уходящая дорога */
.hero__fallback { position: absolute; inset: 0; background: radial-gradient(120% 70% at 70% 62%, color-mix(in srgb, var(--game-2) 22%, transparent) 0%, transparent 55%), radial-gradient(90% 70% at 85% 70%, color-mix(in srgb, var(--game) 26%, transparent) 0%, transparent 60%), radial-gradient(80% 60% at 20% 10%, rgba(119, 0, 204, .28), transparent 70%), var(--abyss); }
.hero__horizon { position: absolute; left: 0; right: 0; top: 62%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--game-2) 75%, transparent) 35%, color-mix(in srgb, var(--game) 75%, transparent) 65%, transparent); box-shadow: 0 0 40px 6px color-mix(in srgb, var(--game) 26%, transparent); }

/* Живой фон «Исток» (assets/js/flow.js): холст за всей страницей.
   Пока у игры нет ключевого арта, запасной фон первого экрана становится прозрачным, чтобы потоки было видно */
.flow-bg { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.flow-bg.is-on { opacity: 1; }
.has-flow body { background: var(--abyss); }
.has-flow .hero__fallback { background: radial-gradient(80% 60% at 20% 10%, rgba(119, 0, 204, .16), transparent 70%); }
.has-flow .hero__horizon { display: none; }
.has-flow .hero__art:has(.hero__fallback)::after { background: linear-gradient(90deg, rgba(8,6,15,.62) 0%, rgba(8,6,15,.25) 40%, rgba(8,6,15,0) 62%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }

/* Прицел-колесо */
.hero__reticle { position: absolute; z-index: -1; width: min(86vh, 78vw, 860px); aspect-ratio: 1; right: max(-8vw, -120px); top: 50%; translate: 0 -54%; pointer-events: none; }
.reticle { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--bone); --spin: 0; }
.reticle g { transform-box: view-box; transform-origin: 500px 500px; }
.reticle__scale { opacity: .55; transform: rotate(calc(var(--spin) * .25deg)); }
.reticle__major { stroke: url(#reticle-grad); opacity: .95; }
.reticle__labels text { fill: var(--fog); stroke: none; font: 500 15px/1 var(--f-text); text-anchor: middle; dominant-baseline: middle; }
.reticle__tread { opacity: .5; transform: rotate(calc(var(--spin) * -.6deg)); }
.reticle__tread circle:nth-child(2) { stroke: color-mix(in srgb, var(--bone) 70%, transparent); }
.reticle__brackets { stroke: url(#reticle-grad); transform: rotate(calc(45deg + var(--spin) * .9deg)); }
.reticle__cross { stroke: var(--bone); opacity: .8; }
.reticle__dot { fill: url(#reticle-grad); stroke: none; }
.reticle__grad-a { stop-color: var(--game-2); }
.reticle__grad-b { stop-color: var(--game); }
.hero .reticle { mix-blend-mode: screen; }

@media (prefers-reduced-motion: no-preference) {
  .hero .reticle__scale, .hero .reticle__tread, .hero .reticle__brackets { animation: reticle-in 1.6s var(--ease) both; }
  .hero .reticle__tread { animation-delay: .1s; }
  .hero .reticle__brackets { animation-name: brackets-in; animation-delay: .25s; }
  @keyframes reticle-in { from { opacity: 0; rotate: -40deg; scale: .92; } }
  @keyframes brackets-in { from { opacity: 0; scale: 1.5; } }
}

.hero__body { position: relative; padding-bottom: clamp(40px, 7vh, 88px); padding-top: 120px; }
.hero__status { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--bone); margin-bottom: 18px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 0 var(--game-2); }
@media (prefers-reduced-motion: no-preference) { .pulse { animation: pulse 2.4s ease-out infinite; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.hero__title { margin: 0 0 clamp(20px, 3vw, 36px); line-height: .9; }
.wordmark { display: block; font: 800 clamp(2.6rem, 10.4vw, 9.5rem)/.88 var(--f-display); letter-spacing: -.045em; text-transform: none; margin-left: -.05em;
  background: linear-gradient(180deg, var(--bone) 25%, var(--game-2) 70%, var(--game) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__logo { max-width: min(760px, 90%); max-height: 260px; width: auto; }
.hero__card { position: relative; display: block; width: min(640px, 100%); aspect-ratio: 16 / 9; overflow: hidden; background: var(--night);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.hero__card picture, .hero__card picture img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s; }
/* Карточка на главной ведёт на страницу игры: при наведении кадр медленно приближается, логотип чуть подрастает, рамка светится */
a.hero__card { text-decoration: none; transition: filter .35s; }
a.hero__card:hover picture img, a.hero__card:focus-visible picture img { transform: scale(1.05); filter: brightness(1.08) saturate(1.08); }
a.hero__card .hero__card-logo { transition: transform .5s var(--ease); }
a.hero__card:hover .hero__card-logo, a.hero__card:focus-visible .hero__card-logo { transform: scale(1.04); }
a.hero__card:hover::after, a.hero__card:focus-visible::after { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--violet) 85%, #CCCCFF), inset 0 0 30px rgba(170, 34, 221, .45); }
a.hero__card:focus-visible { outline: none; }
.hero--home .hero__title:has(a.hero__card:hover) { filter: drop-shadow(0 0 30px rgba(170, 34, 221, .6)); }
.hero__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 15, 0) 40%, rgba(8, 6, 15, .65)); box-shadow: inset 0 0 0 1px rgba(204, 204, 255, .14); pointer-events: none; transition: box-shadow .35s; }
.hero__card .hero__card-logo { position: absolute; z-index: 1; left: 50%; bottom: 8%; translate: -50% 0; width: min(62%, 420px); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); }
.hero--home .hero__title { filter: drop-shadow(0 0 22px rgba(170, 34, 221, .35)); }
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.hero__tagline { font: 500 var(--fs-3)/1.35 var(--f-display); max-width: 22em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: clamp(32px, 5vh, 56px); padding-top: 20px; border-top: 1px solid var(--line); font-size: .9375rem; }
.hero__facts dt { color: var(--fog); font-size: var(--fs-0); }
.hero__facts dd { font-weight: 500; }
/* ПК: первый экран ровно во всю высоту окна, а логотип, слоган, кнопки и факты
   масштабируются по высоте экрана — на 768 px всё компактнее, на 1440 px крупнее */
@media (min-width: 900px) {
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero__art picture img, .hero__art .hero__img { object-position: 62% 45%; }
  .hero__body { padding-top: clamp(96px, 15vh, 220px); padding-bottom: clamp(28px, 6vh, 96px); }
  .hero__status { margin-bottom: clamp(10px, 2.2vh, 26px); font-size: clamp(.95rem, .72rem + .45vh, 1.2rem); }
  .hero__title { margin-bottom: clamp(16px, 3.4vh, 48px); }
  .hero__logo { max-width: min(720px, 38vw); max-height: clamp(150px, 30vh, 400px); }   /* не заезжает на машину в арте */
  .hero__card { width: min(100%, 860px, calc(38vh * 16 / 9)); }
  .hero__tagline { font-size: clamp(1.2rem, .5rem + 1.5vh + .45vw, 2.2rem); }
  .hero__actions .btn { min-height: clamp(46px, 5.6vh, 62px); padding-inline: clamp(1.2em, .6em + 1vh, 1.8em); font-size: clamp(.9rem, .74rem + .32vh, 1.08rem); }
  .hero__facts { margin-top: clamp(20px, 4.6vh, 68px); padding-top: clamp(14px, 2vh, 26px); font-size: clamp(.9rem, .72rem + .4vh, 1.12rem); gap: 12px clamp(32px, 4vw, 72px); }
  .hero__facts dt { font-size: clamp(.8rem, .66rem + .28vh, .95rem); }
}

/* ---------- Об игре ---------- */
.about-game { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.about-game__text { position: sticky; top: 112px; }
.features { display: grid; gap: 0; }
.feature { padding: 28px 0; border-top: 1px solid var(--line); }
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature__title { font: 600 var(--fs-3)/1.25 var(--f-display); margin-bottom: .5em; }
.feature p { color: var(--fog); max-width: 36em; }
.features--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 40px; }
.features--wide .feature:last-child { border-bottom: 0; }
@media (max-width: 860px) { .about-game { grid-template-columns: 1fr; } .about-game__text { position: static; } }
/* Строка цифр под особенностями игры: 6 биомов · 100+ модулей · 8 языков */
.game-stats { grid-column: 2; display: flex; flex-wrap: wrap; gap: 16px clamp(32px, 6vw, 96px); padding-top: 28px; border-top: 1px solid var(--line); }
.game-stats li { display: flex; align-items: baseline; gap: 12px; }
.game-stats b { font: 800 var(--fs-5)/1 var(--f-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-stats span { color: var(--fog); font-weight: 500; }
@media (max-width: 860px) { .game-stats { grid-column: 1; } }

/* ---------- Трейлер и скриншоты ---------- */
.media { background: linear-gradient(180deg, transparent, var(--night) 18%, var(--night) 82%, transparent); }
.video { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__play { position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--grad); color: var(--abyss); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); transition: transform .2s var(--ease); }
.video__play .icon { width: 40px; height: 40px; }
.video:hover .video__play { transform: scale(1.06); }
.video--empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--dusk) 0 14px, var(--night) 14px 28px); }

.shots { margin-top: 40px; }
.shots__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 880px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px max(var(--gutter), calc((100vw - var(--maxw)) / 2)) 20px; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  scrollbar-width: thin; scrollbar-color: var(--dusk) transparent; }
.shots__track > li { scroll-snap-align: start; }
.shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dusk);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.shot:hover img { transform: scale(1.03); }
.shot--empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--dusk) 0 14px, var(--night) 14px 28px); }

/* Галерея с JS: бесконечная лента (см. «Галерея» в main.js) */
.shots.is-js { position: relative; margin-top: 22px; }
.shots.is-js .shots__view { overflow-x: clip; padding-block: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.shots.is-js .shots__track { display: flex; gap: 16px; width: max-content; overflow: visible; padding: 0; scroll-snap-type: none; will-change: transform;
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.shots.is-js .shots__track:focus-visible { outline: none; }
.shots.is-js .shots__track > li { flex: none; width: min(78vw, 880px); transition: filter .35s var(--ease); }
.shots.is-drag .shots__track { cursor: grabbing; }
.shots.is-drag .shot { pointer-events: none; }
.shots.is-js .shot { position: relative; -webkit-user-drag: none; }
.shots.is-js .shot img { -webkit-user-drag: none; pointer-events: none; }
/* Неоновая рамка кадра при наведении, как на старом сайте */
.shots.is-js .shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--violet) 85%, #CCCCFF), inset 0 0 26px rgba(170, 34, 221, .45); }
.shots.is-js .shots__track > li:hover { filter: drop-shadow(0 0 14px rgba(170, 34, 221, .55)); }
.shots.is-js .shots__track > li:hover .shot::after, .shots.is-js .shot:focus-visible::after { opacity: 1; }
.shots.is-drag .shots__track > li:hover { filter: none; }
.shots.is-drag .shots__track > li:hover .shot::after { opacity: 0; }

/* Кнопки-стрелки: фиолетовые треугольники, появляются при наведении и пульсируют */
.shots__nav { position: absolute; z-index: 2; top: 50%; width: 64px; height: 76px; padding: 0; border: 0; background: none; cursor: pointer;
  translate: 0 -50%; opacity: 0; transition: opacity .3s var(--ease); filter: drop-shadow(0 0 10px rgba(170, 34, 221, .7)); }
.shots__nav::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #C04CF0, var(--violet) 45%, var(--plum));
  clip-path: polygon(18% 6%, 92% 50%, 18% 94%); transition: transform .25s var(--ease); }
.shots__nav--prev { left: max(calc(var(--gutter) * .5), calc((100vw - var(--maxw)) / 2 - 48px)); }
.shots__nav--prev::before { rotate: 180deg; }
.shots__nav--next { right: max(calc(var(--gutter) * .5), calc((100vw - var(--maxw)) / 2 - 48px)); }
.shots:hover .shots__nav, .shots__nav:focus-visible { opacity: 1; }
.shots__nav:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 4px; }
.shots__nav:active::before { transform: scale(.88); }
@media (prefers-reduced-motion: no-preference) {
  .shots:hover .shots__nav { animation: nav-pulse 1.3s ease-in-out infinite; }
  .shots__nav:hover { animation-duration: .8s !important; }
  @keyframes nav-pulse {
    0%, 100% { scale: 1; filter: drop-shadow(0 0 8px rgba(170, 34, 221, .55)); }
    50% { scale: 1.12; filter: drop-shadow(0 0 22px rgba(190, 70, 255, .95)) drop-shadow(0 0 4px rgba(204, 204, 255, .6)); }
  }
}
@media (hover: none) { .shots__nav { opacity: .85; width: 44px; height: 54px; } }

.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(4, 3, 8, .94); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 88vh; width: auto; object-fit: contain; }
.lightbox button { position: fixed; background: rgba(204,204,255,.1); color: var(--bone); border: 0; width: 52px; height: 52px; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: rgba(204,204,255,.2); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__nav--prev { left: 16px; top: 50%; translate: 0 -50%; }
.lightbox__nav--next { right: 16px; top: 50%; translate: 0 -50%; }

/* ---------- Девлог ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.posts:has(> :only-child) { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.page-devlog .posts { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post-item__link { display: grid; gap: 16px; text-decoration: none; }
.post-item__cover { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 30% 30%, rgba(170,34,221,.35), transparent 60%), radial-gradient(circle at 80% 85%, rgba(119,221,238,.18), var(--night) 70%);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.post-item__cover picture, .post-item__cover picture img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-item__mark { width: 72px; opacity: .6; }
.post-item__link:hover img { transform: scale(1.03); }
.post-item time { color: var(--fog); font-size: var(--fs-0); }
.post-item__title { font: 600 1.25rem/1.3 var(--f-display); margin-top: 4px; text-wrap: balance; }
.post-item__link:hover .post-item__title { color: var(--lagoon); }
.post-item p { color: var(--fog); margin-top: 8px; }
@media (max-width: 860px) { .posts { grid-template-columns: 1fr; } }

/* ---------- Студия на главной ---------- */
.studio-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.studio-teaser .lead { margin-bottom: 28px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.duo__member:nth-child(2) { margin-top: 64px; }
.duo__photo, .member__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--night);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.duo__photo picture, .member__photo picture { height: 100%; }
.duo__photo img, .member__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05); }
.duo__name { font: 600 1.05rem/1.3 var(--f-display); margin-top: 14px; }
.duo__role { color: var(--fog); font-size: .9375rem; margin-top: 4px; }
@media (max-width: 860px) { .studio-teaser { grid-template-columns: 1fr; } }

/* ---------- Полоса «в желаемое» ---------- */
.wish { position: relative; padding-block: clamp(56px, 8vw, 104px); overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 140% at 100% 100%, color-mix(in srgb, var(--game) 30%, transparent), transparent 60%), radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--game-2) 16%, transparent), transparent 60%), var(--night);
  border-block: 1px solid var(--line); }
.wish__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.wish__title { font: 700 var(--fs-5)/1.05 var(--f-display); letter-spacing: -.02em; margin-bottom: 14px; }
.wish__text { color: var(--fog); max-width: 34em; }
.wish__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wish__widget { margin-top: 40px; }
.wish__widget iframe { border: 0; width: 100%; max-width: 646px; }

/* ---------- Внутренние страницы ---------- */
.page-head { padding-top: clamp(48px, 8vw, 112px); padding-bottom: clamp(24px, 4vw, 48px); }
.page-head .h1 { margin-bottom: .4em; max-width: 16em; }
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.split__main > * + .h2, .split__main > * + .h3 { margin-top: 2em; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.prose-plain p + p { margin-top: 1em; }
.prose-plain p { max-width: 40em; }
.prose-plain ul { list-style: disc; padding-left: 1.2em; display: grid; gap: .5em; }

.factsheet { padding: 28px; background: linear-gradient(var(--night), var(--night)) padding-box, var(--grad) border-box; border-top: 2px solid transparent; }
.factsheet dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: .9375rem; }
.factsheet dt { color: var(--fog); }
.factsheet .link-more { display: inline-block; margin-top: 24px; }

.studio-facts { display: grid; gap: 0; }
.studio-facts > div { padding: 18px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.studio-facts dt { color: var(--fog); }
.studio-facts dd { font: 600 var(--fs-3)/1 var(--f-display); }

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.member { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: start; }
.member__name { font: 600 var(--fs-3)/1.25 var(--f-display); }
.member__nick { display: block; font: 400 .9375rem/1.4 var(--f-text); color: var(--lagoon); margin-top: 2px; }
.member__role { color: var(--bone); font-weight: 500; margin: 10px 0 8px; }
.member p:last-child { color: var(--fog); }
@media (max-width: 480px) { .member { grid-template-columns: 1fr; } .member__photo { max-width: 220px; } }

.timeline { position: relative; display: grid; gap: 0; max-width: 760px; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.timeline__year { font: 700 var(--fs-3)/1.2 var(--f-display); color: var(--lagoon); }

.cta-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); }
.cta-line .h3 { margin: 0; max-width: 26em; }
.cta-line .muted { margin-top: 8px; max-width: 40em; }

/* Список игр */
.games { display: grid; gap: 48px; padding-bottom: clamp(64px, 8vw, 112px); }
.game-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.game-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(70% 70% at 35% 40%, color-mix(in srgb, var(--game-2) 18%, transparent), transparent 70%), radial-gradient(70% 70% at 65% 65%, color-mix(in srgb, var(--game) 24%, transparent), var(--night));
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.game-card__media picture, .game-card__media img { width: 100%; height: 100%; object-fit: cover; }
.game-card__media { position: relative; }
.game-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 15, 0) 40%, rgba(8, 6, 15, .65)); box-shadow: inset 0 0 0 1px rgba(204, 204, 255, .14); pointer-events: none; transition: box-shadow .35s; }
.game-card__media img.game-card__logo { position: absolute; z-index: 1; left: 50%; bottom: 8%; translate: -50% 0; width: min(62%, 420px); height: auto; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); }
/* Как на главной: при наведении на карточку игры кадр медленно приближается, логотип подрастает, рамка светится */
.game-card__media picture img { transition: transform .7s var(--ease), filter .4s; }
.game-card__media img.game-card__logo { transition: transform .5s var(--ease); }
.game-card__media { transition: filter .35s; }
.game-card:has(a:hover) .game-card__media picture img, .game-card:has(a:focus-visible) .game-card__media picture img { transform: scale(1.05); filter: brightness(1.08) saturate(1.08); }
.game-card:has(a:hover) .game-card__media img.game-card__logo, .game-card:has(a:focus-visible) .game-card__media img.game-card__logo { transform: scale(1.04); }
.game-card:has(a:hover) .game-card__media::after, .game-card:has(a:focus-visible) .game-card__media::after { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--violet) 85%, #CCCCFF), inset 0 0 30px rgba(170, 34, 221, .45); }
.game-card:has(a:hover) .game-card__media { filter: drop-shadow(0 0 30px rgba(170, 34, 221, .6)); }
/* свечение (filter) не должно обрезаться формой: срезанные углы — у вложенных слоёв, а не у самой рамки */
.game-card__media { filter: drop-shadow(0 0 22px rgba(170, 34, 221, .35)); clip-path: none; background: none; }
.game-card__media > picture, .game-card__media::after, .game-card__media > .game-card__placeholder { display: block;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.game-card__media > .game-card__placeholder { background: radial-gradient(70% 70% at 35% 40%, color-mix(in srgb, var(--game-2) 18%, transparent), transparent 70%), radial-gradient(70% 70% at 65% 65%, color-mix(in srgb, var(--game) 24%, transparent), var(--night)); }
.game-card__placeholder { height: 100%; display: grid; place-items: center; padding: 6%; }
.game-card__placeholder .reticle { height: 100%; width: auto; }
.game-card__status { display: inline-flex; align-items: center; gap: 10px; color: var(--fog); margin-bottom: 12px; }
.game-card__title { font: 800 var(--fs-5)/1 var(--f-display); letter-spacing: -.03em; margin-bottom: 16px; }
.game-card__title a { text-decoration: none; }
.game-card p { color: var(--fog); }
.game-card__meta { margin: 12px 0 28px; font-size: .9375rem; }
.games__next { padding: 28px; border: 1px dashed var(--line); color: var(--fog); max-width: 640px; }
@media (max-width: 860px) { .game-card { grid-template-columns: 1fr; } }

/* Требования, FAQ */
.specs { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .specs { grid-template-columns: 1fr; } }
.table-scroll { overflow-x: auto; }
.req { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 520px; }
.req th, .req td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.req thead th { font-weight: 600; color: var(--bone); }
.req tbody th { color: var(--fog); font-weight: 400; width: 22%; }

.faq__list { max-width: 820px; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font: 600 1.125rem/1.35 var(--f-display); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--lagoon); border-bottom: 2px solid var(--violet); translate: 0 -70%; rotate: 45deg; transition: rotate .25s var(--ease), translate .25s; }
.faq__item[open] summary::after { rotate: 225deg; translate: 0 -20%; }
.faq__item p { padding: 0 0 24px; color: var(--fog); max-width: 40em; }

/* Пресс-кит */
.downloads { display: grid; gap: 8px; margin-top: 20px; }
.downloads a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(204,204,255,.05); text-decoration: none; }
.downloads a:hover { background: rgba(204,204,255,.1); color: var(--bone); }
.downloads .icon { width: 20px; height: 20px; color: var(--lagoon); }
.downloads small { color: var(--fog); }
.press-game { border-top: 1px solid var(--line); }
.press-game .split { margin-bottom: 40px; }
.press-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.press-shots img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }

/* Статья */
.article__head { padding-top: clamp(40px, 7vw, 96px); padding-bottom: 32px; }
.back { display: inline-block; color: var(--lagoon); text-decoration: none; margin-bottom: 24px; font-weight: 500; }
.back::before { content: "‹ "; }
.article__title { margin-bottom: 16px; }
.article__meta { color: var(--fog); }
.note { margin-top: 16px; padding: 12px 16px; background: var(--night); color: var(--fog); font-size: .9375rem; }
.article__cover { margin-bottom: 48px; }
.article__cover img { width: 100%; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.prose { font-size: 1.125rem; line-height: 1.7; padding-bottom: 64px; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.25; margin-top: 2em; }
.prose h2 { font-size: var(--fs-4); } .prose h3 { font-size: var(--fs-3); }
.prose a { color: var(--lagoon); }
.prose ul { list-style: disc; padding-left: 1.3em; } .prose ol { list-style: decimal; padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin-inline: 0; padding-left: 20px; border-left: 3px solid var(--violet); color: var(--fog); font-style: italic; }
.prose figure { margin-block: 2em; }
.prose figure img { width: 100%; }
.prose figcaption { color: var(--fog); font-size: .875rem; margin-top: 8px; }
.prose code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; background: var(--night); padding: .1em .35em; }
.prose pre { background: var(--night); padding: 20px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }
.article__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-block: 32px 80px; border-top: 1px solid var(--line); }
.article__nav a { text-decoration: none; font: 600 1rem/1.35 var(--f-display); }
.article__nav a span { display: block; font: 400 .875rem/1.4 var(--f-text); color: var(--fog); margin-bottom: 6px; }
.article__nav .is-next { text-align: right; grid-column: 2; }

.empty { padding: 48px; background: var(--night); display: grid; gap: 20px; justify-items: start; }
.empty p { color: var(--fog); max-width: 36em; }

/* Контакты */
.form { display: grid; gap: 24px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label { font-size: .875rem; font-weight: 500; color: var(--fog); padding: 0; }
.field input[type=text], .field input[type=email], .field textarea {
  width: 100%; padding: 14px 16px; background: var(--night); border: 1px solid var(--line); border-radius: 0; transition: border-color .2s, background-color .2s; }
.field textarea { resize: vertical; min-height: 160px; }
.field input:hover, .field textarea:hover { border-color: rgba(204,204,255,.3); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--lagoon); background: var(--dusk); }
.field [aria-invalid="true"] { border-color: #FF7A8A; }
.field__err { color: #FF9AA6; font-size: .875rem; }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topics legend { width: 100%; margin-bottom: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); font-size: .9375rem; transition: background-color .2s, border-color .2s; }
.chip input:checked + span { background: var(--grad-brand); border-color: var(--violet); color: var(--bone); }
.chip input:focus-visible + span { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form__foot p { max-width: 26em; }
.form__foot a { color: var(--lagoon); }
.form__ok, .form__err, .form__status { padding: 14px 16px; font-weight: 500; }
.form__ok, .form__status.is-ok { background: rgba(119,221,238,.12); color: var(--lagoon); }
.form__err, .form__status.is-err { background: rgba(255,122,138,.12); color: #FF9AA6; }
.form.is-busy button[type=submit] { opacity: .6; pointer-events: none; }

.contact-ways { display: grid; gap: 4px; }
.contact-way { display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.contact-way .icon { width: 22px; height: 22px; color: var(--fog); }
.contact-way:hover .icon { color: var(--lagoon); }
.contact-way b { display: block; font-weight: 600; }
.contact-way small { color: var(--fog); font-size: .875rem; }

/* 404 */
.notfound { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; min-height: 70vh; padding-block: 48px 96px; }
.notfound__code { font: 800 clamp(4rem, 12vw, 9rem)/1 var(--f-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.04em; }
.notfound .lead { margin: 16px 0 32px; }
.notfound__reticle { opacity: .7; }
@media (max-width: 760px) { .notfound { grid-template-columns: 1fr; } .notfound__reticle { max-width: 280px; } }

/* ---------- Подвал ---------- */
.site-foot { border-top: 1px solid var(--line); padding-top: 64px; color: var(--fog); font-size: .9375rem; }
.site-foot__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 40px; }
.site-foot .brand { color: var(--bone); margin-bottom: 16px; }
.site-foot__brand p { max-width: 30em; }
.site-foot__mail { display: inline-block; margin-top: 16px; color: var(--bone); }
.site-foot__links { display: grid; gap: 8px; }
.site-foot__links a { text-decoration: none; }
.socials { display: grid; grid-template-columns: repeat(3, 44px); gap: 8px; align-content: start; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; background: rgba(204,204,255,.06); color: var(--bone); transition: background-color .2s, color .2s; }
.socials a:hover { background: var(--grad); color: var(--abyss); }
.socials .icon { width: 20px; height: 20px; }
.site-foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 40px 32px; margin-top: 48px; border-top: 1px solid var(--line); font-size: var(--fs-0); }
@media (max-width: 760px) { .site-foot__grid { grid-template-columns: 1fr 1fr; } .site-foot__brand { grid-column: 1 / -1; } }


/* ---------- Аккаунт: вход через Steam, профиль, настройки ---------- */
.eyebrow { font-size: var(--fs-0); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lagoon); margin-bottom: 12px; }
.btn--steam { --bg: var(--grad); --fg: var(--abyss); font-weight: 700; }
.btn--steam:hover { --bright: 1.1; --ring: transparent; }
.btn--danger { --bg: color-mix(in srgb, #FF7A8A 14%, #0C0915); --fg: #FF9AA6; --ring: rgba(255, 122, 138, .45); --glow-1: #FF4D6A; --glow-2: #FF9AA6; --glow-size: 11px; }
.btn--danger:hover { --bg: color-mix(in srgb, #FF7A8A 22%, #0C0915); }

.avatar { display: inline-grid; place-items: center; flex: none; overflow: hidden; background: var(--grad-brand); color: var(--bone); font: 700 1rem/1 var(--f-display);
  clip-path: polygon(0 0, calc(100% - 25%) 0, 100% 25%, 100% 100%, 25% 100%, 0 calc(100% - 25%)); }
.avatar > * { grid-area: 1 / 1; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs { width: 30px; height: 30px; font-size: .8rem; }
.avatar--sm { width: 48px; height: 48px; }
.avatar--md { width: 64px; height: 64px; font-size: 1.4rem; }
.avatar--lg { width: clamp(88px, 12vw, 128px); height: clamp(88px, 12vw, 128px); font-size: clamp(2rem, 4vw, 3rem); }

.account-chip { display: inline-flex; align-items: center; gap: 10px; max-width: 220px; padding: 4px 14px 4px 4px; text-decoration: none; font-weight: 600; font-size: .875rem;
  box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); transition: background-color .2s; }
.account-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip:hover, .account-chip[aria-current] { color: var(--bone); background: rgba(204, 204, 255, .08); }

.auth { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(32px, 6vw, 96px); min-height: 72vh; padding-block: clamp(40px, 7vw, 96px); }
.auth__card .lead { margin: 16px 0 32px; }
.auth__card .form__err { margin-bottom: 24px; }
.auth__how { margin: 36px 0 20px; padding: 0; list-style: none; counter-reset: how; display: grid; gap: 14px; max-width: 34em; }
.auth__how li { counter-increment: how; display: grid; grid-template-columns: 32px 1fr; gap: 12px; color: var(--fog); }
.auth__how li::before { content: counter(how); display: grid; place-items: center; width: 28px; height: 28px; font: 700 .8rem/1 var(--f-display); color: var(--lagoon); box-shadow: inset 0 0 0 1px var(--line); }
.auth .small a { color: var(--lagoon); }
.auth__art { opacity: .75; }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth__art { display: none; } }

.account-head { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); }
.account-head .h1 { margin-bottom: .2em; overflow-wrap: anywhere; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.panel { display: grid; align-content: start; gap: 18px; padding: clamp(20px, 3vw, 32px); background: var(--night); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.panel__title { display: flex; align-items: center; gap: 10px; font: 600 var(--fs-2)/1.2 var(--f-display); }
.panel__title .icon { width: 22px; height: 22px; color: var(--lagoon); }
.panel .btn, .panel .link-more { justify-self: start; }
.panel { grid-template-columns: minmax(0, 1fr); }
.panel input[type=file] { min-width: 0; width: 100%; }
.panel--danger { box-shadow: inset 0 0 0 1px rgba(255, 122, 138, .3); }
.linked { display: flex; align-items: center; gap: 14px; }
.linked b { display: block; font-weight: 600; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.kv dt { color: var(--fog); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv code { font: 500 .9em/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--lagoon); }
.account-logout { margin-top: 32px; }

/* Discord в списке пользователей админки */
.discord-cell { display: grid; gap: 2px; font-size: .875rem; }
.discord-cell code { font: 500 .8rem/1.3 ui-monospace, Menlo, Consolas, monospace; color: var(--fog); }

/* Привязанные аккаунты в настройках */
.link-row { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.link-row__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: rgba(204, 204, 255, .06); color: var(--bone); }
.link-row__icon .icon { width: 22px; height: 22px; }
.link-row__icon--discord { color: #8C9EFF; }
.link-row__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.link-row__body code { font: 500 .9em/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--lagoon); }
.link-row form { margin: 0; }
.settings { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .settings { grid-template-columns: 1fr; } }
.field__hint { color: var(--fog); font-size: .875rem; }
.field--short { max-width: 320px; }
.field select { width: 100%; padding: 14px 44px 14px 16px; background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2377DDEE' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1px solid var(--line); border-radius: 0; color: var(--bone); font: inherit; appearance: none; cursor: pointer; }
.field select:focus { outline: none; border-color: var(--lagoon); }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--violet); cursor: pointer; }
.check input[aria-invalid="true"] { outline: 2px solid #FF7A8A; outline-offset: 2px; }

.dev-note { margin: -12px 0 32px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--game) 55%, transparent); background: rgba(8, 6, 15, .6); font-size: .9375rem; }
.dev-note b { display: block; color: var(--lagoon); margin-bottom: 6px; font-weight: 600; }

/* Подсказки для разработчиков (config: debug) */

/* ---------- Меню пользователя в шапке ---------- */
.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.user-menu > summary::-webkit-details-marker { display: none; }
.account-chip__caret { width: 10px; height: 7px; flex: none; opacity: .7; transition: rotate .2s var(--ease); }
.user-menu[open] .account-chip__caret { rotate: 180deg; }
.user-menu[open] > .account-chip, .account-chip[data-current] { background: rgba(204, 204, 255, .08); }
.user-menu__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 240px; display: grid; padding: 8px;
  background: var(--dusk); box-shadow: 0 0 0 1px var(--line), 0 18px 48px rgba(0, 0, 0, .55);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.user-menu[open] .user-menu__list { animation: menu-in .18s var(--ease); }
@keyframes menu-in { from { opacity: 0; translate: 0 -6px; } }
.user-menu__who { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.user-menu__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__list a, .user-menu__list button { display: block; width: 100%; padding: 10px 12px; text-align: left; text-decoration: none; color: var(--bone);
  font: 500 .9375rem/1.3 var(--f-text); background: none; border: 0; cursor: pointer; }
.user-menu__list a:hover, .user-menu__list button:hover, .user-menu__list a:focus-visible, .user-menu__list button:focus-visible { background: rgba(204, 204, 255, .08); color: var(--bone); outline: none; }
.user-menu__list a[aria-current] { color: var(--lagoon); }
.user-menu__admin { color: var(--lagoon) !important; }
.user-menu__list form { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.user-menu__list button { color: var(--fog); }
@media (max-width: 940px) { .user-menu__list { right: auto; left: auto; position: static; margin-top: 8px; animation: none; } .user-menu { width: 100%; } .site-nav__side { flex-wrap: wrap; } }

/* ---------- Роли ---------- */
.badge { display: inline-block; padding: 3px 8px; font: 600 .75rem/1.2 var(--f-text); letter-spacing: .02em; white-space: nowrap; color: var(--fog); box-shadow: inset 0 0 0 1px var(--line); }
.badge--administrator { color: var(--abyss); background: var(--grad); box-shadow: none; }
.badge--moderator { color: var(--lagoon); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lagoon) 55%, transparent); }

/* ---------- Админ-панель ---------- */
.admin-head { padding-top: clamp(32px, 5vw, 64px); }
.admin-head__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; }
.admin-head__top .h2 { margin: 0; }
.admin-head__me { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs a { padding: 12px 18px; white-space: nowrap; text-decoration: none; color: var(--fog); font-weight: 500; box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .2s; }
.tabs a:hover { color: var(--bone); }
.tabs a[aria-current] { color: var(--bone); box-shadow: inset 0 -2px 0 var(--violet); }
.admin-flash { margin-top: 20px; }
.admin-body { padding-block: 32px clamp(64px, 8vw, 112px); display: grid; gap: 24px; align-content: start; }
.admin-body { grid-template-columns: minmax(0, 1fr); }
.admin-body > *, .editor > *, .editor__side > *, .editor__main > * { min-width: 0; }
.editor__side input[type=file] { max-width: 100%; }
.admin-lead { font-size: var(--fs-1); }
.admin-section { margin: 24px 0 0; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.admin-actions p { max-width: 52em; }
.panel--accent { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 60%, transparent); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { padding: 18px 20px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.stat b { display: block; font: 700 var(--fs-4)/1.1 var(--f-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--fog); font-size: .875rem; }

.table-wrap { overflow-x: auto; box-shadow: inset 0 0 0 1px var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.table thead th { font-size: .8125rem; font-weight: 600; color: var(--fog); background: var(--night); white-space: nowrap; }
.table tbody tr:hover { background: rgba(204, 204, 255, .03); }
.table--compact th, .table--compact td { padding: 8px 0; }
.table code, .panel code { font: 500 .85em/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--lagoon); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .center { text-align: center; }
.nowrap { white-space: nowrap; }
.block { display: block; }
.is-banned td { opacity: .6; }
.who { display: flex; align-items: center; gap: 12px; }
.who b { display: block; }
.inline-form { display: inline-flex; align-items: center; gap: 6px; margin: 4px 8px 4px 0; }
.inline-form select, .filters select, .filters input { padding: 8px 32px 8px 10px; background-color: var(--night); border: 1px solid var(--line); color: var(--bone); font: inherit; font-size: .875rem; }
.filters input { padding-right: 10px; }
.inline-form select { appearance: none; background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2377DDEE' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.btn--xs { min-height: 32px; padding: 0 .8em; font-size: .8125rem; --cut: 7px; --glow-size: 8px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.status { display: inline-block; font-size: .8125rem; font-weight: 600; color: #8EE6B0; margin-right: 6px; }
.status--bad { color: #FF9AA6; }
.status--draft { color: #FFD27A; }
.ok { color: #8EE6B0; font-weight: 700; }
.bad { color: #FF9AA6; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.chip-sm { display: inline-block; padding: 3px 7px; margin-right: 4px; font-size: .75rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.chip-sm.is-off { opacity: .4; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filters .field { flex: 1 1 180px; gap: 6px; }
.filters .field:first-child { flex-basis: 280px; }
.filters select, .filters .field input { width: 100%; padding: 11px 12px; }
.filters select { padding-right: 32px; }
.filters select { appearance: none; background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2377DDEE' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.pager { display: flex; flex-wrap: wrap; gap: 4px; }
.pager a { min-width: 40px; padding: 8px 12px; text-align: center; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.pager a[aria-current] { background: var(--grad-brand); box-shadow: none; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.log li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: .9375rem; }
.log i { color: var(--lagoon); font-style: normal; }

.matrix td:first-child { min-width: 280px; }
.matrix input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--violet); cursor: pointer; }
.matrix input:disabled { cursor: not-allowed; opacity: .55; }
.matrix__group th { padding-top: 20px; font: 600 .75rem/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--lagoon); background: none; }
.form--tight { gap: 14px; }

.editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .editor { grid-template-columns: 1fr; } }
.editor__main, .editor__side { display: grid; gap: 20px; }
.editor__side { position: sticky; top: 96px; }
@media (max-width: 1000px) { .editor__side { position: static; } }
.editor__lang { border: 0; margin: 0; }
.editor__lang legend { float: left; width: 100%; margin-bottom: 4px; }
.editor__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mono, .field textarea.mono { font: 400 .9rem/1.6 ui-monospace, Menlo, Consolas, monospace; }
.md-help summary { cursor: pointer; font-weight: 600; }
.md-help pre { margin: 12px 0 0; white-space: pre-wrap; color: var(--fog); }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.files li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.files img { width: 56px; height: 40px; object-fit: cover; }
.files code { overflow-wrap: anywhere; }
.field input[type=date], .field input[type=number], .field input[type=file] { width: 100%; padding: 12px 14px; background: var(--night); border: 1px solid var(--line); color: var(--bone); font: inherit; color-scheme: dark; }
.note--draft { color: #FFD27A; box-shadow: inset 3px 0 0 #FFD27A; }
.note--draft a { color: var(--lagoon); }


/* ---------- Админка: переводы ---------- */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; align-items: start; }
.lang-card { gap: 12px; }
.lang-card.is-hidden { opacity: .8; box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 9999px rgba(8, 6, 15, .25); }
.lang-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lang-card__top .panel__title { margin-bottom: 8px; }
.lang-card__top code { font-size: .8rem; color: var(--fog); font-family: ui-monospace, Menlo, Consolas, monospace; }
.lang-card__pct { font: 700 var(--fs-3)/1 var(--f-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lang-card .small a { color: var(--lagoon); }
.lang-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.progress { height: 6px; background: rgba(204, 204, 255, .08); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--grad); }
.mini { position: relative; }
.mini > summary { list-style: none; cursor: pointer; }
.mini > summary::-webkit-details-marker { display: none; }
.i18n-key .mini > summary { display: inline-block; margin-top: 6px; font-size: .75rem; color: var(--fog); text-decoration: underline dotted; }
.mini__body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.lang-card .mini[open] { flex-basis: 100%; }
.mini__body input[type=text] { flex: 1 1 140px; min-width: 0; padding: 7px 10px; background: var(--night); border: 1px solid var(--line); color: var(--bone); font: 500 .8125rem/1.3 ui-monospace, Menlo, Consolas, monospace; }
.po-panel > summary { cursor: pointer; list-style: none; }
.po-panel > summary::-webkit-details-marker { display: none; }
.po-panel > summary::after { content: " ▾"; color: var(--fog); }
.po-panel[open] > summary::after { content: " ▴"; }
.po-panel__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; margin-top: 8px; }
@media (max-width: 900px) { .po-panel__body { grid-template-columns: 1fr; } }
.steps { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 10px; color: var(--fog); }
.steps a { color: var(--lagoon); }
.steps b { color: var(--bone); }
.i18n-filters .show-langs { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.i18n-filters .show-langs legend { width: 100%; margin-bottom: 6px; }
.i18n-filters .chip span { padding: 9px 12px; font-size: .8125rem; font-weight: 600; }
.i18n-filters .check { align-self: center; padding-bottom: 10px; }
.i18n-table { table-layout: fixed; min-width: 760px; }
.i18n-table th:first-child, .i18n-table td:first-child { width: 230px; }
.i18n-table td { vertical-align: top; padding: 10px; }
.i18n-key code { display: block; word-break: break-all; font-size: .8125rem; }
.i18n-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.flag { padding: 2px 6px; font-size: .6875rem; font-weight: 600; color: var(--fog); box-shadow: inset 0 0 0 1px var(--line); }
.flag--bad { color: #FF9AA6; box-shadow: inset 0 0 0 1px rgba(255, 122, 138, .4); }
.i18n-input { display: block; width: 100%; min-height: 40px; resize: vertical; padding: 9px 11px; background: var(--night); border: 1px solid var(--line); color: var(--bone);
  font: 400 .9375rem/1.45 var(--f-text); overflow: hidden; transition: border-color .15s, background-color .15s; }
.i18n-input:focus { outline: none; border-color: var(--lagoon); background: var(--dusk); }
.i18n-input::placeholder { color: color-mix(in srgb, var(--fog) 55%, transparent); font-style: italic; }
.i18n-input.is-missing { border-style: dashed; border-color: rgba(255, 210, 122, .45); }
.i18n-input.is-mismatch { border-color: rgba(255, 122, 138, .6); }
.i18n-input.is-changed { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, var(--night)); }
.savebar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; padding: 14px 20px;
  background: rgba(19, 14, 32, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--line), 0 -12px 32px rgba(0, 0, 0, .4); }
.savebar.is-dirty { box-shadow: 0 0 0 1px var(--violet), 0 -12px 32px rgba(0, 0, 0, .4); }
.savebar.is-dirty b { color: var(--lagoon); }
.new-key__langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.new-key__langs textarea { min-height: 72px; }


/* ---------- Подгрузка без перезагрузки ---------- */
.pjax-region { display: grid; gap: 24px; transition: opacity .15s; }
.pjax-region.is-loading { opacity: .55; pointer-events: none; }
.pager.is-js { display: none; }
.pager__gap { padding: 8px 4px; color: var(--fog); }
.savebar__msg { flex: 1 1 300px; font-size: .875rem; color: #8EE6B0; }
.savebar__msg.is-err { color: #FF9AA6; }
.infinite-more { display: flex; justify-content: center; padding: 24px 0 8px; }
[aria-busy="true"] .infinite-more .btn { opacity: .7; pointer-events: none; }


/* ---------- Инвентарь (как в Steam): сетка + карточка выбранного ---------- */
.account-section { margin: 48px 0 16px; }
.inventory { --tile: 96px; background: linear-gradient(180deg, var(--night), color-mix(in srgb, var(--night) 70%, var(--abyss))); box-shadow: inset 0 0 0 1px var(--line); }
.inventory__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.inventory__count { font-weight: 600; color: var(--fog); font-size: .875rem; }
.inventory__games { display: flex; flex-wrap: wrap; gap: 6px; }
.inventory__games .chip-sm { background: none; border: 0; color: var(--fog); cursor: pointer; font: 600 .75rem/1.2 var(--f-text); padding: 6px 10px; }
.inventory__games .chip-sm.is-on { color: var(--bone); background: rgba(204, 204, 255, .1); }
.inventory__empty { padding: 48px 24px; text-align: center; color: var(--fog); }
.inventory__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); }
@media (max-width: 760px) { .inventory__body { grid-template-columns: 1fr; } .inv-detail { order: -1; border-left: 0; border-bottom: 1px solid var(--line); } }
.inv-grid { list-style: none; margin: 0; padding: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: 6px; align-content: start; }
.inv-grid > li[hidden] { display: none; }
.inv-tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 10px; text-decoration: none;
  background: radial-gradient(90% 90% at 50% 40%, color-mix(in srgb, var(--r) 22%, #1d1830), #15111f 80%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r) 55%, transparent), inset 0 -3px 0 var(--r);
  transition: box-shadow .15s, transform .15s; }
.inv-tile:hover { box-shadow: inset 0 0 0 1px var(--r), inset 0 -3px 0 var(--r), 0 0 18px color-mix(in srgb, var(--r) 35%, transparent); }
.inv-tile.is-selected { box-shadow: inset 0 0 0 2px var(--bone), inset 0 -3px 0 var(--r), 0 0 22px color-mix(in srgb, var(--r) 45%, transparent); }
.inv-tile:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.inv-tile img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.inv-tile__ph { font: 700 1.8rem/1 var(--f-display); color: var(--r); opacity: .85; }
.inv-detail { border-left: 1px solid var(--line); background: rgba(8, 6, 15, .35); }
.inv-card { padding: 22px; display: grid; gap: 10px; align-content: start; }
.inv-card[hidden] { display: none; }
.inv-card__art { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 18px; margin-bottom: 6px;
  background: radial-gradient(70% 80% at 50% 45%, color-mix(in srgb, var(--r) 38%, transparent), transparent 75%), #120e1c;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r) 40%, transparent); }
.inv-card__art img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55)); }
.inv-card__art .inv-tile__ph { font-size: 4rem; }
.inv-card__name { font: 700 var(--fs-3)/1.2 var(--f-display); color: var(--r); overflow-wrap: anywhere; }
.inv-card__type { font-size: .875rem; color: var(--fog); }
.inv-card__rarity { color: var(--r); font-weight: 600; }
.inv-card__desc { color: var(--bone); font-size: .9375rem; line-height: 1.55; white-space: normal; }
.inv-card__meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 6px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .875rem; }
.inv-card__meta dt { color: var(--fog); }
.inv-card__meta dd { margin: 0; overflow-wrap: anywhere; }
.inv-card__meta code { font: 500 .85em ui-monospace, Menlo, Consolas, monospace; color: var(--lagoon); }
.inv-card--preview { padding: 0; }

/* ---------- Карточка пользователя, предметы в админке ---------- */
.profile-head { display: flex; align-items: center; gap: 24px; }
.profile-head .h2 { margin: 0 0 8px; overflow-wrap: anywhere; }
.profile-head__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.profile-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.profile-grid .kv code { white-space: nowrap; }
.rarity-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rarity-sum li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; box-shadow: inset 3px 0 0 var(--r); background: rgba(204, 204, 255, .03); }
.rarity-sum span { color: var(--r); font-weight: 600; }
.grant-form__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.grant-form__row .field { flex: 1 1 220px; }
.grant-form__row .field--qty, .filters .field--qty { flex: 0 0 110px; }
.grant-form select, .grant-form input[type=text], .grant-form input[type=number], .panel--accent textarea {
  width: 100%; padding: 12px 14px; background: var(--night); border: 1px solid var(--line); color: var(--bone); font: inherit; }
.grant-form select { appearance: none; padding-right: 36px; background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2377DDEE' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; }
details.panel > summary { cursor: pointer; list-style: none; }
details.panel > summary::-webkit-details-marker { display: none; }
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.subtabs a { padding: 8px 14px; text-decoration: none; font-weight: 500; color: var(--fog); box-shadow: inset 0 0 0 1px var(--line); }
.subtabs a[aria-current] { color: var(--bone); background: rgba(204, 204, 255, .08); box-shadow: inset 0 0 0 1px var(--violet); }
.item-thumb { display: grid; place-items: center; width: 48px; height: 48px; padding: 4px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--r) 25%, #1d1830), #15111f 80%); box-shadow: inset 0 -2px 0 var(--r); }
.item-thumb img { width: 100%; height: 100%; object-fit: contain; }
.item-thumb span { font: 700 1rem var(--f-display); color: var(--r); }
.items-table td:first-child { width: 64px; }
.rarity { color: var(--r); font-weight: 600; font-size: .875rem; white-space: nowrap; }
.color-cell { display: inline-flex; align-items: center; gap: 10px; }
.color-cell input[type=color], .filters input[type=color] { width: 44px; height: 34px; padding: 2px; background: var(--night); border: 1px solid var(--line); cursor: pointer; }
.cell-input { width: 100%; min-width: 140px; padding: 7px 10px; background: var(--night); border: 1px solid var(--line); color: var(--bone); font: inherit; }
.cell-input--num { min-width: 0; width: 80px; }
.who__link { text-decoration: none; }
.table tr.row-link { cursor: pointer; }
.table tr.row-link:hover { background: rgba(170, 34, 221, .07); }
.table tr.row-link:hover .who__link b { color: var(--lagoon); }
.who__link:hover b { color: var(--lagoon); }
.api-doc p { color: var(--fog); }
.api-doc b { color: var(--bone); }
.api-doc pre { margin: 0; padding: 12px 14px; background: var(--abyss); overflow-x: auto; color: var(--lagoon); }
.secret { display: block; padding: 14px; background: var(--abyss); color: var(--lagoon); font: 600 1rem/1.4 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; cursor: copy; box-shadow: inset 0 0 0 1px var(--line); }
.secret.is-copied { box-shadow: inset 0 0 0 1px #8EE6B0; }
.secret.is-copied::after { content: "  ✓ скопировано"; color: #8EE6B0; font-family: var(--f-text); font-weight: 500; }


/* ---------- Цвета бренда (пресс-кит) и пятна-брызги ---------- */
.palette { margin-top: 2.5em; }
.palette > .muted { max-width: 40em; margin: -.25em 0 28px; }
.palette__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; align-items: end; }
@media (max-width: 760px) { .palette__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.swatch { display: grid; gap: 4px; align-content: end; }
.swatch__btn { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0; margin-bottom: 10px; background: none; border: 0; cursor: copy; position: relative;
  transition: transform .25s var(--ease), filter .25s; }
.swatch--md .swatch__btn { width: 72%; }
.swatch__spot { width: 100%; height: 100%; background: var(--c); -webkit-mask: var(--spot) center / contain no-repeat; mask: var(--spot) center / contain no-repeat; }
.swatch__btn:hover { transform: scale(1.06) rotate(-3deg); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--c) 55%, transparent)); }
.swatch__btn:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 4px; }
.swatch__btn::after, .palette__grad::after { content: attr(data-copied) " ✓"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 6px 10px; white-space: nowrap;
  background: rgba(8, 6, 15, .85); color: var(--bone); font: 600 .8125rem/1 var(--f-text); opacity: 0; pointer-events: none; transition: opacity .2s; }
.is-copied::after { opacity: 1; }
.swatch__name { font-weight: 600; }
.swatch__hex { font: 600 1rem/1.3 ui-monospace, Menlo, Consolas, monospace; color: var(--c); }
.swatch:has(.swatch__btn[data-copy="#7700CC"]) .swatch__hex { color: color-mix(in srgb, var(--c) 55%, var(--bone)); }   /* тёмный фиолетовый на тёмном фоне — читаемее */
.swatch__rgb { font: .8125rem ui-monospace, Menlo, Consolas, monospace; color: var(--fog); }
.swatch__use { font-size: .875rem; color: var(--fog); line-height: 1.45; margin-top: 4px; }
.palette__grad { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; width: 100%; min-height: 96px; padding: 16px 18px; margin-bottom: 24px;
  background: linear-gradient(var(--angle), var(--from), var(--to)); border: 0; color: var(--abyss); text-align: left; cursor: copy;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.palette__grad-label { font: 700 1rem/1.2 var(--f-display); }
.palette__grad code { font: 600 .8125rem ui-monospace, Menlo, Consolas, monospace; opacity: .85; }
.palette__grad:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

.has-splash { position: relative; isolation: isolate; }
/* Пятна не обрезаются границами секции: выходят за них, а горизонтальную прокрутку гасит overflow-x: clip на body */
html, body { overflow-x: clip; }
.splash { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.splash span { position: absolute; aspect-ratio: 1; max-width: 60vw; background: var(--c); opacity: .2; translate: -50% -50%;
  -webkit-mask: var(--spot) center / contain no-repeat; mask: var(--spot) center / contain no-repeat; filter: blur(.5px); }
@media (prefers-reduced-motion: no-preference) {
  .splash span { animation: splash-in 1.2s var(--ease) both; }
  @keyframes splash-in { from { opacity: 0; scale: .85; } }
}

.dev-hint { font: 500 12px/1.4 ui-monospace, Menlo, Consolas, monospace; color: color-mix(in srgb, var(--game-2) 85%, var(--bone)); background: rgba(8,6,15,.75); padding: 6px 10px; border: 1px dashed color-mix(in srgb, var(--game) 50%, transparent); }
.dev-hint--hero { position: absolute; right: var(--gutter); top: 88px; z-index: 2; }

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

/* Мобильный первый экран: прицел — над заголовком */
@media (max-width: 700px) {
  .hero__reticle { width: 118vw; right: -34vw; top: 64px; translate: 0 0; opacity: .85; }
  .hero__body { padding-top: 62vw; }
  .hero--home .hero__body { padding-top: 104px; }
}

/* ---------- Плавные переходы между страницами ----------
   Обычные переходы по ссылкам, но браузер (Chrome/Edge 126+, Safari 18.2+) делает между страницами
   анимацию: содержимое мягко растворяется, шапка стоит на месте, линия под пунктом меню переезжает.
   В остальных браузерах — обычный переход. Убрать — удалить этот блок. */
@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }
::view-transition-group(nav-ink) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, .8, .25, 1); }
::view-transition-old(root) { animation: vt-out .22s ease-in both; }
::view-transition-new(root) { animation: vt-in .32s ease-out .06s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@media (max-width: 940px) { .nav-ink { display: none; } }