/* ══════════════════════════════════════════════════════════════════
   /css/tarot-stage.css — the 3D tarot stage inside the spread frame (2026-09-14)
   Only .spread-frame.has-stage rules live here; without WebGL nothing applies.
   The frame runs full-bleed (Michael: "run off the page on the left and right
   and still have the cool gold border") and the WebGL canvas is its background.
══════════════════════════════════════════════════════════════════ */

/* without the stage (no WebGL / reduced motion / module failed) the stage-only bits never show */
.spread-frame:not(.has-stage) .tstage-hint,
.spread-frame:not(.has-stage) .tstage-shuffle,
.spread-frame:not(.has-stage) .tstage { display: none; }

/* full-bleed frame with the gold hairline inset */
.spread-frame.has-stage {
  --tstage-h: clamp(560px, 78vh, 860px);   /* the stage band: the canvas never grows with the reading below it */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
  background: #2A1428;   /* = the sky's flat lower colour, so the canvas bottom is seamless with the frame under it */
  box-shadow: 0 30px 80px rgba(18, 9, 26, 0.6);
  padding-left: clamp(1.2rem, 4vw, 3rem);
  padding-right: clamp(1.2rem, 4vw, 3rem);
}
.spread-frame.has-stage::after {   /* the gold border, drawn over everything, never catching the pointer */
  content: "";
  position: absolute; inset: 14px;
  border: 1px solid rgba(212, 172, 104, 0.55);
  box-shadow: inset 0 0 0 3px rgba(18, 9, 26, 0.55), inset 0 0 0 4px rgba(184, 145, 80, 0.35);
  pointer-events: none;
  z-index: 3;
}

/* the stage layer: fills the frame, behind the page's own content */
.spread-frame.has-stage .tstage { position: absolute; top: 0; left: 0; right: 0; height: var(--tstage-h); z-index: 0; }
.spread-frame.has-stage .tstage canvas { display: block; width: 100%; height: 100%; }
.spread-frame.has-stage > *:not(.tstage) { position: relative; z-index: 1; }
.spread-frame.has-stage .spread-stars { display: none; }   /* the 3D sky has its own stars */

/* input state: the 2D fan gives way to the 3D deck; the form sits at the bottom of the stage */
.spread-frame.has-stage .spread-fan,
.spread-frame.has-stage .fan-caption { display: none; }
.spread-frame.has-stage .scene-input { min-height: calc(var(--tstage-h) - 250px); display: flex; flex-direction: column; justify-content: flex-start; padding-top: .25rem; }   /* Michael 9/15: the box, chips and button much higher up */
/* everything laid over the stage lets clicks fall through to the cards, except the things you actually press */
.spread-frame.has-stage > *:not(.tstage) { pointer-events: none; }
.spread-frame.has-stage form, .spread-frame.has-stage form *,
.spread-frame.has-stage button, .spread-frame.has-stage a,
.spread-frame.has-stage .scene-reveal, .spread-frame.has-stage .scene-reveal *,
.spread-frame.has-stage .sealed-letter, .spread-frame.has-stage .sealed-letter *,
.spread-frame.has-stage .tc3-question-wrap, .spread-frame.has-stage .tc3-question-wrap * { pointer-events: auto; }   /* three-card's question box is not inside a form */

/* the optional shuffle button (three-card, card-of-the-day) sits where the pick hint will appear */
.spread-frame.has-stage .tstage-shuffle {
  position: absolute; left: 50%; bottom: clamp(1.2rem, 4vh, 2.4rem); transform: translateX(-50%); z-index: 2; pointer-events: auto;
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem;
  color: #2D1F38; background: linear-gradient(180deg, #F0D89A, #D4AC68); border: 1px solid #8E6E3A; border-radius: 999px; padding: .85rem 1.9rem;
  cursor: pointer; box-shadow: 0 8px 24px -10px rgba(212,172,104,.8); transition: opacity .4s, transform .15s;
}
.spread-frame.has-stage .tstage-shuffle:hover { transform: translateX(-50%) translateY(-1px); }
.spread-frame.has-stage.is-picking .tstage-shuffle, .spread-frame.has-stage.is-breath .tstage-shuffle, .spread-frame.has-stage.is-revealed .tstage-shuffle { opacity: 0; pointer-events: none; }

