/* ===== Base ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:#000;
  overflow:hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  cursor:none; /* mini_star como cursor */
}

/* ===== UI Música ===== */
.music-ui{
  position:fixed; z-index:9; top:12px; left:12px;
  display:flex; align-items:center; gap:.6rem;
  color:#eaffb8; text-shadow:0 2px 10px #000;
}
#musicBtn{
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  font-size:22px; background:rgba(0,128,0,.85); color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  transition:transform .15s ease, background .2s ease;
}
.music-ui.playing #musicBtn{ background:rgba(255,215,0,.95); color:#000; transform:scale(1.06);}
#musicBtn:active{transform:scale(.97)}
#musicLabel{font-weight:700}

/* ===== Cielo ===== */
.night{
  position:fixed; inset:0; z-index:0;
  background:radial-gradient(circle at bottom, #001a00 20%, #000 100%);
}
.star{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff; opacity:.8; animation:twinkle 5s infinite ease-in-out;
}
@keyframes twinkle { 0%,100%{opacity:.5} 50%{opacity:1} }
.shooting-star{
  position:absolute; z-index:2; width:6px; height:6px; border-radius:50%;
  background:#fff; filter:drop-shadow(0 0 10px #fff);
}
.shooting-star::after{
  content:""; position:absolute; right:100%; top:50%; transform:translateY(-50%);
  width:200px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 70%, #fff 100%);
  box-shadow:0 0 12px rgba(255,255,255,.6);
}

/* ===== Envoltorio ===== */
.wrap{
  position:absolute; pointer-events:none; transform:translateX(-50%);
  width:clamp(260px, 42vw, 560px); height:56vh;
  filter:drop-shadow(0 -6px 28px rgba(255,192,203,.25));
}
.wrap.back{
  z-index:1;
  background:linear-gradient(135deg, rgba(255,182,193,.22), rgba(255,192,203,.28));
  border:2px solid rgba(255,192,203,.35);
  clip-path:polygon(8% 10%, 92% 10%, 100% 42%, 78% 100%, 22% 100%, 0% 42%);
}
.wrap.front{
  z-index:5;
  background:linear-gradient(135deg, rgba(255,182,193,.30), rgba(255,192,203,.46));
  border:2px solid rgba(255,192,203,.50);
  clip-path:polygon(20% 35%, 80% 35%, 92% 70%, 70% 100%, 30% 100%, 8% 70%);
}

/* Lazo (ligeramente más arriba y más grande) */
.bow{ position:absolute; left:50%; bottom:28%; transform:translateX(-50%); z-index:6; }
.bow .knot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:50%; background:#e60026;
  box-shadow:0 0 12px rgba(230,0,38,.55);
}
.bow .loop{
  position:absolute; top:-10px; width:124px; height:80px;
  background:linear-gradient(135deg, #ff3055, #c40028);
}
.bow .loop.left { left:-136px; transform:rotate(-12deg); border-radius:52px 52px 52px 0; }
.bow .loop.right{ right:-136px; transform:rotate(12deg);  border-radius:52px 52px 0 52px; }
.bow .tail{
  position:absolute; top:24px; width:30px; height:132px;
  background:linear-gradient(180deg,#ff3055,#c40028);
  clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.bow .tail.left{ left:-30px; transform:rotate(8deg); }
.bow .tail.right{ right:-30px; transform:rotate(-8deg); }

/* ===== Ramo por capas ===== */
.flowers{
  position:absolute; transform:translateX(-50%); transform-origin:bottom center;
  animation:bouquetSway 5s ease-in-out infinite; /* mecida global */
}
@keyframes bouquetSway{
  0%,100%{ transform:translateX(-50%) rotate(-1deg); }
  50%    { transform:translateX(-50%) rotate( 1deg); }
}
.flowers.back  { z-index:2; }
.flowers.front { z-index:4; }

/* Flor (ángulo fijo; sin animación individual) */
.flower{
  position:absolute; bottom:0; transform-origin:bottom center;
  transform: rotate(var(--tilt));
  /* la animación de aparición se aplica desde JS con retraso escalonado */
}

/* Tallo + hojas */
.stem{
  position:absolute; bottom:0; left:-3px; width:6px; border-radius:3px;
  background:#228B22; box-shadow:0 0 8px rgba(0,0,0,.4);
}
.leaf{
  position:absolute; width:48px; height:30px;
  background:linear-gradient(90deg,#2da34e,#1e7a35);
  border-radius:60% 60% 20% 20% / 60% 60% 40% 40%;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.leaf.left{  transform:rotate(-32deg); left:-42px; }
.leaf.right{ transform:rotate(32deg);  left:  6px; }

/* Cabeza */
.head{ position:absolute; left:50%; transform:translateX(-50%); }

/* Pétalos + centro */
.petal{
  position:absolute; top:50%; left:50%; transform-origin:50% 100%;
  border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,.25);
}
.petal.outer{ background:#f1c40f; }
.petal.inner{ background:#ffe070; }
.center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#5a3a12 0%,#2e1c07 70%);
  box-shadow: inset 0 0 14px rgba(0,0,0,.55), 0 0 10px rgba(0,0,0,.25);
}

/* Mensaje: bien abajo y por delante de la foto */
.message{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(8px, env(safe-area-inset-bottom, 8px));
  background: #fce700;
  color: #000;
  font-weight: 800;
  font-size: 24px;
  padding: 10px 20px;
  border-radius: 8px;
  z-index: 20;              /* delante de la foto y de todo */
  opacity: 0;
  animation: fadeInMessage 1.2s forwards;
  animation-delay: 1.2s;
}
@keyframes fadeInMessage { to{opacity:1} }

/* Foto (origen del ramo) — ligeramente más grande */
#foto{
  position:fixed; bottom:8px; left:50%; transform:translateX(-50%);
  max-height:28vh; /* antes 24vh */
  width:auto; z-index:6;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.6));
  animation:pop .9s ease-out both 1.0s, bob 2.4s ease-in-out infinite 2.1s;
}
@keyframes pop{ from{opacity:0; transform:translateX(-50%) translateY(18px) scale(.95)} to{opacity:1; transform:translateX(-50%) translateY(0) scale(1)} }
@keyframes bob{
  0%,100%{ transform:translateX(-50%) translateY(6px)  scale(1.00); }
  50%    { transform:translateX(-50%) translateY(-12px) scale(1.08); }
}

/* Aparición rápida y limpia de cada flor (se usa desde JS con retraso) */
@keyframes flowerIn{
  from{
    opacity:0;
    transform: rotate(var(--tilt)) translateY(16px) scale(.85);
    filter:blur(1px);
  }
  to{
    opacity:1;
    transform: rotate(var(--tilt)) translateY(0) scale(1);
    filter:blur(0);
  }
}

/* Cursor mini_star + chispas */
#cursor-star{
  position:fixed; width:28px; height:28px; z-index:10; pointer-events:none;
  background:center/contain no-repeat url('mini_star.png');
}
.sparkle{
  position:fixed; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,160,1) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none; z-index:9; opacity:0; transform:scale(.4);
  animation:spk 1s ease-out forwards;
}
@keyframes spk{ 10%{opacity:.9} 100%{opacity:0; transform:scale(1.5) translateY(6px);} }