From 2658c72a38a3077cfd117d9f02478ed58307ec7f Mon Sep 17 00:00:00 2001
From: Arkm20 <aarush.kkarnik@outlook.com>
Date: Tue, 31 Mar 2026 22:01:00 -0500
Subject: [PATCH] updates

---
 __pycache__/app.cpython-312.pyc               |  Bin 75974 -> 0 bytes
 animex/index.html                             |    4 +-
 animex/series-info.html                       | 3871 +++++++++--------
 animex/view.html                              | 1458 ++++---
 app.py                                        |  198 +-
 .../0645ef538033e2795b30209324af2e98.json     |    1 +
 .../7680ccae26d832813beb1c9dd45f93b8.json     |    1 +
 .../c1eaed5e0ff0e7398017459efca682b9.json     |    1 +
 .../e0160811950ce1dda6fcc468d4eb1c77.json     |    1 +
 .../f7c098cf54b66ed89c8d844335ba1493.json     |    1 +
 templates/reader.html                         | 1771 ++++++--
 11 files changed, 4426 insertions(+), 2881 deletions(-)
 delete mode 100644 __pycache__/app.cpython-312.pyc
 create mode 100644 data/cache/generic/0645ef538033e2795b30209324af2e98.json
 create mode 100644 data/cache/generic/7680ccae26d832813beb1c9dd45f93b8.json
 create mode 100644 data/cache/generic/c1eaed5e0ff0e7398017459efca682b9.json
 create mode 100644 data/cache/generic/e0160811950ce1dda6fcc468d4eb1c77.json
 create mode 100644 data/cache/generic/f7c098cf54b66ed89c8d844335ba1493.json

diff --git a/__pycache__/app.cpython-312.pyc b/__pycache__/app.cpython-312.pyc
deleted file mode 100644
index 6704a14d330f3798b2750a2de5f80b490aaf2f43..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 75974
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
CFH|-F

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>