*{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-new.webp");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-new2.png") 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}}
/* 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}}
@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);opacity:.15;animation:journeyFirefly 4.8s ease-in-out infinite}.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)}}
/* The journey now starts automatically after the password. */
#journeyBtn{display:none !important;pointer-events:none !important;}
/* FINAL MANUAL JOURNEY: remove progress/trail bars, keep the Begin button */
.story-trail,
.journey-route,
.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;}
/* FINAL LIGHT-PINK ROMANTIC REDESIGN OVERRIDES */
:root{--rose:#d65b84;--rose2:#f39bb8;--ink:#65384b;--cream:#fff8fb}
body{background:#fbeaf1;color:var(--ink)}
.ambient{background:radial-gradient(circle at 50% 0,#fff1f6 0,#f6d8e4 48%,#eac1d2 100%)}
.stars{opacity:.16}.float-heart{color:#d86b92;text-shadow:0 0 15px rgba(255,170,202,.55)}
.card{box-shadow:0 28px 80px rgba(126,48,78,.15),inset 0 1px rgba(255,255,255,.8)}
.password-card{background:linear-gradient(145deg,rgba(255,250,252,.98),rgba(255,232,241,.96))}
.password-card .envelope{filter:drop-shadow(0 10px 14px rgba(190,67,107,.2))}
.primary{background:linear-gradient(135deg,#e4779c,#c84c77);box-shadow:0 12px 28px rgba(196,70,111,.2)}
.primary:hover{filter:brightness(1.05)}
.journey-card{color:#fff;text-shadow:0 2px 16px rgba(65,25,45,.25)}
.journey-frame{box-shadow:0 28px 70px rgba(74,30,53,.25);border:5px solid rgba(255,255,255,.7)}
.journey-frame img{filter:saturate(1.06) contrast(1.02)}
.movie-frame{background:#f2d7e1}
.cinematic-flower .scene-backdrop{background:radial-gradient(circle at 50% 30%,#ffe8f1,#efbfd2 55%,#d79bb5)}
.bouquet-hero .bouquet{content:url("assets/bouquet-new.jpg");width:94%!important;height:92%!important;object-fit:cover!important;object-position:50% 47%!important;border-radius:22px;box-shadow:0 28px 60px rgba(72,20,42,.22)}
.letter-card{background:linear-gradient(145deg,#fffafc,#ffeaf1)}
.letter-paper{background:linear-gradient(145deg,#fffdfc,#fff1f5);box-shadow:0 25px 60px rgba(113,48,72,.12)}
/* Dream game: stars */
.dream-game-card{max-width:860px;text-align:center;background:linear-gradient(145deg,#fffafd,#ffeaf3)}
.game-footer{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;color:#936276;font-size:13px;margin-top:13px}
.star-sky,.constellation-sky{position:relative;height:min(560px,64vh);min-height:450px;margin:20px auto 10px;border-radius:30px;overflow:hidden;background:radial-gradient(circle at 52% 30%,#ffd9e9 0,#9d638d 40%,#44335d 72%,#241d39 100%);box-shadow:inset 0 0 60px rgba(255,210,231,.12),0 22px 50px rgba(73,30,62,.2)}
.star-sky:before,.constellation-sky:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1.2px,transparent 1.8px);background-size:58px 58px;opacity:.35}
.star-moon,.const-moon{position:absolute;right:9%;top:8%;font-size:64px;color:#fff1f6;text-shadow:0 0 28px rgba(255,220,235,.6)}
.star-message{position:absolute;left:50%;top:13%;transform:translateX(-50%);color:#fff7fb;font-family:Georgia,serif;font-style:italic;font-size:18px;white-space:nowrap;text-shadow:0 2px 12px #24162e}
.star-target{position:absolute;width:46px;height:46px;border:0;background:transparent;color:#fff6fa;font-size:29px;display:grid;place-items:center;cursor:pointer;text-shadow:0 0 12px #ffd7e8,0 0 28px #ff9fc4;transition:transform .2s,opacity .2s;z-index:4}
.star-target:hover{transform:scale(1.3)}.star-target.caught{animation:starCatch .5s ease both;opacity:0;pointer-events:none}@keyframes starCatch{to{transform:scale(2.5) rotate(25deg);opacity:0}}
.st1{left:15%;top:30%}.st2{left:38%;top:25%}.st3{right:18%;top:34%}.st4{left:27%;top:55%}.st5{right:34%;top:52%}.st6{left:53%;top:67%}.st7{right:15%;top:72%}.st8{left:10%;top:75%}.st9{right:48%;top:36%}
.star-success,.const-success{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;background:radial-gradient(circle,rgba(255,220,235,.28),rgba(37,20,49,.48));color:white;opacity:0;pointer-events:none;transition:.6s;z-index:8;text-shadow:0 2px 15px #2b1730}.star-success.show,.const-success.show{opacity:1}.star-success strong,.const-success strong{font-family:Pacifico,cursive;font-size:28px;font-weight:400}.star-success span,.const-success span{font-size:13px}
/* Constellation */
.constellation-sky{background:radial-gradient(circle at 50% 35%,#8c6ca0,#43375f 50%,#1f1b37 100%)}
.const-heart{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.2);font-size:120px;color:#ffd9e9;opacity:0;filter:drop-shadow(0 0 22px rgba(255,172,207,.8));transition:.8s}.const-heart.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.const-star{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-weight:800;cursor:pointer;z-index:5;box-shadow:0 0 0 4px rgba(255,255,255,.03),0 0 20px rgba(255,190,220,.15);transition:.2s}.const-star:hover{transform:scale(1.1)}.const-star.lit{background:#ffe0ec;color:#a3345f;box-shadow:0 0 25px rgba(255,176,208,.85);transform:scale(1.12)}.const-star.wrong{animation:shake .25s;border-color:#ff93b5}
.cs1{left:18%;top:60%}.cs2{left:28%;top:43%}.cs3{left:42%;top:34%}.cs4{left:55%;top:42%}.cs5{right:25%;top:58%}.cs6{right:17%;top:39%}.cs7{right:36%;top:27%}.cs8{left:49%;top:70%}
.const-line{position:absolute;inset:0;z-index:3;pointer-events:none}.const-line i{position:absolute;height:2px;background:linear-gradient(90deg,rgba(255,210,231,.15),rgba(255,239,247,.85));transform-origin:left center;box-shadow:0 0 8px rgba(255,190,215,.6)}
/* Final reveal */
#finalScreen{background:radial-gradient(circle at 50% 28%,rgba(255,235,244,.85),rgba(239,188,211,.6) 40%,rgba(104,61,91,.78) 100%)}
.final-card{max-width:900px;min-height:88vh;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,rgba(255,250,252,.96),rgba(255,228,239,.9));border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(8px)}
.final-card:after{content:"";position:absolute;inset:0;background:url("assets/journey-new-02.jpg") center/cover no-repeat;opacity:.09;mix-blend-mode:multiply;pointer-events:none}.final-card>*{position:relative;z-index:2}
.final-card h1{font-family:Georgia,serif;color:#8e3158;font-size:42px}.final-message{color:#704858;font-size:17px}.promise{background:rgba(255,255,255,.72);border:1px solid #f2bfd1}.promise strong{color:#a32f5d}.signature{color:#7c5063}
@media(max-width:520px){.star-sky,.constellation-sky{height:570px;min-height:570px}.star-message{font-size:14px;top:12%}.star-target{width:42px;height:42px}.final-card{min-height:90vh}.final-card h1{font-size:31px}.final-message{font-size:14px}.bouquet-hero .bouquet{width:100%!important;height:88%!important}.game-footer{gap:9px;font-size:11px}}
/* Visible journey navigation — intentionally placed over the artwork so it is always reachable on phones. */
.journey-controls{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:9;pointer-events:none}
.journey-nav{pointer-events:auto;border:1px solid rgba(255,236,244,.48);background:rgba(28,8,23,.62);color:#fff5f8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.12);font:700 12px/1 inherit;letter-spacing:.04em;border-radius:999px;min-height:42px;padding:0 17px;cursor:pointer;transition:transform .22s ease,opacity .22s ease,background .22s ease}
.journey-nav:hover{transform:translateY(-2px);background:rgba(63,19,47,.74)}
.journey-prev{width:42px;padding:0;font-size:20px}
.journey-nav:disabled{opacity:.28;cursor:default;transform:none}
.journey-next{min-width:132px}
.journey-location{bottom:68px!important;max-width:calc(100% - 175px)}
@media(max-width:520px){.journey-controls{left:10px;right:10px;bottom:10px}.journey-nav{min-height:40px;font-size:11px;padding:0 13px}.journey-prev{width:40px;padding:0}.journey-next{min-width:118px}.journey-location{bottom:60px!important;max-width:calc(100% - 145px);font-size:8px!important}}
/* === STORYBOOK / VISUAL-NOVEL MODE === */
body{background:#f7dce8}
.screen{position:relative;padding:14px 10px;overflow:hidden;background:linear-gradient(180deg,rgba(255,244,249,.76),rgba(246,211,226,.92))}
.screen:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.72),transparent 42%);pointer-events:none}
.screen.active{animation:storyPageIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes storyPageIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
#passwordScreen{background:linear-gradient(180deg,rgba(255,235,244,.35),rgba(238,190,211,.8)),url('assets/journey-new-01.jpg') center/cover fixed}
#journeyScreen{background:linear-gradient(180deg,rgba(245,205,221,.62),rgba(242,196,215,.86)),url('assets/journey-new-02.jpg') center/cover fixed}
#flowersScreen{background:linear-gradient(180deg,rgba(252,224,235,.5),rgba(238,190,211,.82)),url('assets/journey-new-03.jpg') center/cover fixed}
#messageScreen{background:linear-gradient(180deg,rgba(250,226,236,.45),rgba(227,190,210,.82)),url('assets/journey-new-05.jpg') center/cover fixed}
#starScreen,#constellationScreen{background:linear-gradient(180deg,rgba(43,24,56,.22),rgba(42,23,51,.5)),url('assets/journey-new-04.jpg') center/cover fixed}
#quizScreen{background:linear-gradient(180deg,rgba(249,220,232,.35),rgba(229,183,205,.72)),url('assets/journey-new-01.jpg') center/cover fixed}
#puzzleScreen{background:linear-gradient(180deg,rgba(247,220,233,.3),rgba(217,174,196,.72)),url('assets/journey-new-07.jpg') center/cover fixed}
#heartScreen{background:linear-gradient(180deg,rgba(248,220,234,.34),rgba(216,173,197,.72)),url('assets/journey-new-05.jpg') center/cover fixed}
#heartHuntScreen{background:linear-gradient(180deg,rgba(38,22,47,.2),rgba(33,18,41,.54)),url('assets/journey-new-06.jpg') center/cover fixed}
#finalScreen{background:linear-gradient(180deg,rgba(247,216,231,.18),rgba(112,61,91,.58)),url('assets/journey-new-07.jpg') center/cover fixed}
.journey-card{width:min(470px,100%);padding:6px 0 12px;text-align:center}
.journey-head{margin-bottom:10px}.journey-head .eyebrow{color:#fff;letter-spacing:.22em;text-shadow:0 2px 14px rgba(65,25,45,.55)}
.journey-head h2{font-family:Georgia,serif;font-size:27px;font-weight:500;margin:5px 0 5px;color:#fff;text-shadow:0 3px 18px rgba(45,16,34,.65)}
.journey-sub{margin:0 auto;max-width:390px;color:rgba(255,247,250,.94);font-size:12px;line-height:1.55;text-shadow:0 2px 10px rgba(45,16,34,.7)}
.journey-frame{width:min(430px,96vw);height:min(76vh,760px);aspect-ratio:9/16;margin:0 auto;border-radius:28px;border:4px solid rgba(255,255,255,.82);box-shadow:0 30px 90px rgba(55,19,43,.38),0 0 0 1px rgba(255,255,255,.25);background:#2a1725}
.journey-frame img{object-position:center;transform:scale(1.015)}
.journey-frame:after{border-color:rgba(255,255,255,.28);box-shadow:inset 0 0 100px rgba(255,190,215,.12)}
.journey-location{font-size:9px!important;letter-spacing:.18em!important;bottom:66px!important;background:rgba(30,10,24,.52)!important;border:1px solid rgba(255,235,244,.38)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:9px 13px!important;border-radius:999px!important}
.journey-controls{bottom:12px;left:11px;right:11px}
.journey-nav{background:rgba(35,10,28,.68);border-color:rgba(255,239,247,.55);box-shadow:0 12px 30px rgba(24,6,20,.35)}
.journey-next{min-width:140px}
#journeyBtn{display:none!important}
.journey-route,.journey-progress{display:none!important}
.journey-whisper{color:#fff;font-size:11px;margin:9px 0 0;text-shadow:0 2px 12px rgba(43,15,32,.65)}
.card.game-card,.letter-card,.flower-card{width:min(680px,96vw);background:rgba(255,247,251,.91);border:1px solid rgba(255,255,255,.72);box-shadow:0 30px 90px rgba(63,25,48,.25),inset 0 1px rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.game-card h2,.flower-card h2{font-family:Georgia,serif;font-weight:500;color:#8f3157}
.game-head{color:#b33e68}
.primary{background:linear-gradient(135deg,#ef8caf,#ca4e79)}
.secondary{background:rgba(255,242,247,.9)}
.movie-frame{height:min(610px,70vh);min-height:440px}
.bouquet-hero .bouquet{content:url('assets/bouquet-new.jpg')}
.letter-paper{font-family:Georgia,serif;font-size:15px;line-height:1.8;color:#654250;max-height:62vh;overflow:auto}
/* Make game scenes feel like panels from the reference storyboard. */
.star-sky,.constellation-sky,.heart-hunt-scene{height:min(560px,64vh);min-height:430px;border:1px solid rgba(255,255,255,.4);box-shadow:0 25px 65px rgba(67,26,57,.22)}
.star-sky{background:linear-gradient(180deg,rgba(31,18,51,.1),rgba(31,18,51,.5)),url('assets/journey-new-04.jpg') center/cover}
.constellation-sky{background:linear-gradient(180deg,rgba(22,15,42,.05),rgba(29,18,48,.52)),url('assets/journey-new-04.jpg') center/cover}
.heart-hunt-scene{background:linear-gradient(180deg,rgba(30,17,44,.12),rgba(30,17,44,.5)),url('assets/journey-new-06.jpg') center/cover}
/* Six discoverable lights for the final mini-game. */
.hidden-heart{background:rgba(255,238,245,.05);color:rgba(255,255,255,.08);text-shadow:0 0 14px rgba(255,222,235,.8)}
.hidden-heart.found{background:rgba(255,248,251,.94);color:#f4b3c9;box-shadow:0 0 0 8px rgba(255,220,234,.13),0 0 34px rgba(255,220,234,.95)}
.h6{right:47%;top:18%}
.h1{left:24%;top:30%}.h2{right:25%;top:28%}.h3{left:14%;bottom:25%}.h4{right:13%;bottom:24%}.h5{left:52%;bottom:31%}
.heart-gate{background:rgba(38,14,32,.68)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,229,240,.35)!important}
.final-card{width:min(860px,95vw);min-height:min(760px,92vh);border-radius:34px;padding:34px 28px;background:linear-gradient(145deg,rgba(255,250,252,.92),rgba(255,222,236,.88));box-shadow:0 35px 100px rgba(61,21,48,.35)}
.final-card h1{font-family:Georgia,serif;font-weight:500;color:#8f3157;text-shadow:0 2px 10px rgba(130,48,83,.12)}
.final-message{max-width:650px;margin:12px auto;color:#704858;line-height:1.85}
.promise{border-radius:24px;padding:20px;margin:16px auto;max-width:600px;box-shadow:0 18px 40px rgba(132,53,84,.09)}
@media(max-width:520px){
.screen{padding:9px 7px}.journey-frame{width:calc(100vw - 22px);height:calc(100vh - 205px);min-height:510px;max-height:680px;border-width:3px}.journey-head h2{font-size:24px}.journey-sub{font-size:11px;max-width:340px}.journey-whisper{font-size:10px}.journey-location{bottom:61px!important}.journey-next{min-width:124px}.journey-nav{min-height:39px}.movie-frame{min-height:430px;height:68vh}.letter-paper{font-size:13px;line-height:1.7;max-height:61vh}.final-card{min-height:92vh;padding:26px 18px}.final-card h1{font-size:29px}.final-message{font-size:14px;line-height:1.75}.star-sky,.constellation-sky,.heart-hunt-scene{min-height:500px;height:62vh}}
/* FINAL POLISH OVERRIDES — one chapter per tap, richer butterfly game, mobile-safe controls */
.journey-frame.journey-traveling{pointer-events:none}
.journey-nav:disabled{opacity:.28;pointer-events:none}
.journey-controls{z-index:30}
.journey-next,.journey-prev{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.journey-next{min-width:155px}
.jigsaw-workspace{touch-action:none}
.butterfly-garden{
position:relative;
height:min(570px,68vh);
min-height:470px;
overflow:hidden;
border-radius:28px;
background:
radial-gradient(circle at 50% 18%,rgba(255,245,250,.9) 0 4%,transparent 15%),
linear-gradient(180deg,#8d6a9e 0%,#d89ab6 35%,#e8b3c5 55%,#4d6674 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 22px 50px rgba(73,30,58,.22);
}
.butterfly-sky{position:absolute;inset:0;background:
radial-gradient(circle at 18% 18%,rgba(255,255,255,.85) 0 2px,transparent 3px),
radial-gradient(circle at 78% 13%,rgba(255,255,255,.8) 0 2px,transparent 3px),
radial-gradient(circle at 64% 28%,rgba(255,225,241,.8) 0 2px,transparent 3px),
linear-gradient(180deg,rgba(48,37,73,.15),transparent 50%);
background-size:auto,auto,auto,100% 100%;
}
.garden-moon{position:absolute;width:92px;height:92px;border-radius:50%;right:12%;top:10%;background:#fff8f4;box-shadow:0 0 45px rgba(255,238,245,.75),0 0 90px rgba(255,198,220,.35)}
.garden-arch{position:absolute;left:50%;top:15%;width:72%;height:58%;transform:translateX(-50%);border:18px solid rgba(255,235,241,.65);border-bottom:0;border-radius:50% 50% 0 0;box-shadow:0 0 35px rgba(255,220,235,.22);opacity:.7}
.garden-lake{position:absolute;left:-5%;right:-5%;bottom:-3%;height:33%;background:linear-gradient(180deg,rgba(113,151,166,.55),rgba(53,91,107,.9));border-radius:50% 50% 0 0/25% 25% 0 0;box-shadow:inset 0 12px 30px rgba(255,218,232,.2)}
.garden-path{position:absolute;left:38%;bottom:-5%;width:25%;height:57%;background:linear-gradient(90deg,rgba(255,230,230,.15),rgba(246,213,219,.85),rgba(255,230,230,.15));clip-path:polygon(37% 0,63% 0,100% 100%,0 100%);filter:blur(.3px)}
.garden-lantern{position:absolute;width:18px;height:28px;border-radius:5px 5px 8px 8px;background:linear-gradient(#fff1bb,#f5a45f);box-shadow:0 0 22px 9px rgba(255,204,145,.55),0 5px 8px rgba(40,15,30,.25)}
.gl1{left:18%;bottom:22%}.gl2{right:19%;bottom:25%}.gl3{left:47%;bottom:14%}
.garden-rose-bed{position:absolute;width:38%;height:20%;bottom:6%;background:
radial-gradient(circle at 15% 55%,#f5a5bd 0 8px,transparent 9px),
radial-gradient(circle at 34% 38%,#e884aa 0 10px,transparent 11px),
radial-gradient(circle at 55% 62%,#f5b4c9 0 9px,transparent 10px),
radial-gradient(circle at 78% 45%,#df729d 0 9px,transparent 10px),
linear-gradient(150deg,transparent 25%,#5f8061 26% 30%,transparent 31% 55%,#658b67 56% 60%,transparent 61%);
filter:drop-shadow(0 10px 10px rgba(47,18,35,.22));
}
.rb1{left:-3%}.rb2{right:-3%;transform:scaleX(-1)}
.garden-haze{position:absolute;left:-10%;width:120%;height:20%;border-radius:50%;background:rgba(255,240,246,.16);filter:blur(18px)}
.haze-one{bottom:31%;animation:butterflyMist 9s ease-in-out infinite}.haze-two{bottom:43%;opacity:.5;animation:butterflyMist 12s -4s ease-in-out infinite reverse}
@keyframes butterflyMist{50%{transform:translateX(7%) scaleY(1.2)}}
.hidden-butterfly{
position:absolute;width:48px;height:40px;padding:0;border:0;background:transparent;cursor:pointer;z-index:12;
filter:drop-shadow(0 5px 10px rgba(71,18,54,.28));touch-action:manipulation;
animation:butterflyFloat 5.5s ease-in-out infinite;
}
.hidden-butterfly i{position:absolute;top:6px;width:21px;height:28px;border-radius:80% 25% 70% 30%;background:radial-gradient(circle at 55% 35%,#fff4f8 0 10%,#f39fc2 42%,#b55d91 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.hidden-butterfly i:first-child{left:1px;transform:rotate(25deg)}.hidden-butterfly i:nth-child(2){right:1px;transform:scaleX(-1) rotate(25deg)}
.hidden-butterfly span{position:absolute;left:21px;top:8px;width:6px;height:25px;border-radius:8px;background:#4c2943;box-shadow:0 0 7px rgba(255,210,232,.45)}
.hidden-butterfly.b1{left:15%;top:28%;animation-delay:-1s}.b2{left:67%;top:24%;animation-delay:-3.2s}.b3{left:48%;top:40%;animation-delay:-2.1s}.b4{left:78%;top:56%;animation-delay:-4.1s}.b5{left:25%;top:61%;animation-delay:-.8s}.b6{left:54%;top:70%;animation-delay:-2.9s}
@keyframes butterflyFloat{0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}50%{transform:translate3d(18px,-16px,0) rotate(5deg)}}
.hidden-butterfly.found{animation:butterflyCatch .55s ease forwards;pointer-events:none}
@keyframes butterflyCatch{to{transform:scale(1.8) translateY(-22px);opacity:0;filter:blur(4px)}}
.butterfly-message{position:absolute;z-index:15;left:50%;bottom:16px;transform:translateX(-50%);width:min(90%,520px);padding:12px 16px;border-radius:999px;background:rgba(50,20,42,.48);backdrop-filter:blur(10px);color:#fff5f8;text-align:center;font-size:13px;line-height:1.45;border:1px solid rgba(255,255,255,.2)}
.butterfly-card .heart-gate{z-index:25}
@media(max-width:600px){
.journey-next{min-width:150px;font-size:14px;padding:13px 19px}
.journey-prev{width:58px;height:58px}
.butterfly-garden{height:540px;min-height:440px}
.garden-arch{width:88%;border-width:12px}
.hidden-butterfly{width:44px;height:38px}
.butterfly-message{font-size:12px;bottom:12px}
}
/* PUZZLE COMPLETION + FINAL SCENE POLISH */
.complete-photo{object-fit:cover;object-position:center;}
.jigsaw-complete{backdrop-filter:blur(2px);}
.jigsaw-complete.show .complete-photo{animation:completeReveal 1s ease both,completePhotoGlow 2.8s ease-in-out 1s infinite alternate;}
@keyframes completePhotoGlow{to{box-shadow:0 28px 70px rgba(37,7,23,.34),0 0 0 8px rgba(255,255,255,.82),0 0 55px rgba(226,90,143,.34)}}
.final-card{isolation:isolate;gap:0;}
.final-rose-orbit{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.final-rose-orbit:before,.final-rose-orbit:after{content:"";position:absolute;border:1px solid rgba(211,75,124,.13);border-radius:50%;left:50%;top:42%;transform:translate(-50%,-50%);}
.final-rose-orbit:before{width:310px;height:310px;animation:orbitPulse 5s ease-in-out infinite;}
.final-rose-orbit:after{width:430px;height:430px;animation:orbitPulse 7s ease-in-out -2s infinite reverse;}
.final-rose-orbit span,.final-rose-orbit i,.final-rose-orbit b{position:absolute;font-style:normal;color:#d34b7c;text-shadow:0 0 20px rgba(211,75,124,.45);opacity:.55;}
.final-rose-orbit span{left:50%;top:20%;font-size:28px;animation:floatRose 4s ease-in-out infinite;}
.final-rose-orbit i{left:17%;top:48%;font-size:16px;animation:floatRose 5s ease-in-out -1s infinite;}
.final-rose-orbit b{right:15%;top:62%;font-size:13px;animation:floatRose 4.5s ease-in-out -2s infinite;}
@keyframes orbitPulse{50%{transform:translate(-50%,-50%) scale(1.05);opacity:.55}}
@keyframes floatRose{50%{transform:translateY(-10px) rotate(12deg);opacity:.9}}
.final-scene{position:relative;width:min(650px,100%);height:220px;margin:10px auto 18px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.8);box-shadow:0 20px 45px rgba(91,30,59,.16);}
.final-scene img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03);animation:finalSceneDrift 12s ease-in-out infinite alternate;}
@keyframes finalSceneDrift{to{transform:scale(1.1) translate3d(-1%,1%,0)}}
.final-scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,14,34,.12),rgba(42,14,34,.62));}
.final-scene-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;text-shadow:0 3px 18px rgba(30,7,22,.55);padding:20px;}
.final-scene-copy span{font-size:10px;letter-spacing:.28em;font-weight:900;}
.final-scene-copy strong{font-family:Georgia,serif;font-size:25px;font-weight:500;margin:9px 0;}
.final-scene-copy small{font-size:13px;opacity:.94;}
.final-card .final-message{position:relative;z-index:2;}
.final-card .promise,.final-card .signature,.final-card #restart,.final-card .final-stars,.final-card .eyebrow,.final-card h1,.final-card .final-scene{position:relative;z-index:2;}
@media(max-width:520px){
.final-scene{height:190px;border-radius:23px;margin-top:8px;}
.final-scene-copy strong{font-size:20px;line-height:1.25;}
.final-scene-copy small{font-size:11px;}
.final-rose-orbit:before{width:240px;height:240px}.final-rose-orbit:after{width:330px;height:330px}
}
/* IMMERSIVE LOVE-WORLD EFFECTS */
.meteor-layer,.butterfly-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.meteor{position:absolute;width:2px;height:90px;border-radius:99px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,235,248,.95));filter:drop-shadow(0 0 8px rgba(255,210,235,.9));transform:rotate(45deg);animation:meteorFly 1.9s linear forwards}
@keyframes meteorFly{from{opacity:0;transform:translate3d(0,0,0) rotate(45deg)}12%{opacity:1}to{opacity:0;transform:translate3d(-520px,520px,0) rotate(45deg)}}
.world-butterfly{position:absolute;width:25px;height:18px;opacity:.72;filter:drop-shadow(0 0 8px rgba(255,170,205,.65));animation:butterflyDrift var(--bd,14s) ease-in-out forwards}
.world-butterfly:before,.world-butterfly:after{content:"";position:absolute;top:1px;width:12px;height:17px;border-radius:90% 20% 75% 25%;background:linear-gradient(145deg,#fff7fb,#f6a7ca 55%,#c75a91);border:1px solid rgba(255,255,255,.6)}
.world-butterfly:before{right:12px;transform-origin:right bottom;animation:wingL .42s ease-in-out infinite alternate}.world-butterfly:after{left:12px;transform-origin:left bottom;transform:scaleX(-1);animation:wingR .42s ease-in-out infinite alternate}
.world-butterfly i{position:absolute;width:3px;height:20px;background:#71405a;border-radius:9px;left:11px;top:0;z-index:2}
@keyframes wingL{to{transform:rotate(-28deg) scale(.8)}}@keyframes wingR{to{transform:rotate(28deg) scale(.8)}}
@keyframes butterflyDrift{0%{opacity:0;transform:translate(-10vw,20vh) rotate(-8deg)}10%{opacity:.75}35%{transform:translate(22vw,-8vh) rotate(9deg)}60%{transform:translate(55vw,14vh) rotate(-5deg)}82%{transform:translate(76vw,-12vh) rotate(8deg)}100%{opacity:0;transform:translate(110vw,12vh) rotate(-8deg)}}
.falling-petal{will-change:transform,opacity;cursor:default;text-shadow:0 0 9px rgba(255,185,212,.5)}
.petal-click-ripple{position:fixed;width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,180,210,.75);pointer-events:none;z-index:80;animation:petalRipple .75s ease-out forwards}
@keyframes petalRipple{to{width:90px;height:90px;margin-left:-40px;margin-top:-40px;opacity:0}}
.journey-frame{perspective:900px;transform-style:preserve-3d}
.journey-frame img{transform:scale(1.035) translate3d(var(--px,0px),var(--py,0px),0);transition:transform .18s ease-out,filter .7s ease;will-change:transform}
.journey-frame.depth-active img{transform:scale(1.08) translate3d(var(--px,0px),var(--py,0px),18px)}
.journey-frame .journey-vignette{transform:translateZ(35px);pointer-events:none}.journey-frame .journey-location,.journey-frame .journey-controls{transform:translateZ(45px)}
.puzzle-cinema{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:radial-gradient(circle at center,rgba(255,223,237,.94),rgba(48,12,31,.98) 72%);opacity:0;visibility:hidden;pointer-events:none;overflow:hidden}
.puzzle-cinema.show{visibility:visible;opacity:1;pointer-events:auto;animation:puzzleCinemaIn .55s ease both}.puzzle-cinema.leave{animation:puzzleCinemaOut .9s ease both}
.puzzle-cinema-photo{position:absolute;width:min(62vw,430px);height:min(78vh,610px);background:url("assets/puzzle-new2.png") center/cover no-repeat;border-radius:26px;box-shadow:0 0 0 7px rgba(255,255,255,.86),0 35px 100px rgba(0,0,0,.45);animation:cinemaPhoto 1.5s cubic-bezier(.18,.8,.2,1) both}
.puzzle-cinema-rays{position:absolute;width:150vmax;height:150vmax;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.0) 0deg 9deg,rgba(255,214,233,.11) 10deg 12deg);animation:raySpin 12s linear infinite}
.puzzle-cinema-copy{position:absolute;bottom:9%;text-align:center;color:white;text-shadow:0 5px 30px rgba(0,0,0,.5);display:grid;gap:8px;padding:0 22px;animation:copyRise 1.1s .25s ease both}.puzzle-cinema-copy span{font-size:10px;letter-spacing:.25em;font-weight:900}.puzzle-cinema-copy strong{font-family:Pacifico,cursive;font-weight:400;font-size:30px}.puzzle-cinema-copy small{font-size:13px;opacity:.9}
@keyframes puzzleCinemaIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}@keyframes puzzleCinemaOut{to{opacity:0;transform:scale(1.06)}}@keyframes cinemaPhoto{from{opacity:0;transform:scale(.72) rotate(-3deg);filter:blur(12px)}to{opacity:1;transform:scale(1) rotate(0);filter:none}}@keyframes copyRise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes raySpin{to{transform:rotate(360deg)}}
@media(max-width:700px){.journey-frame .journey-location,.journey-frame .journey-controls{transform:none}.journey-frame.depth-active img{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.meteor,.world-butterfly,.puzzle-cinema-rays{animation:none!important}.journey-frame img{transition:none!important}}
/* MUSIC CHAPTER · added without changing the existing chapters */
.music-card{max-width:720px;text-align:center}
.music-intro{max-width:560px;margin:0 auto 18px}
.music-cover-wrap{position:relative;width:min(100%,430px);aspect-ratio:2/3;margin:18px auto 20px;border-radius:26px;overflow:hidden;background:#f4d7e2;box-shadow:0 24px 55px rgba(83,27,52,.2),0 0 0 1px rgba(255,255,255,.65)}
.music-cover{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.01);transition:transform 7s ease}
.music-card:hover .music-cover{transform:scale(1.035)}
.music-cover-shine{position:absolute;inset:-25%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);transform:translateX(-55%);animation:musicShine 7s ease-in-out infinite;pointer-events:none}
@keyframes musicShine{0%,58%{transform:translateX(-55%)}100%{transform:translateX(55%)}}
.music-track{display:grid;gap:3px;margin:2px 0 12px;color:#7a4055}
.music-track strong{font-size:18px;color:#9d3159}
.music-track span{font-size:12px;color:#a36e7f}
.music-card audio{display:block;width:min(100%,500px);margin:0 auto 10px;border-radius:999px}
.music-note{font-size:12px;color:#ad788b;margin:8px 0 18px}
@media(max-width:520px){.music-cover-wrap{width:min(100%,350px);border-radius:22px}.music-track strong{font-size:16px}.music-card audio{width:100%}}