/* =============================================
Звёздный Оракул — Neon Mysticism (Mobile-First)
============================================= */
:root{--color-bg-deep:#0a0414;--color-bg-mid:#14082a;--color-bg-warm:#240d1a;--color-burgundy:#3d1535;--color-purple:#2f1560;--color-purple-soft:#6b3fa0;--color-purple-glow:rgba(107,63,160,.4);--color-gold:#d4af37;--color-gold-bright:#f7d44a;--color-gold-glow:rgba(247,212,74,.5);--color-gold-dim:rgba(247,212,74,.12);--color-neon-purple:#b388ff;--color-neon-pink:#ff6ebe;--color-text:#ede7f6;--color-text-muted:rgba(237,231,246,.72);--font-heading:'Forum','Times New Roman',serif;--font-body:'Spectral',Georgia,serif;--header-height:72px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow-x:hidden;overflow-y:auto;position:relative;min-height:100vh}
body{font-family:var(--font-body);font-size:18px;font-weight:400;line-height:1.6;color:var(--color-text);background:var(--color-bg-deep);min-height:100vh;overflow-x:hidden;overflow-y:auto;position:relative;-webkit-font-smoothing:antialiased}
/* Splash */
#splash-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 80% 60% at 50% 40%,#1a0a3e,#0a0414);transition:opacity .6s ease;pointer-events:none}.splash-inner{text-align:center}.splash-star{font-size:2.8rem;color:#f7d44a;text-shadow:0 0 30px rgba(247,212,74,.5);animation:splash-pulse 2s ease-in-out infinite;margin-bottom:12px}.splash-title{font-family:var(--font-heading);font-size:1.4rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#f7d44a;text-shadow:0 0 30px rgba(247,212,74,.5)}.splash-sub{font-family:var(--font-body);font-size:.9rem;color:rgba(237,231,246,.5);margin-top:6px;letter-spacing:.18em}@keyframes splash-pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
/* Fate intro — fades in after splash, fully hidden when not visible */
#fate-intro{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 80% 60% at 50% 40%,#1a0a3e,#0a0414);opacity:0;transition:opacity .8s ease;pointer-events:none}#fate-intro.visible{opacity:1;pointer-events:auto}#fate-intro.fade-out{opacity:0;pointer-events:none}#fate-intro .oracle-text{color:rgba(237,231,246,.85);font-size:1.3rem}
/* Oracle screen */
.oracle{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;min-height:60dvh;opacity:0;transition:opacity 1s ease}.oracle:not([hidden]){opacity:1}.oracle[hidden]{display:none}.oracle-inner{text-align:center;animation:oracle-fade .8s ease both}.oracle-star{font-size:2rem;color:#f7d44a;text-shadow:0 0 20px rgba(247,212,74,.4);animation:splash-pulse 2.5s ease-in-out infinite;margin-bottom:16px}.oracle-text{font-family:var(--font-body);font-size:1.2rem;color:rgba(237,231,246,.7);letter-spacing:.06em}@keyframes oracle-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* Bottom nav (unique definition) */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;display:none;background:rgba(10,4,20,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(247,212,74,.12);padding-bottom:env(safe-area-inset-bottom,4px);opacity:0;transition:opacity .6s ease .3s}.bottom-nav:not([hidden]){display:flex;opacity:1}.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 8px;background:none;border:none;color:rgba(237,231,246,.35);cursor:pointer;transition:color .3s;-webkit-tap-highlight-color:transparent;min-width:0}.nav-btn--active{color:var(--color-gold-bright)}.nav-btn__icon{font-size:1.15rem;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0 auto}.nav-btn__icon .nav-svg{width:22px;height:22px;color:rgba(237,231,246,.35);filter:none;transition:color .3s,filter .3s}.nav-btn--active .nav-btn__icon .nav-svg{color:var(--color-gold-bright);filter:drop-shadow(0 0 8px var(--color-gold-glow)) drop-shadow(0 0 16px rgba(247,212,74,.25));animation:nav-icon-glow 2.5s ease-in-out infinite}@keyframes nav-icon-glow{0%,100%{filter:drop-shadow(0 0 6px var(--color-gold-glow)) drop-shadow(0 0 12px rgba(247,212,74,.15))}50%{filter:drop-shadow(0 0 12px var(--color-gold-glow)) drop-shadow(0 0 24px rgba(247,212,74,.4))}}.nav-btn__label{font-family:var(--font-heading);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
/* Subs page */
.subs-screen{max-width:420px;margin:0 auto;padding:24px 0}.subs-star{font-size:1.6rem;color:var(--color-gold-dim);text-shadow:0 0 16px var(--color-gold-glow);text-align:center;margin-bottom:12px}.subs-title{font-family:var(--font-heading);font-size:.9rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--color-gold);text-align:center;margin-bottom:8px}.subs-text{font-family:var(--font-body);font-size:1rem;line-height:1.6;text-align:center;color:var(--color-text-muted);margin-bottom:28px}.subs-plans{display:flex;flex-direction:column;gap:12px}.subs-plan{padding:20px;background:rgba(255,255,255,.03);border:1px solid rgba(247,212,74,.15);border-radius:14px;text-align:center}.subs-plan--featured{border-color:rgba(247,212,74,.35);background:rgba(247,212,74,.04)}.subs-plan-title{font-family:var(--font-heading);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold);margin-bottom:4px}.subs-plan-price{font-family:var(--font-heading);font-size:1.6rem;font-weight:400;color:var(--color-gold-bright);text-shadow:0 0 12px var(--color-gold-glow)}.subs-plan-desc{font-family:var(--font-body);font-size:.85rem;color:var(--color-text-muted);margin:4px 0 12px}.subs-btn{width:100%;padding:14px;font-family:var(--font-heading);font-size:.72rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;border:none;border-radius:12px;cursor:pointer;color:var(--color-bg-deep);background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);box-shadow:0 4px 20px var(--color-gold-glow);transition:transform .2s,box-shadow .3s}.subs-btn:active{transform:scale(.96)}.subs-btn--primary{box-shadow:0 4px 28px var(--color-gold-glow),0 0 40px rgba(247,212,74,.1)}.subs-btn--primary:hover{box-shadow:0 6px 40px rgba(247,212,74,.55)}.tab-content{display:block}.tab-content[hidden]{display:none}.main{padding-bottom:calc(80px + env(safe-area-inset-bottom,8px))}
#tab-daily,#tab-divination{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 20px 90px 20px !important;box-sizing:border-box}
#mystic-transition{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:24px;font-style:italic;text-align:center;opacity:0;transition:opacity 1s ease;z-index:1000;text-shadow:0 0 15px rgba(212,175,55,.8);width:80%}
/* Clearance for the fixed bottom nav lives HERE and nowhere else. The nav measures
~60px including its safe-area padding; 76px clears it with a comfortable gap. The
tabs inside used to stack their own 88px on top of an older 120px, which left a
screenful of dead scroll under the last card. */
#main-dashboard{padding:0 20px calc(76px + env(safe-area-inset-bottom,0px)) !important;min-height:100dvh;opacity:0;transition:opacity 0.25s ease;height:100%;transform:translateZ(0);will-change:transform;backface-visibility:hidden;position:relative;z-index:5}
.bottom-nav{opacity:0;transition:opacity 1s ease}
.fade-in-active{opacity:1!important}
.fortune-teller-img {
display: block !important;
width: 100%;
max-width: 280px !important;
height: auto !important;
object-fit: contain;
margin: -115px auto -35px auto !important;
opacity: 1 !important;
visibility: visible !important;
flex-shrink: 0;
z-index: 1;
position: relative;
filter: drop-shadow(0 0 15px rgba(179,136,255,0.15));
animation: mystic-breathe 4s ease-in-out infinite !important;
}
@keyframes mystic-breathe {
0%, 100% { filter: drop-shadow(0 0 15px rgba(179,136,255,0.15)); transform: translateY(0); }
50% { filter: drop-shadow(0 0 35px rgba(179,136,255,0.6)); transform: translateY(-4px); }
}
.greeting-text {
color: #f7d44a;
font-size: 26px;
text-align: center;
margin-top: 10px;
margin-bottom: 0px !important;
font-weight:400;
text-shadow: 0 0 15px rgba(247,212,74,0.6), 0 0 30px rgba(179,136,255,0.4);
z-index: 10;
position: relative;
font-family: var(--font-heading);
letter-spacing: 2px;
text-transform: uppercase;
}
.mystic-cards-container {
display: block !important;
width: 100%;
margin-top: 50px !important;
margin-bottom: 40px !important;
padding: 0 20px;
box-sizing: border-box;
}
.mystic-cards-container .mystic-card {
margin: 0 auto 20px auto !important;
width: 100% !important;
max-width: 360px !important;
}
.mystic-cards-container .mystic-card:last-child {
margin-bottom: 0 !important;
}
.mystic-card {
position: relative;
width: 100% !important;
max-width: 360px;
height: 130px !important;
border-radius: 24px;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 20px;
flex-shrink: 0;
box-sizing: border-box;
cursor: pointer;
z-index: 2;
background: rgba(20, 8, 42, 0.4) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(247, 212, 74, 0.3);
box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 0 20px rgba(179,136,255,0.15);
/* 3D Magic */
transform-style: preserve-3d;
transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale3d(1, 1, 1);
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
will-change: transform;
}
.mystic-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 24px;
background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.35), transparent 60%);
mix-blend-mode: overlay;
z-index: 10;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.mystic-card.is-touched {
transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale3d(0.96, 0.96, 0.96);
box-shadow: 0 25px 50px rgba(0,0,0,0.7), inset 0 0 30px rgba(247, 212, 74, 0.3);
border: 1px solid rgba(247, 212, 74, 0.6);
}
.mystic-card.is-touched::before {
opacity: 1;
}
.mystic-card .card-bg {
opacity: 0.7;
mix-blend-mode: overlay;
}
.card-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
.gradient-overlay{position:absolute;bottom:0;left:0;width:100%;height:60%;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);z-index:2}
.card-title{position:relative;z-index:3;color:#fff;font-size:18px;font-weight:700}
/* ===== PREMIUM (LOCKED) SPREADS ===== */
.readings-premium-header{display:flex;align-items:center;gap:14px;width:100%;max-width:360px;margin:34px auto 20px auto}
.readings-premium-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(247,212,74,.4),transparent)}
.readings-premium-title{font-family:var(--font-heading);font-size:.72rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--color-gold);text-shadow:0 0 14px var(--color-gold-glow);white-space:nowrap}
.mystic-card--locked{align-items:center !important;justify-content:flex-start;gap:16px;background:linear-gradient(135deg,rgba(30,10,53,.45),rgba(20,8,42,.3)) !important;border:1px solid rgba(247,212,74,.34);box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 0 24px rgba(179,136,255,.12);overflow:hidden}
/* The diagonal hatch is gone. It was barrier tape drawn over a product: fine while these
spreads were shut to non-subscribers, wrong now that they open to everybody and simply
cost dust. What remains is a warmer wash that lets the art through. */
.mystic-card--locked::after{content:'';position:absolute;inset:0;border-radius:24px;background:linear-gradient(180deg,transparent 40%,rgba(10,4,20,.35));z-index:2;pointer-events:none}
.locked-card__aura{position:absolute;top:-40%;right:-10%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(179,136,255,.28),transparent 65%);filter:blur(6px);z-index:1;pointer-events:none}
.locked-card__glyph{position:relative;z-index:3;flex-shrink:0;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:26px;border-radius:14px;background:rgba(10,4,20,.5);border:1px solid rgba(247,212,74,.28);box-shadow:inset 0 0 16px rgba(179,136,255,.25);filter:drop-shadow(0 0 8px rgba(247,212,74,.35))}
.locked-card__body{position:relative;z-index:3;display:flex;flex-direction:column;gap:4px;min-width:0}
.mystic-card--locked .card-title{font-family:var(--font-heading);font-size:1.02rem;font-weight:400;letter-spacing:.03em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 14px rgba(179,136,255,.4);line-height:1.2}
.locked-card__sub{font-family:var(--font-body);font-size:.92rem;color:rgba(237,231,246,.92);text-shadow:0 1px 8px rgba(0,0,0,.85);line-height:1.3}
.locked-badge{position:absolute;top:12px;right:12px;z-index:4;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--color-gold-bright);background:rgba(10,4,20,.6);border:1px solid rgba(247,212,74,.4);box-shadow:0 0 14px rgba(247,212,74,.2)}
.mystic-card--locked:hover,.mystic-card--locked:focus-visible{border-color:rgba(247,212,74,.5);box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 0 26px rgba(247,212,74,.14);outline:none}
.mystic-card--locked:hover .locked-badge,.mystic-card--locked:focus-visible .locked-badge{box-shadow:0 0 20px rgba(247,212,74,.5)}
/* Image-backed locked cards (Career / Crossroads / Celtic) — illustration + locked veil */
.mystic-card--img{align-items:flex-end !important;justify-content:flex-start;gap:0;padding:18px 20px;background:rgba(20,8,42,.35) !important}
.mystic-card--img::after{opacity:.3}
.mystic-card--img .card-bg{opacity:.95;mix-blend-mode:normal;filter:brightness(.66) saturate(.92)}
.mystic-card--img .locked-card__body{z-index:3;gap:3px}
.mystic-card--img .card-title{font-size:1.08rem;text-shadow:0 2px 10px rgba(0,0,0,.8),0 0 14px rgba(179,136,255,.4)}
.mystic-card--img .locked-card__sub{color:rgba(237,231,246,.85);text-shadow:0 1px 6px rgba(0,0,0,.7)}
/* Everything else stays from original */
.sound-toggle{position:fixed;top:16px;right:16px;z-index:100;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(10,4,20,.7);border:1px solid rgba(247,212,74,.2);border-radius:50%;font-size:1rem;cursor:pointer;backdrop-filter:blur(8px);transition:border-color .3s,box-shadow .3s}
.sound-toggle:hover{border-color:rgba(247,212,74,.5);box-shadow:0 0 12px rgba(247,212,74,.2)}
.app{position:relative;min-height:100dvh;display:flex;flex-direction:column;isolation:isolate}
.bg-layer{position:fixed;inset:0;pointer-events:none;z-index:0}
.bg-stars{background:radial-gradient(ellipse 90% 70% at 50% 0%,var(--color-purple) 0%,transparent 65%),radial-gradient(ellipse 70% 60% at 80% 100%,var(--color-burgundy) 0%,transparent 55%),radial-gradient(ellipse 50% 50% at 10% 80%,#2a0a20 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 20% 40%,var(--color-purple) 0%,transparent 60%),linear-gradient(180deg,var(--color-bg-mid) 0%,var(--color-bg-deep) 50%,var(--color-bg-warm) 100%);overflow:hidden}
.bg-stars::before,.bg-stars::after{content:'';position:absolute;inset:0;background-repeat:repeat}
.bg-stars::before{background-image:radial-gradient(1px 1px at 5% 8%,rgba(255,255,255,.7) 50%,transparent 50%),radial-gradient(1px 1px at 15% 30%,rgba(255,255,255,.5) 50%,transparent 50%),radial-gradient(1px 1px at 22% 55%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(1px 1px at 30% 80%,rgba(255,255,255,.6) 50%,transparent 50%),radial-gradient(1px 1px at 38% 12%,rgba(255,255,255,.5) 50%,transparent 50%),radial-gradient(1px 1px at 45% 45%,rgba(255,255,255,.3) 50%,transparent 50%),radial-gradient(1px 1px at 52% 72%,rgba(255,255,255,.6) 50%,transparent 50%),radial-gradient(1px 1px at 60% 18%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(1px 1px at 68% 60%,rgba(255,255,255,.7) 50%,transparent 50%),radial-gradient(1px 1px at 75% 35%,rgba(255,255,255,.5) 50%,transparent 50%),radial-gradient(1px 1px at 82% 85%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(1px 1px at 90% 42%,rgba(255,255,255,.6) 50%,transparent 50%),radial-gradient(1px 1px at 95% 15%,rgba(255,255,255,.5) 50%,transparent 50%),radial-gradient(1px 1px at 10% 92%,rgba(255,255,255,.3) 50%,transparent 50%),radial-gradient(1px 1px at 50% 95%,rgba(255,255,255,.5) 50%,transparent 50%);background-size:100% 100%;animation:twinkle-slow 6s ease-in-out infinite alternate}
.bg-stars::after{background-image:radial-gradient(1.5px 1.5px at 12% 22%,var(--color-gold-bright) 50%,transparent 50%),radial-gradient(1.5px 1.5px at 28% 58%,var(--color-neon-purple) 50%,transparent 50%),radial-gradient(1px 1px at 35% 10%,rgba(255,255,255,.9) 50%,transparent 50%),radial-gradient(1.5px 1.5px at 48% 35%,var(--color-gold) 50%,transparent 50%),radial-gradient(1px 1px at 55% 88%,rgba(255,255,255,.8) 50%,transparent 50%),radial-gradient(1.5px 1.5px at 65% 15%,var(--color-neon-pink) 50%,transparent 50%),radial-gradient(1.5px 1.5px at 72% 70%,var(--color-gold-bright) 50%,transparent 50%),radial-gradient(1px 1px at 85% 45%,rgba(255,255,255,.7) 50%,transparent 50%),radial-gradient(1.5px 1.5px at 92% 78%,var(--color-neon-purple) 50%,transparent 50%),radial-gradient(1px 1px at 42% 65%,rgba(255,255,255,.6) 50%,transparent 50%),radial-gradient(1px 1px at 8% 50%,rgba(255,255,255,.5) 50%,transparent 50%);background-size:100% 100%;animation:twinkle-fast 3.5s ease-in-out infinite alternate,float-particles 20s ease-in-out infinite alternate}
@keyframes twinkle-slow{0%{opacity:.5}100%{opacity:1}}
@keyframes twinkle-fast{0%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}100%{opacity:.6;transform:scale(1)}}
@keyframes float-particles{0%{transform:translate(0,0) scale(1)}25%{transform:translate(2%,-1%) scale(1.02)}50%{transform:translate(-1%,1%) scale(.98)}75%{transform:translate(1%,2%) scale(1.01)}100%{transform:translate(-2%,-1%) scale(1)}}
.bg-fog{background:radial-gradient(ellipse 140% 90% at 25% 100%,rgba(107,63,160,.2) 0%,transparent 55%),radial-gradient(ellipse 120% 80% at 75% 0%,rgba(61,21,53,.25) 0%,transparent 50%),radial-gradient(ellipse 100% 60% at 50% 50%,rgba(107,63,160,.08) 0%,transparent 70%);animation:fog-drift 25s ease-in-out infinite alternate}
.bg-fog::before{content:'';position:absolute;inset:-30%;background:radial-gradient(ellipse 100% 70% at 60% 50%,rgba(247,212,74,.03) 0%,transparent 70%),radial-gradient(ellipse 80% 60% at 20% 60%,rgba(179,136,255,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 30%,rgba(255,110,190,.05) 0%,transparent 60%);animation:fog-drift-reverse 30s ease-in-out infinite alternate}
@keyframes fog-drift{0%{transform:translateX(-4%) translateY(0);opacity:.6}100%{transform:translateX(4%) translateY(-3%);opacity:1}}
@keyframes fog-drift-reverse{0%{transform:translateX(5%) translateY(3%);opacity:.4}100%{transform:translateX(-5%) translateY(-2%);opacity:.8}}
.bg-glow{background:radial-gradient(ellipse 80% 50% at 50% -15%,rgba(247,212,74,.08) 0%,rgba(107,63,160,.05) 30%,transparent 70%)}
#space-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.header{position:sticky;top:0;z-index:10;padding-top:calc(var(--safe-top) + 12px);padding-bottom:0;background:linear-gradient(180deg,rgba(10,4,20,.95) 0%,rgba(10,4,20,.8) 60%,transparent 100%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.header__inner{display:flex;align-items:center;gap:12px;padding:0 20px 14px}
.header__symbol{flex-shrink:0;width:40px;height:40px;color:var(--color-gold-bright);filter:drop-shadow(0 0 12px var(--color-gold-glow)) drop-shadow(0 0 24px rgba(247,212,74,.2));animation:symbol-pulse 3s ease-in-out infinite}
@keyframes symbol-pulse{0%,100%{filter:drop-shadow(0 0 8px var(--color-gold-glow)) drop-shadow(0 0 20px rgba(247,212,74,.15));transform:scale(1)}50%{filter:drop-shadow(0 0 20px rgba(247,212,74,.7)) drop-shadow(0 0 40px rgba(247,212,74,.3));transform:scale(1.05)}}
.header__text{flex:1;min-width:0;text-align:center}
.header__title{font-family:var(--font-heading);font-size:1.25rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold-bright);text-shadow:0 0 30px var(--color-gold-glow),0 0 60px rgba(247,212,74,.15);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header__subtitle{font-family:'Montserrat','Arial',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--color-gold-dim);margin-top:4px;text-align:center}
.header__close{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(247,212,74,.2);border-radius:50%;color:var(--color-text-muted);font-size:1rem;cursor:pointer;transition:background .3s,border-color .3s,color .3s,box-shadow .3s,transform .2s;-webkit-tap-highlight-color:transparent;position:relative;z-index:11}
.header__close:hover,.header__close:focus-visible{background:rgba(247,212,74,.12);border-color:rgba(247,212,74,.5);color:var(--color-gold-bright);box-shadow:0 0 16px rgba(247,212,74,.2);outline:none}
.header__close:active{transform:scale(.88)}
.header__divider{height:1px;margin:0 20px;background:linear-gradient(90deg,transparent 0%,rgba(247,212,74,.6) 15%,rgba(179,136,255,.4) 50%,rgba(247,212,74,.6) 85%,transparent 100%);opacity:.6}
.main{position:relative;z-index:1;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 20px calc(var(--safe-bottom) + 24px)}
.main--hidden{display:none}
.home{max-width:420px;margin:0 auto;opacity:0;transform:translateY(20px);transition:opacity .8s ease .1s,transform .8s ease .1s}
.home--visible{opacity:1;transform:translateY(0)}
.home__greeting{font-family:var(--font-body);font-size:1.1rem;font-style:italic;text-align:center;color:var(--color-text-muted);margin-bottom:32px}
.home__greeting strong{color:var(--color-gold-bright);font-style:normal;font-weight:500;text-shadow:0 0 12px var(--color-gold-glow)}
.home__zodiac{display:inline-block;margin-left:4px;color:var(--color-text-muted)}
.section-title{font-family:var(--font-heading);font-size:.85rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold);text-align:center;margin-bottom:20px;text-shadow:0 0 16px var(--color-gold-glow)}
.section-title::after{content:'';display:block;width:40px;height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,var(--color-gold),transparent)}
.tarot{margin-bottom:40px}
.tarot__hint{font-family:var(--font-body);font-size:.9rem;font-style:italic;text-align:center;color:var(--color-text-muted);margin-bottom:20px;animation:hint-pulse 3s ease-in-out infinite}
@keyframes hint-pulse{0%,100%{opacity:.6}50%{opacity:1}}
.tarot__cards{display:flex;justify-content:center;gap:12px;perspective:1200px}
.tarot-card{position:relative;flex:1;max-width:110px;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s ease}
.tarot-card:disabled{cursor:default}
.tarot-card:not(:disabled):hover{transform:translateY(-4px)}
.tarot-card__position{display:block;font-family:var(--font-heading);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);text-align:center;margin-bottom:8px;opacity:.8;transition:opacity .3s ease}
.tarot-card:hover .tarot-card__position{opacity:1;color:var(--color-gold)}
.tarot-card__inner{position:relative;width:100%;aspect-ratio:2/3;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.tarot-card--flipped .tarot-card__inner{transform:rotateY(180deg)}
.tarot-card__face{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.tarot-card__face--back{background:linear-gradient(145deg,#1e0a35 0%,#14082a 40%,#2a0a20 100%);border:1.5px solid rgba(247,212,74,.35);box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 20px rgba(107,63,160,.15),inset 0 0 40px rgba(107,63,160,.15);transition:border-color .3s,box-shadow .3s}
.tarot-card__back-design{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(247,212,74,.03) 8px,rgba(247,212,74,.03) 9px),repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(247,212,74,.03) 8px,rgba(247,212,74,.03) 9px);position:relative}
.tarot-card__back-design::before{content:'';position:absolute;inset:6px;border:1px solid rgba(247,212,74,.1);border-radius:6px}
.tarot-card__back-star{font-size:1.8rem;color:var(--color-gold-bright);text-shadow:0 0 20px var(--color-gold-glow),0 0 40px rgba(247,212,74,.2);animation:symbol-pulse 3s ease-in-out infinite}
.tarot-card__face--front{transform:rotateY(180deg);background:linear-gradient(160deg,#180a2e 0%,#1e0a35 40%,#2a0a20 100%);border:1.5px solid rgba(247,212,74,.5);box-shadow:0 4px 28px rgba(247,212,74,.12),0 0 30px rgba(107,63,160,.1),inset 0 0 40px rgba(107,63,160,.12);transition:border-color .3s,box-shadow .3s}
.tarot-card__front-content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 6px}
.tarot-card__symbol{font-size:1.8rem;color:var(--color-gold-bright);text-shadow:0 0 16px var(--color-gold-glow),0 0 32px rgba(247,212,74,.15)}
.tarot-card__number{font-family:var(--font-heading);font-size:.6rem;letter-spacing:.15em;color:var(--color-text-muted);opacity:.7}
.tarot-card__name{font-family:var(--font-heading);font-size:.6rem;font-weight:400;letter-spacing:.06em;text-align:center;color:var(--color-gold-bright);line-height:1.25;text-shadow:0 0 8px var(--color-gold-glow)}
.tarot-card__ornament{font-size:.4rem;letter-spacing:.4em;color:rgba(247,212,74,.3);margin-top:auto;padding-bottom:2px}
.tarot-card:not(.tarot-card--flipped):hover .tarot-card__face--back,.tarot-card:not(.tarot-card--flipped):focus-visible .tarot-card__face--back{border-color:rgba(247,212,74,.7);box-shadow:0 0 28px rgba(247,212,74,.3),0 0 56px rgba(107,63,160,.25),0 4px 24px rgba(0,0,0,.4),inset 0 0 40px rgba(107,63,160,.25)}
.tarot-card:not(.tarot-card--flipped):hover .tarot-card__back-star{text-shadow:0 0 40px var(--color-gold-glow),0 0 80px rgba(247,212,74,.3)}
.tarot-card--flipped:hover .tarot-card__face--front,.tarot-card--flipped:focus-visible .tarot-card__face--front{border-color:rgba(247,212,74,.8);box-shadow:0 0 32px rgba(247,212,74,.3),0 0 64px rgba(107,63,160,.2),0 4px 24px rgba(247,212,74,.12),inset 0 0 40px rgba(107,63,160,.2)}
.tarot-card:not(.tarot-card--flipped):active .tarot-card__inner{transform:scale(.94)}
.tarot-card--flipped .tarot-card__inner{transform:rotateY(180deg) rotateZ(.5deg)}
.tarot__flash{position:fixed;inset:0;z-index:9999;pointer-events:none;background:radial-gradient(circle,rgba(247,212,74,.7) 0%,rgba(179,136,255,.4) 30%,rgba(255,110,190,.2) 50%,transparent 70%);opacity:0;transition:opacity .15s ease;display:none}
/* ===== CARD OF THE DAY (single premium 3D flip) ===== */
#daily-card-screen{display:none;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;background:radial-gradient(ellipse 90% 60% at 50% 0%,#1e0a35 0%,transparent 60%),radial-gradient(ellipse 70% 50% at 50% 100%,#2a0a20 0%,transparent 55%),var(--color-bg-deep);z-index:1000;position:fixed;inset:0;width:100%;padding:64px 22px 40px;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}
.dc-back{position:absolute;top:16px;left:14px;z-index:2;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(247,212,74,.22);border-radius:50%;color:var(--color-gold-bright);cursor:pointer;transition:background .3s,border-color .3s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.dc-back:hover,.dc-back:focus-visible{background:rgba(247,212,74,.12);border-color:rgba(247,212,74,.5);box-shadow:0 0 16px rgba(247,212,74,.2);outline:none}
.dc-heading{font-family:var(--font-heading);font-size:1.35rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--color-gold-bright);text-shadow:0 0 24px var(--color-gold-glow);margin:6px 0 8px;text-align:center}
.dc-hint{font-family:var(--font-body);font-size:1rem;font-style:italic;color:var(--color-text-muted);text-align:center;max-width:300px;margin-bottom:26px;transition:opacity .5s ease}
/* ===== REAL CARD ARTWORK (deck_final -> public/cards) =====
The art is a full-bleed layer behind the face's own children, so every existing
caption keeps its markup. Reversed draws rotate the layer alone, never the name. */
.card-art-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;z-index:0}
.card-art-layer.is-reversed{transform:rotate(180deg)}
/* With art present the emoji placeholder is redundant, and the name needs a scrim. */
.has-art .dc-front-emoji,.has-art .ppf-emoji,.has-art .chat-draw-card__emoji,
.has-art .dc-back-glyph,.has-art .dc-back-ring{display:none}
.has-art .dc-front-name,.has-art .ppf-name,.has-art .chat-draw-card__name,.has-art .yn-card-name{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:26px 8px 9px;background:linear-gradient(to top,rgba(8,3,18,.94),rgba(8,3,18,.6) 55%,transparent)}
.yn-card-name{font-family:var(--font-heading);font-size:14px;margin-top:12px;line-height:1.2}
.has-art .reversed-tag{z-index:2}
/* Backs are painted as a background (see setBackArt) — WebKit drops ![]()
children of a
backface-hidden face inside preserve-3d, which left the chat draw backs blank. */
/* The art is layered OVER a gradient, not instead of it: if the image ever fails to
load the face still paints a card back rather than a transparent hole. */
.has-back-art{background-image:var(--card-back),radial-gradient(circle at 50% 34%,#2a1550,#140a2c) !important;background-blend-mode:var(--skin-blend,normal);background-size:cover,cover !important;background-position:center,center !important;background-repeat:no-repeat,no-repeat !important}
.has-back-art .dc-back-glyph,.has-back-art .dc-back-ring{display:none}
/* The "reversed" badge sits under the card so it never covers the artwork. */
.reversed-tag--under{position:static !important;margin:12px auto 0;align-self:center}
/* "About this card" — opens the library entry for a card that was just drawn. */
.card-info-btn{display:none;align-items:center;gap:6px;margin:0 auto 14px;padding:7px 16px;border-radius:999px;background:rgba(247,212,74,.1);border:1px solid rgba(247,212,74,.4);color:var(--color-gold-bright);font:600 .66rem var(--font-heading);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .25s,box-shadow .25s,transform .2s}
.card-info-btn:hover,.card-info-btn:focus-visible{background:rgba(247,212,74,.18);box-shadow:0 0 18px rgba(247,212,74,.28);outline:none}
.card-info-btn:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.card-art-layer.is-reversed{transform:rotate(180deg)}}
.dc-stage{perspective:1400px;margin-bottom:26px}
.dc-flip{position:relative;width:190px;height:310px;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.9,.25,1);background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:dc-levitate 4s ease-in-out infinite alternate}
.dc-flip.is-flipped{transform:rotateY(180deg);cursor:default;animation:none}
@keyframes dc-levitate{0%{transform:translateY(0)}100%{transform:translateY(-14px)}}
.dc-face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden}
.dc-face--back{background:linear-gradient(135deg,#2a0845,#3a1c61 55%,#1a0730);border:2px solid rgba(247,212,74,.55);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 40px rgba(179,136,255,.28),inset 0 0 30px rgba(179,136,255,.25);background-image:repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(247,212,74,.08) 11px,rgba(247,212,74,.08) 22px)}
.dc-back-glyph{font-size:2.6rem;color:var(--color-gold-bright);text-shadow:0 0 22px var(--color-gold-glow),0 0 44px rgba(247,212,74,.25);animation:symbol-pulse 3s ease-in-out infinite;z-index:1}
.dc-back-ring{position:absolute;width:118px;height:118px;border:1px solid rgba(247,212,74,.35);border-radius:50%;box-shadow:0 0 22px rgba(247,212,74,.15),inset 0 0 22px rgba(179,136,255,.2)}
.dc-face--front{transform:rotateY(180deg);background:linear-gradient(135deg,#160526,#3a1c61);border:2px solid rgba(247,212,74,.9);box-shadow:0 22px 55px rgba(0,0,0,.55),0 0 55px rgba(247,212,74,.4),inset 0 0 26px rgba(179,136,255,.35);padding:20px}
.dc-front-emoji{font-size:4.6rem;line-height:1;filter:drop-shadow(0 0 20px rgba(247,212,74,.5));margin-bottom:18px}
.dc-front-name{font-family:var(--font-heading);font-size:1rem;font-weight:400;letter-spacing:.08em;text-align:center;color:var(--color-gold-bright);text-shadow:0 0 12px var(--color-gold-glow);line-height:1.3}
.dc-reveal-btn{margin-bottom:26px;padding:15px 44px;font-family:var(--font-heading);font-size:.82rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--color-bg-deep);background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);border:none;border-radius:30px;cursor:pointer;box-shadow:0 4px 24px var(--color-gold-glow);transition:transform .2s,box-shadow .3s;-webkit-tap-highlight-color:transparent;animation:pulse-btn 2.4s ease-in-out infinite}
.dc-reveal-btn:hover,.dc-reveal-btn:focus-visible{transform:translateY(-2px);box-shadow:0 6px 32px rgba(247,212,74,.6);outline:none}
.dc-guidance{display:none;width:100%;max-width:340px;text-align:center;animation:share-fade-in .7s ease both}
.dc-loader{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0}
.dc-guidance-text{font-family:var(--font-body);font-size:1.12rem;line-height:1.7;color:var(--color-text);white-space:pre-wrap}
.dc-guidance-text::first-letter{color:var(--color-gold-bright)}
@media (prefers-reduced-motion:reduce){.dc-flip{animation:none;transition:transform .3s ease}.dc-back-glyph{animation:none}}
/* ===== PAST / PRESENT / FUTURE (paginated — one card per page) ===== */
#ppf-screen{display:none;flex-direction:column;align-items:center;min-height:100vh;background:radial-gradient(ellipse 90% 60% at 50% 0%,#1e0a35 0%,transparent 60%),radial-gradient(ellipse 70% 50% at 50% 100%,#2a0a20 0%,transparent 55%),var(--color-bg-deep);z-index:1000;position:fixed;inset:0;padding:60px 0 30px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ppf-heading{font-family:var(--font-heading);font-size:1.3rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--color-gold-bright);text-shadow:0 0 24px var(--color-gold-glow);margin:6px 0 8px;text-align:center}
.ppf-hint{font-family:var(--font-body);font-size:1rem;font-style:italic;color:var(--color-text-muted);text-align:center;max-width:300px;margin-bottom:12px;min-height:1.4em;transition:opacity .5s ease}
.ppf-dots{display:flex;gap:9px;margin-bottom:12px}
.ppf-dot{width:8px;height:8px;border-radius:50%;background:rgba(247,212,74,.22);transition:background .3s,box-shadow .3s,transform .3s}
.ppf-dot.is-done{background:rgba(247,212,74,.55)}
.ppf-dot.is-active{background:var(--color-gold-bright);box-shadow:0 0 10px var(--color-gold-glow);transform:scale(1.2)}
.ppf-viewport{position:relative;display:flex;align-items:center;justify-content:center;width:100%;flex:1;min-height:0}
.ppf-nav{position:absolute;top:44%;transform:translateY(-50%);z-index:6;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(10,4,20,.55);border:1px solid rgba(247,212,74,.32);color:var(--color-gold-bright);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s ease,box-shadow .3s,background .3s;-webkit-tap-highlight-color:transparent}
.ppf-nav.is-shown{opacity:1;pointer-events:auto}
.ppf-nav:hover,.ppf-nav:focus-visible{background:rgba(247,212,74,.14);box-shadow:0 0 16px rgba(247,212,74,.35);outline:none}
.ppf-nav--prev{left:8px}
.ppf-nav--next{right:8px}
.ppf-nav--next.is-shown{animation:ppf-nav-pulse 1.8s ease-in-out infinite}
@keyframes ppf-nav-pulse{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(4px)}}
/* Bottom padding clears the absolutely-positioned .reading-gate-banner (~84px
tall at bottom:16px) so the last lines of a long reading scroll above it
instead of hiding behind the "new spread in HH:MM:SS" plate. */
.ppf-pages{position:relative;width:100%;max-width:320px;height:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;padding:4px 16px 116px;box-sizing:border-box;scrollbar-width:none}
.ppf-pages::-webkit-scrollbar{display:none}
.ppf-page{display:none;flex-direction:column;align-items:center;width:100%;perspective:1200px}
.ppf-page.is-current{display:flex;animation:ppf-page-in .45s ease both}
@keyframes ppf-page-in{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
.ppf-stage__label{font-family:var(--font-heading);font-size:.72rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--color-gold);text-shadow:0 0 12px var(--color-gold-glow);margin-bottom:14px}
.ppf-flip{position:relative;width:150px;height:246px;flex-shrink:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.9,.25,1);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ppf-flip.is-flipped{transform:rotateY(180deg);cursor:default}
.ppf-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden}
.ppf-face--back{background:linear-gradient(135deg,#2a0845,#3a1c61 55%,#1a0730);border:2px solid rgba(247,212,74,.5);box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 30px rgba(179,136,255,.25),inset 0 0 24px rgba(179,136,255,.22);background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(247,212,74,.07) 10px,rgba(247,212,74,.07) 20px)}
.ppf-face--back .dc-back-glyph{font-size:2rem}
.ppf-face--back .dc-back-ring{width:96px;height:96px}
.ppf-face--front{transform:rotateY(180deg);background:linear-gradient(135deg,#160526,#3a1c61);border:2px solid rgba(247,212,74,.9);box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 44px rgba(247,212,74,.35),inset 0 0 22px rgba(179,136,255,.3);padding:14px}
.ppf-emoji{font-size:3.4rem;line-height:1;filter:drop-shadow(0 0 16px rgba(247,212,74,.5));margin-bottom:14px}
.ppf-name{font-family:var(--font-heading);font-size:.82rem;font-weight:400;letter-spacing:.05em;text-align:center;color:var(--color-gold-bright);text-shadow:0 0 10px var(--color-gold-glow);line-height:1.25}
.ppf-reading{width:100%;margin-top:16px;min-height:1em}
.ppf-loader{padding:6px 0}
.ppf-text{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--color-text);text-align:center;opacity:0;transition:opacity .6s ease;white-space:pre-wrap}
.ppf-text.is-shown{opacity:1}
@media (prefers-reduced-motion:reduce){.ppf-flip{transition:transform .3s ease}.ppf-nav--next.is-shown{animation:none}.ppf-page.is-current{animation:none}}
.roulette-title{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);margin-bottom:30px}
.roulette-window{width:100%;max-width:200px;height:260px;overflow:hidden;position:relative;border-radius:15px;box-shadow:0 0 20px rgba(212,175,55,.3);margin:0 auto 30px auto;display:flex;justify-content:flex-start}
#roulette-track{display:flex;gap:20px;transition:transform 1s cubic-bezier(.25,1,.5,1);height:100%;align-items:center;padding:0;margin:0}
.tarot-card-back{min-width:160px;height:260px;background:linear-gradient(135deg,#2a0845,#6441A5);border:2px solid #d4af37;border-radius:10px;background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(212,175,55,.1) 10px,rgba(212,175,55,.1) 20px);box-sizing:border-box}
/* ===== Reversed cards (global) ===== */
.tarot-reversed{transform:rotate(180deg)}
.reversed-tag{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:3px 11px;border-radius:999px;background:rgba(255,110,190,.14);border:1px solid rgba(255,110,190,.5);color:#ff9ed6;font:400 10px var(--font-heading);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 10px rgba(255,110,190,.5);white-space:nowrap}
.reversed-tag::before{content:'⤺';font-size:12px;line-height:1}
.tarot-card-front {
width: 160px;
height: 260px;
background: #fff;
border: 2px solid rgba(247, 212, 74, 0.9);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
margin-bottom: 25px;
background: linear-gradient(135deg, #140424, #3a1c61);
color: #d4af37;
box-sizing: border-box;
box-shadow: 0 0 30px rgba(247, 212, 74, 0.5), inset 0 0 20px rgba(179,136,255,0.4);
animation: card-levitate 3s ease-in-out infinite alternate;
}
@keyframes card-levitate {
0% { transform: translateY(0px); box-shadow: 0 5px 20px rgba(247,212,74,0.4); }
100% { transform: translateY(-15px); box-shadow: 0 25px 55px rgba(247,212,74,0.8), 0 0 80px rgba(179,136,255,0.6); }
}
#spin-btn {
background: linear-gradient(45deg, #f7d44a, #d4af37, #aa771c, #f7d44a);
background-size: 300% 300%;
color: #000;
border: none;
padding: 16px 45px;
font-size: 18px;
font-weight: bold;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(212,175,55,0.4);
animation: gold-flow 3s ease infinite, pulse-btn 2s infinite;
}
@keyframes gold-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes pulse-btn {
0% { transform: scale(1); box-shadow: 0 0 15px rgba(247,212,74,0.4); }
50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(247,212,74,0.8); }
100% { transform: scale(1); box-shadow: 0 0 15px rgba(247,212,74,0.4); }
}
#roulette-result {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #fff;
animation: epic-card-reveal 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
perspective: 1000px;
}
@keyframes epic-card-reveal {
0% { transform: scale(0.5) rotateY(-180deg) translateY(100px); opacity: 0; filter: blur(15px); }
60% { transform: scale(1.1) rotateY(20deg) translateY(-10px); opacity: 1; filter: blur(0); }
100% { transform: scale(1) rotateY(0deg) translateY(0); filter: drop-shadow(0 10px 40px rgba(247,212,74,0.5)); }
}
#result-title{color:#d4af37;margin-bottom:10px}
#roulette-track .tarot-card-back:first-child{margin-left:20px}
.tarot__flash--active{display:block;opacity:1;transition:opacity .05s ease}
.tarot__flash--fade{display:block;opacity:0;transition:opacity .7s ease}
.reading__share{text-align:center;margin-bottom:20px;animation:share-fade-in .6s ease .2s both}
@keyframes share-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.share-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 28px;font-family:var(--font-heading);font-size:.75rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold-bright);background:rgba(247,212,74,.06);border:1px solid rgba(247,212,74,.3);border-radius:14px;cursor:pointer;transition:background .3s,border-color .3s,box-shadow .3s,transform .2s;-webkit-tap-highlight-color:transparent}
.share-btn:hover{background:rgba(247,212,74,.12);border-color:rgba(247,212,74,.55);box-shadow:0 0 24px rgba(247,212,74,.2),0 0 48px rgba(179,136,255,.1)}
.share-btn:active{transform:scale(.96)}
.share-btn__icon{font-size:1.2rem;color:var(--color-gold-bright);text-shadow:0 0 12px var(--color-gold-glow);animation:symbol-pulse 3s ease-in-out infinite}
.share-btn__text{font-family:var(--font-body);font-size:1rem;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--color-text)}
.reading{margin-bottom:24px}
.reading__loader{display:flex;flex-direction:column;align-items:center;gap:20px;padding:36px 0}
.reading__loader-spinner{display:inline-block;width:48px;height:48px;border-radius:50%;border:2px solid transparent;border-top-color:var(--color-gold-bright);border-right-color:var(--color-neon-purple);animation:spinner-rotate 1s linear infinite}
.reading__loader-text{font-family:var(--font-body);font-size:.95rem;font-style:italic;color:var(--color-text-muted);animation:loading-text-fade 2.4s ease-in-out infinite}
.reading__preview{font-family:var(--font-body);font-size:1.05rem;line-height:1.75;color:var(--color-text);margin-bottom:4px;min-height:1.5em}
.reading__gateway-wrap{position:relative;margin-top:8px}
.reading__gateway-wrap--locked{min-height:300px;padding-bottom:8px}
.reading__gateway-wrap--locked .reading__locked-text{filter:blur(8px);user-select:none;pointer-events:none}
.reading__locked-text{font-family:var(--font-body);font-size:1.05rem;line-height:1.75;color:var(--color-text);transition:filter .4s ease}
.gateway{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(10,4,20,0) 0%,rgba(10,4,20,.7) 25%,rgba(10,4,20,.92) 55%);padding:24px 0 8px}
.reading__gateway-wrap:not(.reading__gateway-wrap--locked) .gateway{display:none}
.gateway__orbit{width:100%;padding:28px 20px 24px;background:rgba(20,8,42,.9);border:1px solid rgba(247,212,74,.25);border-radius:16px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 40px rgba(0,0,0,.5);text-align:center}
.gateway__text{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--color-text);margin-bottom:20px}
.gateway__btn{display:block;width:100%;padding:16px 20px;font-family:var(--font-heading);font-size:.78rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;border:none;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.gateway__btn+.gateway__btn{margin-top:10px}
.gateway__btn:active{transform:scale(.96)}
.gateway__btn--primary{color:var(--color-bg-deep);background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);box-shadow:0 4px 28px var(--color-gold-glow)}
.gateway__btn--primary:hover{box-shadow:0 6px 40px rgba(247,212,74,.55)}
.gateway__btn--secondary{color:var(--color-gold-bright);background:rgba(247,212,74,.08);border:1px solid rgba(247,212,74,.3)}
.gateway__btn--secondary:hover{background:rgba(247,212,74,.15);border-color:rgba(247,212,74,.5)}.quiz{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:8px 20px calc(var(--safe-bottom) + 24px);transition:opacity .6s ease,transform .6s ease}.quiz--hide{opacity:0;transform:scale(.96);pointer-events:none}.quiz__progress{display:flex;align-items:center;gap:12px;margin-bottom:32px;transition:opacity .35s ease}.quiz__progress--fade-out{opacity:0}.quiz__progress-track{flex:1;height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}.quiz__progress-fill{height:100%;width:25%;background:linear-gradient(90deg,var(--color-purple-soft),var(--color-gold-bright),var(--color-neon-pink));border-radius:2px;box-shadow:0 0 14px var(--color-gold-glow);transition:width .5s cubic-bezier(.4,0,.2,1)}.quiz__progress-label{font-family:var(--font-heading);font-size:.7rem;letter-spacing:.1em;color:var(--color-text-muted);flex-shrink:0}.quiz__body{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;transition:opacity .35s ease}.quiz__body--fade-out{opacity:0}.quiz__step{width:100%;max-width:420px}.quiz__question-wrap{opacity:0;transform:translateX(24px);transition:opacity var(--transition,.38s) cubic-bezier(.4,0,.2,1),transform var(--transition,.38s) cubic-bezier(.4,0,.2,1)}.quiz__question-wrap--active{opacity:1;transform:translateX(0)}.quiz__question-wrap--enter{opacity:0;transform:translateX(32px)}.quiz__question-wrap--enter-back{opacity:0;transform:translateX(-32px)}.quiz__question-wrap--exit{opacity:0;transform:translateX(-32px)}.quiz__question-wrap--exit-back{opacity:0;transform:translateX(32px)}.quiz__question{font-family:var(--font-heading);font-size:1.2rem;font-weight:400;line-height:1.45;letter-spacing:.04em;color:var(--color-text);text-align:center;margin-bottom:28px}.quiz__question::before{content:'✦';display:block;font-size:.8rem;margin-bottom:12px;color:var(--color-gold-dim)}.quiz__zodiac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quiz__zodiac-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 8px;background:rgba(255,255,255,.03);border:1px solid rgba(247,212,74,.15);border-radius:12px;color:var(--color-text);cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s,transform .2s;-webkit-tap-highlight-color:transparent}.quiz__zodiac-card:active{transform:scale(.94)}.quiz__zodiac-card:hover{background:rgba(247,212,74,.07);border-color:rgba(247,212,74,.4);box-shadow:0 0 20px rgba(247,212,74,.15),0 0 40px rgba(107,63,160,.1)}.quiz__zodiac-symbol{font-size:1.7rem;color:var(--color-gold-bright);text-shadow:0 0 16px var(--color-gold-glow);line-height:1}.quiz__zodiac-name{font-family:var(--font-body);font-size:.78rem;letter-spacing:.06em;color:var(--color-text-muted)}.quiz__options{display:flex;flex-direction:column;gap:12px}.quiz__option{align-items:center;gap:16px;width:100%;padding:18px 20px;background:rgba(255,255,255,.03);border:1px solid rgba(247,212,74,.15);border-radius:14px;color:var(--color-text);cursor:pointer;text-align:left;transition:background .25s,border-color .25s,box-shadow .25s,transform .2s;-webkit-tap-highlight-color:transparent;display:flex}.quiz__option:active{transform:scale(.97)}.quiz__option:hover{background:rgba(247,212,74,.07);border-color:rgba(247,212,74,.4);box-shadow:0 0 24px rgba(247,212,74,.12),0 0 40px rgba(107,63,160,.08)}.quiz__option-icon{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--color-gold-bright);background:rgba(247,212,74,.08);border-radius:50%;text-shadow:0 0 8px var(--color-gold-glow)}.quiz__option-label{font-family:var(--font-body);font-size:1.05rem;letter-spacing:.03em;line-height:1.3}.quiz__form{display:flex;flex-direction:column;gap:20px}.quiz__field{display:flex;flex-direction:column;gap:8px}.quiz__field-label{font-family:var(--font-heading);font-size:.72rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--color-gold)}.quiz__input{width:100%;padding:16px 18px;font-family:var(--font-body);font-size:1.05rem;color:var(--color-text);background:rgba(255,255,255,.04);border:1px solid rgba(247,212,74,.18);border-radius:12px;outline:none;transition:border-color .25s,box-shadow .25s,background .25s;-webkit-appearance:none;appearance:none}.quiz__input::placeholder{color:rgba(237,231,246,.25);font-style:italic}.quiz__input:focus{border-color:rgba(247,212,74,.5);box-shadow:0 0 20px rgba(247,212,74,.1);background:rgba(255,255,255,.06)}.quiz__input--error{border-color:rgba(220,80,80,.6);box-shadow:0 0 12px rgba(220,80,80,.15)}.quiz__input--date{color-scheme:dark}.quiz__input--date::-webkit-calendar-picker-indicator{filter:invert(.7) sepia(.5) saturate(3) hue-rotate(5deg);cursor:pointer}.quiz__submit{margin-top:8px;padding:18px 24px;font-family:var(--font-heading);font-size:.85rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--color-bg-deep);background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);border:none;border-radius:14px;cursor:pointer;box-shadow:0 4px 28px var(--color-gold-glow),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .2s,box-shadow .3s;-webkit-tap-highlight-color:transparent}.quiz__submit:active{transform:scale(.96)}.quiz__submit:hover{box-shadow:0 6px 40px rgba(247,212,74,.55),inset 0 1px 0 rgba(255,255,255,.3)}.quiz__loading{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding:24px 32px;opacity:0;transition:opacity .6s ease}.quiz__loading--visible{display:flex;opacity:1}.quiz__spinner{position:relative;width:80px;height:80px}.quiz__spinner-ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--color-gold-bright);border-right-color:var(--color-neon-purple);border-bottom-color:var(--color-neon-pink);animation:spinner-rotate 1.4s linear infinite}.quiz__spinner-core{position:absolute;inset:20px;border-radius:50%;background:radial-gradient(circle,rgba(247,212,74,.15) 0%,transparent 70%);animation:spinner-pulse 2s ease-in-out infinite}@keyframes spinner-rotate{to{transform:rotate(360deg)}}@keyframes spinner-pulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}.quiz__loading-text{font-family:var(--font-body);font-size:1.1rem;font-style:italic;line-height:1.6;text-align:center;letter-spacing:.04em;color:var(--color-text-muted);max-width:300px;animation:loading-text-fade 2.8s ease-in-out infinite}@keyframes loading-text-fade{0%,100%{opacity:.5}50%{opacity:1}}@media(min-width:480px){.header__title{font-size:1.45rem}.header__subtitle{font-size:.9rem}.tarot-card{max-width:120px}.tarot__cards{gap:16px}.quiz__question{font-size:1.35rem}}@media(min-width:768px){.header__inner{max-width:480px;margin:0 auto;padding-left:24px;padding-right:24px}.header__divider{max-width:440px;margin-left:auto;margin-right:auto}.main{padding-left:24px;padding-right:24px}.quiz{padding-left:24px;padding-right:24px}.quiz__question{font-size:1.45rem}.quiz__zodiac-grid{gap:12px}.tarot-card{max-width:130px}}
/* === THE WEB OF FATE CANVAS === */
#space-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1 !important;
pointer-events: none !important;
mix-blend-mode: screen;
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
opacity: 0.3 !important;
}
.app {
position: relative;
z-index: 20 !important;
}
/* === YES OR NO CASINO ANIMATION === */
.yn-focus-text { font-family: var(--font-heading); color: #b388ff; font-size: 24px; text-align: center; text-shadow: 0 0 20px rgba(179,136,255,0.6); animation: mystic-breathe 3s infinite; }
.yn-cards-stage { position: relative; width: 100%; height: 280px; display: flex; justify-content: center; align-items: center; margin-top: 20px; perspective: 1000px; }
.yn-card-dealer { position: absolute; width: 140px; height: 240px; background: linear-gradient(135deg, #2a0845, #6441A5); border: 2px solid #d4af37; border-radius: 12px; background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(212,175,55,0.1) 10px, rgba(212,175,55,0.1) 20px); box-shadow: 0 0 20px rgba(212,175,55,0.3); opacity: 0; transform: scale(0.2) rotate(0deg); transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease-in, filter 0.5s; cursor: pointer; transform-style: preserve-3d; }
.yn-card-dealer.deal-left { opacity: 1; transform: translateX(-85px) scale(1) rotate(-360deg); }
.yn-card-dealer.deal-right { opacity: 1; transform: translateX(85px) scale(1) rotate(360deg); }
.yn-reveal-text { font-family: var(--font-heading); color: #f7d44a; font-size: 26px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 15px rgba(247,212,74,0.6); margin-top: 30px; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; text-align: center; }
.yn-reveal-text.visible { opacity: 1; transform: translateY(0); }
.yn-card-dealer.dimmed { filter: brightness(0.3) blur(2px); pointer-events: none; }
/* Flip in place — the chosen card turns over where it sits (keeps its side, no cross-screen fly). */
.yn-card-dealer.flipped { z-index: 10; box-shadow: 0 0 40px rgba(247,212,74,0.6); }
.yn-card-dealer.flipped.deal-left { transform: translateX(-85px) scale(1.15) rotateY(180deg) !important; }
.yn-card-dealer.flipped.deal-right { transform: translateX(85px) scale(1.15) rotateY(180deg) !important; }
.yn-card-front { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #140424, #3a1c61); border-radius: 10px; transform: rotateY(180deg); font-size: 50px; color: #d4af37; border: 2px solid #f7d44a; text-align: center; padding: 10px; }
.yn-card-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; }
/* Yes/No screen background + ask stage + verdict */
#yes-no-screen { background: radial-gradient(ellipse 90% 60% at 50% 0%, #1e0a35 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 50% 100%, #2a0a20 0%, transparent 55%), var(--color-bg-deep); padding: 60px 22px 40px; box-sizing: border-box; }
.yn-ask { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 340px; animation: share-fade-in .6s ease both; }
.yn-ask-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight:400; letter-spacing: .14em; text-transform: uppercase; color: var(--color-gold-bright); text-shadow: 0 0 24px var(--color-gold-glow); margin-bottom: 10px; text-align: center; }
.yn-ask-sub { font-family: var(--font-body); font-size: 1.02rem; font-style: italic; color: var(--color-text-muted); text-align: center; line-height: 1.5; margin-bottom: 22px; }
.yn-question { width: 100%; box-sizing: border-box; resize: none; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(247,212,74,.25); color: var(--color-text); font-family: var(--font-body); font-size: 1.08rem; line-height: 1.4; margin-bottom: 20px; -webkit-tap-highlight-color: transparent; transition: border-color .3s, box-shadow .3s; }
.yn-question:focus { outline: none; border-color: rgba(247,212,74,.6); box-shadow: 0 0 18px rgba(247,212,74,.18); }
.yn-question::placeholder { color: rgba(237,231,246,.4); font-style: italic; }
.yn-draw-btn { padding: 15px 44px; font-family: var(--font-heading); font-size: .82rem; font-weight:400; letter-spacing: .12em; text-transform: uppercase; color: var(--color-bg-deep); background: linear-gradient(135deg, var(--color-gold-bright), #d4af37); border: none; border-radius: 30px; cursor: pointer; box-shadow: 0 4px 24px var(--color-gold-glow); transition: transform .2s, box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.yn-draw-btn:hover, .yn-draw-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 32px rgba(247,212,74,.6); outline: none; }
.yn-pick { display: flex; flex-direction: column; align-items: center; width: 100%; }
.yn-verdict { min-height: 0; font-family: var(--font-heading); font-weight:400; font-size: 3rem; letter-spacing: .06em; text-transform: uppercase; text-align: center; opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .6s ease, transform .6s cubic-bezier(.175,.885,.32,1.275); }
.yn-verdict.is-shown { opacity: 1; transform: translateY(0) scale(1); }
.yn-verdict--yes { color: #6ee7a0; text-shadow: 0 0 26px rgba(110,231,160,.6); }
.yn-verdict--no { color: #ff8080; text-shadow: 0 0 26px rgba(255,128,128,.55); }
.yn-reason-wrap { width: 100%; max-width: 340px; min-height: 1.4em; margin-top: 14px; }
.yn-reason { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.65; color: var(--color-text); text-align: center; opacity: 0; transition: opacity .6s ease; white-space: pre-wrap; }
.yn-reason.is-shown { opacity: 1; }
/* === CELESTIAL SUBSCRIPTION UI === */
.celestial-card {
background: rgba(20, 8, 42, 0.5);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(247, 212, 74, 0.2);
border-radius: 20px;
padding: 25px;
margin-bottom: 25px;
position: relative;
transition: transform 0.3s;
}
.celestial-card.featured {
border: 1px solid rgba(179, 136, 255, 0.5);
box-shadow: 0 0 30px rgba(179, 136, 255, 0.15), inset 0 0 20px rgba(179, 136, 255, 0.1);
background: linear-gradient(145deg, rgba(30, 10, 60, 0.6), rgba(20, 8, 42, 0.8));
margin-top: 35px;
}
.celestial-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg, #b388ff, #ff6ebe);
color: #fff;
font-size: 11px;
font-weight: bold;
padding: 6px 16px;
border-radius: 20px;
letter-spacing: 1.5px;
box-shadow: 0 4px 15px rgba(255, 110, 190, 0.4);
white-space: nowrap;
}
.celestial-title {
font-family: var(--font-heading);
font-size: 20px;
color: #ede7f6;
text-align: center;
margin-bottom: 5px;
}
.celestial-price {
font-family: var(--font-heading);
font-size: 38px;
font-weight:400;
color: #ede7f6;
text-align: center;
margin-bottom: 25px;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.celestial-features {
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.celestial-features li {
font-size: 15px;
color: #ede7f6;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
opacity: 0.9;
}
.celestial-features svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.celestial-btn {
width: 100%;
padding: 16px;
border-radius: 14px;
font-family: var(--font-heading);
font-size: 16px;
font-weight:400;
text-transform: uppercase;
letter-spacing: 1.5px;
cursor: pointer;
background: rgba(255, 255, 255, 0.05);
color: #ede7f6;
border: 1px solid rgba(255,255,255,0.2);
transition: all 0.3s;
}
.celestial-btn:active {
transform: scale(0.96);
}
.celestial-btn.primary-pulse {
background: linear-gradient(45deg, #f7d44a, #d4af37);
color: #000;
border: none;
box-shadow: 0 4px 15px rgba(247, 212, 74, 0.4);
animation: pulse-celestial 2s infinite;
}
@keyframes pulse-celestial {
0% { box-shadow: 0 0 0 0 rgba(247, 212, 74, 0.6); }
70% { box-shadow: 0 0 0 15px rgba(247, 212, 74, 0); }
100% { box-shadow: 0 0 0 0 rgba(247, 212, 74, 0); }
}
/* === TAB 1 & AI UI === */
.streak-card { display:flex; align-items:center; gap:15px; background:rgba(247,212,74,0.1); border:1px solid rgba(247,212,74,0.3); border-radius:15px; padding:15px 20px; margin-bottom:20px; margin-top:20px; }
.streak-fire { font-size:24px; }
.streak-text { color:#f7d44a; font-weight:400; font-family:var(--font-heading); letter-spacing:1px; }
.insight-card { background:rgba(179,136,255,0.05); border:1px solid rgba(179,136,255,0.2); border-radius:15px; padding:20px; text-align:center; box-shadow:inset 0 0 20px rgba(179,136,255,0.05); }
.ai-chat-box { flex:1; width:100%; min-height:0; background:rgba(20,8,42,0.4); border-radius:15px; border:1px solid rgba(179,136,255,0.2); padding:15px; margin-bottom:15px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ai-message { align-self:flex-start; background:linear-gradient(135deg, #3a1c61, #140424); color:#ede7f6; padding:12px 16px; border-radius:15px 15px 15px 0; border:1px solid #b388ff; max-width:85%; font-size:15px; line-height:1.5; box-shadow:0 5px 15px rgba(179,136,255,0.2); white-space:pre-wrap; word-wrap:break-word; animation:ai-msg-in .3s ease both; }
.ai-message--user { align-self:flex-end; background:linear-gradient(135deg,#f7d44a,#d4af37); color:#1a0a2e; border:1px solid #ffe26b; border-radius:15px 15px 0 15px; box-shadow:0 5px 15px rgba(247,212,74,0.25); }
.ai-message--error { border-color:var(--color-neon-pink); color:#ffd1e8; }
@keyframes ai-msg-in { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.ai-typing { display:inline-flex; gap:5px; align-items:center; }
.ai-typing span { width:7px; height:7px; border-radius:50%; background:var(--color-neon-purple); opacity:.5; animation:ai-typing-bounce 1.2s ease-in-out infinite; }
.ai-typing span:nth-child(2){ animation-delay:.2s; } .ai-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes ai-typing-bounce { 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-5px); opacity:1; } }
.ai-input:disabled, .ai-send-btn:disabled { opacity:.5; cursor:default; }
@media (prefers-reduced-motion: reduce){ .ai-message,.ai-typing span{ animation:none; } }
/* Phase 3 UX: Oracle intro screen (tap Selenya) + full-height chat */
#tab-ai { justify-content:flex-start; }
.oracle-intro { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:100%; height:100%; min-height:0; padding:6px 20px 14px; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.oracle-intro::-webkit-scrollbar { width:0; height:0; display:none; }
.oracle-avatar { position:relative; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; padding:0; margin-top:2px; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.oracle-avatar .fortune-teller-img { margin:0 auto !important; width:auto !important; max-width:168px !important; max-height:32vh !important; height:auto !important; }
.oracle-avatar__halo { position:absolute; top:50%; left:50%; width:168px; height:168px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(179,136,255,.35), transparent 65%); z-index:0; pointer-events:none; animation:oracle-halo 3s ease-in-out infinite; }
@keyframes oracle-halo { 0%,100%{ opacity:.4; transform:translate(-50%,-50%) scale(.9); } 50%{ opacity:.85; transform:translate(-50%,-50%) scale(1.1); } }
.oracle-avatar__tap { position:relative; z-index:2; margin-top:-22px; display:inline-block; padding:6px 14px; border-radius:999px; background:rgba(20,8,42,.75); border:1px solid rgba(247,212,74,.5); color:var(--color-gold-bright); font:600 11px var(--font-heading); letter-spacing:.08em; text-shadow:0 0 10px var(--color-gold-glow); animation:oracle-tap-pulse 2.2s ease-in-out infinite; }
@keyframes oracle-tap-pulse { 0%,100%{ transform:scale(1); box-shadow:0 0 0 rgba(247,212,74,0); } 50%{ transform:scale(1.06); box-shadow:0 0 18px rgba(247,212,74,.45); } }
.oracle-intro__title { font-family:var(--font-heading); font-size:20px; font-weight:400; letter-spacing:.06em; color:#fff; margin:10px 0 4px; text-shadow:0 0 20px rgba(179,136,255,.5); }
.oracle-intro__sub { font-family:var(--font-body); font-size:14px; color:var(--color-text-muted); margin-bottom:12px; max-width:300px; }
.oracle-suggestions { display:flex; flex-direction:column; gap:9px; width:100%; max-width:340px; }
.oracle-suggestion { text-align:left; padding:12px 15px; border-radius:14px; cursor:pointer; font-family:var(--font-body); font-size:14.5px; color:var(--color-text); background:rgba(255,255,255,.03); border:1px solid rgba(247,212,74,.18); transition:transform .2s,border-color .3s,background .3s; -webkit-tap-highlight-color:transparent; }
.oracle-suggestion:hover { border-color:rgba(247,212,74,.45); }
.oracle-suggestion:active { transform:scale(.98); background:rgba(247,212,74,.06); }
/* Full-screen, static chat panel (covers header + bottom-nav) */
.oracle-chat { position:fixed; inset:0; z-index:9500; display:flex; flex-direction:column; background:radial-gradient(ellipse 90% 55% at 50% 0%, #1a0a3e, #0a0414); }
/* While the chat is open, the app header and bottom-nav are removed entirely */
body.oracle-chat-open .header,
body.oracle-chat-open .bottom-nav,
body.oracle-chat-open #bottom-nav { display:none !important; }
.oracle-chat__bar { position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 12px; border-bottom:1px solid rgba(247,212,74,.14); background:rgba(10,4,20,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.oracle-chat__left { display:flex; align-items:center; gap:8px; min-width:0; }
.oracle-chat__back { display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.05); color:var(--color-text); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s; }
.oracle-chat__back:active { background:rgba(255,255,255,.12); }
.oracle-chat__new { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.05); color:var(--color-gold-bright); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s; }
.oracle-chat__new:active { background:rgba(255,255,255,.12); }
/* "Chat" stays centred on the whole bar; the dust pill sits in the left group next to Back */
.oracle-chat__center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; pointer-events:none; }
.oracle-chat__title { font-family:var(--font-heading); font-weight:400; font-size:20px; letter-spacing:.12em; color:var(--color-gold-bright); text-shadow:0 0 20px var(--color-gold-glow),0 0 40px rgba(247,212,74,.15); }
/* position:relative anchors the flying "-200" to the pill itself (not the whole bar). */
.oracle-chat__dust { position:relative; flex-shrink:0; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; background:rgba(20,8,42,.7); border:1px solid rgba(179,136,255,.4); box-shadow:0 0 10px rgba(179,136,255,.2); }
.oracle-chat__dust-icon { color:#b388ff; text-shadow:0 0 10px #b388ff; font-size:13px; }
#oracle-chat-balance { font-family:var(--font-heading); font-weight:400; color:#fff; font-size:14px; font-variant-numeric:tabular-nums; }
.oracle-chat__dust.bump #oracle-chat-balance { animation:oracle-dust-bump .5s ease; }
@keyframes oracle-dust-bump { 40%{ transform:scale(1.25); color:var(--color-neon-pink); } }
.oracle-dust-fly { position:absolute; left:50%; top:-2px; white-space:nowrap; font-family:var(--font-heading); font-weight:400; font-size:15px; color:var(--color-neon-pink); text-shadow:0 0 12px rgba(255,110,190,.85); pointer-events:none; animation:oracle-dust-fly 1.5s ease-out forwards; }
@keyframes oracle-dust-fly { 0%{ opacity:0; transform:translate(-50%,6px); } 15%{ opacity:1; } 65%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-32px); } }
/* Message area fills the panel; only messages scroll (static window) */
.oracle-chat .ai-chat-box { flex:1; width:100%; border:none; border-radius:0; margin:0; padding:16px; background:transparent; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.oracle-chat .ai-input-area { flex-shrink:0; width:100%; margin:0; padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 14px); gap:10px; background:rgba(10,4,20,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid rgba(247,212,74,.12); }
/* Up-front price transparency: the per-question cost sits right above the input. */
.oracle-cost-hint { flex-shrink:0; width:100%; box-sizing:border-box; padding:0 16px 6px; text-align:center; font-family:var(--font-body); font-size:13px; letter-spacing:.02em; color:var(--color-text-muted); opacity:.85; }
.ai-message.ai-typing-cursor::after { content:'▍'; margin-left:1px; color:var(--color-neon-purple); animation:ai-cursor-blink 1s steps(1) infinite; }
@keyframes ai-cursor-blink { 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .oracle-avatar__halo,.oracle-avatar__tap,.ai-message.ai-typing-cursor::after,.oracle-chat__dust.bump #oracle-chat-balance{ animation:none; } .oracle-dust-fly{ animation-duration:.6s; } }
/* === Chat card-draw teaser (pick 1 of 3 → blurred reading → paywall) === */
.chat-draw-stage { display:flex; justify-content:center; gap:14px; margin:8px 0 12px; perspective:900px; }
.chat-draw-card { width:78px; height:118px; padding:0; border:none; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
/* display:block is load-bearing — this is a , and width/height/preserve-3d are
all ignored while it stays inline. Without it the faces (position:absolute; inset:0)
collapse to their 1px borders, so backgrounds paint into a 2x2 box and vanish. */
.chat-draw-card__inner { display:block; position:relative; width:100%; height:100%; transition:transform .62s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
.chat-draw-card.is-revealed .chat-draw-card__inner { transform:rotateY(180deg); }
.chat-draw-card__face { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:13px; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:1px solid rgba(247,212,74,.5); box-shadow:0 6px 20px rgba(0,0,0,.45); }
.chat-draw-card__face--back { background:radial-gradient(circle at 50% 34%, #2a1550, #140a2c); color:var(--color-gold-bright); font-size:28px; text-shadow:0 0 14px var(--color-gold-glow); }
.chat-draw-card__face--front { transform:rotateY(180deg); background:radial-gradient(circle at 50% 34%, #241046, #120826); gap:7px; padding:6px; }
.chat-draw-card__emoji { font-size:34px; line-height:1; }
.chat-draw-card__name { font-family:var(--font-heading); font-size:11px; color:#ede7f6; text-align:center; line-height:1.15; padding:0 2px; }
.chat-draw-card.is-dimmed { opacity:.32; filter:grayscale(.45); pointer-events:none; transition:opacity .4s, filter .4s; }
/* The chat cards are only 78px wide, so the full "REVERSED" pill overflows them.
Here it shrinks to a badge pinned to the top of the card, clear of the name scrim. */
/* The badge cannot fit ON a 78px card at a readable size (it is white-space:nowrap and
spilled past both edges), and shrunk to a bare glyph it was too small to notice. So it
sits UNDER the card instead — the same place it lives in every other reading. */
.chat-draw-card { position:relative; }
.chat-draw-card .reversed-tag { position:absolute !important; top:calc(100% + 6px); left:50%; transform:translateX(-50%); z-index:3; margin:0 !important; padding:2px 8px; font-size:8px; letter-spacing:.06em; gap:3px; }
.chat-draw-card .reversed-tag::before { font-size:9px; }
.chat-draw-stage { padding-bottom:22px; }
/* === CARD REVEAL (Selenya names a card → it lands full-screen, then docks) === */
/* The card being turned, once per session — see playCardReveal in app.js.
Only transform and opacity move here. The old version transitioned backdrop-filter across
the whole viewport: a full-screen readback and blur every frame on a mid-range phone, and
one WebKit drops halfway through a transition anyway. The scrim now fades on background
alpha alone, which costs nothing. */
.card-reveal { position:fixed; inset:0; z-index:9500; display:flex; flex-direction:column; align-items:center; justify-content:center;
background:rgba(6,2,14,0); transition:background .38s ease; }
.card-reveal.is-in { background:rgba(6,2,14,.88); }
.card-reveal.is-out { background:rgba(6,2,14,0); transition:background .34s ease; }
.card-reveal__glow { position:absolute; width:min(78vw,330px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(247,212,74,.45) 0%,rgba(179,136,255,.22) 45%,transparent 70%); opacity:0; transform:scale(.5); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.card-reveal.is-in .card-reveal__glow { opacity:1; transform:scale(1.15); }
.card-reveal.is-out .card-reveal__glow { opacity:0; transform:scale(1.4); transition:opacity .34s ease, transform .34s ease; }
/* Perspective sits on the stage and reaches the turn through __fly, which keeps its children
in 3D — perspective only crosses an element that does. */
.card-reveal__stage { position:relative; width:min(78vw,300px); aspect-ratio:300/525; perspective:1000px; }
.card-reveal__fly { position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.card-reveal__flip { position:absolute; inset:0; transform-style:preserve-3d; }
/* Static, all of it. A filter, an animated shadow or any opacity below 1 on this chain
flattens the 3D and kills the turn — this codebase has paid for all three separately. */
.card-reveal__face { position:absolute; inset:0; border-radius:16px; overflow:hidden; border:2px solid rgba(247,212,74,.85); backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 26px 70px rgba(0,0,0,.7); }
.card-reveal__face--front { transform:rotateY(180deg); }
.card-reveal__face--front img { width:100%; height:100%; object-fit:cover; display:block; }
.is-deal .card-reveal__fly { transition:transform .46s cubic-bezier(.16,.84,.34,1); }
/* The turn starts before the rise ends. Two moves one after the other read as two moves. */
.is-deal .card-reveal__flip { transition:transform .48s cubic-bezier(.45,.05,.25,1); transition-delay:.3s; }
.is-land .card-reveal__fly { transition:transform .38s cubic-bezier(.55,.05,.35,1); }
.card-reveal__name { margin-top:16px; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; font-family:var(--font-heading); font-size:1.12rem; font-weight:400; letter-spacing:.09em; text-align:center; color:var(--color-gold-bright); text-shadow:0 0 22px var(--color-gold-glow); }
.card-reveal.show-name .card-reveal__name { opacity:1; transform:none; }
/* The turn in place, for every card after the first. The 3D is cloned from .chat-draw-card,
the one flip in this app already proven against the WebKit backface bug. The entrance
animation is switched off while turning: cardDockIn animates opacity, and opacity below 1
on the perspective ancestor would flatten the very thing being turned. */
.chat-card-dock--turning { animation:none; }
.chat-card-dock__flip { position:relative; flex:none; width:44px; height:77px; transform-style:preserve-3d; transition:transform .62s cubic-bezier(.4,.2,.2,1); }
.chat-card-dock.is-turned .chat-card-dock__flip { transform:rotateY(180deg); }
.chat-card-dock__face { position:absolute; inset:0; border-radius:8px; overflow:hidden; border:1px solid rgba(247,212,74,.5); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.chat-card-dock__face--front { transform:rotateY(180deg); }
.chat-card-dock__face--front .chat-card-dock__art { width:100%; height:100%; border:0; border-radius:0; }
/* Reduced motion is honoured in JS (it skips straight to the strip), but selenyaTestCard
bypasses that check and a CSS-only path must not be the one place it is missing. */
@media (prefers-reduced-motion: reduce) {
.card-reveal, .card-reveal__glow, .card-reveal__fly, .card-reveal__flip,
.card-reveal__name, .chat-card-dock__flip { transition:none !important; }
}
/* Where the card comes to rest: a tappable strip under Selenya's message. */
.chat-card-dock { perspective:600px; display:flex; align-items:center; gap:12px; width:fit-content; max-width:86%; margin:2px 0 12px; padding:8px 14px 8px 8px; border-radius:16px; background:linear-gradient(135deg,rgba(58,28,97,.6),rgba(22,5,38,.6)); border:1px solid rgba(247,212,74,.35); cursor:pointer; -webkit-tap-highlight-color:transparent; animation:cardDockIn .5s cubic-bezier(.2,.9,.25,1) both; transition:border-color .25s, box-shadow .25s, transform .2s; text-align:left; }
.chat-card-dock:hover,.chat-card-dock:focus-visible { border-color:rgba(247,212,74,.7); box-shadow:0 0 22px rgba(247,212,74,.22); outline:none; }
.chat-card-dock:active { transform:scale(.98); }
.chat-card-dock__art { width:44px; height:77px; object-fit:cover; border-radius:8px; display:block; border:1px solid rgba(247,212,74,.5); }
/* A reversed draw shows the artwork turned, matching how it reads on the table. */
.chat-card-dock__art.is-reversed { transform:rotate(180deg); }
.chat-card-dock__rev { display:block; margin-top:2px; font-family:var(--font-body); font-style:italic; font-size:.72rem; font-weight:400; color:#ff9ed6; }
.card-reveal__face--front img.is-reversed { transform:rotate(180deg); }
.card-reveal__rev { display:block; margin-top:6px; font-family:var(--font-body); font-style:italic; font-size:.85rem; letter-spacing:0; color:#ff9ed6; text-shadow:0 0 14px rgba(255,110,190,.45); }
.chat-card-dock__body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.chat-card-dock__name { font-family:var(--font-heading); font-size:.86rem; font-weight:400; color:var(--color-gold-bright); line-height:1.2; }
.chat-card-dock__hint { font-family:var(--font-body); font-size:.78rem; font-style:italic; color:rgba(237,231,246,.6); }
@keyframes cardDockIn { from{ opacity:0; transform:translateY(-12px) scale(.92); } to{ opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce){ .chat-card-dock{ animation:none; } }
/* Cards fly up from below into their slots (staggered), then settle with a gentle float. */
@keyframes chatDrawFlyUp { 0%{ opacity:0; transform:translateY(240px) scale(.72) rotate(-6deg); } 55%{ opacity:1; } 100%{ opacity:1; transform:translateY(0) scale(1) rotate(0); } }
@keyframes chatDrawFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
.chat-draw-card { animation:chatDrawFlyUp .62s cubic-bezier(.2,.75,.3,1) both; }
.chat-draw-card:nth-child(1){ animation-delay:.04s; }
.chat-draw-card:nth-child(2){ animation-delay:.17s; }
.chat-draw-card:nth-child(3){ animation-delay:.30s; }
/* After the fly-in finishes, idle float kicks in (only while none is picked). */
.chat-draw-stage:not(.is-picked) .chat-draw-card { animation:chatDrawFlyUp .62s cubic-bezier(.2,.75,.3,1) both, chatDrawFloat 2.6s ease-in-out infinite; }
.chat-draw-stage:not(.is-picked) .chat-draw-card:nth-child(1){ animation-delay:.04s, 1s; }
.chat-draw-stage:not(.is-picked) .chat-draw-card:nth-child(2){ animation-delay:.17s, 1.2s; }
.chat-draw-stage:not(.is-picked) .chat-draw-card:nth-child(3){ animation-delay:.30s, 1.4s; }
.chat-draw-stage:not(.is-picked) .chat-draw-card:active { transform:scale(.94); }
/* Locked reading bubble: clear hook line + blurred body */
.ai-message.is-locked-reading { position:relative; }
.ai-message.is-locked-reading .chat-draw-hook { display:block; color:#fff; margin-bottom:9px; }
.ai-message.is-locked-reading .chat-draw-reading-text { display:block; filter:blur(5px); user-select:none; -webkit-user-select:none; pointer-events:none; opacity:.9; }
.ai-message.is-locked-reading.chat-draw-clickable { cursor:pointer; }
.chat-draw-lock { display:block; margin-top:12px; font-family:var(--font-heading); font-size:12px; letter-spacing:.06em; color:var(--color-gold-bright); text-align:center; text-shadow:0 0 12px var(--color-gold-glow); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.chat-draw-clickable:active .chat-draw-lock { opacity:.7; }
/* Smooth paywall entrance */
#subscription-modal { animation:subModalIn .5s cubic-bezier(.4,.2,.2,1) both; }
@keyframes subModalIn { from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .chat-draw-stage:not(.is-picked) .chat-draw-card{ animation:none; } #subscription-modal{ animation:none; } .chat-draw-card__inner{ transition:none; } }
.ai-input-area { width:100%; display:flex; align-items:flex-end; gap:10px; margin-bottom:20px; }
/* Auto-growing textarea: 1 line by default, up to ~3 lines, then scrolls inside */
.ai-input { flex:1; min-width:0; background:rgba(255,255,255,0.05); border:1px solid rgba(247,212,74,0.3); border-radius:20px; padding:10px 18px; color:#fff; font-family:var(--font-body); font-size:16px; line-height:1.35; outline:none; resize:none; box-sizing:border-box; max-height:92px; overflow-y:auto; }
.ai-send-btn { flex-shrink:0; width:45px; height:45px; border-radius:50%; background:linear-gradient(45deg, #f7d44a, #d4af37); border:none; cursor:pointer; box-shadow:0 0 15px rgba(247,212,74,0.4); display:flex; align-items:center; justify-content:center; color:#1a0730; -webkit-tap-highlight-color:transparent; transition:transform .18s; }
.ai-send-btn svg { width:20px; height:20px; margin-left:-2px; }
.ai-send-btn:active { transform:scale(.93); }
/* === CARD RITUALS (premium) === */
.oracle-rituals { display:flex; gap:8px; justify-content:center; padding:0 14px 8px; }
.ritual-btn { position:relative; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; background:rgba(58,28,97,.5); border:1px solid rgba(179,136,255,.32); color:#ede7f6; font-family:var(--font-heading); font-size:.68rem; font-weight:400; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .25s, background .25s, transform .18s; }
.ritual-btn:active { transform:scale(.96); }
.ritual-btn:not(.is-locked) { border-color:rgba(247,212,74,.55); background:rgba(247,212,74,.12); color:var(--color-gold-bright); }
.ritual-btn__icon { font-size:14px; line-height:1; }
.ritual-btn__lock { font-size:10px; line-height:1; opacity:.75; }
.ritual-btn:not(.is-locked) .ritual-btn__lock { display:none; }
.ritual-btn.is-locked { opacity:.72; }
.ritual-btn:disabled { opacity:.4; cursor:default; transform:none; }
/* === TODAY TAB UI === */
/* stretch, not center: the natal card is one of the dashboard's stack of full-width
cards and shrink-wrapping it made it read as a stray element. */
.t-top { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 18px; margin-top: 0; transform: translateZ(0); will-change: transform; backface-visibility: hidden; }
.t-val-box { display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; }
.t-ico { font-size: 24px; color: #b388ff; text-shadow: 0 0 15px #b388ff; }
.t-num { font-size: 28px; font-weight:400; color: #fff; font-family: var(--font-heading); margin-top: 5px; }
/* The Big-3 line and the Birth Chart button live in one card so the dashes read
as "locked" placeholders the button fills in. */
.t-natal-card { display: flex; flex-direction: column; align-items: center; gap: 13px; width: 100%; box-sizing: border-box; padding: 16px 22px; border: 1px solid rgba(179,136,255,.25); border-radius: 18px; background: rgba(255,255,255,.03); box-shadow: 0 4px 24px rgba(0,0,0,.25); }
.t-signs { display: flex; gap: 15px; font-size: 14px; color: #ede7f6; opacity: 0.85; margin-bottom: 0; }
.t-btn { background: linear-gradient(90deg, #6441A5, #b388ff); border: none; padding: 11px 26px; border-radius: 20px; color: #fff; font-weight: bold; font-size: 14px; box-shadow: 0 4px 15px rgba(179,136,255,0.35); cursor: pointer; }
.t-natal-hint { font-family: var(--font-body); font-size: 12.5px; color: var(--color-gold); opacity: .9; margin: 0; text-align: center; }
.t-natal-card.is-unlocked .t-natal-hint { display: none; }
.today-daily-gift { display:block; width:100%; margin:-5px 0 18px; padding:11px 14px; border:1px solid rgba(255,110,190,.38); border-radius:14px; background:rgba(255,110,190,.1); color:#ffd1e8; font:600 12px var(--font-heading); letter-spacing:.04em; cursor:pointer; transition:border-color .3s,background .3s,color .3s; }
.today-daily-gift:not(.is-locked) { animation:today-gift-glow 2.6s ease-in-out infinite; }
@keyframes today-gift-glow { 0%,100%{ box-shadow:0 0 0 rgba(255,110,190,0); } 50%{ box-shadow:0 0 16px rgba(255,110,190,.3); } }
.today-daily-gift.is-locked { border-color:rgba(179,136,255,.26); background:rgba(179,136,255,.07); color:rgba(237,231,246,.6); box-shadow:none; }
@media (prefers-reduced-motion: reduce){ .today-daily-gift:not(.is-locked){ animation:none; } }
/* Phase 2.5: Daily gift as a richer countdown block */
.daily-gift-card { display:flex; align-items:center; gap:12px; text-align:left; }
.daily-gift-card__icon { font-size:24px; line-height:1; flex-shrink:0; filter:drop-shadow(0 0 8px rgba(255,110,190,.6)); }
.today-daily-gift.is-locked .daily-gift-card__icon { filter:none; opacity:.65; }
.daily-gift-card__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.daily-gift-card__title { font:600 12.5px var(--font-heading); letter-spacing:.1em; text-transform:uppercase; color:#fff; opacity:.9; }
.daily-gift-card__status { font:400 15px var(--font-body); color:#ffd1e8; }
.today-daily-gift.is-locked .daily-gift-card__status { font:600 16px 'Montserrat','Arial',sans-serif; letter-spacing:.04em; color:var(--color-gold-bright); text-shadow:0 0 12px var(--color-gold-glow); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.daily-gift-card__cta { flex-shrink:0; font:700 12.5px var(--font-heading); letter-spacing:.08em; padding:7px 13px; border-radius:999px; background:linear-gradient(110deg,#ff6ebe,#9d72db); color:#fff; box-shadow:0 4px 14px rgba(255,110,190,.35); white-space:nowrap; }
.today-daily-gift.is-locked .daily-gift-card__cta { background:rgba(179,136,255,.15); color:rgba(237,231,246,.55); box-shadow:none; }
/* Reading timer cards (Yes/No + PPF) under the daily gift */
.reading-timer-card{display:block;width:100%;margin:0 0 12px;padding:11px 14px;border:1px solid rgba(247,212,74,.3);border-radius:14px;background:rgba(247,212,74,.06);color:var(--color-text);cursor:pointer;transition:border-color .3s,background .3s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.reading-timer-card .daily-gift-card__icon{color:var(--color-gold-bright);filter:drop-shadow(0 0 8px rgba(247,212,74,.55))}
.reading-timer-card .daily-gift-card__status{color:var(--color-text-muted)}
.reading-timer-card .daily-gift-card__cta{background:linear-gradient(110deg,var(--color-gold-bright),#d4af37);color:#1a0730;box-shadow:0 4px 14px rgba(247,212,74,.3)}
.reading-timer-card.is-locked{border-color:rgba(179,136,255,.24);background:rgba(179,136,255,.07)}
.reading-timer-card.is-locked .daily-gift-card__icon{filter:none;opacity:.6}
.reading-timer-card.is-locked .daily-gift-card__status{font:700 15px 'Montserrat','Arial',sans-serif;letter-spacing:.02em;color:var(--color-gold-bright);text-shadow:0 0 12px var(--color-gold-glow);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.reading-timer-card.is-locked .daily-gift-card__cta{background:rgba(179,136,255,.15);color:rgba(237,231,246,.55);box-shadow:none}
/* Status + CTA stacked on the right */
.reading-timer-card{display:flex;align-items:center;gap:12px}
.reading-timer-card .daily-gift-card__body{flex:1;min-width:0}
.reading-timer-card__right{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.reading-timer-card .daily-gift-card__status{font:400 14px var(--font-body);color:var(--color-text-muted)}
.reading-timer-card .daily-gift-card__cta{margin:0}
/* Enticing "chat with Selenya" call-to-action on the Today tab */
.oracle-cta{position:relative;display:flex;align-items:center;gap:13px;width:100%;box-sizing:border-box;margin:6px 0 18px;padding:14px 15px;border:1px solid rgba(179,136,255,.5);border-radius:18px;background:linear-gradient(120deg,rgba(179,136,255,.2),rgba(247,212,74,.1) 58%,rgba(255,110,190,.15));overflow:hidden;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;box-shadow:0 8px 30px rgba(107,63,160,.35),inset 0 0 24px rgba(179,136,255,.15);animation:oracle-cta-breathe 3.2s ease-in-out infinite}
@keyframes oracle-cta-breathe{0%,100%{box-shadow:0 8px 30px rgba(107,63,160,.3),inset 0 0 22px rgba(179,136,255,.12)}50%{box-shadow:0 10px 42px rgba(179,136,255,.55),inset 0 0 30px rgba(247,212,74,.18)}}
.oracle-cta__glow{position:absolute;top:-60%;right:-15%;width:65%;height:220%;background:radial-gradient(ellipse,rgba(247,212,74,.28),transparent 70%);pointer-events:none;animation:oracle-cta-sweep 5s ease-in-out infinite}
@keyframes oracle-cta-sweep{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(-45%);opacity:1}}
.oracle-cta__avatar-wrap{position:relative;flex-shrink:0;width:52px;height:52px}
.oracle-cta__avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(247,212,74,.85);box-shadow:0 0 16px rgba(247,212,74,.5)}
.oracle-cta__pulse{position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(179,136,255,.6);animation:oracle-cta-pulse 2s ease-out infinite;pointer-events:none}
@keyframes oracle-cta-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.oracle-cta__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;position:relative;z-index:2}
.oracle-cta__kicker{font:600 9px var(--font-heading);letter-spacing:.2em;text-transform:uppercase;color:var(--color-gold-bright);text-shadow:0 0 10px var(--color-gold-glow)}
.oracle-cta__title{font:600 15px var(--font-heading);color:#fff;text-shadow:0 0 14px rgba(179,136,255,.65);line-height:1.15}
.oracle-cta__sub{font:400 13px var(--font-body);color:rgba(237,231,246,.82);line-height:1.3}
.oracle-cta__btn{position:relative;z-index:2;flex-shrink:0;align-self:center;font:700 11px var(--font-heading);letter-spacing:.05em;padding:9px 13px;border-radius:999px;background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);color:#1a0730;box-shadow:0 4px 16px rgba(247,212,74,.45);white-space:nowrap;animation:pulse-btn 2.2s infinite}
@media (prefers-reduced-motion:reduce){.oracle-cta,.oracle-cta__glow,.oracle-cta__pulse,.oracle-cta__btn{animation:none}}
/* Full gate overlay (Yes/No re-entry) */
.reading-gate{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;max-width:340px;padding:20px;box-sizing:border-box;animation:share-fade-in .5s ease both}
.reading-gate__glyph{font-size:52px;filter:drop-shadow(0 0 18px rgba(247,212,74,.5));margin-bottom:14px;animation:mystic-breathe 4s ease-in-out infinite}
.reading-gate__title{font-family:var(--font-heading);font-size:1.2rem;font-weight:400;letter-spacing:.08em;color:var(--color-gold-bright);text-shadow:0 0 20px var(--color-gold-glow);margin-bottom:10px}
.reading-gate__msg{font-family:var(--font-body);font-size:1.05rem;color:var(--color-text-muted);line-height:1.5;margin-bottom:16px}
.reading-gate__recap{width:100%;margin-bottom:18px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(247,212,74,.2)}
.yn-gate-recap__label{display:block;font-family:var(--font-heading);font-weight:400;font-size:1.4rem;letter-spacing:.05em;margin-bottom:6px}
.yn-gate-recap__label--yes{color:#6ee7a0;text-shadow:0 0 16px rgba(110,231,160,.5)}
.yn-gate-recap__label--no{color:#ff8080;text-shadow:0 0 16px rgba(255,128,128,.45)}
.yn-gate-recap__text{font-family:var(--font-body);font-size:.98rem;color:var(--color-text);line-height:1.5}
.reading-gate__timer{font-family:var(--font-heading);font-weight:400;font-size:2.2rem;letter-spacing:.06em;color:var(--color-gold-bright);text-shadow:0 0 18px var(--color-gold-glow);font-variant-numeric:tabular-nums;margin-bottom:2px}
.reading-gate__sub{font-family:var(--font-body);font-size:.95rem;color:var(--color-text-muted);margin-bottom:22px}
.reading-gate__unlock{padding:14px 40px;font-family:var(--font-heading);font-size:.8rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#1a0730;background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);border:none;border-radius:30px;cursor:pointer;box-shadow:0 4px 24px var(--color-gold-glow);transition:transform .2s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.reading-gate__unlock:hover,.reading-gate__unlock:focus-visible{transform:translateY(-2px);box-shadow:0 6px 32px rgba(247,212,74,.6);outline:none}
/* Bottom gate banner (PPF re-entry: cached reading stays visible above) */
/* Fixed, not absolute — and this is the whole bug it once had. #ppf-screen is the scroll
container, so `absolute; bottom:16px` resolved against its padding box, which is one
viewport tall no matter how long the reading is. On a short reading it looked pinned;
on a long one it sat one screen down in the CONTENT and drifted up into the middle of a
sentence as you scrolled. The .reading-redo button, which occupies exactly this slot on
the other half of the same screen, was fixed from the start — the two just disagreed.
Bottom matches it too, safe-area included, so the plate never lands on the home bar. */
.reading-gate-banner{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:none;align-items:center;gap:14px;max-width:340px;width:calc(100% - 32px);padding:12px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(30,10,53,.94),rgba(20,8,42,.94));border:1px solid rgba(247,212,74,.35);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 20px rgba(247,212,74,.12);z-index:8;backdrop-filter:blur(8px);box-sizing:border-box}
.reading-gate-banner__text{flex:1;font-family:var(--font-body);font-size:1rem;color:var(--color-text)}
.reading-gate-banner__text span{color:var(--color-gold-bright);font-family:var(--font-heading);font-weight:400;font-variant-numeric:tabular-nums}
.reading-gate-banner__unlock{flex-shrink:0;padding:9px 18px;font-family:var(--font-heading);font-size:.72rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:#1a0730;background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);border:none;border-radius:999px;cursor:pointer;box-shadow:0 4px 14px rgba(247,212,74,.3);-webkit-tap-highlight-color:transparent}
/* Phase 2.6: persistent daily-discount banner (10-min urgency, survives reloads) */
.daily-coupon-banner { display:flex; align-items:center; gap:12px; width:100%; margin:0 0 12px; padding:12px 14px; border-radius:14px; cursor:pointer; box-sizing:border-box;
border:1px solid rgba(247,212,74,.5); background:linear-gradient(110deg,rgba(247,212,74,.12),rgba(255,110,190,.1));
animation:coupon-banner-glow 2.4s ease-in-out infinite; -webkit-tap-highlight-color:transparent; }
@keyframes coupon-banner-glow { 0%,100%{ box-shadow:0 0 12px rgba(247,212,74,.14); } 50%{ box-shadow:0 0 22px rgba(247,212,74,.32); } }
.daily-coupon-banner__icon { font-size:22px; line-height:1; flex-shrink:0; }
.daily-coupon-banner__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.daily-coupon-banner__title { font:600 13px var(--font-heading); letter-spacing:.04em; color:var(--color-gold-bright); text-shadow:0 0 10px var(--color-gold-glow); }
.daily-coupon-banner__timer { font:600 13px var(--font-heading); letter-spacing:.06em; color:#ffd1e8; font-variant-numeric:tabular-nums; }
.daily-coupon-banner__use { flex-shrink:0; font:700 11px var(--font-heading); letter-spacing:.08em; padding:8px 15px; border-radius:999px; color:#000; background:linear-gradient(135deg,#f7d44a,#d4af37); box-shadow:0 4px 14px rgba(247,212,74,.4); }
@media (prefers-reduced-motion: reduce){ .daily-coupon-banner{ animation:none; } }
.t-wrap, .t-story { transform: translateZ(0); will-change: transform; backface-visibility: hidden; }
.t-story { background: rgba(20, 8, 42, 0.6); border-radius: 20px; padding: 25px 20px; border: 1px solid rgba(179,136,255,0.1); }
.t-stitle { font-family: var(--font-heading); font-size: 22px; color: #fff; margin-bottom: 15px; }
/* The Moon's own line: sign, phase and how lit it is, set apart from the prose so the
fact and the reading of it do not read as one sentence. */
/* The evening mark. Five steps from empty to full — the scale reads without labels,
and the labels are there for the first time you see it. */
/* A perk the chosen tier does not carry: struck through, not hidden. Seeing what you
are giving up is the argument for the tier above. */
.subs__benefits li.is-off { opacity:.4; }
.subs__benefits li.is-off .subs__benefit-text { text-decoration:line-through; text-decoration-thickness:1px; }
.subs__benefits li.is-off .subs__benefit-icon { opacity:.5; }
/* Weekly does get this one — it just pays for it. A price is not a refusal. */
.subs__benefit-note { display:block; margin-top:2px; font-family:var(--font-heading); font-size:11px;
letter-spacing:.06em; text-transform:uppercase; color:var(--color-gold); opacity:.85; }
/* The daily countdown now rides on the tile the reading lives on. */
.mystic-card__timer{position:absolute;z-index:3;top:10px;right:10px;padding:5px 10px;border-radius:999px;
border:1px solid rgba(247,212,74,.35);background:rgba(10,4,20,.72);color:var(--color-gold-bright);
font:600 12px var(--font-heading);letter-spacing:.04em;font-variant-numeric:tabular-nums;backdrop-filter:blur(3px)}
.mystic-card.is-spent .mystic-card__timer{color:var(--color-text-muted);border-color:rgba(179,136,255,.3)}
.mystic-card.is-spent .card-bg{filter:grayscale(.55) brightness(.7)}
.t-mood { margin-top:16px; padding-top:14px; border-top:1px solid rgba(179,136,255,.14); }
.t-mood__q { display:block; margin-bottom:10px; font-family:var(--font-body); font-size:15px; font-style:italic; color:var(--color-text-muted); }
.t-mood__row { display:flex; gap:6px; }
.t-mood__btn { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px;
border:1px solid rgba(179,136,255,.2); border-radius:12px; background:transparent; color:var(--color-text-muted);
cursor:pointer; transition:border-color .25s, color .25s, background .25s; -webkit-tap-highlight-color:transparent; }
.t-mood__btn:active { transform:scale(.96); }
.t-mood__btn.is-on { border-color:rgba(247,212,74,.55); color:var(--color-gold-bright); background:rgba(247,212,74,.07); }
.t-mood__glyph { font-size:17px; line-height:1; }
.t-mood__label { font-family:var(--font-heading); font-size:10px; letter-spacing:.04em; text-transform:uppercase; text-align:center;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.t-moon { display:block; margin-bottom:10px; font-family:var(--font-heading); font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-gold); }
.t-spara { font-size: 15px; color: #ede7f6; line-height: 1.6; opacity: 0.9; }
/* === PREMIUM CURRENCY PILL === */
.currency-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(20, 8, 42, 0.7); border: 1px solid rgba(179, 136, 255, 0.4); border-radius: 20px; padding: 6px 14px; font-family: var(--font-heading); font-weight: 400; color: #fff; box-shadow: 0 0 15px rgba(179, 136, 255, 0.15); font-size: 14px; }
.currency-pill .c-icon { color: #b388ff; text-shadow: 0 0 10px #b388ff; font-size: 16px; }
/* === LIBRARY TAB FIX === */
/* nowrap, and the buttons shrink instead. 5x52 plus four 10px gaps is 328px against the
326px the tab actually offers once its 20px side padding is taken off a 366px screen —
two pixels over, and the fifth suit dropped onto a line of its own. Sizing them to fit
rather than picking a number that happens to work on one phone: flex-basis is the
preferred 52px, and on anything narrower they give way evenly. */
.lib-filters { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; flex-wrap: nowrap; }
.lib-cat-btn { flex: 0 1 52px; min-width: 0; max-width: 52px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(179,136,255,0.38); background: rgba(28,14,56,0.72); color: #fff; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s, background .3s, box-shadow .3s, border-color .3s; -webkit-tap-highlight-color: transparent; }
/* The artwork is fine gold line work on a dark violet ground, which is where it was
getting lost — at 30px the strokes are barely a pixel wide and .55 opacity took most
of what was left. Brightened and given its own faint gold halo instead: a lift in
brightness keeps the metal, where raising opacity alone just makes it a paler line.
Never desaturate these — a greyscale filter turns gold to mud. */
.lib-cat-btn img { width: 30px; height: 30px; object-fit: contain; display: block; opacity: .88; filter: brightness(1.18) drop-shadow(0 0 4px rgba(247,212,74,.32)); transition: opacity .3s ease, filter .3s ease; pointer-events: none; }
.lib-cat-btn:active { transform: scale(.92); }
.lib-cat-btn.active { background: linear-gradient(135deg, #6441A5, #b388ff); border: none; box-shadow: 0 0 15px rgba(179,136,255,0.4); }
.lib-cat-btn.active img { opacity: 1; filter: brightness(1.45) drop-shadow(0 0 7px rgba(255,244,205,.8)); }
/* Language switch (Settings) */
/* Language picker rows inside #lang-modal. */
.lang-opt { display: block; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; color: rgba(237,231,246,.8); font: 500 15px var(--font-body); padding: 12px 14px; margin-bottom: 4px; border-radius: 12px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.lang-opt:hover { background: rgba(179,136,255,.1); color: #fff; }
.lang-opt.is-active { background: linear-gradient(135deg, rgba(100,65,165,.55), rgba(179,136,255,.4)); color: #fff; border-color: rgba(247,212,74,.4); }
/* Natal chart modal (Big 3 + reading). */
.natal-label { display:block; color:#cbb8e8; font-size:12px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 6px 2px; }
.natal-big3 { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.natal-sign { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid rgba(247,212,74,.2); border-radius:14px; background:rgba(255,255,255,.03); }
.natal-sign__glyph { font-size:22px; color:var(--color-gold-bright); text-shadow:0 0 12px var(--color-gold-glow); width:26px; text-align:center; }
.natal-sign__name { flex:1; font-family:var(--font-heading); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); }
.natal-sign__value { font-family:var(--font-heading); font-size:1.05rem; color:var(--color-gold-bright); text-shadow:0 0 10px var(--color-gold-glow); }
.natal-reading { font-family:var(--font-body); font-size:1.02rem; line-height:1.65; color:var(--color-text); white-space:pre-wrap; }
/* ===== TRANSITS — today's sky against the birth chart ===== */
/* The 4px bottom margin let the sky block collide with the daily story right under it —
two dense blocks need room to read as two. */
.transit-card{margin:14px 0 20px;padding:16px;border-radius:18px;
border:1px solid rgba(179,136,255,.28);
background:linear-gradient(135deg,rgba(30,10,53,.72),rgba(20,8,42,.6));
box-shadow:0 10px 28px rgba(0,0,0,.4)}
.transit-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
flex-wrap:wrap;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid rgba(247,212,74,.16)}
.transit-card__title{font-family:var(--font-heading);font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--color-gold-bright);text-shadow:0 0 10px var(--color-gold-glow)}
.transit-card__moon{font-family:var(--font-body);font-size:.82rem;color:var(--color-text-muted);white-space:nowrap}
.transit-rows{display:flex;flex-direction:column;gap:2px}
.transit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.05)}
.transit-row:last-child{border-bottom:none}
.transit-row__glyphs{font-size:16px;color:var(--color-gold-bright);white-space:nowrap;letter-spacing:2px}
.transit-row__glyphs b{font-weight:400}
.transit-row__glyphs b.is-soft{color:#7aa2ff}
.transit-row__glyphs b.is-hard{color:#ff7a8a}
.transit-row__retro{font-size:.78rem;color:#e79bd0;margin-left:1px}
/* AC / MC stand in for the angles, which have no glyph — sized down so they sit at the
same visual weight as the planetary symbols beside them. */
.transit-row__angle{font-size:.82rem;letter-spacing:.04em;font-weight:600}
.transit-row__text{font-family:var(--font-body);font-size:.8rem;color:var(--color-text-muted);text-align:right}
.transit-card__reading{font-family:var(--font-body);font-size:.97rem;line-height:1.6;
color:var(--color-text);white-space:pre-wrap;margin:12px 0 0}
.transit-card__empty{font-family:var(--font-body);font-size:.9rem;
color:var(--color-text-muted);margin:0;line-height:1.5}
.transit-card__cta{width:100%;margin-top:12px;padding:11px;border-radius:12px;cursor:pointer;
border:1px solid rgba(247,212,74,.4);background:rgba(247,212,74,.08);
color:var(--color-gold-bright);font-family:var(--font-heading);font-size:.66rem;
font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.transit-card__cta:active{transform:scale(.98)}
.transit-card__loading{display:flex;align-items:center;justify-content:center;gap:10px;
padding:16px 0 4px;font-family:var(--font-body);font-style:italic;font-size:.9rem;
color:var(--color-text-muted)}
.transit-card__loading .reading__loader-spinner{display:inline-block;width:26px;height:26px}
.transit-card__msg{color:#ff9db1;font-size:.8rem;text-align:center;margin:8px 0 0;min-height:1em}
/* ===== SUBSCRIPTION SHOP, ALREADY OWNED =====
Nothing here is for sale to someone who already subscribed: the plans grey out and the
call to action stops looking like one. */
.subs__benefits-note{font-family:var(--font-body);font-size:.82rem;line-height:1.45;
color:var(--color-text-muted);text-align:center;margin:0 0 14px;padding:0 4px}
.sub-plan.is-owned{opacity:.42;filter:grayscale(.85);pointer-events:none}
.sub-plan.is-owned .sub-plan__badge{display:none}
.subs__cta.is-owned,.subs__cta:disabled{background:rgba(255,255,255,.07) !important;
color:rgba(203,184,232,.6) !important;box-shadow:none !important;cursor:default;
border:1px solid rgba(179,136,255,.22)}
.subs__cta.is-owned:active{transform:none}
/* ===== PREMIUM TILES, UNLOCKED =====
With a subscription the padlock treatment comes off and the tile earns a warmer,
deeper look: the art is dimmed further so the gold reads cleanly, a golden pool sits
under the title, and the whole tile carries an outer halo. box-shadow is used for the
halo deliberately — it draws outside the border box and so survives overflow:hidden. */
.mystic-card--unlocked{border:1px solid rgba(247,212,74,.42) !important;
box-shadow:0 16px 38px rgba(0,0,0,.55),0 0 30px rgba(247,212,74,.2),
0 20px 46px -10px rgba(247,212,74,.34) !important}
.mystic-card--unlocked .card-bg{filter:brightness(.5) saturate(1.05)}
.mystic-card--unlocked .gradient-overlay{height:78%;
background:linear-gradient(to top,rgba(10,4,20,.92) 0%,rgba(58,38,8,.5) 40%,transparent 80%)}
.mystic-card--unlocked .card-title{color:var(--color-gold-bright);
text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 18px rgba(247,212,74,.5)}
.mystic-card--unlocked .locked-card__sub{color:rgba(247,229,180,.9)}
/* ===== FOUR-BLOCK READING =====
The payoff of a premium spread: pairs, the deeper current, the card they let go, and
what to do with it — then the offer. */
.spread-summary{width:100%;max-width:340px;margin:22px auto 0;padding:0 20px 8px;box-sizing:border-box}
/* .ppf-viewport is `flex:1` — flex-basis 0 — with min-height:0, so on a column that
overflows it is the one child that can shrink to nothing. It then collapsed to zero
height while .ppf-pages kept its own 120px, and align-items:center painted that page
UPWARD over the bottom of the position map, dropping the ‹ › arrows on the seam.
Measured in a headless browser: viewport 0px, pages overlapping the map by 46px.
`flex:1 1 auto` lets it grow into free space as before but floors it at its content. */
#spread-screen .ppf-viewport{flex:1 1 auto}
.spread-summary .dc-loader{flex-direction:column;gap:12px;align-items:center;padding:22px 0}
/* Generation takes half a minute — the wait deserves a real panel, not a faint spinner
the eye slides past. Framed like the upsell card, with readable (not muted) text. */
.spread-summary__loading{display:flex;flex-direction:column;align-items:center;gap:14px;
padding:22px 18px;border:1px solid rgba(247,212,74,.35);border-radius:16px;
background:linear-gradient(135deg,rgba(30,10,53,.85),rgba(20,8,42,.75));
box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 24px rgba(247,212,74,.06)}
.spread-summary__loading .reading__loader-spinner{display:inline-block}
.spread-summary__loading-text{font-family:var(--font-body);font-size:1rem;font-style:italic;
color:var(--color-text);text-align:center;line-height:1.4}
.spread-summary__msg{color:#ff9db1;font-size:.82rem;text-align:center;margin:10px 0 0}
.spread-block{margin-bottom:22px}
.spread-block__title{font-family:var(--font-heading);font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--color-gold-bright);text-shadow:0 0 10px var(--color-gold-glow);
margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid rgba(247,212,74,.18)}
.spread-block__text{font-family:var(--font-body);font-size:1.02rem;line-height:1.65;
color:var(--color-text);white-space:pre-wrap;margin:0}
/* The card they let go is the centrepiece — it gets its own frame. Selected by class, not
by position: an empty block is skipped when rendering, so nth-child(3) framed whichever
block happened to land third. */
.spread-block--missing{padding:16px;border:1px solid rgba(247,212,74,.28);border-radius:14px;
background:rgba(247,212,74,.05)}
.spread-block--missing .spread-block__title{border-bottom-color:rgba(247,212,74,.3)}
/* ===== FULL READING WINDOW =====
Its own scroller, so the reading never shares one with the card pager. z-index sits
above #spread-screen (1000) and the bottom nav (100), but below #subscription-modal
(9999) — the 402 path opens the paywall and it must land on top. */
.spread-reading{position:fixed;inset:0;z-index:9500;display:none}
.spread-reading.is-open{display:block}
.spread-reading__panel{position:absolute;inset:0;display:flex;flex-direction:column;
background:radial-gradient(ellipse 90% 60% at 50% 0%,#1e0a35 0%,transparent 60%),
radial-gradient(ellipse 70% 50% at 50% 100%,#2a0a20 0%,transparent 55%),var(--color-bg-deep)}
/* Furniture never shrinks; only the body scrolls. */
.spread-reading__bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
gap:10px;padding:16px 16px 12px;border-bottom:1px solid rgba(247,212,74,.14);
background:rgba(10,4,20,.55);backdrop-filter:blur(10px)}
.spread-reading__title{font-family:var(--font-heading);font-size:.9rem;font-weight:400;
letter-spacing:.1em;text-transform:uppercase;color:var(--color-gold-bright);
text-shadow:0 0 20px var(--color-gold-glow);margin:0}
.spread-reading__close{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
background:rgba(255,255,255,.06);border:1px solid rgba(247,212,74,.22);
color:var(--color-gold-bright);font-size:1rem;cursor:pointer}
.spread-reading__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;box-sizing:border-box;width:100%;max-width:380px;margin:0 auto;
padding:20px 20px calc(40px + env(safe-area-inset-bottom,0px))}
.spread-upsell{margin-top:26px;padding:18px;border-radius:16px;
border:1px solid rgba(179,136,255,.3);background:rgba(30,10,53,.6);text-align:center}
.spread-upsell__text{font-family:var(--font-body);font-size:.95rem;line-height:1.55;
color:var(--color-text-muted);margin:0 0 14px}
/* ===== SELECTION FUNNEL =====
Face-down cards the seeker narrows round by round. Deliberately identical backs: the
choice has to be blind, or it stops being a choice and becomes a preference. */
.spread-funnel{width:100%;max-width:340px;margin:0 auto;padding:0 16px 8px;box-sizing:border-box}
.spread-funnel__hint{font-family:var(--font-body);font-size:.98rem;
color:var(--color-text-muted);text-align:center;margin:0 0 16px;min-height:2.6em;line-height:1.4}
/* Flex rather than a fixed grid: rounds show 8, 6, 4, 3 or 2 cards, and a grid leaves the
last, short row hugging the left edge. The basis keeps four to a row at the same size a
grid would give, while a partial row centres itself. */
.spread-funnel__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.spr-fcard{position:relative;width:calc(25% - 7.5px);aspect-ratio:2/3;padding:0;cursor:pointer;
border:1px solid rgba(247,212,74,.28);border-radius:8px;background-color:#140828;
background-image:var(--card-back);background-size:cover;background-position:center;background-blend-mode:var(--skin-blend,normal);
display:flex;align-items:center;justify-content:center;
transition:transform .25s ease,box-shadow .3s ease,border-color .3s ease,opacity .3s ease}
.spr-fcard__glyph{font-size:15px;color:rgba(247,212,74,.5);text-shadow:0 0 8px rgba(0,0,0,.8)}
.spr-fcard:active{transform:scale(.94)}
.spr-fcard.is-picked{border-color:var(--color-gold-bright);transform:translateY(-8px) scale(1.04);
box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 20px var(--color-gold-glow)}
.spr-fcard.is-picked .spr-fcard__glyph{color:var(--color-gold-bright);text-shadow:0 0 12px var(--color-gold-glow)}
@media (max-width:340px){.spread-funnel__grid{gap:7px}.spr-fcard{width:calc(25% - 5.25px)}}
/* The final round is face-up and holds only two or three cards, so they get room to be
looked at properly — this is the round where the seeker actually decides. */
.spread-funnel__grid--up{gap:12px}
.spread-funnel__grid--up .spr-fcard{width:calc(33.333% - 8px);aspect-ratio:auto;
background-image:none;background-color:transparent;border-color:transparent;
flex-direction:column;gap:6px;align-items:stretch}
.spr-fcard__art{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;display:block;
border:1px solid rgba(247,212,74,.28);transition:border-color .3s,box-shadow .3s}
.spr-fcard__art.is-reversed{transform:rotate(180deg)}
.spr-fcard__name{font-family:var(--font-body);font-size:.72rem;line-height:1.25;text-align:center;
color:var(--color-text-muted);transition:color .3s}
.spread-funnel__grid--up .spr-fcard.is-picked{transform:translateY(-6px);box-shadow:none}
.spread-funnel__grid--up .spr-fcard.is-picked .spr-fcard__art{border-color:var(--color-gold-bright);
box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 18px var(--color-gold-glow)}
.spread-funnel__grid--up .spr-fcard.is-picked .spr-fcard__name{color:var(--color-gold-bright)}
.spr-fcard__rev{font-family:var(--font-heading);font-size:.52rem;font-weight:400;letter-spacing:.08em;
text-transform:uppercase;color:#e79bd0;border:1px solid rgba(231,155,208,.4);border-radius:8px;
padding:2px 6px;align-self:center}
@media (max-width:340px){.spread-funnel__grid--up .spr-fcard{width:calc(33.333% - 8px)}}
/* ===== SPREAD INTAKE =====
A few words about the situation before the cards are dealt. Without them positions
like "the first path" or "what they feel" have nothing concrete to speak about. */
.spread-intake{width:100%;max-width:340px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.spread-intake__lead{font-family:var(--font-body);font-size:.95rem;
color:var(--color-text-muted);text-align:center;margin:0 0 18px;line-height:1.5}
.spread-intake__label{display:block;font-family:var(--font-heading);font-size:.66rem;
letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold);margin:0 0 6px}
.spread-intake__none{display:flex;align-items:center;gap:8px;color:#cbb8e8;font-size:.86rem;
margin:-4px 0 14px;cursor:pointer}
.spread-intake__none input{width:16px;height:16px}
.spread-intake__msg{color:#ff9db1;font-size:.82rem;min-height:16px;margin:2px 0 10px;text-align:center}
.spread-refined{font-family:var(--font-body);font-size:.95rem;
color:rgba(247,229,180,.92);text-align:center;max-width:320px;margin:-4px auto 12px;line-height:1.45}
/* ===== CELTIC CROSS =====
Screen chrome only — the pages themselves reuse the .ppf-* presentation.
The map is the classic layout: a cross in columns 1-3 (card 2 lying across card 1)
and the staff running bottom-to-top in column 4. */
/* The spread title in the body serif rather than the display capitals: the long Russian
names ("ОТНОШЕНИЯ И НОВАЯ ЛЮБОВЬ") set in the wide-tracked heading face ran edge to edge and
jammed against the corner buttons. Constrained and centred, it wraps into a calm
two-line block clear of both. */
.spread-heading{font-family:var(--font-body);text-transform:none;
font-size:1.5rem;font-weight:500;letter-spacing:.02em;line-height:1.25;
max-width:250px;margin:4px auto 8px}
#spread-screen{display:none;flex-direction:column;align-items:center;min-height:100vh;
background:radial-gradient(ellipse 90% 60% at 50% 0%,#1e0a35 0%,transparent 60%),
radial-gradient(ellipse 70% 50% at 50% 100%,#2a0a20 0%,transparent 55%),var(--color-bg-deep);
z-index:1000;position:fixed;inset:0;padding:60px 0 30px;box-sizing:border-box;
overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
.spread-redo{position:fixed;top:16px;right:16px;z-index:3;display:none;align-items:center;
padding:8px 14px;border:1px solid rgba(247,212,74,.4);border-radius:20px;background:rgba(10,4,20,.6);
color:var(--color-gold-bright);font-family:var(--font-heading);font-size:.62rem;font-weight:400;
letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.spread-redo:active{transform:scale(.95)}
/* The "start over" button where the countdown banner would otherwise sit: same footprint,
same weight as the gold call to action on the gate screens. In the corner it read as a
close button; down here it reads as the offer it is. */
.reading-redo{position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:6;display:none;
padding:14px 40px;border:none;border-radius:30px;cursor:pointer;
font-family:var(--font-heading);font-size:.8rem;font-weight:400;letter-spacing:.12em;
text-transform:uppercase;color:#1a0730;
background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);
box-shadow:0 4px 24px var(--color-gold-glow);
transition:box-shadow .3s;-webkit-tap-highlight-color:transparent}
.reading-redo:hover,.reading-redo:focus-visible{box-shadow:0 6px 32px rgba(247,212,74,.6);outline:none}
.reading-redo:active{transform:translateX(-50%) scale(.96)}
/* === Touch feedback ==========================================================
One pressed state for the whole app, applied by the delegated listener in app.js.
Deliberately no transform: a third of these controls already use one to position
themselves, and overwriting it would throw them across the screen mid-press. The
existing per-class :active rules still fire on top of this where they exist. */
.is-tapped{filter:brightness(1.22) saturate(1.05);opacity:.92;transition:filter .06s ease,opacity .06s ease}
button,[role="button"],.mystic-card,.t-natal-card,.lib-card,.sub-plan--card{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Someone who has asked the system for less movement still gets the sound and the
vibration — only the flicker goes away. */
@media (prefers-reduced-motion: reduce){.is-tapped{transition:none}}
/* Rows are taller than columns so the crossing card, rotated into the same footprint,
ends up wider than tall — that difference is what makes the cross read as a cross.
The gap must exceed the 7px each side that card 2 protrudes, or it would touch 4 and 6. */
.celtic-map{display:grid;grid-template-columns:repeat(4,30px);grid-template-rows:repeat(4,44px);
gap:9px;margin:2px 0 14px}
/* Spreads without a fixed geometry just show their positions in a row. */
.spread-map-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:280px;margin:2px 0 14px}
.spread-map-row .cc-slot{width:30px;height:40px}
.cc-slot{border:1px solid rgba(247,212,74,.2);border-radius:3px;background:rgba(255,255,255,.03);
color:rgba(203,184,232,.45);font-family:var(--font-heading);font-size:.6rem;cursor:pointer;
display:flex;align-items:center;justify-content:center;padding:0;
transition:background .3s,border-color .3s,box-shadow .3s}
.cc-slot.is-done{background:rgba(247,212,74,.16);border-color:rgba(247,212,74,.45);color:var(--color-gold-bright)}
.cc-slot.is-active{border-color:var(--color-gold-bright);box-shadow:0 0 9px var(--color-gold-glow);z-index:3}
/* Card 2 lies across card 1 — that crossing is the whole point of the spread. Card 2 is
rotated but NOT shrunk, so it turns 44x30 inside a 30x44 cell and protrudes 7px to each
side, while card 1 shows above and below it. Both stay visible and tappable. Card 1
carries its number at the top, clear of the card lying over it; card 2's number is
counter-rotated so it reads upright. */
.cc-s1{grid-area:2/2;z-index:1;align-items:flex-start;padding-top:3px}
.cc-s2{grid-area:2/2;z-index:2;transform:rotate(90deg);background:#241041;
border-color:rgba(247,212,74,.42);box-shadow:0 2px 8px rgba(0,0,0,.55)}
.cc-s2.is-done{background:#3a2a12}
.cc-s2 .cc-num{transform:rotate(-90deg)}
.cc-s3{grid-area:3/2}
.cc-s4{grid-area:2/1}
.cc-s5{grid-area:1/2}
.cc-s6{grid-area:2/3}
.cc-s7{grid-area:4/4}
.cc-s8{grid-area:3/4}
.cc-s9{grid-area:2/4}
.cc-s10{grid-area:1/4}
/* ===== NATAL CHART WHEEL (inline SVG) =====
Geometry lives in app.js (_natalWheelSVG); only paint lives here. */
.natal-wheel-box { margin:4px 0 18px; }
.natal-wheel { display:block; width:100%; max-width:340px; margin:0 auto; }
.natal-w-ring { fill:none; stroke:rgba(247,212,74,.32); stroke-width:1; }
.natal-w-inner { fill:none; stroke:rgba(179,136,255,.28); stroke-width:1; }
.natal-w-wedge { fill:rgba(255,255,255,.035); }
.natal-w-sep { stroke:rgba(247,212,74,.26); stroke-width:1; }
.natal-w-tick { stroke:rgba(247,212,74,.16); stroke-width:.8; }
.natal-w-sign { fill:var(--color-gold-bright); font-size:17px; }
.natal-w-cusp { stroke:rgba(179,136,255,.22); stroke-width:.9; }
.natal-w-axis { stroke:rgba(247,212,74,.5); stroke-width:1.7; }
.natal-w-axislbl { fill:rgba(247,212,74,.7); font-size:9px; letter-spacing:.06em; }
.natal-w-num { fill:rgba(203,184,232,.45); font-size:9px; }
.natal-w-ptick { stroke:var(--color-gold-bright); stroke-width:1.4; }
.natal-w-glyph { fill:#ffe9a3; font-size:16px; }
.natal-w-asp { fill:none; stroke-width:1.1; opacity:.55; }
.natal-w-asp--soft { stroke:#7aa2ff; }
.natal-w-asp--hard { stroke:#ff7a8a; }
/* ===== TIER-2 CHART DATA GRID (planets + aspects) =====
The astro-seek-style fact table below the reading: what makes the chart feel real. */
.natal-chart-data { margin-top:22px; }
.natal-section-title { font-family:var(--font-heading); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--color-gold-bright); text-shadow:0 0 10px var(--color-gold-glow); margin:18px 0 10px; padding-bottom:6px;
border-bottom:1px solid rgba(247,212,74,.18); }
.natal-planets { display:flex; flex-direction:column; gap:2px; }
.natal-prow { display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px;
padding:9px 4px; border-bottom:1px solid rgba(255,255,255,.05); }
.natal-prow--angle { opacity:.9; }
.natal-pg { font-size:17px; color:var(--color-gold-bright); text-align:center; text-shadow:0 0 8px var(--color-gold-glow);
font-weight:700; letter-spacing:0; }
.natal-prow--angle .natal-pg { font-size:.62rem; font-family:var(--font-heading); letter-spacing:.04em; }
.natal-pname { font-family:var(--font-body); font-size:.9rem; color:var(--color-text); }
.natal-retro { color:#e79bd0; font-size:.82rem; margin-left:3px; }
.natal-psign { display:flex; align-items:center; gap:6px; justify-self:end; font-size:.9rem; color:var(--color-text); white-space:nowrap; }
.natal-sg { color:var(--color-gold-bright); font-size:15px; }
.natal-pdeg { color:var(--color-text-muted); font-size:.78rem; }
.natal-phouse { grid-column:1 / -1; justify-self:end; font-size:.7rem; color:var(--color-text-muted);
letter-spacing:.03em; margin-top:-2px; }
.natal-phouse:empty { display:none; }
.natal-aspects { display:flex; flex-direction:column; gap:2px; }
.natal-arow { display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:9px 4px; border-bottom:1px solid rgba(255,255,255,.05); }
.natal-aglyphs { font-size:16px; color:var(--color-gold-bright); white-space:nowrap; letter-spacing:2px; }
.natal-aglyphs b { color:var(--color-text); font-weight:400; }
.natal-atext { font-family:var(--font-body); font-size:.82rem; color:var(--color-text-muted); text-align:right; }
/* Sub plan cards */
/* ===== SUBSCRIPTION SHOP =====
The seeker must see exactly what they are buying before any price: what it unlocks,
the total, and the per-week cost that makes the plans comparable. */
.subs__head { text-align:center; margin-bottom:18px; }
.subs__title { font-family:var(--font-heading); color:var(--color-gold-bright); font-size:27px; text-shadow:0 0 15px rgba(247,212,74,.6); margin-bottom:5px; }
.subs__sub { color:#ede7f6; opacity:.8; font-size:15px; }
.subs__hero { display:flex; justify-content:center; align-items:flex-end; margin-top:16px; height:104px; }
.subs__hero img { width:62px; border-radius:7px; border:1px solid rgba(247,212,74,.55); box-shadow:0 10px 26px rgba(0,0,0,.55); display:block; }
.subs__hero img:nth-child(1) { transform:rotate(-13deg) translateX(15px); z-index:1; }
.subs__hero img:nth-child(2) { transform:scale(1.16); z-index:3; box-shadow:0 12px 32px rgba(0,0,0,.6),0 0 26px rgba(247,212,74,.35); }
.subs__hero img:nth-child(3) { transform:rotate(13deg) translateX(-15px); z-index:1; }
.subs__benefits { list-style:none; padding:0; margin:0 0 20px; width:100%; max-width:380px; display:flex; flex-direction:column; gap:11px; }
.subs__benefits li { display:flex; align-items:center; gap:12px; color:#ede7f6; font-family:var(--font-body); font-size:1.02rem; line-height:1.3; text-align:left; }
.subs__benefit-icon { flex:0 0 30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:rgba(247,212,74,.13); border:1px solid rgba(247,212,74,.32); color:var(--color-gold-bright); font-size:14px; }
.subs__plans { width:100%; max-width:380px; display:flex; flex-direction:column; gap:11px; margin-bottom:18px; }
.sub-plan.sub-plan--card { position:relative; display:block; padding:15px 16px; border-radius:17px; background:rgba(20,8,42,.6); border:1.5px solid rgba(179,136,255,.22); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color .25s, box-shadow .25s, background .25s; }
.sub-plan.sub-plan--card.is-selected { border-color:rgba(247,212,74,.9); background:rgba(58,28,97,.5); box-shadow:0 0 24px rgba(247,212,74,.22); }
.sub-plan.sub-plan--card:active { transform:scale(.99); }
.sub-plan__badge { position:absolute; top:-10px; right:14px; padding:3px 11px; border-radius:999px; background:linear-gradient(135deg,var(--color-gold-bright),#d4af37); color:#1a0730; font:700 9.5px var(--font-heading); letter-spacing:.11em; text-transform:uppercase; white-space:nowrap; box-shadow:0 3px 12px rgba(247,212,74,.4); }
.sub-plan__main { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sub-plan__left { min-width:0; text-align:left; }
.sub-plan__meta { color:#ede7f6; opacity:.65; font-size:12.5px; margin-top:3px; }
.sub-plan__right { text-align:right; white-space:nowrap; }
/* The per-week figure is what makes three different billing periods comparable, so it
reads as a real price line — not grey fine print under the total. */
.sub-plan__perweek { display:inline-flex; align-items:baseline; gap:4px; margin-top:5px; padding:3px 9px; border-radius:999px; background:rgba(179,136,255,.16); border:1px solid rgba(179,136,255,.3); }
.sub-plan__perweek-val { color:#fff; font-family:var(--font-heading); font-weight:400; font-size:13px; }
.sub-plan__perweek-unit { color:rgba(237,231,246,.75); font-size:11px; }
.sub-plan.sub-plan--card.is-selected .sub-plan__perweek { background:rgba(247,212,74,.18); border-color:rgba(247,212,74,.45); }
.sub-plan.sub-plan--card.is-selected .sub-plan__perweek-val { color:var(--color-gold-bright); }
.subs__cta { width:100%; max-width:380px; padding:17px 20px; border:none; border-radius:16px; background:linear-gradient(135deg,var(--color-gold-bright),#d4af37); color:#1a0730; font-family:var(--font-heading); font-size:16px; font-weight:400; letter-spacing:.04em; cursor:pointer; box-shadow:0 6px 26px rgba(247,212,74,.4); -webkit-tap-highlight-color:transparent; transition:transform .18s, box-shadow .25s; }
.subs__cta:active { transform:scale(.98); }
.subs__cta:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.subs__fineprint { margin-top:11px; color:rgba(237,231,246,.5); font-family:var(--font-body); font-size:13px; text-align:center; }
.sub-plan { background:rgba(20,8,42,0.6); border:1px solid rgba(179,136,255,0.2); border-radius:16px; padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; width:100%; max-width:380px; }
.sub-plan-info { flex:1; }
.sub-plan-label { font-family:var(--font-heading); font-size:16px; }
.sub-plan-price { color:#f7d44a; font-family:var(--font-heading); font-size:20px; font-weight:400; margin:0 12px; white-space:nowrap; }
.sub-plan-price--old { color:rgba(237,231,246,.45); font-size:14px; text-decoration:line-through; margin-right:5px; }
.sub-plan-btn { background:rgba(179,136,255,0.25); border:1px solid rgba(179,136,255,0.4); border-radius:12px; padding:8px 16px; font-family:var(--font-heading); font-size:12px; font-weight:400; color:#fff; cursor:pointer; transition:transform .2s; }
.sub-plan-btn:active { transform:scale(.94); }
.sub-plan-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
/* Dust tariff cards */
.dust-tariff { background:rgba(20,8,42,0.6); border:1px solid rgba(179,136,255,0.2); border-radius:16px; padding:16px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.dust-tariff-amount { font-family:var(--font-heading); font-size:20px; color:#fff; }
.dust-tariff-price { color:#f7d44a; font-family:var(--font-heading); font-size:18px; margin:0 12px; }
.dust-tariff-btn { background:linear-gradient(135deg,#f7d44a,#d4af37); border:none; border-radius:12px; padding:8px 18px; font-family:var(--font-heading); font-size:13px; font-weight:400; color:#000; cursor:pointer; box-shadow:0 4px 12px rgba(247,212,74,0.3); transition:transform .2s; }
.dust-tariff-btn:active { transform:scale(.94); }
.dust-tariff-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.lib-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 100%; transform:translateZ(0); will-change:transform; backface-visibility:hidden; }
.lib-card { background: rgba(20, 8, 42, 0.6); border: 1px solid rgba(247, 212, 74, 0.2); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s ease, border-color .3s, box-shadow .3s; transform:translateZ(0); will-change:transform; backface-visibility:hidden; }
.lib-card:hover, .lib-card:focus-visible { border-color: rgba(247,212,74,.5); box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 16px rgba(247,212,74,.12); outline: none; }
.lib-card:active { transform: scale(.96); }
.card-img-placeholder { width: 100%; aspect-ratio: 2/3; background: radial-gradient(ellipse at 50% 35%, #241042, #0a0414); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #d4af37; font-size: 40px; margin-bottom: 8px; border: 1px solid rgba(247,212,74,0.15); text-shadow: 0 0 16px rgba(247,212,74,.35); }
.card-info span { font-size: 9px; color: #b388ff; text-transform: uppercase; letter-spacing: 1px; }
.card-info p { font-size: 13px; font-family: var(--font-heading); color: #fff; text-align: center; margin-top: 2px; line-height: 1.2; }
.lib-empty { grid-column: 1 / -1; text-align: center; color: rgba(237,231,246,0.5); padding: 40px; font-family: var(--font-body); }
/* === LIBRARY CARD DETAIL (bottom sheet) === */
.lib-sheet { position: fixed; inset: 0; z-index: 10000; display: none; }
.lib-sheet__backdrop { position: absolute; inset: 0; background: rgba(6, 2, 14, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .34s ease; }
.lib-sheet.is-open .lib-sheet__backdrop { opacity: 1; }
.lib-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; box-sizing: border-box; padding: 14px 24px 34px; border-radius: 26px 26px 0 0; background: linear-gradient(180deg, #1b0a33 0%, #12061f 100%); border-top: 1px solid rgba(247,212,74,.35); box-shadow: 0 -14px 50px rgba(0,0,0,.6), 0 0 40px rgba(179,136,255,.15); transform: translateY(100%); transition: transform .36s cubic-bezier(.2,.9,.25,1); display: flex; flex-direction: column; align-items: center; text-align: center; }
.lib-sheet__panel::-webkit-scrollbar { display: none; }
.lib-sheet.is-open .lib-sheet__panel { transform: translateY(0); }
.lib-sheet__handle { width: 44px; height: 5px; border-radius: 999px; background: rgba(237,231,246,.28); margin-bottom: 14px; flex-shrink: 0; }
.lib-sheet__close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(247,212,74,.2); color: var(--color-text-muted); font-size: 15px; cursor: pointer; transition: background .3s, color .3s; -webkit-tap-highlight-color: transparent; }
.lib-sheet__close:hover, .lib-sheet__close:focus-visible { background: rgba(247,212,74,.12); color: var(--color-gold-bright); outline: none; }
.lib-sheet__card { width: 128px; height: 208px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2a0845, #3a1c61); border: 2px solid rgba(247,212,74,.85); box-shadow: 0 16px 44px rgba(0,0,0,.5), 0 0 44px rgba(247,212,74,.35), inset 0 0 22px rgba(179,136,255,.3); margin-bottom: 16px; flex-shrink: 0; }
.lib-sheet__symbol, .lib-sheet__card .lib-visual-symbol { font-size: 4.6rem; line-height: 1; filter: drop-shadow(0 0 18px rgba(247,212,74,.5)); }
/* Optional real artwork hook (set a card's `image` in tarot_library.json to use it) */
.lib-sheet__card .lib-visual-img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.card-img-placeholder .lib-visual-img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.lib-sheet__cat { font-family: var(--font-heading); font-size: .66rem; font-weight:400; letter-spacing: .22em; text-transform: uppercase; color: var(--color-neon-purple); text-shadow: 0 0 12px rgba(179,136,255,.5); margin-bottom: 4px; }
.lib-sheet__name { font-family: var(--font-heading); font-size: 1.5rem; font-weight:400; letter-spacing: .04em; color: var(--color-gold-bright); text-shadow: 0 0 22px var(--color-gold-glow); margin-bottom: 18px; }
.lib-sheet__meaning { width: 100%; max-width: 380px; text-align: left; padding: 14px 16px; border-radius: 16px; margin-bottom: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(247,212,74,.18); }
.lib-sheet__meaning--rev { background: rgba(255,110,190,.06); border-color: rgba(255,110,190,.3); }
.lib-sheet__label { display: inline-block; font-family: var(--font-heading); font-size: .62rem; font-weight:400; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 7px; }
.lib-sheet__label--up { color: #6ee7a0; text-shadow: 0 0 12px rgba(110,231,160,.4); }
.lib-sheet__label--rev { color: #ff9ed6; text-shadow: 0 0 12px rgba(255,110,190,.4); }
.lib-sheet__meaning p { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.55; color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .lib-sheet__panel { transition: transform .01s; } .lib-sheet__backdrop { transition: opacity .01s; } }
/* === WHEEL OF DESTINY ======================================================
Night gold. A full-screen room rather than a card on a scrim: the wheel is the
only thing being done while it is open, and a modal that admits it can give the
rim the whole width of the phone.
The rim carries no numbers of its own — app.js writes the labels from what the
server says the wedges pay. Colours stay here because they are decoration; what
a wedge is worth is a fact and lives in one place, on the server.
========================================================================== */
.wheel-modal { position:fixed; inset:0; z-index:10000; box-sizing:border-box; flex-direction:column; gap:12px; overflow:hidden;
padding:calc(14px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
background:radial-gradient(120% 78% at 50% -8%,#341a63 0%,#1a1038 42%,#0b0817 100%); }
.wheel-modal [hidden] { display:none !important; }
.wheel-stars { position:absolute; inset:0; pointer-events:none; background-image:
radial-gradient(1.6px 1.6px at 12% 9%,rgba(255,255,255,.75),transparent),
radial-gradient(1.4px 1.4px at 82% 15%,rgba(255,255,255,.5),transparent),
radial-gradient(1.2px 1.2px at 34% 24%,rgba(255,255,255,.4),transparent),
radial-gradient(1.6px 1.6px at 68% 34%,rgba(255,255,255,.35),transparent),
radial-gradient(1.4px 1.4px at 22% 74%,rgba(255,255,255,.4),transparent),
radial-gradient(1.6px 1.6px at 88% 82%,rgba(255,255,255,.3),transparent); }
.wheel-stars--gold { background-image:
radial-gradient(2px 2px at 18% 26%,rgba(232,200,106,.9),transparent),
radial-gradient(1.6px 1.6px at 82% 32%,rgba(255,255,255,.7),transparent),
radial-gradient(2px 2px at 74% 62%,rgba(232,200,106,.7),transparent),
radial-gradient(1.6px 1.6px at 24% 66%,rgba(255,255,255,.5),transparent);
animation:wheel-sparkle 2.6s ease-in-out infinite; }
.wheel-bar { position:relative; flex:none; display:flex; align-items:center; justify-content:space-between; }
.wheel-dust { display:flex; align-items:center; gap:7px; padding:5px 11px 5px 8px; border:1px solid rgba(232,200,106,.28); border-radius:999px;
background:rgba(255,255,255,.07); color:#f0e2bd; font:700 13px var(--font-heading); cursor:pointer; }
.wheel-moon { flex:none; width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 150% 50%,transparent 60%,#e8c86a 61%); }
.wheel-close { display:flex; width:44px; height:44px; margin:-12px -14px -12px 0; align-items:center; justify-content:center; border:0; background:none;
color:rgba(255,255,255,.4); font:400 20px var(--font-heading); cursor:pointer; }
.wheel-head { position:relative; flex:none; text-align:center; }
.wheel-kicker { margin:0; color:#d894c9; font:700 10.5px var(--font-heading); letter-spacing:.2em; text-transform:uppercase; }
.wheel-kicker--gold { color:#e8c86a; }
.wheel-title { margin:5px 0 0; color:#fff; font:600 clamp(27px,8.6vw,38px)/1.1 var(--font-heading); }
.wheel-sub { margin:7px auto 0; max-width:290px; color:rgba(233,220,255,.62); font-size:13px; line-height:1.45; }
/* The two wedges worth opening the modal for, named before the wheel is touched. The
deck tile is hidden unless a deck is actually on the rim — a teaser for something
that cannot be won is the kind of small lie the reviews of this genre are made of. */
.wheel-teasers { position:relative; flex:none; display:flex; gap:9px; }
.wheel-teaser { flex:1; min-width:0; display:flex; align-items:center; gap:9px; padding:9px 10px; border:1px solid rgba(201,168,255,.3); border-radius:14px;
background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02)); }
.wheel-teaser--gold { border-color:rgba(232,200,106,.35); background:linear-gradient(160deg,rgba(232,200,106,.2),rgba(232,200,106,.06)); }
.wheel-teaser__badge { flex:none; display:flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:10px;
background:linear-gradient(155deg,#f4d67e,#c9992c); color:#3a2606; font:800 12px var(--font-heading); }
.wheel-teaser__card { flex:none; display:flex; width:24px; height:32px; align-items:center; justify-content:center; border:1px solid rgba(232,200,106,.5);
border-radius:6px; background:#0a0812; color:#e8c86a; font:600 15px var(--font-heading); }
.wheel-teaser__body { min-width:0; display:flex; flex-direction:column; gap:3px; }
.wheel-teaser__body b { overflow:hidden; color:#efe6ff; font:700 11.5px/1.2 var(--font-heading); white-space:nowrap; text-overflow:ellipsis; }
.wheel-teaser__body i { color:rgba(201,168,255,.6); font:600 10.5px/1.2 var(--font-heading); font-style:normal; letter-spacing:.02em; }
.wheel-teaser--gold .wheel-teaser__body b { color:#f6e9c6; }
.wheel-teaser--gold .wheel-teaser__body i { color:rgba(246,233,198,.55); }
.wheel-stage { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.wheel-frame { position:relative; width:min(78vw,302px); aspect-ratio:1; transition:transform .65s cubic-bezier(.2,.85,.2,1); }
/* The wheel steps back when the prize sheet arrives instead of being covered by it: the
wedge it stopped on has to stay visible, or the result is just an announcement. */
.wheel-frame.is-won { transform:translateY(-38%) scale(.54); }
.wheel-halo { position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(circle,rgba(232,200,106,.3),transparent 66%); animation:wheel-glow 3.4s ease-in-out infinite; }
.wheel-rim { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 40deg,#f6dc95,#b8842a 25%,#f8e5ad 50%,#a9762a 74%,#f6dc95);
box-shadow:0 18px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.35); }
.wheel-disc { position:absolute; inset:4.3%; border-radius:50%; overflow:hidden; box-shadow:inset 0 0 0 2px rgba(11,8,23,.8);
transition:transform 4.2s cubic-bezier(.12,.75,.13,1); }
.wheel-paint { position:absolute; inset:0; background:
radial-gradient(circle at 50% 22%,rgba(255,255,255,.16),transparent 58%),
radial-gradient(circle at 50% 100%,rgba(0,0,0,.35),transparent 55%),
repeating-conic-gradient(from -22.5deg,rgba(255,222,150,.45) 0deg .45deg,transparent .45deg 45deg),
conic-gradient(from -22.5deg,#d9a537 0deg 45deg,#2b1f5e 45deg 90deg,#b92a80 90deg 135deg,#372681 135deg 180deg,#0b0913 180deg 225deg,#2b1f5e 225deg 270deg,#c9308c 270deg 315deg,#372681 315deg 360deg); }
.wheel-labels { position:absolute; inset:0; }
/* One rotated layer per wedge, each holding its label at twelve o'clock. Rotating the
layer rather than positioning the label by hand is what lets the count change without
ten hand-measured coordinates, which is how the old ten-sector rim was built. */
.wheel-slot { position:absolute; inset:0; }
.wheel-slot > span { position:absolute; top:4.4%; left:50%; width:72px; margin-left:-36px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.wl-pct { color:#fff2fa; font:800 clamp(21px,7.2vw,27px)/1 var(--font-heading); }
.wl-pct i { font-style:normal; font-size:.63em; }
.wheel-slot--gold .wl-pct { color:#33200a; font-size:clamp(23px,8vw,30px); }
.wl-dust { color:#efe4ff; font:800 clamp(19px,6.6vw,25px)/1 var(--font-heading); }
.wl-moon { width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 150% 50%,transparent 60%,#c9a8ff 61%); }
.wl-card { display:flex; width:30px; height:41px; align-items:center; justify-content:center; border:1px solid rgba(232,200,106,.6); border-radius:7px;
background:linear-gradient(160deg,#191129,#05040a); color:#e8c86a; font:600 21px var(--font-heading); box-shadow:0 2px 10px rgba(0,0,0,.7); }
.wheel-hub { position:absolute; left:50%; top:50%; display:flex; width:29%; height:29%; align-items:center; justify-content:center; transform:translate(-50%,-50%);
border:2px solid rgba(232,200,106,.75); border-radius:50%; background:radial-gradient(circle at 50% 30%,#332057,#120c26);
box-shadow:0 8px 22px rgba(0,0,0,.6),inset 0 2px 10px rgba(255,255,255,.12); }
.wheel-hub span { width:19px; height:19px; border-radius:4px; background:#e8c86a; transform:rotate(45deg); box-shadow:0 0 16px rgba(232,200,106,.85); }
.wheel-pointer { position:absolute; left:50%; top:-13px; width:30px; height:36px; transform:translateX(-50%);
background:linear-gradient(175deg,#f8e5ad,#c9992c); clip-path:polygon(50% 100%,0 0,100% 0); filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
.wheel-pointer.is-ticking { animation:wheel-tick .1s linear infinite; }
.wheel-disc.is-spinning .wheel-labels { filter:blur(1.7px); opacity:.82; }
.wheel-labels { transition:filter .85s ease-out,opacity .85s ease-out; }
.wheel-slot--won > span { animation:wheel-slot-won 1.5s ease-out; }
.wheel-foot { position:relative; flex:none; display:flex; flex-direction:column; gap:9px; align-items:center; width:100%; }
.wheel-cta { width:100%; padding:17px; border:none; border-radius:16px; background:linear-gradient(160deg,#f6dc95,#c9992c); color:#2c1c05;
font:800 15px var(--font-heading); letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
box-shadow:0 10px 26px rgba(201,153,44,.4),inset 0 1px 0 rgba(255,255,255,.5); }
.wheel-cta:disabled { opacity:.6; box-shadow:none; cursor:default; }
.wheel-hint { margin:0; color:rgba(233,220,255,.45); font:500 11.5px var(--font-heading); text-align:center; }
.wheel-link { padding:4px 6px; border:0; background:none; color:rgba(233,220,255,.6); font:600 11.5px var(--font-heading);
text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wheel-ghost { padding:4px 8px; border:0; background:none; color:rgba(233,220,255,.5); font:600 11.5px var(--font-heading); cursor:pointer; }
.wheel-wait { box-sizing:border-box; width:100%; padding:17px; border:1px solid rgba(232,200,106,.28); border-radius:16px; background:rgba(255,255,255,.06);
color:#f0e2bd; font:700 14px var(--font-heading); letter-spacing:.08em; text-transform:uppercase; text-align:center; }
.wheel-wait i { font-style:normal; animation:wheel-dot 1s infinite; }
.wheel-wait i:nth-of-type(2) { animation-delay:.2s; }
.wheel-wait i:nth-of-type(3) { animation-delay:.4s; }
.wheel-done { box-sizing:border-box; width:100%; padding:15px; border:1px dashed rgba(201,168,255,.3); border-radius:16px; background:rgba(255,255,255,.04); text-align:center; }
.wheel-done b { display:block; color:rgba(239,230,255,.75); font:700 13px var(--font-heading); letter-spacing:.05em; text-transform:uppercase; }
.wheel-done span { display:block; margin-top:5px; color:rgba(201,168,255,.6); font:600 12px var(--font-heading); font-variant-numeric:tabular-nums; }
.wheel-again { box-sizing:border-box; display:flex; width:100%; padding:14px; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(232,200,106,.5);
border-radius:14px; background:rgba(232,200,106,.1); color:#f0e2bd; font:700 13px var(--font-heading); letter-spacing:.05em; cursor:pointer; }
.wheel-again:disabled { opacity:.55; cursor:default; }
.wheel-prize { position:absolute; z-index:3; left:16px; right:16px; bottom:calc(18px + env(safe-area-inset-bottom)); padding:20px 18px 18px; border-radius:22px;
border:1px solid rgba(232,200,106,.42); background:linear-gradient(165deg,rgba(60,34,104,.96),rgba(18,12,38,.98));
box-shadow:0 -12px 50px rgba(0,0,0,.6); text-align:center; animation:wheel-pop .5s cubic-bezier(.2,.9,.2,1) both; }
.wheel-prize__kicker { margin:0; color:#d894c9; font:700 10.5px var(--font-heading); letter-spacing:.2em; text-transform:uppercase; }
.wheel-prize__value { margin:10px 0 0; color:#f6dc95; font:800 44px/1 var(--font-heading); letter-spacing:-.02em; }
.wheel-prize__name { margin:8px 0 0; color:#fff; font:600 15px/1.3 var(--font-heading); }
.wheel-prize__desc { margin:6px 0 0; color:rgba(233,220,255,.6); font-size:12px; line-height:1.45; }
.wheel-prize .wheel-cta { margin-top:14px; padding:16px; border-radius:15px; font-size:14px; }
.wheel-prize__note { margin:10px 0 0; color:#e8c86a; font:600 11.5px var(--font-heading); font-variant-numeric:tabular-nums; }
/* Winning a deck is two moments: the closed deck, then what it is. */
.wheel-reveal,.wheel-revealed { position:absolute; z-index:4; inset:0; box-sizing:border-box; display:flex; flex-direction:column; gap:10px; align-items:center;
padding:calc(14px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom));
background:radial-gradient(120% 78% at 50% 12%,#3a1d6c 0%,#180f36 44%,#08060f 100%); animation:wheel-pop .45s cubic-bezier(.2,.9,.2,1) both; }
.wheel-reveal .wheel-bar,.wheel-revealed .wheel-bar { width:100%; }
.wheel-reveal__stage { position:relative; flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
.wheel-shell { position:relative; display:flex; width:min(52vw,196px); aspect-ratio:196/280; flex-direction:column; align-items:center; justify-content:center; gap:14px;
padding:0; border:0; background:none; cursor:pointer; animation:wheel-float 4.5s ease-in-out infinite; }
.wheel-shell::before { content:''; position:absolute; inset:0; border:1.5px solid rgba(232,200,106,.6); border-radius:18px;
background:linear-gradient(165deg,#1c1330,#06050c); box-shadow:0 26px 50px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.12); }
.wheel-shell__halo { position:absolute; inset:-26px; border-radius:50%; background:radial-gradient(circle,rgba(232,200,106,.3),transparent 68%); animation:wheel-glow 3.2s ease-in-out infinite; }
.wheel-shell__inner { position:absolute; inset:12px; border:1px solid rgba(232,200,106,.25); border-radius:12px; }
.wheel-shell__mark { position:relative; width:26px; height:26px; border-radius:6px; background:#e8c86a; transform:rotate(45deg); box-shadow:0 0 22px rgba(232,200,106,.8); }
.wheel-shell__q { position:relative; color:#e8c86a; font:500 62px/1 var(--font-heading); }
.wheel-cover { position:relative; width:min(50vw,186px); aspect-ratio:186/266; animation:wheel-cardin .7s cubic-bezier(.2,.9,.2,1) both; }
.wheel-cover::before,.wheel-cover::after { content:''; position:absolute; border:1px solid rgba(232,200,106,.22); border-radius:16px; background:#170f2d; }
.wheel-cover::before { left:14px; top:10px; right:-14px; bottom:-10px; }
.wheel-cover::after { left:7px; top:5px; right:-7px; bottom:-5px; background:#1b1233; border-color:rgba(232,200,106,.3); }
.wheel-cover img { position:relative; z-index:1; width:100%; height:100%; display:block; object-fit:cover; border:1.5px solid rgba(232,200,106,.7);
border-radius:16px; box-sizing:border-box; box-shadow:0 24px 46px rgba(0,0,0,.6); background:#241a3f; }
.wheel-revealed__meta { position:relative; text-align:center; }
.wheel-rarity { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border:1px solid rgba(232,200,106,.4); border-radius:999px;
background:rgba(232,200,106,.12); color:#f0e2bd; font:700 10.5px var(--font-heading); letter-spacing:.08em; text-transform:uppercase; }
.wheel-rarity::before { content:''; width:8px; height:8px; border-radius:2px; background:#e8c86a; transform:rotate(45deg); }
.wheel-odds { position:absolute; z-index:5; inset:0; display:flex; align-items:flex-end; background:rgba(6,4,14,.72); backdrop-filter:blur(4px); }
.wheel-odds__sheet { box-sizing:border-box; width:100%; max-height:82%; overflow-y:auto; padding:20px 20px calc(20px + env(safe-area-inset-bottom));
border-top:1px solid rgba(232,200,106,.35); border-radius:22px 22px 0 0; background:linear-gradient(165deg,rgba(60,34,104,.98),rgba(18,12,38,.99)); }
.wheel-odds__sheet h3 { margin:0; color:#fff; font:600 22px var(--font-heading); }
.wheel-odds__lede { margin:6px 0 14px; color:rgba(233,220,255,.6); font-size:12px; line-height:1.45; }
.wheel-odds__sheet ul { margin:0; padding:0; list-style:none; }
.wheel-odds__sheet li { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.07);
color:#efe6ff; font:600 13px var(--font-heading); }
.wheel-odds__sheet li b { color:#e8c86a; font-variant-numeric:tabular-nums; }
.wheel-odds .wheel-ghost { display:block; margin:14px auto 0; }
/* === DECK SKINS ============================================================
A skin has no art. It maps the brightness of whatever deck is in hand onto a
two-colour ramp, so five skins cost zero pictures and work over every deck
that will ever ship — including ones drawn later.
Two techniques, because card art reaches the screen two ways. Faces are ![]()
and take a filter: greyscale and contrast in CSS, then an SVG table that lands
the greys on the ramp. Backs are a background-image on a card face inside a
`transform-style:preserve-3d` flip, where a filter would flatten the 3D and
break the turn — so they get a wash layer blended into the same background.
========================================================================== */
img[src*="cards/"] { filter: var(--skin-filter, none); }
/* === SKIN SHOP === */
.skins-entry { display:flex; width:100%; margin:0 0 18px; padding:11px 13px; align-items:center; gap:12px; border:1px solid var(--color-gold-dim); border-radius:16px;
background:rgba(255,255,255,.03); backdrop-filter:blur(14px); cursor:pointer; text-align:left; }
.skins-entry__swatch { flex:none; width:34px; height:34px; border:1px solid rgba(247,212,74,.35); border-radius:10px;
background:var(--skin-swatch,linear-gradient(150deg,#f7d44a,#6b3fa0)); box-shadow:0 2px 10px rgba(0,0,0,.5); }
.skins-entry__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.skins-entry__body b { color:var(--color-text); font:600 14px var(--font-heading); letter-spacing:.04em; }
.skins-entry__body i { color:var(--color-text-muted); font:400 12px var(--font-body); font-style:normal; }
.skins-entry__chevron { flex:none; color:var(--color-gold); font-size:20px; }
.skin-modal { position:fixed; inset:0; z-index:10001; align-items:flex-end; background:rgba(6,4,14,.78); backdrop-filter:blur(6px); }
.skin-modal__sheet { box-sizing:border-box; width:100%; max-height:88vh; overflow-y:auto; padding:18px 18px calc(20px + env(safe-area-inset-bottom));
border-top:1px solid rgba(232,200,106,.3); border-radius:22px 22px 0 0; background:linear-gradient(165deg,rgba(46,27,84,.98),rgba(14,10,30,.99)); }
.skin-dust { display:inline-flex; align-items:center; gap:7px; margin:0 0 14px; padding:5px 11px 5px 8px; border:1px solid rgba(232,200,106,.28); border-radius:999px;
background:rgba(255,255,255,.07); color:#f0e2bd; font:700 13px var(--font-heading); }
.skin-list { display:flex; flex-direction:column; gap:12px; }
.skin-card { display:flex; gap:12px; padding:12px; align-items:center; border:1px solid rgba(232,200,106,.22); border-radius:18px; background:rgba(255,255,255,.03); }
.skin-card.is-active { border-color:#e8c86a; box-shadow:0 0 0 1px rgba(232,200,106,.45); }
/* Three real cards under the real filter — the preview IS the product. */
.skin-card__strip { flex:none; display:flex; gap:5px; }
.skin-card__strip img { width:38px; aspect-ratio:2/3; object-fit:cover; display:block; border:1px solid rgba(247,212,74,.2); border-radius:5px; }
.skin-card__body { flex:1; min-width:0; }
.skin-card__name { margin:0; color:#fff; font:600 16px var(--font-heading); letter-spacing:.03em; }
.skin-card__kind { margin:3px 0 0; color:var(--color-gold); font:600 10.5px var(--font-heading); letter-spacing:.1em; text-transform:uppercase; }
.skin-card__state { margin:4px 0 0; color:var(--color-text-muted); font:400 12px var(--font-body); }
.skin-card__buy { margin-top:9px; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:0; border-radius:999px;
background:linear-gradient(160deg,#f6dc95,#c9992c); color:#2c1c05; font:800 12px var(--font-heading); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.skin-card__buy:disabled { opacity:.55; cursor:default; }
.skin-card__use { margin-top:9px; padding:8px 14px; border:1px solid rgba(232,200,106,.5); border-radius:999px; background:rgba(232,200,106,.1);
color:#f0e2bd; font:700 12px var(--font-heading); letter-spacing:.05em; cursor:pointer; }
.skin-card__use:disabled { opacity:.55; cursor:default; }
/* === DECK COLLECTION === */
.deck-modal { position:fixed; inset:0; z-index:10001; align-items:flex-end; background:rgba(6,4,14,.78); backdrop-filter:blur(6px); }
.deck-modal__sheet { box-sizing:border-box; width:100%; max-height:86vh; overflow-y:auto; padding:18px 18px calc(20px + env(safe-area-inset-bottom));
border-top:1px solid rgba(232,200,106,.3); border-radius:22px 22px 0 0; background:linear-gradient(165deg,rgba(46,27,84,.98),rgba(14,10,30,.99)); }
.deck-modal__title { margin:0; color:#fff; font:600 22px var(--font-heading); }
.deck-modal__lede { margin:4px 0 16px; color:rgba(233,220,255,.6); font-size:12px; line-height:1.45; }
.deck-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:12px; }
.deck-tile { position:relative; padding:0; overflow:hidden; border:1px solid rgba(232,200,106,.28); border-radius:16px; background:#160f2c; cursor:pointer; text-align:center; }
.deck-tile img { display:block; width:100%; aspect-ratio:186/266; object-fit:cover; }
.deck-tile b { display:block; padding:8px 6px; color:#efe6ff; font:600 12px var(--font-heading); }
.deck-tile.is-active { border-color:#e8c86a; box-shadow:0 0 0 1px rgba(232,200,106,.5),0 10px 26px rgba(0,0,0,.5); }
.deck-tile.is-active::after { content:'✦'; position:absolute; top:8px; right:9px; color:#e8c86a; font-size:14px; }
/* Locked decks are dimmed, not drained. Greyscale on a locked tile once made the premium
spreads look broken rather than closed, and the fix was the same: keep the colour. */
.deck-tile.is-locked img { filter:brightness(.55) saturate(.75); }
.deck-tile.is-locked b { color:rgba(233,220,255,.45); }
.deck-tile__lock { position:absolute; top:38%; left:50%; transform:translate(-50%,-50%); color:rgba(232,200,106,.8); font-size:24px; text-shadow:0 2px 10px rgba(0,0,0,.7); }
@keyframes wheel-tick { 0%,100% { transform:translateX(-50%) rotate(0deg); } 50% { transform:translateX(-50%) rotate(-10deg); } }
@keyframes wheel-pop { from { opacity:0; transform:translateY(20px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes wheel-glow { 0%,100% { opacity:.35; } 50% { opacity:.85; } }
@keyframes wheel-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes wheel-dot { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@keyframes wheel-cardin { from { opacity:0; transform:rotateY(-80deg) scale(.9); } to { opacity:1; transform:none; } }
@keyframes wheel-sparkle { 0%,100% { opacity:.2; } 50% { opacity:1; } }
@keyframes wheel-slot-won { 0%,100% { transform:scale(1); filter:none; } 40% { transform:scale(1.3); filter:drop-shadow(0 0 10px rgba(255,238,150,.95)); } }
/* Sparkle burst on win (spans injected by JS) */
.wheel-burst { position:absolute; z-index:6; inset:0; pointer-events:none; }
.wheel-burst span { position:absolute; top:50%; left:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
background:radial-gradient(circle,#fff 0%,#ffe26b 55%,transparent 75%); box-shadow:0 0 8px rgba(255,226,107,.9); opacity:0;
transform:rotate(var(--a)) translateY(0) scale(.4); animation:wheel-sparkle-fly .95s ease-out forwards; }
@keyframes wheel-sparkle-fly {
0% { opacity:0; transform:rotate(var(--a)) translateY(0) scale(.4); }
15% { opacity:1; }
100% { opacity:0; transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.wheel-halo,
.wheel-shell,
.wheel-shell__halo,
.wheel-stars--gold,
.wheel-pointer.is-ticking,
.wheel-slot--won > span,
.wheel-cover,
.wheel-prize,
.wheel-reveal,
.wheel-revealed { animation:none; }
.wheel-burst { display:none; }
.wheel-disc.is-spinning .wheel-labels { filter:none; opacity:1; }
.wheel-disc { transition:transform 1.2s ease-out; }
.wheel-frame { transition:transform .2s ease-out; }
}
/* ============================================================
ONBOARDING (4-step) + LABOR ILLUSION — Phase 1
Design language: Liquid Glass over dark cosmic (see design-system/MASTER.md)
============================================================ */
#onboarding-screen { overflow: hidden; }
/* Steps are absolutely positioned, so this height must clear the TALLEST step — the
intent step (two-line subtitle + four choices). Too small and the progress dots,
which follow in normal flow, ride up over the last option. */
.ob-steps { position: relative; width: 100%; max-width: 380px; min-height: 520px; }
/* Steps are stacked on top of each other, so the old and new one must NOT cross-fade —
for the whole fade both sets of text paint at once and read as overlapping garbage
(badly on phones, where the fade is the most visible). The exit runs first, and the
entrance is delayed until it has finished, so only one step is ever legible.
visibility keeps a faded-out step from catching taps meant for the live one. */
.ob-step {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
opacity: 0; transform: translateX(48px); pointer-events: none; visibility: hidden;
transition: opacity .2s ease, transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s linear .2s;
}
.ob-step.is-active {
opacity: 1; transform: translateX(0); pointer-events: auto; visibility: visible;
transition-delay: .22s, .22s, 0s;
}
.ob-step.is-exit-left {
opacity: 0; transform: translateX(-48px); visibility: visible;
transition-delay: 0s, 0s, .2s;
}
.ob-glyph { font-size: 46px; margin-bottom: 16px; color: var(--color-gold-bright);
text-shadow: 0 0 26px var(--color-gold-glow); animation: splash-pulse 3s ease-in-out infinite; }
.ob-title { font-family: var(--font-heading); font-size: 24px; font-weight:400;
letter-spacing: .04em; color: #fff; margin-bottom: 10px; text-shadow: 0 0 20px rgba(179,136,255,.4); }
.ob-sub { font-family: var(--font-body); font-size: 16px; color: var(--color-text);
opacity: .8; margin-bottom: 28px; max-width: 320px; line-height: 1.5; }
.ob-progress { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.ob-progress span { width: 26px; height: 4px; border-radius: 999px; background: rgba(179,136,255,.22); transition: background .35s; }
.ob-progress span.on { background: var(--color-gold-bright); box-shadow: 0 0 10px var(--color-gold-glow); }
/* Zodiac grid */
.ob-zodiac-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.ob-zodiac-card {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 12px 4px; border-radius: 14px; cursor: pointer;
background: rgba(255,255,255,.03); border: 1px solid rgba(247,212,74,.15);
transition: transform .2s, border-color .3s, box-shadow .3s, background .3s;
-webkit-tap-highlight-color: transparent;
}
.ob-zodiac-card:hover { border-color: rgba(247,212,74,.4); }
.ob-zodiac-card:active { transform: scale(.94); }
.ob-zodiac-card.selected {
border-color: var(--color-gold-bright); background: rgba(247,212,74,.08);
box-shadow: 0 0 18px var(--color-gold-glow);
}
.ob-zodiac-symbol { font-size: 22px; color: var(--color-gold-bright); text-shadow: 0 0 10px var(--color-gold-glow); }
.ob-zodiac-name { font-family: var(--font-heading); font-size: 9px; letter-spacing: .06em;
text-transform: uppercase; color: var(--color-text-muted); }
.ob-zodiac-card.selected .ob-zodiac-name { color: var(--color-gold-bright); }
/* Choice list (focus / experience) */
.ob-choices { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.ob-choice {
display: flex; align-items: center; gap: 14px; text-align: left;
padding: 16px 18px; border-radius: 14px; cursor: pointer;
background: rgba(255,255,255,.03); border: 1px solid rgba(247,212,74,.15);
transition: transform .2s, border-color .3s, box-shadow .3s, background .3s;
-webkit-tap-highlight-color: transparent;
}
.ob-choice:hover { border-color: rgba(247,212,74,.4); }
.ob-choice:active { transform: scale(.98); }
.ob-choice.selected { border-color: var(--color-gold-bright); background: rgba(247,212,74,.07);
box-shadow: 0 0 16px var(--color-gold-glow); }
.ob-choice__icon { font-size: 22px; color: var(--color-neon-purple);
text-shadow: 0 0 12px var(--color-purple-glow); flex-shrink: 0; width: 26px; text-align: center; }
.ob-choice.selected .ob-choice__icon { color: var(--color-gold-bright); text-shadow: 0 0 12px var(--color-gold-glow); }
.ob-choice__body { display: flex; flex-direction: column; }
.ob-choice__label { font-family: var(--font-heading); font-size: 13px; letter-spacing: .04em; color: #fff; }
.ob-choice__desc { font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted); }
/* Step 4 inputs */
.ob-input {
width: 100%; padding: 15px 20px; border-radius: 16px; margin-bottom: 14px;
border: 1px solid rgba(179,136,255,.4); background: rgba(20,8,42,.8); color: #fff;
font-family: var(--font-body); font-size: 20px; text-align: center; outline: none;
box-shadow: 0 0 20px rgba(179,136,255,.15); color-scheme: dark;
}
.ob-input:focus { border-color: var(--color-neon-purple); box-shadow: 0 0 26px rgba(179,136,255,.35); }
.ob-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; }
.ob-select option { background: #1a0a2e; color: #fff; }
#onboarding-dob { margin-bottom: 14px; animation: ob-dob-in .35s ease both; }
@keyframes ob-dob-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #onboarding-dob { animation: none; } }
.ob-error { color: var(--color-neon-pink); font-size: 14px; margin: 2px 0 10px; min-height: 18px; }
/* ---- Labor Illusion ---- */
#labor-illusion {
position: fixed; inset: 0; z-index: 8500; display: none;
flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px;
/* Solid colour FIRST: some mobile WebViews fail to parse the `ellipse 80% 60%` gradient
syntax, leaving the overlay transparent so the onboarding text shows through it. */
background-color: #0a0414;
background-image: radial-gradient(ellipse 80% 60% at 50% 40%, #1a0a3e, #0a0414);
}
.li-orb { width: 120px; height: 120px; margin-bottom: 34px; position: relative; }
.li-orb::before, .li-orb::after {
content: ''; position: absolute; inset: 0; border-radius: 50%;
border: 2px solid transparent; border-top-color: var(--color-gold-bright);
border-right-color: var(--color-neon-purple);
animation: li-spin 1.6s linear infinite;
}
.li-orb::after { inset: 16px; border-top-color: var(--color-neon-purple);
border-right-color: var(--color-gold-dim); animation-duration: 2.4s; animation-direction: reverse; }
.li-orb__core { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 40px; color: var(--color-gold-bright); text-shadow: 0 0 24px var(--color-gold-glow);
animation: splash-pulse 2.5s ease-in-out infinite; }
@keyframes li-spin { to { transform: rotate(360deg); } }
/* Fade must be SHORTER than the JS swap delay (240ms) so the old line reaches opacity 0
before the text is replaced — otherwise iOS Safari shows the interrupted transition and
the two lines look stacked. min-height fits two wrapped lines so layout never jumps. */
.li-text { font-family: var(--font-body); font-size: 18px; font-style: italic;
color: var(--color-text); min-height: 52px; display: flex; align-items: center; justify-content: center;
margin-bottom: 24px; transition: opacity .2s ease; letter-spacing: .03em; }
.li-track { width: 100%; max-width: 300px; height: 6px; border-radius: 999px;
background: rgba(179,136,255,.18); overflow: hidden; }
.li-fill { height: 100%; width: 0%; border-radius: 999px;
background: linear-gradient(90deg, var(--color-neon-purple), var(--color-gold-bright));
box-shadow: 0 0 14px var(--color-gold-glow); transition: width .3s linear; }
.li-percent { font-family: var(--font-heading); font-size: 13px; letter-spacing: .12em;
color: var(--color-gold-dim); margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
/* Still sequenced: without motion the overlap would be even more obvious, since the
two steps would simply sit on top of one another with no movement to tell them apart. */
.ob-step { transition: opacity .15s ease, visibility 0s linear .15s; transform: none !important; }
.ob-step.is-active { transition-delay: .16s, 0s; }
.ob-step.is-exit-left { transition-delay: 0s, .15s; }
.ob-glyph, .li-orb__core { animation: none; }
.li-orb::before, .li-orb::after { animation-duration: 3s; }
}
/* === SETTINGS: VOLUME SLIDER === */
/* height is the touch target, NOT the visible track: a 5px input was so thin that on a
phone the drag was interpreted as a page scroll before the slider ever saw it. The
input is 30px tall for the finger, the 5px track is painted as a centred band, and
touch-action:none stops the browser stealing the gesture for scrolling. */
.settings-volume { --fill:50%; -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; outline:none; cursor:pointer; touch-action:none; }
.settings-volume::-webkit-slider-runnable-track { height:5px; border-radius:999px; background:linear-gradient(90deg, var(--color-gold-bright) 0%, var(--color-gold-bright) var(--fill), rgba(179,136,255,.22) var(--fill), rgba(179,136,255,.22) 100%); }
.settings-volume::-moz-range-track { height:5px; border-radius:999px; background:rgba(179,136,255,.22); }
.settings-volume::-moz-range-progress { height:5px; border-radius:999px; background:var(--color-gold-bright); }
.settings-volume::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; margin-top:-7px; width:19px; height:19px; border-radius:50%; background:linear-gradient(135deg,var(--color-gold-bright),#d4af37); border:none; box-shadow:0 0 12px rgba(247,212,74,.6); cursor:pointer; }
.settings-volume::-moz-range-thumb { width:19px; height:19px; border-radius:50%; background:linear-gradient(135deg,var(--color-gold-bright),#d4af37); border:none; box-shadow:0 0 12px rgba(247,212,74,.6); cursor:pointer; }
.settings-volume__value { font-family:var(--font-heading); font-size:.85rem; font-weight:400; color:var(--color-gold-bright); min-width:44px; text-align:right; }
/* === Card reveal ===============================================================
Squash-and-stretch toss with an over-rotating flip: the card passes 180 degrees,
comes back to 173 and settles. That overshoot is the whole difference between a
turning image and a thing with weight. Merged onto one transform track because
our cards flip in place rather than inside a wrapper. */
@keyframes sel-reveal {
0% { transform: translateY(26.0px) scale(1.070, 0.900) rotateY(0.0deg); }
10% { transform: translateY(-34.0px) scale(0.980, 1.060) rotateY(0.0deg); }
13.6% { transform: translateY(-38.0px) scale(0.984, 1.053) rotateY(0.0deg); }
30% { transform: translateY(-56.0px) scale(1.000, 1.020) rotateY(82.0deg); }
53.4% { transform: translateY(-45.2px) scale(1.000, 1.002) rotateY(199.0deg); }
56% { transform: translateY(-44.0px) scale(1.000, 1.000) rotateY(192.0deg); }
63% { transform: translateY(-23.9px) scale(1.039, 0.952) rotateY(173.0deg); }
70.5% { transform: translateY(-2.3px) scale(1.082, 0.900) rotateY(180.0deg); }
72% { transform: translateY(2.0px) scale(1.090, 0.890) rotateY(180.0deg); }
80% { transform: translateY(-16.0px) scale(0.985, 1.040) rotateY(180.0deg); }
90% { transform: translateY(0.0px) scale(1.035, 0.975) rotateY(180.0deg); }
96% { transform: translateY(-4.0px) scale(0.995, 1.010) rotateY(180.0deg); }
100% { transform: translateY(0.0px) scale(1.000, 1.000) rotateY(180.0deg); }
}
/* The ring that opens outward the moment the face lands. */
@keyframes sel-halo {
0% { opacity: 0; transform: scale(.88); }
22% { opacity: .8; }
100% { opacity: 0; transform: scale(1.3); }
}
.dc-flip.is-flipped, .ppf-flip.is-flipped, .chat-draw-card.is-revealed .chat-draw-card__inner {
animation: sel-reveal 1320ms cubic-bezier(.35,.6,.4,1) both;
}
/* Only the day card wears the ring. A card in the spread already sits in its own gold
frame, and a second one around it read as a selection box rather than a flourish.
opacity:0 in the base rule so it can never linger as a static border if the animation
never runs — a paused or already-elapsed animation on a hidden page was leaving the
ring painted on. */
.dc-flip.is-flipped::after {
content: ''; position: absolute; inset: -18px; border: 1px solid rgba(247,212,74,.7);
border-radius: 18px; pointer-events: none; opacity: 0;
animation: sel-halo 380ms cubic-bezier(.2,.75,.3,1) 930ms both;
}
@media (prefers-reduced-motion: reduce) {
.dc-flip.is-flipped, .ppf-flip.is-flipped, .chat-draw-card.is-revealed .chat-draw-card__inner {
animation: none; transform: rotateY(180deg);
}
.dc-flip.is-flipped::after { display: none; }
}
/* The hint used to go transparent and keep its box — a hole above the card exactly the
size of the sentence that vanished. Collapsing it is what lets the card rise. */
.dc-hint { overflow: hidden; max-height: 140px;
transition: opacity .45s ease, max-height .6s cubic-bezier(.4,0,.2,1), margin-bottom .6s cubic-bezier(.4,0,.2,1); }
.dc-hint.is-gone { opacity: 0; max-height: 0; margin-bottom: 0; }
/* The birth chart with no plan behind it: dimmed, with the lock where a lock belongs. */
.t-natal-card.is-locked { position: relative; opacity: .62; }
.t-natal-card.is-locked::after {
content: '\1F512'; position: absolute; top: 10px; right: 12px; font-size: 15px; line-height: 1; opacity: .95;
}
/* Locked premium tiles read as shut, not merely as a different colour scheme. The art
goes grey and dim; the title stays legible so the tile still sells what it is. */
/* Full colour. This one line was the grey: grayscale(.85) brightness(.45) drained the art
of nearly all its colour and half its light, which is why lightening the washes BEHIND
the image changed nothing visible. A premium spread is merchandise, not a disabled
control — the only dimming left is what the white title needs to stay readable. */
.mystic-card--locked .card-bg { filter: brightness(.78) saturate(1.05); }
.mystic-card--locked .card-title { opacity: .75; }
.mystic-card--locked .locked-badge { opacity: 1; }
.mystic-card--unlocked .card-bg { filter: none; }
/* Reveal sparks. Fixed to the viewport: the card is mid-rotation on a preserve-3d
layer, so anything parented to it would tumble with it. */
.card-spark-burst { position: fixed; z-index: 9990; width: 0; height: 0; pointer-events: none; }
.card-spark-burst > div { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.card-spark-burst i { position: absolute; left: 0; top: 0; width: 1px; margin-left: -.5px;
background: linear-gradient(to top, rgba(247,212,74,0) 0%, #f7d44a 60%, #fff7d6 100%);
transform-origin: 50% 100%; animation: sel-spark 340ms cubic-bezier(.25,.65,.2,1) both; }
.card-spark-burst i.is-dot { width: 3px; margin-left: -1.5px; border-radius: 50%;
background: #f7d44a; animation-duration: 380ms; }
@keyframes sel-spark {
0% { opacity: 0; transform: translateY(var(--s, -100px)) scaleY(.5); }
18% { opacity: 1; }
100% { opacity: 0; transform: translateY(var(--d, -180px)) scaleY(1.3); }
}
@media (prefers-reduced-motion: reduce) { .card-spark-burst { display: none; } }
/* --- The card arrives ------------------------------------------------------
Ported from demo/spread-deal.html, deliberately as a separate layer around
.ppf-flip rather than as extra properties on it.
Two reasons it cannot live on .ppf-flip itself. Arrival fades in, and opacity
below 1 forces `transform-style: preserve-3d` to flatten — the flip would stop
having depth. And arrival animates `transform`, which .ppf-flip already uses
for the rotation; sharing the property means one interrupts the other.
.ppf-deal also carries the perspective. It used to come from .ppf-page, but
perspective only reaches direct children, and this wrapper now stands between
them — without it here the flip turns flat. */
.ppf-deal{
position:relative;width:150px;height:246px;flex-shrink:0;
perspective:1200px;
}
/* An animation, not a transition. The position page is display:none until it
becomes current, and a transition cannot run from a state the browser never
painted — which is why the first attempt looked like nothing had changed.
An animation restarts every time the element is shown. */
@keyframes ppf-deal-in{
from{transform:translateY(-42px) scale(.86);opacity:0}
to {transform:none;opacity:1}
}
.ppf-page.is-current .ppf-deal{animation:ppf-deal-in .62s cubic-bezier(.2,.9,.25,1) both}
/* The press. Same scale(.96) the rest of the app uses for a tap, on the wrapper
so it composes with the flip instead of fighting it. */
.ppf-deal:active{transform:scale(.96);transition:transform .12s ease}
@media (prefers-reduced-motion:reduce){
.ppf-page.is-current .ppf-deal{animation:none}
.ppf-deal:active{transform:none}
}
/* ===== PAST · PRESENT · FUTURE — the deal ===================================
Ported from demo/spread-deal.html: a deck at the top, three sockets in a row,
all three cards thrown at once with a stagger between them.
Deliberately on its own .ppfd-* names rather than reusing the .ppf-page
classes it replaces. Those are shared character-for-character with the Celtic
Cross and the three other premium spreads, which are still paginated one card
at a time — restyling .ppf-page to lay three cards in a row would have laid
the Celtic Cross's ten out in a row too.
Timings are literals, not the demo's --t-deal/--stagger tokens: those live in
the demo's own :root and were never added to the app's. */
.ppfd-board{width:100%;max-width:360px;margin:0 auto;padding:0 16px 124px;box-sizing:border-box;
display:flex;flex-direction:column;align-items:center}
/* --- The deck ------------------------------------------------------------ */
.ppfd-deck{position:relative;width:82px;height:135px;margin:2px auto 16px;flex-shrink:0;
background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:transform .18s cubic-bezier(.2,.8,.2,1),height .52s cubic-bezier(.2,.8,.2,1),
margin .52s cubic-bezier(.2,.8,.2,1),opacity .38s ease}
.ppfd-deck:active{transform:scale(.96)}
.ppfd-deck[disabled]{cursor:default}
.ppfd-deck span{position:absolute;inset:0;border-radius:10px;border:1px solid rgba(247,212,74,.24);
box-shadow:0 8px 22px rgba(0,0,0,.5);background-image:var(--card-back);background-blend-mode:var(--skin-blend,normal);
background-size:cover;background-position:center;background-repeat:no-repeat}
/* Offsets big enough that the stack reads as a stack rather than as one card. */
.ppfd-deck span:nth-child(1){transform:translate(9px,7px) rotate(6deg);opacity:.45}
.ppfd-deck span:nth-child(2){transform:translate(4.5px,3.5px) rotate(3deg);opacity:.72}
/* Once the spread is down the deck has nothing left to say, and the three cards
deserve the top of the screen. It collapses rather than disappears: display:none
would snap the layout under a reading the seeker is already looking at. */
.ppfd-board.is-dealt .ppfd-deck{height:0;margin:0;opacity:0;pointer-events:none;overflow:hidden}
/* --- Sockets and cards ---------------------------------------------------- */
.ppfd-slots{display:flex;justify-content:center;align-items:flex-start;gap:10px;width:100%}
.ppfd-slot{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;
background:none;border:none;padding:0;cursor:default;-webkit-tap-highlight-color:transparent}
.ppfd-slot__label{font-family:var(--font-heading);font-size:.56rem;font-weight:400;letter-spacing:.1em;
text-transform:uppercase;color:rgba(237,231,246,.32);text-align:center;line-height:1.3;
transition:color .4s ease,text-shadow .4s ease}
.ppfd-slot.is-dealt .ppfd-slot__label{color:var(--color-gold);text-shadow:0 0 12px var(--color-gold-glow)}
.ppfd-socket{position:relative;width:100%;aspect-ratio:100/175;border-radius:10px;
border:1px dashed rgba(247,212,74,.14);background:rgba(255,255,255,.02)}
/* The card starts above the sockets, roughly where the deck is, and flies down
into place. Each slot gets its own launch offset and tilt so the three do not
arrive as one block, and --i drives the stagger through transition-delay. */
.ppfd-card{position:absolute;inset:0;perspective:900px;
transform:translate(var(--fx),-150px) rotate(var(--fr)) scale(.7);opacity:0;
transition:transform .52s cubic-bezier(.2,.8,.2,1),opacity .3s ease;
transition-delay:calc(var(--i) * .18s)}
.ppfd-slot:nth-child(1) .ppfd-card{--fx:64px;--fr:-9deg;--i:0}
.ppfd-slot:nth-child(2) .ppfd-card{--fx:0px;--fr:0deg;--i:1}
.ppfd-slot:nth-child(3) .ppfd-card{--fx:-64px;--fr:9deg;--i:2}
.ppfd-slot.is-dealt .ppfd-card{transform:none;opacity:1}
.ppfd-slot.is-dealt{cursor:pointer}
.ppfd-slot.is-dealt:active .ppfd-card{transform:scale(.96);transition-delay:0s;transition-duration:.18s}
/* The flip lives one layer in from the arrival, for the reason .ppf-deal exists:
opacity below 1 flattens preserve-3d, and both animate `transform`, so sharing
an element means one interrupts the other. The perspective sits on .ppfd-card
because it only reaches direct children, and .ppfd-card__inner is one. */
.ppfd-card__inner{position:absolute;inset:0;transform-style:preserve-3d;
transition:transform .62s cubic-bezier(.2,.9,.25,1)}
.ppfd-card.is-flipped .ppfd-card__inner{transform:rotateY(180deg)}
/* The faces are the app's own .ppf-face, so setFaceArt() and the has-art rules
keep working unchanged; only the proportions differ on a card this small. */
.ppfd-card .ppf-face{border-radius:10px;border-width:1px}
.ppfd-card .ppf-face--front{padding:0}
.ppfd-card .ppf-emoji{font-size:1.9rem;margin-bottom:8px}
.ppfd-card .ppf-name{font-size:.5rem;letter-spacing:.03em;line-height:1.2;padding:18px 3px 5px}
/* "REVERSED" set in the heading face at .14em tracking does not fit a column a third of the
screen wide, and nowrap means it does not wrap — it overhangs the card. */
.ppfd-slot .reversed-tag{font-size:8px;padding:2px 6px;margin-top:2px;letter-spacing:.05em;gap:3px}
.ppfd-slot .reversed-tag::before{font-size:9px}
/* --- The one shared reading ------------------------------------------------ */
.ppfd-reading{width:100%;margin-top:26px;padding-top:18px;min-height:1em;
border-top:1px solid rgba(247,212,74,.12)}
.ppfd-reading .dc-loader{flex-direction:column;gap:10px;align-items:center;padding:14px 0}
/* Left-aligned, unlike the one-card texts: a 200-word reading set centred turns
into a ragged column that is genuinely harder to read. */
.ppfd-text{font-family:var(--font-body);font-size:1.02rem;line-height:1.65;color:var(--color-text);
text-align:left;opacity:0;transition:opacity .6s ease;white-space:pre-wrap}
.ppfd-text.is-shown{opacity:1}
/* Reduce Motion asks for less movement, not for none. This screen IS the cards
being dealt: killing the transform outright left three cards materialising in
place, which reads as a rendering fault rather than as a spread. So the flight
keeps its stagger and loses the arc — a short drop, no rotation, no scaling,
a tenth of the distance. The stagger comes from transition-delay on the base
rule and is deliberately not overridden here: the cards still arrive one after
another, which is the part that carries the meaning. */
@media (prefers-reduced-motion:reduce){
.ppfd-card{transform:translateY(-16px);
transition:transform .2s ease,opacity .2s ease}
.ppfd-slot.is-dealt .ppfd-card{transform:none}
.ppfd-card__inner{transition:none}
.ppfd-card.is-flipped .ppfd-card__inner{transform:rotateY(180deg)}
.ppfd-deck{transition:opacity .2s ease,height .2s ease,margin .2s ease}
.ppfd-slot.is-dealt:active .ppfd-card{transform:none}
}
/* The invitation on the home screen, sitting on the line where free readings end and paid
ones begin. Gold-edged rather than gold-filled: it must read as an offer beside the
premium tiles, not compete with the buy buttons inside them. */
.home-invite{display:none;align-items:center;gap:12px;width:100%;margin:4px 0 22px;padding:13px 15px;
border-radius:16px;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;
background:linear-gradient(135deg,rgba(30,10,53,.92),rgba(20,8,42,.92));
border:1px solid rgba(247,212,74,.32);box-shadow:0 8px 26px rgba(0,0,0,.38);
transition:border-color .3s,box-shadow .3s,transform .2s}
.home-invite:active{transform:scale(.985)}
.home-invite:hover{border-color:rgba(247,212,74,.55);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 18px rgba(247,212,74,.12)}
.home-invite__icon{flex-shrink:0;font-size:1.35rem;line-height:1}
.home-invite__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.home-invite__text{font-family:var(--font-body);font-size:.92rem;line-height:1.35;color:var(--color-text)}
.home-invite__count{font-family:var(--font-body);font-size:.78rem;color:var(--color-text-muted)}
.home-invite__count:empty{display:none}
.home-invite__cta{flex-shrink:0;padding:8px 14px;border-radius:999px;
font-family:var(--font-heading);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
color:#1a0730;background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);
box-shadow:0 4px 14px rgba(247,212,74,.28)}
/* The two doors under a veiled reading. Side by side and unequal on purpose: topping up is
the smaller ask and gets the gold, the subscription stands beside it as an outline rather
than underneath as fine print. */
.chat-draw-doors{display:flex;gap:10px;align-items:stretch;margin:10px 0 4px;padding:0 2px}
.chat-draw-door{flex:1;padding:12px 10px;border-radius:14px;cursor:pointer;
font-family:var(--font-heading);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
-webkit-tap-highlight-color:transparent;transition:transform .18s,box-shadow .3s,border-color .3s}
.chat-draw-door:active{transform:scale(.97)}
.chat-draw-door--primary{border:none;color:#1a0730;
background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);
box-shadow:0 4px 16px rgba(247,212,74,.3)}
.chat-draw-door--ghost{background:rgba(20,8,42,.85);color:var(--color-text);
border:1px solid rgba(247,212,74,.3)}
.chat-draw-door--ghost:hover{border-color:rgba(247,212,74,.55)}
/* The price where the padlock used to be. A pill rather than a circle, because a number
needs room and because a round badge in a corner reads as a status, not a tag. */
.locked-badge--price{width:auto;height:auto;padding:6px 12px;border-radius:999px;
font-family:var(--font-heading);font-size:.8rem;letter-spacing:.02em;white-space:nowrap;
font-variant-numeric:tabular-nums;color:#1a0730;
background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);
border:none;box-shadow:0 4px 14px rgba(247,212,74,.32)}
.mystic-card--locked:hover .locked-badge--price,
.mystic-card--locked:focus-visible .locked-badge--price{box-shadow:0 6px 20px rgba(247,212,74,.5)}
/* The one disclosure before a premium spread: what is free, what costs, and how much. Shown
once per spread per device — a warning repeated on every visit stops being a courtesy. */
.spread-terms{position:fixed;inset:0;z-index:9800;display:flex;align-items:center;justify-content:center;
padding:24px;background:rgba(10,4,20,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
animation:spread-terms-in .22s ease both}
@keyframes spread-terms-in{from{opacity:0}to{opacity:1}}
.spread-terms__card{width:100%;max-width:340px;padding:24px 22px;border-radius:22px;box-sizing:border-box;
background:linear-gradient(150deg,rgba(36,13,42,.98),rgba(20,8,42,.98));
border:1px solid rgba(247,212,74,.36);box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 30px rgba(247,212,74,.08);
text-align:center}
.spread-terms__title{margin:0 0 12px;font-family:var(--font-heading);font-size:1.32rem;font-weight:400;
color:var(--color-gold-bright);text-shadow:0 0 18px rgba(247,212,74,.28)}
.spread-terms__body{margin:0 0 20px;font-family:var(--font-body);font-size:.95rem;line-height:1.55;
color:rgba(237,231,246,.9)}
.spread-terms__cta{width:100%;padding:14px 20px;border:none;border-radius:999px;cursor:pointer;
font-family:var(--font-heading);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#1a0730;
background:linear-gradient(135deg,var(--color-gold-bright),#d4af37);
box-shadow:0 6px 22px rgba(247,212,74,.34);-webkit-tap-highlight-color:transparent;transition:transform .18s}
.spread-terms__cta:active{transform:scale(.97)}