:root {
  --bg: #0a0a0b;
  --bg-alt: #121214;
  --panel: #17171a;
  --border: #2a2a2e;
  --red: #b3101d;
  --red-bright: #e0182a;
  --text: #e8e6e1;
  --text-dim: #9b9a97;
  /* Letterboxd's own signature green - used ONLY inside the media.html
     sidebar action card (mp-icon-btn / mp-inline-stars / mp-histogram),
     never bleeding into the rest of the site's red brand accent. */
  --lb-green: #00e054;
  --lb-green-dim: #00b843;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Georgia', 'Times New Roman', serif;
  --font-headline: 'Plus Jakarta Sans', 'Oswald', 'Arial', sans-serif;
  /* Graphik and Tiempos Headline (Letterboxd's actual UI/headline fonts)
     are commercial typefaces (Commercial Type / Klim Type Foundry) with no
     free CDN distribution, so these two aren't literally those fonts -
     they're the closest free equivalents: Inter is a very common Graphik
     stand-in (same clean grotesque-sans UI feel), Source Serif 4 stands in
     for Tiempos Headline (same editorial serif display feel). Scoped only
     to the beta homepage below - the rest of the site keeps Oswald. */
  --font-graphik: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-tiempos: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  scroll-behavior: smooth;
}

@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageFadeIn .45s ease; }

/* Scroll-reveal: sections fade + rise into view the first time they cross
   into the viewport (wired up by initScrollReveal() in main.js). Falls
   back to fully visible immediately if JS never adds .reveal at all. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
}
.reveal--visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .profile-card, .level-card, .level-stat {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .profile-banner { animation: none; }
  .level-progress__fill { transition: none; }
  .landing-hero__tile, .landing-hero__title, .landing-hero__deck, .landing-hero__actions, .landing-hero__note {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .profile-head__avatar, .profile-head__avatar img, .level-card__badge, .level-stat__icon {
    transition: none;
  }
}

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

img { max-width: 100%; display: block; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Top ticker ---------- */
.ticker {
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 13px;
  padding: 6px 0;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.ticker__track {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 30s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* ---------- Header ---------- */
header.masthead {
  position: relative;
  z-index: 200;
  border-bottom: 3px solid var(--red);
  background: linear-gradient(180deg, #0d0d0f 0%, var(--bg) 100%);
}
/* Profile page only: a soft frosted/translucent bar instead of the
   solid site-wide gradient, closer to Letterboxd's own blended header -
   scoped via body.profile-page so every other page keeps the normal
   solid masthead.
   The backdrop-filter here is also *why* the notification/account
   dropdowns started rendering behind the hero banner: backdrop-filter
   creates a new stacking context on header.masthead, so its children
   (including the dropdowns' own z-index:60) got capped inside that
   context - and since the header was still position:static/z-index:auto,
   later DOM siblings (the hero banner, position:relative) painted on top
   of the whole header, dropdowns included. Explicit position:relative +
   z-index:200 above on header.masthead itself (not scoped to this page -
   the same bug would've hit any page that ever gets a filter/transform
   on the header) fixes it site-wide by giving the header's stacking
   context a rank higher than anything below it, regardless of DOM order. */
body.profile-page header.masthead {
  background: rgba(13, 13, 15, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Same page, same reasoning: the header bar's own .container was still the
   site-wide 1180px width while the profile content below it is capped at
   990px (#fp-root .container above) - their left/right edges didn't line
   up. Match the header container to that same 990px so the whole page
   reads as one consistent column, edge to edge. */
body.profile-page header.masthead .container {
  max-width: 990px;
}
.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.brand__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text);
}
.brand__title span { color: var(--red-bright); }
/* Site-wide BETA tag, injected next to every brand__title by main.js's
   setupBetaMark() - a small outlined pill rather than a solid fill so it
   reads as a status marker, not another button competing with Join
   Discord/Login for attention. */
.brand__beta-tag {
  display: inline-block;
  padding: 2px 7px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--red-bright);
  border: 1px solid var(--red-bright);
  border-radius: 4px;
  line-height: 1.4;
  vertical-align: middle;
  align-self: center;
}
/* A nested element with its OWN background-clip:text computes the gradient
   against its own box, not the parent's - giving "SECTOR" and the "ZERO"
   span two independently-restarted gradients that don't line up (this
   showed up live as solid white "SECTOR" + solid green "ZERO" instead of
   one continuous band). Fix: only the outer element paints the gradient;
   the span just goes transparent so the parent's already-clipped gradient
   shows through underneath it, seamless start to finish. */
.brand__title--flag {
  background-image: linear-gradient(to bottom, #FF9933 0%, #FF9933 32%, #FFFFFF 44%, #FFFFFF 56%, #138808 68%, #138808 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.brand__title--flag span {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.brand__sub {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
}

nav.mainnav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
nav.mainnav a {
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: color .15s, border-color .15s;
}
nav.mainnav a:hover { color: var(--text); border-color: var(--red); }

.header__actions { display: flex; gap: 10px; align-items: center; }

.btn {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 3px;
  border: 1px solid var(--border);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .1s, background .15s, border-color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-bright); border-color: var(--red-bright); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { border-color: var(--text-dim); }
.btn--sm { padding: 6px 12px; font-size: 11px; }

/* ---------- Notification bell (global header, injected by main.js) ---------- */
.notif-bell-wrap { position: relative; }
.notif-bell {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.notif-bell:hover { border-color: var(--border); background: var(--bg-alt); }
.notif-bell__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 9px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--bg);
}
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(340px, 92vw);
  max-height: 420px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 150;
}
.notif-dropdown--open { opacity: 1; visibility: visible; transform: translateY(0); }
.notif-dropdown__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 13px;
  position: sticky;
  top: 0;
  background: var(--panel);
}
.notif-dropdown__head button {
  background: none;
  border: none;
  color: var(--red-bright);
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
}
.notif-list { display: flex; flex-direction: column; }
.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
  transition: background .12s ease;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-alt); }
.notif-item--unread { background: rgba(179,16,29,0.07); }
.notif-item__avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--bg-alt); object-fit: cover; }
.notif-item__body { min-width: 0; }
.notif-item__text { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.notif-item__time { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; text-transform: uppercase; letter-spacing: .4px; }
.notif-empty { padding: 26px 14px; text-align: center; font-size: 12px; color: var(--text-dim); font-style: italic; }

.user-menu { position: relative; }
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.user-chip:hover {
  border-color: var(--border);
  background: var(--bg-alt);
}
.user-chip img {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border);
}
.user-chip__caret {
  font-size: 10px;
  opacity: .6;
  margin-left: -2px;
  transition: transform .15s;
}
.user-chip[aria-expanded="true"] .user-chip__caret { transform: rotate(180deg); }

.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 175px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 60;
}
.user-menu__dropdown--open { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.user-menu__item:hover { background: var(--bg-alt); }
.user-menu__item--danger { color: #ed4245; }
.user-menu__item--danger:hover { background: rgba(237,66,69,0.1); }

.btn--resident {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid rgba(59,165,93,0.5);
  background: rgba(59,165,93,0.12);
  color: #3ba55d;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .5px;
  font-weight: 700;
}

.sz-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 999;
  pointer-events: none;
}
.sz-toast--show { opacity: 1; transform: translateY(0); }

/* ---------- Settings modal ---------- */
.sz-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 200;
}
.sz-modal-overlay--open { opacity: 1; visibility: visible; }
.sz-modal {
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.sz-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.sz-modal__head h3 {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 16px;
}
.sz-modal__close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.sz-modal__close:hover { color: var(--text); }
.sz-modal__body { padding: 20px; }
.sz-modal__section-title { font-family: var(--font-display); letter-spacing: .5px; font-size: 13px; text-transform: uppercase; margin-bottom: 8px; }
.sz-modal__hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin: 0 0 14px; }
.sz-modal__hint--small { font-size: 11.5px; margin: 12px 0 0; }

.linked-accounts-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.linked-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.linked-account-row img { width: 30px; height: 30px; border-radius: 50%; }
.linked-account-row__name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linked-account-row__unlink {
  background: none;
  border: 1px solid var(--border);
  color: #ed4245;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
}
.linked-account-row__unlink:hover { background: rgba(237,66,69,0.1); border-color: rgba(237,66,69,0.4); }

/* ---------- Hero ---------- */
.hero {
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse at top left, rgba(179,16,29,0.12), transparent 55%),
    var(--bg);
}
.hero__kicker {
  font-family: var(--font-display);
  color: var(--red-bright);
  letter-spacing: 3px;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 18px;
  max-width: 780px;
}
.hero__title em { color: var(--red-bright); font-style: normal; }
.hero__deck {
  font-size: 18px;
  color: var(--text-dim);
  max-width: 620px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Section headings ---------- */
.section { padding: 56px 0; border-bottom: 1px solid var(--border); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--red);
  padding-bottom: 10px;
}
.section-head h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 26px;
  margin: 0;
}
.section-head .tag {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

/* ---------- Games grid ---------- */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.game-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.game-card:hover { border-color: var(--red); transform: translateY(-3px); }
.game-card__badge {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red-bright);
  border: 1px solid var(--red);
  display: inline-block;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 14px;
}
.game-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 20px;
  margin: 0 0 10px;
}
.game-card p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.game-card--mc { border-color: #3f7d3f; }
.game-card--mc:hover { border-color: #55b455; }

/* ---------- News ---------- */
.news-list { display: flex; flex-direction: column; gap: 0; }
.news-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.news-item:last-child { border-bottom: none; }
.news-item img.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border);
}
.news-item__meta {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.news-item__meta b { color: var(--red-bright); }
.news-item__body { font-size: 15px; line-height: 1.6; color: var(--text); }
.news-empty { color: var(--text-dim); font-style: italic; padding: 20px 0; }

/* ---------- Minecraft spotlight ---------- */
.mc-spotlight {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
}
@media (max-width: 760px) { .mc-spotlight { grid-template-columns: 1fr; } }
.mc-spotlight h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 1px;
  margin-top: 0;
}
.status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: #555; }
.status-dot--online { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.status-dot--offline { background: #ef4444; }
.status-label { font-family: var(--font-display); letter-spacing: 1px; text-transform: uppercase; font-size: 13px; }
.mc-ip-box {
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  padding: 12px 16px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0;
}
.mc-players { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mc-players span {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
}
.mc-stat { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.mc-stat span:first-child { color: var(--text-dim); }

/* ---------- Chat ---------- */
.chat-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  height: 460px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg { display: flex; gap: 10px; }
.chat-msg img { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.chat-msg__name { font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; }
.chat-msg__name.src-discord { color: #8ea1e1; }
.chat-msg__name.src-site { color: var(--red-bright); }
.chat-msg__text { font-size: 14px; color: var(--text); }
.chat-input-row {
  display: flex;
  border-top: 1px solid var(--border);
  padding: 10px;
  gap: 8px;
}
.chat-input-row input {
  flex: 1;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
.chat-input-row input:disabled { opacity: .5; }
.chat-hint { font-size: 12px; color: var(--text-dim); padding: 8px 16px 0; }

/* ---------- Footer ---------- */
footer {
  padding: 40px 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
footer .btn { margin-bottom: 16px; }

/* ---------- Minecraft dedicated page ---------- */
.mc-hero {
  padding: 70px 0 40px;
  text-align: center;
  background: radial-gradient(ellipse at top, rgba(85,180,85,0.12), transparent 60%);
  border-bottom: 1px solid var(--border);
}
.mc-hero h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 44px;
  letter-spacing: 2px;
  margin: 10px 0;
}
.mc-hero p { color: var(--text-dim); font-size: 16px; max-width: 560px; margin: 0 auto; }

.join-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }
.join-step {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px;
}
.join-step__num {
  font-family: var(--font-display);
  color: var(--red-bright);
  font-size: 28px;
  font-weight: 700;
}
.join-step h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px; margin: 8px 0; }
.join-step p { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0; }

@media (max-width: 720px) {
  .masthead__bar { flex-direction: column; gap: 14px; }
  nav.mainnav { flex-wrap: wrap; justify-content: center; }
  .hero__title { font-size: 36px; }
}

/* ---------- Player grid (Minecraft page) ---------- */
.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.player-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  opacity: .7;
}
.player-card--online { opacity: 1; border-color: #3f7d3f; }
.player-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.player-card__job { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.player-card__dot { width: 9px; height: 9px; }
.player-card__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .5px; font-size: 15px; }
.player-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.player-card__stats div { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.player-card__stats b { color: var(--text); font-weight: 600; }

/* ---------- Resident search ---------- */
.resident-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.resident-search {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 420px;
  display: flex;
  align-items: center;
}
.resident-search__icon {
  position: absolute;
  left: 15px;
  color: var(--text-dim);
  pointer-events: none;
  transition: color .15s ease;
}
.resident-search:focus-within .resident-search__icon { color: var(--red-bright); }
#resident-search-input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 40px 12px 42px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#resident-search-input::placeholder { color: var(--text-dim); }
#resident-search-input:focus {
  border-color: var(--red);
  background: var(--bg-alt);
  box-shadow: 0 0 0 3px rgba(179,16,29,0.15);
}
.resident-search__clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 7px;
  transition: color .15s ease, background .15s ease;
}
.resident-search__clear:hover { color: var(--text); background: var(--bg-alt); }
.resident-search__count {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Search box + sort dropdown live right next to each other as one group,
   with the result count pushed to the far right - instead of the sort
   control floating alone in the middle, disconnected from the search bar. */
.resident-search-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.resident-search__count { margin-left: auto; }

/* Styled to look like a plain button - the select's own selected-option text
   IS the button label ("Level ▾"), no separate "Sort by" caption sitting
   outside it. Clicking it opens the native dropdown to choose a new value. */
.resident-sort-select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  flex-shrink: 0;
}
.resident-sort-select:hover, .resident-sort-select:focus { border-color: var(--red); background: var(--bg-alt); outline: none; }

@media (max-width: 640px) {
  .resident-search-row { gap: 10px; margin-bottom: 18px; flex-direction: column; align-items: stretch; }
  .resident-search-group { width: 100%; }
  .resident-search { min-width: 0; max-width: none; width: 100%; }
  #resident-search-input {
    font-size: 16px; /* prevents iOS Safari auto-zoom-on-focus */
    padding: 13px 40px 13px 42px;
  }
  .resident-search__count { width: 100%; text-align: left; margin-left: 0; }
  .resident-sort-select { flex: 1; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .resident-search { max-width: 340px; }
}

/* ---------- Resident directory ---------- */
.resident-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
}
@keyframes residentCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.resident-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 14px;
  text-align: center;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  animation: residentCardIn .4s ease backwards;
}
.resident-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.resident-card--me { border-color: rgba(179,16,29,0.6); background: rgba(179,16,29,0.06); }
.you-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 2px solid var(--panel);
}
.resident-card__avatar { position: relative; width: 64px; margin: 0 auto 10px; }
.resident-card__avatar img { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--border); }
.level-badge {
  position: absolute;
  bottom: 6px;
  right: -6px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 2px 5px;
  border-radius: 4px;
  border: 2px solid var(--panel);
  line-height: 1.3;
}
.linked-badge {
  position: absolute;
  bottom: 6px;
  left: -6px;
  background: var(--bg-alt);
  color: var(--text);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  border: 2px solid var(--panel);
  line-height: 1.3;
}
.resident-card__name { font-family: var(--font-display); font-size: 13px; letter-spacing: .5px; }
.resident-card__activity { font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.resident-card__activity--muted { opacity: .6; }

.status-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--panel);
}
.status-badge--online { background: #3ba55d; }
.status-badge--idle { background: #faa61a; }
.status-badge--dnd { background: #ed4245; }
.status-badge--offline { background: #747f8d; }

/* ---------- Leaderboard ---------- */
.leaderboard-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 26px;
}
.leaderboard-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.leaderboard-panel__head {
  border-bottom: 3px double var(--border);
  padding-bottom: 14px;
}
.leaderboard-panel__head h2 {
  font-family: var(--font-headline);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 23px;
  margin: 0;
}
.leaderboard-panel__controls { display: flex; align-items: center; gap: 10px; }
.leaderboard-panel__controls select {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 14px;
}
.leaderboard-list { display: flex; flex-direction: column; gap: 8px; }
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color .15s ease;
}
.leaderboard-row:hover { border-color: var(--red); }
.leaderboard-row--top { border-color: rgba(179,16,29,0.5); background: rgba(179,16,29,0.06); }
/* Climbed/dropped indicator - sits left of the rank medal/number. Always
   reserves the same width (even when empty, for "no change" or "no data
   yet" rows) so avatars stay aligned down the whole list instead of
   jittering left/right row to row. */
.leaderboard-row__delta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1;
  cursor: default;
}
.leaderboard-row__delta--up { color: #3ba55d; text-shadow: 0 0 8px rgba(59,165,93,0.45); }
.leaderboard-row__delta--down { color: #e0182a; text-shadow: 0 0 8px rgba(224,24,42,0.45); }
.leaderboard-row__rank {
  width: 32px;
  flex-shrink: 0;
  text-align: center;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dim);
}
.leaderboard-row__avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.leaderboard-row__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leaderboard-row__sub { font-family: var(--font-headline); font-weight: 500; font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
.leaderboard-row__value {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  flex-shrink: 0;
  text-align: right;
}
.leaderboard-row__value span { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); font-family: var(--font-body); font-weight: 400; margin-left: 4px; }

.leaderboard-row--expandable { cursor: pointer; user-select: none; }
.leaderboard-row__chevron {
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 12px;
  margin-left: 4px;
  transition: transform .15s ease;
}
.leaderboard-row--open .leaderboard-row__chevron { transform: rotate(90deg); color: var(--red); }
.stream-detail {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin-top: -8px;
  padding: 10px 16px 14px 62px;
}
.stream-detail__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.stream-detail__row:last-of-type { border-bottom: none; }
.stream-detail__game { font-family: var(--font-headline); font-weight: 600; font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.stream-detail__game-icon { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; flex-shrink: 0; vertical-align: -3px; }
.stream-detail__minutes { color: var(--text-dim); font-family: var(--font-display); font-size: 12px; }
.stream-detail__empty { font-size: 13px; color: var(--text-dim); padding: 8px 0; }
.stream-detail__profile-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--red-bright);
}

/* ---------- Live map ---------- */
.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 640px) {
  .map-frame { aspect-ratio: 4 / 5; }
}

