/* =========================================================
   Pink Hello Kitty Countdown — style.css
   Polished, centered, all-on-one-line countdown, live updates.
   ========================================================= */

:root {
  --soft-pink:   #ffd6e7;
  --light-pink:  #ffb3d1;
  --hot-pink:    #ff69b4;
  --deep-pink:   #ff1493;
  --gold:        #ffd166;
  --cream:       #fff5f8;
  --white:       #ffffff;
  --ink:         #5a2a4a;
  --ink-soft:    #8a4a72;

  --shadow-pink:     0 14px 40px rgba(255, 105, 180, 0.28),
                     0 6px 14px rgba(255, 20, 147, 0.18);
  --shadow-pink-sm:  0 4px 14px rgba(255, 105, 180, 0.3);
  --shadow-soft:     0 6px 18px rgba(255, 105, 180, 0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;        /* horizontal center */
  align-items: flex-start;        /* start so long page scrolls naturally */
  padding: 32px 16px 64px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 10%, #ffe4f1 0%, transparent 40%),
    radial-gradient(circle at 85% 20%, #ffd1e6 0%, transparent 45%),
    radial-gradient(circle at 50% 95%, #ffe9f3 0%, transparent 50%),
    linear-gradient(180deg, var(--soft-pink) 0%, var(--cream) 60%, #ffe9f3 100%);
  background-attachment: fixed;
}

/* =========================================================
   Floating background bits
   ========================================================= */
.hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.heart, .sparkle, .flower {
  position: absolute;
  bottom: -40px;
  text-shadow: 0 0 12px rgba(255, 105, 180, 0.55);
  animation: floatUp linear infinite;
  user-select: none;
  will-change: transform, opacity;
}

.heart   { color: var(--hot-pink); }
.sparkle { color: var(--gold); text-shadow: 0 0 10px rgba(255, 209, 102, 0.7); }
.flower  { filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.4)); }

.heart.h1   { left:  4%; font-size: 22px; animation-duration: 14s; animation-delay:  0s; opacity: 0.55; }
.heart.h2   { left: 14%; font-size: 16px; animation-duration: 18s; animation-delay:  3s; opacity: 0.45; }
.heart.h3   { left: 24%; font-size: 28px; animation-duration: 12s; animation-delay:  6s; opacity: 0.6;  }
.heart.h4   { left: 38%; font-size: 18px; animation-duration: 16s; animation-delay:  1s; opacity: 0.5;  }
.heart.h5   { left: 52%; font-size: 24px; animation-duration: 20s; animation-delay:  8s; opacity: 0.55; }
.heart.h6   { left: 66%; font-size: 14px; animation-duration: 15s; animation-delay:  4s; opacity: 0.4;  }
.heart.h7   { left: 78%; font-size: 26px; animation-duration: 17s; animation-delay:  2s; opacity: 0.6;  }
.heart.h8   { left: 90%; font-size: 18px; animation-duration: 19s; animation-delay:  9s; opacity: 0.5;  }

.sparkle.s1 { left: 10%; font-size: 14px; animation-duration: 10s; animation-delay:  1s; opacity: 0.85; }
.sparkle.s2 { left: 32%; font-size: 10px; animation-duration:  9s; animation-delay:  5s; opacity: 0.7;  }
.sparkle.s3 { left: 55%; font-size: 16px; animation-duration: 12s; animation-delay:  0s; opacity: 0.85; }
.sparkle.s4 { left: 70%; font-size: 12px; animation-duration: 11s; animation-delay:  3s; opacity: 0.7;  }
.sparkle.s5 { left: 86%; font-size: 14px; animation-duration: 13s; animation-delay:  7s; opacity: 0.8;  }

.flower.f1  { left:  6%; font-size: 22px; animation-duration: 22s; animation-delay:  4s; opacity: 0.7; }
.flower.f2  { left: 48%; font-size: 18px; animation-duration: 24s; animation-delay:  6s; opacity: 0.65; }
.flower.f3  { left: 92%; font-size: 20px; animation-duration: 20s; animation-delay:  2s; opacity: 0.7; }

@keyframes floatUp {
  0%   { transform: translateY(0)       rotate(0deg)   scale(1);    opacity: 0;   }
  10%  {                                                              opacity: 0.6; }
  50%  { transform: translateY(-55vh)   rotate(15deg)  scale(1.1);             }
  100% { transform: translateY(-110vh)  rotate(-15deg) scale(0.9);  opacity: 0;   }
}

/* =========================================================
   Main card — centered, glow border
   ========================================================= */
.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;                  /* belt-and-suspenders horizontal center */
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 36px;
  padding: 64px 24px 26px;         /* extra top padding so bows don't cover text */
  box-shadow: var(--shadow-pink);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 36px;
  background: linear-gradient(135deg, var(--hot-pink), var(--soft-pink), var(--gold));
  z-index: -1;
  opacity: 0.55;
  filter: blur(16px);
}

/* =========================================================
   Decorative top corner characters — round plates, fully visible image
   ========================================================= */
.bow {
  position: absolute;
  width: 96px;
  height: 96px;
  object-fit: contain;             /* show the WHOLE image, no crop */
  background: #fff;
  border-radius: 50%;
  padding: 4px;
  box-shadow: var(--shadow-pink-sm);
  border: 2px solid #fff;
  z-index: 3;
  pointer-events: none;
}
.bow-top-left  { top: 10px; left: 10px;  transform: rotate(-12deg); animation: bowWiggleL 4s ease-in-out infinite; }
.bow-top-right { top: 10px; right: 10px; transform: rotate(12deg);  width: 84px; height: 84px; animation: bowWiggleR 4.4s ease-in-out infinite; }

@keyframes bowWiggleL { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-6deg); } }
@keyframes bowWiggleR { 0%, 100% { transform: rotate( 12deg); } 50% { transform: rotate( 6deg); } }

