/* ============================================
   SPREAD PAGE — мистическая руническая рубашка
   Цикл: руны летают → собираются в "TARO destiny" → распадаются обратно
   ============================================ */

/* === LOADING / SPINNER === */
.sp-loading { text-align: center; padding: 80px 20px; }
.sp-spinner {
  width: 48px; height: 48px;
  border: 3px solid rgba(167, 139, 250, 0.2);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: sp-spin 0.9s linear infinite;
  margin: 0 auto 16px;
}
.sp-spinner-big {
  width: 64px; height: 64px;
  border: 3px solid rgba(167, 139, 250, 0.2);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: sp-spin 1.2s linear infinite;
  margin: 24px auto;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* === ERROR === */
.spread-error-card {
  max-width: 460px; margin: 60px auto; padding: 36px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px; text-align: center;
}
.spread-error-title {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.8rem; font-weight: 600;
  margin: 0 0 12px; color: #f87171;
}
.spread-error-card p { margin: 0 0 24px; color: rgba(255, 255, 255, 0.78); }

/* ============================================
   ETAP 1 — INTRO + FORM (форма перед раскладом)
   ============================================ */
.sp-intro-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 36px;
  max-width: 980px;
  margin: 24px auto 60px;
  align-items: start;
}
@media (max-width: 800px) { .sp-intro-grid { grid-template-columns: 1fr; gap: 24px; } }

.sp-cover { position: sticky; top: 80px; }
.sp-cover-img {
  aspect-ratio: 4/5;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 48px rgba(139, 92, 246, 0.25);
  position: relative; overflow: hidden;
}
.sp-cover-img::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.08), transparent 60%);
}
@media (max-width: 800px) { .sp-cover { position: static; } .sp-cover-img { aspect-ratio: 16/9; } }

.sp-cover-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-left: 4px; }
.sp-price { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.sp-price--free { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.4); }
.sp-price--paid { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); }
.sp-price--prem { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #1a1208; }
.sp-meta-cards { font-size: 13px; color: rgba(255, 255, 255, 0.6); }

.sp-content { min-width: 0; }
.sp-h1 {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 2.4rem; font-weight: 600;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #fff, #c4b5fd, #67e8f9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
@media (max-width: 540px) { .sp-h1 { font-size: 1.8rem; } }
.sp-subtitle { font-size: 1.05rem; color: rgba(255, 255, 255, 0.78); margin: 0 0 18px; line-height: 1.5; }
.sp-desc {
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(167, 139, 250, 0.5);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px; margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem; line-height: 1.6;
}

/* === FORM === */
.sp-form { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.sp-no-fields { color: rgba(255, 255, 255, 0.65); font-size: 0.92rem; font-style: italic; margin: 0; }
.sp-field { display: flex; flex-direction: column; gap: 6px; }
.sp-label { font-size: 0.92rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.sp-req { color: #f87171; margin-left: 2px; }
.sp-field-hint { color: rgba(255, 255, 255, 0.45); font-size: 0.78rem; margin-top: 2px; }
.sp-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px; padding: 11px 14px;
  color: #fff; font-family: inherit; font-size: 0.95rem;
  transition: border-color 0.2s, background 0.2s;
}
.sp-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.sp-input:focus { outline: none; border-color: rgba(167, 139, 250, 0.6); background: rgba(255, 255, 255, 0.08); }
.sp-textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

/* === ZODIAC GRID === */
.sp-zodiac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 4px; }
@media (max-width: 540px) { .sp-zodiac-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 380px) { .sp-zodiac-grid { grid-template-columns: repeat(3, 1fr); } }
.sp-zodiac-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px; cursor: pointer;
  transition: all 0.18s;
  font-family: inherit; color: #fff;
}
.sp-zodiac-item:hover { background: rgba(167, 139, 250, 0.15); border-color: rgba(167, 139, 250, 0.4); transform: translateY(-1px); }
.sp-zodiac-item.selected {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.32), rgba(6, 182, 212, 0.22));
  border-color: rgba(167, 139, 250, 0.65);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
}
.sp-zodiac-symbol {
  font-size: 1.4rem;
  background: linear-gradient(135deg, #c4b5fd, #67e8f9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sp-zodiac-item.selected .sp-zodiac-symbol {
  background: linear-gradient(135deg, #fff, #c4b5fd);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sp-zodiac-name { font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); }
.sp-zodiac-item.selected .sp-zodiac-name { color: #fff; font-weight: 500; }

/* Универсальные чипсы (одиночный выбор), напр. тип связи в «На отношения» */
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sp-chip {
  padding: 9px 15px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px; cursor: pointer;
  transition: all 0.18s;
  font-family: inherit; font-size: 0.9rem; color: rgba(255, 255, 255, 0.82);
}
.sp-chip:hover { background: rgba(255, 158, 196, 0.14); border-color: rgba(255, 158, 196, 0.45); transform: translateY(-1px); }
.sp-chip.selected {
  background: linear-gradient(135deg, rgba(255, 107, 139, 0.34), rgba(183, 108, 255, 0.24));
  border-color: rgba(255, 158, 196, 0.7);
  box-shadow: 0 4px 16px rgba(255, 107, 139, 0.32);
  color: #fff; font-weight: 500;
}

/* 3а: блок «Следующий шаг» (цепочка раскладов после результата) */
.sp-nextstep { max-width: 560px; margin: 22px auto 0; }
.sp-nextstep-eyebrow { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 8px; text-align: center; }
.sp-nextstep-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; text-align: left;
  background: linear-gradient(135deg, rgba(183,108,255,.15), rgba(255,107,139,.10));
  border: 1px solid rgba(183,108,255,.34); border-radius: 16px; padding: 16px 18px; }
.sp-nextstep-ic { font-size: 2rem; line-height: 1; }
.sp-nextstep-body { flex: 1; min-width: 200px; }
.sp-nextstep-title { font-family: var(--font-display,'Cormorant Garamond',serif); font-size: 1.25rem; font-weight: 700; color: #f3ecff; margin-bottom: 3px; }
.sp-nextstep-text { color: rgba(255,255,255,.72); font-size: .9rem; line-height: 1.45; }
.sp-nextstep-btn { white-space: nowrap; }

/* 3б: teaser bulk-пакета (серия со скидкой) */
.sp-bundle-offer { max-width: 560px; margin: 14px auto 0; }
.sp-bundle-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; text-align: left;
  background: rgba(255,255,255,.03); border: 1px dashed rgba(255,209,102,.4); border-radius: 14px; padding: 13px 16px; }
.sp-bundle-body { flex: 1; min-width: 180px; }
.sp-bundle-title { font-size: 1rem; font-weight: 600; color: #f3ecff; margin-bottom: 2px; }
.sp-bundle-text { color: rgba(255,255,255,.62); font-size: .84rem; line-height: 1.4; }
.sp-bundle-price { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sp-bundle-price s { color: rgba(255,255,255,.4); font-size: .85rem; }
.sp-bundle-price b { color: #ffd166; font-size: 1.15rem; }
.sp-bundle-badge { background: rgba(255,209,102,.18); color: #ffd166; border-radius: 6px; padding: 1px 6px; font-size: .75rem; font-weight: 600; }
.sp-bundle-btn { white-space: nowrap; }

/* #2/Piece C: универсальный блок «+2 карты» */
.sp-ext-cta { max-width: 560px; margin: 20px auto 0; text-align: left;
  background: rgba(124,58,200,.12); border: 1px solid rgba(183,108,255,.34); border-radius: 16px; padding: 16px 18px; }
.sp-ext-h { font-family: var(--font-display,'Cormorant Garamond',serif); font-size: 1.15rem; font-weight: 700; color: #f3ecff; margin-bottom: 6px; }
.sp-ext-list { margin: 0 0 12px; padding-left: 20px; color: rgba(255,255,255,.82); font-size: .9rem; line-height: 1.5; }
.sp-ext-sub { color: rgba(255,255,255,.72); font-size: .9rem; line-height: 1.45; margin-bottom: 12px; }
.sp-ext-btn { display: block; text-align: center; }

/* === BUTTONS === */
.sp-btn {
  padding: 13px 24px; border-radius: 12px; border: 0;
  font-family: inherit; font-size: 0.98rem; font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s, background 0.15s, opacity 0.3s, box-shadow 0.3s;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.sp-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sp-btn--primary {
  background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff;
  box-shadow: 0 8px 22px rgba(139, 92, 246, 0.4);
}
.sp-btn--primary:not(:disabled):hover { filter: brightness(1.1); transform: translateY(-1px); }
.sp-btn--ready {
  background: linear-gradient(135deg, #fcd34d, #f59e0b) !important;
  color: #1a1208 !important;
  box-shadow: 0 12px 28px rgba(252, 211, 77, 0.5) !important;
  animation: sp-pulse 2s ease-in-out infinite;
}
@keyframes sp-pulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(252, 211, 77, 0.5); }
  50% { box-shadow: 0 12px 36px rgba(252, 211, 77, 0.75); }
}
.sp-btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}
.sp-btn--ghost:hover { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.4); }
.sp-btn--submit { margin-top: 8px; align-self: flex-start; }
@media (max-width: 540px) { .sp-btn--submit { width: 100%; } }

/* ============================================
   ETAP 2 — DECK PICKER (мистическая атмосфера)
   ============================================ */
.sp-picker, .sp-picker * { user-select: none; -webkit-user-select: none; }
.sp-picker {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 12px 40px;
  position: relative;
}

/* Туман в фоне всей сцены */
.sp-picker::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 30% at 30% 80%, rgba(196, 181, 253, 0.08), transparent 70%),
    radial-gradient(ellipse 60% 30% at 70% 20%, rgba(252, 211, 77, 0.05), transparent 70%);
  animation: sp-mist 12s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes sp-mist {
  0% { transform: translateX(-15px) translateY(-5px); opacity: 0.6; }
  100% { transform: translateX(15px) translateY(5px); opacity: 1; }
}

.sp-picker-head { text-align: center; margin-bottom: 20px; position: relative; z-index: 2; }
.sp-picker-title {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 2.1rem; font-weight: 600;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #fff, #c4b5fd, #67e8f9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (max-width: 540px) { .sp-picker-title { font-size: 1.6rem; } }
.sp-picker-hint { color: rgba(255, 255, 255, 0.78); margin: 0 0 14px; font-size: 0.95rem; }
.sp-picker-counter {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #c4b5fd; font-weight: 600; font-size: 0.92rem;
  transition: all 0.3s;
}

/* === STAGE === */
.sp-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 22px;
  padding: 30px 12px;
  min-height: 320px;
  position: relative;
  z-index: 2;
  transition: gap 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 540px) { .sp-stage { gap: 14px; padding: 20px 8px; } }
.sp-stage[data-need="3"].sp-stage--picking { gap: 16px; }
.sp-stage--selected { gap: 28px; padding: 30px 12px 50px; }

/* === КАРТА (wrap + tile) === */
.sp-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  animation: sp-deal-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--idx, 0) * 0.08s);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}
@keyframes sp-deal-in {
  0% { opacity: 0; transform: translateY(60px) scale(0.85) rotate(-8deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* Дымка под каждой картой */
.sp-card-wrap::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 16px;
  background: radial-gradient(ellipse, rgba(167, 139, 250, 0.3), transparent 70%);
  filter: blur(7px);
  z-index: -1;
  pointer-events: none;
  animation: sp-glow-floor 3.5s ease-in-out infinite alternate;
}
@keyframes sp-glow-floor {
  0% { opacity: 0.4; width: 65%; }
  100% { opacity: 0.85; width: 90%; }
}

/* Hover в стадии выбора */
.sp-stage--picking .sp-card-wrap:hover { transform: translateY(-14px) rotate(-1deg); }
.sp-stage--picking .sp-card-wrap:hover .sp-card-tile {
  box-shadow: 0 22px 50px rgba(252, 211, 77, 0.35);
}

/* Невыбранные уезжают */
.sp-card-wrap--leaving {
  opacity: 0;
  transform: translateY(50px) scale(0.55) rotate(8deg);
  pointer-events: none;
}

/* === TILE с flip-анимацией === */
.sp-card-tile {
  position: relative;
  width: 130px;
  aspect-ratio: 2/3;
  cursor: pointer;
  perspective: 1200px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}
@media (max-width: 540px) { .sp-card-tile { width: 92px; } }
@media (max-width: 380px) { .sp-card-tile { width: 80px; } }

.sp-stage[data-need="3"] .sp-card-tile { width: 110px; }
@media (max-width: 540px) { .sp-stage[data-need="3"] .sp-card-tile { width: 78px; } }
@media (max-width: 380px) { .sp-stage[data-need="3"] .sp-card-tile { width: 66px; } }

.sp-stage--selected .sp-card-tile { width: 150px; }
@media (max-width: 540px) { .sp-stage--selected .sp-card-tile { width: 100px; } }

.sp-card-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}
.sp-card-tile.flipped .sp-card-inner { transform: rotateY(180deg); }

.sp-card-face {
  position: absolute; inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  background-color: #1a1024;
  overflow: hidden;
}

/* ============================================
   РУБАШКА — с циклом РУНЫ ↔ TARO destiny
   ============================================ */
/* Battery-saver и iOS/Android low-power → браузер шлёт prefers-reduced-motion.
   Гасим ТОЛЬКО цикл «руны ↔ TARO destiny» на рубашке (12s, лагал на телефоне).
   Огоньки-звёзды, ауры, flip и прочие анимации остаются — они дёшевы и красивы. */
@media (prefers-reduced-motion: reduce) {
  .sp-card-rune { animation: none !important; opacity: 0; }
  .sp-card-logo { animation: none !important; opacity: 1; }
}
.sp-card-back {
  background:
    radial-gradient(ellipse at 50% 28%, rgba(252, 237, 200, 0.12), transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(139, 92, 246, 0.4), transparent 70%),
    linear-gradient(180deg, #14102a 0%, #0a0820 55%, #050410 100%);
  box-shadow: inset 0 0 50px rgba(167, 139, 250, 0.18);
  /* --phase передаётся из JS — индивидуальная фаза цикла каждой карты */
  --phase: 0s;
}

/* Платиново-золотая статичная окантовка */
.sp-card-back::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(135deg, #e5e4e2 0%, #fcd34d 35%, #e5e4e2 70%, #fcd34d 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.6px;
  z-index: 10;
}
/* Внутренняя тонкая рамка */
.sp-card-back::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 9px;
  pointer-events: none;
  border: 0.6px solid rgba(252, 211, 77, 0.45);
  z-index: 10;
}

/* === ОГОНЬКИ-ЗВЁЗДЫ (круглые, мерцающие, всегда видны) === */
.sp-card-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.sp-card-spark {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 237, 200, 1) 0%, rgba(252, 211, 77, 0.7) 40%, transparent 80%);
  box-shadow: 0 0 6px rgba(252, 211, 77, 0.9), 0 0 12px rgba(252, 237, 200, 0.7);
  animation: sp-spark-twinkle 2.5s ease-in-out infinite;
}
@keyframes sp-spark-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.3); }
}
/* Размещение и тайминг 10 огоньков */
.sp-card-spark--1 { top: 12%; left: 18%; width: 5px; height: 5px; animation-delay: 0s; }
.sp-card-spark--2 { top: 18%; right: 22%; animation-delay: 0.6s; }
.sp-card-spark--3 { top: 38%; left: 8%; animation-delay: 1.2s; }
.sp-card-spark--4 { top: 42%; right: 10%; width: 5px; height: 5px; animation-delay: 0.3s; }
.sp-card-spark--5 { top: 62%; left: 24%; animation-delay: 1.8s; }
.sp-card-spark--6 { bottom: 28%; right: 30%; animation-delay: 0.9s; }
.sp-card-spark--7 { bottom: 14%; left: 46%; width: 5px; height: 5px; animation-delay: 1.5s; }
.sp-card-spark--8 { bottom: 8%; right: 20%; animation-delay: 2.1s; }
.sp-card-spark--9 { top: 78%; left: 14%; animation-delay: 0.4s; }
.sp-card-spark--10 { top: 30%; left: 50%; animation-delay: 1.7s; }