/* ---------- Profile page ---------- */
#profile-container { max-width: 760px; padding-top: 12px; padding-bottom: 60px; }

@keyframes profileCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.profile-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
  animation: profileCardIn .55s cubic-bezier(.16,.8,.24,1) both;
}
.profile-banner {
  height: 120px;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(179,16,29,0.45), transparent 60%),
    linear-gradient(135deg, #1a1a1d 0%, #0d0d0f 100%);
  background-size: 160% 160%;
  border-bottom: 1px solid var(--border);
  animation: bannerDrift 14s ease-in-out infinite;
}
@keyframes bannerDrift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 60% 40%; }
}
.profile-head {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  padding: 0 28px;
  margin-top: -48px;
}
.profile-head__avatar { width: 104px; flex-shrink: 0; margin: 0; transition: transform .2s cubic-bezier(.16,.8,.24,1); }
.profile-head__avatar:hover { transform: translateY(-2px); }
.profile-head__avatar img { width: 104px; height: 104px; border-radius: 50%; border: 4px solid var(--panel); display: block; background: var(--panel); transition: border-color .2s ease, box-shadow .2s ease; }
.profile-head__avatar:hover img { border-color: var(--red); box-shadow: 0 0 0 4px rgba(179,16,29,0.15); }
.profile-head__avatar .status-badge { width: 22px; height: 22px; border-width: 4px; }
.profile-head__info { min-width: 0; padding-bottom: 6px; }
.profile-head h1 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 2px; font-size: 28px; }
.profile-sub { color: var(--text-dim); font-size: 13px; }

.profile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px 4px 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.chip--status { padding-left: 12px; }
.chip--me { background: rgba(179,16,29,0.12); border-color: rgba(179,16,29,0.5); color: var(--red-bright); font-weight: 600; }
.chip--action { cursor: pointer; font-family: var(--font-body); }
.chip--action:hover { border-color: var(--text-dim); background: var(--panel); }

.linked-accounts-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.linked-accounts-row__label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.linked-accounts-row__account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px 3px 3px;
  font-size: 12px;
  color: var(--text-dim);
}
.linked-accounts-row__account img { width: 20px; height: 20px; border-radius: 50%; }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.resident-badge__r {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
}

.profile-card__body { padding: 20px 28px 28px; }

.now-playing {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.now-playing--plain { background: transparent; border-style: dashed; }
.now-playing img { width: 52px; height: 52px; border-radius: 6px; flex-shrink: 0; }
.now-playing__icon {
  width: 52px; height: 52px; border-radius: 6px; flex-shrink: 0;
  background: var(--panel); display: flex; align-items: center; justify-content: center;
}
.now-playing__info { min-width: 0; }
.now-playing__label { display: flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #1DB954; margin-bottom: 4px; }
.now-playing--plain .now-playing__label { color: var(--text-dim); }
.now-playing__song { font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-playing__artist { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.music-list { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.music-link { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.music-link__meta { font-size: 12px; color: var(--text-dim); margin-top: 8px; }

.empty-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 14px;
}
.empty-state__icon { opacity: .5; margin-bottom: 10px; }
.empty-state__hint { font-size: 12px; margin-top: 6px; opacity: .7; }

@media (max-width: 560px) {
  .profile-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .profile-head__avatar { margin-top: -60px; }
}

.level-card {
  margin-top: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 26px;
  animation: profileCardIn .55s cubic-bezier(.16,.8,.24,1) both;
  animation-delay: .08s;
}
.level-card__head { display: flex; align-items: center; gap: 18px; }
.level-card__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #7a0e15);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  transition: transform .2s cubic-bezier(.16,.8,.24,1);
}
.level-card__badge:hover { transform: scale(1.08) rotate(-4deg); }
.level-card__progress-wrap { flex: 1; min-width: 0; }
.level-card__progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.level-progress {
  height: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.level-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red), #e0454f);
  border-radius: 4px;
  transition: width .9s cubic-bezier(.16,.8,.24,1);
}

.level-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 22px;
}
@keyframes statCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.level-stat {
  position: relative;
  text-align: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 8px;
  animation: statCardIn .45s cubic-bezier(.16,.8,.24,1) both;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.level-stat:hover {
  transform: translateY(-3px);
  border-color: var(--red);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}
.level-stat__icon { font-size: 18px; margin-bottom: 6px; transition: transform .15s ease; }
.level-stat:hover .level-stat__icon { transform: scale(1.15); }
.level-stat__value {
  font-family: var(--font-display);
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.level-stat__label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin-top: 4px; }

/* Tiered rank borders (Diamond > Gold > Silver, best to worst). How many
   ranks get styled scales with community size - see rankTier() in
   profile.html. Diamond = the very best ranks, Silver = the widest/weakest
   special tier. */
.level-stat--tier { cursor: default; }
.level-stat--diamond { border-color: rgba(59,190,255,0.55); background: rgba(59,190,255,0.08); }
.level-stat--diamond:hover, .level-stat--diamond.level-stat--clickable:hover { border-color: #6fe0ff; }
.level-stat--gold { border-color: rgba(216,155,31,0.55); background: rgba(216,155,31,0.08); }
.level-stat--gold:hover, .level-stat--gold.level-stat--clickable:hover { border-color: #ffd76a; }
.level-stat--silver { border-color: rgba(160,160,160,0.55); background: rgba(160,160,160,0.08); }
.level-stat--silver:hover, .level-stat--silver.level-stat--clickable:hover { border-color: #cfcfcf; }

.level-stat__rank-pip {
  position: absolute;
  top: -8px;
  right: -6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  border: 2px solid var(--panel);
}
.level-stat__rank-pip--diamond { background: linear-gradient(135deg, #8ee9ff, #2ba9d1); color: #04303d; }
.level-stat__rank-pip--gold { background: linear-gradient(135deg, #ffd76a, #d89b1f); color: #2b1c00; }
.level-stat__rank-pip--silver { background: linear-gradient(135deg, #e2e2e2, #a0a0a0); color: #262626; }

.level-stat--clickable {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.level-stat--clickable:hover { border-color: var(--red); }
.level-stat--open { border-color: var(--red); background: rgba(179,16,29,0.08); }
.level-stat__chevron {
  display: inline-block;
  margin-left: 3px;
  transition: transform .15s ease;
}
.level-stat--open .level-stat__chevron { transform: rotate(90deg); color: var(--red-bright); }

.level-card .stream-detail {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 8px;
}
.stream-detail__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .level-stats { grid-template-columns: repeat(2, 1fr); }
  .level-card__head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Stats ribbon (homepage, under hero) ---------- */
.stats-ribbon {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.stats-ribbon__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 22px 10px;
  text-align: center;
  border-left: 1px solid var(--border);
}
.stat-pill:first-child { border-left: none; }
.stat-pill__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--red-bright);
  letter-spacing: 1px;
  line-height: 1;
}
.stat-pill__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
@media (max-width: 640px) {
  .stats-ribbon__inner { grid-template-columns: repeat(2, 1fr); }
  .stat-pill:nth-child(3) { border-left: none; }
}

/* ---------- Homepage mini-leaderboards (little square cards) ----------
   Namespaced as "mini-lb-*" deliberately - residents.html already has its
   own full-page leaderboard using plain .leaderboard-* class names, and
   these are a completely different, unrelated UI (a compact homepage
   preview). Reusing the same names would silently clash cascade rules
   between the two pages since they share one stylesheet. */
.mini-lb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.mini-lb-card {
  min-height: 230px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.mini-lb-card:hover { border-color: var(--red); transform: translateY(-3px); }
.mini-lb-card--loading {
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-style: italic;
  grid-column: 1 / -1;
  padding: 30px;
  min-height: 0;
}
.mini-lb-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mini-lb-card__sub {
  display: inline-block;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 16px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: color .15s, border-color .15s;
}
.mini-lb-card__sub:hover { color: var(--red-bright); border-color: var(--red-bright); }
.mini-lb-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  justify-content: center;
}
.mini-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.mini-lb-row__rank {
  font-family: var(--font-display);
  color: var(--text-dim);
  width: 22px;
  flex-shrink: 0;
  font-size: 15px;
  text-align: center;
}
.mini-lb-row--1 .mini-lb-row__rank { color: var(--red-bright); font-weight: 700; }
.mini-lb-row__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border);
  object-fit: cover;
}
.mini-lb-row__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.mini-lb-row__value {
  font-family: var(--font-display);
  color: var(--red-bright);
  font-size: 12px;
  flex-shrink: 0;
}
.mini-lb-empty { color: var(--text-dim); font-style: italic; font-size: 13px; }

/* ---------- Top games chart ---------- */
.chart-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 26px;
}
.chart-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}
.chart-card__head h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 18px;
  margin: 0;
}
.chart-card__body { position: relative; }
.chart-empty { color: var(--text-dim); font-style: italic; padding: 30px 0; text-align: center; }

/* ---------- Overall rank badge (profile page) ---------- */
.level-card__rank {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--font-display);
  cursor: default;
}
.level-card__rank-num { font-size: 18px; color: var(--red-bright); font-weight: 700; letter-spacing: .5px; }
.level-card__rank-total { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Hover tooltips (data-tooltip attribute) ---------- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 4px);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
  padding: 7px 11px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
  z-index: 30;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (max-width: 640px) {
  .mini-lb-card { min-height: 0; }
}

/* ==================== Full Profile (Letterboxd-style) ==================== */
.fp-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #0a0a0b;
}
/* Letterboxd shows the backdrop crisp/sharp (not blurred) - it's a real still
   from what they most recently played, full-bleed, darkened by a gradient
   scrim rather than a blur so the art itself stays legible. Prefers IGDB's
   banner/artwork when we have it (fetched by igdbArt.js), same field as the
   Steam fallback art. */
.fp-hero--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--fp-bg-image);
  background-size: cover;
  background-position: center 25%;
  z-index: 0;
}
.fp-hero--noimage {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(179,16,29,0.45), transparent 60%),
    linear-gradient(135deg, #1a1a1d 0%, #0d0d0f 100%);
}
/* Letterboxd's own banner does BOTH a vertical fade (clear at the top,
   fading to solid dark by the bottom where the avatar/name/stats row sits)
   AND a horizontal edge vignette - confirmed by inspecting the real
   computed gradient on letterboxd.com/<user>/'s own .backdropmask::before:
   solid background color right at the left/right edges, easing out to
   fully transparent by about 17% in from each side. That side fade is what
   gives their banner its soft, slightly-out-of-focus look at the edges
   (an earlier pass here mistakenly assumed there was no horizontal
   darkening at all and removed it - direct inspection says otherwise). */
.fp-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(10,10,11,0.75) 5%, rgba(10,10,11,0.3) 11%, transparent 18%, transparent 82%, rgba(10,10,11,0.3) 89%, rgba(10,10,11,0.75) 95%, var(--bg) 100%),
    linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0) 45%, rgba(10,10,11,0.6) 72%, var(--bg) 100%);
  z-index: 1;
}
.fp-hero__inner {
  position: relative;
  z-index: 2;
  /* .fp-hero__inner is itself a flex item of .fp-hero (a column flex
     container), and it inherits margin:0 auto from .container - that auto
     margin on the cross axis suppresses the default flex "stretch" sizing,
     so without an explicit width the row shrank to fit its own content
     (avatar+name+stats) instead of filling the available row width. That
     left space-between with nothing to distribute, so the two halves sat
     bunched together in the middle instead of spreading to the edges. */
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 90px;
  /* Letterboxd-style spread: pull the avatar/name block a little closer to
     the left edge and the stat numbers a little closer to the right edge,
     beyond the standard .container side padding. */
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 28px;
}
.fp-hero__left { display: flex; align-items: flex-end; gap: 20px; min-width: 0; }
.fp-hero__avatar-wrap { position: relative; flex-shrink: 0; }
.fp-hero__avatar {
  /* 100x100 - the real computed size pulled directly off
     letterboxd.com/<user>/'s own avatar circle. */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--bg);
  display: block;
  background: var(--panel);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  transition: transform .2s cubic-bezier(.16,.8,.24,1);
}
.fp-hero__avatar-wrap:hover .fp-hero__avatar { transform: scale(1.04); }
.fp-hero__avatar-wrap .status-badge { position: absolute; bottom: 6px; right: 6px; width: 24px; height: 24px; border-width: 4px; }
.fp-hero__info { min-width: 0; }
.fp-hero__info h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 30px;
  margin: 0 0 8px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fp-hero__sub { font-size: 13px; color: rgba(232,230,225,0.75); margin-bottom: 10px; }
