/* ============================================================
   Movie Club — Cinematic Restyle
   Same DOM as production. New paint.
   ============================================================ */

:root {
  --ink: #0A0A0B;          /* true black / curtain */
  --warm: #14110f;         /* warm dark, deeper than production */
  --carbon: #1c1a18;       /* card / panel */
  --carbon-2: #221f1c;     /* hover / lifted panel */
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);

  --cream: #e8e2d5;        /* primary text */
  --bone: #f0ece2;
  --muted: #8a8378;        /* secondary text */
  --muted-2: #65605a;      /* tertiary */

  --red: #C9302C;          /* exit-sign red */
  --red-glow: rgba(201,48,44,.45);
  --gold: #D4A24C;         /* lobby gold */
  --gold-glow: rgba(212,162,76,.5);
  --velvet: #3A2E26;
}

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

html, body {
  background: var(--ink);
  color: var(--cream);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: hidden would turn html/body into scroll containers and
     BREAK position: sticky on the marquee + header. Use `clip` instead —
     it prevents horizontal overflow without creating a scroll context. */
  overflow-x: clip;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* (projector grain overlay removed — was creating a faint dot grid
   across the whole page) */
body::after { content: none; }

/* === ROLLING RED MARQUEE ===
   Sticky at the top so it stays visible while scrolling. The header
   sticks just below it. */
.marquee {
  background: var(--red);
  color: var(--cream);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 110;
  border-top: 1px solid #6e1a17;
  border-bottom: 1px solid #6e1a17;
}
/* Bottom marquee should stay in the page flow, not stick */
.marquee.bottom { position: relative; }
.marquee-track {
  display: inline-block; white-space: nowrap; padding: 9px 0;
  /* Slowed a further 15% (240s → 282s) on top of the earlier 60s→240s
     reduction, for a more leisurely read with the longer item list. */
  animation: scroll 282s linear infinite;
  font: 400 13px/1 'Bebas Neue', 'DM Sans', sans-serif;
  letter-spacing:.28em;
}
/* Spacing logic: each item is <span>text</span>, with the bullet rendered
   as the span's ::before. Putting the gap on both sides of the bullet
   (and NOT on the span itself) keeps the bullet visually centred between
   neighbouring items. Old version had margin on both span + ::before which
   doubled the lead-in gap and made bullets feel glued to the next item. */
.marquee-track span { margin: 0; }
.marquee-track span::before {
  content:"●"; margin: 0 28px; color: var(--gold);
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* === HEADER ===
   Sticks just below the marquee. Marquee track is ~33px (13px font +
   18px padding + 2px borders), so header offset top: 33px. */
.header {
  /* Pure black — no transparency or backdrop blur */
  background: #000;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  position: sticky; top: 33px; z-index: 100;
}
.container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.header .container { padding: 0 32px; }
.header-content { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }

.logo { display: flex; align-items: center; gap: 14px; }
.logo .mark {
  font: 400 30px/1 'Bebas Neue', sans-serif;
  letter-spacing: .18em;
  color: var(--cream);
  text-transform: uppercase;
}
.logo .mark em {
  color: var(--red);
  font-style: normal;
  text-shadow: 0 0 14px var(--red-glow);
  margin: 0 2px;
}
.logo .mark-tag {
  font: 500 10px/1 'DM Sans',sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}
.logo-img { display: none; }
@media (max-width: 700px) {
  .logo .mark-tag { display: none; }
}

.nav {
  display: flex; gap: 2px; align-items: center;
  flex-wrap: wrap;
}
.nav-btn, .nav-link {
  font: 500 11px/1 'DM Sans', sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 10px 14px;
  background: transparent;
  color: var(--cream);
  opacity: .55;
  border: 1px solid transparent;
  cursor: pointer;
  transition: .15s;
  font-weight: 500;
}
.nav-btn:hover, .nav-link:hover {
  opacity: 1;
  background: rgba(255,255,255,.04);
}
.nav-btn.active, .nav-link.active {
  opacity: 1;
  color: var(--gold);
  border-color: rgba(212,162,76,.45);
  background: rgba(212,162,76,.06);
}

/* AUTH widget */
.auth-container { position: relative; }
.auth-signin-btn {
  font: 500 11px/1 'DM Sans', sans-serif;
  letter-spacing:.24em; text-transform: uppercase;
  background: var(--red);
  color: var(--cream);
  padding: 12px 20px;
  border: none; cursor: pointer;
  transition: .15s;
}
.auth-signin-btn:hover { background:#e63a36; box-shadow:0 0 24px var(--red-glow); }

.auth-user { position: relative; display: flex; align-items: center; gap: 12px; }
.auth-profile-btn {
  display:flex; align-items:center; gap:10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--cream);
  padding: 8px 14px 8px 8px;
  cursor: pointer;
  font: 500 12px/1 'DM Sans',sans-serif;
  letter-spacing:.06em;
  transition: .15s;
}
.auth-profile-btn:hover { border-color: var(--gold); background: rgba(212,162,76,.06); }
.auth-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(212,162,76,.5);
  object-fit: cover;
}
.auth-name { font: 500 12px/1 'DM Sans',sans-serif; color: var(--cream); }
.auth-chevron { color: var(--muted); transition: transform .2s; }
.auth-user.open .auth-chevron { transform: rotate(180deg); color: var(--gold); }

.auth-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: var(--carbon);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: .15s;
  z-index: 200;
}
.auth-user.open .auth-dropdown { opacity:1; visibility: visible; transform: translateY(0); }
.auth-dropdown-header {
  padding: 12px 14px;
  font: 500 11px/1.3 'DM Sans',sans-serif;
  color: var(--muted);
  letter-spacing:.08em;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.auth-dropdown-item {
  width: 100%; text-align: left;
  background: transparent; border: none; color: var(--cream);
  padding: 10px 14px;
  font: 500 12px/1 'DM Sans',sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .12s;
}
.auth-dropdown-item:hover { background: rgba(212,162,76,.1); color: var(--gold); }

/* === MAIN === */
.main { padding-bottom: 24px; min-height: calc(100vh - 240px); }
.main .container { padding: 32px; }

.view { display: none; }
.view.active { display: block; }

/* Pre-paint view routing: if data-init-view is set on <html> (by the
   inline script at the top of body), suppress the default .active film
   view ONLY when the target is something else, and show the targeted
   view. The hide rule has 1 ID + 2 classes (specificity 1-2-0), so the
   show rules need .active matched too to win the cascade. */
html[data-init-view="wheel"]   #films.view.active,
html[data-init-view="members"] #films.view.active,
html[data-init-view="stats"]   #films.view.active,
html[data-init-view="quotes"]  #films.view.active { display: none; }
html[data-init-view="films"]   #films.view,
html[data-init-view="films"]   #films.view.active   { display: block; }
html[data-init-view="wheel"]   #wheel.view,
html[data-init-view="wheel"]   #wheel.view.active   { display: block; }
html[data-init-view="members"] #members.view,
html[data-init-view="members"] #members.view.active { display: block; }
html[data-init-view="stats"]   #stats.view,
html[data-init-view="stats"]   #stats.view.active   { display: block; }
html[data-init-view="quotes"]  #quotes.view,
html[data-init-view="quotes"]  #quotes.view.active  { display: block; }

/* === HERO BANNER (This Week's Pick) ===
   Content-width banner locked to 2.39:1 anamorphic cinemascope. Sits inside
   the same gutters as the controls/film grid below so it reads as a card
   rather than a page-dominating header, while still keeping the cinematic
   crop ratio. */
.hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 2.39 / 1;
  margin: 0 0 24px;
  padding: 0;
  background: var(--ink);
  overflow: hidden;
  border: 1px solid var(--line);
}
.hero-banner .hero-backdrop {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  filter: saturate(.9) contrast(1.05);
}
/* Unified darkening — uniform overlay, not a gradient. Less dramatic than
   the old double-gradient (which crushed 92% at bottom + 85% at left). */
.hero-banner::after {
  content:""; position: absolute; inset: 0;
  background: rgba(10, 10, 11, 0.45);
  z-index: 1;
}
/* Content pinned to bottom-left over the uniformly-darkened image. */
.hero-content {
  position: absolute; inset: auto 0 0 0; z-index: 5;
  padding: 0 32px 40px;
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.hero-label {
  font: 500 11px/1 'DM Sans', sans-serif;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--red);
  border-left: 3px solid var(--red);
  padding-left: 14px;
}
.hero-title {
  font: 400 84px/.9 'Bebas Neue', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
  border-left: 3px solid var(--red);
  padding-left: 14px;
  margin-top: -4px;
}
.hero-meta {
  font: 500 13px/1.4 'DM Sans', sans-serif;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--cream);
  opacity: .85;
  padding-left: 17px;
}
.hero-rating {
  font: 500 13px/1 'DM Sans', sans-serif;
  letter-spacing: .14em;
  color: var(--gold);
  padding-left: 17px;
  margin-top: 6px;
}

/* === CONTROLS (search + filters) === */
/* Desktop layout — single row:
   [ search box (flexes) ][ filter dropdowns ][ 44×44 view toggle ]
   Mobile (≤600px) overrides this further down: search+toggle on row 1,
   filters collapsed into <details> on row 2. */
.controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto 44px;
  column-gap: 14px;
  align-items: center;
  margin-bottom: 28px;
  padding: 18px 20px;
  background: var(--carbon);
  border: 1px solid var(--line);
}
.controls > .search-box   { grid-column: 1; grid-row: 1; }
.controls > .filters-details,
.controls > .filters       { grid-column: 2; grid-row: 1; min-width: 0; }
.controls > .view-toggle   { grid-column: 3; grid-row: 1; align-self: center; }

/* Hide the <details>/<summary> chrome on desktop — the filter dropdowns
   should render inline, not behind a "Filters ▾" tap target. */
.filters-details > summary { display: none; }