/* === РУНЫ === */
/* Цикл 12 секунд: 0-5s летают, 5-7s стягиваются, 7-10s ждут, 10-12s разлетаются */
.sp-card-runes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.sp-card-rune {
  position: absolute;
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 22px;
  color: rgba(252, 211, 77, 0.7);
  text-shadow: 0 0 8px rgba(252, 211, 77, 0.85), 0 0 16px rgba(252, 211, 77, 0.55), 0 0 22px rgba(252, 211, 77, 0.35);
  user-select: none;
  will-change: transform, opacity;
  animation-delay: var(--phase, 0s);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@media (max-width: 540px) { .sp-card-rune { font-size: 16px; } }

/* Каждая руна имеет свою стартовую позицию и анимацию */
/* Руны летают, потом ВСЕ собираются в центре, потом разлетаются */
.sp-card-rune--1 { top: 18%; left: 14%; animation-name: sp-rune-cycle-1; animation-duration: 12s; }
.sp-card-rune--2 { top: 24%; right: 12%; animation-name: sp-rune-cycle-2; animation-duration: 12s; }
.sp-card-rune--3 { top: 50%; left: 8%;  animation-name: sp-rune-cycle-3; animation-duration: 12s; }
.sp-card-rune--4 { top: 50%; right: 8%; animation-name: sp-rune-cycle-4; animation-duration: 12s; }
.sp-card-rune--5 { bottom: 26%; left: 16%; animation-name: sp-rune-cycle-5; animation-duration: 12s; }
.sp-card-rune--6 { bottom: 22%; right: 14%; animation-name: sp-rune-cycle-6; animation-duration: 12s; }

/* Руна 1: верх-лево → центр → верх-лево */
@keyframes sp-rune-cycle-1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  20%  { transform: translate(8px, 6px) scale(1) rotate(-3deg); opacity: 1; }
  40%  { transform: translate(4px, 12px) scale(1) rotate(2deg); opacity: 0.7; }
  /* Стягиваемся к центру (50% времени) */
  55%  { transform: translate(60px, 60px) scale(1.4) rotate(0); opacity: 0.95; filter: blur(2px); }
  /* Растворяемся в центре */
  60%  { transform: translate(70px, 70px) scale(0.5); opacity: 0; filter: blur(6px); }
  /* Слово показывается с 60% до 85% — рун не видно */
  85%  { transform: translate(70px, 70px) scale(0.5); opacity: 0; filter: blur(6px); }
  /* Появляются разлетающиеся руны */
  90%  { transform: translate(40px, 40px) scale(1.3); opacity: 0.9; filter: blur(2px); }
  100% { transform: translate(0, 0) scale(1); opacity: 0.7; filter: blur(0); }
}

