:root {
  --bg: #04070d;
  --bg-2: #0a1420;
  --cyan: #22d3ee;
  --cyan-bright: #7ff5ff;
  --cyan-dim: #0e5a6b;
  --line: rgba(34, 211, 238, 0.35);
  --text: #cfeef5;
  --text-dim: #5f8794;
  --font: 'Segoe UI', 'Roboto', system-ui, sans-serif;
  --orange: #ff8c1a;
  --orange-bright: #ffb84d;
  --orange-dim: #7a3d00;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}

html {
  position: fixed;
  height: auto !important;
}

body {
  min-height: var(--app-height, 100dvh);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(34,211,238,0.18), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(34,211,238,0.10), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* Grid floor lines */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.10;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
}

.app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 18px);
  position: relative;
  z-index: 1;
}

/* Header */
header {
  text-align: center;
  flex: 0 0 auto;
}
.logo {
  font-size: 12px;
  letter-spacing: 6px;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
  font-weight: 700;
}
.subtitle {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--text-dim);
  margin-top: 4px;
  text-transform: uppercase;
}

/* Progress */
.progress-wrap { margin: 18px 0 6px; padding-bottom: 1em; }
/* Прогресс прячется, пока опрос не загружен: на экране "откройте в Telegram"
   он показывал бы заглушку из разметки (01 / 12) как настоящий счётчик. */
.progress-wrap.hidden { display: none; }
.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.progress-meta b { color: var(--cyan-bright); text-shadow: 0 0 6px var(--cyan); }
.progress-bar {
  height: 4px;
  background: rgba(34,211,238,0.12);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan), var(--cyan-bright));
  box-shadow: 0 0 12px var(--cyan);
  transition: width 0.5s cubic-bezier(.2,.9,.2,1);
}

/* Обёртка вокруг stage/finish — общая позиционирующая область,
   чтобы .finish (position:absolute; inset:0) растягивался только на неё,
   а не на весь .app (что раньше наезжало на header/progress-bar) */
.stage-wrap {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  margin-top: 20px;
}

/* Card stage */
.stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
}

.card {
  width: 100%;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
  padding: 4px;
  opacity: 0;
  transform: translateX(40px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.card.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

/* Затемнение уходящего вопроса (dimmer) */
.card .dimmer {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  transition: background 0.35s ease;
}

.q-index {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--cyan);
  text-transform: uppercase;
}
.q-index::before {
  content: "◤ ";
  color: var(--cyan-dim);
}
.q-text {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  color: #eafcff;
  text-shadow: 0 0 12px rgba(34,211,238,0.25);
}

.options { display: flex; flex-direction: column; gap: 12px; }

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: linear-gradient(180deg, rgba(10,20,32,0.9), rgba(4,7,13,0.9));
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: border-color .2s, background .2s, transform .1s;
}
.option::before {
  content: "";
  width: 14px; height: 14px;
  border: 1px solid var(--cyan-dim);
  flex: 0 0 auto;
  transform: rotate(45deg);
  transition: all .2s;
}
.option:active { transform: scale(0.98); }
.option.chosen {
  border-color: var(--cyan-bright);
  background: linear-gradient(180deg, rgba(34,211,238,0.18), rgba(10,20,32,0.9));
  box-shadow: 0 0 20px rgba(34,211,238,0.4), inset 0 0 12px rgba(34,211,238,0.15);
  color: #fff;
  animation: zoomPulse 0.4s ease-in-out;
}
@keyframes zoomPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.option.chosen::before {
  background: var(--cyan-bright);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 10px var(--cyan);
}

/* 1-5 rating scale */
.scale {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.scale-btn {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(10,20,32,0.9), rgba(4,7,13,0.9));
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: border-color .2s, background .2s, transform .1s, box-shadow .2s;
}
.scale-btn:active { transform: scale(0.94); }
.scale-btn.chosen {
  border-color: var(--cyan-bright);
  background: linear-gradient(180deg, rgba(34,211,238,0.22), rgba(10,20,32,0.9));
  box-shadow: 0 0 20px rgba(34,211,238,0.45), inset 0 0 12px rgba(34,211,238,0.2);
  color: #fff;
  animation: zoomPulse 0.4s ease-in-out;
}
.scale-legend {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-top: -6px;
}

