/* NOCAP GTA — main styles */

/* ---------- 1. Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--header-h) + 10px);
  -webkit-text-size-adjust: 100%;
  /* Подложка: body прозрачный — иначе чёрный фон перекрывает WebGL-canvas */
  background: #000;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Desktop: snap только через JS — без конфликта с native scroll-snap */
html.js-snap-scroll {
  scroll-snap-type: none !important;
}

html.js-snap-scroll .hero-panel,
html.js-snap-scroll .coin,
html.js-snap-scroll .fleet,
html.js-snap-scroll .apply,
html.js-snap-scroll .community {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

html::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (pointer: coarse), (hover: none) {
  html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
  }

  .hero-panel,
  .coin,
  .fleet,
  .apply,
  .community {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

body {
  margin: 0;
  background: transparent;
  color: #fff;
  font-family: "proxima-nova", "Proxima Nova", "Inter", "Manrope", system-ui,
    -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Контент поверх canvas (0) и виньетки (1); клики «сквозь» пустоту hero — на canvas (вращение 3D) */
main {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

main * {
  pointer-events: auto;
}

main .hero,
main .hero__orbit,
main .hero__rails,
main .hero__panels,
main .hero-panel {
  pointer-events: none;
}

main .rail--chapters {
  pointer-events: auto;
}

body.is-gate-open .gate-site-layer--chrome {
  opacity: 0;
  pointer-events: none;
}

body.is-gate-open .header.gate-site-layer--chrome {
  opacity: 0;
}

/* ---------- Вход на сайт: одна длительность, всё одновременно ---------- */
:root {
  --site-enter-duration: 1.4s;
  --site-enter-ease: cubic-bezier(0.22, 0.68, 0.2, 1);
}

body.is-gate-open {
  overflow: hidden;
}

body.is-gate-open .gate-site-layer--scene {
  visibility: visible;
  pointer-events: none;
}

body.is-gate-open .bg-canvas,
body.is-gate-open .grain,
body.is-gate-open .bg-vignette {
  opacity: 0;
}

body.is-gate-open .header.gate-site-layer--chrome,
body.is-gate-open main.gate-site-layer--chrome,
body.is-gate-open .floaters {
  opacity: 0;
  pointer-events: none;
}

body.is-gate-open .hero-social {
  pointer-events: none;
}

body.is-gate-open .bg-canvas {
  pointer-events: none;
}

body.is-site-enter .bg-canvas,
body.is-site-enter .grain,
body.is-site-enter .bg-vignette {
  opacity: 1;
  transition: opacity var(--site-enter-duration) var(--site-enter-ease);
}

body.is-site-enter .gate-site-layer--scene {
  visibility: visible;
  pointer-events: none;
}

body.is-site-enter .header.gate-site-layer--chrome {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--site-enter-duration) var(--site-enter-ease);
}

body.is-site-enter main.gate-site-layer--chrome {
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--site-enter-duration) var(--site-enter-ease);
}

body.is-site-enter .floaters {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--site-enter-duration) var(--site-enter-ease);
}

body.is-site-enter .bg-canvas,
body.is-on-site .bg-canvas,
body.is-revealing .bg-canvas {
  pointer-events: auto;
  cursor: grab;
}

body.is-on-site .bg-canvas,
body.is-on-site .grain,
body.is-on-site .bg-vignette,
body.is-on-site .header.gate-site-layer--chrome,
body.is-on-site main.gate-site-layer--chrome,
body.is-on-site .floaters {
  opacity: 1;
}

/* ---------- SITE GATE (выбор направления) ---------- */
.site-gate {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 1.65s cubic-bezier(0.22, 0.68, 0.2, 1),
    visibility 0s linear 1.65s;
}

.site-gate.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition:
    opacity 1.1s cubic-bezier(0.22, 0.68, 0.2, 1),
    visibility 0s;
}

.site-gate.is-leaving {
  pointer-events: none;
  opacity: 1;
}

body.is-site-enter .site-gate.is-leaving .site-gate__aurora,
body.is-site-enter .site-gate.is-leaving .site-gate__dust,
body.is-site-enter .site-gate.is-leaving .site-gate__stars,
body.is-site-enter .site-gate.is-leaving .site-gate__vignette {
  opacity: 0;
  transition: opacity var(--site-enter-duration) var(--site-enter-ease);
}

.site-gate.is-leaving .site-gate__stars {
  transition: opacity var(--site-enter-duration) var(--site-enter-ease);
}

.site-gate.is-done {
  display: none;
}

.site-gate__aurora {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background:
    radial-gradient(ellipse 55% 42% at 18% 62%, rgba(88, 120, 255, 0.22) 0%, transparent 68%),
    radial-gradient(ellipse 48% 38% at 82% 28%, rgba(180, 120, 255, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 52% 88%, rgba(60, 200, 220, 0.1) 0%, transparent 72%);
  filter: blur(42px);
  animation: gateAuroraShift 18s ease-in-out infinite alternate;
}

@keyframes gateAuroraShift {
  from {
    transform: translate3d(-2%, 0, 0) scale(1);
  }
  to {
    transform: translate3d(3%, -2%, 0) scale(1.08);
  }
}

.site-gate__dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 14%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 78%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 32%, rgba(255, 255, 255, 0.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 62%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 61% 18%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 44%, rgba(255, 255, 255, 0.42) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 86% 72%, rgba(255, 255, 255, 0.58) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 28%, rgba(255, 255, 255, 0.38) 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 48%, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 55% 88%, rgba(255, 255, 255, 0.52) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 56%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 8%, rgba(255, 255, 255, 0.36) 50%, transparent 51%);
  background-size: 280px 280px, 320px 320px, 260px 260px, 300px 300px, 340px 340px, 290px 290px,
    310px 310px, 270px 270px, 330px 330px, 300px 300px, 280px 280px, 350px 350px;
  animation: gateDustDrift 48s linear infinite;
}

@keyframes gateDustDrift {
  from {
    background-position: 0 0, 40px 60px, 80px 20px, 120px 90px, 20px 120px, 60px 40px, 100px 70px,
      140px 10px, 30px 80px, 70px 140px, 110px 50px, 150px 100px;
  }
  to {
    background-position: 280px 280px, 360px 380px, 340px 280px, 420px 390px, 320px 400px, 350px 320px,
      410px 370px, 410px 280px, 360px 380px, 380px 420px, 390px 330px, 500px 450px;
  }
}

.site-gate__stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transform: scale(1);
  transition: transform 1.1s cubic-bezier(0.22, 0.68, 0.2, 1);
}

.site-gate__stars {
  opacity: 1;
}

.site-gate.is-leaving .site-gate__stars {
  transform: none;
}

.site-gate__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(ellipse 58% 54% at 50% 46%, transparent 0%, rgba(0, 0, 0, 0.2) 64%, rgba(0, 0, 0, 0.58) 100%),
    radial-gradient(ellipse 90% 32% at 50% 100%, rgba(0, 0, 0, 0.2) 0%, transparent 68%);
  transition: opacity var(--site-enter-duration) var(--site-enter-ease);
}

.site-gate.is-visible:not(.is-leaving) .site-gate__vignette {
  animation: gateVignetteDrift 24s ease-in-out infinite alternate;
}

.site-gate.is-leaving .site-gate__vignette {
  animation: none;
  opacity: 1;
}

body.is-site-enter .site-gate.is-leaving .site-gate__vignette {
  opacity: 0;
}

@keyframes gateVignetteDrift {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.06) translate3d(1.5%, -1%, 0);
  }
}

.site-gate__panel {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  width: min(980px, calc(100vw - (var(--gutter) * 2)));
  --gate-tilt-x: 0deg;
  --gate-tilt-y: 0deg;
  --gate-shift-x: 0px;
  --gate-shift-y: 0px;
  opacity: 0;
  transform: translate3d(0, 18px, 0) perspective(900px) rotateX(var(--gate-tilt-x)) rotateY(var(--gate-tilt-y));
}

.site-gate.is-visible .site-gate__panel {
  animation: gatePanelIn 0.88s cubic-bezier(0.22, 0.68, 0.2, 1) forwards;
}

.site-gate.is-visible:not(.is-leaving) .site-gate__panel {
  transition: transform 0.65s cubic-bezier(0.22, 0.68, 0.2, 1);
}

@keyframes gatePanelIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) perspective(900px) rotateX(var(--gate-tilt-x))
      rotateY(var(--gate-tilt-y));
  }
  to {
    opacity: 1;
    transform: translate3d(var(--gate-shift-x), var(--gate-shift-y), 0) perspective(900px)
      rotateX(var(--gate-tilt-x)) rotateY(var(--gate-tilt-y));
  }
}

body.is-site-enter .site-gate.is-leaving .site-gate__panel {
  animation: none;
  opacity: 0;
  transform: translate3d(0, -14px, 0) perspective(900px) scale(0.98);
  transition:
    opacity var(--site-enter-duration) var(--site-enter-ease),
    transform var(--site-enter-duration) var(--site-enter-ease);
}

body.is-site-enter .site-gate.is-leaving .site-gate__dock .intro-dock__cell {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition:
    opacity var(--site-enter-duration) var(--site-enter-ease),
    transform var(--site-enter-duration) var(--site-enter-ease);
}

/* Во время входа на сайт (и после) ячейки дока исчезают (opacity:0), но их
   хит-бокс остаётся: .intro-dock__cell имеют pointer-events:auto и лежат поверх
   кнопок «Состав»/«В архив» в Hero — тап попадает в невидимую ячейку, и кнопка
   «не реагирует». Полностью гасим интерактивность дока сразу при is-site-enter
   и держим выключенной на is-on-site (до .is-done, где гейт уже display:none). */
body.is-site-enter .site-gate .intro-dock__cell,
body.is-on-site .site-gate .intro-dock__cell,
body.is-site-enter .site-gate__dock,
body.is-on-site .site-gate__dock {
  pointer-events: none !important;
}

.site-gate__dock .intro-dock__cell {
  opacity: 1;
  transform: none;
}

.site-gate.is-visible .site-gate__dock .intro-dock__cell.is-unavailable {
  opacity: 0.52;
}

/* Gate-док: три крупные HUD-карточки */
.site-gate__dock.intro-dock {
  gap: clamp(10px, 1.6vw, 16px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.site-gate__dock.intro-dock::before {
  display: none;
}

.site-gate__dock .intro-dock__cell {
  min-height: clamp(108px, 15vh, 148px);
  padding: clamp(18px, 2.4vw, 28px) clamp(14px, 2vw, 22px);
  gap: clamp(6px, 0.8vh, 10px);
  border-radius: calc(var(--intro-hud-radius) + 4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%),
    rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 18px 48px rgba(0, 0, 0, 0.55);
  transition:
    transform var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    background var(--t-mid) var(--ease);
}

.site-gate__dock .intro-dock__cell:not(:last-child) {
  border-right: 0;
}

.site-gate__dock .intro-dock__hud {
  position: absolute;
  inset: clamp(10px, 1.4vw, 14px);
  pointer-events: none;
  z-index: 2;
}

.site-gate__dock .intro-dock__hud span {
  position: absolute;
  width: clamp(14px, 1.8vw, 18px);
  height: clamp(14px, 1.8vw, 18px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.site-gate__dock .intro-dock__hud span:nth-child(1) {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.site-gate__dock .intro-dock__hud span:nth-child(2) {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
}

.site-gate__dock .intro-dock__hud span:nth-child(3) {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
}

.site-gate__dock .intro-dock__hud span:nth-child(4) {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

.site-gate__dock .intro-dock__brand {
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.38em;
  color: rgba(255, 255, 255, 0.34);
}

.site-gate__dock .intro-dock__name {
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
}

.site-gate__dock .intro-dock__soon {
  position: absolute;
  top: clamp(12px, 1.6vw, 16px);
  right: clamp(12px, 1.6vw, 16px);
  z-index: 3;
}

.site-gate__dock .intro-dock__cell.is-unavailable {
  pointer-events: auto;
  cursor: not-allowed;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.02) 0%, transparent 38%),
    rgba(0, 0, 0, 0.82);
  border-color: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
  transition: none;
}

.site-gate__dock .intro-dock__cell.is-unavailable:hover,
.site-gate__dock .intro-dock__cell.is-unavailable:focus-visible {
  background: rgba(0, 0, 0, 0.18);
  outline: none;
  transform: none;
}

.site-gate__dock .intro-dock__cell.is-unavailable:hover .intro-dock__brand,
.site-gate__dock .intro-dock__cell.is-unavailable:hover .intro-dock__name {
  color: rgba(255, 255, 255, 0.42);
}

/* NOCAP GTA — активная карточка крупнее соседей */
#gateEnterGta {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(124px, 17vh, 168px);
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 52%),
    rgba(4, 6, 12, 0.88);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 36px rgba(110, 150, 255, 0.12),
    0 22px 56px rgba(0, 0, 0, 0.62);
  transition:
    transform 0.45s cubic-bezier(0.22, 0.68, 0.2, 1),
    box-shadow 1.4s cubic-bezier(0.22, 0.68, 0.2, 1),
    border-color 1.4s cubic-bezier(0.22, 0.68, 0.2, 1);
}

#gateEnterGta .intro-dock__name {
  font-size: clamp(26px, 3.8vw, 38px);
  letter-spacing: 0.2em;
  color: #fff;
}

#gateEnterGta .intro-dock__brand {
  color: rgba(255, 255, 255, 0.45);
}

.gate-gta-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 88% 72% at 50% 0%,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(110, 140, 220, 0.08) 42%,
    transparent 72%
  );
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.4s cubic-bezier(0.22, 0.68, 0.2, 1);
}

#gateEnterGta::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
  transition:
    opacity 1.4s cubic-bezier(0.22, 0.68, 0.2, 1),
    box-shadow 1.4s cubic-bezier(0.22, 0.68, 0.2, 1);
}

#gateEnterGta .intro-dock__brand,
#gateEnterGta .intro-dock__name {
  position: relative;
  z-index: 1;
}

#gateEnterGta.is-pressed {
  transform: scale(0.98);
}

.site-gate.is-visible #gateEnterGta:not(.is-pressed):hover,
.site-gate.is-visible #gateEnterGta:not(.is-pressed):focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, transparent 52%),
    rgba(8, 10, 18, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 48px rgba(120, 165, 255, 0.18),
    0 28px 64px rgba(0, 0, 0, 0.65);
}

.site-gate.is-visible #gateEnterGta:not(.is-pressed):hover .gate-gta-glow,
.site-gate.is-visible #gateEnterGta:not(.is-pressed):focus-visible .gate-gta-glow {
  opacity: 0.88;
}

.site-gate.is-visible #gateEnterGta:not(.is-pressed):hover::after,
.site-gate.is-visible #gateEnterGta:not(.is-pressed):focus-visible::after {
  opacity: 0.95;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
}

.intro-dock__cell.is-unavailable {
  cursor: not-allowed;
  user-select: none;
}

.site-gate__dock .intro-dock__cell.is-unavailable .intro-dock__brand,
.site-gate__dock .intro-dock__cell.is-unavailable .intro-dock__name {
  color: rgba(255, 255, 255, 0.32);
}

.intro-dock__cell.is-unavailable .intro-dock__brand,
.intro-dock__cell.is-unavailable .intro-dock__name {
  color: rgba(255, 255, 255, 0.38);
}

