/* =====================================================================
   THE MOSQUITO — VILLAIN SERIES | SHARED DESIGN SYSTEM
   ===================================================================== */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;600;700&family=Rajdhani:wght@400;600;700&family=Black+Ops+One&family=Share+Tech+Mono&display=swap');

/* ── CSS VARIABLES ── */
:root {
  --red:    #cc1111;
  --red2:   #ff2222;
  --gold:   #d4a017;
  --gold2:  #ffd055;
  --cyan:   #00c8a0;
  --purple: #8822cc;
  --white:  #e8e8e8;
  --dim:    rgba(232,232,232,.42);
  --bg:     #070707;
  --ep-color: var(--red2);         /* overridden per episode */
  --ep-color2: var(--gold);
  --ep-bg: #070707;
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--ep-bg);
  color:var(--white);
  font-family:'Oswald',sans-serif;
  overflow-x:hidden;
  cursor:none;                    /* custom cursor */
}
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }

/* ── CUSTOM CURSOR ── */
#cursor {
  position:fixed; pointer-events:none; z-index:99999;
  width:12px; height:12px;
  background:var(--red2);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:transform .1s ease, width .2s, height .2s, background .2s;
  mix-blend-mode:difference;
}
#cursor.hovered { width:32px; height:32px; background:rgba(255,34,34,.6); }
#cursor-trail { position:fixed; pointer-events:none; z-index:99998; }
.trail-dot {
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--red2); pointer-events:none;
  transform:translate(-50%,-50%);
  animation:trailFade .6s ease forwards;
}
@keyframes trailFade { to { opacity:0; transform:translate(-50%,-50%) scale(0); } }

/* ── ACCESSIBILITY (FOCUS STATES) ── */
a:focus-visible, button:focus-visible, .ep-grid-card:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ep-color, #ff2222) !important;
  outline-offset: 4px !important;
}

/* ── SCROLL PROGRESS ── */
#scroll-prog {
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:9000;
  background:linear-gradient(90deg, var(--ep-color), var(--ep-color2), var(--ep-color));
  box-shadow:0 0 10px var(--ep-color);
  transition:width .05s linear;
}

/* ═══════════════════════════════════════════════
   CINEMATIC LOADING SCREEN
   ═══════════════════════════════════════════════ */
#loading-screen {
  position:fixed; inset:0; z-index:99999;
  background:#000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  transition:opacity .6s ease;
}
#loading-screen.done { opacity:0; pointer-events:none; }
.load-glitch {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(28px,5vw,52px);
  letter-spacing:.6em;
  color:#fff;
  animation:loadGlitch 2.5s ease-in-out infinite;
}
.load-bar-wrap {
  width:clamp(200px,40vw,400px); height:2px;
  background:rgba(255,255,255,.06);
  margin-top:24px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.load-bar {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--ep-color), var(--ep-color2));
  box-shadow:0 0 12px var(--ep-color);
  transition:width .05s linear;
}
.load-classified {
  font-family:'Share Tech Mono',monospace;
  font-size:10px; letter-spacing:.35em;
  color:rgba(255,255,255,.18);
  margin-top:14px;
  animation:loadBlink 1s ease infinite;
}
@keyframes loadGlitch {
  0%,100% { text-shadow:none; opacity:1; }
  10%  { text-shadow:3px 0 var(--red2),-3px 0 var(--cyan); transform:skewX(1deg); }
  20%  { text-shadow:-2px 0 var(--cyan),2px 0 var(--red2); transform:skewX(-1deg); }
  30%  { text-shadow:none; transform:none; opacity:.85; }
  50%  { text-shadow:1px 0 var(--red2); opacity:1; }
  70%  { text-shadow:-1px 0 var(--cyan); opacity:.9; }
}
@keyframes loadBlink { 0%,100%{opacity:.18;} 50%{opacity:.5;} }

/* ═══════════════════════════════════════════════
   FLOATING SHARE BAR
   ═══════════════════════════════════════════════ */
#share-bar {
  position:fixed; right:16px; top:50%; z-index:800;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:8px;
}
.share-btn {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;
  font-size:16px; cursor:pointer;
  transition:all .25s ease;
  backdrop-filter:blur(8px);
  color:rgba(255,255,255,.5);
  text-decoration:none;
}
.share-btn:hover {
  border-color:var(--ep-color);
  color:var(--ep-color);
  transform:scale(1.1);
  box-shadow:0 0 16px rgba(204,17,17,.3);
}
.share-btn.copied {
  background:var(--cyan) !important;
  color:#000 !important;
  border-color:var(--cyan) !important;
}
.share-btn .share-tooltip {
  position:absolute; right:52px; top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.9); color:var(--ep-color);
  font-family:'Bebas Neue',cursive; font-size:10px;
  letter-spacing:.2em; padding:4px 10px;
  border:1px solid rgba(255,255,255,.1);
  white-space:nowrap; opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.share-btn:hover .share-tooltip { opacity:1; }

/* ═══════════════════════════════════════════════
   QUOTE CARD MODAL
   ═══════════════════════════════════════════════ */
#quote-modal {
  position:fixed; inset:0; z-index:9500;
  background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
}
#quote-modal.active { display:flex; }
.quote-card {
  width:clamp(300px,80vw,560px);
  max-height: 90vh;
  overflow-y: auto;
  background:linear-gradient(135deg,#0a0a0a,#141414);
  border:1px solid rgba(255,255,255,.08);
  padding:48px 40px;
  text-align:center;
  position:relative;
}
.quote-card-text {
  font-family:'Oswald',sans-serif;
  font-size:clamp(16px,2.5vw,22px);
  color:rgba(255,255,255,.75);
  line-height:1.75;
  font-style:italic;
  margin-bottom:20px;
}
.quote-card-villain {
  font-family:'Bebas Neue',cursive;
  font-size:14px; letter-spacing:.4em;
  color:var(--ep-color);
  margin-bottom:24px;
}
.quote-card-brand {
  font-family:'Bebas Neue',cursive;
  font-size:10px; letter-spacing:.55em;
  color:rgba(255,255,255,.15);
}
.quote-card-actions {
  display:flex; gap:10px; justify-content:center; margin-top:24px;
}
.quote-card-actions button {
  padding:8px 20px;
  font-family:'Bebas Neue',cursive; font-size:11px;
  letter-spacing:.25em;
  background:none; border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.5);
  cursor:pointer; transition:all .2s;
}
.quote-card-actions button:hover {
  border-color:var(--ep-color); color:var(--ep-color);
}
.quote-card-actions button.primary {
  background:var(--ep-color); color:#fff; border-color:var(--ep-color);
}
.quote-card-close {
  position:absolute; top:12px; right:16px;
  font-family:'Bebas Neue',cursive; font-size:20px;
  color:rgba(255,255,255,.3); cursor:pointer;
  transition:color .2s;
}
.quote-card-close:hover { color:var(--ep-color); }

/* ═══════════════════════════════════════════════
   AUDIO TOGGLE
   ═══════════════════════════════════════════════ */
#audio-toggle {
  position:fixed; bottom:52px; right:16px; z-index:800;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;
  font-size:14px; cursor:pointer;
  transition:all .25s ease;
  backdrop-filter:blur(8px);
  color:rgba(255,255,255,.4);
}
#audio-toggle:hover { border-color:var(--ep-color); color:var(--ep-color); }
#audio-toggle.muted { color:rgba(255,255,255,.15); }
#audio-toggle .audio-bars {
  display:flex; gap:2px; align-items:flex-end; height:14px;
}
#audio-toggle .audio-bars span {
  width:2px; background:currentColor; border-radius:1px;
  animation:audioPulse 1.2s ease-in-out infinite;
}
#audio-toggle .audio-bars span:nth-child(1) { height:4px; animation-delay:0s; }
#audio-toggle .audio-bars span:nth-child(2) { height:8px; animation-delay:.15s; }
#audio-toggle .audio-bars span:nth-child(3) { height:12px; animation-delay:.3s; }
#audio-toggle .audio-bars span:nth-child(4) { height:6px; animation-delay:.45s; }
#audio-toggle.muted .audio-bars span { animation:none; height:2px; }
@keyframes audioPulse {
  0%,100% { transform:scaleY(1); }
  50% { transform:scaleY(.4); }
}