.search-box { position: relative; min-width: 240px; }
.search-box input {
  width: 100%;
  height: 44px;
  background: var(--ink);
  border: 1px solid var(--line-2);
  color: var(--cream);
  padding: 0 36px;
  font: 500 13px/1 'DM Sans',sans-serif;
  letter-spacing: .04em;
}
.search-box input::placeholder { color: var(--muted-2); }
.search-box input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-glow);
}
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); cursor: pointer; padding: 4px;
  opacity: 0; pointer-events: none; transition: .15s;
  font-size: 14px;
}
.search-clear.visible { opacity: 1; pointer-events: auto; }
.search-clear:hover { color: var(--red); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters select {
  height: 44px;
  background: var(--ink);
  border: 1px solid var(--line-2);
  color: var(--cream);
  padding: 0 30px 0 14px;             /* right padding makes room for chevron */
  font: 500 12px/1 'DM Sans',sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  /* Strip the native arrow so we can position a custom one */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* Custom gold chevron — sits 8px from the right edge of the select
     (native chevron sat at the ~12px gap; nudge 4px LEFT means 8px gap). */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='none' stroke='%23D4A24C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
}
.filters select:focus { outline: none; border-color: var(--gold); }
.filters select:hover { border-color: var(--gold); }
/* Hide the default arrow in IE/Edge legacy */
.filters select::-ms-expand { display: none; }

/* Square icon view toggle — same look on desktop AND mobile.
   When grid view is active, shows a 3-line "list" icon (tap to go back to list).
   When list view is active, shows a 4-square "grid" icon (tap to switch to grid). */
.view-toggle {
  width: 44px; height: 44px;
  padding: 0;
  font-size: 0;
  background: var(--ink) no-repeat center / 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8e2d5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><rect x='14' y='14' width='7' height='7'/></svg>");
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: .15s;
}
.view-toggle:hover { border-color: var(--gold); }
/* When grid view is active, swap to the list icon.
   Driven by an .is-grid-view class on the toggle that the cinematic shim
   keeps in sync with #films-grid.list-view via MutationObserver — Chrome's
   :has() invalidation doesn't re-evaluate cross-subtree on class changes. */
.view-toggle.is-grid-view {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8e2d5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='6' x2='20' y2='6'/><line x1='4' y1='12' x2='20' y2='12'/><line x1='4' y1='18' x2='20' y2='18'/></svg>");
}

.comparison-toggle {
  background: var(--red);
  border: 1px solid var(--red);
  color: var(--cream);
  padding: 12px 18px;
  font: 500 12px/1 'DM Sans',sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .15s;
}
.comparison-toggle:hover {
  background: #e63a36; border-color: #e63a36; color: var(--cream);
  box-shadow: 0 0 24px var(--red-glow);
}

/* === RESULTS INFO === hidden by design */
.results-info { display: none !important; }

/* === FILMS GRID === */
.films-grid {
  display: grid;
  /* 6 columns at typical desktop widths (1376px container → ~218px each
     with 5 × 14px gaps). minmax floor sized so auto-fill picks 6, not 7. */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.films-grid.list-view {
  display: flex; flex-direction: column; gap: 6px;
}

/* CARD (shared base — both list and grid) */
.film-card {
  background: var(--carbon);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  transition: .25s ease;
  position: relative;
}
.film-card:hover {
  /* Thin gold outline (1px) — matches the poster outline thickness.
     Lift shadow stays for depth; no doubled box-shadow ring. */
  border-color: var(--gold);
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}

.film-card .film-poster {
  position: relative;
  background: #111;
  overflow: hidden;
  /* No border by default — thin gold outline appears on hover via the
     wrapper's hover rule below. transition keeps it smooth. */
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: outline-color .2s ease, box-shadow .2s ease;
}
.film-card .film-poster img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Thin gold outline around the poster on hover (both list + grid views) */
.film-card:hover .film-poster {
  outline-color: var(--gold);
  box-shadow: 0 0 18px rgba(212,162,76,.35);
}

.film-card .film-title {
  font: 400 24px/.95 'Bebas Neue', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream);
}
.film-card:hover .film-title { color: var(--gold); }
.film-card .film-meta {
  font: 600 12px/1.4 'DM Sans',sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .78;
}
.film-card .film-ratings {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 500 11.5px/1.35 'DM Sans',sans-serif;
  font-feature-settings: "tnum";
}

/* Each row: name | num | stars | quote — every column is a fixed slot
   so name length, rating count, AND comment all align vertically across rows */
.film-card .rating-row {
  display: grid;
  grid-template-columns: 60px 30px 90px 1fr;
  gap: 10px;
  align-items: baseline;
  color: var(--gold);
}
.film-card .rating-row .member-name {
  color: var(--muted-2);
  font-weight: 500;
  letter-spacing: .02em;
  font-size: 11.5px;
}
.film-card .rating-row .rating-num {
  color: var(--muted-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.film-card .rating-row .star-bar {
  color: var(--gold);
  letter-spacing: .06em;
}
/* Half-star: clip a full ★ to its left half — matches the live site treatment */
.film-card .rating-row .star-bar .half-star {
  display: inline-block;
  width: .5em;
  overflow: hidden;
  vertical-align: top;
  margin: 0;
  opacity: 1;
}
.film-card .rating-row .inline-quote {
  color: var(--muted);
  font-weight: 400;
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Film number badge (rendered by app.js as <div class="film-number">) */
.film-card .film-number {
  font: 400 22px/1 'Bebas Neue', sans-serif;
  letter-spacing: .08em;
  color: var(--gold);
  font-feature-settings: "tnum";
}

/* Companion microsite badge (rendered by app.js inside .film-card for
   films that have a deep-dive companion site). Absolute-positioned at
   the top-right corner so it sits OUTSIDE the card's grid layout —
   without this rule the badge lands in a grid cell and shoves the
   poster/info columns around (which is what the user reported on
   2001, Lost in Translation, and Her). */
.film-card .film-companion {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(212, 162, 76, .35);
  color: var(--gold);
  font: 500 9px/1 'DM Sans', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: .85;
  transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
.film-card .film-companion:hover {
  opacity: 1;
  border-color: var(--gold);
  background: rgba(212, 162, 76, .12);
}
.film-card .film-companion__arrow {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  display: block;
}
.film-card.list-view .film-companion {
  /* List view rows are short and the badge would otherwise crowd the
     rating cluster on the right. Pin to top of the card. */
  top: 8px;
  right: 10px;
}

/* Mobile: collapse to a tiny icon-only chip in the corner so the label
   text doesn't overlap the film number / poster on narrow cards. The
   title attribute still surfaces the destination on long-press. */
@media (max-width: 600px) {
  .film-card .film-companion {
    padding: 5px;
    gap: 0;
    line-height: 0;
  }
  .film-card .film-companion__label {
    /* Visually hidden but still accessible to screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  .film-card .film-companion__arrow {
    width: 11px;
    height: 11px;
  }
}
/* In list view: dial it right back — same size and weight as the director meta,
   so it reads as a marginal reference, not a primary element */
.film-card.list-view .film-number {
  font: 500 11px/1.4 'DM Sans', sans-serif !important;
  letter-spacing: .12em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.film-card.list-view:hover .film-number { color: var(--muted); }

/* === LIST VIEW row === 15% smaller than before */
.film-card.list-view {
  display: grid;
  grid-template-columns: 66px 110px 1fr;
  gap: 18px;
  align-items: center;
  padding: 15px 19px;
  background: var(--carbon);
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  transform-origin: center;
}
.film-card.list-view:hover {
  background: var(--carbon-2);
  /* Whole row pops forward — same approach as the grid card scale */
  transform: scale(1.02);
  z-index: 5;
}
.film-card.list-view .film-number {
  text-align: center;
  /* No divider — number just floats centered in its own slot */
}
.film-card.list-view:hover .film-number { color: var(--gold); }
.film-card.list-view .film-poster {
  width: 110px; height: 165px;
  flex-shrink: 0;
}
.film-card.list-view .film-info {
  display: flex; flex-direction: column; gap: 6px;
  /* Anchor title/director to top of the row so a locked-in (unrated) film
     sits at the same height as a fully-rated row. */
  align-self: start;
  padding-top: 6px;
}
.film-card.list-view .film-title { font-size: 24px; line-height: .95; }
.film-card.list-view .film-ratings { margin-top: 12px; }

/* === GRID VIEW card === */
.films-grid:not(.list-view) .film-card {
  display: flex; flex-direction: column;
}
.films-grid:not(.list-view) .film-card {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  transform-origin: center;
}
.films-grid:not(.list-view) .film-card:hover {
  /* Whole card scales up — poster, info, frame all grow together */
  transform: scale(1.05);
  z-index: 5;
}
.films-grid:not(.list-view) .film-poster {
  aspect-ratio: 2/3;
  width: 100%; height: auto;
}
.films-grid:not(.list-view) .film-info {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 5px;
  flex: 1;
}
/* Grid view: hide the film number entirely — posters speak for themselves */
.films-grid:not(.list-view) .film-number { display: none; }
.films-grid:not(.list-view) .film-title {
  font-size: 19px;
}
/* Grid view: hide member quotes, tighten the row to 3 aligned columns */
.films-grid:not(.list-view) .rating-row {
  grid-template-columns: 60px 32px auto;
}
.films-grid:not(.list-view) .inline-quote { display: none; }
.films-grid:not(.list-view) .film-ratings { gap: 3px; }

/* === STATS === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 32px;
}
.stat-card {
  background: var(--carbon);
  padding: 32px 24px;
  text-align: center;
}
.stat-card h3 {
  font: 500 10px/1 'DM Sans',sans-serif;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.stat-number {
  font: 400 64px/.85 'Bebas Neue',sans-serif;
  letter-spacing: .04em;
  color: var(--gold);
  font-feature-settings: "tnum";
}

.stats-section {
  background: var(--carbon);
  border: 1px solid var(--line);
  padding: 28px;
  margin-bottom: 20px;
}
.stats-section h3 {
  font: 400 32px/.95 'Bebas Neue',sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.member-stats { display: grid; gap: 8px; }
.member-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.member-name { font: 500 14px/1 'DM Sans',sans-serif; color: var(--cream); }
.member-rating { font: 500 14px/1 'DM Sans',sans-serif; color: var(--gold); font-feature-settings: "tnum"; }

/* === WHEEL === */
.wheel-container {
  background: var(--carbon);
  border: 1px solid var(--line);
  /* Top padding halved (was 48px) — closes the gap between the header
     and the wheel itself per design feedback. Sides/bottom stay at 48px. */
  padding: 24px 48px 48px;
  margin-bottom: 24px;
  text-align: center;
}
.wheel-wrapper {
  position: relative;
  /* Wheel scaled +10% (was 66% / 660px max). The wedge text and pointer
     scale with it because their sizes are %-of-wrapper. */
  width: 72.6%;
  max-width: 726px;
  min-width: 300px;
  margin: 0 auto;
}
#wheel-canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.75)) drop-shadow(0 2px 8px rgba(0,0,0,.5));
  cursor: default;
}
#led-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: auto !important;
  pointer-events: none;
  z-index: 2;
}
.wheel-pointer {
  position: absolute;
  /* Nudged 10px to the LEFT so the arrow tip overlaps the wheel
     slightly instead of floating just outside it. */
  right: calc(5.2% + 10px);
  top: 50%;
  transform: translateY(-50%);
  transform-origin: right center;
  z-index: 10;
  line-height: 1;
  /* No pulse animation — overridden to none in the cinematic rule below too */
  animation: none;
}
.wheel-pointer svg { display: block; }
.wheel-pointer svg polygon { fill: #fff; stroke: #fff; }
.wheel-center-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 13%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2622, #14110f 55%, #0a0a0b);
  border: 3px solid rgba(212,162,76,.6);
  color: rgba(212,162,76,.8);
  font: 700 14px/1 'Bebas Neue', sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
  z-index: 10;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.8);
}
.wheel-center-btn:active {
  transform: translate(-50%, -50%) scale(.91);
  background: #0a0a0b;
}
.wheel-center-btn:disabled { color: rgba(212,162,76,.3); cursor: default; }
#wheel-canvas:hover { transform: none; }
#wheel-ring {
  /* inline-styled in HTML; override colour to gold instead of pink */
  border-color: rgba(212,162,76,.75) !important;
  box-shadow: 0 0 14px rgba(212,162,76,.7), inset 0 0 8px rgba(212,162,76,.3) !important;
}
.spin-button {
  font: 400 24px/1 'Bebas Neue',sans-serif;
  letter-spacing: .36em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--cream);
  padding: 20px 48px;
  border: 2px solid var(--gold);
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(212,162,76,.4),
    0 0 40px var(--red-glow),
    0 12px 30px rgba(0,0,0,.5);
  transition: .2s;
  margin-top: 28px;
}
.spin-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px var(--gold),
    0 0 60px var(--red-glow),
    0 18px 40px rgba(0,0,0,.6);
}
.spin-button:active { transform: translateY(0); }
.spin-button:disabled {
  opacity: .5; cursor: not-allowed;
  background: var(--carbon); border-color: var(--line);
  box-shadow: none;
}

.spin-text { display: inline-block; }

.wheel-result {
  background: var(--carbon);
  border: 1px solid var(--gold);
  padding: 32px;
  text-align: center;
  margin: 20px 0;
  box-shadow: 0 0 40px var(--gold-glow);
}
.result-label {
  font: 500 11px/1 'DM Sans',sans-serif;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.result-title {
  font: 400 64px/.9 'Bebas Neue',sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 12px;
}
.result-suggestor, .result-meta {
  font: 500 12px/1.4 'DM Sans',sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.lock-in-btn {
  font: 400 18px/1 'Bebas Neue',sans-serif;
  letter-spacing: .32em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--ink);
  padding: 16px 36px;
  border: none;
  cursor: pointer;
  margin-top: 18px;
  transition: .15s;
}
.lock-in-btn:hover { background: var(--cream); }
.lock-in-btn:disabled { opacity:.5; cursor: not-allowed; }
.lock-in-btn.locked { background: var(--red); color: var(--cream); }

/* Wheel result overlay (full screen).
   app.js sets inline `left`/`top` in px on .wheel-result-overlay-content,
   which would shove the card off-screen — we override with !important and
   force flex centering so the card always lands in the viewport middle. */
.wheel-result-overlay {
  position: fixed !important; inset: 0 !important;
  z-index: 9999;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wheel-result-overlay-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,10,11,.92);
  backdrop-filter: blur(20px);
}
.wheel-result-overlay-content {
  position: relative !important;
  /* nuke app.js inline positioning */
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important;
  background: var(--carbon);
  border: 1px solid var(--gold);
  padding: 36px 40px 32px;
  text-align: center;
  width: min(440px, 90vw);
  max-width: 440px;
  box-shadow: 0 0 60px var(--gold-glow), 0 30px 60px rgba(0,0,0,.6);
  font-family: 'DM Sans', sans-serif;
}
.wheel-result-overlay-content .result-label {
  font: 500 11px/1 'DM Sans', sans-serif !important;
  letter-spacing: .42em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  margin-bottom: 12px !important;
}
.wheel-result-overlay-content .result-title {
  font: 400 44px/.95 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--cream) !important;
  margin: 0 0 10px !important;
}
.wheel-result-overlay-content .result-suggestor,
.wheel-result-overlay-content .result-meta {
  font: 500 11px/1.4 'DM Sans', sans-serif !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin: 4px 0 !important;
}
.wheel-result-overlay-content .lock-in-btn {
  font: 400 16px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  background: var(--gold) !important;
  color: var(--ink) !important;
  padding: 14px 28px !important;
  border: none !important;
  margin-top: 18px !important;
}
.wheel-result-close {
  position: absolute; top: 10px; right: 14px;
  background: transparent; border: none;
  color: var(--muted); font: 400 26px/1 'Bebas Neue', sans-serif; cursor: pointer;
  transition: .15s;
}
.wheel-result-close:hover { color: var(--red); }

/* Queue management — trim the dead space below the tile */
.queue-management {
  background: var(--carbon);
  border: 1px solid var(--line);
  padding: 28px 28px 22px;
  margin-top: 24px;
  margin-bottom: 0;
}
.queue-management h3 {
  font: 400 32px/1 'Bebas Neue',sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 18px;
}
.add-film-form {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.queue-input, .queue-select {
  background: var(--ink);
  border: 1px solid var(--line-2);
  color: var(--cream);
  padding: 12px 14px;
  font: 500 13px/1 'DM Sans',sans-serif;
  letter-spacing: .04em;
}
.queue-input { flex: 1; min-width: 200px; }
.queue-input::placeholder { color: var(--muted-2); }
.queue-input:focus, .queue-select:focus { outline: none; border-color: var(--gold); }
.queue-btn {
  font: 500 12px/1 'DM Sans',sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--cream);
  padding: 12px 22px;
  border: none;
  cursor: pointer;
  transition: .15s;
}
.queue-btn:hover { background: #e63a36; box-shadow: 0 0 18px var(--red-glow); }
.queue-list { display: flex; flex-direction: column; gap: 4px; }

/* Guest toggle */
.guest-toggle {
  display: inline-flex; align-items: center; cursor: pointer;
  user-select: none;
}
.toggle-slider {
  position: relative;
  display: inline-block;
  width: 38px; height: 20px;
  background: var(--line);
  border: 1px solid var(--line-2);
  transition: .2s;
}
.toggle-slider::after {
  content:""; position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--muted);
  transition: .2s;
}
.guest-toggle input:checked + .toggle-slider { background: var(--red); border-color: var(--red); }
.guest-toggle input:checked + .toggle-slider::after { left: auto; right: 2px; background: var(--cream); }

/* === MODAL === */
.modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 5000;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(8px);
  align-items: flex-start; justify-content: center;
  padding: 60px 20px;
  overflow-y: auto;
}
.modal.active { display: flex; }
.modal-content {
  background: var(--carbon);
  border: 1px solid var(--gold);
  padding: 0;
  max-width: 920px; width: 100%;
  position: relative;
  box-shadow: 0 0 80px rgba(212,162,76,.3), 0 30px 80px rgba(0,0,0,.7);
}
.modal-close {
  position: absolute; top: 14px; right: 18px;
  background: transparent; border: none;
  color: var(--muted); font-size: 32px; cursor: pointer;
  z-index: 5;
  transition: .15s;
}
.modal-close:hover { color: var(--red); }