/* Lightning overlay */
.lightning {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
}
.lightning.strike { animation: flash 0.5s ease-out; }
.lightning svg { width: 100%; height: 100%; }
.bolt {
  stroke: var(--cyan-bright);
  stroke-width: 2.5;
  fill: none;
  filter: drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 14px var(--cyan));
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
.lightning.strike .bolt { animation: draw 0.4s ease-out forwards; }

/* Локальная молния внутри кнопки — тот же эффект, но обрезан по форме кнопки */
.btn-lightning {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-lightning.strike { animation: flash 0.5s ease-out; }
.btn-lightning svg { width: 100%; height: 100%; }
.btn-lightning.strike .bolt { animation: draw 0.4s ease-out forwards; }

@keyframes flash {
  0%   { opacity: 0; background: rgba(34,211,238,0); }
  8%   { opacity: 1; background: rgba(127,245,255,0.55); }
  20%  { background: rgba(34,211,238,0.05); }
  45%  { opacity: 1; background: rgba(127,245,255,0.35); }
  100% { opacity: 0; background: rgba(34,211,238,0); }
}
@keyframes draw {
  0%   { stroke-dashoffset: 1400; opacity: 1; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Loading / error states */
.load-error {
  margin-top: 22px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.load-error.active { display: flex; }
.loading {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 50;
}
.loading.active { display: flex; }
.loading-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.loading-text span {
  display: inline-block;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
  animation: loading-wave 1.2s ease-in-out infinite;
}
.loading-text span:nth-child(1)  { animation-delay: 0.0s; }
.loading-text span:nth-child(2)  { animation-delay: 0.1s; }
.loading-text span:nth-child(3)  { animation-delay: 0.2s; }
.loading-text span:nth-child(4)  { animation-delay: 0.3s; }
.loading-text span:nth-child(5)  { animation-delay: 0.4s; }
.loading-text span:nth-child(6)  { animation-delay: 0.5s; }
.loading-text span:nth-child(7)  { animation-delay: 0.6s; }
.loading-text span:nth-child(8)  { animation-delay: 0.7s; }
.loading-text span:nth-child(9)  { animation-delay: 0.8s; }
.loading-text span:nth-child(10) { animation-delay: 0.9s; }
.loading-text span:nth-child(11) { animation-delay: 1.0s; }
@keyframes loading-wave {
  0%, 60%, 100% {
    transform: translateY(0);
    color: var(--cyan-dim);
    text-shadow: none;
  }
  30% {
    transform: translateY(-10px);
    color: var(--cyan-bright);
    text-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan);
  }
}
.load-error-text {
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 1px;
}
/* Экран "откройте в Telegram". Это отказ авторизации, а не сбой сети, поэтому
   у него свой заголовок и иконка — раскладку берёт у .load-error. */
.auth-error-icon {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px var(--cyan));
}
.auth-error-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cyan-bright);
  text-shadow: 0 0 12px var(--cyan);
}
.auth-error .load-error-text {
  max-width: 320px;
  line-height: 1.6;
}
.intro-offline-note {
  display: none;
  margin-top: 10px;
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: 0.5px;
}
.intro-offline-note.active { display: block; }
.sync-status {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
}
.sync-status.pending { color: var(--cyan); }
.sync-status.error { color: #ff6b6b; }

/* Intro screen */
.intro {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 2;
  opacity: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  transition: opacity .5s ease;
}
.intro.active { opacity: 1; height: auto; pointer-events: auto; }
.intro-frame {
  position: relative;
  padding: 22px 20px;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 18px rgba(34,211,238,0.25), inset 0 0 14px rgba(34,211,238,0.08);
  background: linear-gradient(180deg, rgba(10,20,32,0.7), rgba(4,7,13,0.7));
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.bolt-deco {
  position: absolute;
  width: 48px;
  height: 78px;
  fill: var(--cyan-bright);
  filter: drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 14px var(--cyan));
}
.bolt-tl { top: -39px; left: 12px; }
.bolt-br { bottom: -39px; right: 12px; }
.intro-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  text-shadow: 0 0 10px rgba(34,211,238,0.2);
}
.intro-btn {
  align-self: center;
  padding: 15px 40px;
  background: linear-gradient(180deg, rgba(34,211,238,0.18), rgba(10,20,32,0.9));
  border: 1px solid var(--cyan-bright);
  color: #fff;
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(34,211,238,0.4), inset 0 0 12px rgba(34,211,238,0.15);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: transform .1s, box-shadow .2s;
}
.intro-btn:active { transform: scale(0.96); }
/* Оранжевый вариант кнопки: та же геометрия, палитра из --orange-*. Модификатор
   назван .warm, как у остальных оранжевых элементов приложения. */
