:root{
  --pink-50:#fff0f4;
  --pink-100:#ffd9e4;
  --pink-300:#ff9db8;
  --pink-500:#ff5c8a;
  --pink-600:#e8437a;
  --maroon:#7a1f3d;
  --gold:#e8b86d;
  --ink:#3a1220;
  --white:#fffaf9;
  --shadow: 0 10px 30px rgba(122,31,61,0.18);
}

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  overflow-x:hidden;
}

body{
  font-family:'Poppins', sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, var(--pink-100) 0%, transparent 55%),
    radial-gradient(circle at 85% 85%, var(--pink-300) 0%, transparent 50%),
    linear-gradient(160deg, var(--pink-50) 0%, #ffe3ec 45%, #ffd3e2 100%);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  position:relative;
}

.script-title{
  font-family:'Great Vibes', cursive;
  font-size:clamp(2.2rem, 9vw, 3rem);
  color:var(--maroon);
  margin:0 0 6px;
  line-height:1.1;
}
.script-title.small{ font-size:clamp(1.6rem, 7vw, 2.2rem); }

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.7rem;
  color:var(--pink-600);
  font-weight:600;
  margin:0 0 4px;
}

.sub{
  font-size:.92rem;
  color:#6b3350;
  margin:0 0 20px;
  line-height:1.5;
}

/* ---------- layout / screens ---------- */
#app{ width:100%; max-width:480px; }

.screen{
  display:none;
  animation: fadeUp .5s ease both;
}
.screen.active{ display:block; }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

.card{
  background:var(--white);
  border-radius:24px;
  padding:28px 22px 30px;
  box-shadow:var(--shadow);
  text-align:center;
  position:relative;
  border:1px solid rgba(232,67,122,0.12);
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:1px;
  background:linear-gradient(135deg, var(--gold), transparent 40%, transparent 60%, var(--pink-300));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* ---------- buttons ---------- */
.btn{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:1rem;
  border:none;
  border-radius:999px;
  padding:14px 26px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.96); }

.btn-primary{
  background:linear-gradient(135deg, var(--pink-500), var(--pink-600));
  color:#fff;
  box-shadow:0 8px 20px rgba(232,67,122,0.35);
  width:100%;
  margin-top:10px;
}

.btn-ghost{
  background:transparent;
  color:var(--maroon);
  border:1.5px solid var(--pink-300);
  margin-top:16px;
}

.btn-option{
  display:block;
  width:100%;
  background:#fff5f8;
  border:1.5px solid var(--pink-100);
  color:var(--ink);
  border-radius:16px;
  padding:14px 16px;
  font-size:.95rem;
  font-weight:500;
  margin-bottom:10px;
  text-align:left;
  cursor:pointer;
  transition:all .15s ease;
}
.btn-option:hover{ border-color:var(--pink-300); }
.btn-option.wrong{
  animation: shake .35s ease;
  border-color:#e0637f;
  background:#ffe7ec;
}
.btn-option.correct{
  border-color:#5cb87a;
  background:#e8f9ee;
}

@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}