/* ═══════════════════════════════════════════════
   KEYBOARD NAV HINT
   ═══════════════════════════════════════════════ */
#kb-hint {
  position:fixed; bottom:16px; left:50%; z-index:600;
  transform:translateX(-50%);
  font-family:'Share Tech Mono',monospace;
  font-size:9px; letter-spacing:.3em;
  color:rgba(255,255,255,.12);
  padding:4px 14px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
  transition:opacity .5s ease;
  pointer-events:none;
}
#kb-hint.hidden { opacity:0; }

/* ═══════════════════════════════════════════════
   NIGHT MODE
   ═══════════════════════════════════════════════ */
body.night-mode .ep-hero { filter:brightness(.85) contrast(1.1); }
body.night-mode #ambient-canvas { opacity:.6; }
.night-badge {
  position:fixed; top:60px; right:16px; z-index:600;
  font-family:'Share Tech Mono',monospace;
  font-size:8px; letter-spacing:.3em;
  color:rgba(255,34,34,.4);
  padding:3px 10px;
  border:1px solid rgba(255,34,34,.15);
  background:rgba(0,0,0,.6);
  animation:nightPulse 3s ease infinite;
  pointer-events:none;
}
@keyframes nightPulse { 0%,100%{opacity:.4;} 50%{opacity:.8;} }

/* ═══════════════════════════════════════════════
   EASTER EGG — COCKROACH WALKER
   ═══════════════════════════════════════════════ */
.cockroach-walker {
  position:fixed; bottom:38px; z-index:9998;
  font-size:20px;
  animation:roachWalk 12s linear forwards;
  pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(204,136,0,.5));
}
@keyframes roachWalk {
  0%   { left:-30px; transform:scaleX(-1); }
  100% { left:calc(100vw + 30px); transform:scaleX(-1); }
}

/* ═══════════════════════════════════════════════
   EASTER EGG — SCREEN INVERT
   ═══════════════════════════════════════════════ */
body.inverted {
  filter:invert(1) hue-rotate(180deg);
  transition:filter .3s ease;
}

/* ═══════════════════════════════════════════════
   CONTINUE READING PROMPT
   ═══════════════════════════════════════════════ */
#continue-prompt {
  position:fixed; bottom:56px; left:50%; z-index:700;
  transform:translateX(-50%);
  background:rgba(0,0,0,.9);
  border:1px solid var(--ep-color);
  padding:12px 28px;
  display:none; align-items:center; gap:16px;
  backdrop-filter:blur(12px);
  box-shadow:0 0 30px rgba(0,0,0,.8);
  animation:promptSlide .5s ease;
}
#continue-prompt.active { display:flex; }
.continue-text {
  font-family:'Oswald',sans-serif;
  font-size:12px; letter-spacing:.15em;
  color:rgba(255,255,255,.55);
}
.continue-text strong {
  color:var(--ep-color); font-weight:600;
}
.continue-btn {
  padding:6px 18px;
  background:var(--ep-color); color:#fff;
  font-family:'Bebas Neue',cursive; font-size:11px;
  letter-spacing:.25em; border:none;
  cursor:pointer; transition:box-shadow .2s;
}
.continue-btn:hover { box-shadow:0 0 20px var(--ep-color); }
.continue-dismiss {
  color:rgba(255,255,255,.2); cursor:pointer;
  font-size:16px; transition:color .2s;
}
.continue-dismiss:hover { color:rgba(255,255,255,.5); }
@keyframes promptSlide { from{transform:translateX(-50%) translateY(20px);opacity:0;} to{transform:translateX(-50%) translateY(0);opacity:1;} }

/* ═══════════════════════════════════════════════
   MOBILE SHARE BAR
   ═══════════════════════════════════════════════ */
@media (max-width:600px) {
  #share-bar {
    position:fixed; bottom:36px; right:8px; top:auto;
    transform:none;
    flex-direction:row; gap:6px;
  }
  .share-btn { width:34px; height:34px; font-size:14px; }
  .share-btn .share-tooltip { display:none; }
  #audio-toggle { bottom:36px; right:auto; left:8px; width:32px; height:32px; }
  #kb-hint { display:none; }
  #continue-prompt { left:8px; right:8px; transform:none; }
  .quote-card { padding:32px 24px; }
}


/* ── GRAIN OVERLAY ── */
body::before {
  content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9990; opacity:.3; mix-blend-mode:overlay;
}

/* ── EPISODE TOP NAV ── */
#ep-nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:52px; display:flex; align-items:center;
  padding:0 40px; gap:28px;
  background:linear-gradient(180deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.7) 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(12px);
}
.nav-brand {
  font-family:'Bebas Neue',cursive; font-size:20px; letter-spacing:.32em;
  color:var(--ep-color); text-shadow:0 0 20px var(--ep-color);
  white-space:nowrap; flex-shrink:0;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.nav-brand a { color:inherit; }

/* Episode progress dots */
.ep-dots {
  display:flex; gap:6px; align-items:center; flex:1; justify-content:center;
}
.ep-dot {
  position:relative; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',cursive; font-size:9px; letter-spacing:.1em;
  color:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.1);
  border-radius:2px; transition:all .3s ease; flex-shrink:0;
  text-decoration:none;
}
.ep-dot:hover { border-color:var(--ep-color); color:var(--ep-color); }
.ep-dot.visited { border-color:rgba(255,255,255,.35); color:rgba(255,255,255,.5); }
.ep-dot.visited::after {
  content:'✓'; position:absolute; top:-4px; right:-4px;
  font-size:8px; color:var(--cyan);
}
.ep-dot.current {
  border-color:var(--ep-color); color:var(--ep-color);
  background:rgba(204,17,17,.1);
  box-shadow:0 0 14px rgba(204,17,17,.3);
}

.nav-ep-num {
  font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:.3em;
  color:rgba(255,255,255,.22); white-space:nowrap; flex-shrink:0;
}

/* ── PAGE TRANSITION OVERLAY ── */
#page-transition {
  position:fixed; inset:0; z-index:99997;
  background:#000; opacity:0; pointer-events:none;
  transition:opacity .4s ease;
}
#page-transition.active { opacity:1; pointer-events:all; }

/* ── EPISODE HERO SECTION ── */
.ep-hero {
  position:relative; width:100%; min-height:100vh;
  display:flex; align-items:center; overflow:hidden;
}
.ep-hero-bg {
  position:absolute; inset:0; z-index:0;
}
.ep-hero-art {
  position:absolute; right:0; top:0; bottom:0; z-index:3;
  width:clamp(300px,50%,720px);
  display:flex; align-items:flex-end;
}
.ep-hero-art img {
  width:100%; height:100%; object-fit:cover; object-position:top center;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 15%,#000 40%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 15%,#000 40%,#000 100%);
  filter:drop-shadow(-30px 0 60px rgba(0,0,0,.95));
}
.ep-hero-art.art-left {
  right:auto; left:0;
}
.ep-hero-art.art-left img {
  mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.3) 15%,#000 40%,#000 100%);
  -webkit-mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.3) 15%,#000 40%,#000 100%);
  filter:drop-shadow(30px 0 60px rgba(0,0,0,.95));
}

/* Hero content */
.ep-hero-content {
  position:relative; z-index:10;
  padding:100px 60px 60px;
  max-width:600px;
}
.ep-hero-content.content-right { margin-left:auto; }

.ep-number-bg {
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  font-family:'Black Ops One',cursive;
  font-size:clamp(180px,30vw,400px);
  color:transparent; line-height:.85;
  -webkit-text-stroke:1px rgba(255,255,255,.04);
}

.ep-label {
  font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:.55em;
  color:var(--ep-color); margin-bottom:8px; display:block;
  text-transform:uppercase;
  text-shadow:0 0 15px var(--ep-color);
}
.ep-tag {
  display:inline-block; padding:4px 16px;
  background:var(--ep-color);
  font-family:'Bebas Neue',cursive; font-size:12px; letter-spacing:.35em;
  box-shadow:0 0 20px rgba(204,17,17,.4); margin-bottom:12px;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}
