:root{
  --pink-1:#fff0f6;
  --pink-2:#ffe4ef;
  --pink-3:#ffcfe0;
  --pink-4:#ffb8d1;
  --rose:#ff6fa3;
  --rose-dark:#ff4f90;
  --text:#3a2b2f;
  --soft:#6d5c61;
  --white:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, var(--pink-2), transparent),
              radial-gradient(900px 700px at 80% 20%, var(--pink-3), transparent),
              linear-gradient(to bottom, var(--pink-1), var(--white));
  overflow:hidden;
}
.screen{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding:24px; transition:opacity .5s ease, transform .5s ease;
  pointer-events:auto;
}
.hidden{opacity:0; pointer-events:none; transform:translateY(10px)}
.card{
  width:min(920px, 92vw);
  background:rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border:1px solid #ffd6e8;
  border-radius:24px;
  box-shadow:0 20px 60px rgba(255, 111, 163, .18);
  padding:28px;
  pointer-events:auto;
}
h1,h2{margin:0 0 12px 0}
h1{font-family:"Playfair Display", serif; font-size:clamp(28px, 5vw, 44px); color:#e2558b}
h2{font-size:clamp(20px,4vw,26px); color:#b43b6b}
p{line-height:1.7; font-size:clamp(15px,2.6vw,18px); margin:10px 0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; border:0; cursor:pointer;
  color:white; font-weight:700; letter-spacing:.3px;
  background:linear-gradient(135deg, var(--rose), var(--rose-dark));
  box-shadow:0 8px 24px rgba(255,79,144,.28);
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  text-decoration:none; user-select:none;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(255,79,144,.36)}
.btn:active{transform:translateY(0)}
.subtle{background:linear-gradient(135deg, #ffd2e4, #ffbad7); color:#813756}
.hint{font-size:14px; opacity:.8; margin-top:10px}
.center{text-align:center}
.badge{
  display:inline-block; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600;
  background:#ffe6f0; color:#a83a68; border:1px solid #ffd3e6
}
.bouquet{
  width:120px; height:120px; margin:18px auto 6px auto; position:relative;
}
.bouquet .stem{position:absolute; left:58px; bottom:0; width:6px; height:90px; background:#4caf50; border-radius:3px}
.bouquet .flower{
  position:absolute; bottom:70px; left:35px; width:52px; height:52px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffd8ea, #ff8bb9);
  box-shadow:0 6px 16px rgba(255,111,163,.35);
}
.hello-bow{
  width:52px; height:36px; margin:0 auto 8px auto; display:block;
}
/* Petals area */
#petalsArea{
  position:absolute; inset:0; overflow:hidden; pointer-events:auto; z-index:2;
}
.petal{
  position:absolute; width:160px; height:90px;
  background: radial-gradient(60% 80% at 50% 40%, #ffd5e8, #ff9fc1);
  border:1px solid #ffc0d8; color:#5c2b3e;
  border-radius:80% 80% 60% 60% / 90% 90% 40% 40%;
  box-shadow:0 8px 18px rgba(255,111,163,.28);
  transform-origin: 50% 20%;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:12px;
  font-weight:600;
  rotate: -6deg;
  user-select:none;
  will-change: transform, opacity;
}
.petal:hover{filter:brightness(1.03)}
.petal.opened{
  width:min(760px, 92vw); height:auto; border-radius:20px; rotate:0deg; cursor:default;
}
.petal .inner{
  font-size:16px; line-height:1.6;
}
.continue{
  margin-top:14px;
  font-size:14px;
  padding:10px 14px;
}
.petalIndex{
  position:absolute; top:8px; right:12px; font-size:12px; opacity:.7
}
.clickHint{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  background:#fff1f7; border:1px solid #ffd9ea; color:#a23a67; padding:8px 12px; border-radius:999px;
  box-shadow:0 10px 24px rgba(255,79,144,.18);
  animation:bounce 1.4s infinite ease-in-out;
  z-index:10;
}
@keyframes bounce{
  0%,100%{transform:translate(-50%, 0)}
  50%{transform:translate(-50%, -6px)}
}
.progress{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  background:#fff1f7; border:1px solid #ffd9ea; color:#8f355e; padding:8px 12px; border-radius:999px;
  font-size:12px; box-shadow:0 6px 16px rgba(255,79,144,.18);
  z-index:10;
}
/* Trust page overlay */
.fullOverlay{
  position:absolute; inset:0; background:rgba(20,8,14,.85); color:#ffe6f1;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
  z-index:50; opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.fullOverlay.show{opacity:1; pointer-events:all}
.countdown{font-size:40px; letter-spacing:2px; margin-top:10px; opacity:.85}
.footerNote{font-size:12px; opacity:.6; margin-top:8px}
.finalMsg p{font-size:clamp(15px, 2.7vw, 18px)}
/* Mobile tweaks */
@media (max-width:520px){
  .petal{width:140px; height:84px; font-size:14px}
}