/* reading.css: what the four reading pages share: board, cards, reading panel, reading view.
   Each page prefixes its own classes: pl- (card pulls, Year Ahead), cc- (Celtic Cross),
   rw- (runes), zw- (Zodiac Wheel). A page's own file loads after this one and adds or
   overrides. My Account's reading view (rh-) keeps its own copy in account.css. */

/* ---------- page layout: board | panel (same as the Celtic Cross) ---------- */
.pl-page, .cc-page, .rw-page, .zw-page, .hs-page{ padding:14px 24px 18px; }

/* margin/max-width/padding reset: styles.css gives every <section> a centred 980px box,
   and those auto margins would shrink this grid column to nothing */
.pl-stage, .cc-stage{ position:relative; display:flex; flex-direction:column; min-height:0; min-width:0;
  margin:0; max-width:none; padding:0; }
.pl-board-fit, .cc-board-fit{ position:relative; flex:1; min-height:0; }
.pl-hint, .cc-hint, .rw-hint, .zw-hint{ font-family:var(--font-body); color:var(--frost); opacity:.7; font-size:calc(0.84375rem * var(--text-scale)); text-align:center; min-height:20px; margin-top:6px; }

/* ---------- board / deck / cards ---------- */
.pl-deck, .cc-deck{ position:absolute; width:var(--cw); height:var(--ch); transition:opacity .4s ease; }
.pl-deck .pl-back, .cc-deck .cc-back{ position:absolute; inset:0; border-radius:9px; overflow:hidden;
  box-shadow:0 2px 0 rgba(var(--shadow-rgb),.35),0 8px 20px rgba(var(--shadow-rgb),.5); background:var(--midnight-2); }
.pl-board.dealing .pl-deck, .cc-board.dealing .cc-deck{ opacity:.55; }
.pl-slot.hoverable:hover, .cc-slot.hoverable:hover{ z-index:30; }
.pl-slot:not(.landed) .pl-poslabel, .cc-slot:not(.landed) .cc-poslabel{ opacity:0; }

/* the position being read: lifted above its neighbours and ringed in gold */
.pl-slot.active{ z-index:26; }
.pl-slot.active .pl-poslabel, .cc-slot.active .cc-poslabel{ opacity:1; }
.pl-slot.active .pl-tilt, .cc-slot.active .cc-tilt{ box-shadow:0 0 0 2px var(--gold), 0 0 28px rgba(var(--gold-rgb),.45), 0 12px 26px rgba(var(--shadow-rgb),.55); }
.pl-card, .cc-card{ width:var(--cw); height:var(--ch); perspective:900px; cursor:pointer; }
.pl-tilt, .cc-tilt{ position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .12s ease-out, box-shadow .3s ease; border-radius:9px;
  box-shadow:0 1px 0 rgba(var(--gold-rgb),.20),0 2px 0 rgba(var(--shadow-rgb),.35),0 3px 0 rgba(var(--shadow-rgb),.28),
    0 4px 1px rgba(var(--shadow-rgb),.22),0 12px 26px rgba(var(--shadow-rgb),.55); }
.pl-card:hover .pl-tilt, .cc-card:hover .cc-tilt{ box-shadow:0 1px 0 rgba(var(--gold-rgb),.25),0 2px 0 rgba(var(--shadow-rgb),.4),
  0 3px 0 rgba(var(--shadow-rgb),.3),0 5px 2px rgba(var(--shadow-rgb),.25),0 22px 44px rgba(var(--shadow-rgb),.6); }
.pl-inner, .cc-inner{ position:relative; width:100%; height:100%; transition:transform .8s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
.pl-card.flipped .pl-inner, .cc-card.flipped .cc-inner{ transform:rotateY(180deg); }
.pl-gloss, .cc-gloss{ position:absolute; inset:0; border-radius:9px; pointer-events:none; z-index:6;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%), rgba(var(--white-rgb),.10), rgba(var(--white-rgb),0) 34%);
  opacity:0; transition:opacity .25s ease; mix-blend-mode:screen; }
