*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"DM Sans",sans-serif;color:#f9e9ef;background:#120b15}body{overflow-x:hidden}.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% 0,#4b1834 0,#211020 42%,#0d0910 100%);z-index:0}.stars{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1.5px);background-size:75px 75px;opacity:.25}.hearts{position:absolute;inset:0;overflow:hidden}.float-heart{position:absolute;bottom:-40px;color:#ffd5e4;opacity:.5;animation:floatUp linear forwards;text-shadow:0 0 15px rgba(255,160,195,.6)}@keyframes floatUp{to{transform:translateY(-110vh) rotate(25deg);opacity:0}}#app{position:relative;z-index:1;min-height:100vh}.screen{display:none;min-height:100vh;padding:28px 16px;align-items:center;justify-content:center}.screen.active{display:flex;animation:screenIn .65s ease both}@keyframes screenIn{from{opacity:0;transform:scale(.985) translateY(12px)}to{opacity:1;transform:none}}.card,.final-card{width:min(680px,100%);background:rgba(255,248,251,.96);color:#5c263b;border:1px solid rgba(255,255,255,.45);border-radius:32px;box-shadow:0 30px 100px rgba(0,0,0,.35);padding:36px 30px;position:relative;overflow:hidden}.card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px rgba(255,255,255,.8)}.password-card{text-align:center}.entrance{animation:cardReveal 1s cubic-bezier(.2,.8,.2,1) both}@keyframes cardReveal{from{opacity:0;transform:translateY(35px) scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}.tiny-badge{display:inline-block;background:#fff0f5;border:1px solid #f3c2d2;border-radius:999px;padding:8px 14px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#b63f69}.envelope-wrap{height:105px;position:relative;display:grid;place-items:center}.envelope{font-size:61px;filter:drop-shadow(0 12px 12px rgba(161,45,91,.18));animation:envelopeFloat 2.8s ease-in-out infinite}@keyframes envelopeFloat{50%{transform:translateY(-8px) rotate(2deg)}}.envelope-wrap span,.envelope-wrap i{position:absolute;color:#d0527e;font-style:normal}.envelope-wrap span{top:15px;right:35%;animation:spark 1.7s infinite}.envelope-wrap i{bottom:14px;left:36%;animation:spark 1.9s .4s infinite}@keyframes spark{50%{opacity:.2;transform:scale(.7) rotate(20deg)}}.password-card h1,.final-card h1{font-family:Pacifico,cursive;font-weight:400;font-size:40px;margin:6px 0;color:#b03063}.sub{color:#8b6170;line-height:1.7}.password-wrap{display:flex;align-items:center;border:1.5px solid #e19ab3;border-radius:18px;margin:25px auto 14px;max-width:360px;background:#fff8fa;box-shadow:0 10px 30px rgba(164,45,88,.08)}.password-wrap input{flex:1;border:0;background:transparent;padding:15px 16px;font-size:20px;letter-spacing:.35em;text-align:center;outline:none;color:#9f315b}.eye{border:0;background:transparent;color:#bd5276;font-size:18px;padding:12px 15px;cursor:pointer}.primary,.secondary{border:0;border-radius:999px;padding:14px 25px;font-size:15px;font-weight:800;cursor:pointer;transition:.2s transform,.2s box-shadow}.primary{background:linear-gradient(135deg,#d34b7c,#a9275b);color:white;box-shadow:0 12px 30px rgba(201,62,112,.28)}.primary:hover,.secondary:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(110,30,64,.14)}.secondary{background:#fff0f4;color:#ad3a63;border:1px solid #e8aac0}.error{height:20px;color:#c2385e;font-size:13px}.hintless,.small{font-size:12px;color:#ad8492;margin-top:15px}.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:900;color:#c14c75}.flower-card{text-align:center}.flower-card h2,.music-card h2,.game-card h2{font-family:Pacifico,cursive;font-weight:400;color:#9d3159;font-size:32px;line-height:1.35;margin:8px 0 17px}.cinema-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:#ffd4e3;filter:blur(60px);right:-130px;top:-130px;opacity:.7}.movie-frame{height:min(560px,72vh);min-height:450px;border-radius:27px;position:relative;overflow:hidden;background:#24101d;box-shadow:0 25px 55px rgba(58,15,37,.28),inset 0 0 0 1px rgba(255,255,255,.15)}.scene-backdrop{position:absolute;inset:-8%;background:radial-gradient(ellipse at 50% 58%,rgba(255,207,225,.98) 0 12%,rgba(145,50,86,.78) 34%,transparent 62%),linear-gradient(145deg,#321323,#7e3150 48%,#1b0c18);animation:cameraPush 12s ease-in-out infinite alternate;transform-origin:center}@keyframes cameraPush{to{transform:scale(1.12) translate3d(-1%,1%,0)}}.moon-glow{position:absolute;width:170px;height:170px;border-radius:50%;right:9%;top:7%;background:radial-gradient(circle,#fff8fb 0 7%,rgba(255,222,236,.7) 16%,rgba(255,200,224,.15) 50%,transparent 70%);filter:blur(2px);animation:moonPulse 5s infinite}@keyframes moonPulse{50%{transform:scale(1.08);opacity:.7}}.bokeh{position:absolute;inset:0}.bokeh i{position:absolute;width:var(--s,16px);height:var(--s,16px);border-radius:50%;background:rgba(255,220,234,.65);filter:blur(2px);animation:bokehFloat 7s ease-in-out infinite}.bokeh i:nth-child(1){--s:17px;left:10%;top:19%;animation-delay:-1s}.bokeh i:nth-child(2){--s:9px;left:78%;top:30%;animation-delay:-3s}.bokeh i:nth-child(3){--s:23px;left:17%;top:65%;animation-delay:-5s}.bokeh i:nth-child(4){--s:12px;left:86%;top:73%;animation-delay:-2s}.bokeh i:nth-child(5){--s:7px;left:55%;top:16%;animation-delay:-4s}.bokeh i:nth-child(6){--s:18px;left:69%;top:56%;animation-delay:-6s}.bokeh i:nth-child(7){--s:8px;left:34%;top:34%;animation-delay:-2.5s}@keyframes bokehFloat{50%{transform:translateY(-18px) scale(1.3);opacity:.35}}.mist{position:absolute;width:150%;height:22%;left:-25%;background:rgba(255,235,243,.18);filter:blur(18px);border-radius:50%;z-index:3}.mist-a{bottom:14%;animation:mist 9s ease-in-out infinite}.mist-b{bottom:28%;opacity:.4;animation:mist 12s -4s ease-in-out infinite reverse}@keyframes mist{50%{transform:translateX(10%) scaleY(1.3)}}.bouquet-hero{position:absolute;left:50%;bottom:-1%;width:min(80%,430px);height:83%;transform:translateX(-50%);z-index:5;animation:heroFloat 5s ease-in-out 2s infinite}.bouquet{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center bottom;animation:flowerCamera 10s ease-in-out infinite alternate;filter:drop-shadow(0 28px 22px rgba(20,5,14,.42)) saturate(1.08)}@keyframes flowerCamera{from{transform:scale(1) translateX(-1%) rotate(-.7deg)}to{transform:scale(1.1) translateX(2%) rotate(.8deg)}}@keyframes heroFloat{50%{transform:translateX(-50%) translateY(-8px)}}.bouquet-shadow{position:absolute;width:65%;height:10%;left:17%;bottom:5%;background:rgba(0,0,0,.45);filter:blur(18px);border-radius:50%;animation:shadowPulse 5s infinite}.bouquet-shimmer{position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.7) 42%,transparent 54%);transform:translateX(-120%);mix-blend-mode:screen;animation:shimmer 6s 1.4s ease-in-out infinite}@keyframes shimmer{0%,35%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}@keyframes shadowPulse{50%{transform:scale(.88);opacity:.65}}.cinematic-light{position:absolute;z-index:6;width:170px;height:150%;top:-25%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);transform:rotate(18deg) translateX(-420px);animation:cinemaLight 7s ease-in-out infinite;mix-blend-mode:screen}@keyframes cinemaLight{0%,15%{transform:rotate(18deg) translateX(-420px);opacity:0}35%{opacity:.8}70%,100%{transform:rotate(18deg) translateX(420px);opacity:0}}.camera-beam{position:absolute;z-index:4;width:80%;height:80%;left:10%;top:5%;border-radius:50%;box-shadow:0 0 100px rgba(255,220,235,.15);animation:beam 6s infinite alternate}@keyframes beam{to{transform:scale(1.15);opacity:.5}}.lens-flare{position:absolute;z-index:8;width:35px;height:35px;border-radius:50%;left:20%;top:28%;background:white;box-shadow:0 0 22px 7px rgba(255,220,238,.6),100px 60px 0 -15px rgba(255,200,225,.5);opacity:.7;animation:flare 5s ease-in-out infinite}@keyframes flare{50%{transform:translate(220px,80px);opacity:.25}}.film-grain{position:absolute;inset:-50%;z-index:10;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");animation:grain .2s steps(2) infinite}@keyframes grain{to{transform:translate(2%,1%)}}.vignette{position:absolute;inset:0;z-index:9;background:radial-gradient(ellipse at center,transparent 45%,rgba(5,2,7,.7) 100%);pointer-events:none}.petals{position:absolute;inset:0;z-index:12;pointer-events:none}.petals span{position:absolute;top:-35px;font-size:18px;opacity:0;animation:petalFall 7s linear infinite}.petals span:nth-child(1){left:8%;animation-delay:.2s}.petals span:nth-child(2){left:23%;animation-delay:2.4s}.petals span:nth-child(3){left:40%;animation-delay:1s}.petals span:nth-child(4){left:58%;animation-delay:3.5s}.petals span:nth-child(5){left:72%;animation-delay:.8s}.petals span:nth-child(6){left:86%;animation-delay:4.3s}.petals span:nth-child(7){left:49%;animation-delay:5s}.petals span:nth-child(8){left:31%;animation-delay:6s}@keyframes petalFall{0%{transform:translate(0,0) rotate(0);opacity:0}12%{opacity:.8}100%{transform:translate(70px,600px) rotate(330deg);opacity:0}}.scene-caption{position:absolute;z-index:13;bottom:19px;left:0;right:0;color:#fff;text-shadow:0 2px 14px #160912;font-size:10px;letter-spacing:.3em;font-weight:800}.scene-caption span{font-size:16px;margin-left:8px}.caption{max-width:560px;margin:18px auto 22px;line-height:1.7;color:#7d5665}.letter-card{background:#fff7f0}.letter-top{text-align:center;font-family:Pacifico,cursive;color:#ad3a63;font-size:23px;margin-bottom:16px}.letter-paper{background:repeating-linear-gradient(to bottom,#fffdf9 0,#fffdf9 31px,#f1c8d0 32px);border-radius:18px;padding:24px 22px;min-height:430px;box-shadow:inset 0 0 0 1px #f0d5d8}.letter-paper p{font-size:16px;line-height:2;color:#63394a;white-space:pre-line;margin:0}.cursor{color:#c93e70;animation:blink .8s infinite}@keyframes blink{50%{opacity:0}}.hidden{display:none!important}.music-card{text-align:center}.music-icon{font-size:48px;color:#bf3d6c}.vinyl-wrap{position:relative;width:230px;height:220px;margin:18px auto}.vinyl{position:absolute;left:20px;top:10px;width:190px;height:190px;border-radius:50%;background:repeating-radial-gradient(circle,#26202a 0 2px,#19151b 3px 6px);display:grid;place-items:center;box-shadow:0 18px 35px rgba(0,0,0,.25);animation:spinVinyl 8s linear infinite}.music-card:has(audio:not([paused])) .vinyl{animation-play-state:running}@keyframes spinVinyl{to{transform:rotate(360deg)}}.vinyl-label{width:64px;height:64px;border-radius:50%;background:#e46a93;color:white;display:grid;place-items:center;font-weight:800}.needle{position:absolute;right:18px;top:3px;width:65px;height:9px;background:#6b4b58;border-radius:10px;transform-origin:95% 50%;transform:rotate(27deg);box-shadow:0 3px 5px #0002}.music-card audio{width:100%;max-width:430px;margin:4px 0 20px}.game-card{padding:30px}.game-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#b34b70;letter-spacing:.12em;font-weight:900}.game-head b{letter-spacing:0;background:#fff0f4;border-radius:999px;padding:7px 10px}.question{font-size:18px;line-height:1.55;font-weight:800;color:#6b3148;margin:25px 0 16px}.options{display:grid;gap:11px}.option{background:#fff;border:1.5px solid #efb4c7;border-radius:16px;padding:15px;text-align:left;cursor:pointer;color:#69384a;font-weight:650;transition:.2s}.option:hover{background:#fff3f6;transform:translateX(3px)}.option.correct{background:#eaf9ee;border-color:#77bf8b}.option.wrong{background:#fff0f2;border-color:#e37d99;animation:shake .3s}@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}.feedback{min-height:26px;margin:14px 0;color:#b43b66;font-weight:800;text-align:center}.progress{height:8px;background:#f5d8e1;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;width:33%;background:#cf4774;transition:.35s}.game-rule{text-align:center;font-size:12px;color:#9d7281}.puzzle-card{max-width:900px}.puzzle-board-wrap{position:relative;min-height:580px;background:radial-gradient(circle,#ffeef4,#f7d7e1);border-radius:24px;padding:18px;overflow:hidden;border:1px solid #edb7ca}.puzzle-board{position:absolute;left:18px;top:18px;width:min(58%,520px);aspect-ratio:1;border-radius:18px;overflow:visible;background:linear-gradient(145deg,#f7e0e7,#efd0db);box-shadow:inset 0 0 0 2px rgba(171,76,108,.14),0 15px 30px rgba(108,31,61,.14)}.puzzle-board:before{content:"DROP THE PIECES HERE";position:absolute;inset:0;display:grid;place-items:center;color:rgba(153,79,105,.25);font-size:12px;font-weight:900;letter-spacing:.22em;pointer-events:none}.slot{position:absolute;width:25%;height:25%;background:rgba(255,250,252,.18);z-index:1}.slot svg{position:absolute;inset:-18%;width:136%;height:136%;overflow:visible}.slot path{fill:rgba(255,255,255,.08);stroke:rgba(154,72,103,.34);stroke-width:1.8;stroke-dasharray:4 3}.slot.filled path{opacity:0}.slot.filled{background:transparent}.puzzle-tray{position:absolute;right:18px;top:18px;bottom:18px;width:37%;overflow:hidden;border:1px dashed rgba(173,80,112,.28);border-radius:20px;background:rgba(255,249,252,.28)}.puzzle-tray:before{content:"SCATTERED PIECES";position:absolute;left:0;right:0;top:10px;text-align:center;color:rgba(153,79,105,.45);font-size:10px;font-weight:900;letter-spacing:.16em;pointer-events:none;z-index:2}.puzzle-piece{position:absolute;width:24%;height:24%;background-image:url("assets/puzzle-photo.jpg");background-size:400% 400%;border:0;cursor:grab;touch-action:none;filter:drop-shadow(0 8px 7px rgba(87,26,51,.2));z-index:5;transition:filter .2s,transform .2s}.puzzle-piece:active{cursor:grabbing;filter:drop-shadow(0 14px 13px rgba(87,26,51,.28));z-index:30}.puzzle-piece.locked{cursor:default;z-index:10;filter:drop-shadow(0 4px 3px rgba(87,26,51,.12));animation:snap .45s ease}.puzzle-piece svg{position:absolute;inset:-18%;width:136%;height:136%;overflow:visible;pointer-events:none}.puzzle-piece .art{position:absolute;inset:0;background:inherit;background-size:400% 400%}.puzzle-label{position:absolute;left:20px;bottom:18px;color:#9c6576;font-size:12px;font-weight:700}.puzzle-controls{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;color:#936276;font-size:13px;margin-top:14px}.puzzle-controls button{padding:9px 16px}@keyframes snap{0%{transform:scale(1.08)}55%{transform:scale(.96)}100%{transform:scale(1)}}.code-card{text-align:center}.code-status{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:#956276;font-size:13px;font-weight:700;margin:18px 0 10px}.memory-sequence{min-height:92px;display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0;padding:12px;border-radius:20px;background:linear-gradient(135deg,#fff0f5,#ffe1eb);border:1px dashed #e5a4ba}.memory-sequence span{width:45px;height:45px;display:grid;place-items:center;border-radius:14px;background:white;box-shadow:0 6px 15px rgba(120,35,69,.1);font-size:23px}.memory-sequence .hidden-code{background:#d44c7c;color:white;animation:codeGlow .8s infinite alternate}@keyframes codeGlow{to{transform:scale(1.08);box-shadow:0 0 22px rgba(212,76,124,.45)}}.code-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:17px auto;max-width:390px}.code-btn{height:65px;border:1.5px solid #efb2c6;background:#fff;border-radius:18px;font-size:27px;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}.code-btn:active{transform:scale(.92)}.code-btn.correct-flash{background:#e8f8ed;border-color:#75bb88;transform:scale(1.05)}.code-btn.wrong-flash{background:#fff0f2;border-color:#dd6d8a;animation:shake .3s}.code-btn:disabled{opacity:.48;cursor:default}.final-card{text-align:center;background:linear-gradient(145deg,#fff9fb,#ffe9f1);padding:48px 30px}.final-stars{color:#d0507b;letter-spacing:8px;font-size:20px;animation:starPulse 2s infinite}@keyframes starPulse{50%{transform:scale(1.08)}}.final-card h1{font-size:38px;line-height:1.35}.final-message{max-width:550px;margin:18px auto;line-height:1.8;color:#7b5262}.promise{background:white;border-radius:24px;padding:23px;margin:25px 0;box-shadow:0 12px 30px rgba(130,40,72,.09);display:grid;gap:7px}.promise span{font-size:11px;letter-spacing:.16em;color:#bd5276;font-weight:900}.promise strong{font-family:Pacifico,cursive;font-size:28px;color:#a42e5c;font-weight:400}.promise small{color:#936575}.signature{line-height:1.7;color:#805466}.signature b{font-family:Pacifico,cursive;font-size:24px;color:#a42e5c}@media(max-width:700px){.puzzle-board-wrap{min-height:680px}.puzzle-board{width:92%;left:4%;top:15px}.puzzle-tray{left:4%;right:4%;top:auto;bottom:15px;width:92%;height:210px}.puzzle-piece{width:17%;height:40%;}.puzzle-label{display:none}.movie-frame{min-height:480px;height:68vh}}@media(max-width:520px){.screen{padding:12px}.card,.final-card{padding:26px 18px;border-radius:25px}.password-card h1,.final-card h1{font-size:31px}.flower-card h2,.music-card h2,.game-card h2{font-size:27px}.movie-frame{min-height:470px}.letter-paper{min-height:480px;padding:20px 16px}.letter-paper p{font-size:14px;line-height:1.9}.puzzle-board-wrap{min-height:650px}.code-btn{height:58px}.memory-sequence span{width:40px;height:40px;font-size:20px}}

