/* =========================================================
   MORNINGSTAR CINEMATIC VISUAL REBIRTH
   Additive presentation layer only. Existing product logic,
   memory, readings, tarot selection and server routes remain
   in the protected application files.
   ========================================================= */

:root{
  --cin-obsidian:#050605;
  --cin-ink:#f7f1e7;
  --cin-brass:#c9a261;
  --cin-brass-soft:#e8d0a0;
  --cin-smoke:rgba(210,219,211,.055);
  --cin-line:rgba(232,207,158,.14);
  --cin-line-strong:rgba(232,207,158,.27);
  --cin-depth:0 42px 120px rgba(0,0,0,.58);
  --cin-mx:0px;
  --cin-my:0px;
  --cin-mx2:0px;
  --cin-my2:0px;
  --cin-mx4:0px;
  --cin-my4:0px;
  --cin-rx:0deg;
  --cin-ry:0deg;
  --cin-enter:1;
}

/* ---------- Global cinematic field ---------- */
body{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse at calc(74% + var(--cin-mx)) calc(8% + var(--cin-my)),rgba(194,145,75,.115),transparent 30%),
    radial-gradient(ellipse at 16% 82%,rgba(102,122,119,.07),transparent 32%),
    linear-gradient(180deg,#050605 0%,#070806 48%,#050605 100%)!important;
}
body:before,body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body:before{
  background:
    linear-gradient(118deg,transparent 0 42%,rgba(245,220,172,.022) 47%,transparent 53% 100%),
    radial-gradient(ellipse at 50% 105%,rgba(171,129,64,.06),transparent 38%);
  transform:translate3d(var(--cin-mx2),var(--cin-my2),0);
  transition:transform .25s ease-out;
}
body:after{
  box-shadow:inset 0 0 180px rgba(0,0,0,.72),inset 0 -120px 160px rgba(0,0,0,.36);
  background:radial-gradient(ellipse at 50% 44%,transparent 45%,rgba(0,0,0,.28) 100%);
}
#sky{opacity:.62;filter:sepia(.18) saturate(.7);z-index:0!important}
.grain{opacity:.12!important;mix-blend-mode:soft-light;z-index:0!important}
main,footer{position:relative;z-index:2}

