/* ============================================
   MATT'S MOVIE LODGECAST — Design System
   Bold, Theatrical, Dark Cinema Theme
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Video-to-still color compensation — see SVG filter #video-gamma in index.html */

  /* Backgrounds — dark theater with subtle blue undertone */
  --bg-deep: #0a0e14;
  --bg-card: #111820;
  --bg-card-hover: #1a2230;
  --bg-surface: #1e2a38;

  /* Bone gold — ONLY for bone ratings */
  --gold: #e2b714;
  --gold-glow: #f5d442;

  /* Salad Dragon green — primary accent, vibrant and leafy */
  --dragon-green: #3cb371;
  --dragon-green-glow: #4cd88a;

  /* Theater blue — atmospheric, from the cover art */
  --theater-blue: #4a90d9;
  --theater-blue-dim: #2d5a8a;

  /* Woof red — deep cinema-curtain red */
  --woof-red: #d32f2f;

  /* Accents */
  --teal: #00bcd4;
  --orange: #ff9f43;
  --purple: #9c27b0;
  --pink: #ec4899;

  /* Text — clean white like the logo art */
  --text-primary: #ffffff;
  --text-secondary: #9aa8b8;
  --text-dim: #5a6a7a;

  /* Borders — dark blue tint, theater feel */
  --border: #1e2a38;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Movie mural background (::before) + dark overlay (::after)
   Split into two layers so the dark overlay opacity can animate smoothly.
   Uses fixed pseudo-elements instead of background-attachment:fixed
   because mobile Safari doesn't support fixed backgrounds on body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('../images/movie-mural-bg.png') center / cover no-repeat;
  backdrop-filter: blur(1.25px);
  -webkit-backdrop-filter: blur(1.25px);
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(10, 14, 20, 1);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 1.5s ease;
}

/* Portrait screens — use vertical theater mural */
@media (orientation: portrait) {
  body::before {
    background: url('../images/movie-mural-bg-portrait.png') center / cover no-repeat;
  }
}

/* Bright theater reveal — reduce dark overlay for 80% image visibility */
body.theater-bright::after {
  opacity: 0.20;
}


a {
  color: var(--dragon-green);
  text-decoration: none;
}

a:hover {
  color: var(--dragon-green-glow);
}

/* --- Header (hero cover art) --- */
.app-header {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 20px 16px 12px;
  text-align: center;
}

.hero-link {
  display: inline-block;
}

.hero-cover-art {
  width: 320px;
  height: 320px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 60px rgba(60, 179, 113, 0.12);
  transition: transform 0.2s;
}

.hero-cover-art:hover {
  transform: scale(1.02);
}

/* --- Nav Bar (sticky tabs + auth) --- */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: none;
  padding: 10px 0 8px;
}

/* When beta banner is visible, nav sticks below the 40px banner */
body.beta-active .nav-bar {
  top: 40px;
}

.nav-bar-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}

/* Search bar — full width, matches content container */
.search-wrapper {
  position: relative;
  z-index: 50;
  margin: 0 auto 16px;
}

#search-input {
  width: 100%;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}

#search-input:focus {
  border-color: var(--theater-blue);
}

#search-input::placeholder {
  color: var(--text-dim);
}

/* --- Search Results Dropdown --- */
.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 400px;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.search-results.hidden {
  display: none;
}

.search-result-item {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: var(--bg-card-hover);
}

.search-result-icon {
  font-size: 1.2rem;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

/* Poster inside search results — smaller to fit the dropdown row */
.search-result-item .poster-sm {
  width: 36px;
  height: 54px;
}

.search-result-item .poster-placeholder.poster-sm {
  width: 36px;
  height: 54px;
  font-size: 0.5rem;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* --- Tab Nav --- */
.tab-nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  position: relative;
}

.tab-nav.hidden {
  display: none;
}

/* ============================================
   AUTH — Controls, Modal, Dropdown
   ============================================ */

/* Auth controls — fixed top-right, sits just below beta banner */
.auth-controls {
  position: fixed;
  top: 8px;
  right: 16px;
  z-index: 150;  /* above nav (100), below beta banner (200) */
}

/* When beta banner is visible, push auth below the 40px banner */
body.beta-active .auth-controls {
  top: 48px;
}

/* Sign In button (logged out state) */
.auth-signin-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--dragon-green);
  background: transparent;
  color: var(--dragon-green);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.auth-signin-btn:hover {
  background: var(--dragon-green);
  color: #000;
}

/* User menu (logged in state) */
.auth-user-menu {
  position: relative;
}

.auth-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}

.auth-user-btn:hover {
  border-color: var(--dragon-green);
}

.auth-arrow {
  font-size: 0.6rem;
  color: var(--text-dim);
}

/* User dropdown */
.auth-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 200;
  overflow: hidden;
}

.auth-menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.auth-menu-item:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.auth-menu-admin {
  font-weight: 600;
}

.auth-menu-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dragon-green);
  font-weight: 600;
}

/* --- Auth Modal --- */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.auth-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  position: relative;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.auth-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.auth-modal-close:hover {
  color: var(--text-primary);
}

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  padding: 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.auth-tab.active {
  color: var(--dragon-green);
  border-bottom-color: var(--dragon-green);
}

.auth-field {
  margin-bottom: 16px;
}

.auth-field label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.auth-field input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.auth-field input:focus {
  border-color: var(--theater-blue);
}

.auth-field input::placeholder {
  color: var(--text-dim);
}

.auth-error {
  padding: 10px;
  border-radius: var(--radius-sm);
  background: rgba(211, 47, 47, 0.15);
  color: var(--woof-red);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.auth-success {
  padding: 10px;
  border-radius: var(--radius-sm);
  background: rgba(60, 179, 113, 0.15);
  color: var(--dragon-green);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.auth-submit-btn {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--dragon-green);
  color: #000;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.auth-submit-btn:hover {
  opacity: 0.9;
}

.auth-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   LOGIN GATE — Full-screen auth wall
   ============================================ */

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nudge card slightly right to clear the keypad, down to center on vault door */
  padding: 6% 16px 0 2%;
  /* Vault background provided by paused <video> element — no PNG needed */
  background-color: var(--bg-deep);
}
/* Portrait screens — swap to vertical vault background, center card over the door */
@media (orientation: portrait) {
  .login-gate {
    /* Vault background provided by paused <video> — no PNG needed */
    padding: 16px;
    align-items: center;
    /* Position card below the vault signs */
    padding-top: 40%;
  }
}

/* Compact login card on mobile */
@media (max-height: 500px) {
  /* Landscape phones — minimal card, pushed below the Lodge sign */
  .login-gate {
    align-items: center;
    padding-top: 12%;
    padding-bottom: 0;
  }
  /* After login, pull the smaller status card up to center */
  .login-gate.status-mode {
    padding-top: 0;
    padding-bottom: 0;
  }
  .login-gate-card {
    max-width: 220px;
    padding: 10px 12px 6px;
  }
  .login-gate .auth-field {
    margin-bottom: 6px;
  }
  .login-gate .auth-field label {
    font-size: 0.6rem;
    margin-bottom: 2px;
  }
  .login-gate .auth-field input {
    padding: 5px 8px;
    font-size: 0.8rem;
  }
  .auth-guest-btn {
    padding: 6px;
    font-size: 0.8rem;
  }
  .gate-separator {
    margin: 6px 0 2px;
  }
  .gate-separator span {
    font-size: 0.6rem;
  }
  .login-gate .auth-submit-btn {
    padding: 6px;
    font-size: 0.8rem;
    margin-top: 2px;
  }
  .gate-forgot-text {
    margin-top: 4px;
    font-size: 0.6rem;
  }
  .gate-toggle-text {
    margin-top: 3px;
    font-size: 0.65rem;
    gap: 1px;
  }
}
@media (max-width: 480px) and (orientation: portrait) {
  /* Portrait phones — compact card */
  .login-gate-card {
    max-width: 240px;
    padding: 14px 14px 8px;
  }
  .login-gate .auth-field {
    margin-bottom: 8px;
  }
  .login-gate .auth-field label {
    font-size: 0.65rem;
    margin-bottom: 2px;
  }
  .login-gate .auth-field input {
    padding: 7px 10px;
    font-size: 0.85rem;
  }
  .auth-guest-btn {
    padding: 8px;
    font-size: 0.85rem;
  }
  .gate-separator {
    margin: 8px 0 2px;
  }
  .gate-separator span {
    font-size: 0.65rem;
  }
  .login-gate .auth-submit-btn {
    padding: 8px;
    font-size: 0.85rem;
    margin-top: 2px;
  }
  .gate-forgot-text {
    margin-top: 6px;
    font-size: 0.65rem;
  }
  .gate-toggle-text {
    margin-top: 4px;
    font-size: 0.7rem;
    gap: 2px;
  }
}

