:root {
  --bg1: #fff7fa;
  --bg2: #ffe3ee;
  --ink: #8e1944;
  --ink-soft: #b5517a;
  --pink: #f26b97;
  --pink-dark: #d83a6e;
  --paper: #fffdf8;
}

* { box-sizing: border-box; }

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

body {
  font-family: "VT323", monospace;
  color: var(--ink);
  background:
    conic-gradient(#ffffff55 25%, transparent 0 50%, #ffffff55 0 75%, transparent 0) 0 0 / 32px 32px,
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  image-rendering: pixelated;
}

main {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100svh;
  justify-content: center;
  padding: max(36px, env(safe-area-inset-top)) 16px max(64px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ---------- titulo ---------- */
h1 {
  font-family: "Press Start 2P", monospace;
  font-weight: normal;
  font-size: clamp(18px, 5.2vw, 34px);
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  color: var(--pink-dark);
  text-shadow: 3px 3px 0 #ffc2d6, 6px 6px 0 #fff;
  min-height: 2em;
}

h1 .ch {
  display: inline-block;
  animation: hop 1.6s steps(4) infinite;
}
h1 .ch.sp { width: .6em; }

@keyframes hop {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
}

h1.typing::after {
  content: "";
  display: inline-block;
  width: .5em;
  height: 1em;
  margin-left: 4px;
  background: var(--pink-dark);
  animation: blink .5s steps(1) infinite;
  vertical-align: -0.1em;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- rosas ---------- */
.garden {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(4px, 3vw, 28px);
  transition: transform .8s steps(8);
}

.rose {
  image-rendering: pixelated;
  width: clamp(80px, 22vw, 150px);
  height: auto;
  aspect-ratio: 15 / 20;
  filter: drop-shadow(4px 4px 0 #f7b6cb88);
  animation: sway 3s steps(3) infinite;
  transform-origin: 50% 100%;
}
.rose.center { width: clamp(110px, 30vw, 210px); animation-delay: -1s; }
.rose.right { animation-delay: -2s; }

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

.rose.pop { animation: pop .7s steps(5) 1, sway 3s steps(3) .7s infinite; }
@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(-4deg); }
  70% { transform: scale(.92) rotate(3deg); }
  100% { transform: scale(1); }
}

.garden.small { transform: scale(.62); margin: -40px 0 -40px; }

/* ---------- boton pixel ---------- */
.pxbtn {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(12px, 3.4vw, 16px);
  color: #fff;
  background: var(--pink-dark);
  border: 0;
  padding: 18px 26px;
  cursor: pointer;
  position: relative;
  box-shadow:
    0 -4px 0 0 var(--ink),
    0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink),
    4px 0 0 0 var(--ink),
    inset -4px -4px 0 0 #a8224f,
    inset 4px 4px 0 0 #f58db0;
  transition: transform .1s steps(2);
}
.pxbtn:hover { transform: translateY(-3px); background: #e44a7d; }
.pxbtn:active { transform: translateY(3px); }
.pxbtn.gone { display: none; }
.pxbtn { animation: pulse 1.2s steps(2) infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }

/* ---------- revelado ---------- */
.reveal {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .8s steps(6);
}
.reveal.show { max-height: 4000px; opacity: 1; overflow: visible; }

.frame {
  margin: 0;
  position: relative;
  width: min(calc(100% - 28px), 340px);
  aspect-ratio: 2 / 3;
  background: var(--paper);
  padding: 14px;
  box-shadow:
    0 -6px 0 0 var(--ink),
    0 6px 0 0 var(--ink),
    -6px 0 0 0 var(--ink),
    6px 0 0 0 var(--ink),
    10px 10px 0 6px #f7b6cb;
}
.frame img, .frame .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}
.frame .ph {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #ffe3ee;
  font-size: 28px;
  color: var(--ink-soft);
}
.frame.empty img { display: none; }
.frame.empty .ph { display: flex; }

.ph-heart {
  width: 8px; height: 8px;
  background: transparent;
  box-shadow:
    8px 0 var(--pink), 16px 0 var(--pink), 40px 0 var(--pink), 48px 0 var(--pink),
    0 8px var(--pink), 8px 8px var(--pink), 16px 8px var(--pink), 24px 8px var(--pink), 32px 8px var(--pink), 40px 8px var(--pink), 48px 8px var(--pink), 56px 8px var(--pink),
    0 16px var(--pink), 8px 16px var(--pink), 16px 16px var(--pink), 24px 16px var(--pink), 32px 16px var(--pink), 40px 16px var(--pink), 48px 16px var(--pink), 56px 16px var(--pink),
    8px 24px var(--pink), 16px 24px var(--pink), 24px 24px var(--pink), 32px 24px var(--pink), 40px 24px var(--pink), 48px 24px var(--pink),
    16px 32px var(--pink), 24px 32px var(--pink), 32px 32px var(--pink), 40px 32px var(--pink),
    24px 40px var(--pink), 32px 40px var(--pink);
  margin: 0 56px 40px 0;
}

/* ---------- carta ---------- */
.letter {
  width: min(100%, 460px);
  background: var(--paper);
  padding: 22px 22px 18px;
  text-align: center;
  position: relative;
  box-shadow:
    0 -4px 0 0 var(--ink),
    0 4px 0 0 var(--ink),
    -4px 0 0 0 var(--ink),
    4px 0 0 0 var(--ink),
    8px 8px 0 4px #f7b6cb;
}
.letter h2 {
  font-family: "Press Start 2P", monospace;
  font-weight: normal;
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 12px;
  color: var(--pink-dark);
}
.letter p {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.15;
}
.sign {
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  color: var(--ink-soft);
}

/* ---------- musica ---------- */
.mute {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 5;
  width: 48px;
  height: 48px;
  font-family: "Press Start 2P", monospace;
  font-size: 18px;
  color: #fff;
  background: var(--pink-dark);
  border: 0;
  cursor: pointer;
  box-shadow:
    0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink),
    -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink),
    inset -3px -3px 0 0 #a8224f, inset 3px 3px 0 0 #f58db0;
}
.mute[hidden] { display: none; }
.mute.off { background: #b9a3ad; }
.mute.off::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 22px;
  height: 4px;
  background: var(--ink);
  transform: rotate(-45deg);
}

/* ---------- efectos ---------- */
#fx {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.fx-item {
  position: absolute;
  top: -30px;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: fall linear forwards;
}
.fx-item.up { top: auto; bottom: -30px; animation-name: rise; }

@keyframes fall {
  to { transform: translate(var(--dx, 0), 110vh) rotate(var(--rot, 180deg)); }
}
@keyframes rise {
  to { transform: translate(var(--dx, 0), -110vh); }
}

@media (prefers-reduced-motion: reduce) {
  .rose, h1 .ch, .pxbtn { animation: none; }
}