/* ═══════════════════════════════════════════════════════════
   ONE WAY — ONYX ENGINE v4.0 CSS
   Professional eSports Clan Hub • Dark/Light Mode
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Theme Variables ── */
:root, [data-theme="dark"] {
  --ow-bg: #0a0a0f;
  --ow-bg-alt: #111118;
  --ow-surface: #16161f;
  --ow-surface-hover: #1e1e2a;
  --ow-surface-active: #252535;
  --ow-border: rgba(255,255,255,0.06);
  --ow-border-hover: rgba(255,255,255,0.12);
  --ow-text: #f0f0f5;
  --ow-text-dim: #9595a8;
  --ow-text-muted: #55556a;
  --ow-accent: #3b82f6;
  --ow-accent-dim: rgba(59,130,246,0.15);
  --ow-gold: #f59e0b;
  --ow-silver: #94a3b8;
  --ow-bronze: #d97706;
  --ow-green: #10b981;
  --ow-red: #ef4444;
  --ow-purple: #8b5cf6;
  --ow-glass: rgba(16,16,30,0.85);
  --ow-glass-border: rgba(255,255,255,0.08);
  --ow-shadow: 0 8px 32px rgba(0,0,0,0.4);
  --ow-shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --ow-radius: 16px;
  --ow-radius-sm: 10px;
  --ow-radius-xs: 6px;
  --ow-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ow-font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --ow-modal-bg: rgba(0,0,0,0.7);
  --ow-modal-surface: #16161f;
}

[data-theme="light"] {
  --ow-bg: #f5f5f7;
  --ow-bg-alt: #ebebef;
  --ow-surface: #ffffff;
  --ow-surface-hover: #f0f0f5;
  --ow-surface-active: #e5e5ea;
  --ow-border: rgba(0,0,0,0.08);
  --ow-border-hover: rgba(0,0,0,0.15);
  --ow-text: #1a1a2e;
  --ow-text-dim: #4a4a60;
  --ow-text-muted: #6b6b85;
  --ow-accent: #2563eb;
  --ow-accent-dim: rgba(37,99,235,0.1);
  --ow-glass: rgba(255,255,255,0.9);
  --ow-glass-border: rgba(0,0,0,0.06);
  --ow-shadow: 0 4px 20px rgba(0,0,0,0.08);
  --ow-shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --ow-modal-bg: rgba(0,0,0,0.4);
  --ow-modal-surface: #ffffff;
}

/* ── Base Reset ── */
.ow-clan-hub {
  font-family: var(--ow-font);
  background: var(--ow-bg);
  color: var(--ow-text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ow-clan-hub * { box-sizing: border-box; margin: 0; padding: 0; }
.ow-clan-hub img { max-width: 100%; }

/* ── Animations ── */
@keyframes owSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes owFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes owPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes owShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes owSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes owScaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.animate-slide-up {
  animation: owSlideUp 0.5s ease-out forwards;
  opacity: 0;
}
.animate-fade-in {
  animation: owFadeIn 0.3s ease-out forwards;
}
.animate-scale-in {
  animation: owScaleIn 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ── Loader ── */
.onyx-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.onyx-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--ow-border);
  border-top-color: var(--ow-accent);
  border-radius: 50%;
  animation: owSpin 0.8s linear infinite;
}

/* ── Text Utilities ── */
.text-gradient {
  background: linear-gradient(135deg, var(--ow-text) 0%, var(--ow-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════
   DIRECTORY VIEW (Ranking / Podium)
   ══════════════════════════════════════ */

.ow-directory-hero {
  text-align: center;
  padding: 80px 20px 60px;
  border-bottom: 1px solid var(--ow-border);
}
.ow-directory-hero h1 {
  font-family: var(--ow-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.ow-directory-hero p {
  color: var(--ow-text-dim);
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto;
  font-weight: 500;
}

/* Badge */
.ow-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ow-accent-dim);
  color: var(--ow-accent);
  border: 1px solid rgba(59,130,246,0.2);
}
.ow-badge-official {
  background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05));
  color: var(--ow-gold);
  border-color: rgba(245,158,11,0.3);
}

/* Podium */
.esports-podium {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
  padding: 40px 0;
  max-width: 1000px;
  margin: 0 auto;
}
.esports-podium > div {
  flex: 1;
  max-width: 320px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.esports-podium > div:hover { transform: translateY(-10px) scale(1.02); }

.podium-card {
  position: relative;
  background: var(--ow-surface);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: auto;
  max-width: 340px; /* Prevent over-expansion */
}
.podium-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.05);
  pointer-events: none;
}

.podium-banner {
  width: 100%;
  height: 140px;
  object-fit: cover;
  filter: brightness(0.7);
  background: var(--ow-bg-alt);
}
.podium-logo-floating {
  width: 84px;
  height: 84px;
  border-radius: 22px; /* iOS Squircle-ish */
  border: 4px solid var(--ow-surface);
  background: var(--ow-surface);
  object-fit: cover;
  margin: -42px auto 0;
  position: relative;
  z-index: 2;
  box-shadow: var(--ow-shadow-lg);
}

.rank-1 .podium-banner { height: 160px; filter: brightness(0.85); }
.rank-1 .podium-card { border-color: rgba(245,158,11,0.2); }
.rank-1 .podium-logo-floating { width: 100px; height: 100px; margin-top: -50px; border-color: var(--ow-gold); }

.podium-body {
  padding: 16px 20px 24px;
  text-align: center;
}
.podium-rank {
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

/* Leaderboard Rows */
.esports-leaderboard { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

.leaderboard-row {
  display: grid;
  grid-template-columns: 60px 48px 1fr 120px 100px 120px;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 18px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.leaderboard-row:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  transform: scale(1.01);
}
.lb-rank { font-size: 1.4rem; font-weight: 800; color: var(--ow-text-muted); opacity: 0.5; }
.lb-logo { width: 44px; height: 44px; flex-shrink: 0; }
.lb-logo img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255,255,255,0.15); }

/* Apple-style Premium Button */
.btn-apple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-apple:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.btn-apple:active { transform: scale(0.96); }

.btn-apple-glow {
  background: var(--ow-accent);
  border: none;
  box-shadow: 0 4px 20px rgba(59,130,246,0.5);
}
.btn-apple-glow:hover {
  box-shadow: 0 8px 30px rgba(59,130,246,0.7);
}

/* ══════════════════════════════════════
   CLAN HUB DETAIL VIEW
   ══════════════════════════════════════ */

/* Hero Banner */
.ow-hub-banner {
  position: relative;
  height: 50vh;
  min-height: 320px;
  max-height: 500px;
  overflow: hidden;
}
.ow-hub-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
  transform: scale(1.05);
}
.ow-hub-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ow-bg) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}
/* FIX MOBILE-NAV-01: this element used to be centered with the classic
   `left:50%; transform: translateX(-50%)` pattern, but the same element
   also has the `.animate-slide-up` class. The slideUp keyframe ends with
   `transform: translateY(0)` which COMPLETELY OVERRIDES the centering
   transform — so the element ended up positioned at left:50% with zero
   horizontal translation, pushing the entire clan header off the right
   edge of the viewport (clan name "ONE WAY |" got cut off, description
   truncated, etc.). Switching to the `left:0; right:0; margin:0 auto`
   centering pattern doesn't depend on transform, so the animation can
   own transform exclusively. */
.ow-hub-banner-content {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 1320px;
  padding: 0 40px;
  display: flex;
  align-items: flex-end;
  gap: 32px;
  box-sizing: border-box;
}
.ow-hub-logo {
  width: 140px;
  height: 140px;
  border-radius: 28px;
  border: 3px solid var(--ow-glass-border);
  box-shadow: var(--ow-shadow-lg);
  object-fit: cover;
  flex-shrink: 0;
}
.ow-hub-info { flex: 1; padding-bottom: 8px; }
.ow-hub-info h1 {
  font-family: var(--ow-font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.ow-hub-info p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.7);
  max-width: 600px;
  font-weight: 500;
}

/* Back Button */
.ow-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--ow-glass);
  border: 1px solid var(--ow-glass-border);
  border-radius: var(--ow-radius-sm);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  backdrop-filter: blur(12px);
  flex-shrink: 0;
  margin-bottom: 16px;
}
.ow-back-btn:hover { background: rgba(255,255,255,0.15); }

/* Tab Navigation */
.ow-hub-tabs {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ow-bg-alt);
  border-bottom: 1px solid var(--ow-border);
  backdrop-filter: blur(12px);
}
.ow-hub-tabs-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ow-hub-tabs-inner::-webkit-scrollbar { display: none; }

.ow-tab-btn {
  background: none;
  border: none;
  padding: 16px 24px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ow-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  position: relative;
}
.ow-tab-btn:hover { color: var(--ow-text-dim); }
.ow-tab-btn.active {
  color: var(--ow-accent);
  border-bottom-color: var(--ow-accent);
}

/* Tab Content */
.ow-tab-content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px;
  min-height: 50vh;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ── Stat Cards ── */
.ow-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.ow-stat-card {
  background: var(--ow-surface);
  border: 1px solid var(--ow-border);
  border-radius: var(--ow-radius);
  padding: 24px;
  transition: all 0.2s;
}
.ow-stat-card:hover {
  border-color: var(--ow-border-hover);
  box-shadow: var(--ow-shadow);
}
.ow-stat-card .label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ow-text-muted);
  margin-bottom: 8px;
}
.ow-stat-card .value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--ow-text);
  letter-spacing: -0.03em;
}
.ow-stat-card.accent .value { color: var(--ow-accent); }

/* ── Section Card ── */
.ow-section-card {
  background: var(--ow-surface);
  border: 1px solid var(--ow-border);
  border-radius: var(--ow-radius);
  padding: 32px;
  margin-bottom: 24px;
}
.ow-section-card h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ══════════════════════════════════════
   MEMBER DIRECTORY
   ══════════════════════════════════════ */

/* Search & Filters */
.ow-search-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ow-search-input {
  flex: 1;
  min-width: 200px;
  padding: 12px 18px;
  background: var(--ow-bg-alt);
  border: 1px solid var(--ow-border);
  border-radius: var(--ow-radius-sm);
  color: var(--ow-text);
  font-size: 0.9rem;
  font-family: var(--ow-font);
  font-weight: 500;
  outline: none;
  transition: all 0.2s;
}
.ow-search-input::placeholder { color: var(--ow-text-muted); }
.ow-search-input:focus { border-color: var(--ow-accent); box-shadow: 0 0 0 3px var(--ow-accent-dim); }

.ow-filter-btn {
  padding: 10px 18px;
  background: var(--ow-bg-alt);
  border: 1px solid var(--ow-border);
  border-radius: var(--ow-radius-sm);
  color: var(--ow-text-dim);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.ow-filter-btn:hover { border-color: var(--ow-border-hover); color: var(--ow-text); }
.ow-filter-btn.active {
  background: var(--ow-accent-dim);
  border-color: var(--ow-accent);
  color: var(--ow-accent);
}

.ow-sort-select {
  padding: 10px 16px;
  background: var(--ow-bg-alt);
  border: 1px solid var(--ow-border);
  border-radius: var(--ow-radius-sm);
  color: var(--ow-text);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--ow-font);
  cursor: pointer;
  outline: none;
}

/* Member Grid */
.ow-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.ow-member-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--ow-surface);
  border: 1px solid var(--ow-border);
  border-radius: var(--ow-radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}
.ow-member-card:hover {
  background: var(--ow-surface-hover);
  border-color: var(--ow-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--ow-shadow);
}

.ow-member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ow-border);
  flex-shrink: 0;
}

