/* 
   BD Horror DB  Auth & User UI Styles
   Append to main.css or load as separate stylesheet
    */

/*  NAV AUTH AREA  */
#nav-auth-area {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-dropdown-item {
  display: block;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-dropdown-item:hover { color: var(--blood-bright); background: #1e1e1e; }

/*  NOTIFICATION BELL  */
.notif-bell-wrap {
  position: relative;
  flex-shrink: 0;
  /* JS toggles display:flex/none based on auth state — stays out of
     auth.js's nav-auth-area innerHTML churn, and out of the >860px
     nav-auth-area hide rule, so it works on both desktop and mobile. */
  display: none;
  align-items: center;
  margin-left: 4px;
}
.notif-bell-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: color .15s;
}
.notif-bell-btn:hover { color: var(--bone); }
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--blood-bright);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  border: 2px solid #0a0a0a;
}
.notif-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: -12px;
  width: min(360px, calc(100vw - 32px));
  max-height: 420px;
  overflow-y: auto;
  background: #161616;
  border: 1px solid var(--border2);
  z-index: 250;
}
.notif-dropdown-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blood-bright);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.notif-list { display: flex; flex-direction: column; }
.notif-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid #1e1e1e;
  text-decoration: none;
  transition: background .15s;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: #1e1e1e; }
.notif-row.unread { background: rgba(231,15,72,.06); }
.notif-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--blood);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}
.notif-avatar img { width: 100%; height: 100%; object-fit: cover; }
.notif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-text > span:first-child { font-size: 13px; color: var(--pale); line-height: 1.4; }
.notif-text strong { color: #fff; font-weight: 600; }
.notif-time { font-family: var(--font-mono); font-size: 10px; color: var(--dim); letter-spacing: .5px; }
.notif-empty {
  padding: 24px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
}
@media (max-width: 600px) {
  .notif-dropdown { right: -60px; width: min(340px, calc(100vw - 24px)); }
}

/* Below 860px, .site-nav .container gets overflow:hidden (added for the
   hamburger animation) which clips any position:absolute child that
   extends past the nav bar's own box — including this dropdown. Switching
   to position:fixed anchors it to the viewport instead, bypassing that
   ancestor clip entirely. */
@media (max-width: 860px) {
  .notif-dropdown {
    position: fixed;
    top: var(--nav-height);
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }
}

/*  AUTH PAGES (login / signup)  */
.auth-page {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px var(--content-pad);
  background: var(--ash);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: #141414;
  border: 1px solid var(--border2);
  padding: 40px;
}
.auth-heading {
  font-family: var(--font-title); font-weight: 800;
  font-size: 44px;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}
.auth-heading .accent { color: var(--blood-bright); }
.auth-subhead {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
  letter-spacing: .5px;
  margin-bottom: 32px;
}
.auth-field { margin-bottom: 20px; }
.auth-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.auth-input {
  width: 100%;
  background: #0f0f0f;
  border: 1px solid var(--border2);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
}
.auth-input:focus { border-color: var(--blood-bright); }
.auth-input::placeholder { color: var(--dim); }
.auth-submit {
  width: 100%;
  background: var(--blood);
  color: #fff;
  border: none;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px;
  cursor: pointer;
  transition: background .15s;
  margin-top: 8px;
}
.auth-submit:hover { background: var(--blood-bright); }
.auth-submit:disabled { background: #3a1a1a; color: var(--dim); cursor: not-allowed; }
.auth-error {
  background: rgba(231,15,72,.12);
  border: 1px solid rgba(231,15,72,.3);
  color: #e70f48;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 14px;
  margin-bottom: 20px;
  display: none;
}
.auth-error.show { display: block; }
.auth-success {
  background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.25);
  color: var(--green-pos);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 14px;
  margin-bottom: 20px;
  display: none;
}
.auth-success.show { display: block; }
.auth-switch {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin-top: 20px;
}
.auth-switch a { color: var(--blood-bright); text-decoration: underline; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.auth-divider span { font-family: var(--font-mono); font-size: 10px; color: var(--dim); letter-spacing: 1px; }

.oauth-buttons { display: flex; flex-direction: column; gap: 10px; }
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #0f0f0f;
  border: 1px solid var(--border2);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .5px;
  padding: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.oauth-btn:hover { border-color: var(--blood-bright); background: #161616; }
.oauth-btn svg { flex-shrink: 0; }

/*  PROFILE PAGE  */
.profile-hero {
  background: #111;
  border-bottom: 1px solid var(--border);
  padding: 52px 0 44px;
  position: relative;
  z-index: 1;
}
.profile-hero .container { display: flex; gap: 36px; align-items: flex-end; }
.profile-avatar-wrap {
  flex-shrink: 0;
  position: relative;
  width: 110px;
  height: 110px;
}
.profile-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border2);
  background: #1a1a1a;
  display: block;
}
.profile-avatar-initials {
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--blood); display: flex; align-items: center;
  justify-content: center; font-family: var(--font-title); font-weight: 800;
  font-size: 44px; color: #fff; letter-spacing: 0.02em;
  border: 2px solid var(--blood-bright);
}
.profile-avatar-edit {
  position: absolute; bottom: 4px; right: 4px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blood-bright); border: 2px solid #111;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.profile-avatar-edit:hover { background: var(--blood); }