.ep-hero-title {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(70px,13vw,170px); line-height:.85; letter-spacing:.02em;
  display:block; margin-bottom:8px;
}
.ep-hero-title.gradient-text {
  background:linear-gradient(180deg,#fff 0%,#ccc 40%,#777 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.ep-hero-subtitle {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(28px,5vw,72px); line-height:1; letter-spacing:.05em;
  color:var(--ep-color); display:block; margin-bottom:18px;
}
.ep-hero-desc {
  font-family:'Oswald',sans-serif; font-size:clamp(14px,1.6vw,18px);
  line-height:1.75; color:rgba(255,255,255,.45);
  max-width:460px; margin-bottom:32px;
}
.ep-hero-desc strong { color:var(--ep-color2); }

/* ── BUTTONS ── */
.btn-mag {
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 44px;
  background:var(--ep-color);
  font-family:'Bebas Neue',cursive; font-size:clamp(15px,1.9vw,22px);
  letter-spacing:.3em; color:#fff; border:none; cursor:none;
  box-shadow:0 0 40px rgba(204,17,17,.35);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
  position:relative; overflow:hidden;
  transition:box-shadow .3s, transform .1s;
  will-change:transform;
}
.btn-mag::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform:translateX(-200%); transition:transform .5s ease;
}
.btn-mag:hover::before { transform:translateX(200%); }
.btn-mag:hover { box-shadow:0 0 60px rgba(204,17,17,.6); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 38px;
  border:1px solid rgba(255,255,255,.2);
  font-family:'Bebas Neue',cursive; font-size:clamp(14px,1.7vw,20px);
  letter-spacing:.28em; color:rgba(255,255,255,.5);
  cursor:none; transition:all .25s ease;
  clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%);
}
.btn-ghost:hover { border-color:var(--ep-color); color:var(--ep-color); }

.btn-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* ── STORY SECTIONS ── */
.story-section {
  position:relative; overflow:hidden;
  min-height:480px;
}
.story-inner {
  position:relative; display:flex; align-items:center;
  min-height:480px;
}
.story-art {
  position:relative; z-index:5; flex-shrink:0;
  width:clamp(260px,36%,520px); min-height:480px;
  display:flex; align-items:flex-end;
}
.story-art img {
  width:100%; height:100%; object-fit:cover; object-position:top;
  max-height:480px;
}
.story-art.left img {
  mask-image:linear-gradient(90deg,rgba(0,0,0,.1) 0%,#000 35%,#000 75%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.1) 0%,#000 35%,#000 75%,transparent 100%);
  filter:drop-shadow(20px 0 35px rgba(0,0,0,.9));
}
.story-art.right img {
  mask-image:linear-gradient(270deg,rgba(0,0,0,.1) 0%,#000 35%,#000 75%,transparent 100%);
  -webkit-mask-image:linear-gradient(270deg,rgba(0,0,0,.1) 0%,#000 35%,#000 75%,transparent 100%);
  filter:drop-shadow(-20px 0 35px rgba(0,0,0,.9));
}
.story-text {
  position:relative; z-index:10; flex:1;
  padding:52px 60px;
}

/* Section inner nav strip */
.story-nav {
  position:relative; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 52px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.55);
}
.story-nav-links { display:flex; gap:24px; }
.story-nav-links a {
  font-family:'Bebas Neue',cursive; font-size:10px; letter-spacing:.35em;
  color:rgba(255,255,255,.22); transition:color .2s;
}
.story-nav-links a:hover { color:var(--ep-color); }
.story-nav-tag { font-family:'Rajdhani',sans-serif; font-size:10px; letter-spacing:.22em; color:rgba(255,255,255,.15); }

.story-footer {
  position:relative; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 52px;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.55);
}
.story-footer-msg { font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.15em; color:rgba(255,255,255,.25); font-style:italic; }
.story-footer-tag { font-family:'Bebas Neue',cursive; font-size:10px; letter-spacing:.3em; color:rgba(255,255,255,.15); }

/* Text styles in story sections */
.s-eyebrow {
  font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:.45em;
  color:rgba(255,255,255,.3); margin-bottom:6px; display:block;
}
.s-tag {
  display:inline-block; padding:4px 14px;
  background:var(--ep-color);
  font-family:'Bebas Neue',cursive; font-size:11px; letter-spacing:.35em;
  margin-bottom:10px; box-shadow:0 0 14px rgba(204,17,17,.35);
}
.s-title {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(50px,8vw,115px); line-height:.88;
  display:block; margin-bottom:8px;
}
.s-title-outline {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(32px,5.5vw,80px); line-height:.95;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.25);
  display:block; margin-bottom:12px;
}
.s-body {
  font-family:'Oswald',sans-serif; font-size:clamp(14px,1.55vw,17px);
  line-height:1.75; color:rgba(255,255,255,.44);
  max-width:480px; margin-bottom:18px;
}
.s-body strong { color:var(--ep-color2); }
.s-body em { color:var(--ep-color); font-style:normal; }
.s-quote {
  font-family:'Oswald',sans-serif; font-size:clamp(14px,1.6vw,18px);
  line-height:1.55; color:rgba(255,255,255,.58);
  font-style:italic; border-left:2px solid var(--ep-color);
  padding-left:16px; max-width:420px; margin:14px 0;
}
.s-quote cite {
  display:block; margin-top:6px; font-style:normal;
  font-size:.78em; color:rgba(255,255,255,.28); letter-spacing:.15em;
}

/* Classified text effect */
.classified {
  position:relative; display:inline-block;
  background:rgba(255,34,34,.15); padding:2px 8px;
  font-family:'Share Tech Mono',monospace; letter-spacing:.1em;
  border:1px solid rgba(255,34,34,.3);
}

/* Pulse badge */
.badge-pulse {
  display:inline-block; border:1px solid; padding:6px 18px;
  font-family:'Bebas Neue',cursive; font-size:13px; letter-spacing:.3em;
  animation:bPulse 1.6s ease-in-out infinite;
}
@keyframes bPulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ── BLOOD LINE DIVIDER ── */
.blood-line {
  height:2px; position:relative; z-index:10;
  background:linear-gradient(90deg,transparent,var(--ep-color),var(--ep-color2),var(--ep-color),transparent);
  box-shadow:0 0 14px var(--ep-color);
}

/* ── STATS ROW ── */
.stats-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  position:relative; z-index:20;
}
.stat-cell {
  padding:26px 32px; text-align:center;
  border-right:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.6);
}
.stat-cell:last-child { border-right:none; }
.stat-num {
  font-family:'Bebas Neue',cursive; font-size:clamp(34px,5vw,58px);
  line-height:1; display:block; margin-bottom:4px;
  color:var(--ep-color);
}
.stat-label {
  font-family:'Oswald',sans-serif; font-size:11px;
  letter-spacing:.3em; color:rgba(255,255,255,.28);
}

/* ── CLIFFHANGER SECTION ── */
.cliffhanger {
  position:relative; overflow:hidden;
  min-height:clamp(260px,40vw,480px);
  display:flex; align-items:center; justify-content:center;
}
.cliff-bg { position:absolute; inset:0; }
.cliff-bg img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.38) saturate(.75) contrast(1.2);
}
.cliff-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.75) 100%);
}
.cliff-content { position:relative; z-index:5; text-align:center; padding:48px 32px; }
.cliff-title {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(48px,9.5vw,120px); line-height:.9;
  text-shadow:0 0 60px rgba(0,0,0,.95);
}
.cliff-sub {
  font-family:'Share Tech Mono',monospace; font-size:clamp(11px,1.5vw,15px);
  letter-spacing:.3em; color:rgba(255,255,255,.5); margin-top:14px;
}

