:root {
  /* Disney+ Signature Obsidian / Midnight Color System */
  --bg: #090b13;
  --bg-darker: #040714;
  --bg-gradient: radial-gradient(circle at 50% -20%, #171d38 0%, #0d1222 45%, #090b13 80%, #040714 100%);
  --surface: #121626;
  --surface-2: #182035;
  --surface-3: #222b46;
  --surface-card: #151a2c;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #f9f9f9;
  --text-bright: #ffffff;
  --muted: #a0a8be;
  --dim: #64748b;

  /* Disney+ Signature Electric Blues & Cyans */
  --disney-blue: #0063e5;
  --disney-blue-hover: #0483ee;
  --disney-cyan: #00d2ff;
  --disney-glow: rgba(0, 99, 229, 0.55);
  --disney-cyan-glow: rgba(0, 210, 255, 0.4);
  --disney-card-border: rgba(249, 249, 249, 0.9);
  --disney-gold: #ffc83b;

  --accent: #0063e5;
  --accent-hover: #0483ee;
  --accent-glow: rgba(0, 99, 229, 0.45);
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #10b981;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition: 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-smooth: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Viewport height that survives mobile browser chrome */
  --vh: 100vh;
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
}

@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

html.measured-vh { --vh: var(--app-h, 100vh); }

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

button, a, select, input, label, .btn, .cat-pill, .season-pill,
.card, .episode-row-card, .touch-zone, .sheet-close, .hub-card, .rail-btn {
  touch-action: manipulation;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: var(--vh);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overscroll-behavior-y: none;
}

a { color: inherit; text-decoration: none; }

/* --- Base Buttons & Inputs --- */
button, select, input {
  font-family: inherit;
  font-size: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  min-height: 40px;
  cursor: pointer;
  transition: all var(--transition);
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
}
.btn:hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
  color: #fff;
}
.btn:active {
  transform: scale(0.98);
}
.btn.primary {
  background: var(--disney-blue);
  border-color: var(--disney-blue);
  color: #fff;
  box-shadow: 0 4px 16px var(--disney-glow);
}
.btn.primary:hover {
  background: var(--disney-blue-hover);
  border-color: var(--disney-blue-hover);
  box-shadow: 0 6px 22px var(--disney-glow);
}

/* Disney+ White Action Button (Play) */
.btn-white {
  background: #f9f9f9;
  color: #090b13;
  border: 1px solid #f9f9f9;
  border-radius: var(--radius-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 24px;
  min-height: 44px;
  transition: all var(--transition);
}
.btn-white:hover {
  background: #ffffff;
  color: #040714;
  transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35);
}

/* Disney+ Glass Action Button */
.btn-glass {
  background: rgba(9, 11, 19, 0.65);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-xs);
  font-weight: 600;
  padding: 10px 20px;
  min-height: 44px;
  transition: all var(--transition);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.04);
  color: #ffffff;
}

.btn-sm {
  padding: 6px 12px;
  min-height: 32px;
  font-size: 13px;
  border-radius: 6px;
}
.icon-btn {
  padding: 8px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
}
.pill-btn {
  border-radius: 999px;
  padding: 6px 14px;
}

.indicator-badge {
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--muted);
}
.pill-btn:hover .indicator-badge {
  background: rgba(0, 210, 255, 0.2);
  color: var(--disney-cyan);
}

.input-select {
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  outline: none;
  min-height: 44px;
  transition: border-color var(--transition);
}
.input-select:focus {
  border-color: var(--disney-blue);
  box-shadow: 0 0 0 3px var(--disney-glow);
}

/* ==========================================================================
   DISNEY+ TOP HEADER & NAVIGATION
   ========================================================================== */
header.app-header, header.player-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
  padding: 0 clamp(16px, 3.5vw, 48px);
  background: rgba(9, 11, 19, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s ease;
}

.header-left {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.header-brand-logo {
  height: 38px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 99, 229, 0.35));
  transition: transform var(--transition);
}
.header-brand:hover .header-brand-logo {
  transform: scale(1.03);
}

/* Disney+ Navigation Menu */
.disney-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.disney-nav-item {
  position: relative;
}
.disney-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: color var(--transition);
  user-select: none;
}
.disney-nav-link svg {
  width: 17px;
  height: 17px;
  opacity: 0.85;
  transition: transform var(--transition), opacity var(--transition);
}
.disney-nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 2.5px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.disney-nav-link:hover {
  color: #ffffff;
}
.disney-nav-link:hover svg {
  opacity: 1;
  transform: scale(1.1);
}
.disney-nav-link:hover::after,
.disney-nav-link.active::after {
  transform: scaleX(1);
}
.disney-nav-link.active {
  color: #ffffff;
}
.disney-nav-link.active svg {
  color: var(--disney-cyan);
  opacity: 1;
}

/* Header Right Utilities */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-search {
  position: relative;
  width: 220px;
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.header-search:focus-within {
  width: 280px;
}
.header-search input {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 16px 8px 38px;
  color: #ffffff;
  outline: none;
  min-height: 38px;
  font-size: 13.5px;
  transition: all var(--transition);
}
.header-search input::placeholder {
  color: var(--dim);
}
.header-search input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--disney-blue);
  box-shadow: 0 0 16px var(--disney-glow);
}
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  transition: color var(--transition);
}
.header-search:focus-within .search-icon {
  color: var(--disney-cyan);
}
.search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  display: none;
  font-size: 16px;
}
.search-clear:hover { color: #ffffff; }

.header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid var(--disney-blue);
  box-shadow: 0 0 10px var(--disney-glow);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.header-avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 0 18px var(--disney-glow);
}

/* --- Player Header --- */
.player-header {
  justify-content: space-between;
}
.nav-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  transition: all var(--transition);
}
.nav-back-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--line-strong);
  color: #fff;
}
.player-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
  text-align: center;
}
.player-header-meta {
  font-size: 12px;
  color: var(--muted);
}

/* ==========================================================================
   DISNEY+ MAIN LAYOUT
   ========================================================================== */
main {
  max-width: 1540px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3.5vw, 48px) 80px;
}

/* ==========================================================================
   DISNEY+ HERO BILLBOARD SHOWCASE (CAROUSEL)
   ========================================================================== */
