/* ============================================================
   Users — directory + player detail
   ============================================================ */

/* .users-page / .user-page inherit .page's full --content-max width, aligned with the navbar */

/* ── Header ── */

.users-header {
  padding: 0 0 var(--space-5);
}

.users-header-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2);
}

.users-header-sub {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

.users-header-note {
  font-size: var(--text-xs);
  color: var(--fg-4);
  margin-top: var(--space-1);
}

.users-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--fg-4);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.users-back:hover { color: var(--fg-2); }

.users-empty {
  padding: var(--space-8) 0;
  font-size: var(--text-sm);
  color: var(--fg-4);
  text-align: center;
}

/* ── Pagination ── */

.users-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) 0 var(--space-9);
}

.users-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.users-page-btn:hover:not(:disabled) { color: var(--fg-1); border-color: var(--border-strong); }
.users-page-btn:disabled { opacity: 0.35; cursor: default; }

.users-page-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Search + sort controls (uses sitewide .calc-search-input / .sort-dropdown) ── */

.users-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.users-search-input { max-width: 360px; }
.user-inv-search { max-width: 240px; }

/* ── User directory grid ── */

.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  padding-bottom: var(--space-9);
}

.user-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.user-card:hover { border-color: var(--border-default); background: var(--bg-2); text-decoration: none; }

/* Blurred, blown-up avatar tints the card with the user's overall colour. */
.user-card-bg {
  position: absolute;
  inset: -30%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.5);
  opacity: 0.32;
  transform: scale(1.15);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.user-card:hover .user-card-bg { opacity: 0.5; }

.user-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--bg-3);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.user-card-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.user-card-display {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-card-username {
  font-size: var(--text-xs);
  color: var(--fg-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card-stat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-teal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Profile header ── */

.user-profile {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0 var(--space-6);
}

.user-profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--bg-3);
  border: 1px solid var(--border-default);
  flex-shrink: 0;
}

.user-profile-info { min-width: 0; }

.user-profile-name {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}
.user-profile-username {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--brand-teal);
  text-decoration: none;
  margin-top: 2px;
}
.user-profile-username:hover { text-decoration: underline; }

.user-profile-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-4);
}
.user-profile-meta strong { color: var(--fg-2); font-weight: 600; }
.user-profile-updated:empty { display: none; }

/* ── Key stats ── */

.user-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}

.user-stat {
  padding: var(--space-4);
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.user-stat-label {
  font-size: var(--text-xs);
  color: var(--fg-4);
  margin-bottom: 0;
}
.user-stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.user-stat-rap {
  background:
    radial-gradient(120% 160% at 100% 0%, var(--brand-teal-10), transparent 60%),
    var(--bg-1);
}
.user-stat-rap .user-stat-value { color: var(--brand-teal); }

/* Value + rank badge sit on one line, badge to the right of the number. */
.user-stat-valrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Leaderboard-rank badge on a key-stat card (top 1/2/3 tinted gold/silver/bronze). */
.user-stat-rank {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-4);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.user-stat-rank-1 { color: #f5c518; border-color: rgba(245, 197, 24, 0.45); background: rgba(245, 197, 24, 0.10); }
.user-stat-rank-2 { color: #c4cdd6; border-color: rgba(196, 205, 214, 0.45); background: rgba(196, 205, 214, 0.10); }
.user-stat-rank-3 { color: #cd7f32; border-color: rgba(205, 127, 50, 0.45); background: rgba(205, 127, 50, 0.10); }

/* ── Cosmic value (key-stat card; title links to the value source) ── */
.user-stat-cosmic {
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(167, 139, 250, 0.12), transparent 60%),
    var(--bg-1);
}
.user-stat-cosmic .user-stat-value { color: #a78bfa; }
.user-stat-cosmic-link { color: inherit; text-decoration: none; }
.user-stat-cosmic-link:hover { color: #a78bfa; text-decoration: underline; }

/* ── Tabs ── */

.user-tabs {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.user-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  margin-bottom: -1px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-4);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.user-tab:hover { color: var(--fg-2); }
.user-tab.active { color: var(--fg-1); border-bottom-color: var(--brand-teal); }

.user-tab-panels { padding: var(--space-6) 0 var(--space-9); }

.user-tab-panel { display: none; }
.user-tab-panel.active { display: block; }
.user-tab-panel + .user-tab-panel { margin-top: 0; }
.user-tab-panel .user-panel + .user-panel { margin-top: var(--space-4); }

.user-tab-panel .filter-row {
  margin-bottom: var(--space-3);
}

.inv-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
  user-select: none;
}
.inv-filter-check:hover { color: var(--fg-1); }
.inv-filter-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--border-default);
  border-radius: 3px;
  background: var(--bg-2);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.inv-filter-check input[type="checkbox"]:checked {
  background: var(--brand-teal);
  border-color: var(--brand-teal);
}
.inv-filter-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: 2px solid var(--bg-page);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.inv-filter-check input[type="checkbox"]:checked + span { color: var(--brand-teal); }

.user-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-1);
}

.user-loading {
  display: flex;
  justify-content: center;
  padding: var(--space-9) 0;
}

/* ── Inventory grid (compact tiles) ── */

.user-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--space-2);
}

