/* ===========================
       Fireworks Container
    ============================ */
    .fireworks {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
    }

    /* ===========================
       Dark Overlay
    ============================ */
    /* Dark Glass Overlay */
    #celebrationOverlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.9); /* almost fully black */
    backdrop-filter: blur(3px);           /* optional: blurs background */
    z-index: 9998;
    pointer-events: none;
    transition: opacity 0.5s ease;
    }

    /* ===========================
       Celebration Text Style
    ============================ */
    #eventText {
      position: fixed;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Pacifico', cursive;
      font-weight: 900;
      font-size: 36px;       /* mobile size */
      color: #fff;
      text-align: center;
      z-index: 10000;
      animation: glow 2s infinite alternate, pop 0.8s ease-out;
      text-shadow:
        0 0 4px #ffd700,
        0 0 8px #ff6600,
        0 0 12px #ff4500;
      letter-spacing: 1px;
    }

    /* Glow Animation */
    @keyframes glow {
      from {
        text-shadow:
          0 0 4px #ffd700,
          0 0 8px #ff6600,
          0 0 12px #ff4500;
      }
      to {
        text-shadow:
          0 0 8px #00eaff,
          0 0 15px #0066ff,
          0 0 20px #00bfff;
      }
    }

    /* Pop Animation */
    @keyframes pop {
      0% { transform: translate(-50%, -50%) scale(0.8); }
      100% { transform: translate(-50%, -50%) scale(1); }
    }

    /* Responsive Font Sizes */
    @media (min-width: 768px) {
      #eventText {
        font-size: 54px;
        letter-spacing: 2px;
      }
    }

    @media (min-width: 1200px) {
      #eventText {
        font-size: 70px;
        letter-spacing: 3px;
      }
    }