/* =========================================================
   AI Companions Hub — v2 stylesheet
   Sidebar layout inspired by JuicyChat / GirlfriendGPT.
   Dark-first, image-first cards, responsive down to 360px.
   ========================================================= */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-variable.woff2') format('woff2-variations'),
       url('../fonts/manrope-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg:        #0a0c14;
  --bg-elev:   #131520;
  --bg-soft:   #1a1d2b;
  --bg-hover:  #20243a;
  --fg:        #f5f5fa;
  --fg-mute:   #9aa0b8;
  --fg-faint:  #6b7090;
  --border:    rgba(255,255,255,.06);
  --border-strong: rgba(255,255,255,.12);
  --accent:    #c084fc;     /* purple — reserved for rare a11y/focus accents only */
  --danger:    #ef4444;
  --success:   #22c55e;
  --gold:      #fbbf24;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.55);
  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:  64px;
}

/* No light mode — adult/companion sites are dark by convention */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--fg); text-decoration: none; transition: color .15s ease, filter .15s ease; }
a:hover { color: var(--fg); filter: brightness(1.15); }

button { font-family: inherit; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--accent);
  color: #fff;
  padding: .5rem 1rem;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ---------- Layout shell ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns .25s ease;
}
.layout.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
/* Apply collapsed width BEFORE the layout div is parsed — the head script
   sets html.sidebar-collapsed synchronously from localStorage, so the first
   paint already shows a narrow sidebar (no expand-then-snap flash on
   navigation). The sidebar content overflows hidden so labels just clip. */
html.sidebar-collapsed .layout { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* =====================================================================
   SIDEBAR
   ===================================================================== */
.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 30;
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  min-height: var(--topbar-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--fg);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.brand:hover { color: var(--fg); }
/* Full Shoomble logo (expanded sidebar) */
.brand-logo {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  object-fit: contain;
  transition: opacity .15s ease;
}
/* Compact favicon mark (collapsed sidebar) — hidden by default */
.brand-mark-small {
  display: none;
  width: 32px; height: 32px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}
.layout.sidebar-collapsed .brand-logo { display: none; }
.layout.sidebar-collapsed .brand-mark-small { display: block; }

.sidebar-collapse {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-mute);
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, border-color .15s ease, color .15s ease;
  flex-shrink: 0;
}
.sidebar-collapse:hover { color: var(--fg); border-color: var(--border-strong); }
.sidebar-collapse svg { width: 14px; height: 14px; transition: transform .25s ease; }
.layout.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .75rem 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }

.nav-group {
  padding: .75rem 0 0;
}
.nav-group-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  padding: .25rem 1rem .35rem;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .15s ease;
}
.layout.sidebar-collapsed .nav-group-title { opacity: 0; height: 0; padding: 0; }

.nav-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem 1rem;
  color: var(--fg-mute);
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-link:hover {
  background: var(--bg-hover);
  color: var(--fg);
}
.nav-link.is-active {
  color: var(--fg);
  background: rgba(255, 255, 255, .04);
  border-left-color: rgba(255, 255, 255, .35);
}
.nav-icon {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}
.nav-icon svg { width: 18px; height: 18px; }
.platform-logo-sm {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
}
.nav-label { transition: opacity .15s ease; }
.layout.sidebar-collapsed .nav-label { display: none; }
.nav-badge {
  margin-left: auto;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--bg-soft);
  color: var(--fg-mute);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 999px;
}
.layout.sidebar-collapsed .nav-badge { display: none; }

.sidebar-foot {
  border-top: 1px solid var(--border);
  padding: .75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  font-size: .76rem;
}
.sidebar-foot a { color: var(--fg-faint); }
.sidebar-foot a:hover { color: var(--fg-mute); }
.layout.sidebar-collapsed .sidebar-foot { display: none; }

/* =====================================================================
   TOPBAR
   ===================================================================== */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  min-height: var(--topbar-h);
  background: rgba(10, 12, 20, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-hamburger {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  width: 38px; height: 38px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.topbar-hamburger svg { width: 20px; height: 20px; }

.search-wrap {
  position: relative;
  flex: 1;
  max-width: 460px;
}
.search-wrap input {
  width: 100%;
  height: 40px;
  padding: 0 1rem 0 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--fg);
  font: inherit;
  font-size: .9rem;
  transition: border-color .15s ease, background .15s ease;
}
.search-wrap input:focus {
  outline: none;
  border-color: var(--border-strong);
  background: var(--bg-soft);
}
.search-wrap input::placeholder { color: var(--fg-faint); }
.search-wrap svg {
  position: absolute;
  left: .85rem; top: 50%;
  transform: translateY(-50%);
  color: var(--fg-faint);
  width: 16px; height: 16px;
}

.topbar-spacer { flex: 1; }
.topbar-tools {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 36px;
  padding: 0 .8rem;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .03em;
  text-decoration: none;
  transition: filter .15s ease, border-color .15s ease;
}
.promo-badge:hover { color: var(--fg); filter: brightness(1.2); border-color: rgba(255, 255, 255, .25); }
.promo-badge svg { width: 14px; height: 14px; }

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-elev) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%239aa0b8' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>") no-repeat right .7rem center;
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 10px;
  padding: 0 1.8rem 0 .8rem;
  height: 36px;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}

