* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Verdana, Arial, sans-serif;
      background: #d8d18a; /* darker outer bg */
      color: #000;
      text-align: center; 
    }

    /* CENTERED CONTAINER  */

    .poster {
      background: #f6f0a0; /* lighter inner bg */
      max-width: 900px;
      margin: 60px auto;
      padding-bottom: 200px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }

    /* TOP */

    .top-strip {
      background: #f4ff00;
      font-size: 14px;
      text-align: center;
      padding: 8px 12px;
    }

    .hero {
      background: #0a19ff;
      color: #f4ff00;
      padding: 10px 10px 10px;
      text-align: center;
      overflow-x: auto; 
    }


    /* MAIN CONTENT        */

    .content {
      max-width: 600px;
      margin: 80px auto 0;
      padding: 0 24px;
      line-height: 1.6;
    }

    .content em {
      display: block;
      text-align: center;
      margin: 40px 0;
    }

    .content h3 {
      text-align: center;
      margin: 40px 0 40px;
      letter-spacing: 0.1em;
      font-color: #0000ff;
    }

    /* -------------------- */
    /* EPISODES            */
    /* -------------------- */
    .episode {
      margin-bottom: 48px;
    }

    .episode h4 {
      margin: 0 0 8px;
    }

    /* -------------------- */
    /* MOBILE              */
    /* -------------------- */
    @media (max-width: 960px) {
      .poster {
        margin: 0;
        max-width: none;
        box-shadow: none;
      }
    }

    #asci{
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(6px, 1.8vw, 14px);
  line-height: 1;
  color: #00ff5a;
  padding: 4px;
  margin: 0;
animation: asciGlitch 3s infinite;
  white-space: pre;    }

  @keyframes asciGlitch {
  0%   { color: #00ff5a; }
  60%  { color: #00ff5a; }
  62%  { color: #ff0000; }
  64%  { color: #00ff5a; }
  66%  { color: #ff0033; }
  68%  { color: #00ff5a; }
  100% { color: #00ff5a; }
}

/* expandable text */

.expandable-title { 
    font-weight: bold;
    color: #000;
    cursor: pointer;
   /* display: flex; 
    align-items: center;
    justify-content: space-between; */
    padding: 10px;
    background-color: #d8d18a;
    border: 1px solid #d8d18a;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.expandable-title:hover {
    background-color: #1a55fd10;
}

.arrow {
    transition: transform 0.3s ease;
}

.expandable-title.expanded .arrow {
    transform: rotate(180deg);
}

.expandable-content {
    max-height: 0;
    overflow: auto;
    transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
    padding: 0 10px;
    background-color: #d8d18a;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); 
    opacity: 0;
    display: block; /* Always block, visibility controlled via height/opacity */
}

.expandable-content.expanded {
    max-height: 1000px; /* Set to a larger value, or use 500px for smaller content */
    padding: 10px;
    opacity: 1;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .expandable-content.expanded {
        max-height: 800px; /* Adjust max-height for mobile */
    }
}

#exp-text {
    font-size: 14px;
    color: #bfd6cb;
}