/* the question box is unmistakably the place to type: solid cream, ink text, gold edge */
.spread-frame.has-stage .spread-textarea { background: #FBF3DC; color: #2D1F38; border: 1px solid #B89150; box-shadow: 0 0 0 4px rgba(251,243,220,.12), 0 14px 40px -18px rgba(0,0,0,.7); }
.spread-frame.has-stage .spread-textarea::placeholder { color: #3A1F38; opacity: 1; }   /* Michael 9/15: dark purple, easier to read */
.spread-frame.has-stage .spread-textarea:focus { border-color: #6B1F2C; box-shadow: 0 0 0 4px rgba(212,172,104,.35); outline: none; }
.spread-frame.has-stage .tstage-submit {
  display: block; margin: 1.1rem auto 0; font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .84rem;
  color: #2D1F38; background: linear-gradient(180deg, #F0D89A, #D4AC68); border: 1px solid #8E6E3A; border-radius: 999px; padding: .9rem 2rem;
  cursor: pointer; box-shadow: 0 10px 26px -12px rgba(212,172,104,.9); transition: transform .15s;
}
.spread-frame.has-stage .tstage-submit:hover { transform: translateY(-1px); }
.spread-frame:not(.has-stage) .tstage-submit { display: none; }

/* the deck-is-spread moment: the form slides out of the way and a single line asks for the pick */
.spread-frame.has-stage.is-picking .spread-form { opacity: 0; pointer-events: none; transition: opacity .5s; }
.spread-frame.has-stage .tstage-hint {
  position: absolute; left: 0; right: 0; top: calc(var(--tstage-h) * .8);   /* right under the spread, not at the foot of the band */
  text-align: center; z-index: 2; pointer-events: none;
  font-family: 'Italianno', 'EB Garamond', cursive; font-weight: 400; letter-spacing: .02em; line-height: 1;
  font-size: clamp(2.2rem, 3.4vw, 3rem); color: #F0D89A; -webkit-text-stroke: .5px #F0D89A; text-shadow: 0 2px 18px rgba(0, 0, 0, .75);
  opacity: 0; transition: opacity .6s .3s;
}
.spread-frame.has-stage.is-picking .tstage-hint { opacity: 1; }

/* breath state: the 3D card is already turning, so no dots — keep the stage tall and quiet */
.spread-frame.has-stage.is-breath .scene-input { display: flex; }
.spread-frame.has-stage.is-revealed .scene-input { display: none; }
.spread-frame.has-stage.is-breath .scene-breath { display: none; }
.spread-frame.has-stage.is-breath .spread-form { opacity: 0; pointer-events: none; }

/* revealed state: the 3D card IS the vitrine — the answer and reading read beneath it; the intro steps aside for it */
.spread-frame.has-stage.is-revealed .spread-intro { display: none; }   /* out of the flow, so the reveal's offset below is exact */
.spread-frame.has-stage.is-revealed { --tstage-h: clamp(560px, 74vh, 820px); padding-top: 0; }   /* the revealed card fills ~82% of the band, centred; "Card · Major Arcana" tucks under it and the answer reads over the wheel's lower rings */
.spread-frame.has-stage.is-revealed .scene-reveal { padding-top: calc(var(--tstage-h) - 116px); }   /* "Card · Major Arcana" ~14px under the card's bottom edge (the reveal block carries ~38px of its own top space) */
.spread-frame.has-stage.is-revealed .reveal-inner { gap: .4rem; }
.spread-frame.has-stage.is-revealed .scene { padding-top: 0; }
.spread-frame.has-stage.is-revealed .vitrine-attr { margin-bottom: 0; }
.spread-frame.has-stage.is-revealed .vitrine-card,
.spread-frame.has-stage.is-revealed .vitrine-script { display: none; }
.spread-frame.has-stage .cotd-chooser { display: none; }   /* card-of-the-day's three 2D backs — the stage deals them now */
.spread-frame.has-stage.is-revealed .vitrine { text-align: center; }
.spread-frame.has-stage.is-revealed .reveal-inner { grid-template-columns: 1fr; }
.spread-frame.has-stage.is-revealed .scene { max-width: 62ch; margin: 0 auto; text-align: center; }

@media (max-width: 700px) {
  .spread-frame.has-stage { --tstage-h: clamp(480px, 70vh, 700px); }
  .spread-frame.has-stage .spread-intro-p { display: none; }   /* the deck and the form say it all on a phone */
  .spread-frame.has-stage .scene-input { min-height: calc(var(--tstage-h) - 150px); }
  .spread-frame.has-stage.is-revealed { --tstage-h: clamp(460px, 64vh, 640px); }
  .spread-frame.has-stage.is-revealed .scene-reveal { padding-top: calc(var(--tstage-h) - 102px); }
  .spread-frame.has-stage::after { inset: 8px; }
}

/* three-card: the past · present · future pills wait until the deck is spread, then track the picks */
.spread-frame.has-stage .tc3-pick-pills { opacity: 0; transition: opacity .5s; }
.spread-frame.has-stage.is-picking .tc3-pick-pills,
.spread-frame.has-stage.is-breath .tc3-pick-pills,
.spread-frame.has-stage.is-revealed .tc3-pick-pills { opacity: 1; }

/* tapping a card before typing a question: the box asks for one */
.spread-frame.has-stage .spread-textarea.is-nudge { box-shadow: 0 0 0 2px #D4AC68, 0 0 24px rgba(212,172,104,.55); animation: tstageNudge .45s ease; }
@keyframes tstageNudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* while the deck is spread (and while the card turns) the form is gone for real — not just transparent — so it can never sit over a card */
.spread-frame.has-stage.is-picking .spread-form,
.spread-frame.has-stage.is-picking .spread-form *,
.spread-frame.has-stage.is-breath .spread-form,
.spread-frame.has-stage.is-breath .spread-form * { visibility: hidden; pointer-events: none !important; }

/* ── rounds 3–4 (Michael): the canvas runs on 380px below the band so the wheel's bottom arc comes down behind
   "Card · Major Arcana" and the answer; the sky is flat #2A1428 down there and the frame is the same #2A1428, so
   there is no seam; a soft pool of that same purple sits behind the text that lies over the wheel's lines ── */
.spread-frame.has-stage .tstage { --tstage-extra: 380px; height: calc(var(--tstage-h) + var(--tstage-extra)); }
.spread-frame.has-stage.is-revealed .vitrine-attr {
  position: relative; display: inline-block; padding: .4rem 2.4rem; border-radius: 999px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(42,20,40,.95) 0%, rgba(42,20,40,.85) 60%, rgba(42,20,40,0) 100%);
}
.spread-frame.has-stage.is-revealed .scene {
  position: relative; padding-left: 2rem; padding-right: 2rem;
  background: radial-gradient(ellipse 58% 320px at 50% 60px, rgba(42,20,40,.96) 0%, rgba(42,20,40,.9) 55%, rgba(42,20,40,0) 100%);
}
.spread-frame.has-stage.is-revealed .tc3-spread-grid { position: relative; background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(42,20,40,.96) 0%, rgba(42,20,40,.9) 60%, rgba(42,20,40,0) 100%); border-radius: 40px; }
/* category chips: solid fill so the wheel's lines never show through */
.spread-frame.has-stage .spread-chip { background: rgba(42, 20, 40, .92); }
.spread-frame.has-stage .spread-chip.is-active { background: linear-gradient(180deg, #F0D89A, #D4AC68); }
/* the moment a card is tapped the intro steps aside — nothing sits over the card while it turns */
.spread-frame.has-stage.is-chosen .spread-intro { opacity: 0; transition: opacity .4s; }

/* ── round 5 (Michael 9/15): bigger "choose a category"; the intro paragraph leaves once the deck is shuffled ── */
.spread-frame.has-stage .spread-cat-label { font-size: 2.7rem; margin-bottom: .8rem; }
.spread-frame.has-stage.is-picking .spread-intro-p, .spread-frame.has-stage.is-breath .spread-intro-p { display: none; }

/* ── ambient audio (Michael 9/15: "the music does not play when I click"): the toggle and its volume slider must win over the pointer-events:none layer ── */
.spread-frame.has-stage > button.yn-audio-toggle, .spread-frame.has-stage > input.yn-audio-vol { pointer-events: auto; }

/* the audio button sits in the top corner of the frame, its vertical volume slider right under it (Michael 9/15: "put that audio thing up higher") */
/* the frame's click-through rule makes every child position:relative — the audio controls must stay absolute or the slider pushes the button down */
.spread-frame.has-stage > button.yn-audio-toggle { position: absolute; top: 26px; left: 26px; right: auto; z-index: 5; }
.spread-frame.has-stage > input.yn-audio-vol { position: absolute; top: 70px; left: 26px; right: auto; z-index: 5; height: 84px; touch-action: none; }   /* touch-action: the drag belongs to the slider, not the page */
/* the headline reads over the drifting cards */
.spread-frame.has-stage .spread-intro h2 { text-shadow: 0 2px 4px rgba(20,10,30,.95), 0 0 18px rgba(20,10,30,.9), 0 0 40px rgba(20,10,30,.7); }
.spread-frame.has-stage .spread-intro-p { text-shadow: 0 1px 3px rgba(20,10,30,.95), 0 0 14px rgba(20,10,30,.9); }

/* ── three-card + card-of-the-day (Michael 9/15): the same cream question box as yes-no; the button sits under the box, not at the foot of the band ── */
.spread-frame.has-stage .tc3-question-wrap { width: 100%; max-width: 590px; margin: 0 auto; }   /* the same width as the yes-no box; the label is screen-reader only */
.spread-frame.has-stage .tc3-question-wrap .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* while the deck is spread (and while the reading loads) the box is gone, exactly like yes-no */
.spread-frame.has-stage.is-picking .tc3-question-wrap, .spread-frame.has-stage.is-breath .tc3-question-wrap { visibility: hidden; pointer-events: none !important; }
.spread-frame.has-stage .tc3-question-input { display: block; width: 100%; min-height: 104px; padding: 1rem 1.1rem; font-size: 1.15rem; line-height: 1.4; border-radius: 6px;
  background: #FBF3DC; color: #2D1F38; border: 1px solid #B89150; box-shadow: 0 0 0 4px rgba(251,243,220,.12), 0 14px 40px -18px rgba(0,0,0,.7); }
.spread-frame.has-stage .tc3-question-input::placeholder { color: #3A1F38; opacity: 1; }
.spread-frame.has-stage .tc3-question-input:focus { border-color: #6B1F2C; box-shadow: 0 0 0 4px rgba(212,172,104,.35); outline: none; }
.spread-frame.has-stage .tstage-shuffle { bottom: auto; top: calc(var(--tstage-h) * .64); }
@media (max-width: 700px) {
  .spread-frame.has-stage .tstage-shuffle { top: calc(var(--tstage-h) * .7); }
}

/* ── round 7 (Michael 9/15 evening) ── */
/* card-of-the-day + three-card: the headline and paragraph (and three-card's box) sit lower in the band */
#cotdPanel.has-stage .spread-intro, #tc3Panel.has-stage .spread-intro, #ccPanel.has-stage .spread-intro { margin-top: clamp(1.5rem, 7vh, 4.5rem); }
/* the big italic answer word ("Command.", "Navigate.") sizes to the viewport and centres even when wider than the 62ch column — never clipped */
.spread-frame.has-stage.is-revealed .scene-answer { display: block; width: max-content; max-width: none; margin-left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: clamp(3rem, 9vw, 9rem); }
.spread-frame.has-stage.is-revealed .scene-reveal, .spread-frame.has-stage.is-revealed .reveal-inner, .spread-frame.has-stage.is-revealed .scene { overflow: visible; }
/* three-card's box: the same type as the yes-no box */
.spread-frame.has-stage .tc3-question-input { font-family: 'EB Garamond', serif; font-style: italic; font-weight: 500; font-size: 1.25rem; line-height: 1.5; color: #2D1F38; padding: 1.2rem 1.4rem; border-radius: 0; }
/* once a card is chosen the box stays gone (there was a 1.2 s gap between the third pick and the reading where it flashed back) */
.spread-frame.has-stage.is-chosen .tc3-question-wrap, .spread-frame.has-stage.is-revealed .tc3-question-wrap { visibility: hidden; pointer-events: none !important; }
/* the Past → Present → Future pills read over the ring: solid */
.spread-frame.has-stage .tc3-pill { background: rgba(42, 20, 40, .92); color: rgba(212, 172, 104, .75); border-color: rgba(212, 172, 104, .5); }
.spread-frame.has-stage .tc3-pill.is-active { background: linear-gradient(180deg, #F0D89A, #D4AC68); color: #2D1F38; border-color: #8E6E3A; box-shadow: 0 8px 22px -10px rgba(212,172,104,.9); }
.spread-frame.has-stage .tc3-pill.is-done { background: rgba(42, 20, 40, .92); color: rgba(212, 172, 104, .55); border-color: rgba(212, 172, 104, .35); }
.spread-frame.has-stage .tc3-pill-arrow { color: #D4AC68; }
/* phones: the three settled cards are small up top, so each reading column shows its own card above the text */
@media (max-width: 700px) {
#cotdPanel.has-stage .spread-intro, #tc3Panel.has-stage .spread-intro, #ccPanel.has-stage .spread-intro { margin-top: 1.25rem; }
#tc3Panel.has-stage.is-revealed .vitrine-card, #ccPanel.has-stage.is-revealed .vitrine-card { display: block; }
#tc3Panel.has-stage.is-revealed .tc3-position, #ccPanel.has-stage.is-revealed .tc3-position { margin-bottom: 2rem; }
}
/* the reading grid stacks to one column at ≤900px (3-card-tarot.css) — that's where each column needs its own card */
@media (max-width: 900px) {
#tc3Panel.has-stage.is-revealed .vitrine-card, #ccPanel.has-stage.is-revealed .vitrine-card { display: block; }
#tc3Panel.has-stage.is-revealed .tc3-position, #ccPanel.has-stage.is-revealed .tc3-position { margin-bottom: 2.2rem; }
}
/* three-card: the Past → Present → Future pills live in the intro header — keep the header while picking (only its title and paragraph go) */
#tc3Panel.has-stage.is-chosen .spread-intro, #ccPanel.has-stage.is-chosen .spread-intro { opacity: 1; }
#tc3Panel.has-stage.is-picking .spread-intro h2, #tc3Panel.has-stage.is-picking .spread-intro-p, #tc3Panel.has-stage.is-breath .spread-intro h2, #tc3Panel.has-stage.is-breath .spread-intro-p, #ccPanel.has-stage.is-picking .spread-intro h2, #ccPanel.has-stage.is-picking .spread-intro-p, #ccPanel.has-stage.is-breath .spread-intro h2, #ccPanel.has-stage.is-breath .spread-intro-p { display: none; }
#tc3Panel.has-stage.is-picking .spread-intro, #tc3Panel.has-stage.is-breath .spread-intro, #ccPanel.has-stage.is-picking .spread-intro, #ccPanel.has-stage.is-breath .spread-intro { margin-top: .25rem; }

/* ── round 8 (Michael 9/15, last round) ── */
/* the intro paragraphs read over the drifting cards: a tight dark shadow plus a faint gold glow */
.spread-frame.has-stage .spread-intro-p { text-shadow: 0 1px 2px rgba(20,10,30,1), 0 0 10px rgba(20,10,30,.95), 0 0 24px rgba(20,10,30,.85), 0 0 34px rgba(240,216,154,.22); }
/* card of the day: "A new trio appears at midnight — next reveal in …" sits directly under the Draw button */
#cotdPanel.has-stage .cotd-countdown { display: block !important; position: absolute; left: 0; right: 0; top: calc(var(--tstage-h) * .64 + 96px); width: 100%; max-width: none; margin: 0 auto; padding: 0 1.5rem; text-align: center; z-index: 2; pointer-events: none; transition: opacity .4s; }   /* centred, two lines under the Draw button */
#cotdPanel.has-stage.is-picking .cotd-countdown, #cotdPanel.has-stage.is-breath .cotd-countdown, #cotdPanel.has-stage.is-revealed .cotd-countdown { opacity: 0; }
/* three-card: an "Optional" badge on the box's top border */
.spread-frame.has-stage .tc3-question-wrap { position: relative; margin-top: .9rem; }
.spread-frame.has-stage .tc3-question-wrap::before { content: 'Optional'; position: absolute; top: -.85em; left: 1.1rem; z-index: 2; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; line-height: 1.2; color: #8E6E3A; background: #FBF3DC; border: 1px solid #B89150; border-radius: 999px; padding: .28em .85em .22em; }
@media (max-width: 700px) {
  #cotdPanel.has-stage .cotd-countdown { top: calc(var(--tstage-h) * .7 + 112px); font-size: .9rem; }
}

/* ── round 9 (Michael 9/15) ── */
/* after the reveal the Past / Present / Future tabs above each column are gold with purple letters */
.spread-frame.has-stage.is-revealed .tc3-pos-label { background: linear-gradient(180deg, #F0D89A, #D4AC68); color: #3A1F38; border-color: #8E6E3A; box-shadow: 0 8px 22px -12px rgba(212,172,104,.9); }
/* the column cards (phones) play their living loop over the still */
.spread-frame.has-stage .vc-art-wrap { position: relative; }
.spread-frame.has-stage .vc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spread-frame.has-stage .vc-video:not([src]) { display: none; }

/* ══ THE CELTIC CROSS (2026-09-16) — scoped to #ccPanel ══ */
/* `tc3-*` classes are the shared stage vocabulary (question box, pills); `#tc3Panel` / `#ccPanel` / `#cotdPanel` are the per-page scopes. */
#ccPanel.has-stage .tc3-pick-pills.cc-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .45rem; max-width: 720px; margin: .6rem auto 0; }
#ccPanel.has-stage .cc-pills .tc3-pill { padding: .3rem .7rem; font-size: .74rem; letter-spacing: .14em; }
#ccPanel.has-stage.is-picking .cc-pills, #ccPanel.has-stage.is-turning .cc-pills { opacity: 1; }
/* the is-picking half of this is already produced by the #tc3Panel twin above — only is-turning needs its own rule */
#ccPanel.has-stage.is-turning .spread-intro h2, #ccPanel.has-stage.is-turning .spread-intro-p { display: none; }
#ccPanel.has-stage.is-turning .spread-intro { margin-top: .25rem; opacity: 1; }
#ccPanel.has-stage.is-revealed .tc3-pick-pills.cc-pills { display: none; }
/* "Turn the cards": the shuffle button's place, once the tenth card is laid */
#ccPanel.has-stage > button.cc-turn { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--tstage-h) * .88); z-index: 4; pointer-events: auto; }
#ccPanel.has-stage.is-picking > button.cc-turn:not([hidden]) { display: inline-block; opacity: 1; }   /* the generic .tstage-shuffle is-picking rule hides by opacity — this one must show */
#ccPanel.has-stage:not(.is-picking) > button.cc-turn { display: none; }
/* once the tenth card is laid the fan is gone: the hint and the Turn button rise to sit right under the compact cross (Michael 9/16) */
#ccPanel.has-stage.is-laid .tstage-hint { top: calc(var(--tstage-h) * .50); }
#ccPanel.has-stage.is-laid > button.cc-turn { top: calc(var(--tstage-h) * .59); }
/* the revealed band is the cross; the text reads below it */
#ccPanel.has-stage.is-revealed { --tstage-h: clamp(600px, 78vh, 860px); }
#ccPanel.has-stage.is-revealed .tstage-hint { opacity: 0; pointer-events: none; }   /* the turned cross fills the band — no room for the hint (9/16) */
#ccPanel.has-stage.is-revealed .scene-reveal { padding-top: calc(var(--tstage-h) - 40px); }
#ccPanel.has-stage.is-revealed .spread-intro { display: none; }
/* THE OFFER — positioning only; the sealed-letter styling lives in celtic-cross-tarot.css.
   Anchored from the bottom so it can never push down into the reading below it. */
#ccPanel.has-stage > aside.cc-offer { position: absolute; left: 50%; top: auto; bottom: calc(100% - var(--tstage-h) + 64px);   /* Michael 9/16: nudged up off the text below */ transform: translateX(-50%) translateY(18px); width: min(92%, 640px); z-index: 5; pointer-events: auto; opacity: 0; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
#ccPanel.has-stage > aside.cc-offer.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
/* phones: the band itself runs shorter, so its offset, offer, and turn-button positions all retune */
@media (max-width: 700px) {
  #ccPanel.has-stage.is-revealed { --tstage-h: clamp(460px, 64vh, 640px); }
  #ccPanel.has-stage.is-revealed .scene-reveal { padding-top: calc(var(--tstage-h) - 60px); }
  #ccPanel.has-stage > aside.cc-offer { bottom: calc(100% - var(--tstage-h) + 68px); width: 94%; }
  #ccPanel.has-stage > button.cc-turn { top: calc(var(--tstage-h) * .9); }
  #ccPanel.has-stage.is-laid > button.cc-turn { top: calc(var(--tstage-h) * .55); }
  /* the ten pills stack three rows deep at this width and collide with the laid cards — the hint carries "n of 10" instead (JS change routed separately) */
  #ccPanel.has-stage.is-picking .tc3-pick-pills.cc-pills, #ccPanel.has-stage.is-turning .tc3-pick-pills.cc-pills { display: none; }
  #ccPanel.has-stage.is-picking .tstage-hint { top: calc(var(--tstage-h) * .44); font-size: 1.5rem; }   /* the gap between the compact cross (top) and the fan (lower half) — the band's top sits under the sticky header at most scroll positions */
}