.ow-member-info { flex: 1; min-width: 0; }
.ow-member-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ow-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ow-member-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--ow-text-muted);
  font-weight: 600;
}
.ow-member-kills {
  font-weight: 800;
  color: var(--ow-accent);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Phase badges */
.ow-phase-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.ow-phase-badge.p1 { background: linear-gradient(135deg,#10b981,#059669); color: #fff; }
.ow-phase-badge.p2 { background: linear-gradient(135deg,#3b82f6,#1d4ed8); color: #fff; }
.ow-phase-badge.p3 { background: linear-gradient(135deg,#8b5cf6,#6d28d9); color: #fff; }
.ow-phase-badge.p4 { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; }
.ow-phase-badge.p5 { background: linear-gradient(135deg,#ef4444,#b91c1c); color: #fff; }

/* Pagination */
.ow-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--ow-border);
}
.ow-page-btn {
  padding: 8px 16px;
  background: var(--ow-surface);
  border: 1px solid var(--ow-border);
  border-radius: var(--ow-radius-xs);
  color: var(--ow-text-dim);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.ow-page-btn:hover { border-color: var(--ow-accent); color: var(--ow-accent); }
.ow-page-btn.active { background: var(--ow-accent); color: #fff; border-color: var(--ow-accent); }
.ow-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.ow-page-info { font-size: 0.8rem; color: var(--ow-text-muted); font-weight: 600; padding: 0 12px; }

/* ══════════════════════════════════════
   USER PROFILE MODAL
   ══════════════════════════════════════ */
.ow-modal-overlay,
.ow-modal-overlay * { box-sizing: border-box; }
.ow-modal-overlay h1, .ow-modal-overlay h2, .ow-modal-overlay h3,
.ow-modal-overlay h4, .ow-modal-overlay p, .ow-modal-overlay div,
.ow-modal-overlay span, .ow-modal-overlay a, .ow-modal-overlay img,
.ow-modal-overlay button, .ow-modal-overlay ul, .ow-modal-overlay li {
  margin: 0;
  padding: 0;
}
.ow-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ow-modal-bg);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: owFadeIn 0.2s ease-out;
}
.ow-modal {
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--ow-modal-surface) !important;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--ow-radius);
  box-shadow: var(--ow-shadow-lg);
  animation: owScaleIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] .ow-modal {
  border-color: rgba(0,0,0,0.08);
}
.ow-modal::-webkit-scrollbar { width: 4px; }
.ow-modal::-webkit-scrollbar-thumb { background: var(--ow-text-muted); border-radius: 4px; }

.ow-modal-banner-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background-color: #08080f;
  background-image:
    radial-gradient(at 0% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(225,39%,20%,1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(225,39%,30%,1) 0, transparent 50%);
}
[data-theme="light"] .ow-modal-banner-wrap {
  background-color: #e8e8ee;
  background-image:
    radial-gradient(at 0% 0%, hsla(225,30%,80%,1) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(225,40%,90%,1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(225,30%,80%,1) 0, transparent 50%);
}
.ow-modal-banner {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  transition: opacity .4s ease;
}
.ow-modal-banner-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ow-modal-surface) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
  z-index: 2;
}
.ow-modal-head {
  padding: 0 28px;
  margin-top: -50px;
  position: relative;
  z-index: 3;
}
.ow-modal-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--ow-modal-surface);
  object-fit: cover;
  box-shadow:
    0 0 0 2px var(--ow-accent-dim),
    0 8px 24px rgba(0,0,0,0.35);
  background: var(--ow-bg-alt);
  position: relative;
  z-index: 3;
}
.ow-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform .15s;
  backdrop-filter: blur(6px);
  z-index: 10;
}
.ow-modal-close:hover { background: rgba(0,0,0,0.78); transform: scale(1.06); }

.ow-modal-body {
  padding: 16px 28px 28px;
}
.ow-modal-name {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ow-text);
  margin-bottom: 4px;
}
.ow-modal-username {
  font-size: 0.9rem;
  color: var(--ow-text-dim);
  font-weight: 600;
  margin-bottom: 20px;
}

.ow-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.ow-modal-stat {
  text-align: center;
  padding: 18px 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-radius: var(--ow-radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, border-color .25s ease;
}
.ow-modal-stat:hover { transform: translateY(-2px); border-color: var(--ow-accent-dim); }
[data-theme="light"] .ow-modal-stat {
  background: linear-gradient(135deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));
  border-color: rgba(0,0,0,0.08);
}
.ow-modal-stat .val {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--ow-accent);
  display: block;
}
.ow-modal-stat .lbl {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ow-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.ow-modal-section {
  margin-bottom: 20px;
}
.ow-modal-section h4 {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ow-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.ow-modal-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ow-role-pill {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid var(--ow-border);
  background: var(--ow-bg-alt);
  color: var(--ow-text-dim);
}
.ow-role-pill-divider {
  opacity: 0.45;
  font-style: italic;
  background: transparent !important;
  border-style: dashed !important;
  border-color: var(--ow-text-muted) !important;
  color: var(--ow-text-muted) !important;
  font-size: 0.65rem;
  letter-spacing: -0.02em;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 10px;
}
.ow-role-toggle {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px dashed var(--ow-accent);
  background: transparent;
  color: var(--ow-accent);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.ow-role-toggle:hover { background: var(--ow-accent-dim); color: var(--ow-text); }
.ow-role-count {
  display: inline-block;
  font-size: 0.62rem;
  color: var(--ow-text-muted);
  font-weight: 800;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--ow-bg-alt);
  border-radius: 10px;
  letter-spacing: 0;
}
.ow-modal-roles-hidden { display: contents; }
.ow-modal-roles-hidden[hidden] { display: none; }

.ow-modal-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--ow-accent);
  color: #fff;
  border-radius: var(--ow-radius-sm);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.2s;
  margin-top: 4px;
}
.ow-modal-link:hover { filter: brightness(1.1); }

.ow-modal-detail {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--ow-border);
  font-size: 0.85rem;
}
.ow-modal-detail:last-child { border-bottom: none; }
.ow-modal-detail .key { color: var(--ow-text-muted); font-weight: 600; }
.ow-modal-detail .val { color: var(--ow-text); font-weight: 700; }

/* ══════════════════════════════════════
   LEADERBOARD TAB
   ══════════════════════════════════════ */

.ow-lb-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ow-lb-pill {
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--ow-bg-alt);
  border: 1px solid var(--ow-border);
  color: var(--ow-text-dim);
}
.ow-lb-pill:hover { border-color: var(--ow-border-hover); }
.ow-lb-pill.active { background: var(--ow-accent); color: #fff; border-color: var(--ow-accent); }

.ow-lb-table {
  width: 100%;
}
.ow-lb-row {
  display: grid;
  grid-template-columns: 50px 48px 1fr 100px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--ow-radius-xs);
  transition: background 0.15s;
  cursor: pointer;
}
.ow-lb-row:hover { background: var(--ow-surface-hover); }
.ow-lb-row:nth-child(even) { background: var(--ow-bg-alt); }
.ow-lb-row:nth-child(even):hover { background: var(--ow-surface-hover); }

.ow-lb-row .rank {
  font-family: var(--ow-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}
.ow-lb-row:nth-child(1) .rank { color: var(--ow-gold); }
.ow-lb-row:nth-child(2) .rank { color: var(--ow-silver); }
.ow-lb-row:nth-child(3) .rank { color: var(--ow-bronze); }

.ow-lb-row .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ow-lb-row .name { font-weight: 700; font-size: 0.9rem; }
.ow-lb-row .score { font-weight: 800; color: var(--ow-accent); text-align: right; font-size: 0.95rem; }

/* ══════════════════════════════════════
   ROSTER TAB
   ══════════════════════════════════════ */

.ow-roster-section { margin-bottom: 40px; }
.ow-roster-section h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ow-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ow-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* ══════════════════════════════════════
   STAFF TAB
   ══════════════════════════════════════ */

.ow-staff-section { margin-bottom: 36px; }
.ow-staff-section h3 {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ow-text-muted);
  margin-bottom: 16px;
}
.ow-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

/* ═══ Empty State ═══ */
.ow-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ow-text-muted);
}
.ow-empty-icon { font-size: 3rem; margin-bottom: 16px; }
.ow-empty h3 { font-size: 1.2rem; font-weight: 700; color: var(--ow-text-dim); margin-bottom: 8px; }
.ow-empty p { font-size: 0.9rem; }

/* ═══ Error State ═══ */
.ow-error-card {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 32px;
  background: var(--ow-surface);
  border: 1px solid var(--ow-border);
  border-radius: var(--ow-radius);
}

/* ═══ Responsive ═══ */
@media (max-width: 768px) {
  .ow-hub-banner-content { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 20px; }
  .ow-hub-logo { width: 80px; height: 80px; border-radius: 18px; }
  .ow-hub-tabs-inner { padding: 0 16px; }
  .ow-tab-content { padding: 24px 16px; }
  .ow-member-grid { grid-template-columns: 1fr; }
  .ow-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .leaderboard-row { grid-template-columns: 40px 40px 1fr 80px; }
  .leaderboard-row .lb-metric:last-of-type { display: none; }
  .leaderboard-row .esports-btn { display: none; }
  .esports-podium { flex-direction: column; align-items: center; }
  .esports-podium > div { max-width: 100%; }
  .ow-modal { max-width: 100%; }
  .ow-modal-stats { grid-template-columns: repeat(2, 1fr); }
  .ow-lb-row { grid-template-columns: 40px 36px 1fr 70px; }
  .ow-search-bar { flex-direction: column; }
  .ow-directory-hero { padding: 50px 16px 40px; }
}

@media (max-width: 480px) {
  .ow-modal-overlay { padding: 8px; }
  .ow-modal-banner-wrap, .ow-modal-banner { height: 130px; }
  .ow-modal-head { padding: 0 18px; }
  .ow-modal-body { padding: 12px 18px 22px; }
  .ow-modal-avatar { width: 78px; height: 78px; }
  .ow-modal-stats { gap: 8px; }
  .ow-modal-stat { padding: 12px 4px; }
}

/* ══════════════════════════════════════
   LEADER STACK (Directory)
   ══════════════════════════════════════ */
.ow-leader-pile {
  display: flex;
  align-items: center;
  margin-top: 10px;
  gap: 0;
  justify-content: center;
}
.ow-leader-avatar-mini {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ow-surface);
  margin-left: -8px;
  transition: transform 0.2s, z-index 0s;
  cursor: help;
  background: var(--ow-bg-alt);
  position: relative;
}
.ow-leader-avatar-mini:first-child { margin-left: 0; }
.ow-leader-avatar-mini:hover {
  transform: translateY(-4px) scale(1.2);
  z-index: 10;
  border-color: var(--ow-accent);
}

/* Row specifically for the leaderboard rows (left aligned) */
.lb-leaders {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.podium-leaders {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

/* ══════════════════════════════════════
   OVERVIEW GRID (2-Column)
   ══════════════════════════════════════ */
.ow-overview-grid {
  display: grid;
  grid-template-columns: 2fr 350px;
  gap: 24px;
}
.ow-col-main { display: flex; flex-direction: column; gap: 24px; }
.ow-col-side { display: flex; flex-direction: column; gap: 24px; }

@media (max-width: 1000px) {
  .ow-overview-grid { grid-template-columns: 1fr; }
}

/* MINI MEMBER CARDS (Overview) */
.ow-member-grid.mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.ow-member-card.mini {
  padding: 8px;
  background: var(--ow-bg-alt);
  border-radius: var(--ow-radius-xs);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  border: 1px solid var(--ow-border);
}
.ow-member-card.mini:hover {
  transform: translateY(-2px);
  background: var(--ow-surface-hover);
  border-color: var(--ow-accent-dim);
}
.ow-member-card.mini .ow-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.ow-member-card.mini .ow-member-name {
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.7rem;
}

/* ══════════════════════════════════════
   PREMIUM DASHBOARD 2.0 (Apple Dark Modern)
   ══════════════════════════════════════ */

/* Banner & Logo Containment */
.podium-banner-wrapper {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: var(--ow-bg-alt);
}
.rank-1 .podium-banner-wrapper { height: 160px; }

.podium-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.podium-card:hover .podium-banner { transform: scale(1.1); }

.podium-banner-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.85));
}

.podium-name {
  font-size: 1.3rem;
  font-weight: 950;
  margin-top: 10px;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 4px 12px rgba(0,0,0,0.5);
  text-transform: uppercase;
}