/* Film modal close button — mirror the "FILM #149" label in the top-left.
   Same top offset, same horizontal distance from the edge, same font/weight/
   colour. Keeps the modal's top corners visually balanced. */
#film-modal .modal-close {
  top: 16px;
  right: 24px;
  font: 600 22px/1 'DM Sans', sans-serif;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1.5px;
  padding: 0;
  line-height: 1;
}
#film-modal .modal-close:hover { color: var(--red); }

/* === QUOTES === */
.quotes-leaderboard, .quotes-wall {
  background: var(--carbon);
  border: 1px solid var(--line);
  padding: 28px;
  margin-bottom: 20px;
}
.quotes-leaderboard h2, .quotes-wall h2 {
  font: 400 32px/.95 'Bebas Neue',sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.top-quotes-grid, .quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* Back-to-top button hidden — sticky marquee + header replace the need */
.back-to-top, #back-to-top { display: none !important; }

/* === DETAILED MEMBER STATS === */
.detailed-member-stats {
  display: grid;
  /* Breakpoints:
       >1000px  → 4 columns (full desktop, content scales down as we
                  approach the threshold via clamp() below)
       ≤1000px  → 2 columns (handled by @media block further down)
       ≤600px   → 1 column (handled in the main mobile @media block) */
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
/* Tablet / narrow desktop — 2 columns. Triggers below 1000px CSS px. */
@media (max-width: 1000px) {
  .detailed-member-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.member-detail-card {
  background: var(--carbon);
  border: 1px solid var(--line);
  padding: 24px;
  transition: .2s;
}
.member-detail-card:hover {
  border-color: var(--gold);
  background: var(--carbon-2);
}

/* === COMPARISON OVERLAY === */
.comparison-overlay {
  position: fixed; inset: 0;
  z-index: 5500;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(10px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.comparison-overlay-content {
  background: var(--carbon);
  border: 1px solid var(--gold);
  max-width: 1200px; width: 100%;
  position: relative;
  padding: 32px;
  box-shadow: 0 0 80px rgba(212,162,76,.2);
}

/* Decorative anamorphic bars on hero — only when there's actually a hero */
.hero-banner[style*="block"] .bars { /* placeholder for inline-style trick */ }

/* === RESPONSIVE === */
@media (max-width: 980px) {
  .container { padding: 0 18px; }
  .main .container { padding: 18px; }
  .hero-banner { margin-bottom: 20px; }
  .hero-title { font-size: 52px; }
  .header-content { gap: 12px; }
  .nav { gap: 0; }
  .nav-btn, .nav-link { padding: 8px 10px; font-size: 10px; letter-spacing: .18em; }
  .stat-number { font-size: 48px; }
  .result-title { font-size: 44px; }
  .wheel-container { padding: 24px; }
}

/* Defensive: any inline button styles in app.js → cinematic */
button {
  font-family: inherit;
}
input, select, textarea {
  font-family: inherit;
}

/* Marquee track wider stripe variant (bottom of page) */
.marquee.bottom {
  margin-top: 64px;
}

/* ============================================================
   PHASE 2 — Dynamic content styling
   Page-by-page coverage of app.js-rendered DOM
   ============================================================ */

/* ============================================================
   WHEEL / QUEUE
   ============================================================ */
.queue-management h3 { display: flex; align-items: baseline; gap: 12px; }
#queue-count {
  font: 500 11px/1 'DM Sans', sans-serif !important;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

.queue-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--carbon);
  border: 1px solid var(--line);
  transition: .2s;
}
.queue-item:hover {
  border-color: rgba(212,162,76,.4);
  background: var(--carbon-2);
}
.queue-item.queue-skipped {
  opacity: .45;
}
.queue-film-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.queue-title {
  font: 400 22px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.queue-suggestor {
  font: 500 10px/1 'DM Sans', sans-serif !important;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.queue-suggestor::before { content: "Suggested by "; color: var(--muted-2); }
.queue-actions { display: flex; gap: 6px; }
.queue-skip-btn, .queue-remove-btn {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--muted);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: .15s;
}
.queue-skip-btn:hover { color: var(--gold); border-color: var(--gold); }
.queue-remove-btn:hover { color: var(--red); border-color: var(--red); }

/* Guests toggle fix */
.guest-toggle { gap: 0; }
.guest-toggle span:first-child {
  font: 500 10px/1 'DM Sans', sans-serif !important;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-right: 10px !important;
}

/* ============================================================
   MEMBERS PAGE
   ============================================================ */
.member-detail-card {
  background: var(--carbon);
  border: 1px solid var(--line);
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: .2s;
}
.member-detail-card:hover {
  border-color: var(--gold);
}

.member-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.member-name-large {
  font: 400 48px/.85 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream) !important;
}
.member-avg-large {
  font: 400 32px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  color: var(--gold) !important;
  font-feature-settings: "tnum";
}

/* Tight 4-column mode (between 1001px and 1300px) — content shrinks
   so the cards don't get crowded as we approach the 2-column
   threshold at 1000px. Below 1001px we switch to 2 columns and
   restore normal sizing. */
@media (min-width: 1001px) and (max-width: 1300px) {
  .member-detail-card {
    padding: 18px 16px;
  }
  .member-header {
    padding-bottom: 12px;
    margin-bottom: 14px;
  }
  .member-name-large {
    font-size: 32px !important;
  }
  .member-avg-large {
    font-size: 22px !important;
  }
  .member-stat-item {
    padding: 10px 6px;
  }
  .member-stat-item .stat-value {
    font-size: 22px;
  }
  .member-stat-item .stat-label {
    font-size: 8px !important;
    letter-spacing: .16em;
  }
  .member-stats-grid {
    margin-bottom: 14px;
  }
  .rating-distribution {
    padding: 10px;
    margin-bottom: 12px;
  }
}

.member-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 24px;
  border: 1px solid var(--line);
}
.member-stat-item {
  padding: 16px 12px;
  text-align: center;
  border-right: 1px solid var(--line);
  background: rgba(0,0,0,.2);
}
.member-stat-item:last-child { border-right: none; }
.member-stat-item .stat-value {
  font: 400 28px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  color: var(--gold) !important;
  margin-bottom: 4px;
  font-feature-settings: "tnum";
}
.member-stat-item .stat-label {
  font: 500 9px/1.2 'DM Sans', sans-serif !important;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

.rating-distribution {
  margin-bottom: 18px;
  padding: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
}
.distribution-title {
  font: 500 10px/1 'DM Sans', sans-serif !important;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-bottom: 12px;
}
/* Member-card variant: 5 bars in .distribution-bars wrapper */
.distribution-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: end;
  height: 60px;
  margin-bottom: 6px;
}
.distribution-bar,
.distribution-bar-track {
  position: relative;
  height: 100%;
  width: 100%;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.distribution-fill,
.distribution-bar-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--gold);                     /* members card: gold */
  transition: height .3s ease;
}
/* Stats page Rating Distribution chart: red bars (overrides the gold above) */
#rating-distribution-chart .distribution-bar-fill {
  background: var(--red);
  box-shadow: 0 0 12px rgba(201,48,44,.35);
}

