@import "https://fonts.googleapis.com/css2?family=Pacifico&family=Comic+Neue:wght@700&display=swap";*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,sans-serif}.birthday-page{background:#000;justify-content:center;align-items:center;min-height:100vh;padding:clamp(.75rem,2.5vw,2rem);font-family:system-ui,-apple-system,sans-serif;display:flex;position:relative;overflow:hidden}.audio-prompt{z-index:20;color:#fff;cursor:pointer;background:#000000d1;border:2px solid #f5b513;border-radius:999px;padding:.55rem .9rem;font-size:.92rem;font-weight:700;position:absolute;top:16px;right:16px}.audio-prompt:hover{background:#f5b51338}.audio-prompt:focus-visible{outline-offset:2px;outline:2px solid #fff}.intro-overlay{z-index:12;background:#000;place-items:center;animation:.9s 2.7s forwards intro-fade-out;display:grid;position:absolute;inset:0}.intro-title{color:#fff;letter-spacing:.02em;text-shadow:0 0 10px #f5b513bf,0 0 28px #f5b5138c,0 0 60px #f5b5134d;z-index:2;font-family:Pacifico,cursive;font-size:clamp(2.3rem,9vw,5.2rem)}@keyframes intro-fade-out{to{opacity:0;visibility:hidden}}.googly-layer{z-index:0;pointer-events:none;opacity:.7;position:absolute;inset:0}.googly-pair{transform:translate(-50%, -50%) rotate(var(--pair-rotate,0deg)) scale(var(--pair-scale,1));filter:hue-rotate(var(--pair-hue,0deg)) saturate(1.25);mix-blend-mode:screen;gap:10px;animation:3.4s ease-in-out infinite eye-float;display:flex;position:absolute}.googly-eye{background:#fff;border:1px solid #9b9b9b;border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.googly-pupil{width:16px;height:16px;transform:translate(var(--pupil-x,0), var(--pupil-y,0));background:#111;border-radius:50%;transition:transform 80ms linear}@keyframes eye-float{0%,to{transform:translate(-50%, -50%) rotate(var(--pair-rotate,0deg)) scale(var(--pair-scale,1)) translateY(0)}50%{transform:translate(-50%, -50%) rotate(var(--pair-rotate,0deg)) scale(var(--pair-scale,1)) translateY(-8px)}}.card-container{perspective:1600px;z-index:2;width:min(100vw - 40px,480px)}.card{aspect-ratio:4/5;width:100%;height:auto;transform-style:preserve-3d;cursor:pointer;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);position:relative}.card:not(.flipped):hover{transform:rotateX(4deg)rotateY(-6deg)}.card.flipped:hover{transform:rotateX(4deg)rotateY(174deg)}.card:focus-visible{outline-offset:6px;outline:3px solid #fff}.card.flipped{transform:rotateY(180deg)}.card-face{backface-visibility:hidden;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:3rem;display:flex;position:absolute}.card-face:before{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}.card-front{background:#fff;border:4px solid #f5b513;justify-content:center;align-items:center;padding:0;overflow:hidden;transform:translateZ(1px)}.card-front:before{background:linear-gradient(145deg,#ffffff52 0%,#fff0 45%,#0000001f 100%)}.front-image{object-fit:contain;object-position:center;width:100%;height:100%;display:block}.card-back{background:linear-gradient(135deg,#74b9ff 0%,#0984e3 100%);border:4px solid #f5b513;transform:rotateY(180deg)translateZ(1px)}.card-back:before{background:linear-gradient(145deg,#ffffff38 0%,#fff0 42%,#0518524d 100%)}.card-back .title{color:#f5b513}.emoji{margin-bottom:1rem;font-size:5rem;animation:1s infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.title{color:#2d3436;text-align:center;text-shadow:2px 2px #ffffff80;margin:0 0 1rem;font-family:Pacifico,cursive;font-size:2.5rem}.message{color:#2d3436;text-align:center;margin:0;font-family:Comic Neue,cursive;font-size:1.3rem;font-weight:700;line-height:1.6}.hint{color:#fff;opacity:.95;text-shadow:0 2px 12px #000000a6;font-size:.9rem;font-weight:600;position:absolute;bottom:1rem}.confetti{opacity:0;z-index:1;width:10px;height:10px;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(500px)rotate(720deg)}}@media (width<=520px){.audio-prompt{padding:.45rem .8rem;font-size:.85rem;top:12px;right:12px}.intro-title{text-align:center;padding:0 1rem}.googly-layer{opacity:.48}.googly-eye{width:36px;height:36px}.googly-pupil{width:13px;height:13px}.birthday-page{padding:20px}.card-container{width:100%}.card{aspect-ratio:4/5}.card-face{border-radius:24px;padding:1.5rem}.card-front{padding:0}.title{font-size:2rem}.message{font-size:1.1rem}}