/* ============================================
   ROLLIT — PROFILE PAGE CSS
   ============================================ */

/* ---- HERO ---- */
.profile-hero {
  background: linear-gradient(135deg, #0e1020 0%, #120e1a 50%, #0e1820 100%);
  border-bottom: 0.5px solid var(--border);
  padding: 3rem 2.5rem 2.5rem;
}
/* A GRID, not a flex row, so the phone layout can put the avatar beside the
   name instead of stacking a 133px avatar block above everything. Desktop is
   the same three columns it always was: the avatar spans both rows, identity
   sits directly above the info block (row-gap 0 keeps them reading as one
   column), and the stats column spans the full height on the right. */
.profile-hero-inner {
  max-width: var(--content-max, 1100px); margin: 0 auto;
  display: grid; align-items: start;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar ident stats"
    "avatar info  stats";
  gap: 0 2.5rem;
}
.profile-avatar-wrap { grid-area: avatar; }
.profile-ident       { grid-area: ident; }
.profile-info        { grid-area: info; }
.profile-stats-col   { grid-area: stats; }
/* Grid items floor at min-content by default, so a horizontal scroller inside
   one (the stat strip, the role-chip row) widens its TRACK instead of
   scrolling — which drags the whole page into horizontal scroll. */
.profile-hero-inner > * { min-width: 0; }

/* Avatar */
.profile-avatar-wrap {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, #2a1842, #1a2a3a);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; color: var(--gold);
  border: 3px solid rgba(232,201,107,.3);
  box-shadow: 0 0 0 6px rgba(232,201,107,.06);
  position: relative; overflow: hidden;
}
/* Self can click their avatar to change the photo. */
.profile-avatar-editable { cursor: pointer; }
.avatar-edit-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  color: #fff; font-size: 16px; opacity: .92; transition: opacity .15s, height .15s, background .15s;
}
.profile-avatar-editable:hover .avatar-edit-overlay { height: 100%; align-items: center; padding: 0; background: rgba(0,0,0,.5); opacity: 1; }
.avatar-edit-overlay .spin { animation: rollit-spin 0.7s linear infinite; }
@keyframes rollit-spin { to { transform: rotate(360deg); } }
.profile-role-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  white-space: nowrap;
}

/* Info block */
/* min-width:0, not the old 240px floor: the hero is a grid now, the middle
   track already reserves the width, and a floor here re-introduces the
   min-content overflow the track's minmax(0,…) exists to prevent. */
.profile-info { min-width: 0; }
.profile-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.8rem; line-height: 1; letter-spacing: 2px; margin-bottom: 4px;
}
.profile-handle { font-size: 12px; color: var(--muted); margin-bottom: .9rem; }
.profile-role-full { display: flex; align-items: center; gap: 8px; margin-bottom: 1.2rem; flex-wrap: wrap; }

/* Bars */
.profile-bars { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.pbar-row { display: flex; align-items: center; gap: 10px; }
.pbar-label { font-size: 12px; color: var(--muted); min-width: 80px; }
.pbar-track { flex: 1; background: var(--bg3); border-radius: 20px; height: 5px; overflow: hidden; }
.pbar-fill  { height: 100%; border-radius: 20px; transition: width .6s ease; }
.pbar-val   { font-size: 12px; color: var(--text); font-weight: 500; min-width: 34px; text-align: right; }

/* Next-role progress */
.next-role { max-width: 360px; margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--border2, rgba(255,255,255,.08)); }
.next-role-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.next-role-label { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); font-weight: 600; }
.next-role-pct { margin-left: auto; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--text); line-height: 1; }
.next-role-track { background: var(--bg3); border-radius: 20px; height: 6px; overflow: hidden; }
.next-role-fill  { height: 100%; border-radius: 20px; transition: width .6s ease; }
.next-role-hint { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11px; color: var(--muted); }
.next-role-hint i { font-size: 12px; color: var(--gold); }
.next-role--max { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.next-role--max strong { color: var(--gold); }

/* Roles & Achievements — the payoff of the progress bar directly above it, so
   it reads as one unit with .next-role: same 360px column, joined to the track
   with no gap, gold like the badges it opens. Opens a modal in place, so it
   gets no arrow — the trophy count is the pull. */
.roles-cta {
  width: 100%; max-width: 360px; margin-top: 10px;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--gold) 32%, var(--border));
  color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.roles-cta:hover { background: color-mix(in srgb, var(--gold) 16%, transparent); border-color: var(--gold); }
.roles-cta > .ti-trophy { font-size: 1.15rem; color: var(--gold); }
.roles-cta-count {
  margin-left: auto; font-family: 'Bebas Neue', sans-serif;
  font-size: 1.35rem; line-height: 1; color: var(--gold);
}
.roles-cta-count small { font-size: .95rem; color: var(--muted); }

/* Calendar — a different kind of thing: it leaves the page. So it's a quiet
   full-width nav row, cool-toned (not gold), with a date and a travel arrow. */
.cal-link {
  width: 100%; max-width: 360px; margin-top: 8px;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 10px; text-decoration: none;
  background: var(--surface2, rgba(255,255,255,.03));
  border: 0.5px solid var(--border);
  color: var(--text); transition: background .15s, border-color .15s;
}
.cal-link:hover { background: color-mix(in srgb, var(--info) 10%, transparent); border-color: color-mix(in srgb, var(--info) 45%, var(--border)); }
.cal-link > .ti-calendar-event { font-size: 1.15rem; color: var(--info); }
.cal-link-txt  { font-size: 13px; font-weight: 600; }
.cal-link-meta { margin-left: auto; font-size: 11px; color: var(--muted); }
.cal-link-arrow { font-size: 1rem; color: var(--dim); transition: transform .15s, color .15s; }
.cal-link:hover .cal-link-arrow { color: var(--info); transform: translateX(2px); }