/* Metrics Dashboard */
.ow-card-metrics {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 20px 0;
  padding: 12px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
}
.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 65px;
}
.metric .icon { font-size: 1.1rem; margin-bottom: 4px; }
.metric .val { font-size: 1rem; font-weight: 900; color: var(--ow-accent); }
.metric.strikes .val { color: #ff3b30; }

.ow-card-footer {
  margin-top: auto;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.stack-label {
  font-size: 0.65rem;
  font-weight: 900;
  color: var(--ow-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
  opacity: 0.7;
}

/* LEADER PILE (Horizontal Stacks) */
.ow-leader-pile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: -8px; /* Negative margin for overlapping effect if desired, but 6px gap for now */
  margin-bottom: 5px;
}
.ow-leader-pile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-width: 100%;
  overflow: hidden;
}
.ow-leader-avatar-mini {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid var(--ow-surface);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ow-bg-alt);
  transition: transform 0.2s, border-color 0.2s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.ow-leader-avatar-mini:hover {
  transform: scale(1.1) translateY(-2px);
  z-index: 10;
  border-color: var(--ow-accent);
}
.ow-leader-avatar-mini:hover {
  transform: scale(1.2) translateY(-2px);
  z-index: 10;
  border-color: var(--ow-accent);
}

/* GLOW SYSTEM */
.glow-gold { border-color: rgba(212,175,55, 0.3) !important; box-shadow: 0 0 20px rgba(212,175,55, 0.1) !important; }
.glow-gold:hover { border-color: #d4af37 !important; box-shadow: 0 0 40px rgba(212,175,55, 0.4) !important; }

.glow-cyan { border-color: rgba(0, 212, 255, 0.3) !important; box-shadow: 0 0 20px rgba(0, 212, 255, 0.1) !important; }
.glow-cyan:hover { border-color: #00d4ff !important; box-shadow: 0 0 40px rgba(0, 212, 255, 0.4) !important; }

/* Leaderboard Matrix */
.lb-metrics-group {
  display: flex;
  align-items: center;
  gap: 32px;
}
.lb-metric.strikes .val { color: #ff3b30; }

/* High-End Status Badge */
.ow-modal-full-status {
  display: inline-block;
  margin: 12px 0 24px;
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.1));
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 30px;
  color: #60a5fa;
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Fix Giant Logos once and for all */
.lb-logo {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  max-height: 48px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--ow-bg-alt);
}
.lb-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ══════════════════════════════════════
   SOCIAL FEED (Community Pulse & News)
   ══════════════════════════════════════ */
.ow-feed-container {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ow-feed-card {
  background: var(--ow-surface);
  border: 1px solid var(--ow-border);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
  backdrop-filter: blur(10px);
}
.ow-feed-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.15);
}

.ow-feed-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ow-feed-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ow-border);
  object-fit: cover;
}
.ow-feed-author-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ow-text);
}
.ow-feed-meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ow-text-muted);
  margin-top: 2px;
}
.ow-feed-type {
  color: var(--ow-accent);
  font-weight: 900;
  letter-spacing: 0.05em;
}

.ow-feed-body {
  padding: 24px 20px;
}
.ow-feed-title {
  font-size: 1.4rem;
  font-weight: 950;
  margin-bottom: 12px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.ow-feed-content {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ow-text-dim);
  white-space: pre-line;
}

.ow-feed-image-wrapper {
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  background: #000;
}
.ow-feed-image {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.ow-feed-image-wrapper:hover .ow-feed-image {
  transform: scale(1.02);
}

/* Animations Scroll Reveal */
.ow-feed-card {
  animation: feed-entry 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes feed-entry {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Modal Fallbacks */
.broken-banner {
  background: linear-gradient(135deg, var(--ow-accent-dim), var(--ow-surface)) !important;
  min-height: 120px;
  display: block;
}

@media (max-width: 768px) {
  .ow-feed-container { padding: 0 10px; }
  .ow-feed-title { font-size: 1.2rem; }
}

/* Leaderboard Premium & Enhanced Headers */
.ow-lb-header {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ow-lb-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ow-lb-badge, .ow-lb-region, .ow-lb-slots {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--ow-accent-dim);
  color: var(--ow-accent);
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(4px);
}

.ow-lb-banner-premium {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  max-height: 200px;
  object-fit: cover;
}

.ow-lb-row .name-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ow-lb-row .desc {
  font-size: 0.75rem;
  color: var(--ow-text-muted);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

.ow-lb-pills {
  margin-bottom: 24px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.ow-lb-pills::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════
   PREMIUM DIRECTORY v3.0 — Full Overhaul
   Professional Gaming · Dark Glass · Animated
   ══════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes heroGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}
@keyframes bannerParallax {
  from { transform: scale(1.08) translateY(0); }
  to   { transform: scale(1.08) translateY(-6px); }
}

/* ── HERO ── */
.dir-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(ellipse 120% 80% at 50% 0%,
    rgba(59,130,246,0.25) 0%,
    rgba(139,92,246,0.12) 40%,
    transparent 70%),
    var(--ow-bg);
}
.dir-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 600px at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 60%),
    radial-gradient(circle 400px at 80% 30%, rgba(139,92,246,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.dir-hero-inner {
  position: relative;
  z-index: 2;
  padding: 80px 20px 60px;
  max-width: 700px;
}
.dir-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(139,92,246,0.2));
  border: 1px solid rgba(59,130,246,0.3);
  color: #93c5fd;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
}
.dir-hero-title {
  font-family: var(--ow-font-display);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, #93c5fd 50%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}
.dir-hero-sub {
  color: var(--ow-text-dim);
  font-size: 1.05rem;
  font-weight: 500;
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.dir-hero-stats {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px 28px;
  backdrop-filter: blur(12px);
}
.dir-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dir-hero-stat strong {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--ow-accent);
  line-height: 1;
}
.dir-hero-stat span {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ow-text-muted);
  margin-top: 4px;
}
.dir-hero-stat-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.1);
}

/* ── MAIN / SECTIONS ── */
.dir-main {
  max-width: 1260px;
  margin: 0 auto;
  padding: 48px 24px 120px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.dir-section { display: flex; flex-direction: column; gap: 28px; }
.dir-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ow-border);
}
.dir-section-lbl {
  font-family: var(--ow-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ow-text-muted);
}
.dir-section-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ow-text-muted);
}

/* ── PODIUM ── */
.dir-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 20px;
  align-items: start;
}
.dir-pod-wrap { cursor: pointer; }
.dir-pod-wrap.rank-1 { order: 2; }
.dir-pod-wrap.rank-2 { order: 1; }
.dir-pod-wrap.rank-3 { order: 3; }

.dir-pod-card {
  background: var(--ow-surface);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  position: relative;
}
.dir-pod-card:hover {
  transform: translateY(-10px);
  border-color: var(--ow-accent);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 30px rgba(59,130,246,0.2);
}
.dir-pod-card.is-official { border-color: rgba(245,158,11,0.25); }
.dir-pod-card.is-official:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 30px rgba(245,158,11,0.3); }
.rank-1 .dir-pod-card { border-color: rgba(245,158,11,0.3); }

.dir-pod-banner-wrap {
  position: relative;
  height: 140px;
  overflow: hidden;
}
.rank-1 .dir-pod-banner-wrap { height: 170px; }
.dir-pod-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
  transition: transform 0.6s ease, filter 0.4s ease;
}
.dir-pod-card:hover .dir-pod-banner { transform: scale(1.1); filter: brightness(0.8); }
.dir-pod-banner-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ow-surface) 0%, transparent 60%);
}
.dir-pod-rank {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 1.4rem;
  font-weight: 900;
  background: rgba(0,0,0,0.5);
  padding: 4px 10px;
  border-radius: 14px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
}
.dir-pod-logo {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  border: 3px solid var(--ow-surface);
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  margin: -36px auto 0;
  position: relative;
  z-index: 5;
  transition: transform 0.4s ease;
}
.rank-1 .dir-pod-logo { width: 90px; height: 90px; border-radius: 24px; margin-top: -45px; border-color: var(--ow-gold); }
.dir-pod-card:hover .dir-pod-logo { transform: scale(1.08) translateY(-4px); }
.dir-pod-body { padding: 20px 24px 28px; }
.dir-pod-name {
  font-family: var(--ow-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.rank-1 .dir-pod-name { font-size: 1.6rem; }
.dir-pod-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  margin-bottom: 20px;
}
.dir-pod-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px;
}
.dpst-v {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--ow-accent);
  line-height: 1;
}
.dpst-l {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ow-text-muted);
  text-transform: uppercase;
  margin-top: 5px;
}
.dpst-sep { width: 1px; background: rgba(255,255,255,0.07); margin: 10px 0; }

/* Leader Chips — Large */
.dir-pod-leaders { margin-bottom: 20px; }
.dir-pod-leaders-lbl {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ow-text-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.dir-pod-leaders-row { display: flex; flex-direction: column; gap: 8px; }
.dir-lchip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.dir-lchip:hover {
  background: rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.3);
  transform: translateX(4px);
}
.dir-lchip-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ow-bg-alt);
}
.dir-lchip-info { display: flex; flex-direction: column; min-width: 0; }
.dir-lchip-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dir-lchip-role {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ow-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dir-pod-cta {
  width: 100%;
  padding: 12px;
  background: var(--ow-accent);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 16px rgba(59,130,246,0.4);
}
.dir-pod-cta:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,130,246,0.6); }





/* ═══════════════════════════════════════════════════
   ONE WAY — DIRECTORY v4 (Bulletproof Edition)
   No conflicts, iron-clad constraints everywhere
   ═══════════════════════════════════════════════════ */

/* HERO */
.dir-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%,rgba(59,130,246,.28) 0%,rgba(139,92,246,.12) 45%,transparent 70%),
    #0a0a0f;
}
.dir-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 700px at 0% 60%,rgba(59,130,246,.07) 0%,transparent 60%),
    radial-gradient(circle 500px at 100% 20%,rgba(139,92,246,.07) 0%,transparent 60%);
  pointer-events: none;
}
.dir-hero-inner {
  position: relative;
  z-index: 2;
  padding: 80px 20px 60px;
  max-width: 700px;
  margin: 0 auto;
}
.dir-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  border-radius: 30px;
  background: linear-gradient(135deg,rgba(59,130,246,.2),rgba(139,92,246,.2));
  border: 1px solid rgba(59,130,246,.35);
  color: #93c5fd;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
}
.dir-hero-title {
  font-family: var(--ow-font-display);
  font-size: clamp(2.4rem,6vw,5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1.05;
  background: linear-gradient(135deg,#fff 0%,#93c5fd 50%,#c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}
.dir-hero-sub {
  color: var(--ow-text-dim);
  font-size: 1.05rem;
  font-weight: 500;
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.dir-hero-stats {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px 28px;
  backdrop-filter: blur(12px);
}
.dir-hero-stat { display: flex; flex-direction: column; align-items: center; }
.dir-hero-stat strong { font-size: 1.6rem; font-weight: 900; color: var(--ow-accent); line-height: 1; }
.dir-hero-stat span { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ow-text-muted); margin-top: 4px; }
.dir-hero-stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,.1); }

/* LAYOUT */
.dir-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 120px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.dir-section { display: flex; flex-direction: column; gap: 24px; }
.dir-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dir-section-lbl {
  font-family: var(--ow-font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ow-text-muted);
}
.dir-section-count { font-size: .75rem; font-weight: 600; color: var(--ow-text-muted); }

/* PODIUM */
.dir-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 20px;
  align-items: end; /* bottom-align so rank1 towers above */
}
.dir-pod-wrap { cursor: pointer; }
.dir-pod-wrap.rank-1 { order: 2; }
.dir-pod-wrap.rank-2 { order: 1; }
.dir-pod-wrap.rank-3 { order: 3; }
.dir-pod-card {
  background: var(--ow-surface);
  border-radius: 28px;
  overflow: hidden;          /* CRITICAL — keeps children inside */
  border: 1px solid rgba(255,255,255,.07);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
.dir-pod-card:hover { transform: translateY(-10px); border-color: var(--ow-accent); box-shadow: 0 24px 60px rgba(0,0,0,.5),0 0 28px rgba(59,130,246,.2); }
.rank-1 .dir-pod-card { border-color: rgba(245,158,11,.3); }
.dir-pod-card.is-official { border-color: rgba(245,158,11,.25); }

.dir-pod-banner-wrap {
  position: relative;
  width: 100%;
  height: 130px;
  overflow: hidden;
  flex-shrink: 0;
}
.rank-1 .dir-pod-banner-wrap { height: 160px; }
.dir-pod-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.6);
  transition: transform .6s ease, filter .4s;
  display: block;
}
.dir-pod-card:hover .dir-pod-banner { transform: scale(1.08); filter: brightness(.8); }
.dir-pod-banner-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ow-surface) 0%, transparent 60%);
  pointer-events: none;
}
.dir-pod-rank {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1.3rem;
  font-weight: 900;
  background: rgba(0,0,0,.55);
  padding: 3px 10px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  line-height: 1.4;
}
.dir-pod-logo {
  display: block;
  width: 68px;
  height: 68px;
  min-width: 68px;
  min-height: 68px;
  border-radius: 18px;
  border: 3px solid var(--ow-surface);
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  margin: -34px auto 0;
  position: relative;
  z-index: 5;
  transition: transform .4s ease;
  flex-shrink: 0;
}
.rank-1 .dir-pod-logo { width: 84px; height: 84px; min-width: 84px; min-height: 84px; border-radius: 22px; margin-top: -42px; border-color: var(--ow-gold); }
.dir-pod-card:hover .dir-pod-logo { transform: scale(1.08) translateY(-4px); }
.dir-pod-body { padding: 18px 20px 24px; }
.dir-pod-name {
  font-family: var(--ow-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  margin-bottom: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-1 .dir-pod-name { font-size: 1.5rem; }
.dir-pod-stats {
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  margin-bottom: 18px;
}
.dir-pod-stat { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 10px; }
.dpst-v { font-size: 1.2rem; font-weight: 900; color: var(--ow-accent); line-height: 1; }
.dpst-l { font-size: .55rem; font-weight: 800; letter-spacing: .1em; color: var(--ow-text-muted); text-transform: uppercase; margin-top: 5px; }
.dpst-sep { width: 1px; background: rgba(255,255,255,.07); margin: 8px 0; }

/* Leader chips — podium (large) */
.dir-pod-leaders { margin-bottom: 16px; }
.dir-pod-leaders-lbl {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--ow-text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dir-pod-leaders-row { display: flex; flex-direction: column; gap: 6px; }
.dir-lchip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.dir-lchip:hover { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); transform: translateX(3px); }
.dir-lchip-av {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255,255,255,.15) !important;
  flex-shrink: 0 !important;
  background: var(--ow-bg-alt);
  display: block !important;
}
.dir-lchip-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dir-lchip-name {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.dir-lchip-role { font-size: .6rem; font-weight: 600; color: var(--ow-accent); text-transform: uppercase; letter-spacing: .05em; display: block; }
.dir-pod-cta {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--ow-accent);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
  box-shadow: 0 4px 16px rgba(59,130,246,.4);
}
.dir-pod-cta:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,130,246,.6); }

