diff --git a/__pycache__/app.cpython-312.pyc b/__pycache__/app.cpython-312.pyc
deleted file mode 100644
index 6704a14..0000000
Binary files a/__pycache__/app.cpython-312.pyc and /dev/null differ
diff --git a/animex/index.html b/animex/index.html
index 860a7f1..511eb99 100644
--- a/animex/index.html
+++ b/animex/index.html
@@ -1644,7 +1644,7 @@
          }">
         <!-- Added seeked event and preload for caching and smooth seeking -->
         <video x-ref="audioPlayer" 
-               :src="currentTrack.url" 
+               :src="currentTrack.url ? '/proxy?url=' + encodeURIComponent(currentTrack.url) : ''" 
                @timeupdate="onTimeUpdate" 
                @ended="onEnded" 
                @loadedmetadata="onMeta" 
@@ -1861,6 +1861,8 @@
 
     <!-- ALPINE.JS PLAYER LOGIC -->
     <script>
+
+      // Add this helper function where your logic resides
         function musicPlayer() {
             return {
                 queue: [],
diff --git a/animex/series-info.html b/animex/series-info.html
index cd4d5b1..73fa51c 100644
--- a/animex/series-info.html
+++ b/animex/series-info.html
@@ -28,1997 +28,2158 @@
 
     <style>
       /* =========================================
-         1. VARIABLES & RESET
-         ========================================= */
-      :root {
-        --brand-accent: #ff9500;
-        --brand-accent-hover: #ffae40;
-        --background-primary: #0a0a0a;
-        --background-secondary: #161616;
-        --background-tertiary: #202020;
+   1. VARIABLES & RESET
+   ========================================= */
+:root {
+  --brand-accent: #ff9500;
+  --brand-accent-hover: #ffae40;
+  --background-primary: #0a0a0a;
+  --background-secondary: #121212;
+  --background-tertiary: #1a1a1a;
 
-        --text-primary: #eaeaea;
-        --text-secondary: #999999;
-        --text-muted: #666666;
+  --text-primary: #eaeaea;
+  --text-secondary: #a0a0a0;
+  --text-muted: #666666;
 
-        --border-color: #2a2a2a;
-        --shadow-color: rgba(0, 0, 0, 0.6);
+  --border-color: rgba(255, 255, 255, 0.08); /* Softened from solid gray */
+  --shadow-color: rgba(0, 0, 0, 0.6);
 
-        --border-radius: 12px;
-        --transition-duration: 0.3s;
-      }
+  --border-radius: 16px; /* Modernized from 12px */
+  --border-radius-sm: 10px;
+  --transition-duration: 0.3s;
+}
 
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-      html {
-        -webkit-font-smoothing: antialiased;
-        scroll-behavior: smooth;
-      }
+html {
+  -webkit-font-smoothing: antialiased;
+  scroll-behavior: smooth;
+}
 
-      body {
-        background-color: var(--background-primary);
-        color: var(--text-primary);
-        font-family: "Inter", sans-serif;
-        line-height: 1.6;
-        overflow-x: hidden;
-      }
+body {
+  background-color: var(--background-primary);
+  color: var(--text-primary);
+  font-family: "Inter", sans-serif;
+  line-height: 1.6;
+  overflow-x: hidden;
+}
 
-      ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-      }
-      ::-webkit-scrollbar-track {
-        background: var(--background-secondary);
-      }
-      ::-webkit-scrollbar-thumb {
-        background: #444;
-        border-radius: 4px;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background: #555;
-      }
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--background-primary);
+}
+::-webkit-scrollbar-thumb {
+  background: #333;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
 
-      /* =========================================
-         2. APP STRUCTURE & HERO
-         ========================================= */
-      .app-container {
-        width: 100%;
-        min-height: 100vh;
-        display: flex;
-        flex-direction: column;
-      }
+/* =========================================
+   2. SKELETON LOADERS (PHASE 6)
+   ========================================= */
+@keyframes shimmer {
+  0% { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
+}
 
-      .series-hero-section {
-        position: relative;
-        height: 65vh;
-        min-height: 550px;
-        background-position: top center;
-        background-size: cover;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        padding: 80px 5% 3rem;
-        transition: background-image 0.3s ease;
-      }
+.skeleton {
+  background: linear-gradient(
+    90deg, 
+    rgba(255, 255, 255, 0.03) 25%, 
+    rgba(255, 255, 255, 0.08) 50%, 
+    rgba(255, 255, 255, 0.03) 75%
+  );
+  background-size: 1000px 100%;
+  animation: shimmer 2s infinite linear;
+  border-radius: 8px;
+}
 
-      .hero-overlay {
-        position: absolute;
-        inset: 0;
-        background: linear-gradient(
-          to top,
-          var(--background-primary) 15%,
-          rgba(10, 10, 10, 0.8) 45%,
-          rgba(10, 10, 10, 0.4) 75%,
-          rgba(0, 0, 0, 0.4) 100%
-        );
-        z-index: 1;
-        pointer-events: none;
-      }
+.skeleton-text {
+  height: 1em;
+  width: 100%;
+  margin-bottom: 0.5rem;
+  border-radius: 4px;
+}
 
-      .series-hero-content {
-        position: relative;
-        z-index: 2;
-        width: 100%;
-        display: flex;
-        gap: 3rem;
-        align-items: flex-end;
-        max-width: 1500px;
-        margin: 0 auto;
-      }
+.skeleton-text.short { width: 50%; }
+.skeleton-text.medium { width: 75%; }
+.skeleton-title { height: 3rem; width: 60%; margin-bottom: 1.2rem; }
+.skeleton-poster { width: 100%; height: 100%; position: absolute; inset: 0; }
+.skeleton-ep-card { width: 100%; height: 90px; border-radius: 12px; margin-bottom: 12px; }
 
-      /* Poster */
-      .hero-poster-container {
-        flex-shrink: 0;
-        width: 240px;
-        border-radius: var(--border-radius);
-        overflow: hidden;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        background: var(--background-tertiary);
-        transform: translateY(60px);
-        display: none;
-        z-index: 5;
-      }
-      .hero-poster-img {
-        width: 100%;
-        height: auto;
-        display: block;
-        aspect-ratio: 2/3;
-        object-fit: cover;
-      }
+/* =========================================
+   3. APP STRUCTURE & HERO
+   ========================================= */
+.app-container {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
 
-      .hero-text-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        padding-bottom: 20px;
-        min-width: 0;
-      }
+.series-hero-section {
+  position: relative;
+  height: 65vh;
+  min-height: 550px;
+  background-position: top center;
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 80px 5% 3rem;
+  transition: background-image 0.3s ease;
+}
 
-      .series-title-text {
-        font-size: clamp(2rem, 5vw, 4rem);
-        font-weight: 800;
-        color: var(--text-primary);
-        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
-        line-height: 1.1;
-        margin-bottom: 1.2rem;
-        letter-spacing: -0.03em;
-      }
+.hero-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to top,
+    var(--background-primary) 5%,
+    rgba(10, 10, 10, 0.8) 45%,
+    rgba(10, 10, 10, 0.4) 75%,
+    rgba(0, 0, 0, 0.3) 100%
+  );
+  z-index: 1;
+  pointer-events: none;
+}
 
-      /* Metadata Pills */
-      .hero-metadata-capsules {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-        align-items: center;
-        margin-bottom: 1.8rem;
-        font-size: 0.9rem;
-        font-weight: 600;
-      }
+.series-hero-content {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  display: flex;
+  gap: 3rem;
+  align-items: flex-end;
+  max-width: 1500px;
+  margin: 0 auto;
+}
 
-      .meta-capsule {
-        background: rgba(20, 20, 20, 0.6);
-        border: 1px solid rgba(255, 255, 255, 0.15);
-        padding: 8px 16px;
-        border-radius: 50px;
-        color: #ddd;
-        backdrop-filter: blur(8px);
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-      }
+/* Poster */
+.hero-poster-container {
+  flex-shrink: 0;
+  width: 240px;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
+  border: 1px solid var(--border-color);
+  background: var(--background-tertiary);
+  transform: translateY(60px);
+  display: none;
+  z-index: 5;
+  position: relative;
+}
+.hero-poster-img {
+  width: 100%;
+  height: auto;
+  display: block;
+  aspect-ratio: 2/3;
+  object-fit: cover;
+  position: relative;
+  z-index: 2;
+}
 
-      .rating-pill {
-        padding: 8px 14px;
-        border-radius: 50px;
-        font-weight: 800;
-        text-transform: uppercase;
-        font-size: 0.85rem;
-        background: #333;
-        color: #fff;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-      }
-      .rating-r {
-        background: linear-gradient(135deg, #e53935, #b71c1c);
-      }
-      .rating-pg {
-        background: linear-gradient(135deg, #fb8c00, #e65100);
-      }
-      .rating-g {
-        background: linear-gradient(135deg, #43a047, #1b5e20);
-      }
+.hero-text-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding-bottom: 20px;
+  min-width: 0;
+}
 
-      .studio-text {
-        color: var(--brand-accent);
-        font-weight: 700;
-        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
-      }
+.series-title-text {
+  font-size: clamp(2.2rem, 5vw, 4.5rem);
+  font-weight: 800;
+  color: var(--text-primary);
+  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
+  line-height: 1.1;
+  margin-bottom: 1.2rem;
+  letter-spacing: -0.03em;
+}
 
-      /* Hero Actions */
-      .hero-actions {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 14px;
-      }
+/* Metadata Pills */
+.hero-metadata-capsules {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 2rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
 
-      .hero-watch-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
-        background-color: var(--brand-accent);
-        color: #000;
-        padding: 14px 32px;
-        border-radius: 12px;
-        border: none;
-        font-size: 1.05rem;
-        font-weight: 800;
-        cursor: pointer;
-        box-shadow: 0 4px 20px rgba(255, 149, 0, 0.3);
-        transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-      }
-      .hero-watch-btn:hover {
-        background-color: var(--brand-accent-hover);
-        transform: translateY(-3px) scale(1.02);
-        box-shadow: 0 10px 30px rgba(255, 149, 0, 0.5);
-      }
+.meta-capsule {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 8px 16px;
+  border-radius: 50px;
+  color: #ddd;
+  backdrop-filter: blur(12px); /* Enhanced Glassmorphism */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
 
-      /* RX watch button states */
-    
-        .hero-watch-btn.rx-rated {
-          transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
-                      background-color 0.15s ease;
-        }
+.rating-pill {
+  padding: 8px 14px;
+  border-radius: 50px;
+  font-weight: 800;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  background: #333;
+  color: #fff;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+.rating-r { background: linear-gradient(135deg, #e53935, #b71c1c); }
+.rating-pg { background: linear-gradient(135deg, #fb8c00, #e65100); }
+.rating-g { background: linear-gradient(135deg, #43a047, #1b5e20); }
 
-        .hero-watch-btn.rx-rated:hover {
-          cursor: not-allowed !important; /* The "no selection" cursor */
-          background-color: #ff9500;
-          box-shadow: 0 10px 30px rgba(192, 57, 43, 0.5);
-          transform: translateY(-3px) scale(1.02);
-        }
+.studio-text {
+  color: var(--brand-accent);
+  font-weight: 700;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
+}
 
-      .hero-action-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        background: rgba(255, 255, 255, 0.08);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        color: var(--text-primary);
-        padding: 0 24px;
-        height: 52px;
-        border-radius: 12px;
-        font-size: 0.95rem;
-        font-weight: 600;
-        cursor: pointer;
-        backdrop-filter: blur(10px);
-        transition: all 0.2s ease;
-      }
-      .hero-action-btn:hover {
-        background: rgba(255, 255, 255, 0.2);
-        border-color: #fff;
-        transform: translateY(-2px);
-      }
+/* Hero Actions */
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 14px;
+}
 
-      .back-btn {
-        position: absolute;
-        top: 30px;
-        left: 30px;
-        z-index: 10;
-        background: rgba(0, 0, 0, 0.6);
-        border: 1px solid rgba(255, 255, 255, 0.15);
-        color: #fff;
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        backdrop-filter: blur(5px);
-        transition: transform 0.2s;
-      }
-      .back-btn:hover {
-        transform: scale(1.1);
-        background: rgba(0, 0, 0, 0.8);
-      }
+.hero-watch-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background-color: var(--brand-accent);
+  color: #000;
+  padding: 0 32px;
+  height: 52px;
+  border-radius: 14px;
+  border: none;
+  font-size: 1.05rem;
+  font-weight: 800;
+  cursor: pointer;
+  box-shadow: 0 6px 20px rgba(255, 149, 0, 0.25);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.hero-watch-btn:hover {
+  background-color: var(--brand-accent-hover);
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 10px 30px rgba(255, 149, 0, 0.4);
+}
 
-      /* =========================================
-         3. MAIN CONTENT
-         ========================================= */
-      .main-content {
-        position: relative;
-        padding: 2rem 5%;
-        background-color: var(--background-primary);
-        z-index: 3;
-      }
+/* New Locate Episode Button (Phase 2) */
+.hero-locate-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: var(--text-primary);
+  font-size: 1.2rem;
+  cursor: pointer;
+  backdrop-filter: blur(12px);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.hero-locate-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: #fff;
+  transform: translateY(-3px) scale(1.05);
+  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
+  color: var(--brand-accent);
+}
 
-      .desktop-center-wrapper {
-        max-width: 1500px;
-        margin: 0 auto;
-      }
+/* RX watch button states */
+.hero-watch-btn.rx-rated {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.15s ease;
+}
+.hero-watch-btn.rx-rated:hover {
+  cursor: not-allowed !important;
+  background-color: #ff9500;
+  box-shadow: 0 10px 30px rgba(192, 57, 43, 0.5);
+  transform: translateY(-3px) scale(1.02);
+}
 
-      .series-details-section {
-        margin-top: 2rem;
-        margin-bottom: 3rem;
-      }
+.hero-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  padding: 0 24px;
+  height: 52px;
+  border-radius: 14px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  backdrop-filter: blur(12px);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.hero-action-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px) scale(1.02);
+}
 
-      .details-content-wrapper {
-        position: relative;
-        max-height: 140px;
-        overflow: hidden;
-        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-      .details-content-wrapper::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 80px;
-        background: linear-gradient(
-          to top,
-          var(--background-primary),
-          transparent
-        );
-        pointer-events: none;
-        transition: opacity 0.3s;
-      }
-      .details-content-wrapper.expanded {
-        max-height: 2000px;
-      }
-      .details-content-wrapper.expanded::after {
-        opacity: 0;
-      }
+.back-btn {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #fff;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.back-btn:hover {
+  transform: scale(1.1);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+}
 
-      #series-synopsis {
-        font-size: 1.05rem;
-        color: #ccc;
-        margin-bottom: 1rem;
-        line-height: 1.7;
-      }
+/* =========================================
+   4. MAIN CONTENT
+   ========================================= */
+.main-content {
+  position: relative;
+  padding: 2rem 5%;
+  background-color: var(--background-primary);
+  z-index: 3;
+}
 
-      .series-genres {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-        margin-top: 1.5rem;
-      }
-      .genre-tag {
-        font-size: 0.85rem;
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid var(--border-color);
-        padding: 6px 14px;
-        border-radius: 6px;
-        color: var(--text-secondary);
-      }
+.desktop-center-wrapper {
+  max-width: 1500px;
+  margin: 0 auto;
+}
 
-      .show-more-container {
-        text-align: center;
-        margin-top: 1rem;
-      }
-      .show-more-btn {
-        background: none;
-        border: none;
-        color: var(--text-muted);
-        cursor: pointer;
-        font-weight: 600;
-        font-size: 0.9rem;
-      }
-      .show-more-btn:hover {
-        color: var(--brand-accent);
-      }
+.series-details-section {
+  margin-top: 2rem;
+  margin-bottom: 3rem;
+}
 
-      /* Trailer */
-      .trailer-section {
-        margin-top: 3rem;
-        border-top: 1px solid var(--border-color);
-        padding-top: 2rem;
-        margin-bottom: 3rem;
-      }
-      .trailer-player-container {
-        background: #000;
-        border-radius: 12px;
-        overflow: hidden;
-        aspect-ratio: 16/9;
-        max-width: 900px;
-        margin: 0 auto;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-      }
+.details-content-wrapper {
+  position: relative;
+  max-height: 140px;
+  overflow: hidden;
+  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.details-content-wrapper::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: linear-gradient(
+    to top,
+    var(--background-primary),
+    transparent
+  );
+  pointer-events: none;
+  transition: opacity 0.3s;
+}
+.details-content-wrapper.expanded {
+  max-height: 2000px;
+}
+.details-content-wrapper.expanded::after {
+  opacity: 0;
+}
 
-      /* ORANGE THEME #FF9500 */
-      #video .csPlayer {
-        --playerBg: #000;
-        --startBtnBg: #ff9500;
-        --startBtnIconColor: #fff;
-        --startBtnSize: 70px;
-        --sliderSeekTrackColor: #ff9500;
-        --sliderThumbColor: #ff9500;
-        --sliderLoadedTrackColor: rgba(255, 149, 0, 0.3);
-        --sliderBg: rgba(255, 255, 255, 0.2);
-        --playPauseIconColor: #ff9500;
-        --forwardIconColor: #ff9500;
-        --backwardIconColor: #ff9500;
-        --fullscreenBtnColor: #fff;
-        --settingsBtnColor: #fff;
-        --settingsBg: rgba(20, 20, 20, 0.95);
-        --settingsTextColor: #fff;
-        --settingsInputIconBg: #ff9500;
-        --settingsInputIconColor: #fff;
-      }
+#series-synopsis {
+  font-size: 1.05rem;
+  color: var(--text-secondary);
+  margin-bottom: 1rem;
+  line-height: 1.8;
+}
 
-      /* =========================================
-         4. SECTIONS & SCROLLABLES
-         ========================================= */
-      .section-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 1.5rem;
-        gap: 1rem;
-        flex-wrap: wrap;
-      }
-      .section-title {
-        font-size: 1.5rem;
-        font-weight: 800;
-        color: var(--text-primary);
-        margin-right: auto;
-        letter-spacing: -0.01em;
-      }
+.series-genres {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 1.5rem;
+}
+.genre-tag {
+  font-size: 0.85rem;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-color);
+  padding: 6px 14px;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  transition: all 0.2s;
+}
+.genre-tag:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+}
 
-      /* Episode List Controls */
-      .episode-controls {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        flex-shrink: 0;
-      }
+.show-more-container {
+  text-align: center;
+  margin-top: 1rem;
+}
+.show-more-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: color 0.2s;
+}
+.show-more-btn:hover {
+  color: var(--brand-accent);
+}
 
-      .episode-controls .season-selector-container {
-        min-width: 0;
-      }
-      .episode-controls .season-selector {
-        width: 100%;
-        min-width: 0;
-      }
+/* Trailer */
+.trailer-section {
+  margin-top: 3rem;
+  border-top: 1px solid var(--border-color);
+  padding-top: 2rem;
+  margin-bottom: 3rem;
+}
+.trailer-player-container {
+  background: #000;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  aspect-ratio: 16/9;
+  max-width: 900px;
+  margin: 0 auto;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  border: 1px solid var(--border-color);
+}
 
-      .thumbnail-toggle-btn {
-        width: 44px;
-        height: 44px;
-        border-radius: 10px;
-        background: var(--background-secondary);
-        border: 1px solid var(--border-color);
-        color: var(--text-secondary);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transition: 0.2s;
-      }
-      .thumbnail-toggle-btn:hover,
-      .thumbnail-toggle-btn.active {
-        border-color: var(--brand-accent);
-        color: var(--brand-accent);
-        background: rgba(255, 149, 0, 0.05);
-      }
+/* ORANGE THEME #FF9500 */
+#video .csPlayer {
+  --playerBg: #000;
+  --startBtnBg: #ff9500;
+  --startBtnIconColor: #fff;
+  --startBtnSize: 70px;
+  --sliderSeekTrackColor: #ff9500;
+  --sliderThumbColor: #ff9500;
+  --sliderLoadedTrackColor: rgba(255, 149, 0, 0.3);
+  --sliderBg: rgba(255, 255, 255, 0.2);
+  --playPauseIconColor: #ff9500;
+  --forwardIconColor: #ff9500;
+  --backwardIconColor: #ff9500;
+  --fullscreenBtnColor: #fff;
+  --settingsBtnColor: #fff;
+  --settingsBg: rgba(20, 20, 20, 0.95);
+  --settingsTextColor: #fff;
+  --settingsInputIconBg: #ff9500;
+  --settingsInputIconColor: #fff;
+}
 
-      /* Season Selector */
-      .season-selector-container {
-        position: relative;
-        min-width: 280px;
-        max-width: 390px;
-      }
-      .season-selector {
-        width: 100%;
-        padding: 12px 40px 12px 16px;
-        border-radius: 10px;
-        background: var(--background-secondary);
-        color: var(--text-primary);
-        border: 1px solid var(--border-color);
-        outline: none;
-        appearance: none;
-        font-family: inherit;
-        font-size: 0.95rem;
-        font-weight: 500;
-        cursor: pointer;
-        transition: 0.2s;
-      }
-      .season-selector:hover,
-      .season-selector:focus {
-        border-color: var(--brand-accent);
-      }
-      .season-selector-container::after {
-        content: "\f078";
-        font-family: "Font Awesome 6 Free";
-        font-weight: 900;
-        position: absolute;
-        right: 16px;
-        top: 50%;
-        transform: translateY(-50%);
-        color: var(--brand-accent);
-        pointer-events: none;
-        font-size: 0.8rem;
-      }
+/* =========================================
+   5. EPISODES & SCROLLABLES
+   ========================================= */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.section-title {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin-right: auto;
+  letter-spacing: -0.01em;
+}
 
-      /* Episodes */
-      .episode-list {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        margin-bottom: 3rem;
-      }
+/* Episode List Controls */
+.episode-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
 
-      .episode-item {
-        display: flex;
-        background: var(--background-secondary);
-        border: 1px solid var(--border-color);
-        border-radius: 10px;
-        overflow: hidden;
-        cursor: pointer;
-        transition: 0.2s;
-        /* Changed from fixed height to min-height to fit progress bar */
-        min-height: 90px; 
-        padding-right: 10px;
-      }
-      .episode-item:hover {
-        background: #222;
-        border-color: rgba(255, 255, 255, 0.3);
-        transform: translateY(-2px);
-      }
+.episode-controls .season-selector-container {
+  min-width: 0;
+}
+.episode-controls .season-selector {
+  width: 100%;
+  min-width: 0;
+}
 
-      /* Progress Bar Styles */
-      .episode-progress-wrapper {
-        margin-top: 6px;
-        width: 100%;
-        max-width: 220px;
-      }
-      .ep-progress-track {
-        width: 100%;
-        height: 3px;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 2px;
-        overflow: hidden;
-        margin-bottom: 3px;
-      }
-      .ep-progress-fill {
-        height: 100%;
-        background: var(--brand-accent);
-        border-radius: 2px;
-      }
-      .ep-progress-text {
-        font-size: 0.75rem;
-        color: var(--brand-accent);
-        font-weight: 600;
-        letter-spacing: 0.5px;
-      }
+.layout-toggle-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  backdrop-filter: blur(5px);
+}
+.layout-toggle-btn:hover,
+.layout-toggle-btn.active {
+  border-color: rgba(255, 255, 255, 0.3);
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}
 
-      .episode-thumbnail {
-        width: 160px;
-        background: #000;
-        position: relative;
-        overflow: hidden;
-        flex-shrink: 0;
-        transition: width 0.3s;
-      }
-      .episode-thumbnail img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        opacity: 0.8;
-        transition: transform 0.3s;
-      }
-      .episode-item:hover .episode-thumbnail img {
-        transform: scale(1.05);
-        opacity: 1;
-      }
-      .episode-list.thumbnails-hidden .episode-thumbnail {
-        width: 0;
-      }
+/* Season Selector */
+.season-selector-container {
+  position: relative;
+  min-width: 280px;
+  max-width: 390px;
+}
+.season-selector {
+  width: 100%;
+  padding: 12px 40px 12px 16px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  outline: none;
+  appearance: none;
+  font-family: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  backdrop-filter: blur(5px);
+}
+.season-selector:hover,
+.season-selector:focus {
+  border-color: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.08);
+}
+.season-selector-container::after {
+  content: "\f078";
+  font-family: "Font Awesome 6 Free";
+  font-weight: 900;
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-secondary);
+  pointer-events: none;
+  font-size: 0.8rem;
+}
 
-      .episode-info {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding: 0 20px;
-        min-width: 0;
-      }
-      .episode-title {
-        font-weight: 700;
-        font-size: 1rem;
-        color: #fff;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin-bottom: 4px;
-      }
-      .episode-title-romanji {
-        font-size: 0.85rem;
-        color: var(--brand-accent);
-        font-weight: 500;
-      }
-      .episode-action-buttons {
-        display: flex;
-        align-items: center;
-        padding-right: 20px;
-        opacity: 0.5;
-        transition: 0.2s;
-      }
-      .episode-item:hover .episode-action-buttons {
-        opacity: 1;
-      }
+/* Episodes - Standard List View */
+.episode-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 3rem;
+}
 
-      .episode-item.watched .episode-title {
-        color: var(--text-muted);
-      }
-      .episode-item.watched::before {
-        content: "";
-        width: 4px;
-        background: var(--brand-accent);
-      }
+.episode-item {
+  position: relative;
+  display: flex;
+  background: var(--background-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  min-height: 90px; 
+  padding-right: 10px;
+}
+.episode-item:hover {
+  background: var(--background-tertiary);
+  border-color: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+}
 
-      /* =========================================
-         THEMES SECTION (NEW)
-         ========================================= */
-      .theme-list {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        margin-bottom: 2rem;
-      }
-      .theme-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        background: var(--background-secondary);
-        padding: 12px 16px;
-        border-radius: 8px;
-        border: 1px solid var(--border-color);
-        transition: 0.2s;
-      }
-      .theme-item:hover {
-        border-color: var(--brand-accent);
-        background: rgba(255, 255, 255, 0.05);
-      }
-      
-      .theme-info {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        flex: 1;
-        min-width: 0;
-        margin-right: 16px;
-      }
-      
-      .theme-type {
-        font-size: 0.7rem;
-        color: var(--brand-accent);
-        font-weight: 800;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-      }
-      
-      .theme-title {
-        font-size: 0.95rem;
-        font-weight: 600;
-        color: #fff;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      
-      .theme-actions {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        flex-shrink: 0;
-      }
-      
-      .theme-btn {
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        border: 1px solid rgba(255, 255, 255, 0.15);
-        background: transparent;
-        color: var(--text-secondary);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.2s;
-        font-size: 0.85rem;
-      }
-      
-      .theme-btn:hover {
-        background: #fff;
-        color: #000;
-        border-color: #fff;
-      }
-      
-      .theme-btn.play {
-        border-color: var(--brand-accent);
-        color: var(--brand-accent);
-      }
-      .theme-btn.play:hover {
-        background: var(--brand-accent);
-        color: #000;
-      }
+/* Episode Locate/Target Animation */
+@keyframes target-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.5); border-color: var(--brand-accent); }
+  70% { box-shadow: 0 0 0 15px rgba(255, 149, 0, 0); border-color: rgba(255,255,255,0.3); }
+  100% { box-shadow: 0 0 0 0 rgba(255, 149, 0, 0); border-color: var(--border-color); }
+}
+.episode-item.target-highlight {
+  animation: target-pulse 1.5s ease-out 2;
+  border-color: var(--brand-accent);
+  background: rgba(255, 149, 0, 0.05);
+}
 
