:root {
  --oracle-pink: #ff2a8c;
  --oracle-orange: #ff6b3a;
  --oracle-yellow: #ffd21f;
  --oracle-magenta: #d72dff;
  --oracle-purple: #7b3ff2;
  --oracle-blue: #178cff;
  --oracle-mint: #00f5b8;
  --oracle-border: rgba(255, 255, 255, 0.11);
  --oracle-muted: rgba(247, 244, 255, 0.67);
}

.oracle-page,
.oracle-page * {
  box-sizing: border-box;
}

.oracle-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 78px;
  flex-wrap: wrap;
}

.oracle-page .nova-brand {
  text-decoration: none;
}

.oracle-page .nova-hub-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
}

.oracle-shell {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  padding: clamp(28px, 5vw, 58px) 0 96px;
}

.oracle-hero,
.oracle-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--oracle-border);
  border-radius: clamp(24px, 3vw, 34px);
  background:
    radial-gradient(circle at 8% 2%, rgba(215, 45, 255, 0.13), transparent 34%),
    radial-gradient(circle at 92% 96%, rgba(23, 140, 255, 0.1), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022));
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.28);
}

.oracle-hero {
  min-height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(38px, 7vw, 84px) clamp(22px, 6vw, 72px);
  text-align: center;
}

.oracle-hero-orbit {
  position: absolute;
  width: min(70vw, 760px);
  aspect-ratio: 2.1;
  border: 1px solid rgba(0, 245, 184, 0.15);
  border-radius: 50%;
  transform: rotate(-7deg);
  pointer-events: none;
}

.oracle-hero-orbit::before,
.oracle-hero-orbit::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--oracle-mint);
  box-shadow: 0 0 18px rgba(0, 245, 184, 0.6);
}

.oracle-hero-orbit::before { top: 10%; left: 22%; }
.oracle-hero-orbit::after { right: 15%; bottom: 17%; background: var(--oracle-pink); }

.oracle-hero > *:not(.oracle-hero-orbit) {
  position: relative;
  z-index: 1;
}

.oracle-hero h1 {
  margin: 12px 0 18px;
  font-size: clamp(54px, 9vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.oracle-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--oracle-muted);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.7;
}

.oracle-section-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.oracle-section-nav a,
.oracle-text-button {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(6, 6, 11, 0.5);
  color: rgba(255, 255, 255, 0.8);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.oracle-section-nav a { padding: 11px 16px; }
.oracle-text-button { padding: 11px 16px; }

.oracle-section-nav a:hover,
.oracle-text-button:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 245, 184, 0.38);
  background: rgba(0, 245, 184, 0.06);
  color: #fff;
}

.oracle-panel {
  padding: clamp(24px, 5vw, 52px);
  scroll-margin-top: 24px;
}

.oracle-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(24px, 4vw, 38px);
}

.oracle-section-heading h2 {
  margin: 6px 0 0;
  color: #fff;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.oracle-section-heading > p {
  max-width: 520px;
  margin: 0;
  color: var(--oracle-muted);
  font-size: 14px;
  line-height: 1.65;
}

.tarot-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  gap: 20px;
  align-items: end;
}