/* PUZZLE FIX: solved pieces must remain visible above the empty target slots. */
.puzzle-board{isolation:isolate;z-index:1}
.puzzle-board .slot{z-index:1;pointer-events:none}
.puzzle-board .slot.filled{opacity:0}
.puzzle-board .puzzle-piece{z-index:50!important;position:absolute;overflow:visible;visibility:visible;opacity:1}
.puzzle-board .puzzle-piece.locked{z-index:60!important;visibility:visible;opacity:1;pointer-events:none;transform:none!important}
.puzzle-board .puzzle-piece svg{display:block!important;visibility:visible!important;opacity:1!important;overflow:visible!important}
.puzzle-board .puzzle-piece svg image{visibility:visible;opacity:1}

/* PUZZLE V3 — no hidden preview, no slots: free jigsaw assembly */
.puzzle-workspace{min-height:590px;background:radial-gradient(circle at 50% 45%,#fff7fa 0,#f9e2ea 55%,#f3d1dd 100%);border-radius:24px;padding:0;overflow:hidden;border:1px solid #edb7ca;box-shadow:inset 0 0 35px rgba(170,70,105,.08)}
.puzzle-workspace:before{content:"ASSEMBLE THE MOMENT  ·  MATCH THE TABS & GAPS";position:absolute;left:0;right:0;top:15px;text-align:center;color:rgba(153,79,105,.34);font-size:10px;font-weight:900;letter-spacing:.16em;pointer-events:none;z-index:1}
.puzzle-board{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:transparent;box-shadow:none;overflow:visible;isolation:isolate;z-index:2}
.puzzle-board:before{display:none}
.puzzle-tray{display:none!important}
.slot{display:none!important}
.puzzle-piece{width:19%!important;height:19%!important;background:transparent!important;border:0;cursor:grab;touch-action:none;filter:drop-shadow(0 9px 8px rgba(87,26,51,.23));z-index:5;transition:filter .18s}
.puzzle-piece svg{position:absolute;inset:-18%;width:136%;height:136%;overflow:visible;pointer-events:none;display:block!important}
.puzzle-piece:active{cursor:grabbing;filter:drop-shadow(0 15px 13px rgba(87,26,51,.30))}
.puzzle-piece.connected{filter:drop-shadow(0 5px 5px rgba(87,26,51,.16))}
.puzzle-piece.locked{cursor:default;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(87,26,51,.12));animation:snap .4s ease}
@media(max-width:700px){.puzzle-workspace{min-height:590px}.puzzle-piece{width:20%!important;height:20%!important}}
@media(max-width:520px){.puzzle-workspace{min-height:570px}.puzzle-piece{width:20%!important;height:20%!important}}

/* Sliding picture puzzle V4 */
.puzzle-card{max-width:760px}
.slide-puzzle-wrap{display:grid;place-items:center;margin:22px auto 8px;padding:14px;border-radius:24px;background:linear-gradient(145deg,#fff9fb,#f6dce6);border:1px solid #edb7ca;box-shadow:inset 0 0 30px rgba(170,70,105,.07)}
.slide-puzzle{width:min(100%,560px);aspect-ratio:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:3px;background:#3b1728;padding:3px;border-radius:18px;overflow:hidden;box-shadow:0 20px 45px rgba(76,24,47,.24)}
.slide-tile{min-width:0;min-height:0;border:0;padding:0;margin:0;background-repeat:no-repeat;background-size:400% 400%;border-radius:4px;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 2px 5px rgba(30,5,16,.18);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.slide-tile:not(.blank):hover{filter:brightness(1.06);transform:scale(.985);z-index:2}
.slide-tile:not(.blank):active{transform:scale(.96)}
.slide-tile.blank{background:rgba(22,7,15,.75)!important;box-shadow:inset 0 0 0 2px rgba(255,220,232,.08);cursor:default}
.slide-tile.blank:after{content:"";position:absolute;inset:25%;border:1px dashed rgba(255,220,232,.2);border-radius:8px}
.slide-tile.solved{animation:puzzleWin .5s ease both}
@keyframes puzzleWin{50%{filter:brightness(1.35);transform:scale(1.025);box-shadow:0 0 18px rgba(255,180,210,.45)}100%{transform:none}}
@media(max-width:520px){.slide-puzzle-wrap{padding:9px}.slide-puzzle{gap:2px;padding:2px;border-radius:14px}.slide-tile{border-radius:3px}.puzzle-controls{gap:12px}}

/* JIGSAW V6 — small free-form pieces, inspired by classic online jigsaw gameplay */
.puzzle-card{max-width:920px}
.jigsaw-wrap{position:relative;margin:18px auto 10px}
.jigsaw-workspace{position:relative;width:100%;height:720px;overflow:hidden;border-radius:26px;border:1px solid #e8b2c6;background:radial-gradient(circle at 50% 48%,#fff9fb 0,#f9e4ec 54%,#f0cedb 100%);box-shadow:inset 0 0 45px rgba(150,55,90,.09),0 18px 45px rgba(76,24,47,.15);touch-action:none;isolation:isolate}
.jigsaw-workspace:before{content:"FREE JIGSAW  ·  DRAG  ·  MATCH  ·  SNAP";position:absolute;z-index:2;left:0;right:0;top:14px;text-align:center;font-size:9px;letter-spacing:.2em;font-weight:900;color:rgba(141,69,98,.35);pointer-events:none}
.jigsaw-workspace:after{content:"";position:absolute;z-index:1;left:50%;top:50%;width:370px;height:590px;transform:translate(-50%,-50%);border:1px dashed rgba(174,86,116,.10);border-radius:20px;pointer-events:none}
.jigsaw-piece{position:absolute!important;background:transparent!important;border:0!important;padding:0!important;margin:0!important;cursor:grab;touch-action:none;overflow:visible!important;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 7px 6px rgba(74,25,48,.23));transition:filter .15s;will-change:left,top;z-index:10}
.jigsaw-piece svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.jigsaw-piece:hover{filter:drop-shadow(0 10px 8px rgba(74,25,48,.28))}
.jigsaw-piece.dragging{cursor:grabbing;filter:drop-shadow(0 16px 12px rgba(74,25,48,.34));transform:scale(1.035);z-index:1000!important}
.jigsaw-piece.connected{filter:drop-shadow(0 5px 5px rgba(74,25,48,.17))}
.jigsaw-piece.locked{cursor:default;pointer-events:none;animation:jigsawWin .45s ease both}
@keyframes jigsawWin{50%{filter:brightness(1.28) drop-shadow(0 0 12px rgba(211,75,124,.42));transform:scale(1.012)}100%{transform:none}}
.jigsaw-complete{position:absolute;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none;opacity:0;transform:scale(.94);transition:opacity .7s,transform .7s;background:rgba(35,9,22,.16)}
.jigsaw-complete.show{opacity:1;transform:scale(1)}
.complete-photo{position:absolute;width:min(390px,48%);height:min(620px,86%);background:url("assets/puzzle-photo.jpg") center/cover no-repeat;border-radius:22px;box-shadow:0 25px 65px rgba(37,7,23,.35),0 0 0 8px rgba(255,255,255,.75);filter:saturate(1.08);animation:completeReveal 1s ease both}
.complete-glow{position:absolute;font-size:54px;transform:translateY(-110px);filter:drop-shadow(0 8px 18px rgba(211,75,124,.45));animation:heartPop 1.2s ease .25s both}
.jigsaw-complete strong{position:absolute;bottom:28px;background:rgba(255,248,251,.95);color:#9d3159;padding:12px 20px;border-radius:999px;font-family:Pacifico,cursive;font-size:20px;box-shadow:0 10px 30px rgba(50,8,27,.18)}
@keyframes completeReveal{from{clip-path:inset(50% 50% 50% 50% round 22px);opacity:.1}to{clip-path:inset(0 round 22px);opacity:1}}
@keyframes heartPop{from{opacity:0;transform:translateY(-80px) scale(.3)}to{opacity:1;transform:translateY(-110px) scale(1)}}
@media(max-width:700px){.jigsaw-workspace{height:700px}.jigsaw-workspace:after{width:330px;height:540px}.complete-photo{width:340px;height:520px}}
@media(max-width:520px){.jigsaw-workspace{height:650px;border-radius:20px}.jigsaw-workspace:after{width:290px;height:500px}.complete-photo{width:280px;height:500px}.jigsaw-complete strong{bottom:20px;font-size:17px}.complete-glow{transform:translateY(-105px)}}

/* JIGSAW V7 — corrected complementary tabs + separated side trays */
.jigsaw-workspace{height:760px;overflow:hidden;background:radial-gradient(circle at 50% 48%,#fffafc 0,#f8e5ed 52%,#efd0dc 100%)}
.jigsaw-workspace:after{content:"";position:absolute;z-index:1;left:50%;top:50%;width:min(54%,540px);height:calc(100% - 92px);transform:translate(-50%,-48%);border:1px dashed rgba(174,86,116,.20);border-radius:24px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 35px rgba(160,60,95,.04);pointer-events:none}
.jigsaw-workspace:before{content:"PIECES  ·  DRAG TO THE CENTER  ·  MATCH TAB + GAP  ·  SNAP";z-index:3}
.jigsaw-piece{z-index:10!important}
.jigsaw-piece.dragging{z-index:1000!important}
.jigsaw-piece.connected{z-index:40!important}
.jigsaw-piece.locked{z-index:60!important}
@media(max-width:900px){.jigsaw-workspace{height:720px}}
@media(max-width:700px){.jigsaw-workspace{height:700px}.jigsaw-workspace:after{width:52%;height:calc(100% - 88px)}}
@media(max-width:520px){.jigsaw-workspace{height:650px}.jigsaw-workspace:after{width:48%;height:calc(100% - 82px)}}

/* V7 mobile trays: keep the middle open for assembly and avoid initial stacking */
@media(max-width:699px){
  .jigsaw-workspace:after{width:78%;height:46%;top:50%;background:rgba(255,255,255,.10)}
  .jigsaw-piece{filter:drop-shadow(0 5px 5px rgba(74,25,48,.22))}
}
/* Romantic memory-match game */
.memory-card{max-width:720px;text-align:center}
.memory-status{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0 12px;color:#956276;font-size:13px;font-weight:700}
.memory-status span{background:#fff4f7;border:1px solid #f0c1d0;border-radius:999px;padding:8px 12px}
.love-memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:540px;margin:18px auto 20px;perspective:900px}
.love-memory-card{position:relative;height:105px;border:0;padding:0;background:transparent;cursor:pointer;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1);touch-action:manipulation}
.love-memory-card.flipped,.love-memory-card.matched{transform:rotateY(180deg)}
.love-memory-card span{position:absolute;inset:0;display:grid;place-items:center;border-radius:19px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-back{background:linear-gradient(145deg,#d94e80,#a72c5e);color:#fff;font-family:Georgia,serif;font-size:34px;box-shadow:0 10px 22px rgba(123,35,69,.18),inset 0 1px rgba(255,255,255,.35)}
.card-back:after{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.35);border-radius:13px}
.card-face{transform:rotateY(180deg);background:linear-gradient(145deg,#fff,#fff0f5);border:1.5px solid #efb3c7;font-size:39px;box-shadow:0 10px 22px rgba(123,35,69,.12)}
.love-memory-card:hover:not(.matched){transform:translateY(-3px)}
.love-memory-card.flipped:hover:not(.matched),.love-memory-card.matched:hover{transform:rotateY(180deg) translateY(-3px)}
.love-memory-card.matched .card-face{box-shadow:0 0 0 3px rgba(116,190,138,.28),0 10px 25px rgba(80,130,91,.13);animation:memoryMatch .5s ease}
@keyframes memoryMatch{50%{transform:rotateY(180deg) scale(1.08)}100%{transform:rotateY(180deg) scale(1)}}
@media(max-width:520px){.love-memory-grid{grid-template-columns:repeat(3,1fr);gap:9px}.love-memory-card{height:92px}.card-face{font-size:32px}.card-back{font-size:28px}.memory-status{font-size:11px}}

/* GAME 4 · HEART HUNT */
.heart-hunt-card{max-width:900px;text-align:center}
.heart-hunt-scene{position:relative;height:min(600px,68vh);min-height:500px;margin:20px auto 12px;border-radius:28px;overflow:hidden;background:#151226;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 20px 50px rgba(72,23,61,.22)}
.hunt-sky{position:absolute;inset:0;background:radial-gradient(circle at 70% 22%,rgba(255,231,241,.98) 0 3%,rgba(255,201,223,.3) 9%,transparent 23%),linear-gradient(180deg,#171632 0%,#30234b 46%,#6e3d5b 72%,#2a1830 100%)}
.hunt-moon{position:absolute;right:13%;top:9%;font-size:72px;color:#fff5c9;text-shadow:0 0 30px rgba(255,245,201,.8);animation:moonDrift 5s ease-in-out infinite}
@keyframes moonDrift{50%{transform:translateY(-7px) scale(1.04)}}
.hunt-stars{position:absolute;inset:7% 7% auto;text-align:center;color:#fff3d7;opacity:.65;font-size:16px;letter-spacing:12px;animation:starPulse 2.6s infinite}
.hunt-lake{position:absolute;left:-5%;right:-5%;bottom:0;height:40%;background:linear-gradient(180deg,rgba(53,50,84,.45),#1b2038 80%);border-top:1px solid rgba(255,220,235,.2)}
.hunt-lake:after{content:"";position:absolute;left:38%;top:18%;width:30%;height:55%;background:linear-gradient(180deg,rgba(255,218,230,.45),transparent);filter:blur(10px);transform:skewX(-8deg)}
.hunt-bridge{position:absolute;left:25%;right:25%;bottom:20%;height:18%;border-top:7px solid rgba(214,178,183,.72);border-radius:50%;color:transparent;box-shadow:0 -8px 18px rgba(255,210,223,.12)}
.hunt-trees{position:absolute;font-size:180px;line-height:1;filter:drop-shadow(0 15px 12px rgba(0,0,0,.35));opacity:.8;z-index:2}.tree-left{left:-45px;bottom:12%}.tree-right{right:-50px;bottom:10%;transform:scaleX(-1)}
.hunt-lantern{position:absolute;font-size:36px;filter:drop-shadow(0 0 13px rgba(255,214,144,.65));z-index:5;animation:lanternFloat 3s ease-in-out infinite}.l1{left:16%;top:48%}.l2{right:17%;top:54%;animation-delay:-1s}.l3{left:47%;bottom:18%;font-size:30px;animation-delay:-2s}
@keyframes lanternFloat{50%{transform:translateY(-6px)}}
.hunt-rose{position:absolute;font-size:31px;z-index:6;filter:drop-shadow(0 5px 6px rgba(0,0,0,.25));animation:roseSway 4s ease-in-out infinite}.r1{left:26%;bottom:13%}.r2{left:38%;bottom:9%;animation-delay:-1s}.r3{right:28%;bottom:12%;animation-delay:-2s}.r4{right:38%;bottom:18%;animation-delay:-3s}
@keyframes roseSway{50%{transform:translateY(-5px) rotate(4deg)}}
.hidden-heart{position:absolute;z-index:10;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,231,241,.08);color:rgba(255,255,255,.08);font-size:25px;cursor:pointer;transition:.25s;touch-action:manipulation}.hidden-heart:hover{transform:scale(1.25);background:rgba(255,214,229,.18);color:#ffd5e5}.hidden-heart.found{background:#fff0f5;color:#d44776;box-shadow:0 0 0 7px rgba(255,204,224,.14),0 0 28px rgba(255,116,167,.8);animation:foundHeart .65s ease both}.h1{left:33%;top:34%}.h2{right:29%;top:31%}.h3{left:17%;bottom:30%}.h4{right:18%;bottom:28%}.h5{left:50%;bottom:34%}
@keyframes foundHeart{50%{transform:scale(1.45) rotate(8deg)}}
.hunt-message{position:absolute;left:8%;right:8%;top:10%;z-index:8;color:#fff4f7;font-weight:800;font-size:15px;text-shadow:0 2px 14px #120b18;pointer-events:none}
.heart-gate{position:absolute;z-index:20;inset:0;display:none;place-items:center;align-content:center;gap:8px;background:rgba(18,10,24,.56);backdrop-filter:blur(4px);color:white}.heart-gate.show{display:grid;animation:screenIn .6s ease both}.heart-gate .gate-glow{font-size:88px;color:#ffbdd5;text-shadow:0 0 35px #ff77aa;animation:gateBeat 1.4s infinite}.heart-gate strong{font-family:Pacifico,cursive;font-size:31px;font-weight:400}.heart-gate span{font-size:13px;opacity:.9;margin-bottom:10px}.hunt-tip{font-size:12px;color:#9d7281}
@media(max-width:700px){.heart-hunt-scene{height:610px;min-height:610px}.hunt-trees{font-size:125px}.hunt-moon{font-size:55px;right:9%}.hidden-heart{width:44px;height:44px}.h1{left:28%;top:35%}.h2{right:22%;top:30%}.h3{left:12%;bottom:31%}.h4{right:12%;bottom:25%}.h5{left:48%;bottom:33%}}
@media(max-width:520px){.heart-hunt-scene{height:600px;min-height:600px}.hunt-message{top:12%;font-size:13px}.hunt-lantern{font-size:30px}.hunt-rose{font-size:25px}.heart-gate strong{font-size:26px}.heart-gate .gate-glow{font-size:72px}}


/* FLOATING AUDIO CONTROL */
.audio-toggle{position:fixed;right:18px;top:18px;z-index:9999;border:1px solid rgba(255,210,225,.55);background:rgba(39,12,29,.72);color:#fff5f8;padding:10px 14px;border-radius:999px;font:700 12px/1 'DM Sans',sans-serif;letter-spacing:.02em;box-shadow:0 8px 25px rgba(35,8,24,.2);backdrop-filter:blur(12px);cursor:pointer;transition:transform .2s,background .2s}.audio-toggle:hover{transform:translateY(-2px);background:rgba(78,20,49,.82)}.audio-toggle span{margin-left:4px}@media(max-width:520px){.audio-toggle{right:10px;top:10px;padding:9px 11px;font-size:11px}.audio-toggle span{display:none}}

/* CINEMATIC LOVE JOURNEY */
.journey-card{width:min(900px,100%);text-align:center;color:#fff;position:relative;padding:18px 0 8px}
.journey-head{padding:4px 22px 18px;text-shadow:0 4px 24px rgba(0,0,0,.45)}
.journey-head .eyebrow{color:#ffd6e3;margin:0 0 7px}
.journey-head h2{font-family:Pacifico,cursive;font-weight:400;font-size:clamp(28px,6vw,46px);margin:0 0 8px;color:#fff0f5}
.journey-sub{max-width:600px;margin:0 auto;color:#f8dce6;line-height:1.65;font-size:14px}
.journey-frame{width:min(430px,100%);aspect-ratio:9/16;height:auto;margin:0 auto;border-radius:30px;overflow:hidden;position:relative;background:#170a13;box-shadow:0 30px 90px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.14)}
.journey-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.025);transition:transform 8s ease,filter .7s ease;filter:saturate(1.05) contrast(1.03)}
.journey-frame img.journey-change{animation:journeyReveal .9s ease both}
@keyframes journeyReveal{from{opacity:.15;transform:scale(1.08);filter:blur(4px) saturate(.9)}to{opacity:1;transform:scale(1.025);filter:blur(0) saturate(1.05)}}
.journey-vignette{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,3,10,.1),transparent 42%,rgba(7,2,8,.68));pointer-events:none}
.journey-shimmer{position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 42%,rgba(255,231,241,.13) 50%,transparent 58%);animation:journeyShimmer 7s ease-in-out infinite;pointer-events:none}
@keyframes journeyShimmer{0%,65%{transform:translateX(-45%)}100%{transform:translateX(45%)}}
.journey-location{position:absolute;left:18px;bottom:18px;padding:9px 13px;border-radius:999px;background:rgba(18,5,16,.48);border:1px solid rgba(255,225,235,.3);backdrop-filter:blur(10px);font-size:10px;font-weight:900;letter-spacing:.16em;color:#ffe5ed;text-shadow:0 2px 8px #000}
.journey-progress{display:flex;justify-content:center;gap:9px;margin:18px 0 15px}
.journey-progress i{width:8px;height:8px;border-radius:50%;background:rgba(255,214,228,.38);box-shadow:0 0 0 1px rgba(255,255,255,.12);transition:.3s}
.journey-progress i.active{width:26px;border-radius:999px;background:#ffd4e3;box-shadow:0 0 18px rgba(255,190,215,.7)}
.journey-card .primary{box-shadow:0 14px 35px rgba(255,88,145,.24)}
@media(max-width:520px){.journey-card{padding-top:8px}.journey-head{padding:2px 8px 13px}.journey-head h2{font-size:29px}.journey-sub{font-size:12.5px;line-height:1.55}.journey-frame{width:min(100%,400px);border-radius:24px}.journey-location{font-size:9px;left:12px;bottom:12px}.journey-progress{margin:13px 0 12px}}


/* MAGICAL FIREFLY DUST — tiny warm lights drifting gently through the world. */
.magic-dust{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.magic-dust-mote{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:rgba(255,238,165,.95);box-shadow:0 0 7px 2px rgba(255,221,137,.55),0 0 16px 5px rgba(255,181,218,.14);opacity:0;animation:magicDustDrift var(--dur) ease-in-out infinite;will-change:transform,opacity}
@keyframes magicDustDrift{0%{opacity:0;transform:translate3d(0,20px,0) scale(.55)}18%{opacity:.72}45%{opacity:1;transform:translate3d(var(--dx),var(--dy),0) scale(1.15)}72%{opacity:.55}100%{opacity:0;transform:translate3d(calc(var(--dx)*1.35),calc(var(--dy)*1.35),0) scale(.45)}}

/* CINEMATIC POLISH · petals, transitions, depth */
.screen{animation:screenCinematic .7s ease both}
@keyframes screenCinematic{from{opacity:0;transform:translateY(14px) scale(.992);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.petal-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:8}
.falling-petal{position:absolute;top:-50px;opacity:0;color:#ffd4e2;text-shadow:0 0 12px rgba(255,167,202,.55);animation:petalFall var(--dur) linear forwards;will-change:transform,opacity}
@keyframes petalFall{0%{opacity:0;transform:translate3d(0,-40px,0) rotate(0deg) scale(.7)}10%{opacity:.85}50%{opacity:.72;transform:translate3d(calc(var(--drift)*.5),55vh,0) rotate(180deg) scale(1)}100%{opacity:0;transform:translate3d(var(--drift),110vh,0) rotate(390deg) scale(.8)}}
.journey-frame{transform-style:preserve-3d;transition:transform .35s ease,box-shadow .5s ease}
.journey-frame.depth-active{box-shadow:0 34px 100px rgba(0,0,0,.55),0 0 35px rgba(255,171,204,.10),0 0 0 1px rgba(255,255,255,.18)}
.journey-frame img{will-change:transform}
.journey-head,.journey-progress,.journey-card>.primary{transition:transform .35s ease}
.journey-frame:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(255,220,234,.18);box-shadow:inset 0 0 70px rgba(255,170,205,.08)}
.letter-paper{position:relative}
.letter-paper .cursor{display:inline-block;animation:cursorBlink .75s steps(1) infinite;color:#c95b82;font-weight:700}
@keyframes cursorBlink{50%{opacity:0}}
.final-card{position:relative;overflow:hidden}
.final-card:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 50% 38%,rgba(255,173,205,.16),transparent 32%),radial-gradient(circle at 20% 80%,rgba(255,224,188,.09),transparent 25%);animation:finalAura 6s ease-in-out infinite;pointer-events:none}
@keyframes finalAura{50%{transform:scale(1.08);opacity:.75}}
.final-heartburst{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.final-heartburst i{position:absolute;left:50%;top:43%;font-style:normal;font-size:clamp(16px,3vw,28px);color:#ffd3e3;text-shadow:0 0 18px rgba(255,108,167,.9);animation:finalBurst 1.8s cubic-bezier(.15,.75,.2,1) forwards}
@keyframes finalBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1.1)}}
@media(max-width:700px){.journey-frame.depth-active{transform:none}.journey-head,.journey-progress,.journey-card>.primary{transform:none!important}}

/* REALISTIC MAGICAL BUTTERFLIES — four distinct wings, body, antennae and delicate wing veins. */
.magic-butterflies{position:absolute;inset:0;z-index:11;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.magic-butterfly{position:absolute;width:62px;height:52px;display:block;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 0 7px rgba(135,194,255,.58)) drop-shadow(0 0 13px rgba(225,160,255,.30))}
.magic-butterfly svg{width:100%;height:100%;overflow:visible;display:block}
.butterfly-wing{transform-box:fill-box;transform-origin:center right;animation:realWingLeft .42s ease-in-out infinite alternate}
.wing-right{transform-origin:center left;animation-name:realWingRight}
.magic-butterfly path:not(.vein):not(.butterfly-body){fill:rgba(126,191,255,.88);stroke:rgba(255,235,255,.92);stroke-width:1.3;vector-effect:non-scaling-stroke}
.magic-butterfly .wing-right path:not(.vein){fill:rgba(188,132,255,.82)}
.magic-butterfly .vein{fill:none;stroke:rgba(245,250,255,.72);stroke-width:1.25;stroke-linecap:round;vector-effect:non-scaling-stroke}
.magic-butterfly .butterfly-body{fill:#35213f;stroke:#fff0fa;stroke-width:1;vector-effect:non-scaling-stroke}
.magic-butterfly .antenna{fill:none;stroke:#f5d9f0;stroke-width:1.25;stroke-linecap:round;vector-effect:non-scaling-stroke}
.butterfly-glow{position:absolute;left:50%;top:46%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:rgba(255,244,255,.95);box-shadow:0 0 10px 3px rgba(145,210,255,.65),0 0 18px 6px rgba(226,153,255,.28);animation:butterflyCore .9s ease-in-out infinite alternate}
.mb1{left:-10%;top:64%;animation:magicFlight1 14s cubic-bezier(.42,.02,.58,.98) infinite}
.mb2{left:6%;top:30%;animation:magicFlight2 17s 2.4s cubic-bezier(.42,.02,.58,.98) infinite}
.mb3{left:58%;top:72%;animation:magicFlight3 15s 4.8s cubic-bezier(.42,.02,.58,.98) infinite}
.mb4{left:91%;top:22%;animation:magicFlight4 19s 7s cubic-bezier(.42,.02,.58,.98) infinite}
@keyframes realWingLeft{from{transform:rotateY(0deg) rotateZ(2deg)}to{transform:rotateY(67deg) rotateZ(-4deg)}}
@keyframes realWingRight{from{transform:rotateY(0deg) rotateZ(-2deg)}to{transform:rotateY(-67deg) rotateZ(4deg)}}
@keyframes butterflyCore{to{transform:translate(-50%,-50%) scale(1.5);opacity:.55}}
@keyframes magicFlight1{0%{opacity:0;transform:translate(0,0) rotate(-6deg) scale(.62)}8%{opacity:.9}23%{transform:translate(16vw,-12vh) rotate(9deg) scale(.92)}43%{transform:translate(39vw,-2vh) rotate(-8deg) scale(1.02)}63%{transform:translate(62vw,-20vh) rotate(11deg) scale(.94)}82%{opacity:.86;transform:translate(82vw,-5vh) rotate(-6deg) scale(.76)}100%{opacity:0;transform:translate(113vw,-24vh) rotate(10deg) scale(.48)}}
@keyframes magicFlight2{0%{opacity:0;transform:translate(0,0) rotate(8deg) scale(.52)}10%{opacity:.78}28%{transform:translate(21vw,12vh) rotate(-11deg) scale(.94)}49%{transform:translate(45vw,-7vh) rotate(7deg) scale(.82)}72%{transform:translate(69vw,10vh) rotate(-10deg) scale(1)}90%{opacity:.65}100%{opacity:0;transform:translate(109vw,-3vh) rotate(12deg) scale(.48)}}
@keyframes magicFlight3{0%{opacity:0;transform:translate(0,0) rotate(-10deg) scale(.58)}9%{opacity:.86}24%{transform:translate(-13vw,-14vh) rotate(10deg) scale(.96)}46%{transform:translate(-34vw,-25vh) rotate(-7deg) scale(.8)}68%{transform:translate(-56vw,-9vh) rotate(13deg) scale(1.02)}88%{opacity:.72;transform:translate(-76vw,-28vh) rotate(-9deg) scale(.68)}100%{opacity:0;transform:translate(-106vw,-16vh) rotate(9deg) scale(.44)}}
@keyframes magicFlight4{0%{opacity:0;transform:translate(0,0) rotate(8deg) scale(.54)}12%{opacity:.88}30%{transform:translate(-18vw,13vh) rotate(-10deg) scale(.95)}51%{transform:translate(-41vw,2vh) rotate(9deg) scale(.84)}72%{transform:translate(-63vw,20vh) rotate(-8deg) scale(1.02)}91%{opacity:.68;transform:translate(-84vw,7vh) rotate(11deg) scale(.66)}100%{opacity:0;transform:translate(-113vw,25vh) rotate(-13deg) scale(.44)}}
@media(max-width:700px){.magic-butterfly{width:49px;height:42px}}
@media(prefers-reduced-motion:reduce){.magic-butterfly{animation:none!important;opacity:.38}.butterfly-wing,.butterfly-glow{animation:none!important}}

@media(prefers-reduced-motion:reduce){.screen,.falling-petal,.final-heartburst i,.journey-frame img,.journey-shimmer,.final-card:before{animation:none!important;transition:none!important}}

/* BOUQUET SPOTLIGHT — make the surprise feel larger and unmistakably visible. */
.bouquet-hero{
  width:min(94%,520px);
  height:96%;
  bottom:-2%;
  z-index:7;
  animation:heroFloat 5s ease-in-out 2s infinite;
  filter:drop-shadow(0 18px 30px rgba(50,8,28,.20));
}
.bouquet-hero:before{
  content:"";
  position:absolute;
  left:50%;
  top:16%;
  width:72%;
  height:62%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,190,218,.32) 0,rgba(255,220,235,.16) 35%,transparent 72%);
  filter:blur(18px);
  z-index:-1;
  animation:bouquetHalo 5s ease-in-out infinite;
}
.bouquet{
  transform-origin:center 62%;
  filter:drop-shadow(0 30px 28px rgba(15,3,11,.48)) drop-shadow(0 0 22px rgba(255,171,205,.22)) saturate(1.12) contrast(1.03);
  animation:flowerCamera 10s ease-in-out infinite alternate;
}
@keyframes bouquetHalo{50%{transform:translateX(-50%) scale(1.08);opacity:.72}}
@media(max-width:700px){
  .bouquet-hero{width:98%;height:94%;bottom:-1%}
}
@media(max-width:520px){
  .bouquet-hero{width:100%;height:94%;bottom:-1%}
}

/* FINAL BOUQUET FIX — keep the entire bouquet visible on phones and desktop. */
.bouquet-hero{
  left:50%;
  bottom:2%;
  width:min(90%,470px);
  height:88%;
  z-index:7;
}
.bouquet{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  transform-origin:center center;
  animation:bouquetGentleZoom 12s ease-in-out infinite alternate;
}
@keyframes bouquetGentleZoom{
  from{transform:scale(1) translate3d(-.5%,0,0) rotate(-.25deg)}
  to{transform:scale(1.035) translate3d(.5%,-.5%,0) rotate(.25deg)}
}
.bouquet-hero:before{
  left:50%;
  top:18%;
  width:82%;
  height:68%;
  opacity:.52;
}
.bouquet-shadow{
  width:58%;
  left:21%;
  bottom:1%;
}
@media(max-width:700px){
  .bouquet-hero{width:92%;height:87%;bottom:3%}
}
@media(max-width:520px){
  .bouquet-hero{width:92%;height:87%;bottom:3%}
  .bouquet{animation:bouquetGentleZoom 14s ease-in-out infinite alternate}
}

/* FINAL MOBILE BOUQUET CENTERING FIX */
.bouquet-hero{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:5% !important;
  bottom:auto !important;
  width:100% !important;
  height:90% !important;
  transform:translateX(-50%) !important;
  animation:none !important;
  z-index:7 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.bouquet-hero .bouquet{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:82% !important;
  height:94% !important;
  transform:translate(-50%,-50%) !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  animation:none !important;
}
.bouquet-hero:before{
  left:50% !important;
  top:50% !important;
  width:62% !important;
  height:70% !important;
  transform:translate(-50%,-50%) !important;
}
.bouquet-shadow{left:21% !important;width:58% !important;bottom:2% !important}
@media(max-width:700px){
  .bouquet-hero{top:4% !important;height:91% !important;width:100% !important}
  .bouquet-hero .bouquet{width:82% !important;height:94% !important}
}
@media(max-width:520px){
  .bouquet-hero{top:3% !important;height:92% !important}
  .bouquet-hero .bouquet{width:82% !important;height:94% !important}
}

/* IMMERSIVE LOVE JOURNEY — connective cinematic travel layer */
.travel-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 44%,rgba(123,35,78,.15),rgba(10,5,14,.97) 68%);display:grid;place-items:center;overflow:hidden;transition:opacity .55s ease}
.travel-overlay.active{opacity:1;pointer-events:auto}
.travel-overlay.leave{opacity:0}
.travel-stars{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.9) 1px,transparent 1.6px),radial-gradient(circle,rgba(255,190,220,.55) 1px,transparent 1.8px);background-size:78px 78px,137px 137px;opacity:.28;animation:travelStars 7s linear infinite}
@keyframes travelStars{to{background-position:78px 38px,-137px -62px}}
.travel-moon{position:absolute;top:10%;right:12%;font-size:clamp(46px,10vw,100px);color:#fff3f7;text-shadow:0 0 35px rgba(255,220,235,.75);opacity:.9;animation:travelMoon 3s ease-in-out infinite alternate}
@keyframes travelMoon{to{transform:translateY(-8px) scale(1.04);opacity:.72}}
.travel-fireflies{position:absolute;inset:0}
.travel-fireflies i{position:absolute;width:7px;height:7px;border-radius:50%;background:#ffe4ef;box-shadow:0 0 15px 5px rgba(255,182,213,.55);animation:fireflyTravel 2.8s ease-in-out infinite alternate}
.travel-fireflies i:nth-child(1){left:14%;top:25%;animation-delay:-1.1s}.travel-fireflies i:nth-child(2){left:30%;top:70%;animation-delay:-2s}.travel-fireflies i:nth-child(3){left:56%;top:22%;animation-delay:-.4s}.travel-fireflies i:nth-child(4){left:72%;top:65%;animation-delay:-1.7s}.travel-fireflies i:nth-child(5){left:86%;top:35%;animation-delay:-2.5s}.travel-fireflies i:nth-child(6){left:44%;top:82%;animation-delay:-.8s}
@keyframes fireflyTravel{to{transform:translate(22px,-32px) scale(1.5);opacity:.35}}
.travel-road{position:absolute;left:50%;bottom:-8%;width:180px;height:115%;transform:translateX(-50%) perspective(500px) rotateX(58deg);border-left:2px solid rgba(255,207,224,.22);border-right:2px solid rgba(255,207,224,.22);box-shadow:0 0 45px rgba(255,144,190,.08)}
.travel-road:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(255,192,219,.22),transparent 58%);filter:blur(8px)}
.step{position:absolute;left:50%;font-style:normal;color:#ffdce9;font-size:20px;text-shadow:0 0 20px rgba(255,130,180,.9);opacity:0;animation:stepsForward 1.6s ease-in-out infinite}
.s1{bottom:5%;animation-delay:0s}.s2{bottom:22%;animation-delay:.25s}.s3{bottom:39%;animation-delay:.5s}.s4{bottom:56%;animation-delay:.75s}
@keyframes stepsForward{0%{opacity:0;transform:translate(-50%,20px) scale(.65)}30%,65%{opacity:1}100%{opacity:0;transform:translate(-50%,-80px) scale(1.25)}}
.travel-copy{position:relative;z-index:3;width:min(520px,88vw);text-align:center;padding:28px 22px;border-radius:28px;background:rgba(20,7,17,.42);border:1px solid rgba(255,224,236,.18);backdrop-filter:blur(14px);box-shadow:0 25px 80px rgba(0,0,0,.35);transform:translateY(18px) scale(.94);opacity:0;animation:travelCopy .85s .18s cubic-bezier(.2,.8,.2,1) forwards}
.travel-copy span{display:block;font-size:10px;letter-spacing:.28em;font-weight:900;color:#ffd6e5;margin-bottom:10px}.travel-copy strong{display:block;font-family:Pacifico,cursive;font-size:clamp(29px,7vw,52px);font-weight:400;color:#fff2f7;text-shadow:0 4px 25px rgba(0,0,0,.5)}.travel-copy small{display:block;margin-top:10px;color:#f5dce6;line-height:1.6;font-size:13px}
@keyframes travelCopy{to{opacity:1;transform:none}}
.travel-overlay.leave .travel-copy{animation:travelCopyOut .55s ease forwards}
@keyframes travelCopyOut{to{opacity:0;transform:translateY(-18px) scale(1.03)}}

.story-trail{position:fixed;z-index:80;left:50%;bottom:13px;transform:translate(-50%,20px);width:min(620px,92vw);padding:9px 15px;display:flex;align-items:center;justify-content:space-between;gap:6px;border-radius:999px;background:rgba(20,7,17,.55);border:1px solid rgba(255,224,236,.18);backdrop-filter:blur(12px);box-shadow:0 12px 35px rgba(0,0,0,.24);opacity:0;pointer-events:none;transition:.45s ease}
.story-trail.visible{opacity:.94;transform:translate(-50%,0)}.story-trail i{position:relative;z-index:2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;filter:grayscale(1);opacity:.38;transition:.4s ease}.story-trail i.active{filter:none;opacity:1;transform:scale(1.12);background:rgba(255,220,232,.12);box-shadow:0 0 18px rgba(255,170,205,.35)}.trail-line{position:absolute;left:34px;right:34px;top:50%;height:2px;background:rgba(255,215,229,.14);transform:translateY(-50%);z-index:0}.story-trail:after{content:"";position:absolute;left:34px;top:50%;width:calc((100% - 68px) * var(--trail-progress, 0%));height:2px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(255,174,207,.7),rgba(255,226,237,.08));opacity:.6}

.journey-route{position:relative;width:min(560px,88%);height:12px;margin:2px auto 4px;display:flex;align-items:center;justify-content:space-between}.journey-route:before{content:"";position:absolute;left:5px;right:5px;top:5px;height:2px;background:rgba(255,220,234,.2)}.route-fill{position:absolute;left:5px;top:5px;height:2px;width:0;background:linear-gradient(90deg,#ffd5e5,#fff3f7);box-shadow:0 0 12px rgba(255,190,215,.65);transition:width .8s cubic-bezier(.2,.8,.2,1)}.route-dot{position:relative;width:9px;height:9px;border-radius:50%;background:rgba(255,220,234,.3);border:1px solid rgba(255,255,255,.25);transition:.45s}.route-dot.active{background:#ffe3ed;box-shadow:0 0 14px rgba(255,194,218,.9);transform:scale(1.25)}.journey-whisper{min-height:20px;margin:8px 0 9px;color:#f7d9e4;font-size:11px;letter-spacing:.03em;opacity:.82;font-style:italic}
.journey-frame{will-change:transform;transform-style:preserve-3d}.journey-frame.journey-traveling{animation:journeyTravelOut .42s cubic-bezier(.7,0,1,.45) forwards}.journey-frame.journey-travel-next{animation:journeyTravelIn .72s cubic-bezier(.18,.8,.25,1) both}.journey-frame.journey-travel-prev{animation:journeyTravelInPrev .72s cubic-bezier(.18,.8,.25,1) both}
@keyframes journeyTravelOut{to{opacity:.1;transform:scale(1.08) translateY(-12px);filter:blur(5px)}}
@keyframes journeyTravelIn{from{opacity:.2;transform:scale(1.12) translateY(22px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes journeyTravelInPrev{from{opacity:.2;transform:scale(1.08) translateY(-22px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}

/* Give every major chapter a small sense of place without adding clutter. */
#messageScreen .letter-card,#musicScreen .music-card,#quizScreen .game-card,#puzzleScreen .game-card,#heartScreen .game-card,#heartHuntScreen .game-card,#finalScreen .final-card{animation:chapterArrival .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes chapterArrival{from{opacity:0;transform:translateY(24px) scale(.98);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:520px){.story-trail{bottom:8px;padding:7px 9px;gap:2px;width:94vw}.story-trail i{width:25px;height:25px;font-size:11px}.trail-line,.story-trail:after{left:26px;right:26px}.journey-route{width:90%;}.travel-road{width:130px}.travel-copy{padding:22px 16px}.travel-copy small{font-size:12px}}
@media(prefers-reduced-motion:reduce){.travel-overlay,.travel-stars,.travel-moon,.travel-fireflies i,.step,.travel-copy,.journey-frame.journey-traveling,.journey-frame.journey-travel-next,.journey-frame.journey-travel-prev,.story-trail,.route-fill{animation:none!important;transition:none!important}.travel-overlay.active{opacity:1}.travel-copy{opacity:1;transform:none}}

.journey-fireflies{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}.journey-fireflies i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff0a8;box-shadow:0 0 12px 4px rgba(255,214,137,.65),0 0 22px 7px rgba(255,164,207,.12);opacity:.15;animation:journeyFirefly 4.8s ease-in-out infinite;will-change:transform,opacity}.journey-fireflies i:nth-child(1){left:14%;top:67%;animation-delay:-1s}.journey-fireflies i:nth-child(2){left:27%;top:35%;animation-delay:-3s}.journey-fireflies i:nth-child(3){left:43%;top:72%;animation-delay:-.5s}.journey-fireflies i:nth-child(4){left:61%;top:29%;animation-delay:-2.2s}.journey-fireflies i:nth-child(5){left:78%;top:57%;animation-delay:-3.5s}.journey-fireflies i:nth-child(6){left:88%;top:20%;animation-delay:-1.7s}.journey-fireflies i:nth-child(7){left:53%;top:49%;animation-delay:-4s}@keyframes journeyFirefly{0%,100%{opacity:.08;transform:translate(0,8px) scale(.65)}45%{opacity:.95;transform:translate(15px,-18px) scale(1.35)}70%{opacity:.35;transform:translate(-8px,-28px) scale(.8)}}
/* Manual journey: the user controls every image change. */
#journeyBtn{display:inline-flex !important;pointer-events:auto !important;touch-action:manipulation;}
/* FINAL MANUAL JOURNEY: remove progress/trail bars, keep the Begin button */
.story-trail,
.journey-progress{display:none !important;}
.journey-whisper{margin:14px 0 16px;}
.journey-card>.primary{position:relative;z-index:30;pointer-events:auto;touch-action:manipulation;}

/* =========================================================
   IMMERSIVE SCENE MODE — the journey should feel like a place,
   not a slideshow. The scene keeps moving even when the user
   does nothing; navigation remains completely manual.
   ========================================================= */
#journeyScreen{
  position:relative;
  padding:0;
  min-height:100svh;
  background:#09060b;
  overflow:hidden;
}
#journeyScreen:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(255,174,205,.10),transparent 42%),linear-gradient(180deg,rgba(7,3,10,.1),rgba(7,3,10,.65));
  pointer-events:none;z-index:0;
}
.journey-card{
  width:100%;max-width:none;height:100svh;min-height:620px;padding:0;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  position:relative;overflow:hidden;text-align:center;z-index:1;
}
.journey-head{
  position:absolute;left:50%;top:clamp(34px,7vh,82px);transform:translateX(-50%);width:min(760px,92vw);
  z-index:15;padding:0;text-shadow:0 5px 30px rgba(0,0,0,.7);pointer-events:none;
}
.journey-head .eyebrow{color:#ffe0eb;text-shadow:0 0 18px rgba(255,174,208,.45);margin-bottom:8px}
.journey-head h2{font-size:clamp(34px,6vw,62px);line-height:1.1;margin:0 0 10px;color:#fff7fa;text-shadow:0 4px 28px rgba(0,0,0,.7)}
.journey-sub{font-size:clamp(12px,1.7vw,16px);max-width:650px;color:rgba(255,241,246,.92);margin:auto;line-height:1.65;text-shadow:0 3px 16px #000}
.journey-frame{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;
  margin:0!important;border-radius:0!important;background:#09060b!important;box-shadow:none!important;overflow:hidden!important;
  isolation:isolate;transform-style:preserve-3d;z-index:2;
}
.journey-frame:before{
  content:"";position:absolute;inset:-7%;z-index:0;
  background-image:var(--scene-image);background-position:center;background-size:cover;
  filter:blur(22px) saturate(1.18);transform:scale(1.08);opacity:.45;
}
.journey-frame:after{
  content:"";position:absolute;inset:0;border:0;border-radius:0;z-index:12;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 43%,rgba(5,2,8,.12) 67%,rgba(5,2,8,.78) 100%),linear-gradient(180deg,rgba(5,2,8,.42),transparent 22%,transparent 64%,rgba(5,2,8,.88));
  box-shadow:inset 0 0 130px rgba(0,0,0,.45);
}
.journey-frame img{
  z-index:2!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;
  transform:none!important;filter:saturate(1.08) contrast(1.05)!important;
  animation:livingScene 18s ease-in-out infinite alternate!important;
  transition:opacity .7s ease,filter .7s ease!important;
  will-change:transform;
}
@keyframes livingScene{
  0%{transform:scale(1.02) translate3d(0,0,0)!important}
  45%{transform:scale(1.075) translate3d(-1.1%,.45%,0)!important}
  100%{transform:scale(1.12) translate3d(1.1%,-.7%,0)!important}
}
.journey-frame.journey-traveling img{animation:none!important;opacity:.18;filter:blur(4px) saturate(.8)!important}
.journey-frame.journey-travel-next img{animation:sceneArrival .9s ease both!important}
@keyframes sceneArrival{from{opacity:.1;transform:scale(1.14);filter:blur(7px) saturate(.75)!important}to{opacity:1;transform:scale(1.03);filter:saturate(1.08) contrast(1.05)!important}}
.journey-depth-glow{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 50% 52%,rgba(255,220,235,.09),transparent 33%),radial-gradient(circle at 18% 20%,rgba(255,186,211,.10),transparent 24%);mix-blend-mode:screen;animation:depthGlow 7s ease-in-out infinite alternate}
@keyframes depthGlow{to{opacity:.45;transform:scale(1.06)}}
.journey-shimmer{z-index:8!important;inset:-40%!important;background:linear-gradient(112deg,transparent 43%,rgba(255,235,244,.11) 50%,transparent 57%)!important;animation:sceneSweep 10s ease-in-out infinite!important}
@keyframes sceneSweep{0%,52%{transform:translateX(-42%)}100%{transform:translateX(42%)}}
.journey-mist{position:absolute;left:-20%;width:140%;height:18%;border-radius:50%;filter:blur(22px);background:rgba(255,236,244,.11);z-index:7;pointer-events:none}
.jm1{bottom:19%;animation:mistDrift 15s ease-in-out infinite alternate}.jm2{bottom:36%;opacity:.42;animation:mistDrift 20s ease-in-out -7s infinite alternate-reverse}
@keyframes mistDrift{to{transform:translateX(12%) scaleY(1.35)}}
.journey-light-ray{position:absolute;z-index:6;pointer-events:none;left:50%;top:-20%;width:32%;height:145%;transform:translateX(-50%) rotate(8deg);background:linear-gradient(90deg,transparent,rgba(255,226,237,.055),transparent);filter:blur(14px);animation:rayMove 9s ease-in-out infinite alternate}
@keyframes rayMove{to{transform:translateX(-40%) rotate(14deg);opacity:.45}}
.journey-particles{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.journey-particles i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff1b7;box-shadow:0 0 13px 4px rgba(255,210,140,.6);opacity:.1;animation:sceneFirefly 5s ease-in-out infinite}
.journey-particles i:nth-child(1){left:12%;top:61%;animation-delay:-1s}.journey-particles i:nth-child(2){left:23%;top:34%;animation-delay:-3s}.journey-particles i:nth-child(3){left:36%;top:73%;animation-delay:-2s}.journey-particles i:nth-child(4){left:48%;top:28%;animation-delay:-4s}.journey-particles i:nth-child(5){left:61%;top:65%;animation-delay:-.5s}.journey-particles i:nth-child(6){left:72%;top:41%;animation-delay:-2.5s}.journey-particles i:nth-child(7){left:84%;top:66%;animation-delay:-1.7s}.journey-particles i:nth-child(8){left:91%;top:28%;animation-delay:-3.7s}.journey-particles i:nth-child(9){left:54%;top:82%;animation-delay:-.8s}.journey-particles i:nth-child(10){left:17%;top:81%;animation-delay:-4.4s}
@keyframes sceneFirefly{0%,100%{opacity:.06;transform:translate(0,8px) scale(.6)}45%{opacity:.9;transform:translate(13px,-19px) scale(1.3)}70%{opacity:.25;transform:translate(-9px,-30px) scale(.8)}}
.journey-location{z-index:15!important;left:clamp(18px,4vw,54px)!important;bottom:clamp(150px,20vh,210px)!important;background:rgba(8,3,11,.38)!important;border-color:rgba(255,228,238,.35)!important;box-shadow:0 8px 30px rgba(0,0,0,.25),0 0 20px rgba(255,168,202,.12);backdrop-filter:blur(14px);font-size:10px!important}
.journey-meta{position:absolute;z-index:20;left:50%;bottom:clamp(108px,14vh,145px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:rgba(255,232,239,.8);font-size:9px;letter-spacing:.25em;font-weight:900;text-shadow:0 2px 12px #000;pointer-events:none}
.journey-meta span:nth-child(2){color:#ffd2e1;font-size:12px}
.journey-whisper{position:absolute;z-index:20;left:50%;bottom:clamp(78px,10vh,104px);transform:translateX(-50%);width:90%;margin:0;color:rgba(255,238,245,.9);font-size:12px;font-style:italic;text-shadow:0 2px 16px #000;pointer-events:none}
.journey-card>.primary{position:absolute!important;z-index:25;bottom:clamp(18px,4vh,42px);left:50%;transform:translateX(-50%);min-width:220px;border:1px solid rgba(255,237,244,.35);background:rgba(170,37,91,.78);backdrop-filter:blur(14px);box-shadow:0 14px 42px rgba(0,0,0,.34),0 0 30px rgba(255,87,146,.18);font-size:14px;}
.journey-card>.primary:hover{transform:translateX(-50%) translateY(-2px) scale(1.02)}
#journeyScreen .journey-frame.depth-active{box-shadow:none!important}
@media(max-width:700px){
  .journey-head{top:28px;width:94vw}.journey-head h2{font-size:32px}.journey-sub{font-size:12px;max-width:88vw}
  .journey-location{bottom:145px!important;left:14px!important;font-size:8px!important;padding:8px 10px!important}
  .journey-meta{bottom:104px}.journey-whisper{bottom:76px;font-size:10.5px}.journey-card>.primary{bottom:18px;min-width:210px}
}
@media(prefers-reduced-motion:reduce){.journey-frame img,.journey-depth-glow,.journey-shimmer,.journey-mist,.journey-light-ray,.journey-particles i{animation:none!important}}


/* FINAL IMMERSIVE LAYER: tiny living events + discoverable secrets. */
.journey-event{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:hidden;opacity:.9}
.journey-event span{position:absolute;display:block;filter:drop-shadow(0 0 12px rgba(255,220,230,.45));will-change:transform,opacity}
.event-moon{display:none!important;font-size:clamp(54px,8vw,96px);right:9%;top:15%;opacity:.55;animation:moonBreath 7s ease-in-out infinite}
.event-lantern{display:none!important;left:14%;bottom:30%;font-size:28px;opacity:.65;animation:lanternFloat 5s ease-in-out infinite}
.event-butterfly{display:none!important;right:19%;top:48%;font-size:20px;animation:butterflyPath 8s ease-in-out infinite}
.event-petal{display:none!important;left:68%;top:42%;font-size:18px;animation:petalFloat 6s ease-in-out infinite}
.event-bird{display:none!important;left:20%;top:25%;font-size:30px;opacity:.5;animation:birdFly 10s linear infinite}
.event-glow{display:none!important;right:31%;bottom:33%;font-size:22px;color:#ffe7a8;animation:glowPulse 3.5s ease-in-out infinite}
.journey-frame[data-chapter="1"] .event-bird,.journey-frame[data-chapter="2"] .event-moon,.journey-frame[data-chapter="3"] .event-lantern,.journey-frame[data-chapter="4"] .event-butterfly,.journey-frame[data-chapter="5"] .event-petal,.journey-frame[data-chapter="6"] .event-glow,.journey-frame[data-chapter="7"] .event-moon{display:block!important}
@keyframes moonBreath{50%{transform:scale(1.06) translateY(-5px);opacity:.72}}
@keyframes lanternFloat{50%{transform:translateY(-13px) rotate(2deg);filter:drop-shadow(0 0 22px rgba(255,194,112,.7))}}
@keyframes butterflyPath{0%,100%{transform:translate(0,0) rotate(-8deg)}35%{transform:translate(-28px,-24px) rotate(12deg)}70%{transform:translate(18px,12px) rotate(-4deg)}}
@keyframes petalFloat{0%,100%{transform:translate(0,0) rotate(0);opacity:.2}50%{transform:translate(-25px,35px) rotate(80deg);opacity:.8}}
@keyframes birdFly{0%{transform:translateX(-30px);opacity:0}15%,75%{opacity:.5}100%{transform:translateX(70vw);opacity:0}}
@keyframes glowPulse{50%{transform:scale(1.45);opacity:.95;text-shadow:0 0 28px #ffd88a}}
.journey-secret{position:absolute;z-index:24;right:clamp(18px,4vw,52px);bottom:clamp(148px,20vh,208px);width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,232,242,.28);background:rgba(10,5,14,.24);color:rgba(255,226,238,.72);backdrop-filter:blur(10px);font-size:13px;cursor:pointer;opacity:.38;transition:opacity .3s,transform .3s,background .3s;touch-action:manipulation}
.journey-secret:hover,.journey-secret:focus-visible{opacity:1;transform:scale(1.12);background:rgba(170,37,91,.42);outline:none}
.journey-secret-note{position:absolute;z-index:26;right:clamp(18px,4vw,52px);bottom:calc(clamp(148px,20vh,208px) + 44px);width:min(310px,70vw);padding:11px 14px;border:1px solid rgba(255,228,238,.22);border-radius:14px;background:rgba(10,5,14,.72);backdrop-filter:blur(14px);color:#fff1f6;font-size:11px;line-height:1.55;text-align:left;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;transform:translateY(8px) scale(.97);pointer-events:none}
.journey-secret-note.show{animation:secretReveal .45s ease forwards}
@keyframes secretReveal{to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:700px){.journey-secret{bottom:145px;right:14px}.journey-secret-note{right:14px;bottom:190px;width:68vw;font-size:10px}.event-bird{top:22%}}
@media(prefers-reduced-motion:reduce){.journey-event span,.journey-secret-note{animation:none!important}.journey-secret-note.show{opacity:1;transform:none}}