/* IMPLANT — экраны, карточки, анимации */

/* ---------- Фон: красное звёздное поле (js/starfield.js) ---------- */
.starfield {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* затемнение сверху и снизу (как в исходном компоненте), чтобы текст читался */
.starfield-veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,2,2,.7) 0%, transparent 18%, transparent 75%, rgba(7,2,2,.8) 100%);
}

/* ---------- Экраны ---------- */
.screen { display: none; }
.screen.is-active { display: block; }

.wrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---------- Единая шапка: логотип всегда в одной точке ---------- */
:root { --appbar-h: 64px; }
.appbar {
  /* без position/z-index: иначе mix-blend-mode логотипа не видит фон и кадр становится чёрным прямоугольником */
  padding-top: env(safe-area-inset-top);
}
.appbar__in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  height: var(--appbar-h);
  border-bottom: var(--line);
}
.appbar__logo {
  display: block;
  flex: none;
  width: 168px;              /* высота ≈ 50 px */
  margin-left: -9px;         /* поле внутри кадра логотипа */
  line-height: 0;
}
.appbar__logo img,
.appbar__logo video {
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 384;
  object-fit: contain;
  mix-blend-mode: screen;    /* чёрная подложка кадра растворяется в фоне */
}
.appbar__meta {
  min-width: 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted);
  text-align: right;
  white-space: pre-line;     /* перенос строки в data-title */
  opacity: .55;
}
.appbar__dot {
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 6px;
  vertical-align: 1px;
  background: var(--accent);
  box-shadow: var(--glow-accent);
  animation: blink 1.6s steps(2, jump-none) infinite;
}

/* Строка-шапка экрана результата (под логотипом) */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-bottom: var(--line);
  color: var(--muted);
}
.topbar b { color: var(--text); font-weight: 700; }
.appbar__meta[hidden] { display: none; }

/* ---------- Кнопки ---------- */
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;               /* ≥ 18 px жирный: крупный текст, порог 3:1 */
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.btn:active { transform: scale(.98); }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 110, 98, .35), 0 8px 28px -8px rgba(226, 53, 47, .7);
}
.btn--primary:hover { background: #ec4038; }

/* Угловые скобки-«прицел» вокруг кнопки */
.btn--primary::before,
.btn--primary::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--accent-hi);
  pointer-events: none;
}
.btn--primary::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.btn--primary::after  { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }

.btn__arrow { font-family: var(--font-mono); font-weight: 400; }

.link-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
}
.link-back:hover { color: var(--text); }

/* ---------- Экран 0: boot ---------- */
.boot {
  /* под шапкой: логотип в шапке не двигается и во время загрузки */
  position: fixed;
  inset: calc(var(--appbar-h) + env(safe-area-inset-top)) 0 0 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--bg);
  /* страховка без JS: сам уходит через 1,2 с */
  animation: boot-out .2s linear 1s forwards;
}
.boot.is-done { display: none; }
.boot__core { position: relative; width: min(80vw, 300px); }
.boot__line { color: var(--muted); text-align: center; animation: glitch-text .9s steps(1, end) .1s 1; }
.boot__bar { height: 2px; margin-top: 12px; background: var(--surface); overflow: hidden; }
.boot__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  box-shadow: var(--glow-accent);
  transform-origin: left;
  animation: boot-fill 1s var(--ease) forwards;
}
.boot__glitch {
  position: absolute;
  inset: -40% -6%;
  pointer-events: none;
  background:
    linear-gradient(transparent 0 22%, rgba(226,53,47,.55) 22% 28%, transparent 28% 61%, rgba(242,243,245,.35) 61% 64%, transparent 64%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: glitch-bars .9s steps(1, end) .1s 1;
}
@keyframes boot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.boot__skip { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); color: var(--surface); }

/* ---------- Экран 1: hero — один экран без прокрутки ---------- */
.hero {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--appbar-h) - env(safe-area-inset-top));
  height: calc(100dvh - var(--appbar-h) - env(safe-area-inset-top));
  min-height: 460px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.hero__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 2vh 0;
}
.hero__title {
  font-size: clamp(28px, min(10vw, 6vh), 50px);
  line-height: .98;
  overflow-wrap: break-word;
}
.hero__text {
  font-size: clamp(15px, 2.5vh, 18px);
  line-height: 1.45;
  color: #d5d8de;
}
.hero__cta { flex: none; }
.hero__sub {
  margin: 8px 0 clamp(12px, 2.2vh, 18px);
  font-size: clamp(18px, min(5.6vw, 3.4vh), 26px);
  line-height: 1.08;
}