.profile-avatar-edit svg { width: 13px; height: 13px; stroke: #fff; }
.profile-info { flex: 1; }
.profile-username {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--blood-bright); margin-bottom: 6px;
}
.profile-display-name {
  font-family: var(--font-title); font-weight: 800; font-size: 52px;
  letter-spacing: 0.02em; color: #fff; line-height: 1; margin-bottom: 10px;
}
.profile-bio { font-size: 17px; font-weight: 300; color: var(--muted); max-width: 560px; }
.profile-stats {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
}
.profile-stat { text-align: center; cursor: default; }
.profile-stat-num {
  font-family: var(--font-title); font-weight: 800; font-size: 28px;
  letter-spacing: 0.02em; color: var(--bone); line-height: 1;
}
.profile-stat-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin-top: 3px;
}
.profile-follow-btn {
  padding: 9px 24px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.profile-follow-btn.follow {
  background: var(--blood); border: 1px solid var(--blood); color: #fff;
}
.profile-follow-btn.follow:hover { background: var(--blood-bright); border-color: var(--blood-bright); }
.profile-follow-btn.unfollow {
  background: transparent; border: 1px solid var(--border2); color: var(--muted);
}
.profile-follow-btn.unfollow:hover { border-color: var(--blood-bright); color: var(--blood-bright); }

.profile-body { padding: 44px 0; }
.profile-body .container { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }

/*  TABS  */
.bd-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 28px; gap: 0; }
.bd-tab {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 10px 20px; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--dim); cursor: pointer;
  margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.bd-tab.active { color: var(--blood-bright); border-bottom-color: var(--blood-bright); }
.bd-tab:hover:not(.active) { color: var(--muted); }
.bd-tab-panel { display: none; }
.bd-tab-panel.active { display: block; }

/*  FILM GRID SMALL (watched, rated, lists)  */
.film-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
  position: relative;
  z-index: 2;
}
.film-grid-sm a.film-card {
  position: relative;
  z-index: 2;
  display: block;
}

.load-more-btn {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--dim);
  padding: 8px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .5px;
  transition: border-color .15s, color .15s;
}
.load-more-btn:hover {
  border-color: var(--blood-bright);
  color: var(--blood-bright);
}

/*  STAR RATING  */
.star-rating {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
}
.star {
  font-size: 22px; color: var(--border2);
  transition: color .1s; line-height: 1; user-select: none;
}
/* Half-star input widget: the whole row is one continuous drag/tap
   surface (bindStarRating() in film.js), not per-star click zones — a
   value is computed from where the pointer sits across the track's total
   width, snapped to the nearest half star, then just previewed until the
   Submit button is pressed. Each star still carries one of
   .star-full/.star-half/.star-empty (same three classes and colors the
   read-only average display below already uses — see .star-row and its
   .star-full/.star-half/.star-empty rules further down this file) to show
   the live preview or the last saved value. touch-action: none stops the
   browser from treating a horizontal drag as a page-scroll gesture. */
.star-rating-track {
  display: inline-flex; gap: 4px; align-items: center;
  cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  padding: 6px 2px; margin: -6px -2px;
}
.star-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--dim);
  margin-left: 4px; letter-spacing: .5px;
  /* Fixed width so the label doesn't reflow the Submit/Cancel buttons as
     its text changes length between whole ratings ("3/5") and half ones
     ("3.5/5") — 5ch covers the longest possible value ("X.5/5"), and
     being monospace (var(--font-mono)) each ch is a reliable, identical
     width. Left-aligned text just leaves trailing space on shorter
     values instead of letting the row's total width shift. */
  display: inline-block;
  min-width: 5ch;
}
/* Unlike the stars above (one continuous drag surface, not individually
   tapped), Submit/Cancel ARE discrete tap targets — sized to the 44px
   touch-target guideline (Apple HIG / Material) since these are the one
   part of this widget a phone user still has to hit precisely. */
