:root{
  --white:#ffffff;
  --accent1:#ff5fa2;
  --accent2:#ffb86b;
  --muted:#6b6b7a;
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family:"Poppins",system-ui,Arial;
  background:var(--white); /* FULL WHITE as requested */
  color:#24102a;
}
.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:12px}

/* card container */
.card{
  width:100%;
  max-width:760px;
  border-radius:18px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  background:transparent;
}

/* Title */
.header{width:100%;display:flex;justify-content:center;z-index:60;position:relative}
.title{font-weight:700;font-size:20px;margin:4px 0;color:#48102f;text-align:center;padding-top:4px;transition:opacity 260ms ease, transform 260ms ease}
.card.title-hidden .title { opacity: 0; transform: translateY(-8px); pointer-events:none; height:0; margin:0; padding:0; }

/* STAGE: white block where visuals live */
.stage{
  width:100%;
  background: var(--white); /* ALWAYS white initially */
  border-radius:16px;
  padding:18px;
  box-shadow: 0 10px 30px rgba(10,10,18,0.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  position:relative;
  z-index:8;
  transition: background-color 280ms ease; /* will change color during countdown */
}

/* photo area */
.photo-area-top{width:100%;display:flex;justify-content:center;align-items:center;gap:8px;z-index:20}

/* box image */
.media{width:100%;display:flex;align-items:center;justify-content:center;z-index:10}
.box-img{width:min(86vw,420px);height:auto;object-fit:contain;border-radius:12px;box-shadow:0 12px 30px rgba(20,12,24,0.06);transition:transform 600ms ease,opacity 420ms ease;margin-bottom:4px}

/* inserted person sized same as box */
.inserted-person{width:min(86vw,420px);height:auto;max-height:72vh;object-fit:cover;border-radius:12px;box-shadow:0 18px 40px rgba(20,12,24,0.08);transition:transform 420ms ease,opacity 320ms ease;opacity:0;transform:translateY(8px) scale(0.98);display:block;z-index:25}
.card.person-visible .inserted-person{opacity:1;transform:translateY(0) scale(1);margin-top:-8px}

/* Countdown overlay (inside stage) */
.countdown{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:120;pointer-events:none;opacity:0;transition:opacity 160ms ease}
.countdown.show{opacity:1;pointer-events:auto}

/* COUNTDOWN: guaranteed visible and un-clippable */
.count-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999990;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease, backdrop-filter 300ms ease;
  background: transparent;
}
.count-overlay.active{
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(4px);
}

/* Make the big number fixed and always on top (prevents clipping) */
.count-overlay .count-number{
  position: fixed;                /* IMPORTANT: fixed so not clipped by parents */
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 900;
  font-size: 120px;
  color: #ffffff;                 /* white number */
  background: rgba(0,0,0,0.75);   /* dark circle so number always pops */
  box-shadow: 0 40px 120px rgba(0,0,0,0.55);
  text-shadow: 0 8px 28px rgba(0,0,0,0.5);
  z-index: 2147483646;            /* extremely high so it's in front */
  pointer-events: none;
  transition: transform 160ms ease, opacity 160ms ease;
  opacity: 1;
}

/* pop class for small bounce */
.count-overlay .count-number.pop {
  transform: translate(-50%,-50%) scale(1.08);
}

/* smaller on mobile */
@media (max-width:420px){
  .count-overlay .count-number{
    width:150px; height:150px; font-size:82px;
  }
}

/* overlay color classes */
.count-overlay.count-bg-3 { background: #FF6B6B; }
.count-overlay.count-bg-2 { background: #FFD166; }
.count-overlay.count-bg-1 { background: #9AE6B4; }


/* CTA */
.cta-area{width:100%;display:flex;justify-content:center;z-index:40}
.cta-stack{display:flex;flex-direction:column;gap:8px;align-items:center}
.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,95,162,0.14)}
.btn.small{background:transparent;border:2px solid rgba(0,0,0,0.06);padding:8px 14px;border-radius:10px;font-size:14px;color:#5b3b5b}
.btn.ghost{background:#fff;border:1px solid rgba(0,0,0,0.06)}

/* tiny download button (smaller) + spacing */
.btn.tiny{padding:8px 10px;font-size:13px;border-radius:10px}
.download-wrap{width:100%;display:flex;justify-content:center;margin-top:12px} /* add space from message */

/* message area */
.message-area{width:92%;max-width:640px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.message-box{width:100%;background:transparent;padding:6px;border-radius:12px}
.message-output{min-height:90px;font-family:'Courier New',Courier,monospace;font-size:16px;color:#381032;white-space:pre-wrap;line-height:1.6;text-align:center}

/* balloons layer */
.balloons-layer{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:visible}
.balloon{position:absolute;width:44px;height:56px;border-radius:60% 60% 50% 50%;box-shadow:0 8px 18px rgba(0,0,0,0.12);opacity:0.98}
.balloon:after{content:'';position:absolute;bottom:-16px;height:18px;width:2px;background:rgba(0,0,0,0.08)}

/* slide-up animation */
.box-slide-up { animation: boxSlideUp 620ms cubic-bezier(.22,.95,.18,1) forwards; }
@keyframes boxSlideUp {
  0% { transform: translateY(0) scale(1); opacity:1; filter:none; }
  40% { transform: translateY(-18%) scale(0.98); opacity:0.95; }
  100% { transform: translateY(-130%) scale(0.6); opacity:0; filter: blur(2px); }
}

/* =============================================
   BEAUTIFUL FULL-SCREEN COUNTDOWN BACKGROUND
   ============================================= */
body, .stage, .card {
  transition: background 500ms ease, background-color 500ms ease;
}

/* FULL SCREEN COLORS */
body.count-bg-3 { background: #FF6B6B !important; }
body.count-bg-2 { background: #FFD166 !important; }
body.count-bg-1 { background: #9AE6B4 !important; }

/* Middle white block (stage) also follows background */
.stage.count-bg-3 { background: #FF6B6B !important; }
.stage.count-bg-2 { background: #FFD166 !important; }
.stage.count-bg-1 { background: #9AE6B4 !important; }

/* The card container slightly transparent */
.card.count-bg-3,
.card.count-bg-2,
.card.count-bg-1 {
  background: rgba(255,255,255,0.05) !important;
}

/* FULLSCREEN COUNTDOWN OVERLAY — covers entire viewport so no rounded stage shows through */
.count-overlay{
  position: fixed;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0; */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 220;              /* above stage/card */
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms ease, backdrop-filter 360ms ease;
  backdrop-filter: blur(0px); /* optional subtle blur */
}

/* when active, show it */
.count-overlay.active{
  pointer-events: auto;
  opacity: 1;
  backdrop-filter: blur(4px); /* slight blur behind if you like */
}

/* re-use count-number styling already present; ensure it's centered on overlay */
.count-overlay .countdown { position: relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

/* Color classes applied to the overlay (full-screen color) */
.count-overlay.count-bg-3 { background: #FF6B6B; }
.count-overlay.count-bg-2 { background: #FFD166; }
.count-overlay.count-bg-1 { background: #9AE6B4; }

/* Keep number appearance (white circle) — optionally stronger shadow for contrast */
.count-overlay .count-number{
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}

/* make sure stage remains pure white behind overlay */
.stage { background: #ffffff !important; }

/* ---------- Countdown overlay + number - guaranteed visible ---------- */
.count-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;           /* VERY top */
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease, backdrop-filter 300ms ease;
  backdrop-filter: blur(0px);
  background: transparent;   /* color classes will set background */
}

.count-overlay.active{
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(4px);
}

/* make the countdown container fill overlay and center number */
.count-overlay .countdown{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* Strong visible number circle */
.count-overlay .count-number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:220px;
  height:220px;
  border-radius:50%;
  font-family:'Poppins',sans-serif;
  font-weight:900;
  font-size:120px;
  color:#FFFFFF !important;              /* white number */
  background: rgba(0,0,0,0.38);          /* dark translucent circle so number pops */
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  text-shadow: 0 8px 24px rgba(0,0,0,0.45);
  z-index: 1000000 !important;           /* above overlay background */
  transform: scale(1);
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 1;
  pointer-events: none;
}

/* pop when changing */
.count-overlay .count-number.pop {
  transform: scale(1.10);
}

/* smaller on phones */
@media (max-width:420px){
  .count-overlay .count-number{
    width:150px;
    height:150px;
    font-size:82px;
  }
}

/* color classes for overlay (full-screen) */
.count-overlay.count-bg-3 { background: #FF6B6B; }
.count-overlay.count-bg-2 { background: #FFD166; }
.count-overlay.count-bg-1 { background: #9AE6B4; }