:root{
  --gold:#d4af37;
  --gold-light:#f5d76e;
  --gold-glow:rgba(212,175,55,.65);
  --parchment:#f3e5c8;
  --ink:#3a2410;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Cormorant Garamond',Georgia,serif;
  background:#04060f;color:#f5e6c8;min-height:100vh;
  overflow-x:hidden;position:relative;
}
.sky{
  position:fixed;inset:0;z-index:-10;
  background:
    radial-gradient(ellipse 120% 80% at 50% 115%, #1c2c4e 0%, #0b1430 38%, #050813 72%),
    linear-gradient(180deg,#03050c 0%,#0a1228 55%,#141f3d 100%);
}
.moon{
  position:fixed;top:8%;right:12%;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fffbe8 0%, #f3e9c4 45%, #d8c99a 100%);
  box-shadow:0 0 40px 12px rgba(255,246,205,.35),0 0 120px 40px rgba(255,246,205,.14),inset -12px -10px 26px rgba(120,105,70,.35);
  z-index:-8;opacity:.85;animation:moonGlow 7s ease-in-out infinite alternate;
}
@keyframes moonGlow{
  from{box-shadow:0 0 34px 10px rgba(255,246,205,.28),0 0 100px 34px rgba(255,246,205,.10),inset -12px -10px 26px rgba(120,105,70,.35);}
  to{box-shadow:0 0 52px 18px rgba(255,246,205,.45),0 0 150px 55px rgba(255,246,205,.18),inset -12px -10px 26px rgba(120,105,70,.35);}
}
.stars{position:fixed;inset:0;z-index:-9;pointer-events:none;overflow:hidden;}
.star{position:absolute;background:#fff;border-radius:50%;opacity:.7;animation:twinkle 3s infinite ease-in-out alternate;will-change:opacity,transform;}
.star.big{box-shadow:0 0 6px 2px rgba(255,255,255,.7),0 0 14px 4px rgba(180,210,255,.35);}
@keyframes twinkle{0%{opacity:.15;transform:scale(.7);}100%{opacity:1;transform:scale(1.15);}}
.castle-wrap{position:fixed;left:0;right:0;bottom:0;height:46vh;min-height:280px;z-index:-6;pointer-events:none;overflow:hidden;}
.castle-svg{width:100%;height:100%;display:block;}
.fog{position:fixed;left:-20%;right:-20%;bottom:0;height:38vh;z-index:-5;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(150,175,220,.22) 0%, rgba(120,150,200,.10) 35%, transparent 72%);}
.fog-2{height:28vh;background:radial-gradient(ellipse 45% 100% at 30% 100%, rgba(180,200,240,.16) 0%, transparent 70%);animation:fogDrift 26s ease-in-out infinite alternate;}
.fog-1{animation:fogDrift 34s ease-in-out infinite alternate-reverse;}
@keyframes fogDrift{from{transform:translateX(-6%);}to{transform:translateX(6%);}}
.motes{position:fixed;inset:0;z-index:-4;pointer-events:none;overflow:hidden;}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#ffeaa7,#d4af37 60%,transparent 70%);
  opacity:0;animation:rise linear infinite;will-change:transform,opacity;}
@keyframes rise{0%{transform:translateY(0) scale(.4);opacity:0;}12%{opacity:.9;}85%{opacity:.6;}100%{transform:translateY(-105vh) scale(1.1);opacity:0;}}
.scene{position:relative;z-index:5;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 22px 40px;gap:2px;}
.pre-title{font-family:'Cinzel',serif;font-size:clamp(.66rem,2.4vw,.85rem);letter-spacing:.55em;text-transform:uppercase;color:var(--gold-light);opacity:0;text-shadow:0 0 18px var(--gold-glow);animation:fadeDown 1.6s ease .2s forwards;margin-bottom:14px;padding-left:.55em;}
.title{font-family:'Cinzel Decorative',serif;font-weight:700;font-size:clamp(2rem,8.5vw,4.6rem);line-height:1.05;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff6d5 0%,#f5d76e 38%,#c99b2e 78%,#8a6516 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(212,175,55,.5));opacity:0;animation:fadeUp 1.6s cubic-bezier(.2,.8,.3,1) .45s forwards;}
.name{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(3.2rem,15vw,7.5rem);line-height:1.1;color:#ffeec2;
  text-shadow:0 0 12px rgba(255,235,170,.85),0 0 34px rgba(212,175,55,.7),0 0 70px rgba(212,175,55,.42);
  opacity:0;animation:fadeUp 1.7s cubic-bezier(.2,.8,.3,1) .8s forwards;margin-top:-6px;}
.subtitle{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(.95rem,3.6vw,1.35rem);color:#cbd6ee;letter-spacing:.06em;opacity:0;animation:fadeUp 1.6s ease 1.2s forwards;margin-top:8px;max-width:520px;}
.spell-btn{position:relative;margin-top:44px;padding:17px 38px;font-family:'Cinzel',serif;font-weight:600;font-size:clamp(.72rem,2.9vw,.95rem);letter-spacing:.16em;text-transform:uppercase;color:#ffeec2;
  background:linear-gradient(180deg,rgba(30,22,8,.9),rgba(12,10,20,.95));
  border:1.5px solid rgba(212,175,55,.75);border-radius:60px;cursor:pointer;overflow:hidden;isolation:isolate;opacity:0;
  animation:fadeUp 1.6s ease 1.55s forwards, pulseBtn 3s ease-in-out 3.2s infinite;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4), box-shadow .35s ease, border-color .35s ease;
  box-shadow:0 0 0 0 var(--gold-glow), 0 8px 28px rgba(0,0,0,.6), inset 0 0 22px rgba(212,175,55,.12);
  -webkit-tap-highlight-color:transparent;}
.spell-btn::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 120%, rgba(212,175,55,.55), transparent 62%);opacity:0;transition:opacity .4s ease;z-index:-1;}
.spell-btn::after{content:'';position:absolute;top:0;left:-120%;width:70%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,246,205,.42),transparent);transform:skewX(-22deg);animation:shine 3.6s ease-in-out infinite;animation-delay:3.4s;}
@keyframes shine{0%{left:-120%;}55%{left:150%;}100%{left:150%;}}
.spell-btn:hover{transform:translateY(-3px) scale(1.035);border-color:#ffe9a8;box-shadow:0 0 34px 4px var(--gold-glow),0 14px 36px rgba(0,0,0,.65),inset 0 0 30px rgba(212,175,55,.22);}
.spell-btn:hover::before{opacity:1;}
.spell-btn:active{transform:translateY(-1px) scale(.99);}
.spell-btn:disabled{cursor:default;}
@keyframes pulseBtn{0%,100%{box-shadow:0 0 0 0 var(--gold-glow),0 8px 28px rgba(0,0,0,.6),inset 0 0 22px rgba(212,175,55,.12);}50%{box-shadow:0 0 26px 6px var(--gold-glow),0 8px 28px rgba(0,0,0,.6),inset 0 0 30px rgba(212,175,55,.22);}}
.hint{margin-top:20px;font-size:clamp(.72rem,2.6vw,.88rem);font-style:italic;letter-spacing:.09em;color:#8fa3c7;opacity:0;animation:fadeUp 1.4s ease 1.9s forwards;transition:opacity .5s ease;}
body.casting .hint{opacity:0 !important;}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-18px);}to{opacity:1;transform:translateY(0);}}
body.casting .scene{animation:sceneOut 1.6s ease .5s forwards;}
@keyframes sceneOut{to{opacity:0;transform:scale(.94) translateY(-24px);filter:blur(5px);}}
.wand-wrap{position:fixed;left:50%;bottom:6%;width:min(280px,58vw);z-index:60;pointer-events:none;opacity:0;transform-origin:8% 50%;filter:drop-shadow(0 0 14px rgba(212,175,55,.85)) drop-shadow(0 0 34px rgba(212,175,55,.45));}
.wand-wrap svg{width:100%;height:auto;display:block;}
body.casting .wand-wrap{animation:wandCast 2.6s cubic-bezier(.35,.05,.35,1) forwards;}
@keyframes wandCast{
  0%{opacity:0;transform:translate(-58%,90px) rotate(-52deg) scale(.85);}
  12%{opacity:1;transform:translate(-58%,0) rotate(-42deg) scale(1);}
  30%{transform:translate(-58%,-14px) rotate(6deg) scale(1.02);}
  44%{transform:translate(-58%,-6px) rotate(-16deg) scale(1.02);}
  58%{transform:translate(-58%,-16px) rotate(20deg) scale(1.03);}
  72%{transform:translate(-58%,-8px) rotate(-8deg) scale(1.03);}
  86%{transform:translate(-58%,-18px) rotate(14deg) scale(1.05);}
  100%{opacity:0;transform:translate(-58%,-30px) rotate(4deg) scale(1.12);}
}
.sparkle-layer{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden;}
.sparkle{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:radial-gradient(circle,#ffffff 0%,#ffeaa7 32%,#f5b301 62%,transparent 72%);
  box-shadow:0 0 8px 3px rgba(255,220,120,.85),0 0 18px 6px rgba(245,179,1,.45);
  animation:sparkleFly 1.5s cubic-bezier(.15,.7,.4,1) forwards;will-change:transform,opacity;}
@keyframes sparkleFly{0%{transform:translate(0,0) scale(.3);opacity:1;}70%{opacity:1;}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0;}}
.lumos-text{position:fixed;left:50%;top:34%;transform:translate(-50%,-50%) scale(.6);font-family:'Cinzel Decorative',serif;font-weight:900;font-size:clamp(1.6rem,7vw,3.4rem);letter-spacing:.06em;color:#fff6d5;
  text-shadow:0 0 18px #f5d76e,0 0 46px #d4af37,0 0 90px rgba(212,175,55,.6);
  z-index:80;pointer-events:none;opacity:0;white-space:nowrap;animation:lumosAnim 1.9s ease-out forwards;}