/* ── NEXT EPISODE SECTION ── */
.next-ep-section {
  position:relative; overflow:hidden; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
}
.next-ep-bg { position:absolute; inset:0; }
.next-ep-bg img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.18) saturate(.6);
}
.next-ep-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.5) 60%,#000 100%);
}
.next-ep-content {
  position:relative; z-index:10;
  text-align:center; padding:80px 40px;
  display:flex; flex-direction:column; align-items:center;
}
.next-label {
  font-family:'Rajdhani',sans-serif; font-size:12px; letter-spacing:.55em;
  color:rgba(255,255,255,.3); margin-bottom:12px;
}
.next-ep-num {
  font-family:'Black Ops One',cursive;
  font-size:clamp(80px,18vw,220px); line-height:.85;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.08);
  pointer-events:none; user-select:none; margin-bottom:-20px;
}
.next-ep-title {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(42px,8vw,110px); line-height:.9; letter-spacing:.04em;
  margin-bottom:12px;
}
.next-ep-teaser {
  font-family:'Oswald',sans-serif; font-size:clamp(14px,1.8vw,20px);
  color:rgba(255,255,255,.42); max-width:540px; line-height:1.7;
  margin-bottom:14px;
}
.next-ep-teaser strong { color:var(--ep-color); }
.next-hook {
  font-family:'Share Tech Mono',monospace; font-size:clamp(13px,1.6vw,17px);
  color:var(--ep-color2); letter-spacing:.08em;
  margin-bottom:40px; padding:12px 24px;
  border:1px solid rgba(212,160,23,.3); background:rgba(212,160,23,.05);
  animation:hookGlow 2s ease-in-out infinite;
}
@keyframes hookGlow {
  0%,100% { box-shadow:0 0 0 rgba(212,160,23,0); }
  50%      { box-shadow:0 0 30px rgba(212,160,23,.3); }
}

/* Episode grid at bottom */
.ep-grid {
  position:relative; z-index:10;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:10px; padding:0 40px 60px; margin-top:60px;
}
.ep-grid-card {
  aspect-ratio:3/4; border:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:10px 8px; text-align:center; position:relative; overflow:hidden;
  transition:all .35s ease; cursor:none; text-decoration:none;
  background:#0a0a0a;
}
.ep-grid-card:hover { border-color:var(--ep-color); transform:translateY(-4px); }
.ep-grid-card.current { border-color:var(--ep-color); box-shadow:0 0 20px rgba(204,17,17,.3); }

/* Image wrapper inside grid card */
.gc-img-wrap {
  position:absolute; inset:0; overflow:hidden;
}
.gc-img-wrap img {
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  filter:brightness(.3) saturate(.5);
  transition:filter .4s ease, transform .5s ease;
}
.ep-grid-card:hover .gc-img-wrap img,
.ep-grid-card.current .gc-img-wrap img {
  filter:brightness(.55) saturate(.8);
  transform:scale(1.06);
}
.ep-grid-card.visited .gc-img-wrap img { filter:brightness(.42) saturate(.6); }

.ep-grid-card .gc-num {
  position:relative; z-index:2;
  font-family:'Bebas Neue',cursive; font-size:clamp(10px,1.4vw,14px); letter-spacing:.3em;
  color:rgba(255,255,255,.55);
}
.ep-grid-card .gc-title {
  position:relative; z-index:2;
  font-family:'Bebas Neue',cursive; font-size:clamp(9px,1.2vw,12px); letter-spacing:.12em;
  color:rgba(255,255,255,.3); margin-top:2px;
  text-transform:uppercase;
}
.ep-grid-card.current .gc-num { color:var(--ep-color); }
.ep-grid-card.visited .gc-num { color:rgba(255,255,255,.7); }

/* Watched badge */
.gc-watched {
  position:absolute; top:6px; right:6px; z-index:5;
  width:18px; height:18px; line-height:18px; text-align:center;
  background:var(--cyan); color:#000;
  font-family:'Bebas Neue',cursive; font-size:10px;
  border-radius:2px;
}

/* ═══════════════════════════════════════════════
   LOCKED EPISODE STYLES
   ═══════════════════════════════════════════════ */
/* Locked grid card */
.ep-grid-card.locked {
  pointer-events:none; opacity:.35;
}
.ep-grid-card.locked .gc-img-wrap img {
  filter:brightness(.1) saturate(0) blur(2px) !important;
}
.ep-grid-card.locked:hover { transform:none; border-color:rgba(255,255,255,.08); }
.gc-lock {
  position:absolute; top:50%; left:50%; z-index:5;
  transform:translate(-50%,-50%);
  font-size:20px; opacity:.5;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.8));
}

/* Locked dot */
.ep-dot.locked {
  pointer-events:none; opacity:.2;
  border-color:rgba(255,255,255,.05) !important;
}
.ep-dot.locked::after {
  content:'🔒'; position:absolute; top:-6px; right:-6px;
  font-size:7px;
}

/* Locked ep-card (index.html grid) */
.ep-card.locked {
  pointer-events:none; opacity:.25;
}
.ep-card.locked img {
  filter:brightness(.08) saturate(0) blur(3px) !important;
}
.ep-card.locked .ep-card-btn { display:none; }
.ep-card-lock {
  position:absolute; top:50%; left:50%; z-index:5;
  transform:translate(-50%,-50%);
  font-size:28px; opacity:.6;
  text-shadow:0 0 12px rgba(0,0,0,.8);
}

/* Locked notification toast */
#locked-toast {
  position:fixed; top:60px; left:50%; z-index:9999;
  transform:translateX(-50%) translateY(-20px);
  background:rgba(0,0,0,.92);
  border:1px solid var(--ep-color);
  padding:10px 24px;
  font-family:'Bebas Neue',cursive; font-size:13px;
  letter-spacing:.25em;
  color:var(--ep-color);
  backdrop-filter:blur(10px);
  box-shadow:0 0 20px rgba(0,0,0,.8);
  opacity:0; transition:all .35s ease;
  pointer-events:none;
}
#locked-toast.show {
  opacity:1; transform:translateX(-50%) translateY(0);
}


/* ── DOT TOOLTIP ── */
.dot-tooltip {
  position:fixed; z-index:9999;
  background:rgba(0,0,0,.92); color:var(--ep-color);
  font-family:'Bebas Neue',cursive; font-size:11px; letter-spacing:.25em;
  padding:4px 12px; border:1px solid var(--ep-color);
  transform:translateX(-50%);
  pointer-events:none;
  white-space:nowrap;
  display:none;
}

/* ── MOBILE EP-DOTS TOGGLE ── */
.ep-dots-toggle {
  display:none; /* only shown on mobile via JS */
  background:none; border:1px solid rgba(255,255,255,.15);
  font-family:'Bebas Neue',cursive; font-size:10px; letter-spacing:.2em;
  color:rgba(255,255,255,.5); padding:8px 16px; cursor:pointer;
  min-height: 44px;
  transition:border-color .3s, color .3s;
}
.ep-dots-toggle:hover { border-color:var(--ep-color); color:var(--ep-color); }

/* Active section highlight in story-nav */
.story-nav-links a.active-section {
  color:var(--ep-color) !important;
  border-bottom:1px solid var(--ep-color);
  padding-bottom:2px;
}

/* ── SCROLL-REVEAL ANIMATIONS ── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal-left { opacity:0; transform:translateX(-45px); transition:opacity .7s ease, transform .7s ease; }
.reveal-right { opacity:0; transform:translateX(45px); transition:opacity .7s ease, transform .7s ease; }
.reveal-scale { opacity:0; transform:scale(.94); transition:opacity .65s ease, transform .65s ease; }
.revealed { opacity:1 !important; transform:none !important; }
.d1{transition-delay:.1s} .d2{transition-delay:.24s} .d3{transition-delay:.4s}
.d4{transition-delay:.58s} .d5{transition-delay:.78s}

/* ── GLITCH TEXT ── */
.glitch {
  position:relative; display:inline-block;
}
.glitch:hover { animation:glitchPulse .3s ease; }
@keyframes glitchPulse {
  0%   { text-shadow:none; transform:none; }
  20%  { text-shadow:3px 0 var(--red2),-3px 0 var(--cyan); transform:skewX(2deg); }
  40%  { text-shadow:-4px 0 var(--cyan),4px 0 var(--red2); transform:skewX(-1deg); }
  60%  { text-shadow:2px 0 var(--red2),-2px 0 var(--cyan); transform:skewX(1.5deg); }
  80%  { text-shadow:-2px 0 var(--cyan),2px 0 var(--red2); transform:skewX(-.5deg); }
  100% { text-shadow:none; transform:none; }
}