.intro-dock__soon:not(.badge) {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

button.intro-dock__cell {
  font: inherit;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}


.hero-social.is-interactive {
  pointer-events: auto;
}

/* Только колонка с текстом ловит клики — пустое поле hero доходит до canvas (вращение 3D) */
main .hero-panel__inner {
  pointer-events: none;
}

main .hero-panel__inner > .chapter,
main .hero-panel__inner > .chapter * {
  pointer-events: auto;
}

main .hero-panel__inner > .chapter {
  width: fit-content;
  max-width: min(720px, 100%);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--glass-border);
  background: var(--glass-highlight), var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

::selection {
  background: #fff;
  color: #000;
}

/* ---------- 2. Tokens ---------- */
:root {
  --c-black: #000;
  --c-white: #fff;
  --c-1: #f5f5f5;
  --c-2: #c9c9c9;
  --c-3: #8a8a8a;
  --c-4: #4d4d4d;
  --c-5: #1f1f1f;
  --c-6: #0a0a0a;

  --container: 1280px;
  /* 3D-часть: шапка + hero (блоки /01–/03) — одна линия от краёв монитора.
     Пропорционально ширине: 11.72vw = 300px на 2560 (как в дизайне),
     меньше на узких экранах, чтобы блоки не «комкались». */
  --scene-pad-inline: clamp(24px, 11.72vw, 300px);
  /* 2D-секции (Orlando, Fleet, footer) — те же 300px от краёв, что у 3D */
  --coin-pad-inline: var(--scene-pad-inline);
  --apply-pad-inline: var(--scene-pad-inline);
  --community-pad-inline: var(--scene-pad-inline);
  --fleet-pad-inline: var(--scene-pad-inline);
  --footer-pad-inline: var(--scene-pad-inline);
  --gutter: 24px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 200ms;
  --t-mid: 400ms;
  --t-slow: 700ms;
  --t-xslow: 1200ms;

  /* Единый множитель для фиксированных px-элементов (шапка, иконки, HUD):
     1 на 2560 (дизайн), меньше на узких — чтобы пропорции совпадали с 2560,
     а не «торчали» крупнее. Значение проставляет JS (UiScale) по ширине;
     дефолт 1 — корректный фолбэк до гидрации и на широких экранах. */
  --ui-scale: 1;

  --header-h: calc(76px * var(--ui-scale));
  /* Единое скругление HUD-плашек (соцсети + gate) */
  --intro-hud-radius: 18px;
  /* Шапка: отступ слева/справа (логотип + «Войти» — см. .header .container.header__inner). */
  --header-pad-inline: var(--scene-pad-inline);
  /* Шапка: сверху и снизу внутри полосы header. */
  --header-pad-block: 0px;

  /* Hero chapter /01–/03: та же линия, что шапка */
  --hero-chapter-pad-x: var(--scene-pad-inline);

  /* Меню глав слева (FUTURE / ARCHIVE …) — отдельно от шапки и текста */
  --rail-pad-left: clamp(16px, 3vw, 48px);
  --hero-chapter-rail-left: var(--rail-pad-left);
  /* Отступ сверху: сразу под шапкой (меньше = выше, больше = ниже) */
  --hero-chapter-rail-top: calc(var(--header-h) + 16px);
  /* Расстояние между вертикальной линией и подписями (линия «правее» = больше gap) */
  --hero-chapter-rail-line-gap: 22px;

  /* Flyout «Состав» / «В архив»: 0 = hero виден, 1 = overlay открыт */
  --flyout-chapter-hide: 0;
  --flyout-ui-show: 0;

  /* Liquid glass */
  --glass-blur: blur(22px) saturate(165%);
  --glass-blur-light: blur(14px) saturate(150%);
  --glass-blur-heavy: blur(36px) saturate(175%);
  --glass-fill: rgba(255, 255, 255, 0.055);
  --glass-fill-strong: rgba(255, 255, 255, 0.09);
  --glass-fill-dark: rgba(0, 0, 0, 0.42);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-border-bright: rgba(255, 255, 255, 0.26);
  --glass-highlight: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.03) 36%,
    rgba(255, 255, 255, 0) 52%,
    rgba(255, 255, 255, 0.07) 100%
  );
  --glass-shadow: 0 14px 48px rgba(0, 0, 0, 0.32);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --section-glass: rgba(0, 0, 0, 0.58);

  /* Блоки 4–6 (Orlando / Coin / Garage): вертикальный ритм от высоты экрана */
  --snap-sec-pad-y: clamp(24px, 4.5vh, 56px);
  --snap-frame-pad: clamp(16px, 2.2vh, 32px);
  /* Заголовки секций Coin/Garage/Apply/Community (.coin__title, .section-head__title).
     Были визуально ~на треть крупнее эталона и «давили» контент — уменьшено,
     чтобы вернуть воздух и лёгкость как на референсе. */
  --snap-title: clamp(26px, 4.3vh, 64px);
  --snap-head-gap: clamp(12px, 1.8vh, 20px);
  --snap-head-mb: clamp(16px, 2.6vh, 34px);
  --snap-block-mt: clamp(18px, 2.8vh, 36px);
  --snap-join-mt: clamp(14px, 2.2vh, 24px);
  --snap-join-pt: clamp(14px, 2.2vh, 24px);
  --snap-fleet-scene: clamp(200px, 32vh, 400px);

  /* Apply · readable glass (light text on dark surfaces) */
  --apply-radius: clamp(18px, 2.2vw, 26px);
  --apply-radius-sm: clamp(10px, 1.2vw, 14px);
  --apply-ease: cubic-bezier(0.22, 0.68, 0.18, 1);
  --apply-ink: #fff;
  --apply-ink-soft: rgba(255, 255, 255, 0.88);
  --apply-ink-muted: rgba(255, 255, 255, 0.72);
  --apply-ink-faint: rgba(255, 255, 255, 0.56);
  --apply-ink-ghost: rgba(255, 255, 255, 0.42);
  --apply-surface: rgba(0, 0, 0, 0.38);
  --apply-surface-soft: rgba(0, 0, 0, 0.32);
  --apply-surface-strong: rgba(0, 0, 0, 0.46);
  --apply-surface-focus: rgba(0, 0, 0, 0.52);
  --apply-surface-light: rgba(255, 255, 255, 0.07);
  --apply-surface-light-strong: rgba(255, 255, 255, 0.11);
  --apply-border: rgba(255, 255, 255, 0.22);
  --apply-border-soft: rgba(255, 255, 255, 0.14);
  --apply-border-strong: rgba(255, 255, 255, 0.34);
  --apply-border-focus: rgba(255, 255, 255, 0.5);
  --apply-glow: rgba(255, 255, 255, 0.06);
  --apply-glow-strong: rgba(255, 255, 255, 0.1);
  --apply-shadow: rgba(0, 0, 0, 0.38);
  --apply-section-bg: rgba(0, 0, 0, 0.68);
  --apply-pearl: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 42%,
    rgba(255, 255, 255, 0) 100%
  );
  --apply-pearl-soft: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
}

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 4. Зерно (cinema grain) ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  animation: grainShift 1.6s steps(6) infinite;
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -1%); }
  60% { transform: translate(-1%, 3%); }
  80% { transform: translate(3%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- 5. 3D canvas (фоновая сцена) ----------
   Canvas НЕ под body: иначе background:#000 перекрывает отрицательный z-index
   и 3D не видно вообще. Слой: canvas(0) → vignette(1) → контент main(2+) */
.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: block;
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
}

.bg-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 58% 54% at 50% 46%, transparent 0%, rgba(0, 0, 0, 0.22) 64%, rgba(0, 0, 0, 0.62) 100%),
    radial-gradient(ellipse 90% 32% at 50% 100%, rgba(0, 0, 0, 0.22) 0%, transparent 68%);
  transition: opacity var(--site-enter-duration) var(--site-enter-ease);
}

/* ---------- 6. PRELOADER ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.68, 0.2, 1),
    visibility 0s linear 0.9s;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.preloader__logo {
  width: clamp(128px, 22vw, 196px);
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(0.988) translateY(8px);
}

.preloader__line {
  position: relative;
  display: block;
  width: clamp(180px, 38vw, 320px);
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  opacity: 0;
}

.preloader__line-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: inherit;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.55);
  transform: scaleX(0);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
}

.preloader.is-active .preloader__logo {
  animation: preloaderLogoIn 0.75s cubic-bezier(0.22, 0.68, 0.2, 1) forwards;
}

.preloader.is-active .preloader__line {
  animation: preloaderLineTrackIn 0.45s cubic-bezier(0.22, 0.68, 0.2, 1) 0.18s forwards;
}

.preloader.is-active .preloader__line-fill {
  animation: preloaderFillCreep 2.35s cubic-bezier(0.37, 0, 0.14, 1) 0.25s forwards;
}

@keyframes preloaderLogoIn {
  from {
    opacity: 0;
    transform: scale(0.988) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes preloaderLineTrackIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes preloaderFillCreep {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.preloader.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.preloader.is-leaving .preloader__logo {
  animation: none;
  opacity: 0;
  transform: scale(1.008) translateY(-5px);
  transition:
    opacity 0.72s cubic-bezier(0.22, 0.68, 0.2, 1),
    transform 0.72s cubic-bezier(0.22, 0.68, 0.2, 1);
}

.preloader.is-leaving .preloader__line {
  animation: none;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 0.68, 0.2, 1);
}

.preloader.is-leaving .preloader__line-fill {
  animation-play-state: paused;
}

.preloader.is-done {
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }

  .preloader__logo,
  .preloader__line,
  .preloader__line-fill {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
  }

  .preloader__line-fill {
    transform: scaleX(1);
  }

  .preloader.is-leaving .preloader__logo,
  .preloader.is-leaving .preloader__line,
  .preloader.is-leaving .preloader__line-fill,
  .preloader.is-done .preloader__logo,
  .preloader.is-done .preloader__line,
  .preloader.is-done .preloader__line-fill {
    opacity: 0;
  }
}

body.is-loading {
  overflow: hidden;
}

body.is-loading .header,
body.is-gate-open .header {
  opacity: 0;
  transform: none;
  pointer-events: none;
}

body.is-revealing .header,
body.is-revealing main.gate-site-layer--chrome,
body.is-revealing .floaters {
  opacity: 1;
  transform: none;
}

/* ---------- 7. Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    backdrop-filter var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    transform var(--t-slow) var(--ease),
    opacity var(--t-slow) var(--ease);
}

.header.is-stuck {
  background: rgba(0, 0, 0, 0.52);
  border-bottom-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset), 0 8px 32px rgba(0, 0, 0, 0.24);
}

.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(24px * var(--ui-scale));
}

.header .container.header__inner {
  /* Без этого шапка снова как .container: узкая колонка по центру, отступ к краю экрана почти не меняется. */
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: var(--header-pad-inline);
  padding-block: var(--header-pad-block);
}


.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo__img {
  height: calc(36px * var(--ui-scale));
  width: auto;
  display: block;
}

.logo__mark {
  display: inline-flex;
  width: calc(28px * var(--ui-scale));
  height: calc(28px * var(--ui-scale));
  color: #fff;
  transition: transform var(--t-mid) var(--ease);
}

.logo:hover .logo__mark {
  transform: rotate(60deg);
}

.nav {
  justify-self: center;
}

.nav__list {
  display: flex;
  gap: calc(36px * var(--ui-scale));
  align-items: center;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale));
  padding: calc(10px * var(--ui-scale)) 2px;
  /* Слова навигации (dashboard/application/memories/community/mods) — Times New
     Roman по требованию дизайна. Подключается и на главной, и на /mods (обе
     страницы грузят styles.css), поэтому шапки идентичны. Кегль чуть больше:
     у serif-шрифта та же высота читается мельче, чем у Inter. */
  font-family: "Times New Roman", Times, serif;
  font-size: calc(15px * var(--ui-scale));
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--t-fast) var(--ease);
  overflow: hidden;
}

.nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-mid) var(--ease);
}

.nav__link:hover {
  color: #fff;
}

.nav__link:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__link.is-disabled {
  color: rgba(255, 255, 255, 0.42);
  cursor: not-allowed;
}

.nav__link.is-disabled::before {
  display: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: calc(18px * var(--ui-scale));
  padding: 0 calc(7px * var(--ui-scale));
  font-size: calc(9px * var(--ui-scale));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #000;
  background: #fff;
  border-radius: 999px;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

/* ---------- 8. Buttons ---------- */
.btn {
  --btn-pad-x: calc(22px * var(--ui-scale));
  --btn-pad-y: calc(12px * var(--ui-scale));
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale));
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: calc(13px * var(--ui-scale));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  transition:
    transform var(--t-mid) var(--ease),
    background var(--t-mid) var(--ease),
    color var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn__arrow {
  transition: transform var(--t-mid) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translate(2px, -2px);
}

.btn--ghost {
  color: #fff;
  border-color: var(--glass-border-bright);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  box-shadow: var(--glass-inset);
}

.btn--ghost:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.btn--primary {
  background: #fff;
  color: #000;
  border-color: #fff;
  --btn-pad-x: 28px;
  --btn-pad-y: 16px;
}

.btn--primary:hover {
  background: #000;
  color: #fff;
  border-color: #fff;
}

.btn--secondary {
  background: var(--glass-fill);
  color: #fff;
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  box-shadow: var(--glass-inset);
  --btn-pad-x: 28px;
  --btn-pad-y: 16px;
}

.btn--secondary:hover {
  border-color: var(--glass-border-bright);
  background: var(--glass-fill-strong);
}

.btn.is-disabled {
  pointer-events: none;
  opacity: 0.45;
}

/* Burger */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  box-shadow: var(--glass-inset);
}

.burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: #fff;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}

.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  /* Плотный тёмный фон (не полупрозрачный): backdrop-filter поддерживается не
     везде, и без него меню просвечивало, а фон страницы скроллился сквозь него.
     Теперь меню полностью перекрывает фон. Блюр оставляем как украшение. */
  background: rgba(7, 8, 11, 0.985);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border-top: 1px solid var(--glass-border);
  z-index: 90;
  padding: 40px var(--gutter);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    transform var(--t-slow) var(--ease),
    opacity var(--t-mid) var(--ease),
    visibility 0s linear var(--t-slow);
  pointer-events: none;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    transform var(--t-slow) var(--ease),
    opacity var(--t-mid) var(--ease),
    visibility 0s;
  pointer-events: auto;
}

.mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  /* Times New Roman — как в десктопной навигации (.nav__link). */
  font-family: "Times New Roman", Times, serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu a.is-disabled {
  color: rgba(255, 255, 255, 0.4);
}

.mobile-menu__login {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
  /* Цвет текста задаёт сам вариант кнопки: btn--primary («Войти») — чёрный на
     белой заливке, btn--ghost («Выйти») — белый на тёмном стекле. Раньше здесь
     стоял color:#fff !important, из-за которого «Войти» было белым по белому. */
  border: 0 !important;
}

.mobile-menu__auth {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu__user {
  display: none;
}

/* ---------- Header auth ---------- */
.header-auth__btn[hidden] {
  display: none !important;
}

.header-auth__btn {
  --btn-pad-x: 18px;
  --btn-pad-y: 10px;
  font-size: 12px;
}

.mobile-menu__auth[hidden] {
  display: none !important;
}

/* ---------- Auth modal (вход) ---------- */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-mid) var(--ease),
    visibility 0s linear var(--t-mid);
}

.auth-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--t-mid) var(--ease),
    visibility 0s;
}

.auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.auth-modal__dialog {
  position: relative;
  width: min(100%, 420px);
  padding: 36px 32px 32px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: rgba(8, 8, 8, 0.88);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  box-shadow:
    var(--glass-inset),
    0 24px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--t-mid) var(--ease);
}

.auth-modal.is-open .auth-modal__dialog {
  transform: translateY(0) scale(1);
}

.auth-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  transition: background var(--t-fast) var(--ease);
}

.auth-modal__close:hover {
  background: var(--glass-fill-strong);
}