/* Hidden state — the gate slides away */
.login-gate.hidden {
  display: none;
}

.login-gate-card {
  position: relative;    /* Sit above the vault background video */
  z-index: 1;
  width: 100%;
  max-width: 320px;
  background: rgba(17, 24, 32, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 24px 20px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-gate-logo {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.login-gate-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
}

/* Heading above the form — hidden, kept in DOM for accessibility */
.login-gate-heading {
  display: none;
}

.login-gate-form {
  text-align: left;
  width: 100%;
}

/* Form is visually hidden during vault reveal but stays in the DOM so
   password managers can detect the email + password fields for autofill. */
.login-gate-card.card-hidden .login-gate-form {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.login-gate-form .auth-submit-btn {
  margin-top: 8px;
}

.auth-guest-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--theater-blue);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.auth-guest-btn:hover {
  background: rgba(74, 144, 217, 0.15);
}
.auth-guest-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gate-separator {
  text-align: center;
  margin: 12px 0 4px;
  position: relative;
}
.gate-separator span {
  font-size: 0.75rem;
  color: var(--text-dim);
  background: rgba(17, 24, 32, 0.92);
  padding: 0 10px;
  position: relative;
  z-index: 1;
}
.gate-separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.auth-guest-label {
  font-style: italic;
  color: var(--text-dim);
}

.auth-menu-upgrade {
  color: var(--theater-blue) !important;
  font-weight: 600;
}

.gate-forgot-text {
  margin-top: 10px;
  text-align: center;
  font-size: 0.75rem;
}

.gate-toggle-text {
  margin-top: 14px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.gate-toggle-link {
  color: var(--theater-blue);
  text-decoration: none;
  font-weight: 600;
}
.gate-toggle-link:hover {
  text-decoration: underline;
}

/* ============================================
   CINEMATIC INTRO SEQUENCE
   ============================================ */

/* --- Keyframes --- */

/* CRT terminal flicker — rapid opacity pulses */
@keyframes terminalFlicker {
  0%   { opacity: 0; transform: translateX(-4px) skewX(-2deg); filter: blur(2px); }
  3%   { opacity: 1; transform: translateX(2px) skewX(1deg); filter: blur(0); }
  6%   { opacity: 0; transform: translateX(-1px); filter: blur(1px); }
  10%  { opacity: 1; transform: translateX(3px) skewX(-1deg); filter: blur(0); }
  14%  { opacity: 0.2; transform: translateX(-2px); filter: blur(1px); }
  18%  { opacity: 1; transform: translateX(0); filter: blur(0); }
  22%  { opacity: 0; transform: translateX(1px) skewX(2deg); }
  26%  { opacity: 1; transform: translateX(0) skewX(0); filter: blur(0); }
  60%  { opacity: 1; transform: none; filter: none; }
  62%  { opacity: 0; transform: translateX(-2px); }
  64%  { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; filter: none; }
}

/* Ongoing glitch — long irregular cycle that feels random */
@keyframes terminalPulse {
  0%   { opacity: 1; transform: none; }
  /* Long pause, then a single quick flicker */
  11%  { opacity: 1; transform: none; }
  11.5%{ opacity: 0; transform: translateX(-3px) skewX(2deg); }
  12%  { opacity: 1; transform: none; }
  /* Calm stretch */
  27%  { opacity: 1; transform: none; }
  /* Double glitch — two hits back to back */
  27.5%{ opacity: 0; transform: translateX(2px); }
  28%  { opacity: 1; transform: translateX(-1px) skewX(-1deg); }
  28.5%{ opacity: 0; transform: translateX(-2px) skewX(2deg); }
  29%  { opacity: 1; transform: none; }
  /* Long calm */
  48%  { opacity: 1; transform: none; }
  /* Subtle single flicker */
  48.5%{ opacity: 0.2; transform: translateX(1px); }
  49%  { opacity: 1; transform: none; }
  /* Another calm stretch */
  63%  { opacity: 1; transform: none; }
  /* Quick triple stutter */
  63.5%{ opacity: 0; transform: translateX(-2px); }
  64%  { opacity: 1; transform: translateX(1px); }
  64.3%{ opacity: 0; transform: translateX(2px) skewX(-2deg); }
  64.6%{ opacity: 0.4; transform: translateX(-1px); }
  65%  { opacity: 1; transform: none; }
  /* Long calm to end */
  82%  { opacity: 1; transform: none; }
  /* One last flicker before loop restarts */
  82.5%{ opacity: 0; transform: translateX(-1px) skewX(1deg); }
  83%  { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}

/* Gentle fade-in with slight upward drift for app shell elements */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Blackout overlay --- */
.intro-blackout {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.intro-blackout.visible {
  opacity: 1;
  pointer-events: auto;
}
.intro-blackout.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.8s ease;
}

/* --- Vault background video (paused on frame 1, acts as login background) --- */
.vault-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;          /* Behind the login card */
  pointer-events: none;
}

/* --- Transition video (same element, promoted to fullscreen overlay when playing) --- */
.intro-video {
  position: fixed;
  inset: 0;
  z-index: 10001;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-deep);
}

/* --- Login card intro states --- */

/* Card starts invisible — vault background shows alone for a few seconds */
.login-gate-card.card-hidden {
  opacity: 0;
}
/* Card fades in */
.login-gate-card.card-entering {
  opacity: 1;
  transition: opacity 0.8s ease;
}
/* Gate fades out during blackout */
.login-gate.gate-fading {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* --- Status message panel (replaces form after successful login) --- */
.gate-status {
  position: relative;
  margin-top: 0;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--dragon-green);
  border-radius: 6px;
  background: rgba(60, 179, 113, 0.06);
  text-align: center;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gate-status.hidden {
  display: none;
}
/* CRT scanline overlay — gives text a degraded monitor look */
.gate-status::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.3) 0px,
    rgba(0, 0, 0, 0.3) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  border-radius: 6px;
  z-index: 1;
}
.gate-status-line {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dragon-green);
  text-shadow: 0 0 8px rgba(60, 179, 113, 0.5);
  animation: terminalFlicker 1.2s ease-in-out;
}
/* Blue variant for the welcome message */
.gate-status-line.status-welcome {
  color: var(--theater-blue);
  text-shadow: 0 0 8px rgba(74, 144, 217, 0.5);
  animation: terminalFlicker 1.2s ease-in-out;
}
/* When status is showing welcome message, border shifts to blue */
.gate-status.status-welcome-border {
  border-color: var(--theater-blue);
  background: rgba(74, 144, 217, 0.06);
}
/* Tap-to-enter prompt */
.gate-status.status-tap-prompt {
  border-color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.gate-tap-prompt {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
  animation: systemPulse 1.5s ease-in-out infinite;
}
@keyframes systemPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- App shell intro animation (triggered by body class) --- */

/* All shell elements invisible while intro plays */
body.intro-active .app-header,
body.intro-active #auth-controls,
body.intro-active #hero-quote-slot,
body.intro-active .nav-bar,
body.intro-active #app,
body.intro-active .app-footer {
  opacity: 0;
}

/* Staggered fade-in after theater reveal — slow to match cinematic pace */
body.intro-reveal .app-header     { animation: fadeInUp 1.0s ease both; }
body.intro-reveal #auth-controls  { animation: fadeInUp 0.8s ease 0.15s both; }
body.intro-reveal #hero-quote-slot{ animation: fadeInUp 0.8s ease 0.3s both; }
body.intro-reveal .nav-bar        { animation: fadeInUp 0.8s ease 0.45s both; }
body.intro-reveal #app            { animation: fadeInUp 1.0s ease 0.6s both; }
body.intro-reveal .app-footer     { animation: fadeInUp 0.8s ease 0.75s both; }

/* ============================================
   BETA BANNER — Pink sticky banner
   ============================================ */

/* When beta banner is active, push ALL content down */
body.beta-active {
  padding-top: 40px;
}

.beta-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(219, 39, 119, 0.9);
  border-bottom: 1px solid rgba(244, 114, 182, 0.5);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.beta-banner-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

.beta-banner-icon-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.3);
  border: 1px solid rgba(245, 158, 11, 0.5);
  font-size: 11px;
  vertical-align: middle;
  margin: 0 2px;
}

