html,body{height:100%}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}.anniversary-container{min-height:100vh;background:linear-gradient(135deg,#dc143c,#b91c1c 30%,#991b1b 70%,#7f1d1d);padding:1rem;position:relative;overflow-x:hidden}.header{text-align:center;margin-bottom:2rem}.title{font-size:2.2rem;font-weight:300;color:#fff;margin-bottom:.5rem;text-shadow:0 2px 10px rgba(0,0,0,.3);animation:glow 2s ease-in-out infinite alternate}.subtitle{font-size:1.1rem;color:#ffffffe6;margin:0 0 1.5rem}.counter-section{display:flex;justify-content:center;margin-bottom:3rem}.counter-card{background:#fffffff2;padding:2rem;border-radius:20px;box-shadow:0 15px 35px #0000001a;text-align:center;backdrop-filter:blur(10px);width:100%;max-width:500px}.counter-card h2{color:#dc143c;font-size:1.4rem;margin-bottom:1.5rem;font-weight:500}.time-display{display:grid;grid-template-columns:repeat(1,1fr);gap:1.5rem;justify-content:center}.time-unit-single{display:flex;flex-direction:column;align-items:center}.time-unit-single .number{font-size:2.5rem;font-weight:700;color:#dc143c;line-height:1;text-shadow:0 2px 8px rgba(220,20,60,.3)}.time-unit-single .label{font-size:.8rem;color:#666;text-transform:uppercase;letter-spacing:1px;margin-top:.5rem}.start-date{margin-top:1.5rem;color:#666;font-size:1rem;font-style:italic}.photos-section{max-width:100%;margin:0 auto}.section-title{text-align:center;font-size:2rem;color:#fff;margin-bottom:1rem;font-weight:300;text-shadow:0 2px 10px rgba(0,0,0,.3)}.swipe-hint{text-align:center;color:#fffc;font-size:.9rem;margin-bottom:2rem;font-style:italic}.carousel-container-mobile{width:100%;overflow:hidden;touch-action:pan-x;-webkit-overflow-scrolling:touch;margin-bottom:2rem;position:relative}.carousel-scroll{display:flex;gap:0;padding:0;will-change:transform;align-items:center;transform:translateZ(0);-webkit-transform:translateZ(0)}.polaroid-mobile{flex:0 0 100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(var(--rotation, 0deg));transition:transform .3s ease;padding:0;box-sizing:border-box;min-height:500px}.polaroid-mobile:nth-child(odd){--rotation: 2deg}.polaroid-mobile:nth-child(2n){--rotation: -2deg}.polaroid-mobile:active{transform:rotate(0) scale(.98)}.photo-frame-mobile{background:#fff;padding:20px;border-radius:12px;box-shadow:0 8px 25px #0000004d;margin-bottom:1rem;display:flex;justify-content:center;align-items:center}.photo-image-mobile{width:260px;height:320px;object-fit:contain;border-radius:8px;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;background:#f5f5f5;transform:translateZ(0);-webkit-transform:translateZ(0)}.photo-caption-mobile{background:#fff;padding:15px 20px;border-radius:12px;box-shadow:0 4px 15px #0003;text-align:center;width:260px;box-sizing:border-box}.floating-hearts{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.heart{position:absolute;font-size:1.2rem;opacity:.6;animation:floatHeart 10s infinite ease-in-out}.heart:nth-child(1){left:10%;animation-delay:0s}.heart:nth-child(2){left:30%;animation-delay:3s}.heart:nth-child(3){right:30%;animation-delay:6s}.heart:nth-child(4){right:10%;animation-delay:9s}.footer{background:#ffffff1a;backdrop-filter:blur(10px);text-align:center;padding:2rem;color:#fff;font-weight:500;margin-top:2rem;border-top:1px solid rgba(255,255,255,.2)}.footer p{color:#fff;font-size:.9rem;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.3)}.music-player{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}.music-btn{background:#fff3;border:2px solid rgba(255,255,255,.3);border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px)}.music-btn:hover{background:#ffffff4d;border-color:#ffffff80;transform:scale(1.1)}.music-btn.playing{background:#dc143ccc;border-color:#dc143c;animation:pulse 2s infinite}.music-btn span{font-size:1.5rem}.music-label{color:#ffffffe6;font-size:.9rem;font-weight:300}@keyframes glow{0%{text-shadow:0 2px 10px rgba(0,0,0,.3)}to{text-shadow:0 2px 20px rgba(255,255,255,.5)}}@keyframes floatHeart{0%,to{transform:translateY(100vh) rotate(0);opacity:0}15%,85%{opacity:.6}50%{transform:translateY(-10vh) rotate(180deg);opacity:1}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes badgeGlow{0%{text-shadow:0 2px 8px rgba(220,20,60,.3)}to{text-shadow:0 4px 16px rgba(220,20,60,.5)}}@keyframes shine{0%{transform:scale(.8);opacity:.5}50%{transform:scale(1.2);opacity:1}to{transform:scale(.8);opacity:.5}}@keyframes progressShine{0%{background-position:0% 50%}to{background-position:100% 50%}}.badges-section{max-width:100%;margin:0 auto 3rem;text-align:center;padding:2rem 1rem}.badges-subtitle{font-size:1rem;color:#fffc;margin-bottom:2rem;font-style:italic}.badges-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem;max-width:800px;margin:0 auto}.badge-card{background:#fffffff2;padding:1.5rem 1rem;border-radius:16px;box-shadow:0 8px 25px #00000026;text-align:center;position:relative;transition:all .3s ease;animation:fadeInUp .6s ease-out forwards;opacity:0;transform:translateY(20px)}.badge-card.unlocked{border:2px solid #dc143c;transform:translateY(0)}.badge-card.unlocked:hover{transform:translateY(-5px);box-shadow:0 12px 35px #dc143c4d}.badge-card.locked{opacity:.6;border:2px solid #ccc}.badge-icon-container{position:relative;margin-bottom:1rem;display:flex;justify-content:center;align-items:center;height:60px}.badge-icon{font-size:2.5rem;transition:all .3s ease}.badge-card.unlocked .badge-icon{color:#dc143c;text-shadow:0 2px 8px rgba(220,20,60,.3)}.badge-card.locked .badge-icon{color:#999;filter:grayscale(100%)}.badge-icon.glow{animation:badgeGlow 2s ease-in-out infinite alternate}.badge-shine{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:radial-gradient(circle,rgba(220,20,60,.3),transparent);border-radius:50%;animation:shine 2s infinite}.badge-title{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;line-height:1.2}.badge-card.unlocked .badge-title{color:#dc143c}.badge-card.locked .badge-title{color:#666}.badge-description{font-size:.85rem;line-height:1.3;margin-bottom:.5rem}.badge-card.unlocked .badge-description{color:#555}.badge-card.locked .badge-description{color:#999}.badge-date{font-size:.8rem;color:#dc143c;font-weight:500;font-style:italic}.badge-locked-text{font-size:.8rem;color:#999;font-style:italic}.badge-status{position:absolute;top:10px;right:10px;font-size:1.2rem}.progress-section{margin-top:3rem;background:#ffffff1a;padding:2rem;border-radius:16px;backdrop-filter:blur(10px)}.progress-title{font-size:1.2rem;color:#fff;margin-bottom:1rem;font-weight:500}.progress-bar{background:#fff3;height:12px;border-radius:6px;overflow:hidden;margin-bottom:1rem;position:relative}.progress-fill{background:linear-gradient(45deg,#dc143c,#ff1744);height:100%;transition:width 1s ease;position:relative}.progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);animation:progressShine 2s infinite}.progress-text{font-size:1rem;color:#fff;font-weight:500}@media (min-width: 768px){.title{font-size:3rem}.counter-card{max-width:600px}.time-unit-single .number{font-size:3.5rem}.carousel-container-mobile{padding:0 3rem}.polaroid-mobile{flex:0 0 340px}.photo-image-mobile{width:300px;height:400px}.photo-caption-mobile{max-width:300px}}