.auth-modal__brand {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.auth-modal__title {
  margin: 0 0 8px;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auth-modal__hint {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.auth-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-field span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.auth-field input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  outline: none;
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.auth-field input:focus {
  border-color: var(--glass-border-bright);
  background: rgba(255, 255, 255, 0.09);
}

.auth-modal__err {
  margin: 0;
  font-size: 13px;
  color: #ff6b6b;
}

.auth-modal__submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.auth-modal__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
}

.auth-modal__tab {
  flex: 1;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.auth-modal__tab.is-active {
  color: #000;
  background: #fff;
}

.auth-modal__panel[hidden] {
  display: none !important;
}

.auth-modal__switch {
  margin: 18px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.auth-modal__link {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-modal__link:hover {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
  #headerLoginBtn,
  #headerLogoutBtn {
    display: none !important;
  }
}

/* ---------- 9. HERO + CHAPTERS (реальный скролл панелей, декор fixed) ---------- */
.hero {
  position: relative;
  z-index: 2;
}

/* Фоновые keyword + HUD — не двигаются со скроллом */
.hero__orbit {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* HUD-уголки */
.hud {
  position: absolute;
  inset: calc(var(--header-h) + 18px) 24px 72px 24px;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.45s var(--ease);
}

/* На контентных секциях угловую рамку Hero убираем — каждая секция
   обрамляется собственными уголками (.coin__hud и т.п.), как в референсе. */
body.is-past-hero .hud {
  opacity: 0;
}

/* Та же логика для рельсы прогресса скролла: на контентных секциях
   её 1px-линия не должна тянуться поверх контента (остаток навигации). */
body.is-past-hero .hero__rails {
  opacity: 0;
}

.hud span {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.hud span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hud span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hud span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hud span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.hero__rails {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  transition: opacity 0.45s var(--ease);
}

.hero__rails-inner {
  display: flex;
  /* Левый рейл глав удалён — единственная оставшаяся рельса прогресса
     прижимается к правому краю (а не «висит» осколком навигации слева). */
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
  padding-top: var(--header-h);
  box-sizing: border-box;
}

.hero__rails-spacer {
  display: none;
}

.hero__panels {
  position: relative;
  z-index: 2;
}

.hero-panel {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 40px) var(--hero-chapter-pad-x) 112px;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: calc(var(--header-h) + 10px);
}

.hero-panel--align-left {
  justify-content: flex-start;
}

.hero-panel--align-right {
  justify-content: flex-end;
}

.hero-panel__inner.container {
  display: flex;
  flex-direction: column;
  gap: calc(22px * var(--ui-scale));
  box-sizing: border-box;
  flex: 0 1 auto;
  width: min(calc(640px * var(--ui-scale)), calc(100vw - 2 * var(--scene-pad-inline)));
  margin-inline: 0;
  padding-inline: 0;
}

.hero-panel--align-left .hero-panel__inner.container {
  text-align: left;
  align-items: flex-start;
}

.hero-panel--align-right .hero-panel__inner.container {
  text-align: right;
  align-items: flex-end;
}

@media (max-width: 720px) {
  .hero-panel--align-left,
  .hero-panel--align-right {
    justify-content: flex-start;
  }

  .hero-panel--align-left .hero-panel__inner.container,
  .hero-panel--align-right .hero-panel__inner.container {
    width: 100%;
    max-width: 100%;
    text-align: left;
    align-items: flex-start;
  }

  .hero-panel--align-right .chapter__cta {
    justify-content: flex-start;
  }
}

.hero-panel.chapter--intro {
  justify-content: center;
}

.hero-panel.chapter--intro:not(.is-active) .hero-panel__inner.container,
.hero-panel.chapter--intro:not(.is-active) .hero-panel__inner--intro.container {
  width: 0;
  max-width: 0;
  min-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  margin: 0;
  gap: 0;
  pointer-events: none;
}

/* Соцсети — только иконки, узкая плашка над WEAR / RACING / GTA */
.hero-social {
  --hero-social-fade: 0;
  --hero-social-cell: 46px;
  position: fixed;
  left: 50%;
  bottom: clamp(102px, calc(14vh + 70px), 210px);
  z-index: 91;
  display: grid;
  grid-template-columns: repeat(4, var(--hero-social-cell));
  width: max-content;
  max-width: calc(100vw - (var(--gutter) * 2));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--intro-hud-radius);
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 36px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: translateX(-50%) translate3d(0, calc((1 - var(--hero-social-fade)) * 8px), 0);
  opacity: var(--hero-social-fade);
  pointer-events: none;
  will-change: opacity, transform;
}

.hero-social__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hero-social-cell);
  height: var(--hero-social-cell);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition:
    background var(--t-mid) var(--ease),
    color var(--t-mid) var(--ease),
    transform var(--t-fast) var(--ease);
}

.hero-social__link:last-child {
  border-right: 0;
}

.hero-social__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.hero-social__link:active {
  transform: scale(0.94);
}

.hero-social__link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: -2px;
  z-index: 1;
}

.hero-social__link svg {
  display: block;
  width: 18px;
  height: 18px;
  opacity: 0.92;
}

body.is-loading .hero-social {
  pointer-events: none;
}

@media (max-width: 720px) {
  .hero-social {
    --hero-social-cell: 42px;
    bottom: clamp(90px, calc(12vh + 58px), 168px);
  }

  .hero-social__link svg {
    width: 17px;
    height: 17px;
  }
}

/* HUD-док (gate + общие стили ячеек) */
.intro-dock {
  position: relative;
  display: grid;
  /* Четыре направления в ряд: WEAR · GTA · RACING · POIZON. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--intro-hud-radius);
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 36px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.intro-dock__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  padding: 12px clamp(10px, 2vw, 18px);
  text-align: center;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition:
    background var(--t-mid) var(--ease),
    color var(--t-mid) var(--ease);
}

.intro-dock__cell:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.intro-dock__cell:hover {
  background: rgba(255, 255, 255, 0.07);
}

.intro-dock__cell:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: -2px;
}

.intro-dock__brand {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.intro-dock__name {
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.1;
}

.intro-dock__cell:hover .intro-dock__name,
.intro-dock__cell:hover .intro-dock__brand {
  color: #fff;
}

/* Текущий раздел (этот сайт) */
.intro-dock__cell--here {
  background: rgba(255, 255, 255, 0.06);
}

.intro-dock__cell--here:not(#gateEnterGta)::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
}

.intro-dock__cell--here .intro-dock__name {
  color: #fff;
}

@media (max-width: 720px) {
  .site-gate__panel {
    width: min(520px, calc(100vw - 24px));
  }

  /* Четыре направления в один ряд на узком экране тесные — раскладываем 2×2. */
  .site-gate__dock.intro-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-gate__dock .intro-dock__cell {
    min-height: 96px;
    padding: 16px 12px;
  }

  #gateEnterGta {
    min-height: 108px;
  }

  .site-gate__dock .intro-dock__name {
    font-size: 20px;
    letter-spacing: 0.14em;
  }

  #gateEnterGta .intro-dock__name {
    font-size: 22px;
  }

  .intro-dock__cell {
    min-height: 52px;
    padding: 10px 8px;
  }

  .intro-dock__brand {
    font-size: 8px;
    letter-spacing: 0.28em;
  }

  .intro-dock__name {
    font-size: 11px;
    letter-spacing: 0.14em;
  }
}

@media (max-width: 520px) {
  .site-gate__dock.intro-dock {
    grid-template-columns: 1fr;
  }

  .site-gate__dock .intro-dock__cell,
  #gateEnterGta {
    min-height: 88px;
  }

  #gateEnterGta {
    min-height: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-gate__aurora,
  .site-gate__dust {
    animation: none;
  }

  .site-gate__vignette {
    animation: none;
  }

  :root {
    --site-enter-duration: 0.42s;
  }

  .site-gate,
  .site-gate.is-leaving,
  .site-gate__panel,
  .site-gate.is-leaving .site-gate__panel,
  .site-gate__dock,
  body.is-site-enter .bg-canvas,
  body.is-site-enter .grain,
  body.is-site-enter .bg-vignette,
  body.is-site-enter .site-gate.is-leaving .site-gate__vignette,
  body.is-site-enter .header.gate-site-layer--chrome,
  body.is-site-enter main.gate-site-layer--chrome,
  body.is-site-enter .floaters {
    transition-duration: 0.42s !important;
    animation: none !important;
  }

  body.is-site-enter .bg-canvas,
  body.is-site-enter .grain,
  body.is-site-enter .bg-vignette,
  body.is-on-site .bg-canvas,
  body.is-on-site .grain,
  body.is-on-site .bg-vignette {
    opacity: 1 !important;
  }

  .site-gate__dock .intro-dock__cell,
  .site-gate.is-visible .site-gate__dock .intro-dock__cell {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .intro-dock__cell.is-unavailable {
    opacity: 0.38;
  }

  .site-gate.is-visible #gateEnterGta .gate-gta-glow {
    opacity: 0.55;
  }
}

/* Пульс при snap-переходах */
.scene-pulse {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle at 50% 38%,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.05) 28%,
    rgba(255, 255, 255, 0.02) 48%,
    transparent 68%
  );
}

body.is-scene-snap .scene-pulse {
  animation: scenePulse 650ms var(--ease) both;
}

@keyframes scenePulse {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
  }
}

.chapter__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Боковые рельсы */
.rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.rail--right {
  align-items: flex-end;
}

/* Вертикальный список глав (как референс): линия + подписи */
.rail--chapters {
  position: fixed;
  left: var(--hero-chapter-rail-left);
  top: var(--hero-chapter-rail-top);
  z-index: 9;
  align-items: flex-start;
  text-align: left;
  pointer-events: auto;
}

.rail-chapters__inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--hero-chapter-rail-line-gap);
}

.rail-chapters__line {
  width: 1px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22);
  align-self: stretch;
  min-height: 140px;
}

.rail-chapters__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.rail-chapters__item {
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: color var(--t-mid) var(--ease);
}

.rail-chapters__item--muted {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.rail-chapters__item.is-active {
  color: #fff;
}

.rail-chapters__item.is-active::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--hero-chapter-rail-line-gap) - 5px);
  top: 0.35em;
  width: 6px;
  height: 6px;
  background: #fff;
}

.rail__progress {
  width: 1px;
  height: 220px;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}

.rail__progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 120ms linear;
}

/* Чаптер: только на hero-панели; не задаём display/max-width — иначе ломается grid у .hero-panel */
.chapter {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.hero-panel.chapter {
  width: 100%;
}

.hero-panel--align-right .chapter__cta {
  justify-content: flex-end;
}

.hero-panel--align-left .chapter__cta {
  justify-content: flex-start;
}

.chapter__index {
  font-size: calc(11px * var(--ui-scale));
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.chapter__title {
  margin: 0;
  /* Пропорционально дизайну 2560 (92px), уменьшается по --ui-scale,
     чтобы на узких текст не наезжал на 3D-логотип и не «комкался». */
  font-size: calc(92px * var(--ui-scale));
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: none;
}

.chapter__title em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
}

.chapter__title--poem {
  font-size: calc(76px * var(--ui-scale));
  line-height: 0.98;
}

.chapter__title--poem .chapter__title-row {
  white-space: nowrap;
}

.chapter__desc {
  max-width: min(100%, 36em);
  margin: 0;
  font-size: calc(17px * var(--ui-scale));
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  text-wrap: pretty;
}

.text-stack {
  display: flex;
  flex-direction: column;
  gap: 0.14em;
  max-width: min(100%, 36em);
}

.text-stack__line {
  display: block;
}

.text-stack--3 {
  max-width: 100%;
}

.text-stack--3 .text-stack__line {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .text-stack--3 .text-stack__line {
    white-space: normal;
  }
}

.fleet__desc.text-stack--3 {
  max-width: 100%;
}

.fleet__desc.text-stack--3 .text-stack__line {
  white-space: normal;
}

.chapter__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* Плавное скрытие hero-текста при flyout (Состав / Архив) */
html.is-flyout .hero__panels .chapter__index,
html.is-flyout .hero__panels .chapter__title,
html.is-flyout .hero__panels .chapter__desc,
html.is-flyout .hero__panels .chapter__cta,
body.archive-flying .hero__panels .chapter__index,
body.archive-flying .hero__panels .chapter__title,
body.archive-flying .hero__panels .chapter__desc,
body.archive-flying .hero__panels .chapter__cta,
body.roster-flying .hero__panels .chapter__index,
body.roster-flying .hero__panels .chapter__title,
body.roster-flying .hero__panels .chapter__desc,
body.roster-flying .hero__panels .chapter__cta,
body.archive-ui .hero__panels .chapter__index,
body.archive-ui .hero__panels .chapter__title,
body.archive-ui .hero__panels .chapter__desc,
body.archive-ui .hero__panels .chapter__cta,
body.roster-ui .hero__panels .chapter__index,
body.roster-ui .hero__panels .chapter__title,
body.roster-ui .hero__panels .chapter__desc,
body.roster-ui .hero__panels .chapter__cta {
  --flyout-hide: var(--flyout-chapter-hide, 0);
  opacity: calc(1 - var(--flyout-hide));
  transform: translate3d(
    calc(var(--flyout-hide) * var(--flyout-text-shift-x, 0px)),
    calc(var(--flyout-hide) * 22px),
    0
  );
  filter: blur(calc(var(--flyout-hide) * 7px));
  pointer-events: none;
  transition: none;
  will-change: opacity, transform, filter;
}

html.is-flyout .hero__panels .chapter__index,
body.archive-flying .hero__panels .chapter__index,
body.roster-flying .hero__panels .chapter__index,
body.archive-ui .hero__panels .chapter__index,
body.roster-ui .hero__panels .chapter__index {
  --flyout-hide: var(--flyout-hide-index, var(--flyout-chapter-hide, 0));
}

html.is-flyout .hero__panels .chapter__title,
body.archive-flying .hero__panels .chapter__title,
body.roster-flying .hero__panels .chapter__title,
body.archive-ui .hero__panels .chapter__title,
body.roster-ui .hero__panels .chapter__title {
  --flyout-hide: var(--flyout-hide-title, var(--flyout-chapter-hide, 0));
}

html.is-flyout .hero__panels .chapter__desc,
body.archive-flying .hero__panels .chapter__desc,
body.roster-flying .hero__panels .chapter__desc,
body.archive-ui .hero__panels .chapter__desc,
body.roster-ui .hero__panels .chapter__desc {
  --flyout-hide: var(--flyout-hide-desc, var(--flyout-chapter-hide, 0));
}

html.is-flyout .hero__panels .chapter__cta,
body.archive-flying .hero__panels .chapter__cta,
body.roster-flying .hero__panels .chapter__cta,
body.archive-ui .hero__panels .chapter__cta,
body.roster-ui .hero__panels .chapter__cta {
  --flyout-hide: var(--flyout-hide-cta, var(--flyout-chapter-hide, 0));
}

html.is-flyout .hero-panel.is-active .hero-panel__inner,
body.archive-flying .hero-panel.is-active .hero-panel__inner,
body.roster-flying .hero-panel.is-active .hero-panel__inner,
body.archive-ui .hero-panel.is-active .hero-panel__inner,
body.roster-ui .hero-panel.is-active .hero-panel__inner {
  transform: scale(calc(1 - var(--flyout-chapter-hide, 0) * 0.035));
  transform-origin: center left;
}

html.is-flyout .hero-panel--align-right.is-active .hero-panel__inner,
body.archive-flying .hero-panel--align-right.is-active .hero-panel__inner,
body.roster-flying .hero-panel--align-right.is-active .hero-panel__inner,
body.archive-ui .hero-panel--align-right.is-active .hero-panel__inner,
body.roster-ui .hero-panel--align-right.is-active .hero-panel__inner {
  transform-origin: center right;
}

html.is-flyout .rail-chapters__inner,
body.archive-flying .rail-chapters__inner,
body.roster-flying .rail-chapters__inner,
body.archive-ui .rail-chapters__inner,
body.roster-ui .rail-chapters__inner {
  opacity: calc(1 - var(--flyout-chapter-hide, 0));
  transform: translate3d(calc(var(--flyout-chapter-hide, 0) * -18px), 0, 0);
  filter: blur(calc(var(--flyout-chapter-hide, 0) * 5px));
  pointer-events: none;
  transition: none;
}

html.is-flyout .rail__progress,
body.archive-flying .rail__progress,
body.roster-flying .rail__progress,
body.archive-ui .rail__progress,
body.roster-ui .rail__progress {
  opacity: calc(1 - var(--flyout-chapter-hide, 0) * 0.85);
}

/* ---------- 9b. ROSTER (режим «Состав» — UI поверх canvas) ---------- */
.roster-overlay {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: calc(var(--header-h) + 6px) var(--scene-pad-inline) 10px;
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
}

.roster-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 115% 95% at 50% 48%,
    transparent 42%,
    rgba(0, 0, 0, 0.48) 100%
  );
  opacity: calc(var(--flyout-ui-show, 0) * 0.38 + var(--flyout-chapter-hide, 0) * 0.1);
}