.intro-btn.warm {
  background: linear-gradient(180deg, rgba(255,140,26,0.18), rgba(20,12,4,0.9));
  border-color: var(--orange-bright);
  box-shadow: 0 0 20px rgba(255,140,26,0.4), inset 0 0 12px rgba(255,140,26,0.15);
}

/* Finish screen */
.finish {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  overflow-y: auto;
  transition: opacity .5s ease, transform .5s ease;
}
/* Когда контент не влезает — выравниваем по верху, чтобы ничего не обрезалось */
.finish.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  justify-content: safe center;
}

/* Полоса прокрутки результатов в стиле проекта */
.finish {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: var(--cyan) rgba(34,211,238,0.08);
}
.finish::-webkit-scrollbar { width: 8px; }
.finish::-webkit-scrollbar-track {
  background: rgba(34,211,238,0.08);
  border-left: 1px solid var(--line);
}
.finish::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan-dim), var(--cyan), var(--cyan-bright));
  border-radius: 6px;
  box-shadow: 0 0 8px var(--cyan);
}
.finish::-webkit-scrollbar-thumb:hover {
  background: var(--cyan-bright);
}

/* Контейнер результата с внутренним отступом */
.finish-body {
  width: 100%;
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1em;
}
/* Ряд результата: картинка слева, текст справа */
.result-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  text-align: center;
  /* ряд всегда во всю ширину: иначе ряд с коротким текстом (напр. Nexus Keys)
     ужимается и центрируется, и его иконка не совпадает по вертикали с соседними */
  align-self: stretch;
}
.result-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.result-text h2 { margin: 0; font-size: 22px; letter-spacing: 4px; color: #eafcff; text-shadow: 0 0 12px var(--cyan); }
.result-text p { margin: 0; font-size: 13px; color: var(--text-dim); letter-spacing: 1px; max-width: 280px; line-height: 1.5; }
/* Текст для сторис показываем ровно так, как он уйдёт в буфер обмена, включая
   пустые строки перед приглашением: иначе переносы схлопываются и на экране
   текст не совпадает с тем, что вставится в сторис. Ссылка — один длинный
   токен без пробелов, поэтому разрешаем перенос внутри неё. */
#social-networks-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Разделитель между строками результата */
.result-separator {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0;
  opacity: 0.6;
}
.result-separator svg {
  width: 100%;
  max-width: 360px;
  height: 20px;
  overflow: visible;
}
.sep-circle {
  fill: var(--cyan);
  filter: drop-shadow(0 0 8px var(--cyan));
}
.sep-blade {
  fill: var(--cyan-dim);
}
.sep-blade-inner {
  fill: rgba(4, 7, 13, 0.8);
}

/* Описание Nexus Build */
/* Пирамида уровней жизни. Каждая ступень — трапеция с clip-path, нижняя грань
   которой совпадает с верхней гранью следующей, поэтому стопка читается как
   один силуэт. Ширины считает js/life_level.js: они зависят от того, сколько
   ступеней пришло из справочника. */
.pyramid {
  width: 100%;
  max-width: 420px;
  margin: 6px auto 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pyramid-step {
  min-height: 48px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  background: linear-gradient(180deg, rgba(34,211,238,0.10), rgba(10,20,32,0.85));
  border-top: 1px solid rgba(34,211,238,0.22);
}
.pyramid-meta {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-dim);
  white-space: nowrap;
}
.pyramid-title {
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.25;
  color: var(--text-dim);
}
/* Ступень пользователя: остальные приглушены, эта одна светится.
   Тень именно drop-shadow — box-shadow обрезался бы вместе с трапецией. */
.pyramid-step.current {
  background: linear-gradient(180deg, rgba(127,245,255,0.42), rgba(14,90,107,0.9));
  border-top-color: var(--cyan-bright);
  filter: drop-shadow(0 0 16px rgba(34,211,238,0.55));
}
.pyramid-step.current .pyramid-title {
  color: #eafcff;
  font-weight: 700;
  text-shadow: 0 0 10px var(--cyan);
}
.pyramid-step.current .pyramid-meta { color: #cfeef5; }
.pyramid-value {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 8px var(--cyan-bright);
}

/* Подсказка про реферальную пару — под списком сильных ключей и под челленджем.
   Оформлена как описание нексус-ключа, только шире: предложения длиннее. */
.partner-note {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 1px;
  line-height: 1.6;
  text-align: center;
  max-width: 420px;
  margin: 14px auto 0;
}
.partner-note a {
  color: var(--cyan-bright);
  text-shadow: 0 0 8px var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(127,245,255,0.4);
}

.nexus-build-desc {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 1px;
  line-height: 1.5;
  text-align: center;
  max-width: 280px;
  margin: 0 auto;
}

/* Vessel with animated water */
.vessel {
  position: relative;
  width: 90px;
  height: 135px;
  flex: 0 0 90px;
  filter: drop-shadow(0 0 18px rgba(34,211,238,0.35));
}
.vessel svg { width: 100%; height: 100%; overflow: visible; }
.vessel-outline {
  fill: rgba(10,20,32,0.35);
  stroke: var(--cyan);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px var(--cyan));
}
.wave-1 { animation: waveShift 3.5s linear infinite, bob 4s ease-in-out infinite; }
.wave-2 { animation: waveShift 2.6s linear infinite reverse, bob 3.2s ease-in-out infinite; }
.water-body { animation: bob 4s ease-in-out infinite; }
@keyframes waveShift {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
.life-readout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-10%);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan);
  pointer-events: none;
}
.life-readout small { font-size: 12px; margin-top: 6px; margin-left: 2px; }