.inv-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  text-align: left;
  overflow: hidden;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.inv-card:hover { border-color: var(--border-default); background: var(--bg-2); text-decoration: none; }
.inv-card-big { cursor: pointer; }

.inv-card-thumb {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-subtle);
}
.inv-card-thumb img {
  width: 74%;
  height: 74%;
  object-fit: contain;
}
.inv-card-count {
  position: absolute;
  top: 3px;
  right: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-1);
  background: var(--bg-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}
.inv-card-stacks {
  position: absolute;
  bottom: 3px;
  left: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  color: var(--brand-teal);
  background: var(--bg-4);
  border: 1px solid var(--border-default);
}

.inv-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 7px;
  min-width: 0;
}
.inv-card-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-card-nums {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.inv-card-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-teal);
  font-variant-numeric: tabular-nums;
}
.inv-card-value.no-rap { color: var(--fg-5); }
.inv-card-rap {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Panels (mastery / statistics / purchases) ── */

.user-panel {
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.user-panel-title {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-2);
}
/* Panel header with a title on the left and a sort control on the right. */
.user-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-2);
  padding-right: var(--space-3);
}
.user-panel-head .user-panel-title { border-bottom: none; background: none; padding-right: 0; }
.user-panel-list { display: flex; flex-direction: column; }
.user-panel-scroll { max-height: 420px; overflow-y: auto; }