.disney-hero-wrap {
  position: relative;
  margin-bottom: 36px;
}
.disney-hero {
  position: relative;
  width: 100%;
  height: clamp(380px, 50vh, 540px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.8);
  background: #0f121e;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.75s ease;
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Disney+ Vignette Scrims */
.hero-scrim-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #090b13 18%, rgba(9, 11, 19, 0.88) 42%, rgba(9, 11, 19, 0.45) 70%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.hero-scrim-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #090b13 0%, rgba(9, 11, 19, 0.75) 25%, transparent 60%);
  z-index: 2;
  pointer-events: none;
}
.hero-scrim-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(9, 11, 19, 0.6), transparent);
  z-index: 2;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 4;
  pointer-events: auto;
  padding: clamp(24px, 4.5vw, 54px);
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--disney-cyan);
  background: rgba(0, 210, 255, 0.12);
  border: 1px solid rgba(0, 210, 255, 0.35);
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.hero-rating {
  color: var(--disney-gold);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 200, 59, 0.12);
  border: 1px solid rgba(255, 200, 59, 0.3);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}
.hero-quality-badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}
.hero-overview {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #c9d2e3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 600px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

/* Hero Carousel Arrow Controls */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(9, 11, 19, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--transition);
  opacity: 0;
}
.disney-hero-wrap:hover .hero-arrow {
  opacity: 1;
}
.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }

/* Hero Indicators / Dots */
.hero-dots {
  position: absolute;
  bottom: 20px;
  right: clamp(20px, 4vw, 50px);
  z-index: 5;
  display: flex;
  gap: 8px;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.3s ease;
}
.hero-dot.active {
  width: 24px;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   DISNEY+ BRAND HUB TILES ("THE BIG 5" HALLMARK)
   ========================================================================== */
.disney-hubs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.6vw, 20px);
  margin-bottom: 40px;
}
.hub-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #1f253a 0%, #131726 100%);
  border: 3px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: transform var(--transition-card), border-color var(--transition-card), box-shadow var(--transition-card);
}
.hub-card:hover {
  transform: scale(1.05);
  border-color: var(--disney-card-border);
  box-shadow: 0 20px 36px -10px rgba(0, 0, 0, 0.9), 0 0 24px var(--disney-glow);
}
.hub-card:active {
  transform: scale(1.02);
}

.hub-icon {
  width: 34px;
  height: 34px;
  color: #ffffff;
  transition: transform var(--transition);
}
.hub-card:hover .hub-icon {
  transform: scale(1.12);
  color: var(--disney-cyan);
}
.hub-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
}
.hub-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(-25deg);
  transition: none;
}
.hub-card:hover::after {
  animation: hubSheen 0.8s ease;
}
@keyframes hubSheen {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ==========================================================================
   DISNEY+ CONTENT RAILS (HORIZONTAL CAROUSELS)
   ========================================================================== */
.disney-rail {
  margin-bottom: 40px;
  position: relative;
}
.rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}
.rail-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #ffffff;
}
.rail-count-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 8px;
}
.rail-view-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--disney-cyan);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition);
}
.rail-view-all:hover {
  color: #ffffff;
  text-decoration: underline;
}

.rail-container {
  position: relative;
}
.rail-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 12px 6px 24px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail-track::-webkit-scrollbar {
  display: none;
}

.rail-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 80px;
  background: rgba(9, 11, 19, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--transition);
  opacity: 0;
  pointer-events: none;
}
.rail-container:hover .rail-btn {
  opacity: 1;
  pointer-events: auto;
}
.rail-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: #ffffff;
}
.rail-btn.prev { left: -6px; }
.rail-btn.next { right: -6px; }

/* Rail items have fixed flex width */
.rail-track .card {
  width: clamp(145px, 15vw, 195px);
  flex-shrink: 0;
}

/* ==========================================================================
   DISNEY+ POSTER CARDS & GRID
   ========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 22px 18px;
}

.card {
  position: relative;
  background: var(--surface-card);
  border: 3.5px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.6);
  transition: transform var(--transition-card), border-color var(--transition-card), box-shadow var(--transition-card);
  cursor: pointer;
  user-select: none;
}
.card:hover {
  transform: scale(1.06);
  border-color: var(--disney-card-border);
  box-shadow: 0 20px 42px -6px rgba(0, 0, 0, 0.88), 0 0 24px var(--disney-glow);
  z-index: 10;
}
.card:active {
  transform: scale(1.02);
}

.card .thumb-wrap {
  position: relative;
  aspect-ratio: 2 / 3;
  background: linear-gradient(145deg, #182033, #0f1322);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.card .thumb {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.4s ease;
}
.card:hover .thumb {
  transform: scale(1.03);
}

.thumb-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--dim);
}
.thumb-placeholder svg {
  opacity: 0.6;
}

.card-badges {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  z-index: 2;
}
.badge {
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(9, 11, 19, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.badge.badge-prep {
  background: rgba(245, 158, 11, 0.85);
  color: #000;
  border: none;
}
.badge.badge-sub {
  background: rgba(0, 99, 229, 0.85);
}
.badge.badge-audio {
  background: rgba(16, 185, 129, 0.85);
}

.progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4.5px;
  background: rgba(0, 0, 0, 0.65);
  z-index: 3;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--disney-blue), var(--disney-cyan));
  box-shadow: 0 0 8px var(--disney-cyan);
}

.card .meta {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #111524;
}
.card .meta b {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.card .meta .meta-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.card.unprepped .thumb { opacity: 0.6; }

/* Filter & Category Toolbar */
.toolbar-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.category-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }

.cat-pill {
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  user-select: none;
}
.cat-pill:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.cat-pill.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #090b13;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25);
}

.sort-select {
  background: var(--surface-2);
  color: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  min-height: 38px;
  outline: none;
  font-weight: 500;
}
.sort-select:focus {
  border-color: var(--disney-blue);
}

/* Category Grid Header */
.category-view-header {
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.category-view-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.category-view-count {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--muted);
  gap: 16px;
}
.empty-state svg {
  color: var(--dim);
  width: 56px;
  height: 56px;
}
.empty-state p {
  font-size: 16px;
  margin: 0;
  max-width: 400px;
}


/* --- Player Stage & Video --- */
body.watch-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #000;
  overflow-x: hidden;
}

