:root{
  --pink:#ff9bb2; --pink-2:#ffb2c4; --bg:#ffeef3;
  --text:#402a34; --muted:#7a5b66;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--text);
  background: radial-gradient(1200px 900px at 20% -10%, #ffd6e3, #ffe6ee 40%, var(--bg) 100%);
  overflow:hidden;
}

/* canvas sits above background but under content */
#petals{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none }

/* Buttons */
.btn{ appearance:none; border:none; cursor:pointer; border-radius:14px; padding:12px 16px; font-weight:800;
  transition:.25s transform ease,.25s box-shadow ease; box-shadow:0 10px 24px rgba(255,155,178,.25)}
.btn:hover{ transform:translateY(-1px) } .btn:active{ transform:translateY(0) scale(.98) }
.btn.primary{ color:#3a1f2a; background:linear-gradient(135deg, var(--pink), var(--pink-2)) }

/* GATE */
.gate{ position:fixed; inset:0; display:grid; place-items:center; padding:20px;
  background:
    radial-gradient(1000px 700px at 80% -10%, rgba(255,182,204,.30), transparent 60%),
    radial-gradient(900px 700px at 0% 100%, rgba(255,182,204,.22), transparent 60%),
    rgba(255,238,243,.88); z-index:10 }
.gate-card{ width:min(520px,92vw); background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.75));
  border:1px solid rgba(255,155,178,.35); border-radius:24px; padding:24px 18px 20px;
  box-shadow:0 24px 60px rgba(255,155,178,.35); backdrop-filter: blur(6px); text-align:center; position:relative }
.gate-card::after{ content:""; position:absolute; inset:-2px; border-radius:24px; pointer-events:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.6) }
.flower-badge{ width:72px; height:72px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff 0, #ffe0ea 60%, #ffd2e1 100%);
  display:grid; place-items:center; font-size:36px; margin:0 auto 8px; box-shadow:0 14px 30px rgba(255,155,178,.35) }
.gate-title{ margin:6px 0 12px 0; font-size:22px; font-weight:900; color:#5a3040 }
.code-input{ width:100%; padding:14px 16px; border-radius:16px; border:1px solid rgba(0,0,0,.08); background:#fff; font-size:18px; text-align:center; letter-spacing:3px; outline:none;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.04) }
.code-input:focus{ border-color:#ffabc1; box-shadow:0 0 0 4px rgba(255,171,193,.3) }
.gate-msg{ margin-top:10px; min-height:20px; color:#a03a57; font-weight:700 }
.hint{ color:var(--muted); font-size:13px; margin-top:8px }
.shake{ animation:shake .4s linear }
@keyframes shake{ 12%{transform:translateX(-6px)}24%{transform:translateX(6px)}36%{transform:translateX(-4px)}
48%{transform:translateX(4px)}60%{transform:translateX(-2px)}72%{transform:translateX(2px)}100%{transform:none} }

/* SHOW */
.show{ position:fixed; inset:0; display:grid; place-items:center; padding:12px; z-index:5 }
.hidden{ display:none }

.stage-wrap{ position:relative; }
.stage{
  width:min(900px, 100vw); height:min(70vh, 78vw); aspect-ratio:16/9; position:relative; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 80px rgba(255,155,178,.35), 0 10px 20px rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.65); background:linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.15));
  backdrop-filter: blur(4px);
}
.slide{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; pointer-events:none }
.slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03);
  /* soft yellow glow on the image card */
  box-shadow: 0 0 40px rgba(255,230,120,.45);
}
.caption{ position:absolute; left:0; right:0; bottom:6%; text-align:center;
  padding:10px 14px; font-size:clamp(18px, 4vw, 28px); font-weight:900; color:#5a2033;
  text-shadow: 0 2px 0 #fff, 0 6px 20px rgba(255,155,178,.65); background:rgba(255,255,255,.35);
  margin:0 auto; width:calc(100% - 36px); border-radius:16px; border:1px solid rgba(255,255,255,.6); backdrop-filter: blur(6px) }

/* Tiny gif BELOW the card */
.tiny-gif-below{
  position:absolute; left:50%; transform:translateX(-50%);
  top: calc(100% + 10px); width:80px; height:80px; object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Transitions */
.slide.is-out{ animation: outAnim 800ms ease forwards }
.slide.is-in{ animation: inAnim 900ms cubic-bezier(.2,.7,.2,1) forwards }
@keyframes inAnim{ 0%{opacity:0; transform:scale(1.06)} 50%{opacity:1; transform:scale(1.02)} 100%{opacity:1; transform:scale(1)} }
@keyframes outAnim{ 0%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(.98)} }

/* Burst petals (emoji) */
.burst-petal{ position:absolute; font-size:40px; pointer-events:none; filter: drop-shadow(0 6px 12px rgba(0,0,0,.15)); animation: petalPop 900ms ease-out forwards }
@keyframes petalPop{ 0%{ transform: translate(0,0) scale(.6) rotate(0deg); opacity:0 } 20%{ opacity:1 }
100%{ transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--rot)); opacity:0 } }

/* Mobile */
@media (max-width:520px){ .stage{ aspect-ratio:3/4; height:70vh } .caption{ bottom:4%; font-size:clamp(16px, 4.4vw, 22px) } }