:root {
  --pink: #ff3fbc;
  --magenta: #ff1593;
  --cyan: #35d8ff;
  --violet: #7b38ff;
  --cream: #fff7ef;
  --ink: #16051f;
  --glass: rgba(20, 7, 38, 0.46);
  --glass-strong: rgba(18, 6, 33, 0.72);
  --line: rgba(255,255,255,.24);
  --shadow: 0 18px 60px rgba(11, 0, 29, .42);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #13041c; color: white; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow: hidden; }
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(53,216,255,.95); outline-offset: 4px; }

.app { position: relative; width: 100%; min-height: 100svh; overflow: hidden; background: #13041c; }
.screen { position: absolute; inset: 0; min-height: 100svh; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .65s ease, visibility .65s; }
.screen.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.glass-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(11,3,26,.42));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

.eyebrow { margin: 0 0 .55rem; letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; font-weight: 800; color: #ffd8f4; }

/* Gate */
.gate {
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,30,176,.42), transparent 34%),
    radial-gradient(circle at 80% 75%, rgba(30,205,255,.34), transparent 36%),
    linear-gradient(135deg, #1a092a, #340c49 47%, #071a35);
}
.gate__aurora { position: absolute; inset: -20%; background: conic-gradient(from 180deg, transparent 0 12%, rgba(255,35,185,.18), transparent 36% 50%, rgba(50,220,255,.15), transparent 72%); filter: blur(60px); animation: aurora 10s linear infinite; }
.gate__card { position: relative; width: min(620px, 92vw); padding: clamp(30px, 5vw, 58px); border-radius: 34px; text-align: center; overflow: hidden; }
.gate__card::after { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(110deg, rgba(255,91,202,.75), rgba(255,255,255,.1), rgba(73,220,255,.78)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.gate__spark { font-size: 2rem; color: #fff0a8; animation: twinkle 1.8s ease-in-out infinite; }
.gate h1 { margin: 0 auto 14px; max-width: 500px; font-size: clamp(2.15rem, 6vw, 4.35rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 8px 28px rgba(255,31,170,.25); }
.gate__copy { margin: 0 auto 26px; max-width: 460px; color: rgba(255,255,255,.82); font-size: clamp(1rem, 2vw, 1.18rem); }
.gate__hint { margin: 16px 0 0; font-size: .8rem; color: rgba(255,255,255,.54); }

.primary-btn { position: relative; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 15px 25px; min-width: 220px; color: white; cursor: pointer; background: linear-gradient(105deg, rgba(255,42,176,.92), rgba(130,62,255,.9) 52%, rgba(35,204,255,.92)); box-shadow: 0 10px 35px rgba(255,28,177,.28), inset 0 1px 0 rgba(255,255,255,.45); transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.primary-btn::before { content:""; position:absolute; inset:2px 8px auto; height:42%; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.3), transparent); pointer-events:none; }
.primary-btn:hover { transform: translateY(-3px) scale(1.025); filter: saturate(1.15) brightness(1.08); box-shadow: 0 18px 44px rgba(255,28,177,.35), 0 0 30px rgba(46,220,255,.16); }
.primary-btn:active { transform: translateY(0) scale(.99); }

/* Intro */
.intro { background: black; }
.intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; background: black; }
.intro__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 54%, rgba(12,2,18,.08) 70%, rgba(12,2,18,.48) 100%); }
.sound-btn { position: absolute; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); color: white; background: rgba(15,4,27,.36); backdrop-filter: blur(12px); cursor: pointer; font-size: 1.2rem; box-shadow: 0 10px 28px rgba(0,0,0,.22); z-index: 4; }
.intro__cta { position: absolute; right: max(38px, 4.5vw); bottom: max(34px, calc(env(safe-area-inset-bottom) + 18px)); width: min(430px, calc(100vw - 38px)); transform: translateY(34px) scale(.96); opacity: 0; pointer-events: none; text-align: center; border-radius: 28px; padding: 20px 22px 22px; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); z-index: 5; }
.intro__cta.is-visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.intro__cta p { margin: 0 0 12px; font-size: clamp(1.08rem, 2.3vw, 1.45rem); font-weight: 750; text-shadow: 0 2px 18px rgba(0,0,0,.42); }

