/* ==========================================================================
   Spicy VTubers — stylesheet
   ========================================================================== */

:root {
  --bg: #0f0a12;
  --bg-alt: #171019;
  --surface: #1c1420;
  --surface-hover: #241a2b;
  --border: #34222f;
  --text: #f3e9f0;
  --text-muted: #b9a6b8;
  --accent: #ff3d6e;
  --accent-2: #ff8a3d;
  --accent-soft: rgba(255, 61, 110, 0.15);
  --focus: #ffb84d;
  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --gradient: linear-gradient(135deg, var(--accent), var(--accent-2));
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------- Header ---------------------------------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: rgba(15, 10, 18, 0.75);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.header-titles {
  min-width: 0;
}

.last-updated {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-mark {
  filter: drop-shadow(0 0 6px rgba(255, 61, 110, 0.6));
}

.brand-accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ---------------------------------- Layout ---------------------------------- */

.page {
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 420px;
}

.search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: var(--text-muted);
  pointer-events: none;
}

#search-input {
  width: 100%;
  padding: 0.7rem 0.9rem 0.7rem 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#search-input::placeholder {
  color: var(--text-muted);
}

#search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.result-count {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
  white-space: nowrap;
}

.mobile-sort-wrap {
  display: none;
}

.mobile-sort {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
}

.mobile-sort:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------------------------------- Table ---------------------------------- */

.table-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.creator-table {
  width: 100%;
  border-collapse: collapse;
}

.creator-table thead th {
  text-align: left;
  padding: 0.9rem 1.1rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.creator-table thead th:hover,
.creator-table thead th:focus-visible {
  color: var(--text);
  background: var(--surface-hover);
}

.creator-table thead th:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.creator-table thead th span {
  vertical-align: middle;
}

.sort-icon {
  display: inline-block;
  width: 0.7em;
  margin-left: 0.35em;
  opacity: 0.4;
}

.sort-icon::after {
  content: "\2195"; /* up-down arrow */
}

th[aria-sort="ascending"] .sort-icon {
  opacity: 1;
  color: var(--accent);
}
th[aria-sort="ascending"] .sort-icon::after {
  content: "\2191";
}

th[aria-sort="descending"] .sort-icon {
  opacity: 1;
  color: var(--accent);
}
th[aria-sort="descending"] .sort-icon::after {
  content: "\2193";
}

.creator-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.creator-table tbody tr:last-child {
  border-bottom: none;
}

.creator-table tbody tr:hover {
  background: var(--surface-hover);
}

.creator-table tbody td {
  padding: 1rem 1.1rem;
  vertical-align: middle;
}

.name-cell {
  display: flex;
  align-items: center;
  font-weight: 600;
}

.name-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.name-link:hover,
.name-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.avatar {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  /* Negative vertical margin keeps the avatar's contribution to the row's
     flow height identical to the old 28px size, so rows (and the mobile
     card layout, which shares this same class) don't grow taller — the
     larger avatar simply overflows into the existing cell padding. */
  margin: -8px 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.name-link:hover .avatar,
.name-link:focus-visible .avatar {
  border-color: var(--accent);
  transform: scale(1.08);
}

.avatar-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
}

.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.avatar-img.is-loaded {
  opacity: 1;
}

.fansly-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(38, 152, 245, 0.14);
  color: #7cc4fb;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

.fansly-pill:hover {
  background: rgba(38, 152, 245, 0.24);
  transform: translateY(-1px);
}

.fansly-pill svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.x-handles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.x-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.85rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.x-pill:hover {
  border-color: var(--accent-2);
  transform: translateY(-1px);
}

.x-pill svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.empty-state {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  margin: 0;
}

/* ---------------------------------- Footer ---------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------------------------------- Responsive ---------------------------------- */

@media (max-width: 720px) {
  .last-updated {
    display: none;
  }

  .mobile-sort-wrap {
    display: block;
    width: 100%;
    order: 3;
  }

  .creator-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .creator-table,
  .creator-table tbody,
  .creator-table tr {
    display: block;
    width: 100%;
  }

  .creator-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
    padding: 1rem 1.1rem;
    border-bottom: 8px solid var(--bg);
  }

  .creator-table tbody td {
    display: block;
    width: auto;
    padding: 0;
    text-align: left;
  }

  .creator-table tbody td[data-label="Twitch"] {
    width: 100%;
    font-size: 1.05rem;
  }

  /* The avatar's negative vertical margin (see .avatar comment) relies on
     the desktop cell's padding to absorb its overflow. Here cells have no
     padding, so that overflow instead gets counted asymmetrically into the
     channel cell's auto height, which throws off the row's
     align-items: center against the Fansly/X pills. Cancel the trick so the
     avatar contributes its full, symmetric height to the flex layout. */
  .creator-table tbody .avatar {
    margin: 0;
  }

  /* Turning the channel cell into a flex container (instead of leaving the
     name link as inline content) sizes the cell to the link itself, rather
     than to the surrounding text line's font metrics, keeping it aligned
     with the Fansly/X pills. */
  .creator-table tbody td.name-cell {
    display: flex;
    align-items: center;
  }

  .creator-table tbody td:empty {
    display: none;
  }

  .x-handles {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding: 1rem;
  }

  .page {
    padding: 1.5rem 1rem 2rem;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-wrap {
    max-width: none;
  }

  .result-count {
    text-align: right;
  }
}