/* ═══════════════════════════════════════════════════════════
   JasTV — Cinema Theme
   Fonts: Cinzel (display), Playfair Display (serif), Raleway (UI)
   Palette: Deep cinema black · Cinema gold · Warm off-white
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Raleway:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg:          #07070f;
  --bg2:         #0d0d1a;
  --bg3:         #141426;
  --bg4:         #1a1a30;
  --gold:        #C9A84C;
  --gold-lt:     #E8C96A;
  --gold-dk:     #8A6F2E;
  --gold-glow:   rgba(201,168,76,.18);
  --gold-border: rgba(201,168,76,.28);
  --gold-dim:    rgba(201,168,76,.09);
  --red:         #A8241E;
  --red2:        #C42B24;
  --text:        #F0EAD6;
  --text-sub:    #8A8070;
  --text-dim:    #42403A;
  --radius:      4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --f-display:   'Cinzel', Georgia, serif;
  --f-serif:     'Playfair Display', Georgia, serif;
  --f-ui:        'Raleway', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: 15px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  /* Prevent over-scroll bounce that can cause blank flashes on WebKit */
  overscroll-behavior: none;
}

button { cursor: pointer; font-family: inherit; }
img { display: block; }
input, select { font-family: inherit; }

/* Hide scrollbars */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* ── Film grain overlay ─────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9996;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.032;
  mix-blend-mode: screen;
}

/* ── Views ─────────────────────────────────────────────── */
.view {
  display: none;
  position: fixed; inset: 0;
  overflow: hidden;
}
.view.active {
  display: flex; flex-direction: column;
  animation: viewReveal 0.5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes viewReveal {
  from { opacity: 0; transform: scale(1.018); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Utility ───────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Focus ─────────────────────────────────────────────── */
.focusable {
  outline: none; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, background 0.18s ease;
}
.focusable.focused { outline: 2px solid var(--gold); outline-offset: 2px; }
.card.focused {
  outline: none;
  transform: translateY(-8px) scale(1.06);
  box-shadow: 0 18px 50px rgba(0,0,0,.8),
              0 0 0 2px var(--gold),
              0 0 30px var(--gold-glow);
  z-index: 20;
}


/* ═══════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════ */
#view-home { background: var(--bg); }

#navbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 68px; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px;
  background: linear-gradient(to bottom,
    rgba(7,7,15,.97) 0%,
    rgba(7,7,15,.6)  65%,
    transparent      100%);
  pointer-events: none;
}
#navbar > * { pointer-events: auto; }
#navbar::after {
  content: '';
  position: absolute; bottom: 0; left: 52px; right: 52px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-border), transparent);
  pointer-events: none;
}

#logo {
  font-family: var(--f-display);
  font-size: 20px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 28px rgba(201,168,76,.5), 0 2px 8px rgba(0,0,0,.8);
  display: flex; align-items: center; gap: 10px;
}
#logo svg { filter: drop-shadow(0 0 6px rgba(201,168,76,.6)); flex-shrink: 0; }

#nav-right { display: flex; align-items: center; gap: 12px; }

.nav-btn {
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 20px; border-radius: var(--radius);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-btn:hover, .nav-btn.focused {
  background: rgba(201,168,76,.18); color: var(--gold); border-color: var(--gold);
}
.avatar-btn {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  background: var(--gold-dim); border: 1px solid var(--gold-border);
  display: flex; align-items: center; justify-content: center; color: var(--gold);
}

#user-menu-wrap { position: relative; pointer-events: auto; align-items: center; }
#user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 210px; background: var(--bg2);
  border: 1px solid var(--gold-border); border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: 0 16px 50px rgba(0,0,0,.85), 0 0 0 1px var(--gold-dim);
  z-index: 200; animation: ddOpen .18s ease;
}
@keyframes ddOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#dropdown-username {
  padding: 8px 14px 10px;
  font-family: var(--f-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}
.dropdown-hr { border: none; border-top: 1px solid var(--gold-border); margin: 4px 0; }
.dropdown-item {
  display: block; width: 100%; background: transparent;
  border: 1px solid transparent; border-radius: var(--radius);
  color: var(--text); font-family: var(--f-ui);
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em;
  padding: 10px 14px; text-align: left; transition: background 0.15s, color 0.15s;
}
.dropdown-item:hover, .dropdown-item.focused {
  background: var(--gold-dim); color: var(--gold); border-color: var(--gold-border);
}


/* ═══════════════════════════════════════════════════════════
   HOME + HERO
═══════════════════════════════════════════════════════════ */
/* ── Main scroll containers — GPU layer promotion for FireStick ──── */
#home-scroll {
  flex: 1; overflow-y: scroll;
  /* NO scroll-behavior:smooth — causes WebKit to ignore explicit scrollTop
     changes inside position:fixed parents, breaking D-pad navigation */
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0); /* promote to own GPU compositor layer */
  will-change: scroll-position;
}

#hero {
  position: relative;
  height: 70vh; min-height: 480px; max-height: 740px;
  overflow: hidden; background: #05050e;
}
#hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  animation: heroPan 22s ease-in-out infinite alternate;
  transition: opacity 0.8s ease;
  will-change: transform;           /* GPU-composite the pan animation */
  transform: translateZ(0);
}
@keyframes heroPan {
  from { transform: scale(1.0); }
  to   { transform: scale(1.07) translateX(-2%); }
}
#hero.hero-changing #hero-bg { opacity: 0; }

#hero-grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  rgba(7,7,15,1)   0%,  rgba(7,7,15,.9) 28%,
                               rgba(7,7,15,.45)  54%, transparent     76%),
    linear-gradient(to top,    rgba(7,7,15,1)   0%,  rgba(7,7,15,.65) 30%, transparent 58%),
    linear-gradient(to bottom, rgba(7,7,15,.65) 0%,  transparent      22%);
}
/* Gold accent bar at very top */
#hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; z-index: 3;
  background: linear-gradient(to right, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
  opacity: 0.55;
}
/* Fade line at bottom */
#hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; z-index: 3;
  background: linear-gradient(to right, transparent, var(--gold-border), transparent);
}

#hero-info {
  position: absolute; bottom: 0; left: 0;
  padding: 0 72px 60px; max-width: 660px; z-index: 3;
}
#hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  font-family: var(--f-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold);
}
#hero-eyebrow::before {
  content: ''; display: block; width: 36px; height: 1px;
  background: var(--gold); opacity: 0.6; flex-shrink: 0;
}
#hero-title {
  font-family: var(--f-display);
  font-size: clamp(30px, 4.4vw, 62px);
  font-weight: 900; line-height: 1.05;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 32px rgba(0,0,0,.95), 0 0 80px rgba(0,0,0,.5);
  margin-bottom: 14px;
}
#hero-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--f-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-sub);
  margin-bottom: 14px;
}
.star-rating { color: var(--gold); font-size: 12px; letter-spacing: 0.06em; }
#hero-desc {
  font-family: var(--f-serif); font-size: 14px; font-style: italic;
  line-height: 1.72; color: rgba(240,234,214,.68);
  margin-bottom: 32px; max-width: 510px;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
#hero-btns { display: flex; gap: 14px; align-items: center; }

/* Hero carousel dots */
#hero-dots {
  position: absolute; bottom: 26px; right: 52px;
  display: flex; gap: 7px; z-index: 4; align-items: center;
}
.hero-dot {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.2); cursor: pointer;
  transition: width 0.4s ease, background 0.4s ease; width: 18px;
}
.hero-dot.active { background: var(--gold); width: 36px; }
.hero-dot.focused { outline: 1px solid var(--gold); outline-offset: 3px; }