/* All-roles modal */
.roles-modal-bg {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(5,6,10,.8); backdrop-filter: blur(6px);
}
.roles-modal-bg.open { display: flex; }
.roles-modal {
  width: 100%; max-width: 560px; max-height: 84vh; overflow-y: auto;
  background: var(--surface, #14151f);
  border: 0.5px solid var(--border2, rgba(255,255,255,.12));
  border-radius: 18px; padding: 0 22px 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent;
}
/* Custom scrollbar (WebKit) */
.roles-modal::-webkit-scrollbar { width: 11px; }
.roles-modal::-webkit-scrollbar-track { background: transparent; }
.roles-modal::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12); border-radius: 20px;
  border: 3px solid transparent; background-clip: content-box;
}
.roles-modal::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); background-clip: content-box; }

/* Sticky header so the title stays put while the ladder scrolls */
.roles-modal-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 -22px 18px; padding: 20px 22px 14px;
  background: var(--surface, #14151f);
  border-bottom: 0.5px solid var(--border, rgba(255,255,255,.07));
}
.roles-modal-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.roles-modal-close {
  background: var(--surface2, rgba(255,255,255,.05)); border: 0.5px solid var(--border2, rgba(255,255,255,.1));
  width: 30px; height: 30px; border-radius: 8px; color: var(--muted);
  font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: all .15s;
}
.roles-modal-close:hover { color: var(--text); border-color: rgba(255,255,255,.25); }

/* Category switcher — Roles | Achievements */
.rm-cats {
  display: flex; gap: 6px; margin-bottom: 18px; padding: 4px;
  background: var(--surface2, rgba(255,255,255,.04));
  border: 0.5px solid var(--border2, rgba(255,255,255,.1)); border-radius: 11px;
}
.rm-cat {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 600; transition: all .15s;
}
.rm-cat:hover { color: var(--text); }
.rm-cat.on { background: var(--surface, #14151f); color: var(--gold); box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.rm-cat i { font-size: 15px; }
.rm-cat-count { font-weight: 400; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.rm-cat.on .rm-cat-count { color: var(--muted); }

.roles-modal-group { margin-bottom: 22px; }
.roles-modal-group:last-child { margin-bottom: 0; }
.roles-modal-group-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim);
  font-weight: 700; margin-bottom: 13px; display: flex; align-items: center; gap: 9px;
}
.roles-modal-group-title::after { content: ''; flex: 1; height: 0.5px; background: var(--border, rgba(255,255,255,.09)); }
.roles-modal-group-title span { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }

/* Role card */
.role-prog {
  position: relative; padding: 14px; border-radius: 12px; margin-bottom: 10px;
  background: var(--surface2, rgba(255,255,255,.025));
  border: 1px solid var(--border, rgba(255,255,255,.06));
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.role-prog:last-child { margin-bottom: 0; }
.role-prog:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.14); }
.role-prog.locked { opacity: .8; }
.role-prog.locked .role-badge { filter: grayscale(.35); }
.role-prog.earned { background: rgba(255,255,255,.04); }
.role-prog.active {
  border-color: color-mix(in srgb, var(--rc) 55%, transparent);
  background: linear-gradient(95deg, color-mix(in srgb, var(--rc) 13%, transparent), transparent 72%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 28%, transparent), 0 10px 26px rgba(0,0,0,.28);
}
.role-prog.active::before {
  content: ''; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--rc);
}

