*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#05010a;
  --pink:#ff4fa3;
  --pink2:#ff8fd0;
  --violet:#a44bff;
  --glass:rgba(24,6,36,.55);
  --line:rgba(255,150,210,.28);
}
html,body{height:100%;background:var(--bg);color:#fff;overflow:hidden;overscroll-behavior:none}
body{font:600 16px/1.45 Quicksand,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}

.btn-pink{
  font:700 16px/1 Quicksand,sans-serif;color:#fff;padding:16px 28px;border-radius:999px;
  background:linear-gradient(135deg,var(--pink),var(--violet));
  box-shadow:0 10px 34px rgba(255,79,163,.45),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .15s ease,box-shadow .3s ease;
}
.btn-pink:hover{box-shadow:0 12px 44px rgba(255,79,163,.65),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-pink:active{transform:scale(.95)}
.btn-ghost{font:700 15px/1 Quicksand,sans-serif;padding:15px 22px;border-radius:999px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost:active{transform:scale(.95)}
.icon-btn{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:20px;line-height:1;
  background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .15s ease,background .2s;
}
.icon-btn:active{transform:scale(.92)}
.icon-btn[hidden]{display:none}

/* ── Portada ───────────────────────────── */
#gate{
  position:fixed;inset:0;z-index:20;display:grid;place-items:center;text-align:center;
  background:radial-gradient(ellipse 80% 60% at 50% 60%,#2c0b40 0%,#0c0216 60%,var(--bg) 100%);
  transition:opacity 1.6s ease,visibility 0s 1.6s;
}
#gate::before{
  content:"";position:absolute;inset:0;opacity:.8;animation:twinkle 4s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 72%,#ffd6ec,transparent),
    radial-gradient(1.5px 1.5px at 44% 34%,#fff,transparent),radial-gradient(1px 1px at 63% 82%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 78% 22%,#ffc2e4,transparent),radial-gradient(1px 1px at 88% 58%,#fff,transparent),
    radial-gradient(1px 1px at 8% 88%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 10%,#fff,transparent),
    radial-gradient(1px 1px at 35% 50%,#e6d2ff,transparent),radial-gradient(1px 1px at 92% 90%,#fff,transparent);
}
@keyframes twinkle{from{opacity:.35}to{opacity:.9}}
#gate.gone{opacity:0;visibility:hidden}
.gate-card{position:relative;padding:24px;animation:pop 1.3s cubic-bezier(.2,.9,.3,1.15) both .2s}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
.gate-heart{font-size:66px;line-height:1;display:inline-block;animation:beat 1.3s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(255,79,163,.9))}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.16)}30%{transform:scale(1)}45%{transform:scale(1.09)}}
#gate h1{font:400 clamp(46px,12vw,92px)/1.25 Pacifico,cursive;margin-top:12px;text-shadow:0 0 16px var(--pink),0 0 44px rgba(255,79,163,.65)}
#gate p{font-size:clamp(19px,4.6vw,25px);color:#ffd9ee;margin:.1em 0 1.7em}

/* ── HUD ───────────────────────────────── */
.hud > *{opacity:0;pointer-events:none;transition:opacity 1.2s ease}
body.ready .hud > *{opacity:1;pointer-events:auto}
#btn-music{position:fixed;z-index:10;top:max(14px,env(safe-area-inset-top));left:14px}
#btn-fs{position:fixed;z-index:10;top:max(14px,env(safe-area-inset-top));right:14px}
#btn-music .off{display:none}
#btn-music.muted .on{display:none}
#btn-music.muted .off{display:block}
.hint{
  position:fixed;z-index:10;left:50%;bottom:calc(max(22px,env(safe-area-inset-bottom)) + 70px);transform:translateX(-50%);
  max-width:calc(100vw - 32px);text-align:center;font-size:13px;padding:9px 16px;border-radius:999px;color:#ffe3f2;
  background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
body.ready .hint.hide{opacity:0}
#btn-recap{position:fixed;z-index:10;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);white-space:nowrap}
#btn-recap:active{transform:translateX(-50%) scale(.95)}
#btn-recap{animation:glowPulse 2.6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{box-shadow:0 10px 34px rgba(255,79,163,.4),inset 0 1px 0 rgba(255,255,255,.4)}50%{box-shadow:0 10px 50px rgba(255,79,163,.85),inset 0 1px 0 rgba(255,255,255,.4)}}

/* ── Foto ampliada ─────────────────────── */
#lightbox{
  position:fixed;inset:0;z-index:30;display:grid;place-items:center;
  background:rgba(5,1,10,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s;
}
#lightbox.open{opacity:1;visibility:visible;transition:opacity .4s ease}
#lightbox figure{text-align:center;transform:scale(.88);transition:transform .5s cubic-bezier(.2,.9,.3,1.15)}
#lightbox.open figure{transform:none}
#lb-img{display:block;max-width:88vw;max-height:74svh;border-radius:18px;border:6px solid #fff;box-shadow:0 0 40px rgba(255,79,163,.55),0 20px 60px rgba(0,0,0,.6)}
#lb-cap{font:400 clamp(22px,5vw,30px)/1.3 Pacifico,cursive;margin-top:18px;text-shadow:0 0 14px var(--pink)}
#lb-close{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px}
.lb-nav{position:fixed;top:50%;margin-top:-23px;font-size:30px;padding-bottom:4px}
#lb-prev{left:10px}#lb-next{right:10px}

/* ── Recap ─────────────────────────────── */
#recap{position:fixed;inset:0;z-index:40;background:var(--bg);opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
#recap.open{opacity:1;visibility:visible;transition:opacity .7s ease}
#rstage{position:absolute;inset:0;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.slide.on{opacity:1}
.slide .bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(40px) brightness(.45) saturate(1.3)}
.slide .fg{position:absolute;inset:0;margin:auto;max-width:92vw;max-height:78svh;border-radius:18px;border:5px solid #fff;box-shadow:0 0 50px rgba(255,79,163,.5),0 30px 80px rgba(0,0,0,.6);will-change:transform}
#rhit{position:absolute;inset:0;z-index:2}
#rcap{position:absolute;left:16px;right:16px;bottom:max(34px,calc(env(safe-area-inset-bottom) + 20px));z-index:3;text-align:center;pointer-events:none;font:400 clamp(22px,5vw,32px)/1.3 Pacifico,cursive;text-shadow:0 0 16px var(--pink),0 2px 10px rgba(0,0,0,.6);opacity:0;transition:opacity .6s}
#rcap.show{opacity:1}
.r-prog{position:absolute;z-index:3;top:max(14px,env(safe-area-inset-top));left:16px;right:72px;height:4px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden;margin-top:21px}
.r-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--violet));transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px var(--pink)}
#rclose{position:absolute;z-index:4;top:max(14px,env(safe-area-inset-top));right:14px}

