:root{--gold:#e2c47b;--gold2:#f3dea5;--red:#a21e2e;--wine:#270a0f;--ink:#211610}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#080304;color:#fff;font-family:Inter,system-ui,sans-serif}
body{min-height:100vh;overflow-x:hidden}button,textarea{font:inherit}button{cursor:pointer}
#app{min-height:100vh;position:relative;isolation:isolate}.scene{position:fixed;inset:0;z-index:-5;overflow:hidden;background:radial-gradient(circle at 50% 0,#47151b 0,#1b080c 42%,#080304 82%)}
.sky{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 22%,rgba(211,113,66,.14),transparent 32%);animation:none}
@keyframes skyPulse{to{}}
.moon{position:absolute;right:-65px;top:110px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff4cf,#d8b76c 58%,#8c642d);opacity:.24;box-shadow:0 0 70px rgba(236,198,116,.28);animation:none}
@keyframes moonDrift{to{transform:translate(-18px,12px) scale(1.03)}}
.mountains{position:absolute;left:-15%;right:-15%;height:42vh;bottom:-4vh;background:#0b1210;clip-path:polygon(0 64%,10% 42%,20% 57%,33% 25%,46% 52%,59% 30%,73% 60%,85% 34%,100% 61%,100% 100%,0 100%)}
.mountains.back{opacity:.46;bottom:8vh;transform:scale(1.06)}
.mountains.front{opacity:.85}.temple{position:absolute;left:50%;transform:translateX(-50%);bottom:7vh;width:min(92vw,760px);height:230px;background:
linear-gradient(180deg,transparent 0 24%,#070304 25% 37%,transparent 38%),
linear-gradient(180deg,transparent 0 47%,#130506 48% 100%);
clip-path:polygon(0 31%,10% 25%,18% 28%,28% 18%,38% 24%,50% 8%,62% 24%,72% 18%,82% 28%,90% 25%,100% 31%,96% 39%,83% 40%,83% 100%,17% 100%,17% 40%,4% 39%);
opacity:.92;filter:drop-shadow(0 15px 18px #000)}
.pillar{position:absolute;top:0;bottom:0;width:48px;background:linear-gradient(90deg,#130304,#6e161d 44%,#311014 70%,#070203);box-shadow:0 0 32px #000}
.p1{left:0}.p2{right:0;transform:scaleX(-1)}
.lantern{position:absolute;top:22px;width:62px;height:88px;border-radius:20px 20px 28px 28px;background:linear-gradient(90deg,#641019,#c72f3a,#661019);box-shadow:0 0 28px rgba(255,81,48,.43);transform-origin:50% -24px;animation:sway 7s ease-in-out infinite}
.lantern:before,.lantern:after{content:"";position:absolute;left:8px;right:8px;height:3px;background:#d2ac61}.lantern:before{top:11px}.lantern:after{bottom:11px}.lantern i{position:absolute;bottom:-26px;left:29px;width:3px;height:26px;background:#cfa755}
.l1{left:9%}.l2{right:10%;animation-delay:-2.3s;transform:scale(.85)}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
.mist{position:absolute;left:-30%;right:-30%;height:35vh;border-radius:50%;background:radial-gradient(ellipse,rgba(221,207,190,.09),transparent 64%);bottom:-10vh;animation:none}.m2{bottom:5vh;animation-delay:-7s;opacity:.45}
@keyframes mistMove{to{transform:translateX(9%) translateY(-2%)}}
.smoke{position:absolute;width:200px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(255,244,225,.11),transparent 68%);bottom:2%;animation:none}.s1{left:12%}.s2{right:10%;animation-delay:-3s}.s3{left:42%;animation-delay:-5s}
@keyframes smokeUp{0%{opacity:0;transform:translateY(70px) scale(.7)}25%{opacity:.55}100%{opacity:0;transform:translate(45px,-300px) scale(1.45)}}
.embers:before,.embers:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#ffb669;box-shadow:40px 80px 0 #ff8a4b,95px 130px 0 #f0b768,160px 32px 0 #ffd399,230px 120px 0 #ff9b54,340px 180px 0 #ffc676,470px 74px 0 #ff8d46;animation:emberRise 8s linear infinite;opacity:.5}.embers:after{left:28%;top:18%;animation-delay:-4s}
@keyframes emberRise{0%{transform:translateY(60px);opacity:0}20%{opacity:.5}100%{transform:translateY(-250px);opacity:0}}
.petal{position:absolute;top:-20px;width:8px;height:13px;border-radius:70% 20% 70% 20%;background:rgba(208,84,95,.42);animation:fall linear infinite}
@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(720deg);opacity:.06}}
.vignette{position:absolute;inset:0;box-shadow:inset 0 0 160px #000, inset 0 -180px 150px #0009;pointer-events:none}
.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:linear-gradient(180deg,rgba(9,3,4,.93),rgba(9,3,4,.2));}
.brand{font-family:Georgia,'Times New Roman',serif;letter-spacing:.25em;color:var(--gold2);font-size:14px}.soundbtn{display:flex;align-items:center;gap:7px;border:1px solid rgba(226,196,123,.5);background:#16090bdd;color:var(--gold2);border-radius:999px;padding:9px 12px}.soundbtn span{font-size:15px}.soundbtn small{font-size:9px;letter-spacing:.14em}.soundbtn.on{box-shadow:0 0 24px rgba(226,196,123,.28),inset 0 0 12px rgba(226,196,123,.1)}
.sound-hint{position:fixed;z-index:15;top:72px;left:50%;transform:translateX(-50%);width:min(92vw,520px);padding:9px 14px;border-radius:999px;background:#100709e8;border:1px solid rgba(226,196,123,.22);color:#d8c6a2;font-size:11px;text-align:center;transition:.4s}.sound-hint.hide{opacity:0;transform:translate(-50%,-8px);pointer-events:none}
main{max-width:760px;margin:auto;padding:46px 18px 120px}.hero{text-align:center;padding:10vh 0 5vh;animation:fadeUp .8s ease both}
.hero:before{content:"";display:block;width:92px;height:92px;margin:0 auto 24px;border:1px solid rgba(226,196,123,.35);border-radius:50%;background:radial-gradient(circle,rgba(226,196,123,.12),transparent 64%);box-shadow:0 0 48px rgba(226,196,123,.13);animation:sealPulse 4s ease-in-out infinite}
@keyframes sealPulse{50%{transform:scale(1.05);box-shadow:0 0 65px rgba(226,196,123,.2)}}.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}h1,h2,h3{font-family:Georgia,'Times New Roman',serif}h1{font-size:clamp(46px,12vw,78px);line-height:.94;margin:.35em 0;text-shadow:0 12px 40px #000,0 0 20px rgba(221,182,102,.08)}h2{font-size:clamp(28px,8vw,42px);line-height:1.18}.sub{max-width:580px;margin:0 auto 28px;color:#e5d9c7;line-height:1.72}.btn{border:0;border-radius:16px;padding:16px 22px;font-weight:700;transition:.2s;display:inline-flex;align-items:center;justify-content:center}.primary{min-width:260px;background:linear-gradient(135deg,#b32a37,#711018);color:white;border:1px solid rgba(255,163,151,.28);box-shadow:0 12px 36px rgba(147,21,40,.45),inset 0 1px rgba(255,255,255,.18)}.gold{background:linear-gradient(135deg,#f0d894,#c08f48);color:#25160c}.ghost{background:#ffffff0b;border:1px solid #ffffff25;color:#fff}.btn:active{transform:scale(.98)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.choice{min-height:120px;padding:20px 16px;border-radius:20px;background:linear-gradient(180deg,rgba(48,15,19,.92),rgba(22,7,9,.96));border:1px solid rgba(226,196,123,.24);color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;box-shadow:0 18px 44px #0007}.choice:after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 42%,rgba(255,224,171,.08) 50%,transparent 58%);transform:translateX(-70%);transition:.6s}.choice:active:after{transform:translateX(70%)}.choice b{font-family:Georgia,'Times New Roman',serif;color:#f0dfb4}.choice span{font-size:13px;color:#c9bba8}.card,.ritual-stage{background:linear-gradient(180deg,rgba(48,16,21,.96),rgba(17,6,8,.97));border:1px solid rgba(226,196,123,.25);border-radius:24px;padding:22px;box-shadow:0 20px 55px #0008;}
.input{width:100%;padding:16px;border-radius:15px;border:1px solid rgba(226,196,123,.35);background:#0c0608cc;color:#fff;outline:none;resize:none}.ritual{text-align:center}.seal{width:88px;height:88px;border:1px solid rgba(226,196,123,.35);border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:var(--gold2);font-family:Georgia,'Times New Roman',serif;box-shadow:0 0 35px rgba(226,196,123,.12)}
.incense-wrap{height:250px;display:flex;justify-content:center;align-items:flex-end;gap:28px}.incense{width:8px;height:145px;border-radius:8px;background:linear-gradient(#edc29b 0 8px,#b45731 8px);opacity:.38;position:relative;transition:.4s;transform:translateY(15px)}.incense.lit{opacity:1;transform:none;box-shadow:0 0 16px #ff683b44}.incense.lit:before{content:"";position:absolute;top:-10px;left:0;width:8px;height:12px;border-radius:50%;background:#ffd064;box-shadow:0 0 20px #ff5b2f;animation:flame .25s ease-in-out infinite alternate}@keyframes flame{to{transform:scale(.82) translateY(1px)}}.incense.lit:after{content:"";position:absolute;top:-68px;left:-42px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%);animation:incSmoke 2.5s linear infinite}@keyframes incSmoke{to{transform:translate(20px,-75px) scale(1.4);opacity:0}}
.cylinder{width:154px;height:215px;margin:26px auto;position:relative;border-radius:28px 28px 46px 46px;background:linear-gradient(90deg,#49160f,#a14727,#5d1d13);border:4px solid #c99a54;box-shadow:0 26px 55px #000b,inset 0 0 34px #0007}.cylinder:before{content:"";position:absolute;inset:-20px 14px auto;height:30px;border:4px solid #c99a54;border-radius:50%;background:#5c2016}.sticks{position:absolute;left:18px;right:18px;top:-90px;height:132px}.stick{position:absolute;bottom:0;width:10px;height:154px;border-radius:5px;background:linear-gradient(90deg,#d6b67e,#8d6d3e);transform-origin:50% 100%}.shaking{animation:shake .11s linear 18}@keyframes shake{0%{transform:translateX(-8px) rotate(-2deg)}50%{transform:translateX(8px) rotate(2deg)}100%{transform:translateX(-5px)}}.flying{animation:fly 1.25s cubic-bezier(.18,.78,.2,1) forwards}@keyframes fly{to{transform:translateY(-230px) rotate(15deg)}}
.paper{position:relative;overflow:hidden;padding:28px;border-radius:22px;background:linear-gradient(180deg,#f7ecd7,#e4cea6);color:var(--ink);box-shadow:0 20px 60px #0009}.paper:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(92,64,31,.035) 9px);pointer-events:none}.paper.reveal{animation:paperReveal 1s ease both}@keyframes paperReveal{from{opacity:0;transform:translateY(25px) scale(.96) rotateX(10deg);}60%{}to{opacity:1;transform:none;filter:none}}.big-num{font-family:Georgia,'Times New Roman',serif;font-size:66px;color:#83212c}.stars{color:#b98327;letter-spacing:.12em}.lock{padding:24px;border-radius:20px;background:#0d0709c7;border:1px dashed rgba(226,196,123,.5);text-align:center}.price{font-family:Georgia,'Times New Roman',serif;font-size:40px;color:var(--gold2)}.badges{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px}.badge{padding:8px 10px;border-radius:999px;background:#ffffff0b;border:1px solid #ffffff20;color:#d6c8b4;font-size:12px}.sections{display:grid;gap:12px}.section{padding:16px;border-radius:18px;background:#ffffff08;border:1px solid #ffffff12}.section h3{margin:0 0 8px;font-size:16px;color:var(--gold2)}.section p{margin:0;color:#ddd0bd;line-height:1.55}.boost{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.small{font-size:12px;color:#ad9d8a}
footer{position:fixed;z-index:10;left:0;right:0;bottom:0;padding:9px 14px;text-align:center;background:#080405e8;color:#9f8e80;font-size:10px;}.hidden{display:none!important}.fade{animation:fadeUp .55s ease both}@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}.gate{position:fixed;inset:0;z-index:100;background:#060203;overflow:hidden;display:flex;align-items:center;justify-content:center}.gate-panel{position:absolute;top:0;bottom:0;width:52%;background:linear-gradient(90deg,#28070a,#73151d 50%,#2d080b),repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,220,155,.05) 31px 33px);border:1px solid rgba(226,196,123,.22)}.gate-panel.left{left:0}.gate-panel.right{right:0}.gate-copy{position:relative;z-index:2;color:var(--gold2);font-family:Georgia,'Times New Roman',serif;font-size:12px;letter-spacing:.28em}.gate.open .left{animation:gateL 1.25s cubic-bezier(.7,0,.2,1) forwards}.gate.open .right{animation:gateR 1.25s cubic-bezier(.7,0,.2,1) forwards}@keyframes gateL{to{transform:translateX(-103%)}}@keyframes gateR{to{transform:translateX(103%)}}
@media(min-width:650px){main{padding-top:66px}.grid{grid-template-columns:repeat(3,1fr)}}

/* ===== V7 PREMIUM CINEMATIC ===== */
.starscape{position:absolute;inset:0;background-image:
radial-gradient(circle at 15% 20%,rgba(255,225,164,.8) 0 1px,transparent 1.8px),
radial-gradient(circle at 66% 12%,rgba(255,225,164,.65) 0 1px,transparent 1.8px),
radial-gradient(circle at 79% 34%,rgba(255,225,164,.52) 0 1px,transparent 1.8px),
radial-gradient(circle at 37% 28%,rgba(255,225,164,.48) 0 1px,transparent 1.8px);
background-size:260px 260px,310px 310px,220px 220px,360px 360px;opacity:.22;animation:stars 7s ease-in-out infinite alternate}
@keyframes stars{to{opacity:.42}}
.eaves{position:absolute;top:92px;width:46%;height:86px;background:linear-gradient(164deg,transparent 0 45%,#100506 46% 58%,transparent 59%);
filter:drop-shadow(0 12px 16px #000);opacity:.92}.e1{left:-4%}.e2{right:-4%;transform:scaleX(-1)}
.incense-bowl{position:absolute;left:50%;bottom:5.8vh;transform:translateX(-50%);width:132px;height:56px;border-radius:10px 10px 60px 60px;
background:linear-gradient(90deg,#4a2b1a,#b37c43 48%,#5a351d);border:1px solid rgba(234,199,123,.35);box-shadow:0 14px 36px #000a,inset 0 2px rgba(255,255,255,.09);opacity:.82}
.incense-bowl:before{content:"";position:absolute;left:14px;right:14px;top:-6px;height:14px;border-radius:50%;background:#2a160e;border:1px solid #d0a65a55}
.incense-bowl span{position:absolute;bottom:44px;width:3px;height:56px;background:#9d4728;left:44px}.incense-bowl span:nth-child(2){left:64px;height:68px}.incense-bowl span:nth-child(3){left:84px;height:52px}
.ritual-toast{position:fixed;z-index:80;left:50%;top:22%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;
background:#0b0507e8;border:1px solid #e2c47b55;color:#f1d796;letter-spacing:.14em;font-size:10px;box-shadow:0 12px 36px #0009;animation:toastIn .35s ease}
.ritual-toast span{font-size:14px}.ritual-toast.hidden{display:none}.ritual-toast.show{display:flex}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px)}}
.topbar{border-bottom:1px solid rgba(226,196,123,.08)}
.brand{font-size:13px;text-shadow:0 0 12px rgba(226,196,123,.18)}
.soundbtn{background:linear-gradient(180deg,rgba(34,13,16,.94),rgba(14,6,8,.96));box-shadow:0 8px 22px #0006}
.hero{padding-top:8vh}.hero:after{content:"";display:block;width:1px;height:72px;margin:34px auto 0;background:linear-gradient(#d9b86c66,transparent)}
.hero h1{letter-spacing:.01em}.hero .sub{font-size:17px}
.primary{position:relative;overflow:hidden}.primary:after{content:"";position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 44%,rgba(255,231,184,.16) 50%,transparent 56%);animation:none}
@keyframes ctaShine{0%,70%{transform:translateX(-65%)}100%{transform:translateX(65%)}}
.choice{transition:transform .22s ease,border-color .22s}.choice:hover{transform:translateY(-3px);border-color:rgba(226,196,123,.45)}
.card,.ritual-stage{position:relative;overflow:hidden}.card:before,.ritual-stage:before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at 50% 0,rgba(226,196,123,.08),transparent 42%)}.card>*,.ritual-stage>*{position:relative;z-index:1}
.paper{border:1px solid #9c744044}.paper:after{content:"";position:absolute;inset:12px;border:1px solid rgba(122,88,43,.14);border-radius:14px;pointer-events:none}
.big-num{text-shadow:0 2px 0 #fff6}
@media(max-width:520px){
  .moon{width:180px;height:180px;right:-58px;top:150px}
  .pillar{width:30px}
  .eaves{top:110px;height:72px}
  .incense-bowl{opacity:.58}
  main{padding-left:22px;padding-right:22px}
}

/* ===== V8 CINEMATIC INTRO / FLASH-LIKE HTML5 ANIMATION ===== */
.cinematic-intro{
  position:fixed;inset:0;z-index:999;background:#050203;overflow:hidden;
  transition:opacity .7s ease,visibility .7s ease
}
.cinematic-intro.done{opacity:0;visibility:hidden;pointer-events:none}
.intro-sky{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 22%,rgba(172,67,47,.30),transparent 25%),
  radial-gradient(circle at 50% 0,#4a1720 0,#17080c 45%,#050203 90%);
  animation:none}
@keyframes introSky{to{transform:scale(1.03)}}
.intro-mountains{position:absolute;left:-10%;right:-10%;bottom:0;height:52vh;background:#090e0d;
  clip-path:polygon(0 66%,12% 45%,21% 55%,33% 27%,47% 57%,60% 32%,72% 60%,85% 39%,100% 64%,100% 100%,0 100%);
  opacity:.88;filter:drop-shadow(0 -8px 30px #000);animation:none}
@keyframes mountainDrift{to{transform:translateX(-2%) scale(1.03)}}
.intro-temple{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%) scale(.88);
  width:min(90vw,760px);height:48vh;animation:none;transform-style:flat}
@keyframes cameraPush{to{transform:translateX(-50%) scale(1.02)}}
.intro-roof{position:absolute;left:4%;right:4%;top:2%;height:30%;background:#0b0304;
  clip-path:polygon(0 43%,8% 36%,17% 40%,30% 26%,39% 33%,50% 14%,61% 33%,70% 26%,83% 40%,92% 36%,100% 43%,96% 57%,4% 57%);
  filter:drop-shadow(0 18px 18px #000)}
.intro-roof:before,.intro-roof:after{content:"";position:absolute;top:55%;width:18%;height:5px;background:linear-gradient(90deg,#7b1b1e,#c99650,#7b1b1e)}
.intro-roof:before{left:8%;transform:rotate(-7deg)}.intro-roof:after{right:8%;transform:rotate(7deg)}
.intro-door{position:absolute;bottom:0;width:33%;height:70%;background:
  repeating-linear-gradient(90deg,#68161d 0 28px,#4b0e13 28px 34px),
  linear-gradient(#721923,#39090d);border:1px solid rgba(225,191,111,.28);box-shadow:inset 0 0 50px #0008}
.intro-door.left{left:17%;transform-origin:left center}.intro-door.right{right:17%;transform-origin:right center}
.intro-door:after{content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#d8b463;box-shadow:0 0 12px #d8b46366}
.intro-door.left:after{right:18px}.intro-door.right:after{left:18px}
.intro-glow{position:absolute;left:38%;right:38%;bottom:6%;height:60%;background:radial-gradient(ellipse at 50% 70%,rgba(255,195,105,.36),transparent 67%);
  opacity:.35;animation:none}
@keyframes glowPulse{50%{opacity:.65;transform:scale(1.08)}}
.intro-lantern{position:absolute;top:13%;width:64px;height:90px;border-radius:18px 18px 28px 28px;background:linear-gradient(90deg,#68121b,#d0323e,#68121b);
  box-shadow:0 0 35px #ff5d3f66;transform-origin:50% -30px;animation:introLantern 6s ease-in-out infinite}
.intro-lantern:before{content:"";position:absolute;left:8px;right:8px;top:14px;height:3px;background:#d4aa5b;box-shadow:0 49px #d4aa5b}
.il1{left:9%}.il2{right:9%;animation-delay:-1.9s}
@keyframes introLantern{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
.intro-fog{position:absolute;width:90vw;height:34vh;left:5vw;bottom:-8vh;border-radius:50%;background:radial-gradient(ellipse,rgba(220,207,192,.10),transparent 66%);animation:none}
.fog2{bottom:8vh;left:-12vw;animation-delay:-4s;opacity:.55}
@keyframes fogFlow{to{transform:translateX(10vw) translateY(-3vh) scale(1.08)}}
.intro-copy{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:min(86vw,560px);text-align:center;z-index:3;text-shadow:0 12px 40px #000}
.intro-kicker{font-family:Georgia,'Times New Roman',serif;letter-spacing:.35em;color:#e6c879;font-size:11px;margin-bottom:14px}
.intro-title{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(38px,10vw,68px);line-height:.98;color:#fff;margin-bottom:18px;animation:none}
@keyframes titleBreathe{50%{text-shadow:0 0 24px rgba(237,201,117,.16),0 12px 40px #000}}
.intro-sub{font-size:15px;color:#dbcdb8;line-height:1.5;margin-bottom:24px}
.intro-btn{border:1px solid rgba(255,171,151,.35);border-radius:16px;padding:17px 26px;min-width:250px;font-weight:800;color:#fff;background:linear-gradient(135deg,#b42d3a,#75111a);
  box-shadow:0 15px 46px rgba(141,22,41,.55),inset 0 1px rgba(255,255,255,.2);position:relative;overflow:hidden}
.intro-btn:after{content:"";position:absolute;inset:-60%;background:linear-gradient(115deg,transparent 44%,rgba(255,240,205,.20) 50%,transparent 56%);animation:none}
@keyframes introShine{0%,58%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
.intro-note{font-size:10px;letter-spacing:.08em;color:#a99887;margin-top:11px}

/* opening sequence */
.cinematic-intro.opening .intro-copy{animation:copyFade .65s ease forwards}
.cinematic-intro.opening .intro-door.left{animation:doorL 1.55s cubic-bezier(.7,0,.2,1) .3s forwards}
.cinematic-intro.opening .intro-door.right{animation:doorR 1.55s cubic-bezier(.7,0,.2,1) .3s forwards}
.cinematic-intro.opening .intro-glow{animation:burstGlow 1.8s ease .45s forwards}
.cinematic-intro.opening .intro-temple{animation:enterPush 2s cubic-bezier(.2,.75,.2,1) .2s forwards}
@keyframes copyFade{to{opacity:0;transform:translate(-50%,-56%) scale(.96)}}
@keyframes doorL{to{transform:translateX(-105%)}}
@keyframes doorR{to{transform:translateX(105%)}}
@keyframes burstGlow{0%{opacity:.35}55%{opacity:1;transform:scale(1.25)}100%{opacity:.78;transform:scale(2.2)}}
@keyframes enterPush{to{transform:translateX(-50%) scale(1.18)}}

/* Improve in-game temple feeling */
.scene{transition:filter .8s ease}
#app.temple-entered .scene{ saturate(1.06)}
#app.temple-entered .temple{animation:none}
@keyframes templeAlive{to{filter:drop-shadow(0 15px 18px #000) drop-shadow(0 0 18px rgba(208,86,48,.08))}}
#app.temple-entered .lantern{animation-duration:3.9s}
#app.temple-entered .mist{animation-duration:11s}

.scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 18%,rgba(242,203,126,.08),transparent 26%),linear-gradient(180deg,rgba(255,136,92,.035),transparent 30%);animation:none}
@keyframes warmGlow{to{opacity:.72}}
.choice,.section,.card,.ritual-stage{box-shadow:0 18px 44px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.03)}
.paper{box-shadow:0 24px 60px rgba(0,0,0,.46),0 0 32px rgba(220,180,95,.08)}

/* ===== V12 IMMERSIVE CHINESE TEMPLE GATE ===== */
.intro-temple{bottom:6vh;height:54vh}
.intro-roof{
  top:0;height:26%;
  background:linear-gradient(#0e0405,#080203);
  clip-path:polygon(0 48%,7% 43%,14% 45%,24% 37%,34% 40%,44% 28%,50% 20%,56% 28%,66% 40%,76% 37%,86% 45%,93% 43%,100% 48%,97% 61%,82% 57%,67% 60%,50% 55%,33% 60%,18% 57%,3% 61%);
  border-bottom:2px solid rgba(207,158,76,.16);
  filter:drop-shadow(0 18px 22px #000b)
}
.roof-ridge{position:absolute;left:28%;right:28%;top:16%;height:7px;border-radius:999px;background:linear-gradient(90deg,#5b2513,#d09a45,#5b2513);box-shadow:0 0 14px #bd82373d}
.roof-bell{position:absolute;top:64%;width:12px;height:16px;border-radius:50% 50% 6px 6px;background:#8c6b33;opacity:.7;transform-origin:50% -8px;animation:bellSway 6s ease-in-out infinite}
.rb1{left:17%}.rb2{right:17%;animation-delay:-1.8s}
@keyframes bellSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

.temple-plaque{
  position:absolute;z-index:5;left:50%;top:21%;transform:translateX(-50%);
  min-width:150px;padding:8px 18px;border:2px solid #b78a42;
  background:linear-gradient(#4b130f,#240805);
  color:#e8c879;font-family:serif;font-weight:700;letter-spacing:.18em;
  text-shadow:0 1px #000;box-shadow:0 8px 20px #0008,inset 0 0 12px rgba(255,215,130,.06)
}
.stone-steps{position:absolute;left:17%;right:17%;bottom:-3%;height:18%;z-index:0;perspective:500px}
.stone-steps i{display:block;height:22%;margin:0 auto 2px;background:linear-gradient(#27211d,#14100e);border-top:1px solid rgba(220,190,150,.12);box-shadow:0 5px 10px #0008}
.stone-steps i:nth-child(1){width:68%}.stone-steps i:nth-child(2){width:78%}.stone-steps i:nth-child(3){width:89%}.stone-steps i:nth-child(4){width:100%}

.intro-door{
  bottom:8%;height:63%;width:31%;
  background:
    linear-gradient(90deg,rgba(255,255,255,.04),transparent 15%,rgba(0,0,0,.16) 46%,transparent 70%),
    repeating-linear-gradient(90deg,#7c161b 0 30px,#611116 30px 34px);
  border:2px solid #4d0d10;
  box-shadow:inset 0 0 0 2px rgba(218,173,87,.10),inset 0 0 40px #0007,0 15px 30px #0009
}
.intro-door.left{left:19%}.intro-door.right{right:19%}
.intro-door:before{
  content:"";position:absolute;inset:8px;border:1px solid rgba(206,154,74,.18);
  box-shadow:inset 0 0 0 8px rgba(0,0,0,.06)
}
.door-studs{
  position:absolute;inset:14% 13% 18%;
  background-image:radial-gradient(circle,#d6ad57 0 4px,#8a6026 5px 6px,transparent 6.5px);
  background-size:34px 34px;background-position:center;
  opacity:.82;filter:drop-shadow(0 1px 1px #000)
}
.door-ring{
  position:absolute;top:52%;width:34px;height:34px;border:5px solid #b48945;border-radius:50%;
  box-shadow:0 2px 4px #000,inset 0 0 4px #0007
}
.intro-door.left .door-ring{right:14px}
.intro-door.right .door-ring{left:14px}
.door-ring:before{
  content:"";position:absolute;left:50%;top:-18px;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50% 50% 42% 42%;
  background:radial-gradient(circle at 50% 38%,#c59b51 0 24%,#795527 26% 60%,#4c351a 62%)
}

/* Make the gate feel more monumental on phone */
@media(max-width:520px){
  .intro-copy{top:42%;width:88vw}
  .intro-title{font-size:clamp(34px,9.4vw,52px)}
  .intro-temple{width:98vw;bottom:4vh;height:55vh}
  .temple-plaque{top:22%;font-size:12px;min-width:128px}
  .intro-lantern{top:12%;width:58px;height:82px}
}

/* slightly faster cinematic push */
@keyframes enterPush{
  0%{transform:translateX(-50%) scale(.88)}
  100%{transform:translateX(-50%) scale(1.18)}
}
.cinematic-intro.opening .intro-temple{animation:enterPush 1.65s cubic-bezier(.18,.78,.18,1) .15s forwards}
.cinematic-intro.opening .intro-door.left{animation:doorL 1.25s cubic-bezier(.7,0,.2,1) .22s forwards}
.cinematic-intro.opening .intro-door.right{animation:doorR 1.25s cubic-bezier(.7,0,.2,1) .22s forwards}

/* richer inner temple atmosphere */
#app.temple-entered .scene:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%,rgba(240,187,100,.13),transparent 24%),
    linear-gradient(180deg,rgba(123,24,18,.08),transparent 34%);
  animation:none
}
@keyframes innerGlow{to{opacity:.72}}


/* ===== V14 SAFE RENDER: Huawei / WeChat / mobile browser stability ===== */
@media (max-width: 900px) {
  html, body { background:#050203; }
  .cinematic-intro, .scene, .intro-temple, .intro-sky, .intro-mountains,
  .intro-glow, .intro-fog, .mist, .smoke, .sky, .moon, .starscape, .vignette {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  /* Large layers stay visually present but do not continuously repaint. */
  .intro-sky, .intro-mountains, .intro-temple, .intro-glow, .intro-fog,
  .sky, .moon, .mist, .smoke, .scene:after,
  #app.temple-entered .scene:after, #app.temple-entered .temple,
  .hero:before, .primary:after, .intro-title, .intro-btn:after {
    animation: none !important;
  }

  /* Keep only low-cost transform animations. */
  .intro-lantern { animation: introLantern 6s ease-in-out infinite !important; }
  .roof-bell { animation: bellSway 6s ease-in-out infinite !important; }
  .lantern { animation: sway 7s ease-in-out infinite !important; }
  .petal { animation-name: fall !important; }

  /* No large-area blur/blend on mobile. */
  .intro-fog, .mist, .smoke, .intro-glow, .card, .ritual-stage, .topbar, footer {
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    mix-blend-mode:normal !important;
  }

  .cinematic-intro.opening .intro-temple {
    animation: enterPushSafe 1.15s ease-out .08s forwards !important;
  }
  .cinematic-intro.opening .intro-door.left {
    animation: doorLSafe 1.05s ease-out .15s forwards !important;
  }
  .cinematic-intro.opening .intro-door.right {
    animation: doorRSafe 1.05s ease-out .15s forwards !important;
  }
}
@keyframes enterPushSafe {
  from { transform:translateX(-50%) scale(.88); opacity:1; }
  to   { transform:translateX(-50%) scale(1.10); opacity:.96; }
}
@keyframes doorLSafe { to { transform:translateX(-105%); } }
@keyframes doorRSafe { to { transform:translateX(105%); } }

/* V15 PREMIUM RITUAL */
:root{--v15gold:#d7b56d;--v15deep:#100405}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;background:radial-gradient(circle at 50% 35%,transparent 25%,rgba(0,0,0,.22) 72%,rgba(0,0,0,.48));mix-blend-mode:multiply}
.cinematic-intro.opening .intro-copy{animation:v15CopyAway 2.4s ease forwards}
.cinematic-intro.opening .intro-door.left{animation:v15DoorL 4.2s cubic-bezier(.65,0,.2,1) forwards}
.cinematic-intro.opening .intro-door.right{animation:v15DoorR 4.2s cubic-bezier(.65,0,.2,1) forwards}
.cinematic-intro.opening .intro-glow{animation:v15Glow 4.2s ease forwards}
@keyframes v15CopyAway{0%,35%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%)}}100%{opacity:0;transform:translateY(-20px)}}
@keyframes v15DoorL{0%,12%{transform:translateX(0)}100%{transform:translateX(-112%)}}
@keyframes v15DoorR{0%,12%{transform:translateX(0)}100%{transform:translateX(112%)}}
@keyframes v15Glow{0%{opacity:.08}55%{opacity:.55}100%{opacity:.95}}
.premium-progress{display:flex;gap:7px;margin:14px 0 22px}.premium-progress i{height:3px;flex:1;background:#ffffff20;border-radius:9px}.premium-progress i.on{background:linear-gradient(90deg,#9b652e,var(--v15gold));box-shadow:0 0 10px #d7b56d55}
.oracle-whisper{margin:12px auto 22px;max-width:520px;padding:12px 15px;border:1px solid #d7b56d35;background:#16070899;border-radius:14px;color:#e8d6ae;font-family:serif;font-style:italic;letter-spacing:.02em}
.hold-hint{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#d7b56d;margin:10px 0 16px}.cylinder{touch-action:none;user-select:none;-webkit-user-select:none}.cylinder.holding{filter:drop-shadow(0 0 24px #d7b56d66);transform:scale(1.025)}
.paper.reveal{position:relative;overflow:hidden}.paper.reveal:after{content:"福";position:absolute;right:-12px;top:10px;font-size:92px;color:#8c271716;transform:rotate(10deg);font-family:serif}.fortune-grade{display:inline-block;padding:7px 13px;border:1px solid #8b632d55;border-radius:99px;background:#f5e6bd55;font-weight:700;letter-spacing:.08em}.locked-preview{position:relative;margin-top:16px;padding:18px;border:1px solid #d7b56d35;border-radius:18px;background:linear-gradient(180deg,#321316cc,#140708ee);overflow:hidden}.locked-preview .blur-lines{filter:blur(5px);opacity:.42;user-select:none}.locked-preview .lock-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(180deg,transparent,#11060755);font-weight:700;color:#f4dfad}.lock-icon{font-size:25px;margin-bottom:5px}.daily-streak{display:flex;justify-content:center;gap:7px;margin:16px 0}.daily-streak i{width:27px;height:27px;border:1px solid #d7b56d44;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;color:#d7b56d}.daily-streak i.on{background:#b72b32;color:#fff;border-color:#d86a6e;box-shadow:0 0 12px #b72b3255}


/* =========================
   V16 RITUAL VISUAL REMASTER
   ========================= */
:root{
  --v16-gold:#d6b36a;
  --v16-gold2:#f1d394;
  --v16-red:#8f1f25;
  --v16-wood:#5e2218;
  --v16-dark:#120607;
}

/* Intro: text fades in place; never slides off-screen. */
.cinematic-intro.opening .intro-copy{
  left:50% !important;
  top:47% !important;
  animation:v16IntroFade 2.6s ease forwards !important;
}
@keyframes v16IntroFade{
  0%,42%{opacity:1;transform:translate(-50%,-50%)}
  100%{opacity:0;transform:translate(-50%,-50%)}
}

/* Make ritual typography quieter and let the physical object dominate. */
.ritual-stage{
  padding:22px 20px 24px;
}
.ritual-stage h2{
  font-size:clamp(34px,8.5vw,48px);
  line-height:1.04;
  margin:14px auto 12px;
  max-width:580px;
}
.ritual-copy{
  max-width:520px;
  margin:0 auto 12px !important;
  font-size:16px;
  line-height:1.55;
  color:#dacdbb;
}
.ritual-symbol{
  width:74px;height:74px;
  margin:4px auto 12px;
  display:grid;place-items:center;
  border:1px solid rgba(214,179,106,.48);
  border-radius:50%;
  color:var(--v16-gold2);
  font-family:Georgia,'Times New Roman',serif;
  font-size:28px;
  background:linear-gradient(180deg,rgba(103,37,28,.48),rgba(25,8,9,.4));
  box-shadow:inset 0 0 0 6px rgba(214,179,106,.03);
}

/* ----- Incense altar ----- */
.incense-stage .ritual{padding-bottom:4px}
.altar-wrap{
  width:min(100%,440px);
  height:330px;
  margin:4px auto 4px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.incense-wrap{
  position:absolute;
  left:50%;bottom:102px;
  transform:translateX(-50%);
  height:205px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:34px;
  z-index:5;
}
.incense{
  appearance:none;
  border:0;
  width:13px;
  height:178px;
  padding:0;
  position:relative;
  border-radius:7px 7px 3px 3px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.14),transparent 35%,rgba(0,0,0,.18) 82%),
    linear-gradient(#d8b48a 0 15px,#9f3c29 15px 100%);
  opacity:.72;
  transform:translateY(6px);
  transition:transform .4s ease,opacity .4s ease;
  box-shadow:0 5px 10px rgba(0,0,0,.28);
}
.incense:after{
  content:"";
  position:absolute;left:2px;right:2px;bottom:8px;height:1px;
  background:rgba(245,211,148,.28);
}
.incense.lit{
  opacity:1;
  transform:translateY(0);
  box-shadow:0 0 0 1px rgba(255,189,116,.08),0 8px 14px rgba(0,0,0,.35);
}
.ember{
  position:absolute;
  left:50%;top:-4px;
  width:9px;height:9px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#5b2b22;
  transition:.35s;
}
.incense.lit .ember{
  background:#ff9e56;
  box-shadow:0 0 10px rgba(255,120,68,.75),0 0 22px rgba(255,94,54,.35);
}
.smoke-wisp{
  position:absolute;
  left:50%;top:-13px;
  width:2px;height:64px;
  opacity:0;
  border-radius:99px;
  background:linear-gradient(to top,rgba(224,217,201,0),rgba(224,217,201,.38),rgba(224,217,201,0));
  transform-origin:50% 100%;
  pointer-events:none;
}
.incense.lit .smoke-wisp{opacity:.7;animation:v16Smoke 3.8s ease-in-out infinite}
.incense.lit .w2{animation-delay:1.7s;left:60%;height:52px}
@keyframes v16Smoke{
  0%{transform:translate(-50%,0) scaleY(.75);opacity:0}
  18%{opacity:.55}
  65%{opacity:.32}
  100%{transform:translate(calc(-50% + 18px),-72px) scaleY(1.18);opacity:0}
}
.censer{
  position:absolute;
  bottom:36px;left:50%;
  transform:translateX(-50%);
  width:196px;height:112px;
  z-index:6;
}
.censer-rim{
  position:absolute;left:10px;right:10px;top:0;height:25px;
  border-radius:50%;
  background:linear-gradient(180deg,#d1a45b,#7e4b22 54%,#2e170e);
  border:1px solid rgba(240,206,139,.58);
  box-shadow:inset 0 4px 8px rgba(255,228,160,.16),0 8px 15px rgba(0,0,0,.34);
}
.censer-rim:after{
  content:"";position:absolute;left:18px;right:18px;top:6px;height:11px;border-radius:50%;
  background:#1d0f0b;border:1px solid rgba(224,187,112,.18);
}
.censer-body{
  position:absolute;left:28px;right:28px;top:14px;height:76px;
  display:grid;place-items:center;
  color:rgba(238,204,135,.67);
  font-family:Georgia,serif;font-size:31px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08),transparent 35%,rgba(0,0,0,.25)),
    linear-gradient(180deg,#8b4924,#4c2115 70%,#2b130f);
  clip-path:polygon(6% 0,94% 0,83% 100%,17% 100%);
  border-radius:8px 8px 30px 30px;
}
.censer-foot{
  position:absolute;left:58px;right:58px;bottom:5px;height:13px;
  border-radius:4px 4px 13px 13px;
  background:linear-gradient(180deg,#8c582c,#3a1c12);
}
.ritual-count{
  color:#f1d394;
  font-weight:700;
  letter-spacing:.16em;
  font-size:12px;
  margin-top:-2px;
}
.ritual-caption{
  margin:12px auto 0;
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  color:#a9967e;
  font-size:13px;
  letter-spacing:.02em;
}

/* ----- Fortune cylinder ----- */
.oracle-object{
  height:380px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin:-2px auto 2px;
}
.cylinder{
  width:188px;
  height:224px;
  margin:0 auto 32px;
  position:relative;
  border-radius:27px 27px 44px 44px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 3px,rgba(0,0,0,.03) 3px 8px),
    linear-gradient(90deg,#3f130e 0%,#8c3c24 26%,#a44c29 50%,#6b281b 78%,#3a120e 100%);
  border:1px solid rgba(220,176,95,.72);
  box-shadow:
    inset 10px 0 18px rgba(0,0,0,.26),
    inset -12px 0 20px rgba(0,0,0,.30),
    0 28px 48px rgba(0,0,0,.48);
  touch-action:none;
}
.cyl-rim{
  position:absolute;z-index:8;
  left:-7px;right:-7px;top:-10px;height:29px;
  border-radius:50%;
  background:linear-gradient(180deg,#e1be76 0%,#90602c 47%,#3b1c10 100%);
  border:1px solid rgba(245,218,154,.7);
  box-shadow:inset 0 4px 5px rgba(255,240,193,.18),0 7px 10px rgba(0,0,0,.32);
}
.cyl-rim:after{
  content:"";position:absolute;left:13px;right:13px;top:7px;height:11px;border-radius:50%;
  background:#28120d;border:1px solid rgba(225,185,110,.25);
}
.sticks{
  position:absolute;
  left:17px;right:17px;
  top:-137px;height:160px;
  z-index:3;
}
.stick{
  position:absolute;
  bottom:0;
  width:8px;
  height:179px;
  border-radius:4px 4px 2px 2px;
  transform-origin:50% 100%;
  background:
    linear-gradient(90deg,rgba(255,255,255,.22),transparent 35%,rgba(0,0,0,.15)),
    linear-gradient(#d9bc83,#aa8249);
  border:1px solid rgba(102,63,27,.28);
  box-shadow:0 3px 4px rgba(0,0,0,.18);
}
.stick:before{
  content:"";
  position:absolute;left:1px;right:1px;top:49px;height:2px;
  background:#8d3028;
  box-shadow:0 25px #8d3028;
}
.stick span{
  position:absolute;left:50%;top:11px;
  transform:translateX(-50%);
  color:#733026;
  font-size:8px;
  font-weight:800;
}
.cyl-band{
  position:absolute;left:-2px;right:-2px;height:10px;z-index:5;
  background:linear-gradient(180deg,#c79a52,#744820);
  border-top:1px solid rgba(247,218,156,.48);
  border-bottom:1px solid rgba(35,16,10,.65);
}
.band-top{top:43px}.band-bottom{bottom:33px}
.cyl-emblem{
  position:absolute;z-index:6;left:50%;top:89px;transform:translateX(-50%);
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  color:#e3bd75;
  font-family:Georgia,serif;font-size:27px;
  border:1px solid rgba(220,176,95,.52);
  background:rgba(68,22,15,.26);
}
.cyl-foot{
  position:absolute;left:36px;right:36px;bottom:-18px;height:21px;
  border-radius:4px 4px 18px 18px;
  background:linear-gradient(#7a4724,#2e160f);
  box-shadow:0 11px 12px rgba(0,0,0,.35);
}
.cylinder.holding{
  transform:scale(1.018);
  filter:none !important;
  box-shadow:inset 10px 0 18px rgba(0,0,0,.26),inset -12px 0 20px rgba(0,0,0,.30),0 28px 48px rgba(0,0,0,.48),0 0 0 1px rgba(226,190,116,.35);
}
.shaking{animation:v16Shake .11s linear 22}
@keyframes v16Shake{
  0%{transform:translateX(-7px) rotate(-1.5deg)}
  50%{transform:translateX(7px) rotate(1.5deg)}
  100%{transform:translateX(-5px) rotate(-1deg)}
}
.flying{animation:v16Fly 1.55s cubic-bezier(.18,.78,.2,1) forwards !important;z-index:20}
@keyframes v16Fly{
  0%{transform:translateY(0) rotate(1deg)}
  72%{transform:translateY(-190px) rotate(8deg)}
  100%{transform:translateY(-255px) rotate(11deg)}
}
.draw-btn{margin-top:3px}

/* mobile proportion tuning */
@media(max-width:700px){
  .ritual-stage{padding:18px 14px 22px;border-radius:22px}
  .ritual-stage h2{font-size:clamp(31px,8.8vw,43px)}
  .ritual-copy{font-size:15px;max-width:92%}
  .altar-wrap{height:314px}
  .incense-wrap{bottom:96px;gap:31px}
  .incense{height:167px}
  .censer{bottom:34px;transform:translateX(-50%) scale(.94)}
  .oracle-object{height:363px}
  .cylinder{transform:scale(.95);transform-origin:50% 100%}
  .cylinder.holding{transform:scale(.97)}
  .hold-hint{font-size:10px;letter-spacing:.13em}
}

/* Remove the old oversized/simple object styling conflicts. */
.incense-stage .seal,.oracle-stage .seal{display:none!important}


/* =========================
   V17 COMMERCIAL FUNNEL
   ========================= */
.v17-commerce{
  margin:34px auto 6px;
  max-width:760px;
  border-top:1px solid rgba(214,179,106,.22);
  padding-top:28px;
}
.commerce-kicker{
  color:#d6b36a;
  font-size:11px;
  letter-spacing:.22em;
  font-weight:800;
}
.v17-commerce h2{
  margin:10px 0 8px;
  font-size:30px;
}
.commerce-sub{
  color:#bba991;
  margin:0 0 18px;
}
.featured-offer{
  width:100%;
  text-align:left;
  border:1px solid rgba(223,185,105,.52);
  border-radius:20px;
  padding:20px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px 18px;
  background:
    linear-gradient(135deg,rgba(121,38,29,.34),rgba(24,8,9,.88)),
    rgba(20,7,8,.88);
  color:#f7ead5;
  box-shadow:0 18px 38px rgba(0,0,0,.24);
}
.featured-offer h3{margin:5px 0 6px;font-size:24px}
.featured-offer p{margin:0;color:#cdbda6;line-height:1.45}
.featured-offer strong{align-self:center;font-size:24px;color:#f1d394}
.featured-badge{
  grid-column:1/-1;
  width:max-content;
  color:#e8c987;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
}
.commerce-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.commerce-card{
  text-align:left;
  border:1px solid rgba(214,179,106,.2);
  border-radius:17px;
  padding:16px;
  min-height:172px;
  background:linear-gradient(180deg,rgba(80,28,22,.22),rgba(18,7,8,.72));
  color:#f3e6d3;
}
.commerce-card h3{font-size:18px;margin:14px 0 7px}
.commerce-card p{font-size:13px;line-height:1.5;color:#baa991;margin:0}
.commerce-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.commerce-top span{font-size:9px;letter-spacing:.12em;color:#c6aa75;font-weight:800}
.commerce-top b{color:#f0cf8d}
.commerce-cta{margin-top:15px;color:#dcb96f;font-size:11px;font-weight:800;letter-spacing:.08em}

.premium-preview,.report-page{
  max-width:760px;
  margin:0 auto;
  padding:34px 18px 38px;
  text-align:center;
}
.preview-seal{
  width:82px;height:82px;border-radius:50%;
  margin:16px auto;
  display:grid;place-items:center;
  border:1px solid rgba(222,183,103,.55);
  color:#edcd89;font:34px Georgia,serif;
  background:linear-gradient(180deg,rgba(113,39,30,.42),rgba(20,7,8,.6));
}
.premium-preview h1,.report-page h1{font-size:clamp(34px,8vw,54px);line-height:1.05;margin:10px 0}
.preview-panel{
  margin:24px auto 18px;
  border:1px solid rgba(214,179,106,.2);
  border-radius:18px;
  overflow:hidden;
  background:rgba(18,6,7,.62);
}
.preview-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 18px;border-bottom:1px solid rgba(214,179,106,.12);
  text-align:left;color:#d9c9b2;
}
.preview-row:last-child{border-bottom:0}
.preview-row.visible{color:#f2dfbe;background:rgba(129,44,32,.14)}
.preview-row.locked span{filter:blur(2.8px);opacity:.55}
.preview-row b{font-size:11px;color:#d8b46d}
.oracle-question,.mini-form input,.mini-form select{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(214,179,106,.28);
  background:rgba(15,5,6,.72);
  color:#f3e6d3;
  border-radius:13px;
  padding:14px;
  font:inherit;
}
.oracle-question{min-height:120px;resize:vertical;margin:0 0 14px}
.mini-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.premium-buy{width:100%;margin-top:8px}
.legal-note{font-size:11px;line-height:1.5;color:#8f806e;max-width:560px;margin:20px auto 0}

.report-head p{color:#bba991}
.report-stack{display:grid;gap:12px;margin:24px 0;text-align:left}
.report-card{
  display:grid;grid-template-columns:44px 1fr;gap:14px;
  border:1px solid rgba(214,179,106,.2);
  border-radius:16px;padding:17px;
  background:linear-gradient(180deg,rgba(72,24,19,.22),rgba(17,6,7,.72));
}
.report-card>span{color:#cda85e;font:700 12px/1.3 Georgia,serif;padding-top:3px}
.report-card h3{margin:0 0 6px;color:#efdbb6;font-size:18px}
.report-card p{margin:0;color:#bba991;line-height:1.55;font-size:14px}
.report-actions{margin-top:18px}

@media(max-width:680px){
  .commerce-grid{grid-template-columns:1fr}
  .featured-offer{grid-template-columns:1fr auto}
  .v17-commerce h2{font-size:26px}
  .commerce-card{min-height:0}
  .mini-form{grid-template-columns:1fr}
  .premium-preview,.report-page{padding-left:14px;padding-right:14px}
}

/* =========================
   V18 CONVERSION POLISH
   ========================= */
.v18-commerce{
  margin:34px auto 0;
  max-width:760px;
  border-top:1px solid rgba(214,179,106,.20);
  padding-top:30px;
}
.v18-commerce h2{
  margin:10px 0 9px;
  font-size:clamp(28px,6.5vw,40px);
  line-height:1.08;
  letter-spacing:-.02em;
}
.v18-featured{
  margin-top:18px;
  grid-template-columns:1fr auto;
  align-items:center;
}
.v18-featured .featured-action{
  grid-column:1/-1;
  margin-top:6px;
  color:#e1bd70;
  font-size:11px;
  letter-spacing:.11em;
  font-weight:800;
}
.other-readings-toggle{
  margin-top:14px;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:15px 2px;
  border:0;
  border-top:1px solid rgba(214,179,106,.14);
  border-bottom:1px solid rgba(214,179,106,.14);
  background:transparent;
  color:#d8c6ac;
  font:600 13px/1.3 inherit;
  letter-spacing:.04em;
  text-align:left;
}
.other-readings-toggle b{
  color:#d7b36b;
  font-size:20px;
  font-weight:400;
}
.v18-other-readings{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.v18-mini-card{
  width:100%;
  text-align:left;
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  border:1px solid rgba(214,179,106,.17);
  border-radius:15px;
  padding:15px 16px;
  background:linear-gradient(180deg,rgba(70,23,19,.19),rgba(16,6,7,.66));
  color:#f2e2ca;
}
.v18-mini-card small{
  color:#bfa16b;
  font-size:9px;
  letter-spacing:.12em;
  font-weight:800;
}
.v18-mini-card h3{
  margin:6px 0 4px;
  font-size:17px;
}
.v18-mini-card p{
  margin:0;
  color:#ad9e8a;
  font-size:12.5px;
  line-height:1.45;
}
.v18-mini-card strong{
  color:#edcc86;
  font-size:20px;
}
@media(max-width:680px){
  .v18-commerce{padding-top:26px}
  .v18-featured{grid-template-columns:1fr auto}
  .v18-mini-card{grid-template-columns:1fr auto}
}

.v18-other-readings[hidden]{display:none !important;}
.v18-other-readings:not([hidden]){display:grid;}

/* V19 DIGITAL PRODUCT SUITE */
.product-intake{display:grid;gap:12px;margin:18px 0 16px;text-align:left}
.product-intake label{display:grid;gap:7px;font-size:12px;color:#c4b49e}
.product-intake input,.product-intake select,.product-intake textarea{
width:100%;box-sizing:border-box;border:1px solid rgba(214,179,106,.26);
background:rgba(13,5,6,.76);color:#f3e6d3;border-radius:13px;padding:13px 14px;font:inherit;outline:none}
.product-intake textarea{min-height:110px;resize:vertical}
.report-value-box{margin:18px 0;padding:16px;border:1px solid rgba(214,179,106,.22);
border-radius:15px;background:rgba(69,23,19,.14);text-align:left}
.report-value-box h3{margin:0 0 10px;font-size:17px}
.report-value-box ul{margin:0;padding-left:18px;color:#bba991;font-size:13px;line-height:1.6}
.report-badge{display:inline-flex;margin:8px 0 2px;padding:7px 10px;border-radius:999px;
background:rgba(217,177,100,.1);border:1px solid rgba(217,177,100,.2);
color:#ddb96f;font-size:10px;letter-spacing:.1em;font-weight:800}
.preview-summary{text-align:left;margin:18px 0 8px;padding:15px 16px;border-left:2px solid rgba(218,181,105,.55);
background:rgba(86,28,22,.14);color:#cbbba3;line-height:1.55;font-size:13px}
.delivery-note{margin:10px 0 16px;font-size:12px;color:#9e8f7e}
.report-card .micro{margin-top:7px;font-size:11px;color:#8f806e}
.report-final-note{margin:18px 0 0;padding:14px 16px;border-radius:14px;border:1px solid rgba(214,179,106,.15);
background:rgba(14,5,6,.55);color:#a99680;font-size:12px;line-height:1.55;text-align:left}

/* =========================
   V19.1 TEMPLE SIGN POLISH
   ========================= */
.temple-plaque{
  top:18.5%;
  left:50%;
  transform:translateX(-50%);
  min-width:184px;
  padding:9px 18px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-align:center;
  border:2px solid rgba(222,183,96,.8);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(105,27,22,.96),rgba(56,12,12,.96));
  box-shadow:
    0 8px 18px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,222,147,.12),
    inset 0 0 18px rgba(0,0,0,.3);
}
.temple-plaque:before,
.temple-plaque:after{
  content:"";
  position:absolute;
  top:6px;
  width:8px;
  height:8px;
  border-top:1px solid rgba(231,196,112,.8);
  border-bottom:1px solid rgba(231,196,112,.8);
}
.temple-plaque:before{left:7px;border-left:1px solid rgba(231,196,112,.8)}
.temple-plaque:after{right:7px;border-right:1px solid rgba(231,196,112,.8)}
.plaque-cn{
  display:block;
  width:100%;
  color:#f0cf82;
  font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;
  font-size:16px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:.16em;
  text-indent:.16em;
  white-space:nowrap;
}
.plaque-en{
  display:block;
  width:100%;
  margin-top:2px;
  color:#d9b76b;
  font-family:Georgia,"Times New Roman",serif;
  font-size:7px;
  line-height:1;
  letter-spacing:.24em;
  text-indent:.24em;
  white-space:nowrap;
}
@media(max-width:520px){
  .temple-plaque{
    top:20.5%;
    min-width:164px;
    padding:8px 14px 7px;
  }
  .plaque-cn{font-size:14px}
  .plaque-en{font-size:6.5px}
}

/* Prevent brand/header text from visually overlapping scrolled content */
.topbar{
  background:linear-gradient(180deg,rgba(9,3,4,.98) 0%,rgba(9,3,4,.94) 72%,rgba(9,3,4,.72) 100%);
  backdrop-filter:none;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}

/* =========================
   V19.2 MOBILE INTRO POLISH
   ========================= */

/* Lantern characters: visible on real mobile browser, centered inside lanterns. */
.intro-lantern{
  display:flex;
  align-items:center;
  justify-content:center;
}
.intro-lantern span{
  position:relative;
  z-index:2;
  display:block;
  color:#f2c65f;
  font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;
  font-size:31px;
  font-weight:700;
  line-height:1;
  text-shadow:
    0 1px 0 rgba(70,18,10,.8),
    0 0 8px rgba(255,209,100,.22);
  transform:translateY(1px);
  pointer-events:none;
}

/* The bilingual plaque behaves as ONE object during the entrance animation.
   Chinese and English now fade together instead of separating visually. */
.cinematic-intro.opening .temple-plaque{
  animation:v192PlaqueFade 2.6s ease forwards !important;
}
@keyframes v192PlaqueFade{
  0%,34%{opacity:1}
  72%{opacity:.42}
  100%{opacity:0}
}

/* Synchronize the hero copy with the plaque; no abrupt or mismatched disappearance. */
.cinematic-intro.opening .intro-copy{
  animation:v192HeroFade 2.6s ease forwards !important;
}
@keyframes v192HeroFade{
  0%,34%{opacity:1;transform:translate(-50%,-50%)}
  72%{opacity:.42;transform:translate(-50%,-50%)}
  100%{opacity:0;transform:translate(-50%,-50%)}
}

/* Better real-iPhone spacing: keep plaque and large title from colliding. */
@media(max-width:520px){
  .intro-copy{
    top:40.5% !important;
    width:88vw;
  }
  .intro-title{
    font-size:clamp(32px,8.7vw,48px);
    line-height:1.02;
    margin-bottom:14px;
  }
  .intro-sub{
    margin-bottom:20px;
  }
  .temple-plaque{
    top:24.5%;
    min-width:170px;
    padding:8px 14px 7px;
  }
  .intro-lantern{
    top:10.5%;
    width:60px;
    height:86px;
  }
  .intro-lantern span{
    font-size:29px;
  }
}

/* On shorter mobile viewports, reduce crowding further. */
@media(max-width:520px) and (max-height:760px){
  .intro-copy{top:39% !important}
  .intro-title{font-size:clamp(30px,8.2vw,43px)}
  .intro-sub{font-size:14px;margin-bottom:16px}
  .intro-btn{padding:15px 20px;min-width:230px}
  .temple-plaque{top:25.5%}
}

/* ===== V19.3 FINAL INTRO COMPOSITION =====
   Clean mobile hierarchy: lanterns -> hero -> CTA -> gate plaque -> doors.
   The plaque belongs to the gate and never fades with the hero copy. */
@media(max-width:520px){
  .cinematic-intro{overflow:hidden}
  .intro-lantern{top:9.5% !important;width:58px;height:82px}
  .intro-lantern span{font-size:28px}

  .intro-copy{
    top:35.5% !important;
    width:88vw !important;
    max-width:390px;
    z-index:12;
  }
  .intro-kicker{
    font-size:10px;
    letter-spacing:.31em;
    margin-bottom:13px;
  }
  .intro-title{
    font-size:clamp(31px,8.2vw,40px) !important;
    line-height:1.03 !important;
    letter-spacing:-.015em;
    margin:0 0 14px !important;
  }
  .intro-sub{
    font-size:14px;
    line-height:1.45;
    margin:0 auto 18px !important;
    max-width:330px;
  }
  .intro-btn{
    display:block;
    width:min(82vw,340px);
    min-width:0 !important;
    margin:0 auto;
    padding:16px 16px !important;
    font-size:15px;
  }
  .intro-note{margin-top:10px;font-size:9px}

  .intro-temple{
    width:100vw !important;
    height:47vh !important;
    bottom:1.5vh !important;
    z-index:2;
  }
  .temple-plaque{
    top:18% !important;
    min-width:158px !important;
    padding:7px 13px 6px !important;
    z-index:8;
  }
  .plaque-cn{font-size:14px !important;line-height:1.15}
  .plaque-en{font-size:7px !important;margin-top:3px}
  .intro-door{bottom:8%;height:63%}
  .stone-steps{bottom:-2%}
}

/* Short phones: preserve separation rather than shrinking everything into the gate. */
@media(max-width:520px) and (max-height:760px){
  .intro-lantern{top:8.5% !important;width:52px;height:74px}
  .intro-lantern span{font-size:25px}
  .intro-copy{top:34% !important}
  .intro-title{font-size:clamp(28px,7.7vw,36px) !important}
  .intro-sub{font-size:13px;margin-bottom:14px !important}
  .intro-btn{padding:14px 14px !important}
  .intro-temple{height:45vh !important;bottom:0 !important}
  .temple-plaque{top:17% !important}
}

/* One calm exit: hero copy fades as a single unit; no vertical flying text. */
.cinematic-intro.opening .intro-copy{
  animation:v193HeroExit 1.35s ease forwards !important;
}
@keyframes v193HeroExit{
  0%,18%{opacity:1;transform:translate(-50%,-50%)}
  100%{opacity:0;transform:translate(-50%,-50%)}
}

/* Lanterns gently dim during entry. */
.cinematic-intro.opening .intro-lantern{
  animation:v193LanternDim 1.55s ease forwards !important;
}
@keyframes v193LanternDim{0%{opacity:1}100%{opacity:.32}}

/* Plaque is architectural: keep CN + EN together on the moving gate. */
.cinematic-intro.opening .temple-plaque{
  animation:none !important;
  opacity:1 !important;
}

/* ===== V19.4 CUSTOMER INTAKE / DELIVERY ===== */
.personal-details{max-width:720px;margin:0 auto}.temple-form-card{position:relative;overflow:hidden}.temple-form-card:before{content:"福";position:absolute;right:-18px;top:18px;font-family:serif;font-size:128px;color:rgba(215,181,109,.045);pointer-events:none}.form-label{margin:4px 0 9px;font-size:11px;letter-spacing:.18em;color:#d7b56d;font-weight:700}.birth-selects{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:9px;margin-bottom:18px}.select-input{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#d7b56d 50%),linear-gradient(135deg,#d7b56d 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}.privacy-consent{display:flex;gap:11px;align-items:flex-start;margin:16px 0;color:#cfc2b4;font-size:13px;line-height:1.45}.privacy-consent input{width:18px;height:18px;accent-color:#b68b45;flex:0 0 auto;margin-top:1px}.privacy-note{font-size:11px;line-height:1.5;color:#8f8276;margin:14px 0 0}.form-error{min-height:20px;color:#e3a5a1;font-size:13px;margin:0 0 8px}.temple-form-card .btn.ghost{margin-top:9px}@media(max-width:520px){.birth-selects{grid-template-columns:1.25fr .92fr .92fr;gap:7px}.birth-selects .input{padding-left:10px;padding-right:24px;font-size:14px}}

/* ===== V20 COMMERCIAL CLOSED LOOP ===== */
.checkout-screen,.delivery-success{max-width:720px;margin:0 auto;text-align:center}.checkout-card{text-align:left}.delivery-seal{width:72px;height:72px;margin:10px auto 18px;border:1px solid #a77a3e;border-radius:50%;display:grid;place-items:center;font-family:serif;font-size:38px;color:#d7b56d;box-shadow:0 0 38px rgba(215,181,109,.12)}.delivery-card{text-align:center;margin:20px 0}.delivery-check{width:52px;height:52px;margin:0 auto 12px;border:1px solid #8ca77a;border-radius:50%;display:grid;place-items:center;color:#b6d49e;font-size:27px}.order-ref{margin-top:16px;color:#8f8276;font-size:10px;letter-spacing:.16em}.v20-fortune-summary{margin:20px 0 24px;text-align:center}.delivery-success .btn{max-width:520px;margin-left:auto;margin-right:auto}