/* 2026-10-19 leaderboard redesign: dark command table with liquid-glass layers and top-nine laurel titles. */
.leaderboard-view { padding: 0 !important; }
.leaderboard-shell {
  --rank-accent: #58b6ff;
  --glass-fill: linear-gradient(180deg, rgba(16, 31, 36, .64), rgba(5, 13, 16, .82));
  --glass-rim: linear-gradient(145deg, rgba(210, 250, 255, .34), rgba(120, 205, 225, .10) 28%, rgba(0, 0, 0, .45) 68%, rgba(160, 240, 255, .18));
  display: grid;
  gap: 0;
  margin: -10px -4px 0;
  color: #e9f7fa;
  background:
    radial-gradient(90% 42% at 50% -6%, rgba(48, 130, 150, .22), transparent 64%),
    radial-gradient(70% 32% at 12% 38%, rgba(34, 88, 110, .12), transparent 70%),
    #05090b;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 18px 48px rgba(0, 0, 0, .45);
}
.leaderboard-shell[data-tab="POWER"] { --rank-accent: #b06cff; }
.leaderboard-shell[data-tab="BUILDING"] { --rank-accent: #ff8a3d; }
.leaderboard-shell[data-tab="ALLIANCE_RANK"] { --rank-accent: #58e38c; }

/* Header: a thick glass slab with a lit top edge and an engraved title. */
.leaderboard-head {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 56px;
  overflow: hidden;
  border-bottom: 1px solid rgba(120, 225, 245, .26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), transparent 42%),
    linear-gradient(180deg, rgba(16, 37, 43, .76), rgba(4, 10, 13, .92));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .32),
    inset 0 -1px rgba(0, 0, 0, .8),
    0 10px 26px rgba(0, 0, 0, .42),
    0 0 26px rgba(80, 210, 235, .07);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
}
.leaderboard-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, .16), transparent 26%, transparent 72%, rgba(255, 255, 255, .055));
  opacity: .6;
  mix-blend-mode: screen;
  pointer-events: none;
}
.leaderboard-head > * { position: relative; z-index: 1; }
.leaderboard-head::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 255, 255, .72), transparent);
  opacity: .55;
}
.leaderboard-head h2 {
  margin: 0;
  color: #f7ffff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .65),
    0 2px 0 rgba(33, 96, 110, .75),
    0 4px 9px rgba(0, 0, 0, .88),
    0 0 20px rgba(100, 230, 255, .24);
}
.leaderboard-back {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 1px solid rgba(160, 245, 255, .16);
  border-radius: 50%;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .18));
  color: #8cecff;
  font: 900 22px/1 sans-serif;
  box-shadow: inset 0 1px rgba(255, 255, 255, .22), inset 0 -2px 5px rgba(0, 0, 0, .55), 0 3px 9px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.leaderboard-back svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Player strip: metallic gold, raised over the glass header. */
.leaderboard-player-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 13px 5px;
}
.leaderboard-player-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #f5c451;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .95), 0 3px 8px rgba(0, 0, 0, .55);
}
.leaderboard-player-name i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 218, 120, .9);
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 35% 25%, rgba(255, 240, 190, .55), transparent 55%);
  box-shadow: 0 0 8px rgba(245, 196, 81, .45), inset 0 1px rgba(255, 255, 255, .4);
}
.leaderboard-player-name i::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin: 3px auto 0;
  border-radius: 50%;
  background: #ffe6a0;
  box-shadow: 0 0 5px rgba(255, 220, 130, .9);
}
.leaderboard-player-line strong {
  flex: 0 0 auto;
  color: #f2fdff;
  font-size: 11px;
  letter-spacing: .03em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .9), 0 0 8px rgba(150, 240, 255, .22);
}

/* Filter controls: inset glass wells instead of flat boxes. */
.leaderboard-filter-row {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 0 12px 8px;
  border: 1px solid rgba(140, 225, 240, .18);
  border-radius: 14px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 46%),
    linear-gradient(180deg, rgba(8, 24, 29, .62), rgba(2, 8, 11, .58));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .16),
    inset 0 -2px 8px rgba(0, 0, 0, .42),
    0 5px 16px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}
.leaderboard-filter-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .13), transparent 28%, transparent 74%, rgba(255, 255, 255, .045));
  opacity: .65;
  mix-blend-mode: screen;
  pointer-events: none;
}
.leaderboard-filter-row > * { position: relative; z-index: 1; }
.leaderboard-search > span,
.leaderboard-galaxy > span {
  display: block;
  margin-bottom: 4px;
  color: #9db9c2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
}
.leaderboard-search > div { display: flex; min-width: 0; }
.leaderboard-search input,
.leaderboard-galaxy select {
  box-sizing: border-box;
  min-width: 0;
  height: 36px;
  border: 1px solid rgba(120, 215, 230, .22);
  border-radius: 9px;
  padding: 0 9px;
  background:
    linear-gradient(180deg, rgba(1, 8, 12, .72), rgba(14, 38, 45, .42));
  color: #eaffff;
  font: 600 11px var(--ref-font-data);
  outline: none;
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, .72),
    inset 0 1px rgba(255, 255, 255, .06),
    0 1px rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}
