/* wgf-pvp.css — PvP leaderboards styling (Warm Stone + Gold). Uses design tokens from
   static/css/_tokens.css; falls back to literal values so it renders standalone. */
.wgf-pvp-wrap { max-width: 1200px; margin: 0 auto; }
.wgf-pvp-fresh { color: var(--wgf-up); font-size: .85rem; margin: .2rem 0 1.1rem; }
.wgf-pvp-stale { color: var(--wgf-gold); font-size: .85rem; margin: .2rem 0 1.1rem; }
/* Live freshness dot for the character "Updated …" line: takes its parent's fresh/stale color and
   gently pulses when fresh, as a "data is live" verification cue. Relative time reads muted. */
.wgf-fresh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: var(--space-1); vertical-align: middle; background: currentColor; }
.wgf-char-updated-rel { color: var(--wgf-muted); }
@media (prefers-reduced-motion: no-preference) {
  .wgf-pvp-fresh .wgf-fresh-dot { animation: wgf-fresh-pulse 2.2s ease-in-out infinite; }
}
@keyframes wgf-fresh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wgf-up-rgb), .55); }
  50% { box-shadow: 0 0 0 4px rgba(var(--wgf-up-rgb), 0); }
}
.wgf-pvp-empty { color: var(--wgf-muted); font-style: italic; padding: 1rem 0; }

.wgf-pvp-table { width: 100%; border-collapse: collapse; margin: .6rem 0 1.4rem; font-size: .95rem; }
.wgf-pvp-table th {
  background: var(--wgf-panel-2); color: var(--wgf-gold);
  text-align: left; padding: .55rem .7rem; border-bottom: 2px solid var(--wgf-border-neutral);
}
.wgf-pvp-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--wgf-border-neutral); }
.wgf-pvp-table tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
.wgf-pvp-table a { color: var(--wgf-gold); text-decoration: none; }
.wgf-pvp-table a:hover { text-decoration: underline; }
.wgf-pvp-horde td:first-child { box-shadow: inset 3px 0 0 #b03a2e; }
.wgf-pvp-alliance td:first-child { box-shadow: inset 3px 0 0 #2e5e9e; }

/* class/spec icons (Blizzard render CDN) — small, inline beside the name/label */
.wgf-pvp-icon {
  width: 20px; height: 20px; vertical-align: middle; border-radius: 4px;
  margin-right: var(--space-1); border: 1px solid var(--wgf-border-neutral); background: var(--wgf-bg);
}
ul.wgf-pvp-cards .wgf-pvp-icon { margin-right: var(--space-2); }

/* --- Ladder table (authority data-grid): race-portrait avatar ringed in class color, class-colored
   name, tier-badged rating, spec icon + name, faction crest, W (green) / L (red) / Win% --- */
.wgf-pvp-ladder { border: 1px solid var(--wgf-metal-soft); border-radius: 4px; overflow: hidden; }
.wgf-pvp-ladder th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--wgf-muted); font-weight: 600; white-space: nowrap;
}
.wgf-pvp-ladder td { padding: .55rem .8rem; vertical-align: middle; }
.wgf-pvp-ladder tr:hover td { background: rgba(255, 255, 255, .03); }
.wgf-pvp-rk { width: 2.4rem; text-align: center; color: var(--wgf-gold);
  font-weight: 700; font-variant-numeric: tabular-nums; }
.wgf-pvp-num { text-align: right; font-variant-numeric: tabular-nums; }

/* sortable headers */
.wgf-pvp-sortable { cursor: pointer; user-select: none; }
.wgf-pvp-sortable:hover, .wgf-pvp-sortable.on { color: var(--wgf-gold); }
.wgf-pvp-sortar { display: inline-block; width: 0; height: 0; margin-left: .3rem; opacity: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; vertical-align: middle; }
.wgf-pvp-sortable.on .wgf-pvp-sortar { opacity: .9; }
/* SSR sortable headers (arena/shuffle pages): the whole label is a link; a caret shows the active
   (descending) direction, faint on the other columns to signal they sort too. */
.wgf-pvp-sortable a { display: inline-flex; align-items: center; gap: var(--space-1); color: inherit;
  text-decoration: none; }
.wgf-pvp-sortable a:hover { color: var(--wgf-gold); }
.wgf-pvp-caret { font-size: .72em; opacity: .3; line-height: 1; }
.wgf-pvp-sortable.on .wgf-pvp-caret { opacity: 1; color: var(--wgf-gold); }

/* rating + tier badge */
.wgf-pvp-ratecell { white-space: nowrap; }
.wgf-pvp-rateinner { display: inline-flex; align-items: center; gap: .35rem; justify-content: flex-end; }
.wgf-pvp-rating { color: var(--wgf-gold); font-weight: 700; font-size: 1.02rem;
  font-variant-numeric: tabular-nums; }
.wgf-pvp-tier { display: inline-flex; } .wgf-pvp-tier svg, .wgf-pvp-tier img { display: block; }

/* player cell: race-portrait avatar (class-colored ring) + class-colored name + realm sub */
.wgf-pvp-pcell { width: 99%; }   /* greedy: the player column takes the slack */
.wgf-pvp-player { display: flex; align-items: center; gap: .65rem; }
.wgf-pvp-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; padding: 2px;
  background: var(--wgf-panel-3); display: inline-flex; }
/* race portrait OR the spec-icon fallback both fill the circle (the 3-class selector beats the
   .wgf-pvp-ladder .wgf-pvp-icon spec-column rule, so the fallback isn't stuck small in a corner) */
.wgf-pvp-av img, .wgf-pvp-ladder .wgf-pvp-av .wgf-pvp-icon { width: 100%; height: 100%; margin: 0;
  border: 0; border-radius: 50%; object-fit: cover; background: var(--wgf-bg); }