body.watch-page .player-header {
  position: sticky;
  top: 0;
  z-index: 40;
  flex-shrink: 0;
  padding: 12px 20px;
  background: rgba(9, 11, 14, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.player-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 10px 20px 20px;
  box-sizing: border-box;
}

.player-theater {
  width: 100%;
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0; /* Fully centers player on screen */
  position: relative;
}

.stage {
  width: 100%;
  position: relative;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage video {
  width: 100%;
  /* A long press on a <video> in iOS Safari opens a save/share sheet over the
     player; on Android it selects. Neither is wanted mid-film. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  max-height: calc(var(--vh) - 170px);
  min-height: 240px;
  display: block;
  outline: none;
  object-fit: contain;
  margin: auto;
}

/* Fullscreen Floating Header */
.fullscreen-top-bar {
  display: none;
}
.player-theater:fullscreen .fullscreen-top-bar,
.player-theater:-webkit-full-screen .fullscreen-top-bar,
.player-theater.is-fullscreen .fullscreen-top-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: calc(16px + var(--sa-t)) calc(24px + var(--sa-r)) 36px calc(24px + var(--sa-l));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
  pointer-events: auto;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.fullscreen-title {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}
.fullscreen-spacer {
  min-width: 70px;
  width: auto;
  gap: 8px;
}

/* Player Controls Wrapper */
.player-controls-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fullscreen Theater & Complete Viewport Centering */
:fullscreen,
::backdrop {
  background-color: #000;
}

.player-theater:fullscreen,
.player-theater:-webkit-full-screen,
.player-theater.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: var(--vh) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  border-radius: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.player-theater:fullscreen .stage,
.player-theater:-webkit-full-screen .stage,
.player-theater.is-fullscreen .stage {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: var(--vh) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  flex: 1 1 100% !important;
}

.player-theater:fullscreen .stage video,
.player-theater:-webkit-full-screen .stage video,
.player-theater.is-fullscreen .stage video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: var(--vh) !important;
  object-fit: contain !important;
  margin: auto !important;
  border-radius: 0 !important;
}

.player-theater:fullscreen .player-controls-wrap,
.player-theater:-webkit-full-screen .player-controls-wrap,
.player-theater.is-fullscreen .player-controls-wrap {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 60 !important;
  padding: 40px calc(24px + var(--sa-r)) calc(16px + var(--sa-b)) calc(24px + var(--sa-l)) !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.2) 80%, transparent 100%) !important;
  pointer-events: auto;
  box-sizing: border-box;
}

.player-theater:fullscreen .sheet-backdrop,
.player-theater:-webkit-full-screen .sheet-backdrop,
.player-theater.is-fullscreen .sheet-backdrop {
  z-index: 200 !important;
}

/* Fallback if stage element itself is made fullscreen */
.stage:fullscreen,
.stage:-webkit-full-screen {
  width: 100vw !important;
  height: var(--vh) !important;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
}
.stage:fullscreen video,
.stage:-webkit-full-screen video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: auto !important;
}

/* JASSUB Subtitle Overlay: Allow JASSUB to position and size its canvas naturally */
.stage .JASSUB {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 5;
  overflow: hidden;
}
.stage .JASSUB canvas {
  pointer-events: none !important;
  display: block !important;
}

/* Subtitle Sync Loading Screen Overlay */
.stage-loading {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(9, 11, 14, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 340px;
}
.loading-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
.loading-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.loading-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.loading-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.loading-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #6366f1);
  border-radius: 999px;
  transition: width 0.15s ease-out;
}
.loading-percent {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.loading-skip-btn {
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 12px;
}
.loading-skip-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text);
}

/* Center Big Play Button */
.center-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  background: rgba(59, 130, 246, 0.9);
  border: none;
  border-radius: 50%;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.45);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
.center-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--accent-hover);
}
.center-play-btn:active {
  transform: translate(-50%, -50%) scale(0.95);
}
.center-play-btn svg {
  margin-left: 4px;
}

/* Center Play/Pause Feedback Pulse */
.center-feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 25;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.center-feedback.pulse {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.15);
}