::selection{background:rgba(204,166,99,.26);color:#fff}
:focus-visible{outline:1px solid rgba(240,215,164,.8)!important;outline-offset:4px}

/* ---------- Material language ---------- */
.primary,.ghost,.danger,.topic-row button,.spread-controls button,.guide-tabs button,.room-enter,.nav-grid button,.mobile-dock button{
  position:relative;
  isolation:isolate;
}
.primary:before,.ghost:before,.danger:before,.topic-row button:before,.spread-controls button:before,.guide-tabs button:before,.room-enter:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(110deg,transparent 12%,rgba(255,255,255,.12) 47%,transparent 72%);
  transform:translateX(-45%);transition:opacity .35s ease,transform .55s ease;z-index:-1
}
.primary:hover:before,.ghost:hover:before,.topic-row button:hover:before,.spread-controls button:hover:before,.guide-tabs button:hover:before,.room-enter:hover:before{opacity:.65;transform:translateX(18%)}
.primary{border:1px solid rgba(255,237,195,.23)!important;background:linear-gradient(145deg,#ead3a5 0%,#bc9052 60%,#9b703d 100%)!important;box-shadow:0 13px 34px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.45)!important}
.ghost{box-shadow:inset 0 1px rgba(255,255,255,.025)}

/* ---------- Threshold: a real doorway, not a splash screen ---------- */
.threshold{
  perspective:1300px;
  background:
    radial-gradient(ellipse at 50% 43%,rgba(187,139,72,.14),transparent 21%),
    linear-gradient(180deg,#030403 0%,#070806 57%,#020302 100%)!important;
}
.threshold:after{
  content:"";position:absolute;left:-10%;right:-10%;height:38%;bottom:-17%;
  background:
    repeating-linear-gradient(90deg,transparent 0 9.8%,rgba(217,187,130,.055) 10% 10.08%),
    linear-gradient(180deg,rgba(74,58,34,.04),rgba(0,0,0,.74));
  transform:rotateX(71deg);transform-origin:50% 100%;filter:blur(.15px);
  border-top:1px solid rgba(220,190,134,.12)
}
.threshold:before{
  background:
    radial-gradient(ellipse at 50% 52%,transparent 0 17%,rgba(217,183,118,.038) 17.2% 17.35%,transparent 17.6% 25%,rgba(217,183,118,.025) 25.2% 25.3%,transparent 25.6%),
    conic-gradient(from 20deg at 50% 48%,transparent 0 18%,rgba(221,190,130,.035) 19%,transparent 24% 55%,rgba(126,147,143,.03) 56%,transparent 61%)!important;
  animation:cinTurn calc(110s / max(var(--motion),.08)) linear infinite!important;
}
.threshold-copy{filter:drop-shadow(0 35px 55px rgba(0,0,0,.55));transform:translate3d(var(--cin-mx4),var(--cin-my4),0);transition:transform .25s ease-out}
.threshold-copy:before{
  content:"";position:absolute;width:min(84vw,690px);aspect-ratio:1;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;
  background:url('/assets/celestial-map.svg') center/contain no-repeat;opacity:.16;filter:blur(.05px);animation:cinTurn calc(90s / max(var(--motion),.08)) linear infinite;
}
.threshold-sigil{width:76px!important;height:76px!important;background:radial-gradient(circle,rgba(229,193,124,.11),transparent 63%);box-shadow:0 0 85px rgba(210,164,85,.15)}
.threshold-sigil:after{border-style:solid!important;border-color:rgba(231,206,157,.13)!important;animation:cinTurn calc(34s / max(var(--motion),.08)) linear infinite!important}
.threshold h1{filter:drop-shadow(0 28px 80px rgba(196,147,72,.12))}
.threshold .primary{min-width:210px}
.threshold-veil i{width:110px!important;height:52vh!important;background:linear-gradient(90deg,transparent,rgba(237,212,164,.025),transparent)!important;filter:blur(8px);transform:rotate(23deg)!important}

/* ---------- Masthead ---------- */
.topbar{background:linear-gradient(180deg,rgba(5,6,5,.95),rgba(5,6,5,.78))!important;box-shadow:0 14px 35px rgba(0,0,0,.18)}
.brand{position:relative}.brand:after{content:"";position:absolute;left:1.55rem;right:0;bottom:-10px;height:1px;background:linear-gradient(90deg,rgba(211,174,107,.55),transparent);opacity:.5}
.brand-mark{filter:drop-shadow(0 0 8px rgba(230,194,126,.45))}
.desktop-nav a,.menu-btn,.sensory-top{transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease}
.desktop-nav a:hover,.menu-btn:hover,.sensory-top:hover{transform:translateY(-1px)}

/* ---------- Page transitions / scene framing ---------- */
[data-chapter]{position:relative;isolation:isolate;overflow:hidden}
[data-chapter].chapter-active{animation:cinSceneIn calc(.78s / max(var(--motion),.18)) cubic-bezier(.16,.82,.24,1) both}
[data-chapter]:before,[data-chapter]:after{pointer-events:none}
@keyframes cinSceneIn{0%{opacity:.01;transform:translateY(14px) scale(.995);filter:blur(3px)}100%{opacity:1;transform:none;filter:none}}
@keyframes cinTurn{to{transform:rotate(360deg)}}
@keyframes cinFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes cinBreathe{0%,100%{opacity:.45;transform:scale(.97)}50%{opacity:.82;transform:scale(1.03)}}
@keyframes cinDrift{0%{transform:translate3d(-3%,2%,0) rotate(-2deg)}100%{transform:translate3d(3%,-2%,0) rotate(2deg)}}
@keyframes cinSweep{0%{transform:translateX(-130%) skewX(-15deg)}100%{transform:translateX(150%) skewX(-15deg)}}

/* ---------- HOME: private observatory ---------- */
.hero.chapter-active{
  max-width:1480px!important;
  background:
    linear-gradient(90deg,rgba(5,6,5,.36),transparent 42%),
    radial-gradient(ellipse at 77% 42%,rgba(167,121,64,.06),transparent 28%)!important;
  border:0!important;
}
.hero.chapter-active:before{
  content:"";position:absolute;inset:4% -10% auto 48%;height:74%;z-index:-2;
  background:url('/assets/celestial-map.svg') center/contain no-repeat;opacity:.09;
  transform:translate3d(var(--cin-mx4),var(--cin-my4),0) rotate(-9deg);
  transition:transform .3s ease-out;
}
.hero.chapter-active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(224,194,139,.25),transparent)}
.hero-copy{position:relative;z-index:2}
.hero-copy:before{content:"";position:absolute;left:-34px;top:6px;width:1px;height:74px;background:linear-gradient(transparent,#cfaa69,transparent);opacity:.7}
.hero h2{text-wrap:balance;text-shadow:0 24px 70px rgba(0,0,0,.35)}
.hero h2 em{color:#e0c18b!important;text-shadow:0 0 28px rgba(215,177,108,.12)}
.hero-lede{max-width:660px!important}
.home-proof{background:linear-gradient(90deg,rgba(255,255,255,.008),rgba(210,170,98,.02),rgba(255,255,255,.008));backdrop-filter:blur(4px)}
.home-proof span{transition:background .25s ease}.home-proof span:hover{background:rgba(215,177,108,.028)}

.presence-portal{
  min-height:500px!important;
  border:1px solid rgba(221,192,137,.16)!important;
  border-radius:220px 220px 14px 14px!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(2,3,2,.08),rgba(3,4,3,.36) 62%,rgba(3,4,3,.92)),
    url('/assets/observatory-arch.svg') center/cover no-repeat!important;
  box-shadow:0 58px 120px rgba(0,0,0,.55),inset 0 0 80px rgba(210,164,85,.025)!important;
  transform-style:preserve-3d;
  transform:perspective(1200px) rotateY(var(--cin-ry)) rotateX(var(--cin-rx));
  transition:transform .28s ease-out,box-shadow .4s ease!important;
}
.presence-portal:before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 24% 28%,rgba(255,242,192,.5) 0 1px,transparent 1.8px),
    radial-gradient(circle at 68% 19%,rgba(255,242,192,.42) 0 1px,transparent 1.8px),
    radial-gradient(circle at 81% 36%,rgba(255,242,192,.35) 0 1px,transparent 1.7px),
    linear-gradient(114deg,transparent 28%,rgba(235,208,156,.055) 47%,transparent 61%);
  animation:cinBreathe calc(7s / max(var(--motion),.12)) ease-in-out infinite;
}
.presence-portal:after{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-14%;height:44%;z-index:1;
  background:radial-gradient(ellipse at 50% 8%,rgba(181,137,73,.18),rgba(34,29,20,.15) 28%,rgba(4,5,4,.96) 73%);
  border-top:1px solid rgba(220,190,134,.16);transform:perspective(900px) rotateX(62deg);transform-origin:50% 0;
  box-shadow:0 -30px 80px rgba(0,0,0,.28)
}
.portal-rings{width:340px!important;aspect-ratio:1;top:8%!important;left:50%!important;transform:translateX(-50%) perspective(800px) rotateX(66deg)!important;opacity:.72;z-index:2}
.portal-rings,.portal-rings i{border-color:rgba(231,206,157,.23)!important}
.portal-rings:before,.portal-rings:after{content:"";position:absolute;border:1px solid rgba(231,206,157,.13);border-radius:50%;inset:13%;animation:cinTurn calc(36s / max(var(--motion),.1)) linear infinite}.portal-rings:after{inset:29%;animation-direction:reverse;animation-duration:calc(24s / max(var(--motion),.1))}
.portal-core{z-index:3!important;width:104px!important;height:104px!important;top:29%!important;background:radial-gradient(circle at 50% 48%,#f7e7bd 0 2%,#d5ae6e 3% 6%,rgba(164,119,58,.32) 7% 34%,rgba(9,10,9,.92) 36% 100%)!important;border:1px solid rgba(236,207,151,.42)!important;box-shadow:0 0 40px rgba(232,190,111,.18),0 0 140px rgba(170,122,60,.16)!important;animation:cinBreathe calc(5s / max(var(--motion),.15)) ease-in-out infinite}
.portal-core:before{content:"";position:absolute;inset:-24px;border:1px solid rgba(237,209,157,.16);border-radius:50%;background:url('/assets/celestial-map.svg') center/contain no-repeat;animation:cinTurn calc(46s / max(var(--motion),.1)) linear infinite}
.portal-core span{font-size:1.65rem!important;color:#fff5d7!important;text-shadow:0 0 22px #efc978}
.portal-copy{z-index:5!important;left:24px!important;right:24px!important;bottom:22px!important;padding:1rem 1rem 0!important;border-top:1px solid rgba(228,199,145,.12);background:linear-gradient(180deg,transparent,rgba(4,5,4,.5))}
.portal-copy small{letter-spacing:.21em!important;color:#c7ab77!important}.portal-copy strong{font-size:clamp(1.28rem,2.2vw,2rem)!important;line-height:1.05!important;text-shadow:0 8px 28px rgba(0,0,0,.7)}
.portal-question{backdrop-filter:blur(12px)}
.cin-dust{position:absolute;width:2px;height:2px;border-radius:50%;background:#f0d7a4;box-shadow:0 0 12px rgba(240,215,164,.6);opacity:.3;animation:cinFloat var(--dust-duration,7s) ease-in-out infinite;animation-delay:var(--dust-delay,0s);z-index:2;pointer-events:none}

.home-experience{position:relative}.home-experience:before{content:"";position:absolute;inset:-12px -24px;background:linear-gradient(90deg,transparent,rgba(211,174,107,.025),transparent);pointer-events:none}
.experience-rail article{position:relative;transition:transform .35s ease,background .35s ease}.experience-rail article:hover{transform:translateY(-4px);background:rgba(218,180,110,.025)}
.capability-marquee{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.capability-marquee button{transition:color .2s ease,transform .2s ease}.capability-marquee button:hover{color:#f0d7a4;transform:translateY(-2px)}

/* ---------- READING: intimate candlelit session ---------- */
.morningstar-console{
  border-radius:26px!important;
  border:1px solid rgba(223,194,139,.14)!important;
  background:
    radial-gradient(ellipse at 8% 96%,rgba(207,145,66,.09),transparent 24%),
    radial-gradient(ellipse at 92% 96%,rgba(207,145,66,.07),transparent 22%),
    linear-gradient(145deg,rgba(14,15,13,.96),rgba(5,6,5,.96))!important;
  box-shadow:0 58px 140px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.018)!important;
}
.morningstar-console:before{width:44%!important;height:100%!important;right:-12%!important;top:-20%!important;border-radius:50%!important;background:radial-gradient(circle,rgba(209,166,91,.08),transparent 65%)!important;filter:blur(25px)!important;animation:cinBreathe calc(8s / max(var(--motion),.15)) ease-in-out infinite}
.morningstar-console:after{content:"";position:absolute;inset:0;z-index:-1;background:url('/assets/celestial-map.svg') 112% 4%/46% auto no-repeat;opacity:.025;transform:rotate(18deg)}
.console-head{position:relative;padding-bottom:1.4rem;border-bottom:1px solid rgba(228,199,145,.09)}
.console-head:after{content:"";position:absolute;left:0;bottom:-1px;width:120px;height:1px;background:linear-gradient(90deg,#cfa764,transparent)}
.presence span{background:#d7b575!important;box-shadow:0 0 16px rgba(215,181,117,.55)!important}
.thread-bar{background:linear-gradient(90deg,rgba(220,183,113,.025),transparent);border-color:rgba(228,199,145,.1)!important}
.chat-log{padding:1.4rem .25rem 1.4rem!important;mask-image:linear-gradient(180deg,transparent,#000 5%,#000 96%,transparent)}
.message{transition:transform .3s ease,opacity .3s ease,box-shadow .3s ease}
.message.morningstar{
  max-width:min(86%,820px)!important;
  background:linear-gradient(145deg,rgba(243,234,214,.045),rgba(227,198,143,.018))!important;
  border:1px solid rgba(226,200,151,.11)!important;border-left:2px solid rgba(216,179,107,.55)!important;
  border-radius:4px 20px 20px 20px!important;padding:1.2rem 1.35rem!important;
  box-shadow:0 20px 50px rgba(0,0,0,.15)
}
.message.morningstar:before{content:"✦";float:left;margin:0 .55rem .2rem 0;color:#d5b16c;filter:drop-shadow(0 0 8px rgba(213,177,108,.4))}
.message.user{border-radius:18px 4px 18px 18px!important;background:linear-gradient(135deg,rgba(194,153,87,.08),rgba(99,112,111,.045))!important;border-color:rgba(223,194,139,.12)!important}
.message h4,.reading-output h4{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;letter-spacing:-.02em;color:#ead4a7;margin:1.3rem 0 .4rem;font-size:1.1rem}
.message p,.reading-output p{max-width:74ch}.message ul,.reading-output ul{padding-left:1.2rem;color:var(--muted)}.message li,.reading-output li{margin:.4rem 0}
.response-reveal{animation:cinResponseIn calc(.6s / max(var(--motion),.18)) cubic-bezier(.16,.8,.25,1) both}@keyframes cinResponseIn{from{opacity:.01;transform:translateY(10px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.chat-form{background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(17,16,13,.7))!important;border-color:rgba(223,194,139,.15)!important;box-shadow:0 18px 55px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.018)}
.chat-form:focus-within{border-color:rgba(226,192,128,.34)!important;box-shadow:0 20px 65px rgba(0,0,0,.3),0 0 0 1px rgba(226,192,128,.05)}
.topic-row button{font-size:.7rem!important;letter-spacing:.02em}.topic-row button:hover{border-color:rgba(223,194,139,.24)}

/* ---------- TODAY: living astrolabe ---------- */
#horoscope.chapter-active{background:radial-gradient(ellipse at 73% 46%,rgba(74,92,91,.085),transparent 36%),linear-gradient(180deg,rgba(9,10,9,.72),rgba(5,6,5,.5))!important}
#horoscope.chapter-active:before{content:"";position:absolute;right:-10%;top:50%;width:min(68vw,880px);aspect-ratio:1;transform:translateY(-50%) rotate(-11deg);background:url('/assets/celestial-map.svg') center/contain no-repeat;opacity:.09;animation:cinTurn calc(150s / max(var(--motion),.08)) linear infinite;z-index:-1}
#horoscope .section-copy{padding-top:4vh}
.sky-card{position:relative;overflow:hidden!important;background:linear-gradient(145deg,rgba(12,14,13,.84),rgba(7,8,7,.56))!important;border-color:rgba(219,190,135,.16)!important;box-shadow:0 34px 95px rgba(0,0,0,.38)!important}
.sky-card:before{content:"";position:absolute;width:420px;aspect-ratio:1;right:-130px;top:-155px;background:url('/assets/celestial-map.svg') center/contain no-repeat;opacity:.11;animation:cinTurn calc(95s / max(var(--motion),.08)) linear infinite}
.sky-card:after{content:"";position:absolute;left:-15%;right:-15%;top:34%;height:1px;background:linear-gradient(90deg,transparent,rgba(229,202,151,.13),transparent);transform:rotate(-8deg)}
.moon{position:relative;z-index:1}.moon>span{width:74px;height:74px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#e7d9bd 0 10%,#a99877 11% 17%,rgba(87,95,91,.16) 18% 62%,transparent 64%);filter:drop-shadow(0 0 24px rgba(230,213,177,.16));font-size:2rem!important}
.planet-pulse{position:relative;z-index:1}
.planet-pulse span,.planet-pulse div{transition:transform .25s ease,background .25s ease}.planet-pulse span:hover,.planet-pulse div:hover{transform:translateY(-2px)}

/* ---------- ZODIAC ATLAS: etched cultural gallery ---------- */
#zodiac.chapter-active{background:radial-gradient(ellipse at 22% 10%,rgba(177,133,73,.07),transparent 30%),linear-gradient(180deg,rgba(8,9,8,.74),rgba(5,6,5,.5))!important}
#zodiac.chapter-active:before{content:"";position:absolute;left:-24%;top:-20%;width:780px;aspect-ratio:1;background:url('/assets/celestial-map.svg') center/contain no-repeat;opacity:.055;transform:rotate(23deg);z-index:-1}
.zodiac-grid,.animal-grid{mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);padding-block:.3rem}
.zodiac-card,.animal-card{border:1px solid rgba(224,195,141,.09)!important;box-shadow:0 14px 38px rgba(0,0,0,.12)!important;transition:transform .3s ease,border-color .3s ease,background .3s ease!important}
.zodiac-card:hover,.animal-card:hover{transform:translateY(-5px);border-color:rgba(224,195,141,.25)!important;background:rgba(210,170,98,.045)!important}
.zodiac-detail,.animal-explorer,.animal-feature{position:relative;overflow:hidden}
.zodiac-detail:after,.animal-explorer:after{content:"";position:absolute;right:-100px;bottom:-100px;width:260px;aspect-ratio:1;background:url('/assets/celestial-map.svg') center/contain no-repeat;opacity:.04;pointer-events:none}
.animal-year>span{filter:drop-shadow(0 0 22px rgba(219,178,103,.18))}

/* ---------- TAROT: ritual table ---------- */
#tarotLab.chapter-active{
  background:
    radial-gradient(ellipse at 50% 60%,rgba(115,65,39,.085),transparent 38%),
    linear-gradient(180deg,rgba(8,9,8,.82),rgba(4,5,4,.65))!important;
  perspective:1200px;
}
#tarotLab.chapter-active:before{
  content:"";position:absolute;left:50%;top:58%;width:min(1050px,92vw);height:64%;transform:translate(-50%,-50%) perspective(900px) rotateX(62deg);transform-origin:50% 50%;z-index:-1;
  background:
    radial-gradient(ellipse at 50% 40%,rgba(189,140,70,.11),transparent 30%),
    repeating-radial-gradient(circle at 50% 40%,transparent 0 72px,rgba(209,173,105,.025) 73px 74px),
    linear-gradient(160deg,#10110e,#060706 68%);
  border:1px solid rgba(213,173,104,.13);border-radius:50%;box-shadow:0 70px 150px rgba(0,0,0,.75),inset 0 0 90px rgba(0,0,0,.65)
}
#tarotLab.chapter-active:after{content:"";position:absolute;left:50%;top:17%;width:420px;height:420px;transform:translateX(-50%);background:url('/assets/celestial-map.svg') center/contain no-repeat;opacity:.035;z-index:-1;animation:cinTurn calc(110s / max(var(--motion),.1)) linear infinite}
#tarotLab .section-title{position:relative;z-index:2}
#tarotLab .section-title:after{content:"";display:block;width:110px;height:1px;margin:1.1rem auto 0;background:linear-gradient(90deg,transparent,#cfa862,transparent)}
.tarot-question textarea{backdrop-filter:blur(12px);background:rgba(5,6,5,.58)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.012)}
.card-table{
  position:relative;z-index:2;overflow:visible!important;
  min-height:430px!important;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(190,139,66,.10),transparent 29%),
    radial-gradient(ellipse at 50% 70%,rgba(56,64,47,.2),transparent 48%),
    linear-gradient(160deg,rgba(26,30,23,.34),rgba(5,6,5,.44))!important;
  border:1px solid rgba(225,193,133,.09)!important;border-left:0!important;border-right:0!important;
  box-shadow:inset 0 34px 80px rgba(0,0,0,.32),inset 0 -30px 70px rgba(0,0,0,.3)!important;
}
.card-table:before{content:"";position:absolute;inset:10% 15%;border:1px solid rgba(224,188,120,.06);border-radius:50%;pointer-events:none;transform:perspective(700px) rotateX(62deg)}
.card-table:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(237,209,154,.025) 48%,transparent 62%);animation:cinSweep calc(13s / max(var(--motion),.12)) ease-in-out infinite}
.choice-card{position:relative;overflow:hidden;transform-style:preserve-3d;background:
  linear-gradient(145deg,rgba(202,163,97,.06),transparent 38%),
  repeating-linear-gradient(45deg,rgba(211,174,107,.032) 0 1px,transparent 1px 10px),
  radial-gradient(circle at 50% 38%,rgba(190,144,74,.10),transparent 28%),#0b0d0b!important;
  border-color:rgba(227,194,132,.24)!important;box-shadow:0 22px 42px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.018)!important
}
.choice-card:before{content:"";position:absolute;inset:7px;border:1px solid rgba(226,193,131,.13);border-radius:5px;background:url('/assets/celestial-map.svg') center/76% no-repeat;opacity:.33}
.choice-card span,.choice-card small{position:relative;z-index:2}.choice-card:hover,.choice-card:focus-visible{transform:translateY(-10px) rotateX(3deg)!important;box-shadow:0 32px 64px rgba(0,0,0,.55),0 0 0 1px rgba(227,194,132,.12)!important}
.choice-card.chosen{transform:translateY(-13px)!important;box-shadow:0 38px 72px rgba(0,0,0,.62),0 0 34px rgba(210,164,85,.08)!important}
.tarot-card{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.16,.78,.22,1),box-shadow .45s ease!important;box-shadow:0 35px 74px rgba(0,0,0,.62),0 0 0 1px rgba(232,199,138,.06)!important;background:#080906!important}
.tarot-card:hover{transform:translateY(-11px) rotateX(2deg);box-shadow:0 46px 90px rgba(0,0,0,.7),0 0 42px rgba(213,169,93,.09)!important}
.tarot-card .tarot-art{filter:saturate(.82) contrast(1.04) brightness(.9);transition:filter .35s ease,transform .45s ease!important}.tarot-card:hover .tarot-art{filter:saturate(.95) contrast(1.05) brightness(.98);transform:scale(1.025)}
.tarot-card .tarot-caption{background:linear-gradient(180deg,transparent,rgba(3,4,3,.96) 38%)!important;padding-top:2rem!important}
.tarot-instruction{letter-spacing:.02em;text-shadow:0 0 22px rgba(213,172,98,.1)}
.tarot-actions{z-index:4}

/* ---------- NUMBER TEMPLE: measured, architectural ---------- */
#numbers.chapter-active{background:radial-gradient(ellipse at 84% 20%,rgba(116,127,119,.065),transparent 31%),linear-gradient(180deg,rgba(8,9,8,.76),rgba(5,6,5,.5))!important}
#numbers.chapter-active:before{content:"111  222  333  444  555  777  888  999";position:absolute;right:-1rem;top:10%;width:46%;font-family:"Bodoni Moda",serif;font-size:clamp(2rem,5vw,5.5rem);line-height:1.25;letter-spacing:.18em;color:rgba(227,198,143,.025);writing-mode:vertical-rl;transform:rotate(180deg);z-index:-1}
.number-tools{background:rgba(218,182,114,.055)!important;box-shadow:0 30px 90px rgba(0,0,0,.22)}
.tool-card{position:relative;overflow:hidden;padding:clamp(1.2rem,2vw,2rem)!important;transition:background .3s ease,transform .3s ease}
.tool-card:before{content:"";position:absolute;left:0;top:0;width:42px;height:1px;background:#c9a261;opacity:.38}
.tool-card:hover{background:rgba(214,175,105,.035)!important;transform:translateY(-3px)}

/* ---------- LIVING MATERIA: botanical cabinet ---------- */
#apothecary.chapter-active{
  background:
    linear-gradient(90deg,rgba(58,71,54,.035),transparent 35%),
    linear-gradient(180deg,rgba(8,10,8,.82),rgba(5,6,5,.52))!important
}
#apothecary.chapter-active:before{content:"";position:absolute;right:-4%;bottom:-4%;width:72%;height:70%;background:url('/assets/botanical-lines.svg') right bottom/contain no-repeat;opacity:.10;z-index:-1;filter:sepia(.25)}
.guide-tabs{border-bottom:1px solid rgba(225,196,140,.1);padding-bottom:.6rem}.guide-tabs button.active{border-color:rgba(225,196,140,.28)!important;background:rgba(207,167,96,.065)!important;color:#ead3a7}
.guide-grid{position:relative}.guide-card{min-height:190px!important;position:relative;overflow:hidden!important;box-shadow:0 18px 45px rgba(0,0,0,.16)!important;transition:transform .3s ease,border-color .3s ease!important}.guide-card:after{content:"";position:absolute;right:-28px;bottom:-36px;width:120px;height:160px;background:url('/assets/botanical-lines.svg') 20% 100%/300px auto no-repeat;opacity:.06;transform:rotate(12deg)}.guide-card:hover{transform:translateY(-5px)}
.identifier{background:linear-gradient(145deg,rgba(15,17,14,.82),rgba(7,8,7,.64))!important;box-shadow:0 30px 90px rgba(0,0,0,.3)!important;position:relative;overflow:hidden}.identifier:after{content:"";position:absolute;right:-40px;top:-20px;width:260px;height:260px;background:url('/assets/celestial-map.svg') center/contain no-repeat;opacity:.025;pointer-events:none}
.upload-box{border-style:dashed!important;border-color:rgba(225,196,140,.2)!important;background:rgba(255,255,255,.012)!important}

/* ---------- RITUAL ATELIER: ember workbench ---------- */
#rituals.chapter-active{background:radial-gradient(ellipse at 50% 96%,rgba(151,74,38,.10),transparent 36%),linear-gradient(180deg,rgba(9,9,8,.84),rgba(6,6,5,.56))!important}
#rituals.chapter-active:before{content:"";position:absolute;left:50%;bottom:-180px;width:680px;height:360px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(202,100,48,.16),rgba(194,141,67,.04) 38%,transparent 70%);filter:blur(24px);z-index:-1;animation:cinBreathe calc(6s / max(var(--motion),.12)) ease-in-out infinite}
.ritual-grid{background:rgba(216,178,105,.055)!important;box-shadow:0 34px 100px rgba(0,0,0,.28)}
.ritual-grid article{position:relative;overflow:hidden;min-height:270px;transition:transform .35s ease,background .35s ease}
.ritual-grid article:after{content:"";position:absolute;inset:auto -25% -65% -25%;height:75%;background:radial-gradient(ellipse,rgba(200,113,54,.07),transparent 67%);pointer-events:none}.ritual-grid article:hover{transform:translateY(-5px);background:rgba(206,166,94,.034)!important}
.ritual-icon{font-size:2.3rem!important;color:#d0aa69!important;text-shadow:0 0 26px rgba(208,170,105,.16)}
.ritual-output{position:relative}.ritual-output:not(:empty){border-top:1px solid rgba(229,199,144,.12);padding-top:1.4rem;margin-top:1.4rem}

/* ---------- SANCTUARY: three truly different atmospheres ---------- */
#rooms.chapter-active{background:linear-gradient(180deg,rgba(8,9,8,.68),rgba(5,6,5,.42))!important}
.room-grid{gap:1rem!important}.room{min-height:360px!important;position:relative;overflow:hidden!important;background:#070807!important;box-shadow:0 28px 80px rgba(0,0,0,.28)!important;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}.room:hover{transform:translateY(-6px);border-color:rgba(225,196,140,.22)!important;box-shadow:0 42px 100px rgba(0,0,0,.4)!important}.room>div:last-child{position:relative;z-index:3;margin-top:auto;padding:1.3rem;background:linear-gradient(180deg,transparent,rgba(4,5,4,.88) 35%)}
.room.rain{background:linear-gradient(180deg,#0a1214,#071011 55%,#050706)!important}.room.rain:before{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(106deg,transparent 0 15px,rgba(172,207,214,.08) 16px 17px,transparent 18px 35px);animation:cinRain calc(1.8s / max(var(--motion),.16)) linear infinite}@keyframes cinRain{to{transform:translate3d(-22px,42px,0)}}
.room.zen{background:radial-gradient(circle at 50% 35%,rgba(188,166,115,.10),transparent 22%),linear-gradient(180deg,#11120e,#070806)!important}.room.zen:before{content:"";position:absolute;left:50%;top:32%;width:220px;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(220,194,142,.13);border-radius:50%;box-shadow:0 0 0 32px rgba(220,194,142,.025),0 0 0 64px rgba(220,194,142,.018),0 0 0 96px rgba(220,194,142,.012);animation:cinBreathe calc(7s / max(var(--motion),.14)) ease-in-out infinite}
.room.sensory{background:linear-gradient(145deg,#081111,#10100d,#0c0a11)!important}.room.sensory:before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 80deg,transparent,rgba(84,157,151,.10),transparent 28%,rgba(194,145,84,.09),transparent 56%,rgba(116,92,145,.08),transparent);filter:blur(28px);animation:cinTurn calc(28s / max(var(--motion),.12)) linear infinite}
.room-motion{opacity:.58!important}
.room-modal{background:#030403!important}.room-scene{overflow:hidden}.room-scene:before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 180px rgba(0,0,0,.65);pointer-events:none;z-index:8}

/* ---------- VAULT: private archive ---------- */
#vault.chapter-active{background:linear-gradient(180deg,rgba(8,9,8,.82),rgba(5,6,5,.6))!important}
#vault.chapter-active:before{content:"";position:absolute;right:-6%;top:12%;width:58%;height:76%;background:url('/assets/archive-lines.svg') center/contain no-repeat;opacity:.055;z-index:-1}
.vault-list{border-top:1px solid rgba(225,196,140,.08)}.vault-item{position:relative;transition:background .25s ease,transform .25s ease}.vault-item:before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:#caa363;opacity:.5;transform:translateY(-50%)}.vault-item:hover{background:rgba(210,171,99,.025);transform:translateX(3px)}

/* ---------- Trust covenant: intentionally quiet ---------- */
#integrity.chapter-active{background:linear-gradient(180deg,rgba(8,9,8,.64),rgba(5,6,5,.42))!important}
.integrity-grid{gap:1px!important;background:rgba(222,188,126,.055)}.integrity-grid p{margin:0!important;padding:1.35rem!important}.integrity-grid b{color:#e0c38e;font-weight:600}

/* ---------- Drawers / overlays ---------- */
.nav-drawer,.sensory-panel{background:linear-gradient(155deg,rgba(9,10,9,.98),rgba(5,6,5,.985))!important;border-color:rgba(224,195,141,.15)!important;box-shadow:-30px 40px 100px rgba(0,0,0,.68)!important}
.nav-drawer:before,.sensory-panel:before{content:"";position:absolute;right:-80px;top:-80px;width:300px;aspect-ratio:1;background:url('/assets/celestial-map.svg') center/contain no-repeat;opacity:.045;pointer-events:none}.nav-grid button{overflow:hidden;transition:transform .25s ease,background .25s ease,border-color .25s ease}.nav-grid button:hover{transform:translateY(-3px);background:rgba(207,168,96,.045)!important;border-color:rgba(225,196,140,.19)!important}.nav-grid button>span{color:#d0ac6b;filter:drop-shadow(0 0 10px rgba(208,172,107,.22))}
.modal{backdrop-filter:blur(14px)}.modal-card{background:linear-gradient(145deg,#0c0d0b,#060706)!important;border-color:rgba(225,196,140,.14)!important;box-shadow:0 50px 140px rgba(0,0,0,.72)!important}
.toast{background:rgba(10,11,9,.94)!important;border-color:rgba(224,195,141,.16)!important;backdrop-filter:blur(16px)}

/* ---------- Cinematic scene label / ambient light ---------- */
.cin-scene-label{position:fixed;right:22px;bottom:22px;z-index:28;pointer-events:none;display:grid;justify-items:end;gap:.12rem;opacity:.36;transition:opacity .4s ease,transform .4s ease}
.cin-scene-label small{font-size:.51rem;letter-spacing:.26em;text-transform:uppercase;color:#9e8f71}.cin-scene-label b{font-family:"Bodoni Moda",serif;font-weight:400;font-size:.9rem;color:#d8c29a}.cin-scene-label.scene-pulse{animation:cinLabel .75s ease both}@keyframes cinLabel{0%{opacity:0;transform:translateY(8px)}55%{opacity:.65}100%{opacity:.36;transform:none}}
.mobile-dock~.cin-scene-label{bottom:86px}

/* ---------- Responsive: cinematic without crowding ---------- */
@media(max-width:1100px){
  .presence-portal{min-height:430px!important}.portal-rings{width:300px!important}.portal-core{top:27%!important}
}

@media(max-width:760px){
  body:after{box-shadow:inset 0 0 100px rgba(0,0,0,.6),inset 0 -90px 100px rgba(0,0,0,.24)}
  .threshold-copy:before{width:130vw;opacity:.09}.threshold-veil i{opacity:.65}
  .hero.chapter-active:before{left:10%;right:-55%;top:29%;height:48%;opacity:.055}
  .hero-copy:before{left:-8px;height:56px}.hero h2{text-wrap:balance}
  .presence-portal{min-height:278px!important;border-radius:130px 130px 10px 10px!important;transform:none!important}.portal-rings{width:208px!important;top:3%!important}.portal-core{width:76px!important;height:76px!important;top:24%!important}.portal-core:before{inset:-16px}.portal-copy{padding:.7rem .7rem 0!important}.portal-copy strong{font-size:1.12rem!important}.portal-question{max-width:100%;white-space:normal;text-align:left}
  .home-experience:before{display:none}
  .morningstar-console{border-radius:0!important;box-shadow:none!important;background:linear-gradient(180deg,rgba(10,11,9,.94),rgba(5,6,5,.94))!important}.morningstar-console:after{background-size:70%;opacity:.02}.console-head{padding-bottom:.9rem}.message.morningstar{max-width:100%!important;border-radius:3px 14px 14px 14px!important;padding:1rem!important}.message.user{max-width:92%!important}
  #horoscope.chapter-active:before{right:-46%;width:130vw;opacity:.05}.sky-card{box-shadow:none!important}.moon>span{width:58px;height:58px}
  #tarotLab.chapter-active:before{top:61%;width:130vw;height:55%;opacity:.75}.card-table{min-height:315px!important;padding:.75rem .35rem!important}.card-table:before{inset:10% 7%}.choice-card:hover,.choice-card:focus-visible{transform:translateY(-4px)!important}.choice-card.chosen{transform:translateY(-7px)!important}.tarot-card:hover{transform:none}.tarot-card{box-shadow:0 24px 48px rgba(0,0,0,.58)!important}
  #apothecary.chapter-active:before{width:120%;height:50%;opacity:.065}.guide-card{min-height:160px!important}
  .ritual-grid article{min-height:0}.room{min-height:245px!important}.room>div:last-child{padding:1rem}
  #vault.chapter-active:before{width:110%;right:-35%;opacity:.035}
  .cin-scene-label{display:none}
  .mobile-dock{box-shadow:0 -10px 38px rgba(0,0,0,.45)!important;border-color:rgba(225,196,140,.13)!important}
}

@media(max-width:430px){
  .hero.chapter-active{gap:15px!important}.presence-portal{min-height:250px!important}.portal-copy small{font-size:.52rem!important}.portal-question{padding:.58rem .68rem!important}
  .home-proof span{min-width:0}.home-proof small{line-height:1.3}
  .choice-card:before{inset:5px;background-size:82%}.tarot-card .tarot-caption{padding-top:1.2rem!important}
}

@media(max-width:390px){
  .presence-portal{min-height:230px!important}.portal-rings{width:174px!important}.portal-core{width:66px!important;height:66px!important}.portal-copy{left:12px!important;right:12px!important;bottom:10px!important}.portal-copy strong{font-size:1rem!important}.portal-question{font-size:.6rem!important}
  .message.morningstar{padding:.9rem!important}.message p,.reading-output p{line-height:1.58}
}

@media(max-width:360px){
  .presence-portal{min-height:214px!important}.portal-copy small{display:none}.portal-core{top:21%!important}.home-proof{font-size:.9em}
}

/* Sensory controls always win over spectacle. */
body.calm-mode .cin-dust,body.calm-mode .presence-portal:before,body.calm-mode .room:before{animation-duration:40s!important;opacity:.18!important}
body.focus-mode .cin-scene-label{opacity:.15}
body.high-contrast .presence-portal,body.high-contrast .morningstar-console,body.high-contrast .sky-card{border-color:rgba(255,255,255,.34)!important}

@media(prefers-reduced-motion:reduce){
  .threshold:before,.threshold-copy:before,.threshold-sigil:after,.presence-portal:before,.portal-rings:before,.portal-rings:after,.portal-core,.portal-core:before,#horoscope.chapter-active:before,#tarotLab.chapter-active:after,.card-table:after,.room:before,.cin-dust{animation:none!important}
  .presence-portal{transform:none!important}.choice-card:hover,.choice-card:focus-visible,.choice-card.chosen,.tarot-card:hover{transform:none!important}
  [data-chapter].chapter-active,.response-reveal{animation:none!important}
}

/* =========================================================
   PREMIUM PHOTOGRAPHIC SCENE LAYER
   Real visual environments layered around the protected app.
   Tarot face artwork remains the live Rider–Waite–Smith deck
   already provided by app.js. These images are atmosphere only.
   ========================================================= */

:root{
  --scene-home:url('/assets/scene-home.webp');
  --scene-reading:url('/assets/scene-reading.webp');
  --scene-horoscope:url('/assets/scene-horoscope.webp');
  --scene-tarot:url('/assets/scene-tarot-table.webp');
  --scene-materia:url('/assets/scene-materia.webp');
  --scene-sanctuary:url('/assets/scene-sanctuary.webp');
  --scene-atelier:url('/assets/scene-atelier.webp');
  --scene-zodiac:url('/assets/scene-zodiac-animals.webp');
}

/* The threshold now reads as an actual doorway into the observatory. */
.threshold{
  background:
    linear-gradient(90deg,rgba(2,3,2,.94) 0%,rgba(3,4,3,.72) 42%,rgba(2,3,2,.54) 70%,rgba(2,3,2,.72) 100%),
    linear-gradient(180deg,rgba(3,4,3,.26),rgba(2,3,2,.86)),
    var(--scene-home) center 42%/cover no-repeat!important;
}
.threshold:after{background:
  repeating-linear-gradient(90deg,transparent 0 9.8%,rgba(217,187,130,.065) 10% 10.08%),
  linear-gradient(180deg,rgba(74,58,34,.08),rgba(0,0,0,.82))!important}
.threshold-copy{backdrop-filter:blur(2px)}

/* Homepage hero: the portal becomes the living observatory window. */
.hero.chapter-active{
  background:
    linear-gradient(90deg,rgba(5,6,5,.98) 0%,rgba(5,6,5,.88) 42%,rgba(5,6,5,.2) 72%,rgba(5,6,5,.42) 100%),
    var(--scene-home) right 42%/72% auto no-repeat!important;
}
.presence-portal{
  background:
    linear-gradient(180deg,rgba(2,3,2,.03),rgba(3,4,3,.18) 50%,rgba(3,4,3,.92) 100%),
    linear-gradient(90deg,rgba(2,3,2,.16),transparent 58%),
    var(--scene-home) 62% center/cover no-repeat!important;
  box-shadow:0 58px 140px rgba(0,0,0,.66),inset 0 0 95px rgba(210,164,85,.035),0 0 0 1px rgba(244,217,167,.035)!important;
}
.presence-portal:before{mix-blend-mode:screen}
.portal-rings{filter:drop-shadow(0 0 24px rgba(219,177,96,.16))}
.portal-core{backdrop-filter:blur(3px);box-shadow:0 0 72px rgba(234,190,105,.24)!important}

/* Reading room: a dark candlelit chamber sits behind the conversation. */
.morningstar-console{
  background:
    linear-gradient(90deg,rgba(8,9,8,.97) 0%,rgba(8,9,8,.94) 52%,rgba(7,8,7,.73) 72%,rgba(5,6,5,.80) 100%),
    linear-gradient(180deg,rgba(6,7,6,.36),rgba(5,6,5,.82)),
    var(--scene-reading) right center/58% cover no-repeat!important;
}
.chat-log,.thread-bar,.chat-form,.console-tools{position:relative;z-index:2}
.chat-log:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,6,5,.34),transparent 58%);z-index:-1}

/* Living sky: actual celestial instrument and night vista behind the data. */
#horoscope.chapter-active{
  background:
    linear-gradient(90deg,rgba(6,7,6,.97) 0%,rgba(6,7,6,.92) 42%,rgba(6,7,6,.55) 65%,rgba(5,6,5,.78) 100%),
    linear-gradient(180deg,rgba(6,7,6,.26),rgba(5,6,5,.86)),
    var(--scene-horoscope) right center/70% cover no-repeat!important;
}
.sky-card{backdrop-filter:blur(12px) saturate(.9);background:linear-gradient(145deg,rgba(11,13,12,.72),rgba(6,7,6,.55))!important}

/* Zodiac animals receive a real engraved visual centerpiece without replacing learning content. */
.animal-feature{
  min-height:280px;
  display:flex;align-items:flex-end;
  background:
    linear-gradient(90deg,rgba(6,7,6,.92) 0%,rgba(6,7,6,.68) 44%,rgba(6,7,6,.12) 76%,rgba(6,7,6,.3) 100%),
    linear-gradient(180deg,rgba(6,7,6,.12),rgba(6,7,6,.82)),
    var(--scene-zodiac) center/cover no-repeat!important;
  border:1px solid rgba(224,195,141,.12)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.34)!important;
}
.animal-feature .animal-year,.animal-feature .animal-copy{position:relative;z-index:2}

/* Tarot: atmosphere under the table, real RWS artwork remains above it. */
#tarotLab.chapter-active{
  background:
    linear-gradient(180deg,rgba(5,6,5,.93) 0%,rgba(5,6,5,.58) 42%,rgba(5,6,5,.78) 100%),
    var(--scene-tarot) center 30%/cover no-repeat!important;
}
.card-table{
  background:
    radial-gradient(ellipse at 50% 46%,rgba(194,143,70,.13),transparent 30%),
    linear-gradient(180deg,rgba(5,6,5,.24),rgba(5,6,5,.72)),
    var(--scene-tarot) center 44%/cover no-repeat!important;
  backdrop-filter:blur(1px);
}
.card-table.revealed{background:
  linear-gradient(180deg,rgba(5,6,5,.20),rgba(4,5,4,.74)),
  var(--scene-tarot) center 44%/cover no-repeat!important}
.tarot-card{border-color:rgba(231,202,145,.40)!important;box-shadow:0 38px 86px rgba(0,0,0,.72),0 0 38px rgba(211,165,88,.07)!important}
.tarot-card .tarot-art{filter:saturate(.94) contrast(1.03) brightness(.96)!important}
.tarot-card.reversed .tarot-art{filter:saturate(.88) contrast(1.04) brightness(.91)!important}

/* Materia becomes a real cabinet, still readable and fast. */
#apothecary.chapter-active{
  background:
    linear-gradient(90deg,rgba(6,8,6,.96) 0%,rgba(6,8,6,.88) 50%,rgba(6,8,6,.45) 72%,rgba(5,6,5,.7) 100%),
    linear-gradient(180deg,rgba(6,8,6,.18),rgba(5,6,5,.86)),
    var(--scene-materia) right center/58% cover no-repeat!important;
}
.guide-card,.identifier{backdrop-filter:blur(10px);background:linear-gradient(145deg,rgba(14,17,13,.75),rgba(7,8,7,.58))!important}

/* Ritual atelier gets firelight, brass and incense depth. */
#rituals.chapter-active{
  background:
    linear-gradient(90deg,rgba(6,6,5,.95) 0%,rgba(6,6,5,.86) 52%,rgba(6,6,5,.42) 76%,rgba(5,5,4,.65) 100%),
    linear-gradient(180deg,rgba(8,6,4,.12),rgba(5,5,4,.84)),
    var(--scene-atelier) right center/58% cover no-repeat!important;
}
.ritual-grid article{backdrop-filter:blur(8px);background:linear-gradient(145deg,rgba(17,13,9,.72),rgba(8,7,6,.58))!important}

/* Sanctuary now has a moonlit destination behind the three sensory choices. */
#rooms.chapter-active{
  background:
    linear-gradient(180deg,rgba(5,7,7,.72),rgba(5,6,5,.88)),
    var(--scene-sanctuary) center/cover no-repeat!important;
}
.room{backdrop-filter:blur(4px);border-color:rgba(235,216,179,.14)!important}
.room.rain{background:linear-gradient(180deg,rgba(5,14,17,.46),rgba(4,9,10,.88)),var(--scene-sanctuary) 42% center/cover no-repeat!important}
.room.zen{background:linear-gradient(180deg,rgba(15,15,11,.38),rgba(7,8,6,.9)),var(--scene-sanctuary) 60% center/cover no-repeat!important}
.room.sensory{background:linear-gradient(145deg,rgba(7,17,17,.48),rgba(13,10,16,.86)),var(--scene-sanctuary) 72% center/cover no-repeat!important}

/* Subtle photographic movement without expensive video. */
@keyframes cinPhotoBreathe{0%,100%{background-size:72% auto}50%{background-size:74% auto}}
@media(min-width:761px){
  .hero.chapter-active{animation:cinSceneIn calc(.78s / max(var(--motion),.18)) cubic-bezier(.16,.82,.24,1) both,cinPhotoBreathe calc(24s / max(var(--motion),.16)) ease-in-out infinite}
}

/* Mobile: visuals remain present but never sit behind long reading text. */
@media(max-width:760px){
  .threshold{background:
    linear-gradient(180deg,rgba(2,3,2,.42),rgba(2,3,2,.9) 72%),
    var(--scene-home) 58% center/cover no-repeat!important}
  .hero.chapter-active{background:
    linear-gradient(180deg,rgba(5,6,5,.94) 0%,rgba(5,6,5,.78) 56%,rgba(5,6,5,.96) 100%),
    var(--scene-home) 62% top/auto 56vh no-repeat!important}
  .presence-portal{background:
    linear-gradient(180deg,rgba(2,3,2,.04),rgba(3,4,3,.18) 45%,rgba(3,4,3,.94)),
    var(--scene-home) 58% center/cover no-repeat!important}
  .morningstar-console{background:
    linear-gradient(180deg,rgba(7,8,7,.88) 0%,rgba(7,8,7,.97) 220px),
    var(--scene-reading) center top/100% auto no-repeat!important}
  #horoscope.chapter-active{background:
    linear-gradient(180deg,rgba(6,7,6,.68) 0%,rgba(6,7,6,.96) 330px),
    var(--scene-horoscope) 66% top/auto 340px no-repeat!important}
  .animal-feature{min-height:225px;background:
    linear-gradient(180deg,rgba(6,7,6,.22),rgba(6,7,6,.9) 72%),
    var(--scene-zodiac) center/cover no-repeat!important}
  #tarotLab.chapter-active{background:
    linear-gradient(180deg,rgba(5,6,5,.76) 0%,rgba(5,6,5,.95) 300px),
    var(--scene-tarot) center top/auto 310px no-repeat!important}
  .card-table{background:
    linear-gradient(180deg,rgba(5,6,5,.28),rgba(5,6,5,.84)),
    var(--scene-tarot) center/cover no-repeat!important}
  #apothecary.chapter-active{background:
    linear-gradient(180deg,rgba(6,8,6,.72) 0%,rgba(6,8,6,.96) 310px),
    var(--scene-materia) center top/100% auto no-repeat!important}
  #rituals.chapter-active{background:
    linear-gradient(180deg,rgba(6,6,5,.7) 0%,rgba(6,6,5,.96) 310px),
    var(--scene-atelier) center top/100% auto no-repeat!important}
  #rooms.chapter-active{background:
    linear-gradient(180deg,rgba(5,7,7,.6),rgba(5,6,5,.94) 330px),
    var(--scene-sanctuary) center top/auto 340px no-repeat!important}
}

@media(prefers-reduced-data:reduce){
  .hero.chapter-active,.presence-portal,.morningstar-console,#horoscope.chapter-active,#tarotLab.chapter-active,#apothecary.chapter-active,#rituals.chapter-active,#rooms.chapter-active{background-image:none!important}
}

/* =========================================================
   FINAL SURGICAL PREMIUM POLISH PASS
   Visual-only overrides. No application/function behavior.
   ========================================================= */

/* 1) Mobile sensory control: unmistakable, finished, tactile. */
@media(max-width:760px){
  .sensory-top{
    width:42px!important;height:42px!important;min-width:42px!important;max-width:none!important;
    padding:0!important;font-size:0!important;color:transparent!important;
    border:1px solid rgba(232,207,158,.20)!important;
    border-radius:50%!important;
    background:
      radial-gradient(circle at 50% 50%,rgba(231,194,120,.13) 0 18%,transparent 19%),
      linear-gradient(145deg,rgba(23,24,21,.92),rgba(7,8,7,.94))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.26)!important;
    position:relative!important;overflow:visible!important;
  }
  .sensory-top:before{
    content:"✦"!important;display:grid!important;place-items:center!important;
    position:absolute!important;inset:0!important;
    font-size:.92rem!important;line-height:1!important;color:#e6c783!important;
    filter:drop-shadow(0 0 7px rgba(230,199,131,.4));
  }
  .sensory-top:after{
    content:"";position:absolute;inset:6px;border:1px solid rgba(231,200,139,.17);border-radius:50%;
    box-shadow:0 0 0 3px rgba(231,200,139,.025);pointer-events:none;
  }
  .sensory-top[aria-expanded="true"]{border-color:rgba(232,207,158,.42)!important;box-shadow:0 0 0 1px rgba(232,207,158,.07),0 0 28px rgba(207,162,85,.16)!important}
}

/* 2) Mobile Reading: deliberate topic matrix + a composer that breathes. */
@media(max-width:760px){
  #reading.morningstar-console{padding-bottom:calc(82px + var(--safeBottom))!important}
  #reading .topic-row{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.44rem!important;overflow:visible!important;padding:0!important;margin:.65rem 0 .7rem!important;
  }
  #reading .topic-row button{
    width:100%!important;min-width:0!important;min-height:40px!important;padding:.62rem .7rem!important;
    font-size:.68rem!important;text-align:center!important;border-radius:999px!important;
    background:linear-gradient(145deg,rgba(245,236,216,.035),rgba(210,169,96,.02))!important;
    border-color:rgba(232,207,158,.13)!important;
  }
  #reading .topic-row button:last-child{grid-column:1/-1!important}
  #reading .chat-form{
    grid-template-columns:1fr!important;gap:.42rem!important;padding:.55rem!important;margin-top:.2rem!important;
    border-radius:18px!important;background:linear-gradient(180deg,rgba(5,6,5,.74),rgba(14,13,11,.88))!important;
    box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.025)!important;
  }
  #reading .chat-form textarea{min-height:66px!important;max-height:120px!important;padding:.7rem .75rem!important}
  #reading .chat-form .primary{width:100%!important;min-height:44px!important;border-radius:14px!important;padding:.75rem 1rem!important}
  #reading .console-tools{margin-top:.68rem!important;margin-bottom:.35rem!important;gap:.46rem!important}
  #reading .console-tools .ghost{min-height:44px!important}
}

/* 3) Home experience rail: obvious swipe affordance without adding a block. */
@media(max-width:760px){
  .home-experience{position:relative!important;padding-bottom:.2rem!important}
  .home-experience:after{
    content:"SWIPE  →";position:absolute;right:7px;bottom:10px;z-index:7;pointer-events:none;
    padding:.3rem .5rem .28rem;border-radius:999px;
    font-size:.5rem;letter-spacing:.18em;color:#e1c487;
    background:rgba(7,8,7,.78);border:1px solid rgba(232,207,158,.14);
    box-shadow:0 7px 22px rgba(0,0,0,.25);backdrop-filter:blur(10px);
  }
  .experience-rail{
    padding-right:11vw!important;padding-bottom:1.65rem!important;
    mask-image:linear-gradient(90deg,#000 0%,#000 86%,transparent 100%)!important;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 86%,transparent 100%)!important;
    scroll-padding-inline:0 11vw;
  }
  .experience-rail article{flex-basis:82vw!important}
}

/* 4) Today: turn unused desktop space into a living celestial window. */
@media(min-width:761px){
  #horoscope.chapter-active{isolation:isolate;overflow:hidden!important}
  #horoscope.chapter-active:after{
    content:"";position:absolute;z-index:0;right:clamp(22px,4vw,64px);top:7%;bottom:7%;width:min(43%,510px);
    border-radius:260px 260px 18px 18px;
    background:
      linear-gradient(180deg,rgba(4,5,4,.04),rgba(4,5,4,.18) 48%,rgba(4,5,4,.75) 100%),
      var(--scene-horoscope) 48% center/cover no-repeat;
    border:1px solid rgba(232,207,158,.18);
    box-shadow:0 44px 110px rgba(0,0,0,.55),inset 0 0 70px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.015);
    filter:saturate(.9) contrast(1.02);
    pointer-events:none;
  }
  #horoscope.chapter-active>.section-copy,#horoscope.chapter-active>.sky-card{position:relative;z-index:2}
  #horoscope.chapter-active>.section-copy{max-width:560px;padding-top:7vh!important;padding-right:1.5rem}
  #horoscope .sky-card{
    align-self:center;margin-right:clamp(18px,3vw,46px);max-width:520px;
    background:linear-gradient(145deg,rgba(8,10,9,.66),rgba(5,6,5,.48))!important;
    border-color:rgba(232,207,158,.22)!important;
    box-shadow:0 36px 100px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.025)!important;
    backdrop-filter:blur(13px) saturate(.92);
  }
  #horoscope .sky-card:before{opacity:.16!important}
}

/* 5) Tarot mobile: ceremony enters the first viewport sooner. */
@media(max-width:760px){
  #tarotLab.tarot-lab{padding-top:12px!important}
  #tarotLab .section-title{margin-bottom:.48rem!important}
  #tarotLab .section-title h2{font-size:clamp(2rem,9vw,2.45rem)!important;line-height:.93!important;margin-bottom:.4rem!important}
  #tarotLab .section-title>p:last-child{
    font-size:.7rem!important;line-height:1.42!important;max-width:48ch;margin-inline:auto!important;
  }
  #tarotLab .tarot-question{margin:.35rem 0 .42rem!important;font-size:.65rem!important}
  #tarotLab .tarot-question textarea{min-height:48px!important;max-height:76px!important;padding:.58rem .68rem!important}
  #tarotLab .spread-controls{
    display:flex!important;justify-content:flex-start!important;gap:.35rem!important;overflow-x:auto!important;
    scrollbar-width:none;padding:.08rem 0 .34rem!important;margin:0!important;
  }
  #tarotLab .spread-controls::-webkit-scrollbar{display:none}
  #tarotLab .spread-controls button{flex:0 0 auto!important;padding:.52rem .7rem!important;font-size:.62rem!important}
  #tarotLab .tarot-instruction{font-size:.64rem!important;margin:.25rem 0 .38rem!important;min-height:0!important}
  #tarotLab .card-table{min-height:252px!important;margin-top:.12rem!important;margin-bottom:.58rem!important;padding:.55rem .25rem!important}
  #tarotLab .tarot-actions{margin:.38rem 0!important;gap:.4rem!important}
  #tarotLab .tarot-actions button{min-height:42px!important;padding:.62rem .8rem!important}
  #tarotLab .tarot-art-note{font-size:.58rem!important;line-height:1.35!important;margin-top:.28rem!important}
}

