body { font-family: georgia; text-align: center; }
    .nav {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }
    .nav button {
      margin: 0 5px;
      padding: 10px 15px;
      border: none;
      border-radius: 5px;
      background: #ddd;
      cursor: pointer;
    }
    .nav button.active {
      background: #d6336c;
      color: white;
      font-weight: bold;
    }
    .page {
      display: none;
    }
    .page.active {
      display: block;
    }
    .speech-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 80%;
      margin: 20px auto;
    }
    .speech-bubble {
      width: 40%;
      padding: 15px;
      border-radius: 15px;
      background: #f0f0f0;
      line-height: 1.5;
    }
    .karaoke span { transition: color 0.3s; }
    .karaoke .highlight { color: #d6336c; font-weight: bold; }
    img {
      max-width: 100%;
      height: auto;
    }

    .tts-btn {
      margin-top: 10px;
      padding: 10px 20px;
      font-size: 16px;
    }
    .page {
      opacity: 0;
      transform: translateX(50px);
      transition: opacity 0.6s ease, transform 0.6s ease;
      display: none;
    }
    .page.active {
      display: block;
      opacity: 1;
      transform: translateX(0);
    }
    #curtain {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: linear-gradient(to right, #000, #333);
      z-index: 999;
      transform: translateX(0);
      transition: transform 1s ease;
      pointer-events: none;
    }
    #curtain.open {
      transform: translateX(-100%);
    }
    .page-heading {
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 1s ease, transform 1s ease;
    }
    .page.active .page-heading {
      opacity: 1;
      transform: scale(1);
      text-shadow: 0 0 15px gold;
    }
/*    .speech-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 80%;
      margin: 20px auto;
      flex-wrap: wrap; /* allow wrapping */
    }*/

    .speech-bubble {
      width: 40%;
      padding: 15px;
      border-radius: 15px;
      background: #f0f0f0;
      line-height: 1.5;
      box-sizing: border-box; /* ensures padding doesn’t add extra width */
    }


    /* Mobile adjustments */
    @media (max-width: 768px) {
      .speech-row {
        flex-direction: column;
        width: 95%;
        margin: 0 auto;
      }
      .speech-bubble {
        width: 100%;
        margin: 10px 0; /* consistent spacing */
        padding: 12px;   /* slightly smaller padding for mobile */
      }
      img {
        width: 100%;
        height: auto;
        margin: 10px 0;
        display: block;
      }
    }

    .nav button {
      flex: 1;
      min-width: 80px;
      font-size: 14px;
    }
    @media (max-width: 768px) {
      .nav {
        flex-wrap: wrap;
      }
      .nav button {
        font-size: 12px;
        margin: 5px;
      }
      .page-heading {
        font-size: 18px;
      }
    }