/* ─── SCREEN 3 · Main Content ───────────────────────── */
    #mainContent {
      opacity: 0; transition: opacity 1s ease;
      background: linear-gradient(160deg, var(--pink-light) 0%, #ffebf3 100%);
      min-height: 100vh;
    }

    #mainContent.visible { opacity: 1; }

    .grid-bg {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background-image:
        linear-gradient(rgba(255,107,157,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,107,157,.03) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    /* Birthday flag banner */
    .flags-bar {
      position: fixed; top: 0; left: 0; width: 100%; height: 120px;
      pointer-events: none; z-index: 1;
    }

    .flag {
      position: absolute;
      width: 0; height: 0;
      border-left: 18px solid transparent;
      border-right: 18px solid transparent;
      border-top: 32px solid var(--pink-mid);
      animation: swingFlag 3s ease-in-out infinite;
    }

    .flag::before {
      content: '';
      position: absolute; top: -42px; left: -1px;
      width: 2px; height: 45px;
      background: rgba(255,107,157,.3);
    }

    @keyframes swingFlag {
      0%,100% { transform: rotate(0deg); }
      50%      { transform: rotate(5deg); }
    }

    /* Hero */
    .hero {
      position: relative; z-index: 2;
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      padding: 110px 40px 60px;
    }

    .hero-inner {
      max-width: 1300px; width: 100%;
      display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
    }

    /* Left text */
    .hero-left { animation: slideInLeft 1s ease-out; }

    @keyframes slideInLeft {
      from { opacity:0; transform:translateX(-80px); }
      to   { opacity:1; transform:translateX(0); }
    }

    .main-title {
      font-family: var(--font-new-display);
      font-size: clamp(3.2rem, 6vw, 6rem);
      font-weight: 900;
      line-height: 1.3;
      margin-bottom: 30px;
      letter-spacing: 0.2em;
    }

.main-title .word-happy,
.main-title .word-birthday {
    background: linear-gradient(135deg, var(--pink-hot) 0%, var(--pink-mid) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    font-style: italic;

    font-weight: 900;          /* very bold letters */
    -webkit-text-stroke: 1.5px var(--pink-hot); /* thin enough not to shrink inner gradient */
    letter-spacing: 0.15em;    /* playful spacing */
}


    .hero-btns { display: flex; gap: 0px; flex-wrap: wrap; margin-top: 10px; }

    .btn-pink {
      display: block;
      margin: auto ;
      padding: 16px 36px;
      font-size: 1.1rem;
      font-family: var(--font-body);
      font-weight: 700;
      background: linear-gradient(135deg, var(--pink-hot), var(--pink-mid));
      color: var(--white);
      border: none; border-radius: 40px;
      cursor: pointer;
      box-shadow: 0 8px 25px rgba(255,107,157,.4);
      transition: all .3s ease;
      animation: buttonPulse 2s ease-in-out infinite;
    }

    .btn-pink:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 40px rgba(255,107,157,.6); }
    .btn-pink:active { transform: translateY(-2px) scale(1.02); }

    /* Right photo */
    .hero-right {
      display: flex; justify-content: center; position: relative;
      animation: zoomInPhoto 1s ease-out .3s backwards;
    }

    @keyframes zoomInPhoto {
      from { opacity:0; transform:scale(.5); }
      to   { opacity:1; transform:scale(1); }
    }

    .photo-frame {
      position: relative;
      width: clamp(260px, 36vw, 440px);
      height: clamp(260px, 36vw, 440px);
      background: var(--white);
      border-radius: 50%; padding: 14px;
      box-shadow: 0 20px 60px rgba(0,0,0,.12);
      animation: photoFloat 4s ease-in-out infinite;
    }

    @keyframes photoFloat {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-18px); }
    }

    .photo-inner {
      width: 100%; height: 100%;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--pink-mid) 0%, var(--pink-light) 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 5rem; overflow: hidden;
    }

    .photo-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

    .name-tag {
      position: absolute; bottom: -18px; left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, var(--pink-mid) 0%, var(--pink-hot) 100%);
      color: var(--white);
      padding: 13px 36px;
      border-radius: 50px;
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 2.5vw, 1.6rem);
      font-weight: 700;
      box-shadow: 0 8px 25px rgba(255,107,157,.4);
      white-space: nowrap; z-index: 5;
    }

    /* Balloons */
    .balloon-wrap {
      position: absolute;
      animation: balloonFloat 5s ease-in-out infinite;
      cursor: pointer;
    }

    .balloon-wrap:hover .balloon-body { transform: scale(1.2); }

    .balloon-body {
      width: 72px; height: 90px;
      background: linear-gradient(135deg, var(--pink-mid) 0%, var(--pink-hot) 100%);
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      position: relative;
      box-shadow: 0 10px 30px rgba(255,107,157,.4);
      transition: transform .3s ease;
    }

    .balloon-body::before {
      content: '';
      position: absolute; bottom: -38px; left: 50%; transform: translateX(-50%);
      width: 2px; height: 55px; background: rgba(255,107,157,.5);
    }

    .balloon-body::after { content: '🎀'; position: absolute; bottom: -48px; left: 50%; transform: translateX(-50%); font-size: 16px; }

    .balloon-1 { top: 8%; right: -45px; animation-delay: 0s; }
    .balloon-2 { top: 42%; right: -75px; animation-delay: 1s; }

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

    /* Floating deco items */
    .deco-item {
      position: absolute; font-size: 22px; opacity: .35;
      animation: decoFloat 8s infinite ease-in-out;
      pointer-events: none;
    }

    @keyframes decoFloat {
      0%,100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-70px) rotate(180deg); }
    }

    /* ─── Open Surprise Button ──────────────────────────── */
    .open-surprise-btn {
      display: block;
      margin: auto ;
      padding: 16px 36px;
      font-size: 1.1rem;
      font-family: var(--font-body);
      font-weight: 700;
      background: linear-gradient(135deg, var(--pink-hot), var(--pink-mid));
      color: var(--white);
      border: none; border-radius: 40px;
      cursor: pointer;
      box-shadow: 0 8px 25px rgba(255,107,157,.4);
      transition: all .3s ease;
      animation: buttonPulse 2s ease-in-out infinite;
    }

    .open-surprise-btn:hover {
      transform: scale(1.08);
      box-shadow: 0 15px 40px rgba(255,107,157,.6);
      animation: none;
    }

    @keyframes buttonPulse {
      0%,100% { box-shadow: 0 8px 25px rgba(255,107,157,.4); }
      50%      { box-shadow: 0 15px 45px rgba(255,107,157,.75); }
    }

    /* ─── Love / Surprise Modal ─────────────────────────── */
    #loveModal {
      display: none;
      position: fixed; inset: 0;
      z-index: 200000;
      background: rgba(255,255,255,.3);
      backdrop-filter: blur(12px);
      justify-content: center; align-items: flex-start;
      padding: 30px 20px;
      overflow-y: auto;
    }

    #loveModal.open { display: flex; }

    .love-modal-inner {
      position: relative;
      background: rgba(255,255,255,.1);
      backdrop-filter: blur(25px);
      border: 2px solid rgba(255,255,255,.25);
      border-radius: 30px;
      padding: 30px;
      max-width: 1200px; width: 100%;
      box-shadow: 0 25px 80px rgba(255,107,157,.4);
       z-index: 1;
    }


