/* WA6 – module layer. Tokens from style.css; effects ported from prototype v2 (mystic.css, app.css, proto.css). */
:root { --flicker: 0.6; --ease-tl: cubic-bezier(0.22, 0.8, 0.24, 1); --reveal: 900ms;
  --halo: radial-gradient(closest-side, rgba(179, 155, 255, 0.45), rgba(138, 232, 220, 0.18) 55%, transparent 100%);
  --warm-core: radial-gradient(closest-side, rgba(247, 217, 160, 0.35), transparent); }

/* ---------- sky (fx-nebula, fx-stars) ---------- */
.sky { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.app .main { position: relative; }

/* ---------- module chrome ---------- */
.view { display: block; position: relative; overflow-x: clip; animation: veil-in 560ms var(--ease-tl) both; }
@keyframes veil-in { from { opacity: 0; filter: blur(10px); transform: scale(1.03); } 60% { filter: blur(0); } to { opacity: 1; filter: none; transform: none; } }
.mod-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.mod-head h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0; }
.eyebrow { margin: 0 0 var(--s1); color: var(--amber); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
.mod-body { display: grid; gap: var(--s5); }
.mod-loading { display: grid; justify-items: center; gap: var(--s3); padding: var(--s7) 0; color: var(--mist); }
.spinner-sigil { width: 64px; height: 64px; animation: spin 6s linear infinite; }
.spinner-sigil svg { width: 100%; height: 100%; }
.mod-error { padding: var(--s5); }
.btn--text { background: transparent; border-color: transparent; color: var(--aqua); padding: 0 var(--s2); }
.btn--glass { background: var(--glass-2); }
.lead { font-size: 1.15rem; color: var(--pearl); }
.pill--premium { color: var(--amber); background: var(--amber-soft); border-color: var(--amber); }
.pill--locked { color: var(--mist); background: var(--glass); border-color: var(--glass-hi); }
.list.plain { list-style: none; padding: 0; margin: 0; }
.mod-tile.is-soon { opacity: 0.62; cursor: default; }
.mod-tile.is-soon:hover { transform: none; box-shadow: var(--shadow); }
.grid-mods--paths { margin-top: var(--s4); }
.crisis { padding: var(--s5); border-color: var(--rose); }

/* ---------- home: today's card ---------- */
.today-card { position: relative; width: 120px; aspect-ratio: 2 / 3; border: 0; padding: 0; background: none; cursor: pointer; }
.today-card img { width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 20px 40px -16px rgba(90, 60, 200, 0.7); position: relative; z-index: 1; }
.today-card::before { content: ""; position: absolute; inset: -30% -40%; background: var(--halo); filter: blur(8px); animation: breathe-halo 5s ease-in-out infinite; }
.today-card::after { content: ""; position: absolute; inset: 20% 10%; background: var(--warm-core); filter: blur(14px); opacity: calc(0.35 + var(--flicker) * 0.65); }
@keyframes breathe-halo { 0%, 100% { opacity: 0.7; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
.btn--primary { position: relative; }
.btn--primary::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none; opacity: 0.35;
  box-shadow: 0 0 18px 0 rgba(179, 155, 255, 0.55), 0 0 30px 2px rgba(138, 232, 220, 0.22); animation: breath-glow 5.5s ease-in-out infinite; }
@keyframes breath-glow { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.75; } }
.fx-light--strong { box-shadow: 0 0 0 1px var(--amber), 0 0 42px rgba(247, 217, 160, 0.55) !important; }

/* ---------- ritual stage ---------- */
.ritual { display: grid; gap: var(--s3); justify-items: center; text-align: center; }
/* WD1-5 (abgenommen 04.10.2026): guidance left, stage scene right from 1000 px; phones keep the stage above the fold. */
.ritual__side { display: grid; gap: var(--s2); justify-items: center; }
.ritual__intro { margin: 0; max-width: 46ch; }
.ritual__scene { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; overflow: hidden; border-radius: var(--r-lg); }
.ritual__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; pointer-events: none;
  transform: translate3d(calc(var(--px) * 12px), calc(var(--py) * 10px), 0) scale(1.08); transition: opacity 0.8s var(--tl-ease), transform 1.2s var(--tl-ease); }
.ritual--scene .ritual__scene::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 50% 50%, rgba(6, 5, 11, 0.15), rgba(6, 5, 11, 0.88)); }
.ritual--scene .ritual__scene { border: 1px solid var(--tl-glass-edge); background: var(--tl-ink-2); }
.ritual__scene:has(.holding) .ritual__bg { opacity: 0.62; }
html[data-motion="reduced"] .ritual__bg { transform: none; }
@media (min-width: 1000px) {
  .ritual { grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.4fr); grid-template-areas: "side scene" "status scene"; align-items: center; justify-items: stretch; text-align: start;
    gap: var(--s3) clamp(24px, 3vw, 56px); min-height: min(calc(100vh - 160px), 760px); }
  .ritual__side { grid-area: side; justify-items: start; align-self: end; }
  .ritual__head { justify-content: flex-start; }
  .ritual__lead { font-size: clamp(2rem, 3.4vw, 3.4rem); }
  .ritual__help-btn { display: none; }
  .ritual__help[hidden] { display: block; }
  .ritual__help { font-size: 1rem; color: var(--mist); }
  .ritual__intro { font-size: 1.15rem; }
  .ritual > .ritual__status { grid-area: status; align-self: start; }
  .ritual__scene { grid-area: scene; align-self: stretch; min-height: 580px; }
  .ritual__scene .ritual__stage { transform: scale(var(--stage-scale, 1.3)); }
}
@media (min-width: 1600px) { .ritual__scene { min-height: 660px; } .ritual__scene .ritual__stage { --stage-scale: 1.5; } }
@media (max-width: 999px) { .ritual--scene .ritual__scene { max-width: 560px; } }
.ritual__head { display: flex; align-items: center; gap: var(--s2); justify-content: center; }
.ritual__lead { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.ritual__help-btn { width: 32px; height: 32px; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; }
.ritual__help { max-width: 46ch; margin: 0; }
.ritual__stage { position: relative; width: min(100%, 340px); height: 380px; display: grid; place-items: center; isolation: isolate; touch-action: none; }
.ritual__status { min-height: 1.6em; margin: 0; color: var(--mist); }
.deck { position: relative; z-index: 2; width: 150px; aspect-ratio: 2 / 3; border: 0; padding: 0; background: none; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; border-radius: 12px; }
.deck img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 18px 36px -14px rgba(90, 60, 200, 0.9); pointer-events: none; }
.deck img:nth-child(1) { transform: translate(-6px, 6px) rotate(-4deg); }
.deck img:nth-child(2) { transform: translate(5px, 3px) rotate(3deg); }
.deck:focus-visible { outline: 2px solid var(--aqua); outline-offset: 10px; }
.holding .deck img:last-child { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 36px 6px rgba(179, 155, 255, 0.6); }
.deck.shuffle img:nth-child(1) { animation: orbitA 0.62s cubic-bezier(0.45, 0, 0.55, 1) 3; }
.deck.shuffle img:nth-child(2) { animation: orbitB 0.62s cubic-bezier(0.45, 0, 0.55, 1) 3; }
.deck.shuffle img:nth-child(3) { animation: orbitC 0.62s cubic-bezier(0.45, 0, 0.55, 1) 3; }
.deck.shuffle img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 26px 4px rgba(179, 155, 255, 0.55); }
@keyframes orbitA { 25% { transform: translate(-80px, -20px) rotate(-18deg); } 50% { transform: translate(0, -46px) rotate(0); } 75% { transform: translate(80px, -20px) rotate(18deg); } }
@keyframes orbitB { 25% { transform: translate(80px, 20px) rotate(16deg); } 50% { transform: translate(0, 40px) rotate(0); } 75% { transform: translate(-80px, 20px) rotate(-16deg); } }
@keyframes orbitC { 50% { transform: scale(1.08); filter: brightness(1.4); } }
.ring { position: absolute; z-index: 1; width: 250px; height: 250px; pointer-events: none; }
.ring circle { fill: none; stroke-width: 3; }
.ring .track { stroke: rgba(255, 255, 255, 0.12); }
.ring .prog { stroke: url(#prismStroke); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 6px rgba(179, 155, 255, 0.9)); }
.bloom { position: absolute; z-index: 3; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(0.2);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(179, 155, 255, 0.5) 18%, rgba(138, 232, 220, 0.25) 40%, transparent 70%); mix-blend-mode: screen; transition: opacity 300ms var(--ease-tl); }
.sigil-ring { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; pointer-events: none; overflow: visible;
  opacity: calc(0.28 + var(--sigil, 0) * 0.72); filter: drop-shadow(0 0 calc(2px + var(--sigil, 0) * 10px) rgba(179, 155, 255, 0.85)); transition: opacity 200ms linear; }
.sigil-ring circle, .sigil-ring path { fill: none; stroke: url(#prismStroke); stroke-width: 1.1; stroke-linecap: round; }
.sigil-ring .sigil__ticks { stroke-width: 0.8; }
.sigil__outer, .sigil__inner { transform-origin: 50% 50%; transform-box: view-box; }
.sigil__outer { animation: spin 90s linear infinite; }
.sigil__inner { animation: spin 60s linear infinite reverse; }
.cst { position: absolute; left: 50%; top: 50%; width: 330px; height: 440px; margin: -220px 0 0 -165px; pointer-events: none; overflow: visible; max-width: none; }
.cst__line { stroke: rgba(244, 240, 251, 0.75); stroke-width: 1.1; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(138, 232, 220, 0.9)); }
.cst__star { fill: rgba(244, 240, 251, 0.3); transition: fill 200ms; }
.cst__star.on { fill: #fff; filter: drop-shadow(0 0 5px rgba(247, 217, 160, 1)); }
.cst.done { animation: cst-pulse 900ms ease-out; }
@keyframes cst-pulse { 40% { filter: drop-shadow(0 0 14px rgba(247, 217, 160, 0.9)); } }
.stage-vortex { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; margin: -140px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent, rgba(138, 232, 220, 0.35), transparent 30%, rgba(179, 155, 255, 0.4), transparent 60%, rgba(245, 179, 205, 0.35), transparent 90%);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 42%, #000 62%, transparent 70%); mask: radial-gradient(circle, transparent 38%, #000 42%, #000 62%, transparent 70%); filter: blur(3px); }
.stage-vortex.on { opacity: 0.9; animation: spin 0.9s linear infinite; transition: opacity 300ms; }
.fx-burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 55; }

/* ---------- cards (fx-prism-flip) ---------- */
.tl-card { --w: 150px; width: var(--w); aspect-ratio: 2 / 3; perspective: 1100px; position: relative; flex: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: calc(var(--w) * 0.07); }
.tl-card--hero { --w: clamp(180px, 26vw, 440px); }
.daily-result .tl-card { --w: min(88vw, 420px); }
.yesno-result .tl-card { --w: 150px; }
/* WD1-3 (ruhige Tiefe): the revealed hero card floats gently; still with reduced motion. */
.card-halo .tl-card--hero.is-flipped, .daily-result .card-halo .tl-card.is-flipped { animation: tl-float 7s ease-in-out 1.6s infinite; }
@keyframes tl-float { 50% { translate: 0 -8px; } }
.tl-card__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--reveal) var(--ease-tl); }
.tl-card.is-flipped .tl-card__inner { transform: rotateY(180deg); }
.tl-card.is-reversed.is-flipped .tl-card__inner { transform: rotateY(180deg) rotateZ(180deg); }
.tl-card__face { position: absolute; inset: 0; border-radius: calc(var(--w) * 0.07); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 20px 40px -16px rgba(90, 60, 200, 0.7); background: var(--ink-3); }
.tl-card__face img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tl-card__front { transform: rotateY(180deg); display: grid; place-items: center; }
.tl-card__name { font-family: var(--font-display); padding: var(--s3); text-align: center; }
.tl-card__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 45%, transparent 60%);
  background-size: 250% 100%; background-position: 100% 0; transition: background-position var(--reveal) var(--ease-tl); }
