*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;font-family:Cairo,Arial,sans-serif;background:#fbf5f0;color:#3d3131}
body{overflow-x:hidden}
.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 18px;background:linear-gradient(180deg,#fffdf9,#fbf2eb)}
.hidden{display:none!important}
.envelope{width:min(88vw,650px);height:min(55vw,360px);min-height:240px;position:relative;background:#cfb79a;box-shadow:0 20px 50px #b89f8b55;border:1px solid #c4a98c;overflow:hidden}
.envelope:before,.envelope:after{content:"";position:absolute;inset:0;border-style:solid;border-width:0 50% 100% 50%;border-color:transparent transparent #d8c3a8 transparent;opacity:.85}
.envelope:after{transform:rotate(180deg);opacity:.38}
.envelope-top{position:absolute;z-index:2;top:-1px;left:0;width:0;height:0;border-left:50% solid transparent;border-right:50% solid transparent;border-top:46% solid #e4d2b9}
.letter{position:absolute;z-index:5;top:18px;left:16%;width:68%;padding:18px 10px;background:#fffdfb;box-shadow:0 4px 12px #8b735044;text-align:center}
.letter small{display:block;letter-spacing:7px;font-size:13px;color:#746b66;margin-bottom:6px}.letter strong{font-family:"Dancing Script",cursive;font-size:31px;direction:ltr;display:block;color:#171414}
.seal{position:absolute;z-index:8;left:50%;top:58%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;border:7px solid #a22d35;box-shadow:0 4px 15px #6b292944;overflow:hidden;background:#704}
.seal img{width:100%;height:100%;object-fit:cover}.stamp{position:absolute;z-index:9;right:20px;top:18px;background:#fff7ef;padding:11px 15px;color:#a93b43;font-size:21px}
.lock-icon{font-size:32px;color:#c48f8e;margin-top:34px}.secret-label{letter-spacing:5px;font-size:14px;color:#766966;margin:13px 0 14px;direction:ltr}
#password{width:min(80vw,460px);padding:16px 22px;border:1px solid #e4d8d0;border-radius:35px;background:#fff;box-shadow:0 5px 18px #ad8f8222;text-align:center;font-size:18px;outline:none}
#unlock,.next{border:0;border-radius:30px;background:linear-gradient(135deg,#cf3e4c,#b82636);color:white;padding:15px 48px;font-size:17px;margin-top:16px;box-shadow:0 8px 20px #b72c3b33;cursor:pointer}
.wrong{opacity:0;color:#c0394b;margin-top:10px;transition:.2s}.wrong.show{opacity:1}
#intro{position:relative;overflow:hidden;background:#fff8f4}.floral{position:absolute;inset:0;background-image:url("photo7.jpg");background-size:cover;background-position:center;filter:blur(2px) saturate(.65);opacity:.42}.floral:after{content:"";position:absolute;inset:0;background:#fff4f4aa}.intro-heart{position:relative;font-size:70px;margin-bottom:70px;z-index:2}.intro-card{position:relative;z-index:2;text-align:center;width:min(90vw,650px);padding:30px 20px;background:#fffaf8aa}.diamond{color:#c8a45a;margin-bottom:22px}.intro-card p{font-size:22px;line-height:2;margin:0 0 35px}.intro-card button{background:#f3dce2;border:1px solid #d7a9b5;color:#45383a;border-radius:32px;padding:14px 55px;font-family:"Dancing Script",cursive;font-size:23px}
#gift{min-height:100vh;background:linear-gradient(180deg,#fffaf7,#f8eee9);padding:24px 16px 165px;position:relative}.top-space{height:22px}.content{width:min(92vw,720px);margin:auto}.slide{display:none;text-align:center;animation:fade .5s ease}.slide.active{display:block}@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.slide img{width:100%;max-height:62vh;object-fit:cover;border-radius:18px;box-shadow:0 10px 30px #80675a22}.slide p{font-size:22px;line-height:1.9;margin:20px auto;color:#463737}.emoji{font-size:70px;margin:50px 0 80px}.message{min-height:180px;display:flex;align-items:center;justify-content:center}.next{display:block;margin:25px auto 30px;background:#f3d7df;color:#49393c;border:1px solid #d6aab6;box-shadow:none;font-family:"Dancing Script",cursive;font-size:24px;padding:12px 55px}
.final-card{padding:70px 25px;background:#fff;border-radius:22px;box-shadow:0 10px 30px #8a6c5a22}.big-heart{font-size:80px}.final-card h2{font-family:"Dancing Script",cursive;font-size:42px}.final-card p{font-size:21px}
.player{position:fixed;z-index:30;bottom:14px;left:50%;transform:translateX(-50%);width:min(94vw,720px);display:flex;align-items:center;gap:8px;padding:12px 14px;background:#fff8f4ee;border:1px solid #e3d4cd;border-radius:30px;box-shadow:0 8px 28px #6e514433;backdrop-filter:blur(10px);direction:ltr}
.player>img{width:48px;height:48px;border-radius:50%;object-fit:cover}.player button{border:0;background:#f3e3e3;width:40px;height:40px;border-radius:50%;cursor:pointer;color:#5a4549}.player #play{background:#e8b7c4;font-size:18px}.track{direction:rtl;flex:1;text-align:right;min-width:0}.track b{font-size:14px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar{height:4px;background:#e6d8d2;border-radius:5px;margin-top:7px;overflow:hidden}.bar span{display:block;height:100%;width:0;background:#c8758a}.time{font-size:10px;color:#9a8880;display:flex;justify-content:space-between;direction:ltr;margin-top:2px}
#hearts{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}.heart{position:absolute;bottom:-30px;font-size:18px;animation:float 4s linear forwards;opacity:.8}@keyframes float{to{transform:translateY(-110vh) rotate(25deg);opacity:0}}
@media(max-width:600px){.envelope{width:90vw;height:56vw;min-height:220px}.letter{top:15px}.letter strong{font-size:26px}.seal{width:68px;height:68px}.secret-label{font-size:11px;letter-spacing:4px}.intro-card p{font-size:18px}.slide p{font-size:18px}.player{gap:5px;padding:8px}.player>img{width:40px;height:40px}.player button{width:34px;height:34px;font-size:11px}}