*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}:root{--safe-top: env(safe-area-inset-top);--safe-right: env(safe-area-inset-right);--safe-bottom: env(safe-area-inset-bottom);--safe-left: env(safe-area-inset-left)}body{width:100%;height:100dvh;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#ffeef8 0%,#ffc9e5 100%)}#app{width:100%;height:100dvh;position:relative;overflow:hidden}.screen{position:absolute;width:100%;height:100dvh;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .8s ease;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}.screen.active{opacity:1;pointer-events:auto}#initial-screen{background:linear-gradient(135deg,#ffeef8 0%,#ffc9e5 100%)}.birthday-title{font-size:3rem;color:#ff69b4;text-align:center;margin-bottom:3rem;animation:glow 2s ease-in-out infinite;text-shadow:0 0 20px rgba(255,105,180,.5)}@keyframes glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.gift-button{font-size:6rem;background:none;border:none;cursor:pointer;animation:bounce 1.5s ease-in-out infinite;min-width:44px;min-height:44px;padding:20px}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}#celebration-screen{background:linear-gradient(135deg,#fff5f8 0%,#ffe4f0 100%);position:relative}.celebration-message{font-size:2.5rem;color:#ff1493;text-align:center;z-index:100;text-shadow:0 2px 10px rgba(255,20,147,.3);animation:fadeInScale 1s ease-out}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}#confetti-container,#balloons-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50}.confetti{position:absolute;width:10px;height:10px;opacity:0}.balloon{position:absolute;font-size:3rem;opacity:0}#clue-container{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;pointer-events:none}#clue-container.show{opacity:1;pointer-events:auto;animation:fadeIn 1s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.clue-text{position:absolute;top:50%;left:50%;transform:translate(-50%,60px);font-size:.9rem;color:#ff69b4;opacity:.6;text-align:center}.hint{position:absolute;font-size:.7rem;color:#ff1493;opacity:.2}.hint-top-right{top:calc(var(--safe-top) + 20px);right:calc(var(--safe-right) + 20px)}.hint-bottom-right{bottom:calc(var(--safe-bottom) + 20px);right:calc(var(--safe-right) + 20px)}.hint-bottom-left{bottom:calc(var(--safe-bottom) + 20px);left:calc(var(--safe-left) + 20px);cursor:pointer;opacity:.1}.hint-bottom-left:active{text-shadow:0 0 10px rgba(255,20,147,.8)}#envelope-screen{background:linear-gradient(135deg,#faf3e0 0%,#f5e6d3 100%)}.envelope{position:relative;width:280px;height:180px;cursor:pointer;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.envelope-body{position:absolute;width:100%;height:100%;background:#dc143c;border-radius:4px;box-shadow:0 4px 20px #0003}.envelope-flap{position:absolute;top:0;left:0;width:100%;height:50%;background:#c41230;transform-origin:top center;border-radius:4px 4px 0 0;clip-path:polygon(0 0,50% 70%,100% 0);transition:transform .8s ease;z-index:2}.envelope.open .envelope-flap{transform:rotateX(180deg)}#letter-screen{background:linear-gradient(135deg,#f5f0e8 0%,#e8dcc8 100%);overflow-y:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;padding-top:calc(var(--safe-top) + 40px);padding-bottom:calc(var(--safe-bottom) + 40px)}.letter-container{width:100%;max-width:500px;padding:0 20px}.letter-paper{background:linear-gradient(135deg,#fffef7 0%,#f9f6ed 100%);padding:40px 30px;border-radius:8px;box-shadow:0 8px 30px #00000026;position:relative}.letter-paper:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(139,69,19,.03) 29px,rgba(139,69,19,.03) 30px);pointer-events:none;border-radius:8px}.letter-content{font-family:Brush Script MT,cursive,serif;color:#4a3728;line-height:1.8;position:relative;z-index:1}.letter-salutation{font-size:1.8rem;margin-bottom:1.5rem;font-weight:700}.letter-paragraph{font-size:1.1rem;margin-bottom:1.5rem;text-align:justify}.letter-closing{font-size:1.4rem;margin-top:2rem;text-align:right;font-style:italic}.kiss-button{margin-top:3rem;width:100%;padding:18px;font-size:1.5rem;background:linear-gradient(135deg,#ff1493 0%,#ff69b4 100%);color:#fff;border:none;border-radius:50px;cursor:pointer;min-height:44px;box-shadow:0 4px 15px #ff149366;transition:transform .2s}.kiss-button:active{transform:scale(.95)}#kiss-screen{background:linear-gradient(135deg,#ffe5f0 0%,#ffc9e5 100%);position:relative}.kiss-symbol{font-size:8rem;opacity:0;animation:kissAppear 1s ease-out forwards}@keyframes kissAppear{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}#hearts-container{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;z-index:10}.heart{position:absolute;font-size:2rem;opacity:0}.final-message{position:absolute;bottom:calc(var(--safe-bottom) + 60px);font-size:2rem;color:#ff1493;text-shadow:0 2px 10px rgba(255,20,147,.5);opacity:0;animation:finalFade 2s ease-in 2s forwards}@keyframes finalFade{to{opacity:1}}