.btn-signin {
  background: transparent;
  color: var(--fg-mute);
  border: none;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  padding: 0 .65rem;
  height: 36px;
  display: inline-flex;
  align-items: center;
  transition: color .15s ease;
}
.btn-signin:hover { color: var(--fg); }
.btn-signup {
  background: var(--fg);
  color: #11141d;
  border: 1px solid var(--fg);
  border-radius: 999px;
  height: 36px;
  padding: 0 1rem;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: filter .15s ease;
}
.btn-signup:hover { color: #11141d; filter: brightness(.95); }

/* =====================================================================
   CONTENT
   ===================================================================== */
.content {
  flex: 1;
  padding: 1.25rem;
  min-width: 0;
}

/* Footer copy — centered + capped reading width so the two short lines
   anchor the page on wide screens without stretching edge-to-edge. */
footer.content { text-align: center; }
footer.content p { max-width: 720px; margin-inline: auto; }

/* Filter row */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  margin-bottom: .9rem;
}
.tab-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
.tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--fg-mute);
  border-radius: 999px;
  padding: .5rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--fg); border-color: var(--border-strong); background: var(--bg-soft); }
.tab.is-active {
  background: rgba(255, 255, 255, .06);
  color: var(--fg);
  border-color: var(--border-strong);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .35);
}
.tab svg { width: 14px; height: 14px; }

.filter-spacer { flex: 1; }

.sex-pill-group {
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.sex-pill {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--fg-mute);
  padding: .35rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background .15s ease, color .15s ease;
}
.sex-pill svg { width: 14px; height: 14px; }
.sex-pill:hover { color: var(--fg); }
.sex-pill.is-active { background: var(--bg-soft); color: var(--fg); }

.gif-toggle, .nsfw-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .8rem;
  height: 36px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg-mute);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  appearance: none;
}
.toggle-switch {
  position: relative;
  width: 32px; height: 18px;
  background: var(--bg-soft);
  border-radius: 999px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--fg-mute);
  transition: transform .2s ease, background .2s ease;
}
.gif-toggle[aria-pressed="true"], .nsfw-toggle[aria-pressed="true"] {
  background: rgba(255, 255, 255, .06);
  border-color: var(--border-strong);
  color: var(--fg);
}
.gif-toggle[aria-pressed="true"] .toggle-switch::after,
.nsfw-toggle[aria-pressed="true"] .toggle-switch::after {
  transform: translateX(14px);
  background: var(--fg);
}

/* NSFW toggle — slight luminous polish to draw attention without breaking
   the sober design language. Inactive: subtle inner highlight + hover lift.
   Active: stronger inner highlight + outer halo + glowing thumb. */
.nsfw-toggle {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 1px 2px rgba(0, 0, 0, .25);
  transition: box-shadow .2s ease, filter .15s ease, background .2s ease, border-color .2s ease;
}
.nsfw-toggle:hover {
  filter: brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 2px 6px rgba(0, 0, 0, .35),
    0 0 0 3px rgba(255, 255, 255, .03);
}
.nsfw-toggle[aria-pressed="true"] {
  /* Warm coral tint for the "on" state — signals heat/intimacy without
     going trashy. Subtle: tinted halo, neutral text. Thumb stays white
     for a clean focus point. */
  background: rgba(255, 122, 89, .07);
  border-color: rgba(255, 122, 89, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 0 14px rgba(255, 122, 89, .18),
    0 0 0 1px rgba(255, 122, 89, .14);
}
.nsfw-toggle[aria-pressed="true"]:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 0 20px rgba(255, 122, 89, .25),
    0 0 0 1px rgba(255, 122, 89, .22);
}
.nsfw-toggle[aria-pressed="true"] .toggle-switch {
  background: rgba(255, 122, 89, .14);
  border-color: rgba(255, 122, 89, .42);
}
.nsfw-toggle[aria-pressed="true"] .toggle-switch::after {
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 122, 89, .55);
}