.fp-name-badge {
  display: inline-flex;
  align-items: center;
  background: var(--red);
  color: #fff;
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  vertical-align: middle;
}
.fp-name-badge--gold {
  background: linear-gradient(135deg, #ffd76a, #d89b1f);
  color: #2b1c00;
}
.fp-name-badge--diamond { background: linear-gradient(135deg, #8ee9ff, #2ba9d1); color: #04303d; }
.fp-name-badge--silver { background: linear-gradient(135deg, #e2e2e2, #a0a0a0); color: #262626; }
.fp-hero__edit-btn {
  margin-top: 4px;
}
/* Steam/Xbox "linked" badges - shown whenever the account is connected at
   all, independent of which one (if either) is actively driving the Games
   tab. Small colored wordmark pills rather than icon glyphs, so they read
   clearly at this size without needing pixel-precise brand artwork. */
.fp-hero__platforms {
  display: inline-flex;
  gap: 6px;
  vertical-align: middle;
  margin-left: 6px;
}
.fp-platform-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 20px;
  line-height: 1;
}
.fp-platform-badge--steam { background: #171a21; color: #66c0f4; border: 1px solid #2a3f5f; }
.fp-platform-badge--xbox { background: #107c10; color: #fff; border: 1px solid #16a316; }

/* Hero platform badges (full-profile.html only) - icon-only, clickable link
   out to the person's actual platform profile, username on hover via the
   title attribute. Deliberately a separate class from .fp-platform-badge
   above rather than reusing it - that one is still a small text pill used
   in Settings' connected-account corner badge, and giving it these fixed
   icon dimensions would break that entirely different, much smaller,
   absolutely-positioned context. */
.fp-platform-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.fp-platform-icon-badge svg { width: 14px; height: 14px; display: block; }
a.fp-platform-icon-badge:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.45); }
.fp-platform-icon-badge--steam { background: #171a21; color: #66c0f4; border: 1px solid #2a3f5f; }
.fp-platform-icon-badge--xbox { background: #107c10; color: #fff; border: 1px solid #16a316; }
.fp-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(179,16,29,0.25);
  border: 1px solid rgba(179,16,29,0.6);
  color: #ffb3b8;
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
}
.fp-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ba55d;
  box-shadow: 0 0 0 3px rgba(59,165,93,0.25);
  animation: fpPulse 1.8s ease-in-out infinite;
}
@keyframes fpPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Stats sit inline beside the avatar/name block, same row, right-aligned -
   plain stacked number+label pairs with no borders/panel background, matching
   how Letterboxd lays out Films/This Year/Lists/Following/Followers next to
   the header instead of as a separate full-width strip underneath. */
.fp-hero__stats-inline {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 6px;
}
.fp-stat--inline { text-align: center; min-width: 0; }
/* Tiempos-style serif numerals here specifically - matches the real
   computed token pulled from letterboxd.com/<user>/'s own stats row
   (21px/700 TiemposTextWeb), a deliberate one-off vs. the Oswald display
   font every other stat number on the site still uses. */
.fp-stat--inline .fp-stat__num { font-family: var(--font-tiempos); font-size: 22px; font-weight: 700; color: #fff; }
.fp-stat--inline .fp-stat__label { font-family: var(--font-graphik); letter-spacing: .8px; }
.fp-stat--inline .fp-stat__label { color: rgba(232,230,225,0.6); }
.fp-stat__num { display: block; font-family: var(--font-display); font-size: 20px; color: var(--text); }
.fp-stat__label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin-top: 4px; }

/* search.html: tabs + result count share a row - the count used to sit next
   to the page's own search input, but that input is gone now that the
   header's persistent search box is the single search entry point. */
.search-page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.search-page__head .fp-tabs { flex: 1; min-width: 0; }
.search-page__head .resident-search__count { margin-bottom: 12px; white-space: nowrap; }
@media (max-width: 640px) {
  .search-page__head { flex-direction: column; align-items: stretch; gap: 4px; }
  .search-page__head .resident-search__count { margin-bottom: 8px; }
}

.fp-tabs {
  display: flex;
  gap: 4px;
  margin-top: 26px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  /* Setting only overflow-x makes overflow-y compute to auto too (a CSS
     spec quirk), and the active tab's underline (bottom: -1px on its
     ::after) is just enough vertical overflow to make Windows/Chrome render
     a real native scrollbar - complete with up/down arrow buttons - right
     in the middle of the tab row. Pin overflow-y to hidden so only the
     intentional horizontal scroll (for narrow screens) is ever shown. */
  overflow-y: hidden;
}
.fp-tab {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 12px 18px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color .15s ease;
}
.fp-tab:hover { color: var(--text); }
.fp-tab--active { color: var(--text); }
.fp-tab--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--red);
  border-radius: 2px 2px 0 0;
}
.fp-tab__count:empty { display: none; }
.fp-tab__count {
  display: inline-block;
  background: var(--bg-alt);
  color: var(--text-dim);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
}

.fp-panel { padding: 28px 0 60px; animation: fpPanelIn .35s ease; }
@keyframes fpPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==================== "lp-" = Letterboxd Profile - the Profile tab's
   default-view redesign (letterboxd.com/<user>/'s own layout): a real
   Favorite Games row up top, then a two-column split matching Letterboxd's
   own 630px main / 250px aside proportions (scaled up slightly to fit this
   site's wider container), Graphik-style uppercase section headings and
   Tiempos-style serif numerals matching the real computed tokens pulled
   from letterboxd.com/makimozoro/ directly (13px/0.975px-tracking uppercase
   labels, 21px/700 serif stat numbers). ==================== */
.lp-section { margin-top: 30px; }
.lp-section:first-child { margin-top: 0; }
.lp-section-heading {
  font-family: var(--font-graphik);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.lp-section-heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; padding-bottom: 6px; }
.lp-section-heading-row .lp-section-heading { margin: 0; padding: 0; border: none; }
.lp-section-more {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-graphik);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-dim);
  transition: color .15s ease;
}
.lp-section-more:hover { color: var(--lb-green); }

/* Favorite Games - real IGDB poster art, up to 4, edit-only-by-owner. Tile
   proportions and gap match the real computed values pulled directly off
   letterboxd.com/<user>/'s own Favorite Films row (150x225 posters - a true
   2:3 poster ratio - 10px gap between them), just scaled down slightly
   (140x210) to leave a touch more breathing room in this site's wider
   layout. */
.lp-favorites { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-fav-tile { position: relative; width: 140px; }
.lp-fav-tile__link { display: block; text-decoration: none; color: inherit; }
.lp-fav-tile__poster {
  width: 140px;
  height: 210px;
  border-radius: 6px;
  background: var(--bg-alt);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  opacity: .9;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  transition: transform .2s cubic-bezier(.16,.8,.24,1), box-shadow .2s cubic-bezier(.16,.8,.24,1);
}
.lp-fav-tile__link:hover .lp-fav-tile__poster { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.5), 0 0 16px 1px rgba(0,224,84,0.2); }
.lp-fav-tile__name {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color .15s ease;
}
.lp-fav-tile__link:hover .lp-fav-tile__name { color: var(--text); }
.lp-fav-tile__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: 2px solid var(--bg);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
}
.lp-fav-tile:hover .lp-fav-tile__remove { opacity: 1; }
.lp-fav-tile--add {
  width: 140px;
  height: 210px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.lp-fav-tile--add:hover { border-color: var(--lb-green); color: var(--lb-green); }
.lp-fav-tile__plus { font-size: 28px; font-weight: 300; }

/* Favorite Games search picker - reuses .banner-picker-modal's shell,
   swapping the static art-option grid for a live search box + result list
   (a favorite can be ANY game, not just an already-tracked one). */
.lp-fav-search__input {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  padding: 10px 14px;
  margin: 4px 0 14px;
}
.lp-fav-search__input:focus { outline: none; border-color: var(--lb-green); }
.lp-fav-search__results { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.lp-fav-search__result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.lp-fav-search__result:hover { background: var(--bg-alt); }
.lp-fav-search__result-art {
  flex-shrink: 0;
  width: 34px;
  height: 48px;
  border-radius: 3px;
  background: var(--bg-alt);
  background-size: cover;
  background-position: center;
}

/* Two-column split: main content (Recent Reviews, Activity preview) +
   narrow sidebar (Ratings histogram, Community Level) - the EXACT 630px
   main / 250px aside / 70px gap proportions measured directly off
   letterboxd.com/<user>/'s own cols-2/aside (950px total = 630 + 250 + 70). */
.lp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 70px; margin-top: 34px; align-items: start; }
.lp-cols__main { min-width: 0; }
.lp-cols__aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.lp-cols__aside .level-card { margin-top: 0; padding: 18px 20px; }
.lp-cols__aside .level-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.lp-cols__aside .level-card__head { flex-direction: column; align-items: flex-start; gap: 10px; }
@media (max-width: 860px) {
  .lp-cols { grid-template-columns: 1fr; }
}
/* Right rail rides along with the page instead of trailing off into empty
   space next to a long main column (Recent Reviews + the Recent Activity
   poster grid easily run taller than Ratings + Diary combined) - same
   "sidebar stays put while you scroll" feel most profile/media sites with
   an asymmetric two-column layout use. Desktop only: stacked single-column
   on mobile has no "next to a taller column" problem to solve. */
@media (min-width: 861px) {
  .lp-cols__aside { position: sticky; top: 90px; }
}

.lp-sidebar-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
.lp-sidebar-card .lp-section-heading { margin-bottom: 12px; }

/* Diary - dense dated list living in the aside under the Ratings
   histogram, mirrors letterboxd.com/<user>/'s own sidebar Diary section:
   date + title + stars only, no poster/review text, so a real second card
   fills out the column instead of one small histogram box trailing off
   into blank space. */
.lp-diary { display: flex; flex-direction: column; }
.lp-diary__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.lp-diary__row:first-child { padding-top: 0; }
.lp-diary__row:last-child { border-bottom: none; padding-bottom: 0; }
.lp-diary__date {
  flex: 0 0 auto;
  width: 34px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--text-dim);
}
.lp-diary__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
}
.lp-diary__row:hover .lp-diary__title { color: var(--red-bright); }
.lp-diary__stars { flex: 0 0 auto; font-size: 10px; }

/* Recent Reviews - mini review rows, poster thumb + title/stars/snippet,
   same "your own opinion of something you played" tone as the Activity
   diary entries, just surfaced up front on the default tab like
   Letterboxd's own Recent Reviews section. */
