:root{--primary-color: #feda6a;--love-color: #ff7979;--dark-bg: #0d1a2d;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--dark-bg);font-family:var(--font-family)}#birthday-app{position:relative;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;color:#f0f0f0}#tsparticles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1}.stage-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;top:0;left:0;padding:20px;animation:fadeIn .8s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.locking-stage{background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.flashing-photo{position:absolute;z-index:10;border-radius:12px;box-shadow:0 0 20px #ffffff80;transform:translate(-50%,-50%);overflow:hidden}.flashing-photo img{width:100%;height:auto;display:block}@keyframes flash{0%,to{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}.password-box{background:#000000d9;padding:40px 30px;border-radius:15px;text-align:center;z-index:20;width:90vw;max-width:350px}.password-box h2{margin-bottom:20px;font-size:1.5rem;line-height:1.4}.password-box input{width:100%;padding:12px;margin:10px 0;border-radius:8px;border:2px solid var(--primary-color);background:#333;color:#fff;font-size:1.2rem;text-align:center}.password-box button{margin-top:15px;padding:12px 30px;border:none;background:var(--primary-color);color:var(--dark-bg);font-size:1.2rem;border-radius:8px;cursor:pointer;transition:transform .2s;font-weight:700}.password-box button:hover{transform:scale(1.05)}.error-message{color:#e74c3c;margin-top:15px}.shake{animation:shake .5s}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.cake-container{width:90vw;max-width:400px}.cake-img{width:100%;height:auto;display:block;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .2s,filter .3s}.cake-img:hover{transform:scale(1.04);filter:drop-shadow(0 0 15px var(--primary-color))}.prompt-text{margin-top:30px;font-size:clamp(1rem,4vw,1.2rem);color:var(--primary-color);text-shadow:0 0 5px var(--primary-color);text-align:center}.photo-stage{background:#0a0a14d9}.media-wall-container{width:100%;height:100%;display:flex;flex-direction:column;opacity:0;transition:opacity 1.5s ease;z-index:1;position:relative}.media-wall-container.visible{opacity:1}.section-title{text-align:center;padding:20px 0;font-size:clamp(1.5rem,6vw,2.2rem);color:var(--primary-color);text-shadow:0 0 10px var(--primary-color);flex-shrink:0}.waterfall-wrapper{flex-grow:1;overflow-y:auto;padding:0 15px}.waterfall-grid{column-count:5;column-gap:15px}.media-item{position:relative;cursor:pointer;overflow:hidden;border-radius:8px;box-shadow:0 4px 8px #0003;transition:transform .3s;width:100%;margin-bottom:15px;break-inside:avoid;background-color:#222}.media-item:hover{transform:scale(1.05);box-shadow:0 6px 12px #0000004d;z-index:10}.media-item img,.media-item video{width:100%;height:auto;display:block}.lazy{opacity:0;transition:opacity .5s}.lazy[src]{opacity:1}@media (max-width: 1200px){.waterfall-grid{column-count:4}}@media (max-width: 900px){.waterfall-grid{column-count:3}}@media (max-width: 600px){.waterfall-grid{column-count:2}.waterfall-wrapper{padding:0 10px}.waterfall-grid{column-gap:10px}.media-item{margin-bottom:10px}}.final-chapter-button-container{position:fixed;bottom:4vh;right:20px;z-index:20}.final-chapter-button{padding:12px 24px;font-size:1rem;font-weight:700;color:#fff;background-color:var(--love-color);border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ff797966;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.danmaku-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:100}.danmaku-item{position:absolute;white-space:nowrap;font-weight:700;text-shadow:0 0 5px rgba(0,0,0,.7)}@keyframes danmaku-move{0%{transform:translate(100vw)}to{transform:translate(-110%)}}.final-video-stage{background:#000}.final-video{width:100%;height:auto;max-height:100vh;object-fit:contain}.letter-stage{overflow-y:auto;justify-content:flex-start;padding-top:5vh;background:#000}.letter-content{background:#ffffff0d;padding:clamp(1rem,5vw,3rem);border-radius:10px;max-width:800px;width:90%;color:#eee;font-family:STKaiti,KaiTi,serif;font-size:clamp(1rem,2.5vw,1.2rem);line-height:2}.letter-content h3{font-size:clamp(1.2rem,4vw,1.5rem);color:var(--primary-color);margin-bottom:1.5rem}.letter-content p{margin-bottom:1.5rem;text-indent:2em}.letter-content .signature{text-align:right;margin-top:2rem;font-style:normal;text-indent:0}.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .3s ease}.lightbox-content{position:relative;display:flex;justify-content:center;align-items:center;width:95%;height:95%}.lightbox-content img,.lightbox-content video{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 0 30px #00000080}.close-btn{position:absolute;top:10px;right:10px;background:#fff3;border:none;font-size:2rem;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;line-height:1}