/* ── TYPEWRITER ── */
.typewriter { display:inline; }
.typewriter .char { opacity:0; animation:charIn .05s ease forwards; }
@keyframes charIn { to { opacity:1; } }

/* ── CINEMATIC LETTERBOX ── */
.letterbox-top, .letterbox-bottom {
  position:fixed; left:0; right:0; height:40px;
  background:#000; z-index:400; pointer-events:none;
  transition:height .4s ease;
}
.letterbox-top { top:52px; }
.letterbox-bottom { bottom:0; }
body.cinematic .letterbox-top, body.cinematic .letterbox-bottom { height:70px; }

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤900px)
   ═══════════════════════════════════════════════ */
@media (max-width:900px) {
  /* Nav */
  #ep-nav { padding:0 16px; gap:12px; height:48px; }
  .nav-brand { font-size:14px; letter-spacing:.2em; }
  .nav-ep-num { font-size:9px; letter-spacing:.2em; }

  /* Episode dots — hidden by default on mobile, toggle with hamburger */
  .ep-dots {
    display:none;
    position:absolute; top:48px; left:0; right:0;
    background:rgba(0,0,0,.96); border-bottom:1px solid rgba(255,255,255,.08);
    padding:12px 16px; flex-wrap:wrap; justify-content:center; gap:6px;
    backdrop-filter:blur(12px);
  }
  .ep-dots.open { display:flex; }
  .ep-dots-toggle { display:block; }

  /* Hero */
  .ep-hero { flex-direction:column; min-height:auto; padding-top:52px; }
  .ep-hero-art {
    position:relative; width:100%; height:clamp(250px,50vw,400px);
    order:-1;
  }
  .ep-hero-art img {
    mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);
    filter:brightness(.5);
  }
  .ep-hero-content { padding:24px 20px 40px; max-width:100%; }
  .ep-hero-title { font-size:clamp(50px,14vw,100px); }
  .ep-hero-subtitle { font-size:clamp(20px,5vw,40px); }
  .ep-hero-desc { font-size:clamp(13px,3.5vw,16px); }
  .ep-number-bg { font-size:clamp(120px,30vw,260px); right:10% !important; top:-10% !important; }

  /* Story sections */
  .story-inner { flex-direction:column; min-height:auto; }
  .story-art { width:100%; min-height:240px; height:240px; }
  .story-art img { height:240px; object-position:top center; }
  .story-art.left img, .story-art.right img {
    mask-image:linear-gradient(180deg,#000 0%,#000 75%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 75%,transparent 100%);
    filter:none;
  }
  .story-text { padding:28px 20px; }
  .s-title { font-size:clamp(36px,10vw,65px); }
  .s-title-outline { font-size:clamp(24px,7vw,44px); }
  .s-body { font-size:clamp(13px,3.5vw,16px); max-width:100%; }
  .s-quote { font-size:clamp(13px,3.5vw,16px); max-width:100%; }

  /* Story nav / footer */
  .story-nav, .story-footer { padding:10px 16px; flex-wrap:wrap; gap:8px; }
  .story-nav-links { gap:14px; flex-wrap:wrap; }
  .story-nav-links a { font-size:9px; letter-spacing:.25em; padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .story-nav-tag { font-size:8px; }
  .story-footer-msg { font-size:10px; max-width:70%; }

  /* Stats */
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .stat-cell { padding:18px 16px; }
  .stat-num { font-size:clamp(24px,7vw,40px); }
  .stat-label { font-size:9px; letter-spacing:.2em; }

  /* Buttons */
  .btn-mag { padding:14px 28px; font-size:clamp(13px,3.5vw,18px); letter-spacing:.2em; }
  .btn-ghost { padding:12px 24px; font-size:clamp(12px,3vw,16px); letter-spacing:.18em; }
  .btn-row { gap:10px; flex-direction:column; align-items:stretch; }

  /* Cliffhanger */
  .cliff-title { font-size:clamp(36px,10vw,72px); }
  .cliff-sub { font-size:clamp(10px,2.5vw,13px); letter-spacing:.15em; }
  .cliff-content { padding:32px 20px; }

  /* Next episode */
  .next-ep-section { min-height:auto; }
  .next-ep-content { padding:48px 20px; }
  .next-ep-num { font-size:clamp(60px,18vw,140px); }
  .next-ep-title { font-size:clamp(32px,9vw,72px); }
  .next-ep-teaser { font-size:clamp(13px,3.5vw,17px); max-width:100%; }
  .next-hook { font-size:clamp(11px,3vw,14px); padding:10px 16px; }

  /* Ep grid */
  .ep-grid { grid-template-columns:repeat(5,1fr); gap:6px; padding:0 16px 48px; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤600px)
   ═══════════════════════════════════════════════ */
@media (max-width:600px) {
  /* Disable custom cursor on mobile */
  body { cursor:auto !important; }
  * { cursor:auto !important; }

  /* Nav compact */
  #ep-nav { padding:0 12px; gap:8px; height:44px; }
  .nav-brand { font-size:12px; letter-spacing:.12em; }
  .nav-ep-num { font-size:8px; }

  /* Hero compact */
  .ep-hero-art { height:clamp(200px,45vw,300px); }
  .ep-hero-content { padding:16px 16px 32px; }
  .ep-hero-title { font-size:clamp(40px,13vw,75px); }
  .ep-hero-subtitle { font-size:clamp(16px,5vw,30px); }
  .ep-hero-desc { font-size:13px; margin-bottom:20px; }
  .ep-label { font-size:9px; letter-spacing:.35em; }
  .ep-tag { font-size:10px; letter-spacing:.2em; padding:3px 10px; }

  /* Story compact */
  .story-art { height:200px; min-height:200px; }
  .story-art img { height:200px; }
  .story-text { padding:20px 16px; }
  .s-eyebrow { font-size:9px; letter-spacing:.3em; }
  .s-tag { font-size:9px; letter-spacing:.2em; padding:3px 10px; }
  .s-title { font-size:clamp(28px,9vw,48px); }
  .s-title-outline { font-size:clamp(20px,6vw,34px); }

  /* Stats 1-col */
  .stats-row { grid-template-columns:1fr 1fr; }

  /* Buttons full-width */
  .btn-mag, .btn-ghost { width:100%; justify-content:center; text-align:center; }

  /* Ep grid 2-col on smallest */
  .ep-grid { grid-template-columns:repeat(2,1fr); gap:8px; padding:0 12px 48px; }
  .ep-grid-card { aspect-ratio:3/4; }
  .gc-num { font-size:11px !important; }
  .gc-title { font-size:10px !important; }

  /* Universe bar compact */
  .universe-bar { height:32px; }
  .universe-link { font-size:8px !important; letter-spacing:.12em !important; }
  .ul-label { display:none; }
  .universe-link .ul-dot { margin-right:0; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — VERY SMALL (≤400px)
   ═══════════════════════════════════════════════ */
@media (max-width:400px) {
  #ep-nav { height:40px; }
  .nav-brand { font-size:10px; }
  .ep-hero-title { font-size:clamp(32px,12vw,56px); }
  .ep-hero-subtitle { font-size:clamp(14px,4.5vw,24px); }
  .story-nav-links { gap:8px; }
  .story-nav-links a { font-size:8px; letter-spacing:.15em; }
  .story-footer-msg { font-size:9px; }
  .next-ep-num { font-size:clamp(48px,16vw,100px); }
  .next-ep-title { font-size:clamp(24px,8vw,48px); }
  .cliff-title { font-size:clamp(28px,9vw,56px); }
}

/* ── EDITORIAL FALLBACK LAYOUT (NO-IMAGE) ── */
.story-inner.no-image {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 0;
}
.story-inner.no-image .story-text {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px;
}
.story-inner.no-image .story-text * {
  text-align: center;
}
.story-inner.no-image .s-quote {
  margin: 28px auto 0;
  border-left: none;
  border-top: 1px solid var(--ep-color);
  border-bottom: 1px solid var(--ep-color);
  padding: 20px 10px;
  max-width: 600px;
  text-align: center;
}
.story-inner.no-image .badge-pulse {
  margin: 20px auto 0;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════
   INTERACTIVE ELEMENTS — COUNTDOWN TIMERS, STATS, TEASERS
   ══════════════════════════════════════════════════════════════════ */

/* ── VILLAIN COUNTDOWN TIMER ── */
.vil-countdown-wrap {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--ep-color);
  padding: 20px 28px;
  margin-top: 24px;
  max-width: 520px;
  backdrop-filter: blur(10px);
}
.vil-countdown-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.vil-countdown-clock {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vil-cd-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.vil-cd-num {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--ep-color);
  text-shadow: 0 0 20px rgba(var(--v-theme-rgb, 204,17,17), 0.5);
  line-height: 1;
  min-width: 2ch;
  text-align: center;
  animation: cdTick 1s ease-in-out infinite;
}
@keyframes cdTick {
  0%, 90%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.vil-cd-unit {
  font-family: 'Rajdhani', sans-serif;
  font-size: 8px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.25);
}
.vil-cd-colon {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(22px, 3vw, 36px);
  color: rgba(255,255,255,0.2);
  animation: colonBlink 1s step-end infinite;
  margin-bottom: 14px;
}
@keyframes colonBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.1; } }
.vil-countdown-sub {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.22);
  margin-top: 10px;
  letter-spacing: 0.05em;
  font-style: italic;
}

/* ── VILLAIN LIVE STATS PANEL ── */
.vil-stats-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
  max-width: 680px;
}
.vil-stat-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 2px solid rgba(var(--v-theme-rgb, 204,17,17), 0.4);
  padding: 16px 14px;
  text-align: center;
  transition: all 0.3s ease;
  animation: statCardIn var(--delay, 0s) ease both;
  animation-duration: 0.5s;
  animation-delay: var(--delay, 0s);
  animation-fill-mode: both;
  position: relative;
  overflow: hidden;
}
.vil-stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--v-theme-rgb,204,17,17),0.4), transparent);
}
.vil-stat-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}
@keyframes statCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vil-stat-icon {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}
.vil-stat-value {
  display: block;
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(20px, 2.8vw, 32px);
  color: var(--ep-color);
  line-height: 1.1;
  text-shadow: 0 0 12px rgba(var(--v-theme-rgb,204,17,17), 0.4);
}
.vil-stat-label {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.28);
  margin-top: 4px;
  text-transform: uppercase;
}