.beta-banner-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s;
}

.beta-banner-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   FEEDBACK — Icons, Popover
   ============================================ */

/* Cards that contain a feedback icon need relative positioning */
.card-has-feedback {
  position: relative;
}

/* Feedback icon — amber 💬 with pulse animation */
.feedback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  z-index: 20;
  padding: 0;
  line-height: 1;
  animation: feedback-pulse 2s ease-in-out infinite;
}

.feedback-icon:hover {
  background: rgba(245, 158, 11, 0.3);
  transform: scale(1.1);
}

/* Default inline position (legacy, if used) */
.feedback-icon-default {
  vertical-align: middle;
  margin-left: 8px;
}

/* Absolute bottom-right position for cards */
.feedback-icon-card {
  position: absolute;
  bottom: 8px;
  right: 8px;
}

/* Ensure items with feedback icons have room for the icon */
.oscar-list-item.card-has-feedback,
.prediction-pick.card-has-feedback,
.person-rating-row.card-has-feedback {
  padding-right: 40px;
}

/* Smaller icon for compact rows */
.oscar-list-item .feedback-icon-card,
.prediction-pick .feedback-icon-card,
.person-rating-row .feedback-icon-card {
  top: 50%;
  transform: translateY(-50%);
}

/* Floating icon for button groups — one per group area */
.feedback-icon-btn-group {
  position: absolute;
  top: -8px;
  right: -8px;
}

.btn-group-has-feedback {
  position: relative;
}

/* Gentle pulse animation */
@keyframes feedback-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Feedback deep-link highlight — brief glow when navigating from admin dashboard */
@keyframes feedback-highlight-flash {
  0% { box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.8); }
  100% { box-shadow: 0 0 0 3px rgba(74, 144, 217, 0); }
}
.feedback-highlight {
  animation: feedback-highlight-flash 2s ease-out;
  border-radius: 8px;
}

/* Toast notification for missing deep-link targets */
.scroll-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 30, 0.95);
  color: var(--text-secondary);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 9999;
}
.scroll-toast.visible {
  opacity: 1;
}

/* Feedback popover */
.feedback-popover {
  position: fixed;
  z-index: 500;
  width: 340px;
  height: 300px;
  min-width: 240px;
  min-height: 200px;
  max-width: 90vw;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 16px 16px 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  resize: both;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.feedback-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 0 12px 0;
  cursor: grab;
}

.feedback-popover-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.feedback-popover-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

.feedback-popover-close:hover {
  color: var(--text-primary);
}

.feedback-sentiment {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.feedback-sentiment-btn {
  width: 44px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.15s;
}

.feedback-sentiment-btn:hover {
  background: var(--bg-surface);
}

.feedback-sentiment-btn.active {
  border-color: var(--theater-blue);
  background: rgba(74, 144, 217, 0.15);
}

.feedback-comment {
  width: 100%;
  min-height: 40px;
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}

.feedback-comment:focus {
  border-color: var(--theater-blue);
}

.feedback-comment::placeholder {
  color: var(--text-dim);
}

.feedback-char-count {
  text-align: right;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 4px;
  margin-bottom: 8px;
}

.feedback-error {
  padding: 8px;
  border-radius: var(--radius-sm);
  background: rgba(211, 47, 47, 0.15);
  color: var(--woof-red);
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.feedback-submit-btn {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--dragon-green);
  color: #000;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.feedback-submit-btn:hover {
  opacity: 0.9;
}

.feedback-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-submit-btn.feedback-submit-success {
  background: var(--theater-blue);
  color: #fff;
}

/* ============================================
   ADMIN — Dashboard, Cards, Controls
   ============================================ */

.admin-header {
  margin-bottom: 20px;
}

.admin-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.admin-stat {
  flex: 1;
  min-width: 80px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}

.admin-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
}

.admin-stat-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-view-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
}

.admin-filters {
  margin-bottom: 16px;
}

.admin-filters .sort-controls {
  margin-bottom: 8px;
}

.admin-search {
  width: 100%;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}

.admin-search:focus {
  border-color: var(--theater-blue);
}

.admin-search::placeholder {
  color: var(--text-dim);
}

/* Admin feedback card */
.admin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
}

.admin-card-trash {
  opacity: 0.7;
}

.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.admin-card-id {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 600;
  margin-right: 6px;
}

.admin-card-user {
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 8px;
}

