body { font-family: 'Inter','Segoe UI',Tahoma,Geneva,Verdana,sans-serif; font-size: 1rem; }
        .body-gradient { background: linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%); }
        .header-gradient { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    position: relative;
    overflow: hidden;
}

.header-gradient::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
        .level-btn { background:#fff; color:#4b5563; border:2px solid #e5e7eb; }
        .level-btn.active { background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%); color:#fff; border-color:transparent; }
        .control-btn { background:linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%); color:#374151; border:1px solid #d1d5db; }
		/* Default grey style for all control buttons */
.control-btn {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #374151;
  font-weight: 600;
  border-radius: 14px;
  padding: 14px;
  transition: all 0.25s ease;
  border: 2px solid #d1d5db;
}
.control-btn:hover {
  filter: brightness(1.05);
}

/* Active state (when selected) gets the vivid gradient */
.control-btn.active[data-action="story"] {
  background: linear-gradient(135deg,#60a5fa,#3b82f6);
  color: #fff; border-color: transparent;
}
.control-btn.active[data-action="gap-fill"] {
  background: linear-gradient(135deg,#fbbf24,#f59e0b);
  color: #fff; border-color: transparent;
}
.control-btn.active[data-action="teleprompter"] {
  background: linear-gradient(135deg,#8b5cf6,#7c3aed);
  color: #fff; border-color: transparent;
}
.control-btn.active[data-action="wordbank"] {
  background: linear-gradient(135deg,#14b8a6,#0d9488);
  color: #fff; border-color: transparent;
}
.control-btn.active[data-action="quiz"] {
  background: linear-gradient(135deg,#f87171,#ef4444);
  color: #fff; border-color: transparent;
}
.control-btn.active[data-action="discussion"] {
  background: linear-gradient(135deg,#34d399,#059669);
  color: #fff; border-color: transparent;
}

        .word-item-gradient { background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%); border:1px solid #fbbf24; }

        .gap-word{
            background:#8b5cf6; color:#fff; border-radius:50%; cursor:pointer; font-weight:bold;
            display:inline-flex; align-items:center; justify-content:center; width:1.5em; height:1.5em;
            font-size:.8em; line-height:1; margin:0 .1em; vertical-align:middle; transition:all .2s ease;
            box-shadow:0 1px 3px rgba(0,0,0,.1);
        }
        .gap-word:hover{ transform:scale(1.1); background:#7c3aed; }
        .gap-word.revealed{ background:transparent; color:inherit; cursor:default; font-size:inherit; width:auto; height:auto; border-radius:0; box-shadow:none; vertical-align:baseline; }
        .gap-word.revealed:hover{ transform:none; }

        .hidden{ display:none !important; }
        @keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

        .highlight-word{ background-color:#fef3c7; border-radius:3px; transition:background-color .2s ease-in-out; }
.floating-icon {
    animation: float-icon 3s ease-in-out infinite;

}

@keyframes float-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
        .teleprompter-text-container{
            flex-grow:1; position:relative; overflow:hidden;
            mask-image:linear-gradient(transparent, black 20%, black 80%, transparent);
        }
        .teleprompter-text{ position:absolute; width:100%; transform:translateY(100%); }
        .teleprompter-text.scrolling{ animation:scrollUp var(--animation-duration,30s) linear; }
        @keyframes scrollUp{ from{ transform:translateY(100%);} to{ transform:translateY(-100%);} }

        .quiz-option { background: #fff; } /* Added for better contrast */
        .quiz-option:hover:not(:disabled){ background:#f3f4f6; border-color:#8b5cf6; transform:translateX(4px); }
        .quiz-option:disabled{ cursor:not-allowed; }

        @media (max-width:640px){
            body{ font-size:.95rem; }
            .control-btn,.level-btn{ font-size:.85rem; padding:10px 12px; }
            #story-text,#gap-fill-text{ font-size:1.1rem !important; line-height:1.7 !important; }
            .teleprompter-text{ font-size:1.4rem !important; }
            
            /* --- NEW RULES FOR MOBILE --- */
            .level-selector { flex-wrap: nowrap; }

            .global-ui { 
                flex-wrap: nowrap; 
                justify-content: space-between;
            }
            #global-fullscreen-btn { display: none; }
            .level-btn .long-text { display: none; }
            
            #pdf-download-btn {
                padding: 0.5rem 0.75rem;
                background: #f3e8ff;
                color: #8b5cf6;
                font-weight: 600;
                border-radius: 9999px;
                box-shadow: none;
                gap: 0.25rem;
                margin-left: 0;
            }
            #pdf-download-btn .pdf-text {
                display: inline;
                font-size: 0.875rem;
            }
        }
        @media (max-width:480px){
            .header h1{ font-size:1.5rem !important; }
            .control-section .control-buttons{ grid-template-columns:1fr 1fr !important; }
        }
		/* Default (outlined grey) style */
.level-btn {
  background: #fff;
  color: #374151;
  border: 2px solid #e5e7eb;
  border-radius: 9999px;
  padding: .6rem 1.1rem;
  font-weight: 700;
  transition: all .25s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
}
.level-btn:hover {
  transform: translateY(-2px);
}

/* Active (clicked) states */
.level-btn.active[data-level="A1"] {
  background: linear-gradient(135deg,#10b981,#059669); /* green */
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(16,185,129,.35);
}
.level-btn.active[data-level="B1"] {
  background: linear-gradient(135deg,#f59e0b,#d97706); /* orange */
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(245,158,11,.35);
}
.level-btn.active[data-level="C1"] {
  background: linear-gradient(135deg,#8b5cf6,#7c3aed); /* purple */
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(139,92,246,.35);
}

    


      /* rAF Teleprompter styles (overlay fades) */
      .teleprompter-text-container{ position:relative; overflow:hidden; height:100%; }
      .teleprompter-text-container::before,.teleprompter-text-container::after{
        content:""; position:absolute; left:0; right:0; height:72px; pointer-events:none; z-index:5;
      }
      .teleprompter-text-container::before{ top:0; background:linear-gradient(to bottom, rgba(17,24,39,.9), rgba(17,24,39,0)); }
      .teleprompter-text-container::after{ bottom:0; background:linear-gradient(to top, rgba(17,24,39,.9), rgba(17,24,39,0)); }
      .teleprompter-text{
        position:absolute; left:0; right:0; padding:0 5%; color:#fff;
        font-size:clamp(1.1rem,2.2vw,2rem); line-height:1.5; text-align:center;
        transform:translateY(var(--y,0px)); will-change:transform; white-space:pre-wrap;
      }
    


      /* Ensure audio stays interactive */
      #audio-player,#audio-player *{ pointer-events:auto !important; }
      .audio-player{ position:relative; z-index:20; }
    


      /* Readability upgrades */
      body{ font-size:1.08rem; }
      #story-text,#gap-fill-text{ font-size:clamp(1.05rem,2.1vw,1.35rem); line-height:1.75; }
      #discussion-questions{ font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.75; }
      #discussion-questions > *{ padding:.85rem 1rem; }
      .teleprompter-text{ font-size:clamp(1.35rem,2.6vw,2.2rem) !important; line-height:1.6; }
    


      /* Global text scaling & fullscreen zoom */
      :root{ --text-scale:1; --fs-scale:1; }
      #story-text,#gap-fill-text{ font-size:calc(clamp(1.05rem,2.1vw,1.35rem) * var(--text-scale) * var(--fs-scale)); line-height:1.75; }
      #discussion-questions{ font-size:calc(clamp(1.2rem,2.2vw,1.6rem) * var(--text-scale) * var(--fs-scale)); line-height:1.75; }
      #discussion-questions > *{ padding:.85rem 1rem; }
      .teleprompter-text{ text-align:left !important; font-size:calc(clamp(1.35rem,2.6vw,2.2rem) * var(--text-scale) * var(--fs-scale)) !important; line-height:1.6; }