/* graceful fallback if an image fails to load — CSS-drawn pink bow */
.bow-fallback {
  position: relative;
  background: #fff;
}
.bow-fallback::before,
.bow-fallback::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60%;
  height: 70%;
  background: linear-gradient(135deg, var(--hot-pink), var(--light-pink));
  border: 2px solid #fff;
  border-radius: 60% 60% 30% 30% / 80% 80% 30% 30%;
  box-shadow: 0 2px 6px rgba(255, 105, 180, 0.4);
}
.bow-fallback::before { left: 8%;  transform: translateY(-50%) rotate(-20deg); }
.bow-fallback::after  { right: 8%; transform: translateY(-50%) rotate(20deg);  }
.bow-fallback > b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  height: 50%;
  background: var(--deep-pink);
  border: 2px solid #fff;
  border-radius: 6px;
  transform: translate(-50%, -50%);
}

/* =========================================================
   Hero / titles
   ========================================================= */
.hero {
  text-align: center;              /* explicit center */
  margin: 4px 0 4px;
}

.kicker {
  font-family: "Caveat", cursive;
  font-size: 1.6rem;
  color: var(--deep-pink);
  margin: 0 0 4px;
  letter-spacing: 0.5px;
}

.title {
  font-family: "Pacifico", cursive;
  font-size: clamp(1.9rem, 6vw, 2.7rem);
  margin: 0;
  color: var(--deep-pink);
  text-shadow: 2px 2px 0 #fff, 4px 4px 12px rgba(255, 105, 180, 0.35);
  line-height: 1.15;
  display: flex;
  align-items: center;
  justify-content: center;        /* center the title group */
  gap: 8px;
  flex-wrap: wrap;
}

.title-heart {
  display: inline-block;
  color: var(--hot-pink);
  font-size: 0.9em;
  text-shadow: 0 0 14px rgba(255, 105, 180, 0.7), 2px 2px 0 #fff;
  animation: heartBeat 1.4s ease-in-out infinite;
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1);    }
  15%      { transform: scale(1.25); }
  30%      { transform: scale(1);    }
  45%      { transform: scale(1.2);  }
  60%      { transform: scale(1);    }
}