.leaderboard-search input { flex: 1 1 auto; border-radius: 9px 0 0 9px; border-right: 0; }
.leaderboard-search input::placeholder { color: #607d86; text-shadow: none; }
.leaderboard-search button {
  flex: 0 0 40px;
  height: 36px;
  border: 1px solid rgba(135, 225, 240, .3);
  border-radius: 0 9px 9px 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(6, 32, 40, .65));
  color: #a9f6ff;
  font-size: 19px;
  line-height: 1;
  box-shadow: inset 0 1px rgba(255, 255, 255, .22), inset 0 -3px 8px rgba(0, 0, 0, .45), 0 2px 7px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
.leaderboard-galaxy select {
  width: 100%;
  appearance: none;
  text-align: center;
  background-image:
    linear-gradient(45deg, transparent 50%, #8ee8f5 50%),
    linear-gradient(135deg, #8ee8f5 50%, transparent 50%),
    linear-gradient(180deg, rgba(1, 8, 12, .72), rgba(14, 38, 45, .42));
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px, 0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
}

/* Segmented glass tab bar with a lit active pill. */
.leaderboard-tabs {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin: 0 12px 7px;
  border: 1px solid rgba(130, 220, 235, .18);
  border-radius: 11px;
  padding: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .22));
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .08), 0 2px 8px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.leaderboard-tabs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .10), transparent 24%, transparent 78%, rgba(255, 255, 255, .04));
  opacity: .7;
  mix-blend-mode: screen;
  pointer-events: none;
}
.leaderboard-tabs button {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #8baab2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.leaderboard-tabs button.active {
  color: var(--rank-accent);
  border-color: color-mix(in srgb, var(--rank-accent) 38%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 46%),
    color-mix(in srgb, var(--rank-accent) 12%, rgba(3, 14, 18, .72));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .26),
    inset 0 -2px 0 var(--rank-accent),
    0 0 16px color-mix(in srgb, var(--rank-accent) 22%, transparent),
    0 2px 5px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 8px color-mix(in srgb, var(--rank-accent) 45%, transparent);
}

/* Table: layered glass rows floating over blurred ambient light. */
.leaderboard-table {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 2px 6px 8px;
  isolation: isolate;
}
.leaderboard-table::before {
  content: "";
  position: absolute;
  inset: 4px -6px 12px;
  z-index: -1;
  background:
    radial-gradient(42% 34% at 18% 18%, rgba(70, 205, 235, .24), transparent 72%),
    radial-gradient(46% 38% at 84% 68%, rgba(70, 230, 145, .16), transparent 74%),
    radial-gradient(36% 28% at 50% 108%, rgba(180, 120, 255, .12), transparent 78%);
  filter: blur(22px);
  pointer-events: none;
}
.leaderboard-table::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 250, 255, .38), transparent);
  opacity: .7;
  pointer-events: none;
}
.leaderboard-row {
  position: relative;
  display: grid;
  grid-template-columns: 52px 40px minmax(0, 1fr) 74px 62px;
  gap: 4px;
  align-items: center;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 0 9px;
  background:
    var(--glass-fill) padding-box,
    var(--glass-rim) border-box;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .18),
    inset 0 15px 18px -18px rgba(255, 255, 255, .45),
    inset 0 -2px 7px rgba(0, 0, 0, .42),
    0 3px 9px rgba(0, 0, 0, .36);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
}
.leaderboard-row > * { position: relative; z-index: 1; }
.leaderboard-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .14), transparent 22%, transparent 70%, rgba(255, 255, 255, .045));
  opacity: .6;
  mix-blend-mode: screen;
}
.leaderboard-head-row {
  min-height: 28px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(120, 225, 245, .48);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .08));
  color: #d7f2f6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  box-shadow: inset 0 1px rgba(255, 255, 255, .10), inset 0 -1px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
.leaderboard-head-row::after { display: none; }
.leaderboard-head-row span {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .92), 0 0 8px rgba(120, 235, 255, .14);
}
.leaderboard-head-row span:nth-child(1),
.leaderboard-head-row span:nth-child(2) { text-align: left; }
.leaderboard-head-row span:nth-child(5) { text-align: right; }

