:root {
  --card-bg: #f4e9dc;
  --text: #3a2e2a;
  --muted: #6b5a52;
  --line: rgba(0, 0, 0, 0.25);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  color: var(--text);
  /* Fondo tipo “San Valentín” (puedes cambiarlo por imagen si quieres) */
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255, 0, 120, 0.25) 0 18%,
      transparent 19%
    ),
    radial-gradient(
      circle at 70% 40%,
      rgba(255, 0, 120, 0.18) 0 16%,
      transparent 17%
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(255, 0, 120, 0.2) 0 14%,
      transparent 15%
    ),
    #1a0c1a;
  overflow: hidden;
  padding: 24px;
}

.card {
  width: min(920px, 100%);
  background: var(--card-bg);
  border-radius: 26px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  padding: 26px 26px 18px;
}

.content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
  align-items: center;
  min-height: 360px;
}

@media (max-width: 780px) {
  .content {
    grid-template-columns: 1fr;
  }
}

.poem h1 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
}
.poem p {
  margin: 0;
  line-height: 1.6;
  font-size: 16px;
}
.poem .signature {
  margin-top: 10px;
  font-weight: 600;
}

.tree-area {
  position: relative;
  width: 100%;
  height: 330px;
  display: grid;
  place-items: center;
}

.tree {
  position: relative;
  width: 320px;
  height: 280px;
  max-width: 100%;
}

/* Copa en forma de corazón: contenedor con clip-path */
.heart-canopy {
  position: absolute;
  inset: 0 0 auto 0;
  margin: auto;
  top: 10px;
  width: 260px;
  height: 220px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.1));
  clip-path: path(
    "M130 40 C130 10 160 0 185 15 C210 30 212 65 195 90 C175 120 145 150 130 165 C115 150 85 120 65 90 C48 65 50 30 75 15 C100 0 130 10 130 40 Z"
  );
}

.leaf {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(var(--r));
  opacity: 0.95;
  animation: leafFloat 3.5s ease-in-out infinite;
  animation-delay: var(--d);
}

/* Corazón con CSS */
.leaf::before,
.leaf::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 9px;
  background: var(--c);
  border-radius: 6px 6px 0 0;
  left: 3px;
  top: 1px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.leaf::after {
  left: 0px;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

@keyframes leafFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(var(--r)) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(var(--r)) translateY(-3px);
  }
}

/* Tronco */
.trunk {
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: 26px;
  height: 110px;
  transform: translateX(-50%);
  background: linear-gradient(#7b4a2a, #5b341e);
  border-radius: 10px;
}
.trunk::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  width: 54px;
  height: 14px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.12);
  filter: blur(4px);
  border-radius: 50%;
}

/* Línea inferior como en tu video */
.baseline {
  margin-top: 8px;
  height: 1px;
  background: var(--line);
  width: 100%;
}

.timer {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
.timer strong {
  color: var(--text);
}

/* Corazones cayendo */
.falling {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fall {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  opacity: var(--o);
  transform: rotate(var(--r));
  animation: fall var(--t) linear infinite;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.08));
}
.fall::before,
.fall::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 70%;
  background: var(--c);
  border-radius: 999px 999px 0 0;
  top: 10%;
}
.fall::before {
  left: 25%;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.fall::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

@keyframes fall {
  to {
    transform: translateY(120vh) rotate(var(--r));
  }
}