/* PrimeReactor: сосуд-реактор того же размера, что и сердце */
.reactor {
  position: relative;
  width: 112px;
  height: 135px;
  flex: 0 0 112px;
  filter: drop-shadow(0 0 18px rgba(34,211,238,0.35));
  pointer-events: none;
}
.reactor svg { width: 100%; height: 100%; overflow: visible; }
.reactor-outline {
  fill: rgba(10,20,32,0.35);
  stroke: var(--cyan);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px var(--cyan));
}
.reactor-rim {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
  opacity: 0.8;
}
.reactor-pipe {
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.8;
  filter: drop-shadow(0 0 4px var(--cyan));
}
.reactor-readout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan);
  pointer-events: none;
}
.reactor-readout small { font-size: 11px; margin-left: 2px; }

/* Карта эониума: кликабельный ряд-ссылка */
.result-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.result-link:hover { transform: translateY(-2px); filter: brightness(1.15); }
.map-torn {
  position: relative;
  width: 90px;
  height: 135px;
  flex: 0 0 90px;
  filter: drop-shadow(0 0 14px rgba(34,211,238,0.3));
  pointer-events: none;
}
.map-torn svg { width: 100%; height: 100%; overflow: visible; }
.map-paper {
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--cyan));
}
.map-fold {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  opacity: 0.5;
}
.map-route {
  fill: none;
  stroke: var(--cyan-bright);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
  opacity: 0.9;
}
.map-pin {
  fill: var(--cyan);
  stroke: var(--cyan-bright);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--cyan));
}
.map-pin-dot { fill: var(--bg-2); }
.map-dot {
  fill: var(--cyan-bright);
  filter: drop-shadow(0 0 4px var(--cyan));
}

