:root {
  color-scheme: dark;
  --eclipse: #090611;
  --indigo: #140d20;
  --violet: #241532;
  --moon: #fff6e5;
  --lavender: #d8cde4;
  --gold: #d8a85a;
  --sunrise: #edc07c;
  --muted: #bdb2c9;
  --line: rgba(216, 168, 90, .24);
  --violet-line: rgba(216, 205, 228, .16);
  --danger: #ffaaaa;
  --dock-height: 72px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--eclipse); }
body { margin: 0; }
button, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 2px solid var(--sunrise);
  outline-offset: 3px;
}

.tarot-app {
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--moon);
  background:
    radial-gradient(circle at 50% 16%, rgba(92, 55, 116, .16), transparent 31rem),
    linear-gradient(180deg, #100919 0%, var(--eclipse) 58%, #07040d 100%);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tarot-ask-mode { min-height: 100dvh; overflow-y: auto; }
.tarot-draw-mode { height: 100dvh; overflow: hidden; }
.tarot-ask-mode .oracle-sky { display: none; }
.oracle-sky { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.oracle-sky::before {
  content: "";
  position: absolute;
  right: -15vw;
  top: -28vw;
  width: min(78vw, 880px);
  aspect-ratio: 1;
  border: 1px solid rgba(201, 189, 227, .055);
  border-radius: 50%;
}
.oracle-sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--gold); opacity: .42; }
.oracle-sky i:nth-child(1) { left: 8%; top: 18%; }
.oracle-sky i:nth-child(2) { left: 17%; top: 70%; }
.oracle-sky i:nth-child(3) { right: 10%; top: 28%; }
.oracle-sky i:nth-child(4) { right: 21%; bottom: 13%; }
.oracle-sky i:nth-child(5) { left: 48%; top: 12%; }
.oracle-sky i:nth-child(6) { right: 44%; bottom: 9%; }

.oracle-header {
  position: relative;
  z-index: 50;
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  padding: 8px max(20px, calc((100% - 1180px) / 2));
  border-bottom: 1px solid var(--violet-line);
  background: rgba(11, 9, 32, .78);
  backdrop-filter: blur(18px);
}
.oracle-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--moon); text-decoration: none; }
.oracle-brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #2a1e33;
  border: 1px solid rgba(255, 248, 232, .65);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff9e9, var(--sunrise));
  box-shadow: 0 0 28px rgba(255, 201, 139, .16);
}
.oracle-brand > span:last-child, .oracle-brand b, .oracle-brand small { display: block; }
.oracle-brand b { font-size: 11px; letter-spacing: .15em; }
.oracle-brand small { margin-top: 2px; color: var(--muted); font-family: "Newsreader", Georgia, serif; font-size: 12px; }
.oracle-private { display: inline-flex; align-items: center; gap: 8px; color: var(--lavender); font-size: 11px; font-weight: 600; }
.oracle-private i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(225, 185, 111, .08); }

.oracle-main { position: relative; z-index: 2; height: calc(100dvh - 64px); }
.tarot-ask-mode .oracle-main { height: auto; min-height: calc(100svh - 64px); }
.tarot-draw-mode .oracle-main { height: calc(100dvh - 64px - var(--dock-height)); }
.ritual-kicker { margin: 0; color: #efc986; font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.form-error { min-height: 17px; margin: 8px 0 0; color: var(--danger); font-size: 12px; text-align: center; }
.card-back-art {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 248, 232, .88);
  border-radius: inherit;
  background: #fff8e8 url("../images/tarot/card-back-radiant.webp") center / cover no-repeat;
  box-shadow: inset 0 0 0 2px rgba(193, 133, 52, .18), 0 0 24px rgba(255, 201, 139, .1);
}

