:root{
  --bg:#ffffff;
  --accent1:#ff7ab6;
  --accent2:#ffd166;
  --muted:#66677a;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"Poppins",system-ui,Arial;background:var(--bg);color:#16121c}
.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:14px}

/* card/stage */
.card{width:100%;max-width:760px;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:center}
.stage{width:100%;background:#ffffff;border-radius:14px;padding:12px 18px;box-shadow:0 12px 40px rgba(17,12,34,0.06);display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}

/* texts */
.title{font-weight:800;font-size:22px;color:#1d1130;margin:0;text-align:center}
.subtitle{font-size:14px;color:var(--muted);margin:0;text-align:center}

/* images */
.media{display:flex;align-items:center;justify-content:center;width:100%}
.card-img{width:min(86vw,420px);height:auto;object-fit:contain;border-radius:12px;pointer-events:none;transition:transform .6s ease,opacity .4s}
.photo-area{width:100%;display:flex;align-items:center;justify-content:center}
.revealed-photo{width:min(86vw,420px);height:auto;border-radius:12px;object-fit:cover;box-shadow:0 20px 60px rgba(10,10,20,0.12);opacity:0;transform:translateY(8px) scale(.98);transition:transform .52s cubic-bezier(.22,.95,.18,1),opacity .52s ease}
.card.visible .revealed-photo{opacity:1;transform:translateY(0) scale(1)}

/* CTA buttons */
.ctas{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.btn{padding:12px 18px;border-radius:12px;border:0;cursor:pointer;font-weight:700;font-size:16px}
.btn.primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;box-shadow:0 12px 30px rgba(255,122,182,0.12)}
.btn.small{background:transparent;border:2px solid rgba(0,0,0,0.06);padding:8px 12px;border-radius:10px;font-size:14px}
.btn.tiny{padding:8px 10px;font-size:13px;border-radius:10px}

/* message (typewriter) */
.message{width:92%;max-width:640px;text-align:center;font-family:monospace,"Courier New",Courier;font-size:16px;color:#24162a;min-height:86px;line-height:1.6;white-space:pre-wrap}

/* download */
.download-wrap{margin-top:10px;display:flex;justify-content:center}

/* countdown overlay */
.count-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:999990;pointer-events:none;opacity:0;transition:opacity .28s ease,backdrop-filter .28s ease;background:transparent}
.count-overlay.active{opacity:1;pointer-events:auto;backdrop-filter:blur(4px)}
.count-overlay .count-number{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:200px;height:200px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:110px;color:#fff;background:rgba(0,0,0,.75);box-shadow:0 30px 80px rgba(0,0,0,.45);z-index:2147483646}
.count-overlay .count-number.pop{transform:translate(-50%,-50%) scale(1.08);transition:transform 180ms ease}
@media(max-width:420px){ .count-overlay .count-number{width:150px;height:150px;font-size:82px} }

/* overlay color helpers */
.count-overlay.count-bg-1{background:#ffdede}
.count-overlay.count-bg-2{background:#fff4d6}
.count-overlay.count-bg-3{background:#e7ffef}

/* ---------- Hearts ---------- */
.hearts-layer{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1400}
.heart{position:absolute;width:34px;height:30px;transform:rotate(-45deg);transform-origin:center;opacity:0;pointer-events:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,0.12));will-change:transform,opacity}
.heart::before,.heart::after{content:"";position:absolute;border-radius:50%;background:currentColor}
.heart::before{width:34px;height:34px;top:-17px;left:0}
.heart::after{width:34px;height:34px;top:0;left:17px}
@keyframes heartFloat {0%{transform:translateY(0) rotate(-45deg) scale(.7);opacity:0}10%{opacity:1;transform:translateY(-12px) rotate(-45deg) scale(1)}45%{transform:translateY(-160px) translateX(-10px) rotate(-45deg) scale(1);opacity:.95}100%{transform:translateY(-420px) translateX(18px) rotate(-45deg) scale(.9);opacity:0}}
.heart.animate{animation-name:heartFloat;animation-timing-function:cubic-bezier(.2,.9,.3,.98);animation-fill-mode:forwards}
.heart.small{width:22px;height:20px}
.heart.small::before,.heart.small::after{width:22px;height:22px;top:-11px}
.heart.big{width:44px;height:40px}
.heart.big::before,.heart.big::after{width:44px;height:44px;top:-22px}
.heart.c1{color:#ff7ab6}
.heart.c2{color:#ffd166}
.heart.c3{color:#9ad6ff}
.heart.c4{color:#6ad7a8}

/* responsive */
@media(max-width:420px){
  .title{font-size:20px}
  .card-img,.revealed-photo{width:92vw}
  .ctas{gap:8px}
}