/* Nexus Keys: старинный ключ (силуэт обведён по референсу-фото) */
.key-icon {
  position: relative;
  width: 90px;
  height: 135px;
  flex: 0 0 90px;
  filter: drop-shadow(0 0 14px rgba(34,211,238,0.3));
  pointer-events: none;
}
.key-icon svg { width: 100%; height: 100%; overflow: visible; }
.key-body {
  stroke: var(--cyan);
  /* путь уменьшен через transform scale(0.6642) -> компенсируем толщину: 3 / 0.6642 */
  stroke-width: 4.52;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px var(--cyan));
}

/* Твой аватар: контур головы льва — тот же images/avatar_outline.svg, что
   открывает раздел на my_avatar.html, чтобы ссылка и её страница узнавались
   по одной картинке. Подключён как <img>, а не инлайном: свечение и градиент
   заданы внутри самого файла. */
.profile-icon {
  position: relative;
  width: 90px;
  height: 90px;
  flex: 0 0 90px;
  filter: drop-shadow(0 0 14px rgba(34,211,238,0.3));
  pointer-events: none;
}
.profile-icon img { width: 100%; height: 100%; object-fit: contain; }

/* Dream Gap: кольцо-прогресс, того же размера, что и сердце */
.dream-gap {
  position: relative;
  width: 90px;
  height: 90px;
  flex: 0 0 90px;
  filter: drop-shadow(0 0 12px rgba(34,211,238,0.3));
  pointer-events: none;
}
.dream-gap svg { width: 90px; height: 90px; overflow: visible; }

/* Nexus Key: кулак воли */
.nexus-key-icon {
  position: relative;
  width: 90px;
  height: 135px;
  flex: 0 0 90px;
  filter: drop-shadow(0 0 18px rgba(34,211,238,0.35));
  pointer-events: none;
}
.nexus-key-icon svg { width: 100%; height: 100%; overflow: visible; }
.fist-outline {
  fill: rgba(10,20,32,0.35);
  stroke: var(--cyan);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px var(--cyan));
}
.fist-detail {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.8;
}
/* Мишень Нейрошторма */
.target-outer {
  fill: rgba(10,20,32,0.5);
  stroke: var(--cyan);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px var(--cyan));
}
.target-mid {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
}
.target-inner {
  fill: rgba(10,20,32,0.5);
  stroke: var(--cyan);
  stroke-width: 3;
}
.target-bullseye {
  fill: rgba(127,245,255,0.35);
  stroke: var(--cyan-bright);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 8px var(--cyan));
}
.target-cross {
  stroke: var(--cyan-dim);
  stroke-width: 1.5;
  opacity: 0.5;
}
/* Молния Пульсара */
.bolt-outline {
  fill: rgba(10,20,32,0.4);
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px var(--cyan));
}
.bolt-detail {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.7;
  filter: drop-shadow(0 0 4px var(--cyan));
}
/* Ракета Ауруса */
.rocket-body {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px var(--cyan));
}
.rocket-details {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.8;
  filter: drop-shadow(0 0 6px var(--cyan));
}
/* Стрелки Циклотрона */
.cyclotron-arrow {
  fill: rgba(10,20,32,0.4);
  stroke: var(--cyan);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--cyan));
}
/* Спираль Нексинхрона */
.nexinchron-ring {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 4;
  filter: drop-shadow(0 0 8px var(--cyan));
}
.nexinchron-spiral {
  fill: rgba(10,20,32,0.4);
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--cyan));
}
/* Форма Оксиморфа */
.oxymorph-body {
  fill: rgba(10,20,32,0.4);
  stroke: var(--cyan);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--cyan));
}
.oxymorph-detail {
  fill: none;
  stroke: var(--cyan-bright);
  stroke-width: 1;
  stroke-linejoin: round;
  opacity: 0.8;
  filter: drop-shadow(0 0 4px var(--cyan));
}
/* Динамик ЭкстраГерца */
.speaker-body {
  fill: rgba(10,20,32,0.4);
  stroke: var(--cyan);
  stroke-width: 0.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--cyan));
}
/* Блок "Первый челлендж" (оранжевый, как в результатах) */
.challenge-title {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--orange);
  text-shadow: 0 0 6px var(--orange);
  text-align: center;
  margin: 10px 0 8px;
  text-transform: uppercase;
}
.challenge-desc {
  font-size: 13px;
  color: var(--orange);
  text-shadow: 0 0 6px rgba(255,140,26,0.3);
  letter-spacing: 1px;
  line-height: 1.6;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}
