<style>
    body {
      font-family: 'Bubblegum Sans', 'Comic Sans MS', cursive;
      background: linear-gradient(135deg, #ffafbd, #ffc3a0, #a1c4fd, #c2e9fb);
      position: relative;
      overflow-x: hidden;
      font-size: clamp(14px, 4vw, 16px);
    }
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-10px); }
      60% { transform: translateY(-5px); }
    }
    .bounce { animation: bounce 2s infinite; }
    @keyframes wing-flap {
      0% { transform: scaleY(1) rotate(0deg); }
      25% { transform: scaleY(0.95) rotate(3deg); }
      50% { transform: scaleY(1) rotate(0deg); }
      75% { transform: scaleY(0.95) rotate(-3deg); }
      100% { transform: scaleY(1) rotate(0deg); }
    }
    .wing-flap { animation: wing-flap 1.2s ease-in-out infinite; }
    @keyframes star-twinkle {
      0% { opacity: 0.5; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.2); }
      100% { opacity: 0.5; transform: scale(0.8); }
    }
    .star {
      position: absolute;
      width: clamp(6px, 2vw, 8px);
      height: clamp(6px, 2vw, 8px);
      background: yellow;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      animation: star-twinkle 2s infinite;
    }
    .progress-wheel {
      background: conic-gradient(#f472b6 var(--progress), #e5e7eb 0);
      border-radius: 50%;
      width: clamp(40px, 12vw, 50px);
      height: clamp(40px, 12vw, 50px);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .progress-wheel::after {
      content: '';
      background: white;
      border-radius: 50%;
      width: clamp(32px, 10vw, 40px);
      height: clamp(32px, 10vw, 40px);
      position: absolute;
    }
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 50;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .modal-content {
      background: linear-gradient(to bottom, #fefcbf, #fefcbf);
      border-radius: 1rem;
      padding: clamp(1rem, 5vw, 1.5rem);
      max-width: 90vw;
      max-height: 80vh;
      overflow-y: auto;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      position: relative;
    }
    .verse-card {
      transition: transform 0.3s, opacity 0.5s;
      transform-origin: center;
    }
    .verse-card.show {
      opacity: 1;
      transform: translateY(0);
    }
    .verse-card.hide {
      opacity: 0;
      transform: translateY(20px);
    }
    button {
      transition: transform 0.2s;
      padding: clamp(0.8rem, 3vw, 1rem) clamp(1.5rem, 4vw, 2rem);
    }
    button:hover {
      transform: scale(1.1);
    }
    .verse-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 clamp(1rem, 5vw, 2rem);
    }
    .mascot {
      width: clamp(40px, 12vw, 60px);
      z-index: 40;
    }
    .mascot.left {
      position: absolute;
      left: clamp(-60px, -15vw, -40px);
      top: 50%;
      transform: translateY(-50%);
    }
    .mascot.right {
      position: absolute;
      right: clamp(-60px, -15vw, -40px);
      top: 50%;
      transform: translateY(-50%) scaleX(-1);
    }
    .speech-bubble {
      display: none;
      position: absolute;
      background: white;
      border-radius: 0.8rem;
      padding: clamp(0.5rem, 2vw, 0.6rem);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      max-width: clamp(100px, 30vw, 120px);
      text-align: center;
      font-size: clamp(0.65rem, 2.5vw, 0.75rem);
      color: #4b5563;
      z-index: 45;
    }
    .speech-bubble.left {
      top: clamp(-60px, -15vw, -50px);
      left: clamp(-60px, -15vw, -50px);
    }
    .speech-bubble.right {
      top: clamp(-60px, -15vw, -50px);
      right: clamp(-60px, -15vw, -50px);
    }
    .speech-bubble::after {
      content: '';
      position: absolute;
      bottom: -8px;
      border-width: 8px;
      border-style: solid;
      border-color: white transparent transparent transparent;
    }
    .speech-bubble.left::after {
      left: 15px;
    }
    .speech-bubble.right::after {
      right: 15px;
    }
    @media (max-width: 640px) {
      body {
        font-size: clamp(12px, 3.5vw, 14px);
      }
      .container {
        padding: 1rem;
      }
      header h1 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
      }
      .verse-card {
        padding: 1rem;
      }
      .verse-card img {
        width: clamp(60px, 20vw, 80px);
      }
      .verse-card p {
        font-size: clamp(0.9rem, 4vw, 1rem);
      }
      .progress-wheel {
        width: clamp(35px, 10vw, 40px);
        height: clamp(35px, 10vw, 40px);
      }
      .progress-wheel::after {
        width: clamp(28px, 8vw, 32px);
        height: clamp(28px, 8vw, 32px);
      }
      .progress-wheel span {
        font-size: clamp(0.6rem, 2vw, 0.7rem);
      }
      button {
        padding: clamp(0.6rem, 2.5vw, 0.8rem) clamp(1rem, 3vw, 1.5rem);
        font-size: clamp(0.8rem, 3vw, 0.9rem);
      }
      .mascot {
        width: clamp(30px, 10vw, 50px);
      }
      .mascot.left {
        left: clamp(-40px, -12vw, -30px);
      }
      .mascot.right {
        right: clamp(-40px, -12vw, -30px);
      }
      .speech-bubble {
        max-width: clamp(80px, 25vw, 100px);
        font-size: clamp(0.6rem, 2vw, 0.7rem);
        padding: clamp(0.4rem, 1.5vw, 0.5rem);
      }
      .speech-bubble.left {
        left: clamp(-40px, -12vw, -30px);
        top: clamp(-50px, -12vw, -40px);
      }
      .speech-bubble.right {
        right: clamp(-40px, -12vw, -30px);
        top: clamp(-50px, -12vw, -40px);
      }
      .modal-content {
        padding: 1rem;
        max-width: 95vw;
        max-height: 85vh;
      }
      .modal-content h2 {
        font-size: clamp(1.2rem, 5vw, 1.5rem);
      }
      #stickerList {
        grid-template-columns:敞0 1fr;
      }
      #stickerList img {
        width: clamp(40px, 15vw, 50px);
        height: clamp(40px, 15vw, 50px);
      }
    }
    @media (max-width: 400px) {
      .verse-container {
        flex-direction: column;
        align-items: center;
      }
      .mascot.left {
        position: static;
        transform: none;
        margin-bottom: 1rem;
      }
      .mascot.right {
        position: static;
        transform: none;
        margin-top: 1rem;
      }
      .speech-bubble {
        display: none;
      }
    }
    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');

    .kids-footer {
      background: linear-gradient(to right, #fceabb, #f8b500);
      color: #333;
      text-align: center;
      padding: clamp(1rem, 3vw, 1.5rem);
      font-family: 'Comic Neue', cursive;
      font-size: clamp(0.9rem, 3vw, 1rem);
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .bubble {
      position: absolute;
      border-radius: 50%;
      opacity: 0.6;
      animation: float 6s infinite ease-in-out;
    }

    .bubble1 {
      width: clamp(15px, 5vw, 20px);
      height: clamp(15px, 5vw, 20px);
      background: #fff3cd;
      left: 10%;
      bottom: -20px;
      animation-delay: 0s;
    }

    .bubble2 {
      width: clamp(10px, 3vw, 15px);
      height: clamp(10px, 3vw, 15px);
      background: #ffeeba;
      left: 40%;
      bottom: -15px;
      animation-delay: 2s;
    }

    .bubble3 {
      width: clamp(12px, 4vw, 18px);
      height: clamp(12px, 4vw, 18px);
      background: #fff9db;
      left: 70%;
      bottom: -18px;
      animation-delay: 1s;
    }

    @keyframes float {
      0% {
        transform: translateY(0);
        opacity: 0.6;
      }
      50% {
        transform: translateY(-60px);
        opacity: 1;
      }
      100% {
        transform: translateY(0);
        opacity: 0.6;
      }
    }
    #audioError {
      transition: opacity 0.3s ease-in-out;
    }
    #audioError.hidden {
      opacity: 0;
      height: 0;
      margin: 0;
    }
    #audioError:not(.hidden) {
      opacity: 1;
      height: auto;
    }
@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* css/styles.css */
body {
    font-family: 'Bubblegum Sans', cursive;
    background: url('../images/cosmic_ambeince.jpg') no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    color: #333;
    transition: background 0.5s ease; /* Smooth transition for fading */
}

body.faded {
    background: rgba(255, 255, 255, 0.7) url('../images/cosmic_ambeince.jpg') no-repeat center center fixed; /* Faded overlay */
    background-size: cover;
}

  </style>