/* Top nine: translucent emerald glass with a stronger rim and inner glow. */
.leaderboard-row.top9 {
  background:
    linear-gradient(180deg, rgba(38, 132, 74, .50), rgba(7, 45, 27, .66)) padding-box,
    linear-gradient(145deg, rgba(205, 255, 220, .55), rgba(80, 210, 130, .18) 30%, rgba(0, 0, 0, .42) 72%, rgba(150, 255, 185, .22)) border-box;
  box-shadow:
    inset 0 1px rgba(225, 255, 235, .22),
    inset 0 -9px 18px rgba(0, 0, 0, .18),
    inset 0 0 22px rgba(80, 255, 145, .045),
    0 4px 13px rgba(0, 0, 0, .38),
    0 0 20px rgba(70, 230, 130, .055);
}
.leaderboard-row.top9.rank-1 {
  background:
    linear-gradient(180deg, rgba(46, 150, 84, .58), rgba(8, 52, 30, .70)) padding-box,
    linear-gradient(145deg, rgba(255, 246, 205, .76), rgba(255, 216, 125, .28) 30%, rgba(0, 0, 0, .4) 72%, rgba(255, 238, 175, .38)) border-box;
  box-shadow:
    inset 0 1px rgba(240, 255, 245, .30),
    inset 0 18px 20px -18px rgba(255, 255, 255, .50),
    inset 0 -10px 22px rgba(0, 0, 0, .20),
    inset 0 0 26px rgba(100, 255, 160, .07),
    0 5px 16px rgba(0, 0, 0, .42),
    0 0 24px rgba(255, 220, 130, .10);
}
.leaderboard-row.top9.rank-2,
.leaderboard-row.top9.rank-3 {
  background:
    linear-gradient(180deg, rgba(41, 140, 78, .54), rgba(8, 48, 28, .68)) padding-box,
    linear-gradient(145deg, rgba(232, 250, 255, .70), rgba(170, 225, 255, .24) 30%, rgba(0, 0, 0, .4) 72%, rgba(220, 245, 255, .32)) border-box;
  box-shadow:
    inset 0 1px rgba(238, 255, 250, .26),
    inset 0 17px 19px -18px rgba(255, 255, 255, .46),
    inset 0 -10px 20px rgba(0, 0, 0, .20),
    0 4px 14px rgba(0, 0, 0, .40),
    0 0 20px rgba(190, 235, 255, .07);
}
.leaderboard-row.top9.rank-3 {
  background:
    linear-gradient(180deg, rgba(43, 136, 76, .54), rgba(9, 46, 27, .68)) padding-box,
    linear-gradient(145deg, rgba(255, 228, 195, .70), rgba(240, 175, 115, .25) 30%, rgba(0, 0, 0, .4) 72%, rgba(255, 218, 175, .32)) border-box;
  box-shadow:
    inset 0 1px rgba(255, 245, 230, .26),
    inset 0 17px 19px -18px rgba(255, 255, 255, .44),
    inset 0 -10px 20px rgba(0, 0, 0, .20),
    0 4px 14px rgba(0, 0, 0, .40),
    0 0 20px rgba(255, 190, 130, .08);
}
.leaderboard-row.me {
  outline: 1px solid rgba(255, 208, 115, .78);
  outline-offset: -2px;
  box-shadow:
    inset 0 1px rgba(255, 245, 210, .22),
    inset 0 -2px 7px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(255, 190, 80, .16),
    0 0 18px rgba(255, 185, 65, .12),
    0 4px 12px rgba(0, 0, 0, .4);
}

/* Laurel medal: glass disc, engraved number, and a lit wreath. */
.leaderboard-rank {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
.leaderboard-rank::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .28), transparent 38%),
    radial-gradient(circle at 50% 58%, rgba(2, 10, 8, .88), rgba(1, 6, 5, .94) 66%, transparent 74%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .34),
    inset 0 -2px 4px rgba(0, 0, 0, .72),
    0 2px 6px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
}
.leaderboard-rank img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, .75))
    drop-shadow(0 0 7px color-mix(in srgb, var(--rank-accent) 58%, transparent));
}
.leaderboard-rank b {
  position: relative;
  z-index: 1;
  color: #fbffff;
  font: 900 14px/1 var(--ref-font-data);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .42),
    0 2px 2px rgba(0, 0, 0, .98),
    0 0 7px rgba(0, 0, 0, .85);
}
.leaderboard-plain-rank {
  color: #d7f1f5 !important;
  font-size: 14px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .22), 0 2px 3px rgba(0, 0, 0, .92) !important;
}