/* DIRECTORY GRID */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}
.dir-card {
  position: relative;
  background: var(--ow-surface);
  border-radius: 20px;
  overflow: hidden;           /* CRITICAL */
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.dir-card:hover { transform: translateY(-8px); border-color: rgba(59,130,246,.4); box-shadow: 0 20px 48px rgba(0,0,0,.4),0 0 20px rgba(59,130,246,.15); }
.dir-card.is-official { border-color: rgba(245,158,11,.2); }
.dir-card.is-official:hover { border-color: rgba(245,158,11,.5); }

.dir-card-banner-wrap {
  position: relative;
  width: 100%;
  height: 95px;
  min-height: 95px;
  max-height: 95px;
  overflow: hidden;
  flex-shrink: 0;
}
.dir-card-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.55) blur(1px);
  transition: transform .5s ease, filter .4s;
  display: block;
}
.dir-card:hover .dir-card-banner { transform: scale(1.1); filter: brightness(.75) blur(0); }
.dir-card-banner-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ow-surface) 0%, transparent 60%);
  pointer-events: none;
}
.dir-card-rank {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(255,255,255,.65);
  background: rgba(0,0,0,.45);
  padding: 3px 8px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  line-height: 1.4;
}
.dir-card-logo {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  border-radius: 14px !important;
  border: 3px solid var(--ow-surface) !important;
  background: var(--ow-surface);
  object-fit: cover !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  margin: -26px 0 0 18px !important;
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  transition: transform .35s ease;
}
.dir-card:hover .dir-card-logo { transform: scale(1.1); }
.dir-card-body {
  padding: 12px 18px 14px;
  flex: 1;
  min-width: 0;
}
.dir-card-name {
  font-family: var(--ow-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dir-card-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ow-text-muted);
  margin-bottom: 12px;
}
.dir-card-metrics em { font-style: normal; font-size: .6rem; letter-spacing: .05em; }
.dcm-sep { color: rgba(255,255,255,.2); }
.dir-card-leaders { }
.dir-card-leaders-lbl {
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--ow-text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.dir-card-leaders-row { display: flex; flex-direction: column; gap: 5px; }
.dir-lchip-sm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 9px;
  cursor: pointer;
  transition: all .2s;
  font-size: .76rem;
  font-weight: 700;
  color: var(--ow-text-dim);
  text-decoration: none;
}
.dir-lchip-sm:hover { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.25); color: #93c5fd; transform: translateX(3px); }
.dir-lchip-sm-av {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255,255,255,.1) !important;
  flex-shrink: 0 !important;
  background: var(--ow-bg-alt);
  display: block !important;
}
.dir-card-footer { padding: 0 18px 18px; flex-shrink: 0; }
.dir-card-btn {
  display: block;
  width: 100%;
  padding: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  color: rgba(255,255,255,.65);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .25s;
  text-align: center;
}
.dir-card-btn:hover { background: var(--ow-accent); border-color: var(--ow-accent); color: #fff; box-shadow: 0 4px 16px rgba(59,130,246,.4); }

/* LEADER QUICK MODAL */
.lqm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: pointer;
}
.lqm-card {
  position: relative;
  background: var(--ow-surface);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  box-shadow: 0 32px 80px rgba(0,0,0,.6),0 0 40px rgba(59,130,246,.15);
  width: 100%;
  max-width: 300px;
  text-align: center;
  padding: 36px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: default;
}
.lqm-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.lqm-close:hover { background: rgba(239,68,68,.4); }
.lqm-av-wrap {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 3px solid var(--ow-accent);
  padding: 3px;
  box-shadow: 0 0 20px rgba(59,130,246,.4);
}
.lqm-av {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--ow-bg-alt);
}
.lqm-name { font-size: 1.15rem; font-weight: 800; color: #fff; }
.lqm-role { font-size: .72rem; font-weight: 700; color: var(--ow-accent); text-transform: uppercase; letter-spacing: .08em; }
.lqm-id {
  font-size: .64rem; color: var(--ow-text-muted);
  font-family: monospace;
  padding: 5px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .dir-podium { grid-template-columns: 1fr; }
  .dir-pod-wrap.rank-1, .dir-pod-wrap.rank-2, .dir-pod-wrap.rank-3 { order: unset; }
}
@media (max-width: 600px) {
  .dir-grid { grid-template-columns: 1fr; }
  .dir-main { padding: 28px 14px 80px; gap: 40px; }
  .dir-hero-stats { flex-direction: column; gap: 10px; }
  .dir-hero-stat-sep { width: 40px; height: 1px; }
  .dir-pod-banner-wrap { height: 110px; }
  .rank-1 .dir-pod-banner-wrap { height: 130px; }
}

/* ════════════════════════════════════════════════════════════════════
   PROFILE MODAL V2 — Claude Design Handoff (zh-* prefix, isolated)
   ════════════════════════════════════════════════════════════════════ */
/* ========================================================================
   OneWAY · tokens v2 — alineados a oneway.lat
   ======================================================================== */

:root {
  /* Surfaces — near-black puro como en oneway.lat */
  --zh-bg-0: #050608;            /* page */
  --zh-bg-1: #0c0d12;            /* modal base */
  --zh-bg-2: #12141b;            /* card */
  --zh-bg-3: #1a1d27;            /* hover */
  --zh-line: rgba(255,255,255,0.05);
  --zh-line-strong: rgba(255,255,255,0.10);

  /* Text */
  --zh-fg: #f1f3f8;
  --zh-fg-dim: #8e94a8;
  --zh-fg-mute: #555a6c;

  /* Accents — azul OneWAY como primario, violeta secundario */
  --zh-blue: #3b82f6;
  --zh-blue-glow: rgba(59,130,246,0.55);
  --zh-blue-soft: rgba(59,130,246,0.12);
  --zh-violet: #7c5cff;
  --zh-violet-glow: rgba(124,92,255,0.55);
  --zh-violet-soft: rgba(124,92,255,0.12);
  --zh-magenta: #ec4899;

  /* Status */
  --zh-online: #22c55e;
  --zh-idle:   #f59e0b;
  --zh-dnd:    #ef4444;
  --zh-offline:#6b7180;

  /* Tier colors */
  --zh-tier-bronze: #c47a3a;
  --zh-tier-silver: #b8c0cf;
  --zh-tier-gold:   #f0c14a;
  --zh-tier-plat:   #3b82f6;
  --zh-tier-diamond:#7c5cff;

  /* Geometry */
  --zh-radius: 16px;
  --zh-radius-sm: 8px;
  --zh-shadow:
    0 30px 80px -20px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 60px -10px rgba(59,130,246,0.15);
  --zh-glow-blue: 0 0 24px -4px var(--zh-blue-glow);
  --zh-glow-violet: 0 0 24px -4px var(--zh-violet-glow);

  /* Type */
  --zh-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --zh-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Motion */
  --zh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --zh-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================================================
   Modal shell + entrance animation
   ======================================================================== */

@keyframes zh-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes zh-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes zh-backdrop-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes zh-modal-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(10px) scale(0.97); }
}
@keyframes zh-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes zh-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
}
@keyframes zh-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
@keyframes zh-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
@keyframes zh-glitch {
  0%, 100% { transform: translate(0); filter: hue-rotate(0deg); }
  20%      { transform: translate(-1px, 1px); filter: hue-rotate(5deg); }
  40%      { transform: translate(1px, -1px); filter: hue-rotate(-3deg); }
  60%      { transform: translate(-1px, -1px); }
  80%      { transform: translate(1px, 1px); }
}
@keyframes zh-scan-sweep {
  from { transform: translateY(-100%); }
  to   { transform: translateY(200%); }
}
@keyframes zh-rotate-slow {
  to { transform: rotate(360deg); }
}
@keyframes zh-counter-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.zh-modal-backdrop {
  /* FIX K-14: was `position: absolute` which constrained the backdrop to the
     nearest positioned ancestor — under the navbar/scroll container the modal
     ended up clipped or hidden. `fixed` ties it to the viewport.
     FIX NEW-09: previously z-index was 9999 but the .ow-navbar uses 99999.
     The navbar covered the top ~76px of the modal (the banner badge + close
     button area looked "mocho" / chopped). Bumped to 100000 to win. */
  position: fixed;
  inset: 0;
  z-index: 100000;
  background:
    radial-gradient(ellipse at 50% 0%, var(--zh-violet-soft), transparent 60%),
    radial-gradient(ellipse at 50% 100%, var(--zh-blue-soft), transparent 60%),
    rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  font-family: var(--zh-font);
  color: var(--zh-fg);
  animation: zh-backdrop-in 0.3s var(--zh-ease) both;
}

.zh-modal {
  width: 600px;
  max-height: 88vh;
  background: var(--zh-bg-1);
  border-radius: var(--zh-radius);
  border: 1px solid var(--zh-line-strong);
  box-shadow: var(--zh-shadow);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: zh-modal-in 0.5s var(--zh-ease-back) both;
  animation-delay: 0.05s;
}

/* Animated ambient glow rim around the modal */
.zh-modal::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    var(--zh-blue) 90deg,
    transparent 180deg,
    var(--zh-violet) 270deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.25;
  animation: zh-rotate-slow 12s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Close button */
.zh-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--zh-line-strong);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: var(--zh-fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s var(--zh-ease);
}
.zh-modal__close:hover {
  background: rgba(239,68,68,0.18);
  border-color: var(--zh-dnd);
  color: var(--zh-dnd);
  transform: rotate(90deg);
}
.zh-modal__close:active { transform: rotate(90deg) scale(0.9); }

.zh-modal__body {
  padding: 0 24px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--zh-line-strong) transparent;
  position: relative;
  z-index: 2;
}
.zh-modal__body::-webkit-scrollbar { width: 6px; }
.zh-modal__body::-webkit-scrollbar-thumb {
  background: var(--zh-line-strong);
  border-radius: 3px;
}
.zh-modal__body::-webkit-scrollbar-thumb:hover { background: var(--zh-blue); }

/* ========================================================================
   Banner — parallax + scan sweep + glitch on hover
   ======================================================================== */

