@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@300;400;600;800&display=swap');

:root {
  --hot: #ff2f98;
  --soft: #ff8bc8;
  --dark: #060003;
  --panel: rgba(22, 0, 13, .70);
  --white: #fff4fa;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Poppins, sans-serif;
  color: var(--white);
  background:
    radial-gradient(circle at top, #5b0030 0%, #19000e 47%, #030002 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 47, 152, .24), transparent 28%),
    radial-gradient(circle at 86% 74%, rgba(255, 139, 200, .15), transparent 30%);
  pointer-events: none;
  z-index: 0;
}

#stars, #confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#stars { z-index: 1; }
#confetti { z-index: 9; }

#floatingHearts {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.float-heart {
  position: absolute;
  color: rgba(255, 80, 166, .70);
  text-shadow: 0 0 16px var(--hot);
  animation: floatHeart linear forwards;
}

@keyframes floatHeart {
  from { transform: translateY(110vh) rotate(0deg) scale(.75); opacity: 0; }
  12%, 85% { opacity: .8; }
  to { transform: translateY(-15vh) rotate(360deg) scale(1.15); opacity: 0; }
}

.screen {
  display: none;
  min-height: 100svh;
  position: relative;
  z-index: 3;
  padding: 16px;
}

.screen.active {
  display: flex;
  animation: screenIn .55s ease both;
}

@keyframes screenIn {
  from { opacity: 0; transform: translateY(12px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Intro */
#intro {
  align-items: center;
  justify-content: center;
}

.intro-card {
  width: min(850px, 100%);
  text-align: center;
  padding: clamp(16px, 4vw, 32px);
  border-radius: 30px;
  background: var(--panel);
  border: 1px solid rgba(255, 139, 200, .35);
  box-shadow: 0 0 42px rgba(255, 47, 152, .28), inset 0 0 26px rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
}

.photo-row {
  width: min(560px, 100%);
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2vw, 16px);
  align-items: end;
}

.photo-row img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 3px solid white;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(255, 47, 152, .65);
}

.photo-row img:nth-child(1) { transform: rotate(-4deg); }
.photo-row img:nth-child(2) { transform: translateY(8px) rotate(2deg); }
.photo-row img:nth-child(3) { transform: rotate(4deg); }

.script {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: clamp(40px, 8vw, 70px);
  line-height: .92;
  text-shadow: 0 0 18px var(--hot);
}

h1 {
  margin: 8px 0 12px;
  font-family: "Great Vibes", cursive;
  font-size: clamp(68px, 15vw, 132px);
  line-height: .85;
  text-shadow: 0 0 20px var(--hot), 0 0 48px var(--hot);
}

h2 {
  margin: 0 0 14px;
  color: var(--soft);
  font-size: clamp(22px, 5vw, 34px);
}

.intro-text {
  width: min(560px, 100%);
  margin: 0 auto 22px;
  line-height: 1.65;
  font-size: clamp(15px, 3.7vw, 18px);
}

button {
  border: 2px solid var(--soft);
  background: rgba(255, 47, 152, .16);
  color: white;
  border-radius: 18px;
  padding: 14px 24px;
  font-size: clamp(16px, 4vw, 18px);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 47, 152, .65);
}

button:active { transform: scale(.97); }

/* Game */
#game {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.game-top {
  width: min(980px, 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 4px auto 10px;
}

.game-top h2 {
  color: white;
  margin: 0;
  font-size: clamp(30px, 7vw, 46px);
  text-shadow: 0 0 18px var(--hot);
}

.progress {
  flex: 0 0 auto;
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 18px;
  background: rgba(255, 47, 152, .15);
  border: 1px solid rgba(255, 139, 200, .38);
}

#heartField {
  position: relative;
  width: min(980px, 100%);
  height: min(66svh, 640px);
  min-height: 510px;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(10, 0, 6, .30);
  border: 1px solid rgba(255, 139, 200, .28);
  box-shadow: inset 0 0 32px rgba(255,47,152,.10);
}

.heart-balloon {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border: 0;
  background: transparent;
  padding: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px rgba(255, 47, 152, .85));
  animation: heartDrift 3.2s ease-in-out infinite;
}