.star-submit-btn, .star-cancel-btn {
  font-family: var(--font-mono); font-size: 15px; line-height: 1;
  border: 1px solid var(--border2); background: transparent; cursor: pointer;
  width: 36px; height: 36px; padding: 0; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.star-submit-btn { color: var(--gold); }
.star-submit-btn:hover:not(:disabled) { border-color: var(--gold); background: rgba(200,168,75,.12); }
.star-submit-btn:disabled { opacity: .5; cursor: default; }
.star-cancel-btn { color: var(--muted); margin-left: 6px; }
.star-cancel-btn:hover { border-color: var(--blood-bright); color: var(--blood-bright); }

/* A bigger, more comfortable drag lane on touch-sized viewports — the
   drag-surface model above doesn't strictly need this the way individual
   click zones would have, but a larger target is still easier to drag
   precisely with a fingertip than a small one. Submit/Cancel also grow
   here, up to the full 44px guideline. */
@media (max-width: 600px) {
  .star-rating-track .star { font-size: 30px; }
  .star-rating-track { gap: 6px; padding: 10px 2px; margin: -10px -2px; }
  .star-submit-btn, .star-cancel-btn { width: 44px; height: 44px; font-size: 17px; }
}

/*  WATCHED / INTERACT BUTTONS ON FILM PAGES  */
.film-interact {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; background: var(--card-bg);
  border: 1px solid var(--border); margin-bottom: 18px;
}
.film-interact-heading {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--blood-bright); margin-bottom: 4px;
}
.watched-btn {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: transparent; border: 1px solid var(--border2); color: var(--muted);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer; transition: all .15s; width: 100%;
}
.watched-btn:hover { border-color: var(--blood-bright); color: var(--bone); }
.watched-btn.watched { background: rgba(231,15,72,.18); border-color: var(--blood); color: var(--blood-bright); }
.watched-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.watchlist-btn {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: transparent; border: 1px solid var(--border2); color: var(--muted);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer; transition: all .15s; width: 100%;
}
.watchlist-btn:hover { border-color: var(--blood-bright); color: var(--bone); }
.watchlist-btn.watchlisted { background: rgba(231,15,72,.18); border-color: var(--blood); color: var(--blood-bright); }
.watchlist-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.favorite-btn {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: transparent; border: 1px solid var(--border2); color: var(--muted);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer; transition: all .15s; width: 100%;
}
.favorite-btn:hover { border-color: var(--gold); color: var(--bone); }
.favorite-btn.favorited { background: rgba(200,168,75,.18); border-color: var(--gold); color: var(--gold); }
.favorite-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.add-list-btn {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: transparent; border: 1px solid var(--border2); color: var(--muted);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer; transition: all .15s; width: 100%;
}
.add-list-btn:hover { border-color: var(--blood-bright); color: var(--bone); }
.add-list-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.discuss-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px;
  background: transparent; border: 1px solid var(--blood-bright); color: var(--bone);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer; transition: all .15s; width: 100%;
  text-decoration: none;
}
.discuss-btn:hover { background: rgba(200,30,30,.12); }
.discuss-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.discuss-btn__count { color: var(--dim); font-weight: 400; }