.roster-overlay[hidden] {
  display: none !important;
}

.roster-overlay__panel {
  position: relative;
  z-index: 1;
  width: min(1680px, calc(100vw - 2 * var(--scene-pad-inline)));
  max-width: 100%;
  height: 100%;
  max-height: calc(100vh - var(--header-h) - 16px);
  margin-inline: auto;
  align-self: center;
  padding: clamp(26px, 3.2vw, 42px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 22px);
  color: #fff;
  border: 1px solid var(--glass-border-bright);
  background: var(--glass-highlight), rgba(0, 0, 0, 0.26);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  opacity: var(--flyout-ui-show, 0);
  transform: translateX(calc((1 - var(--flyout-ui-show, 0)) * 72%));
  transform-origin: center center;
  will-change: opacity, transform;
  pointer-events: none;
}

.roster-overlay__panel::-webkit-scrollbar {
  display: none;
}

body.roster-ui .roster-overlay__panel {
  pointer-events: auto;
}

.roster-stage__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.roster-stage__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.roster-stage__num {
  color: rgba(255, 255, 255, 0.72);
}

.roster-stage__tag {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.roster-stage__back {
  flex-shrink: 0;
}

.roster-stage__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 52ch;
}

.roster-stage__title {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.roster-stage__lead {
  margin: 0;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.58);
}

.roster-stage__body {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.roster-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 22px);
  min-height: 0;
}

.roster-pick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.roster-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--glass-highlight), rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  overflow: hidden;
  transition:
    background var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease);
}

.roster-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateX(4px);
}

.roster-card.is-active {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateX(6px);
}

.roster-card__index {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
}

.roster-card.is-active .roster-card__index {
  color: #fff;
}

.roster-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.roster-card__name {
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.roster-card__role {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}

.roster-card.is-active .roster-card__role {
  color: rgba(255, 255, 255, 0.72);
}

.roster-card__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width var(--t-xslow) var(--ease);
}

.roster-card.is-active .roster-card__bar {
  width: 100%;
}

/* Досье выбранного героя */
.roster-detail {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(18px, 2vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--glass-highlight), rgba(255, 255, 255, 0.04);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.5s var(--ease);
}

.roster-detail:not([hidden]) {
  opacity: 1;
  transform: none;
}

.roster-detail__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roster-detail__index {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
}

.roster-detail__name {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.roster-detail__role {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.roster-detail__desc {
  margin: 0;
  padding-top: clamp(14px, 2vh, 18px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: clamp(14px, 1.55vw, 16px);
  line-height: 1.72;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.74);
  overflow-y: auto;
  scrollbar-width: thin;
  text-wrap: pretty;
}

/* Соцсети игрока в карточке «Состав»: ряд кружков-иконок (наполняет script.js).
   Сами кружки — общий класс .community__social-link (как у Discord в «Заявке»). */
.roster-detail__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(14px, 2vh, 18px);
  padding-top: clamp(14px, 2vh, 18px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.roster-detail__socials[hidden] {
  display: none;
}
.roster-detail__social {
  width: 40px;
  height: 40px;
}

/* 3D-кольцо + видео (без квадратной рамки)
   ▼ ПОДГОН РАЗМЕРА ПЕРСОНАЖА — меняй эти переменные в .roster-carousel:
   --roster-hero-scale  — масштаб обёртки видео (1 = 100%, 2 = в 2 раза крупнее)
   --roster-video-mul   — базовый размер обёртки относительно сцены (на .video-wrap)
   --roster-hero-w / --roster-hero-h — зона витрины (ширина / высота) */
.roster-carousel {
  --roster-ring-angle: 0deg;
  --roster-slide-dir: 1;
  --roster-hero-scale: 0.8;
  --roster-hero-w: min(100%, 720px);
  /* Высота витрины персонажа = постоянная доля высоты экрана (по эталону
     sostav-true: персонаж ~63% высоты, по центру, с полями над головой и под
     ступнями). Константа vh → одинаковая пропорция на любой ширине/высоте. */
  --roster-hero-h: 38vh;
  --roster-stage-w: var(--roster-hero-w);
  --roster-stage-h: var(--roster-hero-h);
  --roster-ring-r: calc(var(--roster-hero-h) * 0.34);
  position: relative;
  flex: 1;
  min-height: min(78vh, 840px);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: auto;
  touch-action: none;
}

/* Платформа — всегда лицом к камере (не крутится с каруселью) */
.roster-carousel__pedestal {
  position: absolute;
  left: 50%;
  /* Пьедестал крепится к viewport (38vh), а ступни персонажа из-за overflow
     видео-обёртки уходят ~на 15vh НИЖЕ него — поэтому круг раньше висел у пояса
     («за спиной»). Опускаем его к ступням (−15vh) и делаем меньше, чтобы персонаж
     стоял НА нём, как в эталоне. */
  bottom: -15vh;
  z-index: 2;
  /* Ширина эллипса задаётся per-hero из script.js (--roster-pedestal-*): у Happy
     шире, т.к. у него шире стойка и ступни. По умолчанию 60%/300px. */
  width: var(--roster-pedestal-w, 60%);
  max-width: var(--roster-pedestal-max, 300px);
  aspect-ratio: 2.85 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), width 0.3s var(--ease), max-width 0.3s var(--ease);
}

.roster-carousel__ring-deco {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  opacity: 0.62;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 48px rgba(255, 255, 255, 0.03);
}

.roster-carousel__viewport {
  position: relative;
  z-index: 1;
  width: var(--roster-hero-w);
  height: var(--roster-hero-h);
  max-height: 100%;
  flex-shrink: 0;
  overflow: visible;
  perspective: clamp(1000px, 120vw, 1600px);
  perspective-origin: 50% 52%;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.roster-carousel__viewport.is-dragging {
  cursor: grabbing;
}

.roster-carousel__ring {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 1;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* 3D-звёзды вокруг витрины героев */
.roster-carousel__stars {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}

/* В покое — лёгкое вращение; при свайпе/смене звёзды только на кольце (как персонаж) */
body.roster-ui .roster-carousel__viewport:not(.is-dragging):not(.is-transitioning) .roster-carousel__stars {
  animation: roster-stars-orbit 20s linear infinite;
}

body.roster-ui .roster-carousel__viewport.is-dragging .roster-carousel__stars,
body.roster-ui .roster-carousel__viewport.is-transitioning .roster-carousel__stars {
  animation: none !important;
}

@keyframes roster-stars-orbit {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.roster-star {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  pointer-events: none;
}

.roster-star::before,
.roster-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 16px rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%);
}

.roster-star::before {
  width: var(--star-arm, 10px);
  height: 2px;
}

.roster-star::after {
  width: 2px;
  height: var(--star-arm, 10px);
}

.roster-star--dot::before {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}

.roster-star--dot::after {
  display: none;
}

.roster-star--bright::before,
.roster-star--bright::after {
  box-shadow: 0 0 12px #fff, 0 0 22px rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: no-preference) {
  .roster-star {
    animation: roster-star-twinkle 2.8s ease-in-out infinite;
    animation-delay: var(--star-delay, 0s);
  }
}

@keyframes roster-star-twinkle {
  0%,
  100% {
    opacity: var(--star-op-min, 0.35);
  }
  50% {
    opacity: var(--star-op-max, 1);
  }
}

.roster-carousel__stage {
  position: absolute;
  left: 50%;
  /* Карусель теперь занимает всю высоту панели (заголовок ушёл в левую колонку),
     поэтому витрину центрируем по карусели и опускаем — ступни на ~84% высоты
     (на пьедестале), над головой воздух (как в эталоне sostav-true). */
  top: 64%;
  z-index: 4;
  width: var(--roster-stage-w);
  height: var(--roster-stage-h);
  margin-left: calc(var(--roster-stage-w) / -2);
  /* Меньшее по модулю смещение, чем -1/2 → витрина опускается, ступни ближе к
     низу панели (~84%), как в эталоне. */
  margin-top: calc(var(--roster-stage-h) / -4);
  padding: 8% 0 0;
  box-sizing: border-box;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

/* Обёртка масштабируется (не <video>) — иначе Chrome ломает object-fit + scale */
.roster-carousel__video-wrap {
  --roster-exit-x: 12%;
  --roster-video-mul: 3.18;
  flex-shrink: 0;
  width: calc(100% * var(--roster-video-mul));
  height: calc(100% * var(--roster-video-mul));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
  transform: scale(var(--roster-hero-scale, 2.5)) translate3d(0, 0, 0);
  transform-origin: center bottom;
  transition:
    opacity 0.42s var(--ease),
    transform 0.42s var(--ease);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.roster-carousel__video-wrap.is-swapping {
  opacity: 0;
  transform: scale(calc(var(--roster-hero-scale, 2.5) * 0.96))
    translate3d(calc(var(--roster-exit-x) * var(--roster-slide-dir, 1) * 0.6), 0, 0);
}

.roster-carousel__video-wrap.is-ready,
.roster-carousel__video-wrap:not(.is-swapping) {
  opacity: 1;
  transform: scale(var(--roster-hero-scale, 2.5)) translate3d(0, 0, 0);
}

.roster-carousel__video {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  pointer-events: none;
  background: transparent;
  opacity: 1;
  /* Персонаж в исходных webm закомпонован чуть левее центра кадра — сдвигаем
     каждого вправо (значение задаёт script.js по индексу героя), чтобы он стоял
     ровно по центру платформы. Сдвиг на видео, не на обёртке: обёртка занята
     анимацией смены/масштабом. */
  transform: translateX(var(--roster-hero-shift-x, 0));
}

@media (prefers-reduced-motion: reduce) {
  .roster-card,
  .roster-detail,
  .roster-carousel__video-wrap {
    transition: none;
  }

  body.roster-ui .roster-carousel__stars {
    animation: none !important;
  }
}

html.is-flyout,
body.roster-flying,
body.archive-flying,
body.roster-ui,
body.archive-ui {
  overflow: hidden;
}

body.roster-ui .floaters,
body.archive-ui .floaters {
  opacity: 0;
  pointer-events: none;
}

/* Соц-док (#heroSocial) — chrome-слой, как .floaters; без скрытия он «просвечивал»
   по центру поверх видео героя. Прячем его на оверлеях Состав/Архив.
   Шапку (.header) НЕ трогаем — по референсу (sostav-true/archive-true) она
   остаётся видимой поверх оверлея. */
body.roster-ui .hero-social,
body.archive-ui .hero-social,
body.roster-flying .hero-social,
body.archive-flying .hero-social,
html.is-flyout .hero-social {
  opacity: 0 !important;
  pointer-events: none;
}

/* Открытое мобильное меню (#mobileMenu, z-index 90) перекрывается fixed-иконками
   соц-дока (z-index 91, pointer-events:auto). Из-за этого иконки ложились поверх
   меню и багали клики по кнопке «Войти/Выйти». Пока меню открыто — прячем док. */
body.menu-open .hero-social {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.is-flyout .hero__panels .chapter__index,
  html.is-flyout .hero__panels .chapter__title,
  html.is-flyout .hero__panels .chapter__desc,
  html.is-flyout .hero__panels .chapter__cta,
  body.archive-flying .hero__panels .chapter__index,
  body.archive-flying .hero__panels .chapter__title,
  body.archive-flying .hero__panels .chapter__desc,
  body.archive-flying .hero__panels .chapter__cta,
  body.roster-flying .hero__panels .chapter__index,
  body.roster-flying .hero__panels .chapter__title,
  body.roster-flying .hero__panels .chapter__desc,
  body.roster-flying .hero__panels .chapter__cta {
    filter: none;
    transform: none;
  }
}

@media (max-width: 1100px) {
  .roster-stage__body {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .roster-aside {
    order: 1;
  }

  .roster-carousel {
    order: 2;
    min-height: min(58vh, 640px);
    --roster-hero-scale: 2.5;
    --roster-hero-w: min(100%, 600px);
    --roster-hero-h: min(64vh, 700px);
  }

  .roster-detail {
    max-height: none;
  }
}

@media (max-width: 640px) {
  .roster-carousel {
    min-height: min(52vh, 520px);
    --roster-hero-scale: 2.5;
    --roster-hero-w: min(100%, 480px);
    --roster-hero-h: min(58vh, 600px);
  }
}

/* Низкие экраны (≤820px высоты, напр. 1366×768): ужимаем левую колонку (заголовок
   + карточки + досье), чтобы полное описание игрока влезало БЕЗ внутренней
   прокрутки — блок целиком, как просили. На 1080+ не действует. */
@media (min-width: 1101px) and (max-height: 820px) {
  .roster-stage__title {
    font-size: clamp(26px, 3vw, 34px);
  }
  .roster-stage__intro {
    gap: 6px;
  }
  .roster-stage__lead {
    font-size: 12px;
    line-height: 1.4;
  }
  .roster-pick {
    gap: 6px;
  }
  .roster-card {
    padding: 9px 16px;
  }
  .roster-detail {
    padding: clamp(12px, 1.4vw, 16px);
    gap: 10px;
  }
  .roster-detail__desc {
    padding-top: 10px;
    font-size: clamp(12px, 1.3vw, 14px);
    line-height: 1.5;
  }
}

/* ---------- 9c. ARCHIVE / Memories (космос + glass-панель по центру) ---------- */
.archive-overlay {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 14px) var(--scene-pad-inline) 22px;
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
}

/* Лёгкая виньетка по краям — звёзды и 3D остаются видимыми */
.archive-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 115% 95% at 50% 48%,
    transparent 42%,
    rgba(0, 0, 0, 0.48) 100%
  );
  opacity: calc(var(--flyout-ui-show, 0) * 0.38 + var(--flyout-chapter-hide, 0) * 0.1);
}

.archive-overlay[hidden] {
  display: none !important;
}

.archive-stage {
  position: relative;
  z-index: 1;
  /* По эталону archive-true панель уже (~44% ширины экрана), а не во всю ширину —
     фото становится по-ширине (16:9, ниже) и под ним помещается пейджер. */
  width: min(100%, clamp(560px, 44vw, 1140px));
  max-height: calc(100vh - var(--header-h) - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 20px);
  padding: clamp(22px, 2.6vw, 34px) clamp(26px, 3.2vw, 40px);
  color: #fff;
  border-radius: 2px;
  border: 1px solid var(--glass-border-bright);
  background: var(--glass-highlight), rgba(0, 0, 0, 0.26);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  opacity: var(--flyout-ui-show, 0);
  transform: translateX(calc((1 - var(--flyout-ui-show, 0)) * -72%));
  transform-origin: center center;
  will-change: opacity, transform;
  pointer-events: none;
}

.archive-stage::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.archive-ui .archive-stage {
  pointer-events: auto;
}

.archive-stage__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.archive-stage__meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.archive-stage__num {
  color: #fff;
  font-weight: 600;
}

.archive-stage__tag {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
}

.archive-stage__intro {
  display: grid;
  gap: clamp(14px, 2vh, 20px);
  text-align: center;
}

.archive-stage__title {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.archive-stage__lead {
  margin: 0 auto;
  max-width: 52ch;
  padding: 0;
  border: 0;
  font-size: clamp(14px, 1.45vw, 16px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
}

.archive-stage__back {
  flex-shrink: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.archive-stage__stats {
  margin-bottom: 0;
}

.archive-stage__gallery {
  min-width: 0;
  /* Потолок ширины = (доступная высота под фото) × 16/9 → высота кадра (16:9)
     никогда не больше свободного места, и пейджер под ним всегда виден. Рамка с
     фото центрируется в панели. */
  width: 100%;
  max-width: calc((100vh - 470px) * 16 / 9);
  margin-inline: auto;
}

.archive-stage .slider {
  transform: none;
  perspective: 1600px;
}

.archive-stage .slider__shell {
  width: 100%;
}

body.archive-ui .floaters {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 820px) {
  /* Пока открыт оверлей «Архив», прячем фикс-шапку: её правый блок (бургер/вход,
     z-index 100) ложился поверх кнопки «← Назад» оверлея (z-index 88) и
     перехватывал тап — выйти из архива было почти невозможно. */
  body.archive-ui .header {
    opacity: 0;
    pointer-events: none;
  }

  .archive-overlay {
    /* Шапка спрятана — верхний отступ считаем от края экрана, а не от шапки.
       align-items: flex-start вместо center: раньше высокая панель центрировалась
       и «вылезала» вверх (под навбар) и вниз (стрелки галереи уходили за экран). */
    align-items: flex-start;
    padding: 14px 16px 16px;
  }

  .archive-stage {
    /* dvh учитывает динамическую панель браузера на телефоне; панель всегда влезает
       в экран, а длинный контент прокручивается ВНУТРИ неё. */
    max-height: calc(100dvh - 30px);
    gap: 12px;
    padding: 18px;
  }

  /* «← Назад» липнет к верху панели: всегда на экране и всегда ловится пальцем,
     как бы пользователь ни прокрутил содержимое архива. */
  .archive-stage__top {
    position: sticky;
    top: 0;
    z-index: 3;
    flex-wrap: nowrap;
    margin: -18px -18px 0;
    padding: 14px 18px;
    background: rgba(8, 9, 13, 0.92);
    border-bottom: 1px solid var(--glass-border);
  }

  .archive-stage__lead {
    font-size: 13px;
    line-height: 1.55;
  }

  /* В оверлее «Архив» держим статы в 2 колонки и компактными — иначе на невысоких
     телефонах столбик из статов съедал высоту и стрелки галереи уходили под край
     экрана. (В секции #memories статы остаются в столбик — там места хватает.) */
  .archive-overlay .archive-stage.memories .stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
  }
  .archive-overlay .archive-stage.memories .stat {
    border-bottom: 0;
    padding: 12px 14px;
  }
}

/* Низкие экраны: фикс-хром архива (крупный заголовок + статы) съедал высоту и
   выталкивал пейджер галереи за экран. Ужимаем его, чтобы и фото, и пейджер
   были видны целиком (на 1080+ не действует). */
@media (max-height: 860px) {
  .archive-stage__title {
    font-size: clamp(28px, 3.4vw, 40px);
  }
  .memories .stat {
    padding: clamp(12px, 1.6vh, 18px) clamp(18px, 2.4vw, 26px);
  }
  .memories .stat__value {
    font-size: clamp(22px, 2.3vw, 32px);
  }
}

/* ---------- 10. FLOATING UI ---------- */
.floaters {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 3vh, 32px);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

body.is-loading .floaters {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.floater {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale));
  height: calc(44px * var(--ui-scale));
  padding: 0 calc(14px * var(--ui-scale));
  background: var(--glass-highlight), rgba(0, 0, 0, 0.48);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: calc(11px * var(--ui-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}

.floater--sound:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.floater__icon {
  display: inline-flex;
  width: calc(14px * var(--ui-scale));
  height: calc(14px * var(--ui-scale));
}

.floater__label em {
  font-style: normal;
  font-weight: 700;
  color: #fff;
}

.floater--sound:hover .floater__label em {
  color: #000;
}

.sound-on {
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.sound-off {
  opacity: 1;
  transition: opacity var(--t-fast) var(--ease);
}

.floater--sound[aria-pressed="true"] .sound-on { opacity: 1; }
.floater--sound[aria-pressed="true"] .sound-off { opacity: 0; }

/* ---------- 11. Section heading ---------- */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 28px 48px;
  margin-bottom: clamp(40px, 6vw, 72px);
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.section-head__index {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.section-head__num {
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.16em;
  font-weight: 600;
}

.section-head__title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--snap-title);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.section-head__sub {
  grid-column: 2 / -1;
  justify-self: end;
  max-width: 380px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.section-head__sub--left {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 52ch;
}

.section-head--memories {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: clamp(18px, 2.5vw, 28px);
  padding-bottom: clamp(32px, 4vw, 48px);
}

.section-head--memories .section-head__index {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.section-head--memories .section-head__label {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  letter-spacing: 0.28em;
}

.section-head--memories .section-head__title {
  grid-column: auto;
  margin-top: 4px;
}

.memories__desc {
  margin: 0;
  max-width: 56ch;
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
  text-align: left;
}

/* ---------- 12. Apply (Join form) ---------- */
.apply {
  position: relative;
  padding: var(--snap-sec-pad-y) 0 clamp(48px, 7vh, 88px);
  min-height: calc(100svh - var(--header-h));
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: calc(var(--header-h) + 10px);
  background: var(--apply-section-bg);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border-top: 1px solid var(--apply-border-soft);
  z-index: 1;
}

.apply > .container {
  position: relative;
  z-index: 1;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--apply-pad-inline);
}

.section-head--apply {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.6vh, 16px);
  padding-bottom: clamp(12px, 2vh, 18px);
  margin-bottom: clamp(20px, 3vh, 32px);
  border-bottom: 1px solid var(--apply-border-soft);
}

.section-head--apply .section-head__index {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  color: var(--apply-ink-muted);
}

.section-head--apply .section-head__num {
  color: var(--apply-ink);
}

.section-head--apply .section-head__title {
  grid-column: auto;
  color: var(--apply-ink);
}

.section-head--apply .section-head__label {
  padding: 4px 10px;
  border: 1px solid var(--apply-border-soft);
  border-radius: 999px;
  background: var(--apply-surface-light);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  color: var(--apply-ink-soft);
  letter-spacing: 0.28em;
}

.apply__intro {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(14px, 1.55vh, 16px);
  line-height: 1.6;
  color: var(--apply-ink-muted);
}

.apply__stage {
  position: relative;
  padding: clamp(22px, 3vh, 32px) clamp(22px, 3vw, 32px);
  border-radius: var(--apply-radius);
  border: 1px solid var(--apply-border-soft);
  background:
    var(--apply-pearl-soft),
    var(--apply-surface-soft);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 20px 56px var(--apply-shadow);
  overflow: hidden;
}

.apply__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 0% 0%, var(--apply-glow-strong) 0%, transparent 58%);
}

.apply__meta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(18px, 2.4vh, 24px);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--apply-surface-light);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--apply-ink-muted);
}

.apply__meta-brand {
  color: var(--apply-ink);
}

.apply__meta-sep {
  color: var(--apply-ink-ghost);
  letter-spacing: 0;
}

.apply__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, 0.88fr) minmax(0, 1.62fr);
  gap: clamp(24px, 3.5vw, 40px);
  align-items: start;
}