.wgf-pvp-av-blank { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--wgf-bg); }
.wgf-pvp-pwho { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wgf-pvp-name { font-weight: 600; font-size: 1rem; white-space: nowrap; }
a.wgf-pvp-name { color: var(--wgf-text); text-decoration: none; }
a.wgf-pvp-name:hover { text-decoration: underline; }
.wgf-pvp-sub { color: var(--wgf-muted); font-size: .78rem; white-space: nowrap; }
.wgf-pvp-sub a, .wgf-pvp-realm { color: var(--wgf-muted); }
.wgf-pvp-sub a:hover { color: var(--wgf-gold); }

/* spec column: small spec icon + class-colored spec name */
.wgf-pvp-col-spec { white-space: nowrap; }
.wgf-pvp-specwrap { display: inline-flex; align-items: center; gap: .4rem; }
.wgf-pvp-ladder .wgf-pvp-icon { width: 20px; height: 20px; margin: 0; border-radius: 4px; flex: 0 0 auto; }
.wgf-pvp-dim { color: #6b6457; }

/* faction crest */
.wgf-pvp-col-fac { text-align: center; }
.wgf-pvp-fac { display: inline-flex; }
.wgf-pvp-crest { width: 18px; height: 18px; vertical-align: middle; }
.wgf-pvp-fac-none { display: inline-block; width: 18px; height: 18px; }

/* record */
.wgf-pvp-wins { color: var(--wgf-up); font-weight: 600; }
.wgf-pvp-losses { color: var(--wgf-down); font-weight: 600; }
.wgf-pvp-wr { font-weight: 700; }

ul.wgf-pvp-cards {
  list-style: none; padding: 0; margin: 1rem 0;
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
}
ul.wgf-pvp-cards li { padding: 0; }
ul.wgf-pvp-cards li a {
  display: flex; align-items: center; gap: .7rem; text-decoration: none;
  background: var(--wgf-panel-1); border: 1px solid var(--wgf-metal-soft);
  border-radius: 4px; padding: .7rem .85rem; transition: border-color .12s, background .12s;
}
ul.wgf-pvp-cards li a:hover { border-color: var(--wgf-gold); background: var(--wgf-panel-2); text-decoration: none; }
ul.wgf-pvp-cards .wgf-pvp-icon { width: 34px; height: 34px; margin: 0; flex: 0 0 auto; }
.wgf-pvp-cardtext { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wgf-pvp-cardname { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.wgf-pvp-cardmeta { color: var(--wgf-muted); font-size: .78rem; }
.wgf-pvp-cardgo { margin-left: auto; color: #5c554a; font-size: 1.3rem; line-height: 1; flex: none; }
ul.wgf-pvp-cards li a:hover .wgf-pvp-cardgo { color: var(--wgf-gold); }

/* --- Hero (stat band) --- */
.wgf-pvp-hero { margin: 0 0 1.2rem; }
.wgf-pvp-hero h1 { margin: .15rem 0 .35rem; }

/* Hub hero: tighter H1 so the "WoW PvP Leaderboards — US" title fits on one desktop line,
   a quiet subtitle, and compact freshness metadata. Scoped to the landing page only. */
.wgf-pvp-hero--hub { padding-top: .3rem; margin-bottom: 1.5rem; }
.wgf-pvp-hero--hub h1 { font-size: 2rem; line-height: 1.12; margin: .1rem 0 .3rem; }
.wgf-pvp-hero-sub { color: var(--wgf-muted); font-size: .98rem; line-height: 1.5;
  max-width: 62ch; margin: 0 0 .55rem; }
.wgf-pvp-hero--hub .wgf-pvp-fresh, .wgf-pvp-hero--hub .wgf-pvp-stale {
  font-size: .78rem; margin: 0; opacity: .82; }
@media (max-width: 560px) { .wgf-pvp-hero--hub h1 { font-size: 1.6rem; } }
.wgf-pvp-crumb { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  color: var(--wgf-muted); font-size: .82rem; margin-bottom: .4rem; }
.wgf-pvp-crumb a { color: var(--wgf-muted); text-decoration: none; display: inline-flex;
  align-items: center; gap: .3rem; }
.wgf-pvp-crumb a:hover { color: var(--wgf-gold); }
.wgf-pvp-crumb-home { font-size: .95rem; line-height: 1; opacity: .9; }
.wgf-pvp-crumb-sep { color: #5c554a; }
.wgf-pvp-crumb-here { color: var(--wgf-gold); font-weight: 600; }

/* --- Bracket switcher (underline tabs, every ladder page) --- */
.wgf-pvp-pico { flex: none; vertical-align: middle; }
.wgf-pvp-brackettabs { display: flex; gap: .15rem; flex-wrap: wrap; margin: 0 0 1.3rem;
  border-bottom: 1px solid var(--wgf-border-neutral); }
.wgf-pvp-btab { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .9rem;
  margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--wgf-muted);
  font-size: .92rem; font-weight: 600; text-decoration: none; transition: color .12s, border-color .12s; }
.wgf-pvp-btab:hover { color: var(--wgf-text); }
.wgf-pvp-btab.on { color: var(--wgf-gold); border-bottom-color: var(--wgf-gold); }

/* --- Spec switcher row (Solo Shuffle / Blitz) — wraps to show every spec, no scrollbar --- */
.wgf-pvp-specrow { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.1rem; }
.wgf-pvp-spill { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .6rem;
  border-radius: 8px; border: 1px solid var(--wgf-border-neutral); background: var(--wgf-panel-1);
  color: var(--wgf-muted); font-size: .82rem; text-decoration: none; white-space: nowrap; flex: none; }
.wgf-pvp-spill:hover { border-color: var(--wgf-border-neutral); color: var(--wgf-text); }
.wgf-pvp-spill.on { border-color: var(--wgf-gold); color: var(--wgf-gold); }
.wgf-pvp-spill img { width: 18px; height: 18px; border-radius: 4px; flex: none; }
.wgf-pvp-statband { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: .9rem; }
.wgf-pvp-stat-tile { background: var(--wgf-panel-1); border: 1px solid var(--wgf-metal-soft);
  border-radius: 4px; padding: .6rem 1rem; min-width: 96px; }
.wgf-pvp-stat-tile b { display: block; color: var(--wgf-gold); font-size: 1.25rem;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.wgf-pvp-stat-tile small { color: #8d8170; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }

/* --- Ladder page: compact hero + top-3 champion podium (champion-led standings board) --- */
.wgf-pvp-hero--ladder { margin-bottom: 1rem; }
.wgf-pvp-hero--ladder h1 { font-size: 1.7rem; line-height: 1.12; margin: .1rem 0 .3rem; }
@media (min-width: 760px) { .wgf-pvp-hero--ladder h1 { font-size: 1.95rem; } }
@media (max-width: 480px) { .wgf-pvp-hero--ladder h1 { font-size: 1.45rem; } }
.wgf-pvp-hero--ladder .wgf-pvp-statband { margin-top: .75rem; }

.wgf-pvp-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 0 0 1.2rem; }
.wgf-pvp-pod { display: flex; align-items: center; gap: .6rem; text-decoration: none;
  color: var(--wgf-text); background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-metal-soft); border-left: 3px solid var(--wgf-gold-accent);
  border-radius: 4px; padding: .6rem .8rem; min-width: 0;
  transition: border-color .12s, transform .12s, box-shadow .12s; }
@media (prefers-reduced-motion: reduce) { .wgf-pvp-pod { transition: none; } }
.wgf-pvp-pod:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
  border-color: var(--wgf-border-strong); }
.wgf-pvp-pod:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-pvp-pod-rk { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 1.15rem;
  width: 1.3em; text-align: center; flex: 0 0 auto; }
.wgf-pvp-pod--1 .wgf-pvp-pod-rk { color: var(--wgf-gold-primary); }
.wgf-pvp-pod--2 .wgf-pvp-pod-rk { color: #cdccc9; }
.wgf-pvp-pod--3 .wgf-pvp-pod-rk { color: #cd8a52; }
.wgf-pvp-podium .char-portrait { width: 40px; height: 40px; flex: 0 0 40px; }
.wgf-pvp-pod-id { min-width: 0; display: flex; flex-direction: column; }
.wgf-pvp-pod-name { font-weight: 600; font-size: .96rem; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgf-pvp-pod-meta { color: var(--wgf-muted); font-size: .74rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgf-pvp-pod-rt { margin-left: auto; font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.15rem;
  color: var(--wgf-gold-bright); flex: 0 0 auto; padding-left: .4rem; }
@media (max-width: 680px) { .wgf-pvp-podium { grid-template-columns: 1fr; } }

/* --- Drustvar-grounded ladder page: bracket pills · representation strip · filter bar · pager --- */
/* Compact bracket selector (pills) — replaces the underline tab band on the ladder pages. */
.wgf-pvp-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.wgf-pvp-pill-tab { display: inline-flex; align-items: center; padding: .4rem .85rem; border-radius: 4px;
  border: 1px solid var(--wgf-metal-soft); background: var(--wgf-panel-1);
  color: var(--wgf-muted); font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: border-color .12s, color .12s, background .12s; }
.wgf-pvp-pill-tab:hover { color: var(--wgf-text); border-color: var(--wgf-metal); }
.wgf-pvp-pill-tab.on { background: var(--wgf-gold-primary); color: var(--wgf-on-gold);
  border-color: var(--wgf-gold-primary); }
.wgf-pvp-pill-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* "Most played" panel — honest popularity (NOT a tier list): #, icon, class-coloured name, bar, count, %. */
.wgf-pvp-rep2 { margin: 0 0 1.1rem; background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-metal-soft); border-radius: 4px; padding: .85rem 1rem; }
.wgf-pvp-rep2-head { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .6rem; flex-wrap: wrap; }
.wgf-pvp-rep2-h { font-family: var(--font-display, serif); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--wgf-gold-muted); margin: 0; }
.wgf-pvp-rep2-sub { color: var(--wgf-muted); font-size: .72rem; }
.wgf-pvp-rep2-scope { color: var(--wgf-muted); font-size: .74rem; margin: 0 0 .55rem; }
.wgf-pvp-rep2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .9rem; }
@media (max-width: 720px) { .wgf-pvp-rep2-grid { grid-template-columns: 1fr; } }
.wgf-pvp-rep2-more { margin-top: .35rem; }
.wgf-pvp-rep2-more > summary { cursor: pointer; color: var(--wgf-gold-muted); font-size: .76rem;
  list-style: none; padding: .3rem .1rem; user-select: none; }
.wgf-pvp-rep2-more > summary::-webkit-details-marker { display: none; }
.wgf-pvp-rep2-more > summary:hover { color: var(--wgf-gold); }
.wgf-pvp-rep2-more[open] > summary { margin-bottom: .3rem; }
.wgf-pvp-rep-row { display: grid; grid-template-columns: 1.4rem 24px minmax(6.5rem, 1fr) max-content max-content max-content;
  align-items: center; gap: .5rem; padding: .22rem 0; }
a.wgf-pvp-rep-row { text-decoration: none; color: inherit; border-radius: 6px; padding: .22rem .3rem;
  margin: 0 -.3rem; transition: background .12s; }
a.wgf-pvp-rep-row:hover { background: var(--wgf-panel-3); }
a.wgf-pvp-rep-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-pvp-rep-rk { font-family: var(--font-mono, monospace); font-size: .72rem; color: var(--wgf-muted);
  text-align: right; }
.wgf-pvp-rep-icon .wgf-pvp-icon { width: 24px; height: 24px; border-radius: 5px; display: block; margin: 0; }
.wgf-pvp-rep-name { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
  /* class colour on a dark panel: a shared ink outline keeps every class legible (Tier-2 contract). */
  text-shadow: var(--text-ink-outline, 0 1px 2px rgba(0,0,0,.92), 0 0 4px rgba(0,0,0,.6)); }
/* share fill bars removed (owner 2026-07-04: no percentage-fill bars for share stats) */
.wgf-pvp-rep-n { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums;
  font-size: .72rem; color: var(--wgf-muted); text-align: right; }
.wgf-pvp-rep-pct { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; font-size: .82rem;
  color: var(--wgf-text); text-align: right; min-width: 3.5ch; font-weight: 600; }
.wgf-pvp-rep-avg { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; font-size: .72rem;
  color: var(--wgf-muted); text-align: right; min-width: 4ch; }

/* Drustvar class→spec icon filter (image 4): a row of CLASS icons; pick one to reveal its specs. */
.wgf-pvp-classfilter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .5rem; }
.wgf-pvp-classicon { display: inline-flex; padding: var(--space-1); border-radius: 4px; border: 2px solid transparent;
  line-height: 0; opacity: .8; transition: opacity .12s, border-color .12s, transform .12s; }
.wgf-pvp-classicon img, .wgf-pvp-classicon .wgf-pvp-icon { width: 32px; height: 32px; border-radius: 7px;
  display: block; margin: 0; }
.wgf-pvp-classicon-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 7px; background: var(--wgf-panel-3); color: var(--wgf-muted);
  font-size: .7rem; font-weight: 700; }
.wgf-pvp-classicon:hover { opacity: 1; transform: translateY(-1px);
  border-color: var(--wgf-border-strong); }
.wgf-pvp-classicon.on { opacity: 1; border-color: var(--wgf-gold-primary);
  box-shadow: 0 0 0 1px var(--wgf-gold-primary) inset; }
.wgf-pvp-classicon:focus-visible { outline: none; opacity: 1; border-color: var(--wgf-gold-primary); }
/* the revealed spec row for the selected class */
.wgf-pvp-specrow2 { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .6rem;
  padding: .45rem .55rem; background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-metal-soft); border-radius: 4px; }
.wgf-pvp-specicon { display: inline-flex; padding: 2px; border-radius: 4px; border: 2px solid transparent;
  line-height: 0; opacity: .82; transition: opacity .12s, border-color .12s, transform .12s; }
.wgf-pvp-specicon .wgf-pvp-icon { width: 30px; height: 30px; border-radius: 6px; display: block; margin: 0; }
.wgf-pvp-specicon:hover { opacity: 1; transform: translateY(-1px);
  border-color: var(--wgf-border-strong); }
.wgf-pvp-specicon.on { opacity: 1; border-color: var(--wgf-gold-primary);
  box-shadow: 0 0 0 1px var(--wgf-gold-primary) inset; }
.wgf-pvp-specicon:focus-visible { outline: none; opacity: 1; border-color: var(--wgf-gold-primary); }
.wgf-pvp-specreset { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  margin-left: .15rem; border-radius: 4px; border: 1px solid var(--wgf-metal-soft);
  color: var(--wgf-muted); text-decoration: none; font-size: 1.1rem; }
.wgf-pvp-specreset:hover { color: var(--wgf-gold-bright); border-color: var(--wgf-gold); }
/* Chrome recut 2026-07-30 (owner: gross borders) */
.wgf-pvp-resetbtn { display: inline-flex; align-items: center; color: var(--wgf-gold);
  text-decoration: none; font-size: .82rem; padding: .45rem .6rem; cursor: pointer;
  transition: color .12s; }
.wgf-pvp-resetbtn:hover { color: var(--wgf-gold-bright); }

/* GET-form filter bar + faction links (reuses .wgf-pvp-search / .wgf-pvp-sel / .wgf-pvp-chip below). */
/* Chrome recut 2026-07-30 (owner: gross borders) */
.wgf-pvp-filterbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .55rem;
  padding: .55rem .7rem; background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-metal); border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
/* Chrome recut 2026-07-30 (owner: gross borders) */
.wgf-pvp-applybtn { cursor: pointer; border: 1px solid var(--wgf-metal); border-radius: 0;
  background: var(--wgf-panel-1); color: var(--wgf-text); font-weight: 600; font-size: .82rem;
  padding: .45rem .9rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45);
  transition: border-color .12s, color .12s; }
