* {
                 box-sizing: border-box;
            }
            body{
                background-color:#e6d6ff;
                font-family:Arial,sans-serif;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
            }
            h1{
                color:#a020a0;
                font-size:15px;
            }
            p{
                color:#5e356f;
                font-size:8px;
            }
            button{
                background-color:#8b3dba;
                color:white;
                font-size:8px;
                padding: 6px 10px;
                border:none;
                border-radius: 25px;
                cursor:pointer;
                transition: background-color 0.3s ease;
            }
            button:hover{
                background-color: hotpink;
            }
            #noButton{
                transition:left 0.15s ease, top 0.15s ease;
            }
            .card{
                background-color: white;
                width: 70%;
                max-width: 450px;
                padding: 30px;
                border-radius: 20px;
                margin: 5px auto;
                box-shadow:0 8px 25px rgba(80,30,100,0.15);
                box-sizing: border-box;
                animation:appear 1s ease;
                transition: transform 0.3s ease;
            }
            .card:hover{
                transform: translateY(-5px);
            }
            @keyframes appear{
                from{
                    opacity: 0;
                    transform: translateY(20px);
                }
                to{
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            .popup-overlay{
                position: fixed;
                inset: 0;
                background-color: rgba(30,10,50,0.65);
                display:flex;
                justify-content:center;
                align-items: center;
                z-index:1000;
                padding:20px;
            }
            .popup-box{
                background-color: #fff0fa;
                padding:15px;
                width:50%;
                max-width: 340px;
                border-radius: 24px;
                box-shadow: 0 10px 35px rgba(30,10,50,0.3);
                animation:popIn 0.3s ease;
            }
            #reactionEmoji{
                font-size:55px;
                margin-bottom:5px;
                animation:reactionBounce 0.6s ease;
            }
            @keyframes reactionBounce{
                0%{
                    transform:scale(0.5);
                }
                60%{
                    transform:scale(1.2);
                }
                100%{
                    transform:scale(1);
                }
            }
            .popup-box h2{
                color:#a020a0;
                font-size:15px;
            }
            .popup-box p{
                color:#5e356f;
                font-size: 7px;
                line-height: 1.5;
            }
            @keyframes popIn{
                from{
                    opacity:0;
                    transform:scale(0.8);
                }
                to{
                    opacity:1;
                    transform:scale(1);
                }
            }
            /* Birthday cake */
            #birthdayCake{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 50%;
                margin: 8px auto;
            }
            #cakeEmoji{
               font-size:70px;
                margin:8px 0;
                animation: cakeBounce 1.5s infinite ease-in-out; 
            }
            #cakeGif{
                display: block;
                width: 40px;
                height: auto;
                margin: 0 auto;
                object-fit: contain;
            }
            /* Gentle cake animation */
            @keyframes cakeBounce{
                0%, 100%{
                    transform:translateY(0);
                }
                50%{
                    transform: translateY(-10px);
                }
            }
            /* Celebration message */
            #celebration{
                font-size: 10px;
                margin-top: 5px;
                line-height:1.8;
            }
            /* Floating hearts animation */
            @keyframes floatHearts{
                0%{
                    transform: translateY(0) rotate(0deg);
                    opacity: 0;
                }
                20%{
                    opacity: 1;
                }
                100%{
                    transform:translateY(-300px) rotate(25deg);
                    opacity: 0;
                }
            }
            .floating-heart{
                position:fixed;
                bottom:-30px;
                font-size:25px;
                pointer-events:none;
                animation:floatHearts 4s linear forwards;
                z-index:1;
            }
            /* Bouncing sticker animation */
            @keyframes bounce {
                0%, 100%{
                    transform: translateY(0);
                }
                50%{
                    transform: translateY(-20px);
                }
            }
            .bouncing-sticker{
                display: inline-block;
                width: 60px;
                height: auto;
            }
            .popup-sticker{
                width: 60px;
                height:auto;
                margin-bottom: 5px;
            }
            .question-sticker{
                width:60px;
                height:auto;
                display:block;
                margin:3px auto;
            }
            #birthdayScreen{
                position: relative;
                overflow: hidden;
            }
            .birthday-decorations{
                position: absolute;
                top:0;
                left:0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index:0;
            }
            .floating-hearts{
                position: absolute;
                width: 50px;
                right: 10px;
                top: 20px;
            }
            /* Letter Screen */
            #letterScreen{
                position: fixed;
                inset:0;
                width:100%;
                min-height:100vh;
                overflow-y:auto;
                padding:30px 15px;
                background:#fce8ef;
                display:none;
                justify-content:center;
                align-items:center;
                z-index:1000;
            }
            /* The paper */
            .letter-paper{
                width:100%;
                max-width:500px;
                margin: auto;
                padding:35px 25px;
                background:#fffaf0;
                color:#59434a;
                border:1px solid #ead8b9;
                border-radius:4px;
                box-shadow:0 12px 35px rgba(80,45,50,0.18);
                position: relative;
                transform-style: preserve-3d;
            }
            /* Letter text */
            .letter-content{
                font-family:Georgia, serif;
                font-size:17px;
                line-height:1.9;
                overflow-wrap:anywhere;
            }
            .letter-content h1{
                font-size: 27px;
                color:#b85c78;
                text-align:center;
                margin-bottom:25px;
            }
            .letter-fold{
                position:absolute;
                left: 0;
                width:100%;
                height:50%;
                background:#fffaf0;
                border:1px solid #ead8b9;
                z-index:2;
                backface-visibility: hidden;
            }
            .letter-fold-top{
                top:0;
                transform-origin: top center;
                animation:openTop 1.2s ease-in forwards;
            }
            .letter-fold-bottom{
                bottom: 0;
                transform-origin: bottom center;
                animation: openBottom 1.2s ease-in forwards;
            }
            @keyframes openTop{
                from{
                    transform: rotateX(0deg);
                }
                to{
                    transform: rotateX(90deg);
                }
            }
            @keyframes openBottom{
                from{
                    transform:rotateX(0deg);
                }
                to{
                    transform:rotateX(-90deg);
                }
            }
            .letter-greeting{
                font-size:21px;
                font-weight:bold;
            }
            .letter-ending{
                margin-top:30px;
                text-align:right;
                font-style: italic;
            }
            /* Paper unfolding animation */
            @keyframes unfoldLetter{
                0%{
                    transform: perspective(800px) rotateX(-75deg) scaleY(0.2);
                    opacity: 0;
                }
                60%{
                    transform: perspective(800px) rotateX(10deg) scaleY(1.02);
                    opacity:1;
                }
                100%{
                    transform: perspective(800px) rotateX(0deg) scaleY(1);
                    opacity: 1;
                }
            }