.apply__promo {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 18px);
  padding-right: clamp(8px, 1.5vw, 16px);
}

.apply__ticket {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(18px, 2.4vh, 24px) clamp(18px, 2vw, 22px);
  border-radius: calc(var(--apply-radius-sm) + 2px);
  border: 1px solid var(--apply-border-soft);
  background: var(--apply-pearl), var(--apply-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.apply__promo-eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--apply-ink-muted);
}

.apply__promo-code {
  margin: 0;
  font-size: calc(72px * var(--ui-scale));
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apply-ink);
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.22),
    0 0 18px rgba(255, 255, 255, 0.1);
  animation: applyPromoGlow 6s var(--apply-ease) infinite;
}

@keyframes applyPromoGlow {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(255, 255, 255, 0.18),
      0 0 14px rgba(255, 255, 255, 0.08);
  }
  50% {
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.28),
      0 0 22px rgba(255, 255, 255, 0.12);
  }
}

.apply__copy {
  padding: 8px 14px;
  border: 1px solid var(--apply-border-soft);
  border-radius: 999px;
  background: var(--apply-surface-light);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--apply-ink-soft);
  text-decoration: none;
  transition:
    background 0.35s var(--apply-ease),
    border-color 0.35s var(--apply-ease),
    color 0.35s var(--apply-ease);
}

.apply__copy:hover {
  background: var(--apply-surface-light-strong);
  border-color: var(--apply-border);
  color: var(--apply-ink);
}

.apply__copy.is-copied {
  border-color: var(--apply-border-strong);
  color: var(--apply-ink);
}

.apply__promo-sub {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--apply-ink-muted);
}

.apply__loot-head {
  margin: 0;
  padding-top: clamp(14px, 2vh, 18px);
  border-top: 1px solid var(--apply-border-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--apply-ink-muted);
}

.apply__loot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
}

.apply__loot--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.apply__loot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 130px;
  padding: 10px 12px;
  border-radius: var(--apply-radius-sm);
  background: var(--apply-surface-light);
}

.apply__loot-icon {
  flex-shrink: 0;
  width: calc(36px * var(--ui-scale));
  height: calc(36px * var(--ui-scale));
  object-fit: contain;
}

.apply__loot-mark {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--apply-ink-muted);
}

.apply__loot-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.apply__loot-val {
  font-size: clamp(15px, 1.8vh, 17px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--apply-ink);
  white-space: nowrap;
}

.apply__loot-key {
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--apply-ink-muted);
}

.apply__main {
  display: flex;
  flex-direction: column;
  padding-left: clamp(20px, 2.5vw, 32px);
  border-left: 1px solid var(--apply-border-soft);
}

.apply__form-head {
  margin-bottom: clamp(16px, 2.2vh, 22px);
  padding-bottom: clamp(12px, 1.6vh, 16px);
  border-bottom: 1px solid var(--apply-border-soft);
}

.apply__form-kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--apply-ink-soft);
}

.apply__form {
  width: 100%;
}

.apply__form.is-sent .apply__grid,
.apply__form.is-sent .apply__foot .coin__cta-stage {
  display: none;
}

.apply__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(22px * var(--ui-scale)) clamp(18px, 2.2vw, 24px);
}

.apply__f {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ui-scale));
  grid-column: span 3;
  min-width: 0;
}

.apply__f:focus-within .apply__f-num {
  color: var(--apply-ink);
}

.apply__f-num {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--apply-ink-muted);
  transition: color 0.3s var(--apply-ease);
}

.apply__f--narrow {
  grid-column: span 1;
}

.apply__f--wide {
  grid-column: span 5;
}

.apply__f--full {
  grid-column: 1 / -1;
}

.apply__f-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.apply__f-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.9;
}

.apply__f-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--apply-ink-soft);
}

.apply__input {
  width: 100%;
  box-sizing: border-box;
  height: calc(42px * var(--ui-scale));
  padding: 0 calc(14px * var(--ui-scale));
  border: 1px solid var(--apply-border-soft);
  border-radius: var(--apply-radius-sm);
  background: rgba(0, 0, 0, 0.28);
  color: var(--apply-ink);
  font: inherit;
  font-size: calc(14px * var(--ui-scale));
  line-height: 1.4;
  transition:
    border-color 0.35s var(--apply-ease),
    background 0.35s var(--apply-ease);
}

.apply__input--area {
  min-height: calc(88px * var(--ui-scale));
  height: auto;
  padding: calc(12px * var(--ui-scale)) calc(14px * var(--ui-scale));
  resize: none;
}

.apply__input::placeholder {
  color: var(--apply-ink-ghost);
}

.apply__input:hover {
  border-color: var(--apply-border);
  background: rgba(0, 0, 0, 0.34);
}

.apply__input:focus {
  outline: none;
  border-color: var(--apply-border-strong);
  background: rgba(0, 0, 0, 0.38);
}

.apply__input:user-invalid:not(:placeholder-shown) {
  border-color: rgba(255, 140, 140, 0.55);
}

.apply__upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.apply__file {
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--apply-border);
  border-radius: var(--apply-radius-sm);
  background: var(--apply-surface-light);
  color: var(--apply-ink-soft);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.apply__file::file-selector-button {
  margin-right: 12px;
  padding: 8px 12px;
  border: 1px solid var(--apply-border-soft);
  border-radius: 8px;
  background: var(--apply-surface);
  color: var(--apply-ink);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.apply__file:hover {
  border-color: var(--apply-border-strong);
}

.apply__upload-hint {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--apply-ink-ghost);
}

.apply__upload-preview {
  border-radius: var(--apply-radius-sm);
  border: 1px solid var(--apply-border-soft);
  overflow: hidden;
  background: var(--apply-surface);
}

.apply__upload-preview img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  object-position: center;
}

.apply__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 3vh, 32px);
  padding-top: clamp(20px, 2.8vh, 26px);
  border-top: 1px solid var(--apply-border-soft);
}

.apply__submit {
  position: relative;
  z-index: 1;
}

.apply__foot .coin__cta-focus .btn {
  animation: applySubmitGlow 5s var(--apply-ease) infinite;
}

.apply__foot .coin__cta-focus.is-hot .btn,
.apply__foot .coin__cta-focus.is-hot .btn:hover {
  animation: applySubmitGlow 5s var(--apply-ease) infinite;
}

@keyframes applySubmitGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.18),
      0 0 14px rgba(255, 255, 255, 0.45),
      0 0 28px rgba(255, 255, 255, 0.28),
      0 0 52px rgba(255, 255, 255, 0.14);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.32),
      0 0 22px rgba(255, 255, 255, 0.72),
      0 0 44px rgba(255, 255, 255, 0.45),
      0 0 76px rgba(255, 255, 255, 0.22);
  }
}

.apply__note {
  margin: 0;
  min-height: 1.4em;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--apply-ink-muted);
}

.apply__note.is-success {
  color: var(--apply-ink-soft);
}

.apply__note.is-error {
  color: #ffb4b4;
}

@media (prefers-reduced-motion: reduce) {
  .apply__promo-code {
    animation: none;
  }

  .apply__foot .coin__cta-focus .btn,
  .apply__foot .coin__cta-focus.is-hot .btn,
  .apply__foot .coin__cta-focus.is-hot .btn:hover {
    animation: none;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.22),
      0 0 18px rgba(255, 255, 255, 0.38),
      0 0 36px rgba(255, 255, 255, 0.2);
  }

  .community__channel-stage .coin__cta-focus .btn,
  .community__channel-stage .coin__cta-focus.is-hot .btn,
  .community__channel-stage .coin__cta-focus.is-hot .btn:hover {
    animation: none;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.22),
      0 0 18px rgba(255, 255, 255, 0.38),
      0 0 36px rgba(255, 255, 255, 0.2);
  }

  .apply__copy:hover {
    transform: none;
  }

  .community__social-link:hover {
    transform: none;
  }
}

