/* =====================================================================
   PLAYER DIRECTORY /players/  -  prefix pd-
   Spec: PROFILES-DESIGN.md section 5. Load AFTER /profile/profile.css (tokens, .pf-role,
   .pf-live, .pf-badge, .pf-btn, .pf-empty, .pf-skel come from there).
   Root: <main class="pf pd" data-pf-theme="ember">. Container queries on .pf.
   ===================================================================== */

/* ---------- hero ---------- */
.pd-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.2rem, 7cqi, 4rem) 0 clamp(1.6rem, 4cqi, 2.4rem);
  background:
    radial-gradient(60% 90% at 80% 0%, var(--pf-a-dim), transparent 70%),
    radial-gradient(50% 80% at 0% 100%, color-mix(in srgb, var(--pf-accent-2) 8%, transparent), transparent 70%),
    linear-gradient(180deg, #0f121a, var(--pf-bg));
  border-bottom: 1px solid var(--pf-line);
}
.pd-hero::before { /* faint card-grid backdrop */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 44px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 60% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 90% at 60% 0%, #000 20%, transparent 75%);
}
.pd-hero .pf-particles { z-index: -1; }
.pd-hero-inner { position: relative; }
.pd-kicker { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 0.5rem; font-family: var(--pf-mono); font-size: var(--pf-fs-sm); letter-spacing: 0.3em; text-transform: uppercase; color: var(--pf-a); }
.pd-kicker::before { content: ""; width: 28px; height: 1px; background: var(--pf-a); box-shadow: 0 0 8px var(--pf-a); }
.pd-title {
  margin: 0; font-family: var(--pf-display); font-weight: 900; line-height: 1.02; letter-spacing: 0.02em; text-wrap: balance;
  font-size: clamp(2rem, 6.4cqi, 3.6rem);
  background: linear-gradient(180deg, #fff 15%, var(--pf-a-ink) 60%, var(--pf-a)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 18px var(--pf-glow));
}
.pd-sub { margin: 0.6rem 0 0; color: var(--pf-mute); font-size: clamp(0.98rem, 2.2cqi, 1.1rem); }
.pd-sub b { font-family: var(--pf-mono); color: var(--pf-ink); font-variant-numeric: tabular-nums; }

/* ---------- sticky toolbar ---------- */
.pd-bar { position: sticky; top: var(--pd-top, 0px); z-index: 30; background: linear-gradient(180deg, rgba(7,8,13,0.97), rgba(7,8,13,0.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--pf-line); }
.pd-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.8rem; padding: 0.7rem 0; }
.pd-search { position: relative; display: flex; align-items: center; flex: 1 1 100%; min-width: 0; }
.pd-search .pf-i { position: absolute; left: 0.85rem; color: var(--pf-faint); pointer-events: none; }
.pd-input { width: 100%; min-height: 44px; padding: 0.55rem 0.9rem 0.55rem 2.5rem; border-radius: 999px; font: inherit; font-size: var(--pf-fs-sm); color: var(--pf-ink); background: var(--pf-bg-2); border: 1px solid var(--pf-line-2); }
.pd-input::placeholder { color: var(--pf-faint); }
.pd-input:focus { outline: none; border-color: var(--pf-a); box-shadow: 0 0 0 3px var(--pf-a-dim); }
.pd-input::-webkit-search-cancel-button { filter: invert(0.7); }
.pd-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pd-chip {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 38px; padding: 0.3rem 0.85rem; border-radius: 999px;
  font: inherit; font-size: var(--pf-fs-sm); font-weight: 600; color: var(--pf-mute);
  background: rgba(255,255,255,0.04); border: 1px solid var(--pf-line); transition: all 0.16s ease;
}
.pd-chip:hover { color: var(--pf-ink); border-color: var(--pf-a-line); }
.pd-chip.is-on, .pd-chip[aria-pressed="true"] { color: #0b0c10; border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--pf-a) 55%, #fff), var(--pf-a)); box-shadow: 0 0 18px var(--pf-a-dim); }
.pd-chip.is-filter.is-on, .pd-chip.is-filter[aria-pressed="true"] { color: var(--pf-a-ink); background: var(--pf-a-dim); border-color: var(--pf-a); box-shadow: none; }
.pd-chip.is-filter[aria-pressed="true"]::before { content: "\2713"; font-weight: 700; }
.pd-sep { width: 1px; align-self: stretch; background: var(--pf-line); }
.pd-view { display: inline-flex; margin-left: auto; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--pf-line); }
.pd-view-btn { appearance: none; cursor: pointer; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 999px; background: none; color: var(--pf-mute); font-size: 1.05rem; }
.pd-view-btn:hover { color: var(--pf-ink); }
.pd-view-btn.is-on, .pd-view-btn[aria-pressed="true"] { color: #0b0c10; background: var(--pf-a); }
/* phones: the wrapped toolbar is too tall to pin (about 300 px under a 118 px header), so it scrolls away; sticky from 768 up */
@container pf (max-width: 767px) {
  .pd-bar { position: static; }
}
@container pf (min-width: 768px) {
  .pd-search { flex: 0 1 300px; }
}

.pd-count { margin: 1rem 0 0.8rem; color: var(--pf-faint); font-size: var(--pf-fs-sm); }
.pd-count b { color: var(--pf-ink); font-family: var(--pf-mono); font-variant-numeric: tabular-nums; }

/* ---------- grid (cards) ---------- */
.pd-grid { list-style: none; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); margin: 0; padding: 0 0 1.5rem; }
.pd-grid > li { min-width: 0; }
@container pf (min-width: 640px) { .pd-grid { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@container pf (max-width: 639px) { .pd-card { padding: 0 0.6rem 0.7rem; } .pd-card-banner { margin: 0 -0.6rem; height: 64px; } .pd-card .zl-user-av { width: 56px; height: 56px; } .pd-card-stats dt { letter-spacing: 0.06em; } }
.pd-card {
  --pf-a: var(--pf-accent, var(--pf-theme-accent));
  --pf-a-dim: color-mix(in srgb, var(--pf-a) 14%, transparent);
  --pf-a-line: color-mix(in srgb, var(--pf-a) 40%, transparent);
  --pf-glow: color-mix(in srgb, var(--pf-a) 45%, transparent);
  --pf-a-ink: color-mix(in srgb, var(--pf-a) 55%, #fff);
  --ring: var(--pf-a);
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center;
  min-width: 0; height: 100%; padding: 0 0.9rem 0.9rem; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-a) 9%, #141722), #0e1018);
  border: 1px solid var(--pf-line); transition: transform 0.2s var(--pf-ease), border-color 0.2s ease, box-shadow 0.2s ease;
}
.pd-card:hover, .pd-card:focus-within { transform: translateY(-4px); border-color: color-mix(in srgb, var(--pf-a) 50%, transparent); box-shadow: 0 16px 36px rgba(0,0,0,0.5), 0 0 26px color-mix(in srgb, var(--pf-a) 18%, transparent); }
.pd-card::after { /* foil sweep on hover */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform 0.7s ease;
}
.pd-card:hover::after { transform: translateX(100%); }
.pd-card[data-frame="ember"] { --ring: #ff6a1a; } .pd-card[data-frame="frost"] { --ring: #6fd3ff; } .pd-card[data-frame="toxic"] { --ring: #7be83a; }
.pd-card[data-frame="gold"] { --ring: #ffc24a; } .pd-card[data-frame="void"] { --ring: #a77bff; } .pd-card[data-frame="role"] { --ring: var(--pf-role); }
.pd-card[data-frame="none"] { --ring: rgba(255,255,255,0.3); }
.pd-card.is-me { border-color: var(--pf-a); box-shadow: 0 0 0 1px var(--pf-a), 0 0 28px color-mix(in srgb, var(--pf-a) 22%, transparent); }
.pd-card-banner {
  position: relative; align-self: stretch; margin: 0 -0.9rem; height: 76px; z-index: -1;
  background: var(--pd-banner, none) center / cover no-repeat, linear-gradient(135deg, color-mix(in srgb, var(--pf-a) 35%, #151822), #0b0d14);
}
.pd-card-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #10131b 0%, rgba(16,19,27,0.2) 70%); }

/* ZL.userLink chip inside the card: avatar over the banner edge, name below. The link covers the whole card. */
.pd-card-who { margin-top: -34px; min-width: 0; max-width: 100%; }
.pd-card .zl-user { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 0; color: var(--pf-ink); text-decoration: none; }
.pd-card .zl-user::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pd-card .zl-user:focus-visible { outline: none; }
.pd-card .zl-user:focus-visible::after { outline: 2px solid var(--pf-a); outline-offset: -2px; }
.pd-card .zl-user-av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #10131b; box-shadow: 0 0 0 3px #10131b, 0 0 0 5px var(--ring), 0 0 18px color-mix(in srgb, var(--ring) 45%, transparent); }
.pd-card .zl-user-av-none { display: grid; place-items: center; font-family: var(--pf-display); font-weight: 800; font-size: 1.6rem; color: var(--pf-a-ink); background: radial-gradient(circle at 35% 30%, #2a2f3d, #10131b); }
.pd-card .zl-user-name { max-width: 100%; font-weight: 700; font-size: 1.02rem; line-height: 1.25; overflow-wrap: anywhere; }
.pd-card:hover .zl-user-name { color: #fff; }
.pd-tagline { margin: 0.2rem 0 0; font-size: var(--pf-fs-xs); color: var(--pf-mute); font-style: italic; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pd-card-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; margin-top: 0.5rem; }
.pd-card-tags .pf-role { min-height: 22px; padding: 0.05rem 0.5rem; font-size: 0.72rem; }
.pd-card-tags .pf-live { position: relative; z-index: 2; }
.pd-you { display: inline-flex; align-items: center; min-height: 22px; padding: 0.05rem 0.5rem; border-radius: 999px; font-family: var(--pf-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #0b0c10; background: var(--pf-a); }
.pd-lfg { display: inline-flex; align-items: center; min-height: 22px; padding: 0.05rem 0.5rem; border-radius: 999px; font-family: var(--pf-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: #0b0c10; background: linear-gradient(180deg, #8ff0b4, #5fd48a); }
.pd-card-badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; margin: 0.6rem 0 0; padding: 0; }
.pd-card-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; align-self: stretch; margin: auto 0 0; padding-top: 0.75rem; }
.pd-card-stats > div { padding: 0.35rem 0.3rem; border-radius: 8px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.05); }
.pd-card-stats dt { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pf-faint); }
.pd-card-stats dd { margin: 0; font-family: var(--pf-mono); font-weight: 700; font-size: 1.05rem; color: var(--pf-ink); font-variant-numeric: tabular-nums; }
.pd-card-stats dd.is-none { color: var(--pf-faint); font-weight: 500; }

/* ---------- list view ---------- */
.pd-grid[data-view="list"] { grid-template-columns: 1fr; gap: 0.4rem; }
.pd-grid[data-view="list"] .pd-card { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 0.3rem 0.8rem; padding: 0.6rem 0.8rem; border-radius: 12px; background: var(--pf-panel); }
.pd-grid[data-view="list"] .pd-card:hover { transform: translateX(3px); }
.pd-grid[data-view="list"] .pd-card-banner, .pd-grid[data-view="list"] .pd-tagline { display: none; }
.pd-grid[data-view="list"] .pd-card-who { margin: 0; flex: 1 1 160px; }
.pd-grid[data-view="list"] .zl-user { flex-direction: row; gap: 0.7rem; }
.pd-grid[data-view="list"] .zl-user-av { width: 40px; height: 40px; box-shadow: 0 0 0 2px #10131b, 0 0 0 3.5px var(--ring); flex: none; }
.pd-grid[data-view="list"] .zl-user-av-none { font-size: 1.05rem; }
.pd-grid[data-view="list"] .pd-card-tags { margin: 0; justify-content: flex-start; }
.pd-grid[data-view="list"] .pd-card-badges { margin: 0; display: none; }
.pd-grid[data-view="list"] .pd-card-stats { align-self: center; margin: 0 0 0 auto; padding: 0; display: flex; gap: 1rem; }
.pd-grid[data-view="list"] .pd-card-stats > div { padding: 0; background: none; border: 0; text-align: right; }
@container pf (min-width: 640px) { .pd-grid[data-view="list"] .pd-card-badges { display: flex; } .pd-grid[data-view="list"] .pd-card { flex-wrap: nowrap; } }

/* ---------- loading more, end ---------- */
.pd-more { display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 64px; color: var(--pf-faint); font-size: var(--pf-fs-sm); }
.pd-more[hidden] { display: none; }
.pd-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pf-line-2); border-top-color: var(--pf-a); animation: pd-spin 0.8s linear infinite; }
@keyframes pd-spin { to { transform: rotate(360deg); } }
.pd-end { text-align: center; color: var(--pf-faint); font-size: var(--pf-fs-sm); padding: 0.5rem 0 2.5rem; }
.pd-skel-card { height: 250px; border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  .pd-card, .pd-card::after { transition: none; }
  .pd-card:hover { transform: none; }
  .pd-spinner { animation-duration: 2.4s; }
}