/* ═══════════════════════════════════════════════════════════════════════════
   PESBUL — ELO League Hub
   Every artwork slot is optional: `.has-art` swaps the CSS gradient for the
   admin upload, so the page is finished before anything is uploaded.
   ═══════════════════════════════════════════════════════════════════════════ */

.pb-elo3 {
  --line: #16324a;
  --line-soft: #0e2437;
  --ink: #dbeafe;
  --ink-dim: #7fa0bb;
  --cyan: #22d3ee;
  --gold: #f2c14e;
  --green: #35e56f;
  --red: #ff6b74;
  /* Width and gutter come from .pb-content in shell.css — the ELO hub used to
     set its own, so the content edges jumped when moving between pages. */
  padding-bottom: 2.4rem;
  color: var(--ink);
}
.pb-elo3 svg { width: 100%; height: 100%; }
.pb-elo3-muted { color: var(--ink-dim); font-size: 0.84rem; margin: 0; }
.pb-elo3-empty { color: var(--ink-dim); font-size: 0.84rem; margin: 0.2rem 0 0; line-height: 1.5; }
.pb-elo3-sub { margin: -0.35rem 0 0.75rem; font-size: 0.78rem; color: var(--ink-dim); line-height: 1.45; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.pb-elo3-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.05rem 1.2rem 1.15rem;
  background: linear-gradient(180deg, rgba(11, 26, 42, 0.92), rgba(6, 15, 26, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pb-elo3-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin-bottom: 0.85rem;
}
/* Family, size and casing come from the shared panel-title rule in shell.css. */
.pb-elo3-card__head h2 { color: #eaf4ff; }
.pb-elo3-card__head h2 svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--cyan); }
.pb-elo3-pill {
  flex: 0 0 auto; font-size: 0.68rem; letter-spacing: 0.04em;
  color: #9fc3d8; border: 1px solid #1c3d54; border-radius: 999px; padding: 0.18rem 0.6rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.pb-elo3-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr minmax(300px, 390px);
  gap: 1.6rem; align-items: center;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.2rem);
  margin-bottom: 0.9rem;
  border: 1px solid #1c3d54; border-radius: 20px;
  background: #04101c;
}
/* Fallback: a stadium-night gradient. Replaced the moment art is uploaded. */
.pb-elo3-hero__art {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(80% 120% at 72% -20%, rgba(34, 211, 238, 0.26), transparent 58%),
    radial-gradient(55% 110% at 105% 115%, rgba(105, 60, 220, 0.22), transparent 62%),
    linear-gradient(118deg, #05121f, #0a1c30 58%, #061523);
}
.pb-elo3-hero.has-art .pb-elo3-hero__art {
  background-image: var(--hero);
  background-size: cover;
  background-position: center 30%;
}
/* Keeps hero text legible over any uploaded photo, however bright. */
.pb-elo3-hero__grain {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(3, 10, 18, 0.94) 0%, rgba(3, 10, 18, 0.78) 42%, rgba(3, 10, 18, 0.42) 78%, rgba(3, 10, 18, 0.6) 100%);
}
.pb-elo3-hero__main { display: grid; gap: 1.3rem; min-width: 0; }
.pb-elo3-hero__title { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; }

.pb-elo3-crest {
  width: clamp(56px, 6vw, 78px); height: clamp(56px, 6vw, 78px);
  display: grid; place-items: center; flex: 0 0 auto;
  color: var(--cyan); filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.5));
}
.pb-elo3-crest img { width: 100%; height: 100%; object-fit: contain; filter: none; }
.pb-elo3-crest--lg { width: 76px; height: 76px; color: var(--gold); filter: drop-shadow(0 0 16px rgba(242, 193, 78, 0.42)); }

.pb-elo3-hero__kicker { margin: 0 0 0.15rem; font-size: 0.72rem; letter-spacing: 0.24em; color: var(--cyan); }
.pb-elo3-hero__title h1 {
  margin: 0; line-height: 1;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); font-weight: 800;
  letter-spacing: 0.01em; text-transform: uppercase; color: #fff;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.6);
}
.pb-elo3-hero__desc {
  max-width: 58ch; margin: 0.6rem 0 0;
  color: #bcd6e8; font-size: 0.93rem; line-height: 1.55;
}