/* ---------- 13. Community (YouTube) ---------- */
.community {
  position: relative;
  padding: var(--snap-sec-pad-y) 0 clamp(48px, 7vh, 88px);
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: calc(var(--header-h) + 10px);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, var(--apply-glow-strong) 0%, transparent 58%),
    var(--apply-section-bg);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border-top: 1px solid var(--apply-border-soft);
  z-index: 1;
}

.community > .container {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--community-pad-inline);
}

.section-head--community {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.6vh, 16px);
  padding-bottom: clamp(12px, 2vh, 18px);
  margin-bottom: clamp(20px, 3vh, 32px);
  border-bottom: 1px solid var(--apply-border-soft);
}

.section-head--community .section-head__index {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  color: var(--apply-ink-muted);
}

.section-head--community .section-head__num,
.section-head--community .section-head__title {
  color: var(--apply-ink);
}

.section-head--community .section-head__label {
  padding: 4px 10px;
  border: 1px solid var(--apply-border-soft);
  border-radius: 999px;
  background: var(--apply-surface-light);
  color: var(--apply-ink-soft);
  letter-spacing: 0.28em;
}

.community__intro {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(14px, 1.55vh, 16px);
  line-height: 1.6;
  color: var(--apply-ink-muted);
  text-wrap: pretty;
}

.community__stage {
  padding: clamp(22px, 3vh, 32px);
  border-radius: var(--apply-radius);
  border: 1px solid var(--apply-border-soft);
  background: var(--apply-pearl-soft), var(--apply-surface-soft);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 20px 56px var(--apply-shadow);
}

.community__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(240px, 0.72fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: stretch;
}

.community__player-wrap {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.community__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--apply-radius-sm) + 4px);
  border: 1px solid var(--apply-border-soft);
  background: #000;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 20px 56px rgba(0, 0, 0, 0.38);
}

.community__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.community__aside {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vh, 16px);
  min-width: 0;
  min-height: 100%;
  margin-top: clamp(-8px, -1vh, -4px);
  justify-content: flex-start;
}

.community__previews-label {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--apply-ink-muted);
}

.community__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding-top: clamp(10px, 1.4vh, 14px);
  flex-shrink: 0;
}

.community__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--apply-border-soft);
  background: var(--apply-surface-light);
  color: var(--apply-ink-soft);
  transition:
    color 0.35s var(--apply-ease),
    border-color 0.35s var(--apply-ease),
    background 0.35s var(--apply-ease),
    transform 0.35s var(--apply-ease);
}

.community__social-link:hover {
  color: var(--apply-ink);
  border-color: var(--apply-border);
  background: var(--apply-surface-light-strong);
  transform: translateY(-1px);
}

.community__social-link svg {
  display: block;
  width: 16px;
  height: 16px;
}

.community__previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.1vh, 11px);
  margin: 0;
  padding: clamp(2px, 0.4vh, 4px) 0 0;
  list-style: none;
  align-content: start;
}

.community__preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.community__preview-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--apply-radius-sm);
  border: 1px solid var(--apply-border-soft);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  transition:
    border-color 0.35s var(--apply-ease),
    box-shadow 0.35s var(--apply-ease),
    transform 0.35s var(--apply-ease);
}

.community__preview-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--apply-ease), opacity 0.35s var(--apply-ease);
}

.community__preview-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.35s var(--apply-ease);
}

.community__preview-play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}

.community__preview-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--apply-ink-soft);
  transition: color 0.35s var(--apply-ease);
}

.community__preview:hover .community__preview-thumb {
  border-color: var(--apply-border);
  transform: translateY(-1px);
}

.community__preview:hover .community__preview-thumb img {
  transform: scale(1.03);
}

.community__preview:hover .community__preview-play {
  opacity: 1;
}

.community__preview:hover .community__preview-title {
  color: var(--apply-ink);
}

.community__preview.is-active .community__preview-thumb {
  border-color: var(--apply-border-strong);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 24px rgba(255, 255, 255, 0.12);
}

.community__preview.is-active .community__preview-title {
  color: var(--apply-ink);
}

.community__channel-stage {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(6px, 0.9vh, 10px);
  padding: 0;
  flex-shrink: 0;
}

.community__channel-stage .coin__cta-focus .btn {
  animation: applySubmitGlow 5s var(--apply-ease) infinite;
}

.community__channel-stage .coin__cta-focus.is-hot .btn,
.community__channel-stage .coin__cta-focus.is-hot .btn:hover {
  animation: applySubmitGlow 5s var(--apply-ease) infinite;
}

.community__channel {
  position: relative;
  z-index: 1;
}

/* ---------- 14. Coin (Rewards) ---------- */
.coin {
  position: relative;
  padding: var(--snap-sec-pad-y) 0;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: calc(var(--header-h) + 10px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 24%),
    var(--section-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  z-index: 1;
  overflow: visible;
}

.coin > .container {
  position: relative;
  z-index: 1;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--coin-pad-inline);
  overflow: visible;
}

.coin__frame {
  position: relative;
  padding: var(--snap-frame-pad);
  padding-bottom: calc(var(--snap-frame-pad) + clamp(28px, 4vh, 56px));
  border: 1px solid var(--glass-border-bright);
  background:
    var(--glass-highlight),
    radial-gradient(ellipse 80% 70% at 100% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 58%),
    var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  overflow: visible;
}

.coin__hud {
  position: absolute;
  /* Инсет уголков масштабируется с UI (26px на 2560), чтобы они всегда были
     дальше от края, чем паддинг контента — текст «/05» и таблица не залезают
     за уголки ни на какой ширине. */
  inset: calc(26px * var(--ui-scale));
  pointer-events: none;
  z-index: 2;
}

.coin__hud span {
  position: absolute;
  width: calc(16px * var(--ui-scale));
  height: calc(16px * var(--ui-scale));
  border: 1px solid rgba(255, 255, 255, 0.42);
}

.coin__hud span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.coin__hud span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.coin__hud span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.coin__hud span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Квадрат canvas на странице — только width/height, не Three.js */
.coin__visual {
  position: absolute;
  right: clamp(24px, 3.2vw, 48px);
  top: 32%;
  /* Пропорционально ширине, но компактнее прежнего (было 21.1vw/560px) —
     монета меньше наезжает на текст и карточки секции. */
  width: clamp(240px, 18vw, 470px);
  aspect-ratio: 1;
  transform: translateY(calc(-50% - 24px));
  pointer-events: none;
  z-index: 4;
}

.coin__visual-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: none;
  isolation: isolate;
  overflow: visible;
}

.coin__glow {
  position: absolute;
  inset: -22%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 218, 120, 0.42) 0%, rgba(255, 175, 55, 0.16) 36%, transparent 68%);
  filter: blur(28px);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  animation: coin-glow-breathe 4.8s ease-in-out infinite;
}

.coin__visual--ready .coin__glow {
  opacity: 0.92;
  transform: scale(1);
}

.coin__canvas {
  position: absolute;
  inset: -8%;
  z-index: 2;
  width: 116%;
  height: 116%;
  display: block;
  cursor: grab;
  touch-action: none;
  filter:
    drop-shadow(0 0 12px rgba(255, 205, 95, 0.5))
    drop-shadow(0 0 32px rgba(255, 165, 45, 0.26))
    drop-shadow(0 0 56px rgba(255, 130, 15, 0.1));
}

@keyframes coin-glow-breathe {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .coin__glow {
    animation: none;
    opacity: 0.85;
    transform: scale(1);
  }
}

.coin__emblem {
  position: relative;
  width: 64%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coin__emblem--fallback {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64%;
  height: auto;
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.coin__visual--ready .coin__emblem--fallback {
  opacity: 0;
  visibility: hidden;
}

.coin__visual--error .coin__emblem--fallback {
  opacity: 1;
  visibility: visible;
}

.coin__emblem-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.14) 0%, transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 62%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 48px rgba(255, 255, 255, 0.06);
}

.coin__emblem-ring::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.8vw, 16px);
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.16);
}

.coin__emblem-core {
  position: relative;
  z-index: 1;
  font-size: clamp(22px, 3.2vh, 36px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}

.coin__content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

@media (min-width: 768px) {
  .coin__head,
  .coin__intro {
    padding-right: clamp(148px, 17vw, 220px);
  }

  .coin__values {
    padding-right: clamp(48px, 6vw, 88px);
  }
}

.coin__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--snap-head-gap);
  margin-bottom: var(--snap-head-mb);
}

.coin__index {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--ui-scale));
  font-size: calc(11px * var(--ui-scale));
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.coin__num {
  font-size: calc(12px * var(--ui-scale));
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.16em;
}

.coin__tag {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  letter-spacing: 0.28em;
}

.coin__title {
  margin: 0;
  font-size: var(--snap-title);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.coin__title-brand {
  white-space: nowrap;
}

.coin__title-place {
  color: rgba(255, 255, 255, 0.36);
}

.coin__intro {
  position: relative;
  z-index: 1;
}

.coin__lead {
  margin: 0 0 calc(16px * var(--ui-scale));
  max-width: 52ch;
  font-size: calc(18px * var(--ui-scale));
  line-height: 1.52;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
}

.coin__body {
  margin: 0;
  max-width: 54ch;
  font-size: calc(15px * var(--ui-scale));
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.48);
}

.coin__values {
  list-style: none;
  position: relative;
  z-index: 1;
  margin: var(--snap-block-mt) 0 0;
  padding: 0;
  border: 1px solid var(--glass-border);
  background: var(--glass-fill-dark);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  box-shadow: var(--glass-inset);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
}

.coin__value {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(6px, 0.9vh, 10px);
  min-height: 100%;
  padding: clamp(12px, 1.6vh, 18px) clamp(16px, 2vw, 24px) clamp(14px, 1.8vh, 20px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  overflow: hidden;
  transition: background var(--t-mid) var(--ease);
}

.coin__value:last-child {
  border-right: 0;
}

.coin__value::after {
  content: attr(data-num);
  position: absolute;
  right: clamp(8px, 1.2vw, 14px);
  bottom: clamp(-4px, -0.3vw, 0px);
  font-size: clamp(48px, 6vh, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
  user-select: none;
}

.coin__value:hover {
  background: var(--glass-fill-strong);
}

.coin__value-head {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.7vw, 8px);
}

.coin__value-icon {
  width: calc(40px * var(--ui-scale));
  height: calc(40px * var(--ui-scale));
  object-fit: contain;
  margin-bottom: 2px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.coin__value-num {
  font-size: calc(10px * var(--ui-scale));
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.coin__value-label {
  margin: 0;
  font-size: calc(22px * var(--ui-scale));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}

.coin__value-text {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 26ch;
  font-size: calc(14px * var(--ui-scale));
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.54);
}

.coin__value-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.55s var(--ease);
}

.coin__value:hover .coin__value-bar {
  width: 100%;
}

.coin__value[data-reveal].is-visible .coin__value-bar {
  width: 100%;
}

.coin__join {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: var(--snap-join-mt);
  padding-top: var(--snap-join-pt);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.coin__cta-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.5vh, 16px);
  width: auto;
  max-width: none;
  min-height: auto;
  padding: clamp(4px, 0.8vh, 8px) 0;
}

.coin__cta-focus {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: clamp(6px, 1vh, 10px);
}

.coin__cta-particles {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.coin__cta-focus .btn {
  position: relative;
  z-index: 1;
  --btn-pad-x: clamp(36px, 5vw, 52px);
  --btn-pad-y: clamp(16px, 2vh, 22px);
  font-size: clamp(13px, 1.5vh, 15px);
  letter-spacing: 0.18em;
  --cta-glow-a: 0.12;
  --cta-glow-b: 0.05;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 28px rgba(255, 255, 255, var(--cta-glow-a)),
    0 0 56px rgba(255, 255, 255, var(--cta-glow-b));
  transition:
    transform var(--t-mid) var(--ease),
    background var(--t-mid) var(--ease),
    color var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    box-shadow 0.45s var(--ease),
    --cta-glow-a 0.45s var(--ease),
    --cta-glow-b 0.45s var(--ease);
}

.coin__cta-focus.is-hot .btn {
  --cta-glow-a: 0.24;
  --cta-glow-b: 0.1;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 36px rgba(255, 255, 255, var(--cta-glow-a)),
    0 0 72px rgba(255, 255, 255, var(--cta-glow-b)),
    0 0 120px rgba(255, 255, 255, 0.06);
}

.coin__cta-focus.is-hot .btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.coin__cta-focus.coin--flat .coin__cta-particles {
  display: none;
}

/* ---------- 13. Fleet (Автопарк) ---------- */
.fleet {
  position: relative;
  padding: var(--snap-sec-pad-y) 0;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: calc(var(--header-h) + 10px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 22%),
    var(--section-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  z-index: 1;
  overflow-x: clip;
}

.fleet > .container {
  position: relative;
  z-index: 1;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--fleet-pad-inline);
}

.section-head--fleet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.6vh, 16px);
  padding-bottom: clamp(12px, 2vh, 20px);
  margin-bottom: clamp(4px, 0.8vh, 8px);
}

.section-head--fleet .section-head__index {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.section-head--fleet .section-head__label {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  letter-spacing: 0.28em;
}

.section-head--fleet .section-head__title {
  grid-column: auto;
  margin-top: 4px;
}

.fleet__desc {
  margin: 0;
  max-width: min(100%, 44em);
  padding-left: clamp(12px, 1.5vw, 18px);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  font-size: clamp(13px, 1.4vh, 15px);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.52);
  text-wrap: pretty;
}

.fleet__desc.text-stack {
  gap: 0.16em;
}

.fleet__stage {
  position: relative;
  margin-top: clamp(8px, 1.5vh, 16px);
  overflow: visible;
  padding-inline: var(--fleet-pad-inline);
  box-sizing: border-box;
}

.fleet__scene {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.4vh, 4px);
  min-height: var(--snap-fleet-scene);
  perspective: clamp(520px, 68vw, 820px);
  perspective-origin: 50% 44%;
  transform-style: preserve-3d;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 11%,
    #000 89%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 11%,
    #000 89%,
    transparent 100%
  );
}

.fleet__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 30;
  pointer-events: none;
}

.fleet__fade--left {
  left: 0;
  width: clamp(128px, 18vw, 240px);
  background: linear-gradient(
    90deg,
    #000 0%,
    rgba(0, 0, 0, 0.92) 22%,
    rgba(0, 0, 0, 0.55) 52%,
    rgba(0, 0, 0, 0.15) 78%,
    transparent 100%
  );
}

.fleet__fade--right {
  right: 0;
  width: clamp(140px, 20vw, 260px);
  background: linear-gradient(
    270deg,
    #000 0%,
    rgba(0, 0, 0, 0.92) 24%,
    rgba(0, 0, 0, 0.55) 54%,
    rgba(0, 0, 0, 0.15) 80%,
    transparent 100%
  );
}

.fleet__tunnel {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 76% 56% at 50% 50%, transparent 26%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 12%, transparent 88%, rgba(0, 0, 0, 0.5) 100%);
  opacity: 0.88;
}

.fleet__row {
  position: relative;
  transform-style: preserve-3d;
  flex: 1;
  display: flex;
  align-items: center;
}

.fleet__row--top {
  z-index: 2;
  transform: rotateX(18deg) translateZ(-48px) scale(0.86);
  transform-origin: 50% 100%;
  transition: transform 1.05s cubic-bezier(0.22, 0.68, 0.2, 1);
}

