:root{
  --bg:#041126;--bg2:#061734;--gold:#e6a93d;--gold2:#ffe395;--gold3:#b87813;--ink:#f6eddf;--muted:#d6d0c8;--panel:#071a35cc;--line:#a86e20;--serif:Georgia,'Times New Roman',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#031027;color:var(--ink);font-family:var(--sans);min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:
radial-gradient(circle at 50% 38%,rgba(27,68,127,.26),transparent 35%),
radial-gradient(circle at 50% 75%,rgba(55,31,99,.23),transparent 38%),
linear-gradient(#031027 0%,#061631 52%,#031027 100%)}
.stars{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.65;background-repeat:repeat}
.stars-a{background-image:radial-gradient(#ffcc68 1px,transparent 1px),radial-gradient(#fff6d2 1px,transparent 1px);background-size:93px 93px,147px 147px;background-position:13px 39px,70px 15px}
.stars-b{opacity:.28;background-image:radial-gradient(#ffbb43 1px,transparent 1px);background-size:53px 53px;background-position:8px 18px;filter:blur(.15px)}
button,textarea{font:inherit}.topbar{height:120px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;border-bottom:1px solid rgba(230,169,61,.72);background:linear-gradient(180deg,rgba(2,12,28,.98),rgba(2,12,28,.75));position:sticky;top:0;z-index:30;backdrop-filter:blur(8px)}
.brand{border:0;background:none;color:var(--gold);display:flex;gap:20px;align-items:center;font-family:var(--serif);font-weight:600;letter-spacing:.2em;font-size:29px;cursor:pointer}.brand-mark{width:48px;height:48px;border:2px solid var(--gold);transform:rotate(45deg);display:grid;place-items:center}.brand-mark span{transform:rotate(-45deg);font-size:25px}.menu-btn{width:48px;height:48px;border:0;background:none;display:grid;gap:7px;align-content:center;cursor:pointer}.menu-btn span{height:3px;background:var(--gold);border-radius:2px;width:40px;display:block}
.drawer{position:fixed;top:0;right:-360px;width:340px;height:100vh;background:#06152df5;border-left:1px solid var(--line);z-index:60;padding:80px 28px;transition:.35s ease;box-shadow:-10px 0 30px #0008}.drawer.open{right:0}.drawer-mask{position:fixed;inset:0;background:#0008;z-index:55;opacity:0;pointer-events:none;transition:.25s}.drawer-mask.open{opacity:1;pointer-events:auto}.drawer-close{position:absolute;right:24px;top:18px;color:var(--gold);font-size:42px;background:none;border:0}.drawer-title{font-family:var(--serif);font-size:34px;color:var(--gold2);margin-bottom:28px}.drawer>button:not(.drawer-close){display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #ffffff17;color:#eee;padding:16px 4px;font-size:18px;cursor:pointer}.drawer p{color:#aaa;font-size:13px;line-height:1.6}
.screen{display:none;min-height:calc(100vh - 120px)}.screen.active{display:block}.page-shell,.home-inner,.result-shell{width:min(940px,100%);margin:0 auto;padding:54px 62px 72px;position:relative}.home-inner{padding-top:78px;text-align:center;min-height:1500px}.eyebrow,.step-label{font-family:var(--serif);color:var(--gold);letter-spacing:.16em;font-size:22px;text-align:center}.display-title,.section-title{font-family:var(--serif);font-weight:500;margin:28px 0 2px;line-height:.98;background:linear-gradient(180deg,#fff2bf,#e7a233 80%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px #efb74622}.display-title{font-size:118px}.subtitle-serif{font:500 28px var(--serif);color:var(--gold);letter-spacing:.22em;margin:26px 0 20px}.ornament{font-family:var(--serif);font-size:24px;color:var(--gold);text-align:center;margin:12px 0 26px}.hero-copy,.section-copy{color:#dedede;font-size:28px;line-height:1.55;font-weight:300;text-align:center}.hero-card-wrap{height:690px;display:grid;place-items:center;position:relative;margin-top:15px}.astrolabe{position:absolute;width:680px;height:680px;border:1px solid #d9972f44;border-radius:50%;box-shadow:inset 0 0 0 70px #0000,0 0 80px #60330e22;background:repeating-radial-gradient(circle at center,transparent 0 70px,#d9982d2a 71px 72px,transparent 73px 104px)}.astrolabe:after,.astrolabe:before{content:"";position:absolute;left:50%;top:50%;background:#d9982d3b;transform:translate(-50%,-50%)}.astrolabe:before{width:96%;height:1px}.astrolabe:after{width:1px;height:96%}.card-back{background:url('assets/ui/osho-card-back-hd.jpg') center/cover no-repeat}.hero-card{position:relative;width:390px;aspect-ratio:2/3;border:3px solid #d5a04c;border-radius:22px;box-shadow:0 0 24px #f8b83d80,0 25px 65px #000c;z-index:2;overflow:hidden}.hero-card:after{content:"";position:absolute;inset:10px;border:1px solid #ffeab8;border-radius:14px;opacity:.65}.gold-btn{border:1px solid #ffeaa8;border-radius:14px;background:linear-gradient(180deg,#ffe797 0%,#e9b247 55%,#c9881f 100%);box-shadow:0 8px 30px #d8982d3f,inset 0 1px #fff9;color:#3a240e;font-family:var(--serif);font-weight:600;letter-spacing:.12em;cursor:pointer;transition:.2s transform,.2s filter}.gold-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}.gold-btn:active{transform:translateY(1px)}.gold-btn:disabled{filter:grayscale(.7);opacity:.46;cursor:not-allowed;box-shadow:none}.hero-cta{width:590px;max-width:86%;height:110px;font-size:34px;margin-top:-25px;position:relative;z-index:5}.feature-row{display:flex;justify-content:center;gap:24px;align-items:center;color:#c8c6c2;font-size:19px;margin-top:48px}.feature-row i{height:24px;width:1px;background:#9c6725}.bottom-ornament{color:var(--gold);font-size:46px;margin-top:70px;position:relative}.bottom-ornament:before,.bottom-ornament:after{content:"";display:inline-block;width:260px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));vertical-align:middle;margin:0 20px}.bottom-ornament:after{background:linear-gradient(90deg,var(--gold),transparent)}
.section-title{font-size:76px;text-align:center;margin:30px 0 12px}.draw-shell{min-height:1520px}.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:54px 10px 20px}.slot{height:330px;border:2px solid #b27a2a;border-radius:20px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:linear-gradient(180deg,#06182f,#071529);overflow:hidden;box-shadow:inset 0 0 0 4px #07152a,inset 0 0 0 5px #b27a2a55}.slot-label{font:600 23px var(--serif);letter-spacing:.18em;color:var(--gold);margin-top:30px}.slot-star{font-size:72px;color:#9d6a2f66;margin-top:66px}.slot .slot-face{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:17px;animation:slotFlip .65s ease both}.slot .slot-meta{position:absolute;left:0;right:0;bottom:0;padding:12px 8px;background:linear-gradient(transparent,#041126e9 35%);text-align:center;font:600 18px var(--serif);color:#ffe3a0;letter-spacing:.04em}.slot .slot-meta small{display:block;font:12px var(--sans);color:#eee;margin-top:2px;letter-spacing:0}.reversed{transform:rotate(180deg)}@keyframes slotFlip{0%{transform:rotateY(90deg) scale(.9);opacity:0}100%{opacity:1}}
.shuffle-stage{position:relative;height:600px;margin-top:10px;display:grid;place-items:center}.fan{position:absolute;inset:0;display:block;opacity:0;pointer-events:none;transition:.6s opacity}.fan.ready{opacity:1;pointer-events:auto}.fan-card{position:absolute;width:170px;height:255px;left:50%;top:190px;transform-origin:50% 115%;border:2px solid #d1a252;border-radius:14px;background:url('assets/ui/osho-card-back-hd.jpg') center/cover no-repeat;box-shadow:0 12px 30px #0009;cursor:pointer;transition:.2s filter,.25s transform}.fan-card:hover{filter:brightness(1.12);z-index:20!important}.fan-card.picked{opacity:.25;pointer-events:none}.shuffle-deck{position:absolute;left:50%;top:190px;width:170px;height:255px;transform:translateX(-50%);opacity:0;pointer-events:none}.shuffle-deck.active{opacity:1}.shuffle-deck .shuffle-card{position:absolute;inset:0;border-radius:14px;border:2px solid #dbb260;background:url('assets/ui/osho-card-back-hd.jpg') center/cover no-repeat;box-shadow:0 14px 30px #000b;animation:shuffle 1.1s ease-in-out infinite alternate}.shuffle-deck .shuffle-card:nth-child(2){animation-delay:-.18s}.shuffle-deck .shuffle-card:nth-child(3){animation-delay:-.36s}.shuffle-deck .shuffle-card:nth-child(4){animation-delay:-.54s}.shuffle-deck .shuffle-card:nth-child(5){animation-delay:-.72s}@keyframes shuffle{0%{transform:translate(-90px,-12px) rotate(-16deg)}35%{transform:translate(100px,15px) rotate(12deg)}65%{transform:translate(-50px,35px) rotate(-6deg)}100%{transform:translate(65px,-30px) rotate(8deg)}}.shuffle-status{position:absolute;bottom:36px;color:var(--gold);font:600 18px var(--serif);letter-spacing:.12em;text-transform:uppercase}.selected-count{text-align:center;color:var(--gold);font:600 21px var(--serif);letter-spacing:.08em;margin-top:-8px}.continue-btn{width:100%;height:102px;font-size:30px;margin-top:34px}.disabled-help{text-align:center;color:#bbb;margin-top:24px;font-size:17px}
.selected-cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:36px auto 30px;max-width:780px}.reading-card{text-align:center}.reading-card .card-image{width:100%;aspect-ratio:2/3;background-size:cover;background-position:center;border-radius:10px;border:3px solid #d9aa58;box-shadow:0 0 16px #f0b34b55}.reading-card h3{font:600 22px var(--serif);color:#f3cf82;letter-spacing:.06em;margin:10px 0 3px}.reading-card p{font:18px var(--serif);color:#e0a63d;margin:0}.reading-card .position{font:600 19px var(--serif);letter-spacing:.16em;color:var(--gold);margin-top:10px}.question-title{font-size:62px}.question-box{position:relative;border:2px solid #b87a22;border-radius:18px;min-height:215px;margin-top:18px;background:#04152c99;overflow:hidden}.question-box textarea{width:100%;height:210px;resize:none;background:transparent;border:0;outline:0;color:#f0f0f0;font:28px var(--serif);padding:26px 30px}.question-box span{position:absolute;right:22px;bottom:18px;color:#b38134}.topic-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}.topic-tabs button{height:63px;border:1px solid #b77a25;border-radius:40px;background:#06162f;color:#e5c58c;font:600 20px var(--serif);cursor:pointer}.topic-tabs button.active{background:linear-gradient(180deg,#ffe598,#e0a634);color:#39230e;box-shadow:0 5px 18px #d8982d35}.suggestions{display:grid;gap:10px}.suggestion{min-height:80px;border:1px solid #a56c23;border-radius:12px;background:#061831cc;color:#efe6d7;display:flex;align-items:center;padding:0 28px;font:500 24px var(--serif);cursor:pointer}.suggestion:before{content:"✦";color:var(--gold);margin-right:24px}.suggestion:after{content:"›";color:var(--gold);font-size:42px;margin-left:auto}.question-continue{width:70%;height:90px;display:block;margin:28px auto 0;font-size:25px}
.preview-shell{padding-top:40px}.preview-copy{max-width:760px;margin:0 auto 26px;font-size:20px;line-height:1.7;color:#e8e1d9}.paywall-card{border:2px solid #d49a36;border-radius:20px;display:grid;grid-template-columns:42% 58%;background:linear-gradient(135deg,#05142b,#081a38);box-shadow:0 0 35px #b8791d20;overflow:hidden}.paywall-art{min-height:410px;display:grid;place-items:center;background:radial-gradient(circle at center,#d3922733 0 20%,transparent 21%),repeating-radial-gradient(circle at center,transparent 0 40px,#d99a2d30 41px 42px),linear-gradient(150deg,#0b1d3b,#04132b)}.oracle-eye{font-family:var(--serif);font-size:140px;color:#e7b555;text-shadow:0 0 30px #e8b64e80}.paywall-content{padding:28px 32px 24px}.paywall-content h2{font:600 42px var(--serif);color:var(--gold2);margin:0 0 14px}.paywall-content ul{padding:0;list-style:none;display:grid;gap:10px;font-size:18px}.paywall-content li{color:#eee}.pay-price{border-top:1px solid #a06d29;margin-top:16px;padding-top:12px;font:600 44px var(--serif);color:#f5b744}.pay-sub{color:#d6d6d6;margin-bottom:16px}.unlock-btn{height:70px;width:100%;font-size:20px}.locked-list{display:grid;gap:10px;margin-top:12px}.locked-list>div{border:1px solid #916126;border-radius:15px;display:grid;grid-template-columns:78px 1fr 30px;align-items:center;min-height:92px;padding:8px 18px;background:#07172f}.round-icon{width:62px;height:62px;border:1px solid #b77a28;border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:34px}.locked-list h3{font:600 28px var(--serif);color:#e5bd6f;margin:0}.locked-list p{margin:2px 0 0;filter:blur(3px);opacity:.5}.locked-list b{color:var(--gold)}.secure-row{text-align:center;color:#ccc;margin:25px 0 0}
.result-shell{width:min(780px,100%);padding:26px 48px 52px}.result-title{font-size:64px}.result-cards{gap:28px;max-width:610px;margin-top:14px}.result-cards .reading-card h3{font-size:18px}.result-panel{border:1px solid #ba7e29;border-radius:12px;background:linear-gradient(135deg,#071a35c9,#04142be8);padding:16px 24px;margin:10px 0;box-shadow:inset 0 0 18px #0006}.result-panel h2{font:600 29px var(--serif);color:#e8aa3b;text-align:center;margin:0 0 8px}.result-panel p,.result-panel li{font-size:15px;line-height:1.45;color:#eee}.core-message{text-align:center}.position-panel{display:grid;grid-template-columns:145px 1fr;gap:22px;align-items:center}.position-panel .position-card{width:145px;aspect-ratio:2/3;background-size:cover;background-position:center;border:2px solid #d4a047;border-radius:7px}.position-panel h4{font:500 15px var(--serif);letter-spacing:.16em;color:var(--gold);margin:0}.position-panel h3{font:600 30px var(--serif);color:#edb64d;margin:2px 0 4px}.position-panel ul{list-style:none;padding:0;margin:6px 0}.position-panel li:before{content:"✦";color:var(--gold);margin-right:10px}.guidance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.guidance-grid article{border:1px solid #956529;border-radius:10px;padding:14px;text-align:center;background:#06172f}.guidance-grid article>span{font-size:38px;color:var(--gold)}.guidance-grid h3{font:600 22px var(--serif);color:#e9b44e;margin:6px 0}.guidance-grid p{margin:0}.action-panel ul{list-style:none;padding:0;margin:0}.action-panel li{margin:4px 0}.mini-panels{display:grid;grid-template-columns:1fr 1fr;gap:10px}.draw-again{width:100%;height:76px;font-size:22px;margin-top:16px}.text-btn{display:block;margin:12px auto 0;background:none;border:0;border-bottom:1px solid #be8130;color:#eee;padding:2px 8px;font-size:16px;cursor:pointer}.toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,20px);background:#111b2f;border:1px solid #a36b22;color:#eee;padding:12px 18px;border-radius:12px;z-index:100;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
.flying-card{position:fixed;z-index:99;border-radius:12px;border:2px solid #d5a04c;background:url('assets/ui/osho-card-back-hd.jpg') center/cover no-repeat;transition:all .58s cubic-bezier(.2,.75,.2,1);box-shadow:0 10px 35px #000b}.history-modal{position:fixed;inset:0;z-index:90;background:#000b;display:grid;place-items:center;padding:20px}.history-box{width:min(620px,100%);max-height:76vh;overflow:auto;background:#06152f;border:1px solid #a9742a;border-radius:16px;padding:24px}.history-box h2{font:600 34px var(--serif);color:var(--gold)}.history-item{padding:12px;border-bottom:1px solid #ffffff15}.history-item b{color:#e2b359}.history-close{float:right;background:none;border:0;color:#e3a83e;font-size:28px}
@media (max-width:700px){
 .topbar{height:72px;padding:0 18px}.brand{font-size:18px;gap:12px}.brand-mark{width:32px;height:32px}.menu-btn{transform:scale(.78)}.screen{min-height:calc(100vh - 72px)}
 .page-shell,.home-inner,.result-shell{padding:36px 18px 54px}.home-inner{min-height:auto}.eyebrow,.step-label{font-size:14px}.display-title{font-size:62px}.subtitle-serif{font-size:16px}.hero-copy,.section-copy{font-size:17px}.hero-card-wrap{height:460px}.astrolabe{width:430px;height:430px}.hero-card{width:245px}.hero-cta{height:74px;font-size:22px}.feature-row{font-size:12px;gap:9px;flex-wrap:wrap}.bottom-ornament:before,.bottom-ornament:after{width:80px}.section-title{font-size:48px}.question-title{font-size:37px}.slots{gap:8px;margin:34px 0 5px}.slot{height:215px}.slot-label{font-size:13px;margin-top:18px}.slot-star{font-size:40px;margin-top:46px}.shuffle-stage{height:430px}.fan-card,.shuffle-deck{width:112px;height:168px}.fan-card{top:130px}.shuffle-deck{top:130px}.shuffle-status{font-size:12px;bottom:25px}.continue-btn{height:72px;font-size:21px}.selected-cards-row{gap:10px}.reading-card h3{font-size:15px}.reading-card p{font-size:13px}.question-box textarea{font-size:20px}.topic-tabs{grid-template-columns:repeat(2,1fr)}.suggestion{font-size:18px;min-height:65px;padding:0 16px}.question-continue{width:100%;font-size:18px;height:72px}.paywall-card{grid-template-columns:1fr}.paywall-art{min-height:220px}.oracle-eye{font-size:90px}.paywall-content h2{font-size:34px}.locked-list h3{font-size:21px}.result-shell{padding:26px 14px 46px}.result-title{font-size:48px}.position-panel{grid-template-columns:100px 1fr;gap:14px}.position-panel .position-card{width:100px}.position-panel h3{font-size:24px}.guidance-grid{grid-template-columns:1fr}.mini-panels{grid-template-columns:1fr}
}

@media (min-width:701px){
  .fan-card{width:150px;height:225px}
}

/* =========================================================
   2026-08-25 — supplied Osho artwork + clarity / draw UX pass
   ========================================================= */
html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.card-back,.fan-card,.shuffle-card,.draw-flyer-back{
  background-image:url('assets/ui/osho-card-back-hd.jpg');
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.hero-card{
  aspect-ratio:2/3;
  background-size:100% 100%;
  filter:contrast(1.025) saturate(1.025);
  image-rendering:auto;
  transform:translateZ(0);
}
.hero-card:after{pointer-events:none}

/* Keep the selected-card slots at the same aspect ratio as the supplied scans.
   This prevents the real card faces from being stretched or cropped. */
.slots{align-items:start}
.slot{
  height:auto;
  aspect-ratio:350/518;
  min-height:0;
  isolation:isolate;
}
.slot .slot-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:17px;
  animation:slotFaceIn .34s cubic-bezier(.2,.72,.25,1) both;
  image-rendering:auto;
  z-index:2;
}
.slot.filled{box-shadow:0 0 26px #dda13a30,inset 0 0 0 2px #e1a84f55}
.slot .slot-meta{z-index:3}
@keyframes slotFaceIn{
  0%{opacity:0;transform:scale(.985)}
  100%{opacity:1;transform:scale(1)}
}

/* Use actual <img> elements for the user-supplied card faces. */
.reading-card .card-image{
  display:block;
  width:100%;
  aspect-ratio:350/518;
  height:auto;
  object-fit:cover;
  object-position:center;
  background:none;
  image-rendering:auto;
}
.position-panel .position-card{
  display:block;
  aspect-ratio:350/518;
  height:auto;
  object-fit:cover;
  object-position:center;
  background:none;
  image-rendering:auto;
}

/* Stable, touch-first fan. No transform transition = no blinking/jumping on tap. */
.fan{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.fan.busy,.fan.complete{pointer-events:none}
.fan-card{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-drag:none;
  transition:filter .14s ease,box-shadow .14s ease,opacity .18s ease;
  will-change:transform,opacity;
  background-size:100% 100%;
  outline:none;
}
.fan-card:hover{z-index:var(--fan-z)!important;filter:brightness(1.08) saturate(1.03)}
.fan-card:focus-visible{outline:2px solid #ffe6a2;outline-offset:3px}
.fan-card.drawing{filter:brightness(1.15) saturate(1.08);box-shadow:0 0 34px #f0b64c88,0 16px 34px #000c}
.fan-card.source-hidden,.fan-card.picked{opacity:0;pointer-events:none}
.fan.revealing .fan-card{animation:fanDeal .48s cubic-bezier(.22,.76,.2,1) both;animation-delay:var(--deal-delay)}
@keyframes fanDeal{
  0%{opacity:0;filter:brightness(.75);transform:translateX(-50%) translateY(110px) rotate(0deg) scale(.82)}
  100%{opacity:1;filter:brightness(1);transform:var(--base-transform) scale(1)}
}

/* Smoother shuffle: cards stay opaque and move like a riffle/overhand mix instead of flashing. */
.shuffle-deck{filter:drop-shadow(0 20px 30px #000b)}
.shuffle-deck .shuffle-card{
  background-size:100% 100%;
  opacity:1;
  will-change:transform;
  animation:shuffleRiffle 1.08s cubic-bezier(.42,0,.2,1) infinite alternate;
  animation-delay:calc(var(--i) * -83ms);
}
.shuffle-deck .shuffle-card:nth-child(even){animation-name:shuffleRiffleAlt}
@keyframes shuffleRiffle{
  0%{transform:translate(-74px,2px) rotate(-12deg)}
  46%{transform:translate(68px,-18px) rotate(9deg)}
  100%{transform:translate(-22px,25px) rotate(-4deg)}
}
@keyframes shuffleRiffleAlt{
  0%{transform:translate(66px,-5px) rotate(10deg)}
  48%{transform:translate(-70px,17px) rotate(-11deg)}
  100%{transform:translate(28px,-24px) rotate(5deg)}
}
.shuffle-status{min-width:230px;text-align:center}

/* One continuous draw animation: lift -> fly -> flip -> settle into slot. */
.draw-flyer{
  position:fixed;
  z-index:999;
  perspective:1200px;
  pointer-events:none;
  border-radius:14px;
  transform-origin:center;
  will-change:left,top,width,height,transform,filter;
  filter:drop-shadow(0 18px 26px #000c);
}
.draw-flyer-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform .36s cubic-bezier(.2,.72,.22,1);
}
.draw-flyer-inner.is-flipped{transform:rotateY(180deg)}
.draw-flyer-side{
  position:absolute;
  inset:0;
  border:2px solid #d9aa58;
  border-radius:14px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.draw-flyer-back{box-shadow:inset 0 0 0 2px #ffe6a32e}
.draw-flyer-front{transform:rotateY(180deg);background-size:cover;background-color:#02070e}
.draw-flyer.arrived{filter:drop-shadow(0 0 24px #f2b64f90)}

@media (max-width:700px){
  .slots{gap:8px}
  .slot{height:auto;aspect-ratio:350/518}
  .slot-label{margin-top:16px;font-size:12px}
  .slot-star{margin-top:42px}
  .shuffle-stage{height:410px}
  .fan-card,.shuffle-deck{width:112px;height:166px}
  .shuffle-deck{top:114px}
  .shuffle-status{bottom:18px;font-size:11px;letter-spacing:.09em}
}

/* =========================================================
   Multilingual UI architecture — EN / 简中 / 繁中 / 日本語 / 한국어
   ========================================================= */
html:lang(zh-CN){--serif:'Songti SC','STSong','Noto Serif CJK SC','Source Han Serif SC',serif}
html:lang(zh-TW){--serif:'Songti TC','Noto Serif CJK TC','Source Han Serif TC',serif}
html:lang(ja-JP){--serif:'Yu Mincho','Hiragino Mincho ProN','Noto Serif CJK JP',serif}
html:lang(ko-KR){--serif:'Batang','Nanum Myeongjo','Noto Serif CJK KR',serif}
html:lang(zh-CN) body,html:lang(zh-TW) body,html:lang(ja-JP) body,html:lang(ko-KR) body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','PingFang TC','Hiragino Sans','Yu Gothic','Apple SD Gothic Neo','Noto Sans CJK SC','Noto Sans CJK JP','Noto Sans CJK KR',Arial,sans-serif;
}
.top-actions{display:flex;align-items:center;gap:12px;position:relative}
.language-picker{position:relative;z-index:42}
.lang-btn{height:46px;min-width:86px;padding:0 13px;border:1px solid rgba(230,169,61,.62);border-radius:24px;background:#07152ccf;color:var(--gold2);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;backdrop-filter:blur(8px);box-shadow:inset 0 0 18px #0004;font-weight:700;letter-spacing:.06em}
.lang-btn:hover{border-color:var(--gold);background:#0a1c39}
.lang-globe{font-size:18px;color:var(--gold)}.lang-chevron{font-size:14px;transition:.2s transform}.language-picker.open .lang-chevron{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:56px;width:220px;padding:8px;background:#06152df5;border:1px solid #9f6d29;border-radius:14px;box-shadow:0 18px 46px #000b;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:.18s ease;backdrop-filter:blur(14px)}
.language-picker.open .lang-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.lang-menu button{width:100%;min-height:46px;border:0;border-radius:9px;background:transparent;color:#eee;display:flex;align-items:center;justify-content:space-between;padding:8px 11px;cursor:pointer;text-align:left;font-size:15px}
.lang-menu button:hover{background:#ffffff0d}.lang-menu button.active{background:linear-gradient(90deg,#d9982d24,#d9982d10);color:#ffe09a;box-shadow:inset 2px 0 var(--gold)}
.lang-menu small{color:#b8945a;font-size:11px;letter-spacing:.08em}.lang-menu button.active small{color:#ffe09a}

/* CJK copy uses natural tracking and slightly more flexible title widths. */
html:lang(zh-CN) .eyebrow,html:lang(zh-TW) .eyebrow,html:lang(ja-JP) .eyebrow,html:lang(ko-KR) .eyebrow,
html:lang(zh-CN) .step-label,html:lang(zh-TW) .step-label,html:lang(ja-JP) .step-label,html:lang(ko-KR) .step-label{letter-spacing:.08em}
html:lang(zh-CN) .display-title,html:lang(zh-TW) .display-title,html:lang(ja-JP) .display-title,html:lang(ko-KR) .display-title{font-size:104px}
html:lang(zh-CN) .question-title,html:lang(zh-TW) .question-title,html:lang(ja-JP) .question-title,html:lang(ko-KR) .question-title{font-size:56px;line-height:1.2}
html:lang(zh-CN) .gold-btn,html:lang(zh-TW) .gold-btn,html:lang(ja-JP) .gold-btn,html:lang(ko-KR) .gold-btn{letter-spacing:.05em}

@media (max-width:700px){
  .topbar{gap:8px}.top-actions{gap:3px}.lang-btn{height:38px;min-width:60px;padding:0 9px;gap:5px}.lang-globe{font-size:15px}.lang-menu{top:46px;width:205px;right:-40px}.menu-btn{width:42px;height:42px}.menu-btn span{width:34px}
  html:lang(zh-CN) .display-title,html:lang(zh-TW) .display-title,html:lang(ja-JP) .display-title,html:lang(ko-KR) .display-title{font-size:52px}
  html:lang(zh-CN) .question-title,html:lang(zh-TW) .question-title,html:lang(ja-JP) .question-title,html:lang(ko-KR) .question-title{font-size:32px}
  html:lang(zh-CN) .section-title,html:lang(zh-TW) .section-title,html:lang(ja-JP) .section-title,html:lang(ko-KR) .section-title{line-height:1.18}
  html:lang(zh-CN) .feature-row,html:lang(zh-TW) .feature-row,html:lang(ja-JP) .feature-row,html:lang(ko-KR) .feature-row{font-size:11px}
}
@media (max-width:420px){
  .brand{font-size:14px;gap:9px;letter-spacing:.12em}.brand-mark{width:28px;height:28px}.brand-mark span{font-size:17px}.lang-btn{min-width:54px}.lang-globe{display:none}.lang-menu{right:-38px}
}

/* =========================================================
   V4 — muted violet / meditation visual system
   Comfortable low-saturation purple with champagne accents.
   ========================================================= */
:root{
  --bg:#120d1f;
  --bg2:#1a122b;
  --bg3:#241733;
  --violet:#8e72a5;
  --violet-2:#b69fc6;
  --violet-soft:#d0c1dc;
  --gold:#c7aa72;
  --gold2:#ead9b5;
  --gold3:#98794d;
  --ink:#f3eef6;
  --muted:#c8c0cf;
  --panel:#1a1229dc;
  --line:#6f5a80;
}
body{background:var(--bg);color:var(--ink)}
body:before{
  background:
    radial-gradient(circle at 50% 28%,rgba(120,89,151,.18),transparent 30%),
    radial-gradient(circle at 18% 62%,rgba(78,51,102,.16),transparent 34%),
    radial-gradient(circle at 82% 72%,rgba(112,82,139,.13),transparent 36%),
    linear-gradient(180deg,#100b1b 0%,#171024 42%,#120d1f 100%);
}
.stars{opacity:.42}
.stars-a{background-image:radial-gradient(#d7c4e5 1px,transparent 1px),radial-gradient(#ead9b5 1px,transparent 1px)}
.stars-b{opacity:.18;background-image:radial-gradient(#aa8fbc 1px,transparent 1px);filter:blur(.25px)}
.topbar{
  border-bottom:1px solid rgba(155,126,174,.38);
  background:linear-gradient(180deg,rgba(16,11,27,.96),rgba(20,14,34,.84));
  box-shadow:0 10px 38px rgba(0,0,0,.12);
}
.brand{color:var(--gold2);gap:14px;letter-spacing:.16em}
.brand-mark.zen-brand-mark{width:54px;height:54px;border:0;transform:none;display:grid;place-items:center;filter:drop-shadow(0 0 12px rgba(158,126,179,.18))}
.brand-mark.zen-brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.brand-name{background:linear-gradient(90deg,#ead9b5,#cbb8d8 58%,#ead9b5);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu-btn span{background:linear-gradient(90deg,#b69fc6,#d8c59b)}
.drawer{background:rgba(24,16,38,.97);border-left:1px solid rgba(142,114,165,.46);box-shadow:-18px 0 50px rgba(0,0,0,.28)}
.drawer-title,.drawer-close{color:var(--violet-soft)}
.drawer p{color:#aaa2b3}
.eyebrow,.step-label,.subtitle-serif,.ornament,.bottom-ornament,.slot-label,.shuffle-status,.selected-count,.reading-card .position{color:var(--gold)}
.display-title,.section-title{
  background:linear-gradient(180deg,#f5e8c9 2%,#d7c4e5 48%,#b998ca 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 28px rgba(133,93,157,.12);
}
.hero-copy,.section-copy{color:#d7d0dd}
.astrolabe{
  border-color:rgba(162,129,181,.24);
  box-shadow:0 0 84px rgba(91,54,111,.13);
  background:repeating-radial-gradient(circle at center,transparent 0 70px,rgba(158,126,178,.12) 71px 72px,transparent 73px 104px)
}
.astrolabe:after,.astrolabe:before{background:rgba(167,139,183,.18)}
.hero-card{border-color:#a58ab5;box-shadow:0 0 30px rgba(126,91,148,.3),0 26px 68px rgba(0,0,0,.5)}
.hero-card:after{border-color:rgba(236,219,185,.56)}
.gold-btn{
  border-color:rgba(220,203,230,.52);
  background:linear-gradient(180deg,#bca8cc 0%,#9173a8 56%,#725884 100%);
  box-shadow:0 10px 30px rgba(84,53,102,.28),inset 0 1px rgba(255,255,255,.35);
  color:#fbf7fc;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.gold-btn:hover{filter:brightness(1.035) saturate(.96)}
.gold-btn:disabled{background:linear-gradient(180deg,#5d5368,#494051);color:#aaa1b1;opacity:.62}
.feature-row{color:#bdb5c4}.feature-row i{background:#725f82}
.slot{
  border-color:#705b82;
  background:linear-gradient(180deg,rgba(35,23,50,.94),rgba(24,16,38,.96));
  box-shadow:inset 0 0 0 4px #171022,inset 0 0 0 5px rgba(142,114,165,.26)
}
.slot-star{color:rgba(177,151,194,.28)}
.slot .slot-meta{background:linear-gradient(transparent,rgba(18,13,31,.96) 34%);color:#ead9b5}
.slot.filled{box-shadow:0 0 28px rgba(133,95,157,.18),inset 0 0 0 2px rgba(185,159,203,.38)}
.fan-card,.shuffle-deck .shuffle-card,.draw-flyer-side{border-color:#9f83b2}
.fan-card:hover{filter:brightness(1.055) saturate(.98)}
.fan-card:focus-visible{outline-color:#cdb8db}
.fan-card.drawing{filter:brightness(1.08) saturate(1.02);box-shadow:0 0 30px rgba(158,125,180,.36),0 16px 34px #000b}
.shuffle-status,.selected-count{color:#cbb3da}
.disabled-help{color:#aaa2b0}
.reading-card .card-image,.position-panel .position-card{border-color:#9a7cad;box-shadow:0 0 18px rgba(127,91,148,.2)}
.reading-card h3,.position-panel h3,.locked-list h3,.guidance-grid h3{color:#ddc8e9}
.question-box{
  border-color:#715a82;
  background:rgba(24,16,38,.72);
  box-shadow:inset 0 0 30px rgba(91,60,109,.08)
}
.question-box textarea{color:#eee9f2}.question-box span{color:#a991b8}
.topic-tabs button{
  border-color:#705a80;
  background:#1c1429;
  color:#d0c3d7
}
.topic-tabs button.active{
  background:linear-gradient(180deg,#b8a4c7,#8c70a1);
  color:white;
  box-shadow:0 7px 20px rgba(86,55,104,.2)
}
.suggestion{border-color:#675276;background:rgba(29,20,43,.86);color:#eee8f1}
.suggestion:before,.suggestion:after{color:#b79bc8}
.paywall-card{
  border-color:#735b84;
  background:linear-gradient(135deg,#1a1228,#21162f);
  box-shadow:0 0 40px rgba(87,55,105,.12)
}
.paywall-art{
  background:radial-gradient(circle at center,rgba(159,128,178,.17) 0 20%,transparent 21%),repeating-radial-gradient(circle at center,transparent 0 40px,rgba(158,126,178,.13) 41px 42px),linear-gradient(150deg,#251935,#171023)
}
.oracle-eye{color:#c4a9d4;text-shadow:0 0 28px rgba(173,145,190,.32)}
.paywall-content h2{color:#e5d7eb}.paywall-content li{color:#ded7e2}
.pay-price{border-top-color:#695476;color:#d9c2e7}.pay-sub{color:#bbb2c1}
.locked-list>div{border-color:#5f4a6b;background:#191126}.round-icon{border-color:#775e88;color:#c1a5d1}
.secure-row{color:#aaa2b1}
.result-panel{
  border-color:#665173;
  background:linear-gradient(135deg,rgba(28,19,42,.9),rgba(20,14,32,.94));
  box-shadow:inset 0 0 24px rgba(0,0,0,.25)
}
.result-panel h2{color:#d4bde2}.result-panel p,.result-panel li{color:#e5dfe9}
.position-panel h4{color:#b79bc7}
.guidance-grid article{border-color:#604c6d;background:#1a1227}
.lang-btn{border-color:rgba(151,121,169,.48);background:rgba(28,19,43,.86);color:#ddd0e5;box-shadow:inset 0 0 18px rgba(0,0,0,.14)}
.lang-btn:hover{border-color:#a88fba;background:#251934}.lang-globe{color:#bda4cc}
.lang-menu{background:rgba(25,17,38,.97);border-color:#655170;box-shadow:0 20px 52px rgba(0,0,0,.32)}
.lang-menu button{color:#e8e1eb}.lang-menu button:hover{background:rgba(255,255,255,.045)}
.lang-menu button.active{background:linear-gradient(90deg,rgba(143,112,161,.22),rgba(143,112,161,.06));color:#dccbe6;box-shadow:inset 2px 0 #9e82af}
.lang-menu small,.lang-menu button.active small{color:#aa93b7}
.toast{background:#21172d;border-color:#695476;color:#eee8f1}
.history-box{background:#1a1228;border-color:#665172}.history-box h2,.history-close{color:#d2badd}.history-item b{color:#c7afd4}
.text-btn{border-bottom-color:#746080;color:#d7d0dc}
.draw-flyer.arrived{filter:drop-shadow(0 0 24px rgba(169,139,186,.42))}

@media (max-width:420px){
  .brand-mark.zen-brand-mark{width:32px;height:32px}
  .brand{gap:8px}.brand-name{font-size:13px}
}

/* =========================
   V5 · Paid AI analysis flow
   ========================= */
.analyzing-screen {
  min-height: calc(100svh - 78px);
  background:
    radial-gradient(circle at 50% 34%, rgba(158, 115, 210, .16), transparent 28%),
    radial-gradient(circle at 20% 78%, rgba(110, 76, 161, .12), transparent 26%),
    linear-gradient(180deg, rgba(19, 13, 31, .94), rgba(14, 10, 25, .98));
}
.analysis-shell {
  width: min(760px, calc(100% - 34px));
  margin: 0 auto;
  padding: 70px 0 90px;
  text-align: center;
}
.analysis-brand {
  width: 66px; height: 66px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(189, 153, 227, .14), rgba(74, 44, 103, .08) 62%, transparent 63%);
  box-shadow: 0 0 44px rgba(167, 122, 214, .16);
}
.analysis-brand img { width: 54px; height: 54px; filter: drop-shadow(0 0 14px rgba(198, 163, 232, .22)); }
.analysis-title { margin-top: 8px; font-size: clamp(34px, 6vw, 56px); }
.analysis-copy { max-width: 620px; margin-inline: auto; color: rgba(238, 231, 246, .78); }
.analysis-card-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  max-width: 590px; margin: 34px auto 8px;
}
.analysis-card-strip article { min-width: 0; }
.analysis-card-thumb {
  width: min(118px, 24vw); aspect-ratio: 350 / 518; margin: 0 auto 10px;
  position: relative; overflow: hidden; border-radius: 10px;
  border: 1px solid rgba(205, 176, 226, .42);
  box-shadow: 0 12px 32px rgba(6, 3, 13, .42), 0 0 20px rgba(154, 111, 198, .08);
  animation: analysisCardFloat 3.8s ease-in-out infinite;
}
.analysis-card-strip article:nth-child(2) .analysis-card-thumb { animation-delay: -.9s; }
.analysis-card-strip article:nth-child(3) .analysis-card-thumb { animation-delay: -1.8s; }
.analysis-card-thumb::after {
  content: ''; position: absolute; inset: -20% -70%;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%);
  transform: translateX(-45%); animation: analysisSheen 4.8s ease-in-out infinite;
}
.analysis-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.analysis-card-strip small { display: block; color: rgba(191, 158, 221, .7); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.analysis-card-strip b { display: block; margin-top: 3px; color: rgba(247, 242, 250, .9); font: 500 14px/1.25 Georgia, 'Times New Roman', serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.analysis-orbit {
  position: relative; width: 156px; height: 156px; margin: 34px auto 28px;
  display: grid; place-items: center;
}
.analysis-orbit-ring { position: absolute; border: 1px solid rgba(188, 151, 217, .22); border-radius: 50%; }
.analysis-orbit-ring.ring-a { inset: 8px; animation: orbitSpin 7s linear infinite; border-top-color: rgba(221, 190, 238, .7); }
.analysis-orbit-ring.ring-b { inset: 26px; animation: orbitSpin 5s linear infinite reverse; border-right-color: rgba(172, 127, 205, .68); }
.analysis-lotus {
  width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 111, 191, .18), rgba(67, 42, 90, .07));
  box-shadow: 0 0 40px rgba(157, 118, 198, .15);
  animation: analysisPulse 2.2s ease-in-out infinite;
}
.analysis-lotus img { width: 56px; }
.analysis-orbit .spark { position: absolute; color: rgba(220, 190, 235, .75); font-size: 11px; animation: sparkPulse 2s ease-in-out infinite; }
.analysis-orbit .s1 { top: 9px; left: 32px; }
.analysis-orbit .s2 { right: 6px; top: 72px; animation-delay: -.7s; }
.analysis-orbit .s3 { bottom: 10px; left: 58px; animation-delay: -1.3s; }

.analysis-progress-wrap { max-width: 620px; margin: 0 auto; }
.analysis-progress {
  height: 8px; overflow: hidden; border-radius: 999px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(187, 154, 211, .15);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.25);
}
.analysis-progress > span {
  display: block; height: 100%; width: 8%; border-radius: inherit;
  background: linear-gradient(90deg, #6f4d88 0%, #9b74b3 48%, #c6a2d4 100%);
  box-shadow: 0 0 14px rgba(183, 143, 208, .24);
  transition: width .42s cubic-bezier(.2,.7,.2,1);
}
.analysis-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 10px; color: rgba(229, 218, 237, .72); font-size: 13px; }
.analysis-progress-meta b { color: rgba(218, 190, 232, .92); font-weight: 600; }
.analysis-stage-list {
  max-width: 520px; margin: 28px auto 0; display: grid; gap: 11px; text-align: left;
}
.analysis-stage-list > div { display: flex; align-items: center; gap: 11px; color: rgba(221, 213, 228, .35); font-size: 13px; transition: color .3s ease, transform .3s ease; }
.analysis-stage-list i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: rgba(181, 149, 205, .18); box-shadow: 0 0 0 4px rgba(146, 104, 177, .03); }
.analysis-stage-list > div.active { color: rgba(242, 235, 247, .9); transform: translateX(4px); }
.analysis-stage-list > div.active i { background: #b591ca; box-shadow: 0 0 14px rgba(181,145,202,.36), 0 0 0 4px rgba(181,145,202,.08); animation: stageDot 1.2s ease-in-out infinite; }
.analysis-stage-list > div.done { color: rgba(184, 160, 199, .6); }
.analysis-stage-list > div.done i { background: #77558e; }
.analysis-note { max-width: 600px; margin: 28px auto 0; color: rgba(203, 191, 211, .56); font-size: 12px; line-height: 1.8; }
.analysis-retry { width: min(360px, 100%); margin-top: 24px; }
.analysis-retry[hidden] { display: none !important; }

.ai-headline {
  margin: 2px 0 16px; text-align: center; color: #d5b8df;
  font: 500 clamp(22px, 4vw, 34px)/1.25 Georgia, 'Times New Roman', serif;
}
.direct-answer-panel { text-align: center; }
.direct-answer-panel p { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.85; color: rgba(244, 237, 248, .9); }
.ai-theme { display: inline-flex; margin: 2px 0 10px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(188, 151, 211, .2); background: rgba(151, 113, 176, .08); color: #c7a5d1; font-size: 12px; }
.action-panel #actionList li { display: flex; align-items: flex-start; gap: 10px; }
.action-panel #actionList li span { color: #b890c7; flex: 0 0 auto; }
.result-closing {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  max-width: 780px; margin: 18px auto 28px; padding: 18px 24px;
  color: rgba(222, 207, 230, .72); text-align: center; font-size: 13px; line-height: 1.7;
}
.result-closing span { color: #aa7ebe; }

@keyframes analysisCardFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(.4deg); } }
@keyframes analysisSheen { 0%, 60% { transform: translateX(-55%); opacity: 0; } 72% { opacity: .7; } 88%,100% { transform: translateX(55%); opacity: 0; } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes analysisPulse { 0%,100% { transform: scale(.98); opacity: .85; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes sparkPulse { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: .85; transform: scale(1.15); } }
@keyframes stageDot { 0%,100% { transform: scale(.9); opacity: .65; } 50% { transform: scale(1.2); opacity: 1; } }

@media (max-width: 700px) {
  .analysis-shell { width: min(100% - 26px, 600px); padding-top: 44px; }
  .analysis-card-strip { gap: 10px; margin-top: 28px; }
  .analysis-card-strip b { font-size: 12px; }
  .analysis-orbit { width: 132px; height: 132px; margin-top: 24px; }
  .analysis-stage-list { padding-inline: 10px; }
  .direct-answer-panel p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .analysis-card-thumb, .analysis-card-thumb::after, .analysis-orbit-ring, .analysis-lotus, .analysis-orbit .spark, .analysis-stage-list > div.active i { animation: none !important; }
}

/* Responsive hardening: compact phones, tablets, foldables and safe areas. */
.selected-cards-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.reading-card,
.reading-card .card-image,
.position-panel > div,
.locked-list > div > * {
  min-width: 0;
}
.reading-card .card-image {
  display: block;
  height: auto;
  object-fit: cover;
}
.reading-card h3,
.reading-card .position,
.locked-list h3,
.locked-list p {
  overflow-wrap: anywhere;
  word-break: normal;
}
.locked-list > div {
  grid-template-columns: 78px minmax(0, 1fr) 30px;
}
.drawer {
  width: min(340px, 100%);
  right: -100%;
  height: 100dvh;
}
.drawer.open { right: 0; }

@media (max-width: 700px) {
  .topbar {
    height: calc(72px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(18px, calc(env(safe-area-inset-left) + 12px));
    padding-right: max(18px, calc(env(safe-area-inset-right) + 12px));
  }
  .screen { min-height: calc(100svh - 72px - env(safe-area-inset-top)); }
  .page-shell,
  .home-inner,
  .result-shell {
    padding-left: max(18px, calc(env(safe-area-inset-left) + 14px));
    padding-right: max(18px, calc(env(safe-area-inset-right) + 14px));
    padding-bottom: max(54px, calc(env(safe-area-inset-bottom) + 32px));
  }
  .result-shell {
    padding-left: max(14px, calc(env(safe-area-inset-left) + 12px));
    padding-right: max(14px, calc(env(safe-area-inset-right) + 12px));
  }
  .drawer {
    padding-top: max(80px, calc(env(safe-area-inset-top) + 64px));
    padding-right: max(28px, calc(env(safe-area-inset-right) + 20px));
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
  }
  .toast { bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)); }
  .reading-card h3 {
    min-height: 2.35em;
    margin-top: 8px;
    font-size: clamp(11px, 4vw, 15px);
    line-height: 1.15;
    letter-spacing: .025em;
  }
  .reading-card .position {
    min-height: 2.2em;
    font-size: clamp(10px, 3.4vw, 15px);
    line-height: 1.1;
    letter-spacing: .08em;
  }
}

@media (max-width: 420px) {
  .selected-cards-row { gap: 6px; }
  .reading-card .card-image { border-width: 2px; border-radius: 8px; }
  .locked-list > div {
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    gap: 10px;
    min-height: 76px;
    padding: 8px 10px;
  }
  .round-icon { width: 44px; height: 44px; font-size: 24px; }
  .locked-list h3 { font-size: 18px; line-height: 1.15; }
  .locked-list p { font-size: 12px; }
}

/* Keep wide decorative artwork from becoming a horizontal page scroller. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
body { touch-action: pan-y pinch-zoom; }
.home-inner,
.hero-card-wrap,
.shuffle-stage {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body,
  .home-inner,
  .hero-card-wrap,
  .shuffle-stage {
    overflow-x: clip;
  }
}