.lp-review-list { display: flex; flex-direction: column; gap: 16px; }
.lp-review-card {
  display: flex;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.lp-review-card__poster {
  flex-shrink: 0;
  width: 54px;
  height: 76px;
  border-radius: 5px;
  background: var(--bg-alt);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.lp-review-card__body { min-width: 0; flex: 1; }
.lp-review-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-review-card__title { font-family: var(--font-tiempos); font-weight: 600; font-size: 15px; color: var(--text); transition: color .15s ease; }
.lp-review-card:hover .lp-review-card__title { color: var(--lb-green); }
.lp-review-card__stars { font-size: 12px; }
.lp-review-card__text {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.lp-review-card__time { font-size: 11px; color: var(--text-dim); opacity: .7; margin-top: 6px; }

/* Recent Activity poster grid - matches letterboxd.com/<user>/'s own
   Profile tab exactly: real poster art in a tight grid (140px tiles / 10px
   gap, same ratio+spacing as the Favorite Games row above), a star-rating
   caption underneath for anything rated, or a small "played" glyph for a
   log with no rating yet. The full text diary still lives on the Activity
   tab - this is deliberately just a preview, same as Letterboxd's own. */
.lp-poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.lp-poster-grid__item { text-decoration: none; color: inherit; display: block; }
.lp-poster-grid__poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background: var(--bg-alt);
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  transition: transform .2s cubic-bezier(.16,.8,.24,1), box-shadow .2s cubic-bezier(.16,.8,.24,1);
}
.lp-poster-grid__item:hover .lp-poster-grid__poster { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.5), 0 0 16px 1px rgba(0,224,84,0.2); }
.lp-poster-grid__caption { margin-top: 6px; font-size: 12px; text-align: center; }
.lp-poster-grid__stars { font-size: 11px; }
.lp-poster-grid__playicon { color: var(--text-dim); font-size: 11px; }

.fp-feed { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.fp-feed__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  transition: border-color .15s ease, transform .15s ease;
}
.fp-feed__item:hover { border-color: var(--red); transform: translateX(2px); }
.fp-feed__item--live { border-color: rgba(59,165,93,0.5); background: rgba(59,165,93,0.06); }
.fp-feed__emoji { font-size: 20px; line-height: 1; flex-shrink: 0; width: 32px; text-align: center; }
.fp-feed__icon { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; object-fit: cover; }
.fp-feed__body { min-width: 0; }
.fp-feed__text { font-size: 14px; color: var(--text); }
.fp-feed__time { font-size: 11px; color: var(--text-dim); margin-top: 3px; text-transform: uppercase; letter-spacing: .4px; }

/* Backloggd-style poster grid: tight columns of vertical box art, name
   underneath, total-time as a small chip overlaid on the art itself rather
   than a big separate stats block - the cover does most of the talking. */
.fp-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
@keyframes fpGameCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fp-game-card {
  cursor: pointer;
  animation: fpGameCardIn .4s cubic-bezier(.16,.8,.24,1) both;
}
.fp-game-card:focus-visible .fp-game-card__art { outline: 2px solid var(--red); outline-offset: 2px; }
.fp-game-card--dropped .fp-game-card__art { opacity: .5; }
.fp-game-card--dropped .fp-game-card__name { color: var(--text-dim); }
.fp-game-card__art {
  position: relative;
  /* Vertical Steam box-art ratio (600x900) - matches Backloggd's poster grid.
     Landscape-fallback cards (no poster art available) use a wider ratio
     instead so header/banner art doesn't get stretched tall and blurry. */
  aspect-ratio: 600 / 900;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt);
  border-radius: 6px;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: transform .15s cubic-bezier(.16,.8,.24,1), border-color .15s ease, box-shadow .15s ease;
}
.fp-game-card:hover .fp-game-card__art {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--red);
  box-shadow: 0 12px 24px rgba(0,0,0,0.45);
}
.fp-game-card--landscape .fp-game-card__art { aspect-ratio: 460 / 215; }
.fp-game-card__art--empty {
  background: linear-gradient(135deg, var(--bg-alt) 0%, #1a1a1d 100%);
  opacity: .85;
}
.fp-game-card__icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.fp-game-card__time-chip {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(10,10,11,0.8);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 20px;
  line-height: 1;
}
.fp-game-card__body { padding: 8px 2px 0; }
.fp-game-card__name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fp-game-card__name {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fp-game-card__last { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

/* Third-party Games tab (Steam/Xbox linked) - search bar + platform filter
   dropdown, and the small platform-source icon shown in a game card's
   corner when the "All" filter is active (no time chip in that mode, since
   Steam and Xbox track playtime too differently to show side by side
   honestly once merged - see full-profile.html's playedCardHtml). */
.fp-games-controls { display: flex; gap: 8px; margin-bottom: 16px; }
.fp-games-search {
  flex: 1;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-body);
}
.fp-games-search:focus { outline: none; border-color: var(--red); }
.fp-games-filter {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  font-size: 13px;
  flex-shrink: 0;
}
.fp-game-card__platform-corner {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(10,10,11,0.78);
  border-radius: 20px;
  padding: 4px 6px;
  z-index: 1;
}
.fp-game-card__platform-corner svg { width: 11px; height: 11px; display: block; }
.fp-game-card__platform-corner svg:nth-child(1) { color: #66c0f4; }
.fp-game-card__platform-corner svg:nth-child(2) { color: #9be89b; }

/* Five-star rating display (renders a 1-10 value as a 5-star row, half-star
   precision) - two stacked star strings, a dim background row and a filled
   foreground row clipped to a percentage width. Reused for the small chip on
   game cards and the larger read-only display inside the rating modal. */
.fp-stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  letter-spacing: 1px;
}
.fp-stars__bg { color: rgba(255,255,255,0.22); white-space: nowrap; }
.fp-stars__fg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #ffd76a;
}
.fp-stars--sm { font-size: 10px; }
.fp-stars--lg { font-size: 22px; letter-spacing: 3px; }

/* Owner's rating - shown inline next to the game name below the poster
   (NOT overlaid on the art itself, which stays clean box-art). Completionist
   trophy still lives on the art as a small corner badge, more like a medal
   stamped on the case than a UI control. */
.fp-game-card__rating-chip {
  flex-shrink: 0;
  line-height: 1;
}
.fp-game-card__trophy {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 15px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

/* Section headers within the Games tab (Played / Streaming) */
.fp-games-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.fp-games-section-head:not(:first-child) { margin-top: 32px; }
.fp-games-section-head h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0;
  color: var(--text);
}

/* Streamed-only games: a simpler, non-interactive landscape row list -
   distinct from the clickable/rateable Played poster grid above it. */
.fp-stream-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
@keyframes fpStreamCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fp-stream-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  animation: fpStreamCardIn .4s cubic-bezier(.16,.8,.24,1) both;
}
.fp-stream-card__art {
  width: 64px;
  aspect-ratio: 460 / 215;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.fp-stream-card__art--empty { background: linear-gradient(135deg, var(--bg-alt) 0%, #1a1a1d 100%); opacity: .85; }
.fp-stream-card__icon-badge { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.fp-stream-card__body { min-width: 0; }
.fp-stream-card__name {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-stream-card__meta { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }

@media (max-width: 480px) {
  .fp-games-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .fp-stream-grid { grid-template-columns: 1fr; }
}

/* Now clickable (opens the stream-detail popup) - give it the same
   pointer/focus affordances as the poster cards instead of looking static. */
.fp-stream-card { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.fp-stream-card:hover { border-color: var(--red); transform: translateY(-2px); }
.fp-stream-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Sub-label under a "Streaming" section head, splitting it into "Games"
   (IGDB poster art) vs "Other" (plain, e.g. Screen Share) groups. */
.fp-games-subhead {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 18px 0 10px;
}
.fp-games-section-head + .fp-games-subhead { margin-top: 0; }

.empty-state--compact { padding: 22px 16px; font-size: 13px; }

/* Movies/Shows tabs (beta) - year label next to a title, and the simple
   search bar + dropdown results sitting above the Watched/Watchlist grids. */
.fp-game-card__year { opacity: .6; font-weight: 400; margin-left: 3px; }

.fp-media-search { position: relative; margin-bottom: 8px; }
.fp-media-search__input {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--text);
  font-family: var(--font-body);
}
.fp-media-search__input:focus { outline: none; border-color: var(--red); }
.fp-media-search__results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.fp-media-search__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.fp-media-search__row:last-child { border-bottom: none; }
.fp-media-search__icon { font-size: 15px; flex-shrink: 0; }
.fp-media-search__title { flex: 1; font-size: 13px; }
.fp-media-search__add { flex-shrink: 0; }
.fp-media-search__loading { padding: 12px; font-size: 12.5px; color: var(--text-dim); }

/* Streamed games that DO have IGDB poster art - same poster-grid look as
   the Played section, but a distinct class so the rating-modal's card
   click-binding (which targets .fp-game-card) never picks these up. */
.fp-stream-poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.fp-stream-poster-card {
  cursor: pointer;
  animation: fpGameCardIn .4s cubic-bezier(.16,.8,.24,1) both;
}
.fp-stream-poster-card:focus-visible .fp-stream-poster-card__art { outline: 2px solid var(--red); outline-offset: 2px; }
.fp-stream-poster-card__art {
  position: relative;
  aspect-ratio: 600 / 900;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt);
  border-radius: 6px;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: transform .15s cubic-bezier(.16,.8,.24,1), border-color .15s ease, box-shadow .15s ease;
}
.fp-stream-poster-card:hover .fp-stream-poster-card__art {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--red);
  box-shadow: 0 12px 24px rgba(0,0,0,0.45);
}
.fp-stream-poster-card--landscape .fp-stream-poster-card__art { aspect-ratio: 460 / 215; }
.fp-stream-poster-card__art--empty {
  background: linear-gradient(135deg, var(--bg-alt) 0%, #1a1a1d 100%);
  opacity: .85;
}
.fp-stream-poster-card__body { padding: 8px 2px 0; }
.fp-stream-poster-card__name {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-stream-poster-card__last { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

@media (max-width: 480px) {
  .fp-stream-poster-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
}

/* ---- Streamed-item detail popup (click a streamed game/other row) ---- */
.fp-stream-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fp-stream-modal--open { display: flex; }
.fp-stream-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,6,7,0.78);
}
.fp-stream-modal__panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  animation: profileCardIn .3s cubic-bezier(.16,.8,.24,1) both;
}
.fp-stream-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(6,6,7,0.6);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.fp-stream-modal__close:hover { background: var(--red); border-color: var(--red); }
.fp-stream-modal__art {
  width: 100%;
  aspect-ratio: 460 / 215;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.fp-stream-modal__art--empty { background: linear-gradient(135deg, var(--bg-alt) 0%, #1a1a1d 100%); opacity: .85; }
.fp-stream-modal__body { padding: 18px 20px 20px; }
.fp-stream-modal__title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  margin-bottom: 12px;
}
.fp-stream-modal__stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}
.fp-stream-modal__stat b { color: var(--text); font-weight: 600; }

/* ---------- Site-wide Activity page ---------- */
.feed-list { display: flex; flex-direction: column; gap: 2px; }
@keyframes feedRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.feed-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  animation: feedRowIn .35s cubic-bezier(.16,.8,.24,1) both;
}
.feed-row:last-child { border-bottom: none; }
.feed-row__avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--bg-alt); border: 1px solid var(--border); }
.feed-row__body { flex: 1; min-width: 0; }
.feed-row__text { font-size: 14px; color: var(--text); line-height: 1.5; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.feed-row__actor { color: var(--red-bright); font-weight: 600; text-decoration: none; }
.feed-row__actor:hover { text-decoration: underline; }
.feed-row__review { font-size: 13px; color: var(--text-dim); margin-top: 4px; font-style: italic; line-height: 1.5; }
.feed-row__time { font-size: 11px; color: var(--text-dim); margin-top: 5px; text-transform: uppercase; letter-spacing: .4px; }
.feed-row__thumb { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.feed-row--live { background: rgba(59,165,93,0.07); border-color: rgba(59,165,93,0.35); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.feed-row--live .feed-row__time { color: #3ba55d; }

/* Emoji fallback when a feed row has no poster/album art to show - same
   footprint as .feed-row__thumb so rows line up whether or not art loaded. */
.feed-row__icon {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* ---- Rating modal ---- */
.fp-rate-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fp-rate-modal--open { display: flex; }
.fp-rate-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,6,7,0.78);
  backdrop-filter: blur(3px);
}
.fp-rate-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: min(86vh, 620px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: fpModalIn .25s cubic-bezier(.16,.8,.24,1);
}
@keyframes fpModalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.fp-rate-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(10,10,11,0.6);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-rate-modal__close:hover { background: var(--red); }

/* Two-column layout: a rectangular IGDB cover on the left with the rating
   control right underneath it, and the game's review + comment thread in a
   wider column to the right - instead of one big banner stretched across
   the top with everything stacked below it. */
.fp-rate-modal__layout {
  display: flex;
  max-height: min(86vh, 620px);
}
.fp-rate-modal__left {
  width: 230px;
  flex-shrink: 0;
  padding: 24px 20px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.fp-rate-modal__right {
  flex: 1;
  min-width: 0;
  padding: 24px 26px;
  overflow-y: auto;
}
.fp-rate-modal__art {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.fp-rate-modal__art--empty {
  background: linear-gradient(135deg, var(--bg-alt) 0%, #1a1a1d 100%);
}
.fp-rate-modal__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 18px;
  color: #fff;
  margin-bottom: 14px;
}
.fp-rate-modal__stars { display: flex; gap: 3px; }
.fp-rate-star {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  color: rgba(232,230,225,0.25);
  transition: color .1s ease, transform .1s ease;
  padding: 1px;
}
.fp-rate-star:hover { transform: scale(1.15); }
.fp-rate-star--filled { color: #ffd76a; }
.fp-rate-modal__stars-label { font-size: 12px; color: var(--text-dim); }
.fp-rate-modal__completionist {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}
.fp-rate-modal__completionist input { width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; flex-shrink: 0; }
.fp-rate-modal__completionist input:disabled { cursor: not-allowed; opacity: .4; }
.fp-rate-modal__hint { font-size: 11px; color: var(--text-dim); }
.fp-rate-modal__right .btn { width: 100%; margin-top: 14px; justify-content: center; }

.fp-rate-modal__review {
  width: 100%;
  margin-top: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  resize: vertical;
  min-height: 64px;
}
.fp-rate-modal__review:focus { outline: none; border-color: var(--red); }
.fp-rate-modal__review-label,
.fp-rate-modal__comments-label {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-dim);
  margin-top: 16px;
  margin-bottom: 6px;
}
.fp-rate-modal__right .fp-rate-modal__review-label { margin-top: 0; }

/* Read-only rating/review shown to anyone who ISN'T the profile owner - a
   plain display block instead of the star-picker + textarea the owner gets.
   Stacked (not a horizontal row) since it now lives in the narrow left
   column, underneath the cover art. */
.fp-rate-modal__readonly-rating { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fp-rate-modal__readonly-num { font-family: var(--font-display); font-size: 15px; color: #ffd76a; }
.fp-rate-modal__readonly-trophy { font-size: 18px; }
.fp-rate-modal__readonly-empty { font-size: 13px; color: var(--text-dim); font-style: italic; }
.fp-rate-modal__readonly-review {
  font-size: 13px;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 640px) {
  .fp-rate-modal__layout { flex-direction: column; max-height: min(90vh, 680px); overflow-y: auto; }
  .fp-rate-modal__left {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-y: visible;
  }
  .fp-rate-modal__art { width: 96px; flex-shrink: 0; aspect-ratio: 3 / 4; }
  .fp-rate-modal__right { overflow-y: visible; }
}

/* Heart-shaped like button, shared look for the review-like button and each
   comment's like button - grey by default, red + filled once you've liked it. */
.fp-like-btn,
.fp-comment__like-btn {
  appearance: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.fp-like-btn { margin-top: 10px; }
.fp-like-btn:hover, .fp-comment__like-btn:hover { border-color: var(--red); color: var(--text); }
.fp-like-btn--active, .fp-comment__like-btn--active {
  color: var(--red-bright);
  border-color: rgba(179,16,29,0.6);
  background: rgba(179,16,29,0.1);
}
.fp-comment__like-btn { margin-top: 6px; padding: 2px 8px; font-size: 10.5px; }

.fp-comment-list { display: flex; flex-direction: column; gap: 10px; max-height: 220px; overflow-y: auto; margin-bottom: 10px; }
.fp-comment {
  display: flex;
  gap: 9px;
  font-size: 12.5px;
}
.fp-comment__avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--bg-alt); }
.fp-comment__body { min-width: 0; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; flex: 1; }
.fp-comment__meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.fp-comment__author { font-weight: 700; color: var(--text); }
.fp-comment__time { color: var(--text-dim); font-size: 10.5px; white-space: nowrap; }
.fp-comment__text { color: var(--text); line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.fp-comment-empty { font-size: 12px; color: var(--text-dim); font-style: italic; margin-bottom: 10px; }
.fp-comment-form { display: flex; gap: 8px; align-items: flex-start; }
.fp-comment-form textarea {
  flex: 1;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12.5px;
  resize: vertical;
  min-height: 38px;
}
.fp-comment-form textarea:focus { outline: none; border-color: var(--red); }
.fp-comment-form .btn { width: auto; margin-top: 0; white-space: nowrap; }
.fp-comment-login-hint { font-size: 12px; color: var(--text-dim); }

.profile-fullview-btn { margin-top: 12px; display: inline-flex; }

@media (max-width: 640px) {
  .fp-hero__inner { flex-direction: column; align-items: flex-start; padding-top: 50px; }
  .fp-hero__avatar { width: 88px; height: 88px; }
  .fp-hero__info h1 { font-size: 24px; }
  .fp-hero__stats-inline { gap: 20px; }
  .fp-stat--inline .fp-stat__num { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-badge__dot { animation: none; }
  .fp-panel { animation: none; }
  .fp-game-card { animation: none; opacity: 1; transform: none; }
  .fp-hero__avatar { transition: none; }
}

/* ==================== Settings page ==================== */
.settings-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 22px;
  animation: profileCardIn .5s cubic-bezier(.16,.8,.24,1) both;
}
.settings-panel__title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.tracking-options { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tracking-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.tracking-option:hover { border-color: rgba(179,16,29,0.5); }
.tracking-option input[type="radio"] { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--red); cursor: pointer; flex-shrink: 0; }
.tracking-option:has(input:checked) { border-color: var(--red); background: rgba(179,16,29,0.06); }
.tracking-option__title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.tracking-option__hint { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.thirdparty-accounts { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

.beta-badge {
  display: inline-block;
  background: rgba(179,16,29,0.2);
  border: 1px solid rgba(179,16,29,0.5);
  color: #ffb3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}

.pref-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.pref-toggle-row__title { font-size: 14px; font-weight: 600; color: var(--text); }
.pref-toggle-row__title span { color: var(--text-dim); font-weight: 500; }
.pref-toggle-row__hint { font-size: 12px; color: var(--text-dim); margin-top: 3px; max-width: 440px; }

.tracking-start-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.tracking-start-row #tracking-start-date { color: var(--red); font-weight: 700; }

.toggle-switch {
  appearance: none;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border-radius: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, border-color .15s ease;
}
.toggle-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform .18s cubic-bezier(.16,.8,.24,1), background .15s ease;
}
.toggle-switch--on { background: rgba(179,16,29,0.3); border-color: var(--red); }
.toggle-switch--on .toggle-switch__knob { transform: translateX(20px); background: var(--red-bright); }
.toggle-switch:disabled { opacity: .6; cursor: default; }

.music-account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.music-account-card--pending { opacity: .65; }
.music-account-card--linked { border-color: rgba(29,185,84,0.4); background: rgba(29,185,84,0.06); }
.music-account-card__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.music-account-card__avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.music-account-card__avatar-wrap { position: relative; flex-shrink: 0; }
.music-account-card__avatar-wrap .music-account-card__avatar,
.music-account-card__avatar-wrap .music-account-card__icon { flex-shrink: 0; }
.music-account-card__avatar-wrap .music-account-card__platform-badge {
  position: absolute;
  bottom: -5px;
  right: -8px;
  font-size: 8px;
  padding: 2px 5px;
  border-radius: 8px;
  white-space: nowrap;
}
.music-account-card__body { flex: 1; min-width: 0; }
.music-account-card__name { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: var(--text); }
.music-account-card__status { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.music-account-card__status--linked { color: #1DB954; }

.recent-tracks { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.recent-track-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 6px;
  transition: background .15s ease;
}
.recent-track-row:hover { background: var(--bg-alt); }
.recent-track-row__art { width: 36px; height: 36px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.recent-track-row__art--empty { display: flex; align-items: center; justify-content: center; background: var(--bg-alt); font-size: 14px; }
.recent-track-row__info { flex: 1; min-width: 0; }
.recent-track-row__name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-track-row__artist { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-track-row__time { font-size: 10px; color: var(--text-dim); flex-shrink: 0; text-transform: uppercase; letter-spacing: .4px; }

/* Xbox linking - a manual gamertag lookup instead of an OAuth button,
   since Xbox has no self-serve "Sign in with Xbox" redirect for
   third-party sites. Styled to sit right under the "Not connected" card. */
.xbox-link-form { display: flex; gap: 8px; margin-top: 10px; }
.xbox-link-form__input {
  flex: 1;
  min-width: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.xbox-link-form__input::placeholder { color: var(--text-dim); }
.xbox-link-form__input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(179,16,29,0.15); }
.xbox-link-form__hint { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.xbox-link-form__error { font-size: 12px; color: #ed4245; margin-top: 6px; }

/* Profile banner picker (beta) - Settings > Profile Customization. Same
   modal chrome as full-profile.html's fp-rate-modal (backdrop/panel/close),
   duplicated rather than shared since this lives on a different page with
   its own script scope. */
.banner-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.banner-picker-modal--open { display: flex; }
.banner-picker-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,6,7,0.78);
  backdrop-filter: blur(3px);
}
.banner-picker-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: min(82vh, 640px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.banner-picker-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(10,10,11,0.6);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
.banner-picker-modal__title { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.5px; margin-bottom: 14px; }
.banner-picker-search { display: flex; gap: 8px; margin-bottom: 14px; }
.banner-picker-search__type {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  font-size: 13px;
  flex-shrink: 0;
}
.banner-picker-search__input {
  flex: 1;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-body);
}
.banner-picker-search__input:focus { outline: none; border-color: var(--red); }
.banner-picker-automatic {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}
.banner-picker-automatic--selected { border-color: var(--red); }
.banner-picker-automatic__icon { font-size: 16px; }
.banner-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.banner-picker-tile {
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}
.banner-picker-tile--selected { border-color: var(--red); }
.banner-picker-tile__art {
  width: 100%;
  aspect-ratio: 2 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt);
  border-radius: 6px;
}
.banner-picker-tile__art--wide { aspect-ratio: 16 / 9; }
.banner-picker-tile__name {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* game.html art picker: "which one?" chip row - only rendered when a game
   title turns out to be shared by more than one real game on IGDB. */
.game-art-variant-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.game-art-variant-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px 4px 4px;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
}
.game-art-variant-chip--active { border-color: var(--red); color: var(--text); }
.game-art-variant-chip__thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}


/* ==================== Media detail page (media.html) - Letterboxd-style
   film-page layout: full-bleed backdrop, a STICKY left column (poster +
   status icons + rate + action list + share + ratings histogram) that
   stays pinned in view while the right column (title, overview, seasons,
   Popular/Recent Reviews, comments) scrolls past it. Reuses fp-stars /
   fp-rate-modal / fp-comment* classes as-is. ==================== */
.media-hero {
  position: relative;
  min-height: 340px;
  background: #0a0a0b radial-gradient(ellipse at 30% 0%, rgba(179,16,29,0.35), transparent 60%);
  background-size: cover;
  background-position: center 25%;
}
.media-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.05) 0%, rgba(10,10,11,0.25) 55%, var(--bg) 100%);
}
.media-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  margin-top: -170px;
  position: relative;
  z-index: 2;
  padding-bottom: 70px;
  align-items: start;
}
@media (max-width: 860px) {
  .media-layout { grid-template-columns: 1fr; margin-top: -100px; }
  .media-poster-col { position: static !important; }
}

/* The left column is what actually goes sticky - poster, status icons,
   inline rating stars, the text-link action list, share button, and the
   ratings histogram all travel together and stay pinned near the top of
   the viewport as the main column scrolls past, same behavior as
   Letterboxd's poster/where-to-watch column. */
.media-poster-col {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
}
.media-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt);
  border: 2px solid var(--border);
  box-shadow: 0 16px 34px rgba(0,0,0,0.55);
}
.media-poster--empty { display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: .5; }

.media-login-hint { font-size: 12px; color: var(--text-dim); }

.media-icon-row { display: flex; gap: 6px; }
.media-icon-row--secondary { margin-top: -4px; }
.media-icon-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 9px 4px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.media-icon-btn:hover { border-color: var(--text-dim); color: var(--text); }
.media-icon-btn--active { border-color: var(--red); background: rgba(179,16,29,0.16); color: #fff; }
.media-icon-btn__icon { font-size: 16px; }
.media-icon-btn__label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; }
.media-icon-btn--sm { padding: 6px 4px; }
.media-icon-btn--sm .media-icon-btn__icon { font-size: 13px; }

.media-rate-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin-top: 4px; }
.media-inline-stars { display: flex; gap: 5px; justify-content: flex-start; padding: 2px 0; }
.media-inline-stars .fp-rate-star { font-size: 30px; padding: 0; }

.media-sidebar-actions {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4px;
}
.media-sidebar-action {
  background: var(--panel);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
.media-sidebar-action:last-child { border-bottom: none; }
.media-sidebar-action:hover { background: var(--bg-alt); }
.media-sidebar-action--disabled { color: var(--text-dim); cursor: not-allowed; }
.media-sidebar-action--disabled:hover { background: var(--panel); }

.media-share-row { display: flex; justify-content: center; }
.media-share-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: 14px;
}
.media-share-btn:hover { border-color: var(--text-dim); color: var(--text); }

.media-histogram-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 12px 12px;
  background: var(--panel);
}
.media-histogram__chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3px;
  height: 46px;
}
.media-histogram__bar { flex: 1; background: var(--red); border-radius: 2px 2px 0 0; opacity: .75; min-height: 3px; }
.media-histogram__foot { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: 12px; color: #ffd76a; }
.media-histogram__avg { font-family: var(--font-display); font-size: 16px; }
.media-histogram__count { color: var(--text-dim); font-size: 11px; margin-left: 2px; }
.media-stats-box__counts { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-dim); }
.media-stats-box__counts b { color: var(--text); }

/* ---- right column: title, overview, seasons, reviews, comments ---- */
.media-main { min-width: 0; padding-top: 4px; }
.media-title {
  font-family: var(--font-display);
  font-size: 32px;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
/* Shown for games only, when a same-titled game exists elsewhere in IGDB
   (e.g. two different games both called "Routine") - a plain year makes it
   obvious at a glance which one this page is. */
.media-title__year { color: var(--text-dim); font-size: 22px; letter-spacing: 0; }
.media-meta-line { color: var(--text-dim); font-size: 13.5px; margin-bottom: 10px; }
.media-genres { display: flex; flex-wrap: wrap; gap: 6px; }
.media-genre-chip {
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
}
.media-overview { margin-top: 18px; line-height: 1.6; color: var(--text); font-size: 14px; max-width: 680px; }

/* ==================== media.html-only Letterboxd-style page shell
   (mp-* prefix - deliberately separate from the .media-* classes above,
   which game.html's own detail page also depends on and must keep working
   unchanged). Full-bleed backdrop, poster overlapping its bottom edge, a
   real 3-column layout (poster / title+tabs+cast / action sidebar) instead
   of the old 2-column poster+everything-stacked-in-one-column layout -
   matches the reference Letterboxd film page. Everything BELOW this block
   (seasons, episodes, reviews, comments) is untouched and still shared. ==================== */
.media-page { font-family: var(--font-graphik); }

.mp-hero {
  position: relative;
  min-height: 420px;
  background: #0a0a0b radial-gradient(ellipse at 30% 0%, rgba(179,16,29,0.35), transparent 60%);
  background-size: cover;
  background-position: center 20%;
}
.mp-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0.15) 55%, var(--bg) 100%);
}
.mp-layout {
  display: grid;
  grid-template-columns: 230px 1fr 260px;
  gap: 32px;
  margin-top: -190px;
  position: relative;
  z-index: 2;
  padding-bottom: 70px;
  align-items: start;
}
@media (max-width: 980px) {
  .mp-layout { grid-template-columns: 200px 1fr; }
  .mp-sidebar-col { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .mp-layout { grid-template-columns: 1fr; margin-top: -110px; }
  .mp-poster-col { max-width: 180px; }
}

.mp-poster-col { display: flex; flex-direction: column; gap: 12px; }
.mp-poster {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt);
  box-shadow: 0 16px 34px rgba(0,0,0,0.55);
}
.mp-poster--empty { display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: .5; }
.mp-poster-stats { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 12.5px; color: var(--text-dim); }
.mp-poster-stat { display: flex; align-items: center; gap: 5px; }
.mp-poster-stat b { color: var(--text); font-weight: 700; }

.mp-main { min-width: 0; padding-top: 26px; }
.mp-title {
  font-family: var(--font-tiempos);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--text);
}
.mp-title__year { font-weight: 400; color: var(--text-dim); font-size: 24px; }
.mp-directed-by { font-size: 14px; color: var(--text-dim); margin-bottom: 12px; }
.mp-directed-by__name { color: var(--text); font-weight: 600; }
.mp-tagline { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); font-style: italic; margin-bottom: 14px; }