.wgf-pvp-applybtn:hover { border-color: var(--wgf-gold); color: var(--wgf-gold-bright);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.wgf-pvp-factionrow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0 0 .7rem; }
/* Faction toggles: "All" reads as a chip; Horde/Alliance show their real crest icons. */
/* Chrome recut 2026-07-30 (owner: gross borders) */
.wgf-pvp-facbtns { display: inline-flex; gap: .35rem; }
.wgf-pvp-facbtn { display: inline-flex; align-items: center; justify-content: center; padding: .25rem .45rem;
  border-radius: 0; border: 1px solid var(--wgf-metal); background: var(--wgf-panel-1);
  color: var(--wgf-muted); text-decoration: none; font-size: .8rem; line-height: 1;
  transition: border-color .12s, background .12s, box-shadow .12s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.wgf-pvp-facbtn img { width: 22px; height: 22px; display: block; }
.wgf-pvp-facbtn:hover { border-color: var(--wgf-gold); color: var(--wgf-text);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.wgf-pvp-facbtn.on { border-color: rgba(244, 196, 92, .65);
  box-shadow: 0 0 6px rgba(244,196,92,.25), inset 0 0 0 1px rgba(0,0,0,.45); color: var(--wgf-text); }
.wgf-pvp-facbtn:focus-visible { outline: none; border-color: var(--wgf-gold-primary);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }

/* Page summary + numbered pager. */
.wgf-pvp-pgsum { color: var(--wgf-muted); font-size: .82rem; margin: .2rem 0 .5rem; }
.wgf-pvp-pgsum b { color: var(--wgf-text); font-variant-numeric: tabular-nums; }
.wgf-pvp-pager { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin: 1rem 0 .4rem; }
.wgf-pvp-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 2.1rem;
  padding: 0 .5rem; border-radius: 4px; border: 1px solid var(--wgf-metal-soft);
  background: var(--wgf-panel-1); color: var(--wgf-text); text-decoration: none;
  font-family: var(--font-mono, monospace); font-size: .84rem; }
.wgf-pvp-pg:hover { border-color: var(--wgf-gold); color: var(--wgf-gold-bright); }
.wgf-pvp-pg.is-current { background: var(--wgf-gold-primary); color: var(--wgf-on-gold);
  border-color: var(--wgf-gold-primary); font-weight: 700; }
.wgf-pvp-pg.is-disabled { opacity: .4; pointer-events: none; }
/* Phones: comfortable thumb targets on the pager (2026-07-04 mobile pass). */
@media (max-width: 680px) {
  .wgf-pvp-pg { min-width: 2.6rem; height: 2.6rem; }
}
.wgf-pvp-pg-ell { display: inline-flex; align-items: center; padding: 0 .25rem; color: var(--wgf-muted); }
.wgf-pvp-pg:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Win-rate bar (the visual most competitors lack; green/red stays reserved for market direction). */
.wgf-lb-wr { display: inline-flex; align-items: center; gap: .45rem; justify-content: flex-end; }
.wgf-lb-wrbar { display: inline-block; width: 46px; height: 6px; border-radius: 3px;
  background: var(--wgf-panel-3); overflow: hidden; flex: 0 0 auto; }
.wgf-lb-wrbar > i { display: block; height: 100%;
  background: linear-gradient(90deg, var(--wgf-gold-accent), var(--wgf-gold-bright)); }
.wgf-lb-wrnum { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums;
  color: var(--wgf-muted); min-width: 3ch; text-align: right; }

/* --- Toolbar (client-side sort/filter/search) --- */
.wgf-pvp-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .7rem; padding: .55rem .7rem; background: var(--wgf-panel-2);
  border: 1px solid var(--wgf-metal-soft); border-radius: 4px; }