.admin-card-date {
  font-size: 0.75rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.admin-card-section {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.admin-page-link {
  font-size: 0.75rem;
  color: var(--theater-blue);
  margin-left: 8px;
  cursor: pointer;
}

.admin-card-comment {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.admin-sentiment {
  font-size: 1rem;
  vertical-align: middle;
  margin-right: 4px;
}

/* Admin card controls */
.admin-card-controls {
  margin-bottom: 10px;
}

.admin-control-row {
  margin-bottom: 8px;
}

.admin-control-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.admin-status-select {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
}

.admin-note-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}

.admin-note-input:focus {
  border-color: var(--theater-blue);
}

.admin-note-input::placeholder {
  color: var(--text-dim);
}

.admin-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.admin-action-btn {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.admin-trash-btn:hover {
  border-color: var(--woof-red);
  color: var(--woof-red);
  background: rgba(211, 47, 47, 0.1);
}

.admin-restore-btn:hover {
  border-color: var(--dragon-green);
  color: var(--dragon-green);
  background: rgba(60, 179, 113, 0.1);
}

.admin-empty-trash-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--woof-red);
  background: rgba(211, 47, 47, 0.1);
  color: var(--woof-red);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.admin-empty-trash-btn:hover {
  background: var(--woof-red);
  color: #fff;
}

/* ============================================
   My Feedback — User-facing feedback review
   ============================================ */

.my-feedback-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

.my-feedback-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.my-feedback-filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.my-feedback-filter-btn:hover {
  border-color: var(--filter-color, #888);
  color: var(--filter-color, #888);
}

.my-feedback-filter-active {
  background: var(--filter-color, #888);
  border-color: var(--filter-color, #888);
  color: #fff;
}

.my-feedback-filter-active:hover {
  color: #fff;
}

.my-feedback-filter-count {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-left: 2px;
}

.my-feedback-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
}

.my-feedback-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.my-feedback-card-date {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.my-feedback-card-section {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.my-feedback-card-comment {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.5;
}

.my-feedback-resolution {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.my-feedback-resolution-label {
  font-size: 0.75rem;
  color: var(--dragon-green);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.my-feedback-resolution-text {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 6px;
}

.my-feedback-resolution-link {
  font-size: 0.8rem;
  color: var(--theater-blue);
  text-decoration: none;
}

.my-feedback-resolution-link:hover {
  text-decoration: underline;
}

.my-feedback-approval {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.my-feedback-approve-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.15s;
}

.my-feedback-approve-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary);
}

.my-feedback-followup-input {
  width: 100%;
  min-height: 60px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.85rem;
  padding: 8px 10px;
  resize: vertical;
  font-family: inherit;
}

.my-feedback-followup-btn {
  background: var(--theater-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.my-feedback-followup-btn:hover {
  opacity: 0.85;
}

.my-feedback-view-link {
  display: block;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--theater-blue);
  text-decoration: none;
  cursor: pointer;
}

.my-feedback-view-link:hover {
  text-decoration: underline;
}

/* Admin beta tester toggle card */
.admin-beta-toggle-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.admin-beta-info {
  margin-bottom: 12px;
}

.admin-beta-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
}

.admin-beta-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.admin-beta-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-beta-btn {
  padding: 8px 24px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.admin-beta-btn-on {
  background: var(--dragon-green);
  border-color: var(--dragon-green);
  color: #000;
}

.admin-beta-btn-off {
  background: var(--woof-red);
  border-color: var(--woof-red);
  color: #fff;
}

.admin-beta-status {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* Auth menu beta mode indicator */
.auth-menu-beta-on {
  color: var(--dragon-green) !important;
  font-weight: 600;
}

/* ============================================
   UNIFIED BUTTON STYLE — "Solid Surface"
   Filled backgrounds, gradient active states,
   no visible borders. Cinema panel aesthetic.
   ============================================ */

.tab {
  flex: 1;
  max-width: 30%;
  padding: 10px 20px;
  background: var(--bg-surface);
  border: none;
  border-radius: 24px;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.tab:hover {
  background: #253040;
  color: var(--text-secondary);
}

.tab.active {
  background: linear-gradient(180deg, #1d4a35 0%, #143828 100%);
  color: #4cd88a;
}

/* --- Main Content --- */
.app-content {
  position: relative;
  z-index: 1;
  padding: 16px;
  padding-bottom: 100vh;
  max-width: 800px;
  margin: 0 auto;
}

.loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* --- Cards --- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  transition: transform 0.15s, box-shadow 0.15s;
}

.card.clickable {
  cursor: pointer;
}

.card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* --- Movie Poster --- */
.poster {
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-surface);
  flex-shrink: 0;
}

/* Standard poster for all list/card contexts (60px wide, 2:3 ratio) */
.poster-sm {
  width: 60px;
  height: 90px;
}

/* Medium poster for detail page (150px wide, 2:3 ratio) */
.poster-md {
  width: 150px;
  height: 225px;
}

/* Placeholder when no poster exists */
.poster-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.7rem;
  text-align: center;
  padding: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Oscar episode artwork (podcast cover art as thumbnail) */
.oscar-ep-artwork {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.oscar-ep-artwork-lg {
  width: 120px;
  height: 120px;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

/* Detail header layout when poster is present */
.detail-header-with-poster {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.detail-header-text {
  flex: 1;
  min-width: 0;
}

.detail-meta-lines {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.detail-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.detail-movie-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.detail-movie-meta .genre-tag {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(74, 144, 217, 0.12);
  color: var(--theater-blue);
  border: 1px solid rgba(74, 144, 217, 0.25);
}

/* --- Movie List Card --- */
.movie-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.movie-card-info {
  flex: 1;
  min-width: 0;
}

.movie-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.movie-card-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.movie-card-rating {
  text-align: right;
  flex-shrink: 0;
}

.movie-card-avg {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.movie-card-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Person List Card --- */
.person-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.person-card-info {
  flex: 1;
}

.person-card-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.person-card-role {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.person-card-stats {
  text-align: right;
  flex-shrink: 0;
}

/* --- Highlight Card (person highest/lowest) --- */
.highlight-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

/* --- Shared Pick Card (oscar shared picks) --- */
.shared-pick-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- Episode List Card --- */
.episode-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.episode-card-info {
  flex: 1;
  min-width: 0;
}

.episode-card-title {
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Portrait mobile — two-line episode titles */
@media (orientation: portrait) {
  .episode-card-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .ep-title-prefix {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 1.3;
  }
  .ep-title-sep {
    display: none;
  }
  .ep-title-name {
    display: block;
    font-weight: 600;
    line-height: 1.3;
  }
}

.episode-card-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.ep-release-date {
  color: var(--text-dim);
}

.ep-meta-sep {
  color: var(--text-dim);
  margin: 0 4px;
}

/* --- Tags / Badges --- */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.tag-gold {
  background: rgba(226, 183, 20, 0.15);
  color: var(--gold);
  border: 1px solid rgba(226, 183, 20, 0.3);
}

.tag-green {
  background: rgba(60, 179, 113, 0.15);
  color: var(--dragon-green);
  border: 1px solid rgba(60, 179, 113, 0.3);
}

.tag-red {
  background: rgba(211, 47, 47, 0.15);
  color: var(--woof-red);
  border: 1px solid rgba(211, 47, 47, 0.3);
}

.tag-purple {
  background: rgba(156, 39, 176, 0.15);
  color: var(--purple);
  border: 1px solid rgba(156, 39, 176, 0.3);
}

.tag-teal {
  background: rgba(0, 210, 211, 0.15);
  color: var(--teal);
  border: 1px solid rgba(0, 210, 211, 0.3);
}

.tag-orange {
  background: rgba(255, 159, 67, 0.15);
  color: var(--orange);
  border: 1px solid rgba(255, 159, 67, 0.3);
}

.tag-blue {
  background: rgba(74, 144, 217, 0.15);
  color: var(--theater-blue);
  border: 1px solid rgba(74, 144, 217, 0.3);
}

.tag-type {
  background: rgba(160, 160, 184, 0.1);
  color: var(--text-secondary);
  border: 1px solid rgba(160, 160, 184, 0.2);
  text-transform: capitalize;
}

/* --- Bone Rating Display --- */
.bone-display {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 1.4rem;
  line-height: 1;
}

.bone-display-sm {
  font-size: 1rem;
}

.bone-filled {
  display: inline-flex;
}

.bone-empty {
  display: inline-flex;
  opacity: 0.3;
}

/* Woof badge */
.woof-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--woof-red);
  color: white;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 4px 14px;
  border-radius: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Total Woof badge variant — stronger red gradient + glow */
.woof-badge-total {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
  font-size: 1rem;
  letter-spacing: 1.5px;
}

/* For Boner badge on episode card — blue background label */
.ep-for-boner-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #2471a3, #4a90d9);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

/* 4Boner on episode card — blue circular outline around bone display */
.ep-4boner {
  background: rgba(74, 144, 217, 0.15);
  border: 1px solid rgba(74, 144, 217, 0.35);
  border-radius: 10px;
  padding: 2px 8px;
}

/* No rating badge — shown when a host didn't give a bone count */
.no-rating-badge {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-style: italic;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* Rating note — explanatory text below the bone display */
.rating-card-note {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 6px;
  font-style: italic;
}

/* --- Bones + Woofs Row (episode cards, line 1) --- */
.ep-bones-woofs-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.ep-bones-display {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.ep-bones-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-left: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ep-woof-display {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: -1px;
}

/* Total Woof on episode card — red background + label */
.ep-total-woof {
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.35);
  border-radius: 10px;
  padding: 2px 8px;
  color: var(--woof-red);
  font-weight: 700;
  letter-spacing: normal;
}

/* --- Criticism Indicators (rewrites, SFC, GS — right side of bones row) --- */
.ep-criticism-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 0.8rem;
  letter-spacing: -1px;
}

.ep-criticism-item {
  display: inline-flex;
  align-items: center;
}

/* --- Salad Emoji Row (episode cards, line 2) --- */
.emoji-count-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.emoji-count-group {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  letter-spacing: -1px;
}

/* --- Stat deep-link — clickable emoji stats on episode cards --- */
.stat-link {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background-color 0.15s;
}
.stat-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Scroll targets for deep-linking — offset for sticky nav bar + beta banner */
.salad-subsection-header,
.hero-bone-rating {
  scroll-margin-top: 120px;
}

/* --- Total Woof Banner (movie detail page) --- */
.total-woof-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(192, 57, 43, 0.15), rgba(231, 76, 60, 0.1));
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 12px;
}

.total-woof-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

.total-woof-asterisk {
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
}

/* --- 4Boner Banner (movie detail page) --- */
.four-boner-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(36, 113, 163, 0.15), rgba(74, 144, 217, 0.1));
  border: 1px solid rgba(74, 144, 217, 0.3);
  border-radius: 12px;
}

.four-boner-badge {
  font-size: 1rem;
  font-weight: 700;
  color: #4a90d9;
  letter-spacing: 1px;
}

.four-boner-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

.four-boner-asterisk {
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
}

/* --- Detail Page Header --- */
.detail-header {
  margin-bottom: 24px;
}

.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 12px;
  cursor: pointer;
}

.detail-back:hover {
  color: var(--dragon-green);
}

/* --- Prev/Next Episode Navigation --- */
.ep-nav-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ep-nav-link {
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.2s;
  display: flex;
  flex-direction: column;
}
.ep-nav-link:hover {
  color: var(--text-secondary);
}
.ep-nav-link.ep-nav-next {
  text-align: right;
  align-items: flex-end;
}
.ep-nav-title {
  display: block;
  font-size: 0.7rem;
  color: var(--text-dim);
  opacity: 0.7;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-title {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.detail-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* --- Section Headers --- */
.section-header {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 28px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header-icon {
  font-size: 1.2rem;
}

/* --- Rating Card (on movie detail) --- */
.rating-card {
  background: #162030;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  border: 2px solid #2d4a6a;
}

.rating-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.rating-card-person {
  font-weight: 700;
  font-size: 1rem;
}

.rating-card-role {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rating-card-reasoning {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.5;
  font-style: italic;
}

.rating-card-modifiers {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Woof rating card gets a red border */
.rating-card.woof {
  border-color: var(--woof-red);
  border-width: 2px;
}

/* Perfect 4.0 gets green border */
.rating-card.perfect {
  border-color: var(--dragon-green);
  border-width: 2px;
  box-shadow: 0 0 20px rgba(60, 179, 113, 0.1);
}

/* Voicemail rating — distinct but not jarring */
.rating-card.voicemail {
  background: #171428;
  border-color: #4d4078;
  border-width: 2px;
}
/* When voicemail has a border class (perfect/woof), let that border win */
.rating-card.voicemail.perfect {
  border-color: var(--dragon-green);
}
.rating-card.voicemail.woof {
  border-color: var(--woof-red);
}

/* Audience rating — walk-up / anecdotal */
.rating-card.audience {
  background: #142124;
  border-color: #4a90a0;
  border-width: 2px;
}

.off-scale-badge {
  display: inline-block;
  font-size: 0.65rem;
  color: var(--woof-red);
  border: 1px solid var(--woof-red);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* --- Settle the Score (User Ratings) --- */

.settle-the-score {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.settle-header {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dragon-green);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  text-align: center;
}

.settle-subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.settle-aggregate {
  text-align: center;
  margin-bottom: 24px;
  font-size: 1.2rem;
}

.settle-aggregate-label {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 1.15rem;
}

.settle-aggregate-bones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 8px 0;
}

.settle-aggregate-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dragon-green);
}

.settle-aggregate-count {
  color: var(--text-dim);
  font-size: 1rem;
}

.settle-aggregate-empty {
  color: var(--text-dim);
  font-style: italic;
  font-size: 1.1rem;
}

/* Guest sign-in prompt */
.settle-signin-prompt {
  text-align: center;
  padding: 20px;
  margin-bottom: 16px;
  background: #142124;
  border: 1px dashed #4a90a0;
  border-radius: var(--radius);
}

.settle-signin-prompt p {
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.settle-signin-link {
  color: var(--theater-blue);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}

.settle-signin-link:hover {
  color: #6ab0f0;
}

.settle-signin-btn {
  background: var(--dragon-green);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.settle-signin-btn:hover {
  background: var(--dragon-green-glow);
}

/* Rating form */
.settle-form {
  margin-bottom: 20px;
}

.settle-form-prompt {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-align: center;
}

/* Bone picker — row of clickable value buttons */
.bone-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.bone-picker-btn {
  min-width: 44px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.bone-picker-label {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.woof-label {
  color: var(--woof-red);
}

.bone-picker-icons {
  display: flex;
  align-items: center;
  gap: 1px;
  line-height: 1;
}

.bone-picker-btn:hover {
  border-color: var(--theater-blue);
  color: #fff;
}

.bone-picker-btn.selected {
  border-color: var(--dragon-green);
  background: rgba(60, 179, 113, 0.15);
  color: #fff;
  box-shadow: 0 0 8px rgba(60, 179, 113, 0.3);
}

.bone-picker-woof {
  font-size: 1.4rem;
}

.bone-picker-woof.selected {
  border-color: var(--woof-red);
  background: rgba(211, 47, 47, 0.15);
  box-shadow: 0 0 8px rgba(211, 47, 47, 0.3);
}

.bone-picker-display {
  text-align: center;
  margin-bottom: 16px;
}

/* Modifier panel */
.settle-modifiers {
  margin-bottom: 12px;
}

.settle-modifier-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
}

.settle-modifier-toggle:hover {
  border-color: var(--theater-blue);
  color: var(--text-secondary);
}

.settle-modifier-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settle-modifier-list.hidden {
  display: none;
}

.settle-modifier-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.settle-modifier-pill input[type="checkbox"] {
  accent-color: var(--dragon-green);
  width: 16px;
  height: 16px;
}

/* Custom bump fields */
.settle-custom-bump {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.settle-custom-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  width: 100%;
}

.settle-custom-name {
  flex: 1;
  min-width: 140px;
}

.settle-custom-effect {
  width: 80px;
}

.settle-custom-name,
.settle-custom-effect {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 6px 10px;
  font-size: 0.85rem;
}

.settle-custom-name:focus,
.settle-custom-effect:focus {
  border-color: var(--theater-blue);
  outline: none;
}

/* Comment textarea */
.settle-comment {
  margin-bottom: 12px;
  position: relative;
}

.settle-comment-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 10px;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}

.settle-comment-input:focus {
  border-color: var(--theater-blue);
  outline: none;
}

.settle-comment-count {
  text-align: right;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Submit / delete buttons */
.settle-submit-btn {
  width: 100%;
  padding: 12px;
  background: var(--dragon-green);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.settle-submit-btn:hover:not(:disabled) {
  background: var(--dragon-green-glow);
}

.settle-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settle-delete-btn {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  background: none;
  color: var(--woof-red);
  border: 1px solid var(--woof-red);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}

.settle-delete-btn:hover:not(:disabled) {
  background: rgba(211, 47, 47, 0.1);
}

.settle-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Ratings list */
.settle-ratings-list {
  margin-top: 20px;
}

.settle-ratings-header {
  font-size: 0.85rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* User's own rating section */
.settle-own-section {
  margin-bottom: 16px;
}

.settle-own-label {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.settle-own-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.settle-edit-btn {
  flex: 1;
  padding: 8px;
  background: none;
  color: var(--theater-blue);
  border: 1px solid var(--theater-blue);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.settle-edit-btn:hover {
  background: rgba(74, 144, 217, 0.1);
}

.settle-delete-inline {
  flex: 0 0 auto;
  width: auto;
  padding: 8px 16px;
  margin-top: 0;
  font-size: 0.85rem;
}

/* "you" badge on own rating card */
.settle-own-badge {
  display: inline-block;
  font-size: 0.65rem;
  color: var(--dragon-green);
  border: 1px solid var(--dragon-green);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* "First to Bone" badge */
.settle-first-badge {
  display: inline-block;
  font-size: 0.65rem;
  color: #f5c842;
  border: 1px solid #f5c842;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* Extra spacing between name/badge and date in user rating cards */
.settle-own-section .rating-card-role,
.settle-ratings-list .rating-card-role {
  margin-left: 10px;
}

/* --- Lodge 101 Page --- */

.lodge101-page {
  max-width: 700px;
  margin: 0 auto;
}

.lodge101-header {
  text-align: center;
  margin-bottom: 24px;
}

.lodge101-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dragon-green);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.lodge101-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.lodge101-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.lodge101-filter-btn {
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.lodge101-filter-btn:hover {
  border-color: var(--theater-blue);
  color: #fff;
}

.lodge101-filter-btn.active {
  border-color: var(--dragon-green);
  background: rgba(60, 179, 113, 0.15);
  color: var(--dragon-green);
}

.lodge101-section {
  margin-bottom: 28px;
}

.lodge101-section-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.lodge101-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--theater-blue);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.lodge101-section-subtitle {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.lodge101-term-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
}

.lodge101-term-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--dragon-green);
  margin-bottom: 6px;
}

.lodge101-term-def {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* --- Salad Dragon Section --- */
.dragon-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  border: 2px solid var(--dragon-green);
  position: relative;
  box-shadow: 0 0 20px rgba(60, 179, 113, 0.08);
}

.dragon-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.dragon-description {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.dragon-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.dragon-croutons {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(60, 179, 113, 0.2);
  font-size: 0.85rem;
  color: var(--dragon-green);
}

.dragon-croutons-label {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* --- Quote Card --- */
.quote-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 10px;
  border-left: 3px solid var(--theater-blue);
  position: relative;
}

.quote-text {
  font-size: 1rem;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 8px;
}

.quote-text::before {
  content: "\201C";
  font-size: 1.8rem;
  color: var(--theater-blue);
  opacity: 0.6;
  line-height: 0;
  vertical-align: -0.3em;
  margin-right: 2px;
}

.quote-text::after {
  content: "\201D";
  font-size: 1.8rem;
  color: var(--theater-blue);
  opacity: 0.6;
  line-height: 0;
  vertical-align: -0.3em;
  margin-left: 2px;
}

/* Multi-speaker quotes — each speaker gets their own spaced line */
.quote-text.multi-speaker::before,
.quote-text.multi-speaker::after {
  content: none;
}
.quote-text.multi-speaker {
  font-style: normal;
}
.speaker-line + .speaker-line {
  margin-top: 12px;
}

.speaker-divider {
  text-align: center;
  color: var(--text-dim);
  margin: 16px 0;
  font-size: 0.9rem;
}

.quote-attribution {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.quote-speaker {
  color: var(--dragon-green);
  font-weight: 600;
}

.quote-context {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 4px;
  text-wrap: pretty;
}

/* --- Segment Card --- */
.segment-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
}

.segment-name {
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 6px;
}

.segment-emoji {
  font-size: 2rem;
  vertical-align: middle;
}

.btn-emoji {
  font-size: 1.3rem;
  vertical-align: middle;
}

.segment-details {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- Episode Primary Filter Buttons (Solid Surface) --- */
.ep-primary-filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.ep-filter-type-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.ep-filter-btn {
  padding: 10px 18px;
  border-radius: 24px;
  border: none;
  background: var(--bg-surface);
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.ep-filter-btn:hover {
  background: #253040;
  color: var(--text-secondary);
}

.ep-filter-btn.active {
  background: linear-gradient(180deg, #1d4a35 0%, #143828 100%);
  color: #4cd88a;
}

/* --- Episode Stat Sub-Buttons (Solid Surface) --- */
.ep-stat-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Force a line break between row 1 (core stats) and row 2 (special categories) */
.ep-stat-row-break {
  flex-basis: 100%;
  height: 0;
}

.ep-stat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 24px;
  border: none;
  background: var(--bg-surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
}

.ep-stat-btn:hover {
  background: #253040;
  color: var(--text-secondary);
}

.ep-stat-btn.active {
  background: linear-gradient(180deg, #1a3558 0%, #142d4a 100%);
  color: var(--theater-blue);
}

.ep-stat-value {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
}

.ep-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: inherit;
  text-align: center;
  line-height: 1.3;
}

.ep-stat-icon {
  font-size: 1.5rem;
  line-height: 1;
}

/* --- Episode Sort Order Row (Solid Surface) --- */
.ep-sort-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.ep-sort-btn[data-mode="count"][data-dir="desc"] {
  margin-left: 12px;
}

.ep-sort-btn {
  padding: 7px 18px;
  border-radius: 24px;
  border: none;
  background: var(--bg-surface);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.ep-sort-btn:hover {
  background: #253040;
  color: var(--text-secondary);
}

.ep-sort-btn.active {
  background: linear-gradient(180deg, #1a3558 0%, #142d4a 100%);
  color: var(--theater-blue);
}

/* Most/Least sort buttons inside the stat grid */
.ep-stat-sort-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-basis: 100%;
}

/* --- Stat Toggle Button --- */
.ep-stat-toggle {
  display: none; /* hidden on desktop, shown on mobile */
  margin: 0 auto 8px;
  padding: 6px 16px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.ep-stat-toggle:hover {
  background: #253040;
  color: var(--text-secondary);
}

.ep-stat-toggle-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 0.6rem;
  vertical-align: middle;
  margin-right: 4px;
}

.ep-stat-toggle-open .ep-stat-toggle-arrow {
  transform: rotate(-90deg);
}

/* --- Stats Grid (home page) --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  border: 1px solid var(--border);
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card.clickable {
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.stat-card.clickable:hover {
  transform: translateY(-2px);
  border-color: var(--dragon-green);
}

/* --- Person Profile Stats --- */
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.profile-stat {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}

.profile-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.profile-stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* --- Person Rating Row --- */
.person-rating-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.person-rating-row:hover {
  background: var(--bg-card-hover);
}

.person-rating-movie {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  margin-right: 12px;
}

.person-rating-modifiers {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* --- Oscar Section --- */
.oscar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
}

.oscar-list-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--border);
}

.oscar-list-person {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.oscar-list-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.oscar-item-header {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
}

.oscar-item-header .poster,
.oscar-item-header .poster-stack,
.oscar-item-header .poster-vetoed {
  flex-shrink: 0;
}

.oscar-item-title-block {
  flex: 1;
  min-width: 0;
}

.oscar-list-item:last-child {
  border-bottom: none;
}

.oscar-list-item .poster-md {
  width: 100px;
  height: 150px;
}

.oscar-list-item .poster-placeholder.poster-md {
  width: 100px;
  height: 150px;
  font-size: 0.65rem;
}

/* Multi-poster stack for double/triple movie picks */
.poster-stack {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.oscar-list-item .poster-multi {
  width: 70px;
  height: 105px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-surface);
}

/* Vetoed poster overlay */
.poster-vetoed {
  position: relative;
  flex-shrink: 0;
}
.poster-vetoed .poster-md,
.poster-vetoed .poster-multi {
  opacity: 0.4;
}
.veto-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  color: #e74c3c;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 2px;
  text-shadow: 0 0 6px rgba(0,0,0,0.8);
  border: 2px solid #e74c3c;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,0.5);
  white-space: nowrap;
  pointer-events: none;
}
.veto-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #e74c3c;
  border: 1px solid #e74c3c;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.oscar-item-vetoed {
  opacity: 0.85;
}

.oscar-rank {
  font-weight: 800;
  color: var(--text-dim);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.oscar-rank-1 {
  color: var(--gold);
  font-size: 1.1rem;
}

.oscar-movie-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.oscar-commentary {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 6px;
}

.oscar-list-note {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--gold);
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.oscar-list-note em {
  color: var(--text-dim);
  font-style: italic;
}

.oscar-list-note strong {
  color: var(--text-primary);
}

/* --- Oscar Predictions --- */
.prediction-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
}

.prediction-category {
  font-weight: 700;
  color: var(--theater-blue);
  margin-bottom: 8px;
}

.prediction-pick {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  line-height: 1.5;
}

.prediction-pick:last-of-type {
  border-bottom: none;
}

.prediction-person {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.prediction-person::after {
  content: ":";
}

.prediction-picks-inline {
  color: var(--text-primary);
}

.prediction-picks-stacked {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-primary);
}

.prediction-entry-text {
  color: var(--text-primary);
}

.prediction-icon {
  font-size: 0.7rem;
}

.prediction-correct {
  color: var(--dragon-green);
  font-weight: 600;
}

.prediction-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-dim);
}

.prediction-actual-winner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

.prediction-winner-label {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.prediction-winner-value {
  color: var(--dragon-green);
  font-weight: 600;
}

/* --- Salad Dragon of the Year Cards --- */
.sdoty-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--dragon-green);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}

.sdoty-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.sdoty-card-header .poster-sm {
  flex-shrink: 0;
}

.sdoty-movie-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.sdoty-picked-by {
  font-size: 0.85rem;
  color: var(--dragon-green);
  font-weight: 600;
  margin-top: 2px;
}

.sdoty-quote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.sdoty-context {
  color: var(--text-dim);
  font-style: italic;
  margin-top: 0.5em;
  font-size: 0.9em;
}

/* ============================================
   MOVIE DETAIL TABS — Tabbed content sections
   ============================================ */

/* Tab button row */
.movie-detail-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0;
}

/* Individual tab button — Solid Surface style matching ep-filter-btn */
.movie-tab-btn {
  padding: 10px 18px;
  border-radius: 24px;
  border: none;
  background: var(--bg-surface);
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.movie-tab-btn:hover {
  background: #253040;
  color: var(--text-secondary);
}

.movie-tab-btn.active {
  background: linear-gradient(180deg, #1d4a35 0%, #143828 100%);
  color: #4cd88a;
}

/* Tab content — hidden by default, shown when active */
.movie-tab-content {
  display: none;
}

.movie-tab-content.active {
  display: block;
}

/* Person Oscar year sub-content — hidden by default, shown when active */
.person-oscar-year-content {
  display: none;
}

.person-oscar-year-content.active {
  display: block;
}

/* ============================================
   HERO BONE DISPLAY — Large bones for avg rating
   ============================================ */

.bone-display-lg {
  gap: 3px;
}

.hero-bone-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  background: linear-gradient(135deg, var(--bg-card) 0%, #0e1a28 100%);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.hero-bone-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}

.hero-bone-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  margin-top: 2px;
}

/* ============================================
   SALAD SUB-SECTIONS — Dragons, Croutons, Characters, Credits
   ============================================ */

/* Sub-section header within the Salad tab */
.salad-subsection-header {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dragon-green);
  margin-top: 24px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.salad-subsection-header:first-child {
  margin-top: 8px;
}

/* Big emoji inside salad element cards (croutons, characters) — matches dragon-icon style */
.salad-card-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

/* Crouton card — green accent, smaller than dragon */
.crouton-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid rgba(60, 179, 113, 0.3);
  border-left: 3px solid var(--dragon-green);
}

.crouton-card-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}

.crouton-card-character {
  font-weight: 600;
  color: var(--dragon-green);
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.crouton-card-attribution {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 4px;
}

.crouton-card-context {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.4;
}

/* Salad character card — theatrical mask accent */
.salad-char-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid rgba(60, 179, 113, 0.3);
  border-left: 3px solid var(--dragon-green);
}

.salad-char-name {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.salad-char-quote {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}

.salad-char-attribution {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 4px;
}

/* --- Episode Detail --- */
.bones-phrase {
  font-style: italic;
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-bottom: 16px;
  text-align: center;
  text-wrap: balance;
  padding: 12px;
  background: rgba(74, 144, 217, 0.08);
  border-radius: var(--radius-sm);
}

/* --- Listen Links --- */
.listen-section {
  margin-bottom: 20px;
  text-align: center;
}

.listen-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.listen-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}

.listen-btn:hover {
  opacity: 0.85;
  transform: scale(1.03);
}

.listen-spotify {
  background: #1DB954;
  color: #000;
}

.listen-apple {
  background: #872EC4;
  color: #fff;
}

.listen-soundcloud {
  background: #ff5500;
  color: #fff;
}

/* --- Podcast Embed Player --- */
.podcast-embed {
  width: 100%;
  max-width: 660px;
  overflow: hidden;
  border-radius: 10px;
  margin: 0 auto;
  display: block;
}

.listen-also {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 8px;
}

.listen-link {
  text-decoration: none;
  font-weight: 600;
  margin: 0 6px;
}

.listen-spotify-link { color: #1DB954; }
.listen-soundcloud-link { color: #ff5500; }
.listen-spotify-link:hover,
.listen-soundcloud-link:hover { text-decoration: underline; }

/* --- Spotify Show Embed --- */
.spotify-show-embed {
  margin-bottom: 16px;
}

/* --- Hero Quote Slot (above nav tabs) --- */
#hero-quote-slot {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}

/* --- Home Page Featured Quote --- */
.featured-quote {
  background: linear-gradient(135deg, var(--bg-card) 0%, #0e1a28 100%);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  position: relative;
}

.featured-quote .quote-text {
  font-size: 1.15rem;
}

.featured-quote-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

/* --- Notable Moment --- */
.moment-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  display: flex;
  gap: 12px;
}

.moment-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.moment-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.moment-text.multi-speaker {
  font-style: normal;
}

.moment-context {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}

.moment-person {
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Sortable Header --- */
.sort-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Grouped sort buttons — each group stays on its own line */
.sort-controls.sort-grouped {
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.sort-group {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.sort-btn {
  padding: 7px 14px;
  border-radius: 24px;
  border: none;
  background: var(--bg-surface);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.sort-btn:hover {
  background: #253040;
  color: var(--text-secondary);
}

.sort-btn.active,
.sort-btn.active-year {
  background: linear-gradient(180deg, #1a3558 0%, #142d4a 100%);
  color: var(--theater-blue);
}

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

/* --- App Footer --- */
/* --- Links page --- */
.links-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 32px;
}
.links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.link-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.link-card:hover {
  border-color: var(--dragon-green);
  background: var(--bg-card-hover);
}
.link-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 28px;
  text-align: center;
}
.link-icon svg {
  width: 100%;
  height: 100%;
}
.link-title {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 500;
}
.link-arrow {
  color: var(--text-dim);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.app-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 32px 20px 24px;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-style: italic;
  letter-spacing: 0.5px;
}

.app-footer-signoff {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 6px;
}

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

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.gap-8 { gap: 8px; }

.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.clickable-link {
  color: var(--dragon-green);
  cursor: pointer;
}

.clickable-link:hover {
  color: var(--dragon-green-glow);
  text-decoration: underline;
}

/* --- Oscar Navigation --- */
.oscar-nav {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oscar-nav-top {
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 8px;
}


.oscar-nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Wrapper for person filtering — transparent to grid layout */
.oscar-list-wrapper {
  min-width: 0;
}

/* Oscar nav buttons use Solid Surface base (override sort-btn defaults) */
.oscar-nav .sort-btn {
  background: var(--bg-surface);
  border: none;
  border-radius: 24px;
  color: var(--text-dim);
  transition: all 0.2s;
}

.oscar-nav .sort-btn:hover {
  background: #253040;
  color: var(--text-secondary);
}

/* Gold highlight for current year */
.oscar-nav .sort-btn.active-year {
  background: linear-gradient(180deg, #3a2e10 0%, #2a2008 100%);
  color: var(--gold);
}

/* Green highlight for active section tab */
.oscar-nav .sort-btn.active-section {
  background: linear-gradient(180deg, #1d4a35 0%, #143828 100%);
  color: #4cd88a;
}

/* Blue highlight for active person filter */
.oscar-nav .sort-btn.active-person {
  background: linear-gradient(180deg, #1a3558 0%, #142d4a 100%);
  color: var(--theater-blue);
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .hero-cover-art {
    width: 180px;
    height: 180px;
    border-radius: 12px;
  }

  /* Hero quote — compact on mobile */
  .featured-quote {
    padding: 14px;
    margin-bottom: 16px;
  }

  .featured-quote .quote-text {
    font-size: 0.9rem;
  }

  .featured-quote-label {
    font-size: 0.6rem;
    margin-bottom: 4px;
  }

  /* Auth controls on mobile — tighter spacing */
  .auth-controls {
    right: 8px;
    top: 4px;
  }

  body.beta-active .auth-controls {
    top: 44px;
  }

  .detail-title {
    font-size: 1.3rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .oscar-grid {
    grid-template-columns: 1fr;
  }

  .profile-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .movie-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .movie-card-rating {
    text-align: left;
  }

  .movie-card-avg {
    font-size: 1.4rem;
  }

  .poster-md {
    width: 100px;
    height: 150px;
  }

  .poster-sm {
    width: 50px;
    height: 75px;
  }

  .detail-header-with-poster {
    gap: 10px;
  }

  /* Movie detail — smaller poster on mobile */
  .detail-header-with-poster .poster-md {
    width: 80px;
    height: 120px;
  }

  .detail-meta-lines {
    font-size: 0.8rem;
  }

  /* Oscar detail page header — compact on mobile */
  .oscar-ep-artwork-lg {
    width: 70px;
    height: 70px;
  }

  .detail-subtitle {
    font-size: 0.75rem;
  }

  /* Auth modal full-width on mobile */
  .auth-modal {
    padding: 24px 20px;
  }

  /* Feedback popover */
  .feedback-popover {
    width: calc(100vw - 32px);
    left: 16px !important;
  }

  /* Admin stats wrap */
  .admin-stats {
    gap: 8px;
  }

  .admin-stat {
    min-width: 60px;
    padding: 8px;
  }

  .admin-stat-value {
    font-size: 1.1rem;
  }

  /* Oscar nav mobile */
  .oscar-nav .sort-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
  }

  /* Movie detail tabs — compact on mobile */
  .movie-tab-btn {
    padding: 8px 14px;
    font-size: 0.78rem;
  }

  .hero-bone-rating {
    gap: 12px;
    padding: 12px;
  }

  .hero-bone-number {
    font-size: 2.4rem;
  }

  /* Episode filter buttons — type row wraps on small screens */
  .ep-filter-type-row {
    gap: 6px;
  }

  .ep-filter-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .ep-filter-hide-mobile {
    display: none;
  }

  /* Show the stat toggle on mobile */
  .ep-stat-toggle {
    display: block;
  }

  /* Stat row collapsed on mobile — hidden until toggled */
  .ep-stat-row.ep-stat-row-collapsed {
    display: none;
  }

  .ep-stat-btn {
    padding: 5px 7px;
  }

  .ep-stat-value {
    font-size: 0.9rem;
  }

  .ep-stat-icon {
    font-size: 1.1rem;
  }

  .ep-stat-label {
    font-size: 0.6rem;
  }

  .ep-sort-btn {
    padding: 7px 16px;
    font-size: 0.82rem;
  }

  /* Remove the forced line break between row 1/2 so stat buttons flow freely */
  .ep-stat-row-break {
    display: none;
  }

  /* Most/Least buttons match Newest/Oldest sizing on mobile */
  .ep-sort-count-btn {
    padding: 7px 16px;
    font-size: 0.82rem;
  }
  .ep-stat-row-break-sort {
    display: block !important;
    flex-basis: 100%;
    height: 0;
  }

  /* Emoji count row — slightly smaller on mobile */
  .emoji-count-group {
    font-size: 0.75rem;
  }

  .ep-woof-display {
    font-size: 0.75rem;
  }

  /* Stat buttons wrap nicely on mobile */
  .ep-stat-row {
    gap: 3px;
  }

  /* Oscar year buttons — horizontal scroll instead of wrapping */
  .oscar-year-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: none; /* Firefox */
  }
  .oscar-year-row::-webkit-scrollbar {
    display: none; /* Safari/Chrome */
  }

  /* Oscar list items — poster + title in header row, quote below at full width */
  .oscar-list-item .poster-md {
    width: 50px;
    height: 75px;
  }

  .oscar-list-item .poster-placeholder.poster-md {
    width: 50px;
    height: 75px;
    font-size: 0.5rem;
  }

  .oscar-list-item .poster-multi {
    width: 40px;
    height: 60px;
  }

  .oscar-list-card {
    padding: 14px;
  }

  .oscar-movie-title {
    font-size: 0.9rem;
  }

  /* Segment filter buttons — compact on mobile */
  .seg-filter-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
  }

  /* Prev/next nav — tighter on mobile */
  .ep-nav-title {
    max-width: 100px;
  }

  .total-woof-banner,
  .four-boner-banner {
    padding: 10px 14px;
    gap: 8px;
  }
}

/* --- Segment Filter Buttons (movie detail Segments tab) --- */
#segments-filter-row {
  scroll-margin-top: 120px;
}
.seg-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.seg-filter-btn {
  padding: 8px 14px;
  border-radius: 24px;
  border: none;
  background: var(--bg-surface);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.seg-filter-btn:hover {
  background: #253040;
  color: var(--text-secondary);
}

.seg-filter-btn.active {
  background: linear-gradient(180deg, #1a3558 0%, #142d4a 100%);
  color: var(--theater-blue);
}

/* --- Live Rewrite Cards --- */
.live-rewrite-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  border-left: 3px solid var(--orange);
  position: relative;
}

.live-rewrite-card.proto-rewrite {
  border-left-color: rgba(255, 159, 67, 0.4);
}

.live-rewrite-label {
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.proto-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 159, 67, 0.15);
  color: var(--orange);
  border: 1px solid rgba(255, 159, 67, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
}

.live-rewrite-quote {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.live-rewrite-pitcher {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Live Recast — teal accent to distinguish from rewrites */
.live-recast-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  border-left: 3px solid var(--teal);
  position: relative;
}

.live-recast-label {
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 6px;
}

/* --- Music Cue Cards --- */
.music-cue-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 3px solid var(--purple);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
}

.music-cue-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.music-cue-body {
  flex: 1;
  min-width: 0;
}

.music-cue-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.music-cue-artist {
  color: var(--purple);
  font-size: 0.9rem;
  margin-top: 2px;
}

.music-cue-meta {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.music-cue-type {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-top: 4px;
}

.music-cue-links {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.music-cue-link {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--purple);
  text-decoration: none;
}

.music-cue-link:hover {
  color: #ba68c8;
}

/* Music player toggle buttons (Apple Music / Spotify) */
.music-player-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.music-player-toggle {
  background: transparent;
  border: 1px solid var(--purple);
  color: var(--purple);
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
}

.music-player-toggle:hover {
  background: rgba(156, 39, 176, 0.15);
}

.music-player-toggle.music-player-active {
  background: var(--purple);
  color: #fff;
}

/* Spotify search link — styled to match toggle buttons but as a link */
.music-link-spotify-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid #1DB954;
  color: #1DB954;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
  text-decoration: none;
}

.music-link-spotify-btn:hover {
  background: rgba(29, 185, 84, 0.15);
  color: #1DB954;
}

/* Embed container — smooth expand/collapse */
.music-embed-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  margin-top: 0;
}

.music-embed-container.music-embed-open {
  max-height: 200px;
  opacity: 1;
  margin-top: 8px;
}

.music-embed-container iframe {
  display: block;
  border: none;
  border-radius: 8px;
  width: 100%;
}

/* Music subsection headers on detail pages */
.music-subsection-header {
  font-weight: 700;
  font-size: 1rem;
  color: var(--purple);
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}