.heart-shape {
  position: absolute;
  inset: 0;
  transform: rotate(-45deg);
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.95) 0 7%, transparent 12%),
    linear-gradient(135deg, #ff9bd0 0%, #ff2f98 45%, #9b003f 100%);
  border-radius: 12% 0 18% 0;
  box-shadow: inset -10px -14px 22px rgba(54, 0, 24, .38);
}

.heart-shape::before,
.heart-shape::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.8) 0 7%, transparent 12%),
    linear-gradient(135deg, #ff9bd0 0%, #ff2f98 45%, #9b003f 100%);
  border-radius: 50%;
}

.heart-shape::before { top: -50%; left: 0; }
.heart-shape::after { top: 0; left: 50%; }

.heart-number {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  color: white;
  font-weight: 800;
  font-size: calc(var(--s) * .33);
  text-shadow: 0 0 8px #5a0028;
}

.string {
  position: absolute;
  left: 50%;
  top: 78%;
  width: 2px;
  height: calc(var(--s) * .42);
  transform: translateX(-50%);
  background: linear-gradient(var(--soft), transparent);
  opacity: .85;
}

@keyframes heartDrift {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 -13px; rotate: 2deg; }
}

.heart-balloon.popped {
  animation: heartPop .36s ease forwards;
  pointer-events: none;
}

@keyframes heartPop {
  to { opacity: 0; transform: translate(-50%, -50%) scale(2.1) rotate(24deg); filter: blur(5px); }
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--soft);
  border-radius: 50%;
  pointer-events: none;
  animation: particleOut .72s ease-out forwards;
  box-shadow: 0 0 10px var(--hot);
}

@keyframes particleOut {
  to { transform: translate(var(--x), var(--y)); opacity: 0; }
}

#messageBox {
  width: min(620px, 100%);
  margin-top: 12px;
  min-height: 48px;
  padding: 12px 16px;
  text-align: center;
  border-radius: 18px;
  background: rgba(255, 47, 152, .15);
  border: 1px solid rgba(255, 139, 200, .35);
  box-shadow: 0 0 18px rgba(255,47,152,.25);
  font-size: clamp(15px, 3.8vw, 18px);
}

/* Final */
#final {
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.final-card {
  width: min(1050px, 100%);
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 24px;
  align-items: center;
}

.final-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.final-gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 3px solid white;
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(255,47,152,.75);
  animation: photoIn .75s ease both;
}

.final-gallery img:nth-child(1) { transform: rotate(-4deg); }
.final-gallery img:nth-child(2) { transform: translateY(16px) rotate(2deg); animation-delay: .15s; }
.final-gallery img:nth-child(3) { transform: rotate(4deg); animation-delay: .3s; }

@keyframes photoIn {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

.letter {
  padding: clamp(18px, 4vw, 32px);
  border-radius: 28px;
  background: var(--panel);
  border: 1px solid rgba(255, 139, 200, .35);
  box-shadow: 0 0 42px rgba(255, 47, 152, .28), inset 0 0 26px rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
}

.script.small { font-size: clamp(36px, 7vw, 52px); }

.letter h2 {
  font-family: "Great Vibes", cursive;
  color: white;
  font-size: clamp(38px, 8vw, 60px);
  line-height: 1;
  text-shadow: 0 0 18px var(--hot);
}

#typedText {
  white-space: pre-line;
  line-height: 1.85;
  font-size: clamp(15px, 3.7vw, 18px);
  min-height: 245px;
}

/* Phone */
@media (max-width: 720px) {
  body { overflow-y: auto; }
  .screen { padding: 12px; }

  .intro-card {
    padding: 16px 12px 20px;
    border-radius: 24px;
  }

  .photo-row {
    max-width: 330px;
    gap: 8px;
  }

  .photo-row img { border-width: 3px; }

  .game-top {
    display: block;
    text-align: center;
    margin-top: 2px;
  }

  .game-top h2 { margin-bottom: 7px; }
  .progress { display: inline-block; }

  #heartField {
    height: 62svh;
    min-height: 500px;
    border-radius: 24px;
  }

  .final-card { display: block; }

  .final-gallery {
    max-width: 350px;
    margin: 0 auto 26px;
    gap: 8px;
  }

  .letter { padding: 18px 14px; }

  #typedText { min-height: 350px; }
}

@media (max-width: 380px) {
  #heartField { min-height: 470px; }
  h1 { font-size: 62px; }
}