/* Tag chips row */
.tag-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1.25rem;
  align-items: center;
}
.chip {
  appearance: none;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg-mute);
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem .8rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .2);
}
.chip.is-active {
  background: rgba(255, 255, 255, .08);
  color: var(--fg);
  border-color: rgba(255, 255, 255, .25);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .35);
}
/* Hide chips/links that have ZERO SFW chars when the page is in SFW mode. */
html:not(.nsfw-on) .chip-nsfw-only,
html:not(.nsfw-on) .nav-nsfw-only { display: none !important; }

/* Collapsible tag chip row: single line by default, "More" button expands.
   Desktop: vertical wrap clamped to one row.
   Mobile:  horizontal scroll (touch-swipeable), expand → wrap normally. */
.tag-chips-wrap {
  display: flex;
  gap: .4rem;
  align-items: flex-start;
  margin-top: .5rem;
}
.tag-chips-wrap .tag-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  flex: 1;
  min-width: 0;            /* needed so flex child can shrink below content size */
  max-height: 36px;
  overflow: hidden;
  transition: max-height .25s ease;
}
.tag-chips-wrap.is-expanded .tag-chips-row { max-height: 800px; }

@media (max-width: 768px) {
  .tag-chips-wrap .tag-chips-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tag-chips-wrap .tag-chips-row::-webkit-scrollbar { display: none; }
  .tag-chips-wrap .tag-chips-row .chip { scroll-snap-align: start; flex-shrink: 0; }
  .tag-chips-wrap.is-expanded .tag-chips-row {
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 60vh;
  }
}

.chip-more {
  flex-shrink: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.chip-more-arrow { display: inline-block; transition: transform .2s ease; font-size: .9em; }
.tag-chips-wrap.is-expanded .chip-more-arrow { transform: rotate(180deg); }

/* Sidebar search */
.sidebar-search {
  position: relative;
  margin: .75rem .85rem .8rem;
}
.layout.sidebar-collapsed .sidebar-search { display: none; }

/* Sidebar search — collapsed mode: icon trigger + popover */
.sidebar-search-collapsed { display: none; }
.layout.sidebar-collapsed .sidebar-search-collapsed {
  display: flex;
  justify-content: center;
  padding: .35rem 0 .55rem;
}
.sidebar-search-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-mute);
  width: 36px; height: 36px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.sidebar-search-toggle svg { width: 16px; height: 16px; }
.sidebar-search-toggle:hover { color: var(--fg); border-color: var(--border-strong); background: rgba(255, 255, 255, .04); }
.sidebar-search-collapsed.is-open .sidebar-search-toggle {
  color: var(--fg);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, .06);
}

.sidebar-search-popover {
  display: none;
  position: fixed;
  width: 280px;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: .55rem .7rem;
  box-shadow: var(--shadow-md);
  z-index: 40;
  align-items: center;
  gap: .55rem;
}
.sidebar-search-collapsed.is-open .sidebar-search-popover { display: flex; }
.sidebar-search-popover svg {
  width: 16px; height: 16px;
  color: var(--fg-mute);
  flex-shrink: 0;
}
.sidebar-search-popover input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font: inherit;
  font-size: .9rem;
  padding: .25rem 0;
}
.sidebar-search-popover input::placeholder { color: var(--fg-faint); }
.sidebar-search svg {
  position: absolute;
  top: 50%; left: .65rem;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--fg-mute);
  pointer-events: none;
}
.sidebar-search input {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: .42rem .6rem .42rem 2rem;
  border-radius: 8px;
  font-size: .85rem;
  outline: none;
  transition: border-color .15s ease;
}
.sidebar-search input:focus { border-color: var(--border-strong); background: var(--bg-soft); }
.sidebar-search input::placeholder { color: var(--fg-mute); }

/* Sidebar language picker (custom dropdown — replaces native <select>) */
.nav-lang-wrap { position: relative; }
.nav-lang {
  width: 100%;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nav-lang-caret {
  margin-left: auto;
  width: 14px; height: 14px;
  color: var(--fg-faint);
  display: inline-flex;
  transition: transform .15s ease, color .15s ease;
}
.nav-lang-caret svg { width: 14px; height: 14px; }
.nav-lang[aria-expanded="true"] .nav-lang-caret { transform: rotate(180deg); color: var(--fg); }
.layout.sidebar-collapsed .nav-lang-caret { display: none; }

.nav-lang-menu {
  display: none;
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: calc(100% + 4px);
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 4px;
  box-shadow: var(--shadow-md);
  z-index: 40;
  min-width: 180px;
}
.nav-lang-wrap.is-open .nav-lang-menu { display: block; }
.layout.sidebar-collapsed .nav-lang-menu {
  left: calc(100% + 6px);
  right: auto;
  bottom: 0;
}

.nav-lang-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .45rem .6rem;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--fg-mute);
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-lang-option:hover { background: rgba(255, 255, 255, .06); color: var(--fg); }
.nav-lang-option.is-active { color: var(--fg); }
.nav-lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg-mute);
  flex-shrink: 0;
}
.nav-lang-option.is-active .nav-lang-flag { color: var(--fg); border-color: var(--border-strong); }
.nav-lang-check {
  margin-left: auto;
  width: 14px; height: 14px;
  color: var(--fg);
  opacity: 0;
  flex-shrink: 0;
}
.nav-lang-option.is-active .nav-lang-check { opacity: 1; }