.spread-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.spread-picker legend {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spread-option {
  min-width: 0;
  min-height: 94px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.spread-option strong,
.spread-option span { display: block; }
.spread-option strong { font-size: 13px; }
.spread-option span { margin-top: 6px; color: rgba(255, 255, 255, 0.52); font-size: 11px; line-height: 1.45; }
.spread-option:hover { transform: translateY(-2px); border-color: rgba(215, 45, 255, 0.35); }
.spread-option.is-active {
  border-color: rgba(0, 245, 184, 0.46);
  background: linear-gradient(145deg, rgba(0, 245, 184, 0.09), rgba(123, 63, 242, 0.08));
  box-shadow: inset 0 0 0 1px rgba(0, 245, 184, 0.08), 0 14px 34px rgba(0, 0, 0, 0.2);
}

.tarot-question-label small { color: rgba(255, 255, 255, 0.38); }

.tarot-selection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 36px 0 8px;
}

.tarot-selection-head h3 { margin: 0 0 4px; color: #fff; font-size: 20px; }
.tarot-selection-head p { margin: 0; color: var(--oracle-muted); font-size: 12px; }

.selection-count {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.selection-count strong { color: var(--oracle-mint); font-size: 24px; }

.tarot-fan-viewport {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 18px 6px 28px;
  scrollbar-width: thin;
  scrollbar-color: rgba(215, 45, 255, 0.45) rgba(255, 255, 255, 0.05);
}

.tarot-fan {
  position: relative;
  width: max(100%, 960px);
  height: 250px;
}

.fan-card {
  position: absolute;
  left: 50%;
  bottom: -44px;
  width: 82px;
  aspect-ratio: 0.58;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  background: #0a0811;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 165%;
  cursor: pointer;
  overflow: hidden;
  transition: bottom 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.fan-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fan-card:hover,
.fan-card:focus-visible { bottom: -26px; border-color: rgba(0, 245, 184, 0.7); box-shadow: 0 0 0 3px rgba(0, 245, 184, 0.12), 0 16px 34px rgba(0, 0, 0, 0.6); outline: 0; }
.fan-card.is-picked { opacity: 0.15; pointer-events: none; }

.tarot-slots {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(10px, 2vw, 20px);
  min-height: 286px;
  margin-top: 10px;
}

.tarot-slot {
  width: min(170px, 18vw);
  text-align: center;
}

.tarot-slot-position {
  min-height: 28px;
  margin-bottom: 8px;
  color: var(--oracle-mint);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tarot-slot-card {
  width: 100%;
  aspect-ratio: 0.58;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
}

.tarot-slot-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

.tarot-slot-card.is-empty img { opacity: 0.32; }
.tarot-slot-card.is-reversed img { transform: rotate(180deg); }
.tarot-slot-name { margin-top: 9px; color: #fff; font-size: 12px; font-weight: 900; line-height: 1.25; }
.tarot-slot-orientation { margin-top: 3px; color: rgba(255, 255, 255, 0.48); font-size: 10px; }

.tarot-reading-workspace {
  display: grid;
  gap: 18px;
  margin-top: 26px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.tarot-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.oracle-result {
  min-height: 180px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(123, 63, 242, 0.1), rgba(0, 0, 0, 0.18));
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.8;
}

.oracle-result h3 { margin: 0 0 12px; color: #fff; font-size: 21px; }
.oracle-result p { margin: 0 0 12px; }
.oracle-result p:last-child { margin-bottom: 0; }
.oracle-empty { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.4); text-align: center; }

.angel-layout,
.dream-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 4vw, 38px);
  align-items: start;
}

.angel-quick-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.angel-quick-picks button,
.oracle-recent button {
  padding: 10px 14px;
  border: 1px solid rgba(215, 45, 255, 0.25);
  border-radius: 999px;
  background: rgba(215, 45, 255, 0.07);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.oracle-inline-form,
.oracle-form { display: grid; gap: 13px; }
.oracle-inline-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.oracle-recent { margin-top: 18px; }
.oracle-recent > span { display: block; margin-bottom: 8px; color: rgba(255, 255, 255, 0.4); font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.oracle-recent > div { display: flex; flex-wrap: wrap; gap: 7px; }

.zodiac-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.zodiac-sign {
  min-width: 0;
  min-height: 112px;
  padding: 16px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.19);
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.zodiac-sign:hover { transform: translateY(-2px); border-color: rgba(23, 140, 255, 0.45); background: rgba(23, 140, 255, 0.07); }
.zodiac-sign span { display: block; margin-bottom: 7px; font-size: 28px; color: var(--oracle-blue); }
.zodiac-sign strong { display: block; font-size: 12px; }
.zodiac-sign small { display: block; margin-top: 5px; color: rgba(255, 255, 255, 0.42); font-size: 9px; }

.horoscope-reading {
  max-width: 780px;
  margin: 20px auto 0;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(23, 140, 255, 0.22);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(23, 140, 255, 0.08), rgba(215, 45, 255, 0.05));
}

.horoscope-sign { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.horoscope-sign > span { color: var(--oracle-blue); font-size: 44px; line-height: 1; }
.horoscope-sign strong, .horoscope-sign small { display: block; }
.horoscope-sign strong { color: #fff; font-size: 20px; }
.horoscope-sign small { margin-top: 4px; color: rgba(255, 255, 255, 0.45); }
#horoscope-message { color: rgba(255, 255, 255, 0.79); font-size: 15px; line-height: 1.8; }
#horoscope-message p { margin: 0 0 14px; }

.dream-save { margin-top: 18px; }
.oracle-disclaimer { margin: 0 auto; max-width: 760px; color: rgba(255, 255, 255, 0.38); font-size: 11px; line-height: 1.6; text-align: center; }

.oracle-page .nova-hidden { display: none !important; }

@media (max-width: 980px) {
  .tarot-controls,
  .angel-layout,
  .dream-layout { grid-template-columns: 1fr; }
  .zodiac-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tarot-slot { width: min(150px, 18vw); }
}

@media (max-width: 720px) {
  .oracle-header-inner { align-items: flex-start; }
  .oracle-page .nova-hub-nav { flex: 0 0 auto; }
  .oracle-page .nova-auth-actions { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .oracle-hero { min-height: 390px; }
  .oracle-section-heading { align-items: flex-start; flex-direction: column; }
  .spread-picker { grid-template-columns: 1fr; }
  .spread-option { min-height: 0; }
  .tarot-selection-head { align-items: flex-start; }
  .tarot-fan { height: 220px; }
  .tarot-slots { justify-content: flex-start; overflow-x: auto; min-height: 250px; padding-bottom: 8px; }
  .tarot-slot { flex: 0 0 118px; width: 118px; }
  .zodiac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .oracle-shell { width: min(calc(100% - 20px), 1180px); }
  .oracle-panel { padding: 22px 16px; }
  .oracle-section-nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .oracle-section-nav a { text-align: center; }
  .oracle-inline-form { grid-template-columns: 1fr; }
  .zodiac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarot-actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fan-card,
  .spread-option,
  .zodiac-sign,
  .oracle-section-nav a,
  .oracle-text-button { transition: none !important; }
  .fan-card:hover,
  .fan-card:focus-visible { bottom: -44px; }
  html { scroll-behavior: auto !important; }
}

/* Guided Tarot experience */
.tarot-panel {
  padding: clamp(24px, 4vw, 48px);
}

.tarot-experience {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 690px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(22px, 3vw, 30px);
  background:
    radial-gradient(circle at 50% 8%, rgba(123, 63, 242, 0.14), transparent 36%),
    radial-gradient(circle at 7% 82%, rgba(23, 140, 255, 0.08), transparent 30%),
    radial-gradient(circle at 94% 72%, rgba(255, 42, 140, 0.07), transparent 29%),
    linear-gradient(155deg, rgba(8, 7, 17, 0.94), rgba(4, 4, 10, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.tarot-experience::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.26;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(0, 245, 184, 0.55) 0 1px, transparent 1.4px);
  background-position: 0 0, 42px 34px;
  background-size: 94px 94px, 137px 137px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}

.tarot-experience::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -250px;
  z-index: -1;
  width: 92%;
  aspect-ratio: 2.5;
  border: 1px solid rgba(215, 45, 255, 0.11);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 90px rgba(123, 63, 242, 0.08);
}

.tarot-ambient i {
  position: absolute;
  z-index: -1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oracle-mint);
  box-shadow: 0 0 16px rgba(0, 245, 184, 0.5);
  opacity: 0.55;
  animation: tarotDrift 11s ease-in-out infinite alternate;
}

.tarot-ambient i:nth-child(1) { top: 19%; left: 12%; }
.tarot-ambient i:nth-child(2) { top: 32%; right: 14%; width: 4px; height: 4px; background: var(--oracle-pink); animation-delay: -4s; }
.tarot-ambient i:nth-child(3) { bottom: 18%; left: 23%; width: 3px; height: 3px; background: var(--oracle-blue); animation-delay: -7s; }

@keyframes tarotDrift {
  to { transform: translate3d(18px, -16px, 0); opacity: 0.9; }
}

.tarot-progress {
  position: absolute;
  top: 25px;
  left: 50%;
  z-index: 4;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.tarot-progress span {
  width: 22px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  transition: width 0.3s ease, background 0.3s ease;
}

.tarot-progress span.is-complete {
  background: rgba(0, 245, 184, 0.38);
}

.tarot-progress span.is-active {
  width: 38px;
  background: linear-gradient(90deg, var(--oracle-purple), var(--oracle-blue), var(--oracle-mint));
}

.tarot-step {
  position: relative;
  width: 100%;
  min-height: 690px;
  padding: clamp(74px, 8vw, 104px) clamp(18px, 5vw, 64px) clamp(42px, 6vw, 70px);
  animation: tarotStepIn 0.5s ease both;
}

.tarot-step[hidden] {
  display: none !important;
}

@keyframes tarotStepIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.tarot-arrival,
.tarot-intention-step,
.tarot-shuffle-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tarot-arrival h3,
.tarot-step-heading h3 {
  margin: 9px 0 16px;
  color: #fff;
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.tarot-arrival > p,
.tarot-step-heading > p {
  max-width: 640px;
  margin: 0;
  color: rgba(247, 244, 255, 0.68);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.75;
}

.tarot-breath-symbol {
  position: relative;
  width: 104px;
  height: 104px;
  margin-bottom: 25px;
  border: 1px solid rgba(0, 245, 184, 0.17);
  border-radius: 50%;
}

.tarot-breath-symbol::before,
.tarot-breath-symbol::after,
.tarot-breath-symbol span {
  content: "";
  position: absolute;
  inset: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.tarot-breath-symbol::before {
  width: 70%;
  height: 70%;
  border: 1px solid rgba(23, 140, 255, 0.24);
}

.tarot-breath-symbol::after {
  width: 38%;
  height: 38%;
  border: 1px solid rgba(215, 45, 255, 0.3);
}

.tarot-breath-symbol span {
  width: 9px;
  height: 9px;
  background: var(--oracle-mint);
  box-shadow: 0 0 20px rgba(0, 245, 184, 0.55);
  animation: tarotBreathe 4.8s ease-in-out infinite;
}

@keyframes tarotBreathe {
  50% { transform: translate(-50%, -50%) scale(1.75); opacity: 0.65; }
}

.tarot-primary-action {
  min-width: 180px;
  margin-top: 30px;
}

.tarot-step-heading {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.guided-spread-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  max-width: 1040px;
  margin: 0 auto;
}

.guided-spread-option {
  min-width: 0;
  min-height: 310px;
  padding: 30px 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0, rgba(123, 63, 242, 0.13), transparent 48%),
    rgba(255, 255, 255, 0.025);
  color: #fff;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.guided-spread-option:hover,
.guided-spread-option:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(0, 245, 184, 0.34);
  background:
    radial-gradient(circle at 50% 0, rgba(0, 245, 184, 0.1), transparent 48%),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
  outline: none;
}

.guided-spread-option > strong,
.guided-spread-option > span:last-child {
  display: block;
}

.guided-spread-option > strong {
  margin-top: 24px;
  font-size: 17px;
}

.guided-spread-option > span:last-child {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 1.5;
}

.spread-card-symbol {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 130px;
  margin: 0 auto;
}

.spread-card-symbol i {
  position: absolute;
  width: 60px;
  aspect-ratio: 0.58;
  border: 1px solid rgba(0, 245, 184, 0.34);
  border-radius: 8px;
  background: linear-gradient(155deg, rgba(123, 63, 242, 0.28), rgba(5, 5, 12, 0.82));
  box-shadow: 0 11px 26px rgba(0, 0, 0, 0.28);
}

.spread-card-symbol.three i:nth-child(1) { transform: translateX(-42px) rotate(-8deg); }
.spread-card-symbol.three i:nth-child(3) { transform: translateX(42px) rotate(8deg); }
.spread-card-symbol.five i:nth-child(1) { transform: translate(-44px, 20px) rotate(-12deg); }
.spread-card-symbol.five i:nth-child(2) { transform: translate(-23px, -10px) rotate(-6deg); }
.spread-card-symbol.five i:nth-child(4) { transform: translate(23px, -10px) rotate(6deg); }
.spread-card-symbol.five i:nth-child(5) { transform: translate(44px, 20px) rotate(12deg); }

.tarot-guided-question {
  width: min(100%, 680px);
  text-align: left;
}

.tarot-guided-question textarea {
  min-height: 150px;
  resize: vertical;
  font-size: 17px;
  line-height: 1.6;
}

.tarot-deck {
  position: relative;
  width: 190px;
  aspect-ratio: 0.58;
  margin: 14px auto 2px;
  perspective: 1000px;
}

.tarot-deck span {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 17px;
  background: #090811;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.48);
}

.tarot-deck span:nth-child(1) { transform: translate(-10px, 10px) rotate(-2deg); opacity: 0.5; }
.tarot-deck span:nth-child(2) { transform: translate(-5px, 5px) rotate(-1deg); opacity: 0.72; }
.tarot-deck img { width: 100%; height: 100%; display: block; object-fit: cover; }

.tarot-deck.is-shuffling span:nth-child(1) { animation: tarotShuffleLeft 1s ease-in-out; }
.tarot-deck.is-shuffling span:nth-child(2) { animation: tarotShuffleRight 1s ease-in-out; }
.tarot-deck.is-shuffling span:nth-child(3) { animation: tarotShuffleTop 1s ease-in-out; }

@keyframes tarotShuffleLeft {
  35% { transform: translate(-110px, 8px) rotate(-11deg); }
  70% { transform: translate(35px, -4px) rotate(4deg); }
}

@keyframes tarotShuffleRight {
  35% { transform: translate(110px, 8px) rotate(11deg); }
  70% { transform: translate(-30px, -4px) rotate(-4deg); }
}

@keyframes tarotShuffleTop {
  38% { transform: translateY(-24px) rotate(3deg); }
  75% { transform: translateY(8px) rotate(-2deg); }
}

.tarot-select-step {
  padding-inline: clamp(10px, 3vw, 36px);
}

.tarot-selection-heading {
  margin-bottom: 8px;
}

.tarot-selection-heading h3 {
  font-size: clamp(34px, 5vw, 56px);
}

.tarot-selection-heading .selection-count {
  justify-content: center;
  margin-top: 15px;
}

.tarot-table {
  position: relative;
  width: 100%;
  padding: 12px 0 20px;
  border-radius: 45% 45% 24px 24px / 12% 12% 24px 24px;
  background: radial-gradient(ellipse at 50% 72%, rgba(123, 63, 242, 0.1), transparent 58%);
}

.tarot-select-step .tarot-fan-viewport {
  width: min(96%, 1240px);
  margin: 0 auto;
  padding: 10px 6px 6px;
}

.tarot-select-step .tarot-fan {
  width: max(100%, 1020px);
  height: 350px;
}

.tarot-select-step .fan-card {
  width: clamp(94px, 8.4vw, 122px);
  bottom: auto;
  border-radius: 14px;
  box-shadow: 0 15px 32px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 100%;
  transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.24s ease;
}

.tarot-select-step .fan-card:hover,
.tarot-select-step .fan-card:focus-visible {
  bottom: auto;
  translate: 0 -20px;
  border-color: rgba(0, 245, 184, 0.72);
  box-shadow: 0 0 0 4px rgba(0, 245, 184, 0.11), 0 20px 42px rgba(0, 0, 0, 0.64);
}

.tarot-select-step .fan-card.is-picked {
  opacity: 0;
  translate: 0 -28px;
}

.tarot-selection-slots {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2vw, 20px);
  min-height: 165px;
  margin: -26px auto 0;
  padding: 0 12px;
}

.tarot-selection-slots .tarot-slot {
  width: clamp(82px, 10vw, 112px);
}

.tarot-selection-slots .tarot-slot-position {
  min-height: 24px;
  color: rgba(255, 255, 255, 0.58);
}

.tarot-selection-slots .tarot-slot-card {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.018);
}

.tarot-selection-slots .tarot-slot-card.is-empty span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent);
}

.tarot-selection-slots .tarot-slot.is-chosen .tarot-slot-card {
  border-style: solid;
  border-color: rgba(0, 245, 184, 0.28);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
}

.tarot-selection-slots .tarot-slot-name {
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
}

.tarot-moving-card {
  position: fixed;
  z-index: 9999;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(0, 245, 184, 0.5);
  border-radius: 13px;
  background: #090811;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65), 0 0 28px rgba(0, 245, 184, 0.16);
  pointer-events: none;
  transition: left 0.62s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.62s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.62s ease, height 0.62s ease, transform 0.62s ease;
}

.tarot-moving-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarot-reveal-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tarot-reveal-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(12px, 2.2vw, 28px);
  max-width: 1180px;
  margin: 0 auto;
  perspective: 1400px;
}

.tarot-reveal-card {
  width: min(188px, 17vw);
  opacity: 0.48;
  text-align: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tarot-reveal-card.is-revealed {
  opacity: 1;
  transform: translateY(-8px);
}

.tarot-reveal-position {
  min-height: 31px;
  margin-bottom: 9px;
  color: var(--oracle-mint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tarot-card-flip {
  width: 100%;
  aspect-ratio: 0.58;
  perspective: 1200px;
}

.tarot-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.86s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tarot-reveal-card.is-revealed .tarot-card-inner {
  transform: rotateY(180deg);
}

.tarot-card-back,
.tarot-card-front {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  background: #06060b;
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.54);
  backface-visibility: hidden;
}

.tarot-card-front {
  transform: rotateY(180deg);
  border-color: rgba(0, 245, 184, 0.28);
}

.tarot-card-front img,
.tarot-card-back img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

.tarot-card-front.is-reversed img {
  transform: rotate(180deg);
}

.tarot-reveal-name {
  margin-top: 13px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  opacity: 0;
  transition: opacity 0.4s ease 0.55s;
}

.tarot-reveal-orientation {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.4s ease 0.55s;
}

.tarot-reveal-card.is-revealed .tarot-reveal-name,
.tarot-reveal-card.is-revealed .tarot-reveal-orientation {
  opacity: 1;
}

.tarot-reflection-step {
  max-width: 1000px;
  margin: 0 auto;
}

.tarot-reflection-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(20px, 4vw, 42px);
  align-items: stretch;
}

.tarot-reflection-prompts {
  display: grid;
  gap: 10px;
}

.tarot-reflection-prompts p {
  position: relative;
  margin: 0;
  padding: 17px 18px 17px 42px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.55;
}

.tarot-reflection-prompts p::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 19px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oracle-mint);
  box-shadow: 0 0 12px rgba(0, 245, 184, 0.45);
}

.tarot-oracle-button {
  display: flex;
  margin: 22px auto 0;
}

.tarot-reflection-step .oracle-result {
  margin-top: 18px;
  animation: tarotStepIn 0.45s ease both;
}

.tarot-reflection-step .tarot-actions {
  justify-content: center;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tarot-reflection-step .oracle-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 920px) {
  .guided-spread-picker {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .guided-spread-option {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    min-height: 190px;
    text-align: left;
  }

  .guided-spread-option > strong,
  .guided-spread-option > span:last-child {
    grid-column: 2;
  }

  .guided-spread-option > strong { align-self: end; margin-top: 0; }
  .guided-spread-option > span:last-child { align-self: start; }
  .spread-card-symbol { grid-row: 1 / span 2; }

  .tarot-reveal-stage {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 10px 8px 28px;
  }

  .tarot-reveal-card {
    flex: 0 0 154px;
    width: 154px;
  }
}

@media (max-width: 700px) {
  .tarot-panel {
    padding: 20px 12px;
  }

  .tarot-experience,
  .tarot-step {
    min-height: 620px;
  }

  .tarot-step {
    padding-inline: 15px;
  }

  .tarot-progress span { width: 14px; }
  .tarot-progress span.is-active { width: 28px; }

  .guided-spread-option {
    grid-template-columns: 112px 1fr;
    min-height: 160px;
    padding: 18px 16px;
    border-radius: 20px;
  }

  .spread-card-symbol {
    width: 105px;
    height: 105px;
    transform: scale(0.75);
  }

  .tarot-deck { width: 145px; }

  .tarot-select-step .tarot-fan-viewport {
    width: 100%;
    padding-bottom: 12px;
  }

  .tarot-select-step .tarot-fan {
    width: 980px;
    height: 310px;
  }

  .tarot-select-step .fan-card {
    width: 100px;
    min-height: 150px;
  }

  .tarot-selection-slots {
    justify-content: flex-start;
    overflow-x: auto;
    margin-top: -12px;
    padding-bottom: 12px;
  }

  .tarot-selection-slots .tarot-slot {
    flex: 0 0 88px;
    width: 88px;
  }

  .tarot-reflection-layout {
    grid-template-columns: 1fr;
  }

  .tarot-reflection-step .tarot-actions > * {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .tarot-step-heading {
    margin-bottom: 26px;
  }

  .tarot-arrival h3,
  .tarot-step-heading h3 {
    font-size: 36px;
  }

  .guided-spread-option {
    grid-template-columns: 88px 1fr;
    min-height: 140px;
  }

  .spread-card-symbol {
    width: 90px;
    transform: scale(0.62);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-ambient i,
  .tarot-breath-symbol span,
  .tarot-deck.is-shuffling span {
    animation: none !important;
  }

  .tarot-step,
  .tarot-progress span,
  .guided-spread-option,
  .tarot-select-step .fan-card,
  .tarot-moving-card,
  .tarot-reveal-card,
  .tarot-card-inner,
  .tarot-reveal-name,
  .tarot-reveal-orientation {
    animation: none !important;
    transition: none !important;
  }

  .tarot-reveal-card.is-revealed .tarot-card-inner {
    transform: none;
  }

  .tarot-reveal-card.is-revealed .tarot-card-back {
    display: none;
  }

  .tarot-card-front {
    transform: none;
  }
}

/* Oracle realms: one sanctuary, four distinct atmospheres */
.oracle-realm {
  isolation: isolate;
  min-height: 620px;
  padding: clamp(34px, 6vw, 70px);
}

.oracle-realm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

.oracle-realm > *:not(.realm-atmosphere) {
  position: relative;
  z-index: 2;
}

.realm-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.realm-atmosphere span {
  position: absolute;
  display: block;
}

.realm-prompt {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.56);
}

.realm-prompt p {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.055em;
}

.realm-prompt-line {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--realm-accent, var(--oracle-mint)));
}

.angel-realm {
  --realm-accent: var(--oracle-yellow);
  border-color: rgba(255, 210, 31, 0.12);
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 210, 31, 0.1), transparent 31%),
    radial-gradient(circle at 90% 82%, rgba(255, 42, 140, 0.09), transparent 34%),
    linear-gradient(145deg, rgba(15, 10, 18, 0.96), rgba(5, 5, 11, 0.98));
}

.angel-realm::after {
  background:
    linear-gradient(115deg, transparent 0 48%, rgba(255, 210, 31, 0.025) 49%, transparent 50%),
    linear-gradient(65deg, transparent 0 48%, rgba(255, 42, 140, 0.018) 49%, transparent 50%);
  background-size: 82px 82px;
}

.angel-atmosphere span {
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 50%;
}

.angel-atmosphere span:nth-child(1) {
  top: -190px;
  right: -100px;
  width: 520px;
  height: 520px;
}

.angel-atmosphere span:nth-child(2) {
  top: -110px;
  right: -20px;
  width: 360px;
  height: 360px;
}

.angel-atmosphere span:nth-child(3) {
  right: 100px;
  bottom: 74px;
  width: 8px;
  height: 8px;
  border: 0;
  background: var(--oracle-yellow);
  box-shadow: 0 0 26px rgba(255, 210, 31, 0.65);
  animation: tarotBreathe 5.5s ease-in-out infinite;
}

.angel-entry {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(255, 210, 31, 0.1);
  border-radius: 25px;
  background: rgba(3, 3, 8, 0.35);
  backdrop-filter: blur(16px);
}

.angel-realm .angel-quick-picks {
  gap: 10px;
}

.angel-realm .angel-quick-picks button,
.angel-realm .oracle-recent button {
  min-width: 66px;
  padding: 12px 16px;
  border-color: rgba(255, 210, 31, 0.2);
  background: linear-gradient(145deg, rgba(255, 210, 31, 0.08), rgba(255, 42, 140, 0.035));
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.angel-realm .angel-quick-picks button:hover,
.angel-realm .angel-quick-picks button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 210, 31, 0.52);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), 0 0 20px rgba(255, 210, 31, 0.08);
  outline: none;
}