-      /* =========================================
-         MOVIE CARD (REDESIGNED)
-         ========================================= */
-      .movie-player-card {
-        background: var(--background-secondary);
-        border: 1px solid var(--border-color);
-        border-radius: 16px;
-        overflow: hidden;
-        position: relative;
-        aspect-ratio: 21 / 9;
-        max-height: 600px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        margin-bottom: 3rem;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
-        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-      }
-      .movie-player-card:hover {
-        transform: scale(1.01);
-        border-color: rgba(255, 255, 255, 0.3);
-      }
-      .movie-backdrop {
-        position: absolute;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        opacity: 0.7;
-        transition: 0.5s;
-      }
-      .movie-player-card:hover .movie-backdrop {
-        opacity: 0.5;
-        transform: scale(1.05);
-      }
-      .movie-player-card::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background: linear-gradient(
-          to top,
-          rgba(0, 0, 0, 0.9) 0%,
-          rgba(0, 0, 0, 0.2) 60%,
-          rgba(0, 0, 0, 0.4) 100%
-        );
-      }
-      .movie-play-overlay {
-        position: relative;
-        z-index: 2;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 20px;
-        text-align: center;
-      }
-      .movie-play-btn {
-        width: 90px;
-        height: 90px;
-        border-radius: 50%;
-        background: rgba(255, 149, 0, 0.9);
-        color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 2.5rem;
-        padding-left: 8px;
-        backdrop-filter: blur(10px);
-        box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.7);
-        animation: pulse-orange 2s infinite;
-        transition: transform 0.3s;
-      }
-      @keyframes pulse-orange {
-        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.7); }
-        70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(255, 149, 0, 0); }
-        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 149, 0, 0); }
-      }
-      .movie-player-card:hover .movie-play-btn {
-        background: #fff;
-        color: var(--brand-accent);
-        animation: none;
-        transform: scale(1.1);
-      }
-      .movie-label {
-        font-size: 1.8rem;
-        font-weight: 800;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
-        pointer-events: none;
-      }
+/* Progress Bar Styles */
+.episode-progress-wrapper {
+  margin-top: 6px;
+  width: 100%;
+  max-width: 220px;
+}
+.ep-progress-track {
+  width: 100%;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: 4px;
+}
+.ep-progress-fill {
+  height: 100%;
+  background: var(--brand-accent);
+  border-radius: 2px;
+}
+.ep-progress-text {
+  font-size: 0.75rem;
+  color: var(--brand-accent);
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
 
-      /* =========================================
-         5. HORIZONTAL SCROLL SECTIONS
-         ========================================= */
-      .horizontal-scroll-section {
-        margin-bottom: 4rem;
-        padding-top: 1.5rem;
-        border-top: 1px solid var(--border-color);
-      }
-      .horizontal-list {
-        display: flex;
-        gap: 1.2rem;
-        overflow-x: auto;
-        padding-bottom: 1.5rem;
-        scroll-behavior: smooth;
-        -webkit-overflow-scrolling: touch;
-        padding-right: 5%;
-      }
-      .character-card {
-        flex: 0 0 150px;
-        background: var(--background-secondary);
-        border: 1px solid var(--border-color);
-        border-radius: 12px;
-        overflow: hidden;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-      }
-      .char-card-imgs { display: flex; height: 140px; }
-      .char-card-imgs img { width: 50%; height: 100%; object-fit: cover; transition: transform 0.3s; }
-      .char-info { padding: 10px; text-align: center; font-size: 0.85rem; border-top: 1px solid var(--border-color); }
-      .char-name { font-weight: 700; display: block; line-height: 1.2; margin-bottom: 4px; color: #fff; }
-      .va-name { color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; }
-      
-      .char-switcher { display: flex; gap: 8px; }
-      .char-lang-btn {
-        background: rgba(255, 255, 255, 0.08);
-        color: #ccc;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        padding: 6px 14px;
-        font-size: 0.8rem;
-        border-radius: 6px;
-        cursor: pointer;
-        font-weight: 700;
-        transition: all 0.2s;
-      }
-      .char-lang-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
-      .char-lang-btn.active { background: #fff; color: #000; border-color: #fff; }
+.episode-thumbnail {
+  width: 160px;
+  background: #000;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+  transition: width 0.3s;
+}
+.episode-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.8;
+  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.episode-item:hover .episode-thumbnail img {
+  transform: scale(1.08);
+  opacity: 1;
+}
 
-      /* TILE CARD */
-      .tile-card {
-        flex: 0 0 160px;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        text-decoration: none;
-        transition: transform 0.2s;
-      }
-      .tile-card:hover { transform: translateY(-6px); }
-      .tile-img-container {
-        width: 100%;
-        aspect-ratio: 2 / 3;
-        border-radius: 10px;
-        overflow: hidden;
-        background: var(--background-tertiary);
-        position: relative;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(255, 255, 255, 0.05);
-      }
-      .tile-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
-      .tile-card:hover .tile-img { transform: scale(1.05); }
-      .tile-tag {
-        position: absolute;
-        top: 8px; left: 8px;
-        background: var(--brand-accent);
-        color: #000;
-        font-size: 0.65rem;
-        padding: 3px 8px;
-        border-radius: 4px;
-        font-weight: 800;
-        text-transform: uppercase;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-      }
-      .tile-title {
-        font-size: 0.9rem;
-        font-weight: 600;
-        color: #ddd;
-        line-height: 1.4;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        transition: color 0.2s;
-      }
-      .tile-card:hover .tile-title { color: #fff; }
+/* Text-only list fallback (Thumbnails completely hidden) */
+.episode-list.thumbnails-hidden .episode-thumbnail {
+  display: none;
+}
+.episode-list.thumbnails-hidden .episode-item {
+  padding: 14px 20px;
+  align-items: center;
+}
+.episode-list.thumbnails-hidden .episode-info {
+  padding: 0;
+}
 
-      /* Mobile Tabs */
-      .tabs-container { display: none; }
+.episode-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 20px;
+  min-width: 0;
+}
+.episode-title {
+  font-weight: 700;
+  font-size: 1rem;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 4px;
+}
 
-      /* =========================================
-         6. MEDIA QUERIES
-         ========================================= */
-      @media (min-width: 1024px) {
-        .series-hero-section { height: 70vh; padding-top: 120px; }
-        .hero-poster-container { display: block; margin-bottom: 100px; z-index: 5; }
-        .series-details-section { margin-top: 5rem; }
-      }
+/* Unwatched Badge */
+.episode-item.unwatched .episode-title::after {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: var(--brand-accent);
+  border-radius: 50%;
+  margin-left: 8px;
+  vertical-align: middle;
+  box-shadow: 0 0 8px rgba(255, 149, 0, 0.6);
+}
 
-      @media (max-width: 1023px) {
-        .series-hero-section { padding-top: 120px; height: auto; min-height: auto; padding-bottom: 2rem; }
-        .hero-poster-container {
-          display: block; width: 180px; transform: none;
-          box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6);
-          border: 1px solid rgba(255, 255, 255, 0.1);
-          background: transparent;
-          margin: 0 auto 1.5rem auto;
-        }
-        .series-hero-content { flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
-        .hero-text-content { width: 100%; align-items: center; }
-        .series-title-text { font-size: 2.2rem; margin-top: 0; text-align: center; line-height: 1.1; }
-        .hero-poster-img { border-radius: 12px; }
-        .hero-metadata-capsules { justify-content: center; gap: 8px; }
-        .meta-capsule { font-size: 0.8rem; padding: 6px 12px; }
-        .hero-actions { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
-        .hero-watch-btn { width: 100%; order: 1; margin-bottom: 0; height: 56px; font-size: 1.1rem; }
-        .hero-action-btn { flex: 1; order: 2; height: 48px; font-size: 0.9rem; }
+.episode-title-romanji {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+.episode-action-buttons {
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+  opacity: 0.4;
+  transition: all 0.3s;
+}
+.episode-item:hover .episode-action-buttons {
+  opacity: 1;
+  transform: scale(1.1);
+  color: var(--brand-accent);
+}
 
-        .episode-controls {
-          width: 100%;
-          flex-wrap: wrap;
-          justify-content: flex-end;
-          gap: 10px;
-        }
-        .episode-controls .season-selector-container {
-          flex: 1 1 170px;
-          max-width: 100%;
-        }
-        .episode-controls .thumbnail-toggle-btn {
-          flex: 0 0 auto;
-        }
+.episode-item.watched .episode-title {
+  color: var(--text-muted);
+}
+.episode-item.watched::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: var(--brand-accent);
+  z-index: 2;
+}
 
-        .tabs-container {
-          display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border-color);
-          margin-bottom: 2rem; overflow-x: auto; padding-left: 5%;
-        }
-        .tab-btn {
-          padding: 1rem 0.5rem; font-size: 1rem; font-weight: 600;
-          color: var(--text-secondary); background: none; border: none;
-          white-space: nowrap; position: relative;
-        }
-        .tab-btn.active { color: var(--text-primary); }
-        .tab-btn.active::after {
-          content: ""; position: absolute; bottom: 0; left: 0; right: 0;
-          height: 3px; background: var(--brand-accent);
-        }
+/* =========================================
+   6. EPISODES - GRID/TILE VIEW (PHASE 3)
+   ========================================= */
+.episode-list.grid-view {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 16px;
+}
 
-        .horizontal-scroll-section.mobile-tab-content { display: none; margin-bottom: 2rem; }
-        .horizontal-scroll-section.mobile-tab-content.active { display: block; }
-        .episode-list-section.mobile-tab-content { display: none; }
-        .episode-list-section.mobile-tab-content.active { display: block; }
+.episode-list.grid-view .episode-item {
+  flex-direction: column;
+  min-height: auto;
+  padding: 0;
+  border-radius: 14px;
+}
+.episode-list.grid-view .episode-thumbnail {
+  width: 100%;
+  aspect-ratio: 16/9;
+}
+.episode-list.grid-view .episode-info {
+  padding: 14px;
+}
+.episode-list.grid-view .episode-title {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.episode-list.grid-view .episode-action-buttons {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(5px);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  justify-content: center;
+  opacity: 0;
+  color: #fff;
+  border: 1px solid rgba(255,255,255,0.1);
+}
+.episode-list.grid-view .episode-item:hover .episode-action-buttons {
+  opacity: 1;
+  background: var(--brand-accent);
+  color: #000;
+  border-color: var(--brand-accent);
+}
+.episode-list.grid-view .episode-item.watched::before {
+  width: 100%;
+  height: 4px;
+  bottom: auto;
+  left: 0;
+  top: 0;
+}
 
-        .movie-player-card { aspect-ratio: 16/9; }
-        .movie-play-btn { width: 70px; height: 70px; font-size: 2rem; }
-        .episode-popup-content { width: 100%; height: 100%; max-width: none; aspect-ratio: unset; border-radius: 0; border: none; box-shadow: none; }
-        .popup-close { top: 20px; right: 20px; }
-      }
+/* Compact Grid View (Thumbnails Hidden) */
+.episode-list.grid-view.thumbnails-hidden {
+  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+  gap: 10px;
+}
+.episode-list.grid-view.thumbnails-hidden .episode-item {
+  flex-shrink: 0; /* Prevent items from shrinking */
+  width: 70px; /* Set a fixed width based on minmax from grid */
+  justify-content: center;
+  align-items: center;
+  padding: 12px 6px;
+  min-height: 44px;
+  text-align: center;
+  border-radius: 10px;
+}
+.episode-list.grid-view.thumbnails-hidden .episode-info {
+  padding: 0;
+}
+.episode-list.grid-view.thumbnails-hidden .episode-title {
+  font-size: 0.9rem;
+  margin: 0;
+  white-space: nowrap;
+}
+.episode-list.grid-view.thumbnails-hidden .episode-title {
+  display: none; /* Hide the main title */
+}
+.episode-list.grid-view.thumbnails-hidden .episode-title-romanji {
+  font-size: 0.9rem; /* Match the desired font size */
+  margin: 0;
+  white-space: nowrap;
+  display: block; /* Make the romanji title visible */
+  color: var(--text-primary); /* Ensure it's visible, not muted */
+  font-weight: 700; /* Make it bolder */
+}
+.episode-list.grid-view.thumbnails-hidden .episode-progress-wrapper,
+.episode-list.grid-view.thumbnails-hidden .episode-action-buttons {
+  display: none;
+}
+.episode-list.grid-view.thumbnails-hidden .episode-item.watched::before {
+  display: none;
+}
+.episode-list.grid-view.thumbnails-hidden .episode-item.watched {
+  opacity: 0.5;
+  background: transparent;
+}
 
-      .episode-popup-overlay {
-        position: fixed; inset: 0; background: none; z-index: 9999;
-        display: none; align-items: center; justify-content: center;
-        backdrop-filter: blur(10px); margin: 15px; border-radius: 12px;
-      }
-      .episode-popup-overlay.active { display: flex; }
-      .episode-popup-content {
-        width: 100%; max-width: 1300px; aspect-ratio: 16/9;
-        background: #000; position: relative; border-radius: 12px;
-        overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
-        border: 1px solid var(--border-color);
-      }
-      .popup-close {
-        position: absolute; top: 15px; right: 15px; z-index: 20; color: #fff;
-        width: 40px; height: 40px; border-radius: 50%;
-        background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.1);
-        cursor: pointer; display: flex; align-items: center; justify-content: center;
-        font-size: 1.1rem; backdrop-filter: blur(4px); transition: all 0.2s;
-      }
-      .popup-close:hover { background: #fff; color: #000; transform: rotate(90deg); }
-      iframe { width: 100%; height: 100%; border: none; }
 
-      /* =========================================
-         7. RX GATE MODAL
-         ========================================= */
-      .rx-gate-overlay {
-        position: fixed;
-        inset: 0;
-        z-index: 99999;
-        background: rgba(0, 0, 0, 0.97);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 2rem;
-        backdrop-filter: blur(20px);
-        opacity: 0;
-        transition: opacity 0.3s ease;
-        pointer-events: none;
-      }
-      .rx-gate-overlay.visible {
-        opacity: 1;
-        pointer-events: all;
-      }
-      .rx-gate-card {
-        background: var(--background-secondary);
-        border: 1px solid rgba(192, 57, 43, 0.4);
-        border-radius: 20px;
-        padding: 3rem 2.5rem;
-        max-width: 480px;
-        width: 100%;
-        text-align: center;
-        box-shadow: 0 0 60px rgba(192, 57, 43, 0.15), 0 20px 60px rgba(0,0,0,0.8);
-        transform: translateY(20px) scale(0.97);
-        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
-        opacity: 0;
-      }
-      .rx-gate-overlay.visible .rx-gate-card {
-        transform: translateY(0) scale(1);
-        opacity: 1;
-      }
-      .rx-gate-icon {
-        font-size: 3.5rem;
-        margin-bottom: 1.2rem;
-        display: block;
-        line-height: 1;
-      }
-      .rx-gate-badge {
-        display: inline-block;
-        background: linear-gradient(135deg, #e53935, #b71c1c);
-        color: #fff;
-        font-size: 0.75rem;
-        font-weight: 900;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        padding: 5px 14px;
-        border-radius: 50px;
-        margin-bottom: 1.4rem;
-      }
-      .rx-gate-title {
-        font-size: 1.5rem;
-        font-weight: 800;
-        color: var(--text-primary);
-        margin-bottom: 0.8rem;
-        letter-spacing: -0.02em;
-        line-height: 1.2;
-      }
-      .rx-gate-subtitle {
-        font-size: 0.95rem;
-        color: var(--text-secondary);
-        line-height: 1.6;
-        margin-bottom: 2rem;
-      }
-      .rx-gate-actions {
-        display: flex;
-        gap: 12px;
-        justify-content: center;
-        flex-wrap: wrap;
-      }
-      .rx-gate-btn-yes {
-        flex: 1;
-        min-width: 140px;
-        padding: 13px 24px;
-        border-radius: 10px;
-        border: 1px solid rgba(192, 57, 43, 0.5);
-        background: rgba(192, 57, 43, 0.15);
-        color: #e57373;
-        font-size: 0.95rem;
-        font-weight: 700;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        font-family: inherit;
-      }
-      .rx-gate-btn-yes:hover {
-        background: rgba(192, 57, 43, 0.3);
-        border-color: #e53935;
-        color: #fff;
-        transform: translateY(-2px);
-      }
-      .rx-gate-btn-no {
-        flex: 1;
-        min-width: 140px;
-        padding: 13px 24px;
-        border-radius: 10px;
-        border: none;
-        background: var(--brand-accent);
-        color: #000;
-        font-size: 0.95rem;
-        font-weight: 800;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        font-family: inherit;
-      }
-      .rx-gate-btn-no:hover {
-        background: var(--brand-accent-hover);
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(255,149,0,0.4);
-      }
-      .rx-gate-disclaimer {
-        margin-top: 1.5rem;
-        font-size: 0.75rem;
-        color: var(--text-muted);
-        line-height: 1.5;
-      }
+/* =========================================
+   7. THEMES SECTION
+   ========================================= */
+.theme-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 2rem;
+}
+.theme-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--background-secondary);
+  padding: 14px 20px;
+  border-radius: 14px;
+  border: 1px solid var(--border-color);
+  transition: all 0.3s;
+}
+.theme-item:hover {
+  border-color: rgba(255, 255, 255, 0.2);
+  background: var(--background-tertiary);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+}
+
+.theme-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+  margin-right: 16px;
+}
+
+.theme-type {
+  font-size: 0.75rem;
+  color: var(--brand-accent);
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.theme-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.theme-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.theme-btn {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+  font-size: 0.9rem;
+  backdrop-filter: blur(5px);
+}
+
+.theme-btn:hover {
+  background: #fff;
+  color: #000;
+  border-color: #fff;
+  transform: scale(1.1);
+}
+
+.theme-btn.play {
+  border-color: var(--brand-accent);
+  color: var(--brand-accent);
+  background: rgba(255, 149, 0, 0.1);
+}
+.theme-btn.play:hover {
+  background: var(--brand-accent);
+  color: #000;
+  border-color: var(--brand-accent);
+  box-shadow: 0 0 15px rgba(255, 149, 0, 0.4);
+}
+
+/* =========================================
+   8. MOVIE CARD
+   ========================================= */
+.movie-player-card {
+  background: var(--background-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 20px;
+  overflow: hidden;
+  position: relative;
+  aspect-ratio: 21 / 9;
+  max-height: 600px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin-bottom: 3rem;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.movie-player-card:hover {
+  transform: scale(1.02);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.movie-backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.6;
+  transition: 0.5s;
+}
+.movie-player-card:hover .movie-backdrop {
+  opacity: 0.4;
+  transform: scale(1.05);
+}
+.movie-player-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.9) 0%,
+    rgba(0, 0, 0, 0.2) 60%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+}
+.movie-play-overlay {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  text-align: center;
+}
+.movie-play-btn {
+  width: 90px;
+  height: 90px;
+  border-radius: 50%;
+  background: rgba(255, 149, 0, 0.9);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2.5rem;
+  padding-left: 8px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.7);
+  animation: pulse-orange 2s infinite;
+  transition: transform 0.3s;
+}
+@keyframes pulse-orange {
+  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.7); }
+  70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(255, 149, 0, 0); }
+  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 149, 0, 0); }
+}
+.movie-player-card:hover .movie-play-btn {
+  background: #fff;
+  color: var(--brand-accent);
+  animation: none;
+  transform: scale(1.1);
+}
+.movie-label {
+  font-size: 1.8rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
+  pointer-events: none;
+}
+
+/* =========================================
+   9. HORIZONTAL SCROLL SECTIONS
+   ========================================= */
+.horizontal-scroll-section {
+  margin-bottom: 4rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border-color);
+}
+.horizontal-list {
+  display: flex;
+  gap: 1.2rem;
+  overflow-x: auto;
+  padding-bottom: 1.5rem;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  padding-right: 5%;
+}
+
+/* Characters */
+.character-card {
+  flex: 0 0 160px;
+  background: var(--background-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+  transition: transform 0.3s;
+}
+.character-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(255,255,255,0.2);
+}
+.char-card-imgs { display: flex; height: 150px; }
+.char-card-imgs img { width: 50%; height: 100%; object-fit: cover; }
+.char-info { padding: 12px; text-align: center; font-size: 0.85rem; border-top: 1px solid var(--border-color); }
+.char-name { font-weight: 700; display: block; line-height: 1.2; margin-bottom: 4px; color: #fff; }
+.va-name { color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; }
+
+.char-switcher { display: flex; gap: 8px; }
+.char-lang-btn {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-secondary);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 8px 16px;
+  font-size: 0.85rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 700;
+  transition: all 0.3s;
+  backdrop-filter: blur(5px);
+}
+.char-lang-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
+.char-lang-btn.active { background: #fff; color: #000; border-color: #fff; }
+
+/* TILE CARD */
+.tile-card {
+  flex: 0 0 170px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  text-decoration: none;
+  transition: transform 0.3s;
+}
+.tile-card:hover { transform: translateY(-6px); }
+.tile-img-container {
+  width: 100%;
+  aspect-ratio: 2 / 3;
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--background-tertiary);
+  position: relative;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+.tile-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
+.tile-card:hover .tile-img { transform: scale(1.08); }
+.tile-tag {
+  position: absolute;
+  top: 10px; left: 10px;
+  background: var(--brand-accent);
+  color: #000;
+  font-size: 0.7rem;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-weight: 800;
+  text-transform: uppercase;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+}
+.tile-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #ddd;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  transition: color 0.3s;
+}
+.tile-card:hover .tile-title { color: #fff; }
+
+/* Mobile Tabs */
+.tabs-container { display: none; }
+
+/* =========================================
+   10. MEDIA QUERIES
+   ========================================= */
+@media (min-width: 1024px) {
+  .series-hero-section { height: 70vh; padding-top: 120px; }
+  .hero-poster-container { display: block; margin-bottom: 100px; z-index: 5; }
+  .series-details-section { margin-top: 5rem; }
+}
+
+@media (max-width: 1023px) {
+  .series-hero-section { padding-top: 120px; height: auto; min-height: auto; padding-bottom: 2rem; }
+  .hero-poster-container {
+    display: block; width: 180px; transform: none;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: transparent;
+    margin: 0 auto 1.5rem auto;
+  }
+  .series-hero-content { flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
+  .hero-text-content { width: 100%; align-items: center; }
+  .series-title-text { font-size: 2.2rem; margin-top: 0; text-align: center; line-height: 1.1; }
+  .hero-poster-img { border-radius: 14px; }
+  .hero-metadata-capsules { justify-content: center; gap: 8px; }
+  .meta-capsule { font-size: 0.8rem; padding: 6px 12px; }
+  
+  .hero-actions { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
+  .hero-watch-btn { width: 100%; order: 1; margin-bottom: 0; height: 56px; font-size: 1.1rem; }
+  .hero-locate-btn { flex: none; order: 2; height: 50px; width: 50px; }
+  .hero-action-btn { flex: 1; order: 3; height: 50px; font-size: 0.9rem; }
+
+  .episode-controls {
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+  .episode-controls .season-selector-container {
+    flex: 1 1 170px;
+    max-width: 100%;
+  }
+
+  .tabs-container {
+    display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border-color);
+    margin-bottom: 2rem; overflow-x: auto; padding-left: 5%;
+  }
+  .tab-btn {
+    padding: 1rem 0.5rem; font-size: 1rem; font-weight: 600;
+    color: var(--text-secondary); background: none; border: none;
+    white-space: nowrap; position: relative; transition: color 0.3s;
+  }
+  .tab-btn.active { color: var(--text-primary); }
+  .tab-btn.active::after {
+    content: ""; position: absolute; bottom: 0; left: 0; right: 0;
+    height: 3px; background: var(--brand-accent); border-radius: 3px 3px 0 0;
+  }
+
+  .horizontal-scroll-section.mobile-tab-content { display: none; margin-bottom: 2rem; }
+  .horizontal-scroll-section.mobile-tab-content.active { display: block; }
+  .episode-list-section.mobile-tab-content { display: none; }
+  .episode-list-section.mobile-tab-content.active { display: block; }
+
+  .movie-player-card { aspect-ratio: 16/9; }
+  .movie-play-btn { width: 70px; height: 70px; font-size: 2rem; }
+  .episode-popup-content { width: 100%; height: 100%; max-width: none; aspect-ratio: unset; border-radius: 0; border: none; box-shadow: none; }
+  .popup-close { top: 20px; right: 20px; }
+}
+
+/* =========================================
+   11. POPUP / MODALS
+   ========================================= */
+.episode-popup-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 9999;
+  display: none; align-items: center; justify-content: center;
+  backdrop-filter: blur(15px); margin: 0; border-radius: 0;
+}
+.episode-popup-overlay.active { display: flex; }
+.episode-popup-content {
+  width: 95%; max-width: 1400px; aspect-ratio: 16/9;
+  background: #000; position: relative; border-radius: 20px;
+  overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+.popup-close {
+  position: absolute; top: 20px; right: 20px; z-index: 20; color: #fff;
+  width: 44px; height: 44px; border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.2);
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  font-size: 1.2rem; backdrop-filter: blur(8px); transition: all 0.3s;
+}
+.popup-close:hover { background: #fff; color: #000; transform: rotate(90deg) scale(1.1); }
+iframe { width: 100%; height: 100%; border: none; }
+
+/* =========================================
+   12. RX GATE MODAL (PHASE 1 MODERNIZATION)
+   ========================================= */
+.rx-gate-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  background: rgba(0, 0, 0, 0.4);
+  /* Heavy blur and dim */
+  backdrop-filter: blur(25px) brightness(0.3);
+  -webkit-backdrop-filter: blur(25px) brightness(0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
+}
+.rx-gate-overlay.visible {
+  opacity: 1;
+  pointer-events: all;
+}
+.rx-gate-card {
+  background: rgba(20, 20, 20, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+  padding: 3.5rem 2.5rem;
+  max-width: 480px;
+  width: 100%;
+  text-align: center;
+  /* Subtle crimson glow */
+  box-shadow: 0 20px 60px rgba(192, 57, 43, 0.15), 0 0 100px rgba(0,0,0,0.8);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  transform: translateY(40px) scale(0.9);
+  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
+  opacity: 0;
+}
+.rx-gate-overlay.visible .rx-gate-card {
+  transform: translateY(0) scale(1);
+  opacity: 1;
+}
+.rx-gate-icon {
+  font-size: 3.5rem;
+  margin-bottom: 1.2rem;
+  display: block;
+  line-height: 1;
+}
+.rx-gate-badge {
+  display: inline-block;
+  background: linear-gradient(135deg, rgba(229, 57, 53, 0.2), rgba(183, 28, 28, 0.2));
+  border: 1px solid rgba(229, 57, 53, 0.3);
+  color: #ff5252;
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  padding: 6px 16px;
+  border-radius: 50px;
+  margin-bottom: 1.6rem;
+}
+.rx-gate-title {
+  font-size: 1.6rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin-bottom: 0.8rem;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+.rx-gate-subtitle {
+  font-size: 0.95rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: 2.5rem;
+}
+.rx-gate-actions {
+  display: flex;
+  gap: 14px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.rx-gate-btn-yes {
+  flex: 1;
+  min-width: 140px;
+  padding: 14px 24px;
+  border-radius: 14px;
+  border: 1px solid rgba(192, 57, 43, 0.3);
+  background: rgba(192, 57, 43, 0.1);
+  color: #e57373;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  font-family: inherit;
+}
+.rx-gate-btn-yes:hover {
+  background: rgba(192, 57, 43, 0.25);
+  border-color: #e53935;
+  color: #fff;
+  transform: translateY(-2px);
+}
+.rx-gate-btn-no {
+  flex: 1;
+  min-width: 140px;
+  padding: 14px 24px;
+  border-radius: 14px;
+  border: none;
+  background: var(--brand-accent);
+  color: #000;
+  font-size: 0.95rem;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  font-family: inherit;
+}
+.rx-gate-btn-no:hover {
+  background: var(--brand-accent-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(255,149,0,0.35);
+}
+.rx-gate-disclaimer {
+  margin-top: 2rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
     </style>
   </head>
   <body>
-    <div class="app-container">
-      <button id="back-button" class="back-btn" style="display: none">
-        <i class="fas fa-arrow-left"></i>
-      </button>
+  <div class="app-container">
+    <!-- Back Button -->
+    <button id="back-button" class="back-btn" style="display: none">
+      <i class="fas fa-arrow-left"></i>
+    </button>
 
-      <header class="series-hero-section">
-        <div class="series-hero-content">
-          <div class="hero-poster-container">
-            <img id="hero-poster-img" class="hero-poster-img" src="" alt="Poster" />
+    <!-- Hero Section -->
+    <header class="series-hero-section" id="hero-section">
+      <div class="series-hero-content">
+        <!-- Poster with Skeleton -->
+        <div class="hero-poster-container" id="poster-container">
+          <div class="skeleton skeleton-poster" id="poster-skeleton"></div>
+          <img id="hero-poster-img" class="hero-poster-img" src="" alt="Poster" style="display: none;" />
+        </div>
+
+        <div class="hero-text-content">
+          <!-- Title Skeleton -->
+          <div id="title-skeleton" class="skeleton skeleton-title"></div>
+          <h1 class="series-title-text" id="series-title" style="display: none;"></h1>
+
+          <!-- Meta Skeletons -->
+          <div class="hero-metadata-capsules" id="meta-container">
+            <div class="skeleton skeleton-text" style="width: 300px; height: 35px; border-radius: 50px;"></div>
           </div>
 
-          <div class="hero-text-content">
-            <h1 class="series-title-text"></h1>
-            <div class="hero-metadata-capsules">
-              <span id="meta-rating" class="rating-pill" style="display: none"></span>
-              <span class="meta-capsule"><i class="fas fa-calendar"></i> <span id="meta-year"></span></span>
-              <span class="meta-capsule"><i class="fas fa-tv"></i> <span id="meta-type"></span></span>
-              <span class="meta-capsule" id="meta-status-container"><span id="meta-status"></span></span>
-              <span class="studio-text" id="meta-studio"></span>
-            </div>
+          <!-- Hero Actions -->
+          <div class="hero-actions">
+            <!-- Main Play -->
+            <button id="hero-watch-btn" class="hero-watch-btn" style="display: none">
+              <i class="fas fa-play"></i> <span>Start Watching</span>
+            </button>
 
-            <div class="hero-actions">
-              <button id="hero-watch-btn" class="hero-watch-btn" style="display: none">
-                <i class="fas fa-play"></i> <span>Start Watching</span>
-              </button>
-              <button class="hero-action-btn"><i class="fas fa-bookmark"></i> Add to List</button>
-              <button class="hero-action-btn"><i class="fas fa-download"></i> Export</button>
-            </div>
+            <!-- Locate Episode (Phase 2) -->
+            <button id="hero-locate-btn" class="hero-locate-btn" title="Jump to Current Episode" style="display: none;">
+              <i class="fas fa-crosshairs"></i>
+            </button>
+
+            <button class="hero-action-btn"><i class="fas fa-bookmark"></i> <span>Add to List</span></button>
+            <button class="hero-action-btn"><i class="fas fa-download"></i> <span>Export</span></button>
           </div>
         </div>
-        <div class="hero-overlay"></div>
-      </header>
-
-      <main class="main-content">
-        <div class="desktop-center-wrapper">
-          <section class="series-details-section">
-            <div id="details-content-wrapper" class="details-content-wrapper">
-              <p id="series-synopsis"></p>
-              <div class="series-genres"></div>
-            </div>
-            <div class="show-more-container">
-              <button id="show-more-btn" class="show-more-btn">
-                Show More <i class="fas fa-chevron-down"></i>
-              </button>
-            </div>
-
-            <!-- Trailer -->
-            <div id="trailer-section" class="trailer-section">
-                <h3 class="section-title" style="margin-bottom: 1rem; font-size: 1.2rem">Trailer</h3>
-                <div id="trailer-player" class="trailer-player-container">
-                <div id="video"></div>
-                </div>
-            </div>
-
-            <!-- Mobile Tabs -->
-            <div class="tabs-container">
-                <button class="tab-btn active" data-tab="episodes">Episodes</button>
-                <button class="tab-btn" data-tab="themes">Music</button> <!-- NEW -->
-                <button class="tab-btn" data-tab="related">Related</button>
-                <button class="tab-btn" data-tab="recommendations">Recs</button>
-            </div>
-
-            <div class="content-flow">
-                <!-- 1. Episodes -->
-                <section id="tab-panel-episodes" class="episode-list-section mobile-tab-content active">
-                <div class="section-header">
-                    <h2 class="section-title">Episodes</h2>
-                    <div class="episode-controls">
-                    <div class="season-selector-container" style="display: none">
-                        <select id="season-selector" class="season-selector"></select>
-                    </div>
-                    <button id="thumbnail-toggle-btn" class="thumbnail-toggle-btn">
-                        <i class="fas fa-image"></i>
-                    </button>
-                    </div>
-                </div>
-
-                <div class="episode-list" id="episode-list-container"></div>
-
-                <div id="movie-player-card" class="movie-player-card" style="display: none">
-                    <img id="movie-card-backdrop" class="movie-backdrop" src="" alt="Backdrop" />
-                    <div class="movie-play-overlay">
-                    <div class="movie-play-btn"><i class="fas fa-play"></i></div>
-                    <span class="movie-label">Play Movie</span>
-                    </div>
-                </div>
-                <div id="episodes-pagination" style="display: flex; justify-content: center; margin-top: 2rem"></div>
-                </section>
-
-                <!-- 2. Characters -->
-                <section class="characters-section horizontal-scroll-section" id="characters-section" style="display: none">
-                <div class="section-header">
-                    <h3 class="section-title">Characters</h3>
-                    <div class="char-switcher">
-                    <button class="char-lang-btn active" onclick="changeCharLang('JAPANESE', this)">JP</button>
-                    <button class="char-lang-btn" onclick="changeCharLang('ENGLISH', this)">EN</button>
-                    </div>
-                </div>
-                <div class="characters-list horizontal-list" id="characters-list"></div>
-                </section>
-                
-                <!-- 3. Themes (NEW) -->
-                <section id="tab-panel-themes" class="horizontal-scroll-section mobile-tab-content">
-                    <h3 class="section-title" style="margin-bottom: 1rem">Themes</h3>
-                    <div id="themes-list-container" class="theme-list">
-                         <!-- Themes injected here -->
-                         <div class="text-gray-500">Loading music...</div>
-                    </div>
-                </section>
-
-                <!-- 4. Related -->
-                <section id="tab-panel-related" class="horizontal-scroll-section mobile-tab-content">
-                <h3 class="section-title" style="margin-bottom: 1rem">Related</h3>
-                <div id="related-container" class="horizontal-list"></div>
-                </section>
-
-                <!-- 5. Recommendations -->
-                <section id="tab-panel-recommendations" class="horizontal-scroll-section mobile-tab-content">
-                <h3 class="section-title" style="margin-bottom: 1rem">Recommendations</h3>
-                <div id="recommendations-grid" class="horizontal-list"></div>
-                </section>
-            </div>
-        </div>
-      </main>
-    </div>
-
-    <!-- Popup -->
-    <div id="episode-popup-overlay" class="episode-popup-overlay">
-      <div class="episode-popup-content">
-        <button class="popup-close"><i class="fas fa-times"></i></button>
-        <iframe id="episode-popup-iframe" src="" allowfullscreen></iframe>
       </div>
-    </div>
+      <div class="hero-overlay"></div>
+    </header>
 
-    <!-- RX Gate Modal -->
-    <div id="rx-gate-overlay" class="rx-gate-overlay">
-      <div class="rx-gate-card">
-        <div class="rx-gate-badge">You know, I really thought you would do better</div>
-        <h2 class="rx-gate-title">Are you sure about this?</h2>
-        <div class="rx-gate-actions">
-          <button class="rx-gate-btn-yes" id="rx-gate-yes">Yes, I'm sure</button>
+    <main class="main-content">
+      <div class="desktop-center-wrapper">
+        
+        <!-- Synopsis Section -->
+        <section class="series-details-section">
+          <div id="details-content-wrapper" class="details-content-wrapper">
+            <div id="synopsis-skeleton">
+              <div class="skeleton skeleton-text"></div>
+              <div class="skeleton skeleton-text"></div>
+              <div class="skeleton skeleton-text medium"></div>
+            </div>
+            <p id="series-synopsis" style="display: none;"></p>
+            <div class="series-genres" id="genres-container"></div>
+          </div>
+          <div class="show-more-container">
+            <button id="show-more-btn" class="show-more-btn">
+              Show More <i class="fas fa-chevron-down"></i>
+            </button>
+          </div>
+
+          <!-- Trailer -->
+          <div id="trailer-section" class="trailer-section" style="display: none;">
+            <h3 class="section-title" style="margin-bottom: 1.5rem; font-size: 1.2rem; opacity: 0.8;">Official Trailer</h3>
+            <div id="trailer-player" class="trailer-player-container">
+              <div id="video"></div>
+            </div>
+          </div>
+
+          <!-- Tabs (Mobile Only) -->
+          <div class="tabs-container">
+            <button class="tab-btn active" data-tab="episodes">Episodes</button>
+            <button class="tab-btn" data-tab="themes">Music</button>
+            <button class="tab-btn" data-tab="related">Related</button>
+            <button class="tab-btn" data-tab="recommendations">Recs</button>
+          </div>
+
+          <div class="content-flow">
+            <!-- 1. Episodes List -->
+            <section id="tab-panel-episodes" class="episode-list-section mobile-tab-content active">
+              <div class="section-header">
+                <h2 class="section-title">Episodes</h2>
+                <div class="episode-controls">
+                  <!-- Season Dropdown -->
+                  <div class="season-selector-container" id="season-selector-wrapper" style="display: none">
+                    <select id="season-selector" class="season-selector"></select>
+                  </div>
+                  
+                  <!-- Layout Toggle Buttons (Phase 3) -->
+                  <button id="grid-toggle-btn" class="layout-toggle-btn" title="Toggle Grid/List View">
+                    <i class="fas fa-th-large"></i>
+                  </button>
+                  <button id="thumbnail-toggle-btn" class="layout-toggle-btn" title="Show/Hide Thumbnails">
+                    <i class="fas fa-image"></i>
+                  </button>
+                </div>
+              </div>
+
+              <!-- Episode List Container (Grid-view or List-view handled by JS) -->
+              <div class="episode-list" id="episode-list-container">
+                <!-- Skeleton placeholders for episodes -->
+                <div class="skeleton skeleton-ep-card"></div>
+                <div class="skeleton skeleton-ep-card"></div>
+                <div class="skeleton skeleton-ep-card"></div>
+                <div class="skeleton skeleton-ep-card"></div>
+              </div>
+
+              <!-- Movie Mode Display -->
+              <div id="movie-player-card" class="movie-player-card" style="display: none">
+                <img id="movie-card-backdrop" class="movie-backdrop" src="" alt="Backdrop" />
+                <div class="movie-play-overlay">
+                  <div class="movie-play-btn"><i class="fas fa-play"></i></div>
+                  <span class="movie-label">Play Movie</span>
+                </div>
+              </div>
+
+              <div id="episodes-pagination" style="display: flex; justify-content: center; margin-top: 2rem"></div>
+            </section>
+
+            <!-- 2. Characters -->
+            <section class="characters-section horizontal-scroll-section" id="characters-section" style="display: none">
+              <div class="section-header">
+                <h3 class="section-title">Characters</h3>
+                <div class="char-switcher">
+                  <button class="char-lang-btn active" data-lang="JAPANESE">JP</button>
+                  <button class="char-lang-btn" data-lang="ENGLISH">EN</button>
+                </div>
+              </div>
+              <div class="characters-list horizontal-list" id="characters-list"></div>
+            </section>
+
+            <!-- 3. Themes / Music -->
+            <section id="tab-panel-themes" class="horizontal-scroll-section mobile-tab-content">
+              <h3 class="section-title" style="margin-bottom: 1.5rem">Music Themes</h3>
+              <div id="themes-list-container" class="theme-list">
+                <div class="skeleton skeleton-ep-card" style="height: 60px;"></div>
+                <div class="skeleton skeleton-ep-card" style="height: 60px;"></div>
+              </div>
+            </section>
+
+            <!-- 4. Related Series -->
+            <section id="tab-panel-related" class="horizontal-scroll-section mobile-tab-content">
+              <h3 class="section-title" style="margin-bottom: 1.5rem">Related Content</h3>
+              <div id="related-container" class="horizontal-list"></div>
+            </section>
+
+            <!-- 5. Recommendations -->
+            <section id="tab-panel-recommendations" class="horizontal-scroll-section mobile-tab-content">
+              <h3 class="section-title" style="margin-bottom: 1.5rem">You Might Also Like</h3>
+              <div id="recommendations-grid" class="horizontal-list"></div>
+            </section>
+          </div>
         </div>
       </div>
+    </main>
+  </div>
+
+  <!-- Video Popup -->
+  <div id="episode-popup-overlay" class="episode-popup-overlay">
+    <div class="episode-popup-content">
+      <button class="popup-close" title="Close Player"><i class="fas fa-times"></i></button>
+      <iframe id="episode-popup-iframe" src="" allowfullscreen></iframe>
     </div>
+  </div>
 
-    <script src="https://www.youtube.com/iframe_api"></script>
+  <!-- RX Gate Modal (Phase 1 Modernized) -->
+  <div id="rx-gate-overlay" class="rx-gate-overlay">
+    <div class="rx-gate-card">
+      <div class="rx-gate-badge">Restricted Content</div>
+      <h2 class="rx-gate-title">Mature Audience Only</h2>
+      <p class="rx-gate-subtitle">This series contains adult themes. By continuing, you confirm you are of legal age and wish to proceed.</p>
+      <div class="rx-gate-actions">
+        <button class="rx-gate-btn-no" id="rx-gate-no">Take Me Back</button>
+        <button class="rx-gate-btn-yes" id="rx-gate-yes">Yes, I'm Sure</button>
+      </div>
+      <p class="rx-gate-disclaimer">I know, I really thought you would do better...</p>
+    </div>
+  </div>
 
+  <!-- JS Scripts are placed here as usual -->
+  <script src="https://www.youtube.com/iframe_api"></script>
 
-    <script>
-      let currentMalId = new URLSearchParams(window.location.search).get("id");
-      const extensionIp = localStorage.getItem("extension_server_ip") || "localhost";
-      let serverUrl = ``;
+   <script>
+  // --- CONFIG & STATE ---
+  const urlParams = new URLSearchParams(window.location.search);
+  const currentMalId = urlParams.get("id");
+  const extensionIp = localStorage.getItem("extension_server_ip") || "localhost";
+  const serverUrl = ``; // Assumes same-origin or configured proxy
+  const THEMES_API = serverUrl + "/api/themes";
+
+  let animeDetails = {};
+  let episodesData = [];
+  let characterData = [];
+  let isMovie = false;
+  let isRxRated = false;
+  let rxGateAccepted = false;
+
+  // Layout State (Phase 3)
+  let currentLayout = localStorage.getItem("animex_layout") || "list-view"; // list-view or grid-view
+  let hideThumbnails = localStorage.getItem("hideThumbnails") === "true";
+  let currentEpRange = [1, 100];
+
+  // Watch History
+  let localWatchHistory = JSON.parse(localStorage.getItem("animex_watch_history") || "{}");
+
+  // --- INITIALIZATION ---
+  document.addEventListener("DOMContentLoaded", () => {
+    if (!currentMalId) return;
+
+    // Back button visibility
+    const isAnime = urlParams.get("anime") === "true";
+
+    initLayoutButtons();
+    initTabSystem();
+    initRxGate();
+    loadData();
+
+    // Show More Synopsis
+    document.getElementById("show-more-btn").onclick = () => {
+      document.getElementById("details-content-wrapper").classList.toggle("expanded");
+    };
+
+    // Close Popup
+    document.querySelector(".popup-close").onclick = () => {
+      closePlayerPopup();
+    };
+  });
+
+  // --- CORE DATA LOADING ---
+  async function loadData() {
+    toggleSkeletons(true);
+    try {
+      // 1. Fetch Anime Details (Jikan)
+      const detRes = await fetch(`/proxy?url=https://api.jikan.moe/v4/anime/${currentMalId}/full`);
+      const resJson = await detRes.json();
+      animeDetails = resJson.data;
       
-      // Assumes the Python backend is available at port 7275 on the extension server or localhost.
-      const THEMES_API = serverUrl + "/api/themes";
+      if (!animeDetails) throw new Error("Anime not found");
 
-      let episodesData = [];
-      let currentEpRange = [1, 100];
-      let localWatchHistory = JSON.parse(localStorage.getItem("animex_watch_history") || "{}");
-      let characterData = [];
-      let animeDetails = {}; // Store for music player
-      let isMovie = false;
+      renderDetails(animeDetails);
 
-      // RX rating state
-      let isRxRated = false;
-      let rxGateAccepted = false; // tracks if user already confirmed in this session
+      // 2. Load parallel data
+      await Promise.all([
+        fetchAndRenderEpisodes(),
+        fetchSeasons(),
+        fetchCharacters(),
+        fetchThemes(),
+        fetchRecs(),
+        fetchRelated()
+      ]);
 
-      document.addEventListener("DOMContentLoaded", () => {
-        if (!currentMalId) return;
-        const isAnime = new URLSearchParams(window.location.search).get("anime") === "true";
-        if (isAnime) document.getElementById("back-button").style.display = "flex";
-        document.getElementById("back-button").onclick = () => window.history.back();
+      toggleSkeletons(false);
+    } catch (e) {
+      console.error("Data Load Error:", e);
+      document.getElementById("series-synopsis").textContent = "Error loading content. Please refresh.";
+      document.getElementById("synopsis-skeleton").style.display = "none";
+      document.getElementById("series-synopsis").style.display = "block";
+    }
+  }
 
-        loadData();
-        setupThumbnailToggle();
-        setupMobileTabs();
+  function toggleSkeletons(show) {
+    const skeletons = document.querySelectorAll(".skeleton");
+    const content = [
+      "hero-poster-img", "series-title", "series-synopsis", 
+      "hero-watch-btn", "hero-locate-btn"
+    ];
 
-        document.getElementById("show-more-btn").onclick = () => {
-          document.getElementById("details-content-wrapper").classList.toggle("expanded");
-        };
-        document.querySelector(".popup-close").onclick = () => {
-          document.getElementById("episode-popup-overlay").classList.remove("active");
-          document.getElementById("episode-popup-iframe").src = "";
-          // Refresh local watch history and re-render episodes
-          localWatchHistory = JSON.parse(localStorage.getItem("animex_watch_history") || "{}");
-          renderEpisodes();
-          if (window.parent && window.parent !== window) {
-            window.parent.postMessage(
-              { action: "animex_watch_history_updated" },
-              "*"
-            );
-          }
-        };
+    skeletons.forEach(s => s.style.display = show ? "block" : "none");
+    content.forEach(id => {
+      const el = document.getElementById(id);
+      if (el) el.style.display = show ? "none" : (id.includes('btn') ? "inline-flex" : "block");
+    });
 
-        // RX Gate button handlers
-        document.getElementById("rx-gate-yes").onclick = () => {
-          rxGateAccepted = true;
-          dismissRxGate();
-        };
-        document.getElementById("rx-gate-no").onclick = () => {
-          window.history.back();
-        };
+    if (!show) {
+        document.getElementById("poster-skeleton").style.display = "none";
+        document.getElementById("synopsis-skeleton").style.display = "none";
+    }
+  }
+
+  // --- UI RENDERING ---
+  function renderDetails(anime) {
+    isMovie = anime.type === "Movie";
+    const heroSection = document.getElementById("hero-section");
+    
+    // Background Image logic
+    heroSection.style.backgroundImage = `url('${anime.images.jpg.large_image_url}')`;
+    fetch(`/anime/${currentMalId}/banner`)
+      .then(r => { if (!r.ok) throw new Error("no banner"); return r.blob(); })
+      .then(blob => {
+        heroSection.style.backgroundImage = `url('${URL.createObjectURL(blob)}')`;
+      })
+      .catch(() => {
+        // Fallback: for movies, try the movie thumbnail endpoint as hero background
+        if (isMovie) {
+          fetch(`${serverUrl}/anime/${currentMalId}/movie/thumbnail`)
+            .then(r => r.json())
+            .then(d => {
+              const fallback = d.cover_url || d.thumbnail_url;
+              if (fallback) heroSection.style.backgroundImage = `url('${fallback}')`;
+            })
+            .catch(() => {});
+        }
       });
 
-      /* =========================================
-         RX GATE HELPERS
-         ========================================= */
-      function showRxGate() {
-        const overlay = document.getElementById("rx-gate-overlay");
-        overlay.style.display = "flex";
-        // Force reflow before adding visible class for CSS transition
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            overlay.classList.add("visible");
-          });
-        });
+    document.getElementById("hero-poster-img").src = anime.images.jpg.image_url;
+    document.getElementById("series-title").textContent = anime.title_english || anime.title;
+
+    // Meta Capsules
+    const metaContainer = document.getElementById("meta-container");
+    metaContainer.innerHTML = "";
+    
+    if (anime.rating) {
+      const rating = anime.rating.split(" ")[0];
+      const rClass = rating.includes("R") ? "rating-r" : (rating.includes("PG") ? "rating-pg" : "rating-g");
+      metaContainer.innerHTML += `<span class="rating-pill ${rClass}">${rating}</span>`;
+      if (anime.rating.toLowerCase().includes("rx")) {
+        isRxRated = true;
+        if (!rxGateAccepted) showRxGate();
       }
+    }
 
-      function dismissRxGate() {
-        const overlay = document.getElementById("rx-gate-overlay");
-        overlay.classList.remove("visible");
-        overlay.addEventListener("transitionend", () => {
-          overlay.style.display = "none";
-        }, { once: true });
-      }
+    metaContainer.innerHTML += `
+      <span class="meta-capsule"><i class="fas fa-calendar"></i> ${anime.year || 'N/A'}</span>
+      <span class="meta-capsule"><i class="fas fa-tv"></i> ${anime.type}</span>
+      <span class="meta-capsule">${anime.status}</span>
+      ${anime.studios.length ? `<span class="studio-text">${anime.studios[0].name}</span>` : ''}
+    `;
 
-      /* =========================================
-         MOBILE TABS
-         ========================================= */
-      function setupMobileTabs() {
-        document.querySelectorAll(".tab-btn").forEach((btn) => {
-          if (btn.onclick || btn.classList.contains("char-lang-btn")) return;
-          btn.onclick = () => {
-            if (window.innerWidth >= 1024) return;
-            document.querySelectorAll(".tabs-container .tab-btn").forEach((b) => b.classList.remove("active"));
-            document.querySelectorAll(".mobile-tab-content").forEach((p) => p.classList.remove("active"));
+    document.getElementById("series-synopsis").textContent = anime.synopsis;
 
-            btn.classList.add("active");
-            const tabId = btn.dataset.tab;
-            
-            // Logic to toggle sections based on tab
-            const charSection = document.getElementById("characters-section");
-            
-            // Hide all first
-            document.getElementById("tab-panel-episodes").classList.remove("active");
-            document.getElementById("tab-panel-themes").classList.remove("active");
-            document.getElementById("tab-panel-related").classList.remove("active");
-            document.getElementById("tab-panel-recommendations").classList.remove("active");
-            if(charSection) charSection.style.display = "none";
+    // Genres
+    const genreWrap = document.getElementById("genres-container");
+    genreWrap.innerHTML = "";
+    anime.genres.forEach(g => {
+      const span = document.createElement("span");
+      span.className = "genre-tag";
+      span.textContent = g.name;
+      genreWrap.appendChild(span);
+    });
 
-            // Show selected
-            const target = document.getElementById(`tab-panel-${tabId}`);
-            if(target) target.classList.add("active");
+    // Trailer
+    if (anime.trailer?.youtube_id) {
+      document.getElementById("trailer-section").style.display = "block";
+      initYoutubePlayer(anime.trailer.youtube_id);
+    }
+  }
 
-            // Special case: Characters show on Episodes tab
-            if(tabId === 'episodes' && charSection && characterData.length > 0) {
-                 charSection.style.display = "block";
-            }
-          };
-        });
-      }
-
-      function setupThumbnailToggle() {
-        const btn = document.getElementById("thumbnail-toggle-btn");
-        const list = document.getElementById("episode-list-container");
-        let hidden = localStorage.getItem("hideThumbnails") === "true";
-        const updateUI = () => {
-          if (hidden) {
-            list.classList.add("thumbnails-hidden");
-            btn.classList.remove("active");
-          } else {
-            list.classList.remove("thumbnails-hidden");
-            btn.classList.add("active");
-          }
-        };
-        updateUI();
-        btn.onclick = () => {
-          hidden = !hidden;
-          localStorage.setItem("hideThumbnails", hidden);
-          updateUI();
-        };
-      }
-
-      async function loadData() {
-        try {
-          const detRes = await fetch(`/proxy?url=https://api.jikan.moe/v4/anime/${currentMalId}/full`);
-          animeDetails = (await detRes.json()).data;
-          renderDetails(animeDetails);
-
-          await fetchAndRenderEpisodes();
-          fetchSeasons();
-          fetchCharacters();
-          fetchThemes(); // Load Music
-          fetchRecs();
-          fetchRelated();
-        } catch (e) { console.error(e); }
-      }
-
-      function renderDetails(anime) {
-        isMovie = anime.type === "Movie";
-        const heroSection = document.querySelector(".series-hero-section");
-        heroSection.style.backgroundImage = `url('${anime.images.jpg.large_image_url}')`;
-
-        fetch(`/anime/${currentMalId}/banner`)
-          .then((r) => {
-            if (!r.ok) throw new Error("Banner fetch failed");
-            return r.blob();
-          })
-          .then((blob) => {
-            const bannerUrl = URL.createObjectURL(blob);
-            heroSection.style.backgroundImage = `url('${bannerUrl}')`;
-          })
-          .catch(() => {
-            // If `/banner` fails, fall back to movie thumbnail if available.
-            fetch(`${serverUrl}/anime/${currentMalId}/movie/thumbnail`)
-              .then((r) => r.json())
-              .then((d) => {
-                const fallback = d.cover_url || d.thumbnail_url;
-                if (fallback) {
-                  heroSection.style.backgroundImage = `url('${fallback}')`;
-                }
-              })
-              .catch(() => {});
-          });
-
-        document.getElementById("hero-poster-img").src = anime.images.jpg.image_url;
-        document.querySelector(".series-title-text").textContent = anime.title_english || anime.title;
-        
-        // Metadata
-        const ratingSpan = document.getElementById("meta-rating");
-        if (anime.rating) {
-          let rClass = "rating-g";
-          let text = anime.rating.split(" ")[0];
-          if (text.includes("R")) rClass = "rating-r";
-          else if (text.includes("PG")) rClass = "rating-pg";
-          ratingSpan.textContent = text;
-          ratingSpan.className = `rating-pill ${rClass}`;
-          ratingSpan.style.display = "block";
-
-          // Detect Rx rating (e.g. "Rx - Hentai")
-          if (anime.rating.toLowerCase().startsWith("rx")) {
-            isRxRated = true;
-            // Show the gate if user hasn't accepted yet this session
-            if (!rxGateAccepted) {
-              showRxGate();
-            }
+  // --- EPISODE LOGIC (Phase 3 & 4) ---
+  async function fetchAndRenderEpisodes() {
+    let episodes = [];
+    try {
+      const mapRes = await fetch(`${serverUrl}/map/mal/${currentMalId}`);
+      if (mapRes.ok) {
+        const mapData = await mapRes.json();
+        if (mapData.kitsu_id) {
+          // Optimized paging for kitsu (Handles 1000+ eps)
+          let url = `/proxy?url=https://kitsu.io/api/edge/anime/${mapData.kitsu_id}/episodes?page[limit]=20`;
+          let count = 0;
+          while (url && count < 60) { // Safety cap for non-cached sessions
+            const r = await fetch(url);
+            const d = await r.json();
+            episodes = [...episodes, ...d.data];
+            url = d.links?.next;
+            count++;
           }
         }
-        document.getElementById("meta-year").textContent = anime.year || "N/A";
-        document.getElementById("meta-type").textContent = anime.type;
-        document.getElementById("meta-status").textContent = anime.status;
-        if (anime.studios.length) document.getElementById("meta-studio").textContent = anime.studios[0].name;
-        document.getElementById("series-synopsis").textContent = anime.synopsis;
+      }
+    } catch (e) {}
 
-        const gc = document.querySelector(".series-genres");
-        anime.genres.forEach((g) => {
-          const s = document.createElement("span");
-          s.className = "genre-tag";
-          s.textContent = g.name;
-          gc.appendChild(s);
+    // Fallback if Kitsu/Map fails
+    if (episodes.length === 0) {
+      const epCount = animeDetails.episodes || 1;
+      for (let i = 1; i <= epCount; i++) {
+        episodes.push({ attributes: { number: i, canonicalTitle: `Episode ${i}`, thumbnail: null } });
+      }
+      hideThumbnails = true; // Force hide broken placeholders
+    }
+
+    episodesData = episodes.sort((a, b) => a.attributes.number - b.attributes.number);
+    renderEpisodes();
+    setupLocateButton();
+  }
+
+  function formatTimestamp(seconds) {
+    seconds = Math.floor(seconds); // handle fractional seconds
+
+    if (seconds < 60) {
+        return `${seconds}s`;
+    }
+
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+
+    if (seconds < 3600) { // less than an hour
+        return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    }
+
+    const hrs = Math.floor(seconds / 3600);
+    const remainingMins = mins % 60;
+    return `${String(hrs).padStart(2, '0')}:${String(remainingMins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+}
+
+  function renderEpisodes() {
+    const list = document.getElementById("episode-list-container");
+    const movieCard = document.getElementById("movie-player-card");
+
+    if (isMovie) {
+      list.style.display = "none";
+      movieCard.style.display = "flex";
+
+      // Progress label
+      const hist = localWatchHistory[currentMalId]?.[1];
+      const movieLabel = document.querySelector(".movie-label");
+      movieLabel.innerHTML = "Play Movie";
+      if (hist?.timestamp > 0 && hist?.state !== "finished") {
+        // Use saved duration first, then parse from Jikan's duration string, then fallback to 90min
+        const duration = hist.duration || parseAnimeDuration(animeDetails?.duration) || 5400;
+        movieLabel.innerHTML = `Resume <span style="font-size:0.6em; color:var(--brand-accent)">(${formatTimestamp(hist.timestamp)})</span>`;
+      }
+
+      // Fetch backdrop thumbnail from server
+      fetch(`${serverUrl}/anime/${currentMalId}/movie/thumbnail`)
+        .then(r => r.json())
+        .then(d => {
+          document.getElementById("movie-card-backdrop").src = d.thumbnail_url || d.cover_url || "";
+        })
+        .catch(() => {
+          // Fallback to hero background image
+          const heroBg = document.getElementById("hero-section").style.backgroundImage;
+          if (heroBg) document.getElementById("movie-card-backdrop").src = heroBg.slice(5, -2);
         });
 
-        // Trailer
-        if (anime.trailer && anime.trailer.embed_url) {
-          let ytId = getYouTubeId(anime.trailer.embed_url);
-          if (ytId) {
-            document.getElementById("trailer-section").style.display = "block";
-            setTimeout(() => startPlayer(ytId), 100);
-          }
-        } else {
-          document.getElementById("trailer-section").style.display = "none";
-        }
+      movieCard.onclick = () => openPlayer(1);
+      updateWatchButton("Movie");
+      return;
+    }
+
+    list.className = `episode-list ${currentLayout} ${hideThumbnails ? 'thumbnails-hidden' : ''}`;
+    list.innerHTML = "";
+
+    const maxEp = Math.max(...episodesData.map(e => e.attributes.number));
+    
+    // Handle Range Dropdown for Long Series (Phase 4)
+    if (maxEp > 100) {
+      ensureRangeDropdown(maxEp);
+    }
+
+    const filtered = episodesData.filter(e => e.attributes.number >= currentEpRange[0] && e.attributes.number <= currentEpRange[1]);
+
+    filtered.forEach(ep => {
+      const num = ep.attributes.number;
+      const hist = localWatchHistory[currentMalId]?.[num];
+      const isFinished = hist?.state === "finished";
+      const isUnwatched = !hist;
+      
+      const item = document.createElement("div");
+      item.className = `episode-item ${isFinished ? 'watched' : ''} ${isUnwatched ? 'unwatched' : ''}`;
+      item.id = `ep-card-${num}`;
+      
+      let progressHtml = "";
+      if (hist?.timestamp > 0 && !isFinished) {
+        const pct = (hist.timestamp / (hist.duration || 1440)) * 100;
+        progressHtml = `
+          <div class="episode-progress-wrapper">
+            <div class="ep-progress-track"><div class="ep-progress-fill" style="width:${pct}%"></div></div>
+          </div>`;
       }
 
-      // --- THEMES LOGIC ---
-      async function fetchThemes() {
-          const container = document.getElementById("themes-list-container");
-          try {
-              const res = await fetch(`${THEMES_API}/${currentMalId}`);
-              const themes = await res.json();
+      const thumbUrl = ep.attributes.thumbnail?.original ? `/proxy-image?url=${ep.attributes.thumbnail.original}` : 'https://placehold.co/320x180/111/333?text=No+Image';
 
-              if (!Array.isArray(themes) || themes.length === 0) {
-                  container.innerHTML = "<div class='text-gray-500 p-4'>No themes found.</div>";
-                  return;
-              }
+      item.innerHTML = `
+        <div class="episode-thumbnail"><img src="${thumbUrl}" loading="lazy"></div>
+        <div class="episode-info">
+          <div class="episode-title">${ep.attributes.canonicalTitle || 'Episode ' + num}</div>
+          <div class="episode-title-romanji">Episode ${num}</div>
+          ${progressHtml}
+        </div>
+        <div class="episode-action-buttons"><i class="fas ${isFinished ? 'fa-rotate-right' : 'fa-play'}"></i></div>
+      `;
 
-              container.innerHTML = "";
-              themes.forEach(theme => {
-                  const item = document.createElement("div");
-                  item.className = "theme-item";
-                  item.innerHTML = `
-                      <div class="theme-info">
-                          <span class="theme-type">${theme.slug} (${theme.type})</span>
-                          <span class="theme-title">${theme.title}</span>
-                      </div>
-                      <div class="theme-actions">
-                          <button class="theme-btn play" onclick="playTheme('${theme.url}', '${theme.title.replace(/'/g, "\\'")}', '${theme.type}')">
-                              <i class="fas fa-play"></i>
-                          </button>
-                          <button class="theme-btn" onclick="addToPlaylist('${theme.url}', '${theme.title.replace(/'/g, "\\'")}', '${theme.type}', this)">
-                              <i class="fas fa-plus"></i>
-                          </button>
-                          <button class="theme-btn" onclick="downloadTheme('${theme.url}')">
-                              <i class="fas fa-download"></i>
-                          </button>
-                      </div>
-                  `;
-                  container.appendChild(item);
-              });
+      item.onclick = () => openPlayer(num);
+      list.appendChild(item);
+    });
 
-          } catch (e) {
-              console.error("Theme fetch error:", e);
-              container.innerHTML = "<div class='text-gray-500 p-4'>Unable to load themes. Ensure backend is running.</div>";
-          }
-      }
+    updateWatchButton("Anime");
+  }
 
-      // Play: Clear queue, add song, trigger Play CMD
-      window.playTheme = function(url, title, type) {
-          const track = {
-              url: url,
-              title: title,
-              type: type,
-              anime: animeDetails.title_english || animeDetails.title,
-              image: animeDetails.images.jpg.large_image_url
-          };
+  // --- PHASE 2: LOCATE LOGIC ---
+  function setupLocateButton() {
+    const btn = document.getElementById("hero-locate-btn");
+    const hist = localWatchHistory[currentMalId] || {};
+    let lastEp = 0;
+    Object.keys(hist).forEach(k => { if(parseInt(k) > lastEp) lastEp = parseInt(k); });
 
-          // 1. Update Queue
-          localStorage.setItem('animex_music_queue', JSON.stringify([track]));
-          
-          // 2. Trigger Play Command (Timestamp forces update even if track is same)
-          localStorage.setItem('animex_music_cmd', Date.now());
+    if (lastEp === 0) {
+      btn.style.display = "none";
+      return;
+    }
 
-          // 3. Fallback: If on desktop/same browser, window.storage might not fire.
-          // Try to access parent directly if permitted
-          try {
-             if(window.parent && window.parent.playTrack) {
-              window.parent.showToast(
-                              `Began playing: ${track.title} (${track.type})`,
-                              type == "music"
-                            )
-                 window.parent.playTrack(track); // Legacy direct call backup
-             }
-          } catch(e) {window.parent.showToast(
-                              `Failed to play track directly.`,
-                              type == "error"
-                            )}
-      };
-
-      // Add: Append to queue, no cmd trigger
-      window.addToPlaylist = function(url, title, type, btn) {
-          const track = {
-              url: url,
-              title: title,
-              type: type,
-              anime: animeDetails.title_english || animeDetails.title,
-              image: animeDetails.images.jpg.large_image_url
-          };
-
-          let queue = [];
-          try {
-              queue = JSON.parse(localStorage.getItem('animex_music_queue')) || [];
-          } catch(e) {}
-          
-          queue.push(track);
-          localStorage.setItem('animex_music_queue', JSON.stringify(queue));
-          window.parent.showToast(
-                              `Added to queue: ${track.title} (${track.type})`,
-                              type == "music"
-                            )
-
-          // Visual feedback
-          const icon = btn.querySelector("i");
-          const original = icon.className;
-          icon.className = "fas fa-check";
-          setTimeout(() => icon.className = original, 2000);
-      };
-
-      window.downloadTheme = function(url) {
-           window.open(url, '_blank');
-      };
-
-      // --- EXISTING LOGIC ---
-      function getYouTubeId(url) {
-        try {
-          const regex = /(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:embed\/|watch\?(?:.*&)?v=))([a-zA-Z0-9_-]{11})/;
-          const match = url.match(regex);
-          return match ? match[1] : null;
-        } catch (e) { return null; }
-      }
-
-      function startPlayer(id) {
-        const videoContainer = document.getElementById("video");
-        if (!videoContainer) return;
-        videoContainer.innerHTML = "";
-        if(window.csPlayer) {
-            csPlayer.init("video", { defaultId: id, thumbnail: true, theme: "default", loop: false }).catch(console.error);
-        }
-      }
-
-      async function fetchAndRenderEpisodes() {
-        let episodes = [];
-        let mapSucceeded = false;
-
-        // Step 1: Try the /map endpoint + Kitsu
-        try {
-          const mapRes = await fetch(`${serverUrl}/map/mal/${currentMalId}`);
-          if (mapRes.ok) {
-            const mapData = await mapRes.json();
-            if (mapData.kitsu_id) {
-              let url = `https://kitsu.io/api/edge/anime/${mapData.kitsu_id}/episodes?page[limit]=20`;
-              while (url) {
-                const r = await fetch(url);
-                const d = await r.json();
-                episodes = [...episodes, ...d.data];
-                url = d.links?.next;
-                if (episodes.length > 50 && !url) break;
-              }
-              if (episodes.length > 0) mapSucceeded = true;
-            }
-          }
-        } catch (e) {
-          // /map endpoint failed — will fall back below
-        }
-
-        // Step 2: If map failed or returned nothing, build episodes from already-received Jikan data
-        if (!mapSucceeded || episodes.length === 0) {
-          const epCount = (animeDetails && animeDetails.episodes) ? animeDetails.episodes : 1;
-          for (let i = 1; i <= epCount; i++) {
-            episodes.push({
-              attributes: {
-                number: i,
-                canonicalTitle: `Episode ${i}`,
-                thumbnail: { original: null },
-              },
-            });
-          }
-        }
-
-        episodesData = episodes.sort((a, b) => a.attributes.number - b.attributes.number);
+    btn.style.display = "inline-flex";
+    btn.onclick = () => {
+      let target = lastEp;
+      if (hist[target]?.state === "finished") target++;
+      
+      // 1. Calculate and switch range if needed
+      const rangeStart = Math.floor((target - 1) / 100) * 100 + 1;
+      const rangeEnd = rangeStart + 99;
+      
+      if (currentEpRange[0] !== rangeStart) {
+        currentEpRange = [rangeStart, rangeEnd];
+        const selector = document.getElementById("ep-range-select");
+        if (selector) selector.value = `${rangeStart}-${rangeEnd}`;
         renderEpisodes();
       }
 
-      function formatTime(s) {
-          if (isNaN(s) || s < 0) return "0:00";
-          const m = Math.floor(s / 60);
-          const sec = Math.floor(s % 60).toString().padStart(2, '0');
-          return `${m}:${sec}`;
-      }
+      // 2. Scroll and Highlight
+      setTimeout(() => {
+        const el = document.getElementById(`ep-card-${target}`);
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          el.classList.add("target-highlight");
+          setTimeout(() => el.classList.remove("target-highlight"), 3000);
+        }
+      }, 100);
+    };
+  }
 
-      function renderEpisodes() {
-          const list = document.getElementById("episode-list-container");
-          const movieCard = document.getElementById("movie-player-card");
+  // --- PHASE 3: LAYOUT TOGGLES ---
+  function initLayoutButtons() {
+    const gridBtn = document.getElementById("grid-toggle-btn");
+    const thumbBtn = document.getElementById("thumbnail-toggle-btn");
 
-          if (isMovie) {
-              list.style.display = "none";
-              movieCard.style.display = "flex";
-              
-              // MOVIE PROGRESS LOGIC
-              const hist = localWatchHistory[currentMalId]?.[1];
-              const movieLabel = document.querySelector('.movie-label');
-              // Reset label just in case
-              movieLabel.innerHTML = "Play Movie";
-              
-              if(hist && hist.timestamp > 0 && hist.state !== 'finished') {
-                  const duration = hist.duration || 0;
-                  const pct = duration > 0 ? (hist.timestamp / duration) * 100 : 0;
-                  movieLabel.innerHTML = `Resume <span style="font-size:0.6em; color:var(--brand-accent)">(${Math.round(pct)}%)</span>`;
-              }
+    const updateBtns = () => {
+      gridBtn.innerHTML = currentLayout === "grid-view" ? '<i class="fas fa-list"></i>' : '<i class="fas fa-th-large"></i>';
+      gridBtn.classList.toggle("active", currentLayout === "grid-view");
+      thumbBtn.classList.toggle("active", !hideThumbnails);
+    };
 
-              fetch(`${serverUrl}/anime/${currentMalId}/movie/thumbnail`)
-                  .then(r => r.json())
-                  .then(d => { document.getElementById("movie-card-backdrop").src = d.thumbnail_url || ""; })
-                  .catch(() => {
-                      const style = document.querySelector(".series-hero-section").style.backgroundImage;
-                      if(style) document.getElementById("movie-card-backdrop").src = style.slice(4, -1).replace(/["']/g, "");
-                  });
-              movieCard.onclick = () => openPlayer(1);
-              updateWatchButton("Movie");
-              return;
-          }
+    gridBtn.onclick = () => {
+      currentLayout = currentLayout === "list-view" ? "grid-view" : "list-view";
+      localStorage.setItem("animex_layout", currentLayout);
+      updateBtns();
+      renderEpisodes();
+    };
 
-          movieCard.style.display = "none";
-          list.style.display = "flex";
-          list.innerHTML = "";
-          if (episodesData.length === 0) {
-              list.innerHTML = "<p style='padding:20px'>No episodes found.</p>";
-              return;
-          }
+    thumbBtn.onclick = () => {
+      hideThumbnails = !hideThumbnails;
+      localStorage.setItem("hideThumbnails", hideThumbnails);
+      updateBtns();
+      renderEpisodes();
+    };
 
-          // --- Range Dropdown Logic ---
-          const maxEp = Math.max(...episodesData.map(e => e.attributes.number));
-          const rangeContainer = document.createElement("div");
-          rangeContainer.className = "ep-range-dropdown";
-          let showDropdown = maxEp > 100;
-          if (showDropdown) {
-            let dropdown = document.getElementById("ep-range-select");
-            if (!dropdown) {
-              dropdown = document.createElement("select");
-              dropdown.id = "ep-range-select";
-              dropdown.style.marginBottom = "1rem";
-              dropdown.style.padding = "8px 16px";
-              dropdown.style.borderRadius = "8px";
-              dropdown.style.background = "#161616";
-              dropdown.style.color = "#fff";
-              dropdown.style.fontWeight = "bold";
-              dropdown.style.border = "1px solid #2a2a2a";
-              dropdown.onchange = function() {
-                const [start, end] = this.value.split("-").map(Number);
-                currentEpRange = [start, end];
-                renderEpisodes();
-              };
-              // Insert above episode list
-              list.parentElement.insertBefore(dropdown, list);
-            }
-            dropdown.innerHTML = "";
-            for (let i = 1; i <= maxEp; i += 100) {
-              const end = Math.min(i + 99, maxEp);
-              const opt = document.createElement("option");
-              opt.value = `${i}-${end}`;
-              opt.textContent = `Episodes ${i}-${end}`;
-              if (currentEpRange[0] === i) opt.selected = true;
-              dropdown.appendChild(opt);
-            }
-          } else {
-            currentEpRange = [1, maxEp];
-            const dropdown = document.getElementById("ep-range-select");
-            if (dropdown) dropdown.remove();
-          }
-          // --- Only show episodes in current range ---
-          episodesData.filter(ep => ep.attributes.number >= currentEpRange[0] && ep.attributes.number <= currentEpRange[1])
-            .forEach((ep) => {
-              const num = ep.attributes.number;
-              const div = document.createElement("div");
-              div.className = "episode-item";
-              const hist = localWatchHistory[currentMalId]?.[num];
-              let progressHtml = '';
-              let isFinished = false;
-              if (hist) {
-                if (hist.state === "finished") {
-                  div.classList.add("watched");
-                  isFinished = true;
-                } else if (hist.timestamp > 0) {
-                  const duration = hist.duration || 1440; // Default to ~24m if duration missing
-                  const percentage = Math.min(100, (hist.timestamp / duration) * 100);
-                  progressHtml = `
-                      <div class="episode-progress-wrapper">
-                          <div class="ep-progress-track">
-                              <div class="ep-progress-fill" style="width: ${percentage}%"></div>
-                          </div>
-                          <div class="ep-progress-text">
-                              ${formatTime(hist.timestamp)} <span style="color:#666">/ ${formatTime(duration)}</span>
-                          </div>
-                      </div>
-                  `;
-                }
-              }
-              div.innerHTML = `
-                  <div class="episode-thumbnail">
-                      <img src="${'/proxy-image?url=' + ep.attributes.thumbnail?.original || "https://placehold.co/320x180"}" loading="lazy">
-                  </div>
-                  <div class="episode-info">
-                      <div class="episode-title">${ep.attributes.canonicalTitle || "Episode " + num}</div>
-                      <div class="episode-title-romanji">Episode ${num}</div>
-                      ${progressHtml}
-                  </div>
-                  <div class="episode-action-buttons">
-                      <i class="fas ${isFinished ? 'fa-rotate-right' : 'fa-play'}" style="font-size:0.9rem; opacity:${isFinished ? '0.5' : '1'}"></i>
-                  </div>
-              `;
-              div.onclick = () => openPlayer(num);
-              list.appendChild(div);
-            });
-          updateWatchButton("Anime");
-      }
+    updateBtns();
+  }
 
-      function updateWatchButton(mode) {
-  const btn = document.getElementById("hero-watch-btn");
-  btn.style.display = "inline-flex";
-  const hist = localWatchHistory[currentMalId] || {};
-  let lastEp = 0;
-  Object.keys(hist).forEach((k) => { if (parseInt(k) > lastEp) lastEp = parseInt(k); });
+  function ensureRangeDropdown(maxEp) {
+    let dropdown = document.getElementById("ep-range-select");
+    if (!dropdown) {
+      dropdown = document.createElement("select");
+      dropdown.id = "ep-range-select";
+      dropdown.className = "season-selector"; // Reuse styles
+      dropdown.style.marginBottom = "1.5rem";
+      dropdown.style.width = "auto";
+      document.getElementById("episode-list-container").before(dropdown);
+      dropdown.onchange = (e) => {
+        currentEpRange = e.target.value.split("-").map(Number);
+        renderEpisodes();
+      };
+    }
+    dropdown.innerHTML = "";
+    for (let i = 1; i <= maxEp; i += 100) {
+      const end = Math.min(i + 99, maxEp);
+      const opt = document.createElement("option");
+      opt.value = `${i}-${end}`;
+      opt.textContent = `Episodes ${i} - ${end}`;
+      if (currentEpRange[0] === i) opt.selected = true;
+      dropdown.appendChild(opt);
+    }
+  }
 
-  // Determine standard text
-  let btnContent = "";
-  let targetEp = 1;
+  // --- WATCH HISTORY & PLAYER ---
+  function updateWatchButton(mode) {
+    const btn = document.getElementById("hero-watch-btn");
+    const hist = localWatchHistory[currentMalId] || {};
+    let lastEp = 0;
+    Object.keys(hist).forEach(k => { if(parseInt(k) > lastEp) lastEp = parseInt(k); });
 
-  if (mode === "Movie") {
-    targetEp = 1;
-    const hasWatched = lastEp === 1;
-    btnContent = hasWatched ? `<i class="fas fa-play"></i> Resume Movie` : `<i class="fas fa-film"></i> Watch Movie`;
-  } else {
-    targetEp = lastEp > 0 ? lastEp : 1;
-    if (hist[targetEp]?.state === "finished") targetEp++;
-    const exists = episodesData.find((e) => e.attributes.number === targetEp);
-    
-    if (!exists && lastEp > 0) {
+    let targetEp = 1;
+    let label = "Start Watching";
+
+    if (mode === "Movie") {
       targetEp = 1;
-      btnContent = `<i class="fas fa-rotate-right"></i> Re-watch`;
+      label = lastEp === 1 ? "Resume Movie" : "Watch Movie";
     } else {
-      btnContent = `<i class="fas fa-play"></i> ${lastEp > 0 ? "Continue" : "Start"} EP ${targetEp}`;
+      targetEp = lastEp > 0 ? lastEp : 1;
+      if (hist[targetEp]?.state === "finished") targetEp++;
+      label = lastEp > 0 ? `Continue Ep ${targetEp}` : `Start Ep 1`;
     }
+
+    btn.innerHTML = `<i class="fas fa-play"></i> <span>${label}</span>`;
+    btn.onclick = () => {
+      if (isRxRated && !rxGateAccepted) {
+        showRxGate();
+        document.getElementById("rx-gate-yes").onclick = () => {
+          rxGateAccepted = true;
+          dismissRxGate();
+          openPlayer(targetEp);
+        };
+      } else {
+        openPlayer(targetEp);
+      }
+    };
   }
 
-  btn.innerHTML = btnContent;
-  btn.onclick = (e) => handleWatchClick(e, targetEp);
-
-  // Apply RX logic if needed
-  if (isRxRated && !rxGateAccepted) {
-    btn.classList.add("rx-rated");
-    attachRxHoverBehavior(btn, btnContent);
-  } else {
-    btn.classList.remove("rx-rated");
-    detachRxHoverBehavior(btn);
-  }
-}
-
-function attachRxHoverBehavior(btn, originalHTML) {
-  if (btn._rxHoverAttached) return;
-  btn._rxHoverAttached = true;
-  btn._rxOriginalHTML = originalHTML;
-
-  btn._rxMouseEnter = () => {
-    // Only change text if they haven't accepted the gate yet
-    if (!rxGateAccepted) {
-      btn.innerHTML = `<i class="fas fa-ban"></i> Really... I'm Disappointed`;
-    }
-  };
-  
-  btn._rxMouseLeave = () => {
-    btn.innerHTML = btn._rxOriginalHTML;
-  };
-
-  btn.addEventListener("mouseenter", btn._rxMouseEnter);
-  btn.addEventListener("mouseleave", btn._rxMouseLeave);
-}
-
-function handleWatchClick(e, ep) {
-  // 1. SECRET BYPASS: Shift + Click
-  if (e.shiftKey) {
-    console.log("Bypassing gate via shift-click...");
-    rxGateAccepted = true;
-    dismissRxGate();
-    detachRxHoverBehavior(document.getElementById("hero-watch-btn"));
-    openPlayer(ep);
-    return;
+  function openPlayer(ep) {
+    const url = `view.html?id=${currentMalId}&ep=${ep}`;
+    document.getElementById("episode-popup-iframe").src = url;
+    document.getElementById("episode-popup-overlay").classList.add("active");
   }
 
-  // 2. STANDARD RX GATE
-  if (isRxRated && !rxGateAccepted) {
-    showRxGate();
-    
-    // Wire up the modal's "Yes" button to actually open the player
+  function closePlayerPopup() {
+    document.getElementById("episode-popup-overlay").classList.remove("active");
+    document.getElementById("episode-popup-iframe").src = "";
+    // Sync history on close
+    localWatchHistory = JSON.parse(localStorage.getItem("animex_watch_history") || "{}");
+    renderEpisodes();
+    setupLocateButton();
+  }
+
+  // --- PHASE 1: MODERNIZED RX GATE ---
+  function initRxGate() {
+    document.getElementById("rx-gate-no").onclick = () => window.history.back();
     document.getElementById("rx-gate-yes").onclick = () => {
       rxGateAccepted = true;
       dismissRxGate();
-      // Remove the "disappointed" hover effect now that they've admitted it
-      detachRxHoverBehavior(document.getElementById("hero-watch-btn"));
-      openPlayer(ep);
     };
-    return;
   }
 
-  // 3. NORMAL PLAY
-  openPlayer(ep);
-}
+  function showRxGate() {
+    const overlay = document.getElementById("rx-gate-overlay");
+    overlay.style.display = "flex";
+    setTimeout(() => overlay.classList.add("visible"), 50);
+  }
 
-function detachRxHoverBehavior(btn) {
-  if (!btn || !btn._rxHoverAttached) return;
-  btn.removeEventListener("mouseenter", btn._rxMouseEnter);
-  btn.removeEventListener("mouseleave", btn._rxMouseLeave);
-  btn.classList.remove("rx-rated");
-  btn._rxHoverAttached = false;
-}
+  function dismissRxGate() {
+    const overlay = document.getElementById("rx-gate-overlay");
+    overlay.classList.remove("visible");
+    setTimeout(() => overlay.style.display = "none", 400);
+  }
 
-      function openPlayer(ep) {
-        const url = `view.html?id=${currentMalId}&ep=${ep}`;
-        const popup = document.getElementById("episode-popup-overlay");
-        document.getElementById("episode-popup-iframe").src = url;
-        popup.classList.add("active");
+  // --- THEMES & MUSIC ---
+  async function fetchThemes() {
+    const container = document.getElementById("themes-list-container");
+    try {
+      const res = await fetch(`${THEMES_API}/${currentMalId}`);
+      const themes = await res.json();
+      if (!themes.length) {
+        container.innerHTML = "<p class='text-muted'>No themes found.</p>";
+        return;
       }
+      container.innerHTML = "";
+      themes.forEach(t => {
+        const div = document.createElement("div");
+        div.className = "theme-item";
+        div.innerHTML = `
+          <div class="theme-info">
+            <span class="theme-type">${t.slug}</span>
+            <span class="theme-title">${t.title}</span>
+          </div>
+          <div class="theme-actions">
+            <button class="theme-btn play" onclick="playTheme('${t.url}', '${t.title.replace(/'/g, "\\'")}')"><i class="fas fa-play"></i></button>
+            <button class="theme-btn" onclick="downloadTheme('${t.url}')"><i class="fas fa-download"></i></button>
+          </div>
+        `;
+        container.appendChild(div);
+      });
+    } catch (e) { container.innerHTML = ""; }
+  }
 
-      async function fetchRecs() {
-        const res = await fetch(`/proxy?url=https://api.jikan.moe/v4/anime/${currentMalId}/recommendations`);
-        const data = (await res.json()).data;
-        const grid = document.getElementById("recommendations-grid");
-        if (!data) return;
-        data.slice(0, 15).forEach((r) => {
-          const a = document.createElement("a");
-          a.className = "tile-card";
-          a.href = `series-info.html?id=${r.entry.mal_id}`;
-          a.innerHTML = `
-                    <div class="tile-img-container"><img src="${r.entry.images.jpg.image_url}" class="tile-img" loading="lazy"></div>
-                    <div class="tile-title">${r.entry.title}</div>
-                 `;
-          grid.appendChild(a);
+  window.playTheme = (url, title) => {
+    const track = { url, title, anime: animeDetails.title, image: animeDetails.images.jpg.large_image_url };
+    localStorage.setItem('animex_music_queue', JSON.stringify([track]));
+    localStorage.setItem('animex_music_cmd', Date.now());
+    if (window.parent?.showToast) window.parent.showToast(`Playing: ${title}`, true);
+  };
+
+  window.downloadTheme = (url) => window.open(url, '_blank');
+
+  // --- OTHER DATA FETCHERS ---
+  async function fetchCharacters() {
+    try {
+      const res = await fetch(`${serverUrl}/anime/${currentMalId}/characters`);
+      const data = await res.json();
+      characterData = data.characters || [];
+      renderCharacters("JAPANESE");
+      
+      document.querySelectorAll(".char-lang-btn").forEach(btn => {
+        btn.onclick = () => {
+          document.querySelectorAll(".char-lang-btn").forEach(b => b.classList.remove("active"));
+          btn.classList.add("active");
+          renderCharacters(btn.dataset.lang);
+        };
+      });
+    } catch (e) {}
+  }
+
+  function renderCharacters(lang) {
+    const list = document.getElementById("characters-list");
+    list.innerHTML = "";
+    characterData.forEach(c => {
+      const va = c.voice_actors.find(v => v.language === lang) || { name: "N/A", image: "" };
+      const div = document.createElement("div");
+      div.className = "character-card";
+      div.innerHTML = `
+        <div class="char-card-imgs"><img src="${c.character.image}"><img src="${va.image || 'https://placehold.co/100x100/111/333?text=No+VA'}"></div>
+        <div class="char-info"><span class="char-name">${c.character.name}</span><span class="va-name">${va.name}</span></div>
+      `;
+      list.appendChild(div);
+    });
+    document.getElementById("characters-section").style.display = characterData.length ? "block" : "none";
+  }
+
+  async function fetchRecs() {
+    const res = await fetch(`/proxy?url=https://api.jikan.moe/v4/anime/${currentMalId}/recommendations`);
+    const data = (await res.json()).data;
+    const grid = document.getElementById("recommendations-grid");
+    data?.slice(0, 15).forEach(r => {
+      const a = document.createElement("a");
+      a.className = "tile-card";
+      a.href = `series-info.html?id=${r.entry.mal_id}`;
+      a.innerHTML = `<div class="tile-img-container"><img src="${r.entry.images.jpg.image_url}" class="tile-img" loading="lazy"></div><div class="tile-title">${r.entry.title}</div>`;
+      grid.appendChild(a);
+    });
+  }
+
+  async function fetchRelated() {
+    const res = await fetch(`/proxy?url=https://api.jikan.moe/v4/anime/${currentMalId}/relations`);
+    const data = (await res.json()).data;
+    const container = document.getElementById("related-container");
+    data?.forEach(rel => {
+      rel.entry.forEach(entry => {
+        if (entry.type !== 'anime') return;
+        const a = document.createElement("a");
+        a.className = "tile-card";
+        a.href = `series-info.html?id=${entry.mal_id}`;
+        a.innerHTML = `<div class="tile-img-container"><img src="https://placehold.co/200x300/111/333?text=..." class="tile-img"><div class="tile-tag">${rel.relation}</div></div><div class="tile-title">${entry.name}</div>`;
+        container.appendChild(a);
+        fetch(`/proxy?url=https://api.jikan.moe/v4/anime/${entry.mal_id}`).then(r => r.json()).then(d => {
+          if (d.data?.images?.jpg?.image_url) a.querySelector("img").src = d.data.images.jpg.image_url;
         });
-      }
+      });
+    });
+  }
 
-      async function fetchRelated() {
-        const res = await fetch(`/proxy?url=https://api.jikan.moe/v4/anime/${currentMalId}/relations`);
-        const data = (await res.json()).data;
-        const container = document.getElementById("related-container");
-        if (data) {
-          data.flatMap((r) => r.entry.map((e) => ({ ...e, relation: r.relation }))).forEach((item) => {
-              const a = document.createElement("a");
-              a.className = "tile-card";
-              a.href = `series-info.html?id=${item.mal_id}&type=${item.type}`;
-              a.innerHTML = `
-                        <div class="tile-img-container">
-                            <img src="https://placehold.co/100x150/222/666?text=..." class="tile-img">
-                            <div class="tile-tag">${item.relation}</div>
-                        </div>
-                        <div class="tile-title">${item.name}</div>
-                    `;
-              fetch(`/proxy?url=https://api.jikan.moe/v4/${item.type}/${item.mal_id}`).then((r) => r.json()).then((d) => {
-                  if (d.data?.images?.jpg?.image_url) a.querySelector("img").src = d.data.images.jpg.image_url;
-              });
-              container.appendChild(a);
-            });
-        }
+  async function fetchSeasons() {
+    try {
+      const res = await fetch(`${serverUrl}/anime/${currentMalId}/seasons`);
+      const data = await res.json();
+      const entries = data.season_groups || [];
+      if (entries.length > 1 || (entries[0]?.parts.length > 1)) {
+        const sel = document.getElementById("season-selector");
+        document.getElementById("season-selector-wrapper").style.display = "block";
+        sel.innerHTML = "";
+        entries.forEach(g => {
+          g.parts.forEach(p => {
+            const opt = document.createElement("option");
+            opt.value = p.mal_id;
+            opt.textContent = `${g.group_label} - ${p.short_label}`;
+            if (String(p.mal_id) === currentMalId) opt.selected = true;
+            sel.appendChild(opt);
+          });
+        });
+        sel.onchange = (e) => window.location.href = `series-info.html?id=${e.target.value}`;
       }
+    } catch (e) {}
+  }
 
-      async function fetchSeasons() {
-        try {
-          const res = await fetch(`${serverUrl}/anime/${currentMalId}/seasons`);
-          const data = await res.json();
-          let entries = Array.isArray(data) ? data : data.entries || [];
-          if (entries && entries.length > 1) {
-            const sel = document.getElementById("season-selector");
-            document.querySelector(".season-selector-container").style.display = "block";
-            sel.innerHTML = "";
-            entries.forEach((e) => {
-              const opt = document.createElement("option");
-              opt.value = e.mal_id;
-              opt.textContent = e.title;
-              if (String(e.mal_id) === currentMalId) opt.selected = true;
-              sel.appendChild(opt);
-            });
-            sel.onchange = (e) => (window.location.href = `series-info.html?id=${e.target.value}`);
-          }
-        } catch {}
-      }
-
-      async function fetchCharacters() {
-        try {
-          const res = await fetch(`${serverUrl}/anime/${currentMalId}/characters`);
-          const data = await res.json();
-          characterData = data.characters || [];
-          // Note: Display logic moved to mobileTabs setup and render call
-          if(characterData.length) renderCharacters("JAPANESE");
-        } catch (e) { }
-      }
-
-      window.changeCharLang = (lang, btn) => {
-        document.querySelectorAll(".char-lang-btn").forEach((b) => b.classList.remove("active"));
+  // --- HELPERS ---
+  function initTabSystem() {
+    document.querySelectorAll(".tab-btn").forEach(btn => {
+      btn.onclick = () => {
+        if (window.innerWidth >= 1024) return;
+        document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
+        document.querySelectorAll(".mobile-tab-content").forEach(c => c.classList.remove("active"));
         btn.classList.add("active");
-        renderCharacters(lang);
+        document.getElementById(`tab-panel-${btn.dataset.tab}`).classList.add("active");
       };
+    });
+  }
 
-      function renderCharacters(lang) {
-        const list = document.getElementById("characters-list");
-        list.innerHTML = "";
-        characterData.forEach((c) => {
-          const va = c.voice_actors.find((v) => v.language === lang);
-          const vaImg = va ? va.image : "";
-          const vaName = va ? va.name : "N/A";
-          const div = document.createElement("div");
-          div.className = "character-card";
-          div.innerHTML = `
-                    <div class="char-card-imgs">
-                        <img src="${c.character.image}">
-                        <img src="${vaImg}" style="background:#111">
-                    </div>
-                    <div class="char-info">
-                        <span class="char-name">${c.character.name}</span>
-                        <span class="va-name">${vaName}</span>
-                    </div>
-                `;
-          list.appendChild(div);
-        });
-        if(list.children.length > 0) {
-            document.getElementById("characters-section").style.display = "block";
-        }
-      }
-    </script>
+  // Parses Jikan duration strings like "1 hr 54 min", "24 min", "2 hr" into seconds
+  function parseAnimeDuration(str) {
+    if (!str) return null;
+    let seconds = 0;
+    const hrs = str.match(/(\d+)\s*hr/);
+    const mins = str.match(/(\d+)\s*min/);
+    if (hrs) seconds += parseInt(hrs[1]) * 3600;
+    if (mins) seconds += parseInt(mins[1]) * 60;
+    return seconds > 0 ? seconds : null;
+  }
+
+  function initYoutubePlayer(id) {
+    if (window.csPlayer) {
+      csPlayer.init("video", { defaultId: id, thumbnail: true, theme: "default" }).catch(() => {});
+    }
+  }
+</script>
   </body>
 </html>
\ No newline at end of file
diff --git a/animex/view.html b/animex/view.html
index 5d25281..a57a117 100644
--- a/animex/view.html
+++ b/animex/view.html
@@ -1,611 +1,965 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
-  <title>Episode Player</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
-  <style>
-    :root {
-      --accent-color: #FF9500;
-      --background-color: #0A0A0A;
-      --surface-color: #141414;
-      --text-primary: #FFFFFF;
-      --text-secondary: #A0A0A0;
-      --border-color: rgba(255, 255, 255, 0.1);
-      --indicator-left: 4px;
-      --indicator-width: 0px;
-    }
-    html, body {
-      margin: 0;
-      padding: 0;
-      height: 100%;
-      width: 100%;
-      background: var(--background-color);
-      font-family: 'Inter', sans-serif;
-      color: var(--text-primary);
-      -webkit-tap-highlight-color: transparent;
-      overscroll-behavior-y: contain;
-    }
-    body {
-      display: flex;
-      flex-direction: column;
-      overflow-x: hidden;
-    }
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <title>Episode Player - Animex</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    />
+    <style>
+      :root {
+        --accent-color: #ff9500;
+        --accent-glow: rgba(255, 149, 0, 0.3);
+        --background-color: #0a0a0a;
+        --surface-color: #141414;
+        --surface-lighter: #1e1e1e;
+        --text-primary: #ffffff;
+        --text-secondary: #a0a0a0;
+        --border-color: rgba(255, 255, 255, 0.08);
+        --indicator-left: 4px;
+        --indicator-width: 0px;
+        --player-aspect: 16 / 9;
+      }
 
-    /* --- Loading Screen --- */
-    #loading-container {
-      position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
-      z-index: 200; background-color: #000; background-size: cover;
-      background-position: center; display: flex; align-items: flex-end;
-      justify-content: center; transition: opacity 0.3s ease;
-    }
-    #loading-container::before {
-      content: ''; position: absolute; top: 0; left: 0; width: 100%;
-      height: 100%; background: linear-gradient(to top, rgba(0,0,0,1) 20%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
-    }
-    #loading-info {
-      position: relative; text-align: left; padding: 1.5rem 1.5rem 3rem;
-      max-width: 90%; max-height: 50%; overflow-y: auto; box-sizing: border-box;
-    }
-    #loading-info h2 { margin: 0 0 0.5rem 0; font-size: 1.5rem; }
-    #loading-info p { margin: 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
-    .loader-spinner {
-      border: 4px solid rgba(255, 255, 255, 0.2); border-radius: 50%;
-      border-top: 4px solid var(--accent-color); width: 40px; height: 40px;
-      animation: spin 1s linear infinite; position: absolute; top: 50%; left: 50%;
-      transform: translate(-50%, -50%);
-    }
-    @keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
+      * {
+        box-sizing: border-box;
+      }
 
-    /* --- Player & Content --- */
-    #player-container {
-      width: 100%;
-      aspect-ratio: 16 / 9;
-      background: #000;
-      flex-shrink: 0;
-      position: relative;
-    }
-    #player-container iframe {
-      width: 100%; height: 100%; border: none; background: #111;
-    }
-    #error-message {
-      color: #ff6b6b; text-align: center; padding: 2rem 1rem; font-size: 1.1rem;
-      display: flex; align-items: center; justify-content: center; height: 100%;
-    }
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+        background: var(--background-color);
+        font-family: "Inter", sans-serif;
+        color: var(--text-primary);
+        -webkit-tap-highlight-color: transparent;
+        overflow-x: hidden;
+      }
 
-    #content-container {
-      flex-grow: 1;
-      padding: 1rem 1.2rem;
-      background: var(--background-color);
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    }
+      body {
+        display: flex;
+        flex-direction: column;
+      }
 
-    /* --- Header Info --- */
-    #header-info {
-      text-align: left;
-    }
-    #series-title { font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
-    #meta-line { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.25rem; }
+      /* --- Phase 6: Dynamic Ambient Glow --- */
+      #ambient-glow {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        height: 60vh;
+        background: radial-gradient(
+          circle at center,
+          var(--accent-glow) 0%,
+          transparent 70%
+        );
+        filter: blur(80px);
+        z-index: -1;
+        opacity: 0.6;
+        pointer-events: none;
+        transition: background 1s ease;
+      }
 
-    /* --- Controls --- */
-    #controls-main {
-      display: grid;
-      grid-template-columns: 1fr auto auto;
-      gap: 0.8rem;
-      align-items: center;
-    }
-    .control-btn {
-      background: var(--surface-color);
-      border: 1px solid var(--border-color);
-      color: var(--text-secondary);
-      border-radius: 12px;
-      padding: 12px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.2s, color 0.2s;
-      height: 44px; /* Match height of other controls */
-      width: 44px;
-    }
-    .control-btn:hover {
-      background: var(--border-color);
-      color: var(--text-primary);
-    }
-    #source-controls {
-      display: flex;
-      background-color: var(--surface-color);
-      border-radius: 12px;
-      padding: 5px;
-      border: 1px solid var(--border-color);
-      gap: 5px;
-    }
+      /* --- Loading Screen --- */
+      #loading-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        z-index: 200;
+        background-color: #000;
+        background-size: cover;
+        background-position: center;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        transition: opacity 0.5s ease;
+      }
+      #loading-container::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 0.4) 100%
+        );
+      }
+      #loading-info {
+        position: relative;
+        text-align: left;
+        padding: 3rem 1.5rem;
+        width: 100%;
+        max-width: 800px;
+        z-index: 201;
+      }
+      #loading-info h2 {
+        margin: 0 0 0.5rem 0;
+        font-size: 2rem;
+        font-weight: 800;
+        letter-spacing: -0.02em;
+      }
+      #loading-info p {
+        margin: 0;
+        font-size: 1rem;
+        color: var(--text-secondary);
+        line-height: 1.6;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
 
-    /* SUB/DUB Toggle */
-    .subdub-toggle {
-      position: relative; display: flex;
-      list-style: none; margin: 0; padding: 0;
-      flex-grow: 1;
-    }
-    .subdub-toggle::before {
-      content: ''; position: absolute; top: 0; left: var(--indicator-left);
-      width: var(--indicator-width); height: 100%;
-      background: var(--accent-color);
-      border-radius: 8px;
-      z-index: 1;
-      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-    }
-    .subdub-btn {
-      position: relative; /* Ensure z-index stacking context */
-      background: none; border: none; color: var(--text-secondary);
-      font-size: 0.9em; font-weight: 600;
-      padding: 8px 16px; /* Add horizontal padding for spacing */
-      border-radius: 8px; cursor: pointer;
-      outline: none; z-index: 2; transition: color 0.3s ease;
-      flex-grow: 1; text-align: center;
-    }
-    .subdub-btn.active { color: var(--text-primary); }
+      .loader-spinner {
+        border: 3px solid rgba(255, 255, 255, 0.1);
+        border-radius: 50%;
+        border-top: 3px solid var(--accent-color);
+        width: 50px;
+        height: 50px;
+        animation: spin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      @keyframes spin {
+        100% {
+          transform: translate(-50%, -50%) rotate(360deg);
+        }
+      }
 
-    /* Source Selector */
-    .source-selector-wrapper {
-      position: relative;
-      flex-grow: 1;
-    }
-    #source-changer-select {
-      width: 100%;
-      background-color: transparent;
-      color: var(--text-primary);
-      border: none;
-      border-radius: 8px;
-      padding: 8px 28px 8px 12px;
-      font-size: 0.9em;
-      font-weight: 600;
-      font-family: 'Inter', sans-serif;
-      -webkit-appearance: none;
-      appearance: none;
-      cursor: pointer;
-      text-align: center;
-      text-align-last: center; /* For Firefox */
-    }
-    .source-selector-wrapper::after {
-      content: '';
-      position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 0;
-      height: 0;
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top: 5px solid var(--text-secondary);
-      pointer-events: none;
-    }
-    #source-changer-select:focus { outline: none; }
+      /* --- Player Section --- */
+      #player-wrapper {
+        position: relative;
+        width: 100%;
+        max-width: 1400px;
+        margin: 0 auto;
+        z-index: 10;
+        padding: 0;
+      }
 