/* Touch & Click Gesture Zones (Full stage coverage) */
.touch-zones {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  z-index: 10;
}
.touch-zone {
  flex: 1;
  position: relative;
  pointer-events: auto;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.seek-ripple {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 10px 18px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.seek-ripple.active {
  opacity: 1;
  transform: scale(1.1);
}

/* --- Interactive Timeline Scrubber --- */
.timeline-container {
  width: 100%;
  position: relative;
  padding: 10px 0 6px;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.timeline-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  position: relative;
  overflow: visible;
  transition: height 0.15s ease;
}
.timeline-container:hover .timeline-track,
.timeline-container.scrubbing .timeline-track {
  height: 8px;
}
.timeline-buffered {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  transition: width 0.2s ease;
  pointer-events: none;
}
.timeline-played {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #a855f7);
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}
.timeline-handle {
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.9);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.timeline-container:hover .timeline-handle,
.timeline-container.scrubbing .timeline-handle {
  transform: translateY(-50%) scale(1);
}
.timeline-tooltip {
  position: absolute;
  bottom: 24px;
  left: 0;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 30;
}
.timeline-container:hover .timeline-tooltip,
.timeline-container.scrubbing .timeline-tooltip {
  opacity: 1;
}

/* Volume Control & Slider */
.volume-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.vol-slider-box {
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  display: flex;
  align-items: center;
}
.volume-wrap:hover .vol-slider-box,
.volume-wrap:focus-within .vol-slider-box {
  width: 84px;
  opacity: 1;
  margin-left: 4px;
}
.vol-range {
  width: 76px;
  height: 5px;
  accent-color: var(--accent);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

/* Idle Auto-Hide for Cinema & Fullscreen Experience */
.player-theater.is-idle {
  cursor: none !important;
}
.player-theater.is-idle * {
  cursor: none !important;
}
.player-theater.is-idle .touch-zone {
  cursor: none !important;
}
.player-theater.is-idle .player-controls-wrap {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(16px) !important;
}
.player-theater.is-idle .fullscreen-top-bar {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-16px) !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.time-display {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
  white-space: nowrap;
}

/* Resume Prompt */
.resume-prompt {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(19, 23, 29, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 20;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  animation: slideUp 0.25s ease;
}
.resume-text {
  font-size: 13px;
  color: var(--text);
}
.resume-actions {
  display: flex;
  gap: 8px;
}

@keyframes slideUp {
  from { opacity: 0; transform: translate(-50%, 15px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Player Quick Controls Bar --- */
.player-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 6px;
  flex-wrap: wrap;
}
.player-bar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.player-bar-spacer {
  flex: 1;
}

.btn-select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  min-height: 40px;
  cursor: pointer;
  outline: none;
  font-weight: 500;
}
.btn-select:hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
}

/* Status Notifications */
.status-box {
  min-height: 24px;
  padding: 6px 2px;
}
.status {
  font-size: 13px;
  color: var(--muted);
}
.status.error { color: var(--danger); font-weight: 500; }
.status.success { color: var(--success); }

/* --- Modals and Bottom Sheets (Subtitles & Audio) --- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sheet-backdrop.active {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.sheet-modal {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: modalScale 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.sheet-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.sheet-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.sheet-close:hover { color: var(--text); }

.sheet-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: calc(var(--vh) * 0.85 - 70px);
  overflow-y: auto;
  /* Without this a flick past the end of the sheet scrolls the library behind
     it, which on iOS also dismisses the momentum mid-gesture. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.file-btn {
  width: 100%;
  justify-content: center;
  border-style: dashed;
  padding: 12px;
}

.stepper-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.step-btn {
  flex: 1;
  min-height: 36px;
  padding: 6px 8px;
  font-size: 13px;
  background: var(--surface-2);
}
.reset-btn {
  flex: 0.8;
  color: var(--dim);
}
.stepper-display {
  padding: 6px 12px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  min-width: 60px;
  text-align: center;
}

.slider-input {
  width: 100%;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.slider-badge {
  background: var(--surface-3);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  min-width: 55px;
  text-align: center;
}

.preset-pills {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.pill-sm {
  flex: 1;
  padding: 6px 4px;
  font-size: 11px;
  min-height: 30px;
  border-radius: 6px;
}

.checkbox-group {
  margin-top: 4px;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text) !important;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* --- Login Form --- */
.login-wrap {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.login-header {
  text-align: center;
}
.login-header h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}
.login-header p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.login-input-wrap {
  position: relative;
}
.login-input-wrap input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  outline: none;
  min-height: 48px;
  transition: all var(--transition);
}
.login-input-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--dim);
}
.empty-state svg {
  margin-bottom: 12px;
  opacity: 0.5;
}
.empty-state p {
  max-width: 400px;
  margin: 0 auto;
  font-size: 14px;
  color: var(--muted);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes sheetSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ==========================================================================
   DISNEY+ BRANDING, BADGES & RATINGS
   ========================================================================== */
.brand-logo-img {
  display: block;
  border-radius: var(--radius-xs);
  filter: drop-shadow(0 2px 10px rgba(0, 99, 229, 0.4));
}

.badge-series {
  background: linear-gradient(135deg, #0063e5, #00d2ff);
  color: #ffffff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
}
.badge-folder {
  background: rgba(18, 22, 38, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
}
.badge-rating {
  background: rgba(255, 200, 59, 0.15);
  color: #ffc83b;
  border: 1px solid rgba(255, 200, 59, 0.45);
  font-weight: 800;
  display: none;
}
.badge-season-num {
  background: rgba(0, 210, 255, 0.15);
  color: #00d2ff;
  border: 1px solid rgba(0, 210, 255, 0.4);
  font-weight: 700;
}

/* --- Shimmer / Loading for Posters --- */
.thumb-loading {
  background: linear-gradient(90deg, #131726 0%, #1f273d 50%, #131726 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Series Card with Disney+ Flare --- */
.series-card {
  cursor: pointer;
}
.series-folder-tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 5px;
  background: linear-gradient(90deg, var(--disney-blue), var(--disney-cyan));
  border-radius: 0 0 4px 0;
  box-shadow: 0 0 8px var(--disney-cyan);
}

/* ==========================================================================
   DISNEY+ SERIES DETAIL VIEW
   ========================================================================== */
.series-detail-view {
  animation: fadeIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.series-nav-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.series-breadcrumb-sep {
  color: var(--dim);
  font-size: 16px;
}
.series-breadcrumb-cur {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
}

/* Disney+ Series Hero Banner */
.series-hero {
  display: flex;
  gap: 40px;
  background: linear-gradient(135deg, rgba(23, 29, 56, 0.7), rgba(12, 16, 32, 0.9));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 44px);
  margin-bottom: 36px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.8);
}
.series-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--disney-blue), var(--disney-cyan), transparent);
  box-shadow: 0 0 12px var(--disney-cyan);
}
.series-hero-poster-wrap {
  width: 220px;
  flex-shrink: 0;
}
.series-hero-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.series-hero-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.series-hero-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.series-hero-title {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff;
  line-height: 1.15;
}
.series-hero-genres {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.genre-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 12px;
  border-radius: 999px;
}
.series-hero-overview {
  margin: 0 0 24px;
  color: #c9d2e3;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 820px;
}
.series-hero-actions {
  display: flex;
  gap: 14px;
}
.series-play-btn {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-xs);
  background: #f9f9f9;
  color: #090b13;
  border: 1px solid #f9f9f9;
  box-shadow: 0 6px 24px rgba(255, 255, 255, 0.3);
  transition: all var(--transition);
}
.series-play-btn:hover {
  background: #ffffff;
  transform: scale(1.04);
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.45);
}