/* Main memories scene */
.memories { overflow: auto; background-image: linear-gradient(rgba(7,3,18,.08), rgba(7,3,18,.16)), url('assets/retro-room.webp'); background-size: cover; background-position: center; }
.memories__ambient { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 52% 44%, transparent 0 33%, rgba(14,3,26,.08) 62%, rgba(8,2,19,.34) 100%); }
.memories__header { position: absolute; z-index: 20; top: 20px; left: 50%; transform: translateX(-50%); width: min(760px, calc(100vw - 260px)); min-width: 520px; display: flex; align-items: center; justify-content: space-between; gap: 26px; border-radius: 26px; padding: 16px 18px 16px 24px; }
.memories__header h2 { margin: 0; font-size: clamp(1.5rem, 2.7vw, 2.55rem); letter-spacing: -.04em; line-height: 1; text-shadow: 0 4px 22px rgba(255,33,176,.24); }
.memories__subtitle { margin: 7px 0 0; color: rgba(255,255,255,.74); font-size: .9rem; }
.progress-pill { flex: 0 0 auto; display: grid; grid-template-columns: auto auto auto; align-items: baseline; justify-content: center; min-width: 124px; padding: 11px 14px; border-radius: 18px; color: white; background: linear-gradient(145deg, rgba(255,46,182,.28), rgba(42,205,255,.16)); border: 1px solid rgba(255,255,255,.2); font-size: 1.25rem; font-weight: 900; }
.progress-pill__slash { padding: 0 4px; color: rgba(255,255,255,.5); }
.progress-pill small { grid-column: 1 / -1; font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.56); }