.angel-realm .oracle-result {
  min-height: 330px;
  border-color: rgba(255, 210, 31, 0.13);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 210, 31, 0.07), transparent 44%),
    rgba(3, 3, 8, 0.36);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.angel-realm .oracle-result h3 {
  color: var(--oracle-yellow);
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.035em;
}

.horoscope-realm {
  --realm-accent: var(--oracle-blue);
  border-color: rgba(23, 140, 255, 0.15);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(23, 140, 255, 0.16), transparent 48%),
    radial-gradient(circle at 85% 74%, rgba(123, 63, 242, 0.11), transparent 34%),
    linear-gradient(165deg, rgba(5, 10, 25, 0.98), rgba(5, 4, 12, 0.98));
}

.horoscope-realm::after {
  opacity: 0.4;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(23, 140, 255, 0.75) 0 1px, transparent 1.3px);
  background-position: 0 0, 47px 36px;
  background-size: 113px 113px, 157px 157px;
  mask-image: linear-gradient(to bottom, black, transparent);
}

.horoscope-atmosphere span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 13px rgba(23, 140, 255, 0.55);
}

.horoscope-atmosphere span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 130px;
  height: 1px;
  opacity: 0.3;
  background: linear-gradient(90deg, rgba(23, 140, 255, 0.7), transparent);
  transform-origin: left;
}