.leaderboard-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 19px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  padding: 1px 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(0, 0, 0, .12));
  color: #c8dbe0;
  font: 700 9px var(--ref-font-data);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
  box-shadow: inset 0 1px rgba(255, 255, 255, .14), inset 0 -2px 4px rgba(0, 0, 0, .42), 0 1px 2px rgba(0, 0, 0, .35);
}
.leaderboard-delta i {
  width: 8px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #c3d5da, #6d838a);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .7), inset 0 1px rgba(255, 255, 255, .3);
}

/* Names and scores get a restrained embossed/raised treatment. */
.leaderboard-player-cell { display: flex; align-items: center; gap: 7px; min-width: 0; }
.leaderboard-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(155, 240, 255, .38);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .24), transparent 42%),
    linear-gradient(135deg, #2e7484, #0d2830);
  color: #f0ffff;
  font-size: 9px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 0 5px rgba(150, 245, 255, .25);
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), inset 0 -2px 4px rgba(0, 0, 0, .5), 0 2px 5px rgba(0, 0, 0, .35);
}
.leaderboard-player-cell strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f3ffff;
  font-size: 11px;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .16), 0 2px 3px rgba(0, 0, 0, .94), 0 0 9px rgba(130, 240, 255, .12);
}
.leaderboard-alliance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 19px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(150, 225, 240, .10);
  border-radius: 7px;
  padding: 1px 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .10));
  color: #c8dde2;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
  box-shadow: inset 0 1px rgba(255, 255, 255, .10), inset 0 -2px 4px rgba(0, 0, 0, .36);
}
.leaderboard-score {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fbffff;
  font: 900 11px var(--ref-font-data);
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .28),
    0 2px 3px rgba(0, 0, 0, .98),
    0 0 9px rgba(140, 245, 255, .16);
}
.leaderboard-empty {
  grid-column: 1 / -1;
  padding: 24px 8px;
  color: #78939b;
  text-align: center;
  font-size: 11px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
}

.leaderboard-note {
  margin: 2px 12px 0;
  border: 1px solid rgba(140, 225, 240, .12);
  border-radius: 10px;
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .12));
  color: #8faeb6;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 -2px 5px rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

/* Floating glass pager. */
.leaderboard-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 0 14px;
}
.leaderboard-pager button {
  width: 34px;
  height: 32px;
  border: 1px solid rgba(150, 230, 245, .16);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(0, 0, 0, .18));
  color: #d6f7fb;
  font: 900 15px/1 sans-serif;
  box-shadow: inset 0 1px rgba(255, 255, 255, .20), inset 0 -2px 5px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}
.leaderboard-pager button:active {
  color: var(--rank-accent);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 12px color-mix(in srgb, var(--rank-accent) 24%, transparent);
}
.leaderboard-pager span {
  min-width: 104px;
  border: 1px solid rgba(140, 225, 240, .22);
  border-radius: 10px;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(0, 0, 0, .16));
  color: #efffff;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .15), 0 2px 3px rgba(0, 0, 0, .9);
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), inset 0 -2px 6px rgba(0, 0, 0, .48), 0 3px 8px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}

.star-map-occupation-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  border: 1px solid rgb(255 178 74 / .38);
  border-radius: 3px;
  padding: 3px 6px;
  background: linear-gradient(180deg, rgb(255 220 150 / .12), rgb(36 25 10 / .72));
  color: #ffc46b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgb(0 0 0 / .8);
  box-shadow: inset 0 1px rgb(255 255 255 / .14), 0 2px 5px rgb(0 0 0 / .35);
}
.star-map-occupation-hint::before { content: "◈"; font-size: 9px; }

/* Readability fallback where the browser cannot blur the backdrop. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .leaderboard-head,
  .leaderboard-tabs,
  .leaderboard-row,
  .leaderboard-head-row,
  .leaderboard-tabs button.active,
  .leaderboard-rank::before,
  .leaderboard-pager button,
  .leaderboard-pager span {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .leaderboard-row { background: linear-gradient(180deg, #0e1d21, #071216) padding-box, var(--glass-rim) border-box; }
  .leaderboard-row.top9 { background: linear-gradient(180deg, #14512e, #082b1a) padding-box, var(--glass-rim) border-box; }
  .leaderboard-head { background: #0a161a; }
}

@media (max-width: 360px) {
  .leaderboard-row { grid-template-columns: 46px 34px minmax(0, 1fr) 58px 52px; padding: 0 6px; }
  .leaderboard-rank { width: 40px; height: 40px; }
  .leaderboard-rank b { font-size: 12px; }
  .leaderboard-player-cell strong { font-size: 10px; }
  .leaderboard-alliance, .leaderboard-score { font-size: 8px; }
  .leaderboard-head h2 { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard-row,
  .leaderboard-tabs button,
  .leaderboard-pager button { transition: none !important; }
  .leaderboard-row::after { display: none; }
}