/* 6) Reading desktop: more observatory, less panel, without touching content. */
@media(min-width:761px){
  #reading.morningstar-console{
    background:
      linear-gradient(90deg,rgba(6,7,6,.97) 0%,rgba(6,7,6,.94) 38%,rgba(6,7,6,.72) 55%,rgba(5,6,5,.37) 74%,rgba(5,6,5,.62) 100%),
      linear-gradient(180deg,rgba(5,6,5,.12),rgba(5,6,5,.64)),
      var(--scene-reading) 70% center/cover no-repeat!important;
    box-shadow:0 60px 160px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.02)!important;
  }
  #reading.morningstar-console:before{
    width:56%!important;height:110%!important;right:-9%!important;top:-12%!important;
    background:
      radial-gradient(ellipse at 64% 35%,rgba(236,194,108,.15),transparent 22%),
      radial-gradient(ellipse at 73% 58%,rgba(75,95,94,.08),transparent 34%)!important;
    filter:blur(18px)!important;opacity:.72;
  }
  #reading.morningstar-console:after{
    content:"";position:absolute;inset:20px 20px 20px 48%;z-index:0;pointer-events:none;
    border:1px solid rgba(232,207,158,.08);border-radius:220px 220px 16px 16px;
    background:
      linear-gradient(180deg,transparent 0 58%,rgba(4,5,4,.14) 74%,rgba(4,5,4,.42) 100%),
      radial-gradient(circle at 66% 22%,rgba(231,197,128,.10),transparent 18%);
    box-shadow:inset 0 0 85px rgba(0,0,0,.32);
  }
  #reading .console-head,#reading .thread-bar,#reading .chat-log,#reading .topic-row,#reading .chat-form,#reading .console-tools{position:relative;z-index:2}
  #reading .chat-log{max-width:860px}
  #reading .topic-row,#reading .chat-form,#reading .console-tools{max-width:900px}
}