.objects-stage { position: relative; min-height: max(100svh, 760px); width: 100%; overflow: hidden; }
.object-btn { --size: clamp(88px, 9.2vw, 166px); position: absolute; width: var(--size); height: var(--size); padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 14px 14px rgba(6,0,18,.25)); transition: filter .22s ease, transform .22s ease; isolation: isolate; }
.object-btn::after { content:""; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, rgba(255,74,200,.28), rgba(67,217,255,.06) 50%, transparent 72%); filter: blur(12px); opacity: 0; transition: opacity .22s ease; z-index: -1; }
.object-btn img { width: 100%; height: 100%; object-fit: contain; display: block; transform-origin: center; }
.object-btn:hover { z-index: 30; filter: drop-shadow(0 18px 20px rgba(5,0,20,.34)) drop-shadow(0 0 13px rgba(255,72,205,.34)); }
.object-btn:hover::after { opacity: 1; }
.object-btn:hover img { animation-play-state: paused; transform: scale(1.09) rotate(0deg); }
.object-btn.opened { opacity: .72; filter: saturate(.78) drop-shadow(0 10px 12px rgba(5,0,20,.18)); }
.object-btn.opened::before { content:"✓"; position:absolute; right: 2px; top: 1px; z-index:5; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#12051d; font-weight:1000; background:linear-gradient(135deg,#fff1a5,#52e8ff); box-shadow:0 6px 16px rgba(0,0,0,.25); }

.object-btn.anim-float img { animation: float 4.8s ease-in-out infinite; }
.object-btn.anim-sway img { animation: sway 5.2s ease-in-out infinite; }
.object-btn.anim-bob img { animation: bob 3.7s ease-in-out infinite; }
.object-btn.anim-wobble img { animation: wobble 5.6s ease-in-out infinite; }
.object-btn.anim-spin img { animation: slowspin 9s linear infinite; }
.object-btn.anim-pulse img { animation: pulse 3.6s ease-in-out infinite; }
.object-btn.anim-tilt img { animation: tilt 4.7s ease-in-out infinite; }
.object-btn.anim-drift img { animation: drift 6.4s ease-in-out infinite; }
.object-btn.anim-flicker img { animation: flicker 4s ease-in-out infinite; }

.object-btn.fx-pop img { animation: clickPop .38s ease !important; }
.object-btn.fx-flip img { animation: clickFlip .48s ease !important; }
.object-btn.fx-spin img { animation: clickSpin .5s ease !important; }
.object-btn.fx-shake img { animation: clickShake .42s ease !important; }
.object-btn.fx-zoom img { animation: clickZoom .42s ease !important; }

.restart-link { position: absolute; z-index: 25; right: 24px; bottom: max(18px, env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.2); background: rgba(13,4,28,.42); color: rgba(255,255,255,.78); border-radius: 999px; padding: 9px 14px; cursor: pointer; backdrop-filter: blur(10px); }

/* Memory modal */
.memory-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 22px; visibility: hidden; opacity: 0; transition: opacity .28s ease, visibility .28s; }
.memory-modal.is-visible { visibility: visible; opacity: 1; }
.memory-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(5,0,15,.68); backdrop-filter: blur(10px); cursor: default; }
.memory-card { position: relative; z-index: 2; width: min(620px, 94vw); border-radius: 34px; padding: clamp(28px, 5vw, 50px); text-align: center; transform: translateY(18px) scale(.96); transition: transform .36s cubic-bezier(.2,.8,.2,1); background: linear-gradient(150deg, rgba(49,8,65,.9), rgba(13,7,37,.82) 55%, rgba(3,35,52,.86)); }
.memory-modal.is-visible .memory-card { transform: translateY(0) scale(1); }
.memory-card__close { position:absolute; right:16px; top:14px; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); color:white; background:rgba(255,255,255,.08); font-size:1.55rem; line-height:1; cursor:pointer; }
.memory-card__icon { font-size: 2.4rem; margin-bottom: 9px; filter: drop-shadow(0 0 18px rgba(255,59,187,.42)); }
.memory-card h3 { margin: 0 0 14px; font-size: clamp(2rem, 5vw, 3.5rem); line-height: .98; letter-spacing: -.05em; }
.memory-card > p:not(.eyebrow) { margin: 0 auto; max-width: 500px; color: rgba(255,255,255,.86); font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.55; text-wrap: pretty; }
.memory-card__footer { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between; gap:14px; color:rgba(255,255,255,.48); font-size:.76rem; }
.tiny-btn { border:0; border-radius:999px; padding:9px 13px; color:white; cursor:pointer; background:linear-gradient(100deg, rgba(255,47,181,.74), rgba(62,204,255,.6)); }
.toast { position: fixed; z-index: 130; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity:0; pointer-events:none; background:rgba(14,5,27,.88); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:11px 17px; box-shadow:0 14px 36px rgba(0,0,0,.3); backdrop-filter:blur(12px); transition:opacity .25s, transform .25s; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

@keyframes aurora { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.12);opacity:1} }
@keyframes float { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-13px) rotate(2deg)} }
@keyframes sway { 0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)} }
@keyframes bob { 0%,100%{transform:translateY(4px)}50%{transform:translateY(-9px)} }
@keyframes wobble { 0%,100%{transform:translateX(-2px) rotate(-2deg)}50%{transform:translateX(3px) rotate(3deg)} }
@keyframes slowspin { to{transform:rotate(360deg)} }
@keyframes pulse { 0%,100%{transform:scale(.96)}50%{transform:scale(1.045)} }
@keyframes tilt { 0%,100%{transform:rotate(-5deg) translateY(2px)}50%{transform:rotate(5deg) translateY(-6px)} }
@keyframes drift { 0%,100%{transform:translate(-4px,4px) rotate(-2deg)}50%{transform:translate(5px,-7px) rotate(2deg)} }
@keyframes flicker { 0%,94%,100%{filter:brightness(1)}95%{filter:brightness(1.65)}96%{filter:brightness(.8)}97%{filter:brightness(1.3)} }
@keyframes clickPop { 50%{transform:translateY(-18px) scale(1.16) rotate(4deg)} }
@keyframes clickFlip { 50%{transform:perspective(500px) rotateX(65deg) scale(1.06)} }
@keyframes clickSpin { to{transform:rotate(380deg) scale(1.05)} }
@keyframes clickShake { 20%{transform:translateX(-8px) rotate(-3deg)}40%{transform:translateX(8px) rotate(3deg)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)} }
@keyframes clickZoom { 50%{transform:scale(1.22) rotate(-2deg)} }