.pb-elo3-hero__stats {
  list-style: none; margin: 0; padding: 0.9rem 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem;
  border-top: 1px solid rgba(120, 180, 220, 0.16);
}
.pb-elo3-hero__stats li { display: grid; gap: 0.1rem; min-width: 0; }
.pb-elo3-hero__stats b { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 800; color: #fff; line-height: 1.1; }
.pb-elo3-hero__stats span {
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: #8fb3cd;
}

/* ── Personal rating card ─────────────────────────────────────────────── */
.pb-elo3-rating {
  border: 1px solid #24506d; border-radius: 16px;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(180deg, rgba(8, 26, 44, 0.94), rgba(4, 13, 24, 0.97));
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(34, 211, 238, 0.08);
}
.pb-elo3-rating__label {
  margin: 0 0 0.25rem; font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim);
}
.pb-elo3-rating__copy { margin: 0 0 0.8rem; font-size: 0.86rem; color: #9fc3d8; line-height: 1.5; }
.pb-elo3-rating__value { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.pb-elo3-rating__value b {
  font-size: clamp(2.3rem, 4vw, 3rem); font-weight: 800; line-height: 1; color: #fff;
}
.pb-elo3-rating__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  margin: 0.95rem 0; padding: 0.65rem 0;
  border-top: 1px solid #16324a; border-bottom: 1px solid #16324a;
}
.pb-elo3-rating__row div { display: grid; gap: 0.12rem; min-width: 0; }
.pb-elo3-rating__row small {
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-dim);
}
.pb-elo3-rating__row span { font-weight: 700; font-size: 0.98rem; color: #fff; }
.pb-elo3-rating__prog { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 0.6rem; align-items: center; }
.pb-elo3-rating__prog-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-dim); }
.pb-elo3-rating__prog-val { font-size: 0.72rem; color: #9fc3d8; text-align: right; }
.pb-elo3-rating__bar { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: #08192a; overflow: hidden; }
.pb-elo3-rating__bar span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.pb-elo3-rating__tier {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.65rem; font-weight: 700; font-size: 0.84rem; color: #fff;
}
.pb-elo3-rating__tier small { font-weight: 400; color: var(--ink-dim); }

/* ── Tier gem: uploaded emblem, else a coloured diamond ───────────────── */
.pb-elo3-gem { width: 26px; height: 26px; flex: 0 0 auto; display: inline-grid; place-items: center; }
.pb-elo3-gem img { width: 100%; height: 100%; object-fit: contain; }
.pb-elo3-gem.is-css::before {
  content: ""; width: 62%; height: 62%; border-radius: 22%;
  transform: rotate(45deg);
  background: var(--tier, var(--cyan));
  box-shadow: 0 0 10px -1px var(--tier, var(--cyan));
}
.pb-elo3-gem--xs { width: 18px; height: 18px; }

/* ── Verification gate ────────────────────────────────────────────────── */
.pb-elo3-gate[hidden] { display: none; }
.pb-elo3-gate {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  margin-bottom: 0.9rem; padding: 0.85rem 1.1rem;
  border: 1px solid rgba(242, 193, 78, 0.42); border-radius: 14px;
  background: linear-gradient(180deg, rgba(242, 193, 78, 0.12), rgba(242, 193, 78, 0.04));
}
.pb-elo3-gate__ic { width: 28px; height: 28px; flex: 0 0 auto; color: var(--gold); }
.pb-elo3-gate strong { display: block; color: #ffe9b0; font-size: 0.9rem; }
.pb-elo3-gate p { margin: 0.1rem 0 0; font-size: 0.82rem; color: #d8c79a; line-height: 1.45; }
.pb-elo3-gate__copy { flex: 1 1 320px; min-width: 0; }

/* ── KPI strip ────────────────────────────────────────────────────────── */
.pb-elo3-kpis {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem; margin-bottom: 0.9rem;
}
.pb-elo3-kpi {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 0.85rem 0.95rem; display: grid; gap: 0.15rem; align-content: start;
  background: linear-gradient(180deg, rgba(10, 24, 40, 0.88), rgba(6, 15, 26, 0.94));
}
.pb-elo3-kpi__label { font-size: 0.62rem; color: var(--ink-dim); }
.pb-elo3-kpi strong { font-size: 1.55rem; font-weight: 800; color: #fff; line-height: 1.15; }
.pb-elo3-kpi small { font-size: 0.68rem; color: #83a9c6; }
.pb-elo3-kpi__gem { position: absolute; top: 0.7rem; right: 0.8rem; width: 32px; height: 32px; }
.pb-elo3-kpi__gem img { width: 100%; height: 100%; object-fit: contain; }
.pb-elo3-kpi--season strong { color: var(--gold); }
.pb-elo3-kpi--season.has-art::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--art); background-size: cover; background-position: center;
  opacity: 0.3;
}
.pb-elo3-kpi--season.has-art { isolation: isolate; }
/* Rating curve drawn from real transactions; absent when there are none. */
.pb-elo3-curve { display: block; height: 30px; margin-top: 0.35rem; }
.pb-elo3-curve svg { display: block; }

/* ── Layout rows ──────────────────────────────────────────────────────── */
.pb-elo3-row { display: grid; gap: 0.8rem; margin-bottom: 0.9rem; align-items: start; }
.pb-elo3-row--main { grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr); }
.pb-elo3-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-elo3-row--2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.pb-elo3-row--podium { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); }
.pb-elo3-stack { display: grid; gap: 0.8rem; align-content: start; }

/* ── THE LEADERBOARD ──────────────────────────────────────────────────── */
.pb-elo3-board.has-art { isolation: isolate; }
.pb-elo3-board.has-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--art); background-size: cover; background-position: center;
  opacity: 0.16;
}
.pb-elo3-lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
/* Every column is a fixed width — including the action column. An `auto` last
   column would size to its own content, so a row saying "You" and a row saying
   "Challenge" would sit on different tracks and nothing would line up down the
   board. Fixed tracks make each column read as a column. */
