*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--sky-top:#c9b8e8;--sky-bottom:#fde2e4;--ground:#b8e6d0;--ground-dark:#8ecfad;--card-bg:#ffffffd9;--text-dark:#2d1b4e;--text-muted:#7c6892;--pink:#e84393;--coral:#ff7675;--rose:#ff6b81;--blue:#0984e3;--muted:#b2bec3;--pixel:8;--font-pixel:"Press Start 2P", monospace}html,body{height:100%;overflow:hidden}body{font-family:var(--font-pixel);background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 60%, var(--ground) 85%, var(--ground-dark) 100%);color:var(--text-dark);background-attachment:fixed}#app{flex-direction:column;align-items:center;width:100%;height:100vh;display:flex;position:relative;overflow:hidden}.sky{pointer-events:none;position:absolute;inset:0;overflow:hidden}.cloud{background:#ffffffb3;border-radius:50px;position:absolute}.cloud:before,.cloud:after{content:"";background:inherit;border-radius:50%;position:absolute}.cloud-1{width:120px;height:36px;animation:80s linear infinite drift;top:8%}.cloud-1:before{width:50px;height:50px;top:-22px;left:18px}.cloud-1:after{width:36px;height:36px;top:-14px;right:20px}.cloud-2{width:90px;height:28px;animation:100s linear -30s infinite drift;top:14%}.cloud-2:before{width:40px;height:40px;top:-18px;left:14px}.cloud-2:after{width:28px;height:28px;top:-10px;right:14px}.cloud-3{width:100px;height:30px;animation:65s linear -15s infinite drift;top:5%}.cloud-3:before{width:44px;height:44px;top:-20px;left:16px}.cloud-3:after{width:32px;height:32px;top:-12px;right:16px}@keyframes drift{0%{left:-200px}to{left:calc(100% + 200px)}}.header{z-index:2;text-align:center;padding-top:clamp(20px,5vh,48px);position:relative}.title{letter-spacing:2px;color:var(--text-dark);font-size:clamp(14px,3vw,22px)}.heart{color:var(--rose);animation:1.2s ease-in-out infinite pulse-heart;display:inline-block}@keyframes pulse-heart{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.subtitle{color:var(--text-muted);letter-spacing:1px;margin-top:8px;font-size:clamp(8px,1.4vw,11px)}.counter-card{z-index:2;background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:3px solid #fff9;border-radius:16px;margin-top:clamp(14px,3vh,28px);padding:clamp(14px,2.5vh,24px) clamp(18px,3vw,36px);transition:opacity .5s,transform .5s;position:relative;box-shadow:0 8px 32px #2d1b4e1a,0 2px 8px #e8439314}.counter-card.hidden{opacity:0;pointer-events:none;transform:scale(.9)translateY(-10px)}.counter-segments{align-items:center;gap:clamp(6px,1.5vw,14px);display:flex}.segment{flex-direction:column;align-items:center;gap:6px;display:flex}.digit{font-family:var(--font-pixel);color:var(--text-dark);text-align:center;min-width:2.2ch;font-size:clamp(18px,4vw,36px)}.label{font-family:var(--font-pixel);color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:clamp(6px,1vw,9px)}.separator{font-family:var(--font-pixel);color:var(--pink);margin-top:-12px;font-size:clamp(16px,3.5vw,30px);animation:1s step-end infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.2}}.reunion-message{z-index:2;margin-top:clamp(14px,3vh,28px);display:none;position:relative}.reunion-message.visible{animation:.6s cubic-bezier(.34,1.56,.64,1) pop-in;display:block}.reunion-text{font-family:var(--font-pixel);color:var(--pink);text-shadow:0 2px 8px #e843934d;font-size:clamp(14px,3vw,24px);animation:2s ease-in-out infinite glow-text}@keyframes pop-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes glow-text{0%,to{text-shadow:0 2px 8px #e843934d}50%{text-shadow:0 2px 20px #e8439399,0 0 40px #ff6b814d}}.scene{z-index:2;width:95%;max-width:1000px;height:clamp(140px,22vh,200px);margin-top:auto;margin-bottom:auto;position:relative}.path{height:2px;position:absolute;bottom:22px;left:5%;right:5%}.dotted-line{border-bottom:2px dashed #2d1b4e26;width:100%;height:100%}.character{transition:left .3s linear;position:absolute;bottom:28px}.character .sprite{transform-origin:0 0;width:1px;height:1px;transform:scale(var(--pixel));image-rendering:pixelated}.character .frame2{display:none}.character.step-a .frame1{display:block}.character.step-a .frame2,.character.step-b .frame1{display:none}.character.step-b .frame2{display:block}.character{animation:.35s steps(2,end) infinite walk-bob}.character.stopped{animation:none}@keyframes walk-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.flag{z-index:3;font-size:20px;animation:3s ease-in-out infinite flag-sway;position:absolute;top:-28px;left:50%;transform:translate(-50%)}@keyframes flag-sway{0%,to{transform:translate(-50%)rotate(-3deg)}50%{transform:translate(-50%)rotate(3deg)}}.floating-heart{pointer-events:none;z-index:5;font-size:12px;animation:3.5s ease-out forwards float-up;position:absolute}@keyframes float-up{0%{opacity:1;transform:translateY(0)scale(.6)}60%{opacity:.8}to{opacity:0;transform:translateY(-80px)scale(1.1)rotate(12deg)}}.ground{background:var(--ground);border-top:4px solid var(--ground-dark);flex-shrink:0;width:100%;height:clamp(40px,8vh,70px);position:relative}.ground:before{content:"";background:radial-gradient(3px at 10% 40%,#6dbf8b 50%,#0000 50%),radial-gradient(2px at 25% 60%,#6dbf8b 50%,#0000 50%),radial-gradient(3px at 40% 30%,#7cc99a 50%,#0000 50%),radial-gradient(2px at 55% 55%,#6dbf8b 50%,#0000 50%),radial-gradient(3px at 70% 35%,#7cc99a 50%,#0000 50%),radial-gradient(2px at 85%,#6dbf8b 50%,#0000 50%),radial-gradient(2px at 95% 65%,#7cc99a 50%,#0000 50%);position:absolute;inset:0}.actions{z-index:10;justify-content:center;align-items:center;padding:0 20px;display:flex;position:absolute;bottom:clamp(12px,3vh,24px);left:0;right:0}.btn-home{font-family:var(--font-pixel);color:#fff;background:var(--coral);cursor:pointer;letter-spacing:1px;border:none;border-radius:8px;padding:12px 24px;font-size:clamp(8px,1.4vw,11px);transition:transform .1s,box-shadow .1s;box-shadow:0 4px #e05555,0 6px 16px #ff76754d}.btn-home:hover{transform:translateY(-2px);box-shadow:0 6px #e05555,0 8px 20px #ff767566}.btn-home:active{transform:translateY(2px);box-shadow:0 2px #e05555,0 3px 8px #ff76754d}.btn-home.hidden{display:none}.btn-reset{border:2px solid var(--muted);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);width:40px;height:40px;color:var(--muted);cursor:pointer;z-index:10;background:#fff9;border-radius:50%;justify-content:center;align-items:center;transition:border-color .2s,color .2s,transform .2s;display:flex;position:fixed;bottom:clamp(12px,3vh,24px);right:clamp(12px,3vw,24px)}.btn-reset:hover{border-color:var(--text-muted);color:var(--text-muted);transform:rotate(-45deg)}#confetti-canvas{pointer-events:none;z-index:100;width:100%;height:100%;position:fixed;inset:0}@media (width<=480px){:root{--pixel:5}.cloud-3{display:none}}