/* Premium restraint when sensory settings request less motion. */
body.calm-mode .home-experience:after{opacity:.62}
@media(prefers-reduced-motion:reduce){
  .sensory-top{transition:none!important}
}

/* QA refinement: keep the sensory glyph visible above the generic ghost shimmer,
   and let the mobile reading composer arrive without an empty chat well. */
@media(max-width:760px){
  .sensory-top:before{z-index:2!important;opacity:1!important;transform:none!important;background:none!important}
  #reading .chat-log{min-height:0!important;padding:.8rem 0 .72rem!important}
}

/* Mobile reading composer: float above the navigation as a single premium input bar. */
@media(max-width:760px){
  #reading.chapter-active .chat-form{
    position:sticky!important;bottom:calc(64px + var(--safeBottom))!important;z-index:55!important;
    grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;
    gap:.38rem!important;margin:.55rem 0 .7rem!important;
    padding:.42rem!important;border-radius:18px!important;
    box-shadow:0 18px 48px rgba(0,0,0,.52),0 0 0 1px rgba(232,207,158,.035),inset 0 1px rgba(255,255,255,.03)!important;
    backdrop-filter:blur(18px) saturate(.9)!important;
  }
  #reading.chapter-active .chat-form textarea{min-height:50px!important;max-height:96px!important;padding:.72rem .72rem!important}
  #reading.chapter-active .chat-form .primary{width:auto!important;min-width:116px!important;min-height:50px!important;padding:.68rem .82rem!important;white-space:nowrap!important}
  #reading .console-tools{padding-bottom:1.1rem!important}
}

