/* ============================================================
   AFL LEGACY — XP LEADERBOARD page styles
   Loaded AFTER style.css (and alltime.css, which supplies the
   hero) so these rules win and survive style.css regeneration.
   The board keeps the Trophy Room's warm, dark "display case"
   look in both light and dark site themes.
   ============================================================ */

.ll-section { padding-block: 2rem 4rem; }
.ll-root { display: block; }

.ll-loading {
  text-align: center;
  padding-block: 4rem;
  color: var(--color-neutral-600);
  font-size: var(--fs-500);
}
.ll-loading.is-error { color: var(--color-primary-400); }
.ll-empty { text-align: center; padding: 2.5rem 1rem; color: #b89b76; font-size: var(--fs-500); }

/* ---------------- scoring key ---------------- */
.ll-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.1rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #2a1c11, #1c130b 60%, #150e07);
  border: 1px solid #3c2a18;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .08), 0 18px 44px -34px rgba(0, 0, 0, .8);
}
.ll-key-title {
  font-size: var(--fs-300);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #d9962b;
  margin-right: .35rem;
}
.ll-key-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: rgba(10, 7, 4, .55);
  border: 1px solid rgba(255, 220, 160, .12);
  font-size: var(--fs-300);
  color: #e6cfa6;
  cursor: default;
}
.ll-key-ic { font-size: 1em; line-height: 1; }
.ll-key-lbl { font-weight: 600; }
.ll-key-xp {
  font-weight: 800;
  color: #1a120a;
  background: linear-gradient(135deg, #ffe39a, #f0b53e);
  padding: .02rem .4rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ---------------- podium ---------------- */
.ll-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: clamp(.6rem, 2vw, 1.2rem);
  margin-top: 1.1rem;
}
.ll-pod {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  padding: 1.1rem .8rem 1rem;
  border-radius: 1rem 1rem 0 0;
  text-decoration: none;
  color: #f6e3c2;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 210, 140, .10), transparent 60%),
    linear-gradient(180deg, rgba(20, 14, 8, .7), rgba(10, 7, 4, .4));
  border: 1px solid rgba(255, 220, 160, .12);
  border-bottom: 0;
  transition: transform .16s ease, box-shadow .16s ease;
}
.ll-pod:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .85); }
.ll-pod--1 {
  padding-top: 1.7rem;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 210, 140, .22), transparent 62%),
    linear-gradient(180deg, rgba(58, 40, 18, .8), rgba(20, 13, 6, .5));
  border-color: rgba(255, 216, 150, .5);
  box-shadow: 0 0 0 1px rgba(255, 216, 150, .25), 0 26px 46px -30px rgba(0, 0, 0, .9);
}
.ll-pod--2 { border-color: rgba(220, 226, 235, .3); }
.ll-pod--3 { border-color: rgba(198, 150, 90, .35); }