.title .hl {
  display: inline-block;
  background: linear-gradient(135deg, var(--hot-pink), var(--deep-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 4px;
}

.subtitle {
  font-family: "Caveat", cursive;
  font-size: 1.3rem;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

/* =========================================================
   Hello Kitty character — fitted to a soft round plate
   ========================================================= */
.character {
  margin: 18px auto 6px;           /* center */
  text-align: center;
  position: relative;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.character-plate {
  position: relative;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0%, var(--soft-pink) 70%, #ffc1de 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  box-shadow:
    0 0 0 4px var(--hot-pink),
    0 0 36px rgba(255, 105, 180, 0.55),
    0 14px 30px rgba(255, 20, 147, 0.3);
  animation: bounce 3.4s ease-in-out infinite;
  z-index: 1;
  overflow: hidden;
}

.character-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;             /* full kitty visible, no crop */
  display: block;
}

.character-fallback {
  font-size: 70px;
  line-height: 1;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  50%      { transform: translateY(-8px)  rotate(2deg);  }
}

.caption {
  font-family: "Caveat", cursive;
  font-size: 1.2rem;
  color: var(--deep-pink);
  margin-top: 10px;
  text-align: center;
}

/* =========================================================
   Countdown — single horizontal row, all visible
   ========================================================= */
.countdown {
  text-align: center;
  margin: 22px 0 10px;
}

.cd-row {
  display: flex;
  align-items: center;
  justify-content: center;        /* center the whole row */
  gap: 6px;
  flex-wrap: nowrap;              /* force one line */
  margin: 0 auto;
  max-width: 100%;
}

.cd-cell {
  background: linear-gradient(135deg, #fff, var(--soft-pink));
  border: 2px solid #fff;
  border-radius: 18px;
  padding: 10px 8px 8px;
  min-width: 64px;
  flex: 0 0 auto;
  box-shadow: var(--shadow-pink-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cd-cell-days {
  min-width: 78px;
  background: linear-gradient(135deg, #fff, #ffe1ef);
  box-shadow: 0 6px 18px rgba(255, 20, 147, 0.22);
}

.cd-num {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  color: var(--deep-pink);
  line-height: 1;
  font-variant-numeric: tabular-nums;  /* digits don't jump width */
  letter-spacing: 0.5px;
}

.cd-cell-days .cd-num {
  font-size: clamp(2.2rem, 8vw, 3rem);
  background: linear-gradient(135deg, var(--hot-pink), var(--deep-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 0 #fff, 0 8px 18px rgba(255, 20, 147, 0.25);
  animation: pulse 2.4s ease-in-out infinite;
}

.cd-cell-days .cd-num.bump { animation: bump 0.7s ease; }

@keyframes pulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.04); }
}

@keyframes bump {
  0%   { transform: scale(1);                              }
  30%  { transform: scale(1.18) rotate(-3deg);             }
  60%  { transform: scale(0.96) rotate(2deg);              }
  100% { transform: scale(1)   rotate(0);                  }
}

.cd-lbl {
  font-family: "Fredoka", sans-serif;
  font-size: 0.7rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

.cd-sep {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  color: var(--hot-pink);
  line-height: 1;
  margin: 0 -2px 14px;            /* align with numbers, not labels */
  user-select: none;
}

.cd-tagline {
  font-family: "Caveat", cursive;
  font-size: 1.25rem;
  color: var(--deep-pink);
  margin: 10px 0 14px;
  text-align: center;
}

/* =========================================================
   Progress bar
   ========================================================= */
.progress {
  margin: 18px 6px 6px;
  text-align: center;
}

.progress-track {
  width: 100%;
  height: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 2px solid #fff;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(255, 105, 180, 0.18);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--hot-pink), var(--deep-pink), var(--gold));
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  animation: shimmer 3s linear infinite;
  box-shadow: 0 0 12px rgba(255, 105, 180, 0.5);
}

@keyframes shimmer { to { background-position: 200% 0; } }

.progress-text {
  font-family: "Caveat", cursive;
  font-size: 1.2rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 4px;
}

/* =========================================================
   Mini stats
   ========================================================= */
.stats {
  display: flex;
  justify-content: center;         /* center the row */
  gap: 10px;
  margin: 14px 4px 4px;
  flex-wrap: wrap;
}

.stat {
  background: linear-gradient(135deg, #fff, var(--soft-pink));
  border: 2px solid #fff;
  border-radius: 18px;
  padding: 10px 12px;
  flex: 1 1 90px;
  max-width: 130px;
  box-shadow: var(--shadow-pink-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-num {
  font-family: "Pacifico", cursive;
  font-size: 1.7rem;
  color: var(--deep-pink);
  line-height: 1;
}

.stat-label {
  font-family: "Fredoka", sans-serif;
  font-size: 0.7rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

/* =========================================================
   Status / quote / milestone / tomorrow — centered pills
   ========================================================= */
.status,
.quote,
.milestone,
.tomorrow {
  text-align: center;
  margin: 10px auto;
  padding: 10px 14px;
  border-radius: 18px;
  font-family: "Fredoka", sans-serif;
  font-size: 1.05rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px dashed var(--light-pink);
  color: var(--ink);
  max-width: 96%;
}

.status {
  font-weight: 600;
  color: var(--deep-pink);
  background: linear-gradient(135deg, rgba(255, 214, 231, 0.85), rgba(255, 179, 209, 0.65));
  border: none;
  box-shadow: var(--shadow-pink-sm);
}

.status.weekend {
  background: linear-gradient(135deg, #fff5fb, #ffe1f0);
  color: #c2185b;
}
.status.holiday {
  background: linear-gradient(135deg, #fff8e1, #fff0c2);
  color: #a8741c;
  border: 1.5px dashed #f1c64a;
}
.status.celebrate {
  background: linear-gradient(135deg, #ff9ec7, #ff5fa2);
  color: #fff;
  text-shadow: 1px 1px 0 var(--deep-pink);
  animation: pulse 1.8s ease-in-out infinite;
}

.quote {
  font-family: "Caveat", cursive;
  font-size: 1.45rem;
  color: var(--deep-pink);
  border: none;
  background: transparent;
  margin-top: 4px;
  padding: 4px 8px;
}

.milestone {
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  color: var(--ink-soft);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 245, 200, 0.6));
  border: 1.5px dashed var(--gold);
}

.tomorrow {
  font-family: "Caveat", cursive;
  font-size: 1.2rem;
  color: var(--ink-soft);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 230, 240, 0.6));
  border: 1.5px dashed rgba(255, 105, 180, 0.45);
  margin-top: 4px;
}

/* =========================================================
   4-week calendar
   ========================================================= */
.calendar {
  margin: 22px auto 10px;
  padding: 16px 12px 18px;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  border: 1.5px solid #fff;
  box-shadow: var(--shadow-pink-sm);
  text-align: center;
}

.section-title {
  font-family: "Pacifico", cursive;
  font-size: 1.4rem;
  color: var(--deep-pink);
  margin: 0 0 8px;
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: -2px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.legend-dot.school  { background: var(--hot-pink); }
.legend-dot.weekend { background: #f0c2d6;        }
.legend-dot.today   { background: var(--gold);    }
.legend-dot.last    { background: linear-gradient(135deg, var(--deep-pink), var(--gold)); }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  background: var(--light-pink);
  border-radius: 12px;
  position: relative;
  box-shadow: 0 2px 4px rgba(255, 105, 180, 0.18);
  transition: transform 0.2s ease;
}

.cal-day.school   { background: linear-gradient(135deg, var(--hot-pink), var(--deep-pink)); color: #fff; }
.cal-day.school:hover { transform: scale(1.08); }
.cal-day.weekend  { background: #f4d1e2; color: #b07090; }
.cal-day.outside  { background: transparent; color: transparent; box-shadow: none; pointer-events: none; }
.cal-day.today    { outline: 3px solid var(--gold); outline-offset: -2px; animation: pulse 2s ease-in-out infinite; }
.cal-day.last     { background: linear-gradient(135deg, var(--deep-pink), #ff85c1 60%, var(--gold)); color: #fff; font-weight: 700; }
.cal-day.last::after {
  content: "♥";
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 0.9rem;
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 20, 147, 0.8);
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  text-align: center;
  margin-top: 20px;
}

.credit {
  font-family: "Pacifico", cursive;
  font-size: 1.15rem;
  color: var(--deep-pink);
  margin: 0;
}

.credit-sub {
  font-family: "Caveat", cursive;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin: 2px 0 0;
}

.live-pill {
  display: inline-block;
  margin-top: 8px;
  font-family: "Fredoka", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2c9c66;
  background: rgba(204, 247, 220, 0.6);
  border: 1px solid rgba(102, 217, 147, 0.5);
  padding: 3px 10px;
  border-radius: 999px;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1;   }
}

/* =========================================================
   Sparkle burst on day change
   ========================================================= */
.spark-burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.spark-burst.go { animation: burst 0.9s ease-out; }
.spark-burst span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.4rem;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
  transform: translate(-50%, -50%);
  animation: burstFly 0.9s ease-out forwards;
}
.spark-burst span:nth-child(1) { --tx: -120px; --ty: -60px;  }
.spark-burst span:nth-child(2) { --tx:  120px; --ty: -60px;  }
.spark-burst span:nth-child(3) { --tx: -160px; --ty:  20px;  }
.spark-burst span:nth-child(4) { --tx:  160px; --ty:  20px;  }
.spark-burst span:nth-child(5) { --tx:  -80px; --ty:  80px;  }
.spark-burst span:nth-child(6) { --tx:   80px; --ty:  80px;  }
.spark-burst span:nth-child(7) { --tx:    0;   --ty: -120px; }
.spark-burst span:nth-child(8) { --tx:    0;   --ty:  140px; }

@keyframes burst   { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes burstFly {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  20%  { transform: translate(calc(-50% + var(--tx) * 0.3), calc(-50% + var(--ty) * 0.3)) scale(1.2); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) * 0.7)) scale(0.7); opacity: 0; }
}

/* =========================================================
   Emoji-free decorations
   - .flower: CSS-drawn pink flowers (replaces the flower unicode symbol)
   - .flw: small inline flower in text (kicker, caption)
   - .heart-inline: small inline heart (status, credit)
   - .live-dot: animated dot in the live pill
   - .naa-spark: extra sparkle next to NAA CTA
   - .fc.fc-bow / .fc.fc-flower: confetti pieces
   - .bow-fallback: CSS-drawn bow (image fallback)
   ========================================================= */

/* CSS-drawn flower: 5 pink petals around a yellow center */
.flower {
  width: 24px;
  height: 24px;
  position: absolute;
  bottom: -40px;
  animation: floatUp linear infinite;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.4));
}
.flower::before,
.flower::after,
.flower > i {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: var(--hot-pink);
  border-radius: 50% 50% 50% 0;
  transform-origin: 0 100%;
  border: 1px solid #fff;
  box-shadow: 0 0 4px rgba(255, 105, 180, 0.45);
}
.flower::before { transform: translate(-50%, -100%) rotate(0deg);   }
.flower::after  { transform: translate(-50%, -100%) rotate(72deg);  background: var(--light-pink); }
.flower > i     { transform: translate(-50%, -100%) rotate(144deg); background: var(--hot-pink);   }
.flower > i::before {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  top: 0; left: 0;
  background: var(--light-pink);
  border-radius: 50% 50% 50% 0;
  transform: rotate(72deg);
  border: 1px solid #fff;
}
.flower > i::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  top: 0; left: 0;
  background: var(--hot-pink);
  border-radius: 50% 50% 50% 0;
  transform: rotate(144deg);
  border: 1px solid #fff;
}
/* yellow center disc */
.flower::after,
.flower > i {
  /* keep the petals and center distinct */
}
/* the trick: render center as a small yellow circle on top */
.flower > b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #fff;
  z-index: 1;
}

/* Small inline flower used inside text */
.flw {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  margin: 0 2px;
  vertical-align: -2px;
}
.flw::before,
.flw::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  background: var(--hot-pink);
  border-radius: 50% 50% 50% 0;
  transform-origin: 0 100%;
  border: 0.5px solid #fff;
  box-shadow: 0 0 3px rgba(255, 105, 180, 0.5);
}
.flw::before { transform: translate(-50%, -100%) rotate(0deg);   }
.flw::after  { transform: translate(-50%, -100%) rotate(72deg);  background: var(--light-pink); }
.flw > b {
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.flw.f-pink { --hot-pink: #ff8bb8; --light-pink: #ffc1de; }

/* Inline heart for text */
.heart-inline {
  display: inline-block;
  color: var(--hot-pink);
  font-size: 1.1em;
  vertical-align: -1px;
  text-shadow: 0 0 6px rgba(255, 105, 180, 0.5);
  margin: 0 1px;
  animation: heartInlineBeat 1.6s ease-in-out infinite;
}
@keyframes heartInlineBeat {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.18); }
}

/* Animated live dot */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2c9c66;
  margin-right: 4px;
  box-shadow: 0 0 6px rgba(44, 156, 102, 0.7);
  animation: liveDotBlink 1.4s ease-in-out infinite;
  vertical-align: 1px;
}
@keyframes liveDotBlink {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* NAA extra sparkle */
.naa-spark {
  display: inline-block;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
  animation: naaSparkPulse 1.2s ease-in-out infinite;
  margin-left: 2px;
}
@keyframes naaSparkPulse {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: 0.7; }
  50%      { transform: scale(1.4)  rotate(20deg); opacity: 1;   }
}

/* CSS-drawn bow (used for .bow-fallback and as confetti piece) */
.bow-fallback,
.fc.fc-bow {
  background: transparent;
}
.bow-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.fc.fc-bow,
.fc.fc-flower {
  width: 24px;
  height: 24px;
  display: block;
}

/* Bow shape: two triangle petals + a knot */
.fc.fc-bow {
  position: relative;
  background: transparent;
}
.fc.fc-bow::before,
.fc.fc-bow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--hot-pink);
  border: 1px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform-origin: 100% 50%;
  box-shadow: 0 0 4px rgba(255, 105, 180, 0.5);
}
.fc.fc-bow::before { left: 0;  transform: translateY(-50%) rotate(-30deg) scaleX(-1); }
.fc.fc-bow::after  { right: 0; transform: translateY(-50%) rotate(30deg);  }
.fc.fc-bow > b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--deep-pink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #fff;
}

/* Same flower for confetti (slightly smaller, but identical look) */
.fc.fc-flower {
  position: relative;
  background: transparent;
}
.fc.fc-flower::before,
.fc.fc-flower::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--hot-pink);
  border-radius: 50% 50% 50% 0;
  transform-origin: 0 100%;
  border: 1px solid #fff;
  box-shadow: 0 0 4px rgba(255, 105, 180, 0.4);
}
.fc.fc-flower::before { transform: translate(-50%, -100%) rotate(0deg);   }
.fc.fc-flower::after  { transform: translate(-50%, -100%) rotate(72deg);  background: var(--light-pink); }
.fc.fc-flower > b {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #fff;
  z-index: 1;
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 480px) {
  body { padding: 18px 10px 48px; }
  .bow-top-left, .bow-top-right { width: 72px; height: 72px; }
  .bow-top-right               { width: 62px; height: 62px; }
  .card                        { padding: 78px 14px 20px; border-radius: 28px; }
  .character                   { width: 150px; }
  .character-ring              { width: 160px; height: 160px; top: 20px; }
  .character-plate             { width: 140px; height: 140px; }
  .cd-cell                     { min-width: 52px; padding: 8px 4px 6px; border-radius: 14px; }
  .cd-cell-days                { min-width: 64px; }
  .cd-num                      { font-size: 1.45rem; }
  .cd-cell-days .cd-num        { font-size: 2rem; }
  .cd-lbl                      { font-size: 0.62rem; letter-spacing: 0.5px; }
  .cd-sep                      { font-size: 1.2rem; margin-bottom: 10px; }
  .cal-day                     { font-size: 0.78rem; }
  .quote                       { font-size: 1.25rem; }
  .stat-num                    { font-size: 1.4rem; }
  .stat-label                  { font-size: 0.65rem; }
  .title                       { gap: 4px; }
}