/* ── Buttons ───────────────────────────────────────────── */
.btn-white {
  background: var(--gold); color: #06060f;
  font-family: var(--f-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 13px 34px; border-radius: var(--radius);
  border: 2px solid transparent;
  box-shadow: 0 4px 22px rgba(201,168,76,.45);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn-white:hover, .btn-white.focused {
  background: var(--gold-lt); box-shadow: 0 6px 32px rgba(201,168,76,.65);
  transform: translateY(-2px);
}
.btn-ghost {
  background: rgba(255,255,255,.08); color: var(--text);
  font-family: var(--f-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 13px 32px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.22);
  transition: background 0.2s, border-color 0.2s;
}
.btn-ghost:hover, .btn-ghost.focused {
  background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.45);
}
.btn-play {
  background: linear-gradient(135deg, var(--red2) 0%, var(--red) 100%);
  color: #fff; font-family: var(--f-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 12px 28px; border-radius: var(--radius);
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(168,36,30,.5);
  transition: box-shadow 0.2s, transform 0.15s;
}
.btn-play:hover, .btn-play.focused {
  box-shadow: 0 6px 30px rgba(168,36,30,.7); transform: translateY(-2px);
}
.btn-resume {
  background: var(--bg3); color: var(--gold);
  font-family: var(--f-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 28px; border-radius: var(--radius);
  border: 1px solid var(--gold-border); transition: all 0.2s;
}
.btn-resume:hover, .btn-resume.focused {
  background: var(--gold-dim); box-shadow: 0 0 20px var(--gold-glow);
}
.btn-back {
  background: transparent; color: var(--text-sub);
  font-family: var(--f-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 28px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.1); transition: all 0.2s;
}
.btn-back:hover, .btn-back.focused { color: var(--text); border-color: var(--gold-border); }
.btn-fav {
  background: transparent; color: var(--text-sub);
  font-family: var(--f-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 22px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.1); transition: all 0.2s;
}
.btn-fav:hover, .btn-fav.focused { border-color: var(--gold-border); color: var(--gold); }
.btn-fav.fav-active {
  color: #e05555; border-color: rgba(224,85,85,.4); background: rgba(224,85,85,.07);
}


/* ── Category rows ─────────────────────────────────────── */
.section-divider {
  display: flex; align-items: center; gap: 16px;
  padding: 32px 52px 0;
}
.section-divider::before {
  content: ''; flex: 0 0 26px; height: 1px; background: var(--gold-border);
}
.section-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--gold-border), transparent);
}
.section-divider-label {
  font-family: var(--f-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
}

.cat-row { padding: 4px 0 28px; }
.cat-title {
  padding: 16px 52px 12px;
  font-family: var(--f-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(240,234,214,.82);
  display: flex; align-items: center; gap: 10px;
}
.cat-title::before {
  content: ''; display: block; width: 3px; height: 13px;
  background: var(--gold); border-radius: 2px; flex-shrink: 0;
}

.row-strip {
  display: flex; gap: 12px;
  padding: 4px 0 10px 52px;
  overflow-x: scroll; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  scroll-padding-left: 52px; cursor: grab; will-change: scroll-position;
}
.row-strip::after { content: ''; display: block; flex-shrink: 0; width: 44px; }
.row-strip.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.row-strip .card { scroll-snap-align: start; }

.row-sentinel {
  flex-shrink: 0; width: 60px; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.row-load-spin {
  width: 24px; height: 24px;
  border: 2px solid var(--gold-border); border-top-color: var(--gold);
  border-radius: 50%; animation: spin .8s linear infinite;
}

/* ── Card ──────────────────────────────────────────────── */
.card {
  flex-shrink: 0; width: 148px;
  border-radius: var(--radius-md); overflow: hidden;
  position: relative; cursor: pointer;
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.04);
  /* Shorter transition — still smooth but less GPU pressure on FireStick */
  transition: transform 0.22s cubic-bezier(.22,1,.36,1),
              box-shadow 0.22s ease, border-color 0.22s ease;
  /* Isolate card layout/paint so hover on one card doesn't reflow neighbours */
  contain: layout style;
}
.card:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 16px 44px rgba(0,0,0,.8), 0 0 0 1px var(--gold-border), 0 0 24px var(--gold-glow);
  z-index: 2;
}
.card img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.card:hover img, .card.focused img { transform: scale(1.05); }
.card-label {
  padding: 9px 10px 11px;
  background: linear-gradient(to bottom, var(--bg2), var(--bg3));
  border-top: 1px solid rgba(201,168,76,.08);
}
.card-name {
  font-family: var(--f-serif); font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px;
}
.card-sub {
  font-family: var(--f-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--gold);
}
/* Gold sheen */
.card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, rgba(201,168,76,.1) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.3s;
}
.card:hover::before, .card.focused::before { opacity: 1; }


/* ═══════════════════════════════════════════════════════════
   AUTH
═══════════════════════════════════════════════════════════ */
#view-auth {
  background:
    radial-gradient(ellipse at 50% -5%, rgba(201,168,76,.09) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 110%, rgba(168,36,30,.1) 0%, transparent 50%),
    var(--bg);
  align-items: center; justify-content: center;
}
#auth-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 40px 20px;
}
#auth-card {
  width: 100%; max-width: 440px;
  background: rgba(13,13,26,.96);
  border: 1px solid var(--gold-border); border-radius: var(--radius-lg);
  padding: 42px 44px 32px;
  box-shadow: 0 24px 80px rgba(0,0,0,.85), 0 0 0 1px var(--gold-dim);
}
#auth-logo {
  font-family: var(--f-display); font-size: 26px; font-weight: 900;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
  text-align: center; text-shadow: 0 0 30px rgba(201,168,76,.55);
  margin-bottom: 30px;
}
#auth-tabs {
  display: flex; margin-bottom: 24px;
  border-bottom: 1px solid var(--gold-border);
}
.auth-tab {
  flex: 1; padding: 10px; background: transparent; border: none;
  font-family: var(--f-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sub);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.auth-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.auth-tab:hover { color: var(--text); }

#login-mode-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.mode-tab {
  flex: 1; padding: 8px; background: transparent;
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  font-family: var(--f-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-sub);
  transition: all 0.2s;
}
.mode-tab.active { background: var(--gold-dim); border-color: var(--gold-border); color: var(--gold); }

.auth-field-wrap { margin-bottom: 16px; }
.auth-label {
  display: block; font-family: var(--f-ui); font-size: 10px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 6px;
}
.auth-hint-inline { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 10px; }
.auth-input {
  width: 100%; padding: 12px 14px; background: var(--bg3);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  color: var(--text); font-family: var(--f-ui); font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-input::placeholder { color: var(--text-dim); }
.auth-input:focus, .auth-input.focused {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim);
}
.auth-submit {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dk) 100%);
  color: #06060f; border: none; border-radius: var(--radius);
  font-family: var(--f-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; margin-top: 6px;
  box-shadow: 0 4px 20px rgba(201,168,76,.32); transition: all 0.2s;
}
.auth-submit:hover, .auth-submit.focused {
  background: linear-gradient(135deg, var(--gold-lt) 0%, var(--gold) 100%);
  box-shadow: 0 6px 28px rgba(201,168,76,.52); transform: translateY(-1px);
}
.auth-submit:disabled { opacity: 0.5; transform: none; cursor: not-allowed; }
.auth-link {
  display: block; width: 100%; text-align: center;
  background: none; border: none; color: var(--text-sub);
  font-family: var(--f-ui); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
  margin-top: 14px; padding: 8px; transition: color 0.2s;
}
.auth-link:hover, .auth-link.focused { color: var(--gold); }
.auth-error {
  font-family: var(--f-ui); font-size: 12px; color: #e07070;
  padding: 10px 14px; background: rgba(224,112,112,.1);
  border: 1px solid rgba(224,112,112,.25); border-radius: var(--radius);
  margin-top: 10px; line-height: 1.5;
}
.auth-hint { font-family: var(--f-ui); font-size: 13px; color: var(--text-sub); margin-bottom: 16px; text-align: center; line-height: 1.5; }
.login-mode.hidden { display: none; }
.spin-inline {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(0,0,0,.2); border-top-color: rgba(0,0,0,.7);
  border-radius: 50%; animation: spin .65s linear infinite;
  vertical-align: middle; margin-right: 6px;
}