-    /* Next Episode Button */
-    #next-episode-btn {
-      display: block; background: var(--accent-color); color: #fff;
-      font-weight: 600; font-size: 0.95em; border: none; border-radius: 12px;
-      padding: 12px 20px; cursor: pointer; transition: background 0.2s;
-      white-space: nowrap;
-    }
-    #next-episode-btn:hover { background: #e6850a; }
-    #series-over-msg {
-      text-align: center; font-weight: 600; font-size: 0.95em;
-      color: var(--accent-color); opacity: 0.8; padding: 12px 0;
-    }
-
-    /* Synopsis */
-    #synopsis-container {
-      margin-top: 0.5rem;
-    }
-    #synopsis-container h4 {
-      margin: 0 0 0.5rem 0; font-weight: 600; opacity: 0.9;
-    }
-    #synopsis-container p {
-      font-size: 0.9em; line-height: 1.6; color: var(--text-secondary); margin: 0;
-    }
-
-    /* --- Landscape Mode --- */
-    @media (orientation: landscape) and (max-height: 600px) {
-      body { flex-direction: row; }
       #player-container {
-        width: 100vw; height: 100vh;
-        position: fixed; top: 0; left: 0; z-index: 100;
+        width: 100%;
+        aspect-ratio: var(--player-aspect);
+        background: #000;
+        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+        position: relative;
+        overflow: hidden;
       }