/* ---------- Текстовые вставки-разделители (маркировка, логи) ---------- */
.tag-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: clamp(10px, 2vh, 18px) 0;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .06em;
}
.barcode {
  flex: none;
  width: 44px;
  height: 12px;
  opacity: .75;
  background:
    linear-gradient(90deg,
      var(--text) 0 2px, transparent 2px 3px, var(--text) 3px 4px, transparent 4px 7px,
      var(--text) 7px 10px, transparent 10px 11px, var(--text) 11px 12px, transparent 12px 14px,
      var(--text) 14px 15px, transparent 15px 17px, var(--text) 17px 19px, transparent 19px 22px) 0 0 / 22px 100% repeat-x;
}
.tag-rule__txt { flex: none; white-space: nowrap; }
.tag-rule__line {
  flex: 1;
  min-width: 12px;
  height: 7px;
  background:
    repeating-linear-gradient(90deg, #3a3f4a 0 1px, transparent 1px 6px) 0 100% / 100% 4px no-repeat,
    linear-gradient(#3a3f4a, #3a3f4a) 0 50% / 100% 1px no-repeat;
}
.tag-rule__flag { flex: none; color: var(--accent-hi); font-weight: 700; }

.log-line {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .05em;
}
.log-line__p { color: var(--accent-hi); }
.log-line__cursor {
  display: inline-block;
  width: 7px; height: 12px;
  margin-left: 4px;
  vertical-align: -2px;
  background: var(--accent-hi);
  animation: blink 1s steps(2, jump-none) infinite;
}

/* Глитч слова: цветные копии-срезы поверх, двигается только transform */
.glitch { position: relative; display: inline-block; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glitch::before {
  color: var(--accent);
  clip-path: inset(18% 0 52% 0);
  animation: glitch-a 3.2s steps(1, end) infinite;
}
.glitch::after {
  color: var(--text);
  clip-path: inset(62% 0 14% 0);
  animation: glitch-b 3.2s steps(1, end) infinite;
}
@keyframes glitch-a {
  0%, 86%, 100% { transform: none; opacity: 0; }
  88% { transform: translateX(-4px); opacity: 1; }
  91% { transform: translateX(3px);  opacity: 1; }
  94% { transform: translateX(-1px); opacity: 1; }
}
@keyframes glitch-b {
  0%, 87%, 100% { transform: none; opacity: 0; }
  89% { transform: translateX(5px);  opacity: 1; }
  93% { transform: translateX(-3px); opacity: 1; }
}

/* ---------- HUD-панель с угловыми скобками (ref-01) ---------- */
.hud {
  position: relative;
  padding: 20px 16px;
  background: linear-gradient(180deg, rgba(16,17,21,.92), rgba(16,17,21,.75));
  border: var(--line);
  border-radius: var(--radius);
}
.hud::before,
.hud::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--accent);
  pointer-events: none;
}
.hud::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hud::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.hud__title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--surface);
}


/* ---------- Футер ---------- */
.footer {
  padding-top: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  border-top: var(--line);
  color: var(--muted);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--muted);
  font-size: 14px;
}
.footer__copy { margin-top: 8px; }

/* ---------- Анимации (только transform / opacity) ---------- */
@keyframes blink { 50% { opacity: .2; } }
@keyframes boot-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes glitch-bars {
  0%   { opacity: 1; transform: translateX(-4px); }
  12%  { opacity: 0; }
  24%  { opacity: 1; transform: translateX(6px) scaleY(1.4); }
  36%  { opacity: 0; }
  58%  { opacity: 1; transform: translateX(-2px) translateY(8px); }
  70%  { opacity: 0; }
}
@keyframes glitch-text {
  0%   { opacity: .4; transform: translateX(2px); }
  15%  { opacity: 1;  transform: none; }
  40%  { opacity: .3; transform: translateX(-3px); }
  55%  { opacity: 1;  transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .boot { display: none; }
  .appbar__dot, .log-line__cursor { animation: none; }
  .glitch::before, .glitch::after { display: none; }
}

/* =================== ДИАГНОСТИКА (экраны 2–7) =================== */
.q {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--appbar-h) - env(safe-area-inset-top));
  min-height: calc(100dvh - var(--appbar-h) - env(safe-area-inset-top));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.q .link-back { align-self: flex-start; margin-top: auto; padding-top: 12px; }

