.tarot-test-section {
  min-height: auto;
  padding-block: clamp(5.5rem, 9vw, 8rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 42%, rgba(32, 82, 154, .12), transparent 34rem),
    linear-gradient(180deg, rgba(8, 6, 5, .28), rgba(16, 11, 8, .56));
}

.tarot-test-shell {
  position: relative;
  scroll-margin-top: 5.5rem;
  min-height: clamp(620px, 72vw, 790px);
  overflow: hidden;
  border: 1px solid rgba(198, 155, 106, .45);
  border-radius: 34px 8px;
  background: linear-gradient(145deg, rgba(21, 16, 13, .96), rgba(7, 6, 5, .94));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42), inset 0 0 70px rgba(198, 155, 106, .035);
}

.tarot-test-shell::before,
.tarot-test-shell::after {
  position: absolute;
  z-index: 3;
  width: 74px;
  height: 74px;
  content: "";
  pointer-events: none;
}

.tarot-test-shell::before { top: 13px; left: 13px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); border-radius: 20px 0 0; }
.tarot-test-shell::after { right: 13px; bottom: 13px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); border-radius: 0 0 20px; }

.tarot-test-shell.is-quiz-active {
  height: min(820px, calc(100svh - 6rem));
  min-height: 520px;
}

.tarot-test-intro,
.tarot-quiz,
.tarot-loader,
.tarot-result {
  min-height: inherit;
  transition: opacity .28s ease, transform .28s ease;
}

.tarot-test-intro[hidden],
.tarot-quiz[hidden],
.tarot-loader[hidden],
.tarot-result[hidden] { display: none; }

.tarot-test-intro.is-leaving,
.tarot-quiz.is-leaving,
.tarot-loader.is-leaving,
.tarot-result.is-leaving { opacity: 0; transform: translateY(-12px) scale(.992); }

.tarot-quiz:not(.is-active),
.tarot-loader:not(.is-active),
.tarot-result:not(.is-active) { opacity: 0; transform: translateY(12px); }

.tarot-test-intro { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); align-items: stretch; }

.tarot-test-portrait { position: relative; min-height: 640px; overflow: hidden; background: #0b0908; }
.tarot-test-portrait::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent 62%, rgba(10, 8, 7, .92)), linear-gradient(0deg, rgba(8, 6, 5, .72), transparent 28%); pointer-events: none; }
.tarot-test-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.tarot-test-intro-copy { display: flex; max-width: 760px; padding: clamp(3rem, 6vw, 6.5rem); align-items: center; flex-direction: column; justify-content: center; }
.tarot-test-intro-copy h2 { font-size: clamp(2.35rem, 4.4vw, 4.8rem); line-height: 1.02; }
.tarot-test-lead { max-width: 680px; margin: 2rem auto 1.2rem; color: var(--text); font-size: clamp(1.08rem, 1rem + .35vw, 1.38rem); line-height: 1.55; }
.tarot-test-note { max-width: 620px; margin: 0 auto 2.2rem; color: var(--text-muted); line-height: 1.65; }