/* ── SEASON TEASER SECTION ── */
.season-teaser-wrap {
  padding: 48px 52px 60px;
  background: #030303;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.season-teaser-title {
  font-family: 'Bebas Neue', cursive;
  font-size: 13px;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.2);
  margin-bottom: 24px;
}
.season-teaser-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.season-teaser-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 14px;
  transition: all 0.3s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.season-teaser-card.active {
  border-color: var(--ep-color);
  background: rgba(var(--v-theme-rgb,204,17,17), 0.06);
}
.season-teaser-card.complete { border-color: rgba(100,200,100,0.3); }
.season-teaser-card.locked { opacity: 0.4; }
.stc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.stc-num {
  font-family: 'Bebas Neue', cursive;
  font-size: 18px;
  color: var(--ep-color);
}
.stc-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 8px;
  letter-spacing: 0.2em;
  padding: 2px 6px;
  border-radius: 2px;
}
.stc-badge.complete { background: rgba(100,200,100,0.15); color: #64c864; border: 1px solid rgba(100,200,100,0.3); }
.stc-badge.locked { background: rgba(255,50,50,0.1); color: rgba(255,100,100,0.7); border: 1px solid rgba(255,50,50,0.2); }
.stc-badge.progress { background: rgba(var(--v-theme-rgb,204,17,17),0.15); color: var(--ep-color); border: 1px solid rgba(var(--v-theme-rgb,204,17,17),0.3); }
.stc-teaser {
  font-family: 'Oswald', sans-serif;
  font-size: 10.5px;
  color: rgba(255,255,255,0.38);
  line-height: 1.5;
  margin-bottom: 10px;
}
.stc-progress-bar {
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 1px;
  overflow: hidden;
  margin-bottom: 6px;
}
.stc-progress-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}
.stc-ep-count {
  font-family: 'Rajdhani', sans-serif;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.2);
}

/* ── VILLAIN QUOTE TICKER ── */
.villain-quote-ticker {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(14px, 1.8vw, 20px);
  color: rgba(255,255,255,0.55);
  font-style: italic;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 40px;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  line-height: 1.6;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ── UNIVERSE STATS TICKER ── */
.universe-stat-ticker {
  text-align: center;
  padding: 16px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ust-num {
  display: block;
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
}
.ust-label {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  letter-spacing: 0.38em;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
}

/* ── SEASON TAB HOVER IMPROVEMENTS ── */
.season-tab {
  position: relative;
}
.season-tab .s-tab-hint {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--ep-color);
  padding: 10px 14px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}
.season-tab:hover .s-tab-hint { display: block; }

/* ── VILLAIN SELECTION FLASH ── */
#villain-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* ── HERO VILLAIN TRANSITION ── */
.dash-hero-content {
  animation: heroContentIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroContentIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── IMAGE FACE-FOCUS FIXES ── */
.story-art img {
  object-position: center top;  /* show face not body middle */
}
.cliff-bg img {
  object-position: center 20%;  /* show upper body/face */
}
.next-ep-bg img {
  object-position: center 25%;
}

/* ── READER LIVE STAT BAR ── */
.reader-live-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 60px;
  background: rgba(6, 6, 6, 0.94);
  border-top: 1px solid var(--ep-color, #ff2222);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
  overflow: hidden;
}
.reader-live-bar.minimized {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.rlb-progress-bar {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  background: #39ff14; /* Toxic neon green */
  box-shadow: 0 0 10px #39ff14, 0 0 4px #39ff14;
  width: 0%;
  transition: width 0.1s linear;
  z-index: 1002;
}
.rlb-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(57, 255, 20, 0.03) 0%, transparent 12%, transparent 88%, rgba(57, 255, 20, 0.03) 100%);
  pointer-events: none;
  z-index: 1001;
}
.rlb-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  gap: 15px;
  padding-right: 40px; /* Leave space for close button */
}
.rlb-meta-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 160px;
  flex-shrink: 0;
}
.rlb-meta-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ep-color);
  text-transform: uppercase;
}
.rlb-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ep-color);
  box-shadow: 0 0 8px var(--ep-color);
  animation: rlbLivePulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes rlbLivePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.4; }
}
.rlb-meta-loc {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 3px;
  letter-spacing: 0.08em;
}
.rlb-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  min-width: 100px;
  transition: transform 0.2s ease;
}
.rlb-val {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ep-color2, #d4a017);
  text-transform: uppercase;
  margin-bottom: 2px;
  transition: color 0.3s, text-shadow 0.3s;
}
.rlb-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}
.rlb-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.rlb-close-btn {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.45);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 2px;
  font-size: 10px;
  transition: all 0.2s ease;
  z-index: 1005;
}
.rlb-close-btn:hover {
  background: rgba(255, 0, 0, 0.15);
  border-color: rgba(255, 0, 0, 0.3);
  color: #fff;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.25);
}