/* Midnight ritual landing: one question, one reward, no ambient motion. */
.ritual-hero {
  position: relative;
  display: grid;
  min-height: calc(100svh - 64px);
  place-items: center;
  overflow: hidden;
  padding: clamp(28px, 4vh, 48px) 20px;
  border-bottom: 1px solid rgba(216, 168, 90, .15);
}
.ritual-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -205px;
  width: min(860px, 92vw);
  height: 470px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(216, 168, 90, .12) 0%, rgba(76, 43, 91, .1) 42%, transparent 72%);
  transform: translateX(-50%);
  pointer-events: none;
}
.ritual-hero-inner { position: relative; z-index: 1; width: min(760px, 100%); text-align: center; }
.ritual-intro h1, .draw-copy h1 {
  margin: 10px 0 0;
  color: var(--moon);
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(48px, 5.2vw, 68px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .94;
}
.ritual-intro h1 em, .draw-copy h1 em { color: #f0c889; font-weight: 500; }
.ritual-intro > p:last-child {
  max-width: 610px;
  margin: 15px auto 0;
  color: var(--lavender);
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.55;
}
.oracle-composer {
  width: 100%;
  margin-top: 22px;
  padding: 18px 20px 16px;
  border: 1px solid rgba(216, 168, 90, .32);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(34, 21, 45, .96), rgba(16, 10, 27, .98));
  box-shadow: 0 24px 68px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 246, 229, .035);
  text-align: left;
}
.oracle-composer > label { display: block; margin: 0 2px 10px; color: #f6edfb; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.oracle-question-field { overflow: hidden; border: 1px solid rgba(216, 205, 228, .28); border-radius: 13px; background: rgba(5, 3, 12, .56); transition: border-color .2s, box-shadow .2s; }
.oracle-question-field:focus-within { border-color: rgba(216, 168, 90, .72); box-shadow: 0 0 0 4px rgba(216, 168, 90, .08); }
.oracle-composer textarea { display: block; width: 100%; min-height: 78px; max-height: 135px; resize: none; padding: 14px 15px; color: var(--moon); border: 0; outline: 0; background: transparent; font-size: 17px; line-height: 1.5; }
.oracle-composer textarea::placeholder { color: #bdb2c9; opacity: 1; }
.composer-actions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding-top: 10px; }
.composer-actions > span { color: #c9bed3; font-size: 12px; }
.composer-actions .enter-hint { text-align: right; }
.composer-actions button, .inline-unlock, .checkout-continue {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  color: #25172e;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(125deg, #fff3d8, var(--sunrise) 58%, #d7a253);
  box-shadow: 0 11px 28px rgba(216, 168, 90, .16);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}
.composer-actions button b { font-size: 15px; }
.composer-actions button:disabled { cursor: wait; opacity: .62; }
.composer-trust { display: flex; justify-content: center; gap: 7px; margin: 12px 0 0; color: #eee6f3; font-size: 13px; }
.composer-trust b { font-weight: 600; }
.composer-trust span { color: var(--gold); }
.free-reading-note { margin: 7px 0 0; color: #d3c8da; font-size: 12px; line-height: 1.45; text-align: center; }

.ritual-spread { position: relative; width: min(490px, 100%); height: 226px; margin: 14px auto 0; }
.ritual-spread::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 27px;
  width: min(470px, 92vw);
  height: 74px;
  border: 1px solid rgba(216, 168, 90, .14);
  border-top-color: rgba(216, 168, 90, .34);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(216, 168, 90, .09), transparent 67%);
  transform: translateX(-50%);
}
.ritual-card { position: absolute; left: 50%; top: 0; width: 108px; aspect-ratio: 3 / 5; border-radius: 11px; filter: drop-shadow(0 20px 25px rgba(0, 0, 0, .38)); transform: translateX(calc(-50% + var(--x))) rotate(var(--r)); }
.ritual-card span { position: absolute; left: 50%; top: calc(100% + 9px); color: var(--moon); font-family: "Newsreader", Georgia, serif; font-size: 18px; transform: translateX(-50%); }
.ritual-card small { position: absolute; left: 50%; top: calc(100% + 33px); width: 150px; color: #f0c889; font-size: 11px; font-weight: 700; transform: translateX(-50%); }
.ritual-card-past { --x: -116px; --r: -5deg; z-index: 2; }
.ritual-card-present { --x: 0px; --r: 0deg; z-index: 3; }
.ritual-card-future { --x: 116px; --r: 5deg; z-index: 2; }
.ritual-card-past .card-back-art { box-shadow: inset 0 0 0 2px rgba(193, 133, 52, .18), 0 0 38px rgba(237, 192, 124, .3); }

.question-library-section { width: min(1040px, calc(100% - 40px)); margin: 0 auto; padding: clamp(72px, 9vw, 110px) 0 120px; }
.question-library-heading { max-width: 700px; }
.question-library-heading h2 { margin: 9px 0 0; color: var(--moon); font-family: "Newsreader", Georgia, serif; font-size: clamp(38px, 5vw, 54px); font-weight: 400; letter-spacing: -.035em; line-height: 1; }
.question-library-heading > p:last-child { margin: 13px 0 0; color: var(--lavender); font-size: 16px; }
.question-columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 6vw, 76px); margin-top: 44px; }
.question-column h3 { margin: 0 0 9px; padding-bottom: 13px; color: #f0c889; border-bottom: 1px solid rgba(216, 168, 90, .35); font-family: "Newsreader", Georgia, serif; font-size: 28px; font-weight: 500; }
.question-column > div { display: grid; }
.question-column button { position: relative; min-height: 49px; padding: 12px 34px 12px 0; color: #ddd3e3; border: 0; border-bottom: 1px solid rgba(216, 205, 228, .12); background: transparent; cursor: pointer; font-size: 15px; line-height: 1.45; text-align: left; transition: color .2s, border-color .2s, padding-left .2s; }
.question-column button::after { content: "↗"; position: absolute; right: 2px; top: 50%; color: rgba(216, 168, 90, .72); transform: translateY(-50%); }
.question-column button:hover, .question-column button:focus-visible { padding-left: 5px; color: var(--moon); border-color: rgba(216, 168, 90, .38); }

/* Three-of-nine card choice */
.draw-room { display: grid; grid-template-columns: minmax(300px, .7fr) minmax(510px, 1.3fr); gap: clamp(24px, 4vw, 62px); width: min(1160px, calc(100% - 40px)); height: 100%; margin: 0 auto; align-items: center; }
.draw-copy h1 { font-size: clamp(45px, 5vw, 66px); }
.draw-copy blockquote { max-width: 410px; margin: 19px 0 0; padding: 12px 0 12px 17px; color: var(--lavender); border-left: 1px solid var(--gold); font-family: "Newsreader", Georgia, serif; font-size: 17px; font-style: italic; line-height: 1.42; }
.selection-progress { display: grid; gap: 4px; margin-top: 18px; }
.selection-progress b { color: var(--sunrise); font-size: 10px; }
.selection-progress span { color: var(--muted); font-size: 9px; }
.fan-theatre { position: relative; display: grid; min-height: min(68vh, 590px); place-items: center; }
.fan-aura { position: absolute; left: 50%; top: 50%; width: min(47vw, 530px); aspect-ratio: 1; border: 1px solid rgba(201, 189, 227, .09); border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 139, .12), rgba(86, 57, 128, .09) 45%, transparent 70%); transform: translate(-50%, -50%); }
.tarot-card-fan { position: relative; z-index: 2; display: grid; width: min(46vw, 510px); grid-template-columns: repeat(3, 1fr); gap: 14px 18px; padding: 18px 48px 42px; }
.fan-choice { --tilt: 0deg; position: relative; width: 100%; aspect-ratio: 3 / 5; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; filter: drop-shadow(0 15px 20px rgba(0, 0, 0, .32)); transform: rotate(var(--tilt)); transition: filter .25s, transform .28s cubic-bezier(.16, 1, .3, 1), opacity .25s; }
.fan-choice:nth-child(3n + 1) { --tilt: -2.3deg; }
.fan-choice:nth-child(3n + 2) { --tilt: 1deg; }
.fan-choice:nth-child(3n) { --tilt: 2.5deg; }
.fan-choice:hover, .fan-choice:focus-visible { z-index: 3; filter: drop-shadow(0 19px 24px rgba(0, 0, 0, .38)) drop-shadow(0 0 15px rgba(255, 201, 139, .2)); transform: translateY(-7px) rotate(0) scale(1.025); }
.fan-choice.is-picked { z-index: 4; filter: drop-shadow(0 21px 28px rgba(0, 0, 0, .42)) drop-shadow(0 0 20px rgba(255, 201, 139, .28)); }
.fan-choice > span { position: absolute; z-index: 3; left: 50%; bottom: 9px; padding: 5px 8px; color: #32223d; border-radius: 999px; background: rgba(255, 248, 232, .9); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); }
.fan-choice > span:empty { display: none; }
.fan-theatre.is-complete .fan-choice:not(.is-picked) { opacity: .28; pointer-events: none; }
.shuffle-status { position: absolute; z-index: 4; left: 50%; bottom: 1%; width: 100%; margin: 0; color: var(--lavender); font-family: "Newsreader", Georgia, serif; font-size: 15px; text-align: center; transform: translateX(-50%); }

/* Waiting/reveal */
.reveal-room { display: grid; height: 100%; place-content: center; justify-items: center; padding: 20px; text-align: center; }
.reveal-orbit { position: relative; width: min(340px, 82vw); height: min(300px, 38vh); perspective: 1000px; }
.reveal-orbit > span { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; border: 1px solid rgba(201, 189, 227, .14); border-radius: 50%; transform: translate(-50%, -50%); animation: portal-turn 14s linear infinite; }
.reveal-orbit > span:nth-child(2) { width: 202px; height: 202px; border-style: dashed; border-color: rgba(225, 185, 111, .17); animation-direction: reverse; animation-duration: 10s; }
.loading-card { position: absolute; left: 50%; top: 50%; width: 96px; aspect-ratio: 3 / 5; border-radius: 9px; filter: drop-shadow(0 20px 25px rgba(0, 0, 0, .42)); transform: translate(-50%, -50%); }
.loading-card img, .loading-card i { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.loading-card-centre { z-index: 2; }
.loading-card-centre > * { position: absolute; inset: 0; }
.loading-card-left { transform: translate(-125%, -45%) rotate(-11deg); }
.loading-card-right { transform: translate(25%, -45%) rotate(11deg); }
.reveal-orbit > b { position: absolute; z-index: 4; left: 50%; top: 50%; display: grid; width: 38px; height: 38px; place-items: center; color: #2b2036; border-radius: 50%; background: var(--sunrise); box-shadow: 0 0 0 9px rgba(255, 201, 139, .08); transform: translate(-50%, -50%); }
.reveal-room h1, .reveal-room h2 { max-width: 680px; margin: 8px 0 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(34px, 4.5vw, 52px); font-weight: 500; line-height: 1; }
.reveal-room .loading-copy, .reveal-room > p:last-child { margin: 12px 0 0; color: var(--lavender); font-size: 11px; }
.reveal-room small { margin-top: 9px; color: var(--muted); font-size: 8px; }
.selected-card-name { color: #ffddb0 !important; }

/* Bottom app navigation and sheets */
.oracle-dock { position: fixed; z-index: 300; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); width: min(360px, calc(100% - 28px)); min-height: 60px; padding: 5px; border: 1px solid var(--line); border-radius: 18px; background: rgba(23, 18, 47, .92); box-shadow: 0 18px 50px rgba(0, 0, 0, .42); backdrop-filter: blur(20px); transform: translateX(-50%); }
.oracle-dock a, .oracle-dock button { display: grid; min-width: 0; place-content: center; justify-items: center; gap: 3px; padding: 6px 12px; color: var(--muted); border: 0; border-radius: 13px; background: transparent; cursor: pointer; text-decoration: none; }
.oracle-dock a span, .oracle-dock button span { font-family: Georgia, serif; font-size: 15px; }
.oracle-dock a b, .oracle-dock button b { font-size: 8px; font-weight: 600; }
.oracle-dock .is-active { color: #ffddb0; background: rgba(225, 185, 111, .1); }
.oracle-dock button:disabled { cursor: default; opacity: .4; }
body.has-open-sheet { overflow: hidden; }
.history-sheet, .pricing-sheet, .checkout-details-sheet { position: fixed; z-index: 900; inset: 0; display: grid; align-items: end; }
.sheet-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(5, 4, 17, .75); backdrop-filter: blur(8px); }
.history-card, .pricing-card { position: relative; z-index: 1; width: min(720px, 100%); max-height: min(82dvh, 760px); margin: 0 auto; overflow-y: auto; padding: 13px 24px max(28px, env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; background: radial-gradient(circle at 50% 0, rgba(105, 72, 150, .2), transparent 22rem), #15102e; box-shadow: 0 -25px 80px rgba(0, 0, 0, .5); animation: sheet-rise .32s cubic-bezier(.16, 1, .3, 1) both; }
.sheet-handle { width: 42px; height: 4px; margin: 0 auto 17px; border-radius: 999px; background: rgba(201, 189, 227, .24); }
.history-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.history-heading h2, .pricing-card h2 { margin: 5px 0 0; font-family: "Newsreader", Georgia, serif; font-size: 34px; font-weight: 500; }
.history-heading > button, .sheet-close, .checkout-details-close { display: grid; width: 34px; height: 34px; place-items: center; color: var(--lavender); border: 1px solid var(--violet-line); border-radius: 50%; background: rgba(201, 189, 227, .05); cursor: pointer; font-size: 20px; }
.history-list { display: grid; gap: 8px; margin-top: 18px; }
.history-list a { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 12px; color: var(--moon); border: 1px solid var(--violet-line); border-radius: 12px; background: rgba(201, 189, 227, .035); text-decoration: none; }
.history-list a > span:first-child { color: var(--gold); }
.history-list a strong, .history-list a small { display: block; }
.history-list a strong { overflow: hidden; font-family: "Newsreader", Georgia, serif; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.history-list a small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.history-list a b { color: #ffddb0; font-size: 9px; }
.history-empty { padding: 24px 12px; color: var(--muted); border: 1px dashed var(--violet-line); border-radius: 12px; font-size: 10px; text-align: center; }

/* One-page, scannable reading */
.tarot-report-app { min-height: 100dvh; overflow-y: auto; }
.reading-workspace { position: relative; z-index: 2; width: min(960px, calc(100% - 40px)); margin: 0 auto; padding: 26px 0 122px; }
.reading-question-bar { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 0 4px 20px; border-bottom: 1px solid var(--violet-line); }
.reading-question-bar h1 { max-width: 760px; margin: 6px 0 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(22px, 3vw, 32px); font-style: italic; font-weight: 500; line-height: 1.16; }
.reading-status { flex: 0 0 auto; padding: 8px 12px; color: var(--gold); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; }
.reading-status.is-open { color: #c9f1d4; border-color: rgba(130, 209, 151, .24); }
.key-message-panel { margin-top: 22px; padding: clamp(22px, 4vw, 36px); border: 1px solid rgba(255, 201, 139, .3); border-radius: 20px; background: linear-gradient(145deg, rgba(67, 42, 71, .55), rgba(24, 17, 46, .92)); }
.key-message-panel h2 { max-width: 780px; margin: 9px 0 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(27px, 4.2vw, 43px); font-weight: 500; line-height: 1.08; }
.one-page-reading { margin-top: 32px; }
.section-heading h2 { margin: 6px 0 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(30px, 4vw, 40px); font-weight: 500; }
.reading-card-list { display: grid; gap: 20px; margin-top: 18px; }
.reading-chapter { display: grid; min-height: 310px; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(30px, 5vw, 56px); align-items: center; padding: 28px 30px; border: 1px solid var(--violet-line); border-radius: 20px; background: linear-gradient(145deg, rgba(35, 27, 61, .9), rgba(15, 12, 34, .94)); }
.reading-chapter.is-locked { min-height: 365px; border-color: rgba(216, 168, 90, .22); background: linear-gradient(145deg, rgba(38, 25, 54, .82), rgba(14, 9, 27, .94)); }
.reading-chapter.position-future.is-locked { background: linear-gradient(145deg, rgba(27, 22, 55, .86), rgba(12, 9, 26, .95)); }
.chapter-card { text-align: center; }
.position-mark { margin: 0 0 10px; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.reading-card-frame { position: relative; width: 148px; aspect-ratio: 3 / 5; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255, 221, 176, .52); border-radius: 11px; background: #fff5dc; box-shadow: 0 20px 36px rgba(0, 0, 0, .38), 0 0 30px rgba(255, 201, 139, .12); }
.reading-card-frame img, .reading-card-frame i { display: block; width: 100%; height: 100%; object-fit: cover; }
.reading-card-frame:not(.locked-card) img { filter: brightness(1.2) saturate(.86) contrast(.94); }
.reading-chapter:nth-child(odd) .reading-card-frame { transform: rotate(-1.25deg); }
.reading-chapter:nth-child(even) .reading-card-frame { transform: rotate(1deg); }
.reading-card-frame.locked-card { opacity: .86; }
.reading-card-frame.locked-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(11, 9, 32, .45)); }
.reading-card-frame.locked-card span { position: absolute; z-index: 2; left: 50%; bottom: 12px; padding: 6px 10px; color: #32223d; border-radius: 999px; background: rgba(255, 248, 232, .94); font-size: 10px; font-weight: 700; transform: translateX(-50%); }
.chapter-card h3 { margin: 12px 0 0; font-family: "Newsreader", Georgia, serif; font-size: 21px; font-weight: 500; }
.chapter-copy h2 { margin: 8px 0 13px; font-family: "Newsreader", Georgia, serif; font-size: clamp(31px, 4vw, 43px); font-weight: 500; line-height: 1; }
.chapter-analysis, .locked-reading-intro { max-width: 650px; margin: 0; color: #ded4e5; font-family: "Newsreader", Georgia, serif; font-size: 18px; line-height: 1.65; }
.complete-analysis-mark { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; color: #f0c889; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.complete-analysis-mark span { display: grid; width: 22px; height: 22px; place-items: center; color: #291a31; border-radius: 50%; background: #f0c889; }
.locked-analysis-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.locked-analysis-preview > div { display: grid; min-height: 112px; grid-template-columns: 19px minmax(0, 1fr); gap: 9px; align-content: start; padding: 15px 12px; border: 1px solid rgba(216, 205, 228, .14); border-radius: 12px; background: rgba(255, 246, 229, .035); }
.locked-analysis-preview > div > span { color: var(--gold); font-size: 10px; }
.locked-analysis-preview p { margin: 0; }
.locked-analysis-preview b, .locked-analysis-preview small { display: block; }
.locked-analysis-preview b { color: #f4ebf7; font-size: 12px; line-height: 1.35; }
.locked-analysis-preview small { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.locked-reading-note { margin: 14px 0 0; color: #f0c889; font-size: 12px; font-weight: 700; }
.reading-guidance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.reading-guidance-grid article { padding: clamp(22px, 3vw, 30px); border: 1px solid var(--violet-line); border-radius: 18px; background: rgba(29, 22, 52, .78); }
.reading-guidance-grid h2 { margin: 7px 0 11px; font-family: "Newsreader", Georgia, serif; font-size: 28px; font-weight: 500; line-height: 1.05; }
.reading-guidance-grid article > p:last-child { color: #d2c7df; font-family: "Newsreader", Georgia, serif; font-size: 16px; line-height: 1.52; }
.reading-guidance-grid ol { display: grid; gap: 10px; margin: 15px 0 0; padding: 0; list-style: none; }
.reading-guidance-grid li { display: flex; gap: 10px; color: #d2c7df; font-size: 10px; line-height: 1.5; }
.reading-guidance-grid li span { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; color: var(--gold); border: 1px solid var(--line); border-radius: 50%; font-size: 8px; }
.locked-guidance { display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: center; margin-top: 14px; padding: 22px; border: 1px dashed rgba(225, 185, 111, .28); border-radius: 18px; background: rgba(225, 185, 111, .04); }
.locked-guidance > span { display: grid; width: 52px; height: 52px; place-items: center; color: #2b2036; border-radius: 50%; background: linear-gradient(145deg, #fff8e8, var(--sunrise)); }
.locked-guidance h2 { margin: 6px 0 0; font-family: "Newsreader", Georgia, serif; font-size: 25px; font-weight: 500; }
.locked-guidance div > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.reading-unlock-bar { position: fixed; z-index: 310; left: 50%; bottom: calc(var(--dock-height) + max(18px, env(safe-area-inset-bottom))); display: flex; width: min(680px, calc(100% - 28px)); min-height: 57px; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 11px 9px 17px; color: var(--moon); border: 1px solid rgba(255, 201, 139, .34); border-radius: 15px; background: rgba(28, 20, 51, .95); box-shadow: 0 16px 44px rgba(0, 0, 0, .45); backdrop-filter: blur(18px); cursor: pointer; text-align: left; transform: translateX(-50%); }
.reading-unlock-bar span small, .reading-unlock-bar span strong { display: block; }
.reading-unlock-bar span small { color: var(--gold); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.reading-unlock-bar span strong { margin-top: 2px; font-family: "Newsreader", Georgia, serif; font-size: 15px; font-weight: 500; }
.reading-unlock-bar > b { flex: 0 0 auto; padding: 10px 12px; color: #2b2036; border-radius: 9px; background: linear-gradient(135deg, #fff8e8, var(--sunrise)); font-size: 8px; white-space: nowrap; }
.has-locked-reading .reading-workspace { padding-bottom: 170px; }

/* Pricing and checkout */
.pricing-sheet { z-index: 800; align-items: center; padding: 24px; }
.pricing-card { width: min(880px, 100%); max-height: min(92dvh, 850px); padding: 25px 30px 28px; border-bottom: 1px solid var(--line); border-radius: 24px; }
.pricing-card > .sheet-handle { display: none; }
.pricing-card > .sheet-close { position: absolute; right: 20px; top: 20px; }
.pricing-card > .ritual-kicker { padding-right: 48px; font-size: 10px; }
.pricing-card h2 { max-width: 700px; padding-right: 48px; font-size: clamp(32px, 4vw, 40px); line-height: 1.05; }
.pricing-explainer { max-width: 720px; margin: 10px 0 0; color: #ded4e5; font-size: 14px; line-height: 1.55; }
.pricing-included { margin-top: 19px; padding: 15px 17px 16px; border: 1px solid rgba(216, 205, 228, .17); border-radius: 14px; background: rgba(255, 246, 229, .035); }
.pricing-included > p { margin: 0; color: #f4e8d8; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pricing-included ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 12px 0 0; padding: 0; list-style: none; }
.pricing-included li { display: flex; gap: 9px; align-items: center; color: #e8deec; font-size: 13px; line-height: 1.35; }
.pricing-included li span { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; color: #261a31; border-radius: 50%; background: #efc784; font-size: 11px; font-weight: 900; }
.checkout-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.checkout-plan { position: relative; display: flex; min-height: 235px; flex-direction: column; padding: 19px; color: var(--moon); border: 1px solid rgba(216, 205, 228, .2); border-radius: 16px; background: rgba(201, 189, 227, .035); cursor: pointer; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.checkout-plan.recommended { border-color: rgba(255, 201, 139, .68); background: linear-gradient(155deg, rgba(255, 201, 139, .12), rgba(201, 189, 227, .04)); box-shadow: 0 12px 34px rgba(0, 0, 0, .18); }
.checkout-plan .plan-badge { position: absolute; right: 13px; top: 13px; padding: 5px 7px; color: #2b2036; border-radius: 999px; background: #efc784; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.checkout-plan .plan-name { display: block; min-height: 21px; padding-right: 78px; color: #f4ecf6; font-size: 14px; font-weight: 700; }
.checkout-plan .plan-price { display: flex; gap: 7px; align-items: baseline; margin-top: 8px; }
.checkout-plan .plan-price strong { color: #ffddb0; font-family: "Newsreader", Georgia, serif; font-size: 41px; font-weight: 500; line-height: 1; }
.checkout-plan .plan-price small { color: var(--muted); font-size: 11px; }
.checkout-plan .plan-allowance { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--violet-line); }
.checkout-plan .plan-allowance b, .checkout-plan .plan-allowance small { display: block; }
.checkout-plan .plan-allowance b { color: #f3ebf5; font-size: 13px; line-height: 1.35; }
.checkout-plan .plan-allowance small { margin-top: 5px; color: #c8bdd3; font-size: 12px; line-height: 1.35; }
.checkout-plan .plan-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; color: #f3ca89; font-size: 12px; font-weight: 800; }
.checkout-plan .plan-action b { font-size: 17px; }
.checkout-plan:hover { border-color: rgba(255, 201, 139, .72); background-color: rgba(255, 201, 139, .075); transform: translateY(-2px); }
.checkout-plan:disabled { cursor: wait; opacity: .65; }
.plan-count-note { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 14px 0 0; color: #d8cde4; font-size: 12px; line-height: 1.4; text-align: center; }
.plan-count-note span { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; color: var(--gold); border: 1px solid var(--line); border-radius: 50%; font-size: 10px; font-weight: 800; }
.purchase-note { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }
.checkout-details-sheet { z-index: 1000; place-items: center; padding: 18px; }
.checkout-details-card { position: relative; z-index: 2; width: min(470px, 100%); padding: 31px; border: 1px solid var(--line); border-radius: 21px; background: radial-gradient(circle at 50% 0, rgba(101, 69, 144, .22), transparent 20rem), #15102e; box-shadow: 0 28px 90px rgba(0, 0, 0, .6); }
.checkout-details-close { position: absolute; right: 13px; top: 13px; }
.checkout-details-card h3 { max-width: 350px; margin: 7px 0 0; font-family: "Newsreader", Georgia, serif; font-size: 31px; font-weight: 500; line-height: 1; }
.checkout-details-card > p:not(.ritual-kicker):not(.payment-error) { color: var(--lavender); font-size: 13px; }
.checkout-selected-plan { display: flex; justify-content: space-between; gap: 12px; margin-top: 19px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(225, 185, 111, .05); }
.checkout-selected-plan span { color: var(--muted); font-size: 11px; }
.checkout-selected-plan strong { color: #ffddb0; font-size: 12px; }
.checkout-fields { margin-top: 15px; }
.checkout-fields label { color: var(--lavender); font-size: 12px; }
.checkout-fields input { display: block; width: 100%; margin-top: 7px; padding: 13px; color: var(--moon); border: 1px solid var(--violet-line); border-radius: 10px; background: rgba(6, 5, 20, .6); }
.checkout-continue { width: 100%; margin-top: 12px; }
.payment-error { min-height: 17px; color: var(--danger); font-size: 12px; text-align: center; }
.payment-button-loading { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; }
.payment-button-loading i { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

/* Dedicated reading history room */
.tarot-access-app { min-height: 100dvh; overflow-y: auto; }
.tarot-access-app .oracle-main { height: auto; min-height: calc(100dvh - 64px - var(--dock-height)); }
.access-main { width: min(940px, calc(100% - 36px)); margin: 0 auto; padding: 28px 0 105px; }
.access-overview { padding: clamp(22px, 4vw, 38px); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(35, 27, 61, .88), rgba(15, 12, 34, .92)); }
.access-pass-header { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.access-pass-header h1 { margin: 6px 0 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(30px, 5vw, 48px); font-weight: 500; line-height: 1; }
.access-pass-header h1 em { color: #ffddb0; font-style: normal; }
.question-ring { display: grid; width: 70px; height: 70px; flex: 0 0 auto; place-content: center; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 139, .11), transparent 66%); text-align: center; }
.question-ring b { color: #ffddb0; font-family: "Newsreader", Georgia, serif; font-size: 25px; font-weight: 500; }
.question-ring small, .legacy-access-time { color: var(--muted); font-size: 7px; }
.access-composer { margin-top: 25px; box-shadow: none; }
.pass-finished { margin-top: 24px; padding: 20px; border: 1px dashed var(--violet-line); border-radius: 14px; text-align: center; }
.pass-finished > span { color: var(--gold); }
.pass-finished h2 { margin: 6px 0 0; font-family: "Newsreader", Georgia, serif; font-size: 25px; font-weight: 500; }
.pass-finished p { color: var(--muted); font-size: 9px; }
.access-history-section { padding: 29px 5px 0; }
.history-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.history-section-heading h2 { margin: 5px 0 0; font-family: "Newsreader", Georgia, serif; font-size: 31px; font-weight: 500; }
.history-section-heading > span { color: var(--muted); font-size: 8px; }
.server-history-list { display: grid; gap: 8px; margin-top: 14px; }
.server-history-list > a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 13px 15px; color: var(--moon); border: 1px solid var(--violet-line); border-radius: 13px; background: rgba(201, 189, 227, .035); text-decoration: none; }
.history-moon { color: var(--gold); font-family: Georgia, serif; font-size: 17px; }
.server-history-list a small, .server-history-list a strong { display: block; }
.server-history-list a small { color: var(--muted); font-size: 7px; }
.server-history-list a strong { margin-top: 4px; overflow: hidden; font-family: "Newsreader", Georgia, serif; font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.server-history-list a > b { color: #ffddb0; font-size: 8px; }

@keyframes portal-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes sheet-rise { from { opacity: 0; transform: translateY(35px); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  :root { --dock-height: 76px; }
  .oracle-header { min-height: 58px; padding: 7px 14px; }
  .oracle-brand-mark { width: 34px; height: 34px; }
  .oracle-brand small { display: none; }
  .oracle-private { font-size: 12px; }
  .oracle-main { height: calc(100dvh - 58px); }
  .tarot-ask-mode .oracle-main { height: auto; min-height: calc(100svh - 58px); }
  .tarot-draw-mode .oracle-main { height: calc(100dvh - 58px - var(--dock-height)); }
  .ritual-hero { min-height: calc(100svh - 58px); padding-inline: 16px; }
  .ritual-intro h1 { font-size: clamp(44px, 8vw, 58px); }
  .ritual-intro > p:last-child { max-width: 560px; }
  .question-library-section { width: min(760px, calc(100% - 32px)); }
  .draw-room { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; width: calc(100% - 22px); align-content: start; text-align: center; }
  .draw-copy { padding-top: 12px; }
  .draw-copy h1 { font-size: clamp(34px, 9vw, 44px); }
  .draw-copy blockquote { max-width: 390px; margin: 10px auto 0; padding: 0; overflow: hidden; border: 0; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .selection-progress { margin-top: 9px; }
  .fan-theatre { min-height: 0; }
  .fan-aura { width: min(85vw, 430px); }
  .tarot-card-fan { width: min(90vw, 450px); gap: 9px 12px; padding: 12px 42px 36px; }
  .shuffle-status { bottom: 0; font-size: 13px; }
  .reading-workspace { width: calc(100% - 24px); padding-top: 17px; }
  .reading-question-bar h1 { font-size: 21px; }
  .reading-chapter { min-height: 300px; grid-template-columns: 160px minmax(0, 1fr); gap: 26px; padding: 24px; }
  .reading-chapter.is-locked { min-height: 360px; }
  .reading-card-frame { width: 128px; }
  .chapter-copy h2 { font-size: 30px; }
  .chapter-analysis, .locked-reading-intro { font-size: 17px; }
  .locked-analysis-preview { grid-template-columns: 1fr 1fr; }
  .locked-analysis-preview > div:last-child { grid-column: 1 / -1; min-height: 84px; }
  .pricing-sheet { align-items: end; padding: 0; }
  .pricing-card { width: 100%; max-height: 92dvh; border-bottom: 0; border-radius: 24px 24px 0 0; }
  .pricing-card > .sheet-handle { display: block; }
  .checkout-plans { grid-template-columns: 1fr; }
  .checkout-plan { min-height: 170px; }
  .checkout-details-sheet { align-items: end; padding: 0; }
  .checkout-details-card { width: 100%; padding: 29px 20px max(24px, env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 23px 23px 0 0; }
  .tarot-access-app .oracle-main { min-height: calc(100dvh - 58px - var(--dock-height)); }
  .access-main { width: calc(100% - 20px); padding-top: 14px; }
  .access-overview { padding: 18px 14px; }
}

@media (max-width: 560px) {
  .oracle-private { font-size: 0; }
  .oracle-private::after { content: "Private reading"; font-size: 12px; }
  .ritual-hero { min-height: calc(100svh - 58px); padding: 28px 16px 20px; }
  .ritual-intro h1 { font-size: clamp(37px, 11vw, 46px); line-height: .96; }
  .ritual-intro > p:last-child { margin-top: 12px; font-size: 15px; line-height: 1.5; }
  .oracle-composer { margin-top: 18px; padding: 15px 14px 14px; }
  .oracle-composer > label { font-size: 12px; }
  .oracle-composer textarea { min-height: 72px; padding: 12px; font-size: 16px; }
  .composer-actions { grid-template-columns: auto 1fr; }
  .composer-actions .enter-hint { text-align: right; }
  .composer-actions button { grid-column: 1 / -1; width: 100%; }
  .composer-actions > span { font-size: 11px; }
  .composer-trust { font-size: 12px; }
  .free-reading-note { font-size: 12px; }
  .ritual-spread { height: 184px; margin-top: 11px; }
  .ritual-spread::before { bottom: 21px; height: 58px; }
  .ritual-card { width: 82px; }
  .ritual-card-past { --x: -82px; }
  .ritual-card-future { --x: 82px; }
  .ritual-card span { top: calc(100% + 6px); font-size: 16px; }
  .ritual-card small { top: calc(100% + 27px); font-size: 10px; }
  .question-library-section { width: calc(100% - 32px); padding: 62px 0 86px; }
  .question-library-heading h2 { font-size: clamp(35px, 10vw, 43px); }
  .question-library-heading > p:last-child { font-size: 15px; }
  .question-columns { grid-template-columns: 1fr; gap: 44px; margin-top: 34px; }
  .question-column h3 { font-size: 25px; }
  .question-column button { min-height: 51px; font-size: 15px; }
  .draw-copy h1 { font-size: 34px; }
  .tarot-card-fan { width: min(94vw, 390px); gap: 8px 10px; padding: 8px 32px 34px; }
  .reading-question-bar { align-items: start; padding-bottom: 14px; }
  .reading-question-bar h1 { font-size: 18px; }
  .reading-status { max-width: 92px; text-align: center; }
  .key-message-panel { padding: 21px 18px; }
  .key-message-panel h2 { font-size: 29px; }
  .one-page-reading { margin-top: 24px; }
  .reading-chapter, .reading-chapter.is-locked { min-height: 0; grid-template-columns: 1fr; gap: 23px; padding: 22px 18px; }
  .reading-card-frame { width: 120px; }
  .chapter-card h3 { font-size: 19px; }
  .position-mark { font-size: 10px; }
  .chapter-copy .ritual-kicker { font-size: 10px; }
  .chapter-copy h2 { margin-bottom: 11px; font-size: 29px; }
  .chapter-analysis, .locked-reading-intro { font-size: 17px; line-height: 1.6; }
  .locked-analysis-preview { grid-template-columns: 1fr; }
  .locked-analysis-preview > div, .locked-analysis-preview > div:last-child { min-height: 0; grid-column: auto; }
  .reading-guidance-grid { grid-template-columns: 1fr; }
  .locked-guidance { grid-template-columns: 42px 1fr; gap: 12px; padding: 17px 14px; }
  .locked-guidance > span { width: 40px; height: 40px; }
  .locked-guidance h2 { font-size: 20px; }
  .reading-unlock-bar { bottom: calc(var(--dock-height) + 7px); min-height: 52px; padding-left: 13px; }
  .reading-unlock-bar span strong { max-width: 190px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .reading-unlock-bar > b { font-size: 7px; }
  .pricing-card { padding: 13px 17px max(24px, env(safe-area-inset-bottom)); }
  .pricing-card > .sheet-close { right: 15px; top: 15px; }
  .pricing-card h2 { padding-right: 42px; font-size: 30px; }
  .pricing-explainer { font-size: 13px; }
  .pricing-included { padding: 14px; }
  .pricing-included ul { grid-template-columns: 1fr; gap: 9px; }
  .pricing-included li { font-size: 12px; }
  .checkout-plan { min-height: 165px; padding: 15px; }
  .checkout-plan .plan-price strong { font-size: 34px; }
  .checkout-plan .plan-allowance { margin-top: 11px; padding-top: 10px; }
  .checkout-plan .plan-action { padding-top: 13px; }
  .plan-count-note { align-items: flex-start; font-size: 11px; text-align: left; }
  .purchase-note { font-size: 10px; }
  .access-pass-header h1 { font-size: 31px; }
  .question-ring { width: 59px; height: 59px; }
  .server-history-list > a { grid-template-columns: 27px minmax(0, 1fr) auto; padding-inline: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}