.horoscope-atmosphere span:nth-child(1) { top: 18%; left: 7%; }
.horoscope-atmosphere span:nth-child(1)::after { transform: rotate(19deg); }
.horoscope-atmosphere span:nth-child(2) { top: 31%; left: 24%; width: 4px; height: 4px; }
.horoscope-atmosphere span:nth-child(2)::after { width: 170px; transform: rotate(-13deg); }
.horoscope-atmosphere span:nth-child(3) { top: 13%; right: 30%; }
.horoscope-atmosphere span:nth-child(3)::after { width: 110px; transform: rotate(43deg); }
.horoscope-atmosphere span:nth-child(4) { top: 30%; right: 13%; width: 4px; height: 4px; }

.horoscope-prompt {
  justify-content: center;
  margin-top: -8px;
  margin-bottom: 28px;
}

.horoscope-realm .zodiac-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 1050px;
  margin: 0 auto;
}

.horoscope-realm .zodiac-sign {
  min-height: 132px;
  border-radius: 50% 50% 22px 22px;
  border-color: rgba(23, 140, 255, 0.13);
  background: radial-gradient(circle at 50% 22%, rgba(23, 140, 255, 0.09), rgba(0, 0, 0, 0.2) 65%);
  backdrop-filter: blur(12px);
}