.mp-tabs {
  display: flex;
  gap: 4px;
  margin-top: 28px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.mp-tab {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-graphik);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 10px 14px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.mp-tab:hover { color: var(--text); }
.mp-tab--active { color: var(--text); }
.mp-tab--active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  background: var(--red-bright);
}
.mp-tab-panel { padding: 18px 0 4px; }
.mp-tab-empty { color: var(--text-dim); font-size: 13px; font-style: italic; }

.mp-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-chip {
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: default;
}
.mp-crew-group { margin-bottom: 16px; }
.mp-crew-group:last-child { margin-bottom: 0; }
.mp-crew-group__job { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin-bottom: 8px; }
.mp-details-list { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.mp-details-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.mp-details-row__label { color: var(--text-dim); }
.mp-details-row__value { color: var(--text); font-weight: 600; text-align: right; }

/* ---- right sidebar: status icons, rate, action list, share, histogram -
   redone to match Letterboxd's actual sidebar exactly: no boxed card, no
   red brand accent - plain icons on the page background, Letterboxd's own
   signature green (var(--lb-green)) for every active/filled state, thin
   barely-there divider lines between rows instead of bordered buttons. ---- */
.mp-sidebar-col { display: flex; flex-direction: column; gap: 0; padding-top: 26px; }
.mp-sidebar-col--show { padding-top: 200px; }
@media (max-width: 980px) {
  .mp-sidebar-col--show { padding-top: 26px; }
}
.mp-sidebar-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mp-icon-row { display: flex; justify-content: center; gap: 26px; padding-bottom: 16px; }
.mp-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .15s;
}
.mp-icon-btn:hover { color: var(--text); }
.mp-icon-btn--active { color: var(--lb-green); }
.mp-icon-btn--active:hover { color: var(--lb-green); }
/* Like is its own thing, red like the heart itself rather than the same
   green Watched/Watchlist use - matches how Letterboxd's own like heart
   turns red/pink when liked instead of the site's green accent. */
.mp-icon-btn--liked { color: var(--red-bright); }
.mp-icon-btn--liked:hover { color: var(--red-bright); }
.mp-icon-btn__icon { display: flex; align-items: center; justify-content: center; height: 22px; }
.mp-icon-btn__label { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.mp-icon-row--secondary { gap: 18px; padding-bottom: 14px; margin-top: -10px; }
.mp-icon-row--secondary .mp-icon-btn__icon { height: 16px; }
.mp-icon-row--secondary .mp-icon-btn__label { font-size: 9px; }

.mp-rate-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); text-align: center; padding-top: 14px; border-top: 1px solid var(--border); }

/* 5-star, half-star-precision picker (Letterboxd's own rating widget) - 5
   real SVG stars (not text glyphs, which rendered lumpy/uneven at large
   sizes and never quite lined up with their click zones) each with a grey
   background copy and a green foreground copy clipped via clip-path to 0,
   50, or 100% - clip-path scales crisply at any size and animates smoothly
   on hover, which a font glyph can't. Sized big and roomy, matching
   Letterboxd's own large rating widget. Used only on media.html's two
   rating UIs (sidebar quick-rate + the log modal) - the small 10-discrete-
   star .fp-rate-star buttons elsewhere on the site (game.html, profile
   ratings) are untouched. */
.mp-star-picker {
  display: inline-flex;
  align-self: center; /* shrink-wraps to the star row's own width instead of
    stretching full-width like a block flex item would (this sits inside
    flex-column parents). */
  gap: 4px;
  padding: 10px 0 18px;
}
.mp-star {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
}
.mp-star__bg, .mp-star__fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mp-star__bg { fill: var(--border); }
.mp-star__fg { fill: var(--lb-green); transition: clip-path .08s ease-out; }
.mp-star__hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.mp-star__hit--half { left: 0; }
.mp-star__hit--full { right: 0; }
@media (max-width: 700px) {
  .mp-star { width: 30px; height: 30px; }
}
.fp-rate-modal__left .mp-star { width: 40px; height: 40px; }

.mp-sidebar-actions { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.mp-sidebar-action {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-align: center;
  padding: 13px 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-graphik);
}
.mp-sidebar-action:hover { color: var(--lb-green); }
.mp-sidebar-action--disabled { color: var(--text-dim); cursor: not-allowed; }
.mp-sidebar-action--disabled:hover { color: var(--text-dim); }
.mp-share-row { display: flex; justify-content: center; padding: 16px 0 4px; }
.mp-share-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 20px;
  padding: 7px 22px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: var(--font-graphik);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mp-share-btn:hover { border-color: var(--lb-green); color: var(--lb-green); }

.mp-histogram-box {
  border-top: 1px solid var(--border);
  padding: 20px 0 0;
}
.mp-histogram__chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 3px; height: 46px; }
.mp-histogram__bar { flex: 1; background: var(--lb-green); border-radius: 1px; opacity: .55; min-height: 3px; }
.mp-histogram__foot { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.mp-histogram__foot span:first-child { color: var(--lb-green); }
.mp-histogram__avg { font-family: var(--font-display); font-size: 16px; color: var(--text); }
.mp-histogram__count { color: var(--text-dim); font-size: 11px; margin-left: 2px; }
.mp-stats-box__counts { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-dim); }
.mp-stats-box__counts b { color: var(--text); }
.mp-login-hint { font-size: 12px; color: var(--text-dim); text-align: center; }

/* ====================================================================
   MANGA PAGE - a literal AniList clone (anilist.co/manga/...), scoped
   entirely under body.mp-manga so it never touches Movies/Shows/Anime,
   which keep the Letterboxd-style .mp-* system above completely
   untouched. Real design tokens pulled directly from AniList's own live
   page via computed-style inspection: navy body background rgb(11,22,34),
   Roboto everywhere, dark tag pills rgb(21,31,46), 208px sidebar, and the
   Status Distribution's exact 4-color scheme (Current green/Planning
   blue/Paused purple/Completed pink) plus a 5th (red) for Dropped, which
   AniList's own chart doesn't track but this site's real data does.
   ==================================================================== */
body.mp-manga {
  background: #0b1622;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
body.mp-manga .media-page { font-family: inherit; }
/* The site's own red-brand header stays as-is (it's shared chrome across
   every page, not part of the manga page itself) but gets a touch of
   translucency here too, same treatment already used on the profile page,
   so it reads closer to AniList's own glassy nav sitting over the banner. */
body.mp-manga header.masthead {
  background: rgba(11, 22, 34, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mp-manga-hero { min-height: 300px; background-color: #0b1622; }
.mp-manga-hero .mp-hero__scrim { background: linear-gradient(180deg, rgba(11,22,34,0) 0%, rgba(11,22,34,0.25) 55%, #0b1622 100%); }

.mp-manga-headrow {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  margin-top: -140px;
  position: relative;
  z-index: 2;
}
.mp-manga-cover {
  flex-shrink: 0;
  width: 178px;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: #17222f;
  box-shadow: 0 16px 34px rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(255,255,255,0.35);
}
.mp-manga-headinfo { flex: 1; min-width: 0; padding-bottom: 4px; }
.mp-manga-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: #fff;
}
.mp-manga-title__year { font-weight: 400; color: #9fadbd; font-size: 20px; }
.mp-manga-headinfo__row { display: flex; gap: 24px; align-items: flex-start; margin-top: 6px; }
.mp-manga-description {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #cbd4dc;
  max-width: 760px;
}
.mp-manga-description--empty { color: #6b7684; font-style: italic; }

/* ---- action row: AniList's own blue "Add to List" dropdown + heart ---- */
.mp-manga-actions-row { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mp-manga-add { position: relative; }
.mp-manga-add-btn {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #02a9ff;
  border: none;
  border-radius: 3px;
  padding: 10px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.mp-manga-add-btn:hover { background: #1cb4ff; }
.mp-manga-add-btn--set { background: #151f2e; border: 1px solid #2c3b4d; color: #02a9ff; }
.mp-manga-add-btn__caret { font-size: 10px; opacity: .8; }
.mp-manga-add-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #151f2e;
  border: 1px solid #253345;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  padding: 6px;
  z-index: 20;
  flex-direction: column;
}
.mp-manga-add--open .mp-manga-add-menu { display: flex; }
.mp-manga-add-menu__item.mp-icon-btn {
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: #cbd4dc;
  gap: 0;
}
.mp-manga-add-menu__item.mp-icon-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.mp-manga-add-menu__item.mp-icon-btn .mp-icon-btn__icon { display: none; }
.mp-manga-add-menu__item.mp-icon-btn .mp-icon-btn__label { font-size: 13px; text-transform: none; letter-spacing: 0; }
.mp-manga-add-menu__item.mp-icon-btn--active { color: #02a9ff; font-weight: 700; }
.mp-manga-actions-row .mp-icon-btn#media-like-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #253345;
  background: #151f2e;
  gap: 0;
}
.mp-manga-actions-row .mp-icon-btn#media-like-btn .mp-icon-btn__label { display: none; }
.mp-manga-actions-row .mp-icon-btn#media-like-btn:hover { border-color: #f779a4; color: #f779a4; }
.mp-manga-actions-row .mp-icon-btn--liked#media-like-btn { border-color: #f779a4; color: #f779a4; }

/* ---- two-column body: 208px sidebar (AniList's own real measured width)
   + wide main column ---- */
.mp-manga-body { display: flex; gap: 40px; align-items: flex-start; padding: 34px 0 70px; }
.mp-manga-sidebar { width: 208px; flex-shrink: 0; }
.mp-manga-main { flex: 1; min-width: 0; }
@media (max-width: 860px) {
  .mp-manga-body { flex-direction: column; }
  .mp-manga-sidebar { width: 100%; }
  .mp-manga-headrow { flex-direction: column; align-items: flex-start; margin-top: -80px; }
  .mp-manga-headinfo__row { flex-direction: column; }
}

.mp-manga-sidebar-section { border-top: 1px solid #1e2b3a; padding: 16px 0; }
.mp-manga-sidebar-section:first-child { border-top: none; padding-top: 0; }
.mp-manga-stat-row { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; padding-bottom: 12px; }
.mp-manga-stat-row:last-child { padding-bottom: 0; }
.mp-manga-stat-row__label { color: #6b7684; font-weight: 700; }
.mp-manga-stat-row__value { color: #cbd4dc; }
.mp-manga-sidebar-heading { font-size: 12.5px; font-weight: 700; color: #6b7684; margin-bottom: 10px; }

/* real AniList tag pill values: bg rgb(21,31,46), color rgb(159,173,189),
   13px, radius 3px, padding 8px 10px - but rendered here as a labeled
   percentage bar (AniList's own real Tags section shows a fill bar under
   each tag name, not a bare pill) using real per-title tag rank data. */
.mp-manga-tag-list { display: flex; flex-direction: column; gap: 8px; }
.mp-manga-tag {
  position: relative;
  background: rgb(21,31,46);
  border-radius: 3px;
  padding: 8px 10px;
  font-size: 12px;
  color: rgb(159,173,189);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.mp-manga-tag__bar { position: absolute; inset: 0; background: rgba(2,169,255,0.18); z-index: 0; }
.mp-manga-tag__name, .mp-manga-tag__pct { position: relative; z-index: 1; }
.mp-manga-tag__pct { color: #6b7684; flex-shrink: 0; }

.mp-manga-sidebar-buttons { display: flex; flex-direction: column; gap: 8px; }
.mp-manga-sidebar-btn {
  background: #151f2e;
  border: 1px solid #253345;
  color: #cbd4dc;
  border-radius: 4px;
  padding: 9px 10px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
}
.mp-manga-sidebar-btn:hover { border-color: #02a9ff; color: #02a9ff; }

/* ---- main column sections (Relations/Characters/Staff/Distributions/
   Trailer/Recommendations) ---- */
.mp-manga-section { margin-bottom: 34px; }
.mp-manga-section__title {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.mp-manga-description ~ .mp-manga-section:first-of-type { margin-top: 0; }

.mp-manga-poster-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.mp-manga-poster-card {
  flex-shrink: 0;
  width: 110px;
  text-decoration: none;
  display: block;
  position: relative;
}
.mp-manga-poster-card__art {
  width: 110px;
  aspect-ratio: 2 / 3;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  background-color: #17222f;
}
.mp-manga-poster-card__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  background: rgba(11,22,34,0.85);
  color: #cbd4dc;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 3px 6px;
  border-radius: 3px;
}
.mp-manga-poster-card__title { font-size: 11.5px; color: #cbd4dc; margin-top: 6px; line-height: 1.3; }
.mp-manga-poster-card:hover .mp-manga-poster-card__title { color: #02a9ff; }

.mp-manga-people-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.mp-manga-person { display: flex; align-items: center; gap: 10px; }
.mp-manga-person__art {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #17222f;
  flex-shrink: 0;
}
.mp-manga-person__info { min-width: 0; }
.mp-manga-person__name { font-size: 13px; color: #cbd4dc; font-weight: 500; }
.mp-manga-person__role { font-size: 11.5px; color: #6b7684; margin-top: 2px; }

.mp-manga-score-chart { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.mp-manga-score-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.mp-manga-score-bar-col__count { font-size: 10.5px; color: #6b7684; margin-bottom: 4px; }
.mp-manga-score-bar-col__bar { width: 100%; max-width: 26px; background: #02a9ff; border-radius: 2px 2px 0 0; min-height: 3px; }
.mp-manga-score-bar-col__label { font-size: 10.5px; color: #6b7684; margin-top: 6px; }
.mp-manga-score-chart__foot { font-size: 12px; color: #6b7684; margin-top: 12px; }

.mp-manga-video { position: relative; padding-top: 56.25%; border-radius: 6px; overflow: hidden; background: #000; }
.mp-manga-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

body.mp-manga .media-section-title { color: #6b7684; font-family: 'Roboto', sans-serif; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 15px; }
body.mp-manga .media-overview { color: #cbd4dc; }
body.mp-manga .media-review-row__author { color: #fff; }
body.mp-manga .media-review-row__author:hover { color: #02a9ff; }
body.mp-manga .media-review-row__text { color: #cbd4dc; }
body.mp-manga .fp-comment__text { color: #cbd4dc; }
body.mp-manga .media-owner-spotlight { margin: 10px 0 6px; }

.mp-status-dist-box__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mp-status-chip {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}
.mp-status-chip b { font-weight: 700; }
.mp-status-chip--reading   { border-color: #68d639; color: #68d639; }
.mp-status-chip--planning  { border-color: #02a9ff; color: #02a9ff; }
.mp-status-chip--paused    { border-color: #9256f3; color: #9256f3; }
.mp-status-chip--completed { border-color: #f779a4; color: #f779a4; }
.mp-status-chip--dropped   { border-color: var(--red-bright); color: var(--red-bright); }
.mp-status-dist-box__bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}
.mp-status-dist-box__seg { height: 100%; }
.mp-status-dist-box__seg--reading   { background: #68d639; }
.mp-status-dist-box__seg--planning  { background: #02a9ff; }
.mp-status-dist-box__seg--paused    { background: #9256f3; }
.mp-status-dist-box__seg--completed { background: #f779a4; }
.mp-status-dist-box__seg--dropped   { background: var(--red-bright); }

/* ====================================================================
   SHOW PAGE - re-themed to match Serializd (serializd.com/show/...),
   scoped entirely under body.mp-serializd so Movies - which still share
   this exact same mp-layout/mp-poster-col/mp-sidebar-col render path -
   keep their original Letterboxd look completely untouched. Real tokens
   pulled from Serializd's own live page: near-black body rgb(13,15,18),
   signature teal accent rgb(13,148,136), glass sidebar card
   rgba(30,35,41,0.6) with 10px radius, Roboto throughout. The existing
   .mp-layout 3-column grid (poster / seasons+tabs / stats sidebar) is
   left completely alone structurally - it already matches Serializd's
   own layout, so this is a re-theme, not a rebuild. ==================== */
body.mp-serializd {
  background: rgb(13, 15, 18);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
body.mp-serializd .media-page { font-family: inherit; }
body.mp-serializd header.masthead {
  background: rgba(13, 15, 18, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Decorative large rotated title text along the banner's right edge -
   Serializd's own distinctive signature touch on every show page. */
.mp-hero--serializd { position: relative; overflow: hidden; }
.mp-hero__title-mark {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  white-space: nowrap;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: rgba(255,255,255,0.06);
  letter-spacing: 1px;
  pointer-events: none;
}

body.mp-serializd .mp-title { font-family: 'Roboto', sans-serif; color: #fff; }
body.mp-serializd .mp-title__year { color: #8a96a3; }
body.mp-serializd .media-overview { color: #cbd4dc; }
body.mp-serializd .mp-directed-by,
body.mp-serializd .mp-tagline { color: #8a96a3; }
/* Real measured color of Serializd's own meta line (year . seasons .
   genres . status), sitting directly under the title. */
body.mp-serializd .media-meta-line { color: rgb(179, 182, 180); font-size: 16px; margin-bottom: 8px; font-family: 'Roboto', sans-serif; }
body.mp-serializd .media-section-title { color: #8a96a3; font-family: 'Roboto', sans-serif; text-transform: none; letter-spacing: 0; font-weight: 700; }

/* Tabs - teal underline instead of the site's red brand accent */
/* Real measured proportions from Serializd's own live page (getBoundingClientRect
   on the poster image and Stats card): poster ~283px wide at a 2:3 ratio
   (same ratio ours already used, just narrower), Stats sidebar column
   ~387px wide - nearly double our original 260px. Scoped to .mp-layout
   under body.mp-serializd only, so Movie pages (which share the exact
   same grid) keep their original 230/260 proportions untouched. */
body.mp-serializd .mp-layout { grid-template-columns: 290px 1fr 380px; gap: 40px; }
@media (max-width: 1150px) {
  body.mp-serializd .mp-layout { grid-template-columns: 260px 1fr 320px; gap: 28px; }
}
@media (max-width: 980px) {
  body.mp-serializd .mp-layout { grid-template-columns: 220px 1fr; }
}

body.mp-serializd .mp-tab { font-family: 'Roboto', sans-serif; }
body.mp-serializd .mp-tab--active { color: #fff; }
body.mp-serializd .mp-tab--active::after { background: rgb(13, 148, 136); }
body.mp-serializd .mp-tab:hover { color: #fff; }
/* Real Serializd's tab row (Home/Reviews/Lists/Media/Cast-Crew/Similar)
   always sits on one clean line with no scrollbar and no wrap. Ours (Cast/
   Crew/Details/Genres/Releases) is a different, longer label set, and once
   the sidebar column widened to 380px for the Stats card above, the main
   column got narrow enough that the tab row no longer fit: first it showed
   an actual scrollbar (wrong - Serializd's never scrolls), then a wrap fix
   left "RELEASES" orphaned alone on its own second line (also wrong -
   still doesn't read as one tidy row). Real fix is reclaiming enough width
   for all 5 tabs to sit on one line the way Serializd's 6 do: a touch
   tighter tab padding/font plus a few px back from the sidebar into the
   main column. */
body.mp-serializd .mp-layout { grid-template-columns: 290px 1fr 350px; }
body.mp-serializd .mp-tabs { overflow-x: visible; flex-wrap: nowrap; gap: 0; }
body.mp-serializd .mp-tab { padding: 10px 8px; font-size: 12px; letter-spacing: .3px; }

/* Sidebar action icons / stars / histogram - teal instead of Letterboxd
   green, all scoped so the shared .mp-icon-btn etc classes on Movie pages
   (still --lb-green) are untouched. */
body.mp-serializd .mp-icon-btn--active,
body.mp-serializd .mp-icon-btn--active:hover { color: rgb(13, 148, 136); }
body.mp-serializd .mp-star__fg { fill: rgb(13, 148, 136); }
body.mp-serializd .mp-sidebar-action:hover { color: rgb(13, 148, 136); }
body.mp-serializd .mp-share-btn:hover { border-color: rgb(13, 148, 136); color: rgb(13, 148, 136); }
body.mp-serializd .mp-histogram__bar { background: rgb(13, 148, 136); }
body.mp-serializd .mp-histogram__foot span:first-child { color: rgb(13, 148, 136); }
body.mp-serializd .mp-sidebar-action,
body.mp-serializd .mp-rate-label,
body.mp-serializd .mp-login-hint { font-family: 'Roboto', sans-serif; }

/* "Stats" glass card wrapping the whole sidebar-col on show pages -
   Serializd's own real card styling (bg rgba(30,35,41,0.6), 10px radius). */
.mp-stats-card {
  background: rgba(30, 35, 41, 0.6);
  border-radius: 10px;
  padding: 16px 18px 6px;
  backdrop-filter: blur(6px);
}
.mp-stats-card__title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 4px;
}

/* Seasons list - rounded glass-card rows matching Serializd's own season
   list exactly, scoped so this doesn't touch anything else on the site
   (.media-season-row only ever renders on show pages already). */
body.mp-serializd .media-season-row {
  background: rgba(30, 35, 41, 0.6);
  border: none;
  border-radius: 10px;
}
body.mp-serializd .media-season-row:hover { background: rgba(38, 44, 51, 0.75); }
body.mp-serializd .media-season-row__name { color: #fff; font-family: 'Roboto', sans-serif; }
body.mp-serializd .media-season-row__sub { color: #8a96a3; }
body.mp-serializd .media-season-row__watched input { accent-color: rgb(13, 148, 136); }
body.mp-serializd .media-season-header__name,
body.mp-serializd .media-back-link { font-family: 'Roboto', sans-serif; }
body.mp-serializd .media-back-link:hover,
body.mp-serializd .media-episode-row:hover { color: rgb(13, 148, 136); }
body.mp-serializd .media-episode-row__watched input { accent-color: rgb(13, 148, 136); }

/* Reviews + comments text colors */
body.mp-serializd .media-review-row__author { color: #fff; }
body.mp-serializd .media-review-row__author:hover { color: rgb(13, 148, 136); }
body.mp-serializd .media-review-row__text,
body.mp-serializd .fp-comment__text { color: #cbd4dc; }
body.mp-serializd .fp-comment__like-btn--active { color: rgb(13, 148, 136); }

/* ===== Serializd sidebar action list =====
   Real Serializd doesn't use a horizontal icon row + separate text button
   list - it's ONE vertical list of icon+label rows (status toggles and
   one-off actions mixed together), each row ~49px tall, confirmed via
   getBoundingClientRect() on the live page. Reuses the exact same
   .mp-icon-btn markup/class the movie icon row already renders (built by
   the same statusIconBtnHtml()/likeIconBtnHtml() JS helpers) - only this
   wrapper's layout differs, so wireIconRow()'s click/active-state JS needs
   no changes at all. */
.mp-serializd-actions {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}
.mp-serializd-actions .mp-icon-btn {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: 'Roboto', sans-serif;
}
.mp-serializd-actions .mp-icon-btn:last-child { border-bottom: none; }
.mp-serializd-actions .mp-icon-btn__icon { height: auto; width: 20px; flex-shrink: 0; }
.mp-serializd-actions .mp-icon-btn__label {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}
.mp-serializd-actions .mp-icon-btn:disabled { opacity: .45; cursor: not-allowed; }

/* "Start watching" next-episode card - real still image / title / S##E## ·
   date · runtime, plus a watched-toggle styled as a circular icon button
   (reuses the same input[data-episode-num] checkbox wireEpisodeWatchedCheckboxes()
   already wires elsewhere - just restyled here to look like a round icon
   button instead of a checkbox). No fabricated per-episode rating badge -
   we don't track those, so unlike Serializd's own 4.22 star chip, this is
   left out entirely rather than faked. */
.media-start-watching {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(30, 35, 41, 0.6);
  border-radius: 10px;
  padding: 12px;
}
.media-start-watching__still {
  width: 160px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--panel);
  display: block;
}
.media-start-watching__still--empty { opacity: .3; }
.media-start-watching__body { flex: 1; min-width: 0; text-decoration: none; }
.media-start-watching__name { font-weight: 700; font-size: 15px; color: #fff; font-family: 'Roboto', sans-serif; }
.media-start-watching__sub { font-size: 12.5px; color: #8a96a3; margin-top: 4px; }
.media-start-watching__actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.media-start-watching__icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #cbd4dc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
.media-start-watching__icon-btn input[type="checkbox"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.media-start-watching__icon-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.media-start-watching__icon-btn--active { color: rgb(13, 148, 136); background: rgba(13, 148, 136, 0.15); }

/* "Details" card - persistent key/value card (Seasons/Episodes/Episode run
   time/Premiere/Last aired/Status/Genres), same glass style as .mp-stats-card. */
.media-details-card {
  background: rgba(30, 35, 41, 0.6);
  border-radius: 10px;
  padding: 4px 18px 6px;
}
.media-details-card__title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  padding: 16px 0 4px;
}
.media-details-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 13.5px;
}
.media-details-row__label { color: #8a96a3; font-family: 'Roboto', sans-serif; }
.media-details-row__value { color: #fff; font-family: 'Roboto', sans-serif; text-align: right; }
.media-details-row__value--pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.media-details-pill {
  background: rgba(255,255,255,0.08);
  color: #cbd4dc;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
}
@media (max-width: 560px) {
  .media-start-watching { flex-wrap: wrap; }
  .media-start-watching__still { width: 100%; }
}

.media-section-title {
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 30px 0 12px;
  color: var(--text-dim);
}

.media-seasons { display: flex; flex-direction: column; gap: 8px; }
.media-season-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  padding: 4px;
}
.media-season-row:hover { border-color: var(--text-dim); }
.media-season-row__link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--text);
}
.media-season-row__art {
  width: 40px;
  aspect-ratio: 2 / 3;
  flex-shrink: 0;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: var(--panel);
}
.media-season-row__art--empty { opacity: .3; }
.media-season-row__info { flex: 1; min-width: 0; }
.media-season-row__name { font-weight: 600; font-size: 13.5px; }
.media-season-row__sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.media-season-row__watched {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 6px 10px 6px 0;
}
.media-season-row__watched input { width: 15px; height: 15px; accent-color: var(--red); cursor: pointer; }
.media-season-row__watched input:disabled { cursor: not-allowed; opacity: .5; }

/* Back link + season header, shared by the season and episode sub-pages -
   these are real navigated-to pages now (?season=N / &episode=M in the
   URL), not an inline accordion, so each gets its own simple header. */
.media-back-link {
  display: inline-block;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 12.5px;
  margin-bottom: 14px;
}
.media-back-link:hover { color: var(--text); }
.media-season-header { display: flex; gap: 18px; align-items: flex-end; margin-bottom: 6px; }
.media-season-header__art {
  width: 100px;
  aspect-ratio: 2 / 3;
  flex-shrink: 0;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
}

.media-episode-list { display: flex; flex-direction: column; gap: 6px; }
.media-episode-list--page { margin-top: 4px; }
.media-episode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  padding: 4px;
}
.media-episode-row:hover { border-color: var(--text-dim); }
.media-episode-row__link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 12.5px;
}
.media-episode-row__still {
  width: 64px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: var(--panel);
}
.media-episode-row__num { color: var(--text-dim); font-family: var(--font-display); flex-shrink: 0; width: 30px; }
.media-episode-row__body { min-width: 0; flex: 1; }
.media-episode-row__name { color: var(--text); }
.media-episode-row__date { color: var(--text-dim); font-size: 11px; margin-top: 1px; }
.media-episode-row__watched {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 6px 10px 6px 0;
}
.media-episode-row__watched input { width: 14px; height: 14px; accent-color: var(--red); cursor: pointer; }
.media-episode-row__watched input:disabled { cursor: not-allowed; opacity: .5; }

/* Single episode page */
.media-episode-page__still {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.media-episode-page__watched-btn { margin-top: 18px; width: auto; padding: 10px 20px; }
.media-overview--empty { color: var(--text-dim); font-style: italic; }

.media-reviews-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.media-review-row { display: flex; gap: 10px; padding: 4px; border-radius: 8px; transition: background .3s; }
.media-review-row--flash { background: rgba(179,16,29,0.14); }
.media-review-row__body { min-width: 0; flex: 1; }
.media-review-row__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.media-review-row__author { font-weight: 700; color: var(--text); text-decoration: none; }
.media-review-row__author:hover { color: var(--red-bright); }
.media-review-row__text { color: var(--text); line-height: 1.5; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.media-review-row__likes { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* Search result rows / grid cards became real <a> links so search results
   and Watched/Watchlist tiles click straight through to media.html - reset
   default anchor styling so they still look like plain rows/cards. */
.fp-media-search__row { text-decoration: none; color: var(--text); display: flex; }
.fp-game-card { text-decoration: none; color: var(--text); display: block; }


/* Owner spotlight on media.html - shown when arrived via a specific
   resident's profile (?owner=), spotlighting THEIR status/rating/review
   above the general reviews list. */
.media-owner-spotlight {
  display: flex;
  gap: 10px;
  margin: 14px 0 20px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.media-owner-spotlight__body { min-width: 0; flex: 1; }
.media-owner-spotlight__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.media-owner-spotlight__status { font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px; }

/* ---------- game.html: source badge, play log, rating box ---------- */

/* Platform-source pill under the poster (Discord/Steam/Xbox/Steam+Xbox) -
   same rounded-pill language as .media-genre-chip / .media-owner-spotlight__status. */
.game-source-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
  background: var(--panel);
}
.game-source-badge svg { width: 13px; height: 13px; }

/* Day-by-day play log - a plain horizontal bar-list (Steam/Discord activity
   graphs use the same idea) rather than a full chart library, since this
   only ever needs to show up to ~30 rows. */
.game-log-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--panel);
  margin-top: 6px;
  margin-bottom: 20px;
}
.game-log-note { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.5; }
.game-log-empty { font-size: 13px; color: var(--text-dim); }
.game-log-list { display: flex; flex-direction: column; gap: 7px; max-height: 340px; overflow-y: auto; }
.game-log-row { display: flex; align-items: center; gap: 10px; }
.game-log-row__date { width: 62px; flex-shrink: 0; font-size: 11.5px; color: var(--text-dim); }
.game-log-row__bar-track { flex: 1; height: 8px; background: var(--bg-alt); border-radius: 4px; overflow: hidden; }
.game-log-row__bar { display: block; height: 100%; background: var(--red); border-radius: 4px; opacity: .85; }
.game-log-row__mins { width: 54px; flex-shrink: 0; text-align: right; font-size: 11.5px; color: var(--text); }

/* Owner rate/review box + read-only rating block for visitors - reuses the
   exact same fp-rate-modal__* input/typography classes the full-profile
   rating modal already defined, just laid out inline on the page instead
   of inside a modal panel. */
.game-rate-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--panel);
  margin-bottom: 20px;
}
.game-rate-box .fp-rate-modal__review { margin-top: 10px; width: 100%; }
.game-rate-box .fp-like-btn { margin-top: 6px; }

/* ==================== Game detail page (game.html) - real Backloggd theme.
   Colors/radii/font below were pulled live off backloggd.com via
   getComputedStyle (not guessed): page bg #16181c, card bg #242832 (8px
   radius), pink accent #ea377a, body text #cbd4dc, Roboto/Noto Sans
   throughout. Everything is scoped under #game-root.gp-page so movies/shows
   (media.html's separate Letterboxd-green mp-* system) are untouched. ==================== */
/* #game-related-root shares this same theme block - it's the "View All"
   full-grid page for one Related Games category (game-related.html),
   reached only via a link from this page, so it needs the identical
   Backloggd-matched palette/font rather than falling back to the site's
   default serif body font. */
#game-root.gp-page, #game-related-root.gp-page, #publisher-root.gp-page {
  --gp-bg-page: #16181c;
  --gp-bg-card: #242832;
  --gp-bg-card-pink: #302432;
  --gp-accent: #ea377a;
  --gp-accent-bright: #ff5c9a;
  --gp-text-title: #ffffff;
  --gp-text-body: #cbd4dc;
  --gp-text-dim: #838ea3;
  --gp-border: rgba(255,255,255,0.07);
  --gp-font: 'Roboto', 'Noto Sans', -apple-system, sans-serif;
  display: block;
  background: var(--gp-bg-page);
  color: var(--gp-text-body);
  font-family: var(--gp-font);
  margin-top: -1px; /* butt right up against the header, no seam */
}
#game-root.gp-page .media-section-title { color: var(--gp-text-dim); font-family: var(--gp-font); text-transform: uppercase; letter-spacing: .5px; font-size: 13px; font-weight: 700; }
#game-root.gp-page .media-review-row__author,
#game-root.gp-page .fp-comment__author { color: var(--gp-text-title); }
#game-root.gp-page .media-review-row__text,
#game-root.gp-page .fp-comment__text,
#game-root.gp-page .fp-comment-empty,
#game-root.gp-page .game-log-empty,
#game-root.gp-page .game-log-note { color: var(--gp-text-dim); }
#game-root.gp-page a { color: inherit; }
/* Save/Use-this/Continue/Post buttons throughout this page reuse the site's
   plain .btn--red / .btn--ghost classes - repainting them here rather than
   touching every call site keeps the pink theme consistent without a
   second button-component system. */
#game-root.gp-page .btn--red { background: var(--gp-accent); border-color: var(--gp-accent); font-family: var(--gp-font); border-radius: 4px; }
#game-root.gp-page .btn--red:hover { background: var(--gp-accent-bright); border-color: var(--gp-accent-bright); }
#game-root.gp-page .btn--ghost { background: var(--gp-bg-card); border-color: var(--gp-border); color: var(--gp-text-body); font-family: var(--gp-font); border-radius: 4px; }
#game-root.gp-page .btn--ghost:hover { border-color: var(--gp-accent); color: var(--gp-accent-bright); }
/* Log/review modal (fp-rate-modal - shared shell with full-profile.html)
   gets the same pink-on-navy treatment while it's open on this page. */
#game-root.gp-page .fp-rate-modal__panel { background: var(--gp-bg-page); border-color: var(--gp-border); }
#game-root.gp-page .fp-rate-modal__title { color: var(--gp-text-title); font-family: var(--gp-font); }
#game-root.gp-page .fp-rate-star--filled { color: var(--gp-accent); }
#game-root.gp-page .fp-rate-modal__stars-label,
#game-root.gp-page .fp-rate-modal__review-label { color: var(--gp-text-dim); font-family: var(--gp-font); }
#game-root.gp-page .fp-rate-modal__review { background: var(--gp-bg-card); border-color: var(--gp-border); color: var(--gp-text-body); font-family: var(--gp-font); }
#game-root.gp-page .fp-rate-modal__completionist { color: var(--gp-text-body); font-family: var(--gp-font); }

.gp-hero {
  position: relative;
  min-height: 300px;
  background: #0d0e11;
  background-size: cover;
  background-position: center 25%;
}
.gp-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,0.15) 0%, rgba(16,17,21,0.68) 55%, var(--gp-bg-page, #16181c) 96%);
}
.gp-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 32px;
  margin-top: -150px;
  position: relative;
  z-index: 2;
  padding-bottom: 70px;
  align-items: start;
}
@media (max-width: 860px) {
  .gp-layout { grid-template-columns: 1fr; margin-top: -70px; }
  .gp-poster-col { max-width: 220px; margin: 0 auto; }
  .gp-main { padding-top: 20px !important; }
}
.gp-poster-col { display: flex; flex-direction: column; gap: 10px; }
.gp-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--gp-bg-card, #242832);
  box-shadow: 0 16px 34px rgba(0,0,0,0.55);
  /* Backloggd keeps a soft ambient glow permanently under its detail-page
     cover (#game-profile .col-cover .game-cover, extracted live via
     getComputedStyle: box-shadow 0 0 20px 10px rgba(36,40,50,.37)) - on
     hover we deepen + tint that glow pink and lift the poster slightly,
     the same "card responds to you" feel their grid covers give via their
     .game-cover transition:filter .2s hover/focus rule. */
  transition: transform .25s cubic-bezier(.16,.8,.24,1), box-shadow .25s cubic-bezier(.16,.8,.24,1);
}
.gp-poster:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(0,0,0,0.6), 0 0 26px 4px rgba(234,55,122,0.25);
}
.gp-poster--empty { display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: .5; }
/* Poster is 230px wide (2:3 -> 345px tall) starting 150px up into a 300px
   hero; .gp-main's matching 150px push-down lands the title exactly at the
   hero's bottom edge - fully clear of the backdrop art no matter how busy
   or brightly-lit that art is, satisfying "poster fully visible, text
   clear of it" without depending on the scrim alone to make text legible. */
.gp-main { min-width: 0; padding-top: 150px; }

.gp-owner-link { font-size: 12.5px; color: var(--gp-text-dim); text-decoration: none; margin-top: 2px; }
.gp-owner-link:hover { color: var(--gp-accent); }

/* Pink "Log or review" button - the page's single most important action,
   full-width right under the poster, exactly like the reference. */
.gp-log-btn {
  display: block;
  width: 100%;
  background: var(--gp-accent);
  border: none;
  color: #fff;
  font-family: var(--gp-font);
  font-weight: 500;
  font-size: 14.5px;
  border-radius: 4px;
  padding: 11px 0;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gp-log-btn:hover { background: var(--gp-accent-bright); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(234,55,122,0.35); }
.gp-log-btn:active { transform: translateY(0); }
.gp-login-hint { font-size: 12px; color: var(--gp-text-dim); text-align: center; margin-bottom: 6px; }

/* Read-only 5-star rating readout under the log button (our ratings are
   1-10 internally; halves map naturally onto 5 whole/half stars). */
.gp-star-row { display: flex; justify-content: center; gap: 3px; padding: 4px 0; }
.gp-star { font-size: 24px; line-height: 1; color: #454b5c; }
.gp-star--filled, .gp-star--half { color: var(--gp-accent); }

/* Played/Playing/Backlog/Wishlist - four square icon buttons, dark card
   bg, exactly like Backloggd's row (theirs uses controller/play/grid/gift
   glyphs; ours are close analogues, not a literal asset copy). */
.gp-status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 6px; }
.gp-status-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--gp-bg-card);
  border: 1px solid transparent;
  color: var(--gp-text-dim);
  border-radius: 8px;
  padding: 9px 2px;
  cursor: pointer;
  /* Backloggd dims its inactive #log-status icons to opacity .5 and brings
     the current one to full opacity - we mirror that same "inactive fades,
     active pops" idea with our color/background swap, just made to
     actually animate between the two states instead of snapping. */
  opacity: .82;
  transition: color .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease, transform .15s ease;
}
.gp-status-icon-btn:hover { color: var(--gp-text-body); border-color: var(--gp-border); opacity: 1; transform: translateY(-1px); }
.gp-status-icon-btn--active { color: var(--gp-accent); border-color: var(--gp-accent); background: var(--gp-bg-card-pink); opacity: 1; }
.gp-status-icon-btn__icon { display: flex; align-items: center; justify-content: center; height: 20px; transition: transform .15s ease; }
.gp-status-icon-btn:active .gp-status-icon-btn__icon { transform: scale(.85); }
.gp-status-icon-btn__label { font-size: 8.5px; text-transform: uppercase; letter-spacing: .3px; }

/* "Change cover" / "Remove log" - full-width dark secondary buttons */
.gp-secondary-btn {
  display: block;
  width: 100%;
  background: var(--gp-bg-card);
  border: 1px solid var(--gp-border);
  color: var(--gp-text-body);
  font-family: var(--gp-font);
  font-size: 13px;
  border-radius: 4px;
  padding: 9px 0;
  cursor: pointer;
  text-align: center;
  margin-top: 2px;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.gp-secondary-btn:hover { border-color: var(--gp-accent); color: var(--gp-accent-bright); transform: translateY(-1px); }
.gp-remove-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #e05a7a;
  font-size: 12px;
  cursor: pointer;
  padding: 6px 0 0;
  transition: color .15s ease;
}
.gp-remove-btn:hover { text-decoration: underline; color: #ff6f95; }

/* Title row + Released pill */
.gp-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gp-title { font-family: var(--gp-font); font-weight: 600; font-size: 34px; color: var(--gp-text-title); margin: 0; line-height: 1.15; }
.gp-title__year { font-weight: 400; color: var(--gp-text-dim); font-size: 22px; }
.gp-released-pill {
  flex-shrink: 0;
  background: var(--gp-bg-card);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--gp-text-body);
  margin-top: 4px;
}
.gp-released-pill b { color: var(--gp-text-dim); font-weight: 500; margin-right: 6px; }

/* "by Developer, Publisher" credit line, right under the title - same
   placement/phrasing Backloggd uses on its own game pages. */
.gp-credit-line { margin-top: 4px; font-size: 14px; color: var(--gp-text-dim); }
.gp-credit-line__company { color: var(--gp-text-dim); text-decoration: none; }
.gp-credit-line__company:hover { color: var(--gp-accent); text-decoration: underline; }

/* Summary/description with a clamp + Show more toggle */
.gp-summary-wrap { margin: 14px 0 6px; }
.gp-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gp-text-body);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gp-summary--expanded { -webkit-line-clamp: unset; }
.gp-show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--gp-accent);
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 0 0;
  font-family: var(--gp-font);
  transition: color .15s ease;
}
.gp-show-more-btn:hover { color: var(--gp-accent-bright); text-decoration: underline; }
/* Chevron flip on expand/collapse - lifted straight from Backloggd's own
   review "more" caret (.review-more:not(.collapsed) i { transform:
   rotate(180deg) }, extracted live from their stylesheet). */
.gp-chevron { display: inline-block; font-size: 10px; transition: transform .2s ease; transform: translateY(-1px); }
.gp-show-more-btn--open .gp-chevron { transform: rotate(180deg) translateY(1px); }

/* Genres / Platforms rows */
.gp-meta-row { display: flex; align-items: baseline; gap: 14px; font-size: 13.5px; margin-bottom: 6px; flex-wrap: wrap; }
.gp-meta-row__label { color: var(--gp-text-dim); text-transform: uppercase; font-size: 11px; letter-spacing: .4px; width: 78px; flex-shrink: 0; }
.gp-meta-row__value { color: var(--gp-text-body); }
.gp-genre-link { cursor: default; }
.gp-genre-link:hover { color: var(--gp-accent-bright); }
.gp-meta-dot { color: var(--gp-text-dim); margin: 0 6px; }
.gp-platform-badge {
  display: inline-flex;
  align-items: center;
  background: var(--gp-bg-card);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 12px;
  color: var(--gp-text-body);
  margin: 0 6px 6px 0;
  transition: background .15s ease, color .15s ease;
}
.gp-platform-badge:hover { background: var(--gp-bg-card-pink); color: var(--gp-accent-bright); }

/* Related Games - Seasons / DLC / Updates / Series / In Bundles / Similar
   Games, tabbed poster rows exactly like Backloggd's own "Related Games"
   block (verified live on backloggd.com: underline-style tab switcher,
   horizontal-scroll cover row below it). Only tabs with real IGDB data
   ever render - see relatedGamesHtml() in game.html. */
.gp-related { margin: 6px 0 30px; }
.gp-related__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; }
.gp-related__tabs { display: flex; gap: 2px; flex-wrap: wrap; }
/* "View All" - always targets whichever category tab is currently active
   (see relatedViewAllHref()/wireRelatedTabs() in game.html), opening a full
   grid of every game in that one category on game-related.html. Sits
   right-aligned below the poster row rather than crowding the tab labels
   up top - room to breathe instead of competing with Similar Games/etc for
   the same line. */
.gp-related__viewall {
  display: block;
  text-align: right;
  margin-top: 10px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gp-text-dim);
  text-decoration: none;
  transition: color .15s ease;
}
.gp-related__viewall:hover { color: var(--gp-accent-bright); text-decoration: underline; }
.gp-related__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--gp-text-dim);
  font-family: var(--gp-font);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 6px 10px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.gp-related__tab:hover { color: var(--gp-text-body); }
.gp-related__tab--active { color: var(--gp-accent); border-color: var(--gp-accent); }
.gp-related__panel { display: none; }
.gp-related__panel--active { display: block; }
.gp-related__row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.gp-related__row::-webkit-scrollbar { height: 6px; }
.gp-related__row::-webkit-scrollbar-thumb { background: var(--gp-bg-card); border-radius: 3px; }
.gp-related__card { flex: 0 0 118px; text-decoration: none; color: inherit; }
.gp-related__cover {
  width: 118px;
  aspect-ratio: 2 / 3;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  background-color: var(--gp-bg-card);
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  opacity: .6;
  transition: transform .2s cubic-bezier(.16,.8,.24,1), box-shadow .2s cubic-bezier(.16,.8,.24,1);
}
.gp-related__card:hover .gp-related__cover {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(0,0,0,0.55), 0 0 18px 2px rgba(234,55,122,0.2);
}
.gp-related__name {
  font-size: 11.5px;
  color: var(--gp-text-body);
  margin-top: 6px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color .15s ease;
}
.gp-related__card:hover .gp-related__name { color: var(--gp-accent-bright); }
.gp-related__year { font-size: 11px; color: var(--gp-text-dim); margin-top: 2px; }

/* game-related.html - the full "View All" grid page for one Related Games
   category, matching Backloggd's own "Games that belong to / from the same
   series as / similar to '<game>'" listing pages (just without their filter
   sidebar - no equivalent data source here for obscurity/rating filters). */
.gp-related-page { padding: 40px 0 70px; }
.gp-related-page__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gp-text-dim, var(--text-dim)); text-decoration: none; margin-bottom: 18px; transition: color .15s ease; }
.gp-related-page__back:hover { color: var(--gp-accent, var(--red-bright)); }
.gp-related-page__title { font-family: var(--gp-font); font-weight: 600; font-size: 26px; color: var(--gp-text-title, var(--text)); margin: 0 0 4px; }
.gp-related-page__count { font-size: 13px; color: var(--gp-text-dim, var(--text-dim)); margin-bottom: 26px; }
.gp-related-page__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 18px; }
.gp-related-page__grid .gp-related__card { flex: none; }
.gp-related-page__grid .gp-related__cover { width: 100%; }

/* Stats row - Avg Rating card, Played/Playing/Backlog/Wishlist/Ratings
   list card, small Reviews/Playtime cards - lives full-width in the main
   column, matching the reference's proportions. Same hover-lift language
   the rest of the site already uses on its own stat cards (.level-stat:hover). */
.gp-stats-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 26px; }
.gp-stat-card { background: var(--gp-bg-card); border-radius: 8px; padding: 16px; transition: transform .15s ease, box-shadow .15s ease; }
.gp-stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,0.35); }
.gp-stat-card--pink { background: var(--gp-bg-card-pink); }
.gp-stat-card--avg { flex: 1 1 200px; min-width: 180px; }
.gp-stat-card__label { font-size: 12.5px; color: var(--gp-text-dim); text-align: center; margin-bottom: 4px; }
.gp-stat-card__big { font-family: var(--gp-font); font-weight: 700; font-size: 30px; color: var(--gp-text-title); text-align: center; margin-bottom: 10px; }
.gp-mini-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 3px; height: 40px; }
.gp-mini-bar { flex: 1; background: var(--gp-accent); border-radius: 1px; opacity: .8; min-height: 3px; }
.gp-mini-chart__foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--gp-text-dim); }
.gp-stat-card--list { flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.gp-stat-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gp-text-body); }
.gp-stat-row__icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--gp-text-dim); flex-shrink: 0; }
.gp-stat-row b { margin-left: auto; color: var(--gp-text-title); font-weight: 600; }
.gp-stat-card--sm { flex: 0 0 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gp-stat-card__num { font-family: var(--gp-font); font-weight: 700; font-size: 18px; color: var(--gp-text-title); }
.gp-stat-card--pink .gp-stat-card__num { color: var(--gp-accent-bright); }
.gp-stat-card__label-sm { font-size: 10.5px; color: var(--gp-text-dim); margin-top: 3px; }

/* "Where did you play this?" first-log source picker (inside the log
   modal, which sits outside #game-root.gp-page's normal flow but is still
   rendered as a child of #game-root so the .gp-page scoping still applies). */
.gp-source-row { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gp-source-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gp-bg-card, var(--panel));
  border: 1px solid var(--gp-border, var(--border));
  color: var(--gp-text-body, var(--text));
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  font-family: var(--gp-font, inherit);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.gp-source-btn:hover { border-color: var(--gp-accent, var(--lb-green)); color: var(--gp-accent-bright, var(--lb-green)); transform: translateY(-1px); }
.gp-source-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.gp-source-note { font-size: 12.5px; color: var(--gp-text-dim, var(--text-dim)); margin-top: 10px; line-height: 1.5; }
.gp-source-note a { color: var(--gp-accent, var(--lb-green)); }
.gp-manual-input {
  width: 100%;
  background: var(--gp-bg-page, var(--bg-alt));
  border: 1px solid var(--gp-border, var(--border));
  border-radius: 6px;
  color: var(--gp-text-body, var(--text));
  padding: 9px 10px;
  font-size: 13px;
  margin-top: 10px;
}
.gp-manual-input:focus { outline: none; border-color: var(--gp-accent, var(--lb-green)); }
.gp-source-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gp-text-dim, var(--text-dim));
  background: var(--gp-bg-page, var(--bg-alt));
  border: 1px solid var(--gp-border, var(--border));
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0 4px;
}
.gp-source-summary b { color: var(--gp-text-title, var(--text)); }

/* Status pill row inside the log/review modal */
.gp-status-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.gp-status-pill {
  background: var(--gp-bg-page, var(--bg-alt));
  border: 1px solid var(--gp-border, var(--border));
  color: var(--gp-text-dim, var(--text-dim));
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--gp-font, inherit);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.gp-status-pill:hover { color: var(--gp-text-body, var(--text)); }
.gp-status-pill--active { border-color: var(--gp-accent, var(--lb-green)); color: var(--gp-accent-bright, var(--lb-green)); background: rgba(234,55,122,0.14); }

.gp-remove-link {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: #e05a7a;
  font-size: 12px;
  margin-top: 10px;
  cursor: pointer;
  padding: 6px 0;
}
.gp-remove-link:hover { text-decoration: underline; }

/* ---------- Beta homepage (Letterboxd-style feed) ---------- */

/* Header search box - persistent, Letterboxd-style: a small rounded white
   pill that's always visible in the header (not an icon that has to be
   clicked to reveal it), same on every page. Widens slightly on focus but
   is never collapsed to zero width the way the old click-to-expand version
   was. */
.beta-search { position: relative; display: flex; align-items: center; }
.beta-search__box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 20px;
  padding: 0 12px;
  height: 36px;
  width: 200px;
  transition: width .18s ease, box-shadow .18s ease;
}
.beta-search__box:focus-within { width: 260px; box-shadow: 0 0 0 2px rgba(224,24,42,0.35); }
.beta-search__box svg { flex-shrink: 0; }
.beta-search__box input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: #111;
  font-family: var(--font-graphik);
}
.beta-search__box input::placeholder { color: #999; }
.beta-search__close {
  border: none;
  background: transparent;
  color: #888;
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
  flex-shrink: 0;
}
.beta-search__close:hover { color: #111; }
.beta-search__results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, 60vw);
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 200;
}
.beta-search__results.beta-search__results--has-items { display: block; }
@media (max-width: 640px) {
  .beta-search__box { width: 140px; }
  .beta-search__box:focus-within { width: 180px; }
}
.beta-search__result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #111;
  text-decoration: none;
}
.beta-search__result:hover { background: #f2f2f2; }
.beta-search__result img { width: 32px; height: 46px; object-fit: cover; border-radius: 3px; background: #ddd; flex-shrink: 0; }
.beta-search__result-title { font-family: var(--font-graphik); font-size: 13px; font-weight: 600; }
.beta-search__result-meta { font-family: var(--font-graphik); font-size: 11px; color: #888; }
.beta-search__empty { font-family: var(--font-graphik); padding: 14px 12px; font-size: 13px; color: #888; }
.beta-search__result--all {
  border-top: 1px solid #ececec;
  justify-content: center;
  padding: 10px 12px;
}
.beta-search__result--all .beta-search__result-title { color: var(--red); font-weight: 700; }

/* Welcome heading (Letterboxd's "Welcome back, X. Here's what your friends
   have been watching…") - sits above Friends Activity, sentence-case and
   understated rather than the site's usual big uppercase display headers.
   This is the one spot on the beta homepage that gets the Tiempos-alike
   serif (var(--font-tiempos)) - everything else here is UI/body text and
   uses the Graphik-alike (var(--font-graphik)) instead. */
.beta-welcome { padding: 32px 0 8px; }
.beta-welcome__title {
  font-family: var(--font-tiempos);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0;
}
.beta-welcome__title #beta-welcome-name {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.beta-welcome__sub { color: var(--text-dim); }

/* Small-poster grid rows (Letterboxd's compact card size) - much tighter
   than the classic site's 56px/28px section spacing, which left large dead
   gaps between rows, and Letterboxd's own small, muted, non-uppercase-heavy
   row labels instead of the site's big red-underlined display headers. */
.beta-row-section { padding: 18px 0; border-bottom: none; }
.beta-row-section .section-head {
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 10px;
}
.beta-row-section .section-head h2 {
  font-family: var(--font-graphik);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  font-weight: 700;
  color: #8bb0c9;
  margin: 0;
}
.beta-row-section .section-head .tag {
  font-family: var(--font-graphik);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--text-dim);
}
/* Letterboxd's "ALL ACTIVITY" / "MORE" link in each row's header, instead
   of a horizontal-scrolling strip - rows show a fixed page of cards and
   this either navigates to the full page (Friends Activity -> the site's
   existing activity.html) or expands the row in place to reveal the rest
   of what was already fetched (Trending/Recommended - no dedicated browse
   page exists for those yet). */
.section-head__more {
  font-family: var(--font-graphik);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.section-head__more:hover { color: var(--text); }
/* Grid, not a fixed-width flex row - a row of fixed-136px cards left a
   large dead gap on the right whenever the container was wider than 6
   cards' worth of pixels, stranding the "More"/"All Activity" link (which
   spans the full container width via the header's space-between) off to
   the right with nothing under it. A 6-column grid always fills the exact
   same width as the header above it, so the link lines up with real
   content no matter how wide the container is. */
.poster-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 980px) { .poster-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .poster-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .poster-row { grid-template-columns: repeat(2, 1fr); } }
.poster-card {
  width: 100%;
  min-width: 0; /* Without this, a long unbreakable title (nowrap +
    ellipsis further down) makes this grid item's intrinsic min-content
    width wider than its 1fr share - CSS Grid's default track sizing is
    minmax(auto, 1fr), which respects that intrinsic width, so one long
    title (e.g. "Re:ZERO -Starting Life in Another World-") silently
    stretched its whole column - and since the poster art is aspect-ratio-
    locked to that column's width, the art and everything else in that
    card rendered visibly larger than every sibling in the same row. */
  text-decoration: none;
  display: block;
  position: relative;
}
.poster-card__art {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.poster-card:hover .poster-card__art { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.55); }

/* Identity lives ON the poster (gradient scrim + avatar + name pinned to
   the bottom edge), matching Letterboxd's activity cards - rating/status
   lives BELOW the poster instead (see .poster-card__meta), never both
   crammed into one spot. */
.poster-card__scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52%;
  background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0));
  pointer-events: none;
}
.poster-card__actor-overlay {
  position: absolute;
  left: 7px; right: 7px; bottom: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.poster-card__actor-overlay img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}
.poster-card__actor-overlay span {
  font-size: 11.5px;
  font-weight: 600;
  color: #f2f1ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.poster-card__meta {
  margin-top: 7px;
  min-height: 15px;
}
.poster-card__stars {
  color: #ff9d3d;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.poster-card__meta-sub {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: capitalize;
}
.poster-card__title {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 7px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Base UI font for the whole beta homepage (Graphik-alike) - the rest of
   the site keeps Oswald/Georgia. Poster card text needs it explicitly
   since it's outside .poster-row's own font scope. */
.masthead--beta,
#beta-home,
#anon-home,
.beta-search,
.search-page {
  font-family: var(--font-graphik);
}

/* ==================== Logged-out landing page (#anon-home) ====================
   The site's actual front door - a Letterboxd-style poster-mosaic hero,
   square stat/feature tiles, and a green "get started" CTA that leads
   straight into Discord login. Shown by default (see index.html); swapped
   out for #beta-home the moment homefeed.js confirms a real session. */

.landing-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 3px solid var(--red);
  background: var(--bg);
}
.landing-hero__mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  padding: 4px;
}
.landing-hero__tile {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  border-radius: 4px;
  opacity: 0;
  transform: scale(0.88);
  animation: landingTileIn 0.9s cubic-bezier(.16,.8,.24,1) forwards;
}
@keyframes landingTileIn { to { opacity: 1; transform: scale(1); } }
@media (max-width: 720px) { .landing-hero__mosaic { grid-template-columns: repeat(6, 1fr); } }
.landing-hero__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.9) 55%, var(--bg) 100%);
}
.landing-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
  margin: 90px auto 70px;
  padding: 44px 48px;
  /* Frosted dark panel just behind the text/CTA, not the whole hero - the
     mosaic + radial scrim alone still let busy poster art fight with the
     headline for attention right where it needs to be most legible. */
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
}
@media (max-width: 640px) {
  .landing-hero__content { padding: 30px 22px; border-radius: 18px; margin: 60px 16px 50px; }
}
.landing-hero__title {
  font-family: var(--font-tiempos);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.28;
  color: var(--text);
  margin: 0 0 18px;
  animation: landingFadeUp 0.8s cubic-bezier(.16,.8,.24,1) both;
}
.landing-hero__deck {
  font-family: var(--font-graphik);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0 auto 32px;
  max-width: 560px;
  animation: landingFadeUp 0.8s cubic-bezier(.16,.8,.24,1) 0.1s both;
}
.landing-hero__actions { margin-bottom: 14px; animation: landingFadeUp 0.8s cubic-bezier(.16,.8,.24,1) 0.2s both; }
.landing-hero__note {
  font-family: var(--font-graphik);
  font-size: 12.5px;
  color: var(--text-dim);
  opacity: 0.75;
  margin: 0;
  animation: landingFadeUp 0.8s cubic-bezier(.16,.8,.24,1) 0.28s both;
}
@keyframes landingFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Accent color for the whole landing page is theme-driven - homefeed.js
   picks a random theme each load and sets --landing-accent(-bright/-text)
   on #anon-home, which every rule below inherits from. Falls back to the
   original Letterboxd green if JS never runs. */
.btn--lb-green {
  background: var(--landing-accent, var(--lb-green));
  border-color: var(--landing-accent, var(--lb-green));
  color: var(--landing-accent-text, #00330f);
  font-family: var(--font-graphik);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.btn--lb-green:hover {
  background: var(--landing-accent-bright, #17e864);
  border-color: var(--landing-accent-bright, #17e864);
}
.btn--lg { padding: 15px 34px; font-size: 15px; border-radius: 6px; }

.landing-stats { border-bottom: none; }
.landing-stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
  z-index: 3;
  margin-top: -56px;
  margin-bottom: 40px;
}
.landing-stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  aspect-ratio: 1.4 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color .2s ease, transform .2s ease;
}
.landing-stat:hover { border-color: var(--landing-accent, var(--lb-green)); transform: translateY(-2px); }
.landing-stat__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}
.landing-stat__label {
  font-family: var(--font-graphik);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  text-align: center;
}
@media (max-width: 640px) { .landing-stats__inner { grid-template-columns: repeat(2, 1fr); margin-top: -30px; } }

.landing-features { padding: 8px 0 64px; }
.landing-features .section-head { border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 10px; margin-bottom: 20px; }
.landing-features .section-head h2 {
  font-family: var(--font-graphik);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #8bb0c9;
  text-transform: uppercase;
  font-weight: 700;
}
.landing-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.landing-feature-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 22px;
  aspect-ratio: 1.2 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.landing-feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--landing-accent, var(--lb-green));
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.landing-feature-card__icon { font-size: 26px; margin-bottom: 12px; }
.landing-feature-card h3 {
  font-family: var(--font-graphik);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.landing-feature-card p {
  font-family: var(--font-graphik);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}
@media (max-width: 900px) { .landing-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .landing-features__grid { grid-template-columns: 1fr; }
  .landing-feature-card { aspect-ratio: auto; }
}

.landing-cta { padding: 12px 0 76px; text-align: center; }
.landing-cta__inner h2 {
  font-family: var(--font-tiempos);
  font-weight: 400;
  font-size: 28px;
  color: var(--text);
  margin: 0 0 22px;
}
.landing-cta__inner .landing-hero__note { margin-top: 14px; animation: none; }

@media (max-width: 640px) {
  .landing-hero { min-height: 520px; }
  .landing-hero__title { font-size: 30px; }
  .landing-hero__deck { font-size: 14.5px; }
}
.masthead--beta .mainnav a {
  font-family: var(--font-graphik);
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.poster-card__actor-overlay span,
.poster-card__stars,
.poster-card__meta-sub,
.poster-card__title {
  font-family: var(--font-graphik);
}

/* ---------- search.html: tab bar + filter/sort controls ----------
   Letterboxd-style: plain text + a small caret, no bordered/filled "pill"
   box around each control - a thin vertical divider between them does the
   grouping a background box used to. */
.search-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 16px 0 26px;
}
.search-filter {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-left: 1px solid var(--border);
}
.search-filter:first-child { padding-left: 0; border-left: none; }
.search-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 18px 2px 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='10' height='10' fill='none' stroke='%239b9a97' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.search-filter-select:hover, .search-filter-select:focus {
  color: var(--text);
  border-bottom-color: var(--red);
  outline: none;
}
.search-filter-select option { background: var(--panel); color: var(--text); }
.search-page__grid { min-height: 40px; }
/* Filter/sort dropdowns changing never refetches anything (see
   search.html's runSearch/renderResults) - only the grid's content should
   ever visibly change, so a short opacity fade is enough to keep that swap
   from feeling like a hard cut without any layout-shifting animation. */
.search-page__grid {
  animation: search-fade-in .18s ease;
}
@keyframes search-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Softer, Letterboxd-like chrome for beta mode - the site's bold red
   underline reads jarring against the refined feed below it. */
.masthead--beta {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

/* ---------- full-profile.html: Stats tab ----------
   Deliberately plain: stacked number+label pairs (no pill/badge
   backgrounds, no emoji glyphs, no borders-within-borders), a light
   3-column card grid for the charts, and a single one-time fade on entry
   (inherited from .fp-panel) rather than any per-element animation - the
   goal is a calm data page, not a flashy one. */
.stats-highlights {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 22px;
}
.stats-highlight {
  padding: 20px 14px;
  text-align: center;
  border-right: 1px solid var(--border);
  background: var(--panel);
}
.stats-highlight:last-child { border-right: none; }
.stats-highlight__num {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text);
  line-height: 1.15;
}
.stats-highlight__label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-dim);
  margin-top: 6px;
}

.stats-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.stats-fact {
  padding: 16px 18px;
  border-left: 2px solid var(--red);
  background: var(--panel);
  border-radius: 0 8px 8px 0;
}
.stats-fact__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-dim);
}
.stats-fact__value {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-fact__sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.stats-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px 16px;
  min-width: 0;
}
.stats-card--wide { grid-column: 1 / -1; }
.stats-card__title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text);
  margin-bottom: 14px;
}
.stats-card__chart-wrap { position: relative; height: 260px; }
.stats-card--wide .stats-card__chart-wrap { height: 220px; }

@media (max-width: 860px) {
  .stats-highlights { grid-template-columns: repeat(3, 1fr); }
  .stats-highlight:nth-child(3) { border-right: none; }
  .stats-highlight:nth-child(n+4) { border-top: 1px solid var(--border); }
  .stats-grid { grid-template-columns: 1fr; }
  .stats-card--wide { grid-column: auto; }
}
@media (max-width: 480px) {
  .stats-highlights { grid-template-columns: repeat(2, 1fr); }
  .stats-highlight:nth-child(2n) { border-right: none; }
  .stats-highlight:nth-child(n+3) { border-top: 1px solid var(--border); }
}



/* ==================== Independence Day banner ====================
   Slim, site-wide, prepended above the masthead by main.js - same tricolor
   theme as the Discord/Minecraft side, shown to every visitor regardless of
   the Beta Features toggle. */
.sz-indep-banner__bar {
  height: 4px;
  background: linear-gradient(90deg, #FF9933 0%, #FF9933 33.33%, #FFFFFF 33.33%, #FFFFFF 66.66%, #138808 66.66%, #138808 100%);
}
.sz-indep-banner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(255,153,51,0.16) 0%, rgba(255,255,255,0.05) 50%, rgba(19,136,8,0.16) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  flex-wrap: wrap;
}
.sz-indep-banner__text {
  font-size: 13.5px;
  color: var(--text-dim);
  letter-spacing: .2px;
}
.sz-indep-banner__text strong { color: var(--text); }
.sz-indep-banner__close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.sz-indep-banner__close:hover { color: var(--text); background: rgba(255,255,255,0.08); }
@media (max-width: 600px) {
  .sz-indep-banner__text { font-size: 12px; }
  .sz-indep-banner__content { padding: 9px 14px; }
}




/* ==================== Mobile App Theme ==================== */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: rgba(18, 18, 20, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 1000;
  justify-content: space-around;
  align-items: center;
  padding: 0 10px;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  gap: 4px;
  width: 60px;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav__item svg { opacity: 0.8; transition: opacity 0.2s ease, transform 0.2s ease; }
.mobile-nav__item:active svg { transform: scale(0.9); }
.mobile-nav__item:hover, .mobile-nav__item:focus { color: var(--text); }
.mobile-nav__item:hover svg, .mobile-nav__item:focus svg { opacity: 1; }

@media (max-width: 768px) {
  body { 
    padding-bottom: calc(75px + env(safe-area-inset-bottom)); 
  }
  .mobile-nav { display: flex; }
  
  /* Header Fixes */
  .masthead .mainnav, .masthead .beta-search { display: none !important; }
  .masthead__bar { padding: 12px 16px; }
  
  /* Hero section (Index) */
  .hero { min-height: auto; padding: 60px 16px 30px; }
  .hero__actions { display: flex; flex-direction: column; gap: 10px; }
  .hero__actions .btn { width: 100%; text-align: center; }
  
  /* Profile Page Layout Override (overrides inline flex) */
  .fp-panel .container { flex-direction: column !important; }
  .fp-panel .container > div { width: 100% !important; max-width: 100% !important; }
  
  /* Profile Hero */
  .fp-hero { min-height: 250px; }
  .fp-hero__inner { flex-direction: column; align-items: center; text-align: center; padding-top: 40px; padding-bottom: 20px; gap: 15px; }
  .fp-hero__left { flex-direction: column; align-items: center; }
  .fp-hero__avatar { width: 96px; height: 96px; }
  .fp-hero__info h1 { justify-content: center; font-size: 24px; }
  .fp-hero__platforms { justify-content: center; margin-top: 8px; margin-left: 0; }
  .fp-hero__stats-inline { justify-content: center; width: 100%; gap: 15px; margin-top: 10px; }
  
  /* Grids */
  .games-grid,
  .resident-grid,
  .join-steps {
    grid-template-columns: 1fr !important;
  }
  
  /* Resident Cards (Make them horizontal on mobile) */
  .resident-card { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    text-align: left; 
    padding: 12px 16px; 
  }
  .resident-card__avatar { 
    width: 48px !important; 
    height: 48px !important; 
    margin-bottom: 0 !important; 
    margin-right: 16px !important; 
  }
  .resident-card__avatar img { width: 48px !important; height: 48px !important; }
  .resident-card__info { flex: 1; min-width: 0; }
  .you-badge { left: 24px; top: -5px; transform: none; }
  .status-badge { bottom: -2px; right: 12px; }
  
  /* Activity Feed */
  .feed-row { flex-direction: column; align-items: flex-start; padding: 12px 0; }
  .feed-row__time { margin-top: 6px; margin-left: 0; }
  .feed-row__thumb { width: 48px; height: 48px; }
  
  /* Media Posters */
  .poster-row, .media-grid, .fp-stream-poster-grid, .fp-games-grid { 
    grid-template-columns: repeat(3, 1fr) !important; 
  }
  
  /* Miscellaneous padding and margins */
  .container { padding: 0 16px; }
  .section { padding: 40px 0; }
  .stats-highlights { grid-template-columns: 2fr !important; }
}

@media (max-width: 480px) {
  .poster-row, .media-grid, .fp-stream-poster-grid, .fp-games-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stats-highlights { grid-template-columns: 1fr !important; }
}

/* ==================== Profile Song - Settings search UI (settings.html)
   ==================== */
.song-picker-search { margin-top: 14px; }
.song-picker-search__input {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.song-picker-search__input::placeholder { color: var(--text-dim); }
.song-picker-search__input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(179,16,29,0.15); }
.song-picker-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.song-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.song-result-row__art { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.song-result-row__art--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  font-size: 16px;
}
.song-result-row__info { flex: 1; min-width: 0; }
.song-result-row__name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-result-row__artist { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.song-result-row__preview-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.song-result-row__preview-btn:hover { border-color: var(--red); color: var(--red-bright); }
.song-result-row__preview-btn--playing { border-color: var(--red); color: var(--red-bright); }
.song-result-row__set-btn { flex-shrink: 0; }

/* ==================== Profile Song - floating "now playing" widget
   (profile.html). Bottom-right, pinned, sits above mobile-nav's own
   z-index - Myspace-era "this profile has a song" idea, with a real pause
   control and a graceful autoplay-blocked fallback instead of just
   force-playing. Sourced from a real iTunes preview clip (see
   itunesMusic.js) rather than Spotify - see the JS comment in profile.html
   for why Spotify didn't work out for this feature. ==================== */
.fp-song-widget {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(18,18,20,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px 6px 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  max-width: 260px;
}
.fp-song-widget__art { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.fp-song-widget__art--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  font-size: 14px;
}
.fp-song-widget__info { min-width: 0; flex: 1; }
.fp-song-widget__name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-song-widget__artist { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-song-widget__toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.fp-song-widget__toggle:hover { background: var(--red-bright); }
.fp-song-widget--paused .fp-song-widget__toggle { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); }
@media (max-width: 640px) {
  .fp-song-widget { right: 12px; bottom: 76px; max-width: 210px; }
}