.wgf-pvp-search { flex: 1; min-width: 170px; background: var(--wgf-bg);
  border: 1px solid var(--wgf-metal-soft); border-radius: 4px; padding: .45rem .7rem;
  color: var(--wgf-text); font-size: .85rem; }
.wgf-pvp-sel { background: var(--wgf-bg); border: 1px solid var(--wgf-metal-soft); border-radius: 4px;
  padding: .45rem .6rem; color: var(--wgf-text); font-size: .85rem; }
.wgf-pvp-tlbl { color: #8d8170; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.wgf-pvp-chip { background: var(--wgf-panel-1); border: 1px solid var(--wgf-metal-soft);
  border-radius: 4px; padding: .35rem .8rem; font-size: .8rem; color: var(--wgf-muted); cursor: pointer; }
.wgf-pvp-chip.on { background: var(--wgf-gold); color: var(--wgf-on-gold); border-color: var(--wgf-gold); border-radius: 4px; font-weight: 600; }

/* --- Hub --- */
/* Fixed 3-column grid on desktop (6 bracket cards → 2 tidy rows), collapsing to 2 then 1. */
.wgf-pvp-grid { display: grid; gap: .8rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .wgf-pvp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .wgf-pvp-grid { grid-template-columns: 1fr; } }

/* "Choose a Leaderboard" section heading above the cards */
.wgf-pvp-chooser { margin: 1.6rem 0 .9rem; }
.wgf-pvp-chooser-h { font-size: 1.3rem; margin: 0 0 .2rem; color: var(--wgf-gold); }
.wgf-pvp-chooser-sub { color: var(--wgf-muted); font-size: .9rem; margin: 0; }

.wgf-pvp-bcard { display: flex; flex-direction: column; min-height: 138px;
  background: var(--wgf-panel-1); border: 1px solid var(--wgf-metal-soft);
  border-radius: 4px; overflow: hidden; text-decoration: none; color: var(--wgf-text);
  transition: border-color .15s, background .15s, transform .15s; }
.wgf-pvp-bcard:hover { border-color: var(--wgf-gold); background: var(--wgf-panel-2); transform: translateY(-2px); }
.wgf-pvp-bcard-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .9rem; background: var(--wgf-panel-2); border-bottom: 1px solid var(--wgf-metal-soft); }
.wgf-pvp-bcard-top b { color: #fff; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; }
.wgf-pvp-pill { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wgf-muted);
  background: var(--wgf-bg-2); border: 1px solid var(--wgf-border-neutral);
  border-radius: 0; padding: .14rem .55rem; white-space: nowrap; flex: none; }