.horoscope-realm .zodiac-sign span {
  font-size: 33px;
  text-shadow: 0 0 18px rgba(23, 140, 255, 0.28);
}

.horoscope-realm .horoscope-reading {
  min-height: 310px;
  padding: clamp(28px, 5vw, 52px);
  border-color: rgba(23, 140, 255, 0.2);
  background:
    radial-gradient(circle at 10% 0, rgba(23, 140, 255, 0.1), transparent 42%),
    rgba(2, 6, 17, 0.57);
  backdrop-filter: blur(18px);
}

.dream-realm {
  --realm-accent: var(--oracle-magenta);
  border-color: rgba(215, 45, 255, 0.13);
  background:
    radial-gradient(ellipse at 18% 100%, rgba(215, 45, 255, 0.13), transparent 48%),
    radial-gradient(ellipse at 88% 8%, rgba(0, 245, 184, 0.07), transparent 38%),
    linear-gradient(150deg, rgba(13, 6, 23, 0.98), rgba(4, 5, 12, 0.98));
}

.dream-atmosphere span {
  border-radius: 50%;
  filter: blur(24px);
  opacity: 0.32;
  animation: dreamMist 12s ease-in-out infinite alternate;
}

.dream-atmosphere span:nth-child(1) {
  left: -7%;
  bottom: -20%;
  width: 400px;
  height: 260px;
  background: rgba(215, 45, 255, 0.2);
}

