*{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}}


/* 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}
}