.tl-card.is-flipped .tl-card__face::after { background-position: -50% 0; }
.tl-card__front::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge;
  background: linear-gradient(105deg, transparent 20%, rgba(138, 232, 220, 0.55) 34%, rgba(179, 155, 255, 0.55) 42%, rgba(245, 179, 205, 0.55) 50%, rgba(247, 217, 160, 0.55) 58%, transparent 72%);
  background-size: 300% 100%; background-position: 110% 0; }
.tl-card.is-prism .tl-card__front::before { animation: prism-sweep 1.15s var(--ease-tl) 0.25s both; }
@keyframes prism-sweep { 0% { opacity: 0; background-position: 110% 0; } 30% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
.tl-card.is-prism { animation: chroma 1.2s var(--ease-tl) both; }
@keyframes chroma { 35% { filter: drop-shadow(-4px 0 0 rgba(255, 90, 170, 0.6)) drop-shadow(4px 0 0 rgba(80, 220, 255, 0.6)) drop-shadow(0 0 24px rgba(247, 217, 160, 0.6)); } }
.card-halo { position: relative; display: grid; place-items: center; padding: var(--s5) var(--s6); }
.card-halo::before { content: ""; position: absolute; width: 170%; max-width: 520px; height: 130%; background: var(--halo); filter: blur(8px); animation: breathe-halo 5s ease-in-out infinite; pointer-events: none; }
.card-halo::after { content: ""; position: absolute; width: 70%; height: 50%; background: var(--warm-core); filter: blur(14px); pointer-events: none; opacity: calc(0.35 + var(--flicker) * 0.65); }
.card-halo > * { position: relative; z-index: 1; }
.tl-reveal { animation: title-reveal 1.4s var(--ease-tl) both; }
@keyframes title-reveal { from { opacity: 0; letter-spacing: 0.32em; text-shadow: 0 0 22px rgba(247, 217, 160, 0.95); } 60% { opacity: 1; text-shadow: 0 0 18px rgba(179, 155, 255, 0.7); } to { letter-spacing: 0.01em; text-shadow: 0 0 12px rgba(179, 155, 255, 0.35); } }
.card-title.pending { opacity: 0; }
.mist-in { animation: mist-in 1.1s var(--ease-tl) both; animation-delay: var(--d, 0ms); }
@keyframes mist-in { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } to { opacity: 1; filter: none; transform: none; } }
/* TP3: the button to the whole reading rises in (App `AnimatedVisibility`, 320 ms; reduced motion 140 ms fade). */
.rise-in { animation: rise-in 320ms var(--ease-tl) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html[data-motion="reduced"] .rise-in { animation: rise-fade 140ms linear both; }
@keyframes rise-fade { from { opacity: 0; } to { opacity: 1; } }
.ornament { display: flex; align-items: center; gap: 10px; justify-content: center; color: var(--dim); }
.ornament::before, .ornament::after { content: ""; flex: 1; max-width: 90px; height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 240, 251, 0.35)); }
.ornament::after { transform: scaleX(-1); }

/* ---------- daily ---------- */
.daily-result { display: block; width: 100%; }
.daily-text { display: grid; gap: var(--s3); max-width: 70ch; justify-self: center; justify-items: center; }
.daily-text .card-title { font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.keywords { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.affirmation { margin: 0; padding: var(--s4); border-inline-start: 2px solid var(--amber); background: var(--amber-soft); border-radius: 0 var(--r-md) var(--r-md) 0; }
.affirmation p { margin: var(--s1) 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }
.reflection { font-style: italic; }
.mist { display: grid; gap: var(--s3); }
.more p { color: var(--mist); }

@media (max-width: 900px) {
  .daily-result { text-align: center; }
  .daily-text { justify-items: center; }
  .daily-mod .keywords { justify-content: center; }
}
html[data-motion="reduced"] .stage-vortex, html[data-motion="reduced"] .fx-burst { display: none !important; }
html[data-motion="reduced"] .tl-card__inner { transition: opacity 200ms linear !important; }
html[data-motion="reduced"] .card-title.pending { opacity: 1; }
.mod-body .btn--text { justify-self: start; }
.daily-mod .more p { margin: 0; }

/* ---------- yes / no ---------- */
.ask { padding: var(--s5); display: grid; gap: var(--s4); max-width: 720px; }
.question-echo { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--mist); margin: 0; }
.yesno-result { display: grid; justify-items: center; gap: var(--s4); text-align: center; }
.answer-block { display: grid; gap: var(--s3); justify-items: center; max-width: 64ch; }
.answer { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0; color: var(--pearl); }
.answer-yes .answer { text-shadow: 0 0 24px rgba(138, 232, 220, 0.5); }
.answer-no .answer { text-shadow: 0 0 24px rgba(245, 179, 205, 0.5); }
.answer-maybe .answer { text-shadow: 0 0 24px rgba(247, 217, 160, 0.5); }
.yesno-result .btn--text { justify-self: center; }
.note-host { width: 100%; }
.note-form { padding: var(--s4); text-align: start; }
.textarea { min-height: 110px; padding: var(--s3) var(--s4); resize: vertical; }

/* ---------- spreads / love ---------- */
.setup { max-width: 860px; }
.spread-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s3); }
.spread-opt { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); text-align: start; color: var(--pearl); cursor: pointer; border-radius: 20px; }
.spread-opt[aria-checked="true"] { border-color: var(--aqua); box-shadow: var(--glow); }
.spread-opt[aria-disabled="true"] { opacity: 0.6; }
.spread-opt__text { display: grid; gap: 4px; flex: 1; }
.spread-opt__name { font-family: var(--font-display); font-size: 1.2rem; }
.mini { display: flex; gap: 3px; flex: none; width: 56px; flex-wrap: wrap; justify-content: center; }
.mini i { width: 12px; height: 18px; border-radius: 2px; border: 1px solid var(--violet); background: var(--violet-soft); }
.mini--celtic-cross i { width: 8px; height: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { min-height: 40px; padding: 0 var(--s4); border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass); color: var(--mist); cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--aqua); color: var(--pearl); background: var(--aqua-soft); }
.bottom-cta { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 5; display: grid; gap: var(--s2); justify-items: stretch; margin-top: var(--s3); padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--ink) 62%, transparent); }
.bottom-cta .btn--primary { width: 100%; justify-content: center; }
@media (min-width: 760px) { .bottom-cta { bottom: 0; } }
.board { position: relative; display: flex; justify-content: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) 0; }
.board--row .tl-card { --w: clamp(92px, 14vw, 170px); }
.board--5 .tl-card, .board--4 .tl-card { --w: clamp(58px, 12vw, 150px); }
.board--5, .board--4 { gap: var(--s2); flex-wrap: nowrap; }
.spread-cell { display: grid; justify-items: center; gap: var(--s2); }
.pos-label { font-size: 0.82rem; color: var(--mist); text-align: center; max-width: 16ch; }
.board--celtic { display: block; width: min(100%, 520px); aspect-ratio: 520 / 560; margin: 0 auto; }
.board--celtic .spread-cell { position: absolute; transform: translate(-50%, -50%); }
.board--celtic .tl-card { --w: clamp(48px, 13vw, 82px); }
.board--celtic .pos-label { display: none; }
.board--celtic .pos-1 { left: 33%; top: 47%; } .board--celtic .pos-2 { left: 33%; top: 47%; z-index: 2; }
.board--celtic .pos-2 .tl-card { transform: rotate(90deg); }
.board--celtic .pos-3 { left: 33%; top: 79%; } .board--celtic .pos-4 { left: 12%; top: 47%; }
.board--celtic .pos-5 { left: 33%; top: 15%; } .board--celtic .pos-6 { left: 54%; top: 47%; }
.board--celtic .pos-7 { left: 84%; top: 86%; } .board--celtic .pos-8 { left: 84%; top: 62%; }
.board--celtic .pos-9 { left: 84%; top: 38%; } .board--celtic .pos-10 { left: 84%; top: 14%; }
.revealbar { display: grid; justify-items: center; gap: var(--s2); }
.interp { display: grid; gap: var(--s4); }
.interp[hidden] { display: none !important; }
.interp:not([hidden]) { display: block; width: 100%; min-width: 0; }
.interp-head { width: 100%; min-width: 0; }
.interp.is-motion > .reading-result { animation: deeper-rise 320ms var(--ease); }
.interp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.interp-head h2 { margin: 0; }
.segment { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass); }
.seg { min-height: 38px; padding: 0 var(--s4); border-radius: 999px; border: 0; background: transparent; color: var(--mist); cursor: pointer; }
.seg[aria-pressed="true"] { background: var(--violet-soft); color: var(--pearl); }
.interp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s3); }
.interp-card, .interp-block { padding: var(--s4) var(--s5); display: grid; gap: var(--s2); align-content: start; }
.interp-card h3, .interp-block h3 { margin: 0; }
.interp-card p, .interp-block p { margin: 0; }
.spreads [data-interpretation] { min-height: 3rem; font-size: 1.0625rem; }
.reversed { color: var(--amber); }
.locked { display: grid; gap: var(--s2); justify-items: start; }
.notice { padding: var(--s3) var(--s4); margin: 0; }
@media (max-width: 600px) { .board--celtic { aspect-ratio: 520 / 620; } }
.pill--wait-soft { color: var(--dim); }