@media (max-width: 900px) {
  .memories__header { min-width: 0; width: calc(100vw - 26px); top: 12px; padding: 13px 14px 13px 17px; border-radius: 20px; }
  .memories__subtitle { display:none; }
  .progress-pill { min-width: 98px; font-size:1.05rem; }
  .progress-pill small { font-size:.48rem; }
  .objects-stage { min-height: 1000px; padding-top: 120px; display:grid; grid-template-columns:repeat(3,1fr); align-content:start; gap: 10px 3px; padding-inline: 12px; overflow:visible; }
  .object-btn { position: relative !important; left:auto !important; top:auto !important; transform:none !important; width:100%; height:auto; aspect-ratio:1; }
  .memories { background-position:center top; }
  .restart-link { position:fixed; }
}

@media (max-width: 560px) {
  .gate__card { border-radius:26px; }
  .memories__header h2 { font-size:1.35rem; }
  .memories__header .eyebrow { display:none; }
  .progress-pill { min-width:86px; padding:8px 10px; }
  .objects-stage { grid-template-columns:repeat(2,1fr); padding-top:105px; min-height:1500px; }
  .intro__cta { left:50%; right:auto; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); transform:translate(-50%,34px) scale(.96); }
  .intro__cta.is-visible { transform:translate(-50%,0) scale(1); }
  .memory-card__footer { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .15s !important; }
}

/* V2 · music controls + empty memory slots ready for copy */
.memories__controls {
  position: fixed;
  z-index: 40;
  left: 22px;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
}
.glass-control {
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.88);
  background: rgba(13,4,28,.48);
  border-radius: 999px;
  padding: 10px 15px;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 0 10px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.glass-control:hover { transform: translateY(-2px); background: rgba(33,8,49,.62); }
.memories__controls .restart-link { position: static; right: auto; bottom: auto; }
.music-btn { display: inline-flex; align-items: center; gap: 8px; }
.music-btn #music-icon { font-size: 1.15rem; line-height: 1; }
.music-btn.is-off { opacity: .58; }

.memory-card { min-height: 390px; display: grid; align-content: center; justify-items: center; }
.memory-card h3 { margin: 0 0 20px; font-size: clamp(3.4rem, 8vw, 5.8rem); line-height: .92; letter-spacing: -.07em; }
.memory-slot { width: min(430px, 82vw); display: grid; gap: 12px; margin: 5px auto 8px; }
.memory-slot span {
  display: block;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.24), rgba(255,255,255,.06));
  background-size: 220% 100%;
  animation: memoryShimmer 2.2s ease-in-out infinite;
}
.memory-slot span:nth-child(2) { width: 88%; animation-delay: -.45s; }
.memory-slot span:nth-child(3) { width: 62%; animation-delay: -.9s; }

@keyframes memoryShimmer {
  0%, 100% { background-position: 120% 0; opacity: .45; }
  50% { background-position: -20% 0; opacity: .9; }
}

@media (max-width: 700px) {
  .memories__controls { left: 12px; right: 12px; justify-content: space-between; gap: 8px; }
  .memories__controls .glass-control { font-size: .76rem; padding: 9px 11px; }
  .music-btn #music-label { display: none; }
}

/* V4 · recuerdos reales por familias */
.object-btn.started::before {
  content:"✦";
  position:absolute;
  right: 3px;
  top: 2px;
  z-index:5;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:white;
  font-weight:900;
  background:linear-gradient(135deg,rgba(255,64,191,.95),rgba(69,208,255,.9));
  box-shadow:0 6px 16px rgba(0,0,0,.25),0 0 16px rgba(255,70,199,.35);
  font-size:.8rem;
}
.object-btn.opened::before { content:"✓"; }
.memory-card { min-height: 0; align-content: start; padding-top: clamp(30px, 5vw, 48px); }
.memory-number-pill {
  margin: 2px 0 14px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
}
.memory-card h3#memory-title {
  margin: 2px auto 14px;
  max-width: 520px;
  font-size: clamp(1.75rem, 4.2vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.memory-card #memory-text {
  margin: 0 auto;
  max-width: 520px;
  color: rgba(255,255,255,.9);
  font-size: clamp(1.02rem, 2.2vw, 1.28rem);
  line-height: 1.58;
  text-wrap: pretty;
}
.memory-card__footer {
  width: min(520px, 100%);
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:rgba(255,255,255,.5);
  font-size:.76rem;
}
#memory-family {
  max-width: 520px;
  margin-inline: auto;
}
.tiny-btn {
  white-space: nowrap;
  font-weight: 800;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 20px rgba(0,0,0,.15);
}
.tiny-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }

@media (max-width: 560px) {
  .memory-card__footer { align-items:stretch; }
  .tiny-btn { width:100%; }
}

/* V6 · recorrido único: cada objeto abre un recuerdo y desaparece */
.object-btn {
  transition: opacity .4s ease, filter .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.object-btn.is-entering {
  opacity: 0;
  filter: blur(6px) brightness(1.35);
}
.object-btn.is-leaving {
  opacity: 0;
  filter: blur(7px) brightness(1.5);
  pointer-events: none;
}
.object-btn.is-leaving img {
  transform: scale(.72) rotate(7deg);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .38s ease;
  opacity: 0;
}

.progress-pill { min-width: 122px; }
.progress-pill__slash, #total-count { display:none; }

.memory-card__note { color: rgba(255,255,255,.52); }
.replay-all-btn { display:none; }
.memory-modal.is-final .replay-all-btn { display:inline-flex; }
.memory-modal.is-final .memory-card__note { display:none; }
.memory-modal.is-final .memory-number-pill { background:linear-gradient(135deg, rgba(255,83,191,.18), rgba(69,208,255,.16)); }
.memory-modal.is-final .memory-card {
  box-shadow: 0 30px 80px rgba(0,0,0,.42), 0 0 70px rgba(255,84,201,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.memory-modal.is-final #memory-text strong { color:#fff; }

.final-gift {
  position:absolute;
  left:50%;
  top:51%;
  transform:translate(-50%,-50%);
  width:clamp(190px, 24vw, 360px);
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:16;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.3));
  animation:finalGiftFloat 2.8s ease-in-out infinite;
  transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.final-gift.is-entering { opacity:0; transform:translate(-50%,-50%) scale(.55); }
.final-gift:hover { filter:drop-shadow(0 28px 44px rgba(0,0,0,.34)) brightness(1.1); }
.final-gift img { width:100%; height:auto; position:relative; z-index:2; }
.final-gift__halo {
  position:absolute;
  inset:14%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,78,205,.42) 25%, rgba(67,214,255,.22) 48%, transparent 72%);
  filter:blur(14px);
  animation:finalHalo 1.9s ease-in-out infinite alternate;
}
.final-gift__label {
  position:absolute;
  z-index:3;
  bottom:-6px;
  padding:10px 18px;
  border-radius:999px;
  color:white;
  font-weight:850;
  letter-spacing:.02em;
  background:rgba(18,4,29,.66);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 28px rgba(0,0,0,.25), 0 0 24px rgba(255,63,190,.22);
  white-space:nowrap;
}
@keyframes finalGiftFloat {
  0%,100% { transform:translate(-50%,-50%) translateY(0) rotate(-1deg); }
  50% { transform:translate(-50%,-50%) translateY(-12px) rotate(1deg); }
}
@keyframes finalHalo {
  from { opacity:.56; transform:scale(.92); }
  to { opacity:1; transform:scale(1.12); }
}

@media (max-width:700px) {
  .final-gift { position:fixed; top:52%; width:min(60vw,280px); }
  .final-gift__label { font-size:.8rem; }
}