.pb-elo3-lb__row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 6rem 4.4rem 5.6rem 8.2rem;
  align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid transparent; border-radius: 11px;
  background: rgba(6, 18, 30, 0.6);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.pb-elo3-lb__act { display: flex; justify-content: flex-end; }
.pb-elo3-lb__row:hover {
  border-color: rgba(34, 211, 238, 0.35);
  background: rgba(9, 28, 44, 0.9);
  transform: translateX(2px);
}
.pb-elo3-lb__rank {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 9px;
  font-weight: 800; font-size: 0.92rem; color: #8fb3cd;
  background: #08192a; border: 1px solid var(--line-soft);
}
/* Podium rows get their metal, so the top three read at a glance. */
.is-rank-1 .pb-elo3-lb__rank { color: #23180a; background: linear-gradient(150deg, #ffe08a, #e0a821); border-color: #ffd76a; }
.is-rank-2 .pb-elo3-lb__rank { color: #16202a; background: linear-gradient(150deg, #eef4f9, #a8b8c6); border-color: #dbe6ef; }
.is-rank-3 .pb-elo3-lb__rank { color: #26150a; background: linear-gradient(150deg, #f0b077, #c0713a); border-color: #f0b077; }
.pb-elo3-lb__row.is-podium { background: rgba(11, 32, 50, 0.72); }
.pb-elo3-lb__row.is-rank-1 { border-color: rgba(242, 193, 78, 0.3); }

.pb-elo3-lb__player {
  display: flex; align-items: center; gap: 0.6rem; min-width: 0;
  color: inherit; text-decoration: none;
}
.pb-elo3-lb__player:hover .pb-elo3-lb__who b { color: var(--cyan); }
.pb-elo3-lb__who { display: grid; gap: 0.05rem; min-width: 0; }
.pb-elo3-lb__who b {
  font-size: 0.92rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .16s ease;
}
.pb-elo3-lb__who em { font-style: normal; font-size: 0.66rem; color: var(--ink-dim); font-weight: 400; }
.pb-elo3-lb__who small { font-size: 0.66rem; color: var(--ink-dim); letter-spacing: 0.04em; }

.pb-elo3-lb__elo { display: flex; align-items: baseline; gap: 0.35rem; }
.pb-elo3-lb__elo b { font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.pb-elo3-lb__record { font-size: 0.8rem; color: var(--ink-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-elo3-lb__record b { color: var(--green); font-weight: 700; }
.pb-elo3-lb__wr { display: grid; gap: 0.2rem; }
.pb-elo3-lb__wrbar { height: 5px; border-radius: 999px; background: #0a1f31; overflow: hidden; }
.pb-elo3-lb__wrbar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1e9e5a, var(--green)); }
.pb-elo3-lb__wr small { font-size: 0.68rem; color: #9fc3d8; text-align: right; }

.pb-elo3-delta { font-style: normal; font-size: 0.72rem; font-weight: 700; }
.pb-elo3-up { color: var(--green); } .pb-elo3-down { color: var(--red); } .pb-elo3-even { color: #9fc3d8; }

/* Challenge button — the whole point of the board */
.pb-elo3-challenge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(34, 211, 238, 0.45); border-radius: 9px;
  background: rgba(34, 211, 238, 0.1);
  color: var(--cyan); font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background .16s ease, box-shadow .16s ease, color .16s ease;
}
.pb-elo3-challenge svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pb-elo3-challenge:hover:not(:disabled) {
  background: var(--cyan); color: #04101c;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.4);
}
.pb-elo3-challenge:disabled { opacity: 0.4; cursor: default; }
.pb-elo3-challenge.is-you { border-color: var(--line); background: transparent; color: var(--ink-dim); cursor: default; }
.pb-elo3-board__note { margin: 0.7rem 0 0; min-height: 1rem; font-size: 0.8rem; }
.pb-elo3-board__note.is-ok { color: var(--green); }
.pb-elo3-board__note.is-error { color: #ff8a8a; }

/* ── Faces ────────────────────────────────────────────────────────────── */
.pb-elo3-face { --pb-avatar-size: 34px; }
.pb-elo3-face--sm { --pb-avatar-size: 26px; }
.pb-elo3-face--lg { --pb-avatar-size: 60px; }

/* ── Distribution ─────────────────────────────────────────────────────── */
.pb-elo3-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pb-elo3-dist li { display: grid; grid-template-columns: 18px 68px minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; font-size: 0.79rem; }
.pb-elo3-dist__name { color: #cfe0ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-elo3-dist__bar { height: 7px; border-radius: 999px; background: #08192a; overflow: hidden; }
.pb-elo3-dist__bar span { display: block; height: 100%; border-radius: 999px; }
.pb-elo3-dist__count { text-align: right; font-weight: 700; white-space: nowrap; color: #fff; }
.pb-elo3-dist__count small { color: var(--ink-dim); font-weight: 400; }
.pb-elo3-dist__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 0.8rem; padding-top: 0.65rem; border-top: 1px solid var(--line-soft); font-size: 0.8rem;
}
.pb-elo3-dist__total strong { color: #fff; font-size: 1rem; }

/* ── Explainer ────────────────────────────────────────────────────────── */
.pb-elo3-explain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.pb-elo3-explain li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0.7rem; }
.pb-elo3-explain__ic {
  width: 30px; height: 30px; padding: 6px; border-radius: 9px;
  color: var(--cyan); background: rgba(34, 211, 238, 0.1);
}
.pb-elo3-explain strong { display: block; font-size: 0.82rem; color: var(--cyan); margin-bottom: 0.18rem; }
.pb-elo3-explain p { margin: 0; font-size: 0.78rem; color: #a9c4d8; line-height: 1.5; }
.pb-elo3-formula {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--line-soft);
  font-size: 0.7rem; color: var(--ink-dim);
}
.pb-elo3-formula b { color: #cfe0ee; font-weight: 700; }

/* ── Climbers ─────────────────────────────────────────────────────────── */
.pb-elo3-climbers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; counter-reset: c; }
.pb-elo3-climbers li {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.55rem; font-size: 0.85rem;
  padding: 0.3rem 0.1rem;
}
.pb-elo3-climbers__pos { font-weight: 800; color: var(--ink-dim); font-size: 0.78rem; }
.pb-elo3-climbers .pb-elo3-player,
.pb-elo3-changes .pb-elo3-player {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0;
  color: inherit; text-decoration: none;
}
.pb-elo3-climbers .pb-elo3-player span,
.pb-elo3-changes .pb-elo3-player > span { min-width: 0; }
.pb-elo3-climbers .pb-elo3-player:hover span,
.pb-elo3-changes .pb-elo3-player:hover b { color: var(--cyan); }
.pb-elo3-climbers li small { color: var(--ink-dim); font-size: 0.72rem; }

/* ── Recent changes ───────────────────────────────────────────────────── */
.pb-elo3-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pb-elo3-changes li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pb-elo3-changes__name { display: grid; gap: 0.05rem; min-width: 0; }
.pb-elo3-changes__name b {
  font-size: 0.85rem; font-weight: 700; color: #eaf4ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .16s ease;
}
.pb-elo3-changes__name small { font-size: 0.68rem; color: var(--ink-dim); }
.pb-elo3-changes__end { display: grid; justify-items: end; gap: 0.05rem; flex: 0 0 auto; }
.pb-elo3-changes__end small { font-size: 0.68rem; color: var(--ink-dim); }
.pb-elo3-changes__end .pb-elo3-delta { font-size: 0.86rem; }

/* ── Challenge cards ──────────────────────────────────────────────────── */
[data-pb-elo-challenges-body] { max-height: 380px; overflow-y: auto; }
.pb-elo3-ch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.pb-elo3-ch {
  padding: 0.6rem 0.75rem; border: 1px solid var(--line-soft); border-radius: 11px;
  background: #04101c; display: grid; gap: 0.45rem;
}
.pb-elo3-ch--accepted { border-color: rgba(53, 229, 111, 0.32); }
.pb-elo3-ch--sent { border-color: rgba(34, 211, 238, 0.24); }
.pb-elo3-ch__head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em;
}
.pb-elo3-ch__dir { color: var(--cyan); font-weight: 700; }
.pb-elo3-ch__status { color: #9fc3d8; }
.pb-elo3-ch__who { display: flex; align-items: center; gap: 0.55rem; color: inherit; text-decoration: none; min-width: 0; }
.pb-elo3-ch__who:hover b { color: var(--cyan); }
.pb-elo3-ch__who span { display: grid; gap: 0.05rem; min-width: 0; }
.pb-elo3-ch__who b { font-size: 0.88rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-elo3-ch__who small { font-size: 0.68rem; color: var(--ink-dim); }
.pb-elo3-ch__msg { margin: 0; font-size: 0.78rem; color: #a9c4d8; }
.pb-elo3-ch__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pb-elo3-room {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.55rem; border-radius: 9px; background: #08192a; font-size: 0.8rem;
}
.pb-elo3-room code { color: var(--cyan); font-weight: 700; letter-spacing: 0.1em; }
.pb-elo3-room small { flex-basis: 100%; color: var(--ink-dim); font-size: 0.7rem; line-height: 1.35; }

/* ── Opponent roster ──────────────────────────────────────────────────── */
.pb-elo3-field { position: relative; display: block; margin-bottom: 0.6rem; }
.pb-elo3-field svg {
  position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-dim); pointer-events: none;
}
.pb-elo3-field input {
  width: 100%; padding: 0.6rem 0.8rem 0.6rem 2.1rem;
  border-radius: 10px; border: 1px solid #1c3d54; background: #04101c; color: #f7fcff;
  font: inherit; font-size: 0.88rem;
}
.pb-elo3-field input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14); }
.pb-elo3-opp { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; max-height: 380px; overflow-y: auto; }
.pb-elo3-opp li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.6rem; border: 1px solid #163449; border-radius: 10px; background: #04101c;
}
.pb-elo3-opp li:hover { border-color: rgba(34, 211, 238, 0.4); }
.pb-elo3-opp__meta { display: grid; gap: 0.05rem; min-width: 0; }
.pb-elo3-opp__meta a, .pb-elo3-opp__meta strong { color: #fff; text-decoration: none; font-size: 0.87rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-elo3-opp__meta a:hover { color: var(--cyan); }
.pb-elo3-opp__meta small { font-size: 0.7rem; color: var(--ink-dim); }
.pb-elo3-quality {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.pb-elo3-quality--even { color: #35e56f; background: rgba(53, 229, 111, 0.14); }
.pb-elo3-quality--good { color: #22d3ee; background: rgba(34, 211, 238, 0.14); }
.pb-elo3-quality--fair { color: #f2c14e; background: rgba(242, 193, 78, 0.14); }
.pb-elo3-quality--stretch { color: #ff9d6b; background: rgba(255, 157, 107, 0.14); }
.pb-elo3-notice { min-height: 1.1rem; margin-top: 0.5rem; font-size: 0.8rem; }
.pb-elo3-notice.is-ok { color: var(--green); }
.pb-elo3-notice.is-error { color: #ff8a8a; }

/* ── Gain / loss ──────────────────────────────────────────────────────── */
.pb-elo3-gl { border-radius: 11px; padding: 0.75rem 0.9rem; margin-bottom: 0.6rem; }
.pb-elo3-gl--up { border: 1px solid rgba(53, 229, 111, 0.3); background: rgba(53, 229, 111, 0.07); }
.pb-elo3-gl--down { border: 1px solid rgba(255, 77, 89, 0.3); background: rgba(255, 77, 89, 0.06); }
.pb-elo3-gl__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.pb-elo3-gl__head svg { width: 17px; height: 17px; flex: 0 0 auto; }
.pb-elo3-gl__head strong { font-size: 0.84rem; }
.pb-elo3-gl--up .pb-elo3-gl__head { color: var(--green); }
.pb-elo3-gl--down .pb-elo3-gl__head { color: var(--red); }
.pb-elo3-gl p { margin: 0; font-size: 0.82rem; color: #cfe0ee; line-height: 1.5; }
.pb-elo3-gl__note { margin: 0.5rem 0 0; font-size: 0.75rem; color: #7ea7c4; line-height: 1.55; }

/* ── Podium ───────────────────────────────────────────────────────────── */
.pb-elo3-podium.has-art { isolation: isolate; }
.pb-elo3-podium.has-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--art); background-size: cover; background-position: center;
  opacity: 0.18;
}
.pb-elo3-podium__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem; align-items: end;
}
.pb-elo3-podium__slot {
  display: grid; justify-items: center; gap: 0.25rem; text-align: center;
  padding: 0.9rem 0.6rem 0;
  border: 1px solid var(--line-soft); border-top-left-radius: 12px; border-top-right-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 28, 45, 0.8), rgba(5, 14, 25, 0.5));
}
.pb-elo3-podium__slot.is-rank-1 { border-color: rgba(242, 193, 78, 0.4); }
.pb-elo3-podium__medal {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  font-size: 0.78rem; font-weight: 800; color: #8fb3cd; background: #08192a;
}
.is-rank-1 .pb-elo3-podium__medal { color: #23180a; background: linear-gradient(150deg, #ffe08a, #e0a821); }
.is-rank-2 .pb-elo3-podium__medal { color: #16202a; background: linear-gradient(150deg, #eef4f9, #a8b8c6); }
.is-rank-3 .pb-elo3-podium__medal { color: #26150a; background: linear-gradient(150deg, #f0b077, #c0713a); }
.pb-elo3-podium__who { display: grid; justify-items: center; gap: 0.3rem; color: inherit; text-decoration: none; max-width: 100%; }
.pb-elo3-podium__who b { font-size: 0.92rem; color: #fff; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-elo3-podium__who:hover b { color: var(--cyan); }
.pb-elo3-podium__elo { font-size: 1.1rem; font-weight: 800; color: var(--cyan); }
.pb-elo3-podium__elo i { font-style: normal; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--ink-dim); }
.pb-elo3-podium__slot small { font-size: 0.68rem; color: var(--ink-dim); }
.pb-elo3-podium__step { display: block; width: 100%; margin-top: 0.6rem; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, rgba(34, 211, 238, 0.22), transparent); }
.is-rank-1 .pb-elo3-podium__step { height: 46px; background: linear-gradient(180deg, rgba(242, 193, 78, 0.35), transparent); }
.is-rank-2 .pb-elo3-podium__step { height: 30px; }
.is-rank-3 .pb-elo3-podium__step { height: 20px; }

/* ── Brand card ───────────────────────────────────────────────────────── */
.pb-elo3-brand {
  display: grid; place-items: center; text-align: center; gap: 0.45rem; min-height: 100%;
  background: radial-gradient(120% 120% at 50% 0%, rgba(242, 193, 78, 0.15), transparent 62%), linear-gradient(180deg, #0b1a2a, #05101d);
}
.pb-elo3-brand.has-art { isolation: isolate; }
.pb-elo3-brand.has-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--art); background-size: cover; background-position: center;
  opacity: 0.28;
}
.pb-elo3-brand h3 { margin: 0; letter-spacing: 0.14em; text-transform: uppercase; font-size: 1.05rem; color: #fff; }
.pb-elo3-brand p { margin: 0; font-size: 0.8rem; color: #b6cfe2; max-width: 26ch; line-height: 1.5; }

/* ── Quick actions ────────────────────────────────────────────────────── */
.pb-elo3-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.pb-elo3-qa {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 0.95rem; border: 1px solid var(--line); border-radius: 13px;
  background: linear-gradient(180deg, rgba(10, 24, 40, 0.82), rgba(6, 15, 26, 0.9));
  color: inherit; text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pb-elo3-qa:hover { border-color: var(--cyan); box-shadow: 0 0 20px rgba(34, 211, 238, 0.18); }
.pb-elo3-qa__ic {
  width: 34px; height: 34px; flex: 0 0 auto; padding: 8px; border-radius: 10px;
  color: var(--cyan); background: rgba(34, 211, 238, 0.1);
}
.pb-elo3-qa strong { display: block; font-size: 0.83rem; color: #eaf4ff; }
.pb-elo3-qa small { font-size: 0.7rem; color: var(--ink-dim); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .pb-elo3-row--main { grid-template-columns: minmax(0, 1fr); }
  .pb-elo3-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-elo3-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pb-elo3-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-elo3-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .pb-elo3-hero { grid-template-columns: minmax(0, 1fr); }
  .pb-elo3-row--podium { grid-template-columns: minmax(0, 1fr); }
  .pb-elo3-lb__row { grid-template-columns: 2.2rem minmax(0, 1fr) 5.4rem 4rem 3.4rem; }
  .pb-elo3-lb__wr { display: none; }
}
@media (max-width: 820px) {
  .pb-elo3-row--3, .pb-elo3-row--2 { grid-template-columns: minmax(0, 1fr); }
  .pb-elo3-stack { grid-template-columns: minmax(0, 1fr); }
  .pb-elo3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-elo3-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 0.6rem; }
  .pb-elo3-podium__grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .pb-elo3-podium__step { display: none; }
  .pb-elo3-podium__slot { border-radius: 12px; padding-bottom: 0.8rem; }
}
@media (max-width: 560px) {
  /* Below this width only rank, name, rating and the button still fit. The
     record and win-rate columns drop rather than being crushed. */
  .pb-elo3-lb__row { grid-template-columns: 2rem minmax(0, 1fr) 4.6rem 2.4rem; gap: 0.5rem; }
  .pb-elo3-lb__record { display: none; }
  .pb-elo3-challenge span { display: none; }
  .pb-elo3-challenge { padding: 0.5rem; }
  .pb-elo3-challenge svg { width: 15px; height: 15px; }
  .pb-elo3-quick { grid-template-columns: minmax(0, 1fr); }
  .pb-elo3-kpis { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pb-elo3-lb__row, .pb-elo3-challenge, .pb-elo3-rating__bar span { transition: none; }
  .pb-elo3-lb__row:hover { transform: none; }
}

/* Join / leave the league — sits under the tier progress in the rating card. */
.pb-elo3-member { grid-column: 1 / -1; justify-self: start; margin-top: 0.7rem; }
.pb-elo3-member.is-join { border-color: var(--green); color: var(--green); }

/* A row holding one card — the gain/loss explainer after the opponent finder
   was removed. Capped so a single card does not stretch across 1600px. */
.pb-elo3-row--solo { grid-template-columns: minmax(0, 1fr); }
.pb-elo3-row--solo > .pb-elo3-card { max-width: 780px; }

/* ── Your challenges, promoted to the top ─────────────────────────────────── */
.pb-elo3-row--challenges { grid-template-columns: minmax(0, 1fr); }

/* ── Match history ────────────────────────────────────────────────────────── */
.pb-elo3-row--solo-wide { grid-template-columns: minmax(0, 1fr); }
.pb-elo3-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; counter-reset: none; }
.pb-elo3-history__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem minmax(0, 1fr) 5.5rem;
  align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-soft); border-radius: 11px;
  background: rgba(6, 18, 30, 0.6);
}
.pb-elo3-history__side {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0;
  color: inherit; text-decoration: none;
}
.pb-elo3-history__side b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pb-elo3-history__side--away { justify-content: flex-end; }
.pb-elo3-history__side:hover b { color: var(--cyan); }
/* The verb and the timestamp share the middle column, stacked. */
.pb-elo3-history__mid { display: grid; justify-items: center; gap: 0.1rem; text-align: center; }
.pb-elo3-history__mid em {
  font-style: normal; font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim);
}
.pb-elo3-history__row.is-draw .pb-elo3-history__mid em { color: var(--gold); }
.pb-elo3-history__mid small { font-size: 0.66rem; color: #6f8fab; }
.pb-elo3-history__delta { display: flex; justify-content: flex-end; gap: 0.5rem; font-variant-numeric: tabular-nums; }
.pb-elo3-history__delta b { font-size: 0.84rem; font-weight: 800; }

@media (max-width: 720px) {
  .pb-elo3-history__row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.6rem; }
  .pb-elo3-history__mid { grid-column: 2; justify-items: end; }
  .pb-elo3-history__side--away { grid-column: 1; justify-content: flex-start; }
  .pb-elo3-history__delta { grid-column: 2; }
}

/* A closed fixture states its outcome instead of offering a dead room code. */
.pb-elo3-ch__done {
  margin: 0.5rem 0 0; padding: 0.4rem 0.6rem;
  border-radius: 8px; background: rgba(53, 229, 111, 0.08);
  color: var(--green); font-size: 0.76rem;
}

/* ── Your challenges: two visible, the rest a scroll away ───────────────────
   A challenge card is tall — opponent, room code, hint and two buttons — so a
   handful of them pushed the leaderboard and everything under it off screen.
   Two are enough to act on; the rest are one scroll away.

   Open challenges are what the block is for, so they are never the ones cut:
   the list is already ordered open-first by the server. */
.pb-elo3-ch-list {
    /* Height is set by JS from the third card's real position: an open card
       with a room code and buttons is twice the height of a completed one, so
       any fixed value shows the wrong number of them. The fallback below only
       applies before the script runs. */
    max-height: 22rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 2px;
    /* The last visible card fades, so a cut edge reads as "more below" rather
       than as a rendering fault. */
    mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
}
@media (max-width: 720px) {
    .pb-elo3-ch-list { max-height: 22rem; }
}

/* ── Compact challenge card ─────────────────────────────────────────────────
   The block sits near the top of the page, so its height is spent on the rest
   of the hub. Everything here is about fitting three cards in the space one
   and a half used to take, without dropping anything a player needs to act. */
.pb-elo3-ch { padding: 0.5rem 0.65rem; gap: 0.3rem; }
.pb-elo3-ch__head { font-size: 0.62rem; }
.pb-elo3-ch__msg { margin: 0; font-size: 0.78rem; }
/* The room block carries the code and the instruction; the instruction is the
   tall part and reads fine at one line with an ellipsis until hovered. */
.pb-elo3-room { padding: 0.35rem 0.5rem; gap: 0.3rem 0.5rem; }
.pb-elo3-room small {
    flex-basis: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
    font-size: 0.68rem;
}
.pb-elo3-ch__actions { gap: 0.3rem; }
.pb-elo3-ch__done { margin: 0; font-size: 0.74rem; }

/* The card must not scroll as well as the list inside it — that is what put
   two bars side by side. */
.pb-elo3-card { overflow: visible; }
.pb-elo3-card--clip { overflow: hidden; }

/* ── What a result is worth: one wide, short band ───────────────────────────
   The two cases are a pair — win against stronger, win against weaker — so
   they read better side by side than stacked. Across the full width the card
   loses half its height without losing a word. */
.pb-elo3-row--full { grid-template-columns: minmax(0, 1fr); }
.pb-elo3-row--full > .pb-elo3-card { max-width: none; }
.pb-elo3-gainloss {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0 0.8rem;
    align-items: start;
}
.pb-elo3-gainloss > .pb-elo3-card__head { grid-column: 1 / -1; }
.pb-elo3-gainloss > .pb-elo3-gl { margin-bottom: 0; }
.pb-elo3-gainloss > .pb-elo3-gl--up { grid-column: 1; }
.pb-elo3-gainloss > .pb-elo3-gl--down { grid-column: 2; }
.pb-elo3-gainloss > .pb-elo3-gl__note { grid-column: 1 / -1; margin-top: 0.7rem; }

@media (max-width: 720px) {
    .pb-elo3-gainloss { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
    .pb-elo3-gainloss > .pb-elo3-gl--up,
    .pb-elo3-gainloss > .pb-elo3-gl--down { grid-column: 1; }
}

/* Match history now shares a three-column row, so its rows must survive a
   narrower box: the two names stack above the verb instead of flanking it. */
.pb-elo3-row--3 #pb-elo-history .pb-elo3-history__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.5rem;
}
.pb-elo3-row--3 #pb-elo-history .pb-elo3-history__mid { justify-items: end; }
.pb-elo3-row--3 #pb-elo-history .pb-elo3-history__side--away { grid-column: 1; justify-content: flex-start; }
.pb-elo3-row--3 #pb-elo-history .pb-elo3-history__delta { grid-column: 2; }

/* ── Your matches: an accepted challenge, drawn as a fixture ───────────────── */
.pb-elomatch-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pb-elomatch { padding: 12px; border: 1px solid rgba(34, 211, 238, 0.4); border-radius: 12px; background: rgba(4, 16, 28, 0.5); }
.pb-elomatch__fixture { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pb-elomatch__side { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pb-elomatch__side--away { justify-content: flex-end; text-align: right; }
.pb-elomatch__side b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.pb-elomatch__side .pb-player-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
.pb-elomatch__side--away .pb-player-link { flex-direction: row-reverse; }
.pb-elomatch__vs { flex: 0 0 auto; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
.pb-elomatch__code { display: block; width: 100%; margin-top: 10px; }