/* Final mobile composer behavior: always accessible, never hidden behind the dock. */
@media(max-width:760px){
  #reading.morningstar-console{padding-bottom:calc(150px + var(--safeBottom))!important}
  #reading.chapter-active .chat-form{
    position:fixed!important;left:10px!important;right:10px!important;bottom:calc(64px + var(--safeBottom))!important;
    width:auto!important;max-width:none!important;margin:0!important;z-index:61!important;
  }
  #reading.chapter-active .chat-form textarea{min-height:46px!important;max-height:86px!important}
  #reading.chapter-active .chat-form .primary{min-height:46px!important}
}

@media(max-width:760px){
  /* A transformed chapter creates a containing block for fixed controls in mobile Chromium.
     Reading keeps its premium scene but skips the entrance transform so the composer can
     sit safely above the persistent dock. */
  #reading.chapter-active{animation:none!important;transform:none!important;filter:none!important}
}

/* On mobile the reading chapter has no transform, so sticky can safely keep the composer
   above the dock without floating over topic choices before the visitor reaches it. */
@media(max-width:760px){
  #reading.chapter-active .chat-form{
    position:sticky!important;left:auto!important;right:auto!important;bottom:calc(64px + var(--safeBottom))!important;
    width:100%!important;margin:.55rem 0 .7rem!important;z-index:55!important;
  }
}