.pl-card:hover .pl-gloss, .cc-card:hover .cc-gloss{ opacity:1; }
.pl-face, .cc-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:9px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(var(--shadow-rgb),.4); }
.pl-front, .cc-front{ transform:rotateY(180deg); background:var(--midnight); }

/* text face for cards that don't have artwork yet */
.pl-textface, .cc-textface{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5em; padding:1.1em .8em; box-sizing:border-box; text-align:center; font-size:14px;
  background:radial-gradient(ellipse at 50% 35%, var(--cardface-hi) 0%, var(--cardface-lo) 70%);
  border:1px solid rgba(var(--gold-rgb),.35); border-radius:9px; color:var(--bone); }
.pl-textface::before, .cc-textface::before{ content:''; position:absolute; inset:.45em; border:1px solid rgba(var(--gold-rgb),.18); border-radius:6px; pointer-events:none; }
.pl-textface .tf-corner, .cc-textface .tf-corner{ position:absolute; font-family:var(--font-heading); font-size:.78em; letter-spacing:.06em; color:var(--gold); opacity:.75; }
.pl-textface .tf-tl, .cc-textface .tf-tl{ top:.8em; left:.9em; }
.pl-textface .tf-br, .cc-textface .tf-br{ bottom:.8em; right:.9em; transform:rotate(180deg); }
.pl-textface .tf-rune, .cc-textface .tf-rune{ font-size:2.6em; line-height:1; color:var(--gold-light); text-shadow:0 0 14px rgba(var(--gold-light-rgb),.45); }
.pl-textface .tf-name, .cc-textface .tf-name{ font-family:var(--font-heading); font-size:1em; line-height:1.25; color:var(--bone); }
.pl-textface .tf-figure, .cc-textface .tf-figure{ font-family:var(--font-body); font-style:italic; font-size:.78em; line-height:1.35; color:var(--frost); opacity:.7; }
.pl-card.reversed .pl-front .pl-textface, .cc-card.reversed .cc-front .cc-textface{ transform:rotate(180deg); }
.pl-board .pl-textface, .cc-board .cc-textface{ font-size:calc(14px * var(--s)); }
.pl-focus .pl-textface, .cc-focus .cc-textface{ font-size:26px; }
.pl-focus.reversed .pl-textface, .cc-focus.reversed .cc-textface{ transform:rotate(180deg); }
.pl-ghost, .cc-ghost{ position:absolute; width:var(--cw); height:var(--ch); box-sizing:border-box; border:1px dashed rgba(var(--gold-rgb),.22);
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-size:calc(22px * var(--s)); color:rgba(var(--gold-rgb),.7); transition:opacity .4s ease; }   /* .7: readable (4.5:1) on the dark cloth */
.pl-board.dealt .pl-ghost, .cc-board.dealt .cc-ghost{ opacity:0; }
.cc-board.dealt .cc-deck{ opacity:.25; }

/* ---------- reading panel ---------- */
.pl-panel, .cc-panel, .rw-panel, .zw-panel, .hs-panel{ display:flex; flex-direction:column; min-height:0; box-sizing:border-box;
  background:var(--panel-bg);
  border:var(--panel-border); border-radius:var(--panel-radius); padding:22px 24px 16px; }
.pl-panel-head, .cc-panel-head, .rw-panel-head, .zw-panel-head, .hs-panel-head{ margin:0; padding:0; text-align:left; }
.pl-title, .cc-title, .rw-title, .zw-title, .hs-title{ font-family:var(--font-heading); font-weight:400; font-size:calc(1.5rem * var(--text-scale)); letter-spacing:.04em; color:var(--bone); margin:0; }
.pl-sub, .cc-sub, .rw-sub, .zw-sub, .hs-sub{ font-size:calc(0.8125rem * var(--text-scale)); font-style:italic; color:var(--frost); opacity:.65; margin:4px 0 0; line-height:1.5; }
.pl-phase, .cc-phase, .rw-phase, .zw-phase, .hs-phase{ display:flex; flex-direction:column; flex:1; min-height:0; }
.pl-phase[hidden], .cc-phase[hidden], .rw-phase[hidden], .zw-phase[hidden], .hs-phase[hidden]{ display:none; }