/* ---------- oracle ---------- */
.oracle-arrive { padding: var(--s6) var(--s5); display: grid; gap: var(--s3); justify-items: start; width: 100%; max-width: none; }
.threshold-wrap { display: grid; gap: var(--s3); justify-items: center; }
.threshold { --p: 0; position: relative; width: min(100%, 300px); aspect-ratio: 3 / 4; touch-action: none; cursor: grab; border-radius: var(--r-lg);
  background: radial-gradient(60% 50% at 50% 45%, rgba(179, 155, 255, calc(0.08 + var(--p) * 0.25)), transparent 70%); }
.threshold svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.threshold .arch { fill: rgba(255, 255, 255, 0.03); stroke: url(#prismStroke); stroke-width: 2; filter: drop-shadow(0 0 calc(4px + var(--p) * 14px) rgba(179, 155, 255, 0.8)); }
.threshold .cross { stroke: rgba(247, 217, 160, 0.35); stroke-dasharray: 3 6; }
.threshold .trail { fill: none; stroke: rgba(247, 217, 160, 0.7); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(247, 217, 160, 0.9)); }
.threshold .light { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff, rgba(247, 217, 160, 0.9) 35%, rgba(247, 217, 160, 0) 70%); box-shadow: 0 0 24px 8px rgba(247, 217, 160, 0.5); transition: transform 300ms var(--ease-tl); }
.threshold.released .light { transform: scale(2.6); opacity: 0.9; }
.threshold.released .arch { filter: drop-shadow(0 0 22px rgba(247, 217, 160, 0.9)); }
.oracle-sign { display: grid; gap: var(--s3); justify-items: center; text-align: center; width: 100%; max-width: none; margin: 0 auto; }
.oracle-sign .mist { justify-items: center; }
.oracle-sign .interp-block { text-align: start; width: 100%; }
.sign-art { width: 150px; height: 150px; color: var(--pearl); filter: drop-shadow(0 0 16px rgba(179, 155, 255, 0.85)); animation: settle 1.2s var(--ease-tl) both; }
.sign-art svg { width: 100%; height: 100%; }
@keyframes settle { from { opacity: 0; transform: translateY(-18px) scale(0.9); filter: blur(6px); } to { opacity: 1; transform: none; } }