/* ═══════════════════════════════════════════════════════════
   SETTINGS
═══════════════════════════════════════════════════════════ */
#view-settings {
  background: var(--bg); align-items: center; justify-content: center;
}
#settings-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 40px 20px;
}
#settings-card {
  width: 100%; max-width: 620px; background: var(--bg2);
  border: 1px solid var(--gold-border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.75);
}
#settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 32px;
  background: linear-gradient(to right, var(--bg3), var(--bg2));
  border-bottom: 1px solid var(--gold-border);
}
#settings-title {
  font-family: var(--f-display); font-size: 14px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
}
.settings-section {
  padding: 20px 32px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.settings-section:last-of-type { border-bottom: none; }
.settings-section-title {
  font-family: var(--f-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}
.settings-section-danger { background: rgba(139,26,26,.05); }
.danger-title { color: #e05555 !important; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-btn { flex-wrap: wrap; }
.settings-label { font-family: var(--f-ui); font-size: 13px; color: var(--text-sub); flex: 1; }
.settings-value { font-family: var(--f-ui); font-size: 13px; color: var(--text); font-weight: 600; }
.settings-btn {
  padding: 9px 20px; border-radius: var(--radius); background: var(--bg3);
  border: 1px solid rgba(255,255,255,.07); color: var(--text);
  font-family: var(--f-ui); font-size: 13px; font-weight: 700;
  letter-spacing: 0.07em; white-space: nowrap; transition: all 0.2s;
}
.settings-btn:hover, .settings-btn.focused {
  background: var(--gold-dim); border-color: var(--gold-border); color: var(--gold);
}
.settings-btn-warn { color: #d4a030; border-color: rgba(212,160,48,.25); }
.settings-btn-warn:hover { background: rgba(212,160,48,.1); border-color: rgba(212,160,48,.5); }
.settings-btn-danger { color: #e05555; border-color: rgba(224,85,85,.25); }
.settings-btn-danger:hover { background: rgba(224,85,85,.12); border-color: rgba(224,85,85,.5); }
.settings-msg {
  margin: 0 32px 16px; font-family: var(--f-ui); font-size: 13px; font-weight: 600;
  padding: 10px 14px; border-radius: var(--radius);
}
.settings-msg.ok  { background: rgba(46,204,113,.1); border: 1px solid rgba(46,204,113,.3); color: #2ecc71; }
.settings-msg.err { background: rgba(224,85,85,.1);  border: 1px solid rgba(224,85,85,.3);  color: #e05555; }

#confirm-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.78);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
#confirm-box {
  background: var(--bg2); border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg); padding: 36px 40px;
  max-width: 420px; width: 90%;
  box-shadow: 0 24px 70px rgba(0,0,0,.88); animation: viewReveal 0.25s ease;
}
#confirm-msg {
  font-family: var(--f-serif); font-size: 15px; line-height: 1.65;
  color: var(--text); margin-bottom: 26px; text-align: center;
}
#confirm-btns { display: flex; gap: 12px; justify-content: center; }


/* ═══════════════════════════════════════════════════════════
   DETAIL
═══════════════════════════════════════════════════════════ */
#view-detail { background: var(--bg); }
#detail-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .18; filter: blur(3px);
  transform: scale(1.04); pointer-events: none;
}
#detail-grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  rgba(7,7,15,1)   35%, rgba(7,7,15,.85) 58%, transparent 100%),
    linear-gradient(to top,    rgba(7,7,15,1)    0%,  transparent 55%),
    linear-gradient(to bottom, rgba(7,7,15,.65)  0%,  transparent 22%);
  pointer-events: none;
}
#detail-scroll {
  position: relative; z-index: 2; flex: 1; overflow-y: scroll; padding-top: 68px;
  -webkit-overflow-scrolling: touch; transform: translateZ(0);
}
#detail-body { display: flex; gap: 52px; padding: 44px 72px; max-width: 1200px; }
#detail-poster {
  flex-shrink: 0; width: 210px; height: auto;
  align-self: flex-start;          /* prevent flex stretch-to-sibling-height */
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 64px rgba(0,0,0,.88), 0 0 0 1px var(--gold-border);
}
#detail-info { flex: 1; min-width: 0; }
#detail-title {
  font-family: var(--f-display);
  font-size: clamp(24px, 3.4vw, 46px); font-weight: 900;
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.08;
  color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.5); margin-bottom: 14px;
}
#detail-meta {
  font-family: var(--f-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#detail-meta::before { content: ''; width: 26px; height: 1px; background: var(--gold); opacity: .5; flex-shrink: 0; }
#detail-overview {
  font-family: var(--f-serif); font-size: 14px; font-style: italic;
  line-height: 1.78; color: rgba(240,234,214,.72);
  margin-bottom: 30px; max-width: 570px;
  padding-left: 18px; border-left: 2px solid var(--gold-border);
}
#detail-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
#ep-section { margin-top: 6px; }
.ep-hdr {
  font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gold-border);
}
#season-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.s-btn {
  padding: 7px 18px; border-radius: var(--radius); background: var(--bg3);
  border: 1px solid rgba(255,255,255,.08);
  font-family: var(--f-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--text-sub); transition: all 0.2s;
}
.s-btn.active { background: var(--gold-dim); border-color: var(--gold-border); color: var(--gold); }
.s-btn:hover { color: var(--text); }
#ep-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 210px; overflow-y: scroll; }
.ep-btn {
  padding: 7px 14px; border-radius: var(--radius); background: var(--bg3);
  border: 1px solid rgba(255,255,255,.06);
  font-family: var(--f-ui); font-size: 12px; font-weight: 600;
  color: var(--text-sub); white-space: nowrap; transition: all 0.15s;
}
.ep-btn:hover, .ep-btn.focused { background: var(--gold-dim); color: var(--gold); border-color: var(--gold-border); }


/* ═══════════════════════════════════════════════════════════
   PLAYER
═══════════════════════════════════════════════════════════ */
#view-player { background: #000; }
#player-bar {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 10px 22px;
  background: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.6));
  border-bottom: 1px solid rgba(201,168,76,.1);
  transition: opacity 0.45s ease; will-change: opacity;
}
#player-bar.bar-hidden { opacity: 0; pointer-events: none; }
.p-btn {
  background: var(--gold-dim); border: 1px solid var(--gold-border); color: var(--text);
  font-family: var(--f-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 18px; border-radius: var(--radius); white-space: nowrap;
  transition: all 0.2s;
}
.p-btn:hover, .p-btn.focused { background: rgba(201,168,76,.18); color: var(--gold); }
.p-btn-next { background: rgba(229,9,20,.22); border-color: rgba(229,9,20,.55); color: #fff; }
.p-btn-next:hover, .p-btn-next.focused { background: rgba(229,9,20,.55); border-color: #e50914; color: #fff; }
#player-title {
  flex: 1; text-align: center;
  font-family: var(--f-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,.68); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#src-label {
  font-family: var(--f-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--gold); min-width: 90px; text-align: center;
}
#frame-wrap {
  flex: 1; position: relative; background: #000;
  display: flex; flex-direction: column; contain: layout paint;
}
#no-stream-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  background: rgba(7,7,15,.97); color: var(--text); padding: 40px;
  animation: viewReveal .4s ease;
}
#player-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  background: var(--bg2); color: var(--text); text-align: center; padding: 40px;
}
#player-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
  z-index: 1; background: transparent; will-change: transform; contain: strict;
}


/* ═══════════════════════════════════════════════════════════
   SEARCH
═══════════════════════════════════════════════════════════ */
#view-search { background: var(--bg); }
#search-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 14px;
  padding: 18px 52px; background: var(--bg2); border-bottom: 1px solid var(--gold-border);
}
#search-box {
  flex: 1; background: var(--bg3); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); color: var(--text);
  padding: 12px 18px; font-size: 15px; outline: none;
  font-family: var(--f-ui); transition: border-color 0.2s, box-shadow 0.2s;
}
#search-box::placeholder { color: var(--text-dim); }
#search-box:focus, #search-box.focused {
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim);
}
#search-scroll {
  flex: 1; overflow-y: scroll; padding: 28px 52px;
  -webkit-overflow-scrolling: touch; transform: translateZ(0);
}
#search-results { display: flex; flex-wrap: wrap; gap: 14px; }
.placeholder {
  color: var(--text-sub); font-family: var(--f-serif); font-style: italic;
  font-size: 15px; padding: 60px 0; width: 100%; text-align: center;
}