/* question form (shared markup from tarot-core.js), restyled to sit inside the panel */
.pl-panel #questionFormSection.qmodal,
.cc-panel #questionFormSection.qmodal,
.rw-panel #questionFormSection.qmodal,
.zw-panel #questionFormSection.qmodal{ max-width:none; width:auto; margin:22px 0 18px; padding:0; background:none; border:0; text-align:left; transform:none; }
.pl-panel .qmodal-eyebrow,
.cc-panel .qmodal-eyebrow,
.rw-panel .qmodal-eyebrow,
.zw-panel .qmodal-eyebrow{ font-family:var(--font-heading); font-size:calc(0.625rem * var(--text-scale)); letter-spacing:.22em; text-transform:uppercase; color:var(--gold); opacity:.6; margin-bottom:10px; }
.pl-panel .qmodal-title, .cc-panel .qmodal-title, .rw-panel .qmodal-title, .zw-panel .qmodal-title{ font-family:var(--font-heading); font-size:calc(1.125rem * var(--text-scale)); font-weight:400; color:var(--bone); margin:0 0 8px; }
.pl-panel .qmodal-sub, .cc-panel .qmodal-sub, .rw-panel .qmodal-sub, .zw-panel .qmodal-sub{ font-size:calc(0.8125rem * var(--text-scale)); font-style:italic; color:var(--frost); opacity:.6; line-height:1.6; margin:0 0 16px; }
.pl-panel .qmodal-input, .cc-panel .qmodal-input, .rw-panel .qmodal-input, .zw-panel .qmodal-input{ width:100%; box-sizing:border-box; padding:11px 14px; background:rgba(var(--midnight-rgb),.6); border:1px solid rgba(var(--frost-rgb),.2);
  border-radius:var(--field-radius); color:var(--field-text); font-family:var(--font-body); font-size:calc(0.875rem * var(--text-scale)); outline:none; }
.pl-panel .qmodal-input:focus,
.cc-panel .qmodal-input:focus,
.rw-panel .qmodal-input:focus,
.zw-panel .qmodal-input:focus{ border-color:var(--field-focus-soft); }
.pl-wide, .cc-wide, .rw-wide, .zw-wide{ width:100%; }
.pl-question, .cc-question, .rw-question, .zw-question{ font-family:var(--font-body); font-style:italic; color:var(--gold); opacity:.85; font-size:calc(0.875rem * var(--text-scale)); margin:14px 0 0; line-height:1.5; }
.pl-strip, .cc-strip, .rw-strip, .zw-strip{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 14px; }
.pl-chip:hover:not(:disabled),
.cc-chip:hover:not(:disabled),
.rw-chip:hover:not(:disabled),
.zw-chip:hover:not(:disabled){ border-color:var(--gold); color:var(--bone); }
.pl-chip.revealed, .cc-chip.revealed, .rw-chip.revealed, .zw-chip.revealed{ background:rgba(var(--gold-rgb),.13); color:var(--bone); border-color:rgba(var(--gold-rgb),.55); }
.pl-chip.active, .cc-chip.active, .rw-chip.active, .zw-chip.active{ background:var(--gold); color:var(--midnight); border-color:var(--gold); }
.pl-chip.ov, .cc-chip.ov{ padding:0 12px; letter-spacing:.06em; }
.pl-chip:disabled, .cc-chip:disabled, .rw-chip:disabled, .zw-chip:disabled{ opacity:.3; cursor:default; }
.pl-view, .cc-view, .rw-view, .zw-view{ flex:1; min-height:0; overflow-y:auto; padding-right:8px; margin-right:-8px; }
.v-pos{ font-family:var(--font-heading); font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.v-sub{ font-size:calc(0.78125rem * var(--text-scale)); font-style:italic; color:var(--frost); opacity:.6; margin-top:2px; }
.v-thumb .pl-textface, .v-thumb .cc-textface{ font-size:6px; border-radius:6px; }
.v-orient.rev{ color:var(--red-soft); border-color:rgba(var(--red-soft-rgb),.4); }
.v-para{ font-size:calc(0.90625rem * var(--text-scale)); line-height:1.7; color:var(--frost); opacity:.92; margin:0 0 14px; }
.v-tabs{ display:flex; gap:4px; margin:4px 0 10px; border-bottom:1px solid rgba(var(--frost-rgb),.12); }
.v-tab{ background:none; border:0; border-bottom:2px solid transparent; padding:6px 10px; margin-bottom:-1px; cursor:pointer;
  font-family:var(--font-heading); font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--frost); opacity:.6; }