.fleet__row--bottom {
  z-index: 2;
  transform: rotateX(-18deg) translateZ(-48px) scale(0.86);
  transform-origin: 50% 0%;
  transition: transform 1.05s cubic-bezier(0.22, 0.68, 0.2, 1);
}

.fleet__stage.is-engaged .fleet__row--top,
.fleet__stage.is-engaged .fleet__row--bottom {
  transform: rotateX(0deg) translateZ(0) scale(1);
}

.fleet__marquee {
  width: 100%;
  overflow: visible;
  padding: clamp(10px, 1.6vh, 18px) clamp(48px, 7vw, 96px);
  transform-style: preserve-3d;
}

.fleet__track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}

.fleet__group {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  padding-right: clamp(16px, 2vw, 24px);
  transform-style: preserve-3d;
}

.fleet__card {
  flex: 0 0 auto;
  width: calc(280px * var(--ui-scale));
  border: 1px solid var(--glass-border-bright);
  outline: 1px solid rgba(255, 255, 255, 0.08);
  outline-offset: -1px;
  background: var(--glass-highlight), var(--glass-fill-strong);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transform-style: preserve-3d;
  transition:
    transform 1.05s cubic-bezier(0.22, 0.68, 0.2, 1),
    border-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    background var(--t-mid) var(--ease);
}

.fleet__row--top .fleet__card:nth-child(odd) {
  transform: translateZ(36px) rotateX(8deg) rotateY(-14deg) scale(0.94);
}

.fleet__row--top .fleet__card:nth-child(even) {
  transform: translateZ(36px) rotateX(8deg) rotateY(14deg) scale(0.94);
}

.fleet__row--bottom .fleet__card:nth-child(odd) {
  transform: translateZ(36px) rotateX(-8deg) rotateY(14deg) scale(0.94);
}

.fleet__row--bottom .fleet__card:nth-child(even) {
  transform: translateZ(36px) rotateX(-8deg) rotateY(-14deg) scale(0.94);
}

.fleet__stage.is-engaged .fleet__card {
  transform: translateZ(0) rotateX(0deg) rotateY(0deg) scale(1);
}

.fleet__card:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: var(--glass-highlight), rgba(255, 255, 255, 0.12);
  box-shadow: var(--glass-shadow), var(--glass-inset), 0 16px 40px rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.fleet__card-media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.4vw, 16px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 50% 55%, rgba(255, 255, 255, 0.06) 0%, transparent 70%),
    rgba(0, 0, 0, 0.28);
}

.fleet__card-media::before,
.fleet__card-media::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 2;
  pointer-events: none;
}

.fleet__card-media::before {
  top: 10px;
  left: 10px;
  border-right: 0;
  border-bottom: 0;
}

.fleet__card-media::after {
  bottom: 10px;
  right: 10px;
  border-left: 0;
  border-top: 0;
}

.fleet__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  filter: contrast(0.96) brightness(1.03);
  transition: filter 0.5s var(--ease);
}

.fleet__card:hover .fleet__card-media img {
  filter: contrast(1) brightness(1.05);
}