/*  LIST DROPDOWN  */
.list-picker {
  display: none; background: #161616; border: 1px solid var(--border2);
  padding: 8px 0; margin-top: 6px;
}
.list-picker.open { display: block; }
.list-picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); cursor: pointer; transition: color .15s, background .15s;
}
.list-picker-item:hover { background: #1e1e1e; color: var(--bone); }
.list-picker-item.in-list { color: var(--blood-bright); }
.list-picker-new {
  border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px;
  color: var(--blood-bright) !important;
}

/*  COMMUNITY / LEADERBOARD  */
.community-page { padding: 44px 0; }
.leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  margin-bottom: 48px;
}
.user-card {
  background: var(--card-bg); border: 1px solid var(--border);
  padding: 22px; text-align: center; transition: border-color .2s; cursor: pointer;
}
.user-card:hover { border-color: var(--blood-bright); }
.user-card-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 12px; overflow: hidden;
  border: 2px solid var(--border2); background: #1a1a1a;
}
.user-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-card-initials {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 12px; background: var(--blood);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-weight: 800; font-size: 28px; color: #fff; letter-spacing: 0.02em;
}
.user-card-name { font-family: var(--font-title); font-weight: 800; font-size: 20px; letter-spacing: 0.02em; color: #fff; margin-bottom: 4px; }
.user-card-username { font-family: var(--font-mono); font-size: 10px; color: var(--dim); letter-spacing: 1px; margin-bottom: 12px; }
.user-card-stats { display: flex; justify-content: center; gap: 16px; }
.ucs { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-align: center; }
.ucs strong { display: block; font-family: var(--font-title); font-weight: 800; font-size: 18px; color: var(--bone); letter-spacing: 0.02em; }

/*  ACTIVITY FEED  */
.activity-feed { display: flex; flex-direction: column; gap: 0; }
.activity-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid #1e1e1e;
}
.activity-item:last-child { border-bottom: none; }
.activity-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; background: var(--blood); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-weight: 800; font-size: 16px; color: #fff;
}
.activity-avatar img { width: 100%; height: 100%; object-fit: cover; }
.activity-poster-thumb {
  width: 36px; height: 54px; flex-shrink: 0; background: #1a1a1a;
  border: 1px solid var(--border); overflow: hidden;
}
.activity-poster-thumb img { width: 100%; height: 100%; object-fit: cover; }
.activity-text { flex: 1; min-width: 0; }
.activity-text p { font-size: 15px; color: var(--pale); line-height: 1.5; }
.activity-text p a { color: var(--bone); font-weight: 400; }
.activity-text p a:hover { color: var(--blood-bright); }
.activity-time {
  font-family: var(--font-mono); font-size: 10px; color: var(--dim);
  margin-top: 4px; letter-spacing: .5px;
}
.activity-stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; }
/* community.php's activityItem() now renders a 'rated' entry's stars via
   activityStars() (a local copy of film.js's starsHtml(), same reasoning
   as this codebase's other cross-file ports — see wordpress-trending-
   movies-module notes), which emits .star spans. Those carry their own
   explicit 22px font-size (see film-page STAR RATING block in this same
   file) — override it back down here so it doesn't blow up this row. */
.activity-stars .star { font-size: 13px; }

/* Same fix, one more spot: profile.php / my-profile.php's film-thumb
   rating badges (.fc-score, used for the "Ratings" grid and the profile's
   own Activity feed via profileStars()) — same shared .star class, same
   22px-blowing-up-a-compact-row problem, same override pattern. */
.fc-score .star { font-size: 12px; }

/*  LISTS PAGE  */
.lists-page { padding: 44px 0; }
.list-card {
  background: var(--card-bg); border: 1px solid var(--border);
  padding: 22px; margin-bottom: 16px; transition: border-color .2s;
}
.list-card:hover { border-color: var(--border2); }
.list-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.list-card-head-left { display: flex; align-items: center; gap: 8px; }
.list-star-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--dim); line-height: 1; font-size: 26px;
  transition: color .15s, transform .15s;
}
.list-star-btn:hover { color: var(--gold); transform: scale(1.1); }
.list-star-btn.featured { color: var(--gold); }
.list-card-name {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  transition: color .15s;
}
.list-card-name:hover { color: var(--blood-bright); }
.list-card-meta { font-family: var(--font-mono); font-size: 11px; color: var(--dim); }
.list-card-desc { font-size: 16px; font-weight: 300; color: var(--muted); margin-bottom: 14px; }
.list-poster-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}
.list-poster-strip-item {
  aspect-ratio: 2 / 3;
  background: #1a1a1a;
  border: 1px solid var(--border);
  overflow: hidden;
  display: block;
  transition: border-color .15s, transform .15s;
}
.list-poster-strip-item:hover { border-color: var(--blood-bright); transform: scale(1.05); z-index: 1; position: relative; }
.list-poster-strip-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); display: block; }
.list-poster-strip-item.extra-poster { display: none; }
.list-poster-strip.expanded .list-poster-strip-item.extra-poster { display: block; }
.list-poster-more-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px;
  background: transparent;
  border: 1px dashed var(--border2);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.list-poster-more-btn:hover { border-color: var(--blood-bright); color: var(--blood-bright); }