/* V8 · mobile-first hardening + intro salteable */
html, body { width: 100%; height: 100%; overscroll-behavior: none; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.intro { isolation: isolate; overflow: hidden; }
.intro::before {
  content:"";
  position:absolute;
  inset:-6%;
  z-index:0;
  background: #0b0311 url('assets/intro-poster.jpg') center / cover no-repeat;
  filter: blur(20px) saturate(1.08) brightness(.56);
  transform: scale(1.08);
  opacity:.78;
}
.intro__video { z-index:1; }
.intro__shade { z-index:2; }
.skip-intro-btn {
  position:absolute;
  z-index:6;
  top:max(18px, env(safe-area-inset-top));
  left:max(18px, env(safe-area-inset-left));
  padding:10px 15px;
  min-height:44px;
  font-size:.86rem;
  font-weight:800;
  background:rgba(13,4,28,.58);
}
.intro-play-fallback {
  display:none;
  position:absolute;
  z-index:7;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  min-width:min(270px, 78vw);
}
.intro-play-fallback.is-visible { display:block; }
.memories { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.memory-card { max-height: calc(100dvh - 28px); overflow-y:auto; -webkit-overflow-scrolling:touch; }

@media (max-width: 700px) {
  .app, .screen { min-height:100dvh; }
  .gate { padding:max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); }
  .gate__card { width:min(94vw,560px); padding:28px 20px; }
  .gate h1 { font-size:clamp(2rem, 11vw, 3.4rem); }
  .gate__copy { font-size:.98rem; }
  .primary-btn { min-height:48px; min-width:min(240px, 82vw); }

  .intro__video {
    object-fit:contain;
    object-position:center center;
    background:transparent;
  }
  .skip-intro-btn {
    top:max(10px, env(safe-area-inset-top));
    left:max(10px, env(safe-area-inset-left));
    min-height:42px;
    padding:9px 12px;
    font-size:.78rem;
  }
  .sound-btn {
    top:max(10px, env(safe-area-inset-top));
    right:max(10px, env(safe-area-inset-right));
    width:42px;
    height:42px;
  }
  .intro__cta {
    width:calc(100vw - 24px);
    max-width:430px;
    padding:16px 14px 18px;
    border-radius:22px;
  }
  .intro__cta p { font-size:1rem; }

  .memories {
    overflow-y:auto;
    overflow-x:hidden;
    background-position:center top;
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
  }
  .memories__header {
    position:sticky;
    top:max(8px, env(safe-area-inset-top));
    left:auto;
    transform:none;
    width:calc(100% - 20px);
    min-width:0;
    margin:10px auto 0;
    padding:12px 12px 12px 15px;
    border-radius:18px;
    z-index:70;
  }
  .memories__header h2 { font-size:clamp(1.12rem, 5.4vw, 1.45rem); }
  .progress-pill { min-width:76px; padding:7px 8px; font-size:1rem; }
  .progress-pill small { font-size:.43rem; }
  .objects-stage {
    min-height:auto;
    padding:16px 10px 115px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;
    gap:6px;
    overflow:visible;
  }
  .object-btn {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:100%;
    height:auto;
    aspect-ratio:1;
    min-width:0;
  }
  .object-btn img { max-width:100%; }
  .memories__controls {
    left:max(8px, env(safe-area-inset-left));
    right:max(8px, env(safe-area-inset-right));
    bottom:max(8px, env(safe-area-inset-bottom));
    justify-content:space-between;
    gap:6px;
  }
  .memories__controls .glass-control {
    min-height:42px;
    padding:8px 10px;
    font-size:.72rem;
  }
  .memory-modal { padding:10px; align-items:center; }
  .memory-card {
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    border-radius:24px;
    padding:26px 18px 20px;
  }
  .memory-card h3#memory-title { font-size:clamp(1.55rem, 7.2vw, 2.2rem); }
  .memory-card #memory-text { font-size:clamp(.98rem, 4.4vw, 1.12rem); line-height:1.5; }
  .memory-card__close { right:10px; top:10px; width:42px; height:42px; }
  .memory-card__footer { margin-top:18px; padding-top:12px; }
  .final-gift { position:fixed; top:52%; width:min(64vw,260px); }
}

@media (max-width: 390px) {
  .memories__controls .restart-link { max-width:58vw; white-space:normal; line-height:1.1; }
  .objects-stage { gap:2px; padding-inline:6px; }
}


/* V10 · cierre definitivo: el último regalo se consume y aparece la celebración */
.final-gift.is-leaving {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(.62) rotate(8deg) !important;
  filter: blur(7px) brightness(1.5);
}
.memory-modal.is-final .replay-all-btn { display:none !important; }

.final-celebration {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,67,192,.22), transparent 34%),
    radial-gradient(circle at 80% 14%, rgba(68,210,255,.18), transparent 33%),
    linear-gradient(145deg, rgba(32,4,45,.88), rgba(6,11,37,.92) 58%, rgba(2,33,47,.9));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition: opacity .55s ease, visibility .55s ease;
}
.final-celebration.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.final-celebration__card {
  position: relative;
  z-index: 3;
  width: min(760px, 92vw);
  text-align: center;
  padding: clamp(34px, 6vw, 68px);
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(74,9,78,.82), rgba(12,12,47,.80) 56%, rgba(4,43,60,.78));
  box-shadow: 0 32px 90px rgba(0,0,0,.42), 0 0 90px rgba(255,75,199,.2), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(22px) scale(.94);
  opacity: 0;
  transition: transform .72s cubic-bezier(.2,.85,.2,1), opacity .55s ease;
}
.final-celebration.is-visible .final-celebration__card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.final-celebration__heart {
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  margin-bottom: 6px;
  filter: drop-shadow(0 0 24px rgba(255,74,191,.6));
  animation: celebrationHeart 1.6s ease-in-out infinite;
}
.final-celebration h2 {
  margin: 4px 0 20px;
  font-size: clamp(2.7rem, 7vw, 5.8rem);
  line-height: .95;
  letter-spacing: -.055em;
}
.final-celebration p:not(.eyebrow) {
  margin: 0 auto 10px;
  max-width: 620px;
  color: rgba(255,255,255,.9);
  font-size: clamp(1.08rem, 2.6vw, 1.55rem);
  line-height: 1.5;
}
.final-celebration__signature {
  margin-top: 18px !important;
  font-weight: 850;
  color: #fff !important;
}
.final-celebration__replay {
  margin-top: 28px;
}