/* Руна 2: верх-право → центр → верх-право */
@keyframes sp-rune-cycle-2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  25%  { transform: translate(-6px, 8px) scale(1) rotate(3deg); opacity: 1; }
  45%  { transform: translate(-10px, 4px) scale(1) rotate(-2deg); opacity: 0.7; }
  55%  { transform: translate(-50px, 50px) scale(1.4) rotate(0); opacity: 0.95; filter: blur(2px); }
  60%  { transform: translate(-60px, 60px) scale(0.5); opacity: 0; filter: blur(6px); }
  85%  { transform: translate(-60px, 60px) scale(0.5); opacity: 0; filter: blur(6px); }
  90%  { transform: translate(-30px, 35px) scale(1.3); opacity: 0.9; filter: blur(2px); }
  100% { transform: translate(0, 0) scale(1); opacity: 0.7; filter: blur(0); }
}

/* Руна 3: лево-середина → центр */
@keyframes sp-rune-cycle-3 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  30%  { transform: translate(10px, -6px) scale(1) rotate(-2deg); opacity: 1; }
  55%  { transform: translate(40px, 0) scale(1.4); opacity: 0.95; filter: blur(2px); }
  60%  { transform: translate(50px, 0) scale(0.5); opacity: 0; filter: blur(6px); }
  85%  { transform: translate(50px, 0) scale(0.5); opacity: 0; filter: blur(6px); }
  90%  { transform: translate(25px, 0) scale(1.3); opacity: 0.9; filter: blur(2px); }
  100% { transform: translate(0, 0) scale(1); opacity: 0.7; filter: blur(0); }
}

/* Руна 4: право-середина → центр */
@keyframes sp-rune-cycle-4 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  30%  { transform: translate(-10px, -6px) scale(1) rotate(2deg); opacity: 1; }
  55%  { transform: translate(-40px, 0) scale(1.4); opacity: 0.95; filter: blur(2px); }
  60%  { transform: translate(-50px, 0) scale(0.5); opacity: 0; filter: blur(6px); }
  85%  { transform: translate(-50px, 0) scale(0.5); opacity: 0; filter: blur(6px); }
  90%  { transform: translate(-25px, 0) scale(1.3); opacity: 0.9; filter: blur(2px); }
  100% { transform: translate(0, 0) scale(1); opacity: 0.7; filter: blur(0); }
}

/* Руна 5: низ-лево → центр */
@keyframes sp-rune-cycle-5 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  35%  { transform: translate(8px, -10px) scale(1) rotate(-2deg); opacity: 1; }
  55%  { transform: translate(50px, -45px) scale(1.4); opacity: 0.95; filter: blur(2px); }
  60%  { transform: translate(60px, -55px) scale(0.5); opacity: 0; filter: blur(6px); }
  85%  { transform: translate(60px, -55px) scale(0.5); opacity: 0; filter: blur(6px); }
  90%  { transform: translate(30px, -28px) scale(1.3); opacity: 0.9; filter: blur(2px); }
  100% { transform: translate(0, 0) scale(1); opacity: 0.7; filter: blur(0); }
}

/* Руна 6: низ-право → центр */
@keyframes sp-rune-cycle-6 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  35%  { transform: translate(-8px, -10px) scale(1) rotate(2deg); opacity: 1; }
  55%  { transform: translate(-50px, -45px) scale(1.4); opacity: 0.95; filter: blur(2px); }
  60%  { transform: translate(-60px, -55px) scale(0.5); opacity: 0; filter: blur(6px); }
  85%  { transform: translate(-60px, -55px) scale(0.5); opacity: 0; filter: blur(6px); }
  90%  { transform: translate(-30px, -28px) scale(1.3); opacity: 0.9; filter: blur(2px); }
  100% { transform: translate(0, 0) scale(1); opacity: 0.7; filter: blur(0); }
}

/* Плавная смена руны (когда JS меняет content) */
.sp-card-rune.sp-rune-changing {
  opacity: 0 !important;
}