.list-actions { display: flex; gap: 10px; margin-top: 14px; }
.list-action-btn {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; padding: 7px 14px; background: transparent;
  border: 1px solid var(--border2); color: var(--muted); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.list-action-btn:hover { border-color: var(--blood-bright); color: var(--blood-bright); }
.list-action-btn.danger:hover { border-color: #e70f48; color: #e70f48; }
.new-list-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: rgba(231,15,72,.12);
  border: 1px dashed rgba(231,15,72,.3); color: var(--blood-bright);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer; width: 100%;
  transition: background .15s, border-color .15s;
  margin-bottom: 24px;
}
.new-list-btn:hover { background: rgba(231,15,72,.22); border-color: rgba(231,15,72,.5); }

/*  MODAL  */
.bd-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.bd-modal {
  background: #161616; border: 1px solid var(--border2);
  padding: 32px; width: 100%; max-width: 420px;
}
.bd-modal-title {
  font-family: var(--font-title); font-weight: 800; font-size: 28px; letter-spacing: 0.02em;
  color: #fff; margin-bottom: 20px;
}
.bd-modal-close {
  float: right; background: none; border: none; color: var(--dim);
  font-size: 24px; cursor: pointer; line-height: 1; padding: 0;
  transition: color .15s;
}
.bd-modal-close:hover { color: var(--bone); }

/*  LOGIN PROMPT (shown on film page when not logged in)  */
.login-prompt {
  background: var(--card-bg); border: 1px solid var(--border);
  padding: 18px; margin-bottom: 18px; text-align: center;
}
.login-prompt p {
  font-family: var(--font-mono); font-size: 12px; color: var(--dim);
  letter-spacing: .5px; margin-bottom: 12px; line-height: 1.6;
}
.login-prompt a {
  display: inline-block; padding: 9px 22px; background: var(--blood); color: #fff;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; transition: background .15s;
}
.login-prompt a:hover { background: var(--blood-bright); }

/*  COMMUNITY RATING (film page sidebar)  */
.community-score {
  display: flex; align-items: baseline; gap: 8px; margin-top: 8px;
}
.community-score-num {
  font-family: var(--font-title); font-weight: 800; font-size: 32px; color: var(--gold); letter-spacing: 0.02em;
}
.community-score-label { font-family: var(--font-mono); font-size: 11px; color: var(--dim); }

.star-row { display: inline-flex; font-size: 18px; letter-spacing: 2px; }
.star { display: inline-block; }
.star-full  { color: var(--gold); }
.star-empty { color: rgba(255,255,255,.15); }
.star-half {
  position: relative;
  color: rgba(255,255,255,.15);
}
.star-half::before {
  content: '★';
  position: absolute;
  left: 0; top: 0;
  width: 50%;
  overflow: hidden;
  color: var(--gold);
}

/* Raters list — film page, under Community Score */
.rater-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #222);
  cursor: pointer;
}
.rater-avatar-stack { display: flex; }
.rater-avatar-stack-item {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #141414;
  margin-left: -8px;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
  transition: transform .15s;
}
.rater-avatar-stack-item:first-child { margin-left: 0; }
.rater-avatar-stack-item:hover { transform: translateY(-2px); z-index: 1; position: relative; }
.rater-avatar-stack-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rater-avatar-fallback {
  width: 100%; height: 100%;
  background: var(--blood);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px;
}
.rater-more-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}
.rater-summary:hover .rater-more-label { color: var(--muted); }

.rater-expanded {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 880px; /* ~20 rows (42px row + 2px gap each) before scrolling */
  overflow-y: auto;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border2, #333) transparent;
}
.rater-expanded::-webkit-scrollbar { width: 6px; }
.rater-expanded::-webkit-scrollbar-track { background: transparent; }
.rater-expanded::-webkit-scrollbar-thumb { background: var(--border2, #333); border-radius: 3px; }
.rater-expanded::-webkit-scrollbar-thumb:hover { background: var(--muted, #999); }
.rater-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 2px;
  text-decoration: none;
  color: var(--bone);
}
.rater-row-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.rater-row-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rater-row-name {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rater-row:hover .rater-row-name { color: var(--blood-bright); }
.rater-row-stars { color: var(--gold); font-size: 11px; letter-spacing: 1px; flex-shrink: 0; }
/* bd_stars_html()/starsHtml() render .star spans, which carry their own
   explicit 22px font-size (see the STAR RATING block above) — override it
   back down here so switching this row from plain str_repeat() text to
   that shared renderer doesn't blow up this compact row's size. */
.rater-row-stars .star { font-size: 11px; }
.rater-showing-note {
  font-family: var(--font-mono); font-size: 10px; color: var(--dim);
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border, #222);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .profile-body .container { grid-template-columns: 1fr; }
  .leaderboard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .profile-hero .container { flex-direction: column; align-items: flex-start; }
  .auth-card { padding: 28px 20px; }
  .leaderboard-grid { grid-template-columns: 1fr; }
}