/* Статус и сегментный прогресс-бар (ref-01) */
.status { padding-top: 14px; }
.status__row {
  display: flex;
  justify-content: space-between;
  color: var(--text);
}
.status__pct { color: var(--mark); font-weight: 700; }
.segbar {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 3px;
  margin-top: 8px;
}
.segbar i {
  height: 6px;
  background: var(--surface);
}
.segbar i.on { background: var(--accent); box-shadow: 0 0 6px rgba(226, 53, 47, .55); }

.q__title {
  margin-top: 22px;
  margin-bottom: 18px;
  font-size: clamp(26px, 8.3vw, 36px);
  line-height: 1.02;
}
.q__title--sm { font-size: clamp(22px, 6.9vw, 30px); }
.q__num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-hi);
  letter-spacing: .06em;
}

.log { margin-top: 22px; color: var(--muted); }
.log + .q__title { margin-top: 10px; }

/* Кнопки-варианты */
.opts { display: grid; gap: 10px; }
.opts--grid { grid-template-columns: 1fr 1fr; }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 1.25;
  transition: border-color .15s, box-shadow .2s, transform .15s var(--ease);
}
.opts--grid .opt { min-height: 50px; padding: 10px 12px; font-size: 15px; }
.opt::after {
  /* маркер-«прицел» справа */
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin-left: auto;
  border: 1px solid var(--muted);
  opacity: .5;
}
.opt { gap: 12px; }
.opts--grid .opt::after { display: none; }
.opt:active { transform: scale(.985); }
.opt:hover { border-color: #2b2f38; }
.opt.is-selected {
  border-color: var(--accent);
  box-shadow: var(--glow-accent), inset 0 0 0 1px rgba(226, 53, 47, .35);
}
.opt.is-selected::after { border-color: var(--accent); background-color: var(--accent); opacity: 1; }
.opt--ghost {
  margin-top: 10px;
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}

/* ---------- Экран 2: карточки-«пути» (ref-02) ---------- */
.paths { display: grid; gap: 14px; }
.path {
  --c: var(--muted);
  --glow: var(--glow-muted);
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--c);
  border-radius: var(--radius);
  box-shadow: var(--glow);
  transition: box-shadow .2s, transform .15s var(--ease);
}
.path--street { --c: var(--mark);   --glow: var(--glow-mark); }
.path--corp   { --c: var(--accent); --glow: var(--glow-accent); }
.path:active { transform: scale(.985); }
.path.is-selected { box-shadow: 0 0 0 1px var(--c), 0 0 26px color-mix(in srgb, var(--c) 60%, transparent); }

.path__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #0c0d10, #15171c);
  border-bottom: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.path__art img { width: 100%; height: 100%; object-fit: cover; }
.bracket-icon { width: 72px; height: 72px; color: var(--text); }
.bracket-icon__frame { color: var(--c); stroke: var(--c); }

.path__body {
  display: block;
  padding: 12px 14px 14px;
  border-left: 3px solid var(--c);
  margin: 0;
}
.path__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.path__name i {
  font-style: normal;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
}
.path__desc { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* ---------- Экран 3б: доступ закрыт ---------- */
.block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0;
}
.block .log { margin-top: 0; }
.block__title { margin-top: 10px; font-size: 40px; }
.block__text { margin-top: 14px; color: var(--muted); font-size: 17px; }
.block__back { margin-top: 24px; justify-content: center; color: var(--text); }
.block__back::after { display: none; }

/* ---------- Экран 4: поиск страны ---------- */
.search { position: relative; margin-top: 18px; }
.search__label { display: block; margin-bottom: 6px; }
.search__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  font-size: 16px;               /* ≥ 16 px: iOS не зумит поле */
  scroll-margin-top: 12px;
}
.search__input::placeholder { color: #6c7280; }
.search__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow-accent); }
.search__results {
  margin-top: 6px;
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.search__results:empty { display: none; }
.search__results li + li { border-top: 1px solid var(--surface); }
.search__results button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  text-align: left;
}
.search__results button:hover,
.search__results button:focus-visible { background: var(--surface); }
.search__results .mono { color: var(--muted); }
.search__empty { padding: 12px 14px; color: var(--muted); font-size: 14px; }