/* ── Floating Restore Button ── */
.rlb-restore-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(6, 6, 6, 0.95);
  border: 1.5px solid var(--ep-color, #ff2222);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
  color: var(--ep-color, #ff2222);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6) rotate(-180deg);
}
.rlb-restore-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) rotate(0);
}
.rlb-restore-btn:hover {
  transform: scale(1.1);
}
.rlb-restore-btn .restore-icon {
  font-size: 13px;
  font-weight: bold;
}
.rlb-restore-btn .restore-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--ep-color, #ff2222);
  opacity: 0;
  animation: rlbRestorePulseRing 2s cubic-bezier(0.25, 0, 0, 1) infinite;
}
@keyframes rlbRestorePulseRing {
  0% { transform: scale(0.95); opacity: 0.85; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ── Villain Specific Animations ── */

/* 1. Voltage Spark (Mosquito) */
@keyframes rlbVoltage {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(212, 160, 23, 0.7); }
  45%, 55% { opacity: 0.88; text-shadow: 0 0 2px rgba(212, 160, 23, 0.2); }
  50% { opacity: 0.92; text-shadow: 0 0 15px rgba(212, 160, 23, 1), 0 0 20px rgba(212, 160, 23, 0.4); }
  98% { opacity: 0.86; text-shadow: 0 0 4px rgba(212, 160, 23, 0.3); }
}
.rlb-spark-anim {
  animation: rlbVoltage 0.18s infinite;
}

/* 2. Cloak/Fade (Mosquito Stealth) */
@keyframes rlbCloak {
  0%, 100% { opacity: 1; filter: blur(0px); text-shadow: 0 0 6px var(--ep-color); }
  40%, 60% { opacity: 0.05; filter: blur(3px); text-shadow: none; }
  50% { opacity: 0.01; filter: blur(4px); }
}
.rlb-cloak-anim {
  animation: rlbCloak 6s ease-in-out infinite;
}

/* 3. Post-Decapitation Twitch (Cockroach) */
@keyframes rlbTwitch {
  0%, 92%, 100% { transform: translate(0); text-shadow: none; }
  93% { transform: translate(-1px, 0.5px); text-shadow: 0.8px 0 #ff0000, -0.8px 0 #39ff14; }
  94% { transform: translate(1px, -1px); text-shadow: -0.8px 0 #ff0000, 0.8px 0 #0000ff; }
  95% { transform: translate(0); text-shadow: none; }
}
.rlb-twitch-anim {
  animation: rlbTwitch 2.5s steps(1) infinite;
}

/* 4. Shield Rotation (Cockroach Extinction Defense) */
.rlb-shield-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rlb-shield-svg {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  animation: rlbShieldSpin 5s linear infinite;
  opacity: 0.45;
}
@keyframes rlbShieldSpin {
  100% { transform: rotate(360deg); }
}

/* 5. Vibration (Housefly Wing Speed & Spider Silk Tension) */
@keyframes rlbVibrate {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-0.5px, 0.5px); }
  50% { transform: translate(0.5px, -0.5px); }
  75% { transform: translate(-0.5px, -0.5px); }
}
.rlb-vibrate-low {
  animation: rlbVibrate 0.06s infinite;
}
.rlb-vibrate-high {
  animation: rlbVibrate 0.02s infinite;
}

/* 6. Spider Compound Eye Array */
.rlb-spider-eyes {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  height: 14px;
  margin-bottom: 4px;
}
.rlb-eye {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #ff1111;
  box-shadow: 0 0 6px #ff1111, 0 0 2px #ff1111;
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: inline-block;
}
@keyframes rlbEyeBlink {
  0%, 96%, 100% { transform: scaleY(1); }
  98% { transform: scaleY(0); }
}
.rlb-eye:nth-child(1), .rlb-eye:nth-child(8) { animation: rlbEyeBlink 4.5s infinite 0.3s; }
.rlb-eye:nth-child(2), .rlb-eye:nth-child(7) { animation: rlbEyeBlink 3.8s infinite 1.1s; }
.rlb-eye:nth-child(3), .rlb-eye:nth-child(6) { animation: rlbEyeBlink 5.2s infinite 0.7s; }
.rlb-eye:nth-child(4), .rlb-eye:nth-child(5) { animation: rlbEyeBlink 6.1s infinite 2.2s; }

/* 7. Spider Web Tension String SVG */
.rlb-silk-svg {
  margin-top: 4px;
  overflow: visible;
}
.rlb-silk-line {
  transition: d 0.15s ease-out;
}

/* 8. Target Locking Reticle (Spider Accuracy) */
.rlb-reticle-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rlb-reticle-svg {
  position: absolute;
  width: 30px;
  height: 30px;
  pointer-events: none;
  animation: rlbReticleRotate 8s linear infinite;
  opacity: 0.4;
}
@keyframes rlbReticleRotate {
  100% { transform: rotate(-360deg); }
}

/* ── PROGRESS RINGS ON SEASON TABS ── */

/* ── PROGRESS RINGS ON SEASON TABS ── */
.season-tab-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.season-tab svg {
  width: 28px;
  height: 28px;
}

/* ── VILLAIN CARD 3D HOVER ── */
.villain-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.villain-card:hover {
  transform: scale(1.02) translateY(-4px) rotateX(1deg);
}

/* ── HOME PAGE VILLAIN SELECTOR ENHANCED ── */
.villain-selector-card {
  position: relative;
}
.vil-sel-countdown-mini {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--v-theme-color, rgba(255,255,255,0.3));
  margin-top: 4px;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 2;
}

/* ── NEXT UNLOCK TEASER ── */
.next-unlock-teaser {
  background: rgba(var(--v-theme-rgb,204,17,17), 0.06);
  border: 1px solid rgba(var(--v-theme-rgb,204,17,17), 0.2);
  border-left: 3px solid var(--ep-color);
  padding: 16px 20px;
  margin: 0 52px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.nut-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px;
  letter-spacing: 0.35em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 4px;
}
.nut-text {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}
.nut-icon {
  font-size: 24px;
  flex-shrink: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  .season-teaser-grid { grid-template-columns: repeat(5, 1fr); }
  .vil-stats-panel { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .season-teaser-grid { grid-template-columns: repeat(2, 1fr); }
  .vil-stats-panel { grid-template-columns: repeat(2, 1fr); }
  .season-teaser-wrap { padding: 32px 20px 40px; }
  .next-unlock-teaser { margin: 0 20px 24px; }
}
@media (max-width: 600px) {
  .season-teaser-grid { grid-template-columns: 1fr 1fr; }
  .vil-countdown-wrap { margin-top: 16px; padding: 16px 18px; }
  .vil-cd-num { font-size: 24px; }
  .reader-live-bar { padding: 10px 15px; flex-direction: column; }
  .rlb-content { flex-wrap: wrap; gap: 8px; padding-right: 25px; }
  .rlb-meta-col { width: 100%; min-width: unset; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 5px; margin-bottom: 5px; }
  .rlb-cell { min-width: unset; flex: 1; }
  .rlb-val { font-size: 14px; }
  .rlb-lbl { font-size: 8px; }
}

/* ─── SEASON COLOR-GRADING FILTERS ─── */
.season-1 img, body.season-1 img {
  filter: none;
}
.season-2 img, body.season-2 img {
  filter: hue-rotate(75deg) contrast(1.15) saturate(1.2);
}
.season-3 img, body.season-3 img {
  filter: hue-rotate(185deg) brightness(0.95) contrast(1.1);
}
.season-4 img, body.season-4 img {
  filter: hue-rotate(270deg) contrast(1.2) saturate(1.1);
}
.season-5 img, body.season-5 img {
  filter: grayscale(1) contrast(1.35) brightness(0.95);
}
.season-6 img, body.season-6 img {
  filter: sepia(0.75) contrast(1.1) brightness(0.95);
}
.season-7 img, body.season-7 img {
  filter: hue-rotate(345deg) saturate(1.4) contrast(1.2);
}
.season-8 img, body.season-8 img {
  filter: hue-rotate(15deg) saturate(1.35) contrast(1.05);
}
.season-9 img, body.season-9 img {
  filter: invert(0.08) hue-rotate(210deg) contrast(1.25);
}
.season-10 img, body.season-10 img {
  filter: hue-rotate(300deg) saturate(1.3) contrast(1.15);
}

/* ─── COMMAND CENTER & TELEMETRY HUD ─── */
.command-center-wrap {
  padding: 40px 52px;
  background: #080808;
  border-top: 1px solid rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  margin-bottom: 40px;
}
.cc-header {
  margin-bottom: 24px;
}
.cc-tag {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--ep-color);
  text-shadow: 0 0 10px rgba(var(--v-theme-rgb), 0.3);
  display: block;
  margin-bottom: 6px;
}
.cc-title {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(24px, 3.5vw, 36px);
  letter-spacing: 0.05em;
  color: #fff;
}
.cc-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .cc-grid { grid-template-columns: 1fr; }
}
.cc-card {
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.cc-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 4px; height: 100%;
  background: var(--ep-color);
}
.cc-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 12px;
}
.cc-card-header h4 {
  font-family: 'Bebas Neue', cursive;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: #fff;
}
.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff66;
  box-shadow: 0 0 10px #00ff66;
}
.status-indicator-dot.pulsing {
  animation: telemetryPulse 1.5s infinite ease-in-out;
}
@keyframes telemetryPulse {
  0% { transform: scale(1); opacity: 1; box-shadow: 0 0 4px #00ff66; }
  50% { transform: scale(1.3); opacity: 0.4; box-shadow: 0 0 12px #00ff66; }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 4px #00ff66; }
}
.scanning-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: #00ff66;
  animation: scanFade 1s infinite alternate;
}
@keyframes scanFade {
  from { opacity: 0.3; }
  to { opacity: 1; }
}
.local-time-bar {
  background: #050505;
  border: 1px solid rgba(255,255,255,0.03);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}
.lt-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.4);
}
.lt-val {
  font-family: 'Bebas Neue', cursive;
  font-size: 28px;
  letter-spacing: 0.05em;
  color: #00ff66;
  text-shadow: 0 0 10px rgba(0,255,102,0.3);
}
.lt-disclaimer {
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.02em;
}
.telemetry-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.telemetry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #121212;
  border: 1px solid rgba(255,255,255,0.03);
  padding: 10px 16px;
  border-radius: 2px;
}
.tr-name {
  font-family: 'Bebas Neue', cursive;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #fff;
}
.tr-hours {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.tr-status {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 2px;
  text-transform: uppercase;
}
.tr-status.active {
  background: rgba(255,0,50,0.15);
  border: 1px solid #ff0033;
  color: #ff0033;
  text-shadow: 0 0 8px rgba(255,0,51,0.3);
  animation: statusActivePulse 1s infinite alternate;
}
.tr-status.standby {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.4);
}
@keyframes statusActivePulse {
  from { box-shadow: inset 0 0 4px rgba(255,0,51,0.1); }
  to { box-shadow: inset 0 0 10px rgba(255,0,51,0.4); }
}