/* Disney+ Season Navigator Tabs */
.season-section {
  margin-top: 24px;
}
.season-tabs-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  width: 100%;
}
.season-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
.season-section-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
}
.season-scroll-hint {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--disney-cyan);
  background: rgba(0, 210, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  user-select: none;
  animation: swipeHintPulse 2.5s infinite ease-in-out;
}
.season-scroll-hint svg {
  animation: swipeHintArrow 1.5s infinite ease-in-out;
}
@keyframes swipeHintPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@keyframes swipeHintArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* Season Pills Horizontal Scroll Wrapper with Edge Fades */
.season-pills-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.season-pills-container::before,
.season-pills-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38px;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.25s ease;
  opacity: 0;
}
.season-pills-container::before {
  left: 0;
  background: linear-gradient(to right, #090b13 25%, transparent 100%);
}
.season-pills-container::after {
  right: 0;
  background: linear-gradient(to left, #090b13 25%, transparent 100%);
}
.season-pills-container.has-overflow-left::before {
  opacity: 1;
}
.season-pills-container.has-overflow-right::after {
  opacity: 1;
}

.season-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(18, 24, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  transition: all var(--transition);
}
.season-nav-arrow:hover {
  background: #0063e5;
  border-color: #00d2ff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.6);
}
.season-nav-left {
  left: -6px;
}
.season-nav-right {
  right: -6px;
}

.season-folder-pills {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 4px 16px 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  width: 100%;
}
.season-folder-pills::-webkit-scrollbar {
  height: 4px;
}
.season-folder-pills::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}
.season-folder-pills::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}
.season-folder-pills::-webkit-scrollbar-thumb:hover {
  background: var(--disney-cyan);
}
.season-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
}
.season-pill:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}
.season-pill.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #090b13;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25);
}
.season-pill-count {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 7px;
  border-radius: 999px;
  color: inherit;
}
.season-pill.active .season-pill-count {
  background: rgba(9, 11, 19, 0.15);
  color: #090b13;
}

/* Disney+ Episode Cards Grid */
.episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.episode-row-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-card);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 14px 18px;
  transition: all var(--transition);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.episode-row-card:hover {
  background: var(--surface-2);
  border-color: var(--disney-card-border);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 16px var(--disney-glow);
}
.episode-row-card:active {
  transform: translateY(0);
}
.ep-num-badge {
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.episode-row-card:hover .ep-num-badge {
  background: var(--disney-blue);
  color: #ffffff;
  border-color: var(--disney-blue);
  box-shadow: 0 0 12px var(--disney-glow);
}
.ep-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ep-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ep-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  text-transform: uppercase;
}
.ep-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
}
.ep-play-action {
  flex-shrink: 0;
}
.ep-play-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--line);
  color: #ffffff;
  transition: all var(--transition);
}
.episode-row-card:hover .ep-play-btn {
  background: #ffffff;
  color: #090b13;
  transform: scale(1.1);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   DISNEY+ MOBILE BOTTOM NAVIGATION BAR (FIXED)
   ========================================================================== */
.disney-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .disney-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + var(--sa-b));
    padding-bottom: var(--sa-b);
    background: rgba(9, 11, 19, 0.95);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-top: 1px solid var(--line);
    z-index: 100;
  }
  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--transition);
    user-select: none;
  }
  .bottom-nav-item svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition);
  }
  .bottom-nav-item.active {
    color: #ffffff;
  }
  .bottom-nav-item.active svg {
    color: var(--disney-cyan);
    transform: scale(1.1);
    filter: drop-shadow(0 0 6px var(--disney-cyan-glow));
  }
  .bottom-nav-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--disney-cyan);
    margin-top: 1px;
    box-shadow: 0 0 6px var(--disney-cyan);
    display: none;
  }
  .bottom-nav-item.active .bottom-nav-dot {
    display: block;
  }
}

/* ==========================================================================
   RESPONSIVE OVERRIDES FOR MOBILE & TABLET
   ========================================================================== */