/* Stats-page variant: only the rating-distribution chart is a 10-col grid */
#rating-distribution-chart {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 12px;
  align-items: end;
  height: 200px;
  margin-top: 16px;
}
.distribution-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
  background: transparent !important;
  overflow: visible !important;
  position: static !important;
}
.distribution-bar-container {
  position: relative;
  width: 100%;
  flex: 1;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.distribution-bar-label {
  font: 500 10px/1 'DM Sans', sans-serif !important;
  color: var(--muted) !important;
  text-align: center;
}
.distribution-bar-count {
  font: 500 11px/1 'DM Sans', sans-serif !important;
  color: var(--gold) !important;
  font-feature-settings: "tnum";
  text-align: center;
}
.distribution-labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  font: 500 10px/1 'DM Sans', sans-serif !important;
  color: var(--muted) !important;
  text-align: center;
}

/* Season summary line, lists in member cards */
.member-detail-card > div:not(.member-header):not(.member-stats-grid):not(.rating-distribution) {
  font: 400 13px/1.55 'DM Sans', sans-serif;
  color: var(--cream);
  margin-top: 14px;
}
.member-detail-card ul,
.member-detail-card ol {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}
.member-detail-card li {
  padding: 4px 0;
  color: var(--muted);
  font: 500 13px/1.4 'DM Sans', sans-serif;
}

/* Members "Guests" section divider */
#detailed-member-stats > #guests-divider,
#detailed-member-stats > h3 {
  grid-column: 1 / -1;
  font: 400 32px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream) !important;
  margin: 24px 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* ============================================================
   STATS PAGE — dynamic sections
   ============================================================ */

/* Top stats: now 5 cards, was 4 */
.stats-grid {
  grid-template-columns: repeat(5, 1fr) !important;
}
@media (max-width:980px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Two-column layout for the dynamic stats sections.
   align-items: stretch (default) makes paired sections share row height. */
#enhanced-stats-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 980px) {
  #enhanced-stats-container { grid-template-columns: 1fr; }
}
/* Make each section a flex column so its body can expand to match the
   taller neighbour in its row. */
#enhanced-stats-container .stats-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}
/* The chart/list inside each section grows to fill the remaining height,
   so paired sections always end at the same baseline. */
/* The chart container takes up the remaining vertical space in its section
   (so paired sections match height via grid stretch) BUT we DO NOT touch its
   `display` property — many of these are `display: grid` natively and would
   break if forced to flex. */
#enhanced-stats-container .stats-section > #pickiness-chart,
#enhanced-stats-container .stats-section > .pickiness-comparison,
#enhanced-stats-container .stats-section > #genres-chart {
  flex: 1;
}
/* Rating Distribution: explicit fixed height — gives the bars room without
   blowing up to match Member Comparison's full height. */
#rating-distribution-chart {
  height: 260px !important;
  min-height: 260px;
}
/* Genre rows: pump up vertical rhythm so a short list fills the row height
   alongside Top Directors. */
#enhanced-stats-container .stats-section .genre-row,
#enhanced-stats-container .stats-section .genre-stat,
#enhanced-stats-container .stats-section .genre-item {
  padding: 16px 16px !important;
}
.stats-section h2,
.stats-section h3 {
  font: 400 36px/.95 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream) !important;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* Decades chart: each item is a column with a 2-bar comparison + values */
#decades-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 14px;
  align-items: end;
  margin-top: 18px;
}
.bar-chart-item {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bar-chart-bars {
  width: 100%;
  height: 140px;
  display: flex; gap: 4px;
  justify-content: center;
  align-items: flex-end;
}
.bar-chart-bar {
  width: 14px;
  background: rgba(255,255,255,.06);
  position: relative;
}
.bar-chart-bar.rating-bar { background: var(--gold); }
.bar-chart-bar.count-bar  { background: var(--muted-2); }
.bar-chart-label {
  font: 500 11px/1 'DM Sans', sans-serif !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream) !important;
  font-feature-settings: "tnum";
}
.bar-chart-values {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.bar-value {
  font: 500 12px/1 'DM Sans', sans-serif !important;
  color: var(--gold) !important;
  font-feature-settings: "tnum";
}
.bar-count {
  font: 500 9px/1 'DM Sans', sans-serif !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

/* Directors: same row treatment as Top Films, just with a red rank number */
#directors-chart {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}
.director-spotlight {
  background: rgba(0,0,0,.16);
  border: none;
  border-left: 2px solid transparent;
  transition: .15s;
}
.director-spotlight:hover {
  background: rgba(255,255,255,.03);
  border-left-color: var(--red);
}
.director-spotlight::before { content: none !important; }
.director-spotlight-inner {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  padding: 12px 16px;
  align-items: center;
}
.director-spotlight-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.director-photo { display: none !important; }
.director-filmography { display: none !important; }
.director-rank-badge {
  font: 400 28px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  color: var(--red) !important;
  font-feature-settings: "tnum";
  text-align: center;
}
.director-name {
  font: 400 32px/.95 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream) !important;
  margin-bottom: 2px;
}
.director-rating-line, .director-meta-inline {
  font: 500 12px/1.4 'DM Sans', sans-serif !important;
  letter-spacing: .04em;
  color: var(--muted) !important;
}
.director-avg {
  color: var(--gold) !important;
  font-weight: 600;
  font-feature-settings: "tnum";
}
.director-filmography {
  margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.director-film-tag {
  font: 500 11px/1 'DM Sans', sans-serif !important;
  letter-spacing: .04em;
  padding: 5px 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--cream) !important;
}

/* Top films lists */
.top-films { display: flex; flex-direction: column; gap: 4px; }
.top-film {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(0,0,0,.16);
  border-left: 2px solid transparent;
  transition: .15s;
}
.top-film:hover {
  background: rgba(255,255,255,.03);
  border-left-color: var(--gold);
}
.top-film-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.top-film-info h4,
.top-film-info > div:first-child,
.top-film-info > strong {
  font: 400 22px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream) !important;
  margin: 0;
}
.top-film-meta {
  font: 500 10px/1.4 'DM Sans', sans-serif !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.top-film-rating {
  font: 500 16px/1 'DM Sans', sans-serif !important;
  color: var(--gold) !important;
  font-feature-settings: "tnum";
  text-align: right;
}

/* Comparison row */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.comparison-film {
  padding: 12px 14px;
  background: rgba(0,0,0,.16);
  border: 1px solid var(--line);
}
.comparison-meta {
  font: 500 10px/1.4 'DM Sans', sans-serif !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

/* ============================================================
   QUOTES PAGE
   ============================================================ */
.top-quotes-grid, .quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.quote-card {
  position: relative;
  background: var(--carbon);
  border: 1px solid var(--line);
  padding: 24px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: .25s;
}
.quote-card:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 20px 50px rgba(0,0,0,.5);
}
.quote-card.top-quote {
  border-color: var(--gold);
  background: var(--carbon);
  box-shadow: 0 0 0 1px var(--gold), 0 12px 32px rgba(0,0,0,.45);
}
.quote-rank {
  position: absolute;
  top: 14px; right: 14px;
  font: 400 28px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  color: var(--gold) !important;
  font-feature-settings: "tnum";
}
.quote-body {
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  padding-right: 32px;
}
.quote-text {
  font: italic 500 19px/1.4 'DM Sans', sans-serif !important;
  color: var(--cream) !important;
  position: relative;
  /* No red vertical bar — clean type only */
  padding-left: 0;
  border-left: none;
}
.quote-member {
  font: 500 10px/1 'DM Sans', sans-serif !important;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold) !important;
}
.quote-footer {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.quote-footer-left { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; }
.quote-film-poster {
  width: 44px; height: 66px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.quote-film-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.quote-film-title {
  font: 400 16px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quote-film-number {
  font: 500 10px/1 'DM Sans', sans-serif !important;
  letter-spacing: .22em;
  color: var(--muted) !important;
}
.quote-footer-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.quote-stars { display: inline-flex; gap: 1px; align-items: center; }
.quote-star-container {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 1;
  cursor: pointer;
}
/* BOTH layers absolute-positioned so they overlap perfectly. The full
   star is the base; the half star overlays its left 7px and is what
   colours when the rating is X.5. */
.quote-star-half, .quote-star-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 1;
  color: rgba(212,162,76,.18);
  transition: color .15s;
}
.quote-star-half { width: 7px; overflow: hidden; }
.quote-star-half.active, .quote-star-full.active { color: var(--gold); }
.quote-average {
  font: 500 11px/1 'DM Sans', sans-serif !important;
  color: var(--gold) !important;
  font-feature-settings: "tnum";
}
.quote-avg-num { font-weight: 700; }
.quote-vote-count { color: var(--muted) !important; margin-left: 4px; }

/* ============================================================
   FILM DETAIL MODAL
   ============================================================ */
.modal-content {
  padding-bottom: 32px;
  background: var(--carbon);
}
#film-detail {
  display: flex; flex-direction: column;
}
#film-detail > * { padding-left: 36px; padding-right: 36px; }
#film-detail > .film-detail-backdrop { padding: 0; }
/* The "FILM #149 • GENRES" pre-title strip is rendered as an absolutely-
   positioned direct child of #film-detail, so the `> *` rule above pushes
   its TEXT 36px right of the title even though its box-left lines up.
   Strip the padding so the text aligns optically with the title below. */
#film-detail > div[style*="position: absolute"] { padding-left: 0; padding-right: 0; }

/* Backdrop top strip
   Tightened: shorter backdrop + override app.js's inline
   padding-top: 200px on the content block so the title sits right
   under the image rather than below a long blank gap. */
.film-detail-backdrop {
  height: 340px;
  background-size: cover;
  background-position: center 28%;
  position: relative;
  margin: 0;
}
.film-detail-backdrop::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(28,26,24,.0) 20%, rgba(28,26,24,1) 95%);
}
/* App.js injects style="padding-top: 200px" on the title block to clear
   the backdrop. Overlap the title up into the gradient bottom of the
   backdrop a bit — user wants the data to bleed into the gradient. */
#film-detail > div[style*="padding-top"] {
  padding-top: 14px !important;
  margin-top: -72px;
  position: relative;
  z-index: 3;                          /* above backdrop's ::after gradient */
}

/* Modal film title — strip the serif fallback */
#film-detail h1, #film-detail h2 {
  font: 400 56px/.9 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream) !important;
  margin-bottom: 8px;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

/* Modal '2023 • Director' subtitle */
#film-detail h1 + div,
#film-detail h2 + div,
#film-detail .film-info {
  font: 600 13px/1.4 'DM Sans', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .78;
}

/* FILM #155 pre-title strip */
#film-detail > div:first-child,
#film-detail .film-number {
  font: 500 11px/1 'DM Sans', sans-serif !important;
  letter-spacing: .42em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
}

/* Modal rating chart */
.modal-rating-chart, .modal-rating-bars { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.modal-rating-bar { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; }
.modal-member-label, .modal-rating-title {
  font: 500 13px/1 'DM Sans', sans-serif !important;
  color: var(--cream) !important;
}
.modal-bar-container {
  height: 6px;
  background: rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.modal-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--red);
}
.modal-rating-value {
  font: 500 13px/1 'DM Sans', sans-serif !important;
  color: var(--gold) !important;
  font-feature-settings: "tnum";
  text-align: right;
}