.dream-atmosphere span:nth-child(2) {
  right: -5%;
  bottom: 12%;
  width: 330px;
  height: 210px;
  background: rgba(23, 140, 255, 0.14);
  animation-delay: -5s;
}

.dream-atmosphere span:nth-child(3) {
  top: 18%;
  left: 48%;
  width: 190px;
  height: 120px;
  background: rgba(0, 245, 184, 0.08);
  animation-delay: -8s;
}

@keyframes dreamMist {
  to { transform: translate3d(34px, -18px, 0) scale(1.1); opacity: 0.44; }
}

.dream-prompt {
  justify-content: center;
  margin: -8px 0 28px;
}

.dream-realm .dream-layout {
  align-items: stretch;
}

.dream-realm .oracle-form,
.dream-realm .dream-layout > div:last-child {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(215, 45, 255, 0.1);
  border-radius: 25px;
  background: rgba(4, 3, 10, 0.4);
  backdrop-filter: blur(18px);
}

.dream-realm .dream-layout > div:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dream-realm .oracle-result {
  height: auto;
  flex: 1 1 auto;
  min-height: 310px;
  border-color: rgba(215, 45, 255, 0.11);
  background:
    radial-gradient(circle at 50% 100%, rgba(215, 45, 255, 0.08), transparent 48%),
    rgba(3, 3, 9, 0.28);
}