.speaker-wave {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--cyan));
}
.fist-readout {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan);
  pointer-events: none;
  white-space: nowrap;
}
/* Число и процент под заголовком на странице Nexus Keys */
.nexus-readout {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan);
  text-align: center;
}
.nexus-readout small { font-size: 12px; margin-top: 6px; margin-left: 2px; }
.fist-readout small { font-size: 12px; margin-top: 6px; margin-left: 2px; }

/* Заголовок "Сильные ключи" */
.strong-keys-title {
  font-size: 22px;
  letter-spacing: 4px;
  color: #eafcff;
  text-shadow: 0 0 12px var(--cyan);
  text-align: center;
  margin: 10px 0 16px;
  text-transform: uppercase;
}

/* Разделитель "Слабый ключ" (в стиле 1543717711.svg) */
.weak-sep-circle {
  fill: var(--cyan);
  filter: drop-shadow(0 0 8px var(--cyan));
}
.weak-sep-line {
  fill: var(--cyan-dim);
  opacity: 0.6;
}

.ring-track {
  fill: none;
  stroke: rgba(34,211,238,0.15);
  stroke-width: 7;
}
.ring-fill {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 263.9;   /* 2*pi*42 */
  stroke-dashoffset: 263.9;  /* пусто; задаётся из JS */
  filter: drop-shadow(0 0 5px var(--cyan));
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,.9,.3,1);
}
.dream-gap-readout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 8px var(--cyan), 0 0 16px var(--cyan);
}
.dream-gap-readout small { font-size: 12px; margin-top: 6px; margin-left: 1px; }

.finish h2 { font-size: 22px; letter-spacing: 4px; color: #eafcff; text-shadow: 0 0 12px var(--cyan); }
.finish p { font-size: 13px; color: var(--text-dim); letter-spacing: 1px; max-width: 280px; line-height: 1.5; }
.restart {
  margin-top: 10px; padding: 12px 26px; align-self: center;
  background: transparent; border: 1px solid var(--cyan);
  color: var(--cyan-bright); font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

/* Header с кнопкой "назад" (карта, nexus keys, другие подстраницы).
   Кнопка позиционируется абсолютно слева, чтобы логотип/подзаголовок
   оставались по центру — 1-в-1 как header на странице результатов. */
.page-header {
  position: relative;
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 8px;
}
.page-header .back-link {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  color: var(--cyan);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.back-link:hover { color: var(--cyan-bright); transform: translateX(-2px); }
.back-link svg { width: 18px; height: 18px; }
.back-link svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--cyan));
}

/* Прокручиваемое тело страницы карты */
.map-page {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-top: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--cyan) rgba(34,211,238,0.08);
}
.map-page::-webkit-scrollbar { width: 8px; }
.map-page::-webkit-scrollbar-track {
  background: rgba(34,211,238,0.08);
  border-left: 1px solid var(--line);
}
.map-page::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan-dim), var(--cyan), var(--cyan-bright));
  border-radius: 6px;
  box-shadow: 0 0 8px var(--cyan);
}