/* ═══════════════════════════════════════════════════════════
   HISTORY / FAVORITES
═══════════════════════════════════════════════════════════ */
#view-history { background: var(--bg); }
#history-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 16px;
  padding: 16px 52px; background: var(--bg2); border-bottom: 1px solid var(--gold-border);
}
#history-title {
  font-family: var(--f-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); flex: 1;
}
#history-mode-tabs { display: flex; gap: 6px; }
.hist-tab {
  padding: 8px 20px; border-radius: var(--radius);
  font-family: var(--f-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; border: 1px solid rgba(255,255,255,.08); color: var(--text-sub);
  transition: all 0.2s;
}
.hist-tab.active { background: var(--gold-dim); border-color: var(--gold-border); color: var(--gold); }
#history-scroll {
  flex: 1; overflow-y: scroll; padding: 20px 52px;
  -webkit-overflow-scrolling: touch; transform: translateZ(0);
}
#history-list { display: flex; flex-direction: column; gap: 10px; }
.hist-item {
  display: flex; align-items: center; gap: 18px; padding: 12px 18px;
  background: var(--bg2); border: 1px solid rgba(255,255,255,.04);
  border-radius: var(--radius-md); cursor: pointer; transition: background 0.18s, border-color 0.18s;
}
.hist-item:hover, .hist-item.focused { background: var(--bg3); border-color: var(--gold-border); }
.hist-poster { width: 50px; height: 75px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; }
.hist-info { flex: 1; min-width: 0; }
.hist-title {
  font-family: var(--f-serif); font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.hist-meta {
  font-family: var(--f-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}
.hist-del {
  flex-shrink: 0; background: transparent;
  border: 1px solid rgba(255,255,255,.06); color: var(--text-dim);
  padding: 8px 12px; border-radius: var(--radius); font-size: 15px; transition: all 0.2s;
}
.hist-del:hover { border-color: rgba(224,85,85,.4); color: #e05555; background: rgba(224,85,85,.08); }


/* ═══════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════ */
#jm-toast {
  position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%);
  padding: 12px 28px; border-radius: 40px;
  font-family: var(--f-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap; z-index: 9999; pointer-events: none;
  transition: bottom 0.38s cubic-bezier(.22,1,.36,1);
}
.jm-toast-visible { bottom: 32px !important; }
.jm-toast-ok      { background: var(--gold); color: #06060f; box-shadow: 0 8px 32px rgba(201,168,76,.5); }
.jm-toast-neutral { background: var(--bg2); color: var(--text); border: 1px solid var(--gold-border); }
.jm-toast-error   { background: var(--red); color: #fff; box-shadow: 0 8px 32px rgba(168,36,30,.5); }

#resume-toast {
  position: absolute; top: 20px; right: 20px; z-index: 30;
  padding: 10px 22px; background: rgba(7,7,15,.92);
  border: 1px solid var(--gold-border); border-radius: 40px;
  font-family: var(--f-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
#resume-toast.visible { opacity: 1; }


/* ═══════════════════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════════════════ */
.spin-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 18px; min-height: 300px;
}
.spinner {
  width: 44px; height: 44px;
  border: 3px solid var(--gold-border); border-top-color: var(--gold);
  border-radius: 50%; animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.err { color: #e07070; font-size: 15px; text-align: center; padding: 80px 40px; font-family: var(--f-serif); }


/* ═══════════════════════════════════════════════════════════
   CAPTIONS
═══════════════════════════════════════════════════════════ */
#caption-overlay {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 50; pointer-events: none; width: 90%; max-width: 860px;
  text-align: center; transition: opacity 0.12s ease;
}
#caption-overlay.cap-hidden { opacity: 0; }
#caption-text {
  display: inline-block; background: rgba(0,0,0,.82); color: #fff;
  font-size: 26px; font-weight: 600; line-height: 1.45;
  padding: 8px 22px 10px; border-radius: 6px;
  letter-spacing: 0.01em; text-shadow: 0 1px 4px rgba(0,0,0,.8);
  max-width: 100%; word-break: break-word; white-space: pre-wrap;
}
#caption-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cap-nudge-btn {
  background: rgba(255,255,255,.08); color: #ccc;
  font-size: 11px; font-weight: 700; padding: 4px 8px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,.1);
  white-space: nowrap; line-height: 1; transition: all 0.15s;
}
.cap-nudge-btn.focused { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }
#cap-offset-label { font-size: 11px; color: var(--text-sub); min-width: 44px; text-align: center; font-weight: 700; }
.btn-caption {
  background: rgba(255,255,255,.08); color: #ccc; font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.1);
  white-space: nowrap; transition: all 0.15s;
}
.btn-caption.cap-on { background: var(--gold-dim); color: var(--gold); border-color: var(--gold-border); }
.btn-caption.focused { border-color: var(--gold) !important; background: var(--gold-dim) !important; color: var(--gold) !important; }

#caption-picker {
  position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
  animation: viewReveal .15s ease;
}
#caption-picker.hidden { display: none !important; }
#caption-picker-box {
  background: var(--bg2); border: 1px solid var(--gold-border); border-radius: var(--radius-lg);
  width: 520px; max-width: 94vw; max-height: 82vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 72px rgba(0,0,0,.88); overflow: hidden;
}
#caption-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 14px; border-bottom: 1px solid var(--gold-border); flex-shrink: 0;
}
#caption-picker-title {
  font-family: var(--f-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
}
.caption-close-btn {
  background: var(--gold-dim); color: var(--text-sub); font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: var(--radius); border: 1px solid var(--gold-border); transition: all 0.15s;
}
.caption-close-btn.focused { border-color: var(--gold); color: var(--gold); }
#caption-picker-search-wrap { padding: 14px 20px 10px; flex-shrink: 0; }
.caption-lang-search {
  width: 100%; background: var(--bg3); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); color: var(--text); padding: 10px 14px;
  font-size: 14px; outline: none; font-family: var(--f-ui); transition: border-color 0.2s;
}
.caption-lang-search:focus, .caption-lang-search.focused { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }
#caption-lang-list { flex: 1; overflow-y: auto; padding: 6px 10px 14px; }
.caption-lang-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; transition: all 0.15s; margin-bottom: 3px;
}
.caption-lang-item:hover, .caption-lang-item.focused { background: var(--gold-dim); border-color: var(--gold-border); }
.caption-lang-item.active { background: rgba(168,36,30,.15); border-color: rgba(168,36,30,.4); }
.caption-lang-item.active.focused { background: rgba(168,36,30,.28); }
.cap-lang-flag { font-size: 22px; flex-shrink: 0; width: 30px; text-align: center; }
.cap-lang-name { font-family: var(--f-ui); font-size: 14px; font-weight: 600; color: var(--text); flex: 1; }
.cap-lang-count { font-size: 12px; color: var(--text-sub); flex-shrink: 0; }
.cap-lang-check { color: var(--gold); font-size: 16px; font-weight: 900; flex-shrink: 0; }
.caption-lang-item.cap-off-row { border-color: transparent; }
.caption-lang-item.cap-off-row .cap-lang-name { color: var(--text-sub); }
#caption-picker-status {
  flex-shrink: 0; min-height: 38px; padding: 8px 24px 14px;
  font-family: var(--f-ui); font-size: 13px; font-weight: 600;
  color: var(--text-sub); text-align: center;
}
#caption-picker-status.loading { color: var(--text-sub); }
#caption-picker-status.err { color: #e07070; }
#caption-picker-status.ok  { color: #2ecc71; }
.cap-status-spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--gold-border); border-top-color: var(--gold);
  border-radius: 50%; animation: spin .65s linear infinite;
  vertical-align: middle; margin-right: 6px;
}


/* ═══════════════════════════════════════════════════════════
   DETAIL PAGE — ENHANCED SECTIONS
═══════════════════════════════════════════════════════════ */

/* Tagline */
#detail-tagline {
  font-family: var(--f-serif);
  font-size: 13px; font-style: italic;
  color: var(--gold); opacity: 0.75;
  margin-bottom: 10px; letter-spacing: 0.03em;
}

/* Status badge in meta */
.status-badge {
  background: var(--gold-dim); border: 1px solid var(--gold-border);
  color: var(--gold); border-radius: 20px;
  padding: 2px 10px; font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* Genre chips */
#detail-genres {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.genre-chip {
  padding: 4px 14px; border-radius: 20px;
  background: var(--gold-dim); border: 1px solid var(--gold-border);
  font-family: var(--f-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  white-space: nowrap;
}

/* Crew line */
.detail-crew-line {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-bottom: 18px;
}
.crew-item {
  font-family: var(--f-ui); font-size: 12px; color: var(--text-sub);
}
.crew-role {
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 10px; color: var(--gold); margin-right: 6px;
}

/* Watch providers */
#detail-providers {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.providers-label {
  font-family: var(--f-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-sub);
}
.provider-logo {
  width: 36px; height: 36px; border-radius: 9px;
  object-fit: cover; border: 1px solid var(--gold-border);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.provider-logo:hover {
  transform: scale(1.18); border-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
}

/* Trailer button */
.btn-trailer {
  padding: 12px 26px;
  background: transparent; color: var(--text);
  border: 1.5px solid rgba(255,255,255,.32); border-radius: var(--radius);
  font-family: var(--f-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  transition: all 0.2s;
}
.btn-trailer:hover, .btn-trailer.focused {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.72);
  color: #fff;
}

/* Section containers below the main body */
.detail-section {
  padding: 0 72px 0;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .detail-section { padding: 0 24px; } }

.detail-section-title {
  font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold-border);
  display: flex; align-items: center; gap: 12px;
}
.detail-section-title::before {
  content: ''; width: 3px; height: 16px;
  background: var(--gold); border-radius: 2px; flex-shrink: 0;
}