#rend{position:absolute;inset:0;z-index:5;display:grid;place-items:center;text-align:center;overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,#2a0a3c 0%,#0c0216 60%,var(--bg) 100%);
  opacity:0;visibility:hidden;transition:opacity 1.4s ease,visibility 0s 1.4s}
#rend.show{opacity:1;visibility:visible;transition:opacity 1.4s ease}
#hearts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rend-inner{position:relative;padding:24px;max-width:760px}
.rend-inner > *{opacity:0;transform:translateY(24px) scale(.96);transition:opacity 1.1s ease,transform 1.3s cubic-bezier(.2,.9,.3,1.1)}
#rend.show .rend-inner > *{opacity:1;transform:none}
#rend.show .rend-inner > :nth-child(1){transition-delay:.5s}
#rend.show .rend-inner > :nth-child(2){transition-delay:1.1s}
#rend.show .rend-inner > :nth-child(3){transition-delay:2s}
#rend.show .rend-inner > :nth-child(4){transition-delay:2.5s}
#rend.show .rend-inner > :nth-child(5){transition-delay:3.1s}
.glow-title{font:400 clamp(40px,10vw,92px)/1.25 Pacifico,cursive;text-shadow:0 0 18px var(--pink),0 0 50px rgba(255,79,163,.7)}
.glow-name{font:400 clamp(56px,15vw,140px)/1.2 Pacifico,cursive;color:#ffd3ec;text-shadow:0 0 20px var(--pink),0 0 60px rgba(255,79,163,.8),0 0 100px rgba(164,75,255,.5)}
.rend-msg{font-size:clamp(17px,4vw,21px);line-height:1.6;color:#ffe6f4;text-shadow:0 1px 3px rgba(5,1,10,.9),0 0 18px rgba(5,1,10,.9);margin:18px auto 0;max-width:32em}
.rend-sign{font:400 clamp(20px,4.5vw,26px)/1.4 Pacifico,cursive;color:var(--pink2);margin-top:14px}
.rend-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

#nogl{position:fixed;inset:0;display:grid;place-items:center;text-align:center;padding:24px;font-size:20px;z-index:15}
#nogl[hidden]{display:none}

@media (max-width:600px){
  .hint{font-size:12px}
}