#birthday-glitch {position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(160deg,#fdd9e7,#e8c5f2 65%,#bca9de);font-family:"Noto Sans SC",sans-serif}
#birthday-glitch.active {display:flex}
#birthday-glitch .scene {width:min(88vw,380px);height:min(80svh,700px);position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}
#birthday-glitch .machine {position:relative;width:100%;max-width:270px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 18px 18px #b47e9e60)}
#birthday-glitch .machine img {width:100%;max-height:47svh;object-fit:contain;animation:gentle 1.3s ease-in-out infinite}
#birthday-glitch .status {font-size:17px;font-weight:800;color:#ba6289;text-align:center;min-height:3em;text-shadow:0 1px #fff}
#birthday-glitch .scan {pointer-events:none;position:absolute;inset:0;opacity:0;background:repeating-linear-gradient(to bottom,transparent 0 5px,#fff7 6px,#7df5ff44 8px);mix-blend-mode:screen}
#birthday-glitch.glitch .scene {animation:shake .16s steps(2) infinite}
#birthday-glitch.glitch .machine img {animation:flicker .17s steps(2) infinite;filter:hue-rotate(65deg) contrast(1.3)}
#birthday-glitch.glitch .scan {opacity:1;animation:scan .45s linear infinite}
#birthday-glitch .paper {position:absolute;left:50%;top:57%;width:56px;height:49px;transform:translate(-50%,-50%) scale(0);border-radius:42% 52% 48% 56%;background:linear-gradient(135deg,#fffef4,#f1d9cb);box-shadow:0 6px 15px #9d627766;opacity:0}
#birthday-glitch.paper-phase .paper {opacity:1;animation:paperRise 1.05s ease-out forwards}
#birthday-glitch .dragonball {position:absolute;left:50%;top:52%;width:110px;height:110px;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.1);background:radial-gradient(circle at 32% 25%,#fff8bd 0 5%,#ffe56b 18%,#ffad1e 48%,#e87504 78%,#9b3a00 100%);box-shadow:inset -9px -14px 17px #a8460880,inset 8px 8px 15px #fff5a766,0 0 26px 10px #ffd5689e,0 0 70px 22px #ffcc5588}
#birthday-glitch .dragonball:after {content:'★';position:absolute;inset:0;display:grid;place-items:center;color:#d32219;font-size:45px;text-shadow:0 2px 2px #7e160e}
#birthday-glitch.ball-phase .paper {opacity:0;transition:opacity .35s}
#birthday-glitch.ball-phase .dragonball {opacity:1;animation:ballAppear .85s ease-out forwards,ballHover 1.6s ease-in-out .85s infinite alternate}
#birthday-glitch .portal {position:absolute;inset:0;background:radial-gradient(circle,#fffde4,#ffe49a 28%,#fbbf65 55%,#f5a2bf);opacity:0;pointer-events:none}
#birthday-glitch.portal-phase .portal {animation:portal 1s ease-in forwards}
#birthday-glitch .spark {position:absolute;width:7px;height:7px;border-radius:50%;background:#fff9c7;box-shadow:0 0 15px #ffe17c;animation:twinkle 1.1s ease-in-out infinite alternate}
#birthday-glitch .skip {position:absolute;bottom:24px;right:20px;background:#ffffffb8;color:#92586f;border:1px solid #fff;border-radius:20px;padding:8px 14px;font-size:13px;z-index:3;cursor:pointer}
#birthday-demo-controls {position:fixed;z-index:10001;bottom:16px;left:50%;transform:translateX(-50%);background:#fffef6f2;padding:9px 12px;border:1px solid #ffb9d0;border-radius:18px;box-shadow:0 6px 24px #be7e9c50;display:flex;gap:8px;align-items:center;max-width:95vw;white-space:nowrap}
#birthday-demo-controls button {font-size:12px;padding:9px 12px;border-radius:20px;background:#ff92b2;color:white;margin:0}
#birthday-demo-controls small {font-size:11px;color:#a76c80}
@keyframes gentle {50%{transform:translateY(-8px)}}
@keyframes shake {0%{transform:translate(2px,-2px)}50%{transform:translate(-3px,2px)}100%{transform:translate(2px,1px)}}
@keyframes flicker {0%{opacity:1}45%{opacity:.35}100%{opacity:.95}}
@keyframes scan {to{background-position:0 70px}}
@keyframes paperRise {0%{transform:translate(-50%,20px) scale(.4)}65%{transform:translate(-50%,-40px) scale(1.1) rotate(20deg)}100%{transform:translate(-50%,-65px) scale(.9) rotate(50deg)}}
@keyframes ballAppear {to{transform:translate(-50%,-50%) scale(1)}}
@keyframes ballHover {to{transform:translate(-50%,-59%) scale(1.07)}}
@keyframes portal {0%{opacity:0;transform:scale(.1)}50%{opacity:.8}100%{opacity:1;transform:scale(2)}}
@keyframes twinkle {to{opacity:.2;transform:scale(.5)}}
@media(prefers-reduced-motion:reduce){#birthday-glitch.glitch .scene{animation:none}}