.fleet__card-body {
  display: flex;
  flex-direction: column;
  padding: calc(18px * var(--ui-scale)) calc(20px * var(--ui-scale)) calc(20px * var(--ui-scale));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fleet__card-name {
  margin: 0;
  font-size: calc(15px * var(--ui-scale));
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.fleet--static .fleet__track {
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}

.fleet--static .fleet__group {
  display: contents;
}

.fleet--static .fleet__row--top .fleet__card,
.fleet--static .fleet__row--bottom .fleet__card {
  transform: none;
}

.fleet--static .fleet__row--top,
.fleet--static .fleet__row--bottom {
  transform: none;
}

/* Reveal on scroll */
[data-reveal],
[data-reveal-stagger] [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  filter: blur(6px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform 0.85s var(--ease),
    filter var(--t-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

[data-reveal="left"],
[data-reveal-stagger] [data-reveal="left"] {
  transform: translate3d(-32px, 0, 0);
}

[data-reveal="right"],
[data-reveal-stagger] [data-reveal="right"] {
  transform: translate3d(32px, 0, 0);
}

[data-reveal="scale"],
[data-reveal-stagger] [data-reveal="scale"] {
  transform: translate3d(0, 24px, 0) scale(0.97);
}

[data-reveal="fade"],
[data-reveal-stagger] [data-reveal="fade"] {
  transform: none;
  filter: none;
}

[data-reveal].is-visible,
[data-reveal-stagger].is-visible [data-reveal] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.memories .slider__shell[data-reveal] {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  filter: none;
}

.memories .slider__shell[data-reveal].is-visible {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ---------- 12. Memories ---------- */
.memories {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 10vw, 140px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 28%),
    var(--section-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  z-index: 1;
  --memories-depth: 0;
}

.memories::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.02) 0,
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 96px
  );
}

.memories > .container {
  position: relative;
  z-index: 1;
}

.memories .stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  /* Большой margin-bottom съедал высоту и выталкивал пейджер галереи за экран —
     интервал теперь задаёт gap самой панели (.archive-stage). */
  margin-bottom: 0;
  border: 1px solid var(--glass-border);
  background: var(--glass-highlight), var(--glass-fill-dark);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  box-shadow: var(--glass-inset);
}

.memories .stat {
  position: relative;
  padding: clamp(16px, 2vh, 24px) clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: background var(--t-mid) var(--ease);
}

.memories .stat:hover {
  background: var(--glass-fill-strong);
}

.memories .stat:last-child {
  border-right: 0;
}

.memories .stat__label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.memories .stat__value {
  /* Панель уже (44vw) — крупная дата «30.08.2021» обрезалась в узкой ячейке.
     Меньше и зависит от ширины, чтобы влезала на всех ширинах. */
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.memories .stat__plus {
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.memories .stat__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width var(--t-xslow) var(--ease);
}

.memories .stat[data-reveal].is-visible .stat__bar {
  width: 100%;
}

/* ---------- 13. Slider (Memories) ---------- */
.memories .slider {
  position: relative;
  perspective: 2000px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
  transform: translateY(calc((1 - var(--memories-depth)) * 24px))
    rotateX(calc((1 - var(--memories-depth)) * 3deg));
  transform-origin: 50% 85%;
  will-change: transform;
}

.memories .slider__shell {
  position: relative;
  /* Без внутреннего отступа — фото стоит вплотную к рамке (как в эталоне),
     а не «отходит» от краёв. */
  padding: 0;
  border: 1px solid var(--glass-border-bright);
  background: var(--glass-highlight), var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-origin: 50% 50%;
  transform-style: flat;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow:
    var(--shadow-x, 0px) var(--shadow-y, 24px) 64px rgba(0, 0, 0, 0.45),
    var(--shadow-x, 0px) calc(var(--shadow-y, 24px) * 0.35) 20px rgba(0, 0, 0, 0.28),
    var(--glass-inset);
}

.memories .slider__hud {
  position: absolute;
  inset: clamp(18px, 2.5vw, 26px);
  z-index: 2;
  pointer-events: none;
}

.memories .slider__hud span {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.memories .slider__hud span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.memories .slider__hud span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.memories .slider__hud span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.memories .slider__hud span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.memories .slider__viewport {
  position: relative;
  width: 100%;
  /* Строго 16:9 (как сами фото 1600×900): размер задаём ШИРИНОЙ, а не max-height,
     иначе при обрезке по высоте бокс становился НЕ 16:9 и object-fit:cover срезал
     верх кадра. Потолок по высоте задаёт ширину галереи (.archive-stage__gallery)
     → кадр всегда целиком, без обрезки. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.memories .slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.memories .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transform: scale(0.96);
  transition:
    transform 0.95s cubic-bezier(0.22, 0.68, 0.2, 1),
    opacity 0.65s cubic-bezier(0.22, 0.68, 0.2, 1),
    visibility 0s linear 0.65s;
}

.memories .slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transform: scale(1);
  transition:
    transform 0.95s cubic-bezier(0.22, 0.68, 0.2, 1),
    opacity 0.65s cubic-bezier(0.22, 0.68, 0.2, 1),
    visibility 0s linear 0s;
}

.memories .slider--3d .slider__track[data-dir="next"] .slide.is-active {
  animation: memoriesSlideInNext 0.95s cubic-bezier(0.22, 0.68, 0.2, 1) forwards;
}

.memories .slider--3d .slider__track[data-dir="prev"] .slide.is-active {
  animation: memoriesSlideInPrev 0.95s cubic-bezier(0.22, 0.68, 0.2, 1) forwards;
}

@keyframes memoriesSlideInNext {
  from {
    transform: translateX(2.5%) scale(0.97);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes memoriesSlideInPrev {
  from {
    transform: translateX(-2.5%) scale(0.97);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.memories--flat .slider,
.memories--flat .slider__shell,
.memories--flat .slide {
  transform: none !important;
  animation: none !important;
}

.memories--flat .slide {
  transition: opacity var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}

.memories--flat .slide.is-active {
  transition: opacity var(--t-slow) var(--ease), visibility 0s linear 0s;
}

.memories .slide__media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.memories .slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 8s cubic-bezier(0.22, 0.68, 0.2, 1);
  filter: none;
  -webkit-filter: none;
}

.memories .slide.is-active .slide__media img {
  transform: scale(1);
}

.memories .slider__footer {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(10px, 1.2vh, 14px);
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.memories .slider__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 72px;
}

.memories .slider__label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.memories .slider__progress {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  position: relative;
  align-self: center;
}

.memories .slider__progress-bar {
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
}

.memories .slider__counter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

.memories .slider__counter-sep { color: rgba(255, 255, 255, 0.28); }
.memories .slider__counter span:first-child { color: #fff; }

.memories .slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.memories .slider__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transition:
    width var(--t-mid) var(--ease),
    background var(--t-mid) var(--ease),
    opacity var(--t-mid) var(--ease);
}

.memories .slider__dot:hover {
  background: rgba(255, 255, 255, 0.65);
}

.memories .slider__dot.is-active {
  width: 22px;
  background: #fff;
}

.memories .slider__buttons {
  display: flex;
  gap: 8px;
}

.memories .slider__btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  box-shadow: var(--glass-inset);
  transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

.memories .slider__btn:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.memories .slider__btn:active {
  transform: scale(0.96);
}

/* Archive overlay: сброс секционных .memories-стилей */
.archive-overlay .archive-stage.memories {
  padding: clamp(26px, 3.2vw, 40px);
  background: var(--glass-highlight), rgba(0, 0, 0, 0.26);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-bright);
  border-top: 1px solid var(--glass-border-bright);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  z-index: auto;
  --memories-depth: 1;
}

.archive-overlay .archive-stage.memories::before {
  display: none;
}

.archive-overlay .archive-stage.memories .stats {
  margin-bottom: clamp(16px, 2.5vh, 24px);
}

.archive-overlay .archive-stage.memories .slider {
  transform: none;
}

/* ---------- 14. Footer ---------- */
.footer > .container,
.footer__shell {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--footer-pad-inline);
}

.footer {
  padding: clamp(36px, 5vh, 56px) 0 clamp(24px, 3vh, 32px);
  border-top: 1px solid var(--glass-border);
  background: var(--section-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 2;
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: clamp(36px, 4.5vw, 56px);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  flex: 0 0 auto;
  width: min(240px, 26vw);
  max-width: 100%;
}

.footer__nav {
  flex: 0 0 auto;
}

.footer__logo {
  display: inline-flex;
  opacity: 0.92;
  transition: opacity 0.35s var(--ease);
}

.footer__logo:hover {
  opacity: 1;
}

.footer__logo-img {
  display: block;
  width: clamp(108px, 10vw, 128px);
  height: auto;
}

.footer__slogan {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
  text-transform: none;
}

.footer__slogan span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.footer__nav-title {
  margin: 0 0 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

.footer__nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(108px, 132px));
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__nav-list a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  text-decoration: none;
  transition: color 0.35s var(--ease);
}

.footer__nav-list a:hover {
  color: rgba(255, 255, 255, 0.92);
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  align-self: end;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.62);
  transition:
    color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    background 0.35s var(--ease),
    transform 0.35s var(--ease);
}

.footer__social-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.footer__social-link svg {
  display: block;
}

.footer__copy {
  margin: clamp(28px, 4vh, 40px) 0 0;
  padding-top: clamp(18px, 2.5vh, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

/* ---------- 15. Responsive ---------- */
@media (max-width: 960px) {
  :root { --header-h: 64px; }

  .header__inner { grid-template-columns: auto 1fr auto; }
  .nav { display: none; }
  /* На мобильном прячем только ghost-кнопку входа в шапке (она дублируется в
     бургер-меню). РАНЬШЕ здесь было `.btn--ghost { display: none }`, что заодно
     скрывало кнопки «← Назад» оверлеев «Состав»/«Архив» (#rosterClose,
     #archiveClose) и «Выйти» в меню — из-за этого с телефона нельзя было выйти. */
  .header-auth__btn { display: none; }
  .burger { display: inline-flex; }

  .hero__rails-inner {
    justify-content: flex-end;
  }

  .rail--right {
    display: none;
  }

  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .section-head__sub {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .memories .stats {
    grid-template-columns: 1fr;
  }

  .memories .stat {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .memories .stat:last-child {
    border-bottom: 0;
  }

  .memories .slider {
    transform: none;
  }

  .memories .slider__shell {
    transform: none;
    box-shadow: none;
  }

  .memories .slide,
  .memories .slide.is-active {
    transform: none;
    animation: none;
  }

  .memories .slider__viewport {
    /* Фото архива — 16:9 (1600×900). Раньше тут было 4/5: портретный бокс +
       object-fit:cover срезал кадр сверху/снизу → «обрезанное» достижение.
       Держим 16:9, чтобы кадр показывался целиком. */
    aspect-ratio: 16 / 9;
    max-height: none;
  }

  /* Подстраховка: даже если бокс не идеально 16:9, показываем фото целиком. */
  .memories .slide__media img {
    object-fit: contain;
  }

  .memories .slider__footer {
    grid-template-columns: 1fr auto;
    gap: 14px;
  }

  .memories .slider__progress {
    grid-column: 1 / -1;
    order: -1;
  }

  .memories .slider__dots {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .apply__layout {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vh, 36px);
  }

  .apply__main {
    padding-left: 0;
    border-left: none;
    padding-top: clamp(20px, 3vh, 28px);
    border-top: 1px solid var(--apply-border-soft);
  }

  .apply__loot {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .apply__loot-item {
    flex: 1 1 140px;
  }

  .apply__grid {
    grid-template-columns: 1fr;
  }

  .apply__f,
  .apply__f--narrow,
  .apply__f--wide,
  .apply__f--full {
    grid-column: 1 / -1;
  }

  .community__layout {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .community__previews {
    grid-template-columns: 1fr 1fr;
  }

  .coin__head,
  .coin__intro,
  .coin__join,
  .coin__values {
    padding-right: 0;
  }

  .coin__content {
    padding-bottom: clamp(110px, 20vw, 160px);
  }

  .coin__visual {
    top: auto;
    bottom: clamp(132px, 19vw, 172px);
    right: clamp(12px, 5vw, 32px);
    transform: none;
    width: clamp(88px, 24vw, 132px);
  }

  .coin__values {
    grid-template-columns: 1fr;
  }

  .coin__value {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .coin__value:last-child {
    border-bottom: 0;
  }

  .coin__value-text {
    max-width: none;
  }

  .coin__cta-focus {
    width: 100%;
  }

  .coin__cta-focus .btn {
    width: 100%;
    justify-content: center;
  }

  .fleet__card {
    width: clamp(180px, 52vw, 240px);
  }

  .fleet__desc {
    padding-left: 12px;
  }

  .floaters {
    flex-direction: row;
    align-items: center;
    bottom: 16px;
    /* Центрируем БЕЗ transform. Центрирование через translateX() перебивалось
       состоянием body.is-revealing .floaters { transform: none } (спе­цифичность
       выше медиа-правила) → transform снимался и кнопка уезжала вбок. Здесь
       шринк-обёртка (width:max-content) центрируется авто-полями между left:0 и
       right:0 — состояния transform/opacity этого не касаются. */
    left: 0;
    right: 0;
    width: max-content;
    margin-inline: auto;
  }
  /* is-loading уже задаёт transform: translateY(20px) (базовое правило) — этого
     достаточно для входа снизу; горизонталь держат авто-поля, не transform. */
  .floater--sound .floater__label { display: none; }
}

@media (max-height: 880px) {
  :root {
    --snap-sec-pad-y: clamp(10px, 2.2vh, 24px);
    --snap-fleet-scene: clamp(150px, 24vh, 240px);
  }
}

@media (max-width: 960px) and (max-height: 820px) {
  .coin__content {
    padding-bottom: clamp(100px, 18vw, 140px);
  }

  .coin__visual {
    width: clamp(80px, 22vw, 110px);
    bottom: clamp(118px, 16vw, 152px);
  }
}

@media (max-width: 520px) {
  .chapter__cta { width: 100%; }
  .chapter__cta .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .footer__grid {
    flex-direction: column;
    gap: 28px;
  }

  .footer__brand {
    width: 100%;
  }

  .footer__social {
    align-self: flex-end;
  }

  .footer__nav-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 16. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html {
    scroll-behavior: auto !important;
    scroll-snap-type: y mandatory;
  }

  .hero-panel,
  .coin,
  .fleet,
  .apply,
  .community {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .grain {
    animation: none !important;
  }
}

/* JOIN: подпись «нужно быть на сервере» + кружок Discord */
.apply__server-note { margin: 4px 0 10px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.apply__server-join { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }

/* Кнопка Sound: выравнивание иконки динамика по тексту (all-caps оптический центр) */
.floater__icon { align-items: center; justify-content: center; flex-shrink: 0; }
.floater__icon svg { display: block; }
.floater__label { line-height: 1; }

/* =========================================================================
   МОБИЛЬНАЯ ВЕРТИКАЛЬНАЯ ВЁРСТКА (портрет). Крупные hero-заголовки завязаны
   на --ui-scale, который на ≤960px = 1 → текст рендерился в десктопных 92/76px
   и вылезал за края экрана. Переводим их во vw-единицы, чтобы влезали и держали
   воздух. 3D на этих устройствах отключён (см. bootstrap.js → html.no-3d),
   поэтому фон чистый и ничего не наезжает на текст.
   ========================================================================= */
@media (max-width: 820px) {
  /* Горизонтальный скролл-баг: fixed-элементы (шапка/гейт/grain), которые шире
     экрана, «вылазили» за body{overflow-x:hidden} и раздували layout-viewport до
     ~455px → браузер отзумливал страницу, и всё «наезжало». Клип по X на корне
     (html) обрезает это переполнение, не ломая вертикальный snap-скролл по Y. */
  html {
    overflow-x: clip;
    max-width: 100%;
  }
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  .chapter__title {
    font-size: clamp(30px, 9.2vw, 52px);
    line-height: 1.03;
    letter-spacing: -0.02em;
  }
  .chapter__title--poem {
    font-size: clamp(25px, 7.4vw, 42px);
    line-height: 1.08;
  }
  /* Строки «поэмы» больше не nowrap — иначе длинные строки режутся по краям. */
  .chapter__title--poem .chapter__title-row {
    white-space: normal;
  }
  .chapter__desc {
    font-size: clamp(14px, 4.1vw, 17px);
    line-height: 1.55;
  }
  /* Крупная цифра промокода в Apply — тоже во vw, с переносом. */
  .apply__promo-code {
    font-size: clamp(34px, 10.5vw, 64px);
    word-break: break-word;
  }

  /* html.no-3d: WebGL-звёзды фон-сцены (scene-bg.mjs) тут не грузятся —
     canvas остаётся пустым, а звёздное поле рисуется на CSS ниже (см. секцию
     «no-3d»). Раньше здесь стоял display:none, из-за чего фон был чёрным. */
}

@media (max-width: 520px) {
  .chapter__title {
    font-size: clamp(27px, 10.2vw, 44px);
  }
  .chapter__title--poem {
    font-size: clamp(22px, 8.2vw, 36px);
  }
}

/* =========================================================================
   МОБИЛЬНЫЙ ОБЛЕГЧЁННЫЙ РЕЖИМ (html.no-3d — телефоны/планшеты).
   3D уже отключён (см. bootstrap.js + динамический импорт сцен). Здесь убираем
   тяжёлые для мобильных GPU вещи, из-за которых вкладка тормозила/перезагружалась:
     • backdrop-filter blur (постоянные репейнты стекла);
     • бесконечные фоновые анимации (зерно, aurora, dust, vignette);
     • дорогие тени/фильтры на декоре.
   Цель: чистая статичная картинка, быстрый вход, доступный дашборд.
   ========================================================================= */
html.no-3d *,
html.no-3d *::before,
html.no-3d *::after {
  /* Размытие стекла — самая частая причина лагов и вылетов на мобильных GPU.
     Фоны панелей заданы полупрозрачным цветом, поэтому без блюра они читаемы. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.no-3d .grain {
  /* Зерно во весь экран перерисовывалось 6 раз/сек — статично и чуть тише. */
  animation: none !important;
  opacity: 0.05;
}

html.no-3d .site-gate__aurora,
html.no-3d .site-gate__dust,
html.no-3d .bg-vignette,
html.no-3d .site-gate__vignette {
  animation: none !important;
}

/* Пустой canvas звёзд гейта (на мобильных не рисуется — см. script.js). */
html.no-3d .site-gate__stars {
  display: none !important;
}

/* Звёздный фон для телефонов. На ПК звёзды рисует Three.js в #bgCanvas
   (scene-bg.mjs); в html.no-3d WebGL отключён, и фон оставался пустым чёрным.
   Возвращаем ту же атмосферу лёгким статичным полем чисто на CSS — только
   radial-gradient, без WebGL и без анимации: нулевая нагрузка на GPU, ничего
   не лагает и не роняет вкладку на слабых устройствах. Поле фиксировано
   (inset:0) и просвечивает сквозь прозрачные секции на всём скролле. */
html.no-3d #bgCanvas {
  display: block !important;
  pointer-events: none;
  cursor: default;
  background-color: transparent;
  background-repeat: repeat;
  /* Два тайла разного размера (240 и 170) множатся по экрану и перекрываются —
     получается плотное, но нерегулярное поле (без видимой сетки повторов). */
  background-image:
    /* --- слой A: тайл 240×240, 12 звёзд --- */
    radial-gradient(1.6px 1.6px at 18px 32px, rgba(255, 255, 255, 0.92), transparent 60%),
    radial-gradient(1px 1px at 120px 60px, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 200px 110px, rgba(255, 255, 255, 0.72), transparent 60%),
    radial-gradient(1px 1px at 70px 180px, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 150px 210px, rgba(255, 255, 255, 0.82), transparent 60%),
    radial-gradient(1px 1px at 225px 30px, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 45px 120px, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 190px 175px, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 95px 95px, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 135px 145px, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 30px 220px, rgba(255, 255, 255, 0.52), transparent 60%),
    radial-gradient(1.3px 1.3px at 215px 200px, rgba(255, 255, 255, 0.66), transparent 60%),
    /* --- слой B: тайл 170×170, 8 звёзд (смещённый ритм) --- */
    radial-gradient(1px 1px at 20px 25px, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 90px 50px, rgba(255, 255, 255, 0.66), transparent 60%),
    radial-gradient(1px 1px at 150px 100px, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 55px 140px, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 120px 155px, rgba(255, 255, 255, 0.48), transparent 60%),
    radial-gradient(1px 1px at 160px 40px, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 30px 90px, rgba(255, 255, 255, 0.72), transparent 60%),
    radial-gradient(1px 1px at 100px 120px, rgba(255, 255, 255, 0.46), transparent 60%);
  background-size:
    240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px,
    240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px,
    170px 170px, 170px 170px, 170px 170px, 170px 170px, 170px 170px, 170px 170px,
    170px 170px, 170px 170px;
}

/* Док выбора направления держался на блюре — без него уплотняем фон, чтобы
   текст оставался чётким и не «просвечивал». */
html.no-3d .intro-dock {
  background: rgba(6, 7, 10, 0.9);
}

/* =========================================================================
   СТАТИЧНЫЕ КАРТИНКИ ВМЕСТО 3D (только в html.no-3d — телефоны/слабые GPU).
   Логотип Hero, монета Coin и персонажи «Состава» рендерятся как обычные
   картинки: тот же вид, что на ПК, но без WebGL, лагов и вылетов вкладки.
   На десктопе эти элементы скрыты — там работает 3D.
   ========================================================================= */
.hero-static-logo,
.coin__static,
.roster-carousel__static {
  display: none;
}

/* ---- Скролл без анимаций: свободный нативный, без snap и smooth ---- */
html.no-3d {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}
html.no-3d .hero-panel,
html.no-3d .coin,
html.no-3d .fleet,
html.no-3d .apply,
html.no-3d .community {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

/* Контент появляется сразу — без reveal-анимаций на скролле. */
html.no-3d [data-reveal],
html.no-3d [data-reveal-stagger] [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---- Hero: статичный логотип на первом экране (как 3D-логотип на ПК) ---- */
html.no-3d .hero-static-logo {
  display: flex;
  position: absolute;
  inset: 0 0 auto 0;
  height: 100svh;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1; /* за текстом панелей (.hero__panels = 2), как 3D-логотип */
}
html.no-3d .hero-static-logo img {
  width: min(72vw, 460px);
  height: auto;
  opacity: 0.97;
}
/* Canvas лёгкого 3D-логотипа (scene-logo.mjs). По умолчанию скрыт — виден
   статичный webp. Когда модуль успел инициализировать сцену, на контейнере
   появляется .is-3d-ready: показываем canvas вместо картинки. Пропорции и
   ширина — как у статичного лого, чтобы 3D встал ровно на его место. */
html.no-3d .hero-static-logo__canvas {
  display: none;
  /* Квадратная и просторная площадка вместо узкого прямоугольника: логотип
     можно свободно крутить пальцем, и при наклоне его не обрезает краями
     (камера кадрирует по описанной сфере — см. scene-logo.mjs). */
  width: min(92vw, 460px);
  aspect-ratio: 1 / 1;
  height: auto;
}
html.no-3d .hero-static-logo.is-3d-ready .hero-static-logo__canvas {
  display: block;
}
html.no-3d .hero-static-logo.is-3d-ready img {
  display: none;
}

/* ---- Coin: статичная золотая монета вместо 3D-канваса ---- */
html.no-3d .coin__canvas,
html.no-3d .coin__emblem--fallback {
  display: none !important;
}
html.no-3d .coin__static {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 190, 70, 0.35));
}
/* На телефонах 3D-канвас отключён, поэтому статичную монету ставим в правый
   верхний угол рамки — рядом с заголовком «NOCAP COIN» (как в дизайн-референсе
   nocapcoinmobiletrue), а не у нижнего CTA. .coin__visual позиционируется
   относительно .coin__frame. Перебивает мобильное правило .coin__visual {bottom}
   за счёт большей специфичности (.no-3d). */
html.no-3d .coin__visual {
  top: clamp(28px, 7vw, 48px);
  bottom: auto;
  right: clamp(10px, 3.5vw, 24px);
  transform: none;
  /* Уменьшили монету — раньше до 31vw/150px и она перекрывала заголовок «Nocap
     Coin» и часть текста. */
  width: clamp(72px, 19vw, 104px);
}
/* Тёплое свечение под монетой держим статичным (без дыхания/перерисовок). */
html.no-3d .coin__glow {
  opacity: 0.8;
  transform: scale(1);
  animation: none !important;
}

/* Без backdrop-blur (отключён на no-3d) полупрозрачные панели оверлеев
   просвечивали — делаем фон плотным, чтобы контент читался. ВАЖНО: у roster
   панель ПОЛНОСТЬЮ непрозрачна (#08090D) — ровно в этот цвет запечён фон
   мобильных видео персонажей (Ncharacter.mobile.mp4), поэтому видео сливается
   с панелью без видимого прямоугольника. */
html.no-3d .roster-overlay__panel {
  background: #08090d;
  /* «Рамки»: запрещаем ГОРИЗОНТАЛЬНУЮ прокрутку/пан. Широкий кадр видео 16:9
     торчит за края панели, а при overflow:auto его можно было тянуть влево/вправо
     (в т.ч. по диагонали при скролле вниз). Скроллим строго вертикально. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
html.no-3d .archive-overlay__panel {
  background: rgba(8, 9, 13, 0.94);
}

/* ---- Состав на мобилке: платформу под ногами и напольный круг-деко (оба внутри
   .roster-carousel__pedestal) НЕ показываем (по просьбе). Орбитальные звёзды вокруг
   персонажа ОСТАВЛЯЕМ — лёгкое 3D-окружение как на ПК (CSS-3D, без WebGL). ---- */
html.no-3d .roster-carousel__pedestal {
  display: none !important;
}
/* Кольцо-контейнер (3D-якорь звёзд, сам невидим: 0×0, без фона) поднимаем НАД
   непрозрачным видео героя (z6) — иначе звёзды-дети окажутся под ним. */
html.no-3d .roster-carousel__ring {
  z-index: 7;
}
html.no-3d .roster-carousel__stars {
  display: block;
}
/* Постер героя на no-3d не показываем: у hero1/2/4 фон #000 даёт чёрный шов с
   панелью до старта видео. Источник истины — запечённый mp4 (#08090D), без шва. */
html.no-3d .roster-carousel__static {
  display: none !important;
}
/* В зоне анимации НЕ перехватываем жесты: на мобилке свайп влево/вправо (драг
   кольца) не нужен, а touch-action:none мешал обычному скроллу панели пальцем
   по персонажу. pointer-events:none → касания проходят на панель (скролл), драг
   карусели не запускается. Звёзды/видео внутри — чисто декоративные. */
html.no-3d .roster-carousel__viewport {
  pointer-events: none;
  touch-action: auto;
  cursor: default;
}
html.no-3d .roster-carousel__static {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  z-index: 5;
  /* Постер плавно скрывается, когда поверх него заиграло видео героя. */
  transition: opacity 0.4s var(--ease);
}
/* Видео активного героя (downscale H.264, фон запечён в цвет панели #08090D —
   непрозрачное, поэтому играет и на iOS). ВАЖНО: держим строго в пределах
   карусели (height:100%, bottom:0) — иначе непрозрачный кадр 16:9 вылез бы
   вверх и перекрыл карточки (карусель — отдельная строка грида под ними).
   Сбрасываем десктопные scale-трансформы (id перебивает .is-ready). */
html.no-3d #rosterVideoWrap {
  display: flex !important;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  aspect-ratio: 16 / 9;
  max-width: none;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  z-index: 6;
}
html.no-3d #rosterVideoWrap.is-playing {
  opacity: 1;
}
html.no-3d #rosterVideoWrap .roster-carousel__video {
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
}
/* Когда видео заиграло — гасим статичный постер под ним (не двоит силуэт). */
html.no-3d #rosterVideoWrap.is-playing ~ .roster-carousel__static {
  opacity: 0;
}