/* ── Cast Strip ──────────────────────────────────────────── */
.cast-strip {
  display: flex; gap: 18px; overflow-x: scroll; padding-bottom: 6px;
  cursor: grab;
}
.cast-strip:active { cursor: grabbing; }
.cast-card {
  flex-shrink: 0; width: 86px; text-align: center;
}
.cast-avatar-wrap {
  width: 76px; height: 76px; margin: 0 auto 9px;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gold-border);
  box-shadow: 0 4px 14px rgba(0,0,0,.55);
  transition: border-color 0.22s, box-shadow 0.22s;
}
.cast-card:hover .cast-avatar-wrap {
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 14px var(--gold-glow);
}
.cast-avatar {
  width: 100%; height: 100%; object-fit: cover;
}
.cast-name {
  font-family: var(--f-ui); font-size: 11px; font-weight: 700;
  color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px;
}
.cast-char {
  font-family: var(--f-serif); font-size: 10px; font-style: italic;
  color: var(--text-sub); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ── Collection Banner ───────────────────────────────────── */
.collection-banner {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  cursor: pointer; max-width: 640px;
  border: 1px solid var(--gold-border);
  background: var(--bg3); display: block;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
.collection-banner:hover, .collection-banner.focused {
  border-color: var(--gold);
  box-shadow: 0 10px 36px rgba(0,0,0,.7), 0 0 0 1px var(--gold);
  transform: translateY(-3px);
}
.collection-bg {
  width: 100%; height: 150px; object-fit: cover;
  opacity: 0.38; filter: blur(1px); display: block;
}
.collection-info {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 22px 30px;
  background: linear-gradient(105deg, rgba(7,7,15,.9) 0%, rgba(7,7,15,.5) 65%, transparent 100%);
}
.collection-eyebrow {
  font-family: var(--f-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 7px;
}
.collection-name {
  font-family: var(--f-display); font-size: 19px; font-weight: 800;
  color: #fff; margin-bottom: 9px; letter-spacing: 0.04em;
}
.collection-cta {
  font-family: var(--f-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--text-sub); text-transform: uppercase;
  transition: color 0.2s;
}
.collection-banner:hover .collection-cta, .collection-banner.focused .collection-cta {
  color: var(--gold);
}

/* ── Reviews ─────────────────────────────────────────────── */
.reviews-list {
  display: flex; flex-direction: column; gap: 16px; max-width: 820px;
}
.review-card {
  background: var(--bg2); border: 1px solid rgba(255,255,255,.05);
  border-left: 3px solid var(--gold-border);
  border-radius: var(--radius-md); padding: 20px 24px;
  transition: border-left-color 0.2s;
}
.review-card:hover { border-left-color: var(--gold); }
.review-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.review-author {
  font-family: var(--f-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.review-rating {
  font-family: var(--f-ui); font-size: 11px; font-weight: 700;
  color: var(--gold); background: var(--gold-dim);
  padding: 3px 10px; border-radius: 20px; border: 1px solid var(--gold-border);
  white-space: nowrap; flex-shrink: 0;
}
.review-text {
  font-family: var(--f-serif); font-size: 13px; font-style: italic;
  line-height: 1.75; color: rgba(240,234,214,.62);
}

/* ── More Like This (horizontal recs in detail) ─────────── */
.detail-more-strip {
  display: flex; gap: 12px; overflow-x: scroll; padding-bottom: 6px;
  cursor: grab;
}
.detail-more-strip:active { cursor: grabbing; }


/* ═══════════════════════════════════════════════════════════
   COLLECTION VIEW
═══════════════════════════════════════════════════════════ */
#view-collection { background: var(--bg); }
#coll-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .15; filter: blur(4px);
  transform: scale(1.04); pointer-events: none;
}
#coll-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7,7,15,.58) 0%, var(--bg) 36%);
  pointer-events: none;
}
#coll-scroll {
  position: relative; z-index: 2; flex: 1;
  overflow-y: scroll; padding-top: 28px;
  -webkit-overflow-scrolling: touch; transform: translateZ(0);
}
#coll-header {
  display: flex; align-items: center; gap: 24px;
  padding: 0 52px; margin-bottom: 14px;
}
#coll-title {
  font-family: var(--f-display); font-size: 22px; font-weight: 900;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
#coll-overview {
  font-family: var(--f-serif); font-style: italic;
  font-size: 13px; line-height: 1.75;
  color: rgba(240,234,214,.55);
  padding: 0 52px; margin-bottom: 10px; max-width: 720px;
}
.coll-count {
  padding: 0 52px; margin-bottom: 24px;
  font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
}
#coll-grid {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 0 52px;
}


/* ═══════════════════════════════════════════════════════════
   GENRE BROWSER VIEW
═══════════════════════════════════════════════════════════ */
#view-genre { background: var(--bg); }
#genre-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 18px;
  padding: 18px 52px;
  background: var(--bg2); border-bottom: 1px solid var(--gold-border);
}
#genre-title {
  font-family: var(--f-display); font-size: 14px; font-weight: 800;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); flex: 1;
}
#genre-type-toggle { display: flex; gap: 6px; }
.genre-type-btn {
  padding: 8px 20px; border-radius: var(--radius);
  font-family: var(--f-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; border: 1px solid rgba(255,255,255,.08); color: var(--text-sub);
  transition: all 0.2s;
}
.genre-type-btn.active { background: var(--gold-dim); border-color: var(--gold-border); color: var(--gold); }
.genre-type-btn:hover  { color: var(--text); }
#genre-scroll {
  flex: 1; overflow-y: scroll; padding: 28px 52px;
  -webkit-overflow-scrolling: touch; transform: translateZ(0);
}
#genre-grid {
  display: flex; flex-wrap: wrap; gap: 14px; position: relative;
}


/* ═══════════════════════════════════════════════════════════
   GENRE SHELF CARDS (on home screen)
═══════════════════════════════════════════════════════════ */
.genre-shelf-card {
  flex-shrink: 0;
  width: 120px; height: 84px;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg3);
  border: 1px solid rgba(201,168,76,.12);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(.22,1,.36,1),
              box-shadow 0.28s ease, border-color 0.28s ease,
              background 0.2s;
}
.genre-shelf-card:hover {
  transform: translateY(-5px) scale(1.04);
  border-color: var(--gold-border);
  background: var(--bg4);
  box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 0 1px var(--gold-border);
}
.genre-shelf-card.focused {
  outline: none;
  transform: translateY(-6px) scale(1.05);
  border-color: var(--gold);
  background: var(--bg4);
  box-shadow: 0 14px 40px rgba(0,0,0,.8), 0 0 0 2px var(--gold), 0 0 20px var(--gold-glow);
}
.genre-shelf-icon { font-size: 28px; line-height: 1; }
.genre-shelf-name {
  font-family: var(--f-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-sub);
  transition: color 0.2s;
}
.genre-shelf-card:hover .genre-shelf-name,
.genre-shelf-card.focused .genre-shelf-name { color: var(--gold); }


/* ═══════════════════════════════════════════════════════════
   PERFORMANCE MODE  —  "NO DESIGN" BUILD
   Goal: render like a bare-bones 1999 utility website.
   Zero gradients, zero shadows, zero animations, zero fancy
   fonts. Just flat rectangles, system text, and structure.
   Every single decorative pixel is killed here.
═══════════════════════════════════════════════════════════ */

/* ── Step 1: Nuclear option on every element ─────────────
   background-image:none kills ALL gradients AND the film-grain
   SVG overlay at once. <img> src= tags are unaffected.        */
body.perf-mode,
body.perf-mode *,
body.perf-mode *::before,
body.perf-mode *::after {
  animation:          none !important;
  transition:         none !important;
  box-shadow:         none !important;
  text-shadow:        none !important;
  background-image:   none !important;   /* kills every gradient + grain SVG */
  backdrop-filter:    none !important;
  filter:             none !important;
  mix-blend-mode:     normal !important;
  font-family:        system-ui, -apple-system, Arial, sans-serif !important;
  font-style:         normal !important;
  letter-spacing:     0 !important;
  text-transform:     none !important;
  border-radius:      2px !important;
}

/* ── Step 2: Base palette — flat grays only ────────────── */
body.perf-mode        { background: #111 !important; color: #ccc !important; }
body.perf-mode::before { display: none !important; }   /* belt+braces: film grain */

/* ── Navbar ─────────────────────────────────────────────── */
body.perf-mode #navbar {
  background: #1a1a1a !important;
  border-bottom: 1px solid #2a2a2a !important;
  height: 52px !important;
}
body.perf-mode #navbar::after { display: none !important; }
body.perf-mode #logo { color: #c9a84c !important; font-size: 15px !important; font-weight: 700 !important; }
body.perf-mode #logo svg { display: none !important; }

body.perf-mode .nav-btn {
  background: #1e1e1e !important; border: 1px solid #333 !important;
  color: #aaa !important; padding: 5px 12px !important; font-size: 12px !important;
}
body.perf-mode .nav-btn.focused,
body.perf-mode .nav-btn:hover { background: #252525 !important; border-color: #c9a84c !important; color: #c9a84c !important; }

body.perf-mode .avatar-btn { border-radius: 2px !important; }

/* ── Hero: collapse to a one-line title bar ──────────────
   No backdrop image, no gradient, no pan animation —
   just the movie title + two buttons in a dark strip.       */
body.perf-mode #hero {
  height: auto !important; min-height: 0 !important; max-height: none !important;
  background: #1a1a1a !important;
  border-bottom: 1px solid #2a2a2a !important;
  padding: 10px 52px !important;
}
body.perf-mode #hero::before,
body.perf-mode #hero::after { display: none !important; }
body.perf-mode #hero-bg,
body.perf-mode #hero-grad,
body.perf-mode #hero-dots,
body.perf-mode #hero-eyebrow,
body.perf-mode #hero-desc,
body.perf-mode #hero-meta { display: none !important; }
body.perf-mode #hero-info {
  position: static !important; padding: 0 !important;
  max-width: none !important;
  display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important;
}
body.perf-mode #hero-title {
  font-size: 14px !important; font-weight: 600 !important;
  color: #ddd !important; margin: 0 !important; flex: 1 !important;
}
body.perf-mode #hero-btns { display: flex !important; gap: 8px !important; }