/* === REAL RIDER-WAITE-SMITH DECK FACE — SURGICAL VISUAL REPAIR ===
   Card-selection logic and interpretation systems remain in app.js unchanged.
   This layer lets the historical card art, not UI chrome, lead the ceremony. */
#tarotLab .tarot-card{
  padding:5px!important;
  background:linear-gradient(145deg,#b99652 0%,#5f4724 11%,#d8b96f 22%,#6e522b 34%,#d5b367 52%,#6b4c24 68%,#c69d51 84%,#54401f 100%)!important;
  border:1px solid rgba(255,226,164,.62)!important;
  box-shadow:0 30px 72px rgba(0,0,0,.74),0 0 0 1px rgba(255,231,179,.11),0 0 36px rgba(218,173,92,.11)!important;
  overflow:visible!important;
}
#tarotLab .tarot-card:before{
  content:"";position:absolute;inset:4px;border:1px solid rgba(66,43,13,.48);border-radius:5px;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,242,207,.18),inset 0 0 18px rgba(66,37,6,.14)
}
#tarotLab .tarot-card .tarot-art{
  position:relative!important;inset:auto!important;width:100%!important;height:100%!important;
  object-fit:cover!important;border-radius:4px!important;display:block!important;
  filter:saturate(.96) contrast(1.035) brightness(.98)!important;
  box-shadow:inset 0 0 16px rgba(72,39,7,.18)!important;
  transform-origin:center center!important;
}
#tarotLab .tarot-card:not(.reversed):hover .tarot-art{transform:scale(1.012)!important}
#tarotLab .tarot-card.reversed{transform:none!important}
#tarotLab .tarot-card.reversed:hover{transform:translateY(-11px) rotateX(2deg)!important}
#tarotLab .tarot-card.reversed .tarot-art{transform:rotate(180deg)!important;filter:saturate(.91) contrast(1.045) brightness(.94)!important}
#tarotLab .tarot-card.reversed:hover .tarot-art{transform:rotate(180deg) scale(1.012)!important}
#tarotLab .tarot-card .tarot-vignette{
  inset:5px!important;border-radius:4px!important;
  background:linear-gradient(180deg,transparent 60%,rgba(2,2,1,.12) 78%,rgba(2,2,1,.70) 100%)!important;
  box-shadow:inset 0 0 26px rgba(16,9,2,.16)!important
}
#tarotLab .tarot-card .tarot-caption{
  left:10px!important;right:10px!important;bottom:9px!important;padding:.9rem .35rem .32rem!important;
  background:linear-gradient(180deg,transparent,rgba(5,4,2,.78) 54%,rgba(5,4,2,.91))!important;
  border-radius:0 0 3px 3px!important;text-shadow:0 2px 8px #000!important
}
#tarotLab .tarot-card .tarot-caption b{font-size:clamp(.72rem,1.35vw,.94rem)!important;color:#fff4db!important;letter-spacing:-.018em!important}
#tarotLab .tarot-card .tarot-caption small{font-size:.47rem!important;color:#e8c878!important;letter-spacing:.12em!important}
#tarotLab .tarot-card.art-failed{padding:0!important;background:#0b0a08!important}
#tarotLab .tarot-card.art-failed .tarot-fallback{display:grid!important;border:1px solid rgba(225,190,120,.28);border-radius:6px}
#tarotLab .tarot-art-note{max-width:780px!important;color:#98938a!important}

