/* Shared by every screen: page base, the parchment note, the top buttons. */
@property --g{syntax:'<number>';inherits:true;initial-value:0}
:root{--gold:#d9b46a;--gold2:#f6e2ae;--ink:#3a2516;--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--hand:'Marck Script','Segoe Script','Bradley Hand',cursive}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;background:#07060a;overflow:hidden;color:#f3e6c8;font-family:var(--serif);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
#app{position:fixed;inset:0;overflow:hidden;background:#07060a}
#app.shake{animation:shake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px) rotate(-.4deg)}40%,60%{transform:translate(7px,-3px) rotate(.4deg)}}
.scene{position:absolute;inset:0;overflow:hidden}
.pl{position:absolute;left:-4%;top:-4%;width:108%;height:108%;will-change:transform;transform-origin:50% 50%}
.pl>svg,.pl>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.full{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}


/* note */
#note{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 12px);transform:translateX(-50%) translateY(30px);width:min(93vw,560px);padding-top:13px;z-index:20;opacity:0;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
#note.show{opacity:1;transform:translateX(-50%);pointer-events:auto}
.note-in{position:relative;isolation:isolate;color:var(--ink);padding:25px 20px 18px;transition:opacity .35s}
.note-in.fade{opacity:0}
#noteBg{position:absolute;left:-24px;top:-28px;width:calc(100% + 48px);height:calc(100% + 56px);z-index:-1;pointer-events:none}
.note-in.nudge{animation:nudge .45s}
@keyframes nudge{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#8a5a2a;font-weight:700;min-height:14px}
.hand{font-family:var(--hand);font-size:clamp(23px,5.6vw,30px);line-height:1.12;color:#2a170b;margin-top:6px}
.nspec{font-size:14px;font-style:italic;font-weight:500;line-height:1.32;color:#4a3322;margin-top:6px}
.nspec:empty{display:none}
.nspec:not(:empty)+.hand{margin-top:18px}
.instr{font-size:clamp(16.5px,4.1vw,19px);line-height:1.32;margin-top:6px;color:#4a3322;font-weight:600}
.instr:empty{display:none}
.instr b{color:#6a2a10}
.status{font-size:15px;font-style:italic;color:#8a4a1a;margin-top:6px;font-weight:600;min-height:0}
.status:empty{display:none}
.nbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.nbtns:empty{display:none}
.nbtns.eq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.btn{font:inherit;font-weight:700;font-size:17px;background:#2b1a0e;color:var(--gold2);border:1px solid #7a5428;padding:10px 20px;border-radius:999px;cursor:pointer;transition:transform .15s,box-shadow .2s}
.btn.ghost{background:transparent;color:#3a2516;border-color:#8a6a3a}
.btn:hover{box-shadow:0 0 18px rgba(255,190,100,.35)}
.btn:active{transform:scale(.97)}

.topbar{position:absolute;z-index:40;top:calc(env(safe-area-inset-top) + 12px);right:calc(env(safe-area-inset-right) + 12px);display:flex;gap:8px;align-items:center;transition:opacity .25s}
.topbar.away{opacity:0;pointer-events:none}
#snd{width:42px;height:42px;border-radius:50%;border:1px solid rgba(217,180,106,.55);background:rgba(14,10,20,.55);color:var(--gold2);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#snd svg{width:20px;height:20px}
#lang{display:flex;height:42px;border-radius:999px;border:1px solid rgba(217,180,106,.55);background:rgba(14,10,20,.55);padding:3px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#lang button{font:inherit;font-weight:700;font-size:15px;letter-spacing:.06em;border:0;background:transparent;color:#cdb78c;padding:0 11px;border-radius:999px;cursor:pointer}
#lang button.on{background:linear-gradient(180deg,#f2d38e,#c99a4e);color:#2a170b}

/* the entry screens */
.st-title{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + max(62px, min(7vh, 56px)));text-align:center;pointer-events:none;transition:opacity .6s,transform .8s;padding:0 18px}
.st-title h1{font-weight:600;font-size:clamp(30px,min(8.6vw,11vh),72px);line-height:1;letter-spacing:.01em;background:linear-gradient(180deg,#fff4d2 10%,#e8c27a 55%,#b4823e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(255,200,120,.35)) drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.st-title p{margin:min(12px,1.6vh) auto 0;max-width:560px;font-style:italic;font-size:clamp(14px,min(4vw,3.4vh),23px);line-height:1.3;color:#e2d6bd;text-shadow:0 1px 8px rgba(0,0,0,.9)}
#cta{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;bottom:calc(env(safe-area-inset-bottom) + max(5.5vh, 50px));padding:13px 30px;border-radius:999px;background:linear-gradient(180deg,#f4d895,#c99a4e);border:1px solid #fff0c4;color:#2a170b;font:inherit;font-size:clamp(19px,4.6vw,22px);font-weight:700;letter-spacing:.01em;white-space:nowrap;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.55),0 0 26px rgba(255,200,110,.35);animation:ctap 2.6s ease-in-out infinite;transition:opacity .5s}
.st-fan{position:absolute;left:0;right:0;bottom:0;text-align:center;font-style:italic;font-size:12px;line-height:1.2;padding:10px 12px calc(env(safe-area-inset-bottom) + 6px);font-weight:600;text-wrap:balance;color:#232b45;background:linear-gradient(180deg,rgba(236,241,250,0),rgba(236,241,250,.95) 12px);pointer-events:none;transition:opacity .5s}
@keyframes ctap{50%{box-shadow:0 8px 30px rgba(0,0,0,.55),0 0 44px rgba(255,200,110,.65);transform:translateY(-3px)}}
.tw{animation:tw 2.2s ease-in-out infinite}
@keyframes tw{50%{opacity:.25}}
#flash{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--fx,50%) var(--fy,60%),#fff6dc 0%,#ffd28a 22%,#c87a30 55%,#3a1a08 100%)}
@media (prefers-reduced-motion:reduce){#cta,.tw{animation:none}}

/* the result card */
#result{--h:100vh;position:absolute;inset:0;z-index:35;display:flex;overflow-y:auto;-webkit-overflow-scrolling:touch;background:radial-gradient(80% 70% at 50% 35%,rgba(40,20,8,.55),rgba(5,3,2,.88));opacity:0;transition:opacity .9s;padding:calc(env(safe-area-inset-top) + 62px) 16px calc(env(safe-area-inset-bottom) + 16px);-webkit-user-select:text;user-select:text}
@supports (height:100svh){#result{--h:100svh}}
#result.show{opacity:1}
.rcard{width:100%;max-width:480px;margin:auto;padding:clamp(18px,calc(18px + (var(--h) - 568px)*.044),30px) 24px clamp(16px,calc(16px + (var(--h) - 568px)*.036),26px);border-radius:8px;background:#160c07;box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 0 1px rgba(217,180,106,.55),inset 0 0 0 7px #160c07,inset 0 0 0 8px rgba(217,180,106,.25);text-align:center;transform:translateY(20px);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
#result.show .rcard{transform:none}
.r-kicker{font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:#c79a55;font-weight:700}
.rcard h1{font-weight:700;font-size:clamp(28px,8.6vw,40px);line-height:1.05;margin-top:clamp(10px,calc(10px + (var(--h) - 568px)*.109),40px);background:linear-gradient(180deg,#fff2cc,#e2b866 60%,#b07c38);-webkit-background-clip:text;background-clip:text;color:transparent}
.rare{display:inline-block;margin-top:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#1a0f08;background:linear-gradient(90deg,#e8c983,#fff1c2,#e8c983);padding:3px 10px;border-radius:999px;font-weight:700}
#rStage{position:relative;z-index:0;height:clamp(96px,calc(96px + (var(--h) - 568px)*.319),184px);margin-top:clamp(6px,calc(6px + (var(--h) - 568px)*.036),16px)}
#rStage::before{content:'';position:absolute;left:50%;top:50%;width:490px;height:490px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#2c1a10,rgba(44,26,16,0) 70%)}
.rcard>*:not(#rStage){position:relative;z-index:1}
#rWand{width:100%;height:100%;display:block;transition:opacity .5s}
#rStage.is3d #rWand{opacity:0}
#rWand3d{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;opacity:0;transition:opacity .5s;pointer-events:none}
#rStage.is3d #rWand3d{opacity:1;pointer-events:auto}
#rWand3d:active{cursor:grabbing}
.r-specs{margin-top:clamp(8px,calc(8px + (var(--h) - 568px)*.029),16px);font-size:14px;font-weight:300;line-height:1.2;color:#ecdcb8;text-transform:lowercase}
.r-lore{max-width:348px;margin:clamp(8px,calc(8px + (var(--h) - 568px)*.188),60px) auto 0;font-style:italic;font-weight:400;font-size:19px;line-height:1.35;color:#d6c3a0}
.cap{font-size:14px;color:#a8916c;font-style:italic;margin-top:8px}
.r-btns{display:grid;grid-template-columns:repeat(2,minmax(0,173px));gap:10px;justify-content:center;margin-top:clamp(10px,calc(10px + (var(--h) - 568px)*.138),48px)}
.r-btns button{font:inherit;font-weight:700;font-size:clamp(14px,4.2vw,17px);line-height:21px;padding:10px 6px;border-radius:999px;cursor:pointer;border:1px solid #8a6230;background:#2b1a0e;color:var(--gold2)}
.r-btns button.pri{background:linear-gradient(180deg,#f2d38e,#c99a4e);color:#2a170b;border-color:#f2d38e}
@media (max-width:340px){.rcard{padding-left:16px;padding-right:16px}.r-btns button{font-size:13px;padding-left:4px;padding-right:4px}}
.r-credit{display:inline-block;margin-top:clamp(8px,calc(8px + (var(--h) - 568px)*.145),48px);font-size:12px;font-style:italic;color:#c9b48c}
#rSaved{margin-top:12px}
#rSaved img{width:100%;max-width:280px;border-radius:6px;display:block;margin:0 auto;-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}