.user-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.user-panel-row:last-child { border-bottom: none; }
.user-panel-key {
  font-size: var(--text-xs);
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-panel-val {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.user-panel-end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
/* This player's leaderboard rank for the stat. Only the literal top 1/2/3 are tinted
   gold / silver / bronze; every other rank stays neutral. */
.user-panel-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-4);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.user-panel-rank-1 { color: #f5c518; border-color: rgba(245, 197, 24, 0.45); background: rgba(245, 197, 24, 0.10); }
.user-panel-rank-2 { color: #c4cdd6; border-color: rgba(196, 205, 214, 0.45); background: rgba(196, 205, 214, 0.10); }
.user-panel-rank-3 { color: #cd7f32; border-color: rgba(205, 127, 50, 0.45); background: rgba(205, 127, 50, 0.10); }

/* ── Mastery rows ── */

.mastery-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.mastery-row:last-child { border-bottom: none; }
.mastery-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.mastery-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mastery-level {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.mastery-level-max { color: var(--fg-5); font-weight: 500; }

/* ── Help tooltip (diamonds, etc.) ── */

.user-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  font-size: 9px;
  font-weight: 700;
  text-transform: none;
  color: var(--fg-4);
  cursor: help;
  vertical-align: middle;
}
.user-help-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  width: 160px;
  white-space: normal;
  text-align: center;
  text-transform: none;
  background: var(--bg-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-1);
  box-shadow: var(--shadow-md);
  z-index: 20;
}
.user-help:hover .user-help-tip,
.user-help:focus .user-help-tip { display: block; }

/* ── Stack detail modal ── */

.stack-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(11, 18, 32, 0.72);
}
.stack-modal {
  width: 100%;
  max-width: 920px;
  height: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.stack-modal-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-2);
  flex-shrink: 0;
}
.stack-modal-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.stack-modal-back:hover { color: var(--fg-1); border-color: var(--border-strong); }
.stack-modal-heading {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.stack-modal-title {
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stack-modal-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg-3);
  background: var(--bg-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.stack-modal-link { flex-shrink: 0; }
.stack-modal-close {
  background: none;
  border: none;
  color: var(--fg-4);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.stack-modal-close:hover { color: var(--fg-1); }
.stack-modal-body {
  flex: 1;
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
}
.stack-loading { padding: var(--space-8) 0; text-align: center; color: var(--fg-4); font-size: var(--text-sm); }

/* Card grid view (one card per copy) */

.stack-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--space-3);
}

.stack-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.stack-card:hover { border-color: var(--border-default); background: var(--bg-3); text-decoration: none; }

.stack-card-thumb {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-subtle);
}
.stack-card-thumb img { width: 70%; height: 70%; object-fit: contain; }
.stack-card-level {
  position: absolute;
  top: 4px;
  right: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-teal);
  background: var(--bg-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  font-variant-numeric: tabular-nums;
}

.stack-card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px 8px;
}
.stack-card-idx {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--fg-2);
}
.stack-card-owners {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Detail view */

.stack-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.stack-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.stack-field-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}
.stack-field-val {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.stack-field-level { color: var(--brand-teal); }

/* Sort control for the copies list — reuses the sitewide .sort-dropdown styling. */
.stack-sort { margin-bottom: 16px; }

.stack-detail-section { margin-bottom: var(--space-5); }
.stack-detail-section:last-child { margin-bottom: 0; }
.stack-detail-section .stack-field-label { margin-bottom: var(--space-2); }

.stack-charms-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stack-charm {
  position: relative;
  display: inline-flex;
}
.stack-charm-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: 4px;
}
.stack-charm-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  white-space: nowrap;
  background: var(--bg-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-1);
  box-shadow: var(--shadow-md);
  z-index: 20;
}
.stack-charm:hover .stack-charm-tip,
.stack-charm:focus .stack-charm-tip { display: block; }
.stack-none { color: var(--fg-5); font-size: var(--text-sm); }

.stack-owners-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.stack-owner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-2);
}
.stack-owner-row:not(:last-child) { border-bottom: 1px solid var(--border-subtle); }
.stack-owner {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--brand-teal);
  text-decoration: none;
}
.stack-owner:hover { text-decoration: underline; }
.stack-owner-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-4);
}

.user-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4);
}
.user-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--fg-2);
  background: var(--bg-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}
.user-tag-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Responsive ── */

@media (max-width: 920px) {
  .user-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .users-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .user-stats { grid-template-columns: repeat(2, 1fr); }
  .user-profile { gap: var(--space-4); }
  .user-profile-avatar { width: 72px; height: 72px; }
  .user-profile-name { font-size: var(--text-2xl); }
  .user-section-head { flex-direction: column; align-items: stretch; }
  .user-inv-search { max-width: none; }
  .user-inv-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .user-tabs { gap: var(--space-3); }
  .user-tab { padding: var(--space-3) var(--space-2); font-size: var(--text-xs); }
  .stack-detail-stats { grid-template-columns: repeat(2, 1fr); }
  .stack-card-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .users-controls { flex-direction: column; align-items: stretch; }
  .users-search-input { max-width: none; }
}