/* ---------- numerology ---------- */
.numerology { width: 100%; max-width: none; }
.nu-ritual { display: grid; gap: var(--s3); justify-items: center; width: 100%; }
.nu-surface { --hold: 0; position: relative; width: 100%; min-height: 290px; border: 0; padding: 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  background: transparent; color: var(--pearl); display: grid; place-items: center; }
.nu-surface:focus-visible { outline: 2px solid var(--aqua); outline-offset: 4px; }
.nu-orbit-wrap { position: relative; width: min(100%, 360px); height: 280px; display: grid; }
.nu-orbit-art { width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: radial-gradient(ellipse, #000 42%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 42%, transparent 72%); }
.nu-orbit { position: absolute; inset: 18px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(180, 231, 223, 0.7);
  box-shadow: 0 0 0 1px rgba(179, 155, 255, 0.35), 0 0 18px rgba(180, 231, 223, 0.28); }
.nu-surface.holding .nu-orbit { animation: nu-orbit-fill 800ms linear forwards; }
@keyframes nu-orbit-fill { to { transform: scale(0.92); box-shadow: 0 0 28px #b4e7df99, 0 0 0 1px rgba(179, 155, 255, 0.7); } }
.view:has(.nu-surface.holding) .mod-head { opacity: 0.28; transition: opacity 180ms linear; }
@media (prefers-reduced-motion: reduce) {
  .nu-orbit { box-shadow: 0 0 22px #b4e7df66; }
  .nu-surface.holding .nu-orbit { animation: none; transform: none; }
  .view:has(.nu-surface.holding) .mod-head { transition: none; }
}
html[data-motion="reduced"] .nu-orbit { box-shadow: 0 0 22px #b4e7df66; }
html[data-motion="reduced"] .nu-surface.holding .nu-orbit { animation: none; transform: none; }
html[data-motion="reduced"] .view:has(.nu-surface.holding) .mod-head { transition: none; }
.nu-result { display: block; width: 100%; }
.nu-art { width: clamp(220px, 42vw, 420px); height: auto; mask-image: radial-gradient(ellipse, #000 50%, transparent 71%); }
.nu-big { font-family: var(--font-display); font-size: clamp(7rem, 22vw, 12rem); }
.nu-halo.landing > * { animation: land 1.1s var(--ease-tl) both; }
@keyframes land { from { opacity: 0; transform: scale(0.6); filter: blur(10px) brightness(1.8); } to { opacity: 1; transform: none; filter: none; } }
.nu-text { display: grid; gap: var(--s3); min-width: 0; }
.trace { margin: var(--s2) 0 0; padding-inline-start: 1.4em; }
details summary { cursor: pointer; font-family: var(--font-display); font-size: 1.05rem; }
.numerology summary { min-height: 48px; padding: var(--s3) 0; }
.numerology .wp-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
@media (max-width: 900px) { .nu-result .rr-head { justify-items: center; } }
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- horoscope ---------- */
/* WD1-7 (abgenommen): generated signs as image tiles 3/4/6 per row, arriving one after another. */
.sign-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
@media (min-width: 900px) { .sign-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .sign-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sign-tile { display: grid; justify-items: center; gap: var(--s2); padding: var(--s3) var(--s2) var(--s4); color: var(--pearl); cursor: pointer; font-family: var(--font-display); font-size: 1.1rem;
  background: radial-gradient(70% 60% at 50% 40%, rgba(179, 155, 255, 0.14), transparent 70%), var(--tl-ink-2);
  transition: transform 0.45s var(--tl-ease), border-color 0.3s, box-shadow 0.45s var(--tl-ease); animation: sign-arrive 0.9s var(--tl-ease) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
.sign-tile:hover, .sign-tile:focus-visible { transform: translateY(-4px); border-color: rgba(138, 232, 220, 0.5); box-shadow: 0 20px 50px rgba(60, 30, 140, 0.45); }
.sign-tile .glass-art { transition: transform 0.8s var(--tl-ease), filter 0.5s; }
.sign-tile:hover .glass-art, .sign-tile:focus-visible .glass-art { transform: scale(1.06); filter: drop-shadow(0 0 18px rgba(179, 155, 255, 0.6)); }
@keyframes sign-arrive { from { opacity: 0; transform: translateY(18px) scale(0.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.sign-tile[aria-checked="true"] { border-color: var(--aqua); box-shadow: var(--glow); }
.sign-glyph { font-size: 2.2rem; line-height: 1; color: var(--amber); text-shadow: 0 0 14px rgba(247, 217, 160, 0.6); }
.deck--circle { width: 170px; aspect-ratio: 1; border-radius: 50%; }
.zodiac-orb { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; color: var(--amber);
  background: radial-gradient(circle, rgba(247, 217, 160, 0.18), rgba(179, 155, 255, 0.12) 60%, transparent 72%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }
.zodiac-wheel { position: absolute; inset: 8%; width: 84%; height: 84%; animation: spin 60s linear infinite; opacity: 0.8; }
.zodiac-glyph { font-size: 3.4rem; text-shadow: 0 0 calc(10px + var(--sigil, 0) * 24px) rgba(247, 217, 160, 0.9); }
.horo-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3); }
.sign-head { display: flex; align-items: center; gap: var(--s4); }
.sign-medal { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; font-size: 2.6rem; color: var(--amber); flex: none;
  background: radial-gradient(circle, rgba(247, 217, 160, 0.2), transparent 70%); box-shadow: 0 0 0 1px var(--glass-hi), 0 0 30px rgba(247, 217, 160, 0.3); }
.sign-head .card-title { margin: 0; font-size: clamp(2rem, 4vw, 2.8rem); }
.horo-day, .horo-week { display: grid; gap: var(--s4); }
.horo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s3); }
.horo-deeper-actions { display: grid; gap: var(--s3); }
.horo-deeper-actions .btn { width: 100%; height: auto; white-space: normal; }
.moon-figure { display: block; }
.week-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s3); }
.week-list .is-today { border-color: var(--amber); }
.interp-block .pill { justify-self: start; }

/* ---------- HO7: Dein Aszendent (horizon gesture; tokens only, light from the shared palette) ---------- */
.asc { gap: var(--s3); }
.asc .btn { min-height: 48px; justify-self: start; }
.asc-chip { justify-self: start; min-height: 32px; color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }
.asc-horizon { position: relative; height: 170px; border-radius: var(--r-md); overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, var(--tl-ink-3) 0%, var(--tl-ink-4) 52%, var(--tl-ink) 52.5%, var(--tl-ink-2) 100%); }
.asc-horizon::before { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 1px; background: linear-gradient(90deg, transparent, var(--amber), transparent); box-shadow: 0 0 14px var(--amber); }
.asc-horizon:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.asc-glow { position: absolute; left: 50%; top: 52%; width: 220px; height: 120px; transform: translate(-50%, -50%); background: radial-gradient(ellipse, var(--amber-soft), transparent 70%); opacity: 0.25; transition: opacity 0.4s; }
.asc-glyph { position: absolute; left: 50%; top: 78%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: var(--amber);
  background: radial-gradient(circle at 40% 35%, var(--glass-hi), var(--glass)); border: 1px solid var(--amber); box-shadow: 0 0 18px var(--amber-soft);
  transition: top 0.52s var(--ease-tl), box-shadow 0.4s; }
.asc-glyph { overflow: hidden; }
.asc-art { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; }
.asc-horizon.is-risen .asc-glyph { top: 28%; box-shadow: 0 0 34px color-mix(in srgb, var(--amber) 70%, transparent); }
.asc-horizon.is-risen .asc-glow { opacity: 1; }
.asc-horizon.is-risen { cursor: default; }
.asc-horizon.is-dragging .asc-glyph { transition: none; }
.asc-hint { margin: var(--s2) 0 0; text-align: center; font-size: 0.82rem; color: var(--mist); }
.asc-horizon.is-risen + .asc-hint { visibility: hidden; }
.asc-reveal { display: grid; gap: var(--s2); animation: asc-arrive 0.42s var(--ease-tl) both; }
.asc-text { margin: 0; }
@keyframes asc-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes asc-fade { from { opacity: 0; } to { opacity: 1; } }
/* Reduced motion (system setting or the switch in Ich): no travel, only a cross-fade. */
html[data-motion="reduced"] .asc-glyph, html[data-motion="reduced"] .asc-glow { transition: box-shadow 0.4s linear, opacity 0.4s linear !important; }
html[data-motion="reduced"] .asc-reveal { animation: asc-fade 0.4s linear both !important; }

/* ---------- i ching ---------- */
.cast { display: grid; gap: var(--s3); justify-items: center; }
.cast-stage { position: relative; display: grid; justify-items: center; gap: var(--s4); width: min(100%, 420px); }
.hex-build { display: grid; gap: 7px; width: 150px; min-height: 40px; justify-items: stretch; }
.hx-row { display: flex; gap: 14px; height: 9px; animation: grow 420ms var(--ease-tl) both; }
.hx-row i { flex: 1; border-radius: 3px; background: linear-gradient(90deg, var(--amber), var(--pearl)); box-shadow: 0 0 10px rgba(247, 217, 160, 0.6); }
.hx-row.changing i { background: linear-gradient(90deg, var(--rose), var(--violet)); box-shadow: 0 0 12px rgba(245, 179, 205, 0.7); }
@keyframes grow { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
.hex-build.revealed { width: 190px; animation: land 1.1s var(--ease-tl) both; }
.hexagram { width: 100%; height: auto; overflow: visible; }
.hx-line { fill: var(--pearl); filter: drop-shadow(0 0 6px rgba(247, 217, 160, 0.8)); }
.hx-change { fill: var(--rose); }
.plate { --hold: 0; position: relative; width: min(92vw, 440px); height: auto; aspect-ratio: 360 / 220; border-radius: 36px; border: 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, calc(0.08 + var(--hold) * 0.14)), rgba(138, 232, 220, 0.08) 42%, rgba(6, 5, 11, 0.55));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 24px 40px -28px rgba(90, 60, 200, 0.9); transition: transform 600ms var(--ease-tl), opacity 600ms; }
.plate.recede { transform: scale(0.7) translateY(20px); opacity: 0.35; }
.plate-ring { display: none; }
.plate-ring circle { fill: none; stroke-width: 2; }
.plate-ring .track { stroke: rgba(255, 255, 255, 0.1); }
.plate-ring .prog { stroke: url(#prismStroke); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.coin { position: absolute; top: 50%; width: 72px; max-width: 22%; aspect-ratio: 1; transform: translateY(calc(-50% + var(--hold) * -8px)); transition: transform 220ms; }
.coin img { width: 100%; height: 100%; border-radius: 50%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.coin-0 { left: 12%; } .coin-1 { left: 39%; } .coin-2 { left: 66%; }
.coin.thrown { animation: toss 1.15s cubic-bezier(0.3, 0.6, 0.3, 1) var(--delay, 0ms) both; }
@keyframes toss { 0% { transform: none; } 35% { transform: translate(calc(var(--dx) * 0.6), -120px) rotateX(calc(var(--rot) * 0.6)) scale(1.25); }
  80% { transform: translate(var(--dx), 4px) rotateX(var(--rot)) scale(1); } 90% { transform: translate(var(--dx), -6px) rotateX(var(--rot)); } 100% { transform: translate(var(--dx), 0) rotateX(var(--rot)); } }
.iching-result { display: grid; gap: var(--s4); width: 100%; max-width: none; }
.iching-personal { width: 100%; }
.iching-personal__lines { display: grid; gap: 8px; margin: 0 0 var(--s3); }
.iching-personal__lines i {
  display: block; height: 8px; border-radius: 3px;
  background: linear-gradient(90deg, var(--amber), var(--pearl));
  box-shadow: 0 0 12px rgba(247, 217, 160, 0.45);
  animation: none;
}
/* 240ms must stay in sync with PERSONAL_ARRIVE_MS in iching-personal.js. */
.iching-personal[data-personal="text"],
.iching-personal[data-personal="crisis"] {
  animation: iching-personal-in 240ms var(--ease-tl) both;
}
@keyframes iching-personal-in { from { opacity: 0; } to { opacity: 1; } }
.ai-seal { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; text-decoration: none; }
.ai-seal__ring { width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--violet); box-shadow: inset 0 0 0 3px var(--violet); }
@media (prefers-reduced-motion: reduce) {
  .iching-personal[data-personal="text"],
  .iching-personal[data-personal="crisis"],
  .iching-personal__lines i { animation: none; }
}
html[data-motion="reduced"] .iching-personal[data-personal="text"],
html[data-motion="reduced"] .iching-personal[data-personal="crisis"],
html[data-motion="reduced"] .iching-personal__lines i { animation: none; }
/* MP2: basis of the personal text. Changing lines amber, resting lines mist; no own motion. */
.iching-basis { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin: var(--s3) 0 0; text-align: left; }
.iching-basis__text { max-width: 62ch; }
.iching-basis__figure { display: grid; gap: 3px; width: 36px; flex: none; }
.iching-basis__figure i { display: block; height: 4px; border-radius: 2px; background: var(--mist); opacity: 0.55; }
.iching-basis__figure i[data-yang="false"] { background: linear-gradient(90deg, var(--mist) 0 42%, transparent 42% 58%, var(--mist) 58%); }
.iching-basis__figure i[data-changing="true"] { background: var(--amber); opacity: 1; }
.iching-basis__figure i[data-changing="true"][data-yang="false"] { background: linear-gradient(90deg, var(--amber) 0 42%, transparent 42% 58%, var(--amber) 58%); }
.iching-basis__title { margin: 0; color: var(--amber); }
.iching-basis__text p { margin: 0; }
.trigram-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); width: 100%; }
.trigram-card { display: grid; justify-items: center; gap: var(--s2); padding: var(--s3); text-align: center; }
.trigram-card .hexagram { width: 72px; }
.trigram-card__mark { margin: 0; font-family: var(--font-display); color: var(--aqua); font-size: 1.6rem; }
.text-panel { display: grid; gap: var(--s2); padding: var(--s4); width: 100%; }
.cast-progress:not(:empty) { font-family: var(--font-display); color: var(--pearl); }
.hex-card__head { display: flex; gap: var(--s4); align-items: center; }
.hex-card__head .hexagram { width: 84px; flex: none; }

/* WD1-5: I Ching and numerology stages as image scenes; two columns from 1000 px (text left, gesture right). */
.cast-stage, .nu-scene { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--tl-glass-edge); background: var(--tl-ink-2); }
.cast-stage::before, .nu-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 50% 50%, rgba(6, 5, 11, 0.15), rgba(6, 5, 11, 0.88)); }
.cast-stage { width: min(100%, 560px); padding: var(--s5) var(--s3); }
.nu-scene { display: grid; place-items: center; width: 100%; padding: var(--s5) var(--s3); }
.cast-stage:has(.holding) .ritual__bg, .nu-scene:has(.holding) .ritual__bg { opacity: 0.62; }
@media (min-width: 1000px) {
  .cast, .nu-ritual { grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.4fr); grid-auto-flow: dense; column-gap: clamp(24px, 3vw, 56px); justify-items: start; align-content: center;
    min-height: min(calc(100vh - 160px), 760px); }
  .cast > *, .nu-ritual > * { grid-column: 1; text-align: start; }
  .cast > .cast-stage, .nu-ritual > .nu-scene { grid-column: 2; grid-row: 1 / span 6; align-self: stretch; width: 100%; min-height: 580px; display: grid; place-content: center; justify-items: center; }
  .cast .ritual__lead, .nu-ritual .ritual__lead { font-size: clamp(2rem, 3.4vw, 3.4rem); }
  .cast .center, .nu-ritual .center { text-align: start; }
  .cast-stage .plate { width: 380px; }
  .nu-scene .nu-surface { width: 100%; min-height: 420px; height: auto; }
  .nu-scene .nu-orbit-wrap { width: min(100%, 420px); height: min(360px, 46vh); }
}
@media (min-width: 1600px) { .cast > .cast-stage, .nu-ritual > .nu-scene { min-height: 660px; } .cast-stage .plate { width: 440px; } }

/* ---------- journal ---------- */
.journal-filters { margin-bottom: var(--s4); }
.entries { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s3); }
.entry { width: 100%; display: flex; gap: var(--s4); align-items: center; padding: var(--s3) var(--s4); text-align: start; color: var(--pearl); cursor: pointer; }
.entry:hover { box-shadow: var(--glow); }
.entry__thumbs { display: flex; flex: none; width: 92px; }
.thumb { width: 40px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.thumb + .thumb { margin-inline-start: -14px; }
.thumb.is-reversed { transform: rotate(180deg); }
.thumb-hex { width: 48px; }
.entry__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.entry__title { font-family: var(--font-display); font-size: 1.15rem; }
.entry__q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry__note { color: var(--amber); width: 22px; height: 22px; flex: none; }
.entry__note svg { width: 22px; height: 22px; }
.journal-detail { display: grid; gap: var(--s4); }
.journal-detail .reading-result > .rr-slot { text-align: start; }
.board--detail .tl-card { --w: clamp(70px, 12vw, 130px); cursor: default; }
.btn svg { width: 18px; height: 18px; }
.empty { padding: var(--s5); }

/* XD1/XD2 app artwork: screen blend preserves the luminous glass on dark surfaces. */
.glass-art { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: screen; mask-image: radial-gradient(ellipse, #000 48%, transparent 73%); }
.sign-tile .glass-art { width: 100%; max-width: 200px; }
.zodiac-orb .glass-art { width: 100%; }
.moon-figure { width: 80px; }
/* ---------- shop (PM2): tokens only, no colour literals ---------- */
.shop { max-width: 100%; }
.shop h2 { margin: 0 0 var(--s3); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s4); }
.shop-card, .shop-detail, .shop-status, .shop-sim, .shop-balance, .shop-soon, .shop-receipt { padding: var(--s5); display: grid; gap: var(--s3); align-content: start; }
.shop-card p, .shop-detail p, .shop-status p, .shop-sim p { margin: 0; }
.shop-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.shop-card__head h2, .shop-card__head h3 { margin: 0; }
.shop-price { color: var(--amber); }
.shop-cost { color: var(--amber); font-weight: 600; }
.shop-coins { margin: 0; font-size: 1.6rem; display: flex; align-items: baseline; gap: var(--s2); }
.shop-coins strong { color: var(--amber); }
.shop-delta { font-variant-numeric: tabular-nums; }
.shop-suggest { font-weight: 600; }
.shop-topup { border-color: var(--amber); }
.shop-points { margin: 0; padding-inline-start: var(--s5); display: grid; gap: var(--s2); }
.shop-note { padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--glass-hi); background: var(--glass-2); margin: 0; }
.shop-sim-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px dashed var(--amber); background: var(--amber-soft); margin: 0; }
.shop-sim { border: 2px dashed var(--amber); background: var(--amber-soft); }
.shop-receipt { list-style: none; gap: var(--s1); }
.shop-granted { position: relative; overflow: hidden; border-color: var(--amber); }
.shop-granted > *:not(.shop-halo) { position: relative; z-index: 1; }
.shop-halo { position: absolute; inset: -40% -20% auto auto; width: 280px; height: 280px; border-radius: 50%; background: var(--halo); opacity: 0.55; pointer-events: none; animation: shop-glow 2400ms var(--ease-tl) 1; }
@keyframes shop-glow { from { opacity: 0; transform: scale(0.8); } 40% { opacity: 0.75; } to { opacity: 0.55; transform: none; } }
.shop-entry { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); padding: var(--s4); color: var(--pearl); text-decoration: none; }
.shop-entry > span { display: grid; }
.shop-entry__icon { width: 32px; height: 32px; flex: none; }
.shop-entry:hover { box-shadow: var(--glow); }