.celebration-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.confetti-piece {
  position: absolute;
  left: var(--x);
  top: -8vh;
  width: 10px;
  height: 22px;
  border-radius: 3px;
  background: var(--c);
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 75%, transparent);
  animation: confettiFall var(--dur) linear var(--delay) infinite;
}
.firework {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: translate(-50%,-50%);
  animation: fireworkPulse 1.9s ease-out infinite;
}
.firework b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 30px;
  border-radius: 999px;
  transform-origin: 50% 0%;
  transform: rotate(var(--a)) translateY(-7px) scaleY(.15);
  background: linear-gradient(to bottom, var(--fc), transparent);
  box-shadow: 0 0 12px var(--fc);
  animation: fireworkRay 1.9s ease-out infinite;
}
@keyframes confettiFall {
  0% { transform: translate3d(0,-12vh,0) rotate(0deg); opacity:0; }
  8% { opacity:1; }
  100% { transform: translate3d(var(--drift),112vh,0) rotate(var(--rot)); opacity:.9; }
}
@keyframes fireworkPulse {
  0%, 20% { opacity:0; transform:translate(-50%,-50%) scale(.3); }
  28% { opacity:1; }
  72%,100% { opacity:0; transform:translate(-50%,-50%) scale(1.7); }
}
@keyframes fireworkRay {
  0%, 20% { opacity:0; transform:rotate(var(--a)) translateY(-7px) scaleY(.1); }
  30% { opacity:1; }
  70%,100% { opacity:0; transform:rotate(var(--a)) translateY(-44px) scaleY(1); }
}
@keyframes celebrationHeart {
  0%,100% { transform:scale(.94); }
  50% { transform:scale(1.08); }
}
@media (max-width: 560px) {
  .final-celebration { padding: 14px; }
  .final-celebration__card { border-radius: 28px; padding: 34px 22px; }
  .confetti-piece { width: 8px; height: 18px; }
}