/* ── Leaderboards ── */

.users-viewtabs {
  display: flex;
  gap: var(--space-5);
  margin: var(--space-2) 0 var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.users-viewtab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  margin-bottom: -1px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-4);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.users-viewtab:hover { color: var(--fg-2); }
.users-viewtab.active { color: var(--fg-1); border-bottom-color: var(--brand-teal); }

/* Grand overall ranking */
.lb-overall {
  margin-bottom: var(--space-9);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 50% 0%, var(--brand-teal-10), transparent 60%),
    var(--bg-1);
}
.lb-overall-head { text-align: center; margin-bottom: var(--space-6); }
.lb-overall-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.lb-overall-sub { font-size: var(--text-sm); color: var(--fg-4); margin-top: var(--space-1); }
.lb-overall-title .user-help { width: 16px; height: 16px; font-size: 10px; vertical-align: middle; }
.lb-overall-title .user-help-tip { width: 230px; font-weight: 500; }

.lb-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.lb-podium-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 1 0;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3) var(--space-4);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-top-width: 3px;
  border-radius: 3px;
  color: var(--fg-1);
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lb-podium-card:hover { text-decoration: none; }
/* Blurred, blown-up avatar tints the podium card (matches .user-card-bg). */
.lb-podium-bg {
  position: absolute;
  inset: -30%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.5);
  opacity: 0.34;
  transform: scale(1.15);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.lb-podium-card:hover .lb-podium-bg { opacity: 0.55; }
.lb-podium-1 { border-top-color: #f5c518; padding-top: var(--space-7); }
.lb-podium-2 { border-top-color: #c4cdd6; }
.lb-podium-3 { border-top-color: #cd7f32; }
.lb-podium-place {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.lb-podium-1 .lb-podium-place { color: #f5c518; }
.lb-podium-2 .lb-podium-place { color: #c4cdd6; }
.lb-podium-3 .lb-podium-place { color: #cd7f32; }
.lb-podium-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-3);
}
.lb-podium-1 .lb-podium-avatar { width: 72px; height: 72px; }
.lb-podium-name {
  max-width: 100%;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-podium-score {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-teal);
  font-variant-numeric: tabular-nums;
}
.lb-overall-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 460px;
}
.lb-overall-list .lb-row { padding: var(--space-2) var(--space-3); }
.lb-overall-list .lb-row + .lb-row { border-top: 1px solid var(--border-subtle); }

.lb-section { margin-bottom: var(--space-9); }
.lb-section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--fg-1);
  margin-bottom: var(--space-4);
}

/* Every meta stat gets its own compact, clearly-titled card; the grid lays them all
   out at once so no selection is needed to see which leaderboard is which. */
.lb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.lb-card {
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.lb-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--fg-1);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.lb-card-list { list-style: none; margin: 0; padding: 0; }
.lb-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.lb-row + .lb-row { border-top: 1px solid var(--border-subtle); }

.lb-rank {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--fg-4);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lb-rank-1 { color: #f5c518; }
.lb-rank-2 { color: #c4cdd6; }
.lb-rank-3 { color: #cd7f32; }

.lb-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--fg-1);
}
.lb-user:hover { text-decoration: none; }
.lb-user:hover .lb-name { color: var(--brand-teal); }
.lb-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
  flex-shrink: 0;
}
.lb-name {
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.lb-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .lb-grid { grid-template-columns: 1fr; }
  .lb-overall { padding: var(--space-4); }
  .lb-podium { gap: var(--space-2); }
  .lb-podium-card { padding: var(--space-4) var(--space-2) var(--space-3); }
  .lb-podium-1 { padding-top: var(--space-5); }
  .lb-podium-avatar { width: 44px; height: 44px; }
  .lb-podium-1 .lb-podium-avatar { width: 56px; height: 56px; }
}