.v-tab.on{ color:var(--gold); border-bottom-color:var(--gold); opacity:1; }
.v-angle{ font-size:calc(0.875rem * var(--text-scale)); line-height:1.7; color:var(--frost); opacity:.88; margin:0; }
.v-facedown p{ font-style:italic; color:var(--frost); opacity:.7; margin:0 0 14px; }

/* the AI-written reading: per-card note, then the complete reading in sections */
.v-yours{ margin:0 0 16px; padding:2px 0 2px 14px; border-left:2px solid rgba(var(--gold-rgb),.45); }
.v-yours-h, .v-ai-h{ font-family:var(--font-heading); font-size:calc(0.65625rem * var(--text-scale)); font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); opacity:.85; margin:0 0 6px; }
.v-yours p{ font-size:calc(0.90625rem * var(--text-scale)); line-height:1.7; color:var(--bone); margin:0; }
.v-ai{ margin:12px 0 18px; font-size:calc(0.90625rem * var(--text-scale)); line-height:1.75; color:var(--frost); }
.v-ai p{ margin:0 0 12px; }
.v-ai .v-ai-summary{ font-family:var(--font-body); font-size:calc(1rem * var(--text-scale)); line-height:1.65; color:var(--bone); margin-bottom:18px; }
.v-ai-h{ margin-top:20px; }
.v-ai-advice{ margin:0 0 12px; padding-left:20px; }
.v-ai-advice li{ margin-bottom:6px; }
.v-ai .v-ai-closing{ font-style:italic; color:var(--gold); margin-top:18px; }

/* while the AI reading is being written: five runes (FREYA) light up in turn */
.v-thinking{ margin:16px 0 18px; padding:26px 20px 22px; text-align:center; border:1px solid rgba(var(--gold-rgb),.22); border-radius:10px;
  background:radial-gradient(ellipse at 50% 30%, rgba(var(--gold-rgb),.09), transparent 70%); }
.v-thinking-runes{ display:flex; justify-content:center; gap:14px; margin-bottom:14px;
  font-family:var(--font-rune); font-size:calc(1.625rem * var(--text-scale)); line-height:1; color:var(--gold-light); }