@media (max-width: 1024px) {
  .disney-hubs {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  /* Hide desktop menu on mobile, bottom nav takes over */
  .disney-nav {
    display: none;
  }
  .header-avatar {
    display: none; /* Frees up header space on iPhone screens */
  }
  .header-left {
    min-width: 0;
    gap: 8px;
  }
  .header-brand-logo {
    height: 28px;
    max-width: 105px;
  }
  .header-right {
    gap: 6px;
    flex-shrink: 0;
  }
  .header-search {
    width: 120px;
  }
  .header-search input {
    font-size: 13px;
    padding: 6px 12px 6px 32px;
    min-height: 34px;
  }
  .header-search .search-icon {
    left: 9px;
  }
  .header-search:focus-within {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95);
  }
  header.app-header {
    height: 56px;
    padding: 0 max(12px, var(--sa-l));
  }

  main {
    padding: 12px max(12px, var(--sa-l)) calc(88px + var(--sa-b)) max(12px, var(--sa-r)) !important;
  }

  .disney-hero-wrap {
    margin-bottom: 24px;
  }
  .disney-hero {
    height: auto;
    min-height: 350px;
  }
  .hero-content {
    padding: 16px 14px 20px;
    gap: 8px;
  }
  .hero-title {
    font-size: 21px;
    line-height: 1.2;
  }
  .hero-meta {
    font-size: 11.5px;
    gap: 6px;
  }
  .hero-overview {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 12.5px;
    line-height: 1.45;
  }
  .hero-actions {
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .hero-actions .btn {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 12.5px;
  }
  .hero-arrow {
    display: none; /* Swipe on mobile */
  }

  .disney-hubs {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
  }
  .hub-card {
    padding: 10px;
    aspect-ratio: 16 / 8.5;
  }
  .hub-icon {
    width: 26px;
    height: 26px;
  }
  .hub-label {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .disney-rail {
    margin-bottom: 28px;
  }
  .rail-title {
    font-size: 17px;
  }
  .rail-btn {
    display: none !important;
  }
  .rail-track {
    padding: 8px 2px 14px;
    gap: 12px;
  }
  .rail-track .card {
    width: 130px;
  }

  /* 2-column Netflix/Disney-style grid on mobile */
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .card .meta {
    padding: 8px 10px;
  }
  .card .meta b {
    font-size: 12px;
  }
  .card .meta .meta-sub {
    font-size: 10.5px;
  }

  .series-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 14px;
    gap: 16px;
  }
  .series-hero-poster-wrap {
    width: 140px;
  }
  .series-hero-title {
    font-size: 22px;
  }
  .series-hero-badges, .series-hero-genres, .series-hero-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
  .series-hero-actions {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }
  .series-play-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13.5px;
    text-align: center;
  }
  .series-hero-actions .btn-glass {
    width: 100%;
  }

  .episode-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .episode-row-card {
    padding: 12px 14px;
    gap: 12px;
  }
  .ep-num-badge {
    width: 38px;
    height: 38px;
    font-size: 13.5px;
  }

  .stage {
    border-radius: var(--radius-sm);
  }
  .stage video {
    max-height: 60vh;
  }

  .timeline-container {
    padding: 6px 0;
  }
  .player-bar {
    padding: 6px 0 0;
    gap: 6px;
  }
  .vol-slider-box {
    display: none;
  }
  .time-display {
    font-size: 11px;
    margin-left: 2px;
  }
  .btn.pill-btn span:first-of-type {
    display: none;
  }

  .sheet-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .sheet-modal {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    animation: sheetSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sheet-header {
    padding: 18px 20px 14px;
  }
  .sheet-body {
    padding: 16px 20px 36px;
    max-height: 80vh;
  }

  .stepper-row {
    gap: 4px;
  }
  .step-btn {
    padding: 8px 4px;
    font-size: 12px;
  }
}

/* ==========================================================================
   MOBILE LAYER
   Everything below targets phones, tablets and the in-app browsers that
   Instagram, Facebook and TikTok open links in. It is appended last so it
   wins over the desktop rules above without needing !important.
   ========================================================================== */

/* --- Hover is a lie on touchscreens -------------------------------------
   iOS fires a synthetic hover on tap and leaves it applied until you tap
   something else, so a card stays lifted and a button stays highlighted long
   after the finger is gone. Every hover affordance is reverted where the
   primary pointer is coarse, and replaced by an :active press where the
   feedback is worth keeping. */
@media (hover: none), (pointer: coarse) {
  .card:hover {
    transform: none;
    border-color: var(--line);
    box-shadow: none;
  }
  .card:hover .thumb { transform: none; }
  .card:active {
    transform: scale(0.97);
    border-color: var(--line-strong);
  }

  .btn:hover,
  .nav-back-btn:hover,
  .btn-select:hover,
  .season-pill:hover,
  .cat-pill:hover {
    background: var(--surface-2);
    border-color: var(--line);
    color: inherit;
  }
  .btn.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .cat-pill:hover { background: var(--surface); color: var(--muted); }
  .cat-pill.active { background: var(--text); color: #000; }
  .season-pill:hover { background: var(--surface); color: var(--muted); }
  .season-pill.active { background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(139,92,246,.2)); color: #fff; }

  .episode-row-card:hover {
    background: var(--surface);
    border-color: var(--line);
    transform: none;
    box-shadow: none;
  }
  .episode-row-card:active { background: var(--surface-2); transform: scale(0.99); }
  .episode-row-card:hover .ep-num-badge {
    background: var(--surface-2);
    color: var(--dim);
    border-color: var(--line);
  }

  .center-play-btn:hover { transform: translate(-50%, -50%); background: rgba(59,130,246,.9); }

  /* The volume slider slides out on hover, which on touch means it opens on
     the tap that was meant to mute and never closes. Phones have hardware
     volume keys; iOS ignores video.volume entirely. */
  .volume-wrap:hover .vol-slider-box,
  .volume-wrap:focus-within .vol-slider-box { width: 0; opacity: 0; margin-left: 0; }

  /* The scrub handle and tooltip are driven by .scrubbing instead, so they
     appear while a finger is down rather than on a phantom hover. */
  .timeline-container:hover .timeline-track { height: 6px; }
  .timeline-container:hover .timeline-handle { transform: translateY(-50%) scale(0); }
  .timeline-container:hover .timeline-tooltip { opacity: 0; }
  .timeline-container.scrubbing .timeline-track { height: 10px; }
  .timeline-container.scrubbing .timeline-handle { transform: translateY(-50%) scale(1); }
  .timeline-container.scrubbing .timeline-tooltip { opacity: 1; }
}

/* --- Scrubbing must not scroll the page ---------------------------------
   `touch-action: none` is what stops a horizontal drag on the timeline being
   claimed by the page's vertical scroller. Without it the first few pixels of
   every scrub are eaten and the gesture regularly turns into a page scroll. */
.timeline-container {
  touch-action: none;
}
/* A 6px bar is well under the ~44px a fingertip needs. The padding widens the
   hit area without moving the bar. */
@media (pointer: coarse) {
  .timeline-container { padding: 14px 0 10px; }
  .timeline-track { height: 8px; }
  .timeline-handle { width: 18px; height: 18px; right: -9px; }
}

/* Taps on the video must not zoom, select or scroll. */
.touch-zones, .touch-zone, .stage {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* --- iOS text-input zoom ------------------------------------------------
   Safari zooms the viewport whenever a focused input's font-size is under
   16px, and it does not zoom back out. Every text field the app owns is 14px,
   so the search box and the password field both trigger it. */
@media (pointer: coarse) {
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  textarea,
  select,
  .input-select,
  .header-search input,
  .login-input-wrap input,
  .sort-select,
  .btn-select {
    font-size: 16px;
  }
}

/* --- Touch target sizes -------------------------------------------------
   44x44 CSS px is the floor for a reliable tap. */
@media (pointer: coarse) {
  .icon-btn { min-width: 44px; min-height: 44px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .sheet-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .step-btn { min-height: 44px; }
  .pill-sm { min-height: 38px; font-size: 12px; }
  .checkbox-label input[type="checkbox"] { width: 22px; height: 22px; }
  .search-clear { padding: 10px; }
  .ep-play-btn { width: 44px; height: 44px; min-width: 44px; }
}

/* --- Compositing cost during playback -----------------------------------
   backdrop-filter is the single most expensive thing on this page on a phone:
   every blurred layer is recomposited each frame while video is decoding, and
   on older iPhones it visibly drops frames. The blurs are kept on the sheets,
   which only appear while paused-ish, and dropped from anything that overlays
   moving video. */
@media (pointer: coarse) {
  .badge,
  .seek-ripple,
  .center-feedback,
  .resume-prompt,
  .stage-loading {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .badge { background: rgba(0, 0, 0, 0.8); }
  .seek-ripple { background: rgba(0, 0, 0, 0.85); }
  .center-feedback { background: rgba(0, 0, 0, 0.82); }
  .resume-prompt { background: rgba(19, 23, 29, 0.98); }
  .stage-loading { background: rgba(9, 11, 14, 0.97); }
  .series-hero { backdrop-filter: none; }
  header.app-header, header.player-header {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Safe areas ---------------------------------------------------------
   Notched phones in landscape put the sensor housing over the left or right
   edge, and the home indicator over the bottom. */
header.app-header, header.player-header {
  padding-top: calc(12px + var(--sa-t));
  padding-left: calc(20px + var(--sa-l));
  padding-right: calc(20px + var(--sa-r));
}
main {
  padding-left: calc(20px + var(--sa-l));
  padding-right: calc(20px + var(--sa-r));
  padding-bottom: calc(20px + var(--sa-b));
}

/* ==========================================================================
   PHONE PORTRAIT
   ========================================================================== */
@media (max-width: 768px) {
  header.app-header, header.player-header {
    padding: calc(10px + var(--sa-t)) calc(14px + var(--sa-r)) 10px calc(14px + var(--sa-l));
  }
  main {
    padding: 14px calc(14px + var(--sa-r)) calc(24px + var(--sa-b)) calc(14px + var(--sa-l));
  }

  /* The brand mark alone; the search field needs the width more than the
     wordmark does. */
  .header-brand-icon { width: 24px; height: 24px; }
  .brand-logo-img { width: 28px; height: 28px; }

  /* "Sign out" as a word costs a third of the header on a 360px screen. */
  #logoutBtn { padding: 8px 10px; font-size: 12px; }

  .toolbar-wrap {
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: nowrap;
    align-items: center;
  }
  /* The pill strip is the scroller; the sort control must not be squeezed by
     it or shrink below a tappable width. */
  .category-pills { flex: 1; min-width: 0; scroll-snap-type: x proximity; }
  .cat-pill { scroll-snap-align: start; padding: 8px 14px; }
  .sort-select { flex: 0 0 auto; max-width: 42vw; }

  .group-header { margin: 22px 0 10px; }

  /* Posters: two up, edge to edge. */
  .grid { gap: 10px; }
  .card { border-radius: var(--radius-sm); }

  .series-hero-overview {
    font-size: 13px;
    /* Full synopses push the episode list two screens down. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .season-tabs-header {
    gap: 10px;
    margin-bottom: 18px;
  }
  .season-title-row {
    margin-bottom: 2px;
  }
  .season-section-title {
    font-size: 18px;
  }
  .season-scroll-hint.visible {
    display: inline-flex;
  }
  .season-pills-container {
    margin: 0 -4px;
    width: calc(100% + 8px);
  }
  .season-folder-pills {
    -webkit-overflow-scrolling: touch;
    padding: 4px 28px 10px 4px;
    gap: 8px;
  }
  .season-pill {
    padding: 8px 15px;
    font-size: 12.5px;
  }
  .season-nav-arrow {
    display: none !important;
  }

  /* --- Player --------------------------------------------------------- */
  .player-main { padding: 0 0 calc(10px + var(--sa-b)); }
  .player-theater { max-width: 100%; }
  .stage { border-radius: 0; box-shadow: none; }
  .stage video {
    /* Taller than the old 60vh: the header and bar are the only other
       consumers, and a letterboxed 16:9 film on a 19.5:9 phone is small
       enough already. */
    max-height: calc(var(--vh) - 210px);
    min-height: 200px;
  }

  .player-controls-wrap {
    padding: 0 14px;
  }
  .player-bar {
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .player-bar::-webkit-scrollbar { display: none; }
  .player-bar-group { gap: 4px; flex-shrink: 0; }

  /* Speed lives in the audio sheet on a phone — it is the least-used control
     and the bar has no room for a select. */
  .speed-control { display: none; }

  .status-box { padding: 4px 14px; }

  /* A grab handle reads as "drag me down" and matches the OS sheet idiom. */
  .sheet-modal::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
    margin: 10px auto 0;
  }
  .sheet-header { padding: 12px 20px 14px; }
  .sheet-body {
    padding: 16px 20px calc(28px + var(--sa-b));
    max-height: calc(var(--vh) * 0.78);
  }
  .preset-pills { flex-wrap: wrap; }
  .pill-sm { flex: 1 1 calc(50% - 3px); }

  .login-card { padding: 26px 22px; }
}

/* Very narrow phones (iPhone SE and the 360px Android floor). */
@media (max-width: 380px) {
  .grid { gap: 8px; }
  .card .meta { padding: 7px 8px; }
  .card .meta b { font-size: 12px; }
  .btn.pill-btn { padding: 6px 10px; }
  .time-display { font-size: 10px; }
}

/* ==========================================================================
   PHONE LANDSCAPE — the orientation people actually watch in
   The page header and any vertical padding are pure loss here: the screen is
   ~390px tall and the video wants all of it.
   ========================================================================== */
@media (max-width: 950px) and (orientation: landscape) {
  body.watch-page .player-header { display: none; }
  .player-main { padding: 0; }
  .player-theater { margin: 0; }
  /* Pin the stage to the viewport rather than letting it size itself from the
     video box. Before metadata arrives a <video> is 300x150 by default, so a
     height derived from it collapses the player to a strip at the top of the
     screen for the first second of every title — and again on any load error. */
  .stage {
    border-radius: 0;
    height: var(--vh);
  }
  .stage video {
    height: 100%;
    max-height: var(--vh);
    min-height: 0;
  }

  /* Controls float over the video instead of sitting under it, the same way
     they do in fullscreen — there is no room for a separate strip. */
  body.watch-page .player-controls-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 30px calc(16px + var(--sa-r)) calc(8px + var(--sa-b)) calc(16px + var(--sa-l));
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 50%, transparent 100%);
  }
  body.watch-page .status-box { display: none; }
  .sheet-body { max-height: calc(var(--vh) * 0.82); }
  .sheet-modal::before { margin-top: 8px; }
}

/* ==========================================================================
   PSEUDO-FULLSCREEN
   iPhone Safari and every in-app WebView refuse Element.requestFullscreen and
   offer only video.webkitEnterFullscreen(), which hands playback to the native
   player — losing the JASSUB subtitle canvas, the custom controls and the
   audio engine. So those browsers get a fixed-position fullscreen built in
   CSS, which keeps all three.
   ========================================================================== */
html.pseudo-fs,
html.pseudo-fs body {
  /* Locking the scroller is what stops the page creeping under the player and
     keeps iOS from showing its URL bar again on the first upward flick. */
  overflow: hidden;
  height: var(--vh);
  position: relative;
  overscroll-behavior: none;
}
html.pseudo-fs body.watch-page .player-header { display: none; }

/* --- In-app browser notice ---------------------------------------------- */
.inapp-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px calc(14px + var(--sa-r)) 10px calc(14px + var(--sa-l));
  background: rgba(245, 158, 11, 0.12);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-size: 11.5px;
  line-height: 1.35;
}
.inapp-notice b { color: #fcd34d; }
.inapp-notice .inapp-dismiss {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0.8;
}
html.pseudo-fs .inapp-notice { display: none; }

/* --- Body scroll lock while a sheet is open ------------------------------
   Without this, scrolling inside the sheet chains to the library underneath
   and the page is somewhere else when the sheet closes. */
html.sheet-open, html.sheet-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Sheets sit above the pseudo-fullscreen theater (z-index 999999). */
html.pseudo-fs .sheet-backdrop.active { z-index: 1000000; }

/* --- Corrections that depend on the blocks above ------------------------- */

/* The Playback Speed row in the Audio sheet exists for phones, where the
   bar's select has no room. On desktop the bar still has it, so the sheet
   copy would just be a second control for the same state. */
@media (min-width: 769px) {
  #speedSheetGroup { display: none; }
}

/* The bar holds ten controls and a 390px phone has room for six. Measured at
   390px the row ran 48px past the right edge, putting the fullscreen button
   off-screen behind a horizontal scroll nobody would think to try. Two go:

   - ±10s: double-tapping either half of the picture already does this, and
     the seek ripple advertises it every time.
   - Volume: iOS ignores video.volume outright, and every phone has hardware
     keys an inch from the user's thumb. (Mobile YouTube ships no volume
     control for the same reason.) The Volume Booster in the Audio sheet is
     the one that still does something here, and it stays. */
@media (max-width: 480px) {
  #btnSkipBack, #btnSkipForward { display: none; }
  .volume-wrap { display: none; }
}

/* iOS ignores writes to video.volume — the level is owned by the hardware
   keys — but it does honour video.muted, so the button stays and only the
   slider goes. (It is already hidden by the coarse-pointer rule; this covers
   an iPad with a trackpad, where the pointer is fine but volume is still
   read-only.) The Volume Booster in the Audio sheet is unaffected: that runs
   through a Web Audio gain node, which iOS does respect. */
html.is-ios .vol-slider-box,
html.is-ios .volume-wrap:hover .vol-slider-box,
html.is-ios .volume-wrap:focus-within .vol-slider-box {
  width: 0;
  opacity: 0;
  margin-left: 0;
}

/* Phone landscape hides the page header to give the video the height, which
   would otherwise take the only route back to the library with it. The
   floating top bar — already built, already fades with the controls — stands
   in for it, exactly as it does in fullscreen. */
@media (max-width: 950px) and (orientation: landscape) {
  body.watch-page .fullscreen-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding: calc(10px + var(--sa-t)) calc(16px + var(--sa-r)) 28px calc(16px + var(--sa-l));
    background: linear-gradient(to bottom, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 60%, transparent 100%);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .inapp-notice { display: none; }
}

/* --- Unplayable-on-this-device panel -------------------------------------
   Shown instead of loading a file the browser has already said it will
   refuse. The point is to say *why* and *what fixes it*, rather than letting
   a 1.5GB download stall and report "Playback error (4)". */
.stage-blocked {
  position: absolute;
  inset: 0;
  z-index: 65;
  background: rgba(9, 11, 14, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.blocked-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  color: var(--muted);
}
.blocked-content > svg { color: var(--warning); margin-bottom: 2px; }
.blocked-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.blocked-reason { font-size: 13px; line-height: 1.5; }
.blocked-fix {
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.blocked-fix code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--text);
}
.blocked-actions { display: flex; gap: 8px; margin-top: 4px; }

/* The card carries the same warning, so an unplayable title is visible before
   it is tapped rather than after a minute of buffering. */
.badge.badge-unplayable {
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  border: none;
}
.ep-badge-unplayable {
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
}

/* A blocked stage has no video to give it height, so it is given one. The
   panel scrolls rather than clipping if the phone is short or rotated. */
.stage.is-blocked {
  min-height: 340px;
  aspect-ratio: 16 / 9;
}
.stage-blocked { overflow-y: auto; }
@media (max-width: 950px) and (orientation: landscape) {
  .stage.is-blocked { min-height: 0; aspect-ratio: auto; }
  .blocked-content { gap: 6px; }
  .blocked-title { font-size: 14px; }
}

/* --- Open in another app -------------------------------------------------
   The escape hatch for anything a browser will not decode. */
.player-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.fullscreen-spacer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sheet-intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.sheet-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--dim);
}

.external-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.external-app {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  min-height: 56px;
  transition: all var(--transition);
}
.external-app:active { background: var(--surface-3); transform: scale(0.99); }
.external-app-name { font-weight: 600; font-size: 14px; }
.external-app-note { font-size: 12px; color: var(--dim); }
.external-app-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.external-app-arrow { color: var(--dim); flex-shrink: 0; }

.external-copy-row { display: flex; gap: 8px; }
.external-url {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 10px 12px;
  min-height: 44px;
  outline: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
}
.external-remember { font-size: 13px; color: var(--muted) !important; }
.blocked-actions { flex-wrap: wrap; justify-content: center; }

/* The hand-off prompt's primary action is the whole point of the panel, so it
   is full-width and unmissable rather than one pill among several. */
.blocked-primary {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.blocked-actions { width: 100%; }
.blocked-hint {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.45;
  max-width: 320px;
}

/* The prompt is taller than a 16:9 box on a phone, and clipping the last line
   is how a user misses "VLC isn't installed yet". Give it the room, cap it at
   the viewport, and tighten the rhythm on short screens. */
.stage.is-blocked {
  min-height: min(560px, calc(var(--vh) - 210px));
  aspect-ratio: auto;
}
@media (max-width: 480px) {
  .blocked-content { gap: 8px; }
  .blocked-content > svg { margin-bottom: 0; }
  .blocked-reason { font-size: 12.5px; }
  .blocked-fix { padding: 8px 10px; }
}
@media (max-width: 950px) and (orientation: landscape) {
  .stage.is-blocked { min-height: 0; }
  .stage-blocked { padding: 12px; }
  .blocked-primary { min-height: 42px; font-size: 14px; }
}

/* The `hidden` attribute is only a UA-stylesheet `display: none`, so any class
   that sets display beats it. `.inapp-notice` is `display: flex`, which meant a
   dismissed banner came back on the next page as an empty orange bar. */
[hidden] { display: none !important; }