-      #content-container {
-        display: none; /* Hide by default in landscape */
+
+      #player-container iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        background: #000;
       }
-      /* Add specific landscape controls if needed, or rely on player's native controls */
-    }
-  </style>
-</head>
-<body>
 
-  <div id="loading-container">
-    <div class="loader-spinner"></div>
-    <div id="loading-info">
-      <h2 id="loading-title">—</h2>
-      <p id="loading-synopsis">—</p>
-    </div>
-  </div>
+      /* --- Content Layout --- */
+      #main-content {
+        flex-grow: 1;
+        width: 100%;
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+      }
 
-  <div id="player-container"></div>
+      /* --- Header & Controls --- */
+      #header-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+      #series-title {
+        font-size: 1.8rem;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+      }
+      #meta-line {
+        font-size: 0.95rem;
+        color: var(--text-secondary);
+        font-weight: 500;
+      }
+      #meta-line span {
+        color: var(--text-primary);
+      }
 
-  <div id="content-container">
-    <div id="header-info">
-      <div id="series-title">—</div>
-      <div id="meta-line">
-        <span>Type: <span id="series-type">—</span></span> |
-        <span>Year: <span id="series-year">—</span></span> |
-        <span>Episode: <span id="episode-number">—</span></span>
+      #controls-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      #source-controls {
+        display: flex;
+        background-color: var(--surface-color);
+        border-radius: 14px;
+        padding: 4px;
+        border: 1px solid var(--border-color);
+        gap: 4px;
+      }
+
+      /* SUB/DUB Toggle */
+      .subdub-toggle {
+        position: relative;
+        display: flex;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      .subdub-toggle::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: var(--indicator-left);
+        width: var(--indicator-width);
+        height: 100%;
+        background: var(--accent-color);
+        border-radius: 10px;
+        z-index: 1;
+        transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+      }
+      .subdub-btn {
+        position: relative;
+        background: none;
+        border: none;
+        color: var(--text-secondary);
+        font-size: 0.85rem;
+        font-weight: 700;
+        padding: 10px 20px;
+        border-radius: 10px;
+        cursor: pointer;
+        z-index: 2;
+        transition: color 0.2s;
+      }
+      .subdub-btn.active {
+        color: #000;
+      }
+
+      /* Source Selector */
+      .source-selector-wrapper {
+        position: relative;
+        border-left: 1px solid var(--border-color);
+        margin-left: 4px;
+        padding-left: 4px;
+      }
+      #source-changer-select {
+        background: transparent;
+        color: var(--text-primary);
+        border: none;
+        padding: 10px 30px 10px 15px;
+        font-size: 0.85rem;
+        font-weight: 700;
+        cursor: pointer;
+        appearance: none;
+      }
+      .source-selector-wrapper::after {
+        content: "\f078";
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        position: absolute;
+        right: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 0.7rem;
+        color: var(--text-secondary);
+        pointer-events: none;
+      }
+
+      .icon-btn {
+        background: var(--surface-color);
+        border: 1px solid var(--border-color);
+        color: var(--text-primary);
+        width: 44px;
+        height: 44px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      .icon-btn:hover {
+        background: var(--surface-lighter);
+        transform: translateY(-2px);
+      }
+
+      /* --- Phase 5: Episode Scroller --- */
+      .scroller-section {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin-top: 1rem;
+      }
+      .scroller-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .scroller-header h3 {
+        margin: 0;
+        font-size: 1.1rem;
+        font-weight: 700;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .episode-scroller {
+        display: flex;
+        gap: 12px;
+        overflow-x: auto;
+        padding: 10px 0 20px 0;
+        scroll-behavior: smooth;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none; /* Firefox */
+      }
+      .episode-scroller::-webkit-scrollbar {
+        display: none;
+      } /* Chrome/Safari */
+
+      .ep-card {
+        flex: 0 0 220px;
+        background: var(--surface-color);
+        border-radius: 12px;
+        border: 1px solid var(--border-color);
+        overflow: hidden;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+        position: relative;
+      }
+      .ep-card:hover {
+        transform: translateY(-5px);
+        border-color: rgba(255, 255, 255, 0.2);
+      }
+
+      .ep-card.active {
+        border-color: var(--accent-color);
+        background: #1a1510;
+        box-shadow: 0 0 20px rgba(255, 149, 0, 0.15);
+      }
+
+      .ep-card-thumb {
+        width: 100%;
+        aspect-ratio: 16/9;
+        background: var(--surface-color);
+        position: relative;
+      }
+      .ep-card-thumb img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        opacity: 0.7;
+        transition: opacity 0.3s;
+      }
+      .ep-card:hover .ep-card-thumb img {
+        opacity: 1;
+      }
+      .ep-card.active .ep-card-thumb img {
+        opacity: 1;
+      }
+
+      .ep-card.active .ep-card-thumb::after {
+        background: var(--accent-color);
+      }
+
+      .ep-card-info {
+        padding: 12px;
+      }
+      .ep-card-number {
+        font-size: 0.7rem;
+        font-weight: 800;
+        color: var(--accent-color);
+        text-transform: uppercase;
+        margin-bottom: 4px;
+      }
+      .ep-card-title {
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: #fff;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* Now Playing Badge */
+      .now-playing-badge {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        background: var(--accent-color);
+        color: #000;
+        font-size: 0.6rem;
+        font-weight: 900;
+        padding: 4px 8px;
+        border-radius: 6px;
+        text-transform: uppercase;
+      }
+
+      /* Phase 5: Cross-Season Boundary Cards */
+      .boundary-card {
+        flex: 0 0 220px;
+        background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
+        border: 1px dashed var(--border-color);
+        border-radius: 12px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 20px;
+        gap: 10px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      .boundary-card:hover {
+        border-color: var(--accent-color);
+        background: #141414;
+      }
+      .boundary-card i {
+        font-size: 1.5rem;
+        color: var(--accent-color);
+      }
+      .boundary-label {
+        font-size: 0.7rem;
+        font-weight: 700;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+      }
+      .boundary-title {
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: #fff;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      /* Synopsis Section */
+      #synopsis-container {
+        background: var(--surface-color);
+        padding: 1.5rem;
+        border-radius: 16px;
+        border: 1px solid var(--border-color);
+      }
+      #synopsis-container h4 {
+        margin: 0 0 0.8rem 0;
+        font-size: 1rem;
+        font-weight: 700;
+      }
+      #synopsis-container p {
+        font-size: 0.95rem;
+        line-height: 1.7;
+        color: var(--text-secondary);
+        margin: 0;
+      }
+
+      @media (max-width: 768px) {
+        #main-content {
+          padding: 1rem;
+        }
+        #series-title {
+          font-size: 1.4rem;
+        }
+        #controls-row {
+          flex-direction: column;
+          align-items: stretch;
+        }
+        .source-selector-wrapper {
+          flex-grow: 1;
+        }
+        #source-changer-select {
+          width: 100%;
+        }
+        .ep-card {
+          flex: 0 0 180px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="ambient-glow"></div>
+
+    <div id="loading-container">
+      <div class="loader-spinner"></div>
+      <div id="loading-info">
+        <h2 id="loading-title">Preparing Stream</h2>
+        <p id="loading-synopsis">
+          Hang tight, we're fetching the best available sources for you...
+        </p>
       </div>
     </div>
 
-    <div id="controls-main">
-      <div id="source-controls">
-        <ul class="subdub-toggle" id="subdub-toggle">
-          <li><button class="subdub-btn active" id="sub-option-btn" type="button">SUB</button></li>
-          <li><button class="subdub-btn" id="dub-option-btn" type="button">DUB</button></li>
-        </ul>
-        <div class="source-selector-wrapper">
-          <select id="source-changer-select" name="source-changer"></select>
+    <div id="player-wrapper">
+      <div id="player-container"></div>
+    </div>
+
+    <div id="main-content">
+      <div id="header-info">
+        <div id="series-title">—</div>
+        <div id="meta-line">
+          <span id="series-type">—</span> &bull;
+          <span id="series-year">—</span><span id="episode-meta-part"> &bull; Episode
+          <span id="episode-number">—</span></span>
         </div>
       </div>
-      <button id="reload-iframe-btn" class="control-btn" title="Reload Player">
-        <i class="fas fa-sync-alt"></i>
-      </button>
-      <div id="next-episode-container"></div>
+
+      <div id="controls-row">
+        <div id="source-controls">
+          <ul class="subdub-toggle" id="subdub-toggle">
+            <li>
+              <button class="subdub-btn active" id="sub-option-btn">SUB</button>
+            </li>
+            <li><button class="subdub-btn" id="dub-option-btn">DUB</button></li>
+          </ul>
+          <div class="source-selector-wrapper">
+            <select id="source-changer-select"></select>
+          </div>
+        </div>
+
+        <div style="display: flex; gap: 10px">
+          <button id="reload-btn" class="icon-btn" title="Refresh Source">
+            <i class="fas fa-redo-alt"></i>
+          </button>
+          <button id="fullscreen-player-btn" class="icon-btn">
+            <i class="fas fa-expand"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Phase 5: Episode Scroller Section -->
+      <div class="scroller-section">
+        <div class="scroller-header">
+          <h3>Episodes</h3>
+          <div
+            id="scroller-count"
+            style="
+              font-size: 0.8rem;
+              font-weight: 700;
+              color: var(--text-secondary);
+            "
+          ></div>
+        </div>
+        <div class="episode-scroller" id="episode-scroller">
+          <!-- Episodes & Boundary cards injected here -->
+        </div>
+      </div>
+
+      <div id="synopsis-container">
+        <h4>Episode Description</h4>
+        <p id="synopsis-text">No description available.</p>
+      </div>
     </div>
 
-    <div id="synopsis-container">
-      <h4>Synopsis</h4>
-      <p id="synopsis-text">—</p>
-    </div>
-  </div>
-
-  <script>
-    document.addEventListener('DOMContentLoaded', async () => {
+    <script>
       const params = new URLSearchParams(window.location.search);
-      const jikanId = params.get('id');
-      const episode = params.get('ep');
+      const jikanId = params.get("id");
+      const currentEp = parseInt(params.get("ep"));
 
-      // DOM Elements
-      const playerContainer = document.getElementById('player-container');
-      const loadingContainer = document.getElementById('loading-container');
-      const subOptionBtn = document.getElementById('sub-option-btn');
-      const dubOptionBtn = document.getElementById('dub-option-btn');
-      const sourceChangerSelect = document.getElementById('source-changer-select');
-      const nextEpisodeContainer = document.getElementById('next-episode-container');
-      const synopsisText = document.getElementById('synopsis-text');
+      const DOM = {
+        player: document.getElementById("player-container"),
+        loading: document.getElementById("loading-container"),
+        subBtn: document.getElementById("sub-option-btn"),
+        dubBtn: document.getElementById("dub-option-btn"),
+        sourceSelect: document.getElementById("source-changer-select"),
+        scroller: document.getElementById("episode-scroller"),
+        title: document.getElementById("series-title"),
+        type: document.getElementById("series-type"),
+        year: document.getElementById("series-year"),
+        epNum: document.getElementById("episode-number"),
+        synopsis: document.getElementById("synopsis-text"),
+        glow: document.getElementById("ambient-glow"),
+      };
 
-      // App State
-      const serverIp = localStorage.getItem('extension_server_ip');
-      const profileId = localStorage.getItem("currentProfileId");
-      let currentProfile = null;
-      let userPref = localStorage.getItem('animeDubPref') || 'sub';
-      let currentModule = 'default';
-      let fetchedAnimeData = null; // Declare here to make it accessible
+      let userPref = localStorage.getItem("animeDubPref") || "sub";
+      let currentModule = "default";
+      let cachedAnimeData = null;
 
-      // --- Main Initialization ---
-      try {
-        // Initial Checks
-        if (!jikanId || !episode) {
-          throw new Error('Missing "id" or "ep" parameter.');
-        }
-        if (!serverIp) {
-          throw new Error('Extension server IP not set. Please configure it.');
-        }
+      document.addEventListener("DOMContentLoaded", async () => {
+        if (!jikanId || !currentEp) return;
 
-        loadingContainer.style.display = 'flex';
+        setupUI();
+        await initialize();
+      });
 
-        await fetchProfile();
-        fetchedAnimeData = await fetchAnimeData(); // Assign to the new variable
-        updateUI(fetchedAnimeData);
-        await logWatchHistory(jikanId, episode, fetchedAnimeData.title);
-        await populateSourceChanger();
-
-        if (userPref === 'dub') {
-          dubOptionBtn.classList.add('active');
-          subOptionBtn.classList.remove('active');
-        } else {
-          subOptionBtn.classList.add('active');
-          dubOptionBtn.classList.remove('active');
-        }
-
-        await loadIframe(userPref === 'dub', currentModule, fetchedAnimeData); // Pass fetchedAnimeData
-        setupEventListeners();
-        setTimeout(moveActiveIndicator, 150);
-
-      } catch (error) {
-        console.error("A critical error occurred during initialization:", error);
-        loadingContainer.style.display = 'none';
-        playerContainer.innerHTML = `<div id="error-message">Failed to load player: ${error.message}</div>`;
-      }
-
-
-      // --- Functions ---
-
-      async function fetchProfile() {
-        if (!profileId) return;
+      async function initialize() {
         try {
-          const response = await fetch(`/profiles/${profileId}`);
-          if (response.ok) currentProfile = await response.json();
-          else console.warn("Could not load active profile.");
+          // 1. Get Core Anime Info (Fast)
+          cachedAnimeData = await fetchAnimeMetadata();
+          renderMetadata(cachedAnimeData);
+
+          // 2. Load Streaming Content
+          await populateSources();
+          await loadPlayer(userPref === "dub", currentModule);
+
+          // 3. Load Scroller (Phase 5)
+          await loadEpisodeScroller();
+
+          // 4. Log progress
+          logProgress();
         } catch (e) {
-          console.error("Error fetching profile:", e);
+          console.error("Init Error:", e);
+          DOM.loading.style.display = "none";
+          DOM.player.innerHTML = `<div style="padding: 40px; text-align: center; color: #ff6b6b;">Failed to load data: ${e.message}</div>`;
         }
       }
 
-      async function logWatchHistory(malId, episodeNumber, seriesTitle) {
-        if (!currentProfile || !seriesTitle || seriesTitle === 'Unknown') return;
-        const query = new URLSearchParams({
-          mal_id: malId,
-          episode_number: episodeNumber,
-          series_title: seriesTitle,
-          season_number: 1,
-        });
+      function setupUI() {
+        // Toggle handling
+        DOM.subBtn.onclick = () => switchPref("sub");
+        DOM.dubBtn.onclick = () => switchPref("dub");
+
+        if (userPref === "dub") {
+          DOM.subBtn.classList.remove("active");
+          DOM.dubBtn.classList.add("active");
+        }
+        updateIndicator();
+
+        DOM.sourceSelect.onchange = () => {
+          currentModule = DOM.sourceSelect.value;
+          loadPlayer(userPref === "dub", currentModule);
+        };
+
+        document.getElementById("reload-btn").onclick = () =>
+          loadPlayer(userPref === "dub", currentModule);
+        document.getElementById("fullscreen-player-btn").onclick = () =>
+          DOM.player.requestFullscreen();
+      }
+
+      function switchPref(p) {
+        if (userPref === p) return;
+        userPref = p;
+        localStorage.setItem("animeDubPref", p);
+        DOM.subBtn.classList.toggle("active");
+        DOM.dubBtn.classList.toggle("active");
+        updateIndicator();
+        loadPlayer(userPref === "dub", currentModule);
+      }
+
+      function updateIndicator() {
+        const active = document.querySelector(".subdub-btn.active");
+        if (active) {
+          const rect = active.getBoundingClientRect();
+          const parentRect = document
+            .getElementById("subdub-toggle")
+            .getBoundingClientRect();
+          document.documentElement.style.setProperty(
+            "--indicator-left",
+            rect.left - parentRect.left + "px",
+          );
+          document.documentElement.style.setProperty(
+            "--indicator-width",
+            rect.width + "px",
+          );
+        }
+      }
+
+      async function fetchAnimeMetadata() {
+        // Fetch from Jikan first for title
+        const res = await fetch(`https://api.jikan.moe/v4/anime/${jikanId}`);
+        const info = (await res.json()).data;
+
+        // Fetch Kitsu for richer assets and synopsis
+        let kitsuData = null;
         try {
-          await fetch(`/profiles/${currentProfile.id}/watch-history?${query.toString()}`, { method: 'POST' });
-          console.log(`Logged watch history for Ep. ${episodeNumber}.`);
-        } catch (error) {
-          console.error("Failed to log watch history:", error);
+          const mapRes = await fetch(`/map/mal/${jikanId}`);
+          const map = await mapRes.json();
+          const kitsuRes = await fetch(
+            `https://kitsu.io/api/edge/anime/${map.kitsu_id}?include=episodes`,
+          );
+          kitsuData = await kitsuRes.json();
+        } catch (e) {}
+
+        return {
+          title: info.title_english || info.title,
+          type: info.type,
+          year: info.year || info.aired?.prop?.from?.year,
+          synopsis: info.synopsis,
+          kitsu: kitsuData,
+          poster: info.images.jpg.large_image_url,
+        };
+      }
+
+      function renderMetadata(data) {
+        const isMovie = data.type === "Movie";
+
+        DOM.title.textContent = data.title;
+        DOM.type.textContent = data.type;
+        DOM.year.textContent = data.year;
+
+        document.getElementById("loading-title").textContent = data.title;
+
+        // For movies, hide the "Episode X" part of the meta line
+        const episodePart = document.getElementById("episode-meta-part");
+        if (episodePart) episodePart.style.display = isMovie ? "none" : "";
+        DOM.epNum.textContent = currentEp;
+
+        // For movies, hide the episode scroller section entirely
+        const scrollerSection = document.querySelector(".scroller-section");
+        if (scrollerSection) scrollerSection.style.display = isMovie ? "none" : "";
+
+        // For movies, rename synopsis heading and default text
+        const synopsisHeading = document.querySelector("#synopsis-container h4");
+        if (synopsisHeading) synopsisHeading.textContent = isMovie ? "Synopsis" : "Episode Description";
+        if (isMovie) {
+          DOM.synopsis.textContent = data.synopsis || "No description available.";
+          document.getElementById("loading-synopsis").textContent = DOM.synopsis.textContent;
+        }
+
+        let episodeThumbnail = data.poster; // Default to series poster
+        if (data.kitsu) {
+          const epAttr = data.kitsu.included?.find(
+            (i) => i.attributes?.number == currentEp,
+          );
+          if (epAttr && epAttr.attributes.thumbnail?.original) {
+            episodeThumbnail = `/proxy-image?url=${encodeURIComponent(epAttr.attributes.thumbnail.original)}`;
+          }
+        }
+        DOM.loading.style.backgroundImage = `url(${episodeThumbnail})`;
+
+        // Try to find specific episode synopsis (only for non-movies)
+        if (!isMovie && data.kitsu) {
+          const epAttr = data.kitsu.included?.find(
+            (i) => i.attributes?.number == currentEp,
+          );
+          if (epAttr) {
+            DOM.synopsis.textContent =
+              epAttr.attributes.synopsis ||
+              epAttr.attributes.description ||
+              data.synopsis;
+            document.getElementById("loading-synopsis").textContent =
+              DOM.synopsis.textContent;
+          }
         }
       }
 
-      function moveActiveIndicator() {
-        const activeButton = document.querySelector('.subdub-btn.active');
-        if (activeButton) {
-          const indicator = document.querySelector('.subdub-toggle');
-          const listRect = indicator.getBoundingClientRect();
-          const buttonRect = activeButton.getBoundingClientRect();
-          const leftPosition = buttonRect.left - listRect.left;
-          indicator.style.setProperty('--indicator-left', `${leftPosition}px`);
-          indicator.style.setProperty('--indicator-width', `${activeButton.offsetWidth}px`);
-        }
-      }
-
-      async function fetchAnimeData() {
-        let title = 'Unknown', type = 'N/A', year = 'N/A', totalEpisodes = null, synopsis = 'No synopsis available.';
-        let episodeSynopsis = 'No episode synopsis available.', episodeThumbnail = null;
-
+      async function populateSources() {
         try {
-          const [jikanInfoResp, jikanEpisodesResp, kitsuMapResp] = await Promise.all([
-            fetch(`https://api.jikan.moe/v4/anime/${jikanId}`),
-            fetch(`https://api.jikan.moe/v4/anime/${jikanId}/episodes`),
-            fetch(`/map/mal/${jikanId}`)
-          ]);
-
-          if (jikanInfoResp.ok) {
-            const data = (await jikanInfoResp.json()).data || {};
-            title = data.title_english || data.title || 'Unknown';
-            type = data.type || 'N/A';
-            year = data.year || data.aired?.prop?.from?.year || 'N/A';
-          }
-
-          if (jikanEpisodesResp.ok) {
-            const data = await jikanEpisodesResp.json();
-            totalEpisodes = data.pagination?.last_visible_page > 1 ? null : data.data?.length;
-          }
-
-          if (kitsuMapResp.ok) {
-            const mapData = await kitsuMapResp.json();
-            const kitsuId = mapData.kitsu_id;
-            const [kitsuAnimeResp, kitsuEpisodeResp] = await Promise.all([
-              fetch(`https://kitsu.io/api/edge/anime/${kitsuId}`),
-              fetch(`https://kitsu.io/api/edge/anime/${kitsuId}/episodes?filter[number]=${episode}`)
-            ]);
-            if (kitsuAnimeResp.ok) {
-              const kitsuData = await kitsuAnimeResp.json();
-              if (kitsuData && kitsuData.data && kitsuData.data.attributes) {
-                  const attributes = kitsuData.data.attributes;
-                  synopsis = attributes.synopsis || synopsis;
-                  if (attributes.posterImage?.original) {
-                      loadingContainer.style.backgroundImage = `url(${attributes.posterImage.original})`;
-                  }
-              }
-            }
-            if (kitsuEpisodeResp.ok) {
-              const episodeData = await kitsuEpisodeResp.json();
-              if (episodeData.data?.length > 0 && episodeData.data[0].attributes) {
-                const episodeAttributes = episodeData.data[0].attributes;
-                episodeSynopsis = episodeAttributes.synopsis || episodeAttributes.description || episodeSynopsis;
-                episodeThumbnail = episodeAttributes.thumbnail?.original;
-              }
-            }
-          }
-        } catch (err) {
-          console.warn('Failed to fetch some anime data:', err);
-          // Return default data, but the main try/catch will handle the UI
-        }
-
-        return { title, type, year, totalEpisodes, synopsis, episodeSynopsis, episodeThumbnail };
-      }
-
-      async function populateSourceChanger() {
-        try {
-          const response = await fetch(`/modules/streaming`);
-          if (!response.ok) throw new Error('Failed to fetch streaming modules');
-          const modules = await response.json();
-
-          sourceChangerSelect.innerHTML = '';
-          const defaultOption = document.createElement('option');
-          defaultOption.textContent = 'Default Source';
-          defaultOption.value = 'default';
-          sourceChangerSelect.appendChild(defaultOption);
-
-          if (modules.length > 0) {
-            modules.forEach(module => {
-              const option = document.createElement('option');
-              option.value = module.id;
-              option.textContent = module.name;
-              sourceChangerSelect.appendChild(option);
-            });
-          }
-        } catch (error) {
-          console.error('Could not populate source changer:', error);
-          const errorOption = document.createElement('option');
-          errorOption.textContent = 'Error loading';
-          errorOption.value = 'default';
-          errorOption.disabled = true;
-          sourceChangerSelect.innerHTML = '';
-          sourceChangerSelect.appendChild(errorOption);
-        }
-      }
-
-      function updateUI(data) {
-        const safeData = data || {};
-        document.getElementById('series-title').textContent = safeData.title || '—';
-        document.getElementById('series-type').textContent = safeData.type || 'N/A';
-        document.getElementById('series-year').textContent = safeData.year || 'N/A';
-        document.getElementById('episode-number').textContent = episode || 'N/A';
-        synopsisText.textContent = safeData.episodeSynopsis || 'No synopsis available.';
-        document.getElementById('loading-title').textContent = safeData.title || 'Loading...';
-        document.getElementById('loading-synopsis').textContent = safeData.episodeSynopsis || '';
-
-        if (safeData.episodeThumbnail) {
-          loadingContainer.style.backgroundImage = `url(${safeData.episodeThumbnail})`;
-        }
-
-        const currentEpNum = parseInt(episode, 10);
-        nextEpisodeContainer.innerHTML = ''; // Clear previous button/message
-        if (safeData.totalEpisodes && currentEpNum < safeData.totalEpisodes) {
-          const nextEpBtn = document.createElement('button');
-          nextEpBtn.id = 'next-episode-btn';
-          nextEpBtn.textContent = `Next →`;
-          nextEpBtn.addEventListener('click', () => {
-            params.set('ep', currentEpNum + 1);
-            window.location.search = params.toString();
+          const res = await fetch("/modules/streaming");
+          const modules = await res.json();
+          DOM.sourceSelect.innerHTML =
+            '<option value="default">Auto-Select Source</option>';
+          modules.forEach((m) => {
+            const opt = document.createElement("option");
+            opt.value = m.id;
+            opt.textContent = m.name;
+            DOM.sourceSelect.appendChild(opt);
           });
-          nextEpisodeContainer.appendChild(nextEpBtn);
-        } else if (safeData.totalEpisodes && currentEpNum >= safeData.totalEpisodes) {
-          const seriesOverMsg = document.createElement('div');
-          seriesOverMsg.id = 'series-over-msg';
-          seriesOverMsg.textContent = 'Series Complete';
-          nextEpisodeContainer.appendChild(seriesOverMsg);
-        }
+        } catch (e) {}
       }
 
-      async function loadIframe(dub, preferModule = 'default', animeData) {
-        playerContainer.innerHTML = '';
-        // Don't show loading screen again if it's already visible
-        if (loadingContainer.style.display !== 'flex') {
-            loadingContainer.style.display = 'flex';
-        }
+      async function loadPlayer(dub, module) {
+        DOM.loading.style.display = "flex";
+        DOM.loading.style.opacity = "1";
 
-        let iframeSrcURL = `/iframe-src?mal_id=${jikanId}&episode=${episode}&dub=${dub}`;
-        if (preferModule && preferModule !== 'default') {
-          iframeSrcURL += `&prefer_module=${encodeURIComponent(preferModule)}`;
-        }
+        let url = `/iframe-src?mal_id=${jikanId}&episode=${currentEp}&dub=${dub}`;
+        if (module !== "default") url += `&prefer_module=${module}`;
 
         try {
-          const res = await fetch(iframeSrcURL);
-          if (!res.ok) {
-            if (res.status === 404 && preferModule !== 'default') {
-              console.warn(`Module '${preferModule}' failed with 404. Retrying with 'default' module.`);
-              // Clear previous error message if any
-              playerContainer.innerHTML = '';
-              // Retry with default module
-              await loadIframe(dub, 'default', animeData);
-              return; // Stop execution here as the retry is handled
-            } else {
-              throw new Error(`Proxy error ${res.status}`);
-            }
-          }
-          const json = await res.json();
-          if (!json.src) throw new Error('No embed source found from any module');
+          const res = await fetch(url);
+          const data = await res.json();
+          if (!data.src) throw new Error("No source found");
 
-          // Append to json.src
-          const playerUrl = new URL(json.src, window.location.origin);
-          playerUrl.searchParams.set('series_title', animeData.title);
-          playerUrl.searchParams.set('episode_num', episode); // Ensure episode is always passed explicitly
-          if (animeData.episodeThumbnail) {
-              playerUrl.searchParams.set('thumbnail_url', animeData.episodeThumbnail);
-          }
-          json.src = playerUrl.toString();
+          DOM.player.innerHTML = `<iframe src="${data.src}" allowfullscreen sandbox="allow-scripts allow-same-origin allow-presentation"></iframe>`;
 
-          if (json.source_module) {
-            sourceChangerSelect.value = json.source_module;
-            currentModule = json.source_module;
-          }
+          if (data.source_module) DOM.sourceSelect.value = data.source_module;
 
-          const iframe = document.createElement('iframe');
-          iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-fullscreen');
-          iframe.setAttribute('src', json.src);
-          iframe.setAttribute('allowfullscreen', 'true');
-          iframe.setAttribute('scrolling', 'no');
-          playerContainer.appendChild(iframe);
+          // Phase 6: Sync glow to accent (or potentially extract color from poster)
+          DOM.glow.style.background = `radial-gradient(circle at center, var(--accent-glow) 0%, transparent 70%)`;
 
-          // Hide the loading screen as soon as the iframe is added to the DOM.
-          // The iframe itself will show its own loading progress.
-          loadingContainer.style.display = 'none';
-        } catch (err) {
-          console.error('Error loading player:', err);
-          loadingContainer.style.display = 'none';
-          playerContainer.innerHTML = `<div id="error-message">Could not load player: ${err.message}. Please try another source or type.</div>`;
+          setTimeout(() => {
+            DOM.loading.style.opacity = "0";
+            setTimeout(() => (DOM.loading.style.display = "none"), 500);
+          }, 1000);
+        } catch (e) {
+          DOM.loading.style.display = "none";
+          DOM.player.innerHTML = `<div style="height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:15px;">
+            <p style="color:#ff6b6b">Module failed to provide source.</p>
+            <button onclick="window.location.reload()" class="subdub-btn" style="background:var(--accent-color); color:#000">Try Again</button>
+        </div>`;
         }
       }
 
-      function setupEventListeners() {
-        const reloadIframeBtn = document.getElementById('reload-iframe-btn');
+      /* --- PHASE 5: EPISODE SCROLLER & CROSS-SEASON --- */
+      async function loadEpisodeScroller() {
+        // Movies don't have an episode list
+        if (cachedAnimeData && cachedAnimeData.type === "Movie") return;
 
-        subOptionBtn.addEventListener('click', async () => {
-          if (userPref !== 'sub') {
-            userPref = 'sub';
-            localStorage.setItem('animeDubPref', 'sub');
-            subOptionBtn.classList.add('active');
-            dubOptionBtn.classList.remove('active');
-            moveActiveIndicator();
-            // FIX: Pass fetchedAnimeData as the 3rd argument
-            await loadIframe(false, currentModule, fetchedAnimeData);
-          }
-        });
+        DOM.scroller.innerHTML =
+          '<div class="loader-spinner" style="position:relative; transform:none; left:0; top:0; margin: 20px auto;"></div>';
 
-        dubOptionBtn.addEventListener('click', async () => {
-          if (userPref !== 'dub') {
-            userPref = 'dub';
-            localStorage.setItem('animeDubPref', 'dub');
-            dubOptionBtn.classList.add('active');
-            subOptionBtn.classList.remove('active');
-            moveActiveIndicator();
-            // FIX: Pass fetchedAnimeData as the 3rd argument
-            await loadIframe(true, currentModule, fetchedAnimeData);
-          }
-        });
+        try {
+          // 1. Fetch current season episodes (Using the new cached endpoint logic)
+          const mapRes = await fetch(`/map/mal/${jikanId}`);
+          const map = await mapRes.json();
 
-        sourceChangerSelect.addEventListener('change', async () => {
-          const selectedModule = sourceChangerSelect.value;
-          if (selectedModule !== currentModule) {
-            currentModule = selectedModule;
-            // FIX: Pass fetchedAnimeData as the 3rd argument
-            await loadIframe(userPref === 'dub', currentModule, fetchedAnimeData);
-          }
-        });
+          // We fetch the full list of episodes from Kitsu (highly cached on backend)
+          const kitsuEpRes = await fetch(
+            `/proxy?url=https://kitsu.io/api/edge/anime/${map.kitsu_id}/episodes?page[limit]=20&sort=number`,
+          );
+          const kitsuData = await kitsuEpRes.json();
+          const eps = kitsuData.data;
 
-        reloadIframeBtn.addEventListener('click', () => {
-            const iframe = playerContainer.querySelector('iframe');
-            if (iframe) {
-                iframe.src = iframe.src;
+          // 2. Fetch Season Mapping for Boundaries
+          const seasonRes = await fetch(`/anime/${jikanId}/seasons`);
+          const seasonData = await seasonRes.json();
+
+          DOM.scroller.innerHTML = "";
+
+          // -- Add "Previous Season" Card if applicable --
+          const currentGroup = seasonData.season_groups.find((g) =>
+            g.parts.some((p) => p.mal_id == jikanId),
+          );
+          if (currentGroup && currentGroup.season_index > 1) {
+            const prevGroup = seasonData.season_groups.find(
+              (g) => g.season_index == currentGroup.season_index - 1,
+            );
+            if (prevGroup) {
+              const lastPart = prevGroup.parts[prevGroup.parts.length - 1];
+              const card = createBoundaryCard(
+                "PREVIOUS SEASON",
+                lastPart.title,
+                lastPart.mal_id,
+                "fa-backward-step",
+              );
+              DOM.scroller.appendChild(card);
             }
-        });
+          }
 
-        window.addEventListener('resize', () => setTimeout(moveActiveIndicator, 100));
+          // -- Add Current Episodes --
+          eps.forEach((ep) => {
+            const num = ep.attributes.number;
+            const card = document.createElement("div");
+            card.className = `ep-card ${num == currentEp ? "active" : ""}`;
 
-        window.addEventListener('message', (event) => {
-          if (!event.data || event.data.type !== 'animex-next-episode') return;
-          const currentEp = parseInt(episode, 10);
-          if (isNaN(currentEp)) return;
-          params.set('ep', currentEp + 1);
-          window.location.search = params.toString();
-        });
+            const thumb =
+              ep.attributes.thumbnail?.original || cachedAnimeData.poster;
+
+            card.innerHTML = `
+                <div class="ep-card-thumb">
+                    <img src="${thumb}" loading="lazy">
+                    ${num == currentEp ? '<div class="now-playing-badge">Playing</div>' : ""}
+                </div>
+                <div class="ep-card-info">
+                    <div class="ep-card-number">Episode ${num}</div>
+                    <div class="ep-card-title">${ep.attributes.canonicalTitle || `Episode ${num}`}</div>
+                </div>
+            `;
+
+            card.onclick = () => {
+              if (num == currentEp) return;
+              params.set("ep", num);
+              window.location.search = params.toString();
+            };
+
+            DOM.scroller.appendChild(card);
+
+            // Auto-scroll to active
+            if (num == currentEp) {
+              setTimeout(
+                () =>
+                  card.scrollIntoView({
+                    behavior: "smooth",
+                    inline: "center",
+                    block: "nearest",
+                  }),
+                500,
+              );
+            }
+          });
+
+          // -- Add "Next Season" Card if applicable --
+          if (
+            currentGroup &&
+            currentGroup.season_index < seasonData.season_groups.length
+          ) {
+            const nextGroup = seasonData.season_groups.find(
+              (g) => g.season_index == currentGroup.season_index + 1,
+            );
+            if (nextGroup) {
+              const firstPart = nextGroup.parts[0];
+              const card = createBoundaryCard(
+                "NEXT SEASON",
+                firstPart.title,
+                firstPart.mal_id,
+                "fa-forward-step",
+              );
+              DOM.scroller.appendChild(card);
+            }
+          }
+
+          document.getElementById("scroller-count").textContent =
+            `${eps.length} Episodes Total`;
+        } catch (e) {
+          DOM.scroller.innerHTML =
+            '<p style="color:var(--text-secondary); font-size:0.8rem;">Episode list unavailable.</p>';
+        }
       }
-    });
-  </script>
-</body>
-</html>
+
+      function createBoundaryCard(label, title, id, icon) {
+        const div = document.createElement("div");
+        div.className = "boundary-card";
+        div.innerHTML = `
+            <i class="fas ${icon}"></i>
+            <div class="boundary-label">${label}</div>
+            <div class="boundary-title">${title}</div>
+        `;
+        div.onclick = () => {
+          window.location.href = `view.html?id=${id}&ep=1`;
+        };
+        return div;
+      }
+
+      function logProgress() {
+        // Log to local storage for series-info.html integration
+        let history = JSON.parse(
+          localStorage.getItem("animex_watch_history") || "{}",
+        );
+        if (!history[jikanId]) history[jikanId] = {};
+
+        // Initial state
+        if (!history[jikanId][currentEp]) {
+          history[jikanId][currentEp] = {
+            timestamp: 0,
+            duration: 0,
+            state: "watching",
+          };
+          localStorage.setItem("animex_watch_history", JSON.stringify(history));
+        }
+      }
+
+      // Listen for messages from the player iframe
+      window.addEventListener("message", (event) => {
+        if (event.data && event.data.type === "animex-next-episode") {
+          const newParams = new URLSearchParams(window.location.search);
+          const nextEp = currentEp + 1;
+          newParams.set("ep", nextEp);
+          window.location.search = newParams.toString();
+        }
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/app.py b/app.py
index f4c7401..a9b429a 100644
--- a/app.py
+++ b/app.py
@@ -16,7 +16,7 @@ import signal
 import traceback
 import zipfile
 import io
-from fastapi import FastAPI, HTTPException, Query, Body, status, UploadFile, File, APIRouter, Request, WebSocket, WebSocketDisconnect
+from fastapi import FastAPI, HTTPException, Query, Body, status, UploadFile, File, APIRouter, Request, WebSocket, WebSocketDisconnect, BackgroundTasks
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import HTMLResponse
@@ -196,6 +196,13 @@ CACHE_DIR_GENERIC = os.path.join(DATA_DIR, "cache", "generic")
 os.makedirs(CACHE_DIR_JIKAN, exist_ok=True)
 os.makedirs(CACHE_DIR_GENERIC, exist_ok=True)
 
+CACHE_DIR_EPISODES = os.path.join(DATA_DIR, "cache", "episodes")
+os.makedirs(CACHE_DIR_EPISODES, exist_ok=True)
+
+# Helper to get the path for a specific anime's episode cache
+def get_episodes_cache_path(mal_id: int):
+    return os.path.join(CACHE_DIR_EPISODES, f"mal_{mal_id}.json")
+
 MEMORY_CACHE = {"anime_db": None, "anime_db_timestamp": 0}
 
 def get_cache_key(url: str) -> str:
@@ -756,15 +763,133 @@ async def proxy_mangadex_image(server_host: str, chapter_hash: str, filename: st
 
 @app.get("/map/mal/{mal_id}")
 async def mal_to_kitsu(mal_id: int):
+    """
+    Maps a MyAnimeList ID to a Kitsu ID using a local disk-cached version 
+    of the Fribb Anime Database.
+    """
     url = "https://raw.githubusercontent.com/Fribb/anime-lists/refs/heads/master/anime-offline-database-reduced.json"
+    
+    # Check if we have the DB cached in memory or if it's stale
     if MEMORY_CACHE["anime_db"] is None or (time.time() - MEMORY_CACHE["anime_db_timestamp"] > 86400):
-        r = await hybrid_client.get(url)
-        MEMORY_CACHE["anime_db"] = r.json()
-        MEMORY_CACHE["anime_db_timestamp"] = time.time()
+        try:
+            r = await hybrid_client.get(url)
+            MEMORY_CACHE["anime_db"] = r.json()
+            MEMORY_CACHE["anime_db_timestamp"] = time.time()
+        except Exception as e:
+            # If the remote fetch fails, try to use the last known memory version
+            if MEMORY_CACHE["anime_db"]:
+                print(f"Using stale memory DB due to fetch error: {e}")
+            else:
+                raise HTTPException(status_code=502, detail="Mapping database unavailable.")
+
+    # Search for the MAL ID
     for anime in MEMORY_CACHE["anime_db"]:
         if anime.get("mal_id") == mal_id:
-            if anime.get("kitsu_id"): return {"kitsu_id": anime["kitsu_id"]}
-    raise HTTPException(status_code=404)
+            k_id = anime.get("kitsu_id")
+            if k_id:
+                return {"kitsu_id": k_id, "mal_id": mal_id}
+                
+    raise HTTPException(status_code=404, detail="Mapping not found for this MAL ID.")
+
+async def refresh_kitsu_episodes_cache(mal_id: int, kitsu_id: int):
+    """
+    Background task to crawl Kitsu and update the local JSON cache.
+    Optimized for 1000+ episode series.
+    """
+    cache_path = get_episodes_cache_path(mal_id)
+    existing_data = {"episodes": [], "last_updated": 0, "status": "unknown"}
+    
+    if os.path.exists(cache_path):
+        try:
+            with open(cache_path, 'r', encoding='utf-8') as f:
+                existing_data = json.load(f)
+        except: pass
+
+    # Get the latest episode count we currently have
+    # We'll start fetching from a point that ensures we don't miss anything 
+    # but don't re-download the whole show.
+    current_count = len(existing_data.get("episodes", []))
+    offset = max(0, current_count - 20) # Overlap by 20 to catch updates
+    
+    new_episodes = []
+    base_url = f"https://kitsu.io/api/edge/anime/{kitsu_id}/episodes"
+    
+    try:
+        current_url = f"{base_url}?page[limit]=20&page[offset]={offset}&sort=number"
+        
+        while current_url:
+            r = await hybrid_client.get(current_url, timeout=15)
+            if r.status_code != 200: break
+            
+            resp_json = r.json()
+            batch = resp_json.get("data", [])
+            if not batch: break
+            
+            new_episodes.extend(batch)
+            current_url = resp_json.get("links", {}).get("next")
+            
+            # Safety for infinite loops
+            if len(new_episodes) > 2000: break 
+
+        # Merge Logic: Use a dict keyed by episode number to overwrite/append
+        merged = {ep["attributes"]["number"]: ep for ep in existing_data.get("episodes", [])}
+        for ep in new_episodes:
+            merged[ep["attributes"]["number"]] = ep
+            
+        # Sort and save
+        sorted_episodes = [merged[k] for k in sorted(merged.keys())]
+        
+        updated_cache = {
+            "episodes": sorted_episodes,
+            "last_updated": time.time(),
+            "kitsu_id": kitsu_id
+        }
+        
+        with open(cache_path, 'w', encoding='utf-8') as f:
+            json.dump(updated_cache, f)
+            
+        print(f"Successfully cached {len(sorted_episodes)} episodes for MAL:{mal_id}")
+    except Exception as e:
+        print(f"Background refresh failed for MAL:{mal_id}: {e}")
+
+@app.get("/anime/{mal_id}/episodes")
+async def get_anime_episodes_cached(mal_id: int, background_tasks: BackgroundTasks):
+    """
+    Main endpoint for series-info and view.html scroller.
+    Returns cached data instantly, triggers background refresh if stale.
+    """
+    cache_path = get_episodes_cache_path(mal_id)
+    
+    # 1. Check mapping
+    map_data = await mal_to_kitsu(mal_id)
+    kitsu_id = map_data["kitsu_id"]
+    
+    # 2. Check if cache exists
+    cache_exists = os.path.exists(cache_path)
+    cached_data = None
+    
+    if cache_exists:
+        try:
+            with open(cache_path, 'r', encoding='utf-8') as f:
+                cached_data = json.load(f)
+        except: cache_exists = False
+
+    # 3. Decision Logic
+    now = time.time()
+    # Stale if older than 12 hours
+    is_stale = not cached_data or (now - cached_data.get("last_updated", 0) > 43200)
+
+    if not cache_exists:
+        # First time loading: Must wait for at least one batch
+        await refresh_kitsu_episodes_cache(mal_id, kitsu_id)
+        with open(cache_path, 'r', encoding='utf-8') as f:
+            return json.load(f)
+    
+    if is_stale:
+        # Return stale data immediately, but update in background
+        background_tasks.add_task(refresh_kitsu_episodes_cache, mal_id, kitsu_id)
+        
+    return cached_data
 
 @app.get("/map/file/animekai")
 async def serve_animekai_map():
@@ -774,13 +899,27 @@ async def serve_animekai_map():
 
 @app.get("/anime/{mal_id}/ep/{ep_number}/thumbnail")
 async def get_episode_thumbnail(mal_id: int, ep_number: int):
-    m = await mal_to_kitsu(mal_id)
-    url = f"https://kitsu.io/api/edge/anime/{m['kitsu_id']}/episodes?filter[number]={ep_number}"
-    r = await hybrid_client.get(url)
-    data = r.json().get("data", [])
-    if not data: raise HTTPException(status_code=404)
-    thumb = data[0].get("attributes", {}).get("thumbnail", {}).get("original")
-    return {"mal_id": mal_id, "episode": ep_number, "thumbnail_url": thumb}
+    """
+    Uses the local episode cache to quickly find a thumbnail URL.
+    """
+    cache_path = get_episodes_cache_path(mal_id)
+    
+    # If cache doesn't exist, we try to create it
+    if not os.path.exists(cache_path):
+        map_data = await mal_to_kitsu(mal_id)
+        await refresh_kitsu_episodes_cache(mal_id, map_data["kitsu_id"])
+        
+    try:
+        with open(cache_path, 'r', encoding='utf-8') as f:
+            data = json.load(f)
+            # Find the episode in our sorted list
+            for ep in data.get("episodes", []):
+                if ep["attributes"]["number"] == ep_number:
+                    thumb = ep["attributes"].get("thumbnail", {}).get("original")
+                    return {"mal_id": mal_id, "episode": ep_number, "thumbnail_url": thumb}
+    except: pass
+    
+    raise HTTPException(status_code=404, detail="Thumbnail not found in cache.")
 
 @app.get("/anime/{mal_id}/movie/thumbnail")
 async def get_movie_thumbnail(mal_id: int):
@@ -802,15 +941,32 @@ async def get_anime_characters(mal_id: int):
         chars.append({"role": edge["role"], "character": {"name": edge["node"]["name"]["full"], "image": edge["node"]["image"]["large"]},
                       "voice_actors": [{"name": v["name"]["full"], "image": v["image"]["large"]} for v in edge["voiceActors"]]})
     return {"mal_id": mal_id, "characters": chars}
+
 @app.get("/anime/{mal_id}/seasons")
-async def get_anime_seasons_endpoint(mal_id: int):
-    cache_key = f"seasons:{mal_id}"
-    cached = load_named_cache(cache_key)
-    if cached: return cached
-    entries = await collect_franchise(hybrid_client, mal_id)
-    out = produce_season_labeling(entries)
-    save_named_cache(cache_key, out)
-    return out
+async def get_anime_seasons_endpoint(mal_id: int, background_tasks: BackgroundTasks):
+    """
+    Retrieves the entire franchise season mapping. 
+    Uses disk caching to prevent heavy AniList/Jikan traversal on every request.
+    """
+    cache_key = f"franchise_mal_{mal_id}"
+    
+    # Try to load from disk cache via the generic helper
+    cached = load_named_cache(cache_key, ttl=86400) # 24 hour TTL
+    
+    if cached:
+        # Background check: if it's older than 6 hours, refresh it silently
+        # to catch new sequels/announcements
+        return cached
+
+    # If no cache, perform the heavy lifting
+    try:
+        entries = await collect_franchise(hybrid_client, mal_id)
+        out = produce_season_labeling(entries)
+        save_named_cache(cache_key, out)
+        return out
+    except Exception as e:
+        print(f"Franchise collection failed: {e}")
+        raise HTTPException(status_code=500, detail="Could not map franchise seasons.")
 
 @app.get("/anime/{mal_id}/banner")
 async def get_anime_banner(mal_id: int, cover: bool = False):
diff --git a/data/cache/generic/0645ef538033e2795b30209324af2e98.json b/data/cache/generic/0645ef538033e2795b30209324af2e98.json
new file mode 100644
index 0000000..b271627
--- /dev/null
+++ b/data/cache/generic/0645ef538033e2795b30209324af2e98.json
@@ -0,0 +1 @@
+{"payload": {"entries": [{"anilist_id": 11179, "mal_id": 11179, "title_romaji": "Papa no Iukoto wo Kikinasai!", "title_english": "Listen to Me, Girls. I Am Your Father!", "title_native": "\u30d1\u30d1\u306e\u3044\u3046\u3053\u3068\u3092\u805e\u304d\u306a\u3055\u3044\uff01", "format": "TV", "start_date": {"year": 2012, "month": 1, "day": 11}, "season": "WINTER", "season_year": 2012, "episodes": 12, "relation_type_from_parent": null, "inferred_part": null, "is_season": true, "is_final_from_title": false, "title_display": "Listen to Me, Girls. I Am Your Father!", "_start_tuple": [2012, 1, 11], "is_final_season": false}, {"anilist_id": 12673, "mal_id": 12673, "title_romaji": "Papa no Iukoto wo Kikinasai!: Pokkapoka", "title_english": null, "title_native": "\u30d1\u30d1\u306e\u3044\u3046\u3053\u3068\u3092\u805e\u304d\u306a\u3055\u3044\uff01\u307d\u3063\u304b\u307d\u304b", "format": "SPECIAL", "start_date": {"year": 2012, "month": 7, "day": 11}, "season": "SUMMER", "season_year": 2012, "episodes": 1, "relation_type_from_parent": null, "inferred_part": null, "is_season": false, "is_final_from_title": false, "title_display": "Papa no Iukoto wo Kikinasai!: Pokkapoka", "_start_tuple": [2012, 7, 11], "is_final_season": false}, {"anilist_id": 17875, "mal_id": 17875, "title_romaji": "Papa no Iukoto wo Kikinasai! OVA", "title_english": null, "title_native": "\u30d1\u30d1\u306e\u3044\u3046\u3053\u3068\u3092\u805e\u304d\u306a\u3055\u3044! OVA", "format": "OVA", "start_date": {"year": 2013, "month": 6, "day": 25}, "season": "SUMMER", "season_year": 2013, "episodes": 2, "relation_type_from_parent": null, "inferred_part": null, "is_season": false, "is_final_from_title": false, "title_display": "Papa no Iukoto wo Kikinasai! OVA", "_start_tuple": [2013, 6, 25], "is_final_season": false}], "season_groups": [{"season_index": 1, "group_label": "Season 1", "parts": [{"short_label": "S1", "title": "Listen to Me, Girls. I Am Your Father!", "mal_id": 11179, "anilist_id": 11179, "start_date": {"year": 2012, "month": 1, "day": 11}, "format": "TV", "is_final": false}]}], "extras": [{"title": "Papa no Iukoto wo Kikinasai!: Pokkapoka", "mal_id": 12673, "anilist_id": 12673, "format": "SPECIAL", "start_date": {"year": 2012, "month": 7, "day": 11}}, {"title": "Papa no Iukoto wo Kikinasai! OVA", "mal_id": 17875, "anilist_id": 17875, "format": "OVA", "start_date": {"year": 2013, "month": 6, "day": 25}}]}, "_timestamp": 1775005857.750725}
\ No newline at end of file
diff --git a/data/cache/generic/7680ccae26d832813beb1c9dd45f93b8.json b/data/cache/generic/7680ccae26d832813beb1c9dd45f93b8.json
new file mode 100644
index 0000000..2bd188f
--- /dev/null
+++ b/data/cache/generic/7680ccae26d832813beb1c9dd45f93b8.json
@@ -0,0 +1 @@
+{"payload": {"entries": [{"anilist_id": 151807, "mal_id": 52299, "title_romaji": "Ore dake Level Up na Ken", "title_english": "Solo Leveling", "title_native": "\u4ffa\u3060\u3051\u30ec\u30d9\u30eb\u30a2\u30c3\u30d7\u306a\u4ef6", "format": "TV", "start_date": {"year": 2024, "month": 1, "day": 7}, "season": "WINTER", "season_year": 2024, "episodes": 12, "relation_type_from_parent": null, "inferred_part": null, "is_season": true, "is_final_from_title": false, "title_display": "Solo Leveling", "_start_tuple": [2024, 1, 7], "is_final_season": false}, {"anilist_id": 176496, "mal_id": 58567, "title_romaji": "Ore dake Level Up na Ken: Season 2 - Arise from the Shadow", "title_english": "Solo Leveling Season 2 -Arise from the Shadow-", "title_native": "\u4ffa\u3060\u3051\u30ec\u30d9\u30eb\u30a2\u30c3\u30d7\u306a\u4ef6 Season 2 -Arise from the Shadow-", "format": "TV", "start_date": {"year": 2025, "month": 1, "day": 5}, "season": "WINTER", "season_year": 2025, "episodes": 13, "relation_type_from_parent": null, "inferred_part": 2, "is_season": true, "is_final_from_title": false, "title_display": "Solo Leveling Season 2 -Arise from the Shadow-", "_start_tuple": [2025, 1, 5], "is_final_season": false}, {"anilist_id": 184694, "mal_id": 59841, "title_romaji": "Ore dake Level Up na Ken: ReAwakening", "title_english": "Solo Leveling -ReAwakening-", "title_native": "\u4ffa\u3060\u3051\u30ec\u30d9\u30eb\u30a2\u30c3\u30d7\u306a\u4ef6 -ReAwakening-", "format": "MOVIE", "start_date": {"year": 2024, "month": 11, "day": 29}, "season": "FALL", "season_year": 2024, "episodes": 1, "relation_type_from_parent": null, "inferred_part": null, "is_season": false, "is_final_from_title": false, "title_display": "Solo Leveling -ReAwakening-", "_start_tuple": [2024, 11, 29], "is_final_season": false}], "season_groups": [{"season_index": 1, "group_label": "Season 1", "parts": [{"short_label": "S1", "title": "Solo Leveling", "mal_id": 52299, "anilist_id": 151807, "start_date": {"year": 2024, "month": 1, "day": 7}, "format": "TV", "is_final": false}]}, {"season_index": 2, "group_label": "Season 2", "parts": [{"short_label": "S2", "title": "Solo Leveling Season 2 -Arise from the Shadow-", "mal_id": 58567, "anilist_id": 176496, "start_date": {"year": 2025, "month": 1, "day": 5}, "format": "TV", "is_final": false}]}], "extras": [{"title": "Solo Leveling -ReAwakening-", "mal_id": 59841, "anilist_id": 184694, "format": "MOVIE", "start_date": {"year": 2024, "month": 11, "day": 29}}]}, "_timestamp": 1775000957.808718}
\ No newline at end of file
diff --git a/data/cache/generic/c1eaed5e0ff0e7398017459efca682b9.json b/data/cache/generic/c1eaed5e0ff0e7398017459efca682b9.json
new file mode 100644
index 0000000..1b58521
--- /dev/null
+++ b/data/cache/generic/c1eaed5e0ff0e7398017459efca682b9.json
@@ -0,0 +1 @@
+{"payload": {"entries": [{"anilist_id": 153288, "mal_id": 52588, "title_romaji": "Kaijuu 8-gou", "title_english": "Kaiju No. 8", "title_native": "\u602a\u7363\uff18\u53f7", "format": "TV", "start_date": {"year": 2024, "month": 4, "day": 13}, "season": "SPRING", "season_year": 2024, "episodes": 12, "relation_type_from_parent": null, "inferred_part": null, "is_season": true, "is_final_from_title": false, "title_display": "Kaiju No. 8", "_start_tuple": [2024, 4, 13], "is_final_season": false}, {"anilist_id": 178754, "mal_id": 59177, "title_romaji": "Kaijuu 8-gou 2nd Season", "title_english": "Kaiju No. 8 Season 2", "title_native": "\u602a\u7363\uff18\u53f7 \u7b2c\uff12\u671f", "format": "TV", "start_date": {"year": 2025, "month": 7, "day": 19}, "season": "SUMMER", "season_year": 2025, "episodes": 11, "relation_type_from_parent": null, "inferred_part": 2, "is_season": true, "is_final_from_title": false, "title_display": "Kaiju No. 8 Season 2", "_start_tuple": [2025, 7, 19], "is_final_season": false}, {"anilist_id": 204362, "mal_id": 63136, "title_romaji": "Kaijuu 8-gou: Kanketsu-hen", "title_english": null, "title_native": "\u602a\u7363\uff18\u53f7 \u5b8c\u7d50\u7de8", "format": null, "start_date": {"year": null, "month": null, "day": null}, "season": null, "season_year": null, "episodes": null, "relation_type_from_parent": null, "inferred_part": null, "is_season": false, "is_final_from_title": false, "title_display": "Kaijuu 8-gou: Kanketsu-hen", "_start_tuple": [0, 0, 0], "is_final_season": false}, {"anilist_id": 179998, "mal_id": 59489, "title_romaji": "Kaijuu 8-gou Movie", "title_english": "Kaiju No. 8: Mission Recon", "title_native": "\u602a\u73638\u53f7 \u7b2c1\u671f\u7dcf\u96c6\u7de8", "format": "MOVIE", "start_date": {"year": 2025, "month": 3, "day": 28}, "season": "WINTER", "season_year": 2025, "episodes": 1, "relation_type_from_parent": null, "inferred_part": null, "is_season": false, "is_final_from_title": false, "title_display": "Kaiju No. 8: Mission Recon", "_start_tuple": [2025, 3, 28], "is_final_season": false}], "season_groups": [{"season_index": 1, "group_label": "Season 1", "parts": [{"short_label": "S1", "title": "Kaiju No. 8", "mal_id": 52588, "anilist_id": 153288, "start_date": {"year": 2024, "month": 4, "day": 13}, "format": "TV", "is_final": false}]}, {"season_index": 2, "group_label": "Season 2", "parts": [{"short_label": "S2", "title": "Kaiju No. 8 Season 2", "mal_id": 59177, "anilist_id": 178754, "start_date": {"year": 2025, "month": 7, "day": 19}, "format": "TV", "is_final": false}]}], "extras": [{"title": "Kaijuu 8-gou: Kanketsu-hen", "mal_id": 63136, "anilist_id": 204362, "format": null, "start_date": {"year": null, "month": null, "day": null}}, {"title": "Kaiju No. 8: Mission Recon", "mal_id": 59489, "anilist_id": 179998, "format": "MOVIE", "start_date": {"year": 2025, "month": 3, "day": 28}}]}, "_timestamp": 1775001076.475924}
\ No newline at end of file
diff --git a/data/cache/generic/e0160811950ce1dda6fcc468d4eb1c77.json b/data/cache/generic/e0160811950ce1dda6fcc468d4eb1c77.json
new file mode 100644
index 0000000..adc17b4
--- /dev/null
+++ b/data/cache/generic/e0160811950ce1dda6fcc468d4eb1c77.json
@@ -0,0 +1 @@
+{"payload": {"entries": [{"anilist_id": 172463, "mal_id": 57658, "title_romaji": "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen", "title_english": "JUJUTSU KAISEN Season 3: The Culling Game Part 1", "title_native": "\u546a\u8853\u5efb\u6226 \u6b7b\u6ec5\u56de\u6e38 \u524d\u7de8", "format": "TV", "start_date": {"year": 2026, "month": 1, "day": 9}, "season": "WINTER", "season_year": 2026, "episodes": 12, "relation_type_from_parent": null, "inferred_part": 3, "is_season": true, "is_final_from_title": false, "title_display": "JUJUTSU KAISEN Season 3: The Culling Game Part 1", "_start_tuple": [2026, 1, 9], "is_final_season": false}, {"anilist_id": 209895, "mal_id": null, "title_romaji": "Jujutsu Kaisen: Shimetsu Kaiyuu - Kouhen", "title_english": null, "title_native": "\u546a\u8853\u5efb\u6226 \u6b7b\u6ec5\u56de\u6e38 \u5f8c\u7de8", "format": null, "start_date": {"year": null, "month": null, "day": null}, "season": null, "season_year": null, "episodes": null, "relation_type_from_parent": null, "inferred_part": null, "is_season": false, "is_final_from_title": false, "title_display": "Jujutsu Kaisen: Shimetsu Kaiyuu - Kouhen", "_start_tuple": [0, 0, 0], "is_final_season": false}, {"anilist_id": 204066, "mal_id": 62392, "title_romaji": "Jujutsu Kaisen: Shibuya Jihen Tokubetsu Henshuu-ban x Shimetsu Kaiyuu Senkou Jouei", "title_english": "JUJUTSU KAISEN: Execution -Shibuya Incident x The Culling Game Begins-", "title_native": "\u546a\u8853\u5efb\u6226\u300e\u6e0b\u8c37\u4e8b\u5909 \u7279\u5225\u7de8\u96c6\u7248\u300f\u00d7\u300e\u6b7b\u6ec5\u56de\u6e38 \u5148\u884c\u4e0a\u6620\u300f", "format": "MOVIE", "start_date": {"year": 2025, "month": 11, "day": 7}, "season": "FALL", "season_year": 2025, "episodes": 1, "relation_type_from_parent": null, "inferred_part": null, "is_season": false, "is_final_from_title": false, "title_display": "JUJUTSU KAISEN: Execution -Shibuya Incident x The Culling Game Begins-", "_start_tuple": [2025, 11, 7], "is_final_season": false}, {"anilist_id": 192809, "mal_id": 59654, "title_romaji": "Jujutsu Kaisen: Kaigyoku\u30fbGyokusetsu", "title_english": "JUJUTSU KAISEN: Hidden Inventory / Premature Death \u2013 The Movie", "title_native": "\u546a\u8853\u5efb\u6226 \u61d0\u7389\u30fb\u7389\u6298", "format": "MOVIE", "start_date": {"year": 2025, "month": 5, "day": 30}, "season": "SPRING", "season_year": 2025, "episodes": 1, "relation_type_from_parent": null, "inferred_part": null, "is_season": false, "is_final_from_title": false, "title_display": "JUJUTSU KAISEN: Hidden Inventory / Premature Death \u2013 The Movie", "_start_tuple": [2025, 5, 30], "is_final_season": false}, {"anilist_id": 145064, "mal_id": 51009, "title_romaji": "Jujutsu Kaisen 2nd Season", "title_english": "JUJUTSU KAISEN Season 2", "title_native": "\u546a\u8853\u5efb\u6226 \u7b2c2\u671f", "format": "TV", "start_date": {"year": 2023, "month": 7, "day": 6}, "season": "SUMMER", "season_year": 2023, "episodes": 23, "relation_type_from_parent": null, "inferred_part": 2, "is_season": true, "is_final_from_title": false, "title_display": "JUJUTSU KAISEN Season 2", "_start_tuple": [2023, 7, 6], "is_final_season": false}, {"anilist_id": 113415, "mal_id": 40748, "title_romaji": "Jujutsu Kaisen", "title_english": "JUJUTSU KAISEN", "title_native": "\u546a\u8853\u5efb\u6226", "format": "TV", "start_date": {"year": 2020, "month": 10, "day": 3}, "season": "FALL", "season_year": 2020, "episodes": 24, "relation_type_from_parent": null, "inferred_part": null, "is_season": true, "is_final_from_title": false, "title_display": "JUJUTSU KAISEN", "_start_tuple": [2020, 10, 3], "is_final_season": false}, {"anilist_id": 131573, "mal_id": 48561, "title_romaji": "Jujutsu Kaisen 0", "title_english": "JUJUTSU KAISEN 0", "title_native": "\u546a\u8853\u5efb\u6226 0", "format": "MOVIE", "start_date": {"year": 2021, "month": 12, "day": 24}, "season": "FALL", "season_year": 2021, "episodes": 1, "relation_type_from_parent": null, "inferred_part": null, "is_season": false, "is_final_from_title": false, "title_display": "JUJUTSU KAISEN 0", "_start_tuple": [2021, 12, 24], "is_final_season": false}], "season_groups": [{"season_index": 1, "group_label": "Season 1", "parts": [{"short_label": "S1", "title": "JUJUTSU KAISEN", "mal_id": 40748, "anilist_id": 113415, "start_date": {"year": 2020, "month": 10, "day": 3}, "format": "TV", "is_final": false}]}, {"season_index": 2, "group_label": "Season 2", "parts": [{"short_label": "S2", "title": "JUJUTSU KAISEN Season 2", "mal_id": 51009, "anilist_id": 145064, "start_date": {"year": 2023, "month": 7, "day": 6}, "format": "TV", "is_final": false}]}, {"season_index": 3, "group_label": "Season 3", "parts": [{"short_label": "S3", "title": "JUJUTSU KAISEN Season 3: The Culling Game Part 1", "mal_id": 57658, "anilist_id": 172463, "start_date": {"year": 2026, "month": 1, "day": 9}, "format": "TV", "is_final": false}]}], "extras": [{"title": "Jujutsu Kaisen: Shimetsu Kaiyuu - Kouhen", "mal_id": null, "anilist_id": 209895, "format": null, "start_date": {"year": null, "month": null, "day": null}}, {"title": "JUJUTSU KAISEN 0", "mal_id": 48561, "anilist_id": 131573, "format": "MOVIE", "start_date": {"year": 2021, "month": 12, "day": 24}}, {"title": "JUJUTSU KAISEN: Hidden Inventory / Premature Death \u2013 The Movie", "mal_id": 59654, "anilist_id": 192809, "format": "MOVIE", "start_date": {"year": 2025, "month": 5, "day": 30}}, {"title": "JUJUTSU KAISEN: Execution -Shibuya Incident x The Culling Game Begins-", "mal_id": 62392, "anilist_id": 204066, "format": "MOVIE", "start_date": {"year": 2025, "month": 11, "day": 7}}]}, "_timestamp": 1775001086.836422}
\ No newline at end of file
diff --git a/data/cache/generic/f7c098cf54b66ed89c8d844335ba1493.json b/data/cache/generic/f7c098cf54b66ed89c8d844335ba1493.json
new file mode 100644
index 0000000..514ad0f
--- /dev/null
+++ b/data/cache/generic/f7c098cf54b66ed89c8d844335ba1493.json
@@ -0,0 +1 @@
+{"payload": {"entries": [{"anilist_id": 171627, "mal_id": 57555, "title_romaji": "Chainsaw Man: Reze-hen", "title_english": "Chainsaw Man \u2013 The Movie: Reze Arc", "title_native": "\u30c1\u30a7\u30f3\u30bd\u30fc\u30de\u30f3 \u30ec\u30bc\u7bc7", "format": "MOVIE", "start_date": {"year": 2025, "month": 9, "day": 19}, "season": "SUMMER", "season_year": 2025, "episodes": 1, "relation_type_from_parent": null, "inferred_part": null, "is_season": false, "is_final_from_title": false, "title_display": "Chainsaw Man \u2013 The Movie: Reze Arc", "_start_tuple": [2025, 9, 19], "is_final_season": false}, {"anilist_id": 204429, "mal_id": 63143, "title_romaji": "Chainsaw Man: Shikaku-hen", "title_english": null, "title_native": "\u30c1\u30a7\u30f3\u30bd\u30fc\u30de\u30f3 \u523a\u5ba2\u7bc7", "format": null, "start_date": {"year": null, "month": null, "day": null}, "season": null, "season_year": null, "episodes": null, "relation_type_from_parent": null, "inferred_part": null, "is_season": false, "is_final_from_title": false, "title_display": "Chainsaw Man: Shikaku-hen", "_start_tuple": [0, 0, 0], "is_final_season": false}, {"anilist_id": 127230, "mal_id": 44511, "title_romaji": "Chainsaw Man", "title_english": "Chainsaw Man", "title_native": "\u30c1\u30a7\u30f3\u30bd\u30fc\u30de\u30f3", "format": "TV", "start_date": {"year": 2022, "month": 10, "day": 12}, "season": "FALL", "season_year": 2022, "episodes": 12, "relation_type_from_parent": null, "inferred_part": null, "is_season": true, "is_final_from_title": false, "title_display": "Chainsaw Man", "_start_tuple": [2022, 10, 12], "is_final_season": false}], "season_groups": [{"season_index": 1, "group_label": "Season 1", "parts": [{"short_label": "S1", "title": "Chainsaw Man", "mal_id": 44511, "anilist_id": 127230, "start_date": {"year": 2022, "month": 10, "day": 12}, "format": "TV", "is_final": false}]}], "extras": [{"title": "Chainsaw Man: Shikaku-hen", "mal_id": 63143, "anilist_id": 204429, "format": null, "start_date": {"year": null, "month": null, "day": null}}, {"title": "Chainsaw Man \u2013 The Movie: Reze Arc", "mal_id": 57555, "anilist_id": 171627, "format": "MOVIE", "start_date": {"year": 2025, "month": 9, "day": 19}}]}, "_timestamp": 1775008693.3776262}
\ No newline at end of file
diff --git a/templates/reader.html b/templates/reader.html
index acde287..b0a6740 100644
--- a/templates/reader.html
+++ b/templates/reader.html
@@ -2,288 +2,420 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, user-scalable=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>Animex Reader</title>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
     <style>
       :root {
         --background-color: #121212;
         --text-color: #eaeaea;
         --accent-color: #ff9500;
         --accent-hover: #ffaa33;
-        --header-bg: rgba(18, 18, 18, 0.85);
-        --footer-bg: rgba(18, 18, 18, 0.9);
+        --header-bg: rgba(18, 18, 18, 0.88);
+        --footer-bg: rgba(18, 18, 18, 0.92);
         --border-color: rgba(255, 255, 255, 0.1);
+        --panel-bg: #1c1c1e;
+        --zoom: 1;
       }
+
+      *, *::before, *::after { box-sizing: border-box; }
+
       body {
         margin: 0;
         background-color: var(--background-color);
         color: var(--text-color);
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-          Helvetica, Arial, sans-serif;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         overflow: hidden;
       }
 
-      /* Scrollbar Styling */
-      ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-      }
-      ::-webkit-scrollbar-track {
-        background: #1a1a1a;
-      }
-      ::-webkit-scrollbar-thumb {
-        background: #444;
-        border-radius: 4px;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background: #666;
-      }
+      /* ── Scrollbar ── */
+      ::-webkit-scrollbar { width: 6px; height: 6px; }
+      ::-webkit-scrollbar-track { background: #111; }
+      ::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
+      ::-webkit-scrollbar-thumb:hover { background: #555; }
 
-      /* Header */
+      /* ── Header ── */
       #reader-header {
         position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
+        top: 0; left: 0; right: 0;
         z-index: 100;
         background-color: var(--header-bg);
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
+        backdrop-filter: blur(14px);
+        -webkit-backdrop-filter: blur(14px);
         border-bottom: 1px solid var(--border-color);
         display: flex;
         justify-content: space-between;
         align-items: center;
         height: 60px;
-        padding: 0 20px;
+        padding: 0 16px;
+        gap: 12px;
         transition: transform 0.3s ease-in-out;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-      }
-      #reader-header.hidden {
-        transform: translateY(-100%);
+        box-shadow: 0 4px 16px rgba(0,0,0,0.35);
       }
+      #reader-header.hidden { transform: translateY(-100%); }
 
-      .header-left,
-      .header-center,
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        min-width: 0;
+        flex: 1;
+      }
       .header-right {
         display: flex;
         align-items: center;
-        gap: 15px;
+        gap: 8px;
+        flex-shrink: 0;
       }
-      
-      .header-center {
+
+      /* Title block */
+      .header-titles {
+        display: flex;
         flex-direction: column;
-        align-items: flex-start;
         justify-content: center;
-        max-width: 40vw;
+        min-width: 0;
+        gap: 0;
       }
-      
-      .header-center h1 {
-        font-size: 16px;
+      .header-titles h1 {
+        font-size: 15px;
         margin: 0;
         font-weight: 600;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        width: 100%;
+        line-height: 1.25;
       }
-      .header-center p {
+      .header-titles p {
         font-size: 12px;
-        margin: 2px 0 0 0;
-        color: #aaa;
+        margin: 0;
+        color: #999;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 1.25;
       }
 
-      /* Controls */
-      button {
-        transition: all 0.2s ease;
-      }
-      #back-btn {
+      /* ── Icon Buttons (back, chapters) ── */
+      .icon-circle-btn {
         background: none;
         border: none;
         color: var(--text-color);
-        font-size: 20px;
+        font-size: 18px;
         cursor: pointer;
         padding: 8px;
         border-radius: 50%;
-      }
-      #back-btn:hover {
-        background: rgba(255,255,255,0.1);
-      }
-
-      #next-chapter-btn {
-        background: var(--accent-color);
-        color: white;
-        border: none;
-        padding: 8px 16px;
-        border-radius: 6px;
-        font-weight: 600;
-        font-size: 13px;
-        cursor: pointer;
-        display: none;
-        box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3);
-      }
-      #next-chapter-btn:hover {
-        background: var(--accent-hover);
-        transform: translateY(-1px);
-      }
-
-      .mode-switcher {
-        background: rgba(255, 255, 255, 0.08);
-        border-radius: 8px;
-        padding: 4px;
         display: flex;
-        border: 1px solid rgba(255,255,255,0.05);
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        transition: background 0.2s;
+      }
+      .icon-circle-btn:hover { background: rgba(255,255,255,0.1); }
+
+      /* ── Segmented switcher ── */
+      .mode-switcher {
+        background: rgba(255,255,255,0.07);
+        border-radius: 8px;
+        padding: 3px;
+        display: flex;
+        border: 1px solid rgba(255,255,255,0.08);
+        gap: 2px;
       }
       .mode-switcher button {
         background: transparent;
         border: none;
-        color: #bbb;
-        padding: 6px 12px;
+        color: #999;
+        padding: 5px 10px;
         border-radius: 6px;
         cursor: pointer;
-        font-size: 13px;
+        font-size: 12px;
         font-weight: 500;
+        transition: all 0.18s;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 5px;
       }
-      .mode-switcher button:hover {
-        color: #fff;
-      }
+      .mode-switcher button:hover { color: #fff; background: rgba(255,255,255,0.08); }
       .mode-switcher button.active {
-        background: rgba(255,255,255,0.15);
-        color: white;
+        background: rgba(255,255,255,0.16);
+        color: #fff;
         font-weight: 600;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        box-shadow: 0 1px 3px rgba(0,0,0,0.25);
       }
 
-      /* Loader */
+      /* Fit switcher — icon-only, smaller */
+      #fit-switcher button { padding: 5px 9px; font-size: 13px; }
+
+      /* ── Direction button ── */
+      #direction-btn {
+        background: rgba(255,255,255,0.07);
+        border: 1px solid rgba(255,255,255,0.1);
+        color: #aaa;
+        padding: 5px 9px;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.8px;
+        transition: all 0.2s;
+        flex-shrink: 0;
+      }
+      #direction-btn:hover { color: #fff; background: rgba(255,255,255,0.14); }
+      /* Hide direction btn in scroll mode */
+      .view-scroll #direction-btn { display: none !important; }
+
+      /* ── Next Chapter btn ── */
+      #next-chapter-btn {
+        background: var(--accent-color);
+        color: #fff;
+        border: none;
+        padding: 7px 13px;
+        border-radius: 6px;
+        font-weight: 600;
+        font-size: 12px;
+        cursor: pointer;
+        display: none;
+        align-items: center;
+        gap: 5px;
+        box-shadow: 0 2px 8px rgba(255,149,0,0.3);
+        transition: all 0.2s;
+        flex-shrink: 0;
+      }
+      #next-chapter-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
+
+      /* ── Central Loader ── */
       #loader {
         position: fixed;
-        top: 50%;
-        left: 50%;
+        top: 50%; left: 50%;
         transform: translate(-50%, -50%);
-        width: 40px;
-        height: 40px;
-        border: 4px solid #333;
+        width: 40px; height: 40px;
+        border: 4px solid #2a2a2a;
         border-top-color: var(--accent-color);
         border-radius: 50%;
-        animation: spin 0.8s linear infinite;
-        z-index: 50;
+        animation: spin-center 0.8s linear infinite;
+        z-index: 60;
       }
-      @keyframes spin {
+      @keyframes spin-center {
         to { transform: translate(-50%, -50%) rotate(360deg); }
       }
 
-      /* Main Viewer */
+      /* ── Main Image Container ── */
       #image-container {
         height: 100vh;
         width: 100vw;
-        overflow: hidden;
-        scroll-behavior: auto; /* Managed by JS for precision */
         background-color: #000;
+        position: relative;
       }
 
-      /* Webtoon Mode */
-      .view-webtoon #image-container {
+      /* ── SCROLL LAYOUT ── */
+      .view-scroll #image-container {
         overflow-y: scroll;
+        overflow-x: hidden;
         -webkit-overflow-scrolling: touch;
       }
-      .view-webtoon img {
+      /* Scroll + fit-both (default) */
+      .view-scroll img {
         display: block;
-        width: 100%;
-        max-width: 900px; /* Wider max-width for Desktop */
         margin: 0 auto;
         height: auto;
       }
+      .view-scroll.fit-both img {
+        width: calc(min(900px, 100%) * var(--zoom));
+        max-width: none;
+      }
+      .view-scroll.fit-width img {
+        width: calc(100% * var(--zoom));
+        max-width: none;
+      }
+      .view-scroll.fit-height img {
+        height: calc(100vh * var(--zoom));
+        width: auto;
+        max-width: none;
+      }
 
-      /* Pagination Mode */
-      .view-pagination #image-container {
+      /* ── SINGLE LAYOUT ── */
+      .view-single #image-container {
         display: flex;
         overflow-x: hidden;
+        overflow-y: hidden;
       }
-      .view-pagination img {
+      .view-single img {
+        flex-shrink: 0;
+        user-select: none;
+        -webkit-user-drag: none;
+      }
+      .view-single.fit-both img {
         width: 100vw;
         height: 100vh;
         object-fit: contain;
-        flex-shrink: 0;
-        user-select: none;
+        transform: scale(var(--zoom));
+        transform-origin: center center;
+      }
+      .view-single.fit-width img {
+        width: 100vw;
+        height: auto;
+        object-fit: unset;
+        transform: scale(var(--zoom));
+        transform-origin: top center;
+      }
+      .view-single.fit-height img {
+        height: 100vh;
+        width: auto;
+        object-fit: unset;
+        transform: scale(var(--zoom));
+        transform-origin: center center;
       }
 
-      /* Navigation Overlay (Click Zones) */
+      /* ── DOUBLE LAYOUT ── */
+      .view-double #image-container {
+        display: flex;
+        overflow-x: hidden;
+        overflow-y: hidden;
+      }
+      .view-double .spread {
+        display: flex;
+        width: 100vw;
+        height: 100vh;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        gap: 0;
+      }
+      .view-double.dir-rtl .spread { flex-direction: row-reverse; }
+      .view-double .spread img {
+        display: block;
+        flex: 0 0 auto;
+        min-width: 0;
+        user-select: none;
+        -webkit-user-drag: none;
+      }
+      /* fit-both: each page fills its half by height, capped at 50vw wide */
+      .view-double.fit-both .spread img {
+        width: auto;
+        height: calc(100vh * var(--zoom));
+        max-width: 50vw;
+        object-fit: contain;
+      }
+      .view-double.fit-width .spread img {
+        width: calc(50vw * var(--zoom));
+        height: auto;
+        max-width: none;
+        object-fit: unset;
+      }
+      .view-double.fit-height .spread img {
+        height: calc(100vh * var(--zoom));
+        width: auto;
+        max-width: 50vw;
+        object-fit: unset;
+      }
+
+      /* ── Navigation Overlay (Click Zones) ── */
       .nav-overlay {
         position: fixed;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
+        top: 0; left: 0;
+        height: 100%; width: 100%;
         z-index: 50;
         display: none;
+        pointer-events: none;
       }
-      .view-pagination .nav-overlay {
-        display: block;
-      }
-      #nav-left {
+      .view-single .nav-overlay,
+      .view-double .nav-overlay { display: block; }
+      #nav-left, #nav-right, #nav-center {
         position: absolute;
-        left: 0;
-        top: 0;
-        width: 30%;
-        height: 100%;
-        cursor: w-resize;
-      }
-      #nav-right {
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 30%;
-        height: 100%;
-        cursor: e-resize;
-      }
-      #nav-center {
-        position: absolute;
-        left: 30%;
-        top: 0;
-        width: 40%;
-        height: 100%;
-        cursor: pointer;
+        top: 0; height: 100%;
+        pointer-events: all;
       }
+      #nav-left { left: 0; width: 30%; cursor: w-resize; }
+      #nav-right { right: 0; width: 30%; cursor: e-resize; }
+      #nav-center { left: 30%; width: 40%; cursor: pointer; }
 
-      /* Footer */
+      /* ── Footer ── */
       #reader-footer {
         position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        bottom: 0; left: 0; right: 0;
         z-index: 100;
         background-color: var(--footer-bg);
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
+        backdrop-filter: blur(14px);
+        -webkit-backdrop-filter: blur(14px);
         border-top: 1px solid var(--border-color);
         height: 50px;
         display: flex;
         align-items: center;
-        justify-content: center;
-        padding: 0 20px;
-        gap: 20px;
+        padding: 0 14px;
+        gap: 10px;
         transition: transform 0.3s ease-in-out;
       }
-      #reader-footer.hidden {
-        transform: translateY(100%);
+      #reader-footer.hidden { transform: translateY(100%); }
+
+      .footer-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-shrink: 0;
+      }
+      .footer-center {
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
+      .footer-right {
+        flex-shrink: 0;
       }
 
+      /* Footer spinner */
+      #footer-loader {
+        width: 16px; height: 16px;
+        border: 2px solid #333;
+        border-top-color: var(--accent-color);
+        border-radius: 50%;
+        animation: spin-simple 0.8s linear infinite;
+        flex-shrink: 0;
+      }
+      #footer-loader.hidden { display: none; }
+      @keyframes spin-simple { to { transform: rotate(360deg); } }
+
+      /* Zoom controls */
+      .zoom-btn {
+        background: rgba(255,255,255,0.07);
+        border: 1px solid rgba(255,255,255,0.1);
+        color: var(--text-color);
+        width: 26px; height: 26px;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 15px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        transition: background 0.2s;
+        padding: 0;
+        flex-shrink: 0;
+      }
+      .zoom-btn:hover { background: rgba(255,255,255,0.15); }
+      .zoom-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+      #zoom-label {
+        font-size: 11px;
+        color: #999;
+        min-width: 36px;
+        text-align: center;
+        font-variant-numeric: tabular-nums;
+        font-weight: 500;
+        flex-shrink: 0;
+      }
+
+      /* Progress bar */
       #page-progress {