.wgf-pvp-bcard-body { padding: .7rem .9rem; display: flex; flex-direction: column; flex: 1; }
.wgf-pvp-bcard-body .wgf-pvp-go { margin-top: auto; }
.wgf-pvp-lead { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.wgf-pvp-lead .wgf-pvp-name { font-weight: 600; font-size: .96rem; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgf-pvp-lead .wgf-pvp-name small { display: block; color: #8d8170; font-weight: 400; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .03em; }
.wgf-pvp-lead-rt { margin-left: auto; color: var(--wgf-gold); font-weight: 700; font-size: 1.12rem;
  font-variant-numeric: tabular-nums; flex: none; }

/* Top summary strip — compact dashboard of Rank 1 / Elite cutoffs (now sits above the cards) */
.wgf-pvp-cutstrip { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--wgf-panel-2), var(--wgf-panel-1)); border: 1px solid var(--wgf-metal-soft); border-radius: 4px;
  padding: .7rem 1rem; text-decoration: none; transition: border-color .15s; }
.wgf-pvp-cutstrip:hover { border-color: var(--wgf-gold); }
.wgf-pvp-cutstrip-lab { font-weight: 700; color: var(--wgf-gold); font-size: .92rem; }
.wgf-pvp-cutstrip-vals { display: flex; gap: .45rem; flex-wrap: wrap; }
.wgf-pvp-cutstrip-vals span { display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(0, 0, 0, .24); border: 1px solid var(--wgf-border-neutral-soft); border-radius: 4px;
  padding: .26rem .6rem; color: var(--wgf-muted); font-size: .82rem; }
.wgf-pvp-cutstrip-vals b { color: var(--wgf-gold); font-variant-numeric: tabular-nums; }
.wgf-pvp-cutstrip .wgf-pvp-go { margin-left: auto; }

/* card / strip CTA — gold, so the entry-point reads as actionable */
.wgf-pvp-go { color: var(--wgf-gold); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.wgf-pvp-bcard:hover .wgf-pvp-go, .wgf-pvp-cutstrip:hover .wgf-pvp-go { color: var(--wgf-gold); }

/* Hub explainer (lower + lighter than the per-page intro box) + quick-link row */
.wgf-pvp-hubabout { margin-top: 2.2rem; }
.wgf-pvp-hubabout p { color: var(--wgf-muted); font-size: .92rem; line-height: 1.6;
  max-width: 72ch; margin: 0 0 .7rem; }
.wgf-pvp-hubabout-more { font-size: .86rem; color: var(--wgf-muted); }
.wgf-pvp-hubabout a { color: var(--wgf-gold); }
.wgf-pvp-quicklinks { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; }
.wgf-pvp-quicklinks a { display: inline-flex; align-items: center; background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-metal-soft); border-radius: 4px; padding: .35rem .85rem;
  font-size: .82rem; color: var(--wgf-text); text-decoration: none;
  transition: border-color .12s, color .12s; }
.wgf-pvp-quicklinks a:hover { border-color: var(--wgf-gold); color: var(--wgf-gold); }

/* --- Cutoffs --- */
.wgf-pvp-note { color: #8d8170; font-size: .8rem; margin: -.3rem 0 1rem; }
.wgf-pvp-cutgrid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }
.wgf-pvp-cutcard { background: var(--wgf-panel-1); border: 1px solid var(--wgf-metal-soft);
  border-radius: 4px; overflow: hidden; }
.wgf-pvp-cutcard-h { background: var(--wgf-panel-2); color: #fff; font-weight: 600;
  padding: .6rem .85rem; border-bottom: 1px solid var(--wgf-panel-2); }
.wgf-pvp-cutrow { display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .85rem; border-bottom: 1px solid var(--wgf-panel-2); }
.wgf-pvp-cutrow:last-child { border-bottom: 0; }
.wgf-pvp-cut-rt { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.wgf-pvp-badge { font-size: .7rem; font-weight: 700; padding: .1rem .55rem; border-radius: 2px; }
.wgf-b-r1 { color: var(--wgf-on-gold); background: var(--wgf-gold-primary); } .wgf-b-glad { color: #fff; background: #c8801f; }
.wgf-b-elite { color: #fff; background: #7b4fd0; } .wgf-b-duel { color: #fff; background: #2e6fd0; }
.wgf-b-rival { color: var(--wgf-on-gold); background: #5fbf7a; } .wgf-b-chal { color: var(--wgf-on-gold); background: var(--q-poor); }

/* --- Meta / representation --- */
.wgf-pvp-meta .wgf-pvp-player .wgf-pvp-icon { width: 28px; height: 28px; }
.wgf-pvp-metapct { font-variant-numeric: tabular-nums; color: var(--wgf-muted); }
.wgf-pvp-metabar { display: block; height: 5px; width: 78px; margin: .25rem 0 0 auto;
  border-radius: 3px; background: var(--wgf-panel-2); overflow: hidden; }
.wgf-pvp-metabar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--wgf-gold-hover), var(--wgf-gold-primary)); }

/* --- Character profile page --- */
.wgf-pvp-charhead { display: flex; align-items: center; gap: 1rem; margin: .3rem 0 .2rem; }
.wgf-pvp-charav { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; padding: var(--space-1);
  background: var(--wgf-panel-3); display: inline-flex; }
.wgf-pvp-charav img, .wgf-pvp-charav .wgf-pvp-icon { width: 100%; height: 100%; margin: 0; border: 0;
  border-radius: 50%; object-fit: cover; background: var(--wgf-bg); }
.wgf-pvp-charav .wgf-pvp-av-blank { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: var(--wgf-bg); }
.wgf-pvp-charid h1 { margin: 0 0 .2rem; line-height: 1.1; }
.wgf-pvp-charmeta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  color: var(--wgf-muted); font-size: .95rem; margin: 0; }
.wgf-pvp-charmeta .wgf-pvp-crest { width: 18px; height: 18px; }
.wgf-pvp-charmeta a { color: var(--wgf-muted); }
.wgf-pvp-charmeta a:hover { color: var(--wgf-gold); }
.wgf-pvp-charbody { margin-top: 1.1rem; }
.wgf-pvp-chartable .wgf-pvp-charbk a { display: inline-flex; align-items: center; gap: .55rem;
  color: var(--wgf-text); text-decoration: none; font-weight: 600; }
.wgf-pvp-chartable .wgf-pvp-charbk a:hover { color: var(--wgf-gold); }
.wgf-pvp-chartable .wgf-pvp-icon { width: 22px; height: 22px; margin: 0; border-radius: 4px; flex: 0 0 auto; }

/* talents (copy-paste import string) + professions — the deep-profile sections */
.wgf-pvp-talents, .wgf-pvp-profs { margin: 1.6rem 0 .4rem; }
.wgf-pvp-talents h2, .wgf-pvp-profs h2 { font-size: 1.1rem; color: var(--wgf-gold); margin: 0 0 .3rem; }
.wgf-pvp-talnote { color: var(--wgf-muted); font-size: .82rem; margin: 0 0 .7rem; }
.wgf-pvp-talblock { background: var(--wgf-panel-1); border: 1px solid var(--wgf-metal-soft);
  border-radius: 4px; padding: .7rem .85rem; margin-bottom: .6rem; }
.wgf-pvp-talhead { display: flex; align-items: center; gap: .5rem; font-weight: 600;
  color: var(--wgf-text); margin-bottom: .5rem; }
.wgf-pvp-talhead .wgf-pvp-icon { width: 22px; height: 22px; margin: 0; border-radius: 4px; }
.wgf-pvp-talcode { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wgf-pvp-talstr { flex: 1 1 240px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; background: var(--wgf-bg); border: 1px solid var(--wgf-metal-soft); border-radius: 4px;
  padding: .45rem .6rem; font-family: var(--font-mono, monospace); font-size: .8rem; color: var(--wgf-muted); }
/* copybtn: red-button slice language (same cap slices as .wgf-btn-red at 26px / --sm height) */
.wgf-pvp-copybtn { flex: 0 0 auto; cursor: pointer; border: 0; border-radius: 0; font-weight: 700;
  height: 26px; padding: 0 11px;
  background:
    url(/assets/ui/128-redbutton-left-cap.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  color: var(--wgf-gold-bright); font-family: var(--font-game); font-size: var(--text-xs);
  text-shadow: var(--text-ink-outline); transition: filter var(--motion-fast) var(--ease-standard); }
.wgf-pvp-copybtn:hover { filter: brightness(1.06); }
.wgf-pvp-copybtn.ok { background: #5fbf7a; color: #10220f; }
.wgf-pvp-profrow { display: flex; flex-wrap: wrap; gap: .5rem; }
.wgf-pvp-profchip { display: inline-flex; align-items: baseline; gap: .35rem; background: var(--wgf-bg-2);
  border: 1px solid var(--wgf-metal-soft); border-radius: 0; padding: .35rem .8rem;
  font-size: .85rem; color: var(--wgf-text); }
.wgf-pvp-profchip small { color: var(--wgf-muted); font-size: .72rem; }

/* --- Full-armory paper-doll (Phase 2c): gear in the in-game slot positions around the centred model --- */
.wgf-pvp-armory { margin: 1.3rem 0 .4rem; }
.wgf-pvp-paperdoll { display: grid; align-items: start; gap: .55rem 1.1rem;
  grid-template-columns: minmax(0,1fr) minmax(300px, 400px) minmax(0,1fr);
  grid-template-areas: "left center right" "weapons weapons weapons"; }
.wgf-pvp-pd-colleft { grid-area: left; }
.wgf-pvp-pd-center { grid-area: center; align-self: stretch; }   /* match the gear columns' height */
.wgf-pvp-pd-colright { grid-area: right; }
.wgf-pvp-pd-weapons { grid-area: weapons; display: flex; justify-content: center; gap: .9rem;
  list-style: none; margin: .6rem 0 0; padding: 0; flex-wrap: wrap; }
.wgf-pvp-pd-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.wgf-pvp-pd-slot { min-width: 0; background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-metal-soft); border-radius: 4px;
  transition: border-color .12s, background .12s; }
.wgf-pvp-pd-slot[data-name]:hover { border-color: var(--q, var(--wgf-border-neutral)); background: var(--wgf-panel-2); }
.wgf-pvp-pd-link { display: flex; gap: .55rem; align-items: center; min-width: 0;
  padding: .4rem .5rem; text-decoration: none; color: inherit; }
.wgf-pvp-pd-colright .wgf-pvp-pd-link { text-align: right; }
.wgf-pvp-pd-weapons .wgf-pvp-pd-slot { min-width: 160px; }
.wgf-pvp-pd-empty { display: none; }   /* hollow placeholder boxes read as "empty" — just omit them */
.wgf-pvp-pd-info { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.wgf-pvp-pd-colright .wgf-pvp-pd-info { align-items: flex-end; }
.wgf-pvp-pd-name { font-weight: 600; font-size: .8rem; line-height: 1.18; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wgf-pvp-pd-ilvl { color: var(--wgf-gold); font-size: .72rem; font-weight: 700; }
.wgf-pvp-pd-ench { color: #6fce8f; font-size: .68rem; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wgf-pvp-pd-gem { color: #7fb0e0; font-size: .68rem; line-height: 1.2; }
.wgf-pvp-itemicon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 6px; overflow: hidden;
  border: 2px solid var(--q, var(--wgf-panel-3)); background: var(--wgf-bg); display: block; }
.wgf-pvp-itemicon img { width: 100%; height: 100%; display: block; }

/* the character model — the prominent centrepiece (static Blizzard render; movable viewer tabled).
   The render is a 1600x1200 LANDSCAPE image with the character standing narrow & centred, so we
   cover-crop the empty horizontal margins and fill the height -> a large model, no character loss. */
.wgf-pvp-modelstage { position: relative; height: 100%; min-height: 500px;
  background: radial-gradient(120% 80% at 50% 16%, var(--wgf-panel-2) 0%, var(--wgf-bg-2) 55%, var(--wgf-bg) 100%);
  border: 1px solid var(--wgf-metal-soft); border-radius: 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.wgf-pvp-modelstage::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 5%; height: 28px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(0,0,0,.55), transparent 70%); pointer-events: none; }
.wgf-pvp-render { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block;
  position: relative; z-index: 1; transform: scale(2.9); transform-origin: center 44%; }
.wgf-pvp-render-blank { width: 100%; height: 100%; }
.wgf-pvp-model-hint { display: none; }
.wgf-pvp-fresh { color: var(--wgf-muted); font-size: .78rem; margin: 1.2rem 0 0; font-style: italic; }

/* Gear hover card = the shared first-party tooltip (assets/wgf-item-tooltip.css, row-B
   convergence 2026-07-01). The old .wgf-pvp-tooltip styles left with wireItemTooltips. */

/* character-page: multi-paragraph prose summary, section headings, internal-link block */
.wgf-pvp-charintro { background: var(--wgf-bg-2); border: 1px solid var(--wgf-metal-soft);
  border-left: 3px solid var(--wgf-gold); border-radius: 0; padding: .85rem 1.05rem; margin: 0 0 .6rem; }
.wgf-pvp-charintro p { color: var(--wgf-text); font-size: .95rem; line-height: 1.6; margin: 0 0 .6rem; }
.wgf-pvp-charintro p:last-child { margin-bottom: 0; }
.wgf-pvp-charintro a { color: var(--wgf-gold); }
.wgf-pvp-sech { font-size: 1.15rem; color: var(--wgf-gold); margin: 1.9rem 0 .7rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--wgf-border-neutral); }
.wgf-pvp-explore { margin: 1.9rem 0 .4rem; }
.wgf-pvp-explore h2 { font-size: 1.15rem; color: var(--wgf-gold); margin: 0 0 .6rem; }
.wgf-pvp-explore-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.wgf-pvp-explore-link { display: inline-flex; align-items: center; background: var(--wgf-bg-2);
  border: 1px solid var(--wgf-metal-soft); border-radius: 0; padding: .42rem .9rem; font-size: .85rem;
  color: var(--wgf-text); text-decoration: none; transition: border-color .12s, color .12s; }
.wgf-pvp-explore-link:hover { border-color: var(--wgf-gold); color: var(--wgf-gold); }

/* themed, faction-tinted backdrop for character pages (fixed, behind all content) */
.wgf-pvp-charbg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.wgf-pvp-charbg-horde { background:
  radial-gradient(95% 55% at 50% -8%, rgba(150, 26, 30, .30), transparent 62%),
  radial-gradient(75% 45% at 50% 112%, rgba(50, 8, 10, .55), transparent 70%),
  linear-gradient(180deg, var(--wgf-bg), var(--wgf-bg)); }
.wgf-pvp-charbg-alliance { background:
  radial-gradient(95% 55% at 50% -8%, rgba(34, 70, 150, .30), transparent 62%),
  radial-gradient(75% 45% at 50% 112%, rgba(10, 22, 55, .55), transparent 70%),
  linear-gradient(180deg, var(--wgf-bg), var(--wgf-bg)); }
.wgf-pvp-charbg-neutral { background:
  radial-gradient(95% 55% at 50% -8%, rgba(150, 120, 45, .22), transparent 62%),
  linear-gradient(180deg, var(--wgf-bg), var(--wgf-bg)); }
/* PvP title above the name (e.g. "Prized Gladiator") + talent loadout sublabel */
.wgf-pvp-chartitle { color: var(--wgf-gold); font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .15rem; }
.wgf-pvp-talsub { color: var(--wgf-muted); font-size: .78rem; font-weight: 400; margin-left: .5rem; }
.wgf-pvp-tablewrap { overflow-x: auto; }

/* --- Answer lede + FAQ (the AI-answer / GEO surface; see docs/AI_SEARCH_GEO.md) --- */
.wgf-pvp-answer { background: var(--wgf-panel-1); border: 1px solid var(--wgf-metal-soft);
  border-left: 3px solid var(--wgf-gold); border-radius: 4px; padding: .7rem .9rem;
  margin: 0 0 1.1rem; color: var(--wgf-text); font-size: .95rem; line-height: 1.5; }
/* FAQ = THE SPELLBOOK (owner law 2026-08-04). The look lives in the one home,
   assets/wgf-spellbook.css, linked by every _page() that can emit this section;
   the section opts in with `class="wgf-pvp-faq wgf-spellbook"`. The old h2/h3/p
   rules are DELETED rather than left dormant — at equal specificity they would
   have raced the component on <link> order (see the LANDMINE notes in
   wgf-zonebg.css). Only the section's outer spacing stays. */
.wgf-pvp-faq { margin: 1.8rem 0 .4rem; }

/* --- Lazy-load ladder module (wgf-pvp.js streams pages from /pvp/data/) --- */
.wgf-pvp-ladder-mod { position: relative; }
.wgf-pvp-sentinel { height: 1px; width: 100%; }
.wgf-pvp-loadstatus { text-align: center; color: var(--wgf-muted); font-size: .85rem;
  min-height: 1.2em; margin: .9rem 0 .2rem; }

@media (max-width: 640px) {
  .wgf-pvp-table { font-size: .82rem; }
  .wgf-pvp-table th, .wgf-pvp-table td { padding: .45rem .4rem; }
  .wgf-pvp-ladder td { padding: .5rem .4rem; }
  .wgf-pvp-av { width: 28px; height: 28px; }
  .wgf-pvp-ladder .wgf-pvp-icon { width: 18px; height: 18px; }
  .wgf-pvp-name { font-size: .92rem; }
  .wgf-pvp-sub { font-size: .72rem; }
  .wgf-pvp-rating { font-size: .95rem; }
  /* drop the Faction crest column on narrow — faction still reads from the row's left-edge tint */
  .wgf-pvp-col-fac { display: none; }
  .wgf-pvp-btab { padding: .55rem .6rem; font-size: .85rem; }
}

@media (max-width: 720px) {
  /* model on top, the two gear columns side by side beneath it, weapons last — still paper-doll-ish */
  .wgf-pvp-paperdoll { grid-template-columns: 1fr 1fr;
    grid-template-areas: "center center" "left right" "weapons weapons"; }
  .wgf-pvp-pd-center { max-width: 340px; margin: 0 auto .5rem; }
  .wgf-pvp-modelstage { min-height: 440px; }
  .wgf-pvp-pd-ench { display: none; }
}

/* --- character page: stat sheet, PvP talents, BG win-rates, PvE progression, titles (full-data) --- */
.wgf-pvp-statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .55rem; }
.wgf-pvp-statcell { background: var(--wgf-panel-1); border: 1px solid var(--wgf-metal-soft);
  border-radius: 4px; padding: .55rem .65rem; text-align: center; }
.wgf-pvp-statcell b { display: block; color: var(--wgf-gold); font-size: 1.18rem; line-height: 1.15; }
.wgf-pvp-statcell small { color: #8d8170; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }

.wgf-pvp-chiprow { display: flex; flex-wrap: wrap; gap: .45rem; }
.wgf-pvp-chip { display: inline-flex; align-items: center; background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-metal-soft); border-radius: 4px; padding: .35rem .8rem;
  color: var(--wgf-text); font-size: .84rem; }

.wgf-pvp-bgtable td:first-child { color: var(--wgf-text); }

.wgf-pvp-pverow { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.wgf-pvp-pveblock { background: var(--wgf-panel-1); border: 1px solid var(--wgf-metal-soft);
  border-radius: 4px; padding: .7rem .9rem; }
.wgf-pvp-pveblock h3 { font-size: .9rem; color: var(--wgf-gold); margin: 0 0 .5rem; }
.wgf-pvp-pvelist { list-style: none; margin: 0; padding: 0; }
.wgf-pvp-pvelist li { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: .28rem 0; border-bottom: 1px solid var(--wgf-border-neutral); color: var(--wgf-text);
  font-size: .86rem; }
.wgf-pvp-pvelist li:last-child { border-bottom: 0; }
.wgf-pvp-pvemode { color: var(--wgf-muted); font-size: .78rem; white-space: nowrap; }
.wgf-pvp-keylist li b { color: var(--wgf-gold); min-width: 2.6rem; }
.wgf-pvp-keytimed { color: var(--wgf-up); margin-left: .35rem; }

/* Mythic+ best-run sheet — full-width table (every dungeon, key level, time, result). */
.wgf-pvp-mplusblock { grid-column: 1 / -1; }
.wgf-pvp-mplusblock h3 { display: flex; align-items: center; gap: .5rem; }
.wgf-pvp-mplus-rating { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--wgf-gold); }
.wgf-pvp-mplus-sub { margin-left: auto; font-size: .74rem; font-weight: 400; text-transform: uppercase;
  letter-spacing: .04em; color: var(--wgf-muted); }
.wgf-pvp-mplus-table { margin: 0; }
.wgf-pvp-mplus-table td { font-size: .88rem; }
.wgf-pvp-keylvl { font-variant-numeric: tabular-nums; }
.wgf-pvp-key-in { color: var(--wgf-gold-primary); }      /* timed in time */
.wgf-pvp-key-over { color: var(--wgf-muted); }     /* depleted */
.wgf-pvp-key-timed { color: var(--wgf-up); font-size: .82rem; }
.wgf-pvp-key-depleted { color: var(--wgf-down); font-size: .82rem; }

/* ============================================================================
   Character page UX pass — hierarchy: profile first, build-copy second, data archive third.
   Section nav · at-a-glance · build card · list-first gear · collapsibles.
   ============================================================================ */
/* anchored sections clear BOTH sticky bars (global topbar ~58px + the in-page nav) when jumped to */
#sec-overview, #sec-build, #sec-pvp, #sec-gear, #sec-mplus, #sec-collections, #sec-faq {
  scroll-margin-top: 112px; }

/* hero freshness line (promote update recency near the top) */
.wgf-pvp-updated { color: var(--wgf-muted); font-size: .76rem; margin: 0; }

/* "Updated …" line + the live Refresh button (pull this character's current data from Blizzard). */
.wgf-pvp-updated-row { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .85rem;
  margin: .7rem 0 0; }
.wgf-char-refresh { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; line-height: 1;
  color: var(--wgf-gold); padding: .4rem .7rem; border-radius: 8px;
  border: 1px solid rgba(var(--wgf-gold-rgb), .35); background: rgba(var(--wgf-gold-rgb), .08);
  transition: background .15s ease, border-color .15s ease, opacity .15s ease; }
.wgf-char-refresh:hover { background: rgba(var(--wgf-gold-rgb), .16); border-color: rgba(var(--wgf-gold-rgb), .55); }
.wgf-char-refresh:focus-visible { outline: 2px solid var(--wgf-gold); outline-offset: 2px; }
.wgf-char-refresh svg { width: 14px; height: 14px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wgf-char-refresh[disabled] { cursor: default; opacity: .6; }
.wgf-char-refresh.is-busy svg { animation: wgf-char-spin .8s linear infinite; }
.wgf-char-refresh__status { color: var(--wgf-muted); font-size: .76rem; }
@keyframes wgf-char-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wgf-char-refresh.is-busy svg { animation: none; } }

/* in-page section nav — the red-button slice-tab idiom (owner law 2026-07-04: tabs = the client
   red button, .wgf-tab language). Squared dark stone strip that sticks BELOW the global topbar; NO
   frosted-glass blur. Each anchor IS a dimmed red button; the active section = the pressed state. */
.wgf-pvp-secnav { position: sticky; top: 58px; z-index: 20; display: flex; gap: .25rem; flex-wrap: wrap;
  margin: 0 0 1.3rem; padding: .3rem .4rem; border-radius: 0;
  background: var(--wgf-bg-2);
  border: 1px solid var(--wgf-metal-soft); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.wgf-pvp-secnav a { box-sizing: border-box; display: inline-flex; align-items: center;
  height: 28px; padding: 0 13px; border: 0; border-radius: 0; white-space: nowrap;
  font-family: var(--font-game); font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
  color: var(--wgf-gold-dim); text-decoration: none; text-shadow: var(--text-ink-outline);
  background:
    url(/assets/ui/128-redbutton-left-cap.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  filter: brightness(0.66) saturate(0.9);
  transition: filter .12s ease, color .12s ease; }
.wgf-pvp-secnav a:hover { filter: brightness(0.9) saturate(1); color: var(--wgf-gold-bright); }
.wgf-pvp-secnav a.on { color: var(--wgf-gold-bright); filter: none; transform: translateY(1px);
  background:
    url(/assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box;
  background-color: transparent; }

/* at-a-glance panel — the "who is this / what can I copy" answer under the hero */
.wgf-pvp-glance { background: var(--wgf-bg-2); border: 1px solid var(--wgf-metal-soft);
  border-left: 3px solid var(--wgf-gold); border-radius: 0; padding: .35rem .95rem; margin: 0 0 1.1rem; }
.wgf-pvp-glance-row { display: flex; gap: .7rem; padding: .42rem 0; border-bottom: 1px solid var(--wgf-panel-2);
  font-size: .92rem; line-height: 1.45; }
.wgf-pvp-glance-row:last-child { border-bottom: 0; }
.wgf-pvp-glance-k { flex: 0 0 104px; color: #8d8170; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; padding-top: .15rem; }
.wgf-pvp-glance-v { color: var(--wgf-text); min-width: 0; }
.wgf-pvp-glance-v a { color: var(--wgf-gold); }

/* build card — the primary user action (copy this player's build) */
.wgf-pvp-build { margin: 1.6rem 0 .4rem; }
.wgf-pvp-buildpvp { margin: .85rem 0 0; }
/* PvP-talent picks: icon + name chips that link to the spell page (mirrors the talent lattice). */
.wgf-pvp-chip--talent { gap: .45rem; padding: .3rem .7rem .3rem .35rem; text-decoration: none;
  transition: border-color .12s ease; }
.wgf-pvp-chip--talent:hover { border-color: var(--wgf-gold); }
.wgf-pvp-chip-icon { width: 24px; height: 24px; border-radius: 5px; flex: 0 0 auto;
  border: 1px solid var(--wgf-border-neutral); }
.wgf-pvp-buildsubh { font-size: .76rem; color: var(--wgf-muted); text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 .4rem; }
.wgf-pvp-buildgear { color: var(--wgf-muted); font-size: .86rem; margin: .85rem 0 0; }
.wgf-pvp-buildgear a { color: var(--wgf-gold); }

/* gear: a large 3D character render (the focal point of a character page, Armory-style) beside the
   scannable gear list. The model gets a generous fixed column; the list takes the rest. */
.wgf-pvp-gearwrap { display: grid; gap: 1.3rem; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
/* Paperdoll era: the model lives INSIDE the paperdoll, so the detail list runs full-width. */
.wgf-pvp-gearwrap--listonly { grid-template-columns: 1fr; }
.wgf-pvp-gearlist-col { min-width: 0; }
.wgf-pvp-geartable { margin: 0; }
.wgf-pvp-geartable td { vertical-align: middle; }
.wgf-pvp-geartable .wgf-pvp-gear-slot { color: #8d8170; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap; }
.wgf-pvp-geartable .wgf-pvp-gear-item { display: flex; align-items: center; gap: .5rem; }
.wgf-pvp-geartable .wgf-pvp-itemicon { width: 30px; height: 30px; flex: 0 0 auto; }
.wgf-pvp-geartable .wgf-pvp-gear-name { font-weight: 600; }
.wgf-pvp-geartable .wgf-pvp-gear-ench { color: #6fce8f; font-size: .8rem; }
.wgf-pvp-geartable .wgf-pvp-gear-gem { color: #7fb0e0; font-size: .8rem; }
/* enchant/gem optimisation read above the gear list — "X/Y enchants", complete vs missing flagged */
.wgf-pvp-gearstats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .8rem; }
.wgf-pvp-gearstat { font-size: .8rem; color: var(--wgf-muted); background: var(--wgf-bg-2);
  border: 1px solid var(--wgf-metal-soft); border-radius: 0; padding: .3rem .65rem; }
.wgf-pvp-gearstat b { color: var(--wgf-text); }
.wgf-pvp-gearstat-ok b { color: #6fce8f; }
.wgf-pvp-gearstat-miss b { color: #e0a14a; }
/* the large focal model — sticks alongside the list as it scrolls */
.wgf-pvp-gearmodel { position: sticky; top: 124px; }
.wgf-pvp-gearmodel .wgf-pvp-modelstage { min-height: 620px; }
@media (max-width: 860px) {
  .wgf-pvp-gearwrap { grid-template-columns: 1fr; }
  .wgf-pvp-gearmodel { order: -1; position: static; max-width: 460px; margin: 0 auto; width: 100%; }
  .wgf-pvp-gearmodel .wgf-pvp-modelstage { min-height: 520px; }
}

/* character stats — the four secondary stats lead (Crit/Haste/Mastery/Vers), shown highest-value first
   for easy comparison; descriptive, NOT a prescribed stat priority. */
.wgf-pvp-statsec-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: .55rem; }
.wgf-pvp-statsec { border-color: rgba(var(--wgf-gold-rgb), .34);
  background: linear-gradient(180deg, rgba(var(--wgf-gold-rgb), .07), var(--wgf-panel-1)); }
.wgf-pvp-statsec b { font-size: 1.4rem; }
.wgf-pvp-statnote { color: var(--wgf-muted); font-size: .76rem; font-style: italic; margin: 0 0 1rem; }

/* secondary profile line (context stats moved out of the hero) + native collapsibles */
.wgf-pvp-profileline { color: var(--wgf-muted); font-size: .85rem; margin: 0 0 .7rem; }
.wgf-pvp-more { margin: .55rem 0 0; }
.wgf-pvp-more > summary, .wgf-pvp-summary > summary { cursor: pointer; color: var(--wgf-gold);
  font-size: .85rem; padding: .3rem 0; }
.wgf-pvp-more > summary:hover, .wgf-pvp-summary > summary:hover { color: var(--wgf-gold); }
.wgf-pvp-summary { margin: 1.4rem 0 .4rem; background: var(--wgf-bg-2);
  border: 1px solid var(--wgf-metal-soft); border-radius: 0; padding: .45rem .95rem; }
.wgf-pvp-summary > summary { font-weight: 600; }
.wgf-pvp-summary .wgf-pvp-charintro { border: 0; padding: .5rem 0 .2rem; background: transparent; margin: 0; }

/* Titles and reputations moved to the shared Journal pane (2026-08-01) — .wgf-jrnl--text and
   .wgf-jrnl--reps in assets/wgf-collection-journal.css, the same surface the mount and battle-pet
   collections use. The old .wgf-pvp-titlerow / .wgf-pvp-titlechip / .wgf-pvp-rep* rules had no
   emitter left and were removed with them. */

/* ============================================================================
   PvE Mythic+ leaderboard (/pve/mythic-plus/) — scoped polish. Every selector is
   prefixed .wgf-pve-* or nested under .wgf-pve-table, so the shared PvP pages
   (which reuse the same _hero/_freshness/wgf-pvp-* components) are untouched.
   See pve_app.py :: pve_mythic_plus.
   ============================================================================ */
/* tighter hero + intentional summary cards (scoped to the PvE hero only) */
.wgf-pve-hero { margin: 0 0 1.3rem; }
.wgf-pve-hero h1 { font-size: 1.9rem; line-height: 1.14; margin: .1rem 0 .35rem; }
.wgf-pve-hero .wgf-pvp-hero-sub { max-width: 60ch; margin: 0 0 .5rem; }
.wgf-pve-hero .wgf-pvp-fresh, .wgf-pve-hero .wgf-pvp-stale { font-size: .78rem; margin: 0 0 .2rem; opacity: .85; }
.wgf-pve-hero .wgf-pvp-statband { gap: .7rem; margin-top: 1rem; }
.wgf-pve-hero .wgf-pvp-stat-tile { flex: 1 1 130px; min-width: 118px; padding: .7rem 1rem; }
.wgf-pve-hero .wgf-pvp-stat-tile b { font-size: 1.5rem; }
@media (max-width: 560px) {
  .wgf-pve-hero h1 { font-size: 1.5rem; }
  .wgf-pve-hero .wgf-pvp-stat-tile b { font-size: 1.3rem; }
}

/* light pre-table note (replaces the long pre-table explainer) */
.wgf-pve-note { color: var(--wgf-muted); font-size: .92rem; line-height: 1.55;
  max-width: 70ch; margin: 0 0 1.1rem; }

/* leaderboard heading + region/season/source context + real search toolbar */
.wgf-pve-lbhead { display: flex; align-items: flex-end; justify-content: space-between;
  gap: .7rem 1rem; flex-wrap: wrap; margin: 1.5rem 0 .55rem; }
.wgf-pve-lbtitle { font-size: 1.2rem; color: var(--wgf-gold); margin: 0 0 .15rem; }
.wgf-pve-lbsub { color: var(--wgf-muted); font-size: .86rem; margin: 0; }
.wgf-pve-ctx { display: flex; gap: .4rem; flex-wrap: wrap; }
.wgf-pve-ctxchip { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--wgf-muted); background: var(--wgf-bg-2); border: 1px solid var(--wgf-metal-soft);
  border-radius: 4px; padding: .22rem .6rem; white-space: nowrap; }
.wgf-pve-toolbar { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin: 0 0 .3rem; }
.wgf-pve-search { flex: 1 1 220px; min-width: 0; background: var(--wgf-bg);
  border: 1px solid var(--wgf-metal-soft); border-radius: 4px; padding: .5rem .75rem;
  color: var(--wgf-text); font-size: .88rem; }
.wgf-pve-search:focus { outline: none; border-color: var(--wgf-gold); }
.wgf-pve-reset { flex: 0 0 auto; cursor: pointer; background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-metal-soft); border-radius: 4px; padding: .5rem .9rem;
  color: var(--wgf-muted); font-size: .82rem; }
.wgf-pve-reset:hover { border-color: var(--wgf-gold); color: var(--wgf-gold); }
.wgf-pve-count { color: var(--wgf-muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.wgf-pve-noresults { color: var(--wgf-muted); font-style: italic; padding: .8rem 0; }

/* table hierarchy: stronger name, dominant rating, secondary item level, clickable rows */
.wgf-pve-table tbody tr { cursor: pointer; }
.wgf-pve-table tbody tr:hover td { background: rgba(var(--wgf-gold-rgb), .06); }
.wgf-pve-table .wgf-pvp-name { display: inline-flex; align-items: center; gap: .55rem; }
.wgf-pve-table .wgf-pve-cname { font-size: 1.02rem; font-weight: 700; }
.wgf-pve-c-ilvl { color: var(--wgf-muted); font-variant-numeric: tabular-nums; }
.wgf-pve-c-rating .wgf-pvp-rating { font-size: 1.18rem; }
.wgf-pve-c-rank { color: #8d8170; font-weight: 700; }
.wgf-pve-rk--top { color: var(--wgf-gold); }

/* mobile: rows → thumb-friendly cards, rating prominent, no horizontal scroll */
@media (max-width: 640px) {
  .wgf-pve-table thead { display: none; }
  .wgf-pve-table, .wgf-pve-table tbody { display: block; width: 100%; }
  .wgf-pve-table tbody tr {
    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-areas: "rank char rating" "rank char ilvl";
    align-items: center; gap: .15rem .7rem;
    background: var(--wgf-panel-1); border: 1px solid var(--wgf-metal-soft);
    border-radius: 4px; padding: .7rem .85rem; margin: 0 0 .65rem; }
  .wgf-pve-table tbody tr td { display: block; border: 0; padding: 0; background: none !important; }
  .wgf-pve-table .wgf-pve-c-rank { grid-area: rank; align-self: center; text-align: center;
    min-width: 1.9rem; font-size: 1.05rem; }
  .wgf-pve-table .wgf-pve-c-char { grid-area: char; min-width: 0; }
  .wgf-pve-table .wgf-pvp-name { white-space: normal; }
  .wgf-pve-table .wgf-pve-c-rating { grid-area: rating; text-align: right; }
  .wgf-pve-table .wgf-pve-c-rating .wgf-pvp-rating { font-size: 1.3rem; }
  .wgf-pve-table .wgf-pve-c-ilvl { grid-area: ilvl; text-align: right; font-size: .8rem; }
  .wgf-pve-table .wgf-pve-c-ilvl::before { content: attr(data-label) " "; color: #8d8170;
    font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; }
}

/* bottom explainer (demoted educational copy) */
.wgf-pve-how { margin: 2rem 0 .4rem; }
.wgf-pve-how h2 { font-size: 1.15rem; color: var(--wgf-gold); margin: 0 0 .5rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--wgf-border-neutral); }
.wgf-pve-how p { color: var(--wgf-muted); font-size: .9rem; line-height: 1.6;
  margin: 0; max-width: 75ch; }

/* --- On-demand data tier (wgf-ondemand.js): live-loaded character sections (mounts, …) --- */
.wgf-od { margin: 1.6rem 0 .4rem; }
.wgf-od-lede { color: var(--wgf-muted); font-size: .9rem; line-height: 1.6;
  margin: 0 0 .7rem; max-width: 75ch; }
.wgf-od-btn { display: inline-block; cursor: pointer; font: inherit; font-size: .85rem;
  font-weight: 600; color: var(--wgf-on-gold); background: var(--wgf-gold);
  border: 0; border-radius: 6px; padding: .45rem .9rem; }
.wgf-od-btn[disabled] { opacity: .6; cursor: default; }
.wgf-od-target:empty { display: none; }
.wgf-od-count { margin: .8rem 0 .5rem; color: var(--wgf-muted); font-size: .95rem; }
.wgf-od-count b { color: var(--wgf-gold); }
.wgf-od-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.wgf-od-chip { font-size: .78rem; color: var(--wgf-text); background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-border-neutral); border-radius: 5px; padding: .2rem .5rem; }
.wgf-od-more, .wgf-od-empty { color: var(--wgf-muted); font-size: .82rem; margin: .55rem 0 0; }
.wgf-od-err { color: #e0a3a3; font-size: .85rem; margin: .6rem 0 0; }