/* DK7: existing deck artwork previews, shared by shop and settings. */
.deck-preview { display: flex; gap: 12px; width: 100%; margin-block: 16px; }
.deck-preview img { width: calc(50% - 6px); aspect-ratio: 2 / 3; object-fit: contain; border-radius: 12px; }

/* CUR1B: approved Sternkristall; art is decorative beside localized amounts. */
.currency-icon{display:inline-block;flex:none;vertical-align:middle;object-fit:contain;background:var(--ink);border-radius:50%;padding:2px;box-sizing:content-box}
.currency-art{display:block;max-width:100%;object-fit:contain;margin:0 auto .75rem}
.shop-coins{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.shop-cost .currency-icon{margin-inline-end:.35rem}

.shop-coins{position:relative}
.currency-flight,.currency-thread{position:absolute;left:8px;top:50%;pointer-events:none;z-index:1}
.currency-flight .currency-icon{background:none;padding:0}
.currency-thread{width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--aqua),var(--pearl));transform-origin:left center}

/* WP1: AS3 light arc and manual astronomy, shared Taluma tokens. */
.wp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 300px),1fr)); gap:var(--s4); }
.astro-entry { text-align:start; color:var(--pearl); cursor:pointer; transition:box-shadow 240ms var(--ease-tl); }
.astro-entry:hover, .astro-entry:focus-visible { box-shadow:0 0 28px var(--aqua-soft); }
.astro-entry svg { display:block; width:100px; height:100px; margin:var(--s3) auto; fill:none; stroke:var(--aqua); stroke-width:1.2; }
.astro-entry p { color:var(--mist); }
.astro-arc { --arc:0; width:min(100%,360px); margin:auto; touch-action:none; border-radius:var(--s5); background:var(--halo); }
.astro-arc svg { width:100%; fill:var(--amber); }
.astro-arc path { fill:none; stroke:var(--aqua); stroke-width:3; }
.astro-track { opacity:.2; }
.astro-progress { stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--arc) * 100); filter:drop-shadow(0 0 8px var(--aqua)); }
.astro-perspective { animation:veil-in 450ms var(--ease-tl) both; min-width:0; overflow-wrap:anywhere; }
.astro-perspective:nth-child(2) { animation-delay:450ms; }
.astro-perspective:nth-child(3) { animation-delay:900ms; }
.wp-check { display:flex; align-items:start; gap:var(--s3); padding:var(--s3) 0; }
.wp-check input { flex:none; width:24px; height:24px; margin:12px; accent-color:var(--aqua); }
.wp-sky { overflow:hidden; border:1px solid var(--glass-hi); border-radius:var(--s4); background:var(--halo); }
.wp-sky svg { display:block; width:100%; min-height:220px; }
.wp-sky circle { fill:var(--pearl); }
.wp-sky line { stroke:var(--lavender); stroke-width:1; opacity:.4; }
.wp-sky line.selected { stroke:var(--amber); stroke-width:2; opacity:1; }
@media(prefers-reduced-motion:reduce) { .astro-perspective { animation:none; } .astro-entry { transition:none; } }
:root[data-motion="reduced"] .astro-perspective { animation:none; }
/* Physical coin plate: two stable faces, quaternion rotation, ballistic lift. */
.plate:has(.wp-coin-scene) { overflow:visible; perspective:850px; }
.wp-coin-scene { position:absolute; top:0; left:0; width:360px; height:220px; transform-origin:top left; transform-style:preserve-3d; pointer-events:none; }
.plate .wp-coin { position:absolute; inset:0 auto auto 0; width:82px; height:82px; margin:0; transform-style:preserve-3d; animation:none; }
.wp-coin img { position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden; }
.wp-coin .wp-front { transform:translateZ(2.3px); }
.wp-coin .wp-back { transform:rotateY(180deg) translateZ(2.3px); }
.wp-coin-shadow { position:absolute; width:82px; height:82px; border-radius:50%; background:var(--ink); filter:blur(4px); }
/* SH7 China: the masked contact shadow replaces the face drop-shadow, which would tint the see-through hole. */
.wp-coin-scene--holed .wp-coin img { filter:none; }
/* A face-shaped shadow is sharp enough to be seen, so it sits under its coin (origin like .wp-coin) and turns with it. */
.wp-coin-shadow--face { inset:0 auto auto 0; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.wp-mic { align-self:start; display:inline-flex; align-items:center; gap:var(--s2); }
.wp-mic svg { width:36px; height:36px; fill:none; stroke:var(--aqua); stroke-width:1.6; stroke-linecap:round; filter:drop-shadow(0 0 5px var(--aqua-soft)); }
.wp-speech [data-transcript] { overflow-wrap:anywhere; }

/* ---------- PM3: shop by content, purchase comparison, oracle veils ---------- */
.shop > section > h2 { margin-block: var(--s5) var(--s2); }
.shop-card .btn, .shop-status .btn, .veil { min-height: var(--s7); } /* 3rem: 48 px touch target that grows with the text size */
.shop-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--s7) * 5)), 1fr)); gap: var(--s4); }
.shop-way { display: grid; gap: var(--s3); align-content: start; padding: var(--s4); border: 1px solid var(--glass-hi); border-radius: var(--r-md); background: var(--glass-2); }
.shop-way h3, .shop-way p { margin: 0; overflow-wrap: anywhere; }
.shop-compare { border-color: var(--violet); }
.veil { position: relative; display: grid; place-items: center; gap: var(--s2); padding: var(--s3); border-radius: var(--r-md); border: 1px solid var(--violet);
  background: linear-gradient(160deg, var(--violet-soft), var(--aqua-soft)); color: var(--pearl); font: inherit; cursor: pointer; overflow: hidden; animation: veil-breathe 3.2s var(--tl-ease-soft) infinite; }
.veil svg { width: var(--s6); height: var(--s6); opacity: 0.75; }
.veil small { text-align: center; overflow-wrap: anywhere; }
.veil:focus-visible { outline: var(--s1) solid var(--aqua); outline-offset: var(--s1); }
@keyframes veil-breathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
html[data-motion="reduced"] .veil { animation: none; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .veil { animation: none; opacity: 0.9; } }
.oracle-sign--triad { width: 100%; max-width: calc(var(--s7) * 25); grid-template-columns: minmax(0, 1fr); }
.triad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--s7) * 5.5)), 1fr)); gap: var(--s4); width: 100%; text-align: left; }
.triad-card { padding: var(--s4); display: grid; gap: var(--s2); align-content: start; animation: triad-in 0.9s var(--tl-ease) both; animation-delay: var(--d, 0ms); }
.triad-card h3, .triad-card p { margin: 0; overflow-wrap: anywhere; }
.triad-card .sign-art { width: calc(var(--s7) * 2); height: calc(var(--s7) * 2); justify-self: center; }
@keyframes triad-in { from { opacity: 0; transform: translateY(var(--s4)); } to { opacity: 1; transform: none; } }
html[data-motion="reduced"] .triad-card { animation: none; }
@media (prefers-reduced-motion: reduce) { .triad-card { animation: none; } }
/* TP3: the mirror ritual uses reflection, mist and quiet unfolding. */
.mirror-mod { display:grid; gap:var(--s4); min-width:0; }
.mirror-mod .section { min-width:0; overflow-wrap:anywhere; }
.mirror-hero { text-align:center; background:radial-gradient(ellipse at 50% 0%,var(--glass-edge),transparent 70%); }
.mirror-sigil { width:6rem; height:6rem; fill:none; stroke:currentColor; stroke-width:1.5; filter:drop-shadow(0 0 12px var(--aqua)); }
.mod-tile.mirror-tile { color:inherit; text-decoration:none; }
/* MI3B: full-bleed like the sibling module art; the nebula background carries the tile. */
.mod-tile.mirror-tile .module-art { object-fit:contain; }
.mirror-facets-title { margin:0; }
.mirror-entry { display:flex; align-items:center; gap:1rem; padding:1rem; min-height:48px; text-decoration:none; }
.mirror-entry small { display:block; }
.mirror-entry .mirror-sigil { width:3rem; height:3rem; flex-shrink:0; }
.mirror-facets { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1rem; }
.mirror-options { display:grid; gap:.75rem; }
.mirror-option { display:flex; align-items:center; gap:1rem; min-height:48px; width:100%; padding:1rem; border:1px solid var(--glass-hi); border-radius:1rem; color:inherit; background:var(--glass); text-align:left; font:inherit; transition:background .25s ease,box-shadow .25s ease; }
.mirror-option.chosen { background:var(--glass-2); box-shadow:inset 0 0 18px var(--glass-edge); border-color:currentColor; }
.mirror-motif { width:5rem; height:3rem; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0; }
.mirror-toggle { display:flex; align-items:flex-start; gap:.8rem; min-height:48px; padding:.8rem 0; cursor:pointer; }
.mirror-toggle input { width:1.5rem; height:1.5rem; flex-shrink:0; margin-top:.2rem; accent-color:var(--pearl); }
.mirror-toggle:has(input:disabled) { opacity:.65; cursor:default; }
.mirror-mod summary { min-height:48px; padding:.8rem 0; cursor:pointer; }
.mirror-mod .glass { animation:mirror-unfold var(--dur-reveal, .45s) var(--ease-tl) both; }
@keyframes mirror-unfold { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .mirror-mod .glass { animation:mirror-fade .2s linear; } .mirror-option { transition:background .2s linear; } }
html[data-motion="reduced"] .mirror-mod .glass { animation:mirror-fade .2s linear !important; }
@keyframes mirror-fade { from {opacity:0} to {opacity:1} }