/* Общая иконка-картинка строки (тот же размер, что сердце/реактор) */
.map-icon, .bomb {
  position: relative;
  width: 90px;
  height: 135px;
  flex: 0 0 90px;
  filter: drop-shadow(0 0 16px rgba(34,211,238,0.32));
  pointer-events: none;
}
.map-icon svg, .bomb svg { width: 100%; height: 100%; overflow: visible; }
.map-icon .icon-outline, .bomb .icon-outline {
  fill: rgba(10,20,32,0.35);
  stroke: var(--cyan);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px var(--cyan));
}
.map-icon .icon-detail, .bomb .icon-detail {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  opacity: 0.8;
}
.icon-readout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan);
  pointer-events: none;
}
.icon-readout small { font-size: 11px; margin-left: 2px; }
/* Оранжевые иконки (Пробои, DarkFuel, Бомба) */
.map-icon.warm, .bomb.warm { filter: drop-shadow(0 0 16px rgba(255,140,26,0.32)); }
.map-icon.warm .icon-outline, .bomb.warm .icon-outline {
  stroke: var(--orange);
  filter: drop-shadow(0 0 6px var(--orange));
}
.map-icon.warm .icon-detail, .bomb.warm .icon-detail { stroke: var(--orange); }
.map-icon.warm .warm-fill, .bomb.warm .warm-fill { fill: var(--orange); }
.map-icon.warm .warm-stroke, .bomb.warm .warm-stroke { stroke: var(--orange-bright); }
.map-icon.warm .icon-readout, .bomb.warm .icon-readout { text-shadow: 0 0 12px var(--orange), 0 0 24px var(--orange); }
.map-icon.warm .leak-puddle {
  fill: rgba(255,140,26,0.35);
  stroke: var(--orange-bright);
  filter: drop-shadow(0 0 6px var(--orange));
}
/* Детали бомбы */
.bomb.warm .icon-outline { fill: rgba(20,12,4,0.5); }
.bomb-spark {
  fill: none;
  stroke: var(--orange-bright);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--orange));
}
.bomb-shine {
  fill: rgba(255,210,120,0.35);
  opacity: 0.8;
}
/* Число смещено к визуальному центру связки динамита */
.icon-readout-bomb { transform: translateY(12px); }

/* Динамит — полупрозрачный, число поверх непрозрачно */
.dynamite { opacity: 0.5; }
.dyn-stick {
  fill: rgba(255,140,26,0.5);
  stroke: var(--orange);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px var(--orange));
}
.dyn-band {
  fill: rgba(122,61,0,0.7);
  stroke: var(--orange-bright);
  stroke-width: 2;
}
.dyn-fuse {
  fill: none;
  stroke: var(--orange-bright);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--orange));
}
.dyn-spark {
  fill: none;
  stroke: var(--orange-bright);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--orange));
}
.dyn-spark-dot { fill: var(--orange-bright); }
/* Процент поверх снежинки — полупрозрачный */
.icon-readout-overlay { color: rgba(255,255,255,1); }

/* Снежинка целиком */
.snowflake {
  fill: none;
  stroke: var(--cyan-bright);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.5;
  filter: drop-shadow(0 0 5px var(--cyan));
}
.snowflake-hub {
  fill: var(--cyan);
  stroke: var(--cyan-bright);
  stroke-width: 2;
}
/* Лужа вытекшей "нефти" под бочкой */
.leak-puddle {
  fill: rgba(34,211,238,0.35);
  stroke: var(--cyan-bright);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--cyan));
}

/* ================= Тип реактора ================= */
.reactor-type svg { width: 100%; height: 100%; overflow: visible; }

/* Непрозрачная снежинка (в отличие от карты эониума) */
.snowflake-solid { opacity: 1; }

/* 1. EON Reactor — галочка */
.rt-ring {
  fill: rgba(10,20,32,0.35);
  stroke: var(--cyan);
  stroke-width: 4;
  filter: drop-shadow(0 0 8px var(--cyan));
}
.rt-check {
  fill: none;
  stroke: var(--cyan-bright);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px var(--cyan));
}

/* 2/3. Спирали */
.rt-spiral {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--cyan));
}
.rt-hub { fill: var(--cyan-bright); }
.rt-arrow {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--cyan));
}
/* Нижняя спираль PrimeFlicker — в оранжевых тонах */
.rt-spiral.rt-warm,
.rt-arrow.rt-warm {
  stroke: var(--orange);
  filter: drop-shadow(0 0 6px var(--orange));
}
.rt-hub.rt-warm-fill { fill: var(--orange-bright); }