@media (max-width: 360px) {
  .cd-row  { gap: 3px; }
  .cd-cell { min-width: 44px; padding: 6px 2px 4px; }
  .cd-cell-days { min-width: 54px; }
  .cd-num  { font-size: 1.25rem; }
  .cd-cell-days .cd-num { font-size: 1.7rem; }
}

/* =========================================================
   Accessibility
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .heart, .sparkle, .flower, .cd-cell-days .cd-num, .character-plate,
  .character-ring, .progress-fill, .title-heart, .live-pill,
  .cal-day.today, .status.celebrate,
  .inf, .naa-overlay .naa-big, .naa-overlay .naa-stars span,
  .naa-overlay .naa-burst span, .final-state .final-confetti span { animation: none !important; }
}

/* =========================================================
   "Ich liebe dich so ∞" love line — inside the clock area
   ========================================================= */
.love-line {
  text-align: center;
  margin: 6px auto 12px;
  font-family: "Caveat", cursive;
  font-size: 1.4rem;
  color: var(--deep-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.inf {
  display: inline-block;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  background: linear-gradient(90deg, var(--hot-pink), var(--deep-pink), var(--gold), var(--hot-pink));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: infShift 3.5s linear infinite, infPulse 1.6s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(255, 105, 180, 0.35);
  transform-origin: center;
  letter-spacing: 0.5px;
}

@keyframes infShift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes infPulse {
  0%, 100% { transform: scale(1)    rotate(0deg);  }
  50%      { transform: scale(1.18) rotate(0deg);  }
}

.love-spark {
  display: inline-block;
  animation: loveSpark 1.4s ease-in-out infinite;
}

@keyframes loveSpark {
  0%, 100% { transform: scale(1)   rotate(0deg);  opacity: 1;   }
  50%      { transform: scale(1.3) rotate(15deg); opacity: 0.85; }
}

/* =========================================================
   Stage banner — only the last week of school
   (Mon Jul 6 → Fri Jul 10). Stage N = day-of-week-1 of last week.
   ========================================================= */
.stage-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px auto 4px;
  padding: 10px 14px;
  border-radius: 18px;
  font-family: "Fredoka", sans-serif;
  text-align: center;
}

.stage-banner[hidden] { display: none !important; }

.stage-pill {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 2px;
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--hot-pink), var(--deep-pink));
  box-shadow: var(--shadow-pink-sm);
  animation: stagePulse 1.6s ease-in-out infinite;
}