.zh-banner {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1d28, #0c0d12);
  cursor: pointer;
}
.zh-banner__img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  display: block;
  transition: transform 8s linear, filter 0.4s var(--zh-ease);
  transform: scale(1.05);
  filter: saturate(1.05);
}
.zh-banner:hover .zh-banner__img {
  transform: scale(1.12);
  filter: saturate(1.3) contrast(1.1);
  animation: zh-glitch 0.4s steps(2) 1;
}
.zh-banner__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(59,130,246,0.08) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(59,130,246,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--zh-ease);
}
.zh-banner:hover .zh-banner__grid { opacity: 1; }

.zh-banner__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(12,13,18,0.4) 60%, var(--zh-bg-1) 100%),
    linear-gradient(90deg, rgba(124,92,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}

/* Scanline sweep */
.zh-banner__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.zh-banner__scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg,
    transparent,
    rgba(59,130,246,0.12) 50%,
    transparent
  );
  animation: zh-scan-sweep 4s linear infinite;
}

/* Top-left status badge (pulsing) */
.zh-banner__badge {
  position: absolute;
  top: 16px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: var(--zh-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zh-fg);
  z-index: 3;
}
.zh-banner__badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--zh-online);
  color: var(--zh-online);
  animation: zh-status-pulse 2s ease-in-out infinite;
}

/* ========================================================================
   Hexagon avatar — animated border, hover lift
   ======================================================================== */

.zh-avatar {
  width: 100px;
  height: 100px;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.4s var(--zh-ease-back);
  cursor: pointer;
}
.zh-avatar:hover { transform: translateY(-3px) scale(1.04); }

.zh-avatar__frame {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    var(--zh-blue),
    var(--zh-violet),
    var(--zh-magenta),
    var(--zh-blue)
  );
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: zh-rotate-slow 8s linear infinite;
}
.zh-avatar__inner {
  position: absolute;
  inset: 3px;
  background: var(--zh-bg-1);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.zh-avatar__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--zh-ease);
}
.zh-avatar:hover .zh-avatar__inner img { transform: scale(1.12); }

.zh-avatar__status {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid var(--zh-bg-1);
  z-index: 2;
  transition: transform 0.2s;
}
.zh-avatar:hover .zh-avatar__status { transform: scale(1.15); }
.zh-avatar__status.is-online  { background: var(--zh-online); animation: zh-status-pulse 2s infinite; color: var(--zh-online); }
.zh-avatar__status.is-idle    { background: var(--zh-idle); color: var(--zh-idle); }
.zh-avatar__status.is-dnd     { background: var(--zh-dnd); animation: zh-status-pulse 2s infinite; color: var(--zh-dnd); }
.zh-avatar__status.is-offline { background: var(--zh-offline); }

/* ========================================================================
   Header (avatar + identity + actions) — staggered entry
   ======================================================================== */

.zh-header {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-top: -56px;
  padding: 0 24px 0;
  position: relative;
  z-index: 5;
  animation: zh-fade-up 0.6s var(--zh-ease) both;
  animation-delay: 0.2s;
}
.zh-header__text {
  flex: 1;
  padding-bottom: 8px;
  min-width: 0;
}
.zh-header__actions {
  display: flex;
  gap: 6px;
  padding-bottom: 8px;
}

.zh-identity__name {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--zh-fg);
  background: linear-gradient(180deg, #fff 60%, #aaa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  cursor: default;
  position: relative;
}
.zh-identity__name:hover {
  animation: zh-glitch 0.5s steps(3) 1;
}
.zh-identity__handle {
  font-family: var(--zh-font-mono);
  font-size: 13px;
  color: var(--zh-fg-dim);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Icon buttons */
.zh-iconbtn {
  width: 36px;
  height: 36px;
  border-radius: var(--zh-radius-sm);
  background: var(--zh-bg-2);
  border: 1px solid var(--zh-line-strong);
  color: var(--zh-fg-dim);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s var(--zh-ease);
  position: relative;
  overflow: hidden;
}
.zh-iconbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--zh-blue-soft), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.zh-iconbtn:hover {
  color: var(--zh-blue);
  border-color: var(--zh-blue);
  transform: translateY(-2px);
  box-shadow: var(--zh-glow-blue);
}
.zh-iconbtn:hover::before { opacity: 1; }
.zh-iconbtn:active { transform: translateY(0) scale(0.95); }

/* ========================================================================
   Stat blocks — hover lift + animated counter underline
   ======================================================================== */

.zh-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 22px;
  align-items: stretch;
  animation: zh-fade-up 0.6s var(--zh-ease) both;
  animation-delay: 0.3s;
}
.zh-stat {
  position: relative;
  background: var(--zh-bg-2);
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-sm);
  padding: 14px 10px;
  overflow: hidden;
  cursor: default;
  transition: all 0.25s var(--zh-ease);
  text-align: center;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Tier y SubTier — label arriba-izq, valor centrado verticalmente pero alineado a la izquierda */
.zh-stat--tier,
.zh-stat--subtier {
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 12px 14px;
  position: relative;
}
.zh-stat--tier .zh-stat__label,
.zh-stat--subtier .zh-stat__label {
  position: absolute;
  top: 10px;
  left: 12px;
  margin-bottom: 0;
}
.zh-stat--tier .zh-stat__value,
.zh-stat--subtier .zh-stat__value {
  align-self: flex-start;
  margin: 0;
  transform-origin: left center;
}
.zh-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, var(--zh-blue-soft), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.zh-stat::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--zh-blue), transparent);
  transform: scaleX(0);
  transition: transform 0.4s var(--zh-ease);
}
.zh-stat:hover {
  transform: translateY(-3px);
  border-color: var(--zh-line-strong);
  background: var(--zh-bg-3);
}
.zh-stat:hover::before { opacity: 1; }
.zh-stat:hover::after { transform: scaleX(1); }

.zh-stat__label {
  font-family: var(--zh-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--zh-fg-mute);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.zh-stat__value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
}
/* Kills — color escala con cantidad. Por defecto azul → blanco→amarillo→naranja→rojo
   La intensidad se controla con la clase .zh-kills-tier-{0..4} aplicada al stat */
.zh-stat--accent .zh-stat__value {
  color: var(--zh-blue);
  text-shadow: 0 0 24px var(--zh-blue-glow);
  background-clip: text;
  -webkit-background-clip: text;
}
/* tier 0: rookie (blue) */
.zh-kills-tier-0 .zh-stat__value { color: var(--zh-blue); text-shadow: 0 0 18px var(--zh-blue-glow); }
/* tier 1: 100+ (cyan/white) */
.zh-kills-tier-1 .zh-stat__value {
  color: #67e8f9;
  text-shadow: 0 0 22px rgba(103,232,249,0.6);
}
/* tier 2: 500+ (gold) */
.zh-kills-tier-2 .zh-stat__value {
  color: #fbbf24;
  text-shadow: 0 0 24px rgba(251,191,36,0.65);
}
/* tier 3: 2000+ (orange flame) */
.zh-kills-tier-3 .zh-stat__value {
  background: linear-gradient(180deg, #fde047 0%, #fb923c 50%, #ef4444 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(251,146,60,0.55));
  animation: zh-flame-flicker 1.6s ease-in-out infinite;
}
/* tier 4: 10000+ (white-hot inferno) */
.zh-kills-tier-4 .zh-stat__value {
  background: linear-gradient(180deg, #ffffff 0%, #fde047 30%, #fb923c 65%, #dc2626 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(251,146,60,0.8));
  animation: zh-flame-flicker 1.2s ease-in-out infinite;
}

/* Fuego: chispas que suben desde el valor de kills cuando tier >= 3 */
.zh-stat--accent { position: relative; }
.zh-stat--accent .zh-flames {
  position: absolute;
  inset: auto 0 0 0;
  height: 70px;
  pointer-events: none;
  overflow: visible;
  display: none;
}
.zh-kills-tier-3 .zh-flames,
.zh-kills-tier-4 .zh-flames { display: block; }
.zh-stat--accent .zh-flames span {
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde047 0%, #fb923c 50%, transparent 75%);
  filter: blur(0.5px);
  opacity: 0;
  animation: zh-flame-rise 2.2s linear infinite;
}
.zh-stat--accent .zh-flames span:nth-child(1) { left: 12%; animation-delay: 0.0s; }
.zh-stat--accent .zh-flames span:nth-child(2) { left: 28%; animation-delay: 0.4s; width: 4px; height: 4px; }
.zh-stat--accent .zh-flames span:nth-child(3) { left: 46%; animation-delay: 0.9s; width: 8px; height: 8px; }
.zh-stat--accent .zh-flames span:nth-child(4) { left: 64%; animation-delay: 0.2s; width: 5px; height: 5px; }
.zh-stat--accent .zh-flames span:nth-child(5) { left: 78%; animation-delay: 1.2s; }
.zh-stat--accent .zh-flames span:nth-child(6) { left: 90%; animation-delay: 0.7s; width: 4px; height: 4px; }

@keyframes zh-flame-flicker {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(251,146,60,0.55)) brightness(1); }
  50% { filter: drop-shadow(0 0 22px rgba(251,146,60,0.85)) brightness(1.15); }
}
@keyframes zh-flame-rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-60px) scale(0.2); opacity: 0; }
}
.zh-stat__sub {
  font-family: var(--zh-font-mono);
  font-size: 10px;
  color: var(--zh-fg-mute);
  margin-top: 4px;
  letter-spacing: 0.06em;
  position: relative;
}

/* ========================================================================
   Section headers
   ======================================================================== */

.zh-section {
  margin-top: 22px;
  animation: zh-fade-up 0.6s var(--zh-ease) both;
}
.zh-section:nth-of-type(1) { animation-delay: 0.4s; }
.zh-section:nth-of-type(2) { animation-delay: 0.5s; }
.zh-section:nth-of-type(3) { animation-delay: 0.6s; }

.zh-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.zh-section__title {
  font-family: var(--zh-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--zh-fg-mute);
  display: flex;
  align-items: center;
  gap: 10px;
}
.zh-section__title::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--zh-blue);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 10px var(--zh-blue-glow);
}
.zh-section__count {
  font-family: var(--zh-font-mono);
  font-size: 11px;
  color: var(--zh-fg-mute);
}

/* ========================================================================
   Roles — animated chips
   ======================================================================== */

.zh-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.zh-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--zh-bg-3);
  border: 1px solid var(--zh-line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--zh-fg);
  white-space: nowrap;
  transition: all 0.2s var(--zh-ease);
  cursor: default;
  animation: zh-fade-up 0.4s var(--zh-ease) both;
}
.zh-role:nth-child(1) { animation-delay: 0.45s; }
.zh-role:nth-child(2) { animation-delay: 0.50s; }
.zh-role:nth-child(3) { animation-delay: 0.55s; }
.zh-role:nth-child(4) { animation-delay: 0.60s; }
.zh-role:nth-child(5) { animation-delay: 0.65s; }
.zh-role:nth-child(6) { animation-delay: 0.70s; }
.zh-role:nth-child(7) { animation-delay: 0.75s; }
.zh-role:nth-child(8) { animation-delay: 0.80s; }
.zh-role:nth-child(9) { animation-delay: 0.85s; }
.zh-role:hover {
  transform: translateY(-2px);
  background: var(--zh-bg-3);
  border-color: currentColor;
}
.zh-role::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.8;
  transition: box-shadow 0.2s;
}
.zh-role:hover::before { box-shadow: 0 0 8px currentColor; opacity: 1; }
.zh-role--blue    { color: var(--zh-blue); border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.10); }
.zh-role--violet  { color: var(--zh-violet); border-color: rgba(124,92,255,0.3); background: rgba(124,92,255,0.10); }
.zh-role--magenta { color: var(--zh-magenta); border-color: rgba(236,72,153,0.3); background: rgba(236,72,153,0.10); }
.zh-role--gold    { color: var(--zh-tier-gold); border-color: rgba(240,193,74,0.3); background: rgba(240,193,74,0.10); }
.zh-role--green   { color: var(--zh-online); border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.10); }
.zh-role--more {
  background: transparent;
  border-style: dashed;
  color: var(--zh-fg-dim);
  cursor: pointer;
  font-family: var(--zh-font);
  font-size: 12px;
}
.zh-role--more::before { display: none; }
.zh-role--extra {
  animation: zh-fade-up 0.35s var(--zh-ease) both;
}
.zh-role--extra.is-collapsing {
  animation: zh-fade-down 0.3s var(--zh-ease) both;
}
@keyframes zh-fade-down {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(0.85); }
}
.zh-role--more:hover {
  color: var(--zh-blue);
  border-color: var(--zh-blue);
  background: var(--zh-blue-soft);
}