/* ---------- puzzle ---------- */
.puzzle-word{
  margin-bottom:22px;
}
.puzzle-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--pink-600);
  font-weight:600;
  margin-bottom:8px;
}
.slots{
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.slot{
  width:34px;
  height:40px;
  border-bottom:3px solid var(--pink-300);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.15rem;
  color:var(--maroon);
}
.slot.filled{
  border-color:var(--pink-600);
  animation: slotPop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slotPop{
  0%{ transform:scale(1.5); color:var(--pink-600); }
  100%{ transform:scale(1); }
}
.puzzle-label.solved{ color:#3f9b5f; }

.tiles{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.tile{
  width:38px;
  height:42px;
  border-radius:10px;
  border:none;
  background:linear-gradient(135deg,#ffe3ec, #ffc8dc);
  color:var(--maroon);
  font-weight:700;
  font-size:1.05rem;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(232,67,122,0.2);
  transition:transform .12s ease, opacity .12s ease;
}
.tile:active{ transform:scale(.9); }
.tile.used{ opacity:0; transform:scale(.4); pointer-events:none; }
.tile.wrong-tap{ animation: shake .35s ease; }

.puzzle-solved-badge{
  color:#3f9b5f;
  font-weight:600;
  font-size:.9rem;
}

.puzzle-hint{
  min-height:16px;
  font-size:.8rem;
  color:var(--pink-600);
  font-weight:500;
  margin-top:2px;
}

/* ---------- name-meeting animation ---------- */
.meet-wrap{
  padding:10px 0 4px;
  animation: fadeUp .5s ease both;
}
.meet-names{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.meet-name{
  font-family:'Great Vibes', cursive;
  font-size:clamp(1.8rem, 9vw, 2.6rem);
  color:var(--maroon);
  opacity:0;
}
.meet-left{ animation: slideInLeft .7s cubic-bezier(.22,1,.36,1) forwards; }
.meet-right{ animation: slideInRight .7s cubic-bezier(.22,1,.36,1) forwards; }
.meet-heart{
  font-size:clamp(1.6rem, 8vw, 2.2rem);
  display:inline-block;
  opacity:0;
  transform:scale(0);
  animation:
    heartPop .5s cubic-bezier(.34,1.56,.64,1) .55s forwards,
    heartBeat 1s ease-in-out 1.1s infinite;
}
.meet-caption{
  font-size:.9rem;
  color:#6b3350;
  opacity:0;
  animation: fadeUp .6s ease .9s forwards;
}

@keyframes slideInLeft{
  from{ transform:translateX(-70px); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}
@keyframes slideInRight{
  from{ transform:translateX(70px); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}
@keyframes heartPop{
  0%{ transform:scale(0); opacity:0; }
  70%{ transform:scale(1.3); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes heartBeat{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.18); }
}

/* ---------- questions ---------- */
.progress{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-bottom:18px;
}
.progress span{
  width:8px; height:8px; border-radius:50%;
  background:var(--pink-100);
}
.progress span.done{ background:var(--pink-600); }
.progress span.current{ background:var(--pink-500); transform:scale(1.3); }

.q-text{
  font-size:1.15rem;
  color:var(--maroon);
  margin:0 0 20px;
  line-height:1.4;
}
.q-options{ text-align:left; }
.q-hint{
  min-height:18px;
  color:var(--pink-600);
  font-size:.85rem;
  font-weight:500;
  margin-top:8px;
}

/* ---------- slider question ---------- */
.slider-wrap{ margin-bottom:18px; }
.slider-value{
  text-align:center;
  font-size:2rem;
  font-weight:700;
  color:var(--pink-600);
  margin-bottom:10px;
}
input[type="range"].q-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--pink-500) 0%, var(--pink-500) var(--fill, 80%), var(--pink-100) var(--fill, 80%), var(--pink-100) 100%);
  outline:none;
  margin:6px 0 4px;
}
input[type="range"].q-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--pink-600);
  box-shadow:0 2px 8px rgba(232,67,122,0.4);
  cursor:pointer;
}
input[type="range"].q-range::-moz-range-thumb{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--pink-600);
  box-shadow:0 2px 8px rgba(232,67,122,0.4);
  cursor:pointer;
}
.slider-labels{
  display:flex;
  justify-content:space-between;
  font-size:.75rem;
  color:#c46e8f;
  margin-bottom:6px;
}
textarea.q-why{
  width:100%;
  font-family:'Poppins', sans-serif;
  font-size:.92rem;
  border:1.5px solid var(--pink-100);
  border-radius:14px;
  padding:12px 14px;
  resize:none;
  background:#fff5f8;
  color:var(--ink);
  min-height:80px;
}
textarea.q-why:focus{
  outline:none;
  border-color:var(--pink-300);
}

/* ---------- videos ---------- */
.card-video{ padding-bottom:26px; }
#video-wrap{ width:100%; }
video{
  width:100%;
  border-radius:16px;
  background:#000;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}
.video-fallback{
  font-size:.8rem;
  color:#a15577;
  background:#fff0f4;
  border-radius:12px;
  padding:12px;
  margin-top:10px;
}
.video-fallback code{
  background:#ffe0ea;
  padding:1px 5px;
  border-radius:4px;
}

/* ---------- letter ---------- */
.card-letter{ padding-top:24px; }
.photo-frames{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.photo-frame{
  width:120px;
  height:120px;
  margin:0;
  border-radius:50%;
  overflow:hidden;
  border:4px solid var(--gold);
  box-shadow:0 6px 18px rgba(232,67,122,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffe9f0;
  flex-shrink:0;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; }
.photo-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:#c46e8f;
  font-size:.65rem;
}
.photo-placeholder span{ font-size:2rem; }

.letter-body{
  text-align:left;
  font-size:.95rem;
  line-height:1.7;
  color:#4a2233;
  margin:18px 0 6px;
}
.letter-body p{ margin:0 0 12px; opacity:0; animation: fadeUp .6s ease forwards; }

.signature{
  font-family:'Great Vibes', cursive;
  font-size:1.8rem;
  color:var(--maroon);
  margin-top:6px;
}

/* ---------- floating hearts bg ---------- */
#hearts-bg{
  position:fixed; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.floating-heart{
  position:absolute;
  bottom:-40px;
  color:var(--pink-300);
  opacity:.55;
  animation: floatUp linear infinite;
  font-size:1.4rem;
}
@keyframes floatUp{
  0%{ transform:translateY(0) rotate(0deg); opacity:0; }
  10%{ opacity:.6; }
  100%{ transform:translateY(-110vh) rotate(30deg); opacity:0; }
}

#app{ position:relative; z-index:1; }

/* ---------- confetti ---------- */
#confetti-layer{
  position:fixed; inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:5;
}
.confetti-piece{
  position:absolute;
  top:-20px;
  width:8px; height:14px;
  opacity:.9;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall{
  to{ transform:translateY(110vh) rotate(360deg); opacity:0; }
}

/* ---------- small screens polish ---------- */
@media (max-width:360px){
  .card{ padding:22px 16px 26px; }
  .tile{ width:32px; height:38px; font-size:.95rem; }
  .slot{ width:28px; height:36px; font-size:1rem; }
}