/* ─── DEFCON CONTROLLER ─── */
.defcon-gauge {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.defcon-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.defcon-btn {
  background: #121212;
  border: 1px solid rgba(255,255,255,0.05);
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Bebas Neue', cursive;
  font-size: 16px;
  letter-spacing: 0.08em;
  transition: all 0.3s ease;
  color: rgba(255,255,255,0.4);
}
.defcon-btn span {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.defcon-btn:hover {
  background: #181818;
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}
.defcon-btn.level-5.active { background: rgba(0,200,80,0.15); border-color: #00c850; color: #00c850; box-shadow: 0 0 10px rgba(0,200,80,0.25); }
.defcon-btn.level-4.active { background: rgba(200,200,0,0.15); border-color: #c8c800; color: #c8c800; box-shadow: 0 0 10px rgba(200,200,0,0.25); }
.defcon-btn.level-3.active { background: rgba(255,120,0,0.15); border-color: #ff7800; color: #ff7800; box-shadow: 0 0 10px rgba(255,120,0,0.25); }
.defcon-btn.level-2.active { background: rgba(255,50,0,0.15); border-color: #ff3200; color: #ff3200; box-shadow: 0 0 10px rgba(255,50,0,0.25); }
.defcon-btn.level-1.active { background: rgba(255,0,0,0.25); border-color: #ff0000; color: #ff0000; box-shadow: 0 0 15px rgba(255,0,0,0.4); animation: defcon1Flash 0.5s infinite alternate; }

@keyframes defcon1Flash {
  from { opacity: 0.8; }
  to { opacity: 1; border-color: #ff0000; box-shadow: 0 0 20px #ff0000; }
}
.defcon-status-display {
  background: #050505;
  border: 1px solid rgba(255,255,255,0.03);
  padding: 16px;
  border-radius: 2px;
}
.defcon-status-title {
  font-family: 'Bebas Neue', cursive;
  font-size: 18px;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 6px;
  color: #fff;
}
.defcon-status-desc {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}

/* ─── SCANLINE SCREEN FILTER EFFECTS ─── */
body.scanline-active::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), rgba(255, 255, 255, 0.01);
  background-size: 100% 4px;
  z-index: 999999;
  pointer-events: none;
}
body.scanline-active::after {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.5) 150%);
  z-index: 999998;
  pointer-events: none;
}

/* ─── DOSSIER ANTHOLOGY READING GUIDE ─── */
.reading-guide-section {
  padding: 40px 52px 60px;
  background: #080808;
  border-top: 1px solid rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  margin-bottom: 60px;
}
.guide-header {
  margin-bottom: 30px;
}
.guide-tag {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--ep-color);
  display: block;
  margin-bottom: 6px;
}
.guide-title {
  font-family: 'Bebas Neue', cursive;
  font-size: clamp(24px, 3.5vw, 36px);
  letter-spacing: 0.05em;
  color: #fff;
}
.guide-dossier-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
}
.guide-accordion-item {
  border: 1px solid rgba(255,255,255,0.05);
  background: #0c0c0c;
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.guide-accordion-item:hover {
  border-color: rgba(255,255,255,0.15);
}
.guide-acc-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  font-family: 'Bebas Neue', cursive;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #fff;
}
.guide-acc-trigger .acc-icon {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ep-color);
  transition: transform 0.3s ease;
}
.guide-accordion-item.active .acc-icon {
  transform: rotate(45deg);
}
.guide-acc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;
  padding: 0 24px;
  border-top: 1px solid transparent;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
}
.guide-accordion-item.active .guide-acc-content {
  max-height: 500px;
  padding: 20px 24px;
  border-color: rgba(255,255,255,0.05);
}
.guide-acc-content p {
  margin-bottom: 12px;
}
.guide-acc-content ul {
  padding-left: 20px;
  margin-bottom: 12px;
}
.guide-acc-content li {
  margin-bottom: 6px;
}
.reading-paths-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 10px;
}
.path-card {
  background: #060606;
  border: 1px solid rgba(255,255,255,0.03);
  padding: 16px;
  border-radius: 2px;
}
.path-card h5 {
  font-family: 'Bebas Neue', cursive;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--ep-color);
  margin-bottom: 8px;
}
.path-card p {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
  margin: 0;
}

/* Disable custom cursor on touch-only devices */
@media (hover: none) {
  body { cursor: auto !important; }
  * { cursor: auto !important; }
  #cursor, #cursor-trail { display: none !important; }
}

/* ── HOOK CARDS LANDING PAGE ── */
.hook-card {
  background: #0a0a0a !important;
  border: 1px solid rgba(var(--card-color-rgb), 0.2) !important;
  padding: 35px !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 30px rgba(var(--card-color-rgb), 0.02) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
.hook-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--card-color);
  box-shadow: 0 0 10px var(--card-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.hook-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(var(--card-color-rgb), 0.5) !important;
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.8),
    0 0 15px rgba(var(--card-color-rgb), 0.1),
    inset 0 0 15px rgba(var(--card-color-rgb), 0.05) !important;
}
.hook-card:hover::before {
  transform: scaleX(1);
}
.hook-card-title {
  color: var(--card-color) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 26px !important;
  margin-bottom: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-top: 0px !important;
  position: relative;
}
.hook-card:hover .hook-card-title {
  animation: glitchText 0.3s steps(2, start) infinite;
}
.hook-card-desc {
  color: rgba(255,255,255,0.7) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.hook-highlight {
  color: #fff !important;
  font-weight: bold !important;
  border-bottom: 1px dashed var(--card-color) !important;
}
.hook-bold {
  color: #fff !important;
  font-weight: bold !important;
}

/* Glitch animation for text */
@keyframes glitchText {
  0% { text-shadow: 2px -1px 0 rgba(255,0,0,0.5), -2px 1px 0 rgba(0,255,255,0.5); transform: skew(0.5deg); }
  50% { text-shadow: -2px 2px 0 rgba(255,0,0,0.5), 1px -1px 0 rgba(0,255,255,0.5); transform: skew(-1deg); }
  100% { text-shadow: 2px 1px 0 rgba(255,0,0,0.5), -1px 2px 0 rgba(0,255,255,0.5); transform: skew(0deg); }
}

@keyframes radarLine {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}