/* Compact topbar (mobile: hamburger + brand logo) */
.topbar-compact {
  min-height: 68px;
  padding: .55rem .85rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}
.topbar-compact .topbar-hamburger { margin: 0; flex: 0 0 auto; }
.topbar-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 0;
}
.topbar-brand-logo {
  height: 52px;
  width: auto;
  max-width: 220px;
  display: block;
}
@media (min-width: 768px) {
  .topbar-compact { display: none; }   /* desktop: hamburger inside sidebar header is enough */
}
.chip-all-tags {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-mute);
}

.results-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .25rem 0 .85rem;
  color: var(--fg-faint);
  font-size: .85rem;
}

/* Listing hero (tag pages + platform pages) */
.listing-hero {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin: .35rem 0 1rem;
}
.platform-hero-logo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.listing-hero-text { min-width: 0; flex: 1; }
.listing-hero-text h1,
.listing-hero-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 .35rem;
  line-height: 1.2;
}
.listing-hero-intro {
  max-width: 70ch;
  color: var(--fg-mute);
  margin: 0 0 .5rem;
}
@media (max-width: 600px) {
  .platform-hero-logo { width: 52px; height: 52px; border-radius: 12px; }
}

/* =====================================================================
   CHARACTER GRID + CARD (image-first, JuicyChat-style)
   ===================================================================== */
.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .75rem;
}
.character-card.is-clipped { display: none !important; }

/* Show-more CTA (revealed when card count exceeds threshold and no filter active) */
.show-more-wrap {
  display: none;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  text-align: center;
  border-top: 1px dashed var(--border);
}
.show-more-wrap.is-visible { display: block; }
.show-more-btn {
  appearance: none;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease;
}
.show-more-btn:hover {
  filter: brightness(1.15);
  background: var(--bg-soft);
}
.show-more-btn svg { width: 14px; height: 14px; margin-right: .35rem; vertical-align: -2px; }

/* NSFW masking — cards stay hidden until user enables NSFW */
html:not(.nsfw-on) .character-card[data-nsfw="true"] { display: none; }

.character-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  aspect-ratio: 3 / 4;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
  text-decoration: none;
  color: var(--fg);
  display: block;
}
.character-card:hover {
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 14px 36px -14px rgba(0, 0, 0, .6);
}
.character-card:hover .character-card-img img {
  filter: brightness(1.08);
}
.character-card-img {
  position: absolute;
  inset: 0;
}
.character-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter .25s ease;
}
.character-card-img::after {
  /* Gradient overlay for legibility of bottom info */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(10,12,20,.45) 70%, rgba(10,12,20,.95) 100%);
  pointer-events: none;
}

.character-card-badges {
  position: absolute;
  top: .55rem;
  left: .55rem;
  right: .55rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.character-card-badges .left,
.character-card-badges .right { display: flex; gap: .3rem; flex-wrap: wrap; }
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .5rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  background: rgba(10, 12, 20, .65);
  color: #fff;
  pointer-events: auto;
}
.badge-pick {
  background: rgba(10, 12, 20, .72);
  color: var(--fg);
  border: 1px solid var(--border-strong);
}
.badge-pick svg { width: 11px; height: 11px; color: var(--fg-mute); }
.badge-featured {
  background: rgba(10, 12, 20, .72);
  color: var(--fg);
  border: 1px solid var(--border-strong);
}
.badge-featured svg { width: 11px; height: 11px; }
.badge-sponsored {
  /* Clearer commercial label — slightly stronger contrast than Featured
     so the paid-placement disclosure is visible at a glance (FTC). */
  background: rgba(10, 12, 20, .88);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
  letter-spacing: .07em;
}
.badge-sponsored svg { width: 11px; height: 11px; }
.badge-nsfw {
  background: rgba(239, 68, 68, .9);
  color: #fff;
}
.badge-platform {
  background: rgba(10, 12, 20, .7);
  color: var(--fg);
  border: 1px solid var(--border);
}
.badge-platform .platform-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand, var(--accent));
}