/* 4. DarkFuel Reactor — пары/дым */
.rt-smoke {
  fill: none;
  stroke: var(--orange);
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px var(--orange));
}
.rt-smoke path { animation: smokeDrift 5s ease-in-out infinite; }
.rt-smoke path:nth-child(2) { animation-delay: -1.6s; }
.rt-smoke path:nth-child(3) { animation-delay: -3.2s; }
@keyframes smokeDrift {
  0%, 100% { transform: translate(0, 0); opacity: .85; }
  50%      { transform: translate(4px, -8px); opacity: 1; }
}
.rt-smoke-base {
  fill: none;
  stroke: var(--orange-bright);
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--orange));
}

/* 7. Overheated Reactor — костёр */
.rt-flame {
  fill: rgba(255,140,26,0.28);
  stroke: var(--orange);
  stroke-width: 4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px var(--orange));
  animation: flameFlicker 2.4s ease-in-out infinite;
  transform-origin: 100px 200px;
}
.rt-flame-core {
  fill: rgba(255,210,120,0.5);
  stroke: var(--orange-bright);
  stroke-width: 3;
  animation: flameFlicker 1.7s ease-in-out infinite reverse;
  transform-origin: 100px 204px;
}
@keyframes flameFlicker {
  0%, 100% { transform: scaleY(1)    scaleX(1); }
  50%      { transform: scaleY(1.06) scaleX(0.96); }
}
.rt-log {
  fill: none;
  stroke: var(--orange-bright);
  stroke-width: 10;
  stroke-linecap: round;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px var(--orange));
}
.rt-ember { animation: bob 3s ease-in-out infinite; }

/* 8. PrimeCrash Mode — бомба */
.rt-bomb-body {
  fill: rgba(20,12,4,0.6);
  stroke: var(--orange);
  stroke-width: 4;
  filter: drop-shadow(0 0 10px var(--orange));
}
.rt-bomb-neck {
  fill: rgba(255,140,26,0.35);
  stroke: var(--orange);
  stroke-width: 4;
  stroke-linejoin: round;
}

/* 9. Hidden Prime — привидение */
.rt-ghost {
  fill: rgba(34,211,238,0.14);
  stroke: var(--cyan);
  stroke-width: 4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px var(--cyan));
  animation: bob 4.5s ease-in-out infinite;
}
.rt-eye {
  fill: #04070d;
  stroke: var(--cyan-bright);
  stroke-width: 2;
}

/* 10. Omega Reactor — амёба */
.rt-amoeba {
  fill: rgba(34,211,238,0.12);
  stroke: var(--cyan);
  stroke-width: 4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px var(--cyan));
  animation: amoebaWobble 6s ease-in-out infinite;
  transform-origin: 100px 155px;
}
@keyframes amoebaWobble {
  0%, 100% { transform: scale(1, 1); }
  33%      { transform: scale(1.04, 0.97); }
  66%      { transform: scale(0.97, 1.03); }
}
.rt-nucleus {
  fill: rgba(34,211,238,0.35);
  stroke: var(--cyan-bright);
  stroke-width: 3;
}
.rt-vacuole {
  fill: none;
  stroke: var(--cyan-bright);
  stroke-width: 2.5;
  opacity: 0.7;
}
/* Оранжевый вариант амёбы/привидения, если тип помечен как warm */
.reactor-type.warm .rt-amoeba,
.reactor-type.warm .rt-ghost {
  fill: rgba(255,140,26,0.12);
  stroke: var(--orange);
  filter: drop-shadow(0 0 10px var(--orange));
}
.reactor-type.warm .rt-nucleus {
  fill: rgba(255,140,26,0.35);
  stroke: var(--orange-bright);
}
.reactor-type.warm .rt-vacuole { stroke: var(--orange-bright); }

/* Toast уведомления (мой аватар — копирование в сторис) */
.copy-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  transform: translateX(-50%) translateY(16px);
  max-width: min(92vw, 420px);
  padding: 14px 18px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(10,20,32,0.96), rgba(4,7,13,0.96));
  border: 1px solid var(--cyan);
  box-shadow: 0 0 18px rgba(34,211,238,0.25), inset 0 0 10px rgba(34,211,238,0.08);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
  z-index: 50;
}
.copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}