.app .mirror-heading h1 { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.mirror-established .glass { animation:mirror-fade .2s linear; }

/* UXW3: module parity. Shared palette and motion; no global shell rules. */
.horo-tabs { flex-wrap: wrap; gap: var(--s1); }
.horo-tabs .seg { min-height: 48px; flex: 1 1 auto; }
.love-modes { display: grid; gap: var(--s2); margin-block: var(--s3); }
.love-mode { padding: var(--s3); min-height: 48px; color: var(--pearl); text-align: start; font: inherit; cursor: pointer; transition: border-color 240ms var(--ease-tl), background 240ms var(--ease-tl); }
.love-mode[aria-checked="true"] { border-color: var(--amber); background: var(--amber-soft); }
.love-frame textarea, .love-frame .input, #kn-query { box-sizing: border-box; width: 100%; min-height: 48px; }
.love-frame .love-seal { width: 88px; height: 88px; min-height: 88px; border-radius: 50%; padding: 0; }
.love-chip { border-color: var(--aqua); }
.circle-pick { margin-top: var(--s2); }
.love-seal.is-holding { box-shadow: 0 0 0 8px color-mix(in srgb, var(--pearl) 28%, transparent); }
@media (prefers-reduced-motion: reduce) { .love-seal.is-holding { box-shadow: none; } }
.kn-narration, .keep-text { margin-block: var(--s4); overflow-wrap: anywhere; }
.kn-narration:empty, .keep-text:empty { display: none; }
.triad-stage { display: grid; place-items: center; padding-block: var(--s4); }
.triad-rings { position: relative; width: min(100%, 320px); aspect-ratio: 1; background: var(--halo); color: var(--pearl); border: 0; border-radius: 50%; cursor: pointer; touch-action: pan-x; }
.triad-ring { position: absolute; display: grid; place-items: center; border: 1px solid var(--violet); border-radius: 50%; transition: transform 420ms var(--ease-tl), border-color 420ms var(--ease-tl), box-shadow 420ms var(--ease-tl); }
.triad-ring--sun { inset: 0; transform: rotate(-25deg); }
.triad-ring--sun img { width: 54px; height: 54px; position: absolute; top: 0; }
.triad-ring--moon { inset: 18%; transform: rotate(25deg); }
.triad-ring--moon .moon-figure { position: absolute; top: 0; width: 48px; height: 48px; }
.triad-ring--day { inset: 36%; border-color: var(--amber); font-family: var(--font-display); }
.triad-ring.is-aligned { transform: rotate(0deg); border-color: var(--aqua); box-shadow: var(--glow); }
.horo-wheel { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: var(--s4) auto; }
.horo-orbits { width: 100%; height: 100%; fill: none; stroke: var(--violet); stroke-width: 1; }
.horo-orbits [data-sun] { fill: var(--amber); stroke: var(--amber); }
.horo-orbits [data-moon] { fill: var(--aqua); stroke: var(--aqua); }
.wheel-sign { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 48px; height: 48px; padding: 2px; border-radius: 50%; background: var(--ink-2); border: 1px solid transparent; cursor: pointer; transition: border-color 240ms var(--ease-tl), box-shadow 240ms var(--ease-tl); }
.wheel-sign img { width: 100%; height: 100%; object-fit: contain; }
.wheel-sign[aria-pressed="true"] { border-color: var(--amber); box-shadow: var(--glow); }
.horo-wheel-center { position: absolute; inset: 32%; display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 0.8rem; overflow-wrap: anywhere; pointer-events: none; }
.horo-wheel-center strong { color: var(--amber); font-size: 1.1rem; }
#horo-date { width: 100%; min-height: 48px; accent-color: var(--aqua); }
.horo-sky-stage { display: grid; place-items: center; margin-block: var(--s4); }
.sky-sign { position: relative; width: min(100%, 300px); aspect-ratio: 1; background: var(--halo); border: 1px solid var(--violet); border-radius: 50%; cursor: pointer; touch-action: pan-y; }
.sky-sign img { width: 90%; height: 90%; object-fit: contain; animation: uxw3-orbit 6s ease-in-out infinite alternate; }
.sky-sign svg { position: absolute; inset: 0; width: 100%; fill: none; stroke: var(--aqua); stroke-width: 1; stroke-dasharray: var(--hold, 0) 1; transform: rotate(-90deg); }
@keyframes uxw3-orbit { to { transform: scale(1.03); } }
html[data-motion="reduced"] .sky-sign img { animation: none; }
html[data-motion="reduced"] .triad-ring { transform: none; transition: opacity 200ms linear; }
@media (prefers-reduced-motion: reduce) { .sky-sign img { animation: none; } .triad-ring { transform: none; transition: opacity 200ms linear; } }

.horoscope .btn, .keep-text .btn, .kn-narration .btn, .love-frame button, .kn-page--overview .btn { min-height: var(--s7); }
.love-frame textarea { resize: vertical; }
#horo-date { padding-inline: 0; }
.journal-filters .chip { min-height: var(--s7); }

.horo-wheel { touch-action: pan-y; }
.wheel-sign { transition: left 420ms var(--ease-tl), top 420ms var(--ease-tl), border-color 240ms var(--ease-tl), box-shadow 240ms var(--ease-tl); }
html[data-motion="reduced"] .wheel-sign { transition: border-color 200ms linear; }
@media (prefers-reduced-motion: reduce) { .wheel-sign { transition: border-color 200ms linear; } }
/* B13: the mobile Journal header keeps the complete sigil instead of clipping “Taluma” to “TA”. */
@media (max-width: 759px) {
  .app[data-screen="journal"] .topbar__brand .brand { font-size: 0; gap: 0; letter-spacing: 0; }
}

.view:has(.horoscope, .spreads) .mod-head > div { min-width: 0; }
.view:has(.horoscope, .spreads) .mod-head h1 { overflow-wrap: anywhere; }

.horo-wheel::before { content: ''; position: absolute; left: 50%; top: 0; border: var(--s2) solid transparent; border-top-color: var(--amber); transform: translate(-50%, -100%); }

/* RD3B: keep alternatives in the accessibility tree and tab order during the quiet interval. */
button[data-quiet-action], [data-quiet-action] button { min-height: 48px; min-width: 48px; }
[data-quiet-action] { transition: opacity 180ms var(--ease); }
[data-quiet-action]:not([data-quiet-revealed]):not(:focus-within) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip-path: inset(50%);
  white-space: nowrap !important; border: 0 !important; opacity: 0; pointer-events: none;
}
[data-quiet-action]:focus-within { opacity: 1; transition: none; }
html[data-motion="reduced"] [data-quiet-action] { transition: none; }
@media (prefers-reduced-motion: reduce) { [data-quiet-action] { transition: none; } }

/* D2-E1: the neutral light, then the sign and impulse, then a separate reading. */
.horoscope .horo-staged { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: var(--s4,24px); width: 100%; }
.horo-staged-art.ritual__stage { margin-inline: auto; }
.horo-staged-art { display: grid; place-items: center; min-width: 0; }
.horo-staged-art > picture, .horo-staged-art > img { width: min(100%,420px); }
.horo-staged-copy { min-width: 0; }
.horo-light { --hold: 0; position: relative; display: grid; place-items: center; width: min(80vw,320px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--aqua); background: transparent; touch-action: none; cursor: pointer; box-shadow: 0 0 calc(12px + var(--hold)*32px) var(--aqua-soft); }
.horo-light img { width: 100%; }
.horo-neutral { width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,var(--pearl) 0 3%,var(--aqua-soft) 9%,var(--violet-soft) 35%,transparent 70%); }
.horo-light.is-revealed { animation: horo-fade 420ms var(--ease-tl) both; }
.horo-copy-reveal { animation: horo-fade 420ms var(--ease-tl) 420ms both; }
@keyframes horo-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) { .horoscope .horo-staged { grid-template-columns: minmax(0,1fr); text-align: center; } }
@media (prefers-reduced-motion: reduce) { .horo-light.is-revealed, .horo-copy-reveal { animation: horo-fade 120ms linear both; } }

html[data-motion="reduced"] .horo-light.is-revealed, html[data-motion="reduced"] .horo-copy-reveal { animation: horo-fade 120ms linear both !important; }