/* Trailer */
.trailer-section {
  margin: 24px 0;
  border: 1px solid var(--line);
  overflow: hidden;
}
.trailer-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background-size: cover; background-position: center;
  cursor: pointer;
}
.trailer-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.6));
  pointer-events: none;
}
.trailer-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  background: var(--red);
  border: 2px solid var(--cream);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  cursor: pointer;
  z-index: 2;
  transition: .15s;
}
.trailer-play-btn:hover { background: #e63a36; box-shadow: 0 0 30px var(--red-glow); }
.trailer-embed { aspect-ratio: 16/9; width: 100%; }
.trailer-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   RATE THIS FILM — interactive rating form inside the modal
   Reuses the v1 classes generated by app.js (star-container,
   star-zone-left/right, star-glyph star-empty/full, star-celebrate)
   so all the existing JS behaviour (hover, half-star click, submit
   animation) just works — only the look changes.
   ============================================================ */
.rate-film-section {
  margin: 24px 0;
  padding: 22px;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--line);
}
.rate-film-title {
  font: 400 24px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream) !important;
  margin-bottom: 14px;
}
.rate-film-form { display: flex; flex-direction: column; gap: 12px; }
.rate-film-form .member-select,
.rate-film-form .guest-name-input,
.rate-film-form .rating-comment,
.rate-film-form input[type="text"],
.rate-film-form select,
.rate-film-form textarea {
  height: 44px;
  background: var(--ink);
  border: 1px solid var(--line-2);
  color: var(--cream);
  padding: 0 14px;
  font: 500 13px/1 'DM Sans', sans-serif;
  letter-spacing: .04em;
  outline: none;
  transition: border-color .15s;
}
.rate-film-form textarea { height: auto; padding: 12px 14px; line-height: 1.4; }
.rate-film-form input:focus,
.rate-film-form select:focus,
.rate-film-form textarea:focus { border-color: var(--gold); }
.rate-film-form input::placeholder { color: var(--muted-2); }

/* The "Rating as <Name>" hint */
.rate-film-form > div[style*="Rating as"] { color: var(--muted) !important; }
.rate-film-form > div[style*="Rating as"] strong { color: var(--cream) !important; }

/* Submit button — cinematic red filled, with hover glow */
.submit-rating-btn {
  height: 44px;
  background: var(--red);
  color: var(--cream);
  border: 1px solid var(--red);
  padding: 0 24px;
  font: 600 12px/1 'DM Sans', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .15s;
  align-self: flex-start;
}
.submit-rating-btn:hover:not(:disabled) {
  background: #e63a36;
  border-color: #e63a36;
  box-shadow: 0 0 24px var(--red-glow);
}
.submit-rating-btn:disabled {
  background: transparent;
  color: var(--muted-2);
  border-color: var(--line-2);
  cursor: not-allowed;
}

.rating-feedback {
  font: 500 12px/1.4 'DM Sans', sans-serif;
  color: var(--gold);
  letter-spacing: .04em;
  min-height: 18px;
}

/* Interactive star rating — grey empty, gold full, half-star click zones */
.star-rating { display: flex; gap: 4px; user-select: none; }
.star-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 32px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
}
.star-glyph {
  pointer-events: none;
  user-select: none;
  transition: color .12s, transform .12s;
  position: relative;
  display: inline-block;
}
.star-glyph.star-empty {
  color: rgba(255,255,255,.15) !important;
  -webkit-text-fill-color: rgba(255,255,255,.15);
}
.star-glyph.star-full {
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold);
  filter: drop-shadow(0 0 4px rgba(212,162,76,.4));
}
/* Half-star: app.js renders the glyph as
   <span class="star-glyph"><span class="star-back">★</span><span class="star-half-clip">★</span></span>
   .star-back is the grey base, .star-half-clip overlays a gold star clipped
   to the left half so it reads as exactly half-filled. */
.star-glyph .star-back {
  color: rgba(255,255,255,.15);
  -webkit-text-fill-color: rgba(255,255,255,.15);
}
.star-glyph .star-half-clip {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.5em;
  overflow: hidden;
  display: inline-block;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  filter: drop-shadow(0 0 3px rgba(212,162,76,.3));
}
.star-container:hover .star-glyph { transform: scale(1.1); }

/* Submit celebration — pop+rotate when rating is locked in */
@keyframes starPopCinematic {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5) rotate(15deg); }
  60%  { transform: scale(1.5) rotate(-5deg); }
  80%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.star-container.star-celebrate .star-glyph {
  animation: starPopCinematic .42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold);
  filter: drop-shadow(0 0 8px rgba(212,162,76,.7));
}

/* Left / right half-star click zones (50% each) */
.star-zone {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  z-index: 2;
}
.star-zone-left { left: 0; }
.star-zone-right { right: 0; }

/* Sign-in prompt (when not logged in) */
.auth-signin-prompt {
  margin: 24px 0;
  padding: 18px 22px;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--line);
  font: 500 13px/1.4 'DM Sans', sans-serif;
  color: var(--muted);
  text-align: center;
}
.auth-signin-prompt a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212,162,76,.4);
  padding-bottom: 1px;
}
.auth-signin-prompt a:hover { color: var(--cream); border-bottom-color: var(--cream); }

/* ============================================================
   STATS — extra sections (Member Comparison, Rating Trajectory, Genre Rankings)
   ============================================================ */

/* Member Comparison */
.member-comparison { margin-top: 18px; }
.member-bars { display: flex; flex-direction: column; gap: 18px; }
.member-bar-row { display: flex; flex-direction: column; gap: 6px; }
.member-bar-header {
  display: flex; justify-content: space-between; align-items: baseline;
}
.member-bar-name {
  font: 500 14px/1 'DM Sans', sans-serif !important;
  color: var(--cream) !important;
}
.member-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  font: 600 9px/1 'DM Sans', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  border: 1px solid;
}
.member-tag.generous { color: var(--gold); border-color: rgba(212,162,76,.4); background: rgba(212,162,76,.06); }
.member-tag.harshest, .member-tag.harshest-critic { color: var(--red); border-color: rgba(201,48,44,.5); background: rgba(201,48,44,.1); }
.member-bar-avg {
  font: 500 14px/1 'DM Sans', sans-serif !important;
  color: var(--gold) !important;
  font-feature-settings: "tnum";
}
.member-bar-track {
  width: 100%; height: 6px;
  background: rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.member-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--red);
}
.member-bar-details {
  display: flex; gap: 16px;
  font: 500 10px/1 'DM Sans', sans-serif !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

/* Rating Trajectory (Pickiness) */
.pickiness-comparison { margin-top: 18px; display: flex; flex-direction: column; }
.pickiness-comparison .pickiness-periods,
.pickiness-periods {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.pickiness-period {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
  flex: 1;
  justify-content: center;
}
.pickiness-period-header {
  display: flex; justify-content: space-between; align-items: baseline;
}
.pickiness-period-label {
  font: 400 22px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream) !important;
}
.pickiness-period-sub {
  font: 500 11px/1 'DM Sans', sans-serif !important;
  letter-spacing: .14em;
  color: var(--muted) !important;
  font-feature-settings: "tnum";
}
.pickiness-period-bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
.pickiness-period-bar-track {
  height: 22px;
  background: rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.pickiness-period-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--red);
  box-shadow: 0 0 12px rgba(201,48,44,.4);
}
.pickiness-period-avg {
  font: 500 14px/1 'DM Sans', sans-serif !important;
  color: var(--gold) !important;
  font-feature-settings: "tnum";
}
.pickiness-period > div:last-child:not(.pickiness-period-bar-row):not(.pickiness-period-header) {
  font: 500 10px/1 'DM Sans', sans-serif !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

/* Genre Rankings — beefy rows so the data fills the tile next to Top Directors */
#genres-chart {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  flex: 1;                                  /* fills .stats-section column */
  justify-content: space-between;
}
.horizontal-bar-item {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  gap: 18px;
  align-items: center;
  padding: 10px 0;
  flex: 1;
  min-height: 38px;
}
.horizontal-bar-label {
  font: 500 16px/1.1 'DM Sans', sans-serif !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream) !important;
}
.horizontal-bar-label span {
  color: var(--muted) !important;
  letter-spacing: .06em !important;
  font-size: 13px !important;
}
.horizontal-bar-container {
  height: 18px;
  background: rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.horizontal-bar {
  position: absolute; inset: 0 auto 0 0;
  background: var(--red);
  box-shadow: 0 0 12px rgba(201,48,44,.4);
  transition: width .3s ease;
}
.horizontal-bar-value {
  font: 500 16px/1 'DM Sans', sans-serif !important;
  color: var(--gold) !important;
  text-align: right;
  font-feature-settings: "tnum";
}

/* ============================================================
   MODAL — review cards & trailer img
   ============================================================ */

.review-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.review-avatar, .review-avatar-img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(212,162,76,.45);
  background: var(--carbon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 14px/1 'DM Sans', sans-serif;
  color: var(--cream);
  flex-shrink: 0;
}
.review-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-member-name {
  font: 500 14px/1 'DM Sans', sans-serif !important;
  color: var(--cream) !important;
  letter-spacing: .02em;
}
.review-stars {
  font: 500 13px/1 'DM Sans', sans-serif !important;
  color: var(--gold) !important;
  font-feature-settings: "tnum";
}
.review-rating-num {
  margin-left: 6px;
  font-weight: 600;
  color: var(--gold) !important;
}

/* Optional: review card surrounding the header */
[class*="review-card"]:not(.review-card-header):not(.review-card-meta) {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
  padding: 16px 18px;
  margin-bottom: 12px;
}

/* Trailer thumb is an <img> not a div */
img.trailer-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  object-fit: cover;
}

/* "Sign in with Google to rate" prompt — hide entirely */
#film-detail .signin-prompt,
#film-detail p:has(+ .trailer-section) {
  display: none !important;
}
/* Fallback: hide any p in film-detail that contains that exact text via :empty-after-trim trick handled in JS */
.hide-signin-prompt { display: none !important; }

/* ============================================================
   MEMBERS — Suggestion section header & status colours
   ============================================================ */
.suggestion-section { margin-top: 18px; }
.suggestion-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.suggestion-round {
  font: 400 24px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--cream) !important;
}
.suggestion-count {
  font: 500 11px/1 'DM Sans', sans-serif !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted) !important;
  text-align: right;
}

/* Suggestion slot rows — clean text-only treatment, no bars or backgrounds.
   Title truncates with ellipsis instead of wrapping so member tiles stay
   uniform height. */
.suggestion-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font: 500 13px/1.3 'DM Sans', sans-serif;
  min-width: 0;
}
.suggestion-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; flex-shrink: 0;
}
.suggestion-slot .suggestion-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.suggestion-slot.suggestion-active {
  color: var(--cream);
}
.suggestion-slot.suggestion-active .suggestion-icon { color: var(--red); }
.suggestion-slot.suggestion-active .suggestion-title { color: var(--cream); }

/* SPUN / WATCHED — gold text only, no background tint or left rule */
.suggestion-slot.suggestion-watched {
  color: var(--gold);
  background: transparent;
}
.suggestion-slot.suggestion-watched .suggestion-icon { color: var(--gold); }
.suggestion-slot.suggestion-watched .suggestion-title { color: var(--gold); }

.suggestion-slot.suggestion-empty {
  opacity: .55;
}

.suggestion-swap-btn, .suggestion-remove-btn {
  background: transparent; border: none;
  color: var(--muted); cursor: pointer; padding: 2px 6px;
}
.suggestion-swap-btn:hover { color: var(--gold); }
.suggestion-remove-btn:hover { color: var(--red); }

/* ============================================================
   STATS — Club Timeline restyle (kills the orange/old aesthetic)
   ============================================================ */
.timeline-svg path[fill^="url"] {
  fill: url(#timelineGradient) !important;   /* keep area but tinted via stops below */
}
.timeline-svg path[stroke] {
  stroke: var(--red) !important;
  stroke-width: 1.5 !important;
}
.timeline-svg circle {
  fill: var(--red) !important;
  stroke: var(--ink) !important;
  stroke-width: 1 !important;
}
.timeline-svg line {
  stroke: var(--muted-2) !important;
  stroke-width: 1 !important;
  stroke-dasharray: 2 4 !important;
  opacity: .55 !important;
}
.timeline-legend {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 16px !important;
  padding: 0 4px !important;
  font: 500 11px/1 'DM Sans', sans-serif !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.timeline-legend span { color: var(--muted) !important; font: inherit !important; }
.timeline-legend span:nth-child(2) {
  color: var(--muted-2) !important;
  letter-spacing: .18em !important;
}

/* Timeline tooltip (created dynamically by app.js, override its inline styles) */
#timeline-tooltip {
  background: var(--carbon) !important;
  border: 1px solid var(--red) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  color: var(--cream) !important;
  font: 500 12px/1.4 'DM Sans', sans-serif !important;
  letter-spacing: .04em !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.6) !important;
}
#timeline-tooltip span {
  color: var(--cream) !important;
  font-family: 'DM Sans', sans-serif !important;
}
#timeline-tooltip span[style*="F5A623"],
#timeline-tooltip span:last-child {
  color: var(--gold) !important;
}
#timeline-tooltip span:nth-child(2) {
  color: var(--muted) !important;
  font-feature-settings: "tnum";
}