.character-card-meta {
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  z-index: 2;
  pointer-events: none;
}
.character-card-name {
  margin: 0 0 .25rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.character-card-tagline {
  margin: 0 0 .4rem;
  color: rgba(245, 245, 250, .85);
  font-size: .78rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.character-card-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: 0;
  margin: 0 0 .4rem;
}
.character-card-tags li {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  padding: .15rem .45rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.character-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  color: rgba(245, 245, 250, .8);
}
.character-card-author {
  font-weight: 600;
  color: rgba(245, 245, 250, .75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.card-platform-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.character-card-stats {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 700;
  color: #fff;
}
.character-card-stats svg { width: 12px; height: 12px; }

/* =====================================================================
   DETAIL PAGE
   ===================================================================== */
.detail {
  padding: 1rem 0 2rem;
  /* Cap the detail page on wide screens so the hero, dl and "Similar
     characters" aside stay grouped instead of floating to the right edge.
     Home grid and listings keep their full-width layout — only the
     character profile page gets this cap. */
  max-width: 1320px;
  margin-inline: auto;
}
.breadcrumb {
  font-size: .85rem;
  color: var(--fg-mute);
  margin: 0 0 1rem;
}
.breadcrumb a { color: var(--fg-mute); }
.breadcrumb a:hover { color: var(--fg); }

.detail-hero {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 2rem;
  align-items: start;
}
.detail-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--bg-soft);
  box-shadow: var(--shadow-md);
}
.detail-image img { width: 100%; height: 100%; object-fit: cover; }
.detail-image .badge-pill { position: absolute; top: .8rem; }
.detail-image .badge-pick,
.detail-image .badge-featured { left: .8rem; }
.detail-image .badge-nsfw { right: .8rem; }

.detail-summary { display: flex; flex-direction: column; gap: 1rem; }
.detail-summary h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 800;
}
.detail-tagline {
  font-size: 1.06rem;
  color: var(--fg-mute);
  margin: 0;
}
.detail-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: 0;
  margin: 0;
}
.detail-tags li a {
  display: inline-block;
  background: var(--bg-elev);
  color: var(--fg);
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.detail-tags li a:hover { border-color: rgba(255, 255, 255, .25); color: var(--fg); background: rgba(255, 255, 255, .06); }

.summary-box {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  display: grid;
  /* `auto` shrinks the label column to its content; `1fr` keeps the value
     column flexible. Capping max-width prevents the dl from spreading
     across the entire hero on wide screens. */
  grid-template-columns: auto 1fr;
  gap: .55rem 1.4rem;
  font-size: .92rem;
  margin: 0;
  max-width: 480px;
}
.summary-box dt { color: var(--fg-mute); font-weight: 600; }
.summary-box dd { margin: 0; font-weight: 700; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .94rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: filter .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn-primary {
  background: var(--fg);
  color: #11141d;
  border-color: var(--fg);
  box-shadow: none;
}
.btn-primary:hover { color: #11141d; filter: brightness(.95); }
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-elev); }

.detail-cta { display: flex; gap: .6rem; flex-wrap: wrap; }

.detail-body {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
}
.detail-body h2 {
  font-size: 1.25rem;
  margin: 1.5rem 0 .65rem;
  font-weight: 800;
}
.detail-body p { font-size: 1rem; color: var(--fg); line-height: 1.7; }

.detail-aside {
  position: sticky; top: calc(var(--topbar-h) + 1rem);
  align-self: start;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
}
.detail-aside h3 { margin: 0 0 .65rem; font-size: 1rem; font-weight: 800; }
.similar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .85rem; }
.similar-list a { display: flex; gap: .85rem; align-items: center; color: var(--fg); }
.similar-list a:hover { color: var(--fg); }
.similar-thumb { width: 72px; height: 96px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--bg-soft); }
.similar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.similar-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.similar-name { font-weight: 700; font-size: .98rem; line-height: 1.25; }
.similar-platform { font-size: .8rem; color: var(--fg-mute); }
html:not(.nsfw-on) .similar-list li[data-nsfw="true"] { display: none; }

/* =====================================================================
   STATIC PAGES (about, privacy, etc.)
   ===================================================================== */
.prose { max-width: 720px; }
.prose h1 { font-size: 2rem; letter-spacing: -.02em; font-weight: 800; margin: 0 0 1rem; }
.prose h2 { font-size: 1.2rem; font-weight: 800; margin: 1.5rem 0 .65rem; }
.prose p, .prose ul { font-size: 1rem; line-height: 1.7; color: var(--fg); }
.prose ul { padding-left: 1.2rem; }
.prose ul li { margin: .25rem 0; }
.prose code { background: var(--bg-elev); padding: .15rem .4rem; border-radius: 6px; font-size: .9em; }
.prose table { border-collapse: collapse; width: 100%; margin-top: 1rem; }
.prose th, .prose td { padding: .5rem; border-bottom: 1px solid var(--border); text-align: left; font-size: .92rem; }