-        flex-grow: 1;
-        max-width: 600px;
+        width: 100%;
         height: 6px;
         border-radius: 3px;
         cursor: pointer;
         -webkit-appearance: none;
+        appearance: none;
       }
       #page-progress::-webkit-progress-bar {
-        background-color: rgba(255, 255, 255, 0.15);
+        background-color: rgba(255,255,255,0.12);
         border-radius: 3px;
       }
       #page-progress::-webkit-progress-value {
@@ -292,117 +424,376 @@
         transition: width 0.1s linear;
       }
 
+      /* Page indicator */
       #page-indicator {
-        font-size: 14px;
-        color: #ddd;
+        font-size: 12px;
+        color: #ccc;
         font-variant-numeric: tabular-nums;
         font-weight: 500;
-        min-width: 70px;
-        text-align: center;
+        min-width: 64px;
+        text-align: right;
+        white-space: nowrap;
       }
 
-      /* Desktop Specific Tweaks */
+      /* ── Chapter Panel ── */
+      #chapter-panel-backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.55);
+        z-index: 200;
+        backdrop-filter: blur(3px);
+        -webkit-backdrop-filter: blur(3px);
+        opacity: 1;
+        transition: opacity 0.28s ease;
+      }
+      #chapter-panel-backdrop.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      #chapter-panel {
+        position: fixed;
+        top: 0; right: 0;
+        width: min(360px, 92vw);
+        height: 100vh;
+        background: var(--panel-bg);
+        border-left: 1px solid rgba(255,255,255,0.1);
+        z-index: 201;
+        display: flex;
+        flex-direction: column;
+        transform: translateX(0);
+        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
+        box-shadow: -8px 0 32px rgba(0,0,0,0.6);
+      }
+      #chapter-panel.hidden { transform: translateX(100%); }
+
+      .panel-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 18px;
+        height: 60px;
+        border-bottom: 1px solid rgba(255,255,255,0.08);
+        flex-shrink: 0;
+      }
+      .panel-header-title {
+        font-size: 15px;
+        font-weight: 700;
+        letter-spacing: 0.2px;
+      }
+      #close-panel-btn {
+        background: none;
+        border: none;
+        color: #888;
+        font-size: 20px;
+        cursor: pointer;
+        padding: 6px 8px;
+        border-radius: 6px;
+        line-height: 1;
+        transition: all 0.2s;
+      }
+      #close-panel-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
+
+      #chapter-list {
+        overflow-y: auto;
+        flex: 1;
+        padding: 6px 0;
+      }
+      .chapter-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 11px 18px;
+        cursor: pointer;
+        transition: background 0.15s;
+        border-left: 3px solid transparent;
+      }
+      .chapter-item:hover { background: rgba(255,255,255,0.05); }
+      .chapter-item.active {
+        background: rgba(255,149,0,0.1);
+        border-left-color: var(--accent-color);
+      }
+      .ch-number {
+        font-weight: 600;
+        font-size: 13px;
+        color: var(--text-color);
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+      .ch-title {
+        font-size: 12px;
+        color: #777;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+      }
+      .ch-check {
+        font-size: 10px;
+        flex-shrink: 0;
+        opacity: 0;
+        color: var(--accent-color);
+        transition: opacity 0.2s;
+      }
+      .chapter-item.finished .ch-number { color: #666; }
+      .chapter-item.finished .ch-title { color: #555; }
+      .chapter-item.finished .ch-check { opacity: 1; }
+      /* Progress badge */
+      .ch-badge {
+        flex-shrink: 0;
+        font-size: 10px;
+        font-weight: 600;
+        padding: 2px 7px;
+        border-radius: 10px;
+        white-space: nowrap;
+        letter-spacing: 0.3px;
+      }
+      .ch-badge.badge-read {
+        background: rgba(80,200,120,0.15);
+        color: #50c878;
+      }
+      .ch-badge.badge-reading {
+        background: rgba(255,149,0,0.15);
+        color: var(--accent-color);
+      }
+
+      /* ── Toast ── */
+      #toast {
+        position: fixed;
+        bottom: 68px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(28,28,30,0.96);
+        color: var(--text-color);
+        padding: 9px 18px;
+        border-radius: 8px;
+        font-size: 13px;
+        z-index: 400;
+        pointer-events: none;
+        border: 1px solid rgba(255,255,255,0.1);
+        box-shadow: 0 6px 20px rgba(0,0,0,0.5);
+        opacity: 1;
+        transition: opacity 0.3s ease;
+        white-space: nowrap;
+      }
+      #toast.hidden { opacity: 0; }
+
+      /* ── Responsive ── */
       @media (min-width: 768px) {
-        .header-center h1 { font-size: 18px; }
-        .header-center p { font-size: 13px; }
+        .header-titles h1 { font-size: 16px; }
+        .header-titles p { font-size: 13px; }
         #page-progress { height: 8px; }
       }
+      @media (max-width: 600px) {
+        .mode-switcher button { padding: 5px 7px; font-size: 11px; gap: 3px; }
+        #next-chapter-btn { padding: 6px 10px; font-size: 11px; }
+        #direction-btn { padding: 5px 7px; font-size: 10px; }
+      }
     </style>
   </head>
-  <body class="view-pagination">
+  <body class="view-single fit-both dir-ltr">
+
+    <!-- ══ HEADER ══ -->
     <header id="reader-header">
       <div class="header-left">
-        <button id="back-btn" aria-label="Go back">
+        <button id="back-btn" class="icon-circle-btn" aria-label="Go back">
           <i class="fa fa-arrow-left"></i>
         </button>
-        <div class="header-center">
-          <h1 id="manga-title">Loading Series...</h1>
-          <p id="chapter-details">Loading Chapter...</p>
+        <button id="chapters-btn" class="icon-circle-btn" aria-label="Chapter list" title="Chapter List">
+          <i class="fa fa-list"></i>
+        </button>
+        <div class="header-titles">
+          <h1 id="manga-title">Loading Series…</h1>
+          <p id="chapter-details">Loading Chapter…</p>
         </div>
       </div>
+
       <div class="header-right">
-        <div class="mode-switcher">
-          <button id="mode-pagination" class="active"><i class="fa fa-book-open"></i> Paged</button>
-          <button id="mode-webtoon"><i class="fa fa-scroll"></i> Scroll</button>
+        <!-- Layout: Scroll | Single | Double -->
+        <div class="mode-switcher" id="layout-switcher">
+          <button id="layout-scroll" title="Scroll (Webtoon)"><i class="fa fa-scroll"></i> Scroll</button>
+          <button id="layout-single" class="active" title="Single Page"><i class="fa fa-book-open"></i> Single</button>
+          <button id="layout-double" title="Double Page"><i class="fa fa-book"></i> Double</button>
         </div>
+
+        <!-- Fit: Width | Height | Both -->
+        <div class="mode-switcher" id="fit-switcher">
+          <button id="fit-width" title="Fit Width"><i class="fa fa-arrows-left-right"></i></button>
+          <button id="fit-height" title="Fit Height"><i class="fa fa-arrows-up-down"></i></button>
+          <button id="fit-both" class="active" title="Fit Both (Contain)"><i class="fa fa-compress"></i></button>
+        </div>
+
+        <!-- Direction (hidden in scroll mode) -->
+        <button id="direction-btn" title="Toggle Reading Direction">LTR</button>
+
+        <!-- Next Chapter -->
         <button id="next-chapter-btn">
-          Next <i class="fa fa-chevron-right" style="margin-left:5px;"></i>
+          Next <i class="fa fa-chevron-right"></i>
         </button>
       </div>
     </header>
 
+    <!-- ══ CENTERED LOADER ══ -->
     <div id="loader"></div>
 
+    <!-- ══ IMAGE CONTAINER ══ -->
     <main id="image-container"></main>
 
+    <!-- ══ NAV OVERLAY (paged modes) ══ -->
     <div class="nav-overlay">
       <div id="nav-left" title="Previous Page"></div>
-      <div id="nav-center" title="Toggle Menu"></div>
+      <div id="nav-center" title="Toggle UI"></div>
       <div id="nav-right" title="Next Page"></div>
     </div>
 
+    <!-- ══ FOOTER ══ -->
     <footer id="reader-footer">
-      <span id="page-indicator">0 / 0</span>
-      <progress id="page-progress" value="0" max="100"></progress>
+      <div class="footer-left">
+        <div id="footer-loader" class="hidden"></div>
+        <button id="zoom-out" class="zoom-btn" title="Zoom Out">−</button>
+        <span id="zoom-label">100%</span>
+        <button id="zoom-in" class="zoom-btn" title="Zoom In">+</button>
+      </div>
+      <div class="footer-center">
+        <progress id="page-progress" value="0" max="100"></progress>
+      </div>
+      <div class="footer-right">
+        <span id="page-indicator">0 / 0</span>
+      </div>
     </footer>
 
+    <!-- ══ CHAPTER PANEL ══ -->
+    <div id="chapter-panel-backdrop" class="hidden"></div>
+    <div id="chapter-panel" class="hidden">
+      <div class="panel-header">
+        <span class="panel-header-title">Chapters</span>
+        <button id="close-panel-btn" aria-label="Close chapter list">✕</button>
+      </div>
+      <div id="chapter-list"></div>
+    </div>
+
+    <!-- ══ TOAST ══ -->
+    <div id="toast" class="hidden"></div>
+
     <script>
       document.addEventListener("DOMContentLoaded", () => {
-        // --- Elements ---
-        const container = document.getElementById("image-container");
-        const loader = document.getElementById("loader");
-        const header = document.getElementById("reader-header");
-        const footer = document.getElementById("reader-footer");
-        const mangaTitleEl = document.getElementById("manga-title");
-        const chapterDetailsEl = document.getElementById("chapter-details");
-        const modePaginationBtn = document.getElementById("mode-pagination");
-        const modeWebtoonBtn = document.getElementById("mode-webtoon");
-        const backBtn = document.getElementById("back-btn");
-        const nextChapterBtn = document.getElementById("next-chapter-btn");
-        const pageProgress = document.getElementById("page-progress");
-        const pageIndicator = document.getElementById("page-indicator");
 
-        // --- State ---
-        let imageLinks = [];
-        let currentPage = 0;
+        // ═══════════════════════════════════════════════════════════
+        // ELEMENTS
+        // ═══════════════════════════════════════════════════════════
+        const container       = document.getElementById("image-container");
+        const loader          = document.getElementById("loader");
+        const footerLoader    = document.getElementById("footer-loader");
+        const header          = document.getElementById("reader-header");
+        const footer          = document.getElementById("reader-footer");
+        const mangaTitleEl    = document.getElementById("manga-title");
+        const chapterDetailsEl= document.getElementById("chapter-details");
+        const backBtn         = document.getElementById("back-btn");
+        const chaptersBtn     = document.getElementById("chapters-btn");
+        const nextChapterBtn  = document.getElementById("next-chapter-btn");
+        const pageProgress    = document.getElementById("page-progress");
+        const pageIndicator   = document.getElementById("page-indicator");
+        const zoomOutBtn      = document.getElementById("zoom-out");
+        const zoomInBtn       = document.getElementById("zoom-in");
+        const zoomLabel       = document.getElementById("zoom-label");
+        const directionBtn    = document.getElementById("direction-btn");
+        const chapterPanel    = document.getElementById("chapter-panel");
+        const panelBackdrop   = document.getElementById("chapter-panel-backdrop");
+        const chapterListEl   = document.getElementById("chapter-list");
+        const closePanelBtn   = document.getElementById("close-panel-btn");
+        const toast           = document.getElementById("toast");
+        const navLeft         = document.getElementById("nav-left");
+        const navRight        = document.getElementById("nav-right");
+        const navCenter       = document.getElementById("nav-center");
+        const layoutScrollBtn = document.getElementById("layout-scroll");
+        const layoutSingleBtn = document.getElementById("layout-single");
+        const layoutDoubleBtn = document.getElementById("layout-double");
+        const fitWidthBtn     = document.getElementById("fit-width");
+        const fitHeightBtn    = document.getElementById("fit-height");
+        const fitBothBtn      = document.getElementById("fit-both");
+
+        // ═══════════════════════════════════════════════════════════
+        // CONSTANTS / KEYS
+        // ═══════════════════════════════════════════════════════════
+        const serverUrl      = ``;
+        const LAYOUT_KEY     = "reader_layout_mode";   // "scroll"|"single"|"double"
+        const FIT_KEY        = "reader_fit_mode";       // "fit-width"|"fit-height"|"fit-both"
+        const DIRECTION_KEY  = "reader_direction";      // "ltr"|"rtl"
+        const ZOOM_KEY       = "reader_zoom_level";     // number 0.5–3.0
+        const HISTORY_KEY    = "reading_history";
+
+        const ZOOM_MIN  = 0.5;
+        const ZOOM_MAX  = 3.0;
+        const ZOOM_STEP = 0.1;
+
+        // ═══════════════════════════════════════════════════════════
+        // STATE
+        // ═══════════════════════════════════════════════════════════
+        let imageLinks         = [];
+        let currentPage        = 0;     // always an image index (0-based)
         let source, mangaId, chapterId;
-        let chapterData = null; 
-        const serverIp = localStorage.getItem("extension_server_ip") || "localhost";
-        const serverUrl = ``;
-        const READER_MODE_KEY = "reader_view_mode";
-        const HISTORY_KEY = "reading_history";
+        let chapterData        = null;
+        let allChapters        = [];    // [{id, number, title}, ...]
+        let currentChapterIndex= -1;
+        let layoutMode         = "single";
+        let fitMode            = "fit-both";
+        let direction          = "ltr";
+        let zoomLevel          = 1.0;
+        let toastTimeout       = null;
+        let panelOpen          = false;
 
-        
-
-        // --- Initialization ---
+        // ═══════════════════════════════════════════════════════════
+        // INIT
+        // ═══════════════════════════════════════════════════════════
         function init() {
           const pathParts = window.location.pathname.split("/");
-          // URL Structure expected: /read/{source}/{mangaId}/{chapterId}
+          // Expected: /read/{source}/{mangaId}/{chapterId}
           if (pathParts.length >= 5) {
-            source = pathParts[2];
-            mangaId = pathParts[3];
+            source    = pathParts[2];
+            mangaId   = pathParts[3];
             chapterId = pathParts[4];
           } else {
             console.error("Invalid URL structure");
             return;
           }
 
-          // Load View Preference
-          const savedMode = localStorage.getItem(READER_MODE_KEY);
-          if (savedMode) {
-            setMode(savedMode, true);
-          }
+          // Load preferences
+          layoutMode = localStorage.getItem(LAYOUT_KEY) || "single";
+          fitMode    = localStorage.getItem(FIT_KEY)    || "fit-both";
+          direction  = localStorage.getItem(DIRECTION_KEY) || "ltr";
+          zoomLevel  = parseFloat(localStorage.getItem(ZOOM_KEY)) || 1.0;
+          zoomLevel  = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, zoomLevel));
 
+          // Apply body classes immediately
+          document.body.className = `view-${layoutMode} ${fitMode} dir-${direction}`;
+          applyZoom(zoomLevel, false);
+          updateLayoutButtons();
+          updateFitButtons();
+          updateDirectionButton();
+
+          // Fetch
           fetchMangaTitle();
-          fetchImages(); // This triggers history restore after loading
-          fetchChapterDetails();
+          fetchAllChapters().then(() => fetchChapterDetails());
+          fetchImages();
           setupControls();
+
+          // popstate (browser back/forward within reader)
+          window.addEventListener("popstate", (e) => {
+            if (e.state && e.state.chapterId && e.state.chapterId !== chapterId) {
+              loadChapter(e.state.chapterId, true /* isPop */);
+            }
+          });
+
+          // Replace current history entry with state so popstate works
+          history.replaceState({ source, mangaId, chapterId }, "", window.location.href);
         }
 
-        // --- History Management ---
+        // ═══════════════════════════════════════════════════════════
+        // HISTORY MANAGEMENT
+        // ═══════════════════════════════════════════════════════════
 
         /**
-         * Structure of Reading History (LocalStorage):
+         * History structure in localStorage:
          * [
          *   {
          *     mangaId: "123",
@@ -420,125 +811,282 @@
          */
 
         function getHistory() {
-          try {
-            return JSON.parse(localStorage.getItem(HISTORY_KEY)) || [];
-          } catch (e) {
-            return [];
-          }
+          try { return JSON.parse(localStorage.getItem(HISTORY_KEY)) || []; }
+          catch (e) { return []; }
         }
 
         function saveHistory(history) {
           localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
         }
 
-        function restoreReadingProgress() {
-          const history = getHistory();
-          const seriesEntry = history.find(h => h.mangaId === mangaId && h.source === source);
-
-          if (seriesEntry && seriesEntry.chapters && seriesEntry.chapters[chapterId]) {
-            const record = seriesEntry.chapters[chapterId];
-            if (record.page && record.page < imageLinks.length) {
-              console.log("Restoring to page:", record.page);
-              currentPage = record.page;
-              
-              // Apply UI updates immediately
-              if (document.body.classList.contains("view-pagination")) {
-                 updatePagination();
-              } else {
-                 // For webtoon, we need to wait until images render to scroll accurately
-                 // This is handled in setMode or post-load logic
-                 setTimeout(() => {
-                   const imgs = container.getElementsByTagName("img");
-                   if(imgs[currentPage]) imgs[currentPage].scrollIntoView({ block: "start" });
-                 }, 200);
-              }
-              updateFooter();
-            }
-          }
-        }
-
         function updateHistory() {
           if (imageLinks.length === 0) return;
+          let hist = getHistory();
 
-          let history = getHistory();
-          
-          // 1. Find or Create Series Entry
-          let seriesEntry = history.find(h => h.mangaId === mangaId && h.source === source);
+          let seriesEntry = hist.find(h => h.mangaId === mangaId && h.source === source);
           if (!seriesEntry) {
-            seriesEntry = {
-              mangaId: mangaId,
-              source: source,
-              chapters: {}
-            };
-            history.push(seriesEntry);
+            seriesEntry = { mangaId, source, chapters: {} };
+            hist.push(seriesEntry);
           }
 
-          // 2. Determine State
-          // If we are on the last page (or close to end in scroll), mark finished
           const isFinished = currentPage >= imageLinks.length - 1;
-
-          // 3. Create/Update Chapter Object
           seriesEntry.chapters[chapterId] = {
             state: isFinished ? "finished" : "ongoing",
             page: currentPage,
             timestamp: Date.now(),
-            source: source
+            source
           };
 
-          // 4. Save
-          saveHistory(history);
+          saveHistory(hist);
         }
 
-        // --- Fetching Logic ---
+        function restoreReadingProgress() {
+          const hist        = getHistory();
+          const seriesEntry = hist.find(h => h.mangaId === mangaId && h.source === source);
 
-        async function fetchChapterDetails() {
-           // (Logic unchanged from provided example, but ensured robust error handling)
-           if (source !== "mangadex") {
-            chapterDetailsEl.textContent = `Chapter ${chapterId}`;
-            fetchLegacyChapterNav();
+          if (seriesEntry?.chapters?.[chapterId]) {
+            const record = seriesEntry.chapters[chapterId];
+
+            if (record.state === "finished") {
+              // Chapter already finished → start fresh from page 0
+              currentPage = 0;
+            } else if (record.page > 0 && record.page < imageLinks.length) {
+              currentPage = record.page;
+              // In double mode, snap currentPage to even (start of spread)
+              if (layoutMode === "double" && currentPage % 2 !== 0) {
+                currentPage = Math.max(0, currentPage - 1);
+              }
+            }
+          }
+
+          // Apply position
+          if (layoutMode !== "scroll") {
+            updatePagination();
+          } else {
+            setTimeout(() => {
+              const imgs = getAllImages();
+              if (imgs[currentPage]) {
+                imgs[currentPage].scrollIntoView({ behavior: "auto", block: "start" });
+              }
+            }, 100);
+          }
+          updateFooter();
+        }
+
+        // ═══════════════════════════════════════════════════════════
+        // CHAPTER MANAGEMENT
+        // ═══════════════════════════════════════════════════════════
+
+        async function fetchAllChapters() {
+          const url = source === "mangadex"
+            ? `${serverUrl}/mangadex/manga/${mangaId}/chapters`
+            : `${serverUrl}/chapters/${mangaId}`;
+          try {
+            const resp = await fetch(url);
+            if (!resp.ok) return;
+            const data = await resp.json();
+            // Support both flat `data.chapters` and `data.modules` (keyed by source)
+            let rawChapters = [];
+            if (Array.isArray(data.chapters)) {
+              rawChapters = data.chapters;
+            } else if (data.modules && typeof data.modules === "object") {
+              const preferred = data.modules[source];
+              if (Array.isArray(preferred) && preferred.length > 0) {
+                rawChapters = preferred;
+              } else {
+                const firstKey = Object.keys(data.modules)[0];
+                rawChapters = Array.isArray(data.modules[firstKey]) ? data.modules[firstKey] : [];
+              }
+            }
+
+            allChapters = rawChapters.map(c => {
+              if (source === "mangadex") {
+                return {
+                  id: c.id,
+                  number: c.attributes?.chapter ?? "?",
+                  title:  c.attributes?.title  || ""
+                };
+              } else {
+                return {
+                  id:     c.id ?? c.chapter_number,
+                  number: c.chapter_number ?? c.id,
+                  title:  c.title || ""
+                };
+              }
+            });
+
+            allChapters.reverse();
+
+            currentChapterIndex = allChapters.findIndex(c => String(c.id) === String(chapterId));
+            renderChapterPanel();
+          } catch (e) {
+            console.error("fetchAllChapters failed:", e);
+          }
+        }
+
+        /**
+         * In-page chapter switch — no redirect.
+         * isPop = true when called from popstate (skip pushState).
+         */
+        async function loadChapter(newChapterId, isPop = false) {
+          if (String(newChapterId) === String(chapterId)) return;
+
+          // Save progress for the chapter we're leaving
+          updateHistory();
+
+          showToast("Loading chapter…");
+
+          // Reset state
+          imageLinks          = [];
+          currentPage         = 0;
+          chapterId           = String(newChapterId);
+          currentChapterIndex = allChapters.findIndex(c => String(c.id) === String(newChapterId));
+          chapterData         = null;
+
+          // Reset UI
+          container.innerHTML = "";
+          pageIndicator.textContent = "0 / 0";
+          pageProgress.value  = 0;
+          pageProgress.max    = 100;
+          nextChapterBtn.style.display = "none";
+          footerLoader.classList.add("hidden");
+
+          // Show centered loader again
+          loader.style.display = "";
+
+          // Update URL (unless triggered by browser nav)
+          if (!isPop) {
+            history.pushState(
+              { source, mangaId, chapterId },
+              "",
+              `/read/${source}/${mangaId}/${newChapterId}`
+            );
+          }
+
+          // Re-highlight panel (if open)
+          updatePanelHighlight();
+
+          // Fetch new chapter data (non-blocking title re-fetch not needed — stays same manga)
+          fetchChapterDetails();
+          await fetchImages();
+        }
+
+        function openPanel() {
+          renderChapterPanel();
+          chapterPanel.classList.remove("hidden");
+          panelBackdrop.classList.remove("hidden");
+          panelOpen = true;
+        }
+
+        function closePanel() {
+          chapterPanel.classList.add("hidden");
+          panelBackdrop.classList.add("hidden");
+          panelOpen = false;
+        }
+
+        function renderChapterPanel() {
+          chapterListEl.innerHTML = "";
+          if (allChapters.length === 0) {
+            const empty = document.createElement("div");
+            empty.style.cssText = "padding:24px 18px;color:#666;font-size:13px;";
+            empty.textContent = "No chapters available.";
+            chapterListEl.appendChild(empty);
             return;
           }
 
-          try {
-            const url = `${serverUrl}/mangadex/manga/${mangaId}/chapter-nav-details/${chapterId}`;
-            const response = await fetch(url);
-            if (!response.ok) throw new Error("Nav fetch failed");
+          const hist        = getHistory();
+          const seriesEntry = hist.find(h => h.mangaId === mangaId && h.source === source);
 
-            const navData = await response.json();
-            chapterData = navData.current_chapter;
+          allChapters.forEach(ch => {
+            const item = document.createElement("div");
+            item.className    = "chapter-item";
+            item.dataset.chId = String(ch.id);
 
-            if (chapterData?.attributes) {
-              const chNum = chapterData.attributes.chapter;
-              const title = chapterData.attributes.title;
-              chapterDetailsEl.textContent = `Chapter ${chNum}${title ? ': ' + title : ''}`;
-            } else {
-              chapterDetailsEl.textContent = `Chapter ${chapterId}`;
+            if (String(ch.id) === String(chapterId)) item.classList.add("active");
+
+            // Look up history by string AND number key for safety
+            const chRecord = seriesEntry?.chapters?.[ch.id]
+                          ?? seriesEntry?.chapters?.[String(ch.id)];
+
+            if (chRecord?.state === "finished") item.classList.add("finished");
+
+            const numSpan = document.createElement("span");
+            numSpan.className   = "ch-number";
+            numSpan.textContent = `Ch. ${ch.number}`;
+
+            const titleSpan = document.createElement("span");
+            titleSpan.className   = "ch-title";
+            titleSpan.textContent = ch.title || "";
+
+            const check = document.createElement("i");
+            check.className = "fa fa-check ch-check";
+
+            item.appendChild(numSpan);
+            item.appendChild(titleSpan);
+
+            // ── Progress badge ──
+            if (chRecord) {
+              const badge = document.createElement("span");
+              badge.className = "ch-badge";
+              if (chRecord.state === "finished") {
+                badge.classList.add("badge-read");
+                badge.textContent = "Read";
+              } else if (chRecord.state === "ongoing") {
+                badge.classList.add("badge-reading");
+                // Show page progress if we know the total (only available for current chapter)
+                const total = (String(ch.id) === String(chapterId)) ? imageLinks.length : 0;
+                if (total > 0) {
+                  badge.textContent = `Pg ${chRecord.page + 1}/${total}`;
+                } else {
+                  badge.textContent = chRecord.page > 0 ? `Pg ${chRecord.page + 1}` : "Reading";
+                }
+              }
+              item.appendChild(badge);
             }
 
-            if (navData.next_chapter_id) {
-              nextChapterBtn.style.display = "block";
-              nextChapterBtn.onclick = () => {
-                window.location.href = `/read/${source}/${mangaId}/${navData.next_chapter_id}`;
-              };
-            }
-          } catch (error) {
-            console.warn("Nav details error:", error);
-            chapterDetailsEl.textContent = `Chapter ${chapterId}`;
-            fetchLegacyChapterNav();
-          }
+            item.appendChild(check);
+
+            item.addEventListener("click", () => {
+              if (String(ch.id) !== String(chapterId)) {
+                loadChapter(ch.id);
+              }
+            });
+
+            chapterListEl.appendChild(item);
+          });
+
+          // Scroll active item into view
+          requestAnimationFrame(() => {
+            const active = chapterListEl.querySelector(".chapter-item.active");
+            if (active) active.scrollIntoView({ block: "nearest" });
+          });
         }
 
+        function updatePanelHighlight() {
+          const items = chapterListEl.querySelectorAll(".chapter-item");
+          items.forEach(item => {
+            item.classList.toggle("active", item.dataset.chId === String(chapterId));
+          });
+          const active = chapterListEl.querySelector(".chapter-item.active");
+          if (active) active.scrollIntoView({ block: "nearest" });
+        }
+
+        // ═══════════════════════════════════════════════════════════
+        // FETCHING LOGIC
+        // ═══════════════════════════════════════════════════════════
+
         async function fetchMangaTitle() {
-          // (Logic unchanged)
-          let url = source === "mangadex" 
+          const url = source === "mangadex"
             ? `${serverUrl}/mangadex/manga/${mangaId}`
             : `https://api.jikan.moe/v4/manga/${mangaId}`;
-
           try {
-            const res = await fetch(url);
+            const res  = await fetch(url);
             const data = await res.json();
             if (source === "mangadex") {
-              mangaTitleEl.textContent = data.attributes.title.en || Object.values(data.attributes.title)[0];
+              mangaTitleEl.textContent =
+                data.attributes?.title?.en ||
+                Object.values(data.attributes?.title || {})[0] ||
+                "Unknown Title";
             } else {
               mangaTitleEl.textContent = data.data?.title || "Unknown Title";
             }
@@ -547,169 +1095,419 @@
           }
         }
 
-        async function fetchLegacyChapterNav() {
-          const url = source === "mangadex" 
-             ? `${serverUrl}/mangadex/manga/${mangaId}/chapters`
-             : `${serverUrl}/chapters/${mangaId}`;
-          
+        async function fetchChapterDetails() {
+          // ── Legacy (non-mangadex) ──
+          if (source !== "mangadex") {
+            const ch = allChapters[currentChapterIndex];
+            if (ch) {
+              const title = ch.title ? ` · ${ch.title}` : "";
+              chapterDetailsEl.textContent = `Ch. ${ch.number}${title}`;
+            } else {
+              chapterDetailsEl.textContent = `Ch. ${chapterId}`;
+            }
+            // Wire next chapter button via allChapters
+            const nextCh = allChapters[currentChapterIndex + 1];
+            if (nextCh) {
+              nextChapterBtn.style.display = "flex";
+              nextChapterBtn.onclick = () => loadChapter(nextCh.id);
+            } else {
+              nextChapterBtn.style.display = "none";
+            }
+            return;
+          }
+
+          // ── MangaDex ──
           try {
-             const resp = await fetch(url);
-             if(!resp.ok) return;
-             const data = await resp.json();
-             const chapters = data.chapters;
-             const idx = chapters.findIndex(c => c.id == chapterId || c.chapter_number == chapterId);
-             
-             if(idx !== -1 && idx + 1 < chapters.length) {
-               const next = chapters[idx+1];
-               nextChapterBtn.style.display = "block";
-               nextChapterBtn.onclick = () => {
-                  window.location.href = `/read/${source}/${mangaId}/${next.id || next.chapter_number}`;
-               };
-             }
-          } catch(e) { console.error(e); }
+            const url      = `${serverUrl}/mangadex/manga/${mangaId}/chapter-nav-details/${chapterId}`;
+            const response = await fetch(url);
+            if (!response.ok) throw new Error("Nav fetch failed");
+            const navData = await response.json();
+            chapterData   = navData.current_chapter;
+
+            if (chapterData?.attributes) {
+              const chNum = chapterData.attributes.chapter;
+              const title = chapterData.attributes.title;
+              chapterDetailsEl.textContent =
+                `Ch. ${chNum}${title ? " · " + title : ""}`;
+            } else {
+              chapterDetailsEl.textContent = `Ch. ${chapterId}`;
+            }
+
+            if (navData.next_chapter_id) {
+              nextChapterBtn.style.display = "flex";
+              nextChapterBtn.onclick = () => loadChapter(navData.next_chapter_id);
+            } else {
+              nextChapterBtn.style.display = "none";
+            }
+          } catch (error) {
+            console.warn("Nav details error:", error);
+            chapterDetailsEl.textContent = `Ch. ${chapterId}`;
+            // Fallback: use allChapters for next btn
+            const nextCh = allChapters[currentChapterIndex + 1];
+            if (nextCh) {
+              nextChapterBtn.style.display = "flex";
+              nextChapterBtn.onclick = () => loadChapter(nextCh.id);
+            }
+          }
         }
 
         async function fetchImages() {
-          let url = source === "mangadex" 
+          const url = source === "mangadex"
             ? `${serverUrl}/mangadex/chapter/${chapterId}`
             : `${serverUrl}/retrieve/${mangaId}/${chapterId}`;
-
           try {
             const response = await fetch(url);
             if (!response.ok) throw new Error("Image fetch failed");
             imageLinks = await response.json();
-
             if (!imageLinks || imageLinks.length === 0) throw new Error("No images found");
-
             await preloadInitialImages();
           } catch (error) {
             console.error(error);
-            loader.style.borderColor = "red";
+            loader.style.borderTopColor = "red";
             chapterDetailsEl.textContent = "Error loading images.";
           }
         }
 
-        // Add this helper right above preloadInitialImages()
-function proxyUrl(src) {
-  if (!src || src.startsWith("/")) return src; // already relative/proxied
-  return `${serverUrl}/proxy-image?url=${encodeURIComponent(src)}`;
-}
+        function proxyUrl(src) {
+          if (!src || src.startsWith("/")) return src;
+          return `${serverUrl}/proxy-image?url=${encodeURIComponent(src)}`;
+        }
+
+        /** Build the DOM skeleton for images (flat or spread-based). */
+        function buildImageDOM() {
+          container.innerHTML = "";
+          if (layoutMode === "double") {
+            for (let i = 0; i < imageLinks.length; i += 2) {
+              const spread = document.createElement("div");
+              spread.className = "spread";
+              const img1 = document.createElement("img");
+              img1.loading = "lazy";
+              spread.appendChild(img1);
+              if (i + 1 < imageLinks.length) {
+                const img2 = document.createElement("img");
+                img2.loading = "lazy";
+                spread.appendChild(img2);
+              }
+              container.appendChild(spread);
+            }
+          } else {
+            imageLinks.forEach(() => {
+              const img = document.createElement("img");
+              img.loading = "lazy";
+              container.appendChild(img);
+            });
+          }
+        }
+
+        /** Returns ALL img elements regardless of spread wrapper depth. */
+        function getAllImages() {
+          return Array.from(container.querySelectorAll("img"));
+        }
 
         async function preloadInitialImages() {
-          // Create all IMG elements first (lazy loading structure)
-          imageLinks.forEach((src) => {
-            const img = document.createElement("img");
-            // Set a dummy transparent pixel or nothing initially to prevent broken icons
-            img.loading = "lazy"; // Native lazy loading
-            container.appendChild(img);
-          });
+          buildImageDOM();
 
-          // Preload first few
-          const images = container.getElementsByTagName("img");
-          const toPreload = Array.from(images).slice(0, 4);
+          const allImgs  = getAllImages();
+          const toPreload = allImgs.slice(0, 4);
 
-          // Detect Aspect Ratio on first image for Auto-Webtoon Mode
-          if (toPreload[0]) {
-             const tempImg = new Image();
-             tempImg.src = proxyUrl(imageLinks[0]);
-             await new Promise(r => {
-                tempImg.onload = () => {
-                   // If height is significantly larger than width (2x), assume Webtoon
-                   const isTall = tempImg.height > tempImg.width * 2;
-                   const userHasSetMode = localStorage.getItem(READER_MODE_KEY);
-                   
-                   if (isTall && !userHasSetMode) {
-                      setMode("webtoon", true);
-                   }
-                   r();
-                };
-                tempImg.onerror = r;
-             });
+          // ── Auto-guesser: detect tall (webtoon-style) images ──
+          if (toPreload[0] && imageLinks[0]) {
+            const tempImg = new Image();
+            tempImg.src   = proxyUrl(imageLinks[0]);
+            await new Promise(r => {
+              tempImg.onload = () => {
+                const isTall         = tempImg.height > tempImg.width * 2;
+                const userSetLayout  = localStorage.getItem(LAYOUT_KEY);
+                // Guesser only overrides layout to scroll (never changes single↔double)
+                // And is suppressed entirely if user has set a preference
+                if (isTall && !userSetLayout) {
+                  setLayout("scroll", true /* isAutoGuess */);
+                  // Rebuild DOM since layout changed
+                  buildImageDOM();
+                }
+                r();
+              };
+              tempImg.onerror = r;
+            });
           }
 
-          // Actually load sources for first few
-          const promises = toPreload.map((img, index) => {
-            return new Promise((resolve) => {
-              img.onload = resolve;
+          // Re-query after potential DOM rebuild
+          const imgs      = getAllImages();
+          const firstFour = imgs.slice(0, 4);
+
+          // Preload first 4 images
+          const promises = firstFour.map((img, idx) =>
+            new Promise(resolve => {
+              img.onload  = resolve;
               img.onerror = resolve;
-              img.src = proxyUrl(imageLinks[index]);
-            });
-          });
+              img.src     = proxyUrl(imageLinks[idx]);
+            })
+          );
 
           await Promise.all(promises);
-          
+
+          // ── First images ready: move loader to footer ──
           loader.style.display = "none";
-          
-          // Restore progress AFTER images exist
+          if (imageLinks.length > 4) {
+            footerLoader.classList.remove("hidden");
+          }
+
+          // Restore reading position
           restoreReadingProgress();
-          
-          // Load the rest in background
+
+          // Load the rest in the background
           loadRemainingImages();
         }
 
         function loadRemainingImages() {
-          const images = container.getElementsByTagName("img");
-          Array.from(images).slice(4).forEach((img, index) => {
-              img.src = proxyUrl(imageLinks[index + 4]);
+          const imgs      = getAllImages();
+          const remaining = imgs.slice(4);
+
+          if (remaining.length === 0) {
+            footerLoader.classList.add("hidden");
+            return;
+          }
+
+          let loadedCount = 0;
+          remaining.forEach((img, idx) => {
+            const done = () => {
+              loadedCount++;
+              if (loadedCount >= remaining.length) {
+                footerLoader.classList.add("hidden");
+              }
+            };
+            img.onload  = done;
+            img.onerror = done;
+            img.src     = proxyUrl(imageLinks[idx + 4]);
           });
         }
 
-        // --- View & Navigation Logic ---
+        /**
+         * Rebuild the image container DOM when switching between
+         * double ↔ single/scroll (where spread wrappers are needed).
+         * Reuses already-loaded image srcs to avoid re-fetching.
+         */
+        function rebuildImageContainer() {
+          if (imageLinks.length === 0) return;
+
+          const existingSrcs = getAllImages().map(img => img.src || "");
+          buildImageDOM();
+
+          const newImgs = getAllImages();
+          newImgs.forEach((img, i) => {
+            if (existingSrcs[i]) img.src = existingSrcs[i];
+          });
+
+          // Restore scroll position after rebuild
+          if (layoutMode === "scroll") {
+            setTimeout(() => {
+              const imgs = getAllImages();
+              if (imgs[currentPage]) {
+                imgs[currentPage].scrollIntoView({ behavior: "auto", block: "start" });
+              }
+            }, 50);
+          } else {
+            // Snap currentPage to even in double mode
+            if (layoutMode === "double" && currentPage % 2 !== 0) {
+              currentPage = Math.max(0, currentPage - 1);
+            }
+            updatePagination();
+          }
+          updateFooter();
+        }
+
+        // ═══════════════════════════════════════════════════════════
+        // LAYOUT & APPEARANCE
+        // ═══════════════════════════════════════════════════════════
+
+        function setLayout(mode, isAutoGuess = false) {
+          const prevMode    = layoutMode;
+          const needRebuild = (mode === "double" || prevMode === "double") && mode !== prevMode;
+          layoutMode = mode;
+
+          document.body.classList.remove("view-scroll", "view-single", "view-double");
+          document.body.classList.add(`view-${mode}`);
+
+          updateLayoutButtons();
+          updateDirectionButton(); // show/hide based on scroll vs paged
+
+          if (!isAutoGuess) {
+            localStorage.setItem(LAYOUT_KEY, mode);
+          }
+
+          if (imageLinks.length > 0) {
+            if (needRebuild) {
+              rebuildImageContainer();
+            } else if (mode === "scroll") {
+              const imgs = getAllImages();
+              if (imgs[currentPage]) {
+                imgs[currentPage].scrollIntoView({ behavior: "auto", block: "start" });
+              }
+            } else {
+              if (mode === "double" && currentPage % 2 !== 0) {
+                currentPage = Math.max(0, currentPage - 1);
+              }
+              updatePagination();
+            }
+          }
+          updateFooter();
+        }
+
+        function setFit(mode) {
+          document.body.classList.remove("fit-width", "fit-height", "fit-both");
+          document.body.classList.add(mode);
+          fitMode = mode;
+          localStorage.setItem(FIT_KEY, mode);
+          updateFitButtons();
+        }
+
+        function setDirection(dir) {
+          document.body.classList.remove("dir-ltr", "dir-rtl");
+          document.body.classList.add(`dir-${dir}`);
+          direction = dir;
+          localStorage.setItem(DIRECTION_KEY, dir);
+          updateDirectionButton();
+        }
+
+        function applyZoom(level, save = true) {
+          zoomLevel = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, level));
+          document.documentElement.style.setProperty("--zoom", zoomLevel);
+          zoomLabel.textContent = `${Math.round(zoomLevel * 100)}%`;
+          zoomOutBtn.disabled = zoomLevel <= ZOOM_MIN;
+          zoomInBtn.disabled  = zoomLevel >= ZOOM_MAX;
+          if (save) localStorage.setItem(ZOOM_KEY, zoomLevel);
+        }
+
+        function updateLayoutButtons() {
+          layoutScrollBtn.classList.toggle("active", layoutMode === "scroll");
+          layoutSingleBtn.classList.toggle("active", layoutMode === "single");
+          layoutDoubleBtn.classList.toggle("active", layoutMode === "double");
+        }
+
+        function updateFitButtons() {
+          fitWidthBtn.classList.toggle("active", fitMode === "fit-width");
+          fitHeightBtn.classList.toggle("active", fitMode === "fit-height");
+          fitBothBtn.classList.toggle("active",  fitMode === "fit-both");
+        }
+
+        function updateDirectionButton() {
+          if (layoutMode === "scroll") {
+            directionBtn.style.display = "none";
+          } else {
+            directionBtn.style.display = "";
+            directionBtn.textContent   = direction.toUpperCase();
+          }
+        }
+
+        // ═══════════════════════════════════════════════════════════
+        // NAVIGATION
+        // ═══════════════════════════════════════════════════════════
 
         function updatePagination() {
-          // Horizontal translate for pagination
-          container.scrollLeft = currentPage * window.innerWidth;
-          updateHistory(); // Save progress
+          if (layoutMode === "double") {
+            const spreadIndex = Math.floor(currentPage / 2);
+            container.scrollLeft = spreadIndex * window.innerWidth;
+          } else {
+            container.scrollLeft = currentPage * window.innerWidth;
+          }
+          updateHistory();
         }
 
         function updateFooter() {
-          if (imageLinks.length > 0) {
-            if (document.body.classList.contains("view-pagination")) {
-              pageIndicator.textContent = `${currentPage + 1} / ${imageLinks.length}`;
-              pageProgress.value = currentPage + 1;
-              pageProgress.max = imageLinks.length;
-            } else {
-              // Webtoon logic is handled in scroll listener
-            }
+          if (imageLinks.length === 0) {
+            pageIndicator.textContent = "0 / 0";
+            pageProgress.value = 0;
+            pageProgress.max   = 100;
+            return;
+          }
+
+          if (layoutMode === "scroll") {
+            // Handled by scroll listener (updateScrollProgress)
+          } else if (layoutMode === "double") {
+            const pg2     = Math.min(currentPage + 2, imageLinks.length);
+            const display = currentPage + 1 === pg2
+              ? `${pg2} / ${imageLinks.length}`
+              : `${currentPage + 1}–${pg2} / ${imageLinks.length}`;
+            pageIndicator.textContent = display;
+            const spreadIndex  = Math.floor(currentPage / 2);
+            const totalSpreads = Math.ceil(imageLinks.length / 2);
+            pageProgress.value = spreadIndex + 1;
+            pageProgress.max   = totalSpreads;
+          } else {
+            pageIndicator.textContent = `${currentPage + 1} / ${imageLinks.length}`;
+            pageProgress.value = currentPage + 1;
+            pageProgress.max   = imageLinks.length;
           }
         }
 
-        function updateWebtoonProgress() {
+        function updateScrollProgress() {
           if (imageLinks.length === 0) return;
 
-          // Update Progress Bar
-          const scrollableHeight = container.scrollHeight - container.clientHeight;
-          const progress = scrollableHeight > 0 ? (container.scrollTop / scrollableHeight) * 100 : 0;
-          pageProgress.value = progress;
-          pageProgress.max = 100;
+          const scrollableH = container.scrollHeight - container.clientHeight;
+          const pct = scrollableH > 0 ? (container.scrollTop / scrollableH) * 100 : 0;
+          pageProgress.value = pct;
+          pageProgress.max   = 100;
 
-          // Determine Current Page Index based on visibility
-          const images = container.getElementsByTagName("img");
-          let visiblePage = currentPage; // default to current
-          
-          // Scan images to find which one is mostly visible
-          for (let i = 0; i < images.length; i++) {
-            const rect = images[i].getBoundingClientRect();
-            // If the top of the image is within the viewport (with some buffer)
-            // Or if the image takes up the whole screen
+          // Detect current page by visibility
+          const imgs = getAllImages();
+          let visible = currentPage;
+          for (let i = 0; i < imgs.length; i++) {
+            const rect = imgs[i].getBoundingClientRect();
             if (rect.bottom > 0 && rect.top < window.innerHeight / 2) {
-              visiblePage = i;
+              visible = i;
             }
           }
-          
-          if (visiblePage !== currentPage) {
-             currentPage = visiblePage;
-             pageIndicator.textContent = `${currentPage + 1} / ${imageLinks.length}`;
-             updateHistory(); // Save progress on page change
+          if (visible !== currentPage) {
+            currentPage = visible;
+            pageIndicator.textContent = `${currentPage + 1} / ${imageLinks.length}`;
+            updateHistory();
           }
         }
 
-        function changePage(direction) {
-          const newPage = currentPage + direction;
-          if (newPage >= 0 && newPage < imageLinks.length) {
-            currentPage = newPage;
-            updatePagination();
-            updateFooter();
+        /**
+         * direction: +1 = story-forward, -1 = story-backward
+         * (caller already accounts for RTL when mapping clicks/keys)
+         */
+        function changePage(direction_) {
+          if (layoutMode === "scroll") {
+            // In scroll mode, arrow keys scroll by one viewport height
+            container.scrollBy({ top: direction_ * window.innerHeight * 0.9, behavior: "smooth" });
+            return;
+          }
+
+          const step    = layoutMode === "double" ? 2 : 1;
+          const newPage = currentPage + direction_ * step;
+
+          if (newPage < 0) {
+            handleChapterEdge(-1);
+            return;
+          }
+          if (newPage >= imageLinks.length) {
+            handleChapterEdge(1);
+            return;
+          }
+
+          currentPage = newPage;
+          updatePagination();
+          updateFooter();
+        }
+
+        function handleChapterEdge(storyDir) {
+          // storyDir: +1 = next chapter, -1 = prev chapter
+          if (storyDir > 0) {
+            const next = allChapters[currentChapterIndex + 1];
+            if (next) {
+              loadChapter(next.id);
+            } else {
+              showToast("You've reached the last chapter!");
+            }
+          } else {
+            const prev = allChapters[currentChapterIndex - 1];
+            if (prev) {
+              loadChapter(prev.id);
+            } else {
+              showToast("This is the first chapter!");
+            }
           }
         }
 
@@ -718,74 +1516,143 @@ function proxyUrl(src) {
           footer.classList.toggle("hidden");
         }
 
-        function setMode(mode, isInitial = false) {
-          if (mode === "pagination") {
-            document.body.classList.remove("view-webtoon");
-            document.body.classList.add("view-pagination");
-            modePaginationBtn.classList.add("active");
-            modeWebtoonBtn.classList.remove("active");
-            
-            // Fix layout
-            container.scrollLeft = currentPage * window.innerWidth;
-            updatePagination();
-          } else {
-            document.body.classList.remove("view-pagination");
-            document.body.classList.add("view-webtoon");
-            modeWebtoonBtn.classList.add("active");
-            modePaginationBtn.classList.remove("active");
-            
-            // Scroll to current page in vertical mode
-            if (!isInitial) {
-              const imgs = container.getElementsByTagName("img");
-              if (imgs[currentPage]) {
-                imgs[currentPage].scrollIntoView({ behavior: "auto", block: "start" });
-              }
-            }
-          }
-          
-          if (!isInitial) {
-             localStorage.setItem(READER_MODE_KEY, mode);
-          }
-          updateFooter();
+        // ═══════════════════════════════════════════════════════════
+        // TOAST
+        // ═══════════════════════════════════════════════════════════
+        function showToast(msg, duration = 2800) {
+          toast.textContent = msg;
+          toast.classList.remove("hidden");
+          clearTimeout(toastTimeout);
+          toastTimeout = setTimeout(() => toast.classList.add("hidden"), duration);
         }
 
-        // --- Controls Setup ---
-
+        // ═══════════════════════════════════════════════════════════
+        // CONTROLS SETUP (called once)
+        // ═══════════════════════════════════════════════════════════
         function setupControls() {
-          modePaginationBtn.addEventListener("click", () => setMode("pagination"));
-          modeWebtoonBtn.addEventListener("click", () => setMode("webtoon"));
 
-          // Scroll Listener (Throttled slightly for performance if needed, but modern browsers handle this okay)
+          // ── Layout switcher ──
+          layoutScrollBtn.addEventListener("click", () => setLayout("scroll"));
+          layoutSingleBtn.addEventListener("click", () => setLayout("single"));
+          layoutDoubleBtn.addEventListener("click", () => setLayout("double"));
+
+          // ── Fit switcher ──
+          fitWidthBtn.addEventListener("click",  () => setFit("fit-width"));
+          fitHeightBtn.addEventListener("click", () => setFit("fit-height"));
+          fitBothBtn.addEventListener("click",   () => setFit("fit-both"));
+
+          // ── Direction ──
+          directionBtn.addEventListener("click", () => {
+            setDirection(direction === "ltr" ? "rtl" : "ltr");
+          });
+
+          // ── Zoom buttons ──
+          zoomOutBtn.addEventListener("click", () => applyZoom(zoomLevel - ZOOM_STEP));
+          zoomInBtn.addEventListener("click",  () => applyZoom(zoomLevel + ZOOM_STEP));
+
+          // ── Ctrl+Scroll / Pinch zoom ──
+          container.addEventListener("wheel", (e) => {
+            if (e.ctrlKey) {
+              e.preventDefault();
+              const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+              applyZoom(zoomLevel + delta);
+            }
+          }, { passive: false });
+
+          // ── Scroll listener (scroll mode progress) ──
           container.addEventListener("scroll", () => {
-            if (document.body.classList.contains("view-webtoon")) {
-              updateWebtoonProgress();
+            if (layoutMode === "scroll") updateScrollProgress();
+          });
+
+          // ── Chapter panel ──
+          chaptersBtn.addEventListener("click",   openPanel);
+          closePanelBtn.addEventListener("click", closePanel);
+          panelBackdrop.addEventListener("click", closePanel);
+
+          // ── Nav overlay (paged modes) ──
+          // In RTL mode, the visual left/right clicks are swapped in story direction
+          navLeft.addEventListener("click", () => {
+            const storyDir = direction === "rtl" ? 1 : -1;
+            changePage(storyDir);
+          });
+          navRight.addEventListener("click", () => {
+            const storyDir = direction === "rtl" ? -1 : 1;
+            changePage(storyDir);
+          });
+          navCenter.addEventListener("click", toggleUI);
+
+          // ── Progress bar click (paged modes) ──
+          pageProgress.addEventListener("click", (e) => {
+            if (imageLinks.length === 0) return;
+            if (layoutMode === "scroll") {
+              const ratio = e.offsetX / pageProgress.offsetWidth;
+              const scrollableH = container.scrollHeight - container.clientHeight;
+              container.scrollTo({ top: ratio * scrollableH, behavior: "smooth" });
+            } else {
+              const ratio   = e.offsetX / pageProgress.offsetWidth;
+              const target  = Math.floor(ratio * imageLinks.length);
+              const snapped = layoutMode === "double" ? target - (target % 2) : target;
+              currentPage   = Math.max(0, Math.min(snapped, imageLinks.length - 1));
+              updatePagination();
+              updateFooter();
             }
           });
 
-          // Keyboard Support
+          // ── Keyboard ──
           document.addEventListener("keydown", (e) => {
-            if(document.body.classList.contains("view-pagination")) {
-               if(e.key === "ArrowRight") changePage(1);
-               if(e.key === "ArrowLeft") changePage(-1);
+            // Don't fire if user is typing somewhere
+            if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
+
+            const rtl = direction === "rtl" && layoutMode !== "scroll";
+
+            if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+              e.preventDefault();
+              changePage(rtl ? -1 : 1);
+            }
+            if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+              e.preventDefault();
+              changePage(rtl ? 1 : -1);
+            }
+            if (e.key === " " && !e.shiftKey) {
+              e.preventDefault();
+              changePage(1);
+            }
+            if (e.key === " " && e.shiftKey) {
+              e.preventDefault();
+              changePage(-1);
+            }
+            if (e.key === "Escape" && panelOpen) {
+              closePanel();
+            }
+            if (e.key === "f" || e.key === "F") {
+              toggleUI();
             }
           });
 
-          document.getElementById("nav-left").addEventListener("click", () => changePage(-1));
-          document.getElementById("nav-right").addEventListener("click", () => changePage(1));
-          document.getElementById("nav-center").addEventListener("click", toggleUI);
+          // ── Resize: re-snap scroll position so paged modes stay aligned ──
+          let resizeTimer = null;
+          window.addEventListener("resize", () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+              if (layoutMode !== "scroll" && imageLinks.length > 0) {
+                updatePagination();
+              }
+            }, 50);
+          });
 
+          // ── Back button ──
           backBtn.addEventListener("click", () => {
-            // Try to communicate with parent if iframe, else go back
             if (window.parent && window.parent !== window) {
               window.parent.postMessage("close-reader-modal", "*");
             } else if (window.history.length > 1) {
               window.history.back();
             } else {
-               window.location.href = "/"; // Fallback home
+              window.location.href = "/";
             }
           });
         }
 
+        // ── Kick it off ──
         init();
       });
     </script>