/* D2-E2 trail: vertical sign sequence at every width; desktop uses both columns. */
.oracle-trail-layout { width: 100%; display: grid; gap: var(--s4); align-items: start; }
.oracle-trail { display: grid; gap: var(--s2); width: 100%; }
.oracle-trail-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s3); }
.oracle-trail-card svg { width: 48px; height: 48px; color: var(--aqua); }
.oracle-trail-card small { color: var(--aqua); }
.oracle-trail-card h3, .oracle-trail-card p { margin: 0; overflow-wrap: anywhere; }
.oracle-trail-card.is-new { animation: oracle-trail-in 420ms var(--tl-ease) both; }
.oracle-trail-card.is-hidden { opacity: .5; }
.oracle-trail-light { width: 8px; height: 8px; justify-self: center; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 20px var(--aqua); }
.oracle-trail-layout .threshold { height: 200px; min-height: 200px; }
.oracle-sign--triad { max-width: none; }
.oracle-sign--triad .triad { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.oracle-sign--triad .triad-card { grid-template-columns: 112px minmax(0, 1fr); text-align: left; animation: none; }
.oracle-sign--triad .triad-card .sign-art { grid-column: 1; grid-row: 1 / span 6; width: 96px; height: 96px; }
.oracle-sign--triad .triad-card > :not(.sign-art) { grid-column: 2; }
/* PFX1: long sign text needs the full card width on phones. */
@media (max-width: 700px) {
  .oracle-sign--triad .triad-card { grid-template-columns: minmax(0, 1fr); }
  .oracle-sign--triad .triad-card .sign-art { grid-column: 1; grid-row: auto; }
  .oracle-sign--triad .triad-card > :not(.sign-art) { grid-column: 1; }
}
@keyframes oracle-trail-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .oracle-trail-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
html[data-motion="reduced"] .oracle-trail-card.is-new { animation: oracle-trail-fade 160ms ease both; }
@keyframes oracle-trail-fade { from { opacity: 0; } to { opacity: 1; } }

/* D2-E7: the chosen fan is exclusive to daily, spreads and Love. */
.ritual--fan .card-fan { position:relative; width:300px; height:300px; display:grid; place-items:center; }
.ritual--fan .fan-card { position:absolute; width:126px; height:189px; padding:0; border:1px solid var(--glass-hi); border-radius:10px; background:var(--ink); overflow:hidden; touch-action:none; cursor:pointer; transform:translate(calc(var(--fan-index) * 73px), calc(var(--fan-index) * var(--fan-index) * 14px)) rotate(calc(var(--fan-index) * 12deg)); transition:transform 420ms var(--tl-ease), opacity 180ms, filter 180ms; box-shadow:0 12px 28px var(--violet-soft); }
.ritual--fan [data-fan-choice="0"] { --fan-index:-1; }
.ritual--fan [data-fan-choice="1"] { --fan-index:0; }
.ritual--fan [data-fan-choice="2"] { --fan-index:1; }
.ritual--fan .fan-card img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ritual--fan .fan-card:focus-visible { outline:3px solid var(--aqua); outline-offset:3px; }
.ritual--fan .holding .fan-card[aria-pressed=true], .ritual--fan .complete .fan-card[aria-pressed=true] { transform:translate(calc(var(--fan-index) * 73px), -18px) rotate(calc(var(--fan-index) * 12deg)); filter:brightness(1.13); }
.ritual--fan .holding .fan-card[aria-pressed=false], .ritual--fan .complete .fan-card[aria-pressed=false] { opacity:.52; }
.ritual--fan .deck { inset:auto; margin:0; animation:none; }
.ritual--fan .ritual__intro { display:none; }
.ritual--fan .ritual__stage { overflow:visible; }
@media(prefers-reduced-motion:reduce) {
  .ritual--fan .fan-card { transition:opacity 140ms; }
  .ritual--fan .holding .fan-card[aria-pressed=true], .ritual--fan .complete .fan-card[aria-pressed=true] { transform:translate(calc(var(--fan-index) * 73px), calc(var(--fan-index) * var(--fan-index) * 14px)) rotate(calc(var(--fan-index) * 12deg)); }
}
:root[data-motion=reduced] .ritual--fan .fan-card { transition:opacity 140ms; }
:root[data-motion=reduced] .ritual--fan .holding .fan-card[aria-pressed=true], :root[data-motion=reduced] .ritual--fan .complete .fan-card[aria-pressed=true] { transform:translate(calc(var(--fan-index) * 73px), calc(var(--fan-index) * var(--fan-index) * 14px)) rotate(calc(var(--fan-index) * 12deg)); }

.ritual--fan.ritual--scene .ritual__scene { border:0; background:transparent; border-radius:0; }
.ritual--fan.ritual--scene .ritual__scene::before { background:none; }
.ritual--fan .ritual__bg, .ritual--fan .stage-film { mask-image:radial-gradient(ellipse,black 20%,transparent 72%); }
.ritual--fan .ritual__help-btn { display:inline-grid; width:48px; height:48px; min-width:48px; }
.ritual--fan .ritual__help[hidden] { display:none; }
.ritual--fan .fan-card img { transform:none; animation:none; }

/* RDF2B: the sky owns both gesture axes; page scrolling remains outside. */
.astrology .sky-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2); }
.astrology [data-sky-stage] { touch-action:none; cursor:grab; }
.astrology [data-sky-stage]:active { cursor:grabbing; }
.astrology [data-sky-stage]:focus-visible { outline:2px solid var(--aqua); outline-offset:4px; }
.astrology [data-sky-stage] svg { height:clamp(260px,70vw,440px); min-height:0; }
.astrology .sky-help summary { min-height:48px; padding:var(--s3) 0; cursor:pointer; }
.astrology .sky-panel { max-height:85dvh; overflow:auto; width:min(100% - 24px,680px); }
.astrology .sky-panel [hidden] { display:none; }
.astrology .sky-panel input[type=range] { width:100%; min-height:48px; accent-color:var(--aqua); }
.astrology .sky-panel label { display:block; margin-block:var(--s3); }
.astrology .sky-selected line.selected { stroke-dasharray:1000; animation:sky-selection-trace 900ms ease-out; }
@keyframes sky-selection-trace { from { stroke-dashoffset:1000; } to { stroke-dashoffset:0; } }
@media(prefers-reduced-motion:reduce) { .astrology .sky-selected line.selected { animation:none; } }

.astrology .wp-sky line.sky-hit { stroke:transparent; stroke-width:48px; vector-effect:non-scaling-stroke; pointer-events:stroke; animation:none; }

.astrology .wp-sky circle { pointer-events:none; }

/* UO1: one result order for every module (common.js resultLayout). Full width, centred column. */
.reading-result { display: grid; gap: var(--s4); width: 100%; min-width: 0; }
.reading-result > .rr-slot { min-width: 0; display: grid; gap: var(--s3); }
.reading-result > .rr-slot:not(.rr-head) { text-align: center; }
.rr-deeper { justify-items: center; }
.reading-result > .rr-slot:not(.rr-head) .lead { margin-inline: auto; }
.rr-deeper > .deeper-inline { justify-self: stretch; }
.rr-question .question-echo { text-align: center; }
/* Wide screens: the stage (card, number, sign) holds the left column; the slots keep their order on the right.
   Wide heads such as a spread board stay on top (reading-result--stack). */
