/* Three original cinematic environments. Interaction, not a timer, advances the story. */
.jr-dialog{--jr-light:#ead1a3;--jr-glow:#c79b5d;--hold:0;--lit:0;position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;padding:0;margin:0;border:0;background:#040a11;color:#fbefda;font-family:var(--f-body,sans-serif);overflow:auto;overscroll-behavior:contain;z-index:2147482000;color-scheme:dark}
.jr-dialog::backdrop{background:#03070e}
.jr-dialog[data-ritual=lenormand],.jr-dialog[data-ritual=meihua]{--jr-light:#d1e7cd;--jr-glow:#80b599}
.jr-dialog[data-ritual=compat]{--jr-light:#f1ccdf;--jr-glow:#cb8aa9}
.jr-dialog[data-ritual=ziwei]{--jr-light:#e0d3ff;--jr-glow:#a396e3}
.jr-dialog *{box-sizing:border-box}.jr-dialog button{font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}.jr-dialog button:disabled{cursor:default}.jr-dialog button:focus-visible,.jr-dialog summary:focus-visible{outline:2px solid var(--jr-light);outline-offset:5px}.jr-dialog [hidden]{display:none!important}
.jr-shell{position:relative;isolation:isolate;min-height:100dvh;display:grid;grid-template-rows:auto auto minmax(170px,1fr) auto;overflow:hidden;padding:max(12px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom))}
.jr-world{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:#07131d}
.jr-world-image{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:center 44%;transform:scale(1);filter:brightness(.8) saturate(.9);transition:transform 5s cubic-bezier(.2,.7,.25,1),filter 3s;animation:jr-arrive 3s ease-out backwards}
.jr-dialog[data-phase="1"] .jr-world-image{transform:scale(1.13) translateY(-1.4%);filter:brightness(.94) saturate(1.02)}
.jr-dialog[data-phase="2"] .jr-world-image,.jr-dialog[data-phase="3"] .jr-world-image{transform:scale(1.24) translateY(-2.3%);filter:brightness(1.04) saturate(1.08)}
.jr-vignette{position:absolute;inset:0;background:linear-gradient(180deg,#0309117d,transparent 24%,transparent 45%,#0309108a 68%,#030a12 100%),linear-gradient(90deg,#01060b66,transparent 30%,transparent 70%,#01060b66)}
.jr-light{position:absolute;inset:-30%;opacity:0;background:radial-gradient(ellipse at 50% 48%,#f5dfa33d,transparent 44%);mix-blend-mode:screen;transition:opacity 1.7s}
.jr-dialog.is-holding .jr-light{opacity:calc(.2 + var(--hold)*.8)}
.jr-dialog[data-phase="2"] .jr-light,.jr-dialog[data-phase="3"] .jr-light{opacity:1}
.jr-mist{position:absolute;bottom:3%;left:-30%;width:160%;height:65%;object-fit:cover;opacity:.14;mix-blend-mode:screen;animation:jr-mist-flow 22s ease-in-out infinite alternate;filter:blur(3px);transform-origin:50% 100%}
.jr-dust{position:absolute;inset:-60px;opacity:.65;background-image:radial-gradient(1px 1px at 17% 24%,#fff9 90%,transparent),radial-gradient(2px 2px at 72% 58%,#efd29ba1 80%,transparent),radial-gradient(1px 1px at 43% 81%,#fff7 90%,transparent);background-size:229px 307px,389px 479px,317px 251px;animation:jr-dust-rise 26s linear infinite;mask-image:linear-gradient(transparent,#000 15%,#000 65%,transparent)}
.jr-flash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,#fff5d9,transparent 65%);opacity:0;mix-blend-mode:screen}
.jr-dialog[data-phase="2"] .jr-flash{animation:jr-illuminate 1.9s ease-out both}
.jr-header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;width:min(100%,1120px);margin:0 auto;padding:0 0 16px;gap:10px}
.jr-header>span{font:500 1rem/1.5 var(--f-display,serif);letter-spacing:3px;text-align:center;text-shadow:0 2px 10px #000}.jr-header>span small{display:block;font:500 .55rem/1.4 var(--f-body,sans-serif);letter-spacing:4px;color:#c7c7c6;margin-top:3px}
.jr-header button{border:1px solid #efe4c52e;border-radius:30px;background:#08131b85;color:#f5ead7;backdrop-filter:blur(14px);padding:10px 15px;font-size:.8rem;min-height:44px;box-shadow:inset 0 1px 0 #ffffff0d}
.jr-sound[aria-pressed=true]{border-color:var(--jr-light);background:#3a3d385c}
.jr-place{position:relative;text-align:center;align-self:start;padding:clamp(12px,4vh,38px) 0 0;pointer-events:none;transition:opacity 1s,transform 1s;text-shadow:0 2px 18px #000}
.jr-place>span{font-size:.63rem;font-weight:500;letter-spacing:3px;color:#f0ddbddb}.jr-place>p{font:400 clamp(1rem,2vw,1.3rem)/1.6 var(--f-display,serif);letter-spacing:8px;margin:10px 0 0;color:#f3e4c6}
.jr-dialog:not([data-phase="0"]) .jr-place{opacity:.6;transform:translateY(-6px)}
.jr-playfield{position:relative;display:flex;align-items:center;justify-content:center;width:min(100%,620px);min-height:170px;margin:0 auto;perspective:1100px;transition:opacity .8s,transform 1.5s;transform:translateY(15px);opacity:0;visibility:hidden}
.jr-dialog:not([data-phase="0"]) .jr-playfield{opacity:1;transform:none;visibility:visible}
.jr-dialog[data-phase="0"] .jr-playfield{min-height:230px}
.jr-dialogue{position:relative;width:min(100%,570px);margin:0 auto;padding:24px 24px 0;background:linear-gradient(180deg,#06111a66,#06111adc 34%,#06111af2);border:1px solid #e3d3b72e;border-bottom:0;border-radius:3px;box-shadow:0 -10px 50px #040b1280;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:jr-dialogue-enter 1.3s .15s both}
.jr-dialogue::before{content:'';position:absolute;left:30%;right:30%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--jr-light),transparent);box-shadow:0 0 15px #f1d19d44}
.jr-eyebrow{display:flex;align-items:center;gap:6px;letter-spacing:2px;color:var(--jr-light);font-size:.7rem;line-height:1.7;margin:0 0 12px}
.jr-text h2{font:400 clamp(1.45rem,3vw,1.85rem)/1.55 var(--f-display,serif);color:#fff0d8;letter-spacing:1.4px;margin:0 0 12px;text-wrap:balance}
.jr-text p{font-size:.93rem;line-height:1.85;color:#c6d0d8;margin:0;min-height:1em}
.jr-question{border-left:1px solid #c8d5db55;padding:0 0 0 13px;margin:14px 0;color:#c7d1d8;font-size:.8rem;line-height:1.7}
.jr-question summary{cursor:pointer;color:var(--jr-light)}.jr-question p{margin:8px 0 0;max-height:85px;overflow:auto;overflow-wrap:anywhere}
.jr-hint{font-size:.75rem;color:#d1c7b4;line-height:1.75;min-height:1em;margin:12px 0}
.jr-next{display:block;width:100%;min-height:54px;border:1px solid #f9e5bc;border-radius:3px;background:linear-gradient(110deg,#faedce,#d2b27e);box-shadow:inset 0 1px 1px #fff9,0 4px 0 #604b34,0 12px 32px #02070de6;color:#182022;font-size:1rem;letter-spacing:1px;line-height:1.5;padding:14px 18px;transition:filter .25s,transform .25s,box-shadow .25s}
.jr-next:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px);box-shadow:inset 0 1px 1px #fff9,0 6px 0 #604b34,0 16px 36px #02070d}
.jr-next:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 1px #fff9,0 1px 0 #604b34}.jr-next:disabled{background:#1926328f;border-color:#b9c4c333;color:#aebcbf;box-shadow:none;letter-spacing:2px}
.jr-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0 15px}
.jr-footer ol{display:flex;align-items:center;gap:10px;margin:0;padding:0;list-style:none;font-size:.65rem;letter-spacing:1px;color:#758493}.jr-footer li{display:flex;align-items:center;gap:7px}.jr-footer li::before{content:'';width:4px;height:4px;border-radius:50%;background:#8290a159}.jr-footer li.is-current{color:var(--jr-light)}.jr-footer li.is-current::before{background:var(--jr-light);box-shadow:0 0 8px var(--jr-glow)}.jr-footer li.is-done{color:#b5c4cb}
.jr-skip{border:0;background:transparent;color:#bec9cf;font-size:.73rem;min-height:44px;padding:6px 0 6px 12px}
/* Touchable objects use the commissioned image atlas; the surrounding light is just light. */
.jr-touch{position:relative;width:270px;height:240px;border:0;background:transparent;color:var(--jr-light);perspective:1000px;touch-action:none;user-select:none;-webkit-user-select:none}
.jr-dialog .jr-art.at-art{position:absolute;width:205px;left:calc(50% - 102.5px);top:-8px;background-image:url('../assets/ui/celestial-atlas.webp');background-size:400% 200%;background-repeat:no-repeat;aspect-ratio:1;filter:drop-shadow(0 24px 22px #000b);animation:jr-art-float 6s ease-in-out infinite;transition:filter 1.4s,transform 2s}
.jr-art[data-art=bazi]{background-position:100% 0}.jr-art[data-art=compat]{background-position:0 100%}.jr-art[data-art=ziwei]{background-position:33.333333% 100%}.jr-art[data-art=meihua]{background-position:66.666667% 100%}.jr-art[data-art=oracle]{background-position:100% 100%}.jr-art[data-art=lenormand]{background-position:66.666667% 0}
.jr-touch-label{position:absolute;bottom:15px;left:0;right:0;font-size:.7rem;letter-spacing:3px;text-shadow:0 2px 15px #000;transition:opacity .5s}.jr-touch-track{position:absolute;bottom:0;left:26%;right:26%;height:2px;background:#d5dac336}.jr-touch-track i{display:block;width:100%;height:100%;background:var(--jr-light);box-shadow:0 0 14px var(--jr-light);transform:scaleX(var(--hold));transform-origin:left}
.jr-dialog.is-holding .jr-art{filter:drop-shadow(0 0 35px var(--jr-glow)) brightness(calc(1 + var(--hold)*.4))}.jr-dialog[data-phase="2"] .jr-art{animation:jr-art-awaken 1.9s ease both}.jr-dialog[data-phase="3"] .jr-art{filter:drop-shadow(0 0 25px var(--jr-glow))}.jr-dialog[data-phase="2"] .jr-touch-label,.jr-dialog[data-phase="3"] .jr-touch-label{opacity:0}
/* The deck gathers under pressure, splits, and unfolds into a fan in physical space. */
.jr-fan{position:absolute;inset:0;transform-style:preserve-3d}
.jr-card{position:absolute;left:calc(50% - 47px);top:16px;width:94px;height:146px;border:1px solid #f2d29bbd;border-radius:7px;background:#111f31;box-shadow:1px 1px 0 #dbbd84,3px 4px 0 #19222b,5px 6px 0 #c7a67488,0 15px 20px #000b;transform-origin:50% 120%;transform:translateX(calc(var(--offset)*18px)) rotate(calc(var(--offset)*10deg)) rotateY(-10deg);transition:transform .9s cubic-bezier(.2,.7,.2,1);overflow:hidden}
.jr-card img{display:block;width:100%;height:100%;object-fit:cover}.jr-card::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#ffe8b84f 49%,transparent 62%);transform:translateX(-170%);animation:jr-card-shine 8s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
.jr-dialog.is-holding .jr-card{transform:translateX(calc(var(--offset)*2px)) translateY(calc(var(--i)*-1.5px)) rotate(calc(var(--offset)*1.7deg)) rotateY(32deg) rotateX(8deg)}
.jr-dialog[data-phase="2"] .jr-card{animation:jr-shuffle-flight 1.9s cubic-bezier(.2,.65,.25,1) both;animation-delay:calc(var(--i)*25ms)}
.jr-dialog[data-phase="3"] .jr-card{transform:translateX(calc(var(--offset)*22px)) rotate(calc(var(--offset)*11deg)) rotateY(0deg)}
/* Actual cards. Card faces do not exist in the DOM until the user reveals them. */
.jr-reveal-row{display:flex;gap:clamp(12px,3vw,24px);justify-content:center;width:100%;perspective:1200px;padding:22px 0}
.jr-reveal{display:block;position:relative;flex:1;max-width:130px;min-width:0;border:0;background:transparent;padding:0;color:#e5d6b7;transform:translateY(0);transition:transform 1s;perspective:800px}
.jr-reveal:nth-child(1){transform:rotate(-6deg) translateY(8px)}.jr-reveal:nth-child(3){transform:rotate(6deg) translateY(8px)}
.jr-reveal:hover:not(:disabled){transform:translateY(-9px)}.jr-reveal[aria-pressed=true]{transform:rotate(0deg) translateY(-6px)}
.jr-flip{position:relative;display:block;width:100%;aspect-ratio:2/3;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.3,.7,.2,1);box-shadow:0 20px 25px #0009;border-radius:7px}
.jr-back,.jr-front{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;border:1px solid #dabf84;border-radius:7px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#071620}
.jr-back{transform:rotateY(0deg)}.jr-front{transform:rotateY(180deg);font-size:1rem;padding:0}.jr-back img,.jr-front img{width:100%;height:100%;object-fit:cover;display:block}.jr-front img.is-reversed{transform:rotate(180deg)}
.jr-reveal[aria-pressed=true] .jr-flip{transform:rotateY(180deg)}
.jr-card-label{display:block;font-size:.7rem;line-height:1.7;margin:12px -5px 0;text-shadow:0 2px 8px #000;letter-spacing:1px}
/* Four chronological seals / two individual coordinates. */
.jr-seals{display:flex;gap:clamp(10px,3vw,24px);align-items:center;justify-content:center;width:100%;padding:28px 0;perspective:1000px}
.jr-seal{position:relative;display:flex;flex:1;max-width:95px;min-height:146px;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:20px 10px;border:1px solid #e6d6b86b;border-radius:50px 50px 5px 5px;background:linear-gradient(120deg,#26454cbd,#071822dd 65%);color:#d8dbcd;box-shadow:inset 2px 1px 0 #e8d3ad40,inset -2px -2px 0 #010711,3px 8px 0 #09131c,0 20px 26px #0007;transform:rotateY(-12deg) translateY(10px);transition:all .85s cubic-bezier(.2,.65,.2,1)}
.jr-seal span{font:400 1.7rem/1.3 var(--f-display,serif);letter-spacing:2px}.jr-seal small{font-size:.6rem;letter-spacing:2px;color:#b2c7c8}.jr-seal[aria-pressed=true]{background:linear-gradient(135deg,#e8ca89da,#374d4cd9 65%);color:#fff1d0;transform:rotateY(0deg) translateY(-10px);border-color:#f0d6a9;box-shadow:inset 2px 1px 0 #ffe5b3a6,inset -2px -2px 0 #375556,0 0 35px #d5c28366,0 20px 25px #0008}.jr-seal[aria-pressed=true] small{color:#f0dfb9}
.jr-dialog[data-ritual=compat] .jr-seals{gap:42px}.jr-dialog[data-ritual=compat] .jr-seal{max-width:140px;min-height:160px;border-radius:70px 70px 8px 8px;background:linear-gradient(125deg,#503748c9,#0b1925eb)}.jr-dialog[data-ritual=compat] .jr-seal:nth-child(2){transform:rotateY(12deg) translateY(10px)}.jr-dialog[data-ritual=compat] .jr-seal[aria-pressed=true]{background:linear-gradient(125deg,#cd91a7c9,#3c3f59e8);transform:rotateY(0deg) translateY(-10px);box-shadow:0 0 50px #b6809455,0 20px 30px #0008}
.jr-stars{position:absolute;left:50%;top:43%;width:1px;height:1px;pointer-events:none}.jr-stars span{position:absolute;width:42px;text-align:center;left:-21px;top:-10px;font-size:.65rem;color:#a396c9;opacity:.35;transform:rotate(var(--angle)) translateY(-130px) rotate(calc(-1*var(--angle)));transition:color .6s,opacity .6s,text-shadow .6s;transition-delay:calc(var(--i)*100ms)}
.jr-dialog[data-phase="2"] .jr-stars span,.jr-dialog[data-phase="3"] .jr-stars span{color:#f1e1ff;opacity:1;text-shadow:0 0 16px #e7cbff}
.jr-dialog.is-paused *,.jr-dialog.is-paused *::after{animation-play-state:paused!important}
@keyframes jr-arrive{from{filter:brightness(.1) saturate(.5);transform:scale(1.045)}to{filter:brightness(.8) saturate(.9);transform:scale(1)}}
@keyframes jr-dialogue-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes jr-mist-flow{from{transform:translate(-4%,8%) scale(1.05)}to{transform:translate(7%,-4%) scale(1.15)}}
@keyframes jr-dust-rise{to{transform:translateY(-60px)}}
@keyframes jr-illuminate{0%{opacity:0}35%{opacity:.72}100%{opacity:0}}
@keyframes jr-art-float{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -10px;rotate:3deg}}
@keyframes jr-art-awaken{0%{transform:scale(1) rotateY(0deg)}45%{transform:scale(1.2) rotateY(20deg);filter:drop-shadow(0 0 45px var(--jr-glow)) brightness(1.6)}100%{transform:scale(1) rotateY(0deg)}}
@keyframes jr-card-shine{0%,60%{transform:translateX(-170%)}90%,100%{transform:translateX(170%)}}
@keyframes jr-shuffle-flight{0%{transform:translateX(calc(var(--offset)*2px)) translateY(calc(var(--i)*-1.5px)) rotateY(32deg)}30%{transform:translateX(calc(var(--offset)*27px)) translateY(calc(var(--i)*-4px)) rotate(calc(var(--offset)*-6deg)) rotateY(28deg)}58%{transform:translateX(calc(var(--offset)*2px)) translateY(calc(var(--i)*-1px)) rotateY(-18deg)}100%{transform:translateX(calc(var(--offset)*22px)) rotate(calc(var(--offset)*11deg)) rotateY(0deg)}}
/* The real Tarot table continues the same environment after the entrance. */
.jy-atelier:has(#step-2.active){background-image:linear-gradient(#050c16c9,#050c16e8),url('../assets/ui/ritual-moon-sanctum.webp')!important;background-size:cover!important;background-position:center 35%!important;background-attachment:fixed!important}
.jy-atelier #step-2>.at-tarot-workspace{background:linear-gradient(155deg,#162534b8,#08121be0)!important;border-color:#d8bb7f42!important;backdrop-filter:blur(16px)}
.jy-atelier #step-2 #t-deck{background:linear-gradient(#06132222,#060e1999),url('../assets/ui/ritual-moon-sanctum.webp') center 67%/cover!important;box-shadow:inset 0 0 40px #0009,0 12px 36px #0006!important}
@media(min-width:800px){.jr-shell{max-width:940px;margin:auto;box-shadow:0 0 150px #000;grid-template-rows:auto auto minmax(220px,1fr) auto}.jr-dialog{background:#030811}.jr-world-image{object-position:center 42%}.jr-dialogue{padding:28px 32px 0}.jr-playfield{min-height:235px}.jr-place{padding-top:15px}.jr-dialog[data-phase="0"] .jr-playfield{min-height:280px}.jr-touch{width:340px;height:280px}.jr-dialog .jr-art.at-art{width:235px;left:calc(50% - 117.5px)}.jr-card{width:112px;height:174px;left:calc(50% - 56px);top:20px}.jr-touch-label{bottom:22px}.jr-stars span{transform:rotate(var(--angle)) translateY(-151px) rotate(calc(-1*var(--angle)))}}
@media(max-width:400px){.jr-shell{padding-left:15px;padding-right:15px}.jr-header button{font-size:.73rem;padding:9px 12px}.jr-place>span{font-size:.57rem;letter-spacing:2px}.jr-dialogue{padding:20px 18px 0}.jr-text h2{font-size:1.4rem}.jr-text p{font-size:.875rem}.jr-playfield{min-height:200px}.jr-touch{height:215px}.jr-dialog .jr-art.at-art{width:175px;left:calc(50% - 87.5px)}.jr-card{width:82px;height:128px;left:calc(50% - 41px)}.jr-reveal-row{gap:14px}.jr-seal{min-height:125px}.jr-seal span{font-size:1.4rem}.jr-stars span{transform:rotate(var(--angle)) translateY(-113px) rotate(calc(-1*var(--angle)))}.jr-footer{gap:5px}.jr-footer ol{gap:7px}}
@media(max-height:760px){.jr-place{padding-top:4px}.jr-place>p{margin-top:5px;font-size:.9rem}.jr-playfield{min-height:170px}.jr-dialog[data-phase="0"] .jr-playfield{min-height:195px}.jr-dialogue{padding-top:18px}.jr-touch{height:185px}.jr-dialog .jr-art.at-art{width:160px;left:calc(50% - 80px);top:0}.jr-card{width:78px;height:122px;left:calc(50% - 39px);top:4px}.jr-touch-label{bottom:14px}.jr-text h2{margin-bottom:9px}.jr-text p{font-size:.875rem}.jr-footer{padding-top:10px;padding-bottom:5px}.jr-reveal-row{padding:12px 0}.jr-reveal{max-width:90px}.jr-seals{padding:20px 0}.jr-seal{min-height:122px}.jr-dialog[data-ritual=compat] .jr-seal{min-height:130px}.jr-stars span{transform:rotate(var(--angle)) translateY(-101px) rotate(calc(-1*var(--angle)))}.jr-hint{margin:8px 0}}
@media(prefers-reduced-motion:reduce){.jr-dialog *,.jr-dialog *::before,.jr-dialog *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.jr-world-image{filter:brightness(.85)!important;transform:none!important}.jr-mist{opacity:.1}.jr-flash{display:none}.jr-dialogue{opacity:1}.jr-playfield{transform:none!important}.jr-reveal[aria-pressed=true] .jr-flip{transform:rotateY(180deg)}}