/* ---------- Экран 6: карточки-«досье» ---------- */
.dossiers { display: grid; gap: 12px; }
.dossier {
  position: relative;
  display: block;
  width: 100%;
  padding: 14px 14px 16px;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .2s, opacity .2s, transform .15s var(--ease);
}
.dossier::before,
.dossier::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--accent);
  opacity: .7;
}
.dossier::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.dossier::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.dossier:active { transform: scale(.985); }
.dossier.is-selected { border-color: var(--accent); box-shadow: var(--glow-accent); }
.dossier__head { display: flex; justify-content: space-between; align-items: center; color: var(--accent-hi); }
.dossier__name {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
}
.dossier__desc { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.market {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border: 1px solid var(--surface);
  border-radius: 2px;
  color: var(--muted);
  font-size: 11px;
}
.market svg { width: 13px; height: 13px; }
.dossiers.is-locked .dossier { opacity: .4; pointer-events: none; }

.consent { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.consent a { color: var(--text); }
.consent--check { display: flex; gap: 12px; align-items: center; min-height: var(--tap); font-size: 14px; }
.consent--check[hidden] { display: none; }
.consent--check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }

/* ---------- Экран 7: результат (ref-05 + ref-01) ---------- */
.scene {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  padding: 4px 14px 18px;
  text-align: center;
  border: 1px solid rgba(169, 175, 188, .22);   /* тонкая рамка-«окно» */
  background: radial-gradient(70% 45% at 50% 52%, rgba(226, 53, 47, .16), transparent 70%);
}
.scene .log { margin-top: 18px; }
.scene__title {
  margin-top: 10px;
  font-size: clamp(22px, 7vw, 30px);
  line-height: 1.05;
}

.orb { margin: 26px 0 18px; display: flex; flex-direction: column; align-items: center; }
.orb__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 184px;
  height: 184px;
  padding: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #3a0806 0%, #7d1612 45%, var(--accent) 78%, #ff7b70 100%);
  box-shadow: 0 0 0 1px rgba(255, 110, 98, .5), 0 0 40px rgba(226, 53, 47, .55), 0 0 90px rgba(226, 53, 47, .25);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.orb__btn::before {
  /* медленная пульсация свечения (transform/opacity) */
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 110, 98, .55);
  animation: pulse 2.4s var(--ease) infinite;
}
.orb__btn span { position: relative; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.orb__btn:active { transform: scale(.97); }
.orb__hint { margin-top: 14px; }

.dossier-card { width: 100%; text-align: left; padding: 14px; }
.dossier-card p + p { margin-top: 6px; }
.dossier-card b { color: var(--text); }

.link-copy {
  min-height: var(--tap);
  margin-top: 10px;
  padding: 0 8px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: none;
}
.copy-status { min-height: 18px; }

.glitch-in { animation: glitch-text .7s steps(1, end) 1; }

@keyframes pulse {
  0%   { transform: scale(.94); opacity: .9; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .orb__btn::before { animation: none; opacity: .5; transform: none; }
  .glitch-in { animation: none; }
}
[data-screen="result"] .status__row { display: none; }
[data-screen="result"] .status { padding-top: 10px; }

/* =================== Служебные страницы: privacy, terms, 404 =================== */
.doc { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.doc__home { color: var(--muted); text-decoration: none; }
.doc__draft {
  margin-top: 20px;
  padding: 10px 12px;
  border: 1px dashed var(--mark);
  color: var(--mark);
}
.doc h1 { margin-top: 20px; font-size: clamp(28px, 9vw, 40px); }
.doc h2 {
  margin-top: 28px;
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.doc p, .doc li { margin-top: 10px; color: #d5d8de; font-size: 16px; line-height: 1.55; }
.doc ul li { position: relative; padding-left: 18px; }
.doc ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--accent); }
.doc .meta { margin-top: 8px; }

.err {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--appbar-h) - env(safe-area-inset-top));
  min-height: calc(100dvh - var(--appbar-h) - env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.err__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px 0; }
.err__code { font-family: var(--font-display); font-weight: 700; font-size: 96px; line-height: 1; color: var(--accent); text-shadow: 0 0 24px rgba(226, 53, 47, .45); }
.err__title { margin-top: 16px; font-size: clamp(28px, 9vw, 40px); }
.err__text { margin-top: 12px; color: var(--muted); }
.err .btn { margin-top: 28px; }

/* =================== Диагностика без прокрутки (360×640 и ниже) ===================
   Экраны 2–7 ужимаются под высоту окна: размеры привязаны к vh,
   карточки экрана 2 делят оставшуюся высоту поровну. */
.q { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
.q .link-back { min-height: 40px; padding-top: 2px; }
.status { padding-top: clamp(8px, 1.6vh, 14px); }
.segbar { margin-top: 6px; }
.q__title {
  margin-top: clamp(10px, 2vh, 20px);
  margin-bottom: clamp(10px, 1.8vh, 16px);
  font-size: clamp(22px, min(7.6vw, 4.6vh), 34px);
}
.q__title--sm { font-size: clamp(19px, min(6.2vw, 3.6vh), 28px); }
.q__num { margin-bottom: 4px; font-size: 13px; }
.log { margin-top: clamp(10px, 2vh, 20px); }

.opts { gap: clamp(6px, 1.2vh, 10px); }
.opt { min-height: clamp(44px, 7.6vh, 54px); padding-top: 8px; padding-bottom: 8px; }
.opts--grid .opt { min-height: clamp(44px, 7vh, 50px); }
.opt--ghost { margin-top: clamp(6px, 1.2vh, 10px); }

/* Экран 2: три карточки делят высоту, иллюстрация сжимается */
.paths {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.4vh, 14px);
}
.path { min-height: 0; }
.path__art { flex: 1 1 auto; height: auto; min-height: 30px; }
.bracket-icon { width: auto; height: min(64px, 80%); max-height: 64px; aspect-ratio: 1; }
.path__body { flex: none; padding: 8px 12px 10px; }
.path__name { font-size: 17px; }
.path__desc { margin-top: 2px; font-size: 13px; line-height: 1.3; }

/* Экран 4 */
.search { margin-top: clamp(8px, 1.6vh, 14px); }
.search__input { min-height: 46px; padding: 10px 14px; }

/* Экран 6 */
.dossiers { gap: clamp(6px, 1.2vh, 10px); }
.dossier { padding: clamp(8px, 1.4vh, 12px) 12px; }
.dossier__name { margin-top: 4px; font-size: 15px; }
.dossier__desc { margin-top: 3px; font-size: 13px; line-height: 1.35; }
.consent { font-size: 12px; }

/* Экран 7 */
.q--result .topbar { min-height: 40px; }
.scene { margin-top: clamp(8px, 1.4vh, 14px); padding: 0 12px clamp(8px, 1.4vh, 14px); }
.scene .log { margin-top: clamp(10px, 1.8vh, 18px); }
.scene__title { margin-top: 6px; font-size: clamp(19px, min(6.4vw, 3.6vh), 28px); }
.orb { margin: clamp(10px, 2.4vh, 24px) 0 clamp(6px, 1.4vh, 14px); }
.orb__btn {
  width: clamp(160px, 27vh, 184px);   /* тач-зона не меньше 160 × 160 */
  height: clamp(160px, 27vh, 184px);
  font-size: 18px;
}
.orb__hint { margin-top: clamp(8px, 1.4vh, 14px); }
.dossier-card { padding: 10px 12px; }
.dossier-card p + p { margin-top: 4px; }
.link-copy { min-height: 40px; margin-top: 4px; }
.copy-status { min-height: 0; }

/* Экран 2: фиксированная высота — карточки делят её поровну, не раздвигая страницу */
[data-screen="level"] .q {
  height: calc(100vh - var(--appbar-h) - env(safe-area-inset-top));
  height: calc(100dvh - var(--appbar-h) - env(safe-area-inset-top));
  min-height: 420px;
}
.path { overflow: hidden; }
.bracket-icon { height: clamp(26px, 8vh, 64px); max-height: 90%; }

/* Низкие экраны (WebView TikTok/Instagram с панелями) */
@media (max-height: 620px) {
  .path__body { padding: 6px 10px 8px; }
  .path__name { font-size: 15px; }
  .path__desc { font-size: 12px; }
  .q__title--sm { font-size: 18px; }
  .dossier { padding: 7px 10px; }
  .dossier__head { font-size: 10px; }
  .market { padding: 1px 5px; font-size: 10px; }
  .dossier__name { margin-top: 2px; font-size: 14px; }
  .dossier__desc { margin-top: 2px; font-size: 12px; line-height: 1.3; }
  .consent { font-size: 11px; line-height: 1.3; }
  .q .link-back { min-height: 36px; }
}


/* Экран 6: «ачивки» проектов — значок в скобках по ref-03, красный, «рисованный» */
.dossier {
  display: grid;
  grid-template-columns: clamp(48px, 9.4vh, 60px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.dossier .dossier__desc { font-size: 12px; line-height: 1.3; }
.dossier .dossier__name { font-size: 14px; }
.dossier__body { display: block; min-width: 0; }
.dossier__ach { display: block; color: var(--mark); }   /* решение владельца 06.11: жёлтые (янтарные) иконки */
.ach { display: block; width: 100%; height: auto; overflow: visible; }
.ach .ach-cut { fill: var(--bg-2); }
.ach .ach-cut-stroke { stroke: var(--bg-2); }
.ach .ach-badge rect, .ach .ach-badge > path:not(.ach-cut) { stroke: var(--bg-2); stroke-width: 1.6; paint-order: stroke; }
.ach text { font-family: var(--font-mono); font-size: 8.6px; font-weight: 700; }
.dossier.is-selected .dossier__ach { filter: drop-shadow(0 0 6px rgba(242, 193, 78, .55)); }

/* Кнопка-ответ = карта-«шард» как в примере владельца (06.11):
   рамка, сверху плашка «CONNECTION 06.11.NN», уголки по краям, светящийся текст по центру.
   Выбран: плашка и рамка загораются красным. */
.opts { counter-reset: shard; gap: clamp(7px, 1.3vh, 10px); }
.opt {
  --frame: rgba(255, 110, 98, .55);
  --plate: #2a4374;                           /* плашка как в примере; поменять цвет — одна строка */
  counter-increment: shard;
  justify-content: center;
  text-align: center;
  min-height: clamp(48px, 8.6vh, 60px);
  padding: 19px 14px 7px;
  background:
    radial-gradient(90% 120% at 50% 70%, rgba(226, 53, 47, .14), transparent 70%),
    #0d0606;
  border: 1px solid var(--frame);
  border-radius: 3px;
  color: #ff8a7e;
  text-shadow: 0 0 8px rgba(226, 53, 47, .55);
  box-shadow: none;
}
/* плашка сверху с надписью */
.opt::before,
.opt::after {
  position: absolute;
  margin: 0;
  border: 0;
  opacity: 1;
  pointer-events: none;
}
.opt::before {
  content: "CONNECTION 06.11." counter(shard, decimal-leading-zero);
  top: 3px; left: 3px; right: 3px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--plate);
  border-radius: 2px 2px 0 0;
  color: #d9e2f5;
  text-shadow: none;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .12em;
}
/* уголки-«прицел» в нижних и верхних углах корпуса */
.opt::after,
.opts--grid .opt::after {
  content: "";
  display: block;
  top: 19px; bottom: 4px; left: 5px; right: 5px;
  width: auto; height: auto;
  background:
    linear-gradient(var(--frame), var(--frame)) left top / 6px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) left top / 1px 6px no-repeat,
    linear-gradient(var(--frame), var(--frame)) right top / 6px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) right top / 1px 6px no-repeat,
    linear-gradient(var(--frame), var(--frame)) left bottom / 6px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) left bottom / 1px 6px no-repeat,
    linear-gradient(var(--frame), var(--frame)) right bottom / 6px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) right bottom / 1px 6px no-repeat;
}
.opts--grid .opt { padding: 19px 8px 7px; font-size: 15px; }
.opt:hover { --frame: rgba(255, 110, 98, .85); }
.opt.is-selected {
  --frame: var(--accent-hi);
  --plate: var(--accent);
  color: #ffd3cc;
  box-shadow: 0 0 16px rgba(226, 53, 47, .5), inset 0 0 18px rgba(226, 53, 47, .18);
}
.opt.is-selected::after { background-color: transparent; }
.opt--ghost { margin-top: clamp(7px, 1.3vh, 10px); border-style: dashed; }
/* «Изменить возраст» — не ответ, обычная кнопка без плашки */
.block__back { padding: 8px 16px; color: var(--text); text-shadow: none; border-color: var(--surface); background: var(--bg-2); }
.block__back::before, .block__back::after { display: none; }