.dream-realm .dream-save {
  align-self: center;
  flex: 0 0 auto;
}

.dream-realm .nova-input,
.dream-realm .nova-textarea {
  border-color: rgba(215, 45, 255, 0.14);
  background: rgba(2, 2, 7, 0.46);
}

@media (max-width: 980px) {
  .oracle-realm {
    min-height: 0;
  }

  .horoscope-realm .zodiac-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .oracle-realm {
    padding: 30px 17px;
  }

  .angel-realm .oracle-result {
    min-height: 250px;
  }

  .horoscope-realm .zodiac-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .horoscope-realm .zodiac-sign {
    min-height: 118px;
  }

  .realm-prompt {
    align-items: flex-start;
  }

  .realm-prompt-line {
    flex: 0 0 30px;
    margin-top: 9px;
  }
}

@media (max-width: 440px) {
  .horoscope-realm .zodiac-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .angel-realm .angel-quick-picks button {
    min-width: calc(25% - 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .angel-atmosphere span,
  .dream-atmosphere span {
    animation: none !important;
  }
}

/* Oracle entrance portals */
.oracle-hero {
  min-height: 850px;
  justify-content: flex-start;
  padding-top: clamp(58px, 8vw, 94px);
}

.oracle-hero h1 {
  margin-bottom: 16px;
}

.oracle-hero-lead {
  max-width: 700px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: clamp(18px, 2.3vw, 23px) !important;
}

.oracle-hero-guidance {
  margin-top: 13px !important;
  color: rgba(255, 255, 255, 0.48) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

.oracle-hero-orbit {
  top: 30px;
}

.oracle-gateways {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 1160px;
  margin-top: 43px;
}

.oracle-gateway {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 285px;
  padding: 30px 22px 25px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 27px;
  color: #fff;
  text-align: left;
  text-decoration: none;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.oracle-gateway::before,
.oracle-gateway::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.oracle-gateway::before {
  inset: 0;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.055), rgba(2, 2, 8, 0.72));
}

.oracle-gateway::after {
  top: -90px;
  left: 50%;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: var(--gateway-glow);
  filter: blur(42px);
  opacity: 0.25;
  transform: translateX(-50%);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.oracle-gateway:hover,
.oracle-gateway:focus-visible {
  transform: translateY(-8px);
  border-color: var(--gateway-border);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.34);
  outline: none;
}

.oracle-gateway:hover::after,
.oracle-gateway:focus-visible::after {
  opacity: 0.42;
  transform: translateX(-50%) scale(1.12);
}

.tarot-gateway { --gateway-glow: rgba(123, 63, 242, 0.9); --gateway-border: rgba(123, 63, 242, 0.5); }
.angel-gateway { --gateway-glow: rgba(255, 210, 31, 0.8); --gateway-border: rgba(255, 210, 31, 0.46); }
.dream-gateway { --gateway-glow: rgba(215, 45, 255, 0.8); --gateway-border: rgba(215, 45, 255, 0.46); }
.horoscope-gateway { --gateway-glow: rgba(23, 140, 255, 0.85); --gateway-border: rgba(23, 140, 255, 0.5); }

.gateway-symbol {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 0 27px;
  border: 1px solid var(--gateway-border);
  border-radius: 50%;
  background: rgba(3, 3, 9, 0.42);
  box-shadow: inset 0 0 30px var(--gateway-glow);
}

.gateway-symbol svg {
  width: 45px;
  height: 45px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.86);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gateway-copy,
.gateway-copy strong,
.gateway-copy small,
.gateway-copy b {
  display: block;
}

.gateway-copy strong {
  font-size: 19px;
  letter-spacing: -0.02em;
}

.gateway-copy small {
  min-height: 48px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.53);
  font-size: 11px;
  line-height: 1.55;
}

.gateway-copy b {
  margin-top: 15px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Tarot reading pause and persistent summary */
.tarot-reveal-pause {
  max-width: 600px;
  margin: 36px auto 0;
  text-align: center;
  animation: tarotStepIn 0.5s ease both;
}

.tarot-reveal-pause p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.7;
}

.tarot-reveal-pause .tarot-primary-action {
  margin-top: 19px;
}

.tarot-reading-summary {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 860px;
  margin: -12px auto 28px;
  padding: 12px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 20px;
  background: rgba(3, 3, 9, 0.38);
}

.tarot-reading-summary article {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  text-align: left;
}

.tarot-summary-image {
  flex: 0 0 38px;
  overflow: hidden;
  width: 38px;
  aspect-ratio: 0.58;
  border-radius: 5px;
}

.tarot-summary-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tarot-summary-image.is-reversed img {
  transform: rotate(180deg);
}

.tarot-reading-summary span,
.tarot-reading-summary strong,
.tarot-reading-summary small {
  display: block;
}

.tarot-reading-summary span {
  color: var(--oracle-mint);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tarot-reading-summary strong {
  margin-top: 3px;
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
}

.tarot-reading-summary small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 8px;
}

/* Ceremonial message reveals */
.realm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.angel-message-number {
  margin-bottom: 23px;
  background: linear-gradient(90deg, var(--oracle-yellow), #fff1a3, var(--oracle-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(52px, 8vw, 90px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.9;
  text-align: center;
  text-shadow: 0 0 42px rgba(255, 210, 31, 0.1);
}

.realm-reveal-block,
.realm-reveal-grid > div,
.horoscope-oracle-grid section,
.dream-oracle-reveal section {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.022);
}

.realm-reveal-block {
  padding: 22px;
  text-align: center;
  animation: realmReveal 0.5s ease both;
}

.realm-reveal-block > span,
.realm-reveal-grid span,
.horoscope-oracle-grid span,
.dream-oracle-reveal section > span {
  display: block;
  margin-bottom: 8px;
  color: var(--realm-accent, var(--oracle-mint));
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.realm-reveal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.realm-reveal-grid > div {
  padding: 17px;
  animation: realmReveal 0.5s ease both;
}

.realm-reveal-grid > div:nth-child(2) { animation-delay: 0.12s; }
.realm-reveal-grid > div:nth-child(3) { animation-delay: 0.24s; }
.realm-reveal-grid > div:nth-child(4) { animation-delay: 0.36s; }
.realm-reveal-grid p,
.realm-reveal-block p {
  margin: 0;
}

@keyframes realmReveal {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

.dream-invitation {
  padding: 0 0 7px;
}

.dream-invitation strong,
.dream-invitation span {
  display: block;
}

.dream-invitation strong {
  color: #fff;
  font-size: 20px;
  letter-spacing: -0.025em;
}

.dream-invitation span {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.dream-oracle-reveal {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
  width: 100%;
}

.dream-oracle-reveal section {
  padding: 19px;
  animation: realmReveal 0.55s ease both;
}

.dream-oracle-reveal section:nth-child(2) { animation-delay: 0.12s; }
.dream-oracle-reveal section:nth-child(3) { animation-delay: 0.24s; }
.dream-oracle-reveal section:nth-child(4) { animation-delay: 0.36s; }
.dream-oracle-reveal section.is-wide { grid-column: 1 / -1; }
.dream-oracle-reveal section p { margin: 0; }
.dream-gentle-note {
  grid-column: 1 / -1;
  margin: 4px 0 0 !important;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-style: italic;
  text-align: center;
}

.horoscope-oracle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.horoscope-oracle-grid section {
  padding: 20px;
  animation: realmReveal 0.5s ease both;
}

.horoscope-oracle-grid section:nth-child(2) { animation-delay: 0.1s; }
.horoscope-oracle-grid section:nth-child(3) { animation-delay: 0.18s; }
.horoscope-oracle-grid section:nth-child(4) { animation-delay: 0.26s; }
.horoscope-oracle-grid section:nth-child(5) { animation-delay: 0.34s; }
.horoscope-oracle-grid section:nth-child(6) { animation-delay: 0.42s; }
.horoscope-oracle-grid section.is-wide { grid-column: 1 / -1; }
.horoscope-oracle-grid p { margin: 0 !important; }

@media (max-width: 1000px) {
  .oracle-hero {
    min-height: 1080px;
  }

  .oracle-gateways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oracle-gateway {
    min-height: 240px;
  }

  .gateway-symbol {
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
  }
}

@media (max-width: 620px) {
  .oracle-hero {
    min-height: 0;
    padding: 50px 16px 28px;
  }

  .oracle-gateways {
    grid-template-columns: 1fr;
    gap: 11px;
    margin-top: 32px;
  }

  .oracle-gateway {
    display: grid;
    grid-template-columns: 76px 1fr;
    align-items: center;
    min-height: 145px;
    padding: 20px;
  }

  .gateway-symbol {
    grid-row: 1;
    width: 62px;
    height: 62px;
    margin: 0;
  }

  .gateway-symbol svg {
    width: 34px;
    height: 34px;
  }

  .gateway-copy small {
    min-height: 0;
  }

  .gateway-copy b {
    margin-top: 9px;
  }

  .tarot-reading-summary {
    justify-content: flex-start;
  }

  .tarot-reading-summary article {
    flex: 0 0 145px;
  }

  .realm-reveal-grid,
  .dream-oracle-reveal,
  .horoscope-oracle-grid {
    grid-template-columns: 1fr;
  }

  .dream-oracle-reveal section.is-wide,
  .dream-gentle-note,
  .horoscope-oracle-grid section.is-wide {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oracle-gateway,
  .oracle-gateway::after,
  .tarot-reveal-pause,
  .realm-reveal-block,
  .realm-reveal-grid > div,
  .dream-oracle-reveal section,
  .horoscope-oracle-grid section {
    animation: none !important;
    transition: none !important;
  }
}