/* === ВСПЫШКА в момент сборки/распада === */
.sp-card-flash {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70%; height: 35%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(252, 237, 200, 0.5), rgba(252, 211, 77, 0.25) 40%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  animation: sp-flash-cycle 12s ease-in-out infinite;
  animation-delay: var(--phase, 0s);
}
@keyframes sp-flash-cycle {
  0%, 50%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  /* Вспышка в момент сборки */
  55%       { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  60%, 80%  { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  /* Вспышка в момент распада */
  87%       { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  92%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* === ЛОГОТИП "TARO destiny" === */
.sp-card-logo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  animation: sp-logo-cycle 12s ease-in-out infinite;
  animation-delay: var(--phase, 0s);
}
@keyframes sp-logo-cycle {
  0%, 58%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); filter: blur(8px); }
  /* Появляется на 60% */
  62%       { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  /* Видно с 62% до 85% (3 секунды из 12) */
  85%       { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  /* Распадается на 88% */
  90%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); filter: blur(8px); }
}

.sp-card-logo-taro {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: linear-gradient(135deg, #fff7d6 0%, #fcd34d 40%, #e5e4e2 70%, #fcd34d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(252, 211, 77, 0.6);
  filter: drop-shadow(0 0 8px rgba(252, 237, 200, 0.55));
  line-height: 1;
}
@media (max-width: 540px) { .sp-card-logo-taro { font-size: 14px; } }
@media (max-width: 380px) { .sp-card-logo-taro { font-size: 11px; } }

.sp-card-logo-destiny {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: rgba(252, 237, 200, 0.92);
  margin-top: 5px;
  text-shadow: 0 0 8px rgba(252, 211, 77, 0.5);
}
@media (max-width: 540px) { .sp-card-logo-destiny { font-size: 7px; } }
@media (max-width: 380px) { .sp-card-logo-destiny { font-size: 6px; } }

/* Аура вокруг лого, пульсирует */
.sp-card-logo::before {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 130%; height: 140%;
  background: radial-gradient(ellipse, rgba(252, 211, 77, 0.18) 0%, rgba(252, 211, 77, 0.08) 30%, transparent 60%);
  z-index: -1;
  animation: sp-logo-aura 3s ease-in-out infinite;
}
@keyframes sp-logo-aura {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.95); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* === Передняя часть карты (картинка) === */
.sp-card-front {
  transform: rotateY(180deg);
  border: 1px solid rgba(167, 139, 250, 0.35);
}
.sp-card-tile--rev .sp-card-front { transform: rotateY(180deg) rotate(180deg); }

/* Выбранная карта подсвечивается */
.sp-card-tile.selected .sp-card-inner {
  box-shadow: 0 14px 36px rgba(252, 211, 77, 0.45), 0 0 0 2px rgba(252, 211, 77, 0.55);
}

/* === Подпись под картой === */
.sp-card-caption {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0);
  text-align: center;
  max-width: 130px;
  line-height: 1.2;
  transition: color 0.3s 0.4s, transform 0.3s 0.4s;
  padding: 0 4px;
  transform: translateY(-4px);
}
.sp-card-tile.flipped + .sp-card-caption {
  color: rgba(255, 255, 255, 0.95);
  transform: translateY(0);
}
.sp-stage--selected .sp-card-caption { font-size: 1.05rem; max-width: 150px; }

/* === FOOTER === */
.sp-picker-foot {
  display: flex; gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
  position: relative;
  z-index: 2;
}

/* ============================================
   ETAP 3 — PROCESSING
   ============================================ */
.sp-processing { text-align: center; padding: 40px 20px; max-width: 720px; margin: 0 auto; }
.sp-processing-title {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.9rem; font-weight: 600; margin: 0 0 12px;
  background: linear-gradient(135deg, #fff, #c4b5fd, #67e8f9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sp-processing-sub { color: rgba(255, 255, 255, 0.7); margin: 0; }

.sp-cards-row { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 32px 0; }
@media (max-width: 540px) { .sp-cards-row { gap: 12px; } }

.sp-card-mini {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: sp-flip-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: var(--delay, 0s);
}
@keyframes sp-flip-in {
  0% { opacity: 0; transform: rotateY(180deg) translateY(20px); }
  100% { opacity: 1; transform: rotateY(0) translateY(0); }
}
.sp-card-mini-img {
  width: 110px; aspect-ratio: 2/3;
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  background-color: #1a1024;
  background-size: cover; background-position: center;
}
@media (max-width: 540px) { .sp-card-mini-img { width: 80px; } }
.sp-card-mini-name {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 0.95rem; font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  max-width: 130px;
}
.sp-card-mini-name small {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-style: italic; font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  display: block; font-weight: 400;
}

/* ============================================
   ETAP 4 — РЕЗУЛЬТАТ
   ============================================ */
.sp-result { max-width: 820px; margin: 0 auto; padding: 24px 16px; }
.sp-result-head { text-align: center; margin-bottom: 36px; }
.sp-result-title {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 2.4rem; font-weight: 600;
  margin: 0 0 6px;
  background: linear-gradient(135deg, #fff, #c4b5fd, #67e8f9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (max-width: 540px) { .sp-result-title { font-size: 1.8rem; } }
.sp-result-subtitle { color: rgba(167, 139, 250, 0.85); font-size: 0.95rem; margin: 0; font-style: italic; }

.sp-result-summary {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(6, 182, 212, 0.04));
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 32px;
}
.sp-result-summary p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: rgba(255, 255, 255, 0.92); }

.sp-result-cards { display: flex; flex-direction: column; gap: 22px; margin-bottom: 36px; }
.sp-result-card {
  display: grid; grid-template-columns: 160px 1fr; gap: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
}
@media (max-width: 540px) { .sp-result-card { grid-template-columns: 1fr; text-align: center; padding: 18px 16px; } }
.sp-result-card-img-wrap { display: flex; align-items: flex-start; justify-content: center; }
.sp-result-card-img {
  width: 100%; aspect-ratio: 2/3;
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  background-color: #1a1024;
  background-size: cover; background-position: center;
  max-width: 160px;
}
@media (max-width: 540px) { .sp-result-card-img { max-width: 130px; margin: 0 auto; } }
.sp-result-card-name {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.4rem; font-weight: 600;
  margin: 0 0 12px; color: #fff;
}
.sp-result-card-name small {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 0.78rem; font-style: italic; font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}
.sp-result-card-text { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 0.96rem; line-height: 1.65; white-space: pre-line; }

.sp-result-conclusion {
  background: linear-gradient(135deg, rgba(252, 211, 77, 0.08), rgba(251, 146, 60, 0.04));
  border: 1px solid rgba(252, 211, 77, 0.25);
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 32px;
}
.sp-result-conclusion h3 {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.3rem; font-weight: 600; margin: 0 0 10px;
  background: linear-gradient(135deg, #fcd34d, #fb923c);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sp-result-conclusion p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: rgba(255, 255, 255, 0.92); }

.sp-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* === Backgrounds для cover === */
.sp-img--day { background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #8b5cf6 100%); }
.sp-img--yes { background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); }
.sp-img--three { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); }
.sp-img--any { background: linear-gradient(135deg, #a78bfa 0%, #fbbf24 100%); }
.sp-img--love { background: linear-gradient(135deg, #be123c 0%, #ec4899 50%, #a78bfa 100%); }
.sp-img--cheat { background: linear-gradient(135deg, #7c2d12 0%, #f43f5e 100%); }
.sp-img--exback { background: linear-gradient(135deg, #831843 0%, #ec4899 100%); }
.sp-img--crisis { background: linear-gradient(135deg, #4c1d95 0%, #be185d 100%); }
.sp-img--week { background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%); }
.sp-img--month { background: linear-gradient(135deg, #4338ca 0%, #8b5cf6 100%); }
.sp-img--lunar { background: linear-gradient(135deg, #312e81 0%, #1e293b 100%); }
.sp-img--horo { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.sp-img--compat { background: linear-gradient(135deg, #ec4899 0%, #f43f5e 50%, #8b5cf6 100%); }
.sp-img--natal { background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 50%, #f59e0b 100%); }

/* === Stage 2.4: блок "Обсудить с Алиной" === */
.sp-chat-cta {
  margin: 24px 0;
  padding: 22px 20px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(236, 72, 153, 0.08) 100%);
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sp-chat-cta::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: cta-shimmer 4s ease-in-out infinite;
}

@keyframes cta-shimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.sp-chat-cta-hint {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.97rem;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

.sp-btn--cta-large {
  display: inline-block;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  color: #fff;
  padding: 16px 32px;
  border-radius: 14px;
  font-size: 1.08rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 24px rgba(168, 85, 247, 0.35);
  position: relative;
  z-index: 1;
}

.sp-btn--cta-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(168, 85, 247, 0.5);
}

.sp-btn--cta-large:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .sp-chat-cta { padding: 18px 14px; }
  .sp-btn--cta-large { padding: 14px 22px; font-size: 1rem; width: 100%; }
}

/* === Stage 2.7.A — Картинки зодиаков === */
.sp-zodiac-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 8px;
  margin-bottom: 4px;
  background: rgba(168, 85, 247, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}
.sp-zodiac-item:hover .sp-zodiac-img {
  transform: scale(1.04);
}
.sp-zodiac-item.selected .sp-zodiac-img {
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.7), 0 4px 16px rgba(168, 85, 247, 0.3);
}
.sp-zodiac-item {
  padding: 6px;
}

/* === Stage 2.7.A — Лимит исчерпан с CTA премиум === */
.spread-limit-card {
  max-width: 480px;
}
.spread-limit-icon {
  font-size: 3rem;
  margin-bottom: 8px;
  opacity: 0.85;
}
.spread-limit-text {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  margin-bottom: 18px;
}
.spread-limit-text strong {
  color: rgba(168, 85, 247, 0.95);
  font-weight: 600;
}
.spread-limit-pros {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  text-align: left;
}
.spread-limit-pro {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
}
.spread-limit-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.spread-limit-actions .sp-btn { flex: 1; min-width: 140px; max-width: 220px; }
.sp-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}
.sp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.sp-btn--gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #a855f7 100%);
  color: #1f1410;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3);
}
.sp-btn--gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(251, 191, 36, 0.45);
}

/* ============================================
   ФОРМЫ РАСКЛАДА — геометрия карт (доска)
   ============================================ */
/* Этап выбора: после выбора .sp-stage становится доской с абсолютными слотами */
.sp-stage.sp-board {
  display: block;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 34px auto 44px;
  padding: 0;
  gap: 0;
  aspect-ratio: var(--ar, 1.5);
}
.sp-board .sp-card-wrap {
  position: absolute;
  width: var(--cw, 20%);
  margin: 0;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transition: left 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.55s;
}
.sp-board .sp-card-wrap::after { display: none; }
.sp-board .sp-card-tile { width: 100% !important; }
.sp-board .sp-card-caption { display: none; }
.sp-slotted--cross { z-index: 6; }

/* Подпись позиции над картой */
.sp-slot-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(216, 196, 255, 0.78);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 7;
}
.sp-slotted--cross .sp-slot-label { display: none; }

/* Доска результата */
.sp-result-board {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 10px auto 28px;
  aspect-ratio: var(--ar, 1.5);
}
.sp-rb-card {
  position: absolute;
  width: var(--cw, 20%);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
}
.sp-rb-card--cross { z-index: 6; }
.sp-rb-img {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: #1a1024;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(201, 179, 236, 0.28);
}
.sp-rb-name {
  font-size: 0.58rem;
  text-align: center;
  margin-top: 4px;
  color: rgba(243, 236, 255, 0.86);
  line-height: 1.2;
}
.sp-rb-card--cross .sp-rb-name { display: none; }

/* Список толкований по позициям */
.sp-result-interps { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 24px; }
.sp-ri {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: rgba(10, 6, 24, 0.42);
  border: 1px solid rgba(201, 179, 236, 0.16);
  border-radius: 12px;
  padding: 13px 16px;
}
.sp-ri-pos {
  flex: 0 0 86px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #aef0e0;
  padding-top: 2px;
}
.sp-ri-name { font-weight: 700; color: #f3ecff; font-size: 0.92rem; display: block; margin-bottom: 3px; }
.sp-ri-text { margin: 0; font-size: 0.88rem; line-height: 1.52; color: rgba(233, 222, 255, 0.85); }

@media (max-width: 540px) {
  .sp-stage.sp-board, .sp-result-board { max-width: 360px; }
  .sp-slot-label { font-size: 0.5rem; bottom: calc(100% + 3px); }
  .sp-rb-name { font-size: 0.5rem; }
  .sp-ri { flex-direction: column; gap: 5px; }
  .sp-ri-pos { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-board .sp-card-wrap { transition: none; }
}

/* Вопрос пользователя на странице результата */
.sp-result-question {
  max-width: 620px;
  margin: 4px auto 18px;
  padding: 14px 22px;
  text-align: center;
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.45;
  color: rgba(243, 236, 255, 0.92);
  background: rgba(124, 58, 200, 0.1);
  border: 1px solid rgba(201, 179, 236, 0.2);
  border-radius: 14px;
}
.sp-rq-mark {
  color: #ffd98a;
  font-weight: 700;
  font-size: 1.4rem;
  vertical-align: -0.1em;
  padding: 0 4px;
}

/* Free-allowance: бейдж "бесплатно" / таймер до сброса на интро */
.sp-free-banner { border-radius: 14px; padding: 14px 18px; margin: 0 0 20px; border: 1px solid rgba(201,179,236,.2); }
.sp-free-banner--ok { background: rgba(46,143,134,.14); border-color: rgba(126,233,208,.35); display: flex; flex-direction: column; gap: 3px; }
.sp-free-banner--ok b { color: #8fe6c0; font-size: 1.05rem; }
.sp-free-banner--ok span { color: rgba(216,196,255,.78); font-size: .85rem; }
.sp-free-banner--wait { background: rgba(124,58,200,.12); border-color: rgba(183,108,255,.3); display: flex; flex-direction: column; gap: 7px; }
.sp-free-wait-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-free-wait-row span { color: rgba(233,222,255,.85); font-size: .92rem; }
.sp-free-wait-row b { color: #ffd98a; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.sp-free-or { color: rgba(216,196,255,.72); font-size: .82rem; }
.sp-free-or b { color: #f3ecff; }
.sp-free-next { margin: 14px 0 0; font-size: .88rem; color: rgba(216,196,255,.7); text-align: center; }
.sp-free-next b { color: #ffd98a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-btn-row { display: flex; gap: 11px; flex-wrap: wrap; }
.sp-btn-row > .sp-btn { flex: 1 1 200px; margin: 0; }
.sp-btn--points { background: linear-gradient(135deg,#ffe6a8,#ffd166 55%,#f0b94a); border: 0; color: #2a1c05; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; box-shadow: 0 8px 22px rgba(255,209,102,.3); }
.sp-btn--points:hover { background: linear-gradient(135deg,#fff5dc,#ffd166 55%,#ffc94a); box-shadow: 0 10px 26px rgba(255,209,102,.45); }
.sp-btn--points.sp-btn--off { background: rgba(255,209,102,.16); border: 1px solid rgba(255,209,102,.45); color: #ffd98a; box-shadow: none; cursor: not-allowed; }
@media (max-width: 540px) { .sp-btn-row > .sp-btn { flex-basis: 100%; } }


/* Одиночная карта в результате — компактно по центру, без пустого бокса */
.sp-result-single { max-width: 210px; margin: 16px auto 16px; text-align: center; position: relative; }
.sp-result-single .sp-rs-img {
  width: 100%; aspect-ratio: 2 / 3; border-radius: 14px;
  background-size: cover; background-position: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 209, 102, 0.15);
}
.sp-result-single .sp-rs-name {
  margin-top: 12px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.15rem; color: #f3ecff;
}


/* Плотный тёмный фон блоков результата — чтобы яркий космо-фон не просвечивал «белым» (результата не просвечивали) */
.sp-result-summary,
.sp-result-conclusion,
.sp-chat-cta,
.sp-result-question,
.sp-ri {
  background-color: rgba(12, 8, 26, 0.86);
}


/* === Интерактивный разбор: кликабельные карты + модалка карты === */
.sp-clickable { cursor: pointer; }
.sp-rb-card.sp-clickable { transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .2s; }
.sp-rb-card.sp-clickable:hover { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.06); filter: brightness(1.08); z-index: 8; }
.sp-result-single.sp-clickable { transition: transform .25s, filter .2s; }
.sp-result-single.sp-clickable:hover { transform: scale(1.03); filter: brightness(1.06); }
.sp-review-hint { text-align: center; color: rgba(216, 196, 255, .82); font-size: .92rem; margin: 8px 0 24px; }

.sp-cm { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 18px; }
.sp-cm.sp-cm--open { display: flex; }
.sp-cm-backdrop { position: absolute; inset: 0; background: rgba(5, 3, 12, .76); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sp-cm-box {
  position: relative; z-index: 1; width: 100%; max-width: 380px; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(160deg, rgba(26, 16, 46, .97), rgba(12, 8, 26, .98));
  border: 1px solid rgba(183, 108, 255, .34); border-radius: 20px;
  padding: 24px 20px 20px; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  animation: sp-cm-in .28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sp-cm-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.sp-cm-close { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: rgba(255, 255, 255, .6); font-size: 28px; line-height: 1; cursor: pointer; }
.sp-cm-close:hover { color: #fff; }
.sp-cm-role { font-size: .72rem; letter-spacing: .6px; text-transform: uppercase; font-weight: 700; color: rgba(216, 196, 255, .8); margin-bottom: 14px; }
.sp-cm-img { width: 150px; aspect-ratio: 2/3; margin: 0 auto 14px; border-radius: 12px; background-size: cover; background-position: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.sp-cm-name { font-family: var(--font-display, 'Cormorant Garamond', serif); font-size: 1.45rem; font-weight: 700; color: #f3ecff; margin-bottom: 14px; }
.sp-cm-text { color: rgba(255, 255, 255, .9); font-size: 1rem; line-height: 1.62; text-align: left; margin-bottom: 20px; }
.sp-cm-text p { margin: 0; }
.sp-cm-text .sp-cm-locked { text-align: center; color: rgba(216, 196, 255, .85); font-style: italic; }
.sp-cm-actions { display: flex; flex-direction: column; gap: 10px; }
.sp-cm-actions .sp-btn { width: 100%; }


/* ===== Полиш разбора: анимации модалки + типографика + появление карт ===== */

/* Модалка: карта влетает с 3D-флипом, контент поднимается со стаггером */
.sp-cm-box.sp-cm-play .sp-cm-img { animation: sp-cm-card .62s cubic-bezier(.2, .9, .3, 1.15) both; }
.sp-cm-box.sp-cm-play .sp-cm-role { animation: sp-cm-rise .5s ease both .06s; }
.sp-cm-box.sp-cm-play .sp-cm-name { animation: sp-cm-rise .5s ease both .16s; }
.sp-cm-box.sp-cm-play .sp-cm-text { animation: sp-cm-rise .55s ease both .26s; }
.sp-cm-box.sp-cm-play .sp-cm-actions { animation: sp-cm-rise .5s ease both .38s; }
@keyframes sp-cm-card {
  from { opacity: 0; transform: perspective(800px) translateY(14px) rotateY(-24deg) scale(.9); }
  to { opacity: 1; transform: perspective(800px) translateY(0) rotateY(0) scale(1); }
}
@keyframes sp-cm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Свечение-ореол за картой в модалке */
.sp-cm-img { position: relative; }
.sp-cm-img::after {
  content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 24px;
  background: radial-gradient(ellipse at 50% 58%, rgba(255, 209, 102, .30), rgba(155, 107, 255, .14) 46%, transparent 72%);
  filter: blur(10px); animation: sp-cm-glow 3.4s ease-in-out infinite;
}
@keyframes sp-cm-glow { 0%, 100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.05); } }

/* Типографика толкования в модалке: абзацы, межстрочка, буквица */
.sp-cm-text { font-size: 1.02rem; line-height: 1.66; }
.sp-cm-text p { margin: 0 0 .72em; }
.sp-cm-text p:last-child { margin-bottom: 0; }
.sp-cm-text p:first-of-type:not(.sp-cm-locked)::first-letter {
  font-family: var(--font-decor, 'Cormorant Garamond', serif);
  font-size: 2.6em; line-height: .82; float: left; margin: 6px 9px -2px 0;
  color: #ffd166; text-shadow: 0 0 14px rgba(255, 209, 102, .45);
}
.sp-cm-locked { text-align: center; font-style: italic; }

/* Появление карт в результате — стаггер снизу вверх */
@keyframes sp-rb-in {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(20px) scale(.9); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
}
.sp-result-board .sp-rb-card { animation: sp-rb-in .62s cubic-bezier(.2, .9, .3, 1.08) backwards; }
.sp-result-board .sp-rb-card:nth-child(1) { animation-delay: .05s; }
.sp-result-board .sp-rb-card:nth-child(2) { animation-delay: .13s; }
.sp-result-board .sp-rb-card:nth-child(3) { animation-delay: .21s; }
.sp-result-board .sp-rb-card:nth-child(4) { animation-delay: .29s; }
.sp-result-board .sp-rb-card:nth-child(5) { animation-delay: .37s; }
.sp-result-board .sp-rb-card:nth-child(6) { animation-delay: .45s; }
.sp-result-board .sp-rb-card:nth-child(7) { animation-delay: .53s; }
.sp-result-board .sp-rb-card:nth-child(8) { animation-delay: .61s; }
.sp-result-board .sp-rb-card:nth-child(9) { animation-delay: .69s; }
.sp-result-board .sp-rb-card:nth-child(10) { animation-delay: .77s; }
@keyframes sp-rs-in { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
.sp-result-single { animation: sp-rs-in .6s cubic-bezier(.2, .9, .3, 1.08) backwards .1s; }

/* Типографика общего толкования (вступление/итог) */
.sp-result-summary p, .sp-result-conclusion p { line-height: 1.72; }
.sp-result-summary p:first-of-type::first-letter {
  font-family: var(--font-decor, 'Cormorant Garamond', serif);
  font-size: 2.8em; line-height: .82; float: left; margin: 6px 10px -2px 0;
  color: #ffd166; text-shadow: 0 0 14px rgba(255, 209, 102, .4);
}

@media (prefers-reduced-motion: reduce) {
  .sp-cm-box.sp-cm-play .sp-cm-img,
  .sp-cm-box.sp-cm-play .sp-cm-role,
  .sp-cm-box.sp-cm-play .sp-cm-name,
  .sp-cm-box.sp-cm-play .sp-cm-text,
  .sp-cm-box.sp-cm-play .sp-cm-actions,
  .sp-result-board .sp-rb-card,
  .sp-result-single { animation: none !important; }
}


/* === Толкование карты: лид + маркированные пункты (визуальная структура) === */
.sp-cm-text .sp-cm-lead {
  font-size: 1.08rem; line-height: 1.52; color: #f6efff; font-weight: 500;
  margin: 0 0 16px; padding-left: 12px; border-left: 2px solid rgba(255, 209, 102, .55);
}
.sp-cm-text .sp-cm-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.sp-cm-text .sp-cm-points li {
  position: relative; padding-left: 24px; line-height: 1.55; font-size: .98rem; color: rgba(255, 255, 255, .87);
}
.sp-cm-text .sp-cm-points li::before {
  content: "◆"; position: absolute; left: 2px; top: .18em; color: #ffd166; font-size: .68em;
  text-shadow: 0 0 8px rgba(255, 209, 102, .55);
}
/* буквица больше не нужна — структура задаётся лидом и пунктами */
.sp-cm-text .sp-cm-lead::first-letter { font: inherit; float: none; margin: 0; color: inherit; text-shadow: none; }


/* === UX-доработки спреда === */
/* Имя карты на доске результата убрано — оно есть в модалке (чище в плотных формах, подписи ролей не налезают) */
.sp-result-board .sp-rb-name { display: none; }
/* Карты выглядят мягче, менее «квадратно» */
.sp-rb-img { border-radius: 13px; box-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 209, 102, .14); }

/* Подсказка-рука «тапни карту» (~2с при открытии результата) */
/* Подсказка «нажми на карту»: моргает 3 раза вместе с золотой аурой карты, затем исчезает */
.sp-tap-label {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  white-space: nowrap; z-index: 10; pointer-events: none;
  background: rgba(20, 10, 30, .92); border: 1px solid var(--gold, #ffd166);
  color: var(--gold, #ffd166); padding: 6px 14px; border-radius: 20px;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  /* Плавнее и мягче: медленный цикл, 2 повтора, нежное затухание (не бросается в глаза) */
  animation: sp-tap-blink 1.5s ease-in-out 2, sp-tap-out .6s ease 2.5s forwards;
}
.sp-tap-label::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--gold, #ffd166);
}
@keyframes sp-tap-blink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes sp-tap-out { to { opacity: 0; } }
.sp-card-pulse .sp-rs-img, .sp-card-pulse .sp-rb-img { animation: sp-card-aura 1.5s ease-in-out 2 forwards; }
@keyframes sp-card-aura {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0), 0 8px 22px rgba(0, 0, 0, .45); }
  50% { box-shadow: 0 0 14px 3px rgba(255, 209, 102, .3), 0 8px 22px rgba(0, 0, 0, .45); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-tap-label, .sp-card-pulse .sp-rs-img, .sp-card-pulse .sp-rb-img { animation: none; }
}

/* Выбор карт на мобиле — ровная сетка 3 в ряд вместо разнобоя */
@media (max-width: 600px) {
  .sp-stage--picking {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: start;
    gap: 16px 6px;
  }
}

/* Реальные карты в уникальных раскладах (детектор/развилка/сердце) — изображение + клик */
.sp-rcards {
  display: flex;
  gap: 11px;
  justify-content: center;
  align-items: flex-start;
  margin: 8px 0 15px;
}
.sp-rcard {
  position: relative;            /* якорь для .sp-tap-label */
  flex: 1 1 0;
  max-width: 132px;
  text-align: center;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .2s;
}
.sp-rcard:hover { transform: translateY(-4px); filter: brightness(1.07); }
.sp-rcard-role {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent, #b76cff);
  margin-bottom: 6px;
  min-height: 1.5em;
  line-height: 1.2;
}
.sp-rcard .sp-rb-img {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
}
.sp-rcard-name {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  margin-top: 6px;
  line-height: 1.18;
}
/* Появление с лёгкой задержкой по очереди */
.sp-rcards .sp-rcard { animation: sp-rs-in .55s cubic-bezier(.2, .9, .3, 1.08) backwards; }
.sp-rcards .sp-rcard:nth-child(1) { animation-delay: .05s; }
.sp-rcards .sp-rcard:nth-child(2) { animation-delay: .14s; }
.sp-rcards .sp-rcard:nth-child(3) { animation-delay: .23s; }
@media (prefers-reduced-motion: reduce) {
  .sp-rcards .sp-rcard { animation: none; }
}
@media (max-width: 540px) {
  .sp-rcards { gap: 7px; }
  .sp-rcard { max-width: none; }
  .sp-rcard-role { font-size: .55rem; margin-bottom: 4px; }
  .sp-rcard-name { font-size: .76rem; margin-top: 4px; }
  .sp-rcard .sp-rb-img { border-radius: 9px; }
}


/* === Толкование: подсветка карт + абзацы === */
.sp-hl { color: #ffd166; font-weight: 700; }
.sp-result-summary p, .sp-result-conclusion p { margin: 0 0 .72em; line-height: 1.72; }
.sp-result-summary p:last-child, .sp-result-conclusion p:last-child { margin-bottom: 0; }
/* убираем буквицу — структуру задают абзацы, а Ден на «1 букву» ругался */
.sp-result-summary p:first-of-type::first-letter { font: inherit; float: none; margin: 0; color: inherit; text-shadow: none; }
.sp-cm-text .sp-hl { color: #ffd166; font-weight: 700; }


/* === Толкование результата в стиле модалки: лид + пункты ◆ === */
.sp-result-summary .sp-fmt-lead, .sp-result-conclusion .sp-fmt-lead {
  font-size: 1.05rem; line-height: 1.55; color: #f6efff; font-weight: 500;
  margin: 0 0 16px; padding-left: 13px; border-left: 2px solid rgba(255, 209, 102, .55);
}
.sp-result-summary .sp-fmt-points, .sp-result-conclusion .sp-fmt-points {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px;
}
.sp-result-summary .sp-fmt-points li, .sp-result-conclusion .sp-fmt-points li {
  position: relative; padding-left: 24px; line-height: 1.6; color: rgba(255, 255, 255, .88);
}
.sp-result-summary .sp-fmt-points li::before, .sp-result-conclusion .sp-fmt-points li::before {
  content: "◆"; position: absolute; left: 2px; top: .2em; color: #ffd166; font-size: .68em;
  text-shadow: 0 0 8px rgba(255, 209, 102, .55);
}

/* === Натальная карта === */
.natal-legend { font-size: .74rem; color: rgba(255,255,255,.6); margin: 2px 0 4px; }
.sp-result--natal [data-planet] { transition: filter .15s; }
.sp-result--natal [data-planet]:hover { filter: brightness(1.3); }
.natal-three { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 10px 0 14px; text-align: left; }
.natal-three-card { background: rgba(124,58,200,.1); border: 1px solid rgba(183,108,255,.26); border-radius: 13px; padding: 12px 14px; }
.natal-three-h { display: flex; align-items: center; gap: 11px; margin-bottom: 7px; }
.natal-three-glyph { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #ffe6a8; background: radial-gradient(circle at 40% 35%, rgba(255,209,102,.22), rgba(124,58,200,.18)); border: 1px solid rgba(255,209,102,.3); border-radius: 50%; }
.natal-three-label { font-family: var(--font-display, "Cormorant Garamond", serif); font-size: 1.12rem; font-weight: 700; color: #f3ecff; }
.natal-three-place { font-size: .8rem; color: #c4a0ff; }
.natal-three-text { font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.85); }
.natal-planets { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 6px 0 14px; }
.natal-prow { display: flex; align-items: center; gap: 8px; background: rgba(10,6,24,.42); border: 1px solid rgba(201,179,236,.18); border-radius: 11px; padding: 9px 11px; cursor: pointer; text-align: left; font: inherit; color: #ede2ff; transition: border-color .2s, background .2s; }
.natal-prow:hover { border-color: rgba(255,209,102,.45); background: rgba(124,58,200,.14); }
.natal-prow-glyph { font-size: 1.05rem; color: #ffe6a8; flex-shrink: 0; width: 20px; text-align: center; }
.natal-prow-name { font-weight: 600; font-size: .86rem; flex-shrink: 0; }
.natal-prow-place { font-size: .76rem; color: var(--text-muted, #b6a6d6); margin-left: auto; text-align: right; }
.natal-block { background: rgba(10,6,24,.4); border: 1px solid rgba(201,179,236,.16); border-radius: 13px; padding: 13px 16px; margin: 0 0 11px; text-align: left; font-size: .9rem; line-height: 1.6; color: rgba(233,222,255,.88); }
.natal-block-h { font-weight: 700; color: #f3ecff; margin-bottom: 6px; font-size: .92rem; }
.natal-block--accent { background: rgba(255,209,102,.08); border-color: rgba(255,209,102,.28); color: #ffe7b8; }
.natal-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(6,3,14,.72); backdrop-filter: blur(4px); }
.natal-modal.open { display: flex; }
.natal-modal-box { position: relative; max-width: 420px; width: 100%; background: linear-gradient(160deg, #1d1233, #120b22); border: 1px solid rgba(183,108,255,.3); border-radius: 18px; padding: 24px 22px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: sp-rs-in .4s cubic-bezier(.2,.9,.3,1.08); }
.natal-modal-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: rgba(255,255,255,.5); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.natal-modal-glyph { font-size: 2.4rem; color: #ffe6a8; }
.natal-modal-name { font-family: var(--font-display, serif); font-size: 1.4rem; font-weight: 700; color: #fff; margin-top: 4px; }
.natal-modal-place { font-size: .88rem; color: #c4a0ff; margin-top: 2px; }
.natal-modal-text { font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.86); margin-top: 12px; text-align: left; }
@media (max-width: 540px) {
  .natal-planets { grid-template-columns: 1fr; }
  .natal-prow-place { font-size: .72rem; }
}

/* Раскрывающиеся секции натала (Дома / Аспекты / Транзиты) */
.natal-sec { background: rgba(10,6,24,.4); border: 1px solid rgba(201,179,236,.16); border-radius: 13px; margin: 0 0 11px; overflow: hidden; }
.natal-sec-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; font-weight: 700; color: #f3ecff; font-size: .95rem; list-style: none; user-select: none; }
.natal-sec-h::-webkit-details-marker { display: none; }
.natal-sec-chev { color: #c4a0ff; transition: transform .3s; font-size: .75rem; }
.natal-sec[open] .natal-sec-chev { transform: rotate(180deg); }
.natal-sec[open] .natal-sec-h { border-bottom: 1px solid rgba(201,179,236,.12); }
.natal-sec-body { padding: 10px 16px 14px; text-align: left; animation: natal-reveal .38s ease; }
@keyframes natal-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.natal-hrow { padding: 8px 0; border-top: 1px solid rgba(201,179,236,.1); }
.natal-hrow:first-child { border-top: none; }
.natal-hrow-top { font-size: .86rem; color: #ede2ff; }
.natal-h-pl { color: #ffe6a8; margin-left: 3px; font-size: .98rem; }
.natal-hrow-text { font-size: .84rem; color: rgba(233,222,255,.78); line-height: 1.5; margin-top: 3px; }
.natal-arow { padding: 9px 0; border-top: 1px solid rgba(201,179,236,.1); }
.natal-arow:first-child { border-top: none; }
.natal-arow-top { font-size: .88rem; color: #ede2ff; margin-bottom: 3px; }
.natal-arow-text { font-size: .85rem; color: rgba(233,222,255,.82); line-height: 1.55; }
.natal-tr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.natal-tr-chip { font-size: .78rem; padding: 5px 10px; border-radius: 999px; border: 1px solid; background: rgba(255,255,255,.03); white-space: nowrap; }
.natal-save { font-size: .82rem; color: #9be8c0; background: rgba(46,143,134,.1); border: 1px solid rgba(126,233,208,.28); border-radius: 11px; padding: 9px 13px; margin: 6px 0 10px; }

/* Анимации появления натала */
@keyframes natal-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes natal-wheel-in { from { opacity: 0; transform: scale(.9) rotate(-7deg); } to { opacity: 1; transform: none; } }
.sp-result--natal .natal-three-card, .sp-result--natal .natal-block, .sp-result--natal .natal-sec, .sp-result--natal .natal-planets, .sp-result--natal .natal-save { animation: natal-rise .55s cubic-bezier(.2,.9,.3,1.05) backwards; }
.sp-result--natal .natal-three-card:nth-child(2) { animation-delay: .05s; }
.sp-result--natal .natal-three-card:nth-child(3) { animation-delay: .1s; }
.sp-result--natal svg { animation: natal-wheel-in .9s cubic-bezier(.2,.9,.3,1.05) backwards .05s; }
.sp-result--natal [data-planet] { transition: transform .18s, filter .18s; }
.sp-result--natal svg [data-planet]:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .sp-result--natal .natal-three-card, .sp-result--natal .natal-block, .sp-result--natal .natal-sec, .sp-result--natal .natal-planets, .sp-result--natal .natal-save, .sp-result--natal svg, .natal-sec-body { animation: none; } }

/* Хук-чат Алины (визуал как на главной) — чипы-варианты */
.sp-hook.alina-hero { margin: 16px auto 0; }
.sp-hook .alina-hero-form { margin-top: 12px; }
.sp-hook-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 13px 0 2px; }
.sp-hook-chip { background: rgba(168,85,247,.22); border: 1px solid rgba(183,108,255,.4); color: #e9def5; font-size: .85rem; line-height: 1.4; padding: 8px 14px; border-radius: 16px; text-decoration: none; white-space: normal; text-align: left; transition: background .2s, border-color .2s, transform .15s; }
.sp-hook-chip:hover { background: rgba(168,85,247,.34); border-color: rgba(183,108,255,.65); transform: translateY(-1px); }
.sp-hook-chip--ext { background: linear-gradient(135deg,#a855f7,#ec4899); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(168,85,247,.3); }

/* ===== Совместимость (синастрия) ===== */
.sp-compat-warn { background: rgba(255,209,102,.08); border: 1px solid rgba(255,209,102,.28); border-radius: 12px; padding: 11px 14px; color: rgba(255,255,255,.8); font-size: .86rem; line-height: 1.45; margin-bottom: 16px; text-align: left; }
.compat-gauge { width: 124px; height: 124px; border-radius: 50%; border: 4px solid #ffd166; margin: 14px auto 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(183,108,255,.3); }
.compat-gauge-num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1; }
.compat-gauge-num span { font-size: 1.1rem; }
.compat-gauge-lbl { color: rgba(255,255,255,.55); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.compat-formula { font-family: "Cormorant Garamond", serif; font-style: italic; color: #e9def5; font-size: 1.15rem; margin: 8px auto; max-width: 480px; }
.compat-bars { display: flex; flex-direction: column; gap: 16px; margin: 18px 0; text-align: left; }
.compat-bar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; }
.compat-bar-label { color: #fff; font-weight: 500; font-size: .95rem; }
.compat-bar-val { font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.compat-bar-track { height: 9px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.compat-bar-fill { height: 100%; border-radius: 999px; transition: width 1s cubic-bezier(.22,1,.36,1); }
.compat-bar-text { color: rgba(255,255,255,.68); font-size: .85rem; line-height: 1.45; margin-top: 6px; }
.compat-block { text-align: left; background: rgba(255,255,255,.04); border: 1px solid rgba(183,108,255,.2); border-radius: 14px; padding: 13px 15px; margin: 12px 0; color: rgba(255,255,255,.85); font-size: .92rem; line-height: 1.5; }
.compat-block-h { font-weight: 600; color: #ffd166; margin-bottom: 6px; font-size: .9rem; }
.compat-block--spark { border-color: rgba(91,232,154,.3); background: rgba(91,232,154,.06); }
.compat-block--friction { border-color: rgba(232,98,91,.3); background: rgba(232,98,91,.06); }
.compat-block--accent { border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.07); }
@media (prefers-reduced-motion: reduce) { .compat-bar-fill { transition: none; } }

/* ===== Совместимость: спидометр + карты пары ===== */
.compat-speedo-wrap { margin: 10px auto 2px; }
.compat-speedo { width: min(300px, 88vw); height: auto; display: block; margin: 0 auto; overflow: visible; }
.compat-speedo-needle { transform-box: view-box; transform-origin: 120px 122px; transform: rotate(0deg); transition: transform 1.35s cubic-bezier(.34,1.15,.4,1); }
.compat-speedo-num { font-family: var(--font-display); font-size: 34px; font-weight: 700; }
.compat-speedo-end { fill: rgba(255,255,255,.4); font-size: 12px; }
.compat-speedo-cap { color: rgba(255,255,255,.55); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; margin-top: -4px; }
@media (prefers-reduced-motion: reduce) { .compat-speedo-needle { transition: none; } }
.compat-cards-wrap { margin: 16px 0 6px; }
.compat-cards-h { font-weight: 600; color: #ffd166; font-size: .95rem; margin-bottom: 10px; }
.compat-cards { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.compat-card { width: 92px; cursor: pointer; transition: transform .18s ease; }
.compat-card:hover { transform: translateY(-4px); }
.compat-card-img { width: 92px; height: 138px; border-radius: 9px; background-size: cover; background-position: center; border: 1px solid rgba(255,209,102,.3); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.compat-card-lbl { color: #ffd166; font-size: .72rem; font-weight: 600; margin-top: 5px; }
.compat-card-name { color: rgba(255,255,255,.7); font-size: .72rem; line-height: 1.2; }
.compat-cards-layer { text-align: left; background: rgba(183,108,255,.07); border: 1px solid rgba(183,108,255,.22); border-radius: 12px; padding: 11px 14px; margin-top: 12px; color: rgba(255,255,255,.85); font-size: .9rem; line-height: 1.5; }

/* ===== «Три карты» ФЛАГМАН: лента времени ===== */
.tc3-q { display:inline-block; font-size:.86rem; color:#e6dffa; background:rgba(183,108,255,.1); border:1px solid rgba(183,108,255,.28); border-radius:999px; padding:6px 15px; margin:12px 0 4px; }
.tc3-rail { display:flex; align-items:center; max-width:380px; margin:14px auto 4px; padding:0 6px; }
.tc3-node { display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto; width:64px; }
.tc3-dot { width:13px; height:13px; border-radius:50%; background:#241a3a; border:2px solid #4a3d6b; transition:.4s; }
.tc3-node.lit .tc3-dot { background:var(--au); border-color:var(--au); box-shadow:0 0 10px var(--au); }
.tc3-nl { font-size:11px; color:#8a7fb0; transition:.4s; }
.tc3-node.lit .tc3-nl { color:#e6dffa; }
.tc3-seg { flex:1; height:2px; background:#34284f; border-radius:2px; position:relative; overflow:hidden; margin-bottom:18px; }
.tc3-seg::after { content:""; position:absolute; inset:0; width:0; background:linear-gradient(90deg,#d4a85f,#ffd166); transition:width .6s ease; }
.tc3-seg.fill::after { width:100%; }
.tc3-cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; max-width:400px; margin:2px auto 8px; }
.tc3-card { aspect-ratio:.62; perspective:800px; cursor:pointer; }
.tc3-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.34,1.2,.5,1); }
.tc3-card.tc3-rev .tc3-inner { transform:rotateY(180deg); }
.tc3-back, .tc3-front { position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.tc3-back { background:
    radial-gradient(ellipse at 50% 28%, rgba(252,237,200,.12), transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(139,92,246,.4), transparent 70%),
    linear-gradient(180deg,#14102a 0%,#0a0820 55%,#050410 100%);
  box-shadow: inset 0 0 38px rgba(167,139,250,.18); border:0; }
.tc3-back::before { content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none; z-index:2;
  background:linear-gradient(135deg,#e5e4e2 0%,#fcd34d 35%,#e5e4e2 70%,#fcd34d 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1.5px; }
.tc3-back::after { content:""; position:absolute; inset:7px; border-radius:8px; pointer-events:none; z-index:2;
  border:.6px solid rgba(252,211,77,.4); }
.tc3-rune { font-size:30px; color:#f3d98a; position:relative; z-index:3;
  text-shadow:0 0 14px rgba(252,211,77,.6), 0 0 4px rgba(252,237,200,.85); }
.tc3-bl { font-size:9px; letter-spacing:.22em; color:#9988c4; margin-top:6px; text-transform:uppercase; position:relative; z-index:3; }
.tc3-front { transform:rotateY(180deg); background:#120b24; border:1.5px solid var(--au); box-shadow:0 0 16px -3px var(--au); padding:5px; }
.tc3-img { width:100%; flex:1; border-radius:8px; background-size:cover; background-position:center; }
.tc3-nm { font-size:10.5px; color:#ece7f5; margin-top:5px; line-height:1.2; text-align:center; }
.tc3-card.tc3-active .tc3-back { animation:tc3pulse 1.5s ease-in-out infinite; }
@keyframes tc3pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,209,102,0);} 50%{ box-shadow:0 0 16px 1px rgba(255,209,102,.45);} }
.tc3-ess { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; max-width:400px; margin:0 auto 12px; text-align:center; }
.tc3-ess > div { opacity:0; transform:translateY(5px); transition:.5s; }
.tc3-ess > div.on { opacity:1; transform:none; }
.tc3-ew { font-family:var(--font-display); font-size:15px; color:var(--au); }
.tc3-er { font-size:10px; color:#8a7fb0; line-height:1.25; }
.tc3-prompt { text-align:center; font-size:.82rem; color:#b9a6e0; min-height:18px; margin:2px 0 4px; }
.tc3-ans { max-height:0; opacity:0; overflow:hidden; transition:max-height 1s ease, opacity 1s ease; text-align:left; }
.tc3-ans.show { max-height:6000px; opacity:1; }
.tc3-answer { background:rgba(255,209,102,.07); border:1px solid rgba(255,209,102,.35); border-radius:14px; padding:13px 16px; margin:12px 0 0; }
.tc3-alab { font-size:10px; letter-spacing:.14em; color:#caa75a; text-transform:uppercase; }
.tc3-atext { font-family:var(--font-display); font-size:1.05rem; color:#ffe9b0; line-height:1.45; margin-top:5px; }
.tc3-scale { margin:14px 0 0; }
.tc3-slab { font-size:.72rem; letter-spacing:.06em; color:#9a8fc0; text-transform:uppercase; margin-bottom:10px; }
.tc3-metric { margin-bottom:11px; }
.tc3-mrow { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:.9rem; margin-bottom:5px; }
.tc3-mrow b { font-weight:600; color:#ece7f5; }
.tc3-track { height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.tc3-fill { height:100%; border-radius:999px; width:0; transition:width 1s cubic-bezier(.3,1,.4,1) .2s; }
.tc3-note { font-size:.78rem; color:#9a8fc0; margin-top:4px; }
.tc3-when { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:#e6dffa; background:rgba(183,108,255,.1); border:1px solid rgba(183,108,255,.25); border-radius:999px; padding:5px 13px; margin-top:4px; }
.tc3-block { background:rgba(183,108,255,.07); border:1px solid rgba(183,108,255,.22); border-radius:12px; padding:11px 14px; margin:13px 0 0; font-size:.88rem; color:rgba(255,255,255,.85); line-height:1.5; }
.tc3-block b { color:#c4a0ff; }
.tc3-story { font-size:.9rem; color:#cbc2e6; line-height:1.55; margin:13px 0 0; }
.tc3-cliff { font-style:italic; color:#e9def5; font-size:.92rem; line-height:1.5; margin:14px 0 0; padding-left:12px; border-left:2px solid rgba(255,209,102,.5); }
.tc3-ext { display:block; text-decoration:none; background:rgba(255,209,102,.06); border:1px solid rgba(255,209,102,.32); border-radius:14px; padding:13px 15px; margin:15px 0 0; }
.tc3-ext-h { font-weight:600; color:#ffd166; font-size:.92rem; }
.tc3-ext-list { margin:8px 0 11px; padding-left:20px; color:rgba(255,255,255,.85); font-size:.86rem; line-height:1.55; }
.tc3-ext-list li { margin:3px 0; }
.tc3-ext-btn { display:inline-block; background:linear-gradient(135deg,#ffd98a,#ffc04d); color:#3a2a0a; font-weight:700; font-size:.9rem; border-radius:11px; padding:9px 18px; }
.tc3-fork { margin-top:18px; border-top:1px dashed rgba(183,108,255,.22); padding-top:14px; }
.tc3-fhead { font-size:.78rem; letter-spacing:.06em; color:#9a8fc0; text-transform:uppercase; text-align:center; margin-bottom:9px; }
.tc3-fbody { border-radius:12px; padding:11px 14px; font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.85); }
.tc3-fbody b { color:#ffd166; }
.tc3-f-dark { background:rgba(138,90,106,.1); border:1px solid rgba(138,90,106,.32); }
.tc3-f-bright { background:rgba(91,232,154,.07); border:1px solid rgba(91,232,154,.3); }
.tc3-f-bright b { color:#7df0ad; }
@media (prefers-reduced-motion: reduce) { .tc3-inner, .tc3-fill, .tc3-seg::after { transition:none; } }


/* ===== Soft-paywall v2: ~30% текста видно, ~70% под блюром; блок Алины открыт ===== */
.sp-result.sp-locked { position:relative; }
.sp-paywall { position:absolute; left:-2px; right:-2px; z-index:30; pointer-events:none; }
.sp-paywall-frost {
  position:absolute; inset:0; pointer-events:auto; border-radius:14px;
  -webkit-backdrop-filter: blur(7px) saturate(.95); backdrop-filter: blur(7px) saturate(.95);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 74px, #000 100%);
          mask: linear-gradient(180deg, transparent 0, #000 74px, #000 100%);
  background: linear-gradient(180deg, rgba(11,6,26,0) 0, rgba(11,6,26,.12) 74px, rgba(11,6,26,.28) 190px, rgba(11,6,26,.38) 100%);
}
.sp-paywall-card {
  position:absolute; left:50%; top:30px; transform:translateX(-50%);
  width:min(380px,92%); box-sizing:border-box; text-align:center; pointer-events:auto;
  background:linear-gradient(160deg,#1e1338,#150c29); border:1px solid rgba(155,107,255,.34);
  border-radius:18px; padding:22px 22px 20px;
  box-shadow:0 22px 55px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.sp-paywall-lock { font-size:2.1rem; line-height:1; margin-bottom:8px; filter:drop-shadow(0 0 12px rgba(186,150,255,.55)); }
.sp-paywall-card h3 { margin:2px 0 8px; font-family:var(--font-display,'Cormorant Garamond',serif); font-size:1.45rem; font-weight:700; color:#f3ecff; }
.sp-paywall-card p { margin:0 0 15px; font-size:.88rem; line-height:1.5; color:rgba(213,197,245,.86); }
.sp-paywall-btn { display:inline-block; width:100%; box-sizing:border-box; }
.sp-paywall-mini { margin-top:10px; font-size:.74rem; color:rgba(184,166,222,.72); }