.v-thinking-runes span:nth-child(2){ animation-delay:.25s; }
.v-thinking-runes span:nth-child(3){ animation-delay:.5s; }
.v-thinking-runes span:nth-child(4){ animation-delay:.75s; }
.v-thinking-runes span:nth-child(5){ animation-delay:1s; }
.v-thinking p{ font-family:var(--font-body); font-style:italic; font-size:calc(0.9375rem * var(--text-scale)); color:var(--bone); margin:0 0 6px; }
.v-index{ display:flex; flex-direction:column; border-top:1px solid rgba(var(--frost-rgb),.12); }
.v-row:hover{ background:rgba(var(--gold-rgb),.06); }
.v-row .c{ color:var(--bone); }
.v-row .r{ font-size:calc(0.625rem * var(--text-scale)); letter-spacing:.08em; text-transform:uppercase; color:var(--red-soft); margin-left:4px; }
.pl-actions, .cc-actions, .rw-actions, .zw-actions{ display:flex; justify-content:space-between; gap:10px; padding-top:12px; margin-top:12px; border-top:1px solid rgba(var(--frost-rgb),.12); }
.pl-nav, .cc-nav, .rw-nav, .zw-nav{ background:none; border:1px solid rgba(var(--gold-rgb),.35); border-radius:var(--btn-radius); padding:9px 14px; cursor:pointer;
  font-family:var(--font-heading); font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.pl-nav:hover:not(:disabled),
.cc-nav:hover:not(:disabled),
.rw-nav:hover:not(:disabled),
.zw-nav:hover:not(:disabled){ background:rgba(var(--gold-rgb),.1); }
.pl-nav:disabled, .cc-nav:disabled, .rw-nav:disabled, .zw-nav:disabled{ opacity:.3; cursor:default; }
.pl-nav-next, .cc-nav-next, .rw-nav-next, .zw-nav-next{ background:rgba(var(--gold-rgb),.12); }
.pl-foot, .cc-foot, .rw-foot, .zw-foot{ display:flex; justify-content:space-between; margin-top:10px; }
.pl-link, .cc-link, .rw-link, .zw-link{ background:none; border:0; padding:4px 0; cursor:pointer; font-family:var(--font-body); font-size:calc(0.78125rem * var(--text-scale)); color:var(--frost); opacity:.6; }
.pl-link:hover, .cc-link:hover, .rw-link:hover, .zw-link:hover{ opacity:1; color:var(--gold); }
.pl-link[hidden], .cc-link[hidden], .rw-link[hidden], .zw-link[hidden]{ display:none; }

/* ---------- zoomed card (from the panel's thumbnail) ---------- */
.pl-backdrop, .cc-backdrop{ position:fixed; inset:0; background:var(--backdrop); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:1400; }
.pl-backdrop.show, .cc-backdrop.show{ opacity:1; pointer-events:auto; cursor:zoom-out; }
.pl-focus, .cc-focus{ position:fixed; z-index:1500; border-radius:var(--popup-radius); overflow:hidden; pointer-events:none;
  box-shadow:var(--popup-shadow), 0 0 40px rgba(var(--gold-rgb),.15);
  transition:top .45s cubic-bezier(.2,.8,.25,1), left .45s cubic-bezier(.2,.8,.25,1),
             width .45s cubic-bezier(.2,.8,.25,1), height .45s cubic-bezier(.2,.8,.25,1); }

/* ---------- narrower screens: stack board above panel ---------- */
@media (max-width:1000px){
  .pl-page, .cc-page, .rw-page, .zw-page, .hs-page{ padding:10px 12px 24px; }
  .pl-board-fit, .cc-board-fit{ flex:none; }
  .pl-panel, .cc-panel, .rw-panel, .zw-panel, .hs-panel{ margin-top:14px; }
  .pl-view, .cc-view, .rw-view, .zw-view{ overflow:visible; margin-right:0; padding-right:0; }
}

/* Visitors who asked for less motion (accessibility stage 2): the deal, the flips, the zodiac spin and the zoom
   happen at once. A tiny duration, not "none", so the pages' transitionend steps still fire. The Tangle of Wyrd
   and Waite's Oracle handle reduced motion themselves. */
@media (prefers-reduced-motion: reduce){
  :is(.pl-page, .cc-page, .rw-page, .zw-page, .rh-page):not(.tw-page, .wo-page) *,
  .pl-focus, .cc-focus, .zw-focus, .rh-focus{
    transition-duration:.01ms !important; transition-delay:0s !important;
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
  }
}