.ll-pod-badge {
  position: absolute;
  top: -.7rem;
  left: 50%;
  transform: translateX(-50%);
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 .5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
  color: #1a120a;
  background: linear-gradient(135deg, #e9edf2, #aab4c2);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .8);
}
.ll-pod--1 .ll-pod-badge { background: linear-gradient(135deg, #ffe39a, #e0a73d); font-size: 1.15rem; }
.ll-pod--3 .ll-pod-badge { background: linear-gradient(135deg, #e6b98c, #c17d43); }

.ll-pod-av-wrap {
  position: relative;
  width: clamp(56px, 12vw, 84px);
  height: clamp(56px, 12vw, 84px);
  margin-top: .3rem;
}
.ll-pod--1 .ll-pod-av-wrap { width: clamp(66px, 14vw, 98px); height: clamp(66px, 14vw, 98px); }
.ll-pod-name {
  font-size: var(--fs-500);
  font-weight: 800;
  color: #fbe7c8;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-pod-xp-num { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 900; color: #ffd98a; font-variant-numeric: tabular-nums; }
.ll-pod-xp-lbl { font-size: var(--fs-300); font-weight: 800; color: #c4a982; }
.ll-pod-sub { font-size: var(--fs-300); color: #b89b76; }

/* ---------------- toolbar ---------------- */
.ll-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.1rem;
  padding: .8rem 1rem;
  border-radius: 1rem 1rem 0 0;
  background: linear-gradient(180deg, #2a1c11, #1c130b);
  border: 1px solid #3c2a18;
  border-bottom: 0;
}
.ll-count { color: #c4a982; font-size: var(--fs-400); }
.ll-count-n { font-weight: 900; color: #f6e3c2; font-variant-numeric: tabular-nums; }
.ll-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.ll-search-input {
  width: min(240px, 60vw);
  padding: .5rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 220, 160, .2);
  background: rgba(10, 7, 4, .55);
  color: #f6e3c2;
  font: inherit;
  font-size: var(--fs-400);
}
.ll-search-input::placeholder { color: #8f7a5c; }
.ll-search-input:focus { outline: none; border-color: rgba(255, 216, 150, .6); box-shadow: 0 0 0 3px rgba(255, 216, 150, .15); }

.ll-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(10, 7, 4, .55);
  border: 1px solid rgba(255, 220, 160, .14);
}
.ll-seg-btn {
  border: 0;
  background: transparent;
  color: #c4a982;
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-300);
  padding: .35rem .8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.ll-seg-btn:hover { color: #f6e3c2; }
.ll-seg-btn.is-active {
  color: #1a120a;
  background: linear-gradient(135deg, #ffd98a, #e0a73d);
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .6);
}

/* ---------------- list ---------------- */
.ll-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: .8rem;
  border-radius: 0 0 1rem 1rem;
  background: linear-gradient(180deg, #1c130b, #150e07);
  border: 1px solid #3c2a18;
  border-top: 0;
}

.ll-more {
  margin-top: .4rem;
  padding: .6rem 1rem;
  border-radius: .7rem;
  border: 1px dashed rgba(255, 220, 160, .25);
  background: rgba(10, 7, 4, .4);
  color: #e6cfa6;
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-300);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ll-more:hover {
  background: rgba(30, 20, 11, .7);
  border-color: rgba(255, 220, 160, .5);
  color: #f6e3c2;
}

.ll-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem clamp(38px, 6vw, 48px) minmax(0, 1fr) minmax(120px, 240px);
  align-items: center;
  gap: clamp(.6rem, 1.6vw, 1rem);
  padding: .6rem .85rem;
  border-radius: .7rem;
  text-decoration: none;
  color: #f0e2cb;
  background: rgba(10, 7, 4, .4);
  border: 1px solid rgba(255, 220, 160, .06);
  transition: transform .13s ease, background .13s ease, border-color .13s ease;
}
.ll-row:hover {
  transform: translateY(-1px);
  background: rgba(30, 21, 12, .75);
  border-color: rgba(255, 216, 150, .3);
  z-index: 4;
}
.ll-row--top { background: rgba(30, 21, 12, .55); }
.ll-row--1 { border-color: rgba(255, 216, 150, .5); box-shadow: inset 0 0 0 1px rgba(255, 216, 150, .18); }
.ll-row--2 { border-color: rgba(220, 226, 235, .32); }
.ll-row--3 { border-color: rgba(198, 150, 90, .34); }

.ll-rank { display: flex; justify-content: center; }
.ll-rank-n {
  font-size: var(--fs-500);
  font-weight: 900;
  color: #b89b76;
  font-variant-numeric: tabular-nums;
}
.ll-row--1 .ll-rank-n { color: #ffd98a; }
.ll-row--2 .ll-rank-n { color: #dfe7f2; }
.ll-row--3 .ll-rank-n { color: #e6b98c; }

.ll-av-wrap {
  position: relative;
  width: clamp(38px, 6vw, 48px);
  height: clamp(38px, 6vw, 48px);
}
.ll-av-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
  color: #1a120a;
  background: linear-gradient(135deg, #caa86a, #8a6b3a);
}
.ll-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  background: transparent;
  border: 2px solid rgba(255, 216, 150, .35);
  transition: opacity .25s ease;
}
.ll-avatar.is-loaded { opacity: 1; }
.ll-pod-av-wrap .ll-avatar, .ll-pod-av-wrap .ll-av-fallback { font-size: 1.6rem; }
.ll-row--1 .ll-avatar { border-color: rgba(255, 216, 150, .8); }

.ll-who { min-width: 0; }
.ll-name {
  font-size: var(--fs-500);
  font-weight: 800;
  color: #fbe7c8;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.ll-tag {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: var(--fs-200, .72rem);
  font-weight: 700;
  color: #d8bd93;
  background: rgba(255, 220, 160, .08);
  border: 1px solid rgba(255, 220, 160, .12);
  padding: .05rem .4rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.ll-tag-ic { font-size: .95em; line-height: 1; }

.ll-meter-wrap { display: flex; align-items: center; gap: .7rem; }
.ll-meter {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
.ll-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e0a73d, #ffe39a);
  box-shadow: 0 0 8px rgba(255, 216, 150, .5);
  transition: width .6s cubic-bezier(.2, .7, .3, 1);
}
.ll-xp { text-align: right; flex: 0 0 auto; min-width: 4.5rem; }
.ll-xp-num {
  font-size: var(--fs-500);
  font-weight: 900;
  color: #ffd98a;
  font-variant-numeric: tabular-nums;
}
.ll-xp-lbl { font-size: var(--fs-200, .72rem); font-weight: 800; color: #b89b76; margin-left: .15rem; }

/* ---------------- hover breakdown popover ---------------- */
.ll-pop {
  position: absolute;
  top: calc(100% - 6px);
  right: 10px;
  width: max-content;
  min-width: 230px;
  max-width: 300px;
  padding: .8rem .9rem;
  border-radius: .8rem;
  background: #0f0a06;
  border: 1px solid rgba(255, 216, 150, .35);
  box-shadow: 0 22px 48px -20px rgba(0, 0, 0, .95);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
  z-index: 20;
}
.ll-row:hover .ll-pop,
.ll-row:focus-visible .ll-pop { opacity: 1; visibility: visible; transform: translateY(0); }

.ll-pop-name {
  font-size: var(--fs-500);
  font-weight: 800;
  color: #fbe7c8;
  margin-bottom: .5rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(255, 216, 150, .18);
}
.ll-pop-list { display: flex; flex-direction: column; gap: .3rem; }
.ll-pop-row {
  display: grid;
  grid-template-columns: 1.2rem 1fr auto;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-300);
}
.ll-pop-ic { text-align: center; }
.ll-pop-ct { font-weight: 800; color: #ffd98a; }
.ll-pop-tx { color: #c4a982; }
.ll-pop-mvp { color: #ffb347; font-weight: 700; white-space: nowrap; }
.ll-pop-xp { font-weight: 800; color: #e6cfa6; font-variant-numeric: tabular-nums; }
.ll-pop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .55rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255, 216, 150, .18);
}
.ll-pop-foot-lbl { font-size: var(--fs-300); font-weight: 700; color: #c4a982; }
.ll-pop-foot-xp {
  font-size: var(--fs-400);
  font-weight: 900;
  color: #1a120a;
  background: linear-gradient(135deg, #ffe39a, #f0b53e);
  padding: .12rem .55rem;
  border-radius: 999px;
}
.ll-pop-cta { margin-top: .5rem; font-size: var(--fs-300); font-weight: 700; color: #d9962b; text-align: right; }

/* ---------------- leaderboard CTA ---------------- */
.lb-cta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
  color: #fff;
}
.lb-cta-title { font-size: var(--fs-600); font-weight: 800; color: #fff; }
.lb-cta-text { font-size: var(--fs-400); opacity: .92; color: #fff; margin-top: .15rem; }
.lb-cta-btn {
  flex: 0 0 auto;
  background: #fff;
  color: var(--color-primary-600);
  font-weight: 800;
  font-size: var(--fs-400);
  padding: .7rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .1s ease;
}
.lb-cta-btn:hover { transform: translateY(-1px); }

/* ---------------- responsive ---------------- */
@media (max-width: 640px) {
  .ll-row {
    grid-template-columns: 1.8rem clamp(34px, 9vw, 42px) minmax(0, 1fr);
    grid-template-areas:
      "rank av who"
      "meter meter meter";
    row-gap: .5rem;
  }
  .ll-rank { grid-area: rank; }
  .ll-av-wrap { grid-area: av; }
  .ll-who { grid-area: who; }
  .ll-meter-wrap { grid-area: meter; }
  .ll-pop { right: 6px; left: 6px; min-width: 0; max-width: none; }
  .ll-pod-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ll-row, .ll-pod, .ll-meter-fill, .ll-pop, .ll-avatar { transition: none; }
}