/* ============================================================
   2-COL GRID: paired sections share row height via stretch.
   Decades Analysis spans both columns on row 2 (set via JS).
   ============================================================ */
#enhanced-stats-container {
  grid-auto-flow: row;
  align-items: stretch;
}

/* ============================================================
   GUEST TOGGLE — hide native checkbox, render as a clean red switch
   ============================================================ */
.guest-toggle input[type="checkbox"],
#toggle-guests-cb {
  display: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.guest-toggle {
  cursor: pointer;
  user-select: none;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.toggle-slider {
  position: relative;
  display: inline-block;
  width: 38px; height: 20px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 0;                 /* square, not pill */
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
  box-sizing: border-box;
}
.toggle-slider::after {
  content:"";
  position: absolute;
  top: 2px; left: 2px;
  right: auto;                      /* default — overridden when :checked */
  width: 14px; height: 14px;
  background: var(--cream);
  border-radius: 0;                  /* square knob */
  transition: left .2s ease, right .2s ease, background .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transform: none !important;       /* must stay clamped to the pill */
}
.guest-toggle input:checked + .toggle-slider {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 14px rgba(201,48,44,.4);
}
/* Anchor the knob to the RIGHT inner edge when checked — no transforms,
   so it can never slip outside the slider. */
.guest-toggle input:checked + .toggle-slider::after {
  left: auto !important;
  right: 2px !important;
  background: var(--cream);
}

/* ============================================================
   QUEUE — grid of poster cards (like the main films grid)
   ============================================================ */
.queue-management h3 {
  font: 400 32px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream) !important;
}
.queue-list {
  display: grid !important;
  /* Fixed 7 columns on desktop per design feedback (was auto-fill). */
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 18px !important;
}
.queue-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin-bottom: 0 !important;
  position: relative;
}
/* No card movement on hover — only the gold outline + gold text below */
.queue-item:hover {
  transform: none;
  background: transparent !important;
  border-color: transparent !important;
}
.queue-item:hover .queue-title,
.queue-item:hover .queue-suggestor {
  color: var(--gold) !important;
}
.queue-item.queue-skipped { opacity: .45; transition: opacity .35s ease, filter .35s ease; }
.queue-item.queue-skipped .queue-poster { filter: grayscale(1) brightness(.7); }
.queue-item.queue-skipped .queue-poster.queue-mystery::after { filter: grayscale(1); opacity: .55; }
.queue-item:not(.queue-skipped) { transition: opacity .35s ease, filter .35s ease; }

/* Queue position numbers hidden — posters speak for themselves */
.queue-position { display: none !important; }
.queue-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  background: #111;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.55);
  border: 1px solid var(--line);
  transition: border-color .2s, box-shadow .2s;
}
.queue-item:hover .queue-poster {
  border-color: var(--gold);
  box-shadow: 0 14px 36px rgba(0,0,0,.7), 0 0 18px rgba(212,162,76,.25);
}
.queue-poster img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.queue-poster-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--muted-2);
  font-size: 48px;
}
/* Big red "?" for RANDO and BLINK'S PICK */
.queue-poster.queue-mystery {
  background:
    radial-gradient(ellipse at center, #1c1a18 0%, #050505 80%);
  display: flex; align-items: center; justify-content: center;
}
.queue-poster.queue-mystery::after {
  content: "?";
  font: 700 140px/1 'Bebas Neue', sans-serif;
  color: var(--red);
  text-shadow: 0 0 32px var(--red-glow), 0 6px 16px rgba(0,0,0,.6);
  letter-spacing: 0;
}
/* Mystery-tile title overlay hidden — the queue-title below the poster
   already carries the label (BLINK'S PICK / RANDO). */
.queue-mystery-label { display: none !important; }

.queue-film-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0;
  padding: 0 2px;
}
.queue-title {
  font: 400 18px/1.1 'Bebas Neue', sans-serif !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--cream) !important;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal !important;
}
.queue-suggestor {
  font: 500 10px/1.2 'DM Sans', sans-serif !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

/* Push the row controls (skip, delete, drag) to a more compact strip below */
.queue-item .queue-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}

/* ============================================================
   SEARCHLIGHTS — premiere floodlights anchored at the BOTTOM of the
   viewport. 4 beams total: 2 on the left edge, 2 on the right edge.
   Each beam is a narrow trapezoid (source point at the bottom,
   ~50% narrower than the previous version, fanning toward the top).
   Progressive blur: sharp at the source, progressively fuzzier as the
   cone rises away from it — achieved by stacking 3 cone layers with
   different blur radii and crossfading masks.
   ============================================================ */
#wheel { position: relative; }
.wheel-container { position: relative; }
.searchlights {
  /* Absolute (not fixed) → scrolls with the page. Spans the full
     viewport width via translateX so the beams reach edge-to-edge.
     `isolation: isolate` is CRITICAL — it creates a containing
     stacking context so the children's mix-blend-mode: plus-lighter
     blends siblings AGAINST EACH OTHER (additively, the way
     Photoshop's "Linear Dodge (Add)" does) instead of blending each
     cone individually with the page below. */
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  height: 100vh;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
  isolation: isolate;
  /* Container stays at full opacity. Each beam's opacity is applied BEFORE
     the additive blend (see .searchlight rule below). */
  opacity: 1;
}
#wheel .wheel-container,
#wheel .queue-management { position: relative; z-index: 1; }

/* Beam wrapper — sized to the PNG asset's natural aspect ratio so
   `background-size: 100% 100%` doesn't squash the image.
   Asset 12 is 2500 × 5157 px (aspect 0.4848 W/H). Wrapper is oversized
   to 130vh tall and pushed 15vh below the viewport, so neither the
   narrow source tip nor the wide diffuse top is ever visible. */
.searchlight {
  position: absolute;
  /* Source point is anchored at left: var(--source-x), bottom: var(--source-y).
     The wrapper is centered on that point with translateX(-50%) inside every
     keyframe. The x positions are fixed offsets from the viewport centre, not
     viewport percentages, so very wide windows don't push the light bases out
     beyond the centered queue tile. */
  left: var(--source-x);
  bottom: var(--source-y, -24vh);
  height: 150vh;
  aspect-ratio: 2500 / 5157;
  transform-origin: 50% 100%;
  mix-blend-mode: plus-lighter;
}

/* Cone fills its searchlight wrapper at the asset's native aspect ratio. */
.searchlight .cone {
  position: absolute;
  inset: 0;
  background: url("assets/searchlight-12.png") center bottom / 100% 100% no-repeat;
}

/* === Beam placement === 2 sources on the left, 2 on the right.
   Source points are fixed offsets from page centre. The beam art still scales
   with viewport height, but the bases do not spread apart on wide windows. */
/* Animation timing:
   - Prime/coprime durations (9, 11, 13, 17) so the four beams take a
     very long time to all line up again.
   - Negative animation-delay starts each beam at a different point
     in its cycle, so they're never all swinging in the same direction.
   - Right-side keyframes are slightly different shapes from left so
     they don't read as a mirrored pair. */
.searchlight.beam-a {                            /* far left */
  --source-x: calc(50vw - 435px);
  animation: sweepA 9s ease-in-out -2.4s infinite alternate;
}
.searchlight.beam-b {                            /* inner left */
  --source-x: calc(50vw - 282px);
  animation: sweepB 11s ease-in-out -6.7s infinite alternate;
}
.searchlight.beam-c {                            /* inner right */
  --source-x: calc(50vw + 282px);
  animation: sweepC 13s ease-in-out -1.1s infinite alternate;
}
.searchlight.beam-d {                            /* far right */
  --source-x: calc(50vw + 435px);
  animation: sweepD 17s ease-in-out -9.3s infinite alternate;
}

/* Left-side beams lean inward (positive rotation = leaning right toward centre). */
@keyframes sweepA {
  0%   { transform: translateX(-50%) rotate( -6deg); opacity: .85; }
  50%  { transform: translateX(-50%) rotate( 24deg); opacity: 1;   }
  100% { transform: translateX(-50%) rotate(  8deg); opacity: .9;  }
}
@keyframes sweepB {
  0%   { transform: translateX(-50%) rotate(-10deg); opacity: 1;   }
  50%  { transform: translateX(-50%) rotate( 18deg); opacity: .85; }
  100% { transform: translateX(-50%) rotate(  4deg); opacity: .95; }
}
/* Right-side beams lean inward (negative rotation = leaning left toward centre).
   Shapes intentionally NOT mirrors of A/B — different mid + end values
   so the pair never reads as a perfectly symmetric sweep. */
@keyframes sweepC {
  0%   { transform: translateX(-50%) rotate( 10deg); opacity: .9;  }
  50%  { transform: translateX(-50%) rotate(-18deg); opacity: 1;   }
  100% { transform: translateX(-50%) rotate( -4deg); opacity: .85; }
}
@keyframes sweepD {
  0%   { transform: translateX(-50%) rotate(  6deg); opacity: 1;   }
  50%  { transform: translateX(-50%) rotate(-24deg); opacity: .85; }
  100% { transform: translateX(-50%) rotate( -8deg); opacity: .95; }
}

/* Only show beams when the wheel view is active */
#wheel:not(.active) .searchlights { display: none; }

/* LED canvas — user wants it gone entirely */
#led-canvas { display: none !important; }

/* ============================================================
   WHEEL — cinematic projection booth treatment.
   NOTE: no padding on .wheel-wrapper. The wheel-canvas and led-canvas
   both sit at 0,0 of the wrapper, so any padding misaligns the LEDs.
   The brass canister frame is drawn OUTSIDE the wrapper via ::before
   with negative inset.
   ============================================================ */
.wheel-container {
  /* Transparent so the searchlight beams shine through behind the wheel.
     Outline border removed entirely — the module reads as floating space. */
  background: transparent;
  border: none;
  /* Top: 12px padding zeroed + -8px margin = 20px tighter than v54.
     Bottom: 40 → 20px = 20px tighter. */
  padding: 0 32px 20px;
  margin-top: -8px;
  margin-bottom: 24px;
  text-align: center;
  position: relative;
  overflow: visible;
}
.wheel-container::before { content: none; }

.wheel-wrapper {
  position: relative;
  /* Wheel scaled +10% (was 66% / 660px max). Wedges/pointer/LEDs scale
     with it because their sizes are %-of-wrapper. */
  width: 72.6%;
  max-width: 726px;
  min-width: 300px;
  margin: 0 auto;
  padding: 0;                       /* CRITICAL: keeps LED + wheel canvas aligned */
  border-radius: 50%;
}
/* Dark circular backdrop behind the wheel — sized to match the inner
   gold ring (#wheel-ring is 82.4% × 82.4%) so the ring traces its outer
   edge. Sits BEHIND the canvas so wedges + searchlights both read clean. */
.wheel-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82.4%;
  height: 82.4%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #1a1714 0%, #0a0a0b 75%);
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
  z-index: 0;
  pointer-events: none;
}
/* Canvases sit on top of the frame */
.wheel-wrapper canvas#wheel-canvas,
.wheel-wrapper canvas#led-canvas {
  position: relative;
  z-index: 2;
}
.wheel-wrapper canvas#led-canvas {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
}
/* Inner gold ring — sits close to the wedge edges, thin border, gentle glow. */
#wheel-ring {
  display: block !important;
  border-color: rgba(212,162,76,.7) !important;
  border-width: 2px !important;
  box-shadow:
    0 0 12px rgba(212,162,76,.6),
    inset 0 0 6px rgba(212,162,76,.22) !important;
  width: 82.4% !important;
  height: 82.4% !important;
  z-index: 3 !important;
}