/* ========================================================================
   Detail rows
   ======================================================================== */

.zh-details {
  display: grid;
  gap: 1px;
  background: var(--zh-line);
  border: 1px solid var(--zh-line);
  border-radius: var(--zh-radius-sm);
  overflow: hidden;
}
.zh-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--zh-bg-2);
  font-size: 13px;
  transition: background 0.2s, padding 0.2s;
  position: relative;
}
.zh-detail::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--zh-blue);
  transform: scaleY(0);
  transition: transform 0.25s var(--zh-ease);
  transform-origin: center;
}
.zh-detail:hover {
  background: var(--zh-bg-3);
  padding-left: 18px;
}
.zh-detail:hover::before { transform: scaleY(1); }

.zh-detail__label {
  color: var(--zh-fg-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.zh-detail__value {
  color: var(--zh-fg);
  font-family: var(--zh-font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.zh-copy-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--zh-line-strong);
  background: transparent;
  color: var(--zh-fg-dim);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s var(--zh-ease);
  position: relative;
}
.zh-copy-btn:hover {
  color: var(--zh-blue);
  border-color: var(--zh-blue);
  background: var(--zh-blue-soft);
  transform: scale(1.1);
}
.zh-copy-btn.copied {
  color: var(--zh-online);
  border-color: var(--zh-online);
  background: rgba(34,197,94,0.12);
}
.zh-copy-btn .copied-tooltip {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--zh-online);
  color: #000;
  font-size: 10px;
  font-family: var(--zh-font-mono);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
}
.zh-copy-btn.copied .copied-tooltip {
  animation: zh-fade-up 0.3s var(--zh-ease) both;
  opacity: 1;
}

/* ========================================================================
   Platform pill + tag
   ======================================================================== */

.zh-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  background: var(--zh-bg-3);
  border: 1px solid var(--zh-line-strong);
  border-radius: 4px;
  font-family: var(--zh-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  transition: all 0.2s;
  cursor: default;
}
.zh-platform:hover {
  transform: translateY(-1px);
  border-color: currentColor;
}
.zh-platform.is-mobile  { color: var(--zh-violet); border-color: rgba(124,92,255,0.3); background: rgba(124,92,255,0.08); }
.zh-platform.is-pc      { color: var(--zh-blue); border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.08); }
.zh-platform.is-console { color: var(--zh-magenta); border-color: rgba(236,72,153,0.3); background: rgba(236,72,153,0.08); }

.zh-online-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--zh-online);
  font-family: var(--zh-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* ========================================================================
   Phase tier badge — color escalonado (0 mejor → 5 peor) + glow para 0
   ======================================================================== */

.zh-stat--phase .zh-stat__value {
  font-family: var(--zh-font-mono);
  letter-spacing: 0.04em;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.zh-stat--phase .zh-stat__value::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 12px currentColor;
}

.zh-phase-0 .zh-stat__value {
  color: #c4b5fd;
  background: linear-gradient(135deg, #fde047 0%, #ec4899 35%, #7c5cff 70%, #38bdf8 100%);
  background-size: 250% 250%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(124,92,255,0.6);
  animation:
    zh-phase0-pulse 2.4s ease-in-out infinite,
    zh-phase0-hue 6s linear infinite;
  position: relative;
}
.zh-phase-0 .zh-stat__value::after {
  /* halo orbital alrededor del 0 */
  content: "";
  position: absolute;
  inset: -4px -8px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124,92,255,0.35), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  animation: zh-phase0-halo 2s ease-in-out infinite;
}
.zh-phase-0 .zh-stat__value::before {
  background: linear-gradient(135deg, #c4b5fd, #7c5cff);
  box-shadow: 0 0 14px #7c5cff, 0 0 24px #c4b5fd;
  animation: zh-rotate-slow 4s linear infinite;
}
.zh-phase-0::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(196,181,253,0.22), transparent);
  background-size: 200% 100%;
  animation: zh-shimmer 2.2s linear infinite;
  pointer-events: none;
}
/* sparkles que orbitan el card de Phase 0 */
.zh-phase-0::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(196,181,253,0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 78%, rgba(236,72,153,0.9), transparent 60%);
  opacity: 0.9;
  pointer-events: none;
  animation: zh-phase0-sparkle 3.2s ease-in-out infinite;
}
.zh-phase-1 .zh-stat__value { color: var(--zh-blue); }
.zh-phase-2 .zh-stat__value { color: var(--zh-online); }
.zh-phase-3 .zh-stat__value { color: var(--zh-tier-gold); }
.zh-phase-4 .zh-stat__value { color: #f97316; }
.zh-phase-5 .zh-stat__value { color: var(--zh-fg-mute); }

@keyframes zh-phase0-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50%      { filter: brightness(1.35) drop-shadow(0 0 12px rgba(124,92,255,0.85)); transform: scale(1.04); }
}
@keyframes zh-phase0-hue {
  0%   { background-position: 0% 0%; }
  100% { background-position: 250% 250%; }
}
@keyframes zh-phase0-halo {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.25); }
}
@keyframes zh-phase0-sparkle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1;   }
}

/* Phase legend strip — visible at hover of phase stat */
.zh-stat--phase .zh-phase-bar {
  height: 3px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  margin-top: 10px;
}
.zh-stat--phase .zh-phase-bar > span {
  border-radius: 2px;
  background: var(--zh-bg-3);
  transition: all 0.3s var(--zh-ease);
}
.zh-stat--phase .zh-phase-bar > span.is-active {
  box-shadow: 0 0 8px currentColor;
}
/* Phase bar — colores explícitos por phase para que sean visibles
   incluso cuando el valor del stat es transparent (por background-clip:text) */