/* =================== Правки владельца 06.11 (вечер) ===================
   1) шаги 01 и 05 — в стиле карточек-ответов; 2) полупрозрачная заливка всех карточек;
   4) без плашки CONNECTION; 5) экран Telegram на всю высоту, кнопка в центре. */

/* Общий стиль карточек: ответы, шаг 01, шаг 05 */
.opt, .path, .dossier {
  --frame: rgba(255, 110, 98, .55);
  position: relative;
  background:
    radial-gradient(90% 120% at 50% 70%, rgba(226, 53, 47, .12), transparent 70%),
    rgba(13, 6, 6, .45);                      /* полупрозрачно: звёзды фона просвечивают */
  border: 1px solid var(--frame);
  border-radius: 3px;
  box-shadow: none;
}
.opt:hover, .path:hover, .dossier:hover { --frame: rgba(255, 110, 98, .85); }
.opt.is-selected, .path.is-selected, .dossier.is-selected {
  --frame: var(--accent-hi);
  border-color: var(--frame);
  box-shadow: 0 0 16px rgba(226, 53, 47, .5), inset 0 0 18px rgba(226, 53, 47, .18);
}

/* 4) плашки сверху больше нет — кнопки снова с ровными отступами */
.opt::before { content: none; display: none; }
.opt { padding: 8px 14px; min-height: clamp(44px, 7.6vh, 54px); }
.opts--grid .opt { padding: 8px; min-height: clamp(44px, 7vh, 50px); }