/* === POINTER — gold cinematic arrow ===
   Shifted 10px left from the wheel's right edge. No pulse animation —
   static gold triangle with a subtle drop shadow only. */
.wheel-pointer {
  z-index: 12 !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 70px;
  height: 50px;
  display: flex; align-items: center; justify-content: flex-end;
  pointer-events: none;
  animation: none !important;
}
.wheel-pointer svg { display: none !important; }
.wheel-pointer::before {
  content: "";
  width: 0; height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 36px solid var(--gold);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.7));
  margin-right: 6px;
}

/* Hide the separate SPIN button — clicking the wheel centre triggers
   spinWheel() (app.js already wires that handler). */
#spin-button, .spin-button { display: none !important; }

/* === CENTER BUTTON — primary SPIN action ===
   Now the only way to trigger a spin (the standalone button is hidden). */
.wheel-center-btn {
  width: 17% !important;
  background:
    radial-gradient(circle at 35% 35%, #3a2f28 0%, #1a1410 45%, #050507 100%) !important;
  border: 2px solid var(--gold) !important;
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.95),
    inset 0 0 0 1px rgba(212,162,76,.35),
    0 0 24px rgba(212,162,76,.35),
    0 8px 28px rgba(0,0,0,.75) !important;
  color: var(--gold) !important;
  font: 500 13px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.wheel-center-btn:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.06) !important;
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.95),
    inset 0 0 0 1px var(--gold),
    0 0 40px rgba(212,162,76,.6),
    0 8px 28px rgba(0,0,0,.75) !important;
  color: var(--cream) !important;
}
.wheel-center-btn:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(.94) !important;
}
/* (Old orphan declarations from the previous .wheel-center-btn rule
   removed — see redesigned rule above.) */
.wheel-center-btn { z-index: 11 !important; }
/* Dotted iris ring removed — clean lens only */
.wheel-center-btn::before { content: none !important; }

/* === SPIN BUTTON — dramatic === */
.spin-button {
  font: 400 28px/1 'Bebas Neue', sans-serif !important;
  letter-spacing: .42em !important;
  text-transform: uppercase !important;
  background: var(--red) !important;
  color: var(--cream) !important;
  padding: 22px 56px !important;
  border: 2px solid rgba(212,162,76,.6) !important;
  cursor: pointer !important;
  box-shadow:
    0 0 0 1px rgba(212,162,76,.4) inset,
    0 0 30px rgba(201,48,44,.4),
    0 12px 32px rgba(0,0,0,.5) !important;
  position: relative;
  overflow: hidden;
  margin-top: 36px;
  transition: transform .15s, box-shadow .15s;
}
.spin-button::before { content: "▶  "; opacity: .9; }
.spin-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px var(--gold) inset,
    0 0 50px rgba(201,48,44,.7),
    0 16px 40px rgba(0,0,0,.6) !important;
}

/* ============================================================
   MOBILE PASS — phones at 360–600px (primary target: iPhone 375–430)
   Layered AFTER all other rules so it wins specificity ties.
   Goals: zero horizontal scroll, 44px tap targets, single-row nav,
   readable type, films grid usable on iPhone.
   ============================================================ */
@media (max-width: 600px) {

  /* === GLOBAL — defend against horizontal scroll ===
     overflow-x: clip (not hidden) so position:sticky still works on
     descendants. 100vw breakout elements (hero-banner) get capped to
     viewport so a desktop-emulator scrollbar can't push the doc wider. */
  html, body { overflow-x: clip; }

  /* Container padding shrinks from 32px → 14px to reclaim ~36px of width */
  .container { padding: 0 14px; }
  .header .container { padding: 0 14px; }
  .main .container { padding: 14px; }

  /* === HERO BANNER === */
  .hero-banner {
    width: 100%;
    /* Looser ratio on phones — 2.39:1 at narrow widths is only ~150px tall
       and can't fit the title comfortably. 16:9 gives more breathing room. */
    aspect-ratio: 16 / 9;
    margin: 0 0 16px;
  }
  .hero-content { padding: 0 14px 18px; gap: 8px; }
  .hero-label { font-size: 10px; letter-spacing: .32em; padding-left: 11px; }
  .hero-title { font-size: 40px; padding-left: 11px; }
  .hero-meta { font-size: 11px; letter-spacing: .22em; padding-left: 14px; }
  .hero-rating { font-size: 12px; padding-left: 14px; }

  /* === HEADER / NAV — single row, horizontally scrollable === */
  .header { padding: 10px 0; }
  .header-content {
    /* Keep the row: logo on left, nav fills middle, auth on right */
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
  }
  .logo .mark { font: 400 22px/1 'Bebas Neue', sans-serif; letter-spacing: .14em; }
  .logo { gap: 8px; flex-shrink: 0; }

  /* Nav becomes a horizontally-scrollable strip — overflow stays inside
     the viewport. -webkit-overflow-scrolling: touch is iOS momentum.
     IMPORTANT: justify-content must be flex-start so overflowing items
     spill to the RIGHT (browser-scrollable) rather than the LEFT (not
     scrollable — flex-end pushes children to negative x). centerActiveNavItem()
     in the shim then scrolls the active item into view. */
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    flex: 1 1 auto;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-btn, .nav-link {
    padding: 14px 10px;
    font-size: 10.5px;
    letter-spacing: .14em;
    min-height: 44px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .auth-container { flex-shrink: 0; }
  .auth-signin-btn {
    /* Computed display on this button is `inline` (not inline-block) in
       production — likely from an app.js inline-style or a UA quirk.
       Inline elements ignore min-height/line-height, so the button caps
       at ~38px. Force inline-flex !important to restore layout and reach
       a 44px tap target. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    font-size: 10.5px;
    line-height: 20px;
    letter-spacing: .18em;
    min-height: 44px;
  }
  .auth-profile-btn {
    padding: 8px 10px 8px 6px;
    min-height: 44px;
    line-height: 20px;
  }
  .auth-name { display: none; }  /* avatar + chevron only on mobile */

  /* === CONTROLS — search + filters === */
  .controls { padding: 12px; gap: 10px; margin-bottom: 18px; }
  .search-box {
    min-width: 0;
    flex: 1 1 100%;
  }
  .search-box input {
    min-height: 44px;
    padding: 12px 36px 12px 36px;
  }
  .filters { gap: 6px; width: 100%; }
  .filters select {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    min-height: 44px;
    padding: 12px 26px 12px 12px;
    font-size: 11px;
    letter-spacing: .08em;
  }
  .view-toggle, .comparison-toggle {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 11px;
    letter-spacing: .14em;
  }

  /* === FILMS GRID (2-up on phone) === */
  .films-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .films-grid:not(.list-view) .film-info {
    padding: 9px 10px 11px;
    gap: 3px;
  }
  .films-grid:not(.list-view) .film-title { font-size: 15px; line-height: .98; }
  .films-grid:not(.list-view) .film-meta { font-size: 9.5px; letter-spacing: .10em; }
  /* Grid rating row → compact 2 columns (name + stars only) */
  .films-grid:not(.list-view) .rating-row {
    grid-template-columns: 1fr auto;
    gap: 6px;
    font-size: 10px;
  }
  .films-grid:not(.list-view) .rating-row .rating-num { display: none; }
  .films-grid:not(.list-view) .rating-row .star-bar { letter-spacing: 0; }

  /* === FILMS LIST VIEW — drop number col, shrink poster === */
  .film-card.list-view {
    grid-template-columns: 76px 1fr;
    gap: 12px;
    padding: 10px 12px;
  }
  .film-card.list-view .film-number {
    /* Move to be inline with meta — visually subordinate */
    display: none;
  }
  .film-card.list-view .film-poster {
    width: 76px;
    height: 114px;
  }
  .film-card.list-view .film-info {
    padding-top: 2px;
    min-width: 0;
  }
  .film-card.list-view .film-title { font-size: 18px; line-height: .95; }
  .film-card.list-view .film-meta { font-size: 10px; letter-spacing: .10em; }
  .film-card.list-view .film-ratings { margin-top: 8px; }
  /* List rating row → compact 3 cols, no inline quote */
  .film-card.list-view .rating-row {
    grid-template-columns: 50px 22px 1fr;
    gap: 6px;
    font-size: 10.5px;
  }
  .film-card.list-view .rating-row .inline-quote { display: none; }
  .film-card.list-view .rating-row .star-bar { letter-spacing: 0; }

  .rewatch-tag {
    font-size: 9px !important;
    letter-spacing: .14em !important;
  }

  /* === WHEEL === */
  .wheel-container { padding: 16px 8px; }
  .wheel-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .wheel-pointer { right: 2%; }
  .wheel-pointer svg { width: 28px; height: auto; }
  .spin-button {
    padding: 16px 30px;
    font-size: 18px;
    letter-spacing: .24em;
    min-height: 44px;
    margin-top: 20px;
  }
  /* Cinematic shim alt spin button */
  #spin-btn, button.spin-button {
    padding: 16px 30px !important;
    font-size: 18px !important;
    letter-spacing: .24em !important;
  }

  /* Queue items */
  .queue-management { padding: 18px 14px; }
  .queue-item { padding: 12px 14px; gap: 12px; }
  .queue-title { font-size: 19px !important; }
  .queue-skip-btn, .queue-remove-btn { width: 44px; height: 44px; }
  .queue-input {
    min-width: 0;
    flex: 1 1 100%;
    min-height: 44px;
  }
  .guest-toggle { width: 100%; justify-content: space-between; }

  /* === STATS — top-row cards all in one row ===
     5 stat cards across at 375-390px viewport. Tight padding +
     smaller numbers + label wraps to 2 lines so headers fit. */
  .stats-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
  .stat-card {
    padding: 12px 4px;
    overflow: hidden;
    /* Flex column so the number can be bottom-aligned regardless of
       whether the label is 1 line or 2. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .stat-card h3 {
    font-size: 7px !important;
    letter-spacing: .18em !important;
    line-height: 1.2;
    margin: 0 !important;
    /* Reserve exactly two lines worth so the number sits at the same
       y across all cards (1-line labels still occupy 2-line space). */
    min-height: calc(2 * 1.2em);
    /* Clamp to 2 lines and clip overflow */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Push the stat-number to the bottom */
    margin-bottom: 8px !important;
  }
  .stat-number {
    font-size: 26px !important;
    letter-spacing: .02em;
    white-space: nowrap;
    /* Glue to the bottom of the flex column */
    margin-top: auto;
  }
  .stats-section { padding: 18px 14px; margin-bottom: 14px; }
  .stats-section h3 { font-size: 24px; margin-bottom: 14px; padding-bottom: 10px; }
  /* 10-bar rating dist on stats page — keep but narrower gap */
  #rating-distribution-chart {
    gap: 4px;
    height: 160px;
  }
  .distribution-bar-item .bar-label,
  .distribution-bar-item .bar-count {
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }

  /* === MEMBERS === */
  /* Desktop is fixed 4 columns; phone drops to 1 column per user spec. */
  .detailed-member-stats { grid-template-columns: 1fr !important; }
  .member-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .member-stat-item { padding: 12px 8px; }
  .member-stat-item .stat-value { font-size: 22px; }
  .member-stat-item .stat-label { font-size: 8px; letter-spacing: .18em; }

  .director-spotlight-inner { gap: 12px; }
  .director-spotlight-info { min-width: 0; }
  .top-film-info { min-width: 0; }

  /* === QUOTES === */
  /* minmax(0, 1fr) — pure 1fr is shorthand for minmax(auto, 1fr) which
     lets the column grow when a child has min-content larger than the
     container (long quote text). minmax(0, 1fr) clamps the floor at 0
     so the column stays at the container's width. min-width: 0 on the
     card lets its overflow:hidden/text-overflow:ellipsis children
     actually shrink instead of forcing the card wider. */
  .top-quotes-grid, .quotes-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .quote-card { padding: 18px 16px 14px; gap: 14px; min-width: 0; }
  .quote-body { padding-right: 30px; min-width: 0; }
  .quote-text { font-size: 17px !important; line-height: 1.4; }
  .quote-rank { font-size: 24px !important; top: 12px; right: 14px; }
  .quote-footer { gap: 10px; padding-top: 12px; min-width: 0; }
  /* Words break if a single token is wider than the container */
  .quote-text, .quote-member { word-break: break-word; overflow-wrap: anywhere; }

  /* === FILM DETAIL MODAL === */
  .modal-content { padding-bottom: 24px; }

  /* === SEARCHLIGHTS — let them extend past wheel-container ===
     Only clip horizontally so the body can't pick up the beams' width.
     Vertical overflow stays visible so the beams reach all the way
     down to the film queue tile, which sits on top of them and
     provides the visual crop. */
  .searchlights {
    overflow-x: clip;
    overflow-y: visible;
    width: 100%;
    max-width: 100vw;
  }
}