/* V11 · final ceremonial + recuerdo 60 estrictamente último */
.final-celebration.is-effects-only {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  z-index: 90;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,67,192,.12), transparent 34%),
    radial-gradient(circle at 80% 14%, rgba(68,210,255,.11), transparent 33%),
    rgba(5,0,15,.12);
}
.final-celebration.is-effects-only .final-celebration__card {
  opacity: 0 !important;
  transform: translateY(42px) scale(.92) !important;
  pointer-events: none;
}
.memory-modal.is-grand-final {
  transition: opacity 1.05s ease, visibility 1.05s;
}
.memory-modal.is-grand-final .memory-modal__backdrop {
  background: rgba(4,0,14,.48);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.memory-modal.is-grand-final .memory-card {
  opacity: 0;
  transform: translateY(54px) scale(.93);
  transition:
    opacity 1.45s ease .18s,
    transform 1.65s cubic-bezier(.18,.8,.18,1) .12s,
    box-shadow 1.3s ease;
  box-shadow: 0 35px 110px rgba(0,0,0,.48), 0 0 95px rgba(255,84,201,.10), inset 0 1px 0 rgba(255,255,255,.18);
}
.memory-modal.is-grand-final.is-visible .memory-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: 0 35px 110px rgba(0,0,0,.48), 0 0 120px rgba(255,84,201,.30), inset 0 1px 0 rgba(255,255,255,.22);
}
.memory-modal.is-grand-final .memory-card__icon {
  animation: grandGiftGlow 1.8s ease-in-out infinite;
}
@keyframes grandGiftGlow {
  0%,100% { transform:scale(.94); filter:drop-shadow(0 0 18px rgba(255,59,187,.42)); }
  50% { transform:scale(1.1); filter:drop-shadow(0 0 38px rgba(255,89,210,.85)); }
}

.final-celebration.is-arriving .final-celebration__card {
  transition-duration: 2.1s;
  transition-delay: .45s;
}
.final-celebration__actions {
  margin-top: 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.final-celebration__room {
  min-height:48px;
  padding-inline:20px;
  font-weight:850;
  font-size:.96rem;
}
.firework b {
  height: 38px;
  width: 6px;
}
@media (max-width:560px) {
  .final-celebration__actions {
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .final-celebration__actions button {
    width:100%;
  }
}


/* V12 · fuegos/aplausos robustos + botones alineados */
.celebration-fx {
  position: fixed !important;
  inset: 0 !important;
  z-index: 95 !important;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.celebration-fx.is-active {
  opacity: 1;
  visibility: visible;
}
.celebration-fx.is-front { z-index: 235 !important; }
.final-celebration { z-index: 240 !important; }
.final-celebration__card { position:relative; z-index:2; }

.confetti-piece {
  width: 12px !important;
  height: 26px !important;
  opacity: 1;
  filter: saturate(1.15) brightness(1.12);
}
.firework {
  width: 12px !important;
  height: 12px !important;
}
.firework b {
  width: 7px !important;
  height: 46px !important;
  box-shadow: 0 0 16px var(--fc), 0 0 28px var(--fc) !important;
}
@keyframes fireworkPulse {
  0%, 14% { opacity:0; transform:translate(-50%,-50%) scale(.2); }
  24% { opacity:1; }
  68% { opacity:.95; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.95); }
}
@keyframes fireworkRay {
  0%, 16% { opacity:0; transform:rotate(var(--a)) translateY(-8px) scaleY(.08); }
  26% { opacity:1; }
  72% { opacity:.95; }
  100% { opacity:0; transform:rotate(var(--a)) translateY(-58px) scaleY(1.15); }
}

.memory-modal.is-grand-final .memory-card {
  transition:
    opacity 1.8s ease .45s,
    transform 2.2s cubic-bezier(.18,.8,.18,1) .35s,
    box-shadow 1.6s ease;
}
.memory-modal.is-grand-final.is-visible .memory-card {
  box-shadow: 0 35px 110px rgba(0,0,0,.48), 0 0 135px rgba(255,84,201,.34), inset 0 1px 0 rgba(255,255,255,.22);
}

.final-celebration__actions {
  width: min(920px, 100%);
  margin: 30px auto 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 16px;
  align-items: stretch !important;
}
.final-celebration__actions button {
  width: 100%;
  height: 60px;
  min-height: 60px;
  margin: 0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 22px !important;
  box-sizing:border-box;
  line-height:1.15;
  text-align:center;
}
@media (max-width:700px) {
  .final-celebration__actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .final-celebration__actions button {
    height:auto;
    min-height:54px;
    padding: 12px 16px !important;
  }
}