:root{--ink:#5b432b;--gold:#a77b3f;--cream:#f7ead0;--deep:#25231f}*{box-sizing:border-box}html{background:#efe1c5;scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Georgia,'Times New Roman',serif;background:radial-gradient(circle at 50% 12%,#fff5dc 0,#f5e6c8 38%,#e8d2aa 100%);min-height:100vh}.app{min-height:100vh;background:linear-gradient(180deg,rgba(255,249,234,.35),rgba(226,199,151,.18))}.draw{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2.2vh 16px 2vh;text-align:center;overflow:hidden}.copy{position:relative;z-index:2}.eyebrow{letter-spacing:.34em;font-size:clamp(18px,3vw,40px);margin-bottom:12px;color:#755528}.copy h1{font-weight:400;font-size:clamp(28px,4.5vw,56px);margin:0 0 14px}.copy p{font-style:italic;font-size:clamp(16px,2vw,23px);line-height:1.45;margin:0 auto 10px;max-width:760px}.fan{position:relative;width:min(860px,96vw);height:clamp(255px,36vw,390px);margin:-4px auto 0}.fan[hidden]{display:none}.card{position:absolute;left:50%;bottom:8px;width:clamp(105px,14.5vw,165px);aspect-ratio:2/3;border:0;padding:0;background:transparent;transform-origin:50% 115%;cursor:pointer;transition:transform .32s ease,opacity .32s ease,filter .32s ease;filter:drop-shadow(0 12px 10px rgba(65,43,20,.28))}.card:hover,.card:focus-visible{z-index:30!important;filter:drop-shadow(0 20px 14px rgba(65,43,20,.38));outline:none}.card.leaving{opacity:0;transform:var(--base) translateY(40px) scale(.9)!important}.card.picked{z-index:50!important;transform:translateX(-50%) translateY(-35px) scale(1.05)!important}.backdesign,.flipBack{width:100%;height:100%;background:url('images/card-back.jpeg') center/cover no-repeat;box-shadow:0 0 0 1px rgba(174,126,51,.45)}.choose{font-style:italic;font-size:clamp(17px,2vw,24px);margin-top:18px;padding-bottom:8px}.stage{width:min(900px,96vw);min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2px 0 18px;animation:fadeIn .4s ease both}.stage[hidden],.reading[hidden]{display:none}.stage .textbtn{align-self:flex-start}.stageCard{width:min(270px,43vw);aspect-ratio:2/3;perspective:1300px;margin:0 auto 10px}.flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.2,.72,.2,1);filter:drop-shadow(0 24px 24px rgba(54,38,19,.25))}.flip.turned{transform:rotateY(180deg)}.flipSide{position:absolute;inset:0;backface-visibility:hidden}.flipFront{transform:rotateY(180deg)}.flipFront img{width:100%;height:100%;object-fit:contain;display:block}.stageTitle{letter-spacing:.22em;font-size:clamp(25px,4vw,40px);margin:2px 0 7px}.stageKeywords{font-style:italic;font-size:clamp(17px,2vw,23px);margin-bottom:15px}.textbtn{border:0;background:none;color:var(--ink);font:inherit;font-size:16px;cursor:pointer;padding:8px}.button{border:1px solid var(--gold);background:#604b32;color:#fff4dc;padding:13px 24px;font:inherit;letter-spacing:.04em;cursor:pointer;box-shadow:0 8px 24px rgba(67,45,23,.12)}.reading{min-height:100vh;padding:22px clamp(18px,5vw,70px) 70px;background:rgba(248,237,213,.95)}.readingInner{max-width:1040px;margin:4px auto 0;display:grid;grid-template-columns:minmax(180px,250px) 1fr;gap:clamp(28px,6vw,76px);align-items:start}.readingFace{width:100%;display:block;position:sticky;top:28px;box-shadow:0 20px 48px rgba(55,40,24,.2)}.readingCopy{max-width:650px}.readingCopy .eyebrow{font-size:clamp(27px,4vw,46px);letter-spacing:.2em}.readingKeywords{font-style:italic;font-size:clamp(19px,2.4vw,27px);margin:0 0 26px}.interpretation{font-size:18px;line-height:1.78}.interpretation h3{font-size:27px;font-weight:400;margin:36px 0 12px;color:#755528}.interpretation p{margin:0 0 18px}.reading .button{margin-top:24px}@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@media(max-width:700px){.draw{justify-content:flex-start;padding-top:6vh}.copy p{margin-bottom:10px}.fan{height:330px;margin-top:4px}.card{width:128px}.stage{min-height:62svh}.stageCard{width:min(270px,60vw)}.readingInner{grid-template-columns:1fr}.readingFace{position:static;max-width:250px;margin:0 auto}.readingCopy{text-align:left}.readingCopy>.eyebrow,.readingKeywords{text-align:center}.reading{padding-top:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.flip.turned{transform:rotateY(180deg)}}

/* v1.4 viewport optimisation */
@media(min-width:701px) and (max-height:900px){
  .eyebrow{font-size:clamp(18px,2.3vw,30px);margin-bottom:5px}
  .copy h1{font-size:clamp(28px,3.5vw,44px);margin-bottom:6px}
  .copy p{font-size:clamp(15px,1.55vw,19px);line-height:1.35;margin-bottom:4px}
  .fan{height:min(44vh,350px)}
  .card{width:min(17.5vh,150px)}
  .choose{font-size:18px;margin-top:14px}
  .stageCard{width:min(31vh,240px)}
  .stageTitle{font-size:28px;margin-top:0}
  .stageKeywords{font-size:18px;margin-bottom:10px}
}
@media(max-width:700px){
  .draw{padding-top:2.5vh}
  .copy h1{margin-bottom:8px}
  .copy p{margin-bottom:3px}
  .fan{height:300px;margin-top:-4px}
  .stageCard{width:min(245px,58vw)}
  .stageTitle{font-size:26px}
}

/* v1.5 — robust reveal: no mirrored card-back, no below-fold reveal */
.stage{
  position:fixed; inset:0; z-index:1000; width:100vw; min-height:100dvh;
  max-height:100dvh; overflow:auto; padding:18px 16px 24px;
  background:radial-gradient(circle at 50% 10%,#fff5dc 0,#f5e6c8 42%,#e8d2aa 100%);
}
.stage .textbtn{position:absolute;left:18px;top:12px}
.stageCard{margin:32px auto 10px}
.flip{transform:none!important;transition:none!important}
.flipSide{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flipBack{display:none!important}
.flipFront{transform:none!important;display:block!important}
.flipFront img{transform:none!important;opacity:1!important}
.reading{
  position:fixed; inset:0; z-index:1100; width:100vw; height:100dvh;
  overflow-y:auto; overscroll-behavior:contain;
  padding:18px clamp(18px,5vw,70px) 70px;
}
@media(max-width:700px){
  .choose{margin-top:18px}
  .stage{padding-top:10px}
  .stageCard{margin-top:34px;width:min(245px,58vw)}
}

html.modal-open,body.modal-open{overflow:hidden!important}

/* v1.6 final refinement */
:root{--vh:1vh}
.draw{min-height:calc(var(--vh)*100)}
.fan{width:min(940px,97vw)}
.card{touch-action:manipulation}
.card[disabled]{pointer-events:none}
.stage{height:calc(var(--vh)*100);min-height:calc(var(--vh)*100);max-height:calc(var(--vh)*100)}
.stageCard{
  width:min(270px,43vw,calc((var(--vh)*100 - 220px)*.62));
  min-width:150px;
}
.reading{height:calc(var(--vh)*100)}
.interpretation h3.soul-heading{
  margin-top:44px;padding-top:26px;border-top:1px solid rgba(167,123,63,.42);
}
.reading .button{margin-top:38px}
#again::before{content:"✦  "}
#again::after{content:"  ✦"}
/* controlled 2D turn: avoids mirrored/backface browser bugs */
.stageCard.reveal-turn{animation:cardTurn .62s cubic-bezier(.35,.02,.2,1)}
@keyframes cardTurn{
  0%{transform:scaleX(1)}
  45%{transform:scaleX(.045)}
  55%{transform:scaleX(.045)}
  100%{transform:scaleX(1)}
}
@media(min-width:701px){
  .readingInner{grid-template-columns:minmax(170px,235px) minmax(0,650px);gap:clamp(32px,5vw,68px)}
  .readingFace{top:18px}
}
@media(max-width:700px){
  .fan{height:min(300px,39vh)}
  .card{width:clamp(100px,31vw,128px)}
  .stageCard{width:min(235px,58vw,calc((var(--vh)*100 - 205px)*.62));min-width:135px}
  .reading{padding:10px 18px 54px}
  .readingInner{margin-top:0;gap:14px}
  .readingFace{max-width:min(175px,42vw);margin:0 auto 2px}
  .readingCopy .eyebrow{font-size:27px;margin-bottom:5px}
  .readingKeywords{font-size:18px;margin-bottom:18px}
  .interpretation{font-size:17px;line-height:1.82;max-width:38rem;margin:0 auto}
  .interpretation h3{font-size:24px;margin-top:30px}
}
@media(max-width:380px),(max-height:650px){
  .copy .eyebrow{font-size:17px}
  .copy h1{font-size:27px;margin-bottom:4px}
  .copy p{font-size:14px;line-height:1.3}
  .fan{height:min(250px,38vh)}
  .card{width:min(108px,28vw)}
  .choose{font-size:16px;margin-top:12px}
  .stageCard{width:min(195px,48vw,calc((var(--vh)*100 - 190px)*.62))}
  .stageTitle{font-size:23px}
  .stageKeywords{font-size:16px}
  .button{padding:11px 19px}
}
@media(prefers-reduced-motion:reduce){
  .stageCard.reveal-turn{animation:none!important}
}

/* v1.6.1 — final reading polish */
.reading{
  background:#f7ead0 !important;
  background:radial-gradient(circle at 50% 8%,#fff5dc 0,#f7ead0 46%,#eedab5 100%) !important;
}
.readingKeywords{margin-bottom:16px}
.interpretation p:first-child{margin-top:0}
@media(max-width:700px){
  .readingKeywords{margin-bottom:12px}
  .readingInner{gap:10px}
}

/* v1.6.2 browser-safe reveal */
.stageCard.reveal-turn{animation:none!important;transform:none!important}
.stageCard.reveal-fade{animation:cardRevealFade .34s ease-out both}
@keyframes cardRevealFade{from{opacity:.35;transform:scale(.975)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.stageCard.reveal-fade{animation:none!important}}