/* уголки-«прицел» на всех карточках */
.opt::after, .opts--grid .opt::after, .path::after, .dossier::after {
  content: "";
  position: absolute;
  display: block;
  top: 4px; bottom: 4px; left: 4px; right: 4px;
  width: auto; height: auto;
  margin: 0; border: 0; opacity: 1;
  pointer-events: none;
  background:
    linear-gradient(var(--frame), var(--frame)) left top / 6px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) left top / 1px 6px no-repeat,
    linear-gradient(var(--frame), var(--frame)) right top / 6px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) right top / 1px 6px no-repeat,
    linear-gradient(var(--frame), var(--frame)) left bottom / 6px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) left bottom / 1px 6px no-repeat,
    linear-gradient(var(--frame), var(--frame)) right bottom / 6px 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) right bottom / 1px 6px no-repeat;
}
.dossier::before { display: none; }

/* 1) Шаг 01: текст по центру, светящееся название; иконка остаётся в цвете уровня */
.path__art { background: none; border-bottom: 0; }
.path__body { border-left: 0; text-align: center; }
.path__name { color: #ff8a7e; text-shadow: 0 0 8px rgba(226, 53, 47, .55); }
.path__desc { color: #c9ccd3; }
.path.is-selected .path__name { color: #ffd3cc; }

/* 1) Шаг 05: текст по центру, светящееся название */
.dossier__body { text-align: center; }
.dossier__head { justify-content: center; gap: 8px; }
.dossier__name { color: #ff8a7e; text-shadow: 0 0 8px rgba(226, 53, 47, .55); }
.dossier .dossier__desc { color: #c9ccd3; }
.dossier.is-selected .dossier__name { color: #ffd3cc; }

/* 3) Глитч: у каждого слова своя задержка, чтобы не мигали хором */
.glitch::before, .glitch::after { animation-delay: var(--gd, 0s); }

/* 5) Экран Telegram на всю высоту: заголовок сверху, кнопка в центре, досье снизу */
[data-screen="result"] .q {
  height: calc(100vh - var(--appbar-h) - env(safe-area-inset-top));
  height: calc(100dvh - var(--appbar-h) - env(safe-area-inset-top));
  min-height: 440px;
  overflow: hidden;
}
.scene { flex: 1 1 auto; min-height: 0; justify-content: flex-start; }
.orb {
  flex: 1 1 auto;
  justify-content: center;
  margin: clamp(8px, 1.6vh, 16px) 0;
}
.orb__btn {
  width: clamp(160px, min(58vw, 31vh), 240px);
  height: clamp(160px, min(58vw, 31vh), 240px);
  font-size: clamp(18px, 2.9vh, 23px);
}
.orb__btn::before { inset: -16px; }
.dossier-card { flex: none; }

/* Шаг 01: иллюстрации персонажей (из REF/8afa…, обрезаны, без иероглифов) */
.path__art { padding: 0; overflow: hidden; border-radius: 2px 2px 0 0; }
.path__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}