/* Even tighter — small phones (iPhone SE, Galaxy S8) */
@media (max-width: 380px) {
  .container { padding: 0 12px; }
  .main .container { padding: 12px; }
  .hero-title { font-size: 34px; }
  .logo .mark { font-size: 20px; }
  .films-grid { gap: 8px; }
  .films-grid:not(.list-view) .film-info { padding: 8px 8px 10px; }
  .films-grid:not(.list-view) .film-title { font-size: 14px; }
}

/* ============================================================
   MOBILE PASS 2 — phones at 600px (round 2 of feedback)
   Layered AFTER everything else so it wins specificity ties.
   ============================================================ */
@media (max-width: 600px) {

  /* === NOTCH COVER — hard black rectangle over iPhone safe-area top === */
  .notch-cover {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top, 0px);
    background: #000;
    z-index: 9999;
    pointer-events: none;
  }

  /* === MARQUEE (mobile rebuild) ===
     CSS animation removed — the shim's startMobileMarquee() runs an
     rAF loop that translates the .marquee-track directly. That's the
     only way to get consistent speed AND no glitching across iOS Safari
     and Chrome Android. CSS just provides the layout box + colors. */
  .marquee {
    position: fixed !important;
    top: env(safe-area-inset-top, 0px) !important;
    left: 0; right: 0;
    z-index: 300;
    border-top-width: 0;
    border-bottom-width: 1px;
    overflow: hidden;
    box-sizing: border-box;
    height: 22px;
    /* Centre the track vertically. align-items: center keeps the text
       baseline visually in the middle of the red box regardless of
       font ascent/descent. */
    display: flex;
    align-items: center;
  }
  .marquee-track {
    padding: 0 !important;
    font-size: 8px !important;
    letter-spacing: .22em !important;
    line-height: 1 !important;          /* tight to font size, flex centres it */
    animation: none !important;
    will-change: transform;
    display: inline-block;
    white-space: nowrap;
  }
  .marquee-track span { margin: 0; }
  .marquee-track span::before { margin: 0 14px; }

  html { background: #000 !important; }
  body {
    background: #000 !important;
    /* Reserve space for: safe-area + marquee (22) + header (53 default,
       JS overrides via --header-h) + nav (~45). The fixed-position
       marquee/header/nav stack on top of this padding. */
    padding-top: calc(
      env(safe-area-inset-top, 0px)
      + 22px
      + var(--header-h, 53px)
      + 45px
    ) !important;
  }

  /* === TOP NAV (mobile) — fixed below the header ===
     Slides UP into the header's slot when the header hides on scroll-down. */
  #mobile-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: fixed;
    /* Initial offset = marquee (22) + header height (set by JS via --header-h, fallback 53) */
    top: calc(env(safe-area-inset-top, 0px) + 22px + var(--header-h, 53px));
    left: 0; right: 0;
    z-index: 200;
    background: #0a0a0a;
    border-bottom: 1px solid var(--line);
    bottom: auto;
    margin: 0;
    padding: 0;
    transition: top .22s ease;
    will-change: top;
  }
  body.scroll-down #mobile-tabs {
    /* Slide up to where the header was — only the marquee stays above. */
    top: calc(env(safe-area-inset-top, 0px) + 22px);
  }
  #mobile-tabs .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 4px;
    background: transparent;
    border: none;
    color: var(--muted);
    font: 500 10px/1 'DM Sans', sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
  }
  #mobile-tabs .tab.active {
    color: var(--gold);
    background: rgba(212,162,76,.08);
    /* Gold underline at BOTTOM now (top nav, was top before for bottom tab bar) */
    box-shadow: inset 0 -2px 0 var(--gold);
  }

  /* No body padding-bottom needed anymore — nav is at top */
  body { padding-bottom: 0 !important; }

  /* === HEADER — fixed at top, slides out on scroll-down ===
     User wants: header visible at the top by default and whenever the
     user scrolls UP, even after scrolling down deep into the page.
     Pattern: position: fixed; transform: translateY(0) by default;
     transform: translateY(-100%) when body.scroll-down (toggled by
     a JS scroll-direction listener). transition smooths the slide. */
  .header {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 22px); /* marquee height */
    left: 0; right: 0;
    z-index: 250;
    margin-top: 0;
    transition: transform .22s ease;
    will-change: transform;
  }
  body.scroll-down .header {
    transform: translateY(-110%);                    /* extra so border doesn't peek */
  }

  /* === TOP NAV — hidden on mobile, replaced by bottom tab bar === */
  .header .nav { display: none; }
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  /* (Mobile tab bar moved BACK to the top — sticky strip under the
     marquee. The rules above this @media-level block now define it.) */

  /* Hero banner sits inside the container gutters on mobile (matches the
     content-width treatment used at every other breakpoint). */

  /* === WHEEL — searchlights reach further down === */
  /* Wheel container shrinks vertical padding so the beams have room. */
  .wheel-container {
    padding: 14px 8px 24px !important;
  }
  /* Allow beams to extend past the wheel-container bottom — the queue
     tile sits below as a sibling and visually covers the lower beam
     ends with its dark background, exactly as the user wants. */
  .searchlights {
    overflow-x: clip;
    overflow-y: visible;
    height: 110vh;
    bottom: -25vh;
  }

  /* Mobile beams keep fixed centre offsets too, just pulled inward. */
  .searchlight {
    height: 120vh;
    --source-y: -18vh;
  }
  .searchlight.beam-a { --source-x: calc(50vw - 140px); }
  .searchlight.beam-b { --source-x: calc(50vw - 65px); }
  .searchlight.beam-c { --source-x: calc(50vw + 65px); }
  .searchlight.beam-d { --source-x: calc(50vw + 140px); }

  /* === FILM QUEUE — grid 4 per row on mobile === */
  .queue-management { padding: 14px 12px 18px; }
  #queue-list, .queue-grid, .queue-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-top: 12px;
  }
  .queue-item {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
  }
  .queue-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    height: auto;
  }
  .queue-title {
    font-size: 13px !important;
    letter-spacing: .02em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .queue-suggestor {
    font-size: 8px !important;
    letter-spacing: .18em !important;
  }
  .queue-actions { gap: 4px; }
  .queue-skip-btn, .queue-remove-btn {
    width: 32px; height: 32px;
    font-size: 12px;
  }
  /* "FILM QUEUE / X FILMS / GUESTS" header row tightens */
  .queue-management h3 {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 28px;
  }
  #queue-count { font-size: 9px !important; letter-spacing: .18em !important; }

  /* === STATS PAGE === */
  /* Timeline — half the height per spec */
  #timeline-chart,
  #club-timeline,
  [id*="timeline"][id$="chart"] {
    height: auto !important;
  }
  #timeline-chart svg,
  #club-timeline svg {
    max-height: 220px !important;       /* was ~440 */
    width: 100% !important;
    height: auto !important;
  }

  /* Decades chart — squeeze into 1 row */
  #decades-chart {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  /* Shrink each decade's bars/labels so 8-11 columns fit at 375px */
  #decades-chart .bar-chart-bars {
    height: 80px;
    gap: 2px;
  }
  #decades-chart .bar-chart-bar { width: 8px; }
  #decades-chart .bar-chart-label {
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }
  #decades-chart .bar-value { font-size: 9px !important; }
  #decades-chart .bar-count {
    font-size: 7px !important;
    letter-spacing: 0 !important;
  }

  /* === FAQ — kill top padding === */
  .faq-band {
    padding: 18px 14px 24px !important;
  }
  .faq-band h1 { font-size: 44px !important; margin-bottom: 8px !important; }
  .faq-band .kicker { margin-bottom: 10px !important; }
  .faq-page,
  .main.faq-page .container { padding-top: 0 !important; }
}

/* Desktop: hide the mobile tab bar entirely */
@media (min-width: 601px) {
  #mobile-tabs { display: none !important; }
}

/* ============================================================
   CONTROLS COLLAPSE — applies whenever the viewport is too narrow
   to fit search + 4 filter dropdowns + films-per-row slider + view
   toggle on a single row. The shim wraps .filters in <details>, the
   layout below shows the "Filters" summary button, and the dropdowns
   collapse into a 2-col grid that unfurls on tap. The grid/list view
   toggle ALWAYS stays on row 1 next to search. The films-per-row
   slider is hidden — only meaningful at desktop widths.
   ============================================================ */
@media (max-width: 1100px) {
  .controls {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 8px;
    padding: 12px;
    margin-bottom: 14px;
  }
  .controls > .search-box {
    grid-column: 1;
    grid-row: 1;
    flex: 1 1 100%;
    min-width: 0;
  }
  .controls > .search-box input {
    min-height: 44px;
    font-size: 13px;
  }
  .controls > .view-toggle,
  .controls > .mobile-view-toggle {
    grid-column: 2;
    grid-row: 1;
    width: 44px; height: 44px;
    padding: 0;
    font-size: 0;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8e2d5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7'/><rect x='14' y='3' width='7' height='7'/><rect x='3' y='14' width='7' height='7'/><rect x='14' y='14' width='7' height='7'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
  }
  /* Higher specificity than the base `.controls > .filters-details` rule
     so the collapse layout actually wins at this breakpoint. */
  .controls > .filters-details {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .filters-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    background: var(--ink);
    border: 1px solid var(--line-2);
    color: var(--cream);
    font: 500 11px/1 'DM Sans', sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    user-select: none;
  }
  .filters-details > summary::-webkit-details-marker { display: none; }
  .filters-details > summary::after {
    content: "▾";
    color: var(--gold);
    font-size: 11px;
    transition: transform .2s;
  }
  .filters-details[open] > summary::after { transform: rotate(180deg); }
  .filters-details[open] > summary {
    border-color: var(--gold);
    background: rgba(212,162,76,.06);
    color: var(--gold);
  }
  /* Always 4 dropdowns on a single row — never wrap. minmax(0, 1fr) lets
     each column shrink below its intrinsic content width on narrow phones
     (the selects are chevron-only at small widths so that's fine). */
  .filters-details > .filters {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 6px;
    width: 100%;
  }
  .filters-details > .filters select {
    width: 100%;
    min-height: 44px;
    flex: none;
    min-width: 0;
    font-size: 11px;
    letter-spacing: .08em;
  }
  .filters-details > .filters > .view-toggle,
  .filters-details > .filters > .comparison-toggle { display: none; }
}

/* Desktop ≥1101px: dropdowns render inline; summary is hidden. */
@media (min-width: 1101px) {
  .filters-details > summary { display: none !important; }
  /* Defend against details ending up closed on desktop — force visible. */
  .filters-details > .filters,
  .filters-details:not([open]) > .filters {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
}