.role-prog-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.role-prog-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rprog-weight {
  font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap;
  background: var(--bg3, #141520); border: 0.5px solid var(--border2, rgba(255,255,255,.12));
  padding: 2px 7px; border-radius: 20px;
}
.rprog-status { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rprog-status i { font-size: 14px; }
.rprog-status.pct { color: var(--muted); font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: .5px; }
.rprog-status.earned { color: var(--toproll); }
.rprog-status.active {
  color: #1a1000; background: var(--rc); padding: 3px 11px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}

.role-prog-track { background: var(--bg3, #141520); border-radius: 20px; height: 7px; overflow: hidden; }
.role-prog-fill {
  height: 100%; border-radius: 20px; transition: width .7s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 55%, transparent);
}

.role-prog-reqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rprog-chip {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted);
  background: var(--bg3, #141520); border: 0.5px solid var(--border2, rgba(255,255,255,.08));
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.rprog-chip strong { color: var(--text); font-weight: 600; }
.rprog-chip-sep { color: var(--dim); margin: 0 1px; }
.rprog-chip i { font-size: 12px; }
.rprog-chip.met { color: var(--toproll); border-color: rgba(62,212,154,.32); background: rgba(62,212,154,.09); }
.rprog-chip.met strong { color: var(--toproll); }

/* Stats column */
.profile-stats-col {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 6px; flex-shrink: 0; width: 250px;
}

/* Critic score — the headline stat. */
.pstat-headline {
  border: 0.5px solid color-mix(in srgb, var(--cs, var(--gold)) 34%, var(--border));
  background: color-mix(in srgb, var(--cs, var(--gold)) 8%, transparent);
  border-radius: 12px; padding: 12px 14px; text-align: center;
}
.pstat-headline-val { font-family: 'Bebas Neue', sans-serif; font-size: 2.8rem; line-height: 1; color: var(--cs, var(--gold)); }
.pstat-headline-lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-top: 3px; }

/* Everything else — a compact grid where the number carries the category hue. */
.pstat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pstat {
  text-align: center; padding: 9px 4px 8px; border-radius: 10px;
  background: var(--surface2, rgba(255,255,255,.03)); border: 0.5px solid var(--border);
}
.pstat-val { font-family: 'Bebas Neue', sans-serif; font-size: 1.55rem; color: var(--gold); line-height: 1; }
.pstat-lbl { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }

/* Category colours (number + a faint tinted border to group them). */
.cat-rating   .pstat-val { color: var(--gold); }
.cat-peak     .pstat-val { color: var(--toproll); }
.cat-meh      .pstat-val { color: #9aa0ad; }
.cat-flop     .pstat-val { color: var(--flop); }
.cat-library  .pstat-val { color: var(--info); }
.cat-forecast .pstat-val { color: var(--predict); }
.cat-streak   .pstat-val { color: #ff8a3d; }
.cat-rating   { border-color: color-mix(in srgb, var(--gold) 26%, var(--border)); }
.cat-peak     { border-color: color-mix(in srgb, var(--toproll) 30%, var(--border)); }
.cat-meh      { border-color: color-mix(in srgb, #9aa0ad 26%, var(--border)); }
.cat-flop     { border-color: color-mix(in srgb, var(--flop) 30%, var(--border)); }
.cat-library  { border-color: color-mix(in srgb, var(--info) 30%, var(--border)); }
.cat-forecast { border-color: color-mix(in srgb, var(--predict) 30%, var(--border)); }
.cat-streak   { border-color: color-mix(in srgb, #ff8a3d 34%, var(--border)); }

/* Streak tile — a clickable button (self) or a static tile (visitor). */
.pstat-streak { font: inherit; transition: background .15s; }
button.pstat-streak { cursor: pointer; }
button.pstat-streak:hover { background: color-mix(in srgb, #ff8a3d 12%, var(--surface2, rgba(255,255,255,.03))); }
.pstat-streak .pstat-val { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.pstat-streak .pstat-val i { font-size: 1.05rem; }

/* Export/share buttons — stat card + critic profile. */
.pstat-export, .dna-export {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface2, rgba(255,255,255,.04)); border: 0.5px solid var(--border2);
  border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); cursor: pointer; font-family: inherit; transition: all .15s;
}
.pstat-export i, .dna-export i { font-size: 15px; }
.pstat-export:hover, .dna-export:hover { border-color: var(--gold); color: var(--gold); }
.dna-export { margin-top: 14px; width: 100%; }

/* Roles modal — plain-language intro. */
.roles-modal-intro {
  font-size: 13px; line-height: 1.55; color: var(--muted);
  margin: 0 0 18px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface2, rgba(255,255,255,.03)); border: 0.5px solid var(--border);
}
.roles-modal-intro strong { color: var(--text); }

/* Community links under the name — watchers / watching (not stats). */
.profile-social { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; }
.psocial { background: none; border: none; cursor: pointer; padding: 2px; font-size: 13px; color: var(--muted); font-family: inherit; transition: color .15s; }
.psocial strong { color: var(--text); font-weight: 700; }
.psocial:hover { color: var(--text); }
.psocial:hover strong { color: var(--gold); }
.psocial-sep { color: var(--dim); }

/* ---- PEOPLE LIST MODAL (watchers / watching) ---- */
.people-list { display: flex; flex-direction: column; gap: 6px; }
.people-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 12px;
  border: 0.5px solid var(--border2, rgba(255,255,255,.08));
  background: var(--surface2, rgba(255,255,255,.03));
}
.people-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; }
.people-avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; letter-spacing: .5px;
  background: linear-gradient(135deg, var(--gold), #c79a3a); color: #1a1000;
}
.people-text { min-width: 0; }
.people-name { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people-role { margin-top: 3px; font-size: 11px; }
.people-action { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.people-you { font-size: 12px; color: var(--dim); padding: 0 6px; }
/* Removing a watcher is destructive but not alarming — keep it quiet until
   hover, so it never competes with the Watch button beside it. */
.people-remove {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted); background: none;
  border: 0.5px solid var(--border2, rgba(255,255,255,.08));
  transition: color .15s, border-color .15s, background .15s;
}
.people-remove:hover {
  color: var(--flop);
  border-color: rgba(232, 77, 99, .5);
  background: rgba(232, 77, 99, .08);
}
@media (max-width: 480px) {
  .people-remove span { display: none; }       /* icon-only when space is tight */
  .people-remove { padding: 6px 8px; }
}

/* ---- TABS ---- */
.profile-tabs-wrap {
  border-bottom: 0.5px solid var(--border);
  background: var(--bg2);
  position: sticky; top: var(--nav-h, 58px); z-index: 100;
}
.profile-tabs {
  max-width: var(--content-max, 1100px); margin: 0 auto;
  display: flex; gap: 2px; padding: 0 2.5rem;
  /* Scrolls at EVERY width, not just on phones: a full tab set plus the
     2.5rem gutters is wider than a 1024px laptop, which pushed the whole
     page into horizontal scroll. Invisible when the tabs already fit. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
  display: flex; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap;
  padding: 14px 20px; font-size: 13.5px; font-weight: 500;
  color: var(--muted); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  font-family: inherit; transition: all .18s;
}
.profile-tab:hover { color: var(--text); }
.profile-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab-count {
  background: var(--surface); border: 0.5px solid var(--border2);
  border-radius: 20px; padding: 1px 7px; font-size: 11px;
  color: var(--muted);
}
.profile-tab.active .tab-count { background: rgba(232,201,107,.1); border-color: rgba(232,201,107,.25); color: var(--gold); }

/* Phone/tablet: tighter gutters and a slightly more compact tab. */
@media (max-width: 768px) {
  .profile-tabs { padding: 0 1rem; }
  .profile-tab { padding: 12px 14px; }
}

/* ---- CONTENT AREA ---- */
.profile-content { max-width: var(--content-max, 1100px); margin: 0 auto; padding: 2rem 2.5rem; }

/* ---- EMPTY STATE ---- */
.empty-state {
  text-align: center; padding: 4rem 2rem;
  color: var(--muted); font-size: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}

/* ---- RATINGS TAB ---- */
.ratings-filter {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: 1.2rem;
}
.rf-chips { display: inline-flex; gap: 6px; background: var(--surface); border: 0.5px solid var(--border2); border-radius: 12px; padding: 4px; }
.rf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; border-radius: 9px;
  padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: background .15s, color .15s;
}
.rf-chip i { font-size: 15px; }
.rf-chip:hover { color: var(--text); }
.rf-chip.active { background: var(--gold); color: #201a06; }
/* Per-kind tally inside a chip (Watched shelf) — a quieter second value that
   still reads on the gold active chip. */
.rf-chip-n {
  font-size: 11px; font-weight: 700; opacity: .65;
  padding: 1px 5px; border-radius: 6px; background: rgba(255,255,255,.07);
}
.rf-chip.active .rf-chip-n { background: rgba(0,0,0,.13); opacity: .8; }
.rf-selects { display: inline-flex; gap: 8px; margin-left: auto; }
.rf-select {
  background: var(--surface); border: 0.5px solid var(--border2); border-radius: 10px;
  padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--text);
  cursor: pointer; font-family: inherit;
}
.rf-select:hover { border-color: var(--gold); }
/* Title search — shared by the Ratings / Watched / Watchlist shelves. It sits
   in the filter bar, which never re-renders while you type, so it keeps focus. */
.rf-search {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 0.5px solid var(--border2); border-radius: 10px;
  padding: 0 12px; min-width: 190px;
}
.rf-search:focus-within { border-color: var(--gold); }
.rf-search i { font-size: 15px; color: var(--muted); }
.rf-search-input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  padding: 8px 0; font-size: 13px; color: var(--text); font-family: inherit;
}
@media (max-width: 560px) {
  /* Wrap rather than squeeze: the Watched shelf carries three selects once
     there's something unrated on it, and three across a phone clipped the sort
     label down to "Recently wa". Two per row, the odd one spanning. */
  .rf-selects { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .rf-select { flex: 1 1 45%; min-width: 0; }
  .rf-search { width: 100%; }
}

/* Hero + content gutters. The 2.5rem desktop gutter eats 80px of a 360px
   phone — nearly a quarter of the screen — so step it down with the viewport.
   The stats column drops its fixed 250px and fills the row once wrapped. */
/* ---- PHONE HERO ----
   The hero used to stack avatar → everything → stats and ran past 1100px on a
   375px screen, which put the Frames grid two screens down on the page Frames
   is the point of. Same content, laid out for the shape:
     • avatar BESIDE the name (the standard mobile profile row), not above it
     • the stat tiles as one swipeable row instead of three stacked rows
     • the reliability bars three-across instead of three-down
   Nothing is hidden and nothing moved to another screen. */
@media (max-width: 768px) {
  .profile-hero { padding: 1.4rem 1.25rem 1.25rem; }
  .profile-hero-inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar ident"
      "info   info"
      "stats  stats";
    gap: .8rem 1rem;
  }
  .profile-content { padding: 1.5rem 1.25rem; }
  .profile-stats-col { width: 100%; }

  .profile-avatar { width: 74px; height: 74px; font-size: 1.7rem; border-width: 2px; box-shadow: 0 0 0 4px rgba(232,201,107,.06); }
  .profile-avatar-wrap { gap: 7px; }
  .profile-name { font-size: 2.1rem; letter-spacing: 1.4px; }
  /* One line. A long email wrapped this to two, for a line that is mostly the
     address you already know — Settings has it in full. */
  .profile-handle {
    margin-bottom: .5rem; font-size: 11.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Role chips in one swipeable line rather than three wrapped rows. */
  .profile-role-full {
    gap: 6px; margin-bottom: .8rem; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
  }
  .profile-role-full::-webkit-scrollbar { display: none; }
  .profile-role-full > * { flex: 0 0 auto; }

  /* Three bars across, label above each. Stacked they cost 74px for three
     numbers nobody reads one at a time. */
  .profile-bars { flex-direction: row; gap: 12px; max-width: none; }
  .pbar-row { flex: 1; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
  .pbar-label { min-width: 0; font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; }
  .pbar-track { width: 100%; flex: none; }
  .pbar-val { text-align: left; min-width: 0; font-size: 11px; }

  /* The next-role hint repeats what the bar already shows. */
  .next-role { margin-top: 8px; padding-top: 8px; }
  .next-role-head { margin-bottom: 5px; }
  .next-role-hint { display: none; }
  .roles-cta { max-width: none; margin-top: 8px; padding: 8px 12px; }
  .pstat-export { padding: 7px 12px; }

  /* Critic score reads across, not down. */
  .pstat-headline { display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-align: left; }
  .pstat-headline-val { font-size: 2rem; }
  .pstat-headline-lbl { margin-top: 0; }

  /* ONE swipeable row of tiles. Nine tiles at three columns is three rows and
     200px; in a row it is 54px, and a stat strip you scroll is a pattern people
     already know from every other app on the phone. */
  .pstat-grid {
    display: flex; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* NO negative-margin bleed to the screen edge: nothing above this clips
       overflow, so a wider-than-parent scroller drags the whole PAGE into
       horizontal scroll. Stays inside the hero's gutters. */
  }
  .pstat-grid::-webkit-scrollbar { display: none; }
  .pstat { flex: 0 0 84px; scroll-snap-align: start; padding: 8px 6px; }
  .pstat-val { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  .profile-hero { padding: 1.2rem 1rem 1.1rem; }
  .profile-content { padding: 1.25rem 1rem; }
}

.ratings-summary-bar {
  display: flex; align-items: center; gap: 0;
  background: var(--surface); border: 0.5px solid var(--border2);
  border-radius: 14px; padding: 1rem 1.5rem;
  margin-bottom: 1.5rem; width: fit-content; gap: 2rem;
}
.rsb-item { text-align: center; }
.rsb-num  { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; line-height: 1; display: block; }
.rsb-lbl  { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.rsb-item.toproll .rsb-num { color: var(--toproll); }
.rsb-item.toproll .rsb-lbl { color: var(--toproll); }
.rsb-item.meh  .rsb-num { color: var(--meh);  }
.rsb-item.meh  .rsb-lbl { color: var(--meh);  }
.rsb-item.flop .rsb-num { color: var(--flop); }
.rsb-item.flop .rsb-lbl { color: var(--flop); }
.rsb-divider { width: 0.5px; height: 40px; background: var(--border2); }

.ratings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
.rating-card {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 12px; overflow: hidden; cursor: pointer;
  transition: transform .18s, border-color .18s;
}
.rating-card:hover { transform: translateY(-3px); border-color: var(--border2); }
.rating-card-poster {
  position: relative; height: 175px;
}
.rating-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rating-card-poster-ph  { width: 100%; height: 100%; background: var(--surface2); display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 24px; }
.rating-card-score-badge {
  position: absolute; top: 7px; right: 7px;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem;
  color: #fff; padding: 1px 7px; border-radius: 7px; line-height: 1.5;
}
.rating-card-body { padding: 8px 10px 10px; }
.rating-card-title { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }

/* ---- WATCHLIST TAB ---- */
.watchlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.watchlist-card {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
/* The poster link and the buttons that sit ON it are siblings — a <button>
   inside an <a> is invalid and gets unnested by the parser — so they share a
   positioned wrapper instead of hanging off the link itself. */
.watchlist-card-media { position: relative; }
.watchlist-card-poster {
  position: relative; height: 200px; cursor: pointer;
}
.watchlist-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watchlist-poster-ph { width: 100%; height: 100%; background: var(--surface2); display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 28px; }
.watchlist-type-tag {
  position: absolute; top: 7px; left: 7px;
  background: rgba(9,10,15,.8); border: 0.5px solid var(--border2);
  color: var(--muted); font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px; letter-spacing: .5px;
  text-transform: uppercase;
}

/* ---- WATCHED TAB — reuses the watchlist card shell ----
   The corner badge answers "seen it?" at a glance across the grid; a series
   part-way through shows its percent instead of a tick. */
.watched-badge {
  position: absolute; top: 7px; right: 7px;
  background: rgba(9,10,15,.8); border: 0.5px solid rgba(62,212,154,.45);
  color: var(--toproll); font-size: 10px; font-weight: 700;
  min-width: 22px; height: 20px; padding: 0 5px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; letter-spacing: .3px;
}
.watched-badge i { font-size: 12px; }
.watched-badge-part { border-color: rgba(232,201,107,.45); color: var(--gold); }

/* ---- FAST RATE ON THE POSTER ----
   Same pill as the duel cards (.vs-act-rate): dark enough to read over any
   poster, gold once it carries your score. Always visible — half these shelves
   are read on a phone, where a hover-reveal is no affordance at all. */
.watched-rate {
  position: absolute; left: 7px; bottom: 7px; z-index: 2;
  height: 28px; box-sizing: border-box; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(9,10,15,.85); border: 0.5px solid rgba(255,255,255,.15);
  border-radius: 9px; color: rgba(255,255,255,.92);
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  cursor: pointer; transition: all .2s; backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.watched-rate i { font-size: 12px; }
@media (hover: hover) {
  .watched-rate:hover { background: rgba(18,16,11,.9); border-color: rgba(232,201,107,.5); color: var(--gold); transform: translateY(-1px); }
}
.watched-rate:active { background: rgba(232,201,107,.22); border-color: rgba(232,201,107,.6); color: var(--gold); }
.watched-rate.rated { color: var(--gold); border-color: rgba(232,201,107,.45); background: rgba(232,201,107,.14); }

/* "N still to rate" in the shelf summary — a sentence that is also the control
   that shows you those N. Styled as text, not a button, so the line still reads
   as a line. */
.wr-jump {
  background: none; border: 0; padding: 0; font: inherit; color: var(--gold);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(232,201,107,.4);
}
.wr-jump:hover { text-decoration-color: var(--gold); }

.watched-prog { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.watched-prog-track { flex: 1; height: 4px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.watched-prog-fill  { height: 100%; background: var(--gold); border-radius: 3px; }
.watched-prog-txt   { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.watched-prog-done  { font-size: 10.5px; color: var(--toproll); gap: 4px; font-weight: 600; }
.watched-prog-done i { font-size: 12px; }
.watchlist-card-body { padding: 9px 11px 11px; }
.watchlist-title {
  font-size: 12.5px; font-weight: 500; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; transition: color .18s;
}
.watchlist-title:hover { color: var(--gold); }
.wl-remove-btn {
  display: flex; align-items: center; gap: 5px;
  background: rgba(232,77,99,.08); border: 0.5px solid rgba(232,77,99,.2);
  color: var(--flop); font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 7px; cursor: pointer;
  font-family: inherit; transition: all .18s;
}
.wl-remove-btn:hover { background: rgba(232,77,99,.15); border-color: rgba(232,77,99,.4); }

/* ---- TASTE PROFILE TAB ---- */
.taste-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
}
.taste-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.taste-genre-name { font-size: 13px; color: var(--muted); min-width: 90px; }
.taste-track { flex: 1; background: var(--bg3); border-radius: 20px; height: 6px; overflow: hidden; }
.taste-fill  { height: 100%; border-radius: 20px; transition: width .6s ease; }
.taste-pct   { font-size: 12px; color: var(--text); font-weight: 500; min-width: 36px; text-align: right; }

.dna-card {
  background: var(--surface); border: 0.5px solid rgba(232,201,107,.3);
  border-radius: 14px; padding: 1.2rem 1.4rem; margin-bottom: 1.2rem;
}
.dna-type { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 4px; }
.dna-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }

.taste-tags-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 1.5rem;
}
.taste-tag-item {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 10px; padding: 9px 13px;
}
.taste-tag-item span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 3px; }
.taste-tag-item strong { font-size: 14px; color: var(--text); font-weight: 500; }

/* Watchlist button styles (.wl-btn, .wl-title-btn) moved to style.css
   so they apply on every page (home, title, profile). */

/* ============================================================
   PREDICTIONS TAB
   ============================================================ */
.pred-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: .5rem; }
.pred-sum-card {
  background: var(--surface); border: 0.5px solid var(--border2); border-radius: 14px;
  padding: 1rem .8rem; text-align: center;
}
.pred-sum-card.pred-sum-points { border-color: var(--predict-border); background: var(--predict-soft); }
.pred-sum-val { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; line-height: 1; color: var(--predict); }
.pred-sum-lbl { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }

.pred-list { display: flex; flex-direction: column; gap: 10px; }
.pred-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--surface); border: 0.5px solid var(--border); border-radius: 12px;
  padding: 10px; transition: border-color .15s, transform .15s;
}
.pred-row:hover { border-color: var(--predict-border); transform: translateY(-1px); }
.pred-poster { width: 44px; height: 64px; border-radius: 7px; object-fit: cover; flex-shrink: 0; background: var(--surface2); }
.pred-poster-ph { display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 20px; }
.pred-row-main { flex: 1; min-width: 0; }
.pred-row-title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pred-row-verdict { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.pred-outcome { text-align: right; flex-shrink: 0; }
.pred-outcome-head { font-size: 13px; font-weight: 700; color: var(--text); }
.pred-outcome-sub { font-size: 11px; color: var(--dim); margin-top: 2px; }
.pred-outcome.pred-hit  .pred-outcome-head { color: var(--toproll); }
.pred-outcome.pred-miss .pred-outcome-head { color: var(--flop); }
.pred-outcome.pred-pending .pred-outcome-head { color: var(--predict); }
.pred-pts { color: var(--toproll); }
@media (max-width: 560px) { .pred-summary { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   LISTS TAB
   ============================================================ */
.lists-create { display: flex; gap: 8px; margin-bottom: 1.2rem; }
.lists-create-input {
  flex: 1; background: var(--surface); border: 0.5px solid var(--border2); border-radius: 10px;
  padding: 10px 12px; color: var(--text); font-family: inherit; font-size: 14px;
}
.lists-create-input:focus { outline: none; border-color: var(--gold); }

.lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.list-card {
  background: var(--surface); border: 0.5px solid var(--border); border-radius: 14px;
  overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s;
}
.list-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.list-card { position: relative; }
.list-card-locked { border-color: rgba(232,201,107,.3); background: linear-gradient(160deg, rgba(232,201,107,.06), var(--surface)); }
.lc-lock { font-size: 11px; color: var(--dim); margin-left: 2px; }

/* up/down reorder control, top-right of each of your own list cards */
.list-reorder { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity .15s; }
.list-card:hover .list-reorder { opacity: 1; }
.lr-btn { width: 24px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 0.5px solid var(--border2); background: rgba(10,11,16,.82); color: var(--text); border-radius: 6px; padding: 0; }
.lr-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.lr-btn:disabled { opacity: .3; cursor: default; }
.lr-btn i { font-size: 14px; }
.lists-empty-hint { font-size: 13px; color: var(--dim); margin: 1rem 0 0; }
.list-card-covers { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; aspect-ratio: 16/9; background: var(--surface2); }
.list-card-covers img, .list-card-covers .lc-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.list-card-covers img:only-child, .list-card-covers .lc-ph:only-child { grid-column: 1 / -1; }
.lc-ph { display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 22px; background: var(--surface2); }
.lc-ph-empty { font-size: 30px; }
.list-card-body { padding: 10px 12px; }
.list-card-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-card-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* List modal (reuses .roles-modal-bg / .roles-modal shell) */
.list-modal { max-width: 720px; width: 92%; }
.list-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; }
.lm-act {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--surface2); border: 0.5px solid var(--border2); color: var(--text);
  border-radius: 9px; padding: 7px 12px; font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.lm-act:hover { border-color: var(--gold); color: var(--gold); }
.lm-act.lm-danger:hover { border-color: var(--flop); color: var(--flop); }
.lm-act.lm-versus { background: var(--gold); color: #1a1000; border-color: var(--gold); }
.lm-act.lm-versus:hover { background: #f0d57a; color: #1a1000; }
.lm-act.lm-public.on { background: rgba(62,212,154,.14); border-color: var(--toproll); color: var(--toproll); }
.lm-act.lm-public.on:hover { border-color: var(--toproll); color: var(--toproll); }
.lc-public { color: var(--toproll); font-weight: 600; }
.lc-public i { font-size: 11px; }

/* Share panel (inside the list modal) */
.share-hint { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 1rem 0 .5rem; }
.share-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.share-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; }
.share-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.share-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--surface2); color: var(--muted); }
.share-name { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.share-mutual { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--toproll); background: rgba(62,212,154,.13); border-radius: 20px; padding: 1px 7px; }
.share-mutual i { font-size: 11px; }
.share-toggle { flex: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 6px 11px; background: var(--surface2); border: 0.5px solid var(--border2); color: var(--text); }
.share-toggle:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.share-toggle.on { background: rgba(62,212,154,.14); border-color: var(--toproll); color: var(--toproll); }
.share-toggle:disabled { opacity: .5; cursor: default; }
.share-empty { font-size: 13px; color: var(--dim); padding: 1rem .25rem; }
.share-note { font-size: 12.5px; color: var(--muted); margin: .8rem 0 0; line-height: 1.5; }
.share-controls { display: flex; align-items: center; gap: 8px; flex: none; }
.share-roles { display: inline-flex; border: 0.5px solid var(--border2); border-radius: 8px; overflow: hidden; }
.share-role { background: var(--surface2); border: none; color: var(--muted); font-family: inherit; font-size: 11.5px; padding: 5px 9px; cursor: pointer; }
.share-role.on { background: var(--gold); color: #1a1000; font-weight: 700; }
.share-status { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; }
.share-status.ok { color: var(--toproll); }
.share-x { background: none; border: none; color: var(--muted); cursor: pointer; padding: 3px; display: inline-flex; }
.share-x:hover { color: var(--flop); }
.lc-editor { color: var(--gold); font-weight: 600; }
.lc-editor i { font-size: 11px; }
.lc-collab { color: #7fb0ff; font-weight: 600; }
.lc-collab i { font-size: 11px; }
.lm-editor-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; align-self: center; font-size: 11.5px; font-weight: 600; color: var(--gold); background: rgba(232,201,107,.12); border: 0.5px solid rgba(232,201,107,.32); border-radius: 20px; padding: 4px 11px; }

/* "Shared with you" section header */
.lists-section-head { display: flex; align-items: center; gap: 7px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; font-size: 1.15rem; color: var(--gold); margin: 1.8rem 0 .9rem; }

.list-add { position: relative; margin-bottom: 1.2rem; }
.list-add-field { display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 0.5px solid var(--border2); border-radius: 10px; padding: 9px 12px; color: var(--muted); }
.list-add-field input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 14px; }
.list-add-results { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.list-res {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 0.5px solid var(--border); border-radius: 9px; padding: 6px 10px;
  color: var(--text); font-family: inherit; transition: border-color .12s;
}
.list-res:hover:not(:disabled) { border-color: var(--gold); }
.list-res:disabled { opacity: .55; cursor: default; }
.list-res img { width: 30px; height: 45px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.list-res-t { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-res-y { font-size: 11px; color: var(--dim); }
.list-res i { color: var(--gold); font-size: 15px; }
.list-res.added i { color: var(--toproll); }
.list-res-empty { font-size: 12.5px; color: var(--dim); padding: 8px 4px; }

.list-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.list-item { position: relative; }
.list-item-poster { position: relative; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--surface2); }
.list-item-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.li-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 24px; }
/* Rank owns the top-left corner, so the Film/TV chip moves to the bottom. */
.list-item-type { position: absolute; bottom: 6px; left: 6px; font-size: 10px; font-weight: 700; background: rgba(0,0,0,.65); color: #fff; border-radius: 5px; padding: 2px 6px; }
.list-item-rank {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #201a06;
  background: var(--gold); border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
/* Drag-to-reorder grip — shown on hover (always visible on touch devices where
   there's no hover). Present on both list cards and list items. */
.drag-grip {
  position: absolute; top: 6px; right: 6px; z-index: 4;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: rgba(10,11,16,.82); border: 0.5px solid var(--border2);
  color: var(--muted); cursor: grab; opacity: 0;
  transition: opacity .15s, color .15s; touch-action: none;
}
.list-card:hover .drag-grip, .list-item:hover .drag-grip { opacity: 1; }
.drag-grip:hover { color: var(--gold); }
.drag-grip:active { cursor: grabbing; }
@media (hover: none) { .drag-grip { opacity: .85; } }
/* The element currently being dragged. */
.dragsort-drag { opacity: .5; outline: 2px dashed var(--gold); outline-offset: -2px; border-radius: 10px; }
body.dragsort-active { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.list-item-name { font-size: 12px; color: var(--text); margin-top: 6px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item-remove {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; cursor: pointer;
  background: none; border: none; color: var(--muted); font-family: inherit; font-size: 11px; padding: 0;
}
.list-item-remove:hover { color: var(--flop); }
@media (max-width: 560px) { .lists-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* ============================================================
   STREAK HERO — the live habit atop the Achievements category
   ============================================================ */

.streak-hero {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.3rem; margin: .4rem 0 1.2rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,138,61,.08), rgba(232,201,107,.05));
  border: 1px solid var(--border2);
}
.streak-hero.on { border-color: rgba(255,138,61,.4); background: linear-gradient(135deg, rgba(255,138,61,.16), rgba(232,201,107,.07)); }
.streak-flame { font-size: 2.6rem; color: var(--dim); line-height: 1; }
.streak-hero.on .streak-flame { color: #ff8a3d; filter: drop-shadow(0 0 10px rgba(255,138,61,.5)); }
.streak-main { flex: 1; }
.streak-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.6rem; line-height: 1; color: var(--text); }
.streak-num-unit { font-family: inherit; font-size: 1rem; color: var(--muted); margin-left: 6px; }
.streak-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.streak-warn { color: #ff8a3d; }
.streak-best { text-align: center; font-size: 12px; color: var(--muted); line-height: 1.35; }
.streak-best strong { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--gold); }
.streak-best i { color: var(--gold); }

/* ============================================================
   ACHIEVEMENTS — lifetime unlocks (js/achievements.a69cf00f.js)
   Each card carries its tier colour on --ac; locked cards drop to a flat
   muted treatment so an earned one reads instantly across the grid.
   ============================================================ */
.ach-hero {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem 1.3rem; margin: .4rem 0 1rem;
  border-radius: 16px; border: 1px solid var(--border2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent);
}
/* Progress ring: conic sweep driven by --pct, punched out by an inner disc. */
.ach-hero-ring {
  flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--gold) calc(var(--pct) * 1%), rgba(255,255,255,.08) 0);
}
.ach-hero-ring-in {
  width: 62px; height: 62px; border-radius: 50%; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.ach-hero-ring-in strong { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; color: var(--text); }
.ach-hero-ring-in small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.ach-hero-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: var(--text); line-height: 1; }
.ach-hero-sub { font-size: 13px; color: var(--muted); margin-top: 5px; }

.ach-next {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 1.4rem;
  border-radius: 12px; background: var(--surface2); border: 1px solid var(--border2);
}
.ach-next-ico { font-size: 1.6rem; width: 32px; text-align: center; }
.ach-next-body { flex: 1; }
.ach-next-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.ach-next-label { font-size: 14px; color: var(--text); margin: 2px 0 6px; }
.ach-next-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.ach-track { height: 5px; border-radius: 20px; background: rgba(255,255,255,.06); overflow: hidden; }
.ach-fill { height: 100%; border-radius: 20px; background: var(--ac, var(--gold)); transition: width .3s ease; }

.ach-group { margin-bottom: 1.6rem; }
.ach-group-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .7rem; }
.ach-group-title { display: flex; align-items: baseline; gap: 7px; font-size: 1.02rem; font-weight: 600; color: var(--text); }
.ach-group-title small { font-weight: 400; font-size: 12px; color: var(--dim); }
.ach-group-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ach-group-count.all-done { color: var(--gold); }

.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.ach-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 12px; border-radius: 12px; text-align: center;
  background: var(--surface2); border: 1px solid var(--border2);
  opacity: .62; transition: opacity .15s, border-color .15s, background .15s, transform .15s;
}
.ach-card:hover { transform: translateY(-2px); }
.ach-card.earned {
  opacity: 1;
  border-color: color-mix(in srgb, var(--ac) 45%, transparent);
  background: color-mix(in srgb, var(--ac) 8%, var(--surface2));
}
.ach-card-ico {
  font-size: 1.6rem; color: var(--dim); line-height: 1; margin-bottom: 2px;
  width: 44px; height: 44px; border-radius: 50%; align-self: center;
  display: grid; place-items: center; background: rgba(255,255,255,.04);
}
.ach-card.earned .ach-card-ico {
  color: var(--ac);
  background: color-mix(in srgb, var(--ac) 16%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--ac) 28%, transparent);
}
.ach-card-label { font-size: 13px; font-weight: 600; color: var(--text); }
.ach-card-desc { font-size: 11px; color: var(--muted); line-height: 1.35; flex: 1; }
.ach-card-foot { margin-top: 4px; min-height: 14px; }
.ach-card-tier { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ac); font-weight: 600; }
.ach-card-count { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .ach-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } }

/* ---- unlock toast ---- */
.ach-toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 9000;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
/* Clear the phone bottom tab bar (js/mobilenav.397a2ebd.js) instead of sitting on it. */
@media (max-width: 768px) {
  .ach-toasts { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); }
}
.ach-toast {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px 11px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ac) 50%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  opacity: 0; transform: translateX(20px); transition: opacity .3s ease, transform .3s ease;
}
.ach-toast.in { opacity: 1; transform: translateX(0); }
.ach-toast-ico {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.25rem; color: var(--ac);
  background: color-mix(in srgb, var(--ac) 16%, transparent);
}
.ach-toast-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ac); font-weight: 600; }
.ach-toast-label { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 1px; }
@media (max-width: 560px) { .ach-toasts { left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); } }

/* ============================================================
   LISTS HUB — the Lists tab as a management hub: find public lists,
   answer share requests, and keep other people's lists alongside your own.
   ============================================================ */

/* Find lists (lists only — not titles, not people) */
.lists-find { margin-bottom: 1.4rem; }
.lists-find-field {
  display: flex; align-items: center; gap: 8px; background: var(--surface2);
  border: 0.5px solid var(--border2); border-radius: 10px; padding: 9px 12px; color: var(--muted);
}
.lists-find-field:focus-within { border-color: var(--gold); }
.lists-find-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 14px; min-width: 0; }
.lists-find-clear { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; display: inline-flex; }
.lists-find-clear:hover { color: var(--flop); }
.lists-find-clear.hide { display: none; }
.lists-find-results { margin-top: .8rem; }
.lists-find-note { font-size: 12.5px; color: var(--muted); margin-bottom: .7rem; }

/* Save-to-my-lists bookmark on a found list card */
.lc-save {
  position: absolute; top: 6px; right: 6px; z-index: 2; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  border: 0.5px solid var(--border2); background: rgba(10,11,16,.82); color: var(--text); border-radius: 8px;
}
.lc-save:hover { border-color: var(--gold); color: var(--gold); }
.lc-save.on { color: var(--gold); border-color: var(--gold); }
.lc-save i { font-size: 15px; }
.lm-act.lm-save.on { background: rgba(232,201,107,.14); border-color: var(--gold); color: var(--gold); }
.lm-owner { color: var(--muted); text-decoration: none; border-bottom: 0.5px solid var(--border2); }
.lm-owner:hover { color: var(--gold); border-color: var(--gold); }

/* Share requests waiting for Accept / Decline */
.lists-req-count {
  font-family: inherit; letter-spacing: 0; font-size: 11px; font-weight: 700; color: #1a1000;
  background: var(--gold); border-radius: 20px; padding: 1px 8px;
}
.lists-reqs { display: flex; flex-direction: column; gap: 8px; }
.lreq {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 0.5px solid rgba(232,201,107,.35); border-radius: 12px; padding: 10px 14px;
}
.lreq-main { min-width: 0; }
.lreq-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; }
.lreq-name i { color: var(--gold); font-size: 15px; }
.lreq-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.lreq-role { display: inline-flex; align-items: center; gap: 3px; }
.lreq-role i { font-size: 12px; }
.lreq-acts { display: flex; align-items: center; gap: 7px; flex: none; }
.lreq-btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; border-radius: 9px; padding: 7px 12px;
  background: var(--surface2); border: 0.5px solid var(--border2); color: var(--text);
}
.lreq-yes { background: var(--gold); border-color: var(--gold); color: #1a1000; }
.lreq-yes:hover { background: #f0d57a; }
.lreq-no:hover { border-color: var(--flop); color: var(--flop); }

@media (max-width: 560px) {
  .lreq { align-items: flex-start; flex-direction: column; }
  .lreq-acts { width: 100%; }
  .lreq-btn { flex: 1; justify-content: center; }
}

/* Frame a list — same camera affordance the title pages use for "Frame it". */
.lm-act.lm-frame { color: var(--toproll); border-color: rgba(62,212,154,.4); }
.lm-act.lm-frame:hover { background: rgba(62,212,154,.12); border-color: var(--toproll); }

/* ============================================
   SEASONS & EPISODES ROLLUP — the Series panel above the Watched grid.
   TV is half of what people watch here; the shelf used to count it in
   titles only, which made 60 episodes of three shows look like three films.
   ============================================ */
.tv-rollup {
  background: var(--bg2); border: 0.5px solid var(--border);
  border-radius: 14px; padding: 1.1rem 1.3rem; margin-bottom: 1.2rem;
}
.tvr-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap;
}
.tvr-title {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 1.3px;
  font-size: 1.05rem; color: var(--text);
}
.tvr-title i { color: var(--gold); font-size: .95rem; }
.tvr-note { font-size: 11.5px; color: var(--muted); }

.tvr-stats { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tvr-stat { min-width: 62px; }
.tvr-val { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: var(--gold); line-height: 1; }
.tvr-lbl {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .7px; margin-top: 3px;
}

.tvr-rows { display: flex; flex-direction: column; gap: .45rem; }
.tvr-row {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 9px; border-radius: 10px;
  background: var(--bg3); border: 0.5px solid var(--border);
  color: var(--text); text-decoration: none; transition: border-color .18s;
}
.tvr-row:hover { border-color: var(--border2); }
.tvr-thumb { width: 34px; height: 51px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.tvr-thumb-ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--dim); font-size: 1rem;
}
.tvr-row-body { flex: 1; min-width: 0; }
.tvr-name {
  font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tvr-where { font-size: 11px; color: var(--muted); margin: 2px 0 5px; }
.tvr-ep { color: var(--gold); font-weight: 700; }
.tvr-track { height: 4px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.tvr-fill { height: 100%; background: var(--gold); border-radius: 3px; }
.tvr-pct { font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; }

/* The card's progress line now carries "S2 E4 · 14/28" rather than a bare
   percentage, so it needs room not to wrap under the bar. */
.watched-prog-txt { white-space: nowrap; }
.watched-prog .watched-prog-track { flex: 1 1 auto; min-width: 26px; }

@media (max-width: 700px) {
  .tv-rollup { padding: 1rem; }
  .tvr-stats { gap: 1.2rem; }
}