.button-test { color: #f8e8cf; border-color: #c9a36f; background: linear-gradient(135deg, #1b55a0, #102f68 58%, #151c3d); box-shadow: 0 13px 34px rgba(13, 60, 132, .3), inset 0 1px rgba(255, 255, 255, .12); }
.button-test:hover { color: #fff8ed; background: linear-gradient(135deg, #2768b9, #173e80 58%, #19244d); box-shadow: 0 16px 42px rgba(20, 77, 165, .42), 0 0 0 1px rgba(227, 189, 138, .15); }
.button-test:focus-visible,
.tarot-option:focus-visible,
.tarot-back:focus-visible,
.tarot-close:focus-visible,
.tarot-restart:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.button-test:disabled { cursor: not-allowed; opacity: .42; transform: none; box-shadow: none; }

.tarot-quiz { max-width: 1120px; padding: clamp(1.25rem, 3vh, 2.5rem) clamp(1.5rem, 4vw, 3.5rem); margin-inline: auto; }
.tarot-quiz-topbar { display: grid; align-items: center; grid-template-columns: 1fr auto 1fr; gap: 1rem; }
.tarot-back,
.tarot-close,
.tarot-restart { min-height: 44px; padding: .5rem .75rem; color: var(--gold); border: 0; background: transparent; font: 600 .72rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.tarot-back { justify-self: start; }
.tarot-close { width: 44px; padding: 0; justify-self: end; color: var(--text-muted); font-size: 1.5rem; }
.tarot-back:hover,
.tarot-close:hover,
.tarot-restart:hover { color: var(--gold-bright); }
.tarot-progress-label { margin: 0; color: var(--text-muted); font: .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.tarot-progress { height: 2px; margin: .75rem 0 clamp(1.25rem, 3vh, 2.5rem); overflow: hidden; background: rgba(198, 155, 106, .16); }
.tarot-progress span { display: block; width: 12.5%; height: 100%; background: linear-gradient(90deg, #365f9c, var(--gold-bright)); box-shadow: 0 0 14px rgba(227, 189, 138, .5); transition: width .4s ease; }

.tarot-question { text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .38s ease, transform .38s cubic-bezier(.2, .75, .25, 1); }
.tarot-question.is-visible { opacity: 1; transform: none; }
.tarot-question.is-exiting { opacity: 0; transform: none; }
.tarot-question-number { margin: 0 0 1rem; color: var(--gold); font: .72rem/1.4 var(--sans); letter-spacing: .25em; text-transform: uppercase; }
.tarot-question h3,
.tarot-reading h3,
.tarot-next-step h3 { margin: 0; color: var(--gold-bright); font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3.7rem); font-weight: 400; line-height: 1.08; text-wrap: balance; }
.tarot-options { display: grid; margin: clamp(1.25rem, 3vh, 2rem) auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.45rem, 1vh, .75rem); text-align: left; }
.tarot-option { display: grid; min-height: 52px; padding: .62rem .75rem .62rem .9rem; align-items: center; grid-template-columns: 1fr 18px; gap: .65rem; color: var(--text-muted); border: 1px solid rgba(198, 155, 106, .28); border-radius: 13px 3px; background: rgba(11, 9, 8, .7); font: clamp(.78rem, .7rem + .16vw, .92rem)/1.3 var(--body); text-align: left; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease; }
.tarot-option:hover { color: var(--text); border-color: rgba(227, 189, 138, .66); transform: translateY(-1px); }
.tarot-option i { width: 16px; aspect-ratio: 1; border: 1px solid var(--gold-muted); border-radius: 50%; box-shadow: inset 0 0 0 4px #0b0908; }
.tarot-option.is-selected { color: #fff7ea; border-color: var(--gold); background: linear-gradient(115deg, rgba(25, 72, 141, .58), rgba(18, 22, 48, .8)); box-shadow: inset 0 0 28px rgba(38, 96, 180, .12); }
.tarot-option.is-selected i { background: var(--gold-bright); box-shadow: inset 0 0 0 4px #132f62, 0 0 12px rgba(227, 189, 138, .4); }
.tarot-question.is-answering .tarot-option:not(.is-selected) { opacity: .34; transform: scale(.985); }
.tarot-question.is-answering .tarot-option.is-selected { animation: tarot-answer-selected .52s ease both; }
.tarot-next { min-width: 230px; }

.tarot-loader {
  display: flex;
  min-height: inherit;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  color: var(--gold-bright);
  text-align: center;
}

.tarot-loader p { margin: 0; font: 400 clamp(1.5rem, 3vw, 2.2rem)/1 var(--display); letter-spacing: .08em; }
.tarot-loader-symbol { position: relative; width: 112px; aspect-ratio: 1; }
.tarot-loader-symbol::before,
.tarot-loader-symbol::after,
.tarot-loader-symbol span { position: absolute; border-radius: 50%; }
.tarot-loader-symbol::before { inset: 0; content: ""; border: 1px solid rgba(227, 189, 138, .55); animation: tarot-loader-pulse 1.35s ease-out infinite; }
.tarot-loader-symbol::after { inset: 22px; content: ""; border: 1px solid var(--gold); box-shadow: 0 0 28px rgba(39, 101, 190, .55), inset 0 0 22px rgba(198, 155, 106, .18); }
.tarot-loader-symbol span { top: 50%; left: 50%; width: 7px; aspect-ratio: 1; background: var(--gold-bright); box-shadow: 0 0 12px var(--gold); transform-origin: 0 0; animation: tarot-loader-orbit 2.4s linear infinite; }
.tarot-loader-symbol span:nth-child(2) { animation-delay: -.8s; }
.tarot-loader-symbol span:nth-child(3) { animation-delay: -1.6s; }

.tarot-result { padding: clamp(2rem, 5vw, 5rem); }
.tarot-result-grid { display: grid; max-width: 1120px; margin-inline: auto; align-items: center; grid-template-columns: minmax(230px, 360px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
.tarot-result-card { position: relative; margin: 0; text-align: center; }
.tarot-result-card img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border: 1px solid rgba(227, 189, 138, .62); border-radius: 9px; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); animation: tarot-card-reveal .75s cubic-bezier(.2, .8, .2, 1) both; }
.tarot-card-glow { position: absolute; inset: 10% -12%; border-radius: 50%; background: radial-gradient(circle, rgba(39, 101, 190, .35), rgba(198, 155, 106, .12) 36%, transparent 70%); filter: blur(22px); }
.tarot-result-card figcaption { position: relative; z-index: 1; margin-top: 1rem; color: var(--gold-bright); font-family: var(--display); font-size: 1.25rem; }
.tarot-reading p { color: var(--text-muted); font-size: clamp(1rem, .96rem + .2vw, 1.18rem); line-height: 1.62; }
.tarot-reading .eyebrow { color: var(--gold); font-size: .68rem; }
.tarot-reading-accent { padding-left: 1.1rem; border-left: 1px solid var(--gold); }
.tarot-reading-accent strong { color: var(--gold-bright); font-weight: 500; }
.tarot-next-step { max-width: 860px; padding-top: clamp(3.5rem, 7vw, 6rem); margin: clamp(3.5rem, 7vw, 6rem) auto 0; border-top: 1px solid rgba(198, 155, 106, .24); text-align: center; }
.tarot-next-step h3 { font-size: clamp(2rem, 3vw, 3rem); }
.tarot-next-step p { color: var(--text-muted); line-height: 1.6; }
.tarot-next-step .button { margin-top: 1rem; }
.tarot-restart { display: block; margin: 1rem auto 0; text-decoration: underline; text-underline-offset: 4px; }
.tarot-disclaimer { max-width: 780px; margin: 3rem auto 0; color: #8f8376; font: .78rem/1.55 var(--sans); text-align: center; }

@keyframes tarot-card-reveal {
  from { opacity: 0; transform: translateY(24px) rotateY(-9deg) scale(.96); }
  to { opacity: 1; transform: none; }
}

@keyframes tarot-answer-selected {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.025); box-shadow: 0 0 28px rgba(39, 101, 190, .42), inset 0 0 28px rgba(38, 96, 180, .2); }
}

@keyframes tarot-loader-pulse {
  0% { opacity: .9; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes tarot-loader-orbit {
  from { transform: rotate(0deg) translateX(43px) translate(-50%, -50%); }
  to { transform: rotate(360deg) translateX(43px) translate(-50%, -50%); }
}

@media (max-width: 900px) {
  .tarot-test-intro { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); }
  .tarot-test-portrait { min-height: 600px; }
  .tarot-test-intro-copy { padding: 3rem 2rem; }
  .tarot-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .tarot-test-section { padding-block: 5rem; }
  .tarot-test-shell { min-height: 0; border-radius: 22px 6px; }
  .tarot-test-shell.is-quiz-active { height: calc(100svh - 4.5rem); min-height: 480px; }
  .tarot-test-intro { display: flex; min-height: 0; flex-direction: column; }
  .tarot-test-portrait { min-height: 0; aspect-ratio: 4 / 4.2; }
  .tarot-test-portrait::after { background: linear-gradient(0deg, #0b0908 1%, rgba(10, 8, 7, .8) 17%, transparent 48%); }
  .tarot-test-portrait img { object-position: center 18%; }
  .tarot-test-intro-copy { padding: 1rem 1.25rem 3rem; margin-top: -1.5rem; }
  .tarot-test-intro-copy h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .tarot-test-lead { font-size: 1rem; line-height: 1.5; }
  .tarot-test-note { font-size: .93rem; }
  .tarot-quiz,
  .tarot-result { padding: 1.25rem; }
  .tarot-quiz { padding: .8rem; }
  .tarot-quiz-topbar { gap: .35rem; }
  .tarot-progress { margin: .35rem 0 clamp(.75rem, 2vh, 1.2rem); }
  .tarot-question-number { margin-bottom: .45rem; font-size: .59rem; }
  .tarot-question h3 { font-size: clamp(1.35rem, 6.2vw, 1.9rem); line-height: 1; }
  .tarot-options { margin-block: clamp(.45rem, 1.2vh, .75rem); grid-template-columns: 1fr; gap: .24rem; }
  .tarot-option { min-height: 36px; padding: .28rem .5rem .28rem .62rem; grid-template-columns: 1fr 14px; gap: .4rem; border-radius: 8px 2px; font-size: clamp(.68rem, 2.9vw, .8rem); line-height: 1.12; }
  .tarot-option i { width: 13px; box-shadow: inset 0 0 0 3px #0b0908; }
  .tarot-next { min-width: 0; min-height: 44px; width: min(100%, 240px); }
  .tarot-result-grid { grid-template-columns: 1fr; }
  .tarot-result-card { width: min(76vw, 310px); justify-self: center; }
  .tarot-reading { text-align: center; }
  .tarot-reading-accent { padding: .9rem 0 0; border-top: 1px solid rgba(198, 155, 106, .42); border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-result-card img,
  .tarot-question.is-answering .tarot-option.is-selected,
  .tarot-loader-symbol::before,
  .tarot-loader-symbol span { animation: none; }
}