.stage-text {
  font-size: 1.05rem;
  color: var(--deep-pink);
  font-weight: 500;
}

@keyframes stagePulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0   0 rgba(255, 105, 180, 0.5); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255, 105, 180, 0);   }
}

/* Stage-themed card accents (1 = soft, 5 = full rainbow) */
body[data-stage="1"] .card        { box-shadow: 0 14px 40px rgba(255, 182, 193, 0.45); }
body[data-stage="1"] .stage-pill  { background: linear-gradient(135deg, #ffb6c1, var(--hot-pink)); }

body[data-stage="2"] .card        { box-shadow: 0 14px 40px rgba(255, 105, 180, 0.50); }
body[data-stage="2"] .stage-pill  { background: linear-gradient(135deg, var(--hot-pink), #ff85c1); }
body[data-stage="2"] .character-plate {
  box-shadow: 0 0 0 4px #ff85c1, 0 0 36px rgba(255, 105, 180, 0.6), 0 14px 30px rgba(255, 20, 147, 0.35);
}

body[data-stage="3"] .card        { box-shadow: 0 14px 40px rgba(255, 20, 147, 0.55); }
body[data-stage="3"] .stage-pill  { background: linear-gradient(135deg, var(--deep-pink), #d6006c); }
body[data-stage="3"] .character-ring { border-color: rgba(255, 20, 147, 0.7); }
body[data-stage="3"] .cd-cell-days .cd-num {
  background: linear-gradient(135deg, var(--deep-pink), #c2185b);
  -webkit-background-clip: text;
  background-clip: text;
}

body[data-stage="4"] .card {
  box-shadow: 0 14px 40px rgba(255, 215, 0, 0.5), 0 6px 14px rgba(255, 20, 147, 0.3);
  border-color: rgba(255, 215, 0, 0.7);
}
body[data-stage="4"] .stage-pill  { background: linear-gradient(135deg, var(--gold), #ffb000); color: #5a2a4a; }
body[data-stage="4"] .progress-fill {
  background: linear-gradient(90deg, var(--gold), #ffb000, var(--hot-pink));
  background-size: 200% 100%;
}

body[data-stage="5"] {
  background:
    radial-gradient(circle at 15% 10%, #ffe4f1 0%, transparent 40%),
    radial-gradient(circle at 85% 20%, #fff0c2 0%, transparent 45%),
    radial-gradient(circle at 50% 95%, #ffe9f3 0%, transparent 50%),
    linear-gradient(180deg, #ffd6e7 0%, #fff5f8 60%, #ffe9f3 100%);
}
body[data-stage="5"] .card {
  box-shadow:
    0 0 0 4px var(--gold),
    0 0 50px rgba(255, 215, 0, 0.6),
    0 14px 40px rgba(255, 20, 147, 0.4);
  border-color: rgba(255, 215, 0, 0.6);
}
body[data-stage="5"] .stage-pill {
  background: linear-gradient(135deg, var(--deep-pink), var(--gold), var(--hot-pink));
  background-size: 200% 100%;
  animation: stagePulse 1.2s ease-in-out infinite, rainbowShift 3s linear infinite;
  color: #fff;
  text-shadow: 1px 1px 0 var(--deep-pink);
}
body[data-stage="5"] .character-ring {
  border-color: var(--gold);
  animation-duration: 8s;
}
body[data-stage="5"] .cd-cell-days .cd-num {
  background: linear-gradient(135deg, var(--deep-pink), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes rainbowShift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

/* =========================================================
   NAA overlay — shown during mirror times (HH == MM)
   Full-screen takeover, dismisses automatically when the
   minute passes.
   ========================================================= */
.naa-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 105, 180, 0.45) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(255, 215, 0, 0.40) 0%, transparent 50%),
    linear-gradient(135deg, rgba(255, 214, 231, 0.95), rgba(255, 179, 209, 0.95));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.naa-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70vw;
  max-width: 480px;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  animation: naaBgFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(255, 105, 180, 0.4));
}

@keyframes naaBgFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1)    rotate(0deg);  }
  50%      { transform: translate(-50%, -50%) scale(1.06) rotate(4deg);  }
}

.naa-overlay.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  animation: naaShake 0.6s ease-out;
}

@keyframes naaShake {
  0%   { transform: scale(0.85) rotate(0deg);   }
  20%  { transform: scale(1.06) rotate(-2deg);  }
  40%  { transform: scale(0.98) rotate(2deg);   }
  60%  { transform: scale(1.02) rotate(-1deg);  }
  80%  { transform: scale(0.99) rotate(1deg);   }
  100% { transform: scale(1)    rotate(0deg);   }
}

.naa-big {
  font-family: "Pacifico", cursive;
  font-size: clamp(8rem, 30vw, 18rem);
  line-height: 1;
  margin: 0;
  background: linear-gradient(135deg, var(--hot-pink), var(--deep-pink), var(--gold), var(--hot-pink));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(255, 105, 180, 0.4);
  animation: naaBigShift 3s linear infinite, naaBigPulse 1.2s ease-in-out infinite;
  letter-spacing: 0.05em;
  z-index: 2;
}

@keyframes naaBigShift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes naaBigPulse {
  0%, 100% { transform: scale(1)    rotate(0deg);  }
  50%      { transform: scale(1.08) rotate(0deg);  }
}

.naa-time {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--deep-pink);
  margin: 8px 0 4px;
  letter-spacing: 4px;
  z-index: 2;
}

.naa-sub {
  font-family: "Caveat", cursive;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  color: var(--ink);
  margin: 6px 0 0;
  max-width: 30ch;
  z-index: 2;
}

.naa-cta {
  font-family: "Caveat", cursive;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  color: var(--deep-pink);
  margin: 14px 0 0;
  font-weight: 700;
  z-index: 2;
}

.naa-stars,
.naa-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.naa-stars span,
.naa-burst span {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: naaFly 2.2s ease-out infinite;
  will-change: transform, opacity;
}

.naa-stars span {
  color: var(--gold);
  font-size: 1.6rem;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}
.naa-burst span {
  font-size: 1.4rem;
}

.naa-stars span:nth-child(1)  { --tx:  -180px; --ty:  -120px; animation-delay: 0.0s; }
.naa-stars span:nth-child(2)  { --tx:   180px; --ty:  -120px; animation-delay: 0.1s; }
.naa-stars span:nth-child(3)  { --tx:  -240px; --ty:    40px; animation-delay: 0.2s; }
.naa-stars span:nth-child(4)  { --tx:   240px; --ty:    40px; animation-delay: 0.3s; }
.naa-stars span:nth-child(5)  { --tx:  -120px; --ty:   160px; animation-delay: 0.4s; }
.naa-stars span:nth-child(6)  { --tx:   120px; --ty:   160px; animation-delay: 0.5s; }
.naa-stars span:nth-child(7)  { --tx:     0;   --ty:  -200px; animation-delay: 0.6s; }
.naa-stars span:nth-child(8)  { --tx:     0;   --ty:   220px; animation-delay: 0.7s; }
.naa-stars span:nth-child(9)  { --tx:  -100px; --ty:  -240px; animation-delay: 0.8s; }
.naa-stars span:nth-child(10) { --tx:   100px; --ty:  -240px; animation-delay: 0.9s; }
.naa-stars span:nth-child(11) { --tx:  -200px; --ty:   100px; animation-delay: 1.0s; }
.naa-stars span:nth-child(12) { --tx:   200px; --ty:   100px; animation-delay: 1.1s; }

.naa-burst span:nth-child(1)  { --tx:  -90px; --ty:  -60px;  animation-delay: 0.2s; }
.naa-burst span:nth-child(2)  { --tx:   90px; --ty:  -60px;  animation-delay: 0.3s; }
.naa-burst span:nth-child(3)  { --tx: -130px; --ty:   20px;  animation-delay: 0.4s; }
.naa-burst span:nth-child(4)  { --tx:  130px; --ty:   20px;  animation-delay: 0.5s; }
.naa-burst span:nth-child(5)  { --tx:  -60px; --ty:   80px;  animation-delay: 0.6s; }
.naa-burst span:nth-child(6)  { --tx:   60px; --ty:   80px;  animation-delay: 0.7s; }
.naa-burst span:nth-child(7)  { --tx:    0;   --ty: -100px;  animation-delay: 0.8s; }
.naa-burst span:nth-child(8)  { --tx:    0;   --ty:  120px;  animation-delay: 0.9s; }

@keyframes naaFly {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  15%  { transform: translate(calc(-50% + var(--tx) * 0.3), calc(-50% + var(--ty) * 0.3)) scale(1.1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)),       calc(-50% + var(--ty) * 0.6)) scale(0.5); opacity: 0; }
}

/* =========================================================
   Final state — replaces the main card on the last day
   ========================================================= */
.final-state {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 105, 180, 0.45) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.40) 0%, transparent 50%),
    linear-gradient(135deg, #ffd6e7 0%, #ffb3d1 50%, #fff5f8 100%);
  overflow: hidden;
}

.final-state[hidden] { display: none !important; }

.final-state.show {
  animation: finalIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes finalIn {
  0%   { opacity: 0; transform: scale(0.9);  }
  100% { opacity: 1; transform: scale(1);    }
}

.final-title {
  font-family: "Pacifico", cursive;
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  margin: 0;
  background: linear-gradient(135deg, var(--hot-pink), var(--deep-pink), var(--gold));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowShift 4s linear infinite;
  z-index: 2;
  text-shadow: 0 0 40px rgba(255, 105, 180, 0.3);
}

.final-sub {
  font-family: "Caveat", cursive;
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  color: var(--deep-pink);
  margin: 8px 0 14px;
  max-width: 30ch;
  z-index: 2;
}

.final-hello { margin: 6px 0 10px; z-index: 2; }

.final-hello-img {
  width: clamp(160px, 40vw, 240px);
  height: auto;
  display: block;
  margin: 0 auto;
  animation: bounce 2.5s ease-in-out infinite;
  filter: drop-shadow(0 12px 28px rgba(255, 105, 180, 0.45));
}

.final-line {
  font-family: "Caveat", cursive;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--deep-pink);
  margin: 10px 0 6px;
  z-index: 2;
}

.final-cta {
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  color: var(--ink);
  margin: 4px 0 0;
  z-index: 2;
}

.final-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.final-confetti span {
  position: absolute;
  top: -40px;
  font-size: 1.6rem;
  animation: finalRain linear infinite;
  will-change: transform, opacity;
}

.final-confetti span:nth-child(1)  { left:  4%; animation-duration:  7s; animation-delay: 0.0s; }
.final-confetti span:nth-child(2)  { left: 10%; animation-duration:  9s; animation-delay: 0.4s; }
.final-confetti span:nth-child(3)  { left: 18%; animation-duration:  6s; animation-delay: 0.8s; }
.final-confetti span:nth-child(4)  { left: 26%; animation-duration:  8s; animation-delay: 1.2s; }
.final-confetti span:nth-child(5)  { left: 34%; animation-duration:  7s; animation-delay: 0.2s; }
.final-confetti span:nth-child(6)  { left: 42%; animation-duration: 10s; animation-delay: 0.6s; }
.final-confetti span:nth-child(7)  { left: 50%; animation-duration:  8s; animation-delay: 1.0s; }
.final-confetti span:nth-child(8)  { left: 58%; animation-duration:  7s; animation-delay: 1.4s; }
.final-confetti span:nth-child(9)  { left: 66%; animation-duration:  9s; animation-delay: 0.3s; }
.final-confetti span:nth-child(10) { left: 74%; animation-duration:  6s; animation-delay: 0.7s; }
.final-confetti span:nth-child(11) { left: 82%; animation-duration:  8s; animation-delay: 1.1s; }
.final-confetti span:nth-child(12) { left: 90%; animation-duration:  7s; animation-delay: 0.5s; }
.final-confetti span:nth-child(13) { left:  7%; animation-duration: 10s; animation-delay: 1.5s; }
.final-confetti span:nth-child(14) { left: 35%; animation-duration:  8s; animation-delay: 0.9s; }
.final-confetti span:nth-child(15) { left: 63%; animation-duration:  9s; animation-delay: 1.3s; }
.final-confetti span:nth-child(16) { left: 88%; animation-duration:  7s; animation-delay: 0.1s; }

@keyframes finalRain {
  0%   { transform: translateY(0)    rotate(0deg)  scale(1);   opacity: 0;   }
  10%  {                                                          opacity: 1;   }
  100% { transform: translateY(110vh) rotate(360deg) scale(0.9); opacity: 0;   }
}

/* When the final state is on, hide the regular card so we don't double-render. */
body.final-active .card        { display: none; }
body.final-active .naa-overlay { display: none; }

/* =========================================================
   Demo / debug help popup (press ?)
   ========================================================= */
.demo-help {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: 280px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid var(--light-pink);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(255, 105, 180, 0.25);
  font-family: "Fredoka", sans-serif;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.4;
}

.demo-help[hidden] { display: none; }

.demo-help h3 {
  font-family: "Pacifico", cursive;
  font-size: 1rem;
  margin: 0 0 6px;
  color: var(--deep-pink);
}

.demo-help p { margin: 4px 0 6px; }

.demo-help ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 6px;
}
.demo-help li { margin: 2px 0; }

.demo-help kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin: 0 1px;
  background: linear-gradient(135deg, #fff, var(--soft-pink));
  border: 1px solid var(--light-pink);
  border-radius: 4px;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--deep-pink);
  text-align: center;
  box-shadow: 0 1px 2px rgba(255, 105, 180, 0.2);
}

.demo-help code {
  display: inline-block;
  background: rgba(255, 214, 231, 0.5);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--deep-pink);
  word-break: break-all;
}

.demo-help-foot {
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 6px;
  border-top: 1px dashed var(--light-pink);
  padding-top: 6px;
}

/* =========================================================
   Miauki wink drifter — extra Hello Kitty cuteness floating up
   ========================================================= */
.wink-drifter {
  position: absolute;
  width: 56px;
  height: 56px;
  object-fit: contain;
  bottom: -60px;
  animation: floatUp linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 105, 180, 0.4));
  will-change: transform, opacity;
  pointer-events: none;
}
.wink-drifter.wd1 { left:  16%; width: 48px; animation-duration: 18s; animation-delay:  2s; opacity: 0.85; }
.wink-drifter.wd2 { left:  70%; width: 40px; animation-duration: 22s; animation-delay:  7s; opacity: 0.75; }
.wink-drifter.wd3 { left:  40%; width: 32px; animation-duration: 26s; animation-delay: 12s; opacity: 0.65; }