.zh-phase-0 .zh-phase-bar > span.is-active {
  background: linear-gradient(90deg, #fde047, #ec4899, #7c5cff) !important;
  box-shadow: 0 0 10px rgba(124,92,255,0.85), 0 0 4px #fde047;
}
.zh-phase-1 .zh-phase-bar > span.is-active { background: var(--zh-blue) !important;       box-shadow: 0 0 8px var(--zh-blue-glow); }
.zh-phase-2 .zh-phase-bar > span.is-active { background: var(--zh-online) !important;     box-shadow: 0 0 8px rgba(34,197,94,0.6); }
.zh-phase-3 .zh-phase-bar > span.is-active { background: var(--zh-tier-gold) !important;  box-shadow: 0 0 8px rgba(240,193,74,0.6); }
.zh-phase-4 .zh-phase-bar > span.is-active { background: #f97316 !important;              box-shadow: 0 0 8px rgba(249,115,22,0.6); }
.zh-phase-5 .zh-phase-bar > span.is-active { background: var(--zh-fg-mute) !important;    box-shadow: 0 0 6px rgba(107,113,128,0.4); }

/* ========================================================================
   Tier (H / M / L) y SubTier (S / T / W)
   ======================================================================== */
.zh-stat--tier .zh-stat__value,
.zh-stat--subtier .zh-stat__value,
.zh-stat__value--word {
  font-family: "Inter", var(--zh-font-sans, system-ui), sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 15px;
  line-height: 1.1;
  white-space: nowrap;
}
/* Sub-mark = letra grande tipo "E" / "H" / "S" debajo de la palabra,
   misma fuente que el valor de Phase, animada con glow */
.zh-stat__sub--mark {
  font-family: var(--zh-font-mono);
  font-size: 13px !important;
  font-weight: 700;
  color: currentColor !important;
  letter-spacing: 0.06em !important;
  margin-top: 6px !important;
  text-transform: uppercase;
  opacity: 0.85;
  text-shadow: 0 0 10px currentColor;
}
.zh-stat--phase .zh-stat__sub--mark { color: inherit; }
/* Animación leve para los marks (E / H / S etc.) */
.zh-stat__sub--mark {
  animation: zh-mark-pulse 2.6s ease-in-out infinite;
}
@keyframes zh-mark-pulse {
  0%, 100% { opacity: 0.85; text-shadow: 0 0 8px currentColor; }
  50%      { opacity: 1;    text-shadow: 0 0 16px currentColor, 0 0 4px currentColor; }
}

/* Tier colors: H = cyan/blue (con animación porque es el más alto), M = silver, L = orange */
.zh-tier-H .zh-stat__value {
  color: #38bdf8;
  text-shadow: 0 0 14px rgba(56,189,248,0.55);
  animation: zh-tier-h-pulse 2.2s ease-in-out infinite;
}
.zh-tier-M .zh-stat__value { color: #cbd5e1; }
.zh-tier-L .zh-stat__value { color: #f97316; }

@keyframes zh-tier-h-pulse {
  0%, 100% {
    text-shadow: 0 0 14px rgba(56,189,248,0.5);
    filter: brightness(1);
    transform: scale(1);
    letter-spacing: 0.01em;
  }
  50% {
    text-shadow:
      0 0 28px rgba(56,189,248,0.95),
      0 0 6px rgba(186,230,253,0.85),
      0 0 50px rgba(56,189,248,0.4);
    filter: brightness(1.3);
    transform: scale(1.06);
    letter-spacing: 0.05em;
  }
}

/* SubTier colors: S = gold (animado, top tier), T = silver, W = warm-gray */
.zh-subtier-S .zh-stat__value {
  color: #fbbf24;
  text-shadow: 0 0 14px rgba(251,191,36,0.5);
  animation: zh-subtier-pulse 2s ease-in-out infinite;
}
.zh-subtier-T .zh-stat__value { color: #a8b2c4; }
.zh-subtier-W .zh-stat__value { color: #71717a; }

@keyframes zh-subtier-pulse {
  0%, 100% {
    text-shadow: 0 0 14px rgba(251,191,36,0.5);
    filter: brightness(1);
    transform: scale(1);
    letter-spacing: 0.01em;
  }
  50% {
    text-shadow:
      0 0 26px rgba(251,191,36,0.95),
      0 0 6px rgba(254,240,138,0.85),
      0 0 48px rgba(251,191,36,0.4);
    filter: brightness(1.25);
    transform: scale(1.06);
    letter-spacing: 0.05em;
  }
}

/* ========================================================================
   Kebab menu (dropdown actions)
   ======================================================================== */

/* FIX KEBAB-01: the menu used to "fly to the top of the page" when the
   user opened it after scrolling. Cause: .zh-iconbtn-wrap had no
   `position` set, so the menu's `position:absolute; top:100%; right:0`
   resolved against the next positioned ancestor — usually the entire
   modal. Anchoring the wrap with position:relative pins the menu
   directly below the kebab button regardless of scroll/viewport. */
.zh-iconbtn-wrap {
  position: relative;
}

.zh-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--zh-bg-2);
  border: 1px solid var(--zh-line-strong);
  border-radius: var(--zh-radius-sm);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.7), 0 0 0 1px var(--zh-line);
  padding: 6px;
  z-index: 50;
  animation: zh-fade-up 0.18s var(--zh-ease) both;
  display: none;
}
.zh-menu.is-open { display: block; }
.zh-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--zh-fg);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s;
}
.zh-menu__item:hover {
  background: var(--zh-bg-3);
  color: var(--zh-blue);
}
.zh-menu__item.is-danger:hover {
  background: rgba(239,68,68,0.1);
  color: var(--zh-dnd);
}
.zh-menu__item svg { opacity: 0.7; }
.zh-menu__item:hover svg { opacity: 1; }
.zh-menu__sep {
  height: 1px;
  background: var(--zh-line);
  margin: 4px 0;
}

.zh-header__actions { position: relative; }
.zh-iconbtn-wrap { position: relative; }

/* ========================================================================
   Particles (SVG dots floating in banner area)
   ======================================================================== */

@keyframes zh-particle-float {
  0%   { transform: translate(0,0); opacity: 0; }
  20%  { opacity: 0.6; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.zh-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--zh-blue);
  box-shadow: 0 0 8px var(--zh-blue);
  pointer-events: none;
  animation: zh-particle-float linear infinite;
}

/* ════════════════════════════════════════════════════════════════════
   PROFILE MODAL V2 — Safety overrides (post-handoff integration)
   These rules are NOT part of the design handoff — they patch around
   issues where the entry animations leave elements at opacity:0 in
   environments with prefers-reduced-motion enabled or where the CSS
   animations get throttled / skipped by the browser.

   Behavior:
   - Users with prefers-reduced-motion: reduce skip animations entirely
     and see the end state immediately (avatar, name, kebab visible).
   - Otherwise the animations run normally as designed.
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .zh-modal-backdrop,
  .zh-modal-backdrop *,
  .zh-modal,
  .zh-modal *,
  .zh-banner,
  .zh-banner *,
  .zh-header,
  .zh-stats,
  .zh-stat,
  .zh-section,
  .zh-roles,
  .zh-role,
  .zh-role--extra,
  .zh-details,
  .zh-detail {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
}

/* Defensive fallback: if for any reason the entry animation does not
   complete (browser throttling, scheduling glitch), ensure the header
   and main sections remain visible. The .zh-modal-ready class is
   added by clans-engine.js once the modal has been inserted. */
.zh-modal-backdrop.zh-modal-ready .zh-header,
.zh-modal-backdrop.zh-modal-ready .zh-stats,
.zh-modal-backdrop.zh-modal-ready .zh-section {
  opacity: 1 !important;
  transform: none !important;
}

/* ──────────────────────────────────────────────────────────
   FIX (visual QA): Modal V2 mobile overflow.
   The handoff CSS hardcodes `.zh-modal { width: 600px }` with
   no max-width. On viewports < 600px (phones, narrow tablets)
   the modal escaped horizontally — content cut, scroll bar
   appears, kebab/close buttons partially off-screen.
   We respect the 600px target on desktop and clamp to the
   viewport with a sane gutter on mobile. Additionally, the
   handoff modal didn't have horizontal padding inside the
   backdrop, so we add a small one to keep edge contact tidy.
   ────────────────────────────────────────────────────────── */
.zh-modal-backdrop {
  /* Allow some breathing room around the modal on small screens */
  padding: 16px;
}
.zh-modal {
  /* min(600px, viewport - gutters) preserves the design width on
     desktop while staying inside the viewport on mobile. */
  width: min(600px, calc(100vw - 32px)) !important;
  max-width: 100% !important;
  max-height: min(88vh, calc(100vh - 32px)) !important;
}
@media (max-width: 480px) {
  .zh-modal-backdrop { padding: 8px; }
  .zh-modal {
    width: calc(100vw - 16px) !important;
    border-radius: 18px !important; /* the design uses larger radius; tighten on phones */
  }
  /* Stat grid was 4 columns at desktop — at very narrow widths the
     stat values clip; let it wrap to 2 columns. */
  .zh-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ──────────────────────────────────────────────────────────
   FIX NEW-07: Modal banner looked "mocho" (chopped/empty) when
   the user has no Discord banner. The handoff CSS forces the
   .zh-banner area to 200px tall and the .zh-banner__img is
   absolutely sized regardless of src. With banner=null, the
   <img> renders empty alt-text inside a 200px slab → reads as
   wasted space. We:
   1. Hide an empty-src banner image so it doesn't paint a
      broken-image alt frame.
   2. Shrink the banner area to 130px when no image is present
      (the gradient fallback still looks intentional and the
      avatar/name move up correspondingly).
   The zh-header margin-top:-56px pulls the avatar up over the
   banner so a 130px banner still leaves room for the polygon.
   ────────────────────────────────────────────────────────── */
.zh-banner__img:not([src]),
.zh-banner__img[src=""],
.zh-banner__img[src="null"] {
  display: none !important;
}
/* When the image is hidden / src is empty, collapse the banner. */
.zh-banner:has(.zh-banner__img:not([src])),
.zh-banner:has(.zh-banner__img[src=""]),
.zh-banner:has(.zh-banner__img[src="null"]) {
  height: 130px;
}
/* Fallback for browsers without :has() support — JS adds .zh-banner--empty */
.zh-banner.zh-banner--empty { height: 130px; }
.zh-banner.zh-banner--empty .zh-banner__img { display: none !important; }

/* ──────────────────────────────────────────────────────────
   FEATURE ANIM-01: Microsoft Store-style hover for CLAN CARDS
   The user requested a subtle "lift + scale + parallax inner-image"
   reveal on hover, similar to how Microsoft Store cards behave.
   This applies ONLY to clan-directory cards (.ow-dir-card / .dir-pod-card),
   NOT to individual member profile cards inside a clan.
   ────────────────────────────────────────────────────────── */
.ow-dir-card.dir-pod-card,
.dir-pod-card {
  /* Promote each card to its own compositing layer for smoother
     transforms. Without this the card paint reflows. */
  will-change: transform, box-shadow;
  transform-origin: 50% 60%;
  /* Override any earlier transition timings with a single tuned curve */
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
}
/* FIX HOVER-MOBILE-01: only fire the lift/scale/glow on devices that have a
   real hover-capable pointer. On touch devices (phones, tablets) ":hover"
   gets latched on tap and doesn't release until the user taps elsewhere —
   that produced a stuck/scaled card sitting above its row. We gate the
   whole hover block behind @media (hover: hover) so taps just navigate
   without animation. */
@media (hover: hover) and (pointer: fine) {
  .ow-dir-card.dir-pod-card:hover,
  .dir-pod-card:hover {
    /* Lift + slight scale = MS Store feel. Override the previous
       translateY(-8px) with a richer compound transform. */
    transform: translateY(-10px) scale(1.022) !important;
    border-color: var(--ow-border-hover) !important;
    box-shadow:
      0 30px 60px -10px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 0 40px rgba(59, 130, 246, 0.18) !important;
    z-index: 10;
  }
  /* Parallax-ish: inner image scales a hair more so it looks like the
     surface is reacting depth-aware. Specifically targets the banner
     image AND the foreground logo. */
  .ow-dir-card.dir-pod-card:hover .ow-dir-banner-img,
  .dir-pod-card:hover .ow-dir-banner-img {
    transform: scale(1.08) !important;
    filter: brightness(0.85) saturate(1.15) !important;
  }
  .ow-dir-card.dir-pod-card:hover .ow-dir-banner-img--logo,
  .dir-pod-card:hover .ow-dir-banner-img--logo {
    /* Logo-as-backdrop variant (crisp): zoom in slightly to give the same
       "depth reveal" feel as a real banner image. Still keep the dim filter
       so foreground text stays legible while hovered. */
    transform: scale(1.08) !important;
    filter: brightness(0.7) saturate(1.25) contrast(1.08) !important;
  }
  /* Rank #1 (champion) gets a punchier glow — matches the gold accent */
  .ow-rank-1.ow-dir-card.dir-pod-card:hover,
  .rank-1.dir-pod-card:hover {
    box-shadow:
      0 30px 60px -10px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(245, 158, 11, 0.18),
      0 0 50px rgba(245, 158, 11, 0.32) !important;
  }
}
/* Banner-image transition still applies on all devices — when the card
   re-renders or animates in via owDirFadeUp it benefits from a smooth
   transform. Just no hover transform on touch. */
.ow-dir-card.dir-pod-card .ow-dir-banner-img,
.dir-pod-card .ow-dir-banner-img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
}
/* FIX MOBILE-CARDS-01: collapse the fixed-height leader chips wrapper on
   narrow / single-column layouts. The fixed height (125/155px) was put in
   place so cards in a multi-column grid stayed visually aligned even when
   one had 1 leader and another had 3. In a 1-column mobile layout there's
   nothing to align with → the height becomes dead empty space below the
   sole chip. We override it back to auto on viewports where the directory
   grid collapses to a single column. */
@media (max-width: 600px) {
  .ow-dir-card .ow-dir-leader-chips,
  .dir-pod-card .ow-dir-leader-chips {
    height: auto !important;
    min-height: 0 !important;
  }
}
/* Honor reduced-motion users: no transform, just border color shift */
@media (prefers-reduced-motion: reduce) {
  .ow-dir-card.dir-pod-card,
  .dir-pod-card,
  .ow-dir-card.dir-pod-card .ow-dir-banner-img,
  .dir-pod-card .ow-dir-banner-img {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    will-change: auto !important;
  }
  .ow-dir-card.dir-pod-card:hover,
  .dir-pod-card:hover,
  .ow-dir-card.dir-pod-card:hover .ow-dir-banner-img,
  .dir-pod-card:hover .ow-dir-banner-img,
  .ow-dir-card.dir-pod-card:hover .ow-dir-banner-img--logo,
  .dir-pod-card:hover .ow-dir-banner-img--logo {
    transform: none !important;
  }
}

/* ══════════════════════════════════════
   PREMIUM v2 — Hero, Champion, Particles,
   Counters, Kills Rank1, Button Hovers
   ══════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes owHeroGrad {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

@keyframes owChampGlow {
  0%,100% {
    box-shadow:
      0 0 15px rgba(245,158,11,0.12),
      0 0 30px rgba(245,158,11,0.06),
      0 20px 40px rgba(0,0,0,0.4);
  }
  50% {
    box-shadow:
      0 0 40px rgba(245,158,11,0.55),
      0 0 80px rgba(245,158,11,0.28),
      0 0 130px rgba(245,158,11,0.12),
      0 24px 50px rgba(0,0,0,0.5);
  }
}

@keyframes owChampAuraSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes owChampBadgePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.82; transform: scale(1.07); }
}

@keyframes owKillsRank1Bg {
  0%,100% { background-color: rgba(245,158,11,0.05); }
  50%     { background-color: rgba(245,158,11,0.12); }
}

@keyframes owCardBorderSweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes owStatCountIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero H1 ── */
.ow-hero-h1-premium {
  animation: owDirFadeUp .8s cubic-bezier(0.16,1,0.3,1) both;
  will-change: opacity, transform;
}

.ow-hero-gradient-text {
  background: linear-gradient(270deg, #93c5fd, #a78bfa, #f0abfc, #34d399, #93c5fd);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: owHeroGrad 6s ease infinite;
}

[data-theme="light"] .ow-hero-gradient-text {
  background: linear-gradient(270deg, #2563eb, #7c3aed, #be185d, #047857, #2563eb);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: owHeroGrad 6s ease infinite;
}

/* ── Hero description (below H1) ── */
.ow-hero-desc {
  color: rgba(240,240,245,0.72);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto;
  font-weight: 500;
  animation: owDirFadeUp .8s cubic-bezier(0.16,1,0.3,1) .15s both;
}
[data-theme="light"] .ow-hero-desc { color: rgba(30,30,50,0.65); }

/* ── Particles canvas ── */
.ow-particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.ow-banner-particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
}

/* ── Uniform clan card hover (all .ow-dir-card) ── */
.ow-dir-card, .dir-pod-card {
  position: relative !important;
}
/* Sweep shimmer overlay on hover */
.ow-dir-card::after, .dir-pod-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.055) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.ow-dir-card:hover::after, .dir-pod-card:hover::after {
  opacity: 1;
  animation: owCardBorderSweep 1.2s linear infinite;
}

/* ── Champion card ── */
.ow-rank-1 {
  overflow: visible !important;
}

/* Spinning aura ring (injected div) */
.ow-champ-ring {
  position: absolute;
  inset: -2px;
  border-radius: 34px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.ow-champ-ring::before {
  content: '';
  position: absolute;
  width: 220%;
  height: 220%;
  top: -60%;
  left: -60%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 145deg,
    rgba(245,158,11,0.55) 165deg,
    rgba(255,215,60,0.95) 180deg,
    rgba(245,158,11,0.55) 195deg,
    transparent 215deg,
    transparent 360deg
  );
  animation: owChampAuraSpin 3.5s linear 1.2s infinite;
}

/* Inner card div — glow animation (class injected in JS) */
.ow-rank1-inner {
  animation: owChampGlow 3s ease-in-out 1.5s infinite !important;
  border-color: rgba(245,158,11,0.32) !important;
}

/* Champion badge text pulse */
.ow-champ-badge-text {
  display: inline-block;
  animation: owChampBadgePulse 2.2s ease-in-out infinite;
}

/* ── Kills rank #1 row ── */
.ow-kills-rank1 {
  animation: owKillsRank1Bg 2.5s ease-in-out infinite;
  border-radius: 10px;
}
.ow-kills-rank1 .rank {
  color: var(--ow-gold) !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
}
.ow-kills-rank1 .avatar {
  box-shadow: 0 0 0 2px rgba(245,158,11,0.7), 0 0 14px rgba(245,158,11,0.35) !important;
}
.ow-kills-rank1 .name {
  font-size: 1rem !important;
  font-weight: 800 !important;
}
.ow-kills-rank1 .score {
  color: var(--ow-gold) !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
}

/* ── Animated counter ── */
.ow-stat-counting {
  animation: owStatCountIn 0.35s ease-out both;
}

/* ── Enhanced nav/button hovers ── */
.btn-apple {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s cubic-bezier(0.16,1,0.3,1),
              background 0.25s ease,
              border-color 0.25s ease !important;
}
.btn-apple:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

.ow-tab-btn {
  transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}
.ow-tab-btn:hover:not(.active) {
  color: var(--ow-text) !important;
  transform: translateY(-1px);
}

.ow-back-btn {
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}
.ow-back-btn:hover {
  background: rgba(255,255,255,0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}

.ow-filter-btn {
  transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;
}
.ow-filter-btn:hover:not(.active) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  border-color: var(--ow-border-hover);
}

.ow-page-btn {
  transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;
}
.ow-page-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

.ow-lb-pill {
  transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;
}
.ow-lb-pill:hover:not(.active) {
  transform: translateY(-1px);
  border-color: var(--ow-border-hover);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

/* ── Reduced-motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  .ow-hero-gradient-text,
  .ow-champ-ring::before,
  .ow-rank1-inner,
  .ow-kills-rank1,
  .ow-champ-badge-text,
  .ow-particles-canvas,
  .ow-banner-particles-canvas,
  .ow-dir-card::after,
  .dir-pod-card::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   OneWay Main HQ section — featured "headquarters" card on the
   clans directory. Hardcoded guild 1417173139778965692 (live
   data hydrated from /api/public/main-hq when available).
   ═══════════════════════════════════════════════════════════ */
.ow-hq-section {
  --hq-accent: #3b82f6;
  --hq-accent-2: #8b5cf6;
  max-width: 1400px;
  margin: 64px auto 80px;
  padding: 0 24px;
  animation: owDirFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.ow-hq-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 40px;
  padding: 44px 48px;
  border-radius: 32px;
  border: 1px solid var(--ow-border);
  background: linear-gradient(135deg, var(--ow-surface) 0%, var(--ow-bg-alt) 100%);
  overflow: hidden;
  isolation: isolate;
}
.ow-hq-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(800px circle at 0% 0%, rgba(59,130,246,0.10), transparent 50%),
    radial-gradient(600px circle at 100% 100%, rgba(139,92,246,0.10), transparent 50%);
  pointer-events: none;
}
.ow-hq-aura {
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 34px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(59,130,246,0.45), rgba(139,92,246,0.15) 45%, rgba(59,130,246,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ow-hq-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ow-hq-media__inner {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}
.ow-hq-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--ow-surface);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 30px 60px rgba(0,0,0,0.45),
    0 0 80px rgba(59,130,246,0.18);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ow-hq-section:hover .ow-hq-icon { transform: scale(1.03); }
.ow-hq-icon-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    conic-gradient(from 0deg, var(--hq-accent), var(--hq-accent-2), var(--hq-accent)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: owHQSpin 14s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}
@keyframes owHQSpin { to { transform: rotate(360deg); } }
.ow-hq-body { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.ow-hq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ow-text-muted);
}
.ow-hq-eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hq-accent);
  box-shadow: 0 0 14px var(--hq-accent);
  animation: owHQPulse 2.2s ease-in-out infinite;
}
@keyframes owHQPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.7; }
}
.ow-hq-eyebrow__txt { color: var(--ow-text); }
.ow-hq-badge {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(139,92,246,0.18));
  color: var(--hq-accent);
  border: 1px solid rgba(59,130,246,0.35);
}
.ow-hq-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--ow-text);
}
.ow-hq-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ow-text-muted);
  margin: 0;
  max-width: 70ch;
}
.ow-hq-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 16px 22px;
  background: var(--ow-bg-alt);
  border: 1px solid var(--ow-border);
  border-radius: 18px;
  width: fit-content;
}
.ow-hq-stat__num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ow-text);
  letter-spacing: -0.01em;
}
.ow-hq-stat--mono .ow-hq-stat__num {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 1.05rem;
}
.ow-hq-stat__lbl {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ow-text-muted);
  margin-top: 4px;
}
.ow-hq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.ow-hq-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.ow-hq-cta--primary {
  background: linear-gradient(135deg, var(--hq-accent), var(--hq-accent-2));
  color: #fff;
  box-shadow: 0 10px 30px rgba(59,130,246,0.32);
}
.ow-hq-cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(59,130,246,0.45);
}
.ow-hq-cta__arrow { transition: transform 0.25s ease; }
.ow-hq-cta--primary:hover .ow-hq-cta__arrow { transform: translateX(4px); }
.ow-hq-cta--ghost {
  background: transparent;
  color: var(--ow-text);
  border-color: var(--ow-border);
}
.ow-hq-cta--ghost:hover {
  background: var(--ow-surface-hover, var(--ow-bg-alt));
  border-color: var(--ow-border-hover, var(--ow-border));
  transform: translateY(-2px);
}
.ow-hq-cta--muted {
  background: var(--ow-bg-alt);
  color: var(--ow-text-muted);
  border-color: var(--ow-border);
  cursor: default;
}
/* Light theme tweaks */
[data-theme="light"] .ow-hq-shell {
  background: linear-gradient(135deg, var(--ow-surface) 0%, #ffffff 100%);
}
[data-theme="light"] .ow-hq-icon {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.05),
    0 28px 55px rgba(0,0,0,0.15),
    0 0 80px rgba(59,130,246,0.12);
}
/* Responsive: stack on phones */
@media (max-width: 900px) {
  .ow-hq-shell {
    grid-template-columns: 1fr;
    padding: 32px 26px;
    gap: 26px;
  }
  .ow-hq-media__inner { width: 160px; height: 160px; margin: 0 auto; }
  .ow-hq-body { text-align: center; align-items: center; }
  .ow-hq-stats { margin: 0 auto; }
  .ow-hq-actions { justify-content: center; }
  .ow-hq-desc { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ow-hq-icon-ring,
  .ow-hq-eyebrow__dot { animation: none !important; }
  .ow-hq-section { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   .board content tabs · Galería + Anuncios + Sets
   ═══════════════════════════════════════════════════════════ */

.ow-loader-inline {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 60px 24px; color: var(--ow-text-muted, #9aa0ab);
  font-family: 'Geist Mono', monospace; font-size: 13px; letter-spacing: 0.06em;
}
.ow-empty-state {
  padding: 56px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--ow-text-muted, #9aa0ab);
}
.ow-empty-icon {
  font-size: 36px; line-height: 1; opacity: 0.7;
  background: var(--ow-bg-alt, rgba(255,255,255,0.04));
  border: 1px solid var(--ow-border, rgba(255,255,255,0.07));
  border-radius: 14px; padding: 14px 18px;
}
.ow-empty-state h3 { color: var(--ow-text, #fff); font-weight: 700; }
.ow-empty-state p code, .ow-sets-footer code {
  background: var(--ow-surface, #14171f); padding: 2px 6px; border-radius: 4px;
  font-family: 'Geist Mono', monospace; font-size: 12px;
  border: 1px solid var(--ow-border, rgba(255,255,255,0.07));
}

.ow-sets-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; padding: 0 4px;
}
.ow-sets-header h3 {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em;
}
.ow-sets-count {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--ow-text-muted, #9aa0ab); letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ow-bg-alt, rgba(255,255,255,0.04));
  border: 1px solid var(--ow-border, rgba(255,255,255,0.07));
}
.ow-sets-footer {
  margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--ow-border);
  font-size: 12px; color: var(--ow-text-muted); text-align: center;
}

/* ─────────────── Sets / Score history ─────────────── */
.ow-sets-wrap { padding: 4px 0 8px; }
.ow-sets-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ow-set-card {
  background: var(--ow-surface, #14171f);
  border: 1px solid var(--ow-border, rgba(255,255,255,0.07));
  border-radius: 14px; padding: 14px;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.ow-set-card:hover {
  border-color: var(--ow-border-hover, rgba(255,255,255,0.16));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.5);
}
.ow-set-card__header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
  color: var(--ow-text-muted); text-transform: uppercase;
}
.ow-set-card__top {
  background: color-mix(in srgb, var(--ow-accent, #5B8CFF) 12%, transparent);
  color: var(--ow-accent, #5B8CFF);
  padding: 3px 8px; border-radius: 5px; font-weight: 700;
}
.ow-set-card__autowin {
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #f59e0b; padding: 3px 8px; border-radius: 5px; font-weight: 700;
}
.ow-set-card__ago { margin-left: auto; font-size: 10px; }
.ow-set-card__match {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
}
.ow-set-card__vs {
  font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.18em;
  color: var(--ow-text-muted); text-transform: uppercase; padding: 0 6px;
}
.ow-set-player {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px;
  background: var(--ow-bg-alt, rgba(255,255,255,0.03));
  border: 1px solid var(--ow-border, rgba(255,255,255,0.06));
  border-radius: 10px; text-align: center;
}
.ow-set-player--win {
  background: color-mix(in srgb, #22c55e 10%, var(--ow-bg-alt));
  border-color: color-mix(in srgb, #22c55e 35%, var(--ow-border));
}
.ow-set-player__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--ow-border);
}
.ow-set-player__avatar--initial {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ow-surface); color: var(--ow-text-dim);
  font-weight: 700; font-size: 14px;
}
.ow-set-player__name {
  font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.ow-set-player__rank {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--ow-text-muted); margin-left: 3px;
}
.ow-set-player__score {
  font-family: 'Geist Mono', monospace; font-size: 22px; font-weight: 800;
  color: var(--ow-text); letter-spacing: -0.02em; line-height: 1;
}
.ow-set-player--win .ow-set-player__score { color: #22c55e; }
.ow-set-card__notes {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--ow-border);
  font-size: 12px; color: var(--ow-text-dim); line-height: 1.5;
}

/* ─────────────── Galería del clan ─────────────── */
.ow-gallery-wrap { padding: 4px 0 8px; }
.ow-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.ow-gal-item {
  margin: 0;
  background: var(--ow-surface);
  border: 1px solid var(--ow-border);
  border-radius: 12px; overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex; flex-direction: column;
}
.ow-gal-item:hover {
  transform: translateY(-3px);
  border-color: var(--ow-border-hover, rgba(255,255,255,0.18));
  box-shadow: 0 16px 36px -16px rgba(0,0,0,0.55);
}
.ow-gal-item__media {
  aspect-ratio: 4 / 3; background: var(--ow-bg-alt);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.ow-gal-item__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ow-gal-item:hover .ow-gal-item__media img { transform: scale(1.04); }
.ow-gal-broken { filter: grayscale(1) brightness(0.6); }
.ow-gal-item__cap {
  font-size: 13px; padding: 10px 12px 4px; color: var(--ow-text);
  line-height: 1.4;
}
.ow-gal-item__meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px 10px; font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--ow-text-muted);
}
.ow-gal-item__ago { white-space: nowrap; }

/* ─────────────── Anuncios cards ─────────────── */
.ow-anuncios-wrap { padding: 4px 0 8px; }
.ow-anuncios-list {
  display: flex; flex-direction: column; gap: 14px;
}
.ow-anuncio-card {
  display: grid; grid-template-columns: minmax(140px, 240px) 1fr;
  background: var(--ow-surface);
  border: 1px solid var(--ow-border);
  border-radius: 14px; overflow: hidden;
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.ow-anuncio-card:hover {
  border-color: var(--ow-border-hover, rgba(255,255,255,0.16));
  transform: translateY(-1px);
}
.ow-anuncio-card:not(:has(.ow-anuncio-card__img)) { grid-template-columns: 1fr; }
.ow-anuncio-card__img {
  width: 100%; height: 100%; min-height: 140px; object-fit: cover;
  border-right: 1px solid var(--ow-border);
}
.ow-anuncio-card__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.ow-anuncio-card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.ow-anuncio-card__title {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.ow-anuncio-card__time {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--ow-text-muted); letter-spacing: 0.08em;
  white-space: nowrap;
}
.ow-anuncio-card__text {
  margin: 0; font-size: 14px; line-height: 1.55;
  color: var(--ow-text-dim); white-space: pre-wrap;
}
.ow-anuncio-card__foot {
  margin-top: auto; padding-top: 8px;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--ow-text-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.ow-anuncio-card__foot span { color: var(--ow-text); }

/* Responsive */
@media (max-width: 720px) {
  .ow-anuncio-card { grid-template-columns: 1fr; }
  .ow-anuncio-card__img { min-height: 180px; max-height: 220px; }
  .ow-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ow-sets-grid { grid-template-columns: 1fr; }
}