:root {
  --ink: #2c1a0d;
  --cream: #fff6e6;
  --gold: #ffc21f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 0%, #3a2450 0%, #1a1027 60%, #0f0a18 100%);
  font-family: "Nunito Sans", system-ui, sans-serif;
  color: var(--cream);
  padding: 32px 16px;
}

.stage {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.eyebrow {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #f2c9a0;
  opacity: 0.85;
}

.title {
  margin: 0 0 18px;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  color: var(--cream);
}

.scene-wrap {
  position: relative;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.scene {
  display: block;
  width: 100%;
  height: auto;
}

.stars circle {
  fill: #fff6e6;
  opacity: 0.5;
}

.grass path {
  stroke: #2c5a3a;
  stroke-width: 2;
  stroke-linecap: round;
}

.tree-shadow {
  fill: #10281a;
  opacity: 0.4;
  filter: blur(2px);
}

/* semilla */
.seed {
  fill: #5a3a20;
  stroke: #2c1a0d;
  stroke-width: 1;
  transform-origin: 200px 40px;
}

.seed-group.falling .seed {
  animation: seedFall 900ms cubic-bezier(.55, 0, .85, .35) forwards;
}

@keyframes seedFall {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(388px) rotate(200deg); }
}

.seed-group.hide { opacity: 0; transition: opacity 200ms ease; }

.dust {
  fill: var(--cream);
  opacity: 0;
  transform-origin: 200px 428px;
}

.dust.pulse {
  animation: dustPulse 500ms ease-out forwards;
}

@keyframes dustPulse {
  0%   { r: 3; opacity: 0.65; }
  100% { r: 34; opacity: 0; }
}

/* tronco */
#trunk-path {
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
}

#trunk-path.grow {
  transition: stroke-dashoffset 1300ms cubic-bezier(.22, .9, .3, 1);
  stroke-dashoffset: 0;
}

/* copa / girasoles */
.canopy {
  opacity: 1;
}

.canopy .bloom {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}

.canopy .bloom.show {
  animation: bloomIn 620ms cubic-bezier(.2, 1.4, .4, 1) forwards;
}

@keyframes bloomIn {
  0%   { opacity: 0; transform: scale(0) rotate(var(--r, 0deg)); }
  60%  { opacity: 1; transform: scale(1.18) rotate(var(--r, 0deg)); }
  100% { opacity: 1; transform: scale(var(--s, 1)) rotate(var(--r, 0deg)); }
}

#tree {
  transform-origin: 200px 430px;
}

#tree.sway {
  animation: sway 5200ms ease-in-out infinite;
}

@keyframes sway {
  0%, 100% { transform: rotate(-0.6deg); }
  50%      { transform: rotate(0.7deg); }
}

.falling-petal {
  fill: var(--gold);
  opacity: 0.9;
}

/* hojas del tronco */
#leaves path {
  fill: #2f6b43;
}

/* resplandor detrás del corazón */
#heart-glow {
  opacity: 0;
  transform-origin: 200px 165px;
}

#heart-glow.on {
  animation: glowPulse 4200ms ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.08); }
}

/* chispas / luciérnagas */
.sparkle {
  fill: #ffe9ad;
  opacity: 0;
}

.sparkle.twinkle {
  animation: twinkle 2400ms ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 0.9; transform: scale(1.15); }
}

/* mensaje final */
.message {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 20px;
  fill: #fff6e6;
  opacity: 0;
  transition: opacity 900ms ease, transform 900ms ease;
  transform: translateY(6px);
  transform-box: fill-box;
  transform-origin: center;
}

.message.show {
  opacity: 0.95;
  transform: translateY(0);
}

/* hint de click inicial */
.hint {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 12, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(3px);
  color: var(--cream);
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 250ms ease, transform 250ms ease;
}

.hint:hover { transform: translateX(-50%) translateY(-1px); }

.hint.hidden {
  opacity: 0;
  pointer-events: none;
}

.hint-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(255, 194, 31, 0.55);
  animation: pingDot 1600ms ease-out infinite;
}

@keyframes pingDot {
  0%   { box-shadow: 0 0 0 0 rgba(255, 194, 31, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 194, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 194, 31, 0); }
}

.restart {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%) translateY(8px);
  background: #ffc21f;
  color: #2c1a0d;
  border: none;
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 400ms ease, transform 400ms ease;
}

.restart.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.restart:hover { filter: brightness(1.05); }

.caption {
  margin: 18px 0 0;
  font-size: 0.8rem;
  color: #d9c3e6;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  #trunk-path.grow,
  .canopy .bloom.show,
  .seed-group.falling .seed,
  #tree.sway {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}