*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;font-family:"Segoe UI",Arial,sans-serif;color:#fff}
.birthday-overlay{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;opacity:1;transition:opacity .45s ease}
.birthday-overlay.hidden{opacity:0}
.birthday-card{position:relative;width:min(860px,86vw);min-height:360px;border-radius:38px;padding:44px 54px;text-align:center;background:linear-gradient(160deg,rgba(10,16,38,.92),rgba(34,15,54,.9));border:2px solid rgba(255,220,120,.75);box-shadow:0 26px 90px rgba(0,0,0,.55),0 0 50px rgba(255,210,90,.3);overflow:hidden;animation:cardIn .85s cubic-bezier(.2,1.25,.3,1) both}
.glow{position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(255,214,102,.0),rgba(255,214,102,.26),rgba(142,212,255,.22),rgba(255,119,180,.24),rgba(255,214,102,.0));filter:blur(18px);animation:spin 7s linear infinite;opacity:.9}
.cake,.small,h1,p,.age-pill{position:relative;z-index:2}
.cake{font-size:84px;filter:drop-shadow(0 0 22px rgba(255,214,102,.55));animation:cakeBounce 1.2s ease-in-out infinite}
.small{margin-top:6px;color:#ffd86f;text-transform:uppercase;letter-spacing:.24em;font-weight:1000;font-size:20px;text-shadow:0 0 18px rgba(255,216,111,.34)}
h1{margin:12px 0 8px;font-size:clamp(58px,9vw,112px);line-height:.92;letter-spacing:-3px;text-shadow:0 0 30px rgba(142,212,255,.34)}
p{margin:0 auto;color:#eaf7ff;font-size:clamp(24px,3vw,38px);font-weight:900;max-width:760px;text-shadow:0 3px 12px rgba(0,0,0,.4)}
.age-pill{display:inline-flex;margin-top:24px;padding:12px 22px;border-radius:999px;background:linear-gradient(180deg,#ffe6a0,#ffc64f);color:#221300;font-weight:1000;font-size:24px;box-shadow:0 12px 30px rgba(255,198,79,.25)}
.balloons{position:absolute;inset:0;z-index:1;pointer-events:none}.balloons span{position:absolute;font-size:54px;animation:floatUp 6s ease-in-out infinite;filter:drop-shadow(0 10px 16px rgba(0,0,0,.32))}.balloons span:nth-child(1){left:8%;bottom:-10%;animation-delay:.1s}.balloons span:nth-child(2){left:26%;bottom:-12%;animation-delay:.8s}.balloons span:nth-child(3){right:12%;bottom:-8%;animation-delay:1.4s}.balloons span:nth-child(4){right:31%;bottom:-14%;animation-delay:.45s}.balloons span:nth-child(5){left:50%;bottom:-16%;animation-delay:1.05s}
.confetti{position:absolute;inset:0;z-index:5;overflow:hidden}.piece{position:absolute;width:10px;height:18px;border-radius:4px;top:-30px;animation:confettiFall linear forwards;box-shadow:0 0 12px rgba(255,255,255,.22)}
@keyframes cardIn{0%{transform:translateY(80px) scale(.76) rotate(-4deg);opacity:0}70%{transform:translateY(-8px) scale(1.03) rotate(1deg);opacity:1}100%{transform:translateY(0) scale(1) rotate(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes cakeBounce{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes floatUp{0%{transform:translateY(0) scale(.7) rotate(-8deg);opacity:0}15%{opacity:1}100%{transform:translateY(-115vh) scale(1.15) rotate(12deg);opacity:0}}
@keyframes confettiFall{0%{transform:translate3d(0,-30px,0) rotate(0);opacity:1}100%{transform:translate3d(var(--dx),110vh,0) rotate(820deg);opacity:0}}