@keyframes lumosAnim{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55);filter:blur(10px);}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.06);filter:blur(0);}
  62%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-58%) scale(1.16);filter:blur(4px);}
}
.flash{position:fixed;inset:0;z-index:90;background:radial-gradient(circle at 50% 45%,#fff8e1 0%,rgba(255,235,170,.7) 25%,transparent 62%);opacity:0;pointer-events:none;}
body.letter-open .flash{animation:flashAnim 1s ease-out forwards;}
@keyframes flashAnim{0%{opacity:0;}18%{opacity:1;}100%{opacity:0;}}
.letter-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;pointer-events:none;background:rgba(2,4,10,0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:opacity .7s ease,background .7s ease,backdrop-filter .7s ease;overflow-y:auto;}
body.letter-open .letter-overlay{opacity:1;pointer-events:auto;background:rgba(2,4,10,.86);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);}
.scroll-letter{width:min(680px,100%);max-height:90vh;display:flex;flex-direction:column;transform:translateY(70px) scale(.72) rotateX(28deg);opacity:0;transform-origin:50% 30%;transition:transform 1.05s cubic-bezier(.18,.9,.28,1.18),opacity .75s ease;filter:drop-shadow(0 26px 60px rgba(0,0,0,.85)) drop-shadow(0 0 34px rgba(212,175,55,.28));}
body.letter-open .scroll-letter{transform:translateY(0) scale(1) rotateX(0deg);opacity:1;}
.roller{height:16px;flex:0 0 auto;border-radius:9px;background:linear-gradient(180deg,#7b5230 0%,#4a2d18 35%,#2a180b 68%,#5c3a1f 100%);box-shadow:0 3px 10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,225,180,.22),inset 0 -2px 4px rgba(0,0,0,.5);position:relative;}
.roller::before,.roller::after{content:'';position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 35% 30%,#c9a25c,#6b4423 55%,#2a180b 100%);box-shadow:0 1px 4px rgba(0,0,0,.7);}
.roller::before{left:-5px;}
.roller::after{right:-5px;}
.parchment{position:relative;flex:1 1 auto;overflow-y:auto;padding:clamp(26px,6vw,46px) clamp(20px,6vw,52px) clamp(30px,6vw,48px);
  background:
    radial-gradient(ellipse at 12% 8%, rgba(150,105,50,.16) 0%, transparent 46%),
    radial-gradient(ellipse at 88% 92%, rgba(150,105,50,.20) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 50%, rgba(255,250,235,.75) 0%, transparent 78%),
    linear-gradient(150deg,#f7ecd2 0%,#efdfba 42%,#e3cfa3 100%);
  color:var(--ink);border-left:1px solid rgba(120,86,40,.35);border-right:1px solid rgba(120,86,40,.35);
  box-shadow:inset 0 0 70px rgba(120,80,30,.28),inset 0 0 14px rgba(90,60,20,.18);
  scrollbar-width:thin;scrollbar-color:rgba(107,68,35,.6) transparent;}
.parchment::-webkit-scrollbar{width:8px;}
.parchment::-webkit-scrollbar-track{background:transparent;}
.parchment::-webkit-scrollbar-thumb{background:rgba(107,68,35,.55);border-radius:8px;border:2px solid transparent;background-clip:content-box;}
.parchment::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(120,85,40,.045) 0px,rgba(120,85,40,.045) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(90deg,rgba(120,85,40,.04) 0px,rgba(120,85,40,.04) 1px,transparent 1px,transparent 5px);mix-blend-mode:multiply;opacity:.55;}
.seal{position:absolute;right:clamp(14px,4vw,30px);bottom:clamp(14px,4vw,26px);width:62px;height:62px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#d94f4f,#a01c1c 55%,#640d0d 100%);
  box-shadow:0 5px 14px rgba(0,0,0,.5),inset 0 -4px 10px rgba(0,0,0,.45),inset 0 4px 9px rgba(255,150,150,.35);
  display:flex;align-items:center;justify-content:center;font-family:'Cinzel Decorative',serif;font-size:1.4rem;color:#ffd9d9;
  text-shadow:0 1px 2px rgba(0,0,0,.6);transform:rotate(-14deg);z-index:3;pointer-events:none;}
.seal::after{content:'';position:absolute;inset:7px;border-radius:50%;border:1.5px dashed rgba(255,190,190,.45);}
.letter-crest{text-align:center;font-size:1.5rem;color:#9c7526;margin-bottom:6px;text-shadow:0 1px 0 rgba(255,255,255,.6);letter-spacing:.4em;padding-left:.4em;}
.letter-to{font-family:'Great Vibes',cursive;font-size:clamp(1.9rem,7vw,2.7rem);text-align:center;color:#7a2418;margin-bottom:4px;text-shadow:0 1px 0 rgba(255,255,255,.5);}
.letter-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 24px;color:#9c7526;font-size:.85rem;}
.letter-divider::before,.letter-divider::after{content:'';height:1px;width:60px;background:linear-gradient(90deg,transparent,#b08a3a,transparent);}
.letter-body{font-family:'Cormorant Garamond',serif;font-size:clamp(1rem,3.9vw,1.16rem);line-height:1.78;color:#33200e;text-align:left;}
.letter-body p{margin-bottom:1.05em;opacity:0;transform:translateY(14px);}
body.letter-open .letter-body p{animation:lineIn .8s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes lineIn{to{opacity:1;transform:translateY(0);}}
.letter-body .greeting{font-family:'Great Vibes',cursive;font-size:clamp(1.5rem,5.6vw,2rem);color:#7a2418;margin-bottom:.5em;}
.letter-body .strong{font-weight:600;color:#7a2418;}
.letter-body .center{text-align:center;}
.letter-body .big-love{font-family:'Cinzel Decorative',serif;font-weight:700;font-size:clamp(1.15rem,4.6vw,1.5rem);text-align:center;color:#8a1f1f;letter-spacing:.05em;margin:.6em 0 1em;text-shadow:0 1px 0 rgba(255,255,255,.6);}
.letter-body .signature{font-family:'Great Vibes',cursive;font-size:clamp(1.4rem,5.2vw,1.9rem);text-align:right;color:#7a2418;margin-top:1.4em;margin-bottom:.2em;padding-right:8px;}
.letter-body .hearts{text-align:center;font-size:1.35rem;letter-spacing:.35em;padding-left:.35em;margin-top:.3em;color:#b02828;}
.close-btn{position:fixed;top:max(16px,env(safe-area-inset-top));right:16px;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(212,175,55,.7);background:rgba(12,10,20,.82);color:#ffeec2;font-size:1.15rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:110;opacity:0;transform:scale(.6) rotate(-90deg);transition:opacity .5s ease .35s,transform .55s cubic-bezier(.2,.9,.3,1.4) .35s,background .3s ease,border-color .3s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent;}
body.letter-open .close-btn{opacity:1;transform:scale(1) rotate(0deg);}
.close-btn:hover{background:rgba(212,175,55,.22);border-color:#ffe9a8;box-shadow:0 0 20px var(--gold-glow);}
.replay-btn{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);padding:11px 26px;font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#ffeec2;background:rgba(12,10,20,.85);border:1px solid rgba(212,175,55,.6);border-radius:40px;cursor:pointer;z-index:105;opacity:0;pointer-events:none;transition:opacity .5s ease .8s,transform .5s cubic-bezier(.2,.9,.3,1.3) .8s,background .3s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent;}
body.letter-open .replay-btn{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.replay-btn:hover{background:rgba(212,175,55,.2);box-shadow:0 0 22px var(--gold-glow);}
@media (max-width:480px){
  .moon{width:74px;height:74px;top:6%;right:10%;}
  .castle-wrap{height:36vh;min-height:210px;}
  .scroll-letter{max-height:88vh;}
  .seal{width:52px;height:52px;font-size:1.15rem;}
  .scene{padding-top:70px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}