.love-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 9999;
  background: rgba(255, 0, 179, 0.25);
  border: none;
  color: var(--white);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.8rem;
  cursor: pointer;
  transition: all .3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.love-close:hover {
  background: rgba(247, 89, 175, 0.45);
  transform: rotate(90deg);
}

    /* Canvas animation wrap */
    #wrap { position: relative; width: 100%; height: 680px; }

    #canvas {
      position: absolute; left: 0; top: 0;
      transition: transform 3s ease-in-out;
    }

    #text {
      position: absolute; left: 55px; top: 110px;
      width: 380px; color: var(--white);
    }

    .say {
      color: var(--pink-hot);
      font-weight: 700;
      font-family: var(--font-body);
      font-size: 1.2rem; line-height: 2;
    }

    /* ─── Music Toggle ──────────────────────────────────── */
    #musicToggle {
      position: fixed; top: 35px; right: 35px;
      background: var(--glass);
      backdrop-filter: blur(10px);
      border: 2px solid rgba(255,255,255,.4);
      color: var(--white);
      width: 64px; height: 64px; border-radius: 50%;
      font-size: 1.8rem; cursor: pointer;
      z-index: 10001;
      transition: all .3s ease;
      box-shadow: 0 8px 25px rgba(0,0,0,.15);
    }

    #musicToggle:hover { background: rgba(255,255,255,.3); transform: scale(1.12); }

    /* ─── Confetti ──────────────────────────────────────── */
    .confetti-piece {
      position: fixed; width: 10px; height: 10px;
      pointer-events: none; z-index: 99999;
      animation: confettiFall linear forwards;
    }

    @keyframes confettiFall {
      to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
    }

    /* ─── Responsive ────────────────────────────────────── */
    @media (max-width: 1024px) {
      .hero-inner { grid-template-columns: 1fr; gap: 50px; text-align: center; }
      .hero-left  { order: 2; }
      .hero-right { order: 1; }
      .hero-btns  { justify-content: center; }
      .balloon-1, .balloon-2 { display: none; }
    }

    @media (max-width: 640px) {
      .cd-timer { gap: 14px; }
      .time-unit { min-width: 80px; padding: 18px 10px; }
    }