@media (min-width: 900px) {
  .reading-result:not(.reading-result--stack):has(> .rr-head) { grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: var(--s6); align-items: start; }
  .reading-result:not(.reading-result--stack) > .rr-head { grid-column: 1; grid-row: 1 / span 7; justify-items: center; position: sticky; top: var(--s5); }
  .reading-result:not(.reading-result--stack):has(> .rr-head) > .rr-slot:not(.rr-head) { grid-column: 2; }
}
/* Shared inline "Read deeper" (deeper-sheet.js), app ReadingResultDeeper: expand 420 ms, fade 240 ms. */
.deeper-inline[hidden] { display: none !important; }
.deeper-inline { display: grid; gap: var(--s4); width: 100%; min-width: 0; text-align: start; }
.deeper-inline.is-motion { animation: deeper-expand 420ms var(--ease) both; transform-origin: top center; }
@keyframes deeper-expand { from { opacity: 0; transform: translateY(-8px) scaleY(0.96); } to { opacity: 1; transform: none; } }
@keyframes deeper-rise { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .deeper-inline.is-motion, .interp.is-motion > .reading-result { animation: none; }
}
html[data-motion="reduced"] .deeper-inline.is-motion,
html[data-motion="reduced"] .interp.is-motion > .reading-result { animation: none; }
/* Shared question form (common.js questionField): four topics, multi-line field, microphone. */
.question-form { display: grid; gap: var(--s3); width: 100%; min-width: 0; }
.question-topics { justify-content: center; }
.question-topics .chip { min-height: 48px; padding: 0 14px; font-size: 0.9rem; }
.question-topics .chip[aria-checked="true"] { background: var(--pearl); border-color: var(--pearl); color: var(--ink); }
/* QF1: one "Topic ideas" pill gives way to the four topics; the main button names the empty case or waits with a hint. */
.question-topics[hidden], .question-topics-open[hidden], .question-hint[hidden] { display: none; }
.question-topics-open { justify-self: center; min-height: 48px; padding: 0 14px; font-size: 0.9rem; display: inline-flex; align-items: center; gap: var(--s2); }
.question-topics-open::after { content: ""; width: 7px; height: 7px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.question-topics:not([hidden]) { animation: question-topics-in var(--t-move, 320ms) ease-out both; }
@keyframes question-topics-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .question-topics:not([hidden]) { animation: none; } }
html[data-motion="reduced"] .question-topics:not([hidden]) { animation: none; }
.bottom-cta .btn--primary[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.question-hint { margin: 0; color: var(--mist); }
.question-field { position: relative; }
.question-input.textarea { min-height: calc(2 * 1.5em + 2 * var(--s3)); line-height: 1.5; resize: vertical; width: 100%; box-sizing: border-box; }
.question-field .question-input { padding-inline-end: 56px; }
/* wd2.css loads later and sets .btn:not(.skip){position:relative} at (0,2,0). This selector is (0,3,1). */
.field.question-field > button.btn.wp-mic { position: absolute; z-index: 2; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; overflow: visible; border-radius: 50%; display: grid; place-items: center; }
.field.question-field > button.btn.wp-mic:active { transform: translateY(-50%) scale(0.97); }
/* WPAR1-FOLLOWUP F4: the app hides navigation as soon as the ritual is on screen, before the first gesture. data-chrome stays sub until the gesture. */
.app:has(.ritual__stage, .threshold, .cast-stage, .nu-ritual) > .tabbar { opacity: 0; transform: translateY(100%); visibility: hidden; pointer-events: none; }
.app:has(.ritual__stage, .threshold, .cast-stage, .nu-ritual) > .rail { opacity: 0; transform: translateX(-100%); visibility: hidden; pointer-events: none; }

/* HS3: the established sign, sun and moon artwork labels the direct destinations. */
.horo-triad-mark { display: grid; grid-template-columns: 1fr 1fr; width: 40px; height: 40px; }
.horo-triad-mark img { width: 22px; height: 22px; }
.horo-triad-mark img:first-child { grid-column: span 2; justify-self: center; }
.what-tile__mark > .glass-art { width: 40px; height: 40px; }

.oracle-trail-card.is-new { display: grid; grid-template-columns: minmax(0, 1fr); }
.oracle-reveal-stage { display: grid; justify-items: center; width: 100%; min-width: 0; }
.oracle-reveal-stage video, .oracle-reveal-stage img { width: min(100%, 400px); aspect-ratio: 1; object-fit: contain; border-radius: var(--r-lg); }

/* SH2: full-width shop with illustrated destinations. */
.mod-body.shop { width: 100%; max-width: none; }
.shop-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.shop-tile { display: block; overflow: hidden; text-decoration: none; color: inherit; margin-bottom: var(--s4); }
.shop-tile .btn { margin: var(--s3); }
.shop-art { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.shop-category-grid .shop-art { aspect-ratio: 16 / 9; }
.shop-sub-banner { overflow: hidden; }
@media (max-width: 600px) { .shop-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shop-category-grid--n1 { grid-template-columns: minmax(0, 1fr); }
.shop-category-grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.shop-sub-banner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; row-gap: var(--s2); margin-bottom: var(--s4); }
.shop-sub-banner .shop-art { grid-row: auto; width: 100%; height: auto; aspect-ratio: 2.8 / 1; }
.shop-sub-banner h2, .shop-sub-banner p { margin: 0; }
.shop-sub-offer .actions { margin-top: var(--s2); }
.shop-tile > .shop-art { max-height: 220px; }

/* ---------- WPAR1 oracle (app OracleQuestionScreen → OracleTrailScreen → OracleTriadResultScreen) ---------- */
.oracle-form { display: grid; gap: var(--s3); width: 100%; min-width: 0; }
.oracle-arrive h2, .oracle-consent h2, .oracle-consent p { margin: 0; }
.oracle-field-error { margin: 0; color: var(--err); font-size: 0.9rem; }
.oracle-consent { display: grid; gap: var(--s3); width: 100%; margin-top: var(--s3); border-color: var(--violet); }
.oracle-consent-open, .oracle-form > .btn { justify-self: stretch; }
.threshold-hint { position: absolute; top: var(--s2); left: var(--s4); right: var(--s4); margin: 0; text-align: center; color: var(--mist); pointer-events: none; }
.threshold.springs .light { transition: top 600ms var(--ease-tl), transform 300ms var(--ease-tl); }
.oracle-wait { display: grid; gap: var(--s3); justify-items: center; width: min(100%, 420px); }
.oracle-wait > .btn { justify-self: stretch; }
.oracle-question-line { margin: 0; overflow-wrap: anywhere; }
.oracle-wait[hidden], .threshold[hidden], .threshold-hint[hidden], .oracle .reading-result[hidden], .oracle [data-oracle-detail][hidden] { display: none !important; }
.oracle-sign.reading-result { justify-items: stretch; text-align: start; }
.oracle-sign.reading-result .card-title { text-align: center; margin: 0; }
.oracle-trail--result .oracle-trail-card { position: relative; }
.oracle-trail-hit { position: absolute; inset: 0; width: 100%; min-height: 48px; padding: 0; background: transparent; border: 0; border-radius: inherit; cursor: pointer; }
.oracle-trail-hit:focus-visible { outline: var(--s1) solid var(--aqua); outline-offset: 2px; }
.oracle-deeper-sign { display: grid; gap: var(--s2); }
.oracle-deeper-sign h3, .oracle-deeper-sign p, .oracle-situation { margin: 0; overflow-wrap: anywhere; }
.oracle-depth { display: grid; gap: var(--s2); min-width: 0; }
.oracle-depth h3, .oracle-depth p { margin: 0; overflow-wrap: anywhere; }
[data-oracle-detail] { display: grid; gap: var(--s3); width: 100%; }
[data-oracle-detail] > .btn { justify-self: start; }
.oracle-detail { animation: oracle-trail-in 420ms var(--tl-ease) both; }
.oracle-detail h2, .oracle-detail h3, .oracle-detail p { margin: 0; overflow-wrap: anywhere; }
.oracle-detail .sign-art { justify-self: center; width: 112px; height: 112px; }
.oracle-prompt { font-style: italic; }
html[data-motion="reduced"] .threshold.springs .light, html[data-motion="reduced"] .threshold .light { transition: none; }
html[data-motion="reduced"] .threshold.released .light { transform: none; }
html[data-motion="reduced"] .oracle-detail { animation: oracle-trail-fade 160ms ease both; }
@media (prefers-reduced-motion: reduce) {
  .threshold.springs .light, .threshold .light { transition: none; }
  .threshold.released .light { transform: none; }
  .oracle-detail { animation: oracle-trail-fade 160ms ease both; }
}

/* Empty journal anchors do not consume result-grid space. */
.rr-journal:not(:has(button, a, form, :not([hidden]):not(:empty))) { display: none; }

/* Complete design sets share a responsive gallery without intrinsic image overflow. */
.design-gallery, .design-gallery > section { min-width: 0; width: 100%; }
/* FP1: same rule as the app DesignGrid – cells of at least 9rem (144 px, grows with the font size), at most three. */
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(9rem, calc((100% - 2 * var(--s4)) / 3)), 1fr)); gap: var(--s4); }
.design-grid > article { min-width: 0; }
.design-grid > article > h3 { font-size: clamp(1rem, 0.6rem + 1.6vw, 1.2rem); hyphens: auto; }
.design-preview { display: block; max-width: 100%; aspect-ratio: 2; object-fit: contain; }

/* MI3: one bounded reveal after confirmed activation, identical still with reduced motion. */
.mirror-awakening { display:grid; place-items:center; min-width:0; }
.mirror-awakening img { display:block; width:min(100%,373.333px); height:auto; aspect-ratio:4/3; object-fit:contain; mask-image:linear-gradient(to right,transparent,var(--pearl) 12%,var(--pearl) 88%,transparent),linear-gradient(to bottom,transparent,var(--pearl) 8%,var(--pearl) 92%,transparent); mask-composite:intersect; animation:mirror-awaken 1800ms var(--ease-tl) both; }
.mirror-sigil { object-fit:contain; filter:none; }
@keyframes mirror-awaken { from { opacity:.35; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .mirror-awakening img { animation:none; } }
html[data-motion="reduced"] .mirror-awakening img { animation:none; }

/* WSK1: local camera preview, SK1 ink veil (0.68), map remains interactive. */
.astrology .wp-sky { position:relative; isolation:isolate; }
.astrology .sky-camera, .astrology .sky-camera-veil { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; }
.astrology .sky-camera { object-fit:cover; z-index:-2; transition:opacity 420ms ease-out; }
.astrology .sky-camera-veil { background:var(--ink); z-index:-1; }
.astrology .sky-camera-on { background:transparent; }
.astrology .sky-camera-on .sky-camera { opacity:1; }
.astrology .sky-camera-on .sky-camera-veil { opacity:0.68; }
.astrology .sky-camera-on line:not(.sky-hit) { opacity:1; }
.astrology [data-sky-camera][hidden] { display:none; }
.astrology [data-sky-camera][aria-pressed=true] { border-color:var(--aqua); background:var(--halo); }
@media(prefers-reduced-motion:reduce) { .astrology .sky-camera { transition:none; } }

/* RCF1: one labelled, non-interactive keyword group across result modules. */
.result-keywords { display: grid; gap: var(--s2); margin-block: var(--s4); text-align: center; }
.result-keywords .keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin: 0; }

/* RC1U: one deepening dialog. Fields are buttons. The light wave is the tap answer. */
.reflection-dialog { display: grid; gap: var(--s3); width: 100%; margin-block: var(--s4); }
.reflection-dialog .rd-fields { position: relative; display: grid; gap: var(--s2); justify-items: center; overflow: hidden; }
.reflection-dialog .keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.rd-field { min-height: 48px; border-radius: 24px; border: 1px solid var(--glass-edge); background: var(--glass); color: var(--pearl); padding: var(--s2) var(--s4); cursor: pointer; }
.reflection-dialog.is-wave .rd-fields::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--aqua-soft), transparent); pointer-events: none; }
.rd-dots { display: flex; gap: var(--s2); justify-content: center; }
.rd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--glass-hi); }
.rd-dot.is-on { background: var(--pearl); }
.rd-pearls { display: flex; gap: var(--s3); justify-content: center; }
.rd-pearl { width: 14px; height: 14px; border-radius: 50%; background: var(--pearl); animation: rd-breath 2.4s ease-in-out infinite; }
.rd-pearl:nth-child(2) { animation-delay: .18s; }
.rd-pearl:nth-child(3) { animation-delay: .36s; }
.rd-wait, .rd-guest { display: grid; gap: var(--s2); justify-items: center; text-align: center; }
.rd-choice { color: var(--aqua); }
.rd-follow { color: var(--mist); font-style: italic; }
.rd-glide, .rd-turn { animation: rd-in 420ms ease-out; }
@keyframes rd-breath { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes rd-in { from { opacity: 0; transform: translateX(12%); } to { opacity: 1; transform: none; } }
html[data-motion="reduced"] .reflection-dialog.is-wave .rd-fields::after { display: none; }
html[data-motion="reduced"] .rd-pearl { animation: none; opacity: .8; }
html[data-motion="reduced"] .rd-dot { width: 8px; height: 8px; }
html[data-motion="reduced"] .rd-glide, html[data-motion="reduced"] .rd-turn { animation: rd-in-reduced 120ms ease-out; }
@keyframes rd-in-reduced { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .reflection-dialog.is-wave .rd-fields::after { display: none; }
  .rd-pearl, .rd-glide, .rd-turn { animation: none; }
}

/* TP4: complete review windows share the existing full-width journal. */
.journal-review { margin-block: var(--s3); padding: var(--s4); color: var(--pearl); }
.review-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s3); }
.journal-review li { overflow-wrap: anywhere; }
.journal-review { animation: review-enter 280ms ease-out; }
@keyframes review-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .journal-review { animation: none; } }

[data-journal-review] > .btn, .journal-review .btn, .journal-review .chip { min-height: 48px; }