/* ============ Ритуал: вёрстка фаз ============ */
.ritual{display:flex;flex-direction:column;min-height:100%}
.overline{font:600 11px/1 var(--font-text);letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-dim);text-align:center;margin:2px 0 4px}
.ritual__accent{font-family:var(--font-hand);font-style:italic;font-size:17px;
  color:var(--accent);text-align:center;margin-top:2px}
.ritual__hint{color:var(--text-dim);font-size:14px;text-align:center;margin-top:4px}
.ritual__q{
  font-family:var(--font-display);font-size:20px;font-style:italic;
  text-align:center;color:var(--text);margin:10px 0 4px;
}

/* --- Ш1 перемешивание: стопка рубашек проходит сквозь себя --- */
.shuffle{position:relative;height:200px;display:flex;align-items:center;justify-content:center;margin:26px 0}
.shuffle__card{
  position:absolute;width:88px;height:150px;border-radius:10px;
  background:
    radial-gradient(circle at 50% 30%,rgba(232,180,74,.25),transparent 60%),
    repeating-linear-gradient(45deg,var(--back-a) 0 6px,var(--bg-top) 6px 12px);
  border:1px solid rgba(232,180,74,.35);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.shuffle__card:nth-child(1){animation:tk-shuffle-a 1.4s var(--ease-inout) infinite}
.shuffle__card:nth-child(2){animation:tk-shuffle-b 1.4s var(--ease-inout) infinite}
.shuffle__card:nth-child(3){animation:tk-shuffle-c 1.4s var(--ease-inout) infinite}
@keyframes tk-shuffle-a{0%,100%{transform:translateX(-30px) rotate(-8deg)}50%{transform:translateX(30px) rotate(8deg)}}
@keyframes tk-shuffle-b{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateY(-14px) rotate(-4deg)}}
@keyframes tk-shuffle-c{0%,100%{transform:translateX(30px) rotate(8deg)}50%{transform:translateX(-30px) rotate(-8deg)}}

/* золотые искры вокруг тасовки */
.spark{position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--gold-soft);filter:drop-shadow(0 0 4px var(--gold));
  opacity:0;animation:tk-spark 1.4s var(--ease-out) infinite}
@keyframes tk-spark{0%{opacity:0;transform:scale(.4)}
  40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4) translateY(-20px)}}

/* --- Ш2 веер из рубашек --- */
.fan{position:relative;height:230px;margin:22px 0}
.fan__wrap{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:1px;height:1px}
.back{
  position:absolute;left:-44px;bottom:0;width:88px;height:150px;border-radius:10px;
  transform-origin:50% 130%;
  background:
    radial-gradient(circle at 50% 30%,rgba(232,180,74,.25),transparent 60%),
    repeating-linear-gradient(45deg,var(--back-a) 0 6px,var(--bg-top) 6px 12px);
  border:1px solid rgba(232,180,74,.5);
  box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 16px rgba(232,180,74,.12);
  cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out),
             filter var(--dur-fast),opacity var(--dur-base);
  animation:fan-in var(--dur-slow) var(--ease-out) both;
}
.back::after{content:"\263D";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:32px;
  color:var(--accent-soft);opacity:.8;text-shadow:0 0 10px rgba(232,160,138,.4)}
.back--picked{filter:drop-shadow(0 0 16px var(--accent)) brightness(1.15);pointer-events:none}
.back--picked::after{opacity:1;color:#fff;text-shadow:0 0 14px var(--accent)}
.back--dim{opacity:.4}
@keyframes fan-in{from{opacity:0;transform:rotate(0) translateY(30px)}}

/* --- Ш3 выкладка + переворот --- */
.spread-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.slot{width:92px;display:flex;flex-direction:column;align-items:center;gap:8px}
.slot__pos{font-size:11px;color:var(--text-dim);text-align:center;min-height:26px}
.flip{width:92px;height:158px;perspective:900px}
.flip__inner{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform var(--dur-slow) var(--ease-inout);
}
.flip--open .flip__inner{transform:rotateY(180deg)}
.flip__face,.flip__back{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:10px;
  border:1px solid rgba(232,180,74,.35);box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.flip__back{
  background:
    radial-gradient(circle at 50% 30%,rgba(232,180,74,.25),transparent 60%),
    repeating-linear-gradient(45deg,var(--back-a) 0 6px,var(--bg-top) 6px 12px);
}
/* карта ждёт тапа — мягкая пульсация-подсказка */
.flip--tappable{cursor:pointer}
.flip--tappable .flip__back{animation:tk-pulse 1.8s var(--ease-inout) infinite}
@keyframes tk-pulse{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.4)}
  50%{box-shadow:0 6px 22px rgba(232,180,74,.45)}}
.flip__face{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,var(--panel-a),var(--bg-top));
  display:flex;align-items:center;justify-content:center;padding:8px;
  text-align:center;
}
/* плейсхолдер лица карты — заменится артом Райдер-Уэйт от дизайнера */
.flip__face .cardname{
  font-family:var(--font-display);font-size:14px;color:var(--gold-soft);line-height:1.2}
.flip__face.reversed .cardname{transform:rotate(180deg)}
.flip--open .flip__inner{animation:tk-glow var(--dur-slow) var(--ease-inout)}
@keyframes tk-glow{50%{box-shadow:0 0 26px var(--gold)}}
/* шиммер-заглушка, пока текст толкования догоняет */
.shimmer{height:12px;border-radius:6px;margin:6px 0;
  background:linear-gradient(90deg,rgba(203,191,232,.08),rgba(203,191,232,.22),rgba(203,191,232,.08));
  background-size:200% 100%;animation:tk-shimmer 1.2s linear infinite}
@keyframes tk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.interp{
  font-size:14px;line-height:1.5;color:var(--text);
  opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.interp--show{opacity:1;transform:none}

/* --- Ш4 вывод --- */
.verdict{
  font-family:var(--font-display);font-size:19px;line-height:1.4;
  text-align:center;margin:20px 0;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
.verdict--show{opacity:1;transform:none}
.footer-note{font-size:11px;color:var(--text-dim);text-align:center;margin-top:8px}

.skip{
  align-self:center;margin-top:6px;color:var(--text-dim);font-size:12px;
  background:none;border:none;cursor:pointer;text-decoration:underline;
}