/* Legal pages (privacy, terms, cookies, affiliate, 18+) — same cap pattern
   as .detail, with an icon-led hero on top and a clean prose body below. */
.legal {
  max-width: 960px;
  margin-inline: auto;
  padding: 1rem 0 2rem;
}
.legal .breadcrumb { margin-bottom: 1.25rem; }
.legal-hero {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem 1.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.6rem;
}
.legal-hero-icon {
  width: 60px; height: 60px;
  flex-shrink: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg);
}
.legal-hero-icon svg { width: 30px; height: 30px; }
.legal-hero-text { min-width: 0; }
.legal-hero-text h1 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin: 0 0 .4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.legal-hero-tagline {
  color: var(--fg-mute);
  margin: 0 0 .55rem;
  font-size: 1rem;
  line-height: 1.5;
}
.legal-hero-meta {
  color: var(--fg-mute);
  font-size: .78rem;
  margin: 0;
  opacity: .7;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.legal .prose { max-width: none; }   /* prose already constrained by .legal wrapper */
.legal .prose h2:first-of-type { margin-top: .5rem; }

@media (max-width: 600px) {
  .legal-hero { flex-direction: column; gap: .9rem; padding: 1.25rem; }
  .legal-hero-icon { width: 52px; height: 52px; }
}

/* Methodology page — live stats row, criteria cards, pipeline timeline. */
.method-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin: 0 0 1.8rem;
}
.method-stat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.method-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--fg);
}
.method-stat-label {
  font-size: .72rem;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

.method-criteria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.6rem 0 2rem;
}
.method-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem 1.3rem 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.method-card-num {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--fg-mute);
  text-transform: uppercase;
  opacity: .55;
}
.method-card h3 {
  font-size: 1.05rem;
  margin: 0;
  font-weight: 800;
  letter-spacing: -.01em;
}
.method-card p {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--fg-mute);
  margin: 0;
}

.method-pipeline {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--border-strong);
  padding-left: 1.4rem;
  position: relative;
}
.method-pipeline li {
  position: relative;
  padding: .6rem 0 .85rem;
}
.method-pipeline li::before {
  content: '';
  position: absolute;
  left: calc(-1.4rem - 5px);
  top: .9rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 2px solid var(--border-strong);
}
.method-pipeline li strong {
  display: block;
  font-size: .98rem;
  margin-bottom: .15rem;
  letter-spacing: -.005em;
}
.method-pipeline li span {
  font-size: .9rem;
  color: var(--fg-mute);
  line-height: 1.5;
}

/* Ranking pages — /top/<slug>/ — numbered list with portrait + verdict + CTA */
.ranking-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: flex; flex-direction: column; gap: 1rem; }
.ranking-item {
  display: grid;
  grid-template-columns: 56px 120px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  transition: border-color .15s ease, filter .15s ease;
}
.ranking-item:hover { border-color: var(--border-strong); filter: brightness(1.04); }
.ranking-rank {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--fg);
  opacity: .85;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}
.ranking-thumb {
  width: 120px; height: 160px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-soft);
  flex-shrink: 0;
}
.ranking-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ranking-meta { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.ranking-name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--fg);
}
.ranking-name a { color: var(--fg); }
.ranking-platform {
  font-size: .78rem;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
}
.ranking-verdict {
  font-size: .95rem;
  color: var(--fg);
  line-height: 1.5;
  margin: 0;
}
.ranking-tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; }
.ranking-tags a {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--fg-mute);
}
.ranking-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .65rem 1rem;
  border-radius: 999px;
  background: var(--fg);
  color: #11141d;
  font-weight: 700;
  font-size: .85rem;
  white-space: nowrap;
}
.ranking-cta:hover { color: #11141d; filter: brightness(.95); }
html:not(.nsfw-on) .ranking-item[data-nsfw="true"] { display: none; }
/* Toggle which pane is shown based on global NSFW state. The page renders
   BOTH lists server-side (SFW-only top N + mixed top N) so the numbers stay
   contiguous (01-10) in both modes — no gaps, no client-side renumbering. */
.ranking-pane-mixed { display: none; }
html.nsfw-on .ranking-pane-sfw   { display: none; }
html.nsfw-on .ranking-pane-mixed { display: block; }

/* Ranking hub — list of all rankings as cards */
.ranking-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.ranking-hub-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-decoration: none;
  color: var(--fg);
  transition: border-color .15s ease, filter .15s ease;
}
.ranking-hub-card:hover { color: var(--fg); border-color: var(--border-strong); filter: brightness(1.04); }
.ranking-hub-card .hub-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-mute); }
.ranking-hub-card .hub-icon svg { width: 24px; height: 24px; }
.ranking-hub-card h3 { font-size: 1.05rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.ranking-hub-card p { font-size: .9rem; color: var(--fg-mute); line-height: 1.5; margin: 0; }

/* SEO content section — long-form editorial copy under the main page UI.
   Wider than the prose-only legal pages so the .seo-row two-column blocks
   (text + sticky SVG) have room to breathe. Aerated typography, sober
   visual blocks (callouts, FAQ accordions, tables, illustrated rows). */
.seo-content {
  max-width: 1120px;
  margin: 3rem auto 2rem;
  padding: 0 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}
.seo-content h1 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 1rem;
  line-height: 1.2;
}
/* Per-page hero image right under the H1. Drop your image at
   /assets/img/seo/<seo-key>.webp (e.g. tag-milf.webp, platform-candy-ai.webp).
   Source dimensions are typically 1672x1648; CSS fills the seo-content width
   and preserves aspect ratio on every breakpoint. */