/* ── Cards: flat image + label, no chrome ───────────────── */
body.perf-mode .card {
  background: #161616 !important; border: 1px solid #2a2a2a !important;
  width: 120px !important; transform: none !important;
}
body.perf-mode .card::before { display: none !important; }
body.perf-mode .card img     { transform: none !important; }
body.perf-mode .card:hover   { transform: none !important; }
body.perf-mode .card.focused { border-color: #c9a84c !important; outline: none !important; transform: none !important; }
body.perf-mode .card-label   { background: #161616 !important; border-top: 1px solid #222 !important; padding: 4px 5px !important; }
body.perf-mode .card-name    { font-size: 10px !important; color: #aaa !important; }
body.perf-mode .card-sub     { font-size: 9px !important;  color: #666 !important; }

/* ── Row labels + section headers ───────────────────────── */
body.perf-mode .cat-row        { padding: 2px 0 10px !important; }
body.perf-mode .cat-title {
  font-size: 11px !important; font-weight: 600 !important;
  color: #777 !important; padding: 6px 52px 3px !important;
}
body.perf-mode .cat-title::before { display: none !important; }
body.perf-mode .section-divider {
  padding: 4px 52px 0 !important;
  border-bottom: 1px solid #1e1e1e !important;
}
body.perf-mode .section-divider::before,
body.perf-mode .section-divider::after { display: none !important; }
body.perf-mode .section-divider-label { font-size: 10px !important; color: #444 !important; }

/* ── Genre shelf cards ───────────────────────────────────── */
body.perf-mode .genre-shelf-card {
  background: #161616 !important; border: 1px solid #2a2a2a !important;
  width: 88px !important; height: 56px !important; transform: none !important;
}
body.perf-mode .genre-shelf-card:hover,
body.perf-mode .genre-shelf-card.focused { transform: none !important; border-color: #c9a84c !important; }
body.perf-mode .genre-shelf-icon { font-size: 18px !important; }
body.perf-mode .genre-shelf-name { font-size: 8px !important; color: #666 !important; }

/* ── All buttons: flat gray rectangles ──────────────────── */
body.perf-mode .btn-white,
body.perf-mode .btn-play,
body.perf-mode .btn-ghost,
body.perf-mode .btn-back,
body.perf-mode .btn-resume,
body.perf-mode .btn-fav,
body.perf-mode .btn-trailer,
body.perf-mode .p-btn,
body.perf-mode .settings-btn,
body.perf-mode .auth-submit,
body.perf-mode .s-btn,
body.perf-mode .ep-btn,
body.perf-mode .hist-tab,
body.perf-mode .genre-type-btn,
body.perf-mode .mode-tab,
body.perf-mode .auth-tab {
  background: #1e1e1e !important; border: 1px solid #333 !important;
  color: #aaa !important; font-size: 12px !important;
  font-weight: 600 !important; padding: 7px 16px !important;
  transform: none !important;
}
/* Active / focused / hover state for everything */
body.perf-mode .btn-white.focused, body.perf-mode .btn-white:hover,
body.perf-mode .btn-play.focused,  body.perf-mode .btn-play:hover,
body.perf-mode .btn-ghost.focused, body.perf-mode .btn-ghost:hover,
body.perf-mode .btn-back.focused,  body.perf-mode .btn-back:hover,
body.perf-mode .p-btn.focused,     body.perf-mode .p-btn:hover,
body.perf-mode .settings-btn.focused, body.perf-mode .settings-btn:hover,
body.perf-mode .hist-tab.active,   body.perf-mode .genre-type-btn.active,
body.perf-mode .mode-tab.active,   body.perf-mode .auth-tab.active,
body.perf-mode .s-btn.active,
body.perf-mode .ep-btn.focused,    body.perf-mode .ep-btn:hover {
  background: #252525 !important; border-color: #c9a84c !important;
  color: #c9a84c !important; transform: none !important;
}
body.perf-mode .auth-submit {
  background: #c9a84c !important; color: #111 !important;
  border-color: #c9a84c !important; font-weight: 700 !important;
}
body.perf-mode .btn-fav.fav-active { color: #e05555 !important; border-color: #e05555 !important; background: #1e1e1e !important; }

/* ── Detail page ─────────────────────────────────────────── */
body.perf-mode #detail-bg,
body.perf-mode #coll-bg     { display: none !important; }
body.perf-mode #detail-grad,
body.perf-mode #coll-grad   { background: #111 !important; }
body.perf-mode #detail-title {
  font-size: 20px !important; font-weight: 700 !important; color: #ddd !important;
}
body.perf-mode #detail-tagline { display: none !important; }
body.perf-mode #detail-meta  { color: #777 !important; font-size: 11px !important; }
body.perf-mode #detail-meta::before { display: none !important; }
body.perf-mode #detail-overview {
  border-left: 2px solid #333 !important; color: #999 !important; font-size: 13px !important;
}
body.perf-mode .genre-chip   { background: #1e1e1e !important; border-color: #333 !important; color: #777 !important; font-size: 9px !important; }
body.perf-mode .status-badge { background: #1e1e1e !important; border-color: #333 !important; color: #777 !important; }
body.perf-mode .crew-role    { color: #777 !important; }
body.perf-mode .detail-section-title { color: #666 !important; border-bottom-color: #222 !important; font-size: 10px !important; }
body.perf-mode .detail-section-title::before { display: none !important; }
body.perf-mode .cast-avatar-wrap { border-color: #333 !important; }
body.perf-mode .cast-name    { font-size: 10px !important; color: #999 !important; }
body.perf-mode .cast-char    { font-size: 9px !important;  color: #555 !important; }
body.perf-mode .review-card  { background: #161616 !important; border-left-color: #333 !important; border-color: #222 !important; }
body.perf-mode .review-author { color: #888 !important; }
body.perf-mode .review-rating { background: #1e1e1e !important; border-color: #333 !important; color: #888 !important; }
body.perf-mode .review-text  { color: #777 !important; }
body.perf-mode .provider-logo { border-color: #333 !important; }
body.perf-mode .collection-banner { border-color: #333 !important; transform: none !important; }
body.perf-mode .collection-bg    { display: none !important; }
body.perf-mode .collection-info  { background: #161616 !important; position: static !important; padding: 12px 16px !important; }
body.perf-mode .collection-eyebrow { font-size: 9px !important; color: #666 !important; }
body.perf-mode .collection-name  { font-size: 14px !important; color: #ccc !important; }
body.perf-mode .collection-cta   { color: #666 !important; font-size: 10px !important; }
body.perf-mode #ep-grid { max-height: 160px !important; }

/* ── Auth ────────────────────────────────────────────────── */
body.perf-mode #view-auth   { background: #111 !important; }
body.perf-mode #auth-card   { background: #1a1a1a !important; border-color: #2a2a2a !important; }
body.perf-mode #auth-logo   { color: #c9a84c !important; font-size: 18px !important; }
body.perf-mode #auth-tabs   { border-bottom-color: #2a2a2a !important; }
body.perf-mode .auth-label  { color: #666 !important; }
body.perf-mode .auth-input  { background: #111 !important; border-color: #333 !important; color: #ccc !important; }
body.perf-mode .auth-input.focused,
body.perf-mode .auth-input:focus { border-color: #c9a84c !important; }
body.perf-mode .auth-link   { color: #555 !important; }
body.perf-mode .auth-link.focused,
body.perf-mode .auth-link:hover { color: #c9a84c !important; }
body.perf-mode #login-mode-tabs { gap: 4px !important; }

/* ── Settings ────────────────────────────────────────────── */
body.perf-mode #view-settings { background: #111 !important; }
body.perf-mode #settings-card { background: #1a1a1a !important; border-color: #2a2a2a !important; }
body.perf-mode #settings-header { background: #1a1a1a !important; border-bottom-color: #2a2a2a !important; }
body.perf-mode #settings-title  { color: #c9a84c !important; }
body.perf-mode .settings-section { border-bottom-color: #1e1e1e !important; }
body.perf-mode .settings-section-title { color: #666 !important; }
body.perf-mode .settings-label { color: #888 !important; }
body.perf-mode .settings-value { color: #bbb !important; }
body.perf-mode .settings-row   { border-bottom-color: #1a1a1a !important; }
body.perf-mode .settings-btn-warn   { color: #c9a84c !important; border-color: #333 !important; }
body.perf-mode .settings-btn-danger { color: #e05555 !important; border-color: #333 !important; }
body.perf-mode .settings-section-danger { background: transparent !important; }
body.perf-mode .danger-title    { color: #e05555 !important; }

/* ── History / Favorites ─────────────────────────────────── */
body.perf-mode #history-header { background: #1a1a1a !important; border-bottom-color: #2a2a2a !important; }
body.perf-mode #history-title  { color: #aaa !important; }
body.perf-mode .hist-item      { background: #161616 !important; border-color: #222 !important; }
body.perf-mode .hist-item.focused,
body.perf-mode .hist-item:hover { background: #1e1e1e !important; border-color: #c9a84c !important; }
body.perf-mode .hist-title     { color: #ccc !important; font-size: 13px !important; }
body.perf-mode .hist-meta      { color: #666 !important; }
body.perf-mode .hist-del       { color: #555 !important; border-color: #222 !important; }

/* ── Search ──────────────────────────────────────────────── */
body.perf-mode #search-header { background: #1a1a1a !important; border-bottom-color: #2a2a2a !important; }
body.perf-mode #search-box    { background: #111 !important; border-color: #333 !important; color: #ccc !important; }
body.perf-mode #search-box:focus,
body.perf-mode #search-box.focused { border-color: #c9a84c !important; }

/* ── Genre browser ───────────────────────────────────────── */
body.perf-mode #genre-header  { background: #1a1a1a !important; border-bottom-color: #2a2a2a !important; }
body.perf-mode #genre-title   { color: #aaa !important; }

/* ── Collection view ─────────────────────────────────────── */
body.perf-mode #coll-title    { font-size: 16px !important; color: #ddd !important; }
body.perf-mode #coll-overview { color: #888 !important; font-size: 12px !important; }
body.perf-mode .coll-count    { color: #666 !important; }

/* ── Player bar ──────────────────────────────────────────── */
body.perf-mode #player-bar    { background: #0e0e0e !important; border-bottom-color: #222 !important; }
body.perf-mode #player-title  { color: #aaa !important; font-size: 11px !important; }
body.perf-mode #src-label     { color: #888 !important; }

/* ── Confirm dialog ──────────────────────────────────────── */
body.perf-mode #confirm-overlay { background: rgba(0,0,0,.92) !important; }
body.perf-mode #confirm-box   { background: #1a1a1a !important; border-color: #2a2a2a !important; }
body.perf-mode #confirm-msg   { color: #ccc !important; font-size: 14px !important; }
body.perf-mode .settings-btn-danger.focused { border-color: #e05555 !important; color: #e05555 !important; }

/* ── Caption picker ──────────────────────────────────────── */
body.perf-mode #caption-picker-box { background: #1a1a1a !important; border-color: #2a2a2a !important; }
body.perf-mode #caption-picker-header { border-bottom-color: #2a2a2a !important; }
body.perf-mode .caption-lang-item.focused,
body.perf-mode .caption-lang-item:hover { background: #222 !important; border-color: #c9a84c !important; }
body.perf-mode .caption-lang-search { background: #111 !important; border-color: #333 !important; color: #ccc !important; }

/* ── Toasts ──────────────────────────────────────────────── */
body.perf-mode .jm-toast-ok      { background: #c9a84c !important; color: #111 !important; border-radius: 2px !important; }
body.perf-mode .jm-toast-neutral { background: #1e1e1e !important; color: #ccc !important; border: 1px solid #333 !important; }
body.perf-mode .jm-toast-error   { background: #5a1a1a !important; color: #fff !important; }

/* ── Spinners ────────────────────────────────────────────── */
body.perf-mode .spinner { border-color: #2a2a2a !important; border-top-color: #c9a84c !important; }
body.perf-mode .row-load-spin { border-color: #2a2a2a !important; border-top-color: #c9a84c !important; }

/* ── No-stream overlay ───────────────────────────────────── */
body.perf-mode #no-stream-overlay { background: #0e0e0e !important; }

/* ── Universal focus: thin gold border, no glow ─────────── */
body.perf-mode .focusable.focused {
  outline:        2px solid #c9a84c !important;
  outline-offset: 1px !important;
}

/* ── Perf Mode button ────────────────────────────────────── */
#btn-perf-mode { font-size: 11px; }
#btn-perf-mode.perf-active {
  background:   #c9a84c !important;
  border-color: #c9a84c !important;
  color:        #111    !important;
  font-weight:  700     !important;
}

/* ═══════════════════════════════════════════════════════════
   COMMENTS SECTION
═══════════════════════════════════════════════════════════ */

/* Container */
#comments-section {
  margin: 0 40px 0;
  padding: 32px 0 0;
}
#comments-section .detail-section-title {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gold-border);
  margin-bottom: 24px;
}

/* ── Compose box ───────────────────────────────────────── */
#comment-compose {
  background: var(--bg3);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 18px 20px 14px;
  margin-bottom: 28px;
}
.comment-compose-label {
  font-size: 12px;
  color: var(--text-sub);
  font-family: var(--f-ui);
  margin-bottom: 10px;
  letter-spacing: .04em;
}
.comment-username {
  color: var(--gold);
  font-weight: 600;
}
.comment-textarea {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 14px;
  resize: vertical;
  min-height: 80px;
  transition: border-color .18s;
}
.comment-textarea:focus,
.comment-textarea.focused {
  border-color: var(--gold);
  outline: none;
}
.comment-textarea::placeholder { color: var(--text-dim); }
.comment-compose-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 12px;
}
.comment-charcount {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--f-ui);
}
.comment-submit {
  background: var(--gold);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  padding: 9px 22px;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, transform .12s;
}
.comment-submit:hover { background: var(--gold-lt); }
.comment-submit:disabled { opacity: .5; cursor: not-allowed; }
.comment-submit.focused {
  outline: 2px solid var(--gold-lt);
  outline-offset: 2px;
}
.comment-error {
  color: #e57373;
  font-size: 13px;
  margin-top: 8px;
  font-family: var(--f-ui);
}

/* ── Guest wall ─────────────────────────────────────────── */
#comment-guestwall {
  margin-bottom: 28px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  min-height: 200px;
  border: 1px solid var(--gold-border);
}
.comment-blur-overlay {
  position: relative;
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comment-blur-bg {
  position: absolute;
  inset: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
  opacity: .45;
  background: var(--bg3);
}
.fake-comment {
  display: flex; gap: 12px; align-items: flex-start;
}
.fc-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg4);
  flex-shrink: 0;
}
.fc-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.fc-line {
  height: 10px;
  background: var(--gold-dim);
  border-radius: 4px;
}
.fc-line.w40 { width: 40%; }
.fc-line.w45 { width: 45%; }
.fc-line.w55 { width: 55%; }
.fc-line.w60 { width: 60%; }
.fc-line.w70 { width: 70%; }
.fc-line.w75 { width: 75%; }
.fc-line.w80 { width: 80%; }

.comment-blur-message {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 10px;
  background: rgba(7,7,15,.82);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: 28px 36px;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
}
.cbm-icon { font-size: 36px; }
.cbm-title {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.cbm-sub {
  font-size: 13px;
  color: var(--text-sub);
  max-width: 300px;
  line-height: 1.6;
  font-family: var(--f-ui);
}
.cbm-btn {
  background: var(--gold);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  padding: 10px 28px;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, transform .12s;
  width: 180px;
}
.cbm-btn:hover { background: var(--gold-lt); transform: scale(1.03); }
.cbm-btn.focused { outline: 2px solid var(--gold-lt); outline-offset: 2px; }
.cbm-btn-ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-border);
}
.cbm-btn-ghost:hover { background: var(--gold-dim); }

/* ── Comment items ──────────────────────────────────────── */
#comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.comment-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--bg3);
  border: 1px solid rgba(201,168,76,.1);
  border-radius: var(--radius-md);
  transition: border-color .18s;
}
.comment-item:hover { border-color: var(--gold-border); }
.comment-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gold-dk);
  color: var(--bg);
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.comment-content { flex: 1; min-width: 0; }
.comment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.comment-author {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .06em;
}
.comment-date {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--f-ui);
}
.comment-delete {
  background: none;
  border: none;
  padding: 2px 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-dim);
  border-radius: var(--radius);
  transition: color .15s, background .15s;
  margin-left: auto;
}
.comment-delete:hover { color: #e57373; background: rgba(229,115,115,.12); }
.comment-delete.focused { outline: 2px solid #e57373; outline-offset: 1px; }
.comment-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  font-family: var(--f-ui);
  white-space: pre-wrap;
  word-break: break-word;
}
.comment-empty {
  color: var(--text-sub);
  font-size: 14px;
  font-family: var(--f-ui);
  text-align: center;
  padding: 24px 0;
  font-style: italic;
}

/* ── Load more ──────────────────────────────────────────── */
.comment-load-more {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid var(--gold-border);
  color: var(--gold);
  border-radius: var(--radius);
  padding: 11px 0;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  margin-bottom: 16px;
}
.comment-load-more:hover { background: var(--gold-dim); border-color: var(--gold); }
.comment-load-more:disabled { opacity: .5; cursor: not-allowed; }
.comment-load-more.focused {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Spinner inside comments ────────────────────────────── */
.comments-spinner { padding: 32px 0; }


/* ═══════════════════════════════════════════════════════════
   HOME TAB BAR
═══════════════════════════════════════════════════════════ */
#home-tab-bar {
  position: sticky; top: 68px; z-index: 8;
  display: flex; align-items: stretch;
  padding: 0 44px;
  background: var(--bg);
  border-bottom: 1px solid var(--gold-border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  flex-shrink: 0; gap: 0;
}
#home-tab-bar::-webkit-scrollbar { display: none; }
.home-tab {
  flex-shrink: 0; position: relative;
  padding: 13px 16px 11px;
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--f-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-sub); white-space: nowrap;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s, background 0.18s;
}
.home-tab:hover { color: var(--text); }
.home-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.home-tab.focused { outline: none; background: var(--gold-dim); color: var(--gold); }

#home-tab-panel { min-height: 400px; }

/* ─── Generic Tab Grid Section ─────────────────────────── */
.tab-grid-section { padding: 24px 52px 8px; }
.tab-grid-label {
  font-family: var(--f-display); font-size: 9px; font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.tab-grid-label::before {
  content: ''; width: 3px; height: 13px;
  background: var(--gold); border-radius: 2px; flex-shrink: 0;
}
.tab-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 11px; padding-bottom: 8px;
}

/* ─── Genre Grid Cards (Genres tab) ─────────────────────── */
.genre-grid-card {
  height: 94px;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid rgba(201,168,76,.12);
  background: var(--bg3);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.22,1,.36,1),
              box-shadow 0.22s ease, border-color 0.22s ease, background 0.2s;
}
.genre-grid-card:hover, .genre-grid-card.focused {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--gold);
  background: var(--bg4);
  box-shadow: 0 10px 30px rgba(0,0,0,.7), 0 0 0 2px var(--gold), 0 0 20px var(--gold-glow);
}
.genre-grid-icon { font-size: 28px; line-height: 1; }
.genre-grid-name {
  font-family: var(--f-display); font-size: 8px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-sub);
  transition: color 0.2s; text-align: center; padding: 0 6px;
}
.genre-grid-card:hover .genre-grid-name,
.genre-grid-card.focused .genre-grid-name { color: var(--gold); }

/* ─── World / Country Cards ─────────────────────────────── */
.world-card {
  height: 94px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.06);
  background: var(--bg3);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.22,1,.36,1),
              box-shadow 0.22s ease, border-color 0.22s ease, background 0.2s;
}
.world-card:hover, .world-card.focused {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--gold-border);
  background: var(--bg4);
  box-shadow: 0 10px 30px rgba(0,0,0,.7), 0 0 0 1px var(--gold-border);
}
.world-flag { font-size: 30px; line-height: 1; }
.world-name {
  font-family: var(--f-display); font-size: 8px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-sub);
  transition: color 0.2s; text-align: center; padding: 0 6px;
}
.world-card:hover .world-name, .world-card.focused .world-name { color: var(--gold); }

/* ─── All Movies / TV grid ───────────────────────────────── */
.all-movies-header {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 52px 12px; flex-wrap: wrap;
}
.all-movies-grid {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 4px 52px 52px; min-height: 300px;
}

/* ─── Mood Cards ─────────────────────────────────────────── */
.mood-card {
  height: 108px;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; position: relative;
  transition: transform 0.22s cubic-bezier(.22,1,.36,1),
              box-shadow 0.22s ease, border-color 0.22s ease;
}
.mood-card-bg {
  position: absolute; inset: 0; opacity: 0.32; transition: opacity 0.22s;
}
.mood-card:hover .mood-card-bg, .mood-card.focused .mood-card-bg { opacity: 0.58; }
.mood-card:hover, .mood-card.focused {
  transform: translateY(-5px) scale(1.05);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 36px rgba(0,0,0,.7);
}
.mood-icon { font-size: 30px; line-height: 1; position: relative; z-index: 1; }
.mood-name {
  font-family: var(--f-display); font-size: 8px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: #fff;
  position: relative; z-index: 1; text-align: center; padding: 0 8px;
}

/* ─── Decade Cards ───────────────────────────────────────── */
.decade-card {
  height: 108px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(201,168,76,.14);
  background: var(--bg3);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.22,1,.36,1),
              box-shadow 0.22s ease, border-color 0.22s ease, background 0.2s;
}
.decade-card:hover, .decade-card.focused {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--gold);
  background: var(--bg4);
  box-shadow: 0 12px 36px rgba(0,0,0,.7), 0 0 0 2px var(--gold), 0 0 20px var(--gold-glow);
}
.decade-year {
  font-family: var(--f-display); font-size: 26px; font-weight: 900;
  letter-spacing: 0.02em; color: var(--gold);
  text-shadow: 0 2px 12px rgba(201,168,76,.4);
}
.decade-era {
  font-family: var(--f-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sub);
  text-align: center; padding: 0 8px;
}
.decade-card:hover .decade-era, .decade-card.focused .decade-era { color: var(--text); }

/* ─── Collection / Franchise Cards ──────────────────────── */
.franchise-card {
  height: 108px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.06);
  background: var(--bg3);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; padding: 10px;
  transition: transform 0.22s cubic-bezier(.22,1,.36,1),
              box-shadow 0.22s ease, border-color 0.22s ease, background 0.2s;
}
.franchise-card:hover, .franchise-card.focused {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--gold-border);
  background: var(--bg4);
  box-shadow: 0 12px 36px rgba(0,0,0,.7), 0 0 0 1px var(--gold-border);
}
.franchise-icon { font-size: 28px; line-height: 1; }
.franchise-name {
  font-family: var(--f-display); font-size: 8px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
  text-align: center; line-height: 1.4; transition: color 0.2s;
}
.franchise-card:hover .franchise-name, .franchise-card.focused .franchise-name { color: var(--gold); }
.franchise-count {
  font-family: var(--f-ui); font-size: 9px; color: var(--text-sub); font-weight: 600;
}

/* ─── Genre Browser Filter Bar ────────────────────────────── */
#genre-filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 52px 16px;
}
.genre-sort-btn {
  padding: 6px 16px; border-radius: 20px;
  font-family: var(--f-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--bg3); border: 1px solid rgba(255,255,255,.08); color: var(--text-sub);
  white-space: nowrap; transition: all 0.2s;
}
.genre-sort-btn.active { background: var(--gold-dim); border-color: var(--gold-border); color: var(--gold); }
.genre-sort-btn:hover, .genre-sort-btn.focused { color: var(--text); border-color: rgba(255,255,255,.2); }

/* ═══════════════════════════════════════════════════════════
   PERF MODE — NEW ELEMENTS
═══════════════════════════════════════════════════════════ */
body.perf-mode #home-tab-bar {
  background: #1a1a1a !important; border-bottom-color: #2a2a2a !important; top: 52px !important;
}
body.perf-mode .home-tab {
  background: #1e1e1e !important; border-color: #333 !important;
  color: #aaa !important; font-size: 11px !important; padding: 6px 12px !important;
}
body.perf-mode .home-tab.active, body.perf-mode .home-tab.focused {
  background: #252525 !important; border-color: #c9a84c !important; color: #c9a84c !important;
}
body.perf-mode .genre-grid-card,
body.perf-mode .world-card,
body.perf-mode .mood-card,
body.perf-mode .decade-card,
body.perf-mode .franchise-card {
  background: #161616 !important; border-color: #2a2a2a !important; transform: none !important;
}
body.perf-mode .genre-grid-card.focused, body.perf-mode .world-card.focused,
body.perf-mode .mood-card.focused, body.perf-mode .decade-card.focused,
body.perf-mode .franchise-card.focused {
  border-color: #c9a84c !important; transform: none !important;
}
body.perf-mode .decade-year { color: #c9a84c !important; text-shadow: none !important; }
body.perf-mode .genre-sort-btn {
  background: #1e1e1e !important; border-color: #333 !important; color: #aaa !important;
}
body.perf-mode .genre-sort-btn.active, body.perf-mode .genre-sort-btn.focused {
  background: #252525 !important; border-color: #c9a84c !important; color: #c9a84c !important;
}