:root{--pink:#f4a0c7;--purple:#8468d2;--gold:#ffe08a;--dark:#070718}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050511;color:#fff;font-family:Georgia,serif}
button,input{font:inherit}.screen{position:fixed;inset:0;display:none}.screen.active{display:block}

/* Intro */
#intro{background:radial-gradient(circle at 50% 28%,#45256b,#151334 50%,#050511);place-items:center}
#intro.active{display:grid}.intro-stars,.starsLayer{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:29px 29px;opacity:.3;animation:stars 25s linear infinite}
@keyframes stars{to{background-position:150px 100px}}
.intro-box{position:relative;width:min(90vw,480px);padding:42px;text-align:center;border:1px solid #8e72d4;border-radius:18px;background:#080820e9;box-shadow:0 0 70px #7c51c248}
.intro-moon{font-size:72px;color:#ffe6a3;text-shadow:0 0 30px #ffe6a3}.intro-box h1{color:#ffd2e7;font-size:30px}.intro-box p{opacity:.75}
.intro-box input{display:block;width:100%;padding:14px;border:1px solid #8669c8;border-radius:10px;background:#111036;color:#fff;text-align:center;font-size:24px;letter-spacing:9px}
.intro-box button,.rewardCard button{margin-top:14px;padding:12px 20px;border:0;border-radius:10px;color:#fff;font-weight:bold;background:linear-gradient(135deg,#f18fbc,#7d67d4)}
#passwordError{height:20px;margin-top:8px;color:#ff9dad}

/* Descent */
#descent{overflow:hidden;background:linear-gradient(#05041a,#211954 60%,#704c8d)}#descent.active{display:block}
.cloudLayer{position:absolute;width:145%;height:42%;left:-22%;background:radial-gradient(ellipse at 10% 50%,#ffffffdd 0 14%,transparent 15%),radial-gradient(ellipse at 34% 54%,#ffffffcc 0 18%,transparent 19%),radial-gradient(ellipse at 58% 48%,#ffffffdc 0 16%,transparent 17%),radial-gradient(ellipse at 83% 55%,#ffffffc9 0 19%,transparent 20%);filter:blur(9px)}
.c1{top:10%;animation:cloudLeft 5.4s ease-in-out forwards}.c2{top:39%;opacity:.88;animation:cloudRight 5.4s ease-in-out forwards}.c3{top:68%;opacity:.7;animation:cloudLeft 5.4s ease-in-out forwards}
@keyframes cloudLeft{to{transform:translateX(-48%);opacity:0}}@keyframes cloudRight{to{transform:translateX(48%);opacity:0}}
#descentIsland{position:absolute;left:50%;top:50%;width:225vw;max-width:none;transform:translate(-50%,-50%) scale(.10);filter:blur(5px);animation:islandZoom 5.4s cubic-bezier(.2,.7,.15,1) forwards}
@keyframes islandZoom{65%{filter:blur(0)}to{transform:translate(-50%,-50%) scale(.72);filter:blur(0)}}
.descentText{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);font-size:clamp(18px,3vw,34px);color:#ffd4e8;text-shadow:0 2px 14px #000;animation:fadeText 5.4s ease forwards}
@keyframes fadeText{0%,18%{opacity:0}38%,78%{opacity:1}100%{opacity:0}}

/* World */
#viewport{position:absolute;inset:0;overflow:hidden;background:#070716}
#world{position:absolute;width:1536px;height:1024px;transform-origin:0 0;will-change:left,top,transform}
#map{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.character{position:absolute;width:42px;height:64px;z-index:12;filter:drop-shadow(0 7px 4px #0009);transform:translate(-50%,-88%);will-change:left,top}
.character span{position:absolute;display:block}.character .face{width:22px;height:20px;left:10px;top:13px;background:#d9a788;border-radius:8px}
.character .hair{width:31px;height:23px;left:6px;top:4px;background:#21151d;border-radius:15px 15px 7px 7px;z-index:2}
.character .body{width:30px;height:29px;left:6px;top:31px;border-radius:9px 9px 5px 5px;background:#2c2033}
.character .leg{width:8px;height:15px;top:55px;background:#d4b6c5}.character .leg.l{left:8px}.character .leg.r{right:8px}
.character.walk .leg.l{animation:walkL .22s steps(2) infinite}.character.walk .leg.r{animation:walkR .22s steps(2) infinite}
@keyframes walkL{50%{transform:translateY(-5px)}}@keyframes walkR{50%{transform:translateY(5px)}}
.faysal .hair{background:#151219}.faysal .body{background:#12131b}.faysal .leg{background:#151621}
.bracelet{display:none!important;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;left:33px;top:42px}.sara.has-bracelet .bracelet{display:block!important}

/* Correctly placed numbered interaction points */
.zone{position:absolute;border-radius:50%;transform:translate(-50%,-50%);z-index:9;cursor:pointer}
.zone.memory{width:62px;height:62px;background:radial-gradient(circle,#ffeff9 0 7%,#ff9dccbb 8% 18%,#ff85c842 38%,transparent 72%);animation:pulse 1.8s ease-in-out infinite}
.zone.memory::after{content:attr(data-id);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#0b0b27e9;border:1px solid #ffb2d3;color:#fff;font:700 13px/1 monospace;box-shadow:0 0 10px #000}
.zone.secret{width:34px;height:34px;background:radial-gradient(circle,#fffad0 0 10%,#ffe38dcc 11% 24%,#fff4 42%,transparent 72%);animation:pulse 1.45s ease-in-out infinite}
.zone.secret::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:#fff7bb;font-size:13px}
.zone.done{opacity:.16;animation:none;pointer-events:none}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.18)}}
.map-label{position:absolute;transform:translate(-50%,-100%);padding:6px 9px;background:#090921e5;border:1px solid var(--pink);border-radius:8px;font-size:13px;z-index:10;white-space:nowrap}
.persistent-object{position:absolute;transform:translate(-50%,-50%);font-size:48px;z-index:8;filter:drop-shadow(0 0 15px #fff7)}

/* HUD */
#topHud{position:fixed;right:12px;top:12px;display:flex;gap:8px;z-index:20}.pill,#bookBtn,#musicBtn{background:#080820e2;border:1px solid #7d66ba;color:#fff;border-radius:10px;padding:9px 12px}.pill{font-family:monospace}#bookBtn,#musicBtn{font-size:20px}
#hint{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);max-width:80vw;padding:9px 14px;border-radius:10px;background:#080820eb;border:1px solid #8065ba;z-index:20;text-align:center}
#interactBtn{display:none;position:fixed;right:26px;bottom:30px;width:72px;height:72px;border-radius:50%;border:2px solid #ffb0d4;background:#e97fb9dd;color:#fff;font-size:28px;font-weight:bold;z-index:21}
#mobilePad{display:none;position:fixed;left:20px;bottom:20px;width:150px;height:130px;z-index:21}#mobilePad button{position:absolute;width:46px;height:46px;border-radius:12px;border:1px solid #ffffff55;background:#0b0b2bcc;color:#fff}
#mobilePad [data-d=up]{left:52px;top:0}#mobilePad [data-d=left]{left:0;top:48px}#mobilePad [data-d=down]{left:52px;top:72px}#mobilePad [data-d=right]{right:0;top:48px}
@media(pointer:coarse){#interactBtn,#mobilePad{display:block}#hint{bottom:160px}}

/* Book */
.overlay{display:none;position:fixed;inset:0;background:#02020ded;z-index:50;place-items:center;padding:12px}.overlay.open{display:grid}
.book{width:min(94vw,850px);max-height:90vh;overflow:auto;background:linear-gradient(#15143b,#09091f);border:1px solid #8a70cf;border-radius:18px;box-shadow:0 25px 90px #000;padding:24px;position:relative}
.x{position:absolute;right:12px;top:8px;border:0;background:transparent;color:#fff;font-size:30px}.book h2{text-align:center;color:#ffd1e7}
.tabs{display:flex;justify-content:center;gap:8px;margin:12px}.tabs button{padding:10px 16px;border:1px solid #655291;border-radius:8px;background:#100f31;color:#fff}.tabs button.active{background:#8c5689}
.entries{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.entry{padding:12px;border:1px solid #4d4278;background:#0d0c2b;border-radius:10px}.entry.locked{opacity:.45;filter:grayscale(1)}.entry b{display:block;color:#ffd1e7}.entry small{opacity:.72}.hidden{display:none!important}

/* Simple reliable interaction scenes */
.cinema{position:relative;width:min(96vw,980px);height:min(88vh,700px);background:#09091f;border:1px solid #7b65b4;border-radius:16px;overflow:hidden;box-shadow:0 25px 100px #000}
.filmbar{display:none}#sceneStage{position:absolute;inset:0 0 26%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 30%,#65468c,#171437 58%,#09091d)}
#sceneStage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:38px 38px;opacity:.17}
.simple-visual{position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center;padding:24px}
.simple-visual img{max-width:92%;max-height:92%;object-fit:contain;border-radius:12px;box-shadow:0 15px 45px #0009}
.simple-symbol{font-size:clamp(100px,19vw,210px);filter:drop-shadow(0 0 30px #fff6);animation:gentle 2.5s ease-in-out infinite}
@keyframes gentle{50%{transform:translateY(-8px) scale(1.03)}}
.letter-sheet{width:min(88%,620px);height:88%;overflow:auto;padding:34px;background:#f0dfc7;color:#392d2b;border:10px solid #d1b99c;border-radius:6px;box-shadow:0 16px 45px #0009;text-align:left;line-height:1.65}
.photo-grid{position:relative;z-index:2;width:92%;height:92%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px}
.photo-grid img{width:100%;height:100%;min-height:0;object-fit:cover;border:7px solid #fff;border-bottom-width:22px;box-shadow:0 8px 20px #0008}
#sceneTextBox{position:absolute;left:0;right:0;bottom:0;height:26%;padding:12px 18px;background:#09091ff2;text-align:center;z-index:5}
#sceneTitle{margin:0;color:#ffd0e6;font-size:21px}#sceneBody{margin:7px auto;max-width:760px;line-height:1.4}
#sceneProgress{display:none}#sceneControls{position:absolute;right:16px;bottom:12px;z-index:8}#sceneControls button{border:0;border-radius:9px;padding:10px 16px;background:#8264c4;color:#fff;margin-left:6px}#skipScene{display:none!important}
.rewardCard{text-align:center;max-width:800px}.rewardCard img{max-width:92vw;max-height:62vh;object-fit:contain;border-radius:12px;box-shadow:0 0 50px #000}.rewardCard h2{color:#ffd1e7}


/* v1.5 polish */
.character .face::before{content:"";position:absolute;left:3px;top:5px;width:5px;height:7px;border-radius:50%;background:#181624;box-shadow:11px 0 0 #181624,1px 1px 0 1px #fff8,12px 1px 0 1px #fff8}
.character .face::after{content:"⌣";position:absolute;left:5px;top:6px;color:#7d3a45;font:700 12px/1 sans-serif;text-shadow:-5px 4px 0 #df7f8e,12px 4px 0 #df7f8e}
.sara .hair{background:#2a1b21!important}.faysal .hair{background:#17141a!important}

/* Slideshow (interaction 1 and puzzle) */
.slide-show{position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center;padding:18px 18px 48px}
.slide-card{max-width:96%;max-height:94%;object-fit:contain;border-radius:12px;box-shadow:0 16px 45px #000b;border:1px solid #8f71c5}
.slide-dots{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);display:flex;gap:7px}
.slide-dot{width:8px;height:8px;border-radius:50%;background:#ffffff48}.slide-dot.active{background:#f4a0c7;box-shadow:0 0 8px #f4a0c7}

/* Larger scrapbook collage for interaction 3 */
.scrapbook{position:relative;z-index:2;width:96%;height:96%;background:linear-gradient(135deg,#5a3f63,#262144);border-radius:14px;box-shadow:inset 0 0 60px #0008;padding:18px;overflow:hidden}
.scrapbook::before{content:"Onze herinneringen 🤍";position:absolute;left:50%;top:10px;transform:translateX(-50%);font-size:22px;color:#ffe1ef;z-index:8}
.scrap-photo{position:absolute;width:24%;height:36%;object-fit:cover;border:7px solid white;border-bottom-width:24px;box-shadow:0 9px 22px #0009;transform:rotate(var(--r))}
.scrap-photo:nth-child(1){left:4%;top:16%}.scrap-photo:nth-child(2){left:27%;top:10%}.scrap-photo:nth-child(3){left:52%;top:14%}.scrap-photo:nth-child(4){right:3%;top:9%}
.scrap-photo:nth-child(5){left:5%;bottom:4%}.scrap-photo:nth-child(6){left:29%;bottom:9%}.scrap-photo:nth-child(7){left:54%;bottom:4%}.scrap-photo:nth-child(8){right:3%;bottom:8%}
.tape{position:absolute;width:54px;height:15px;background:#f2d2a8cc;transform:rotate(-7deg);z-index:7}

/* Matcha effect */
.matcha-scene{position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.matcha-cup{font-size:150px;filter:drop-shadow(0 0 25px #a7ef91);animation:matchaFloat 2.3s ease-in-out infinite}
@keyframes matchaFloat{50%{transform:translateY(-10px) rotate(2deg)}}
.matcha-steam{position:absolute;font-size:64px;top:20%;animation:steamRise 2.2s ease-in-out infinite;color:#d8ffd2}
@keyframes steamRise{50%{transform:translateY(-22px);opacity:.25}}
.matcha-spark{position:absolute;font-size:25px;animation:sparkOrbit 3s linear infinite}
@keyframes sparkOrbit{from{transform:rotate(0) translateX(125px) rotate(0)}to{transform:rotate(360deg) translateX(125px) rotate(-360deg)}}

/* Butterfly effect */
.butterfly-scene{position:relative;z-index:2;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle,#654d91,#171333)}
.flying-butterfly{position:absolute;font-size:34px;animation:flyAcross var(--d) ease-in-out infinite;filter:drop-shadow(0 0 8px #ffc9ef)}
@keyframes flyAcross{0%{transform:translate(-20vw,30px) rotate(-10deg)}50%{transform:translate(45vw,-60px) rotate(12deg)}100%{transform:translate(110vw,20px) rotate(-8deg)}}
.butterfly-title{position:absolute;inset:0;display:grid;place-items:center;font-size:90px;filter:drop-shadow(0 0 28px #fff6)}

/* Cozy home collage */
.home-collage{position:relative;z-index:2;width:96%;height:96%;background:radial-gradient(circle at 50% 45%,#7b5141,#2a1b2e 70%);border-radius:15px;overflow:hidden}
.home-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:135px;filter:drop-shadow(0 0 30px #ffd479);z-index:3}
.home-photo{position:absolute;width:20%;height:30%;object-fit:cover;border:6px solid #f6e7d6;border-bottom-width:19px;box-shadow:0 8px 20px #0009;z-index:4;transform:rotate(var(--r))}
.home-photo:nth-of-type(1){left:3%;top:4%}.home-photo:nth-of-type(2){left:27%;top:2%}.home-photo:nth-of-type(3){right:27%;top:2%}.home-photo:nth-of-type(4){right:3%;top:5%}
.home-photo:nth-of-type(5){left:3%;bottom:4%}.home-photo:nth-of-type(6){left:27%;bottom:2%}.home-photo:nth-of-type(7){right:27%;bottom:2%}.home-photo:nth-of-type(8){right:3%;bottom:5%}

/* Sassie star */
.star-scene{position:relative;z-index:2;width:100%;height:100%;background:radial-gradient(circle at 50% 42%,#3f326e,#09091f 70%);overflow:hidden}
.named-star{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:110px;filter:drop-shadow(0 0 28px #fff6);animation:starPulse 1.8s ease-in-out infinite}
@keyframes starPulse{50%{transform:translate(-50%,-50%) scale(1.16);filter:drop-shadow(0 0 48px #fff1a6)}}
.star-name{position:absolute;left:50%;top:67%;transform:translateX(-50%);font-size:35px;color:#fff1ad;text-shadow:0 0 16px #fff1ad}
.star-instruction{position:absolute;left:50%;top:14%;transform:translateX(-50%);font-size:24px;color:#ffe1ef}

/* FINAL EDITION — cinematic opening */
.cinematic-intro,.landing,.password-modal{position:absolute;inset:0}.cinematic-intro{background:#000;overflow:hidden;z-index:3;animation:introGone .5s ease 8.2s forwards}.cin-stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:31px 31px;opacity:0;animation:cinStars 2s ease 4.5s forwards}.cin-moon{position:absolute;right:13%;top:12%;font-size:95px;color:#fff1c5;opacity:0;text-shadow:0 0 30px #fff;animation:cinMoon 1.4s ease 5.4s forwards}.cin-island{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);animation:cinIsland 1.8s ease 6.1s forwards}.dedication{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:clamp(25px,5vw,54px);line-height:1.35;color:#f7dfd0;opacity:0;text-shadow:0 0 18px #f0c6b4}.dedication strong{font-size:1.2em}.dedication span{display:block;font-size:.55em;margin-top:12px}.dedication{animation:dedication 4.1s ease .8s forwards}@keyframes dedication{0%{opacity:0;transform:translateY(8px)}25%,65%{opacity:1;transform:none}100%{opacity:0}}@keyframes cinStars{to{opacity:.75}}@keyframes cinMoon{to{opacity:1}}@keyframes cinIsland{to{opacity:1;transform:scale(1)}}@keyframes introGone{to{opacity:0;visibility:hidden}}
.landing{opacity:0;visibility:hidden;background:#060516;animation:landingIn 1s ease 8.1s forwards;z-index:2}.landing-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72)}.landing-card{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;text-shadow:0 3px 18px #000}.landing-card h1{font-size:clamp(38px,7vw,82px);margin:0 0 26px;color:#fff1e1}.landing-card em{font-weight:400;color:#f1bfd7}.landing-card button{justify-self:center;padding:15px 34px;border:1px solid #ffbedc;background:#522b63dd;color:#fff;border-radius:8px;font-size:20px;box-shadow:0 0 25px #d77bb866}@keyframes landingIn{to{opacity:1;visibility:visible}}
.password-modal{display:none;place-items:center;background:#03020bd9;backdrop-filter:blur(9px);z-index:5;padding:16px}.password-modal.open{display:grid}.heart-lock{font-size:70px;position:relative;color:#f2a8c7}.heart-lock span{position:absolute;font-size:25px;left:50%;top:50%;transform:translate(-50%,-45%)}
.now-playing{background:#080820df;border:1px solid #7d66ba;border-radius:10px;padding:9px 12px;font-size:12px;opacity:.82}
.letter-sheet{scroll-behavior:smooth;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:120px!important;max-height:100%;touch-action:pan-y}.letter-sheet p{margin:0 0 1.15em}.letter-sheet h2{position:static;margin-top:0}
.butterfly-letter-slide{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden}.butterfly-letter-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42)}.butterfly-copy{position:relative;z-index:2;max-width:680px;padding:28px;text-align:center;font-size:clamp(22px,4vw,38px);line-height:1.55;color:#fff5fb;text-shadow:0 3px 18px #000}.butterfly-copy strong{color:#ffd4e8}
@media(max-width:700px){#topHud{flex-wrap:wrap;max-width:95vw}.now-playing{order:5;width:100%;text-align:right}.cinema{height:92vh}.letter-sheet{width:94%;height:94%;padding:24px 20px 130px}.slide-show{padding:8px 8px 45px}.slide-card{max-width:100%;max-height:100%}#sceneTextBox{height:23%;font-size:14px}#sceneStage{inset:0 0 23%}}


/* FINAL OPTIMIZATION — mobile, scrolling and accessibility */
html { -webkit-text-size-adjust: 100%; }
button { cursor:pointer; touch-action:manipulation; }
#password { caret-color:#ffd5e8; }
.letter-sheet{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  touch-action:pan-y;
  padding:38px 38px 120px;
  scrollbar-width:thin;
  scrollbar-color:#9e806d #ead8c0;
}
.letter-sheet::-webkit-scrollbar{width:10px}
.letter-sheet::-webkit-scrollbar-track{background:#ead8c0;border-radius:10px}
.letter-sheet::-webkit-scrollbar-thumb{background:#9e806d;border-radius:10px;border:2px solid #ead8c0}
.letter-sheet p{margin:0 0 1.15em}
.letter-sheet h2{margin-top:0;font-size:clamp(24px,4vw,34px)}
.slide-card{image-rendering:auto;user-select:none;-webkit-user-drag:none}
.now-playing{white-space:nowrap;max-width:min(38vw,330px);overflow:hidden;text-overflow:ellipsis}
#sceneControls button:focus-visible,.intro-box button:focus-visible,#openIslandBtn:focus-visible,#bookBtn:focus-visible,#musicBtn:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}
@media (max-width:700px){
  .cinema{width:100%;height:94dvh;border-radius:12px}
  #sceneStage{inset:0 0 31%}
  #sceneTextBox{height:31%;padding:10px 12px 58px;overflow:auto}
  #sceneTitle{font-size:18px}
  #sceneBody{font-size:14px}
  #sceneControls{left:10px;right:10px;bottom:10px;display:flex;justify-content:center;gap:6px}
  #sceneControls button{margin:0;padding:9px 12px;font-size:14px}
  .slide-show{padding:8px 8px 38px}
  .slide-card{max-width:100%;max-height:100%}
  .letter-sheet{width:96%;height:96%;padding:26px 22px 110px;font-size:16px;line-height:1.75}
  #topHud{left:8px;right:8px;top:max(8px,env(safe-area-inset-top));flex-wrap:wrap;justify-content:flex-end}
  .now-playing{order:5;width:100%;max-width:none;text-align:right;font-size:12px;padding-right:4px}
  #hint{max-width:72vw;font-size:13px}
  .landing-card{width:min(92vw,470px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}


/* QUALITY UPDATE — dedicated letter reading mode */
#sceneOverlay.letter-open .cinema{
  background:linear-gradient(180deg,#171335,#08081b);
}
#sceneOverlay.letter-open #sceneStage{
  inset:0 0 76px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 20%,#72528f,#21173e 55%,#09091d);
}
#sceneOverlay.letter-open #sceneTextBox{display:none}
#sceneOverlay.letter-open #sceneControls{
  left:0;right:0;bottom:14px;
  display:flex;justify-content:center;
}
.letter-visual{
  width:100%;height:100%;min-height:0;
  padding:22px;
  overflow:hidden;
  touch-action:pan-y;
}
.letter-sheet{
  position:relative;
  width:min(92%,680px);
  height:100%;
  max-height:none;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:42px 44px 140px;
  background:linear-gradient(180deg,#f4e8d6,#ead7bd);
  border:10px solid #cdb293;
  border-radius:9px;
  box-shadow:0 20px 65px #000b,inset 0 0 45px #9c795226;
  color:#352923;
  line-height:1.82;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  will-change:scroll-position;
}
.letter-sheet:focus{outline:none}
.letter-sheet::after{
  content:"";
  display:block;
  height:24px;
}
.letter-sheet p{margin:0 0 1.3em}
.letter-sheet p:last-child{margin-top:2em;font-weight:700}
@media(max-width:700px){
  #sceneOverlay.letter-open .cinema{height:96dvh}
  #sceneOverlay.letter-open #sceneStage{inset:0 0 66px}
  #sceneOverlay.letter-open #sceneControls{bottom:9px}
  .letter-visual{padding:10px 8px}
  .letter-sheet{
    width:100%;height:100%;
    padding:28px 22px 120px;
    border-width:6px;
    border-radius:8px;
    font-size:16px;
    line-height:1.78;
    scrollbar-gutter:auto;
  }
}

/* QUALITY UPDATE V3 — refined photo wall and puzzle finish */
.interaction-four{
  background:
    radial-gradient(circle at 50% 35%,#a06a55 0,#654138 35%,#25182b 78%),
    linear-gradient(135deg,#5b3a35,#24172a);
  padding:54px 34px 28px;
}
.interaction-four::after{
  content:"";position:absolute;left:7%;right:7%;bottom:8%;height:13%;
  border-radius:50%;background:#160f1c66;filter:blur(22px);z-index:1;
}
.interaction-four .home-photo{
  width:27%;height:38%;border:8px solid #fff7ed;border-bottom-width:24px;
  object-position:center;transition:transform .35s ease,filter .35s ease;
}
.interaction-four .home-photo:hover{transform:rotate(0deg) scale(1.07);filter:brightness(1.06);z-index:10}
.interaction-four .home-photo:nth-of-type(1){left:5%;top:14%}
.interaction-four .home-photo:nth-of-type(2){left:36.5%;top:8%}
.interaction-four .home-photo:nth-of-type(3){right:5%;top:14%}
.interaction-four .home-photo:nth-of-type(4){left:5%;bottom:4%}
.interaction-four .home-photo:nth-of-type(5){left:36.5%;bottom:9%}
.interaction-four .home-photo:nth-of-type(6){right:5%;bottom:4%}
.interaction-four .home-photo:nth-of-type(n+7){display:none}
.puzzle-board{background:#120f23;box-shadow:0 18px 55px #000b,0 0 35px #f4a0c72b}
.puzzle-piece{background-repeat:no-repeat!important}
.interactive-puzzle.solved .puzzle-board{animation:completedGlow 1.3s ease both}
@keyframes completedGlow{0%{filter:brightness(1)}50%{filter:brightness(1.28);box-shadow:0 0 70px #ffd1e7aa}100%{filter:brightness(1.05)}}
.puzzle-spark{position:absolute;left:50%;top:50%;z-index:20;color:#ffe9a8;font-style:normal;font-size:26px;pointer-events:none;animation:puzzleSpark 1.3s ease-out forwards}
@keyframes puzzleSpark{from{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateX(10px) scale(.3)}to{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--r)) scale(1.4)}}
.bracelet-photo-slide img{background:#fff;padding:8px;object-fit:contain}
@media(max-width:700px){
  .interaction-four{padding:46px 14px 20px}
  .interaction-four::before{font-size:17px;white-space:nowrap}
  .interaction-four .home-photo{width:30%;height:36%;border-width:5px;border-bottom-width:15px}
  .interaction-four .home-photo:nth-of-type(1){left:2%;top:14%}
  .interaction-four .home-photo:nth-of-type(2){left:35%;top:9%}
  .interaction-four .home-photo:nth-of-type(3){right:2%;top:14%}
  .interaction-four .home-photo:nth-of-type(4){left:2%;bottom:4%}
  .interaction-four .home-photo:nth-of-type(5){left:35%;bottom:9%}
  .interaction-four .home-photo:nth-of-type(6){right:2%;bottom:4%}
}


/* MOBILE PUZZLE FIX + HOUSE PHOTO UPDATE */
.interactive-puzzle{position:relative;z-index:2;width:100%;height:100%;display:grid;grid-template-columns:minmax(260px,560px) minmax(150px,230px);grid-template-rows:auto 1fr auto;grid-template-areas:"heading heading" "board tray" "status status";gap:12px 18px;align-items:center;justify-content:center;padding:14px 20px 12px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.puzzle-heading{grid-area:heading;text-align:center;display:grid;gap:3px;color:#ffe1ef}.puzzle-heading strong{font-size:clamp(18px,2.7vw,28px)}.puzzle-heading span{font-size:14px;opacity:.82}
.puzzle-board{grid-area:board;width:min(56vh,100%);aspect-ratio:4/3;justify-self:center;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);border:7px solid #d9b8c9;border-radius:12px;overflow:hidden;background:#17142f;box-shadow:0 18px 55px #000b}
.puzzle-cell{position:relative;min-width:0;min-height:0;border:1px solid #ffffff25;background:#2a2348;display:grid;place-items:center;transition:background .18s,transform .18s,box-shadow .18s;touch-action:manipulation}
.puzzle-cell.empty{cursor:pointer;background:radial-gradient(circle,#ffffff12,#0a0920 70%)}.puzzle-cell.empty::after{content:"?";color:#ffffff42;font:700 clamp(18px,4vw,36px)/1 sans-serif}.puzzle-cell.drop-ready{background:#f3a9cf42;box-shadow:inset 0 0 20px #f4a0c7}.puzzle-cell.wrong{animation:puzzleWrong .35s ease}@keyframes puzzleWrong{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}.puzzle-cell.filled{animation:puzzlePlaced .45s ease}@keyframes puzzlePlaced{0%{transform:scale(.72);opacity:.3}70%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}}
.puzzle-piece{width:100%;height:100%;padding:0;border:0;background-repeat:no-repeat!important;border-radius:4px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.puzzle-piece.fixed{pointer-events:none}.puzzle-tray{grid-area:tray;display:grid;grid-template-columns:repeat(2,minmax(58px,1fr));gap:10px;align-content:center;padding:12px;border:1px solid #8b6aaa;border-radius:12px;background:#0b0920c9}.puzzle-piece.loose{aspect-ratio:1/1;cursor:pointer;box-shadow:0 7px 18px #0009;border:2px solid #ffffff55}.puzzle-piece.loose.selected{outline:4px solid #ffd0e6;outline-offset:2px;transform:scale(1.06);box-shadow:0 0 25px #f4a0c7}.puzzle-status{grid-area:status;text-align:center;color:#ffe1ef;min-height:28px}.puzzle-status strong{font-size:clamp(18px,3vw,28px)}
.interactive-puzzle.solved .puzzle-board{animation:completedGlow 1.3s ease both}.puzzle-spark{position:absolute;left:50%;top:50%;z-index:20;color:#ffe9a8;font-style:normal;font-size:26px;pointer-events:none;animation:puzzleSpark 1.3s ease-out forwards}
.home-collage .home-photo{object-position:center center}
@media(max-width:700px){
 #sceneOverlay:has(.interactive-puzzle) .cinema{height:96dvh;width:100%;overflow:hidden}
 #sceneOverlay:has(.interactive-puzzle) #sceneStage{inset:0 0 30%;overflow:auto;-webkit-overflow-scrolling:touch}
 #sceneOverlay:has(.interactive-puzzle) #sceneTextBox{height:30%;padding:8px 10px 56px}
 .interactive-puzzle{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;grid-template-areas:"heading" "board" "tray" "status";gap:8px;padding:10px 10px 18px;align-content:start;overflow-y:auto;touch-action:pan-y}
 .puzzle-heading strong{font-size:17px}.puzzle-heading span{font-size:12px}
 .puzzle-board{width:min(88vw,360px);max-height:none;border-width:5px}
 .puzzle-tray{width:min(88vw,360px);justify-self:center;grid-template-columns:repeat(5,1fr);gap:6px;padding:7px;position:relative;z-index:5}
 .puzzle-piece.loose{min-width:0;aspect-ratio:1/1;border-width:1px}
 .puzzle-status{font-size:13px;min-height:22px;padding-bottom:6px}
 .home-collage{width:98%;height:98%}.home-icon{font-size:94px;opacity:.9}
 .home-photo{width:24%;height:31%;border-width:4px;border-bottom-width:13px}
}

/* EPIC ROMANTIC FINALE — interaction 14 */
#sceneOverlay.finale-open{padding:0;background:#000}
#sceneOverlay.finale-open .cinema{width:100vw;height:100dvh;max-width:none;border:0;border-radius:0;background:#02030d;box-shadow:none}
#sceneOverlay.finale-open #sceneStage{inset:0;overflow:hidden;background:#02030d}
#sceneOverlay.finale-open #sceneTextBox,#sceneOverlay.finale-open #sceneControls{display:none!important}
.epic-finale{position:absolute;inset:0;overflow:hidden;background:#02030d;color:#fff;isolation:isolate}
.finale-island{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:brightness(.25) saturate(.85) hue-rotate(8deg);transform:scale(1.14);animation:finaleZoom 27s cubic-bezier(.2,.65,.2,1) forwards;z-index:1}
.finale-night{position:absolute;inset:0;background:linear-gradient(180deg,#02041655,#08042133 42%,#01020be8),radial-gradient(circle at 72% 14%,#5960a53d,transparent 32%);z-index:2}
.finale-stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#ffd9ed 1px,transparent 1px);background-size:31px 31px,53px 53px;background-position:0 0,11px 17px;opacity:0;animation:finaleStars 3s ease 1s forwards,starDrift 24s linear infinite;z-index:3}
.finale-moon{position:absolute;right:10%;top:7%;font-size:clamp(70px,10vw,145px);color:#fff1c5;text-shadow:0 0 35px #fff5ba,0 0 80px #aab5ff88;opacity:0;animation:moonRise 3s ease 1.2s forwards;z-index:4}
.shooting-star{position:absolute;left:-22%;top:18%;width:180px;height:2px;background:linear-gradient(90deg,transparent,#fff,#ffd5e7);filter:drop-shadow(0 0 8px #fff);transform:rotate(-18deg);opacity:0;z-index:8;animation:shootStar 2.2s ease-in 7.2s forwards}
.memory-lights{position:absolute;inset:0;z-index:5}.memory-lights span{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff7cf;box-shadow:0 0 8px #fff,0 0 22px #ffc5e3,0 0 46px #f29ccc;opacity:0;animation:lightAwake 1.2s ease forwards,pulseLight 2.2s ease-in-out infinite}
.finale-tree{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%) scale(0);z-index:7;filter:drop-shadow(0 0 35px #ffb9dc);opacity:0}.finale-tree span{display:block;font-size:clamp(110px,20vw,260px)}
.tree-time .finale-tree{animation:treeGrow 2.2s cubic-bezier(.18,.82,.25,1.25) forwards}
.petal-field{position:absolute;inset:0;z-index:9;pointer-events:none}.petal-field i{position:absolute;top:-8%;color:#ffd0e5;font-style:normal;opacity:0;text-shadow:0 0 8px #fff;animation:petalFall linear infinite}
.finale-copy{position:absolute;left:50%;top:48%;width:min(88vw,900px);transform:translate(-50%,-50%);z-index:12;text-align:center;font-size:clamp(24px,4vw,58px);line-height:1.35;color:#fff5fa;text-shadow:0 3px 24px #000,0 0 20px #d685be66;opacity:0;padding:20px}.finale-copy.show{animation:finaleText 1.8s ease both}
.finale-couple{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:38px;z-index:11;opacity:0}
.couple-time .finale-couple{animation:coupleAppear 2s ease forwards}.finale-person{position:relative;width:52px;height:82px;filter:drop-shadow(0 8px 8px #000)}.finale-person i,.finale-person b,.finale-person em{position:absolute;display:block}.finale-person i{left:13px;top:3px;width:28px;height:29px;border-radius:50%;background:#d9a788}.finale-person b{left:7px;top:0;width:39px;height:26px;border-radius:18px 18px 8px 8px;background:#20151d}.finale-person em{left:8px;top:28px;width:38px;height:48px;border-radius:12px 12px 6px 6px;background:#17151f}.person-s{animation:walkTogetherS 2.8s ease 21.6s both}.person-f{animation:walkTogetherF 2.8s ease 21.6s both}.person-s em{background:#2d2030}.finale-heart{align-self:center;font-size:31px;color:#ffd1e5;text-shadow:0 0 18px #fff;opacity:0;animation:heartPop 1s ease 23.9s forwards}
.finale-end{position:absolute;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;text-align:center;padding:24px;background:radial-gradient(circle at 50% 44%,#372047aa,#02030cf4 65%);opacity:0;visibility:hidden}.ending-time .finale-end{animation:endReveal 2.2s ease forwards}.finale-signature{font-size:clamp(23px,4vw,52px);line-height:1.55;color:#fff4fa;text-shadow:0 3px 24px #000}.finale-signature strong{color:#ffd2e7}.finale-signature span{display:inline-block;margin-top:10px;font-size:1.18em}.finale-return,.finale-replay{border:1px solid #ffc6e0;background:#6d3d75dd;color:#fff;border-radius:999px;padding:13px 24px;margin-top:28px;font-size:clamp(15px,2vw,20px);box-shadow:0 0 25px #e995c666}.finale-replay{margin-top:10px;background:#15152acc;border-color:#8c7bb6;font-size:14px}
@keyframes finaleZoom{to{transform:scale(.93);filter:brightness(.34) saturate(.95)}}@keyframes finaleStars{to{opacity:.8}}@keyframes starDrift{to{background-position:90px 45px,70px 110px}}@keyframes moonRise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes shootStar{0%{opacity:0;transform:translate(0,0) rotate(-18deg)}12%{opacity:1}100%{opacity:0;transform:translate(145vw,45vh) rotate(-18deg)}}@keyframes lightAwake{from{opacity:0;transform:scale(.1)}to{opacity:1;transform:scale(1)}}@keyframes pulseLight{50%{transform:scale(1.7);filter:brightness(1.35)}}@keyframes treeGrow{0%{opacity:0;transform:translate(-50%,-43%) scale(.05)}65%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes petalFall{0%{opacity:0;transform:translate3d(0,-10vh,0) rotate(0)}12%{opacity:.9}100%{opacity:0;transform:translate3d(18vw,112vh,0) rotate(540deg)}}@keyframes finaleText{0%{opacity:0;transform:translate(-50%,-42%)}25%,70%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-56%)}}@keyframes coupleAppear{from{opacity:0}to{opacity:1}}@keyframes walkTogetherF{from{transform:translateX(-90px)}to{transform:translateX(4px)}}@keyframes walkTogetherS{from{transform:translateX(90px)}to{transform:translateX(-4px)}}@keyframes heartPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1.2)}}@keyframes endReveal{from{opacity:0;visibility:visible}to{opacity:1;visibility:visible}}
@media(max-width:700px){.finale-island{inset:-18%;width:136%;height:136%}.finale-moon{right:7%;top:8%}.finale-copy{top:43%;font-size:clamp(22px,7vw,36px)}.finale-tree{top:48%}.finale-couple{bottom:15%;gap:24px}.finale-person{transform:scale(.85)}.finale-signature{font-size:clamp(22px,7vw,34px)}.finale-return{width:min(88vw,360px)}}
@media(prefers-reduced-motion:reduce){.epic-finale *{animation-duration:.01ms!important;animation-delay:0s!important}.finale-end{opacity:1!important;visibility:visible!important}}


/* MOBILE PUZZLE TAP RELIABILITY FIX */
.puzzle-piece.loose{
  position:relative;
  min-width:44px;
  min-height:44px;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.puzzle-piece.loose::after{
  content:"";
  position:absolute;
  inset:-5px;
}
@media(max-width:700px){
  .puzzle-piece.loose{min-width:48px;min-height:48px;touch-action:none}
  .puzzle-tray{overflow:visible}
}