.seo-content .seo-hero {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 0 2rem;
  border-radius: 18px;
  box-shadow: 0 10px 40px -10px rgba(251, 212, 78, .15),
              0 2px 8px rgba(0, 0, 0, .35);
}
.seo-content figure.seo-hero-wrap {
  margin: 0 0 2rem;
}
.seo-content figure.seo-hero-wrap .seo-hero { margin-bottom: .5rem; }
.seo-content figure.seo-hero-wrap figcaption {
  font-size: .85rem;
  color: var(--fg-mute);
  text-align: center;
  margin: 0;
}
.seo-content h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 2.2rem 0 .8rem;
  line-height: 1.3;
}
.seo-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.5rem 0 .55rem;
}
.seo-content p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fg);
  margin: 0 0 1.1rem;
}
/* Links inside SEO content: visibly distinct from body text. Soft amber
   (close to var(--gold)) reads as "important link" against the dark bg
   without breaking the sober palette. Stronger underline so Google does
   not flag the links as low-contrast / hidden. */
.seo-content a {
  color: #fbd44e;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(251, 212, 78, .45);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.seo-content a:hover {
  color: #fde68a;
  text-decoration-color: #fde68a;
}
.seo-content a:visited { color: #e0b840; }
.seo-content ul, .seo-content ol { padding-left: 1.3rem; margin: 0 0 1.3rem; }
.seo-content li { margin: .35rem 0; line-height: 1.65; }
.seo-content strong { color: var(--fg); font-weight: 700; }
.seo-content em { color: var(--fg-mute); font-style: italic; }
.seo-content blockquote {
  margin: 1.4rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--border-strong);
  background: var(--bg-elev);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--fg-mute);
  font-style: italic;
  font-size: .95rem;
}
/* Tables: wrap in figure that scrolls horizontally on narrow viewports.
   Without this, the table forces the whole document wider than the viewport
   on mobile (5-col platform table = ~600px min), causing horizontal page scroll. */
.seo-content figure {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.seo-content table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .92rem;
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
@media (max-width: 600px) {
  .seo-content table { font-size: .82rem; min-width: 480px; }
  .seo-content th, .seo-content td { padding: .5rem .55rem; }
}
.seo-content th {
  background: var(--bg-soft);
  text-align: left;
  font-weight: 700;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}
.seo-content td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.seo-content tr:last-child td { border-bottom: 0; }
.seo-content tr:hover td { background: var(--bg-soft); }
.seo-content code { background: var(--bg-elev); padding: .12rem .4rem; border-radius: 5px; font-size: .88em; border: 1px solid var(--border); }
.seo-content figure { margin: 1.6rem 0; }
.seo-content figure svg { display: block; margin: 0 auto; max-width: 100%; }
.seo-content figcaption { text-align: center; font-size: .82rem; color: var(--fg-mute); margin-top: .5rem; font-style: italic; }

/* Pull-out callout box — useful for "Why this matters" / "Tip" boxes */
.seo-callout {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg-mute);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.seo-callout svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--fg-mute); margin-top: .15rem; }
.seo-callout p:last-child { margin-bottom: 0; }
.seo-callout strong { display: block; margin-bottom: .25rem; }

