@import "https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap";
:root{--gold:#f5c85b;--blue:#9ce8ff;--ink:#111823;--cream:#fff7dc}*{box-sizing:border-box}html{scrollbar-color:#c99c38 #101722;scrollbar-width:thin}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#101722}::-webkit-scrollbar-thumb{background:linear-gradient(#f5c85b,#9d7324);border:3px solid #101722;border-radius:8px}body{color:var(--cream);background:#101722;margin:0;font-family:Rajdhani,sans-serif}.page-shell{isolation:isolate;background:#0c1118;place-items:center;height:100%;min-height:100svh;padding:clamp(26px,5vw,48px) 16px;display:grid;position:relative;overflow:hidden auto}.page-shell:before,.page-shell:after{content:"";pointer-events:none;position:absolute;inset:0}.page-shell:before{z-index:-3;background:radial-gradient(80% 60% at 50% 0,#263746b3,#0000 70%)}.page-shell:after{z-index:-2;background:radial-gradient(50% 40% at 30% 25%,#f5c85b08,#0000 60%),radial-gradient(40% 35% at 70% 60%,#9ce8ff06,#0000 55%)}.birthday-card{text-align:center;z-index:1;width:min(100%,490px);position:relative}.eyebrow,.name-kicker,.hint{letter-spacing:2px;font-family:Rajdhani,sans-serif}.eyebrow{color:var(--blue);font-size:12px;font-weight:700}.eyebrow span{color:var(--gold);margin:0 10px}.portrait-frame{clip-path:polygon(0 5%,5% 0,95% 0,100% 5%,100% 95%,95% 100%,5% 100%,0 95%);background:linear-gradient(145deg,#f5c85b59,#9ce8ff29);border:1px solid #f5c85bb8;height:330px;margin:16px 0 22px;padding:9px;position:relative}.portrait-image{object-fit:cover;object-position:center top;clip-path:polygon(0 5%,5% 0,95% 0,100% 5%,100% 95%,95% 100%,5% 100%,0 95%);border:1px solid #f5c85b59;width:100%;height:100%;display:block}.portrait-placeholder{height:100%;color:var(--cream);z-index:1;background:linear-gradient(145deg,#f5c85b29,#172d3ccc);border:1px dashed #9ce8ffb3;align-content:center;gap:8px;display:grid;position:relative}.placeholder-icon{color:var(--gold);text-shadow:0 0 26px #f5c85bbf;font-size:64px;line-height:1}.portrait-placeholder strong{font-size:21px;font-weight:700}.portrait-placeholder small{color:#b8c9d0;padding:0 20px;font-size:13px}.portrait-placeholder code{color:var(--blue);direction:ltr;display:inline-block}.portrait-glow{background:var(--gold);filter:blur(20px);opacity:.5;width:80%;height:14px;position:absolute;bottom:-7px;left:10%}.name-kicker{color:var(--gold);margin:0 0 7px;font-size:12px;font-weight:700}h1{color:#fffaf0;margin:0;font-size:clamp(31px,8vw,45px);font-weight:700;line-height:1.15}h1 em{color:var(--gold);text-shadow:0 0 18px #f5c85b40;font-style:normal}.message{color:#d8e3e3;margin:13px 0 18px;font-size:18px;line-height:1.45}.countdown{background:#0d1c2885;border:1px solid #9ce8ff47;margin:0 auto 21px;padding:12px 14px 14px;box-shadow:inset 0 0 22px #9ce8ff0f}.countdown-title{color:var(--gold);letter-spacing:2px;margin:0 0 9px;font-size:12px;font-weight:700}.countdown-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.time-unit{gap:1px;min-width:0;display:grid}.time-unit strong{color:var(--blue);text-shadow:0 0 14px #9ce8ff47;font-size:29px;font-weight:700;line-height:1;animation:2.4s ease-in-out infinite number-glow}.time-unit small{color:#91a7ad;letter-spacing:1px;font-size:10px}.time-unit:last-child strong{animation:1s ease-in-out infinite tick}.cheer-count{gap:0;margin-bottom:18px;display:grid}.cheer-count span{color:var(--blue);text-shadow:0 0 24px #9ce8ff47;font-size:72px;font-weight:700;line-height:.9;animation:3s ease-in-out infinite number-glow}.cheer-count small{color:#9baab1;letter-spacing:1px;font-size:12px}.button-wrap{width:min(100%,350px);margin:0 auto;position:relative}.cheer-button{border:2px solid var(--gold);width:100%;min-height:62px;color:var(--ink);background:linear-gradient(135deg, #ffe59a, var(--gold));cursor:pointer;letter-spacing:1px;border-radius:4px;font:700 20px Rajdhani,sans-serif;transition:transform .16s,box-shadow .16s,filter .16s;animation:3.5s ease-in-out infinite button-breathe;box-shadow:0 9px #a77d25,0 0 25px #f5c85b3d}.cheer-button:hover{filter:brightness(1.06);transform:translateY(-3px);box-shadow:0 12px #a77d25,0 0 35px #f5c85b66}.cheer-button:active{transform:translateY(5px);box-shadow:0 4px #a77d25}.cheer-button:disabled{cursor:wait;opacity:.7;animation:none}.button-star{color:#986c11;margin:0 15px}.click-spark{z-index:2;pointer-events:none;animation:spark-burst var(--duration,.7s) cubic-bezier(.15, .7, .3, 1) forwards;will-change:transform, opacity;-webkit-user-select:none;user-select:none;font-style:normal;position:absolute;top:50%;left:50%}.hint{color:#8da6ad;letter-spacing:1px;margin:20px 0 0;font-size:13px}.error{color:#ffab9e;font-size:13px}.site-footer{text-align:center;margin-top:32px}.footer-line{background:linear-gradient(90deg,#0000,#f5c85b40,#0000);width:120px;height:1px;margin:0 auto 10px}.footer-link{color:#ffffff4d;letter-spacing:1.5px;text-transform:uppercase;font-size:11px;text-decoration:none;transition:color .2s}.footer-link:hover{color:#fff9}@keyframes number-glow{0%,to{opacity:.82;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}@keyframes tick{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes button-breathe{0%,to{box-shadow:0 9px #a77d25,0 0 25px #f5c85b3d}50%{box-shadow:0 9px #a77d25,0 0 34px #f5c85b6b}}@keyframes spark-burst{0%{opacity:1;transform:translate(-50%, -50%) rotate(var(--angle)) translateX(6px) scale(.4) rotate(0deg)}60%{opacity:1}to{opacity:0;transform:translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(var(--scale,1.3)) rotate(var(--spin,180deg))}}@keyframes emoji-fall{0%{transform:translateY(-40px)translate(0)rotate(0)}25%{transform:translateY(25vh) translateX(var(--sway,20px)) rotate(8deg)}50%{transform:translateY(50vh) translateX(calc(var(--sway,20px) * -.5)) rotate(-5deg)}75%{transform:translateY(75vh) translateX(var(--sway,20px)) rotate(6deg)}to{transform:translateY(110vh)translate(0)rotate(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (max-width:520px){.portrait-frame{height:clamp(200px,55vw,280px)}.message{font-size:16px}.cheer-count span{font-size:clamp(52px,15vw,72px)}.button-wrap{width:100%}.cheer-button{min-height:56px;font-size:18px}}@media (max-width:380px){.page-shell{padding:20px 12px}.portrait-frame{height:clamp(180px,50vw,240px)}.countdown{padding-inline:8px}.countdown-grid{gap:3px}.time-unit strong{font-size:22px}.time-unit small{letter-spacing:.5px;font-size:9px}.button-star{margin:0 6px}.cheer-button{min-height:52px;font-size:16px}}