@media(max-width:760px){
  #tarotLab .tarot-card{padding:3px!important;border-radius:8px!important;box-shadow:0 22px 48px rgba(0,0,0,.7),0 0 20px rgba(212,167,87,.07)!important}
  #tarotLab .tarot-card:before{inset:2px;border-radius:5px}
  #tarotLab .tarot-card .tarot-art{border-radius:5px!important}
  #tarotLab .tarot-card .tarot-caption{left:5px!important;right:5px!important;bottom:4px!important;padding:.68rem .2rem .18rem!important}
  #tarotLab .tarot-card .tarot-caption b{font-size:.64rem!important}
  #tarotLab .tarot-card .tarot-caption small{font-size:.39rem!important;letter-spacing:.08em!important}
  #tarotLab .tarot-card:hover,#tarotLab .tarot-card.reversed:hover{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  #tarotLab .tarot-card,#tarotLab .tarot-card .tarot-art{transition:none!important}
}

/* === LONGITUDINAL INTELLIGENCE — VAULT CONSTELLATION + OUTCOME CALIBRATION ===
   Presentation only. The visitor remains in control of what is retained on-device. */
.constellation-card{position:relative;overflow:hidden;margin:0 0 1rem;padding:clamp(1rem,2.2vw,1.6rem);border:1px solid rgba(230,199,139,.18);border-radius:18px;background:radial-gradient(circle at 88% 12%,rgba(219,176,91,.11),transparent 28%),linear-gradient(145deg,rgba(18,19,17,.94),rgba(8,9,8,.9));box-shadow:0 24px 60px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.025)}
.constellation-card:after{content:"✦";position:absolute;right:1.2rem;top:.6rem;font-family:Georgia,serif;font-size:4.5rem;color:rgba(229,193,122,.055);pointer-events:none}
.constellation-card h3{font-size:clamp(1.55rem,3vw,2.45rem);margin:.12rem 0 .45rem;max-width:780px}
.constellation-card>p,.constellation-card>div>p{max-width:860px;color:var(--muted)}
.constellation-chips{display:flex;flex-wrap:wrap;gap:.42rem;margin:.9rem 0 .7rem}
.constellation-chips span{display:inline-flex;align-items:center;min-height:30px;padding:.3rem .62rem;border:1px solid rgba(225,195,137,.16);border-radius:999px;background:rgba(8,9,8,.42);color:#d9c49a;font-size:.62rem;letter-spacing:.055em}
.constellation-note{font-size:.72rem!important;color:#817c72!important;margin:.45rem 0 0!important}
.quiet-constellation{opacity:.9}
.outcome-status{color:#caae72}
.outcome-panel{margin:1.5rem 0;padding:1rem;border-top:1px solid rgba(232,207,158,.12);border-bottom:1px solid rgba(232,207,158,.12);background:linear-gradient(90deg,rgba(210,169,91,.035),transparent)}
.outcome-panel h3{margin:.15rem 0 .4rem;font-size:1.45rem}
.outcome-panel>p{color:var(--muted)}
.outcome-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.42rem;margin:.8rem 0}
.outcome-choices button{min-height:40px;padding:.45rem .55rem;border:1px solid rgba(231,203,148,.14);border-radius:8px;background:rgba(4,5,4,.36);color:#aaa398;font-size:.67rem}
.outcome-choices button:hover,.outcome-choices button:focus-visible,.outcome-choices button.active{border-color:rgba(231,193,118,.55);color:#f1d99e;background:rgba(194,147,66,.11);outline:none}
.outcome-panel label{display:grid;gap:.4rem;color:#a79f91;font-size:.72rem}
.outcome-panel textarea{width:100%;resize:vertical;background:rgba(0,0,0,.24);border:1px solid rgba(231,203,148,.12);border-radius:8px;padding:.75rem;color:var(--ink)}
.outcome-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
@media(max-width:760px){.outcome-choices{grid-template-columns:1fr 1fr}.constellation-card{border-radius:14px}.constellation-card:after{font-size:3.4rem}}