/* FAQ accordion — uses native <details> for zero JS + perfect SEO crawlability */
.seo-faq { display: flex; flex-direction: column; gap: .55rem; margin: 1.2rem 0 2rem; }
.seo-faq details {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .15s ease;
}
.seo-faq details[open] { border-color: var(--border-strong); }
.seo-faq summary {
  cursor: pointer;
  padding: .9rem 1.1rem;
  font-weight: 700;
  font-size: .98rem;
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
  user-select: none;
}
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after {
  content: '';
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--fg-mute);
  border-bottom: 2px solid var(--fg-mute);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.seo-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.seo-faq details > div { padding: 0 1.1rem 1rem; font-size: .95rem; line-height: 1.7; color: var(--fg-mute); }
.seo-faq details > div p { margin: 0 0 .7rem; }
.seo-faq details > div p:last-child { margin-bottom: 0; }

/* Alternating two-column SEO blocks: prose on one side, sticky illustration
   on the other. The SVG stays visible while the visitor reads the longer
   paragraph next to it (no awkward whitespace on the art column). */
.seo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin: 2.5rem 0;
}
.seo-row.reverse .seo-row-art  { order: 2; }
.seo-row.reverse .seo-row-text { order: 1; }
.seo-row-art {
  position: sticky;
  top: 90px;
  align-self: start;
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}
.seo-row-art svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  color: var(--fg-mute);
}
.seo-row-text { min-width: 0; }
.seo-row-text > h2:first-child,
.seo-row-text > h3:first-child { margin-top: 0; }
.seo-row-text > :last-child { margin-bottom: 0; }

@media (max-width: 880px) {
  .seo-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 2rem 0;
  }
  .seo-row-art {
    position: static;
    max-width: 280px;
    margin: 0 auto;
    padding: 0;
  }
  .seo-row.reverse .seo-row-art  { order: 1; }
  .seo-row.reverse .seo-row-text { order: 2; }
}

@media (max-width: 720px) {
  .ranking-item { grid-template-columns: 44px 96px 1fr; }
  .ranking-thumb { width: 96px; height: 128px; }
  .ranking-cta { grid-column: 1 / -1; justify-content: center; margin-top: .5rem; }
  .ranking-rank { font-size: 1.8rem; }
}

@media (max-width: 720px) {
  .method-stats { grid-template-columns: repeat(2, 1fr); }
  .method-criteria { grid-template-columns: 1fr; }
}

/* =====================================================================
   AGE GATE
   ===================================================================== */
.age-gate {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 460px;
  width: calc(100% - 2rem);
  border-radius: var(--radius);
}
.age-gate::backdrop { background: rgba(8, 10, 18, .85); backdrop-filter: blur(8px); }
.age-gate-content {
  background: var(--bg-elev);
  color: var(--fg);
  padding: 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.age-gate-content h2 { margin: 0 0 .75rem; font-size: 1.35rem; font-weight: 800; }
.age-gate-content p { color: var(--fg-mute); font-size: .95rem; }
.age-gate-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }

/* =====================================================================
   REVEAL
   ===================================================================== */
/* Reveal: motion disabled per design system — content shows immediately */
.reveal { opacity: 1; transform: none; }
html[data-js="on"] .reveal { opacity: 1; transform: none; }
html[data-js="on"] .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .character-card, .character-card-img img { transition: none !important; }
  html[data-js="on"] .reveal { opacity: 1; transform: none; }
}

.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--fg-mute);
  display: none;
}
.empty-state.is-visible { display: block; }

/* =====================================================================
   SIDEBAR OVERLAY (mobile)
   ===================================================================== */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 18, .65);
  backdrop-filter: blur(4px);
  z-index: 28;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.layout.sidebar-open .sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  .detail-hero { grid-template-columns: 280px 1fr; gap: 1.5rem; }
  .detail-body { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
}

@media (max-width: 880px) {
  .character-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .65rem; }
  .character-card-name { font-size: .92rem; }
  .character-card-tagline { -webkit-line-clamp: 2; font-size: .72rem; }
}

@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 80%;
    max-width: 300px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  .layout.sidebar-open .sidebar { transform: translateX(0); }
  .layout.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  .layout.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar-collapse { display: none; }
  .topbar-hamburger { display: inline-flex; }
  .promo-badge span.promo-text { display: none; }
  .lang-select { display: none; }
  .content { padding: 1rem; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-image { max-width: 280px; }
}

@media (max-width: 520px) {
  .character-grid { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  .topbar { gap: .5rem; padding: 0 .85rem; }
  .search-wrap input { font-size: .85rem; }
  .filter-row > .tab-group:nth-child(2) { display: none; } /* hide sex pill on tiny screens */
  .filter-row { gap: .4rem; }
  .tab { padding: .42rem .75rem; font-size: .8rem; }
  .character-card-tagline { display: none; }
}

@media (max-width: 360px) {
  .character-grid { grid-template-columns: 1fr; }
}