.screen{--pink: #f472b6;--hot: #ec4899;--blush: #fce7f3;--cream: #fdf6ee;--deep: #831843}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fdf6ee;font-family:Space Mono,monospace;overflow:hidden}.fade-enter-active,.fade-leave-active{transition:opacity .5s ease}.fade-enter-from,.fade-leave-to{opacity:0}.pop-enter-active{transition:all .7s cubic-bezier(.34,1.56,.64,1)}.pop-enter-from{opacity:0;transform:scale(.85) rotate(-2deg)}@keyframes float{0%,to{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-15px) rotate(5deg)}}@keyframes wiggle{0%,to{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@keyframes pop{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes walkAcross{0%{left:-120px}to{left:calc(100% + 120px)}}@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes legL{0%,to{transform:rotate(20deg)}50%{transform:rotate(-20deg)}}@keyframes legR{0%,to{transform:rotate(-20deg)}50%{transform:rotate(20deg)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.deco{position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none}.bunting{position:absolute;top:0;left:0;width:100%;font-size:28px;letter-spacing:8px;text-align:center;padding:8px;pointer-events:none}.code-card{background:#fff;border:3px solid #f472b6;border-radius:4px;padding:44px 36px 32px;max-width:420px;width:90%;position:relative;box-shadow:8px 8px #f472b6,16px 16px #fce7f3;transform:rotate(-1deg);z-index:2;display:flex;flex-direction:column}.code-card:before{content:"";display:inline-block;width:90px;height:90px;background-image:url(/birthday-invite/assets/bow-DdiMGDbs.png);background-size:contain;background-repeat:no-repeat;vertical-align:middle;position:absolute;top:-42px;left:50%;transform:translate(-50%);font-size:36px}.code-title{font-family:Pacifico,cursive;color:#ec4899;font-size:22px;text-align:center;margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:8px}.code-sub{font-size:11px;color:#9ca3af;text-align:center;margin-bottom:28px;letter-spacing:2px;text-transform:uppercase}.field-label{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#6b7280;margin-bottom:8px;display:block;text-align:center}.code-input{width:100%;padding:14px 16px;border:2.5px solid #e5e7eb;border-radius:2px;font-family:Space Mono,monospace;font-size:18px;letter-spacing:6px;text-align:center;text-transform:uppercase;background:#fafafa;outline:none;transition:border-color .2s,box-shadow .2s;margin-bottom:20px}.code-input:focus{border-color:#f472b6;box-shadow:0 0 0 3px #fce7f3}.code-input.shake{animation:shake .4s ease}.enter-btn{width:100%;padding:16px;background:#ec4899;color:#fff;border:none;border-radius:2px;font-family:Space Mono,monospace;font-size:14px;font-weight:700;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:4px 4px #831843}.enter-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px #831843}.enter-btn:active{transform:translate(2px,2px);box-shadow:2px 2px #831843}.error-msg{margin-top:12px;text-align:center;color:#ef4444;font-size:12px;letter-spacing:1px;min-height:18px}.footer{position:absolute;bottom:20px;display:flex;flex-direction:column}.walk-title{font-family:Pacifico,cursive;font-size:clamp(20px,5vw,36px);color:#ec4899;margin-bottom:20px;text-align:center;animation:pulse 1s ease-in-out infinite}.walk-stage{width:100%;height:260px;position:relative;overflow:hidden}.walk-stage:after{content:"";position:absolute;bottom:40px;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,#f472b6 0,#f472b6 20px,transparent 20px,transparent 40px);opacity:.4}.walker{position:absolute;bottom:43px;display:flex;flex-direction:column;align-items:center;gap:4px;animation:walkAcross linear forwards}.walker-avatar{width:64px;height:64px;border-radius:50%;border:3px solid white;background:#fce7f3;display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden}.walker-legs{display:flex;gap:4px}.leg{width:8px;height:24px;background:#f472b6;border-radius:4px;transform-origin:top center}.leg:first-child{animation:legL .4s linear infinite}.leg:last-child{animation:legR .4s linear infinite}.walker-name{font-size:9px;font-weight:700;letter-spacing:1px;color:#ec4899;text-transform:uppercase;white-space:nowrap;background:#fff;padding:2px 6px;border:1.5px solid #f472b6;border-radius:2px;transform:rotate(-2deg)}.confetti-piece{position:absolute;width:8px;height:12px;top:0;animation:fall linear forwards;border-radius:1px}.progress-dots{display:flex;gap:8px;margin-top:16px}.prog-dot{width:10px;height:10px;border-radius:50%;background:#e5e7eb;transition:background .3s}.prog-dot.active{background:#ec4899;animation:pop .3s ease}.walk-hint{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#9ca3af;margin-top:10px;animation:blink 1.5s ease-in-out infinite}.invite-screen{overflow-y:auto;align-items:center;justify-content:center}.invite-card{background:#f5ece2;border-radius:4px;padding:5px;position:relative;box-shadow:12px 12px #f9a8d4,24px 24px #fce7f3;border:2px solid rgba(0,0,0,.06);max-width:465px;min-width:320px;width:100%;overflow:visible;animation:pop .7s cubic-bezier(.34,1.56,.64,1)}.invite-image{max-width:450px}.tape{position:absolute;width:50px;height:18px;background:#ffdc5080;border-radius:2px}.abs-deco{position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none}.inv-bunting{text-align:center;font-size:22px;letter-spacing:6px;margin-bottom:16px;animation:float 3s ease-in-out infinite}.photo-area{position:relative;width:180px;height:180px;margin:0 auto 20px}.inv-hat{position:absolute;top:-28px;left:50%;transform:translate(-55%) rotate(-10deg);font-size:55px;animation:wiggle 2s ease-in-out infinite}.inv-photo{width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,#fce7f3,#fce7f3);border:5px solid white;box-shadow:5px 5px #f472b6;display:flex;align-items:center;justify-content:center;font-size:80px}.inv-star{position:absolute;top:10px;right:-10px;font-size:26px;animation:spin 4s linear infinite}.inv-number{text-align:center;font-family:Pacifico,cursive;font-size:80px;line-height:1;background:linear-gradient(135deg,#ec4899,#f9a8d4,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(3px 3px 0 rgba(244,114,182,.3));margin-bottom:4px}.inv-bday{text-align:center;font-family:Pacifico,cursive;font-size:22px;color:#ec4899;margin-bottom:20px;transform:rotate(-1deg)}.ransom{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:20px}.ransom span{display:inline-block;padding:3px 8px;font-weight:700;font-size:15px;border-radius:2px;letter-spacing:1px;font-family:Space Mono,monospace}.inv-divider{border:none;height:2px;background:repeating-linear-gradient(90deg,#f472b6 0,#f472b6 12px,transparent 12px,transparent 20px);margin:16px 0;opacity:.5}.inv-details{text-align:center;display:flex;flex-direction:column;gap:6px}.inv-date{font-family:Playfair Display,serif;font-size:24px;font-weight:700;color:#1f2937}.inv-time{font-family:Space Mono,monospace;font-size:18px;color:#ec4899}.inv-place{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#6b7280}.inv-footer{text-align:center;margin-top:24px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#9ca3af}.clickable-img{cursor:zoom-in}.modal-overlay{position:fixed;inset:0;z-index:1000;background:#000c;display:flex;align-items:center;justify-content:center;cursor:zoom-out}.modal-img{max-width:90vw;max-height:90vh;border-radius:4px;box-shadow:0 0 40px #00000080}