/*
 * OUTSKIRT — clan page v3 "The Clan, Ranked" (theme assets/clan-v3.css)
 * Renderer: includes/coc-clan-v3.php · script: scripts/clan-v3.js
 *
 * Phone first; ≥768px turns the roster into a table, ≥1024px pairs the
 * Today board with the war record. Light is the default; dark lives under
 * html[data-theme="dark"] (tokens only — every rule reads the --oc3-* set).
 * Every colour token is editable in WP (Website UI "Clan page v3 — Colours",
 * keys col_c3_<token> / col_c3_<token>_dk): the renderer emits one inline
 * <style> overriding these custom properties (oc3_color_tokens() in
 * coc-clan-v3.php lists them with their defaults — keep both in sync).
 * Motion belongs to data only: bars grow in, the leader's bar shimmers,
 * changed figures glow, the live dot pulses. All of it stops under
 * prefers-reduced-motion.
 */

.oc3 {
  --oc3-card: #ffffff;
  --oc3-panel: #ffffff;
  --oc3-raised: #f6f7f9;
  --oc3-lifted: #eef0f4;
  --oc3-summary: #f3f5f9;
  --oc3-line: #e7e9ee;
  --oc3-line-2: #d9dde4;
  --oc3-ink: #2f3542;
  --oc3-ink-2: #3c424f;
  --oc3-ink-3: #55657c;
  --oc3-mute: #66748a;
  --oc3-gold: #f0c040;
  --oc3-gold-ink: #3a3000;
  --oc3-gold-a: #f6c443;
  --oc3-gold-b: #e9a30b;
  --oc3-green: #17733a;
  --oc3-green-bg: rgba(23, 115, 58, .09);
  --oc3-red: #c9362c;
  --oc3-red-bg: rgba(201, 54, 44, .09);
  --oc3-win: #3a8449;
  --oc3-tie: #8e9dae;
  --oc3-loss: #c64a42;
  --oc3-well: #eceff3;
  --oc3-bar: #c3cad5;
  --oc3-lead: #fbf7ea;
  --oc3-link: #2c67c7;
  --oc3-glow-c: #b98600;
  --oc3-glow-halo: rgba(240, 192, 64, .8);
  --oc3-focus: rgba(240, 192, 64, .6);
  --oc3-pulse-ring: rgba(52, 196, 99, .45);
  --oc3-chart: #e9a30b;          /* the player page's chart (it reads it through --op2-chart) */
  --oc3-pulse-line: #14171c;     /* the Weekly Statistics chart: line, fill, reading dot (2026-09-26: black in light) */
  --oc3-meter-a: #aab6c4;
  --oc3-meter-b: #7e8b9b;
  --oc3-max-a: #3a8449;
  --oc3-max-b: #2f6f3d;
  --oc3-shimmer: rgba(255, 255, 255, .45);
  --oc3-eq-common: #38b2e2;
  --oc3-eq-epic: #8e34ba;
  --oc3-sorted: rgba(47, 53, 66, .07);
  /* roster "Scoreboard" (2026-09-25): the sorted column in gold, zebra, podium, medals, Town Hall level badge */
  --oc3-hero-band: #f0c04024;
  --oc3-hero-ink: #7a5600;
  --oc3-hero-rule: #e9a30b;
  --oc3-hero-bar-a: #3a8449;   /* the sorted column's bars — green like the Overall progress bar (round 2) */
  --oc3-hero-bar-b: #2f6f3d;
  --oc3-zebra: #f9fafb;
  --oc3-podium: #fdfbf5;
  --oc3-medal-1: #e9a30b;
  --oc3-medal-1-ink: #3a3000;
  --oc3-medal-2: #b9c3cf;
  --oc3-medal-2-ink: #2f3542;
  --oc3-medal-3: #c98a57;
  --oc3-medal-3-ink: #4a2a10;
  --oc3-th-badge: #2f3542;
  --oc3-th-badge-ink: #ffffff;
  --oc3-radius: 16px;
  --oc3-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .06);
  --oc3-clash: Clash, 'Trebuchet MS', sans-serif;
  --oc3-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --oc3-data: var(--oc3-sans);
  /* page knobs (Clan Page → Numbers & units / Clan strength; the renderer sets them inline on #oc3, these are the defaults):
     --oc3-ts scales every plain / data (non-Clash) size, the Clash sizes never move */
  --oc3-ts: 1;
  --oc3-tint-from: 90;
  --oc3-tint-cap: 60;
  --oc3-gi: 30px;

  max-width: 1180px;
  margin: 0 auto;
  padding-block: 14px 44px;
  padding-inline: 16px;
  display: grid;
  gap: 12px;
  color: var(--oc3-ink);
  font-family: var(--oc3-sans);
  font-size: calc(14px * var(--oc3-ts, 1));
  line-height: 1.45;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
html[data-theme="dark"] .oc3 {
  --oc3-card: var(--osp-bg-0, #0d1117);
  --oc3-panel: var(--osp-bg-1, #161b22);
  --oc3-raised: var(--osp-bg-2, #1f242c);
  --oc3-lifted: var(--osp-bg-3, #262c36);
  --oc3-summary: #161d2a;
  --oc3-line: var(--osp-border-1, #2d333b);
  --oc3-line-2: #3a414b;
  --oc3-ink: var(--osp-fg-0, #e6e6e6);
  --oc3-ink-2: var(--osp-fg-1, #b8bcc4);
  --oc3-ink-3: #9da3ad;
  --oc3-mute: #8b919c;
  --oc3-green: #4ade80;
  --oc3-green-bg: rgba(74, 222, 128, .12);
  --oc3-red: #f87171;
  --oc3-red-bg: rgba(248, 113, 113, .12);
  --oc3-win: #4ade80;
  --oc3-tie: #667384;
  --oc3-loss: #d0524b;
  --oc3-well: #262c36;
  --oc3-bar: #535c69;
  --oc3-lead: #2a2418;
  --oc3-link: #5b9cf0;
  --oc3-glow-c: #ffd76b;
  --oc3-chart: #f0c040;
  --oc3-pulse-line: #f4f5f7;     /* …white in dark */
  --oc3-max-a: #4ade80;
  --oc3-max-b: #4ade80;
  --oc3-sorted: rgba(255, 255, 255, .07);
  --oc3-hero-band: #f0c04017;
  --oc3-hero-ink: #ffd76b;
  --oc3-hero-rule: #f0c040;
  --oc3-hero-bar-a: #4ade80;
  --oc3-hero-bar-b: #4ade80;
  --oc3-zebra: #ffffff06;
  --oc3-podium: #1b1a15;
  --oc3-th-badge: #3a414b;
  --oc3-radius: 12px;
  --oc3-shadow: none;
  color-scheme: dark;
}

/* ── resets inside the page (the parent theme styles bare elements) ──
   :where() keeps them at element weight so every .oc3-* rule below wins.
   The theme's clearfix puts a ::before/::after "table" box on every div and
   list — inside a grid that box takes the first cell, so it is cancelled by
   id; the page's own pseudo-elements are re-declared under #oc3 further down. */
.oc3 *, .oc3 *::before, .oc3 *::after { box-sizing: border-box; }
#oc3 *::before, #oc3 *::after { content: none; }
:where(.oc3) h1, :where(.oc3) h2, :where(.oc3) h3, :where(.oc3) p, :where(.oc3) ul, :where(.oc3) ol, :where(.oc3) li, :where(.oc3) figure { margin: 0; padding: 0; list-style: none; }
:where(.oc3) h1, :where(.oc3) h2, :where(.oc3) h3 { text-transform: none; line-height: 1.15; }
:where(.oc3) a { color: inherit; text-decoration: none; font: inherit; }
:where(.oc3) img { max-width: none; height: auto; border: 0; }
/* an emoji set in place of an icon image (admin → Clan Page); sized by --oc3-es from the image it replaces, low specificity so a component's own icon size still wins */
:where(.oc3) .oc3-emo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--oc3-es, 1.15em); height: var(--oc3-es, 1.15em); font-size: calc(var(--oc3-es, 1.15em) * .8); line-height: 1; font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; vertical-align: middle; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; overflow: hidden; }
:where(.oc3) button, :where(.oc3) input, :where(.oc3) select { font: inherit; color: inherit; margin: 0; letter-spacing: inherit; }
:where(.oc3) button { cursor: pointer; background: none; border: 0; padding: 0; text-transform: none; box-shadow: none; transition: none; }
.oc3 [hidden] { display: none !important; }
#oc3 a.oc3-li-a, #oc3 div.oc3-r-a { color: var(--oc3-ink); font-family: var(--oc3-sans); font-size: calc(14px * var(--oc3-ts, 1)); font-weight: 400; letter-spacing: normal; text-transform: none; }
#oc3 a.oc3-btn { color: var(--oc3-ink-2); }
#oc3 a.oc3-btn:hover { color: var(--oc3-ink); }
#oc3 .oc3-fam a { color: var(--oc3-ink); }
.oc3 :focus-visible { outline: 3px solid var(--oc3-focus); outline-offset: 2px; }

/* dark-mode.css paints every <section> var(--osp-bg-0) !important — the cards follow --oc3-card instead
   (same colour by default, so an admin override of col_c3_card_dk actually reaches them) */
html[data-theme="dark"] #oc3 .oc3-sec, html[data-theme="dark"] #oc3 .oc3-id, html[data-theme="dark"] #oc3 .oc3-join { background-color: var(--oc3-card) !important; }
/* …and paints section text + h1–h6 var(--osp-fg-0) at (0,1,2), which beats .oc3-name/.oc3-h-t — so col_c3_ink_dk
   never reached the clan name, headings or card text. Same value by default (--oc3-ink = var(--osp-fg-0)). */
html[data-theme="dark"] #oc3 .oc3-sec, html[data-theme="dark"] #oc3 .oc3-id, html[data-theme="dark"] #oc3 .oc3-join,
html[data-theme="dark"] #oc3 .oc3-name, html[data-theme="dark"] #oc3 .oc3-h-t { color: var(--oc3-ink); }

/* ── shared parts ── */
.oc3-sec, .oc3-id, .oc3-join {
  background: var(--oc3-card);
  border: 1px solid var(--oc3-line);
  border-radius: var(--oc3-radius);
  box-shadow: var(--oc3-shadow);
  padding: 14px 14px 16px;
  min-width: 0;
}
.oc3-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 12px; }
.oc3-h-t {
  font-family: var(--oc3-clash); font-weight: 700; font-size: 15px; letter-spacing: .03em;
  color: var(--oc3-ink); margin-right: auto;
}
.oc3-h--sub { margin-bottom: 8px; }
.oc3-h--sub .oc3-h-t { font-size: 13px; }
.oc3-h-r { display: inline-flex; align-items: center; gap: 6px; font-family: var(--oc3-clash); font-size: 11px; letter-spacing: .04em; color: var(--oc3-ink-2); }
.oc3-note { font-size: calc(12.5px * var(--oc3-ts, 1)); color: var(--oc3-mute); margin-top: 8px; max-width: 72ch; }

.oc3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 8px 13px;
  background: var(--oc3-raised); border: 1px solid var(--oc3-line-2); border-radius: 0;
  color: var(--oc3-ink-2); font-family: var(--oc3-clash); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; transition: none;
}
.oc3-btn:hover { border-color: var(--oc3-ink-3); color: var(--oc3-ink); }
.oc3-btn--s { min-height: 32px; padding: 6px 10px; font-size: 10.5px; }

.oc3-dot {
  display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--oc3-green); box-shadow: 0 0 0 0 var(--oc3-pulse-ring);
  animation: oc3-pulse 2.4s ease-out infinite;
}
@keyframes oc3-pulse { 0% { box-shadow: 0 0 0 0 var(--oc3-pulse-ring); } 70%, 100% { box-shadow: 0 0 0 5px transparent; } }

/* segmented control (neutral — gold belongs to the board tabs) */
.oc3-seg { display: inline-flex; border: 1px solid var(--oc3-line-2); }
.oc3-seg-b {
  padding: 6px 10px; min-height: 30px; background: var(--oc3-panel); color: var(--oc3-ink-3);
  font-family: var(--oc3-clash); font-weight: 700; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
}
.oc3-seg-b + .oc3-seg-b { border-left: 1px solid var(--oc3-line-2); }
.oc3-seg-b:hover { color: var(--oc3-ink); }
.oc3-seg-b[aria-pressed="true"], .oc3-seg-b[aria-selected="true"] { background: var(--oc3-ink); color: var(--oc3-panel); }

/* tabs (square; the active one is the page's gold) */
.oc3-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.oc3-tabs--4, .oc3-tabs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the pulse row follows how many boards are switched on (--tc, set by the renderer when not 6) */
.oc3-today .oc3-tabs { grid-template-columns: repeat(var(--tc, 3), minmax(0, 1fr)); }
.oc3-tab {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 42px; padding: 7px 6px;
  background: var(--oc3-raised); border: 1px solid var(--oc3-line); color: var(--oc3-ink-2);
  font-family: var(--oc3-clash); font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
}
.oc3-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc3-tab-i { width: 22px; height: 22px; object-fit: contain; flex: none; }
.oc3-tab:hover { border-color: var(--oc3-line-2); color: var(--oc3-ink); }
.oc3-tab[aria-selected="true"] { background: var(--oc3-ink); border-color: var(--oc3-ink); color: var(--oc3-panel); }
.oc3-today .oc3-tab[aria-selected="true"] { background: var(--oc3-gold); border-color: var(--oc3-gold); color: var(--oc3-gold-ink); }

/* meters (pill track, left-anchored fill) */
.oc3-meter { display: block; height: 7px; border-radius: 999px; background: var(--oc3-well); overflow: hidden; box-shadow: inset 0 1px 2px rgba(16, 24, 40, .05); }
.oc3-meter i {
  display: block; height: 100%; border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, var(--oc3-meter-a), var(--oc3-meter-b));
  transform-origin: left center; animation: oc3-grow .9s cubic-bezier(.25, .7, .3, 1) both;
}
.oc3-meter i[style*="width:100%"], .is-max > .oc3-meter i, .oc3-meter.is-max i { border-radius: 999px; background: linear-gradient(90deg, var(--oc3-max-a), var(--oc3-max-b)); }
/* completion bars (clan strength tiles, roster Overall; --p = the bar's %): from --oc3-tint-from the slate blends toward the
   maxed green, reaching --oc3-tint-cap % of it just under 100 — so "almost there" reads, and 100 % stays the one full green
   (the rule above out-ranks this one). The war meters carry no --p and stay slate. */
.oc3-meter--c i {
  --oc3-tw: calc(clamp(0, (var(--p, 0) - var(--oc3-tint-from, 90)) / (100 - var(--oc3-tint-from, 90)), 1) * var(--oc3-tint-cap, 60) * 1%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--oc3-max-a) var(--oc3-tw), var(--oc3-meter-a)), color-mix(in srgb, var(--oc3-max-b) var(--oc3-tw), var(--oc3-meter-b)));
}
@keyframes oc3-grow { from { transform: scaleX(0); } }

/* ── identity ── */
.oc3-id-top { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; align-items: center; }
.oc3-badge { width: 64px; height: 64px; object-fit: contain; }
.oc3-name {
  font-family: var(--oc3-clash); font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: .02em;
  color: var(--oc3-ink); overflow-wrap: anywhere;
}
.oc3-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.oc3-chip.oc3-tag { padding: 3px 10px 3px 11px; cursor: pointer; }
.oc3-chip.oc3-tag:hover { border-color: var(--oc3-ink-3); color: var(--oc3-ink); }
.oc3-tag-i { color: var(--oc3-ink-3); }
.oc3-tag-ok { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--oc3-green); }
.oc3-tag-ok:empty { display: none; }
.oc3-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 10px 3px 6px; border-radius: 999px;
  background: var(--oc3-raised); border: 1px solid var(--oc3-line); color: var(--oc3-ink-2);
  font-family: var(--oc3-clash); font-weight: 700; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.oc3-chip img { width: 16px; height: 16px; object-fit: contain; }
.oc3-chip--ok { background: var(--oc3-green-bg); border-color: transparent; color: var(--oc3-green); }
/* ── [identity chips builder 2026-09-26] Félix's custom chips (oc3_cc_chips): the built-in chip, unchanged. A text alone or an
   icon alone gets even sides (the built-in padding is shaped for icon + text); a long text ends in "…" instead of running off a
   phone; a linked chip reacts like the tag chip and never takes the theme's link colour, font or underline. Clan page only. */
.oc3[data-slot] .oc3-chip--cc { max-width: 100%; }
.oc3[data-slot] .oc3-chip--cc.is-t { padding-left: 10px; }
.oc3[data-slot] .oc3-chip--cc.is-i { padding-right: 6px; }
.oc3[data-slot] .oc3-cc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.oc3[data-slot] .oc3-cc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#oc3[data-slot] a.oc3-chip--cc, #oc3[data-slot] a.oc3-chip--cc:visited {
  color: var(--oc3-ink-2); text-decoration: none;
  font-family: var(--oc3-clash); font-weight: 700; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
}
#oc3[data-slot] a.oc3-chip--cc:hover { border-color: var(--oc3-ink-3); color: var(--oc3-ink); text-decoration: none; }
@media (max-width: 767.98px) {   /* a thumb-sized target without moving anything, like the tag chip */
  #oc3[data-slot] a.oc3-chip--cc { position: relative; z-index: 1; }
  #oc3[data-slot] a.oc3-chip--cc::after { content: ""; position: absolute; inset: -9px -2px; }
}
/* ── [/identity chips builder] */
/* R8: the description is .oc3-id-top's second row (last column = under name + chips; no badge = the only column) and always wraps */
.oc3-desc { grid-column: -2 / -1; margin-top: 9px; font-size: calc(13.5px * var(--oc3-ts, 1)); color: var(--oc3-ink-3); max-width: 70ch; overflow-wrap: anywhere; text-wrap: pretty; }
.oc3-desc-l { display: block; }
.oc3-desc-l + .oc3-desc-l { margin-top: 2px; }
.oc3-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px -14px 0; border-top: 1px solid var(--oc3-line); border-bottom: 1px solid var(--oc3-line);
}
.oc3-fact {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 7px; align-items: center;
  padding: 9px 10px 9px 12px; min-width: 0;
}
.oc3-fact:not(:nth-child(3n + 1)) { border-left: 1px solid var(--oc3-line); }
.oc3-fact:nth-child(n + 4) { border-top: 1px solid var(--oc3-line); }
.oc3-fact:last-child:nth-child(3n + 2) { grid-column: span 2; }
.oc3-fact-i { grid-row: 1 / 3; width: 22px; height: 22px; object-fit: contain; }
.oc3-fact b { font-family: var(--oc3-clash); font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--oc3-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.oc3-fact b small { font-size: 11px; color: var(--oc3-ink-3); margin-left: 1px; }
.oc3-fact span { font-size: calc(12px * var(--oc3-ts, 1)); color: var(--oc3-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc3-id-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 12px; }
.oc3-pulse { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; padding-left: 15px; font-size: calc(13px * var(--oc3-ts, 1)); color: var(--oc3-ink-2); }
.oc3-pulse .oc3-dot { position: absolute; left: 0; top: .5em; }
#oc3 .oc3-pulse span + span::before { content: '·'; margin: 0 7px; color: var(--oc3-mute); }
.oc3-pulse[data-state="off"] .oc3-dot { background: var(--oc3-tie); animation: none; }
.oc3-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── today board ── */
.oc3-today .oc3-h-t { margin-right: 0; }
.oc3-today .oc3-state { margin-right: auto; }
.oc3-span { font-family: var(--oc3-sans); font-size: calc(13px * var(--oc3-ts, 1)); font-weight: 400; letter-spacing: normal; color: var(--oc3-mute); white-space: nowrap; }
.oc3-state {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--oc3-clash); font-weight: 700; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--oc3-ink-3); background: var(--oc3-raised); white-space: nowrap;
}
.oc3-state .oc3-dot { width: 6px; height: 6px; background: var(--oc3-tie); animation: none; }
.oc3-state[data-state="live"] { color: var(--oc3-green); background: var(--oc3-green-bg); }
.oc3-state[data-state="live"] .oc3-dot { background: var(--oc3-green); animation: oc3-pulse 2.4s ease-out infinite; }
.oc3-state[data-state="offline"] { color: var(--oc3-red); background: var(--oc3-red-bg); }
.oc3-state[data-state="offline"] .oc3-dot { background: var(--oc3-red); }

.oc3-board { margin-top: 10px; }
.oc3-read {
  display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: end; gap: 12px;
  padding: 12px 12px 10px; background: var(--oc3-summary); border-radius: 6px;
}
.oc3-read-fig { min-width: 0; }
.oc3-read-v {
  display: block; font-family: var(--oc3-clash); font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: .01em;
  color: var(--oc3-ink); font-variant-numeric: tabular-nums;
}
.oc3-read-v.is-bump { animation: oc3-glow 1.4s ease-out; }
.oc3 .oc3-read-v.is-multi { display: flex; flex-direction: column; gap: 5px; font-size: 24px; line-height: 1.1; }
.oc3-res { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.oc3-res-i { width: 24px; height: 24px; object-fit: contain; flex: none; }
.oc3-read-u { display: block; margin-top: 3px; font-size: calc(13.5px * var(--oc3-ts, 1)); color: var(--oc3-ink-2); }
.oc3-read-s { display: block; margin-top: 2px; font-size: calc(12.5px * var(--oc3-ts, 1)); color: var(--oc3-ink-3); }
.oc3-read-s:empty { display: none; }
.oc3-read-s.is-scrub { visibility: hidden; }   /* while the chart is read (keeps its line: no layout jump) */
/* Army: the clan's favourite troop, spell and siege under the chart */
.oc3-fav {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 2px 0 0; padding-top: 9px; border-top: 1px solid var(--oc3-line);
}
.oc3-fav-l { font-size: calc(12.5px * var(--oc3-ts, 1)); color: var(--oc3-ink-3); }
.oc3-fav.is-off { display: none; }
.oc3-fav-i { display: inline-flex; align-items: center; gap: 6px; font-family: var(--oc3-clash); font-weight: 700; font-size: 12px; letter-spacing: .02em; color: var(--oc3-ink); white-space: nowrap; }
.oc3-fav-i img { width: 22px; height: 22px; object-fit: contain; }
.oc3-spark { position: relative; min-width: 0; touch-action: pan-y; cursor: crosshair; }
.oc3-spark svg { display: block; width: 100%; height: 46px; overflow: visible; }
.oc3-spark { color: var(--oc3-chart); }
.oc3-spark-a { fill: url(#oc3-spark-fade); }
.oc3-sf-0 { stop-color: currentColor; stop-opacity: .28; }
.oc3-sf-1 { stop-color: currentColor; stop-opacity: .02; }
html[data-theme="dark"] .oc3-sf-0 { stop-opacity: .2; }
.oc3-spark-l { fill: none; stroke: currentColor; stroke-width: 1.75px; stroke-linejoin: round; }
.oc3-spark-x { position: absolute; top: 0; height: 46px; width: 1px; background: var(--oc3-ink-3); pointer-events: none; opacity: 0; }
.oc3-spark.is-scrub .oc3-spark-x { opacity: 1; }
.oc3-spark-c { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--oc3-line); font-size: calc(12px * var(--oc3-ts, 1)); color: var(--oc3-ink-3); font-variant-numeric: tabular-nums; opacity: 1 !important; }
.oc3-nw { white-space: nowrap; }
/* a trio's scrub caption needs two lines; reserve them so nothing moves under the pointer — only when the three values are
   listed there (vis_c3_scrub_fig off): with the big figure reading the hour (--sfig, the default) the caption is one line, and the
   reserved second line was a blank band above Favourites (2026-09-26 polish) */
.oc3-today:not(.oc3-today--sfig)[data-board="donations"] .oc3-spark-c, .oc3-today:not(.oc3-today--sfig)[data-board="loot"] .oc3-spark-c, .oc3-today:not(.oc3-today--sfig)[data-board="army"] .oc3-spark-c { min-height: calc(2 * 1.45em + 7px); }
.oc3-spark-s { display: none; color: var(--oc3-ink); font-weight: 600; }
.oc3-spark.is-scrub .oc3-spark-s { display: inline; }
.oc3-spark.is-scrub .oc3-spark-d { display: none; }
/* R7 reading the chart: the marker spans the drawn chart (JS sets top/height), a dot sits on the line, the figure reads that hour */
.oc3-spark-x { transform: translateX(-.5px); }
.oc3-spark-p {
  position: absolute; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 2px var(--oc3-summary); pointer-events: none; opacity: 0;
}
.oc3-spark.is-scrub .oc3-spark-p { opacity: 1; }
.oc3 .oc3-read-v.is-scrub { color: color-mix(in srgb, var(--oc3-chart) 45%, var(--oc3-ink)); }
/* the clan page's Weekly Statistics chart (2026-09-26, Félix: "black for light mode, white for dark mode"): its line, the fill
   under it and the reading dot in --oc3-pulse-line (Colours → Weekly Statistics). Scoped to the clan page (#oc3 carries
   data-slot there): the player page reuses .oc3-today / .oc3-spark and keeps --oc3-chart. A black or white fill at the gold's
   .28 read as a grey slab, so it starts lower; the figure being read takes a touch of the line, as it took the gold */
.oc3[data-slot] .oc3-today .oc3-spark { color: var(--oc3-pulse-line); }
.oc3[data-slot] .oc3-today .oc3-sf-0 { stop-opacity: .13; }
.oc3[data-slot] .oc3-today .oc3-sf-1 { stop-opacity: .01; }
html[data-theme="dark"] .oc3[data-slot] .oc3-today .oc3-sf-0 { stop-opacity: .11; }
/* ── [chart text builder 2026-09-26] (Félix: "allow me to edit the colour of the text when exploring it") the readout while the
   chart is read: the figure (that hour) = --oc3-pulse-read, the day / time line under the chart = --oc3-pulse-read-at (Colours →
   Weekly Statistics, col_c3_pulse_read[_dk] / col_c3_pulse_read_at[_dk]). Unset they are the colours from before — the figure
   takes 45 % of the chart line into the ink, the time line is the ink — and follow those two tokens; an override (oc3-colors,
   #oc3.oc3) replaces the mix. Declared on the clan page's root only, so the player page's readout and styles stay as they are. */
/* 2026-09-26: the figures own their colour (--oc3-pulse-fig, default the ink) at rest and while read — no longer mixed from the line */
.oc3[data-slot] { --oc3-pulse-fig: var(--oc3-ink); --oc3-pulse-read: var(--oc3-pulse-fig); --oc3-pulse-read-at: var(--oc3-ink); }
.oc3[data-slot] .oc3-today .oc3-read-v { color: var(--oc3-pulse-fig); }
.oc3[data-slot] .oc3-today .oc3-read-v.is-scrub { color: var(--oc3-pulse-read); }
.oc3[data-slot] .oc3-today .oc3-spark.is-scrub .oc3-spark-s { color: var(--oc3-pulse-read-at); }
/* ── [/chart text builder] */
/* the reading dot over the caption's top rule: an hour at 0 puts the dot on that rule, and the caption (position: relative,
   later in the markup) used to paint its border across the dot */
.oc3[data-slot] .oc3-today .oc3-spark-p { z-index: 1; }
.oc3-fav-n { min-width: 0; }
.oc3-fav-c { display: block; font-family: var(--oc3-sans); font-weight: 600; font-size: calc(10.5px * var(--oc3-ts, 1)); letter-spacing: .02em; line-height: 1.2; color: var(--oc3-ink-3); }
/* category line (vis_c3_fav_cat) above icon + name; phones keep their icon-over-name column */
@media (min-width: 480px) {
  .oc3-fav-i:has(> .oc3-fav-c) { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; row-gap: 2px; }
  .oc3-fav-c { grid-column: 1 / -1; }
}

.oc3-list { margin-top: 6px; }
.oc3-li { border-bottom: 1px solid var(--oc3-line); }
.oc3-li:last-child { border-bottom: 0; }
.oc3-li-a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "n name v" ". bar sub";
  column-gap: 10px; row-gap: 5px; align-items: center; padding: 9px 6px 9px 2px;
}
a.oc3-li-a:hover { background: var(--oc3-raised); }
.oc3-li.is-lead .oc3-li-a { background: var(--oc3-lead); }
.oc3-li-n { grid-area: n; font-family: var(--oc3-clash); font-weight: 700; font-size: 13px; color: var(--oc3-ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.oc3-li.is-lead .oc3-li-n { color: var(--oc3-ink); }
.oc3-li-name { grid-area: name; display: flex; align-items: center; gap: 6px; min-width: 0; }
.oc3-li-name b { font-family: var(--oc3-clash); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; color: var(--oc3-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc3-li-role { width: 16px; height: 16px; object-fit: contain; flex: none; }
.oc3-li-v { grid-area: v; font-family: var(--oc3-data); font-weight: 700; font-size: calc(15px * var(--oc3-ts, 1)); color: var(--oc3-ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc3-li.is-bump .oc3-li-v { animation: oc3-glow 1.4s ease-out; }
.oc3-li-bar { grid-area: bar; display: block; height: 6px; border-radius: 999px; background: var(--oc3-well); overflow: hidden; }
.oc3-li-bar i {
  position: relative; display: block; height: 100%; border-radius: 999px 0 0 999px; background: var(--oc3-bar); overflow: hidden;
  transform-origin: left center; animation: oc3-grow .9s cubic-bezier(.25, .7, .3, 1) both;
}
.oc3-today .oc3-li.is-lead .oc3-li-bar i { background: linear-gradient(90deg, var(--oc3-gold-a), var(--oc3-gold-b)); }
#oc3 .oc3-today .oc3-li.is-lead .oc3-li-bar i::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(110deg, transparent 20%, var(--oc3-shimmer) 50%, transparent 80%);
  animation: oc3-shimmer 2.8s linear infinite;
}
.oc3-li-sub { grid-area: sub; font-size: calc(12px * var(--oc3-ts, 1)); color: var(--oc3-mute); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc3-li-sub:empty { display: none; }
.oc3-li-sub:empty ~ .oc3-li-bar, .oc3-li-a:not(:has(.oc3-li-sub:not(:empty))) .oc3-li-bar { grid-column: 2 / 4; }
.oc3-list .oc3-li:nth-child(2) .oc3-li-bar i { animation-delay: 50ms; }
.oc3-list .oc3-li:nth-child(3) .oc3-li-bar i { animation-delay: 100ms; }
.oc3-list .oc3-li:nth-child(4) .oc3-li-bar i { animation-delay: 150ms; }
.oc3-list .oc3-li:nth-child(5) .oc3-li-bar i { animation-delay: 200ms; }
.oc3-list .oc3-li:nth-child(6) .oc3-li-bar i { animation-delay: 250ms; }
.oc3-list .oc3-li:nth-child(7) .oc3-li-bar i { animation-delay: 300ms; }
.oc3-list .oc3-li:nth-child(8) .oc3-li-bar i { animation-delay: 350ms; }
.oc3-list .oc3-li:nth-child(9) .oc3-li-bar i { animation-delay: 400ms; }
.oc3-list .oc3-li:nth-child(10) .oc3-li-bar i { animation-delay: 450ms; }
.oc3-list.is-live .oc3-li-bar i { animation: none; }
@keyframes oc3-shimmer { to { transform: translateX(100%); } }
@keyframes oc3-glow {
  0% { color: var(--oc3-glow-c); text-shadow: 0 0 10px var(--oc3-glow-halo); }
  100% { text-shadow: 0 0 0 transparent; }
}
.oc3-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 4px 6px; font-size: calc(13.5px * var(--oc3-ts, 1)); color: var(--oc3-ink-2); }
.oc3-more { display: flex; justify-content: flex-end; padding-top: 10px; }

/* ── war ── */
.oc3-rec-n { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.oc3-rec-n li { display: inline-flex; align-items: center; gap: 6px; }
.oc3-rec-n img { width: 20px; height: 20px; object-fit: contain; }
.oc3-rec-n b { font-family: var(--oc3-clash); font-weight: 700; font-size: 15px; color: var(--oc3-ink); font-variant-numeric: tabular-nums; }
.oc3-rec-n span { font-size: calc(13px * var(--oc3-ts, 1)); color: var(--oc3-ink-3); }
.oc3-rec { display: flex; gap: 2px; height: 10px; margin: 9px 0 10px; border-radius: 999px; overflow: hidden; background: var(--oc3-well); }
.oc3-rec i { display: block; flex-basis: 0; min-width: 3px; }
.oc3-rec-w { background: var(--oc3-win); }
.oc3-rec-t { background: var(--oc3-tie); }
.oc3-rec-l { background: var(--oc3-loss); }
.oc3-rec-f { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: calc(13.5px * var(--oc3-ts, 1)); color: var(--oc3-ink-2); }
.oc3-rec-f b { font-family: var(--oc3-clash); font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--oc3-ink); }
.oc3-rec-f span { display: inline-flex; align-items: center; gap: 5px; }
.oc3-rec-f img { width: 16px; height: 16px; object-fit: contain; }
/* source switch: a pill that cycles ClashSpot → ClashKing → ClashPerk (owner's CWL-lineup idiom) */
.oc3-srcsw {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--oc3-line-2); background: var(--oc3-panel); color: var(--oc3-link);
  font-family: var(--oc3-clash); font-weight: 700; font-size: 10.5px; letter-spacing: .03em; cursor: pointer; white-space: nowrap;
}
.oc3-srcsw:hover { border-color: var(--oc3-link); }
.oc3-srcsw svg { flex: none; }
/* Clash's caps sit ~.16em above the line box's middle (big ascent, no descenders): drop the name to the pill's optical centre */
.oc3-srcsw [data-r="srcn"] { transform: translateY(.16em); }
.oc3-meters { display: grid; gap: 12px; margin-top: 14px; padding: 12px; background: var(--oc3-summary); border-radius: 6px; }
.oc3-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; align-items: center; }
.oc3-m-l { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13.5px * var(--oc3-ts, 1)); color: var(--oc3-ink-2); min-width: 0; }
.oc3-m-l img { width: 18px; height: 18px; object-fit: contain; }
.oc3-m-l small { font-size: calc(12px * var(--oc3-ts, 1)); color: var(--oc3-ink-3); margin-left: 2px; }
.oc3-m-t { white-space: nowrap; }
.oc3-m-v { font-family: var(--oc3-clash); font-weight: 700; font-size: 15px; color: var(--oc3-ink); font-variant-numeric: tabular-nums; }
.oc3-m .oc3-meter { grid-column: 1 / -1; height: 8px; }
.oc3-wl { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--oc3-line); }
/* ── [war strength builder 2026-09-26] (Félix: "on mobile, the War Strength section is a little bit bloated and it smells AI";
   "put their own icon before the label" on the source pill). Clan page only (.oc3[data-slot]) — the player preview loads this file too.
   - the counts lead with a colour key cut from the record bar (vis_c3_rec_ic off, the default) instead of three icon squares;
   - the source pill carries the shown source's own logo (ic_c3_src_*; one per source in the markup, the others [hidden]);
   - phones: the record, its bar and the win rate / streak / stars line read as one block; the meters sit flush under a hairline
     (no well inside the card); the scope note is computers-and-tablets only unless vis_c3_scope_ph, the note under the meters
     (figures: attacks, players) shows on phones unless vis_c3_snote_ph is switched off [builders check 2026-09-26]. */
.oc3[data-slot] .oc3-rec-n.is-key li { gap: 6px; }
/* figure and word share a baseline (the word is support text: sans, as the plain-text ramp says — a theme rule set it in Clash) */
.oc3[data-slot] .oc3-war .oc3-rec-n li { align-items: baseline; }
.oc3[data-slot] .oc3-war .oc3-rec-n li > :is(.oc3-rec-k, img, picture, .oc3-emo) { align-self: center; }
.oc3[data-slot] .oc3-war .oc3-rec-n span { font-family: var(--oc3-sans); }
.oc3[data-slot] .oc3-rec-k { display: block; flex: none; width: 12px; height: 7px; border-radius: 999px; }
.oc3[data-slot] .oc3-srcsw-i { display: inline-flex; flex: none; }
.oc3[data-slot] .oc3-srcsw-i[hidden] { display: none; }
.oc3[data-slot] .oc3-srcsw-i img { display: block; width: 16px; height: 16px; object-fit: contain; }
.oc3[data-slot] .oc3-srcsw:has(> .oc3-srcsw-i:not([hidden])) { padding-left: 5px; gap: 5px; }
.oc3[data-slot] .oc3-src1 { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 767.98px) {
  .oc3[data-slot] .oc3-war .oc3-note--dk { display: none; }
  .oc3[data-slot] .oc3-war .oc3-rec-n { gap: 4px 14px; }
  .oc3[data-slot] .oc3-war .oc3-rec { height: 8px; margin: 8px 0; }
  .oc3[data-slot] .oc3-war .oc3-rec-f { gap: 4px 12px; }
  .oc3[data-slot] .oc3-war .oc3-meters { gap: 10px; margin-top: 12px; padding: 12px 0 0; background: none; border-radius: 0; border-top: 1px solid var(--oc3-line); }
  .oc3[data-slot] .oc3-war .oc3-m { row-gap: 5px; }
  .oc3[data-slot] .oc3-war .oc3-m .oc3-meter { height: 6px; }
  .oc3[data-slot] .oc3-war .oc3-srcsw:has(> .oc3-srcsw-i:not([hidden])) { padding-left: 6px; }
}
/* 2026-09-26 third meter (c3_rec_m3, "Avg stars per attack"): the same row as the other two (label + figure, bar under; the grow /
   reshape motion is the shared .oc3-meter i one). The war record alone on its row (≥1024, .oc3--solo) lays its meters side by
   side: one column per meter shown — a source without average stars hides that row, and the other two share the width again */
@media (min-width: 1024px) {
  .oc3[data-slot].oc3--solo .oc3-war .oc3-meters:has(> .oc3-m--m3) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  /* the meters sit at the card's foot (margin-top: auto); with the scope note off (the default since 2026-09-26) a card with no
     room to spare (alone on its row, or taller than the pulse) put them flush under the win-rate line — the block before them
     keeps 14px (flex margins add up: auto + 14px, so a stretched card looks exactly as before) */
  .oc3[data-slot] .oc3-war > :has(+ .oc3-meters) { margin-bottom: 14px; }
}
/* 360px: the heading and "Champion League III" stay on one line (they wrapped by a pixel, one more row) */
@media (max-width: 380px) {
  .oc3[data-slot] .oc3-war .oc3-h { column-gap: 8px; }
  .oc3[data-slot] .oc3-war .oc3-h-r { gap: 5px; font-size: 10px; }
  .oc3[data-slot] .oc3-war .oc3-h-r img { width: 20px; height: 20px; }
}
/* ── [/war strength builder] */

/* ── strength: army-camp tiles ──
   Each unit is a tile like the game's army overview: portrait, completion under
   it, a slim pill meter along the foot. The name stays in the markup for screen
   readers and shows as a tip on hover (mouse) or tap (.is-tip, clan-v3.js).
   Groups keep the renderer's order, each sorted by completion; the heading
   carries the group average. Phones ≈ 9 tiles a row; ≥768 the groups flow into
   balanced columns (3 on desktop). */
.oc3-th { display: flex; flex-wrap: wrap; gap: 5px; }
.oc3-th li {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 4px;
  background: var(--oc3-raised); border: 1px solid var(--oc3-line);
}
.oc3-th img { width: 26px; height: 26px; object-fit: contain; }
.oc3-th b { font-family: var(--oc3-clash); font-weight: 700; font-size: 11px; letter-spacing: .04em; color: var(--oc3-ink); }
.oc3-th span { font-family: var(--oc3-data); font-size: calc(13px * var(--oc3-ts, 1)); font-weight: 700; color: var(--oc3-ink-3); }
.oc3-str .oc3-note { margin: 10px 0 2px; }
/* one note per tab (its wording follows that tab's level / % mode); only the open tab's note shows */
.oc3-str .oc3-snote { display: none; }
.oc3-str[data-str="heroes"] .oc3-snote[data-sn="heroes"], .oc3-str[data-str="troops"] .oc3-snote[data-sn="troops"], .oc3-str[data-str="equipment"] .oc3-snote[data-sn="equipment"] { display: block; }
.oc3-str-p { display: block; margin-top: 0; }
.oc3-grp { min-width: 0; padding-top: 11px; }
.oc3-grp-t {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--oc3-line);
  font-family: var(--oc3-clash); font-weight: 700; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--oc3-ink-2);
}
.oc3-grp-t img { width: 18px; height: 18px; object-fit: contain; }
/* the hero's icon on a Hero Equipment heading: --oc3-gi (Clan Page → Hero Equipment tab), ≈87 % of it on phones */
#oc3 .oc3-grp-t .oc3-grp-i { width: calc(var(--oc3-gi, 30px) * .87); height: calc(var(--oc3-gi, 30px) * .87); margin-block: -2px; flex: none; }
#oc3 .oc3-grp-t .oc3-grp-i.oc3-emo { font-size: calc(var(--oc3-gi, 30px) * .7); }
/* the site's WebP rewrite wraps some icons in a picture element that takes the class: that box takes the size, its image fills it */
#oc3 .oc3-grp-t picture.oc3-grp-i { display: block; }
#oc3 .oc3-grp-t .oc3-grp-i img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 768px) {
  #oc3 .oc3-grp-t .oc3-grp-i { width: var(--oc3-gi, 30px); height: var(--oc3-gi, 30px); }
  #oc3 .oc3-grp-t .oc3-grp-i.oc3-emo { font-size: calc(var(--oc3-gi, 30px) * .8); }
}
#oc3 .oc3-grp-t { font-weight: 700 !important; color: var(--oc3-ink-2) !important; }
.oc3-grp-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc3-grp-s { margin-left: auto; font-family: var(--oc3-sans); font-size: calc(12px * var(--oc3-ts, 1)); font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--oc3-mute); white-space: nowrap; }
.oc3-grp-s b { font-family: var(--oc3-data); font-weight: 700; font-size: calc(12.5px * var(--oc3-ts, 1)); color: var(--oc3-ink-2); font-variant-numeric: tabular-nums; }
.oc3-grp-s.is-max b { color: var(--oc3-green); }
.oc3-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 5px 3px; }
.oc3-u {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "i" "v" "m";
  row-gap: 2px; padding: 0; min-width: 0; justify-items: center; align-items: start; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.oc3-u-i {
  grid-area: i; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--oc3-lifted); border-radius: 3px; overflow: hidden;
}
.oc3-u-i img { display: block; width: 100%; height: 100%; object-fit: contain; }
picture.oc3-u-i { display: block; }
/* Hero Equipment rarity — the player page's glow (coc-player-renderer.php .eq-common / .eq-epic): 55 % fill, 70 % inset + 60 % outer glow */
.oc3-u.is-eq-common .oc3-u-i { background: color-mix(in srgb, var(--oc3-eq-common) 55%, transparent); box-shadow: 0 0 9px color-mix(in srgb, var(--oc3-eq-common) 70%, transparent) inset, 0 0 10px color-mix(in srgb, var(--oc3-eq-common) 60%, transparent); }
.oc3-u.is-eq-epic .oc3-u-i { background: color-mix(in srgb, var(--oc3-eq-epic) 55%, transparent); box-shadow: 0 0 9px color-mix(in srgb, var(--oc3-eq-epic) 70%, transparent) inset, 0 0 10px color-mix(in srgb, var(--oc3-eq-epic) 60%, transparent); }
.oc3-u-v { grid-area: v; font-family: var(--oc3-data); font-weight: 700; font-size: calc(11px * var(--oc3-ts, 1)); line-height: 1.1; letter-spacing: -.03em; color: var(--oc3-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc3-u-v small { font-size: .74em; margin-left: .5px; letter-spacing: 0; }
.oc3[data-slot] .oc3-u-v small { font-size: max(9.5px, .74em); }   /* the clan page: the 9.5px floor (Micro), 2026-09-26 polish */
.oc3-u .oc3-meter { grid-area: m; justify-self: stretch; height: 3px; box-shadow: none; }
/* the name: screen-reader text until the tile is pointed at or tapped */
.oc3-u-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oc3-u.is-tip .oc3-u-n {
  width: auto; height: auto; clip: auto; overflow: visible; z-index: 3;
  left: 50%; bottom: calc(100% + 5px); transform: translateX(calc(-50% + var(--tx, 0px)));
  padding: 5px 8px; background: var(--oc3-ink); color: var(--oc3-panel);
  font-family: var(--oc3-clash); font-weight: 700; font-size: 11px; letter-spacing: .03em;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .18); pointer-events: none;
}
.oc3-u.is-tip .oc3-u-i { outline: 2px solid var(--oc3-ink); outline-offset: 1px; }
.oc3-u:focus-visible { outline: none; }
#oc3 .oc3-u { scroll-margin-top: 100px; }
@media (min-width: 768px) { #oc3 .oc3-u { scroll-margin-top: 200px; } }
.oc3-u:focus-visible .oc3-u-i { outline: 3px solid var(--oc3-focus); outline-offset: 1px; }
.oc3-str { overflow-x: clip; }
/* a unit without artwork shows its name inside the empty tile (the hover text stays in .oc3-u-n) */
.oc3-u-nm {
  grid-area: i; align-self: center; width: 100%; overflow: hidden; pointer-events: none;
  padding: 0 2px; font-family: var(--oc3-clash); font-size: 9.5px; line-height: 1.1; text-align: center; white-space: normal; overflow-wrap: normal; hyphens: auto; max-height: 100%;
}
/* an emoji set as a hero portrait (Clan Page → Clan strength) */
#oc3 .oc3-u-e {
  display: grid; place-items: center; font-style: normal; font-weight: 400; line-height: 1; font-size: 22px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
/* level tabs: average level with a small /max (each unit's own max) */
.oc3-u-v small.oc3-u-mx { margin-left: 1px; font-weight: 600; color: var(--oc3-mute); }
.oc3-u.is-max .oc3-u-v small.oc3-u-mx { color: inherit; }
.oc3-u.is-max .oc3-u-v { color: var(--oc3-green); }

/* ── roster ── */
.oc3-roster .oc3-tabs { margin-bottom: 10px; }
.oc3-ctl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.oc3-search {
  flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 11px;
  background: var(--oc3-raised); border: 1px solid var(--oc3-line-2); color: var(--oc3-ink-3);
}
.oc3-search:focus-within { outline: 3px solid var(--oc3-focus); outline-offset: 2px; }
.oc3-search input {
  flex: 1; min-width: 0; height: 38px; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font-family: var(--oc3-clash); font-size: 13px; letter-spacing: .02em; color: var(--oc3-ink); outline: none;
}
.oc3-search input::placeholder { color: var(--oc3-mute); opacity: 1; }
.oc3-search input { text-overflow: ellipsis; }
.oc3-sel {
  flex: 1 1 0; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 2px 0 10px; min-width: 0;
  background: var(--oc3-raised); border: 1px solid var(--oc3-line-2);
}
.oc3-sel > span { font-size: calc(12.5px * var(--oc3-ts, 1)); color: var(--oc3-ink-3); white-space: nowrap; }
.oc3-sel select {
  flex: 1; min-width: 0; height: 38px; padding: 0 26px 0 4px; border: 0 !important; background-color: transparent !important; box-shadow: none !important;
  font-family: var(--oc3-clash); font-weight: 700; font-size: 11.5px; letter-spacing: .04em; color: var(--oc3-ink); cursor: pointer;
}
html[data-theme="dark"] .oc3-sel select option { background: var(--oc3-raised); color: var(--oc3-ink); }
/* controls layout (Clan Page → Roster "Search box and Sort menu layout"): the renderer picks one of
   --half (search | Sort 50/50 on every screen; the Role / Town Hall filters share the next row, one alone takes it whole),
   --wide (the search wide, Sort beside it from 560 up, stacked below) and --stack (always one per row) */
#oc3 .oc3-ctl--half { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#oc3 .oc3-ctl--half > * { min-width: 0; }
#oc3 .oc3-ctl--half.oc3-ctl--f1 > :last-child { grid-column: 1 / -1; }
#oc3 .oc3-ctl--stack > * { flex: 1 1 100%; }
@media (max-width: 559.98px) {
  #oc3 .oc3-ctl--half .oc3-search { gap: 6px; padding: 0 8px; }
  #oc3 .oc3-ctl--half .oc3-sel { padding-left: 8px; gap: 4px; }
  #oc3 .oc3-ctl--half .oc3-sel select { padding-right: 22px; }
}
/* compact Sort (glyph instead of the word) up to 440px: a 402–430px iPhone had "In-game rank" touching the arrow */
@media (max-width: 439.98px) {
  #oc3 .oc3-ctl--half .oc3-search { gap: 5px; padding: 0 7px; }
  #oc3 .oc3-ctl--half .oc3-search input { letter-spacing: 0; }
  #oc3 .oc3-ctl--half .oc3-sel { padding-left: 7px; }
  #oc3 .oc3-ctl--half .oc3-sel:has(> [data-f="sort"]) { gap: 2px; }
  #oc3 .oc3-ctl--half .oc3-sel:has(> [data-f="sort"]) > span { position: relative; width: 12px; height: 12px; overflow: hidden; color: var(--oc3-ink-3); font-size: 0; flex: none; }
  #oc3 .oc3-ctl--half .oc3-sel:has(> [data-f="sort"]) > span::before {
    content: ''; position: absolute; inset: 0; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1 0 4.5h2.2V11h1.6V4.5H6zM9 11l3-3.5H9.8V1H8.2v6.5H6z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1 0 4.5h2.2V11h1.6V4.5H6zM9 11l3-3.5H9.8V1H8.2v6.5H6z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #oc3 .oc3-ctl--half .oc3-sel select { padding-right: 17px; padding-left: 3px; letter-spacing: .02em; text-overflow: ellipsis; background-position: right 3px center !important; }
}
/* ≥768 with one filter on: search | Sort | that filter on one line (the filter sized to its menu) */
@media (min-width: 768px) {
  #oc3 .oc3-ctl--half.oc3-ctl--f1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  #oc3 .oc3-ctl--half.oc3-ctl--f1 > :last-child { grid-column: auto; }
}

.oc3-r { border-bottom: 1px solid var(--oc3-line); }
.oc3-r:last-child { border-bottom: 0; }
.oc3-r--h { display: none; }
.oc3-r-a {
  display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) auto; grid-template-areas: "n th name p" "n th s s";
  column-gap: 9px; row-gap: 3px; align-items: center; padding: 9px 4px 9px 0;
}
/* (a row is a <div> since 2026-09-25 round 2: only the member's name links to the profile — its hover highlight stays, mouse only) */
@media (hover: hover) { div.oc3-r-a:hover { background: var(--oc3-raised); } }
/* the member's name = the row's one link: same look as before, underlined on hover, the focus ring on keyboard; 3px more
   tap height (taken back by the margin, so the row does not grow) */
.oc3-r-nm { display: flex; min-width: 0; padding: 3px 0; margin: -3px 0; }
#oc3 a.oc3-r-nm, #oc3 a.oc3-r-nm:hover, #oc3 a.oc3-r-nm:visited { color: var(--oc3-ink); text-decoration: none; }
#oc3 a.oc3-r-nm:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.oc3-r-n { grid-area: n; font-family: var(--oc3-clash); font-weight: 700; font-size: 12px; color: var(--oc3-ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.oc3-r-th { grid-area: th; width: 28px; height: 28px; object-fit: contain; }
.oc3-r-name { grid-area: name; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.oc3-r-name b { font-family: var(--oc3-clash); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; color: var(--oc3-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc3-r-role { display: inline-flex; align-items: center; gap: 4px; font-size: calc(12px * var(--oc3-ts, 1)); color: var(--oc3-ink-3); white-space: nowrap; flex: none; }
.oc3-r-role img { width: 14px; height: 14px; object-fit: contain; align-self: center; }
.oc3-r[data-role="member"] .oc3-r-role { display: none; }
.oc3-g { display: none; }
.oc3-roster[data-view="info"] .oc3-g[data-v="info"],
.oc3-roster[data-view="war"] .oc3-g[data-v="war"],
.oc3-roster[data-view="prog"] .oc3-g[data-v="prog"],
.oc3-roster[data-view="rank"] .oc3-g[data-v="rank"] { display: contents; }
.oc3-g > .oc3-c {
  grid-area: p; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px;
  font-family: var(--oc3-data); font-weight: 700; font-size: calc(14.5px * var(--oc3-ts, 1)); color: var(--oc3-ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.oc3-sub { grid-area: s; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: calc(12.5px * var(--oc3-ts, 1)); color: var(--oc3-ink-3); font-variant-numeric: tabular-nums; min-width: 0; }
/* one stat = icon + value, never split across lines; the icon hugs its value (3px) and stats sit 14px apart */
.oc3-sub .oc3-c { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; flex: none; }
.oc3-sub .oc3-c b { font-weight: 600; color: var(--oc3-ink-2); }
.oc3-c small { font-size: calc(11.5px * var(--oc3-ts, 1)); color: var(--oc3-mute); margin-left: 3px; font-weight: 400; }
.oc3-c-i { width: 14px; height: 14px; object-fit: contain; flex: none; }
.oc3-g > .oc3-c .oc3-c-i { width: 16px; height: 16px; }
/* Upgrade Progress · Overall (round 2): its icon (the Overall header's) shows only in the phone's line under the name — as the
   top-right figure it keeps its bar and no icon, as before */
.oc3-g > .oc3-c > .oc3-c-isl { display: none; }
.oc3-c picture.oc3-c-i img { display: block; width: 100%; height: 100%; object-fit: contain; }
.oc3-c .oc3-dot { width: 6px; height: 6px; }
.oc3-c .oc3-meter { width: 64px; height: 6px; }
.oc3-c-lg { width: 22px; height: 22px; object-fit: contain; }
.oc3-c-lgn { font-family: var(--oc3-clash); font-size: 11px; letter-spacing: .03em; }
/* Player Info · League ('lg', option B 2026-09-24): the member's rank — an 18px badge + the name in bold figures, one of the
   first things a row shows (Ranked Status keeps its own look above). No league: the Unranked badge + the word, muted */
.oc3-c[data-k="lg"] { gap: 4px; }
.oc3-c[data-k="lg"] .oc3-c-lg { width: 18px; height: 18px; flex: none; }
.oc3-c[data-k="lg"] picture.oc3-c-lg img { display: block; width: 100%; height: 100%; object-fit: contain; }
.oc3-c[data-k="lg"] .oc3-c-lgn { font-family: var(--oc3-data); font-size: calc(14px * var(--oc3-ts, 1)); font-weight: 700; letter-spacing: normal; color: var(--oc3-ink); }
.oc3-c[data-k="lg"] .oc3-c-lgn.oc3-c-lgu { color: var(--oc3-ink-3); }
.oc3-r.is-out { display: none; }
/* rows without the place number and/or the Town Hall picture (Clan Page → Roster) */
@media (max-width: 767.98px) {
  .oc3-roster--non .oc3-r-a { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "th name p" "th s s"; }
  .oc3-roster--noth .oc3-r-a { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "n name p" "n s s"; }
  .oc3-roster--non.oc3-roster--noth .oc3-r-a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name p" "s s"; padding-left: 4px; }
}
/* level tiles: between phone and desktop the small /max shows, so the tiles need room for "26.8/27" */
@media (min-width: 480px) and (max-width: 767.98px) {
  .oc3-units { grid-template-columns: repeat(auto-fill, minmax(37px, 1fr)); }
  .oc3-str-p[data-sv="level"] .oc3-units { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
}
/* the sorted stat (Clan Page → Roster → Sort options). Phones: a tinted chip on its value — the chip's padding is taken back by
   a negative margin, so no row gains width and nothing wraps. ≥768: a band down its column, header included (further down).
   A stat the view has no column for gets a "sorted by" cell of its own (.oc3-x): first on the phone's second line, last column on desktop. */
/* column position: the renderer sets --o per stat cell, so a cell keeps its desktop column (and its place in the phone's
   second line) wherever it sits in the markup — the sorted stat's cell is moved to the top-right slot (R1, below) */
.oc3-g .oc3-c { order: var(--o, 0); }
.oc3-sub > .oc3-x { order: -1; }
.oc3-c small.oc3-gt { display: none; }
/* Donations split (Player Info, sorted by Donations / Received): troops · spells · sieges donated / received take the place of
   the row's other stats on phones (section data-dx); never on desktop (the table keeps its columns) */
.oc3-sub > .oc3-dx { display: none; }
/* no member has a split for the sorted total (Received) → one note under the controls (c3_dx_na, section data-dxn), phones only */
.oc3-dxnote { display: none; margin: 0 0 8px; }
@media (max-width: 767.98px) {
  .oc3-roster[data-dxn="don"] .oc3-dxnote, .oc3-roster[data-dxn="rcv"] .oc3-dxnote { display: block; }
  /* (per row: a member with no usable split for that mode — not counted by the hub, or it adds up to more than the total —
     keeps its stats) */
  .oc3-roster[data-dx="don"] .oc3-sub:has(> .oc3-dx[data-dx="don"]) > .oc3-c:not(.oc3-dx):not([data-k="rcv"]),
  .oc3-roster[data-dx="rcv"] .oc3-sub:has(> .oc3-dx[data-dx="rcv"]) > .oc3-c:not(.oc3-dx) { display: none; }
  /* Scoreboard: Received (a Player Info column since 2026-09-25) stays out of the line under the name while Given is in it —
     the line is today's. Sorted by Given (Given moves to the top-right) it takes Given's place, after the split when there is
     one (its column order puts it last); sorted by Received it is the top-right figure itself (promote()). Nothing twice. */
  /* (R1 2026-09-25: Given / Received "Sort only" = a hidden "sorted by" cell .oc3-x, not a column — it neither counts as Given
     being in the line nor is hidden as Received here) */
  .oc3-roster:not([data-sk="don"]):not([data-sk="rcv"]) .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="don"]:not(.oc3-x)) > .oc3-c[data-k="rcv"]:not(.oc3-x) { display: none; }
  .oc3-roster[data-dx="don"] .oc3-sub > .oc3-dx[data-dx="don"], .oc3-roster[data-dx="rcv"] .oc3-sub > .oc3-dx[data-dx="rcv"] { display: inline-flex; }
  /* R1 — the sorted stat is the row's top-right figure (section data-h = its key): the role word beside the name steps back
     while the role is that figure, and a progress bar pushed down to the second line keeps just its % */
  #oc3 .oc3-roster[data-h="role"] .oc3-r-role { display: none; }
  .oc3-sub .oc3-c .oc3-meter { display: none; }
  /* Player Info · League in the trophies' place (vis_c3_rc_lg_tp → .oc3-roster--lgtp): the Trophies stat steps out of the line
     under the name while the League sits in it. Sorted by League (R1) the league is the top-right figure and the trophies are
     back in its place; sorted by Trophies they are the top-right figure (the Legend trophy for Legend members) and the league
     stays in the line — nothing shows twice, nothing disappears. clan-v3.js promote() moves the cells, this rule follows. */
  .oc3-roster--lgtp .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])) > .oc3-c[data-k="trophies"] { display: none; }
  /* the league as the top-right figure: its name at the figure's size. It is the widest figure a row can have (≈115px), so
     while it is there the role beside the name keeps only its icon (the game's badge; the word stays for screen readers) —
     otherwise names like "Kara Bul…" / "felix …" were cut on a 402px iPhone */
  .oc3-g > .oc3-c[data-k="lg"] .oc3-c-lgn { font-size: calc(14.5px * var(--oc3-ts, 1)); }
  #oc3 .oc3-roster[data-h="lg"] .oc3-r-role:has(img) { font-size: 0; gap: 0; }
  /* a line holding the League and at most two more stats stays ONE line: as a last resort (a 5-digit donation beside a long
     league name on a narrow phone) the league name gives way (…), never the row. Four stats or more wrap as before; the
     donations split (data-dx) keeps its own rules */
  .oc3-roster--lgtp[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]))),
  .oc3-roster:not(.oc3-roster--lgtp)[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]))) { flex-wrap: nowrap; }
  .oc3-roster--lgtp[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]))) > .oc3-c[data-k="lg"],
  .oc3-roster:not(.oc3-roster--lgtp)[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]))) > .oc3-c[data-k="lg"] { flex: 0 1 auto; min-width: 0; }
  .oc3-sub > .oc3-c[data-k="lg"] .oc3-c-lgn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 768px) {
  /* a "sorted by" value that is only the phone's headline (the role word / # / TH picture already show it here) */
  .oc3-roster .oc3-c.oc3-x.is-ph { display: none; }
}
.oc3-roster[data-gk="w3n"] .oc3-c small.oc3-gt, .oc3-roster[data-gk="w3s"] .oc3-c small.oc3-gt { display: inline; }
/* sorted by role: the role word takes the chip at every width (it has no column) */
.oc3-roster[data-sk="role"] .oc3-r[data-role="member"] .oc3-r-role { display: inline-flex; }
.oc3-roster[data-sk="role"] .oc3-r-role { margin: -1px -5px -1px -3px; padding: 1px 5px 1px 3px; border-radius: 3px; background: var(--oc3-sorted); color: var(--oc3-ink); }
@media (max-width: 767.98px) {
  .oc3-roster .oc3-c.is-sk { margin: -1px -5px; padding: 1px 5px; border-radius: 3px; background: var(--oc3-sorted); color: var(--oc3-ink); }
  .oc3-roster .oc3-c.is-sk b { color: var(--oc3-ink); }
  .oc3-roster[data-sk="rank"] .oc3-r-n { color: var(--oc3-ink); }
  .oc3-roster[data-sk="th"] .oc3-r-th { border-radius: 3px; background: var(--oc3-sorted); }
}

/* a view's own source note (War Stats: where the 3-star rate comes from) */
.oc3-vnote { display: none; margin: 0 0 8px; }
.oc3-roster[data-view="war"] .oc3-vnote[data-vn="war"] { display: block; }

/* ── join ── */
.oc3-join { display: grid; gap: 12px; align-items: center; }
.oc3-join-m { min-width: 0; }
.oc3-join .oc3-h-t { margin-bottom: 4px; }
.oc3-join-t { font-size: calc(14px * var(--oc3-ts, 1)); color: var(--oc3-ink-2); }
.oc3-fam { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oc3-fam a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 4px 12px 4px 5px;
  background: var(--oc3-raised); border: 1px solid var(--oc3-line-2);
}
.oc3-fam a:hover { border-color: var(--oc3-ink-3); }
.oc3-fam img { width: 26px; height: 26px; object-fit: contain; }
.oc3-fam b { font-family: var(--oc3-clash); font-weight: 700; font-size: 12px; letter-spacing: .03em; color: var(--oc3-ink); }
.oc3-fam span { font-size: calc(12.5px * var(--oc3-ts, 1)); color: var(--oc3-green); font-weight: 600; }
.oc3-btn--go { min-height: 44px; padding: 10px 18px; justify-self: start; }
.oc3-src { font-size: calc(12px * var(--oc3-ts, 1)); color: var(--oc3-mute); max-width: 90ch; }
/* sources line on its own (join strip switched off) */
.oc3-src--solo { padding: 0 4px; }
/* identity without the badge: the name block takes the whole row */
.oc3-id--nobadge .oc3-id-top { grid-template-columns: minmax(0, 1fr); }

/* ── the theme header shrinks to a strip behind the navigation ── */
.oc3-page .header-wrapper .header { min-height: 0 !important; padding-bottom: 0 !important; }
.oc3-page .header-wrapper .inner-header-description { display: none !important; }
.oc3-page .page-content, .oc3-page .page-content .content { padding-top: 0 !important; }
.oc3-page .content-section-spacing { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ── narrow phones ── */
@media (max-width: 379.98px) {
  /* the role keeps only its icon (the game's badge) when it has one — the name gets the room; the word stays for screen readers */
  .oc3-r-role:has(img) { font-size: 0; gap: 0; }
  .oc3-roster[data-sk="role"] .oc3-r-role:has(img) { margin: -1px -4px; padding: 1px 4px; }
}
/* four stats or more on a row's second line (the optional XP level on, sorted by in-game rank / name / role): tighter spacing
   on narrow phones so it stays one line (360–389 px wrapped a stat onto a third line) */
@media (max-width: 389.98px) {
  .oc3-sub:has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden])) { column-gap: 8px; }
  .oc3-sub:has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden])) > .oc3-c { gap: 2px; }
  /* …and a line holding Player Info's League (badge + name, the widest stat): the same spacing (the name stays 14px down to
     370px — iPhone mini / SE at 375 fit every row with ≥12px to spare) */
  .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])) { column-gap: 8px; }
  .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])) > .oc3-c { gap: 2px; }
}
/* phones under 400px: the league as the top-right figure (sorted by League) one step smaller and tighter, so the member's name
   keeps its room (402px fits at the figure's size) */
@media (max-width: 399.98px) {
  .oc3-g > .oc3-c[data-k="lg"] { gap: 3px; }
  .oc3-g > .oc3-c[data-k="lg"] .oc3-c-lgn { font-size: calc(13px * var(--oc3-ts, 1)); }
}
/* narrow phones (<390px) sorted by League (vis_c3_rc_lg_sh → .oc3-roster--lgsh): the top-right league reads badge + tier
   ("33", "III") at the figure's size — the league's word ("Electro ", "Legend ") stays for screen readers. With the whole name
   the chip cut 1–4 more member names per clan than the Role sort at 360px, and still 1–2 at 380–389px (Androids at 384px) */
@media (max-width: 389.98px) {
  .oc3-roster--lgsh .oc3-g > .oc3-c[data-k="lg"] .oc3-c-lgw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .oc3-roster--lgsh .oc3-g > .oc3-c[data-k="lg"] .oc3-c-lgn:has(> .oc3-c-lgw) { font-size: calc(14.5px * var(--oc3-ts, 1)); }
}
/* a phone line holding the League and three more stats (Phones: the league takes the trophies' place switched off, or a 5th
   Player Info stat on): from 410px it fits ONE line with tighter spacing and the league name one step smaller (measured
   ≥4.9px to spare at 412px on every row, no name cut); narrower phones wrap it as before (the switch's hint says so) */
@media (min-width: 410px) and (max-width: 767.98px) {
  .oc3-roster:not(.oc3-roster--lgtp)[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]))),
  .oc3-roster--lgtp[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):has(> .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]))) { flex-wrap: nowrap; column-gap: 8px; }
  .oc3-roster:not(.oc3-roster--lgtp)[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]))) > .oc3-c,
  .oc3-roster--lgtp[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):has(> .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]))) > .oc3-c { gap: 2px; }
  .oc3-roster:not(.oc3-roster--lgtp)[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]))) > .oc3-c[data-k="lg"],
  .oc3-roster--lgtp[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):has(> .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]))) > .oc3-c[data-k="lg"] { flex: 0 1 auto; min-width: 0; }
  .oc3-roster:not(.oc3-roster--lgtp)[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]) ~ .oc3-c:not(.oc3-dx):not([hidden]))) > .oc3-c[data-k="lg"] .oc3-c-lgn,
  .oc3-roster--lgtp[data-dx=""] .oc3-g[data-v="info"] > .oc3-sub:has(> .oc3-c[data-k="lg"]:not([hidden])):has(> .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"])):not(:has(> .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]) ~ .oc3-c:not(.oc3-dx):not([hidden]):not([data-k="trophies"]))) > .oc3-c[data-k="lg"] .oc3-c-lgn { font-size: calc(13px * var(--oc3-ts, 1)); }

}
/* narrowest phones: the league name in the line one step smaller — three stats fit 360px with the longest names
   ("P.E.K.K.A 22", "Electro 33", "Legend III"; at 14px two were cut) */
@media (max-width: 369.98px) {
  .oc3-sub > .oc3-c[data-k="lg"] .oc3-c-lgn { font-size: calc(13px * var(--oc3-ts, 1)); }
}
@media (max-width: 380px) {
  .oc3-rec-n { gap: 6px 12px; }
  .oc3-rec-n b { font-size: 13px; }
}

@media (max-width: 479px) {
  /* facts: icons carry the meaning (the game's own artwork), labels stay for screen readers */
  .oc3-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; padding: 10px 0 0; border-bottom: 0; }
  .oc3-fact, .oc3-fact:nth-child(n) { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; grid-column: auto; }
  .oc3-fact-i { width: 20px; height: 20px; }
  .oc3-fact b { font-size: 13px; }
  .oc3-fact span, .oc3-today .oc3-tab span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .oc3-today .oc3-tabs { grid-template-columns: repeat(var(--tn, 6), minmax(0, 1fr)); }
  .oc3-today .oc3-tab { min-height: 44px; padding: 6px 2px; }
  .oc3-today .oc3-tab-i { width: 24px; height: 24px; }
  .oc3-str .oc3-tab, .oc3-roster .oc3-tab { flex-direction: column; gap: 3px; min-height: 52px; padding: 6px 4px; font-size: 10px; }
  .oc3-str .oc3-tab span, .oc3-roster .oc3-tab span { white-space: normal; text-align: center; line-height: 1.15; overflow: visible; }
  .oc3-str .oc3-tab-i { width: 20px; height: 20px; }
  /* TH/BH chips: one scrollable line instead of several rows (F7) */
  .oc3-th { gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .oc3-th::-webkit-scrollbar { display: none; }
  .oc3-th li { gap: 3px; padding: 1px 6px 1px 2px; flex: none; }
  .oc3-th img { width: 20px; height: 20px; }
  .oc3-th b { font-size: 10px; }
  .oc3-th span { font-size: calc(12px * var(--oc3-ts, 1)); }
  #oc3 .oc3-pulse span + span::before { content: none; }
  .oc3-pulse { gap: 2px 14px; }
  .oc3-sel { flex: 1 1 100%; }
  /* the name keeps the room the one-step-larger role label and figures took */
  .oc3-r-name { gap: 6px; }
  /* R8: phones — the description takes the card's full width under the badge and wraps (was one ellipsed line per ⚡ part) */
  .oc3-desc { grid-column: 1 / -1; margin-top: 11px; }
  /* the ambiguous facts keep a short label */
  .oc3-fact--k span { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: calc(12px * var(--oc3-ts, 1)); margin-left: 1px; }
  /* readout: figure + unit on one line, chart full width beneath */
  .oc3-read { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .oc3-read-fig { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .oc3-read-v { display: inline; }
  .oc3 .oc3-read-v.is-multi { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; gap: 4px 10px; font-size: 20px; }
  .oc3-res { gap: 5px; }
  .oc3-res-i { width: 18px; height: 18px; }
  .oc3-read-u { display: inline; margin-top: 0; }
  .oc3-read-s { flex-basis: 100%; }
  /* trio: three columns, never one figure orphaned on its own line (m1) */
  .oc3 .oc3-read-v.is-multi { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 16px; }
  .oc3-read-v.is-multi .oc3-res { flex-direction: column; align-items: flex-start; gap: 3px; }
  /* R7 c3_trio_phone = beside: icon left of its number, the three spread over the row */
  .oc3 .oc3-today[data-tri="beside"] .oc3-read-v.is-multi { justify-content: space-between; column-gap: 8px; }
  .oc3-today[data-tri="beside"] .oc3-read-v.is-multi .oc3-res { flex-direction: row; align-items: center; gap: 4px; }
  /* R7 fitFig(): three long numbers that would run past the box (e.g. 3 × "99,999" at 360px) step down — either layout */
  .oc3 .oc3-today .oc3-read-v.is-multi.is-fit { font-size: 17px; column-gap: 8px; }
  .oc3 .oc3-today .oc3-read-v.is-multi.is-fit2 { font-size: 15px; column-gap: 6px; }
  .oc3 .oc3-today .oc3-read-v.is-fit .oc3-res { gap: 3px; }
  .oc3 .oc3-today .oc3-read-v.is-fit .oc3-res-i { width: 16px; height: 16px; }
  /* the destruction tag takes its own line under the label (M1) */
  .oc3-m-l { flex-wrap: wrap; row-gap: 1px; }
  .oc3-m-l small { flex-basis: 100%; margin-left: 24px; }
  /* source pill: a thumb-sized target without growing the row (m4) */
  /* 28px tap target; the row grows to it (a negative margin made the pill overhang the row and crowd the bar below) */
  .oc3-srcsw { min-height: 28px; padding: 4px 10px; }
  /* favourites: label on its own line, troop · spell · siege side by side, icon over name (M2) */
  .oc3-fav { display: grid; grid-template-columns: repeat(var(--fn, 3), minmax(0, 1fr)); gap: 6px 8px; align-items: start; }
  .oc3-fav-l { grid-column: 1 / -1; }
  .oc3-fav-i { flex-direction: column; gap: 3px; min-width: 0; font-size: 11px; text-align: center; white-space: normal; line-height: 1.15; }
  .oc3-fav-i img { width: 28px; height: 28px; }
  /* a trio's scrub caption needs two lines; reserve them so nothing jumps under the finger (m2/INT-5) */
  /* tiles: the heading says "% avg"; drop the per-tile % sign and the tight tracking (m5) */
  .oc3-u-v { letter-spacing: 0; }
  .oc3-u-v small { display: none; }
  .oc3-spark svg { height: 40px; }
  .oc3-spark-x { height: 40px; }
  /* the live chip keeps only its dot; the word stays for screen readers */
  .oc3-today .oc3-state { padding: 6px; }
  .oc3-today .oc3-state-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .oc3-today .oc3-state .oc3-dot { width: 8px; height: 8px; }
  /* one secondary line per member: donations received stays on the profile */
  .oc3-sub .oc3-c small { display: none; }
  /* …and Donations keeps just its total when it is the top-right figure (sorted by it, R1) */
  .oc3-g > .oc3-c[data-k="don"] small { display: none; }
}

/* ── ≥560: the readout sits beside its chart ── */
@media (min-width: 560px) {
  .oc3-read { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 18px; }
  .oc3-search { flex: 2 1 260px; }
  .oc3-sel { flex: 1 1 160px; }
  .oc3-join { grid-template-columns: minmax(0, 1fr) auto; }
  .oc3-src { grid-column: 1 / -1; }
}

/* ── ≥768: tabs in one row, facts in one row, roster as a table ── */
@media (min-width: 768px) {
  .oc3 { gap: 14px; padding-block: 18px 56px; }
  .oc3-sec, .oc3-id, .oc3-join { padding: 18px 20px 20px; }
  .oc3-id-top { grid-template-columns: 88px minmax(0, 1fr); gap: 0 18px; }
  .oc3-badge { width: 88px; height: 88px; }
  .oc3-name { font-size: 34px; }
  .oc3-facts { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); margin: 18px -20px 0; }
  .oc3-fact { padding: 11px 12px 11px 20px; }
  .oc3-fact:not(:nth-child(3n + 1)) { border-left: 0; }
  .oc3-fact + .oc3-fact { border-left: 1px solid var(--oc3-line); }
  .oc3-fact:nth-child(n + 4) { border-top: 0; }
  .oc3-fact:last-child:nth-child(3n + 2) { grid-column: auto; }
  .oc3-h-t { font-size: 19px; }
  .oc3-h--sub .oc3-h-t { font-size: 15px; }
  .oc3-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oc3-tabs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oc3-tabs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .oc3-tabs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc3-read-v { font-size: 32px; }
  .oc3-str-p { columns: 280px 3; column-gap: 26px; column-fill: balance; }
  .oc3-grp { break-inside: avoid; padding-top: 12px; }
  .oc3-grp-t { font-size: 11px; }
  .oc3-units { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 5px 6px; }
  .oc3-u-v { font-size: calc(12px * var(--oc3-ts, 1)); line-height: 1; letter-spacing: -.01em; }
  #oc3 .oc3-u-e { font-size: 30px; }
  .oc3-search { flex: 2 1 300px; }

  .oc3-roster { --cols: 6; --c1: 1fr; }
  .oc3-roster[data-view="war"] { --cols: 4; }
  .oc3-roster[data-view="prog"] { --cols: 7; }
  .oc3-roster[data-view="rank"] { --cols: 4; }
  .oc3-r--h { display: block; border-bottom: 1px solid var(--oc3-line-2); }
  .oc3-r-a {
    grid-template-areas: none; grid-template-columns: 34px 30px minmax(150px, 1.5fr) repeat(var(--cols), minmax(0, 1fr));
    column-gap: 12px; padding: 7px 8px 7px 0;
  }
  /* --oc3-gd-<view> = the columns that are switched on (set by the renderer); fallbacks = every column on */
  .oc3-roster[data-view="info"] .oc3-r-a { grid-template-columns: var(--oc3-gd-info, 34px 30px minmax(150px, 1.4fr) minmax(0, 1.2fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.1fr) minmax(0, .9fr)); }
  .oc3-roster[data-view="war"] .oc3-r-a { grid-template-columns: var(--oc3-gd-war, 34px 30px minmax(150px, 1.5fr) repeat(4, minmax(0, 1fr))); }
  .oc3-roster[data-view="prog"] .oc3-r-a { grid-template-columns: var(--oc3-gd-prog, 34px 30px minmax(150px, 1.45fr) minmax(0, 1.5fr) repeat(6, minmax(0, .7fr))); }
  .oc3-roster[data-view="rank"] .oc3-r-a { grid-template-columns: var(--oc3-gd-rank, 34px 30px minmax(150px, 1.4fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .9fr)); }
  .oc3-r-n, .oc3-r-th, .oc3-r-name, .oc3-g > .oc3-c { grid-area: auto; }
  .oc3-r[data-role="member"] .oc3-r-role { display: inline-flex; }
  .oc3-sub { display: contents; }
  .oc3-sub .oc3-c, .oc3-g > .oc3-c { justify-content: flex-end; font-family: var(--oc3-data); font-size: calc(14px * var(--oc3-ts, 1)); font-weight: 600; color: var(--oc3-ink-2); }
  .oc3-g > .oc3-c { font-weight: 700; color: var(--oc3-ink); }
  .oc3-sub .oc3-c b { color: inherit; }
  .oc3-c .oc3-c-i, .oc3-c .oc3-c-iw { display: none; }
  .oc3-c[data-k="seen"] { font-size: calc(13px * var(--oc3-ts, 1)); }
  .oc3-c[data-k="league"], .oc3-c[data-k="lg"] { justify-content: flex-start; }
  /* Player Info · League: the name at the table's figure size and weight (bold + band while sorted by it); a narrow column
     cuts the name, never the next column */
  .oc3-c[data-k="lg"] { min-width: 0; overflow: hidden; }
  .oc3-c[data-k="lg"] .oc3-c-lgn { font-size: inherit; font-weight: inherit; color: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .oc3-c[data-k="lg"] .oc3-c-lgn.oc3-c-lgu { color: var(--oc3-ink-3); }
  .oc3-c .oc3-meter { width: auto; flex: 1; max-width: 120px; }
  .oc3-c[data-k="prog"] b { min-width: 38px; text-align: right; }
  .oc3-r--h .oc3-r-a { padding-block: 8px; }
  .oc3-hc {
    font-family: var(--oc3-clash) !important; font-weight: 700 !important; font-size: 10px !important; letter-spacing: .06em; text-transform: uppercase;
    color: var(--oc3-ink-3) !important; text-align: right; justify-content: flex-end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important;
  }
  .oc3-hc[data-sort="name"], .oc3-hc[data-sort="league"], .oc3-hc[data-sort="lg"] { text-align: left; }
  .oc3-hc:hover { color: var(--oc3-ink) !important; }
  .oc3-hc[aria-sort] { color: var(--oc3-ink) !important; }
  #oc3 .oc3-hc[aria-sort]::after { content: ''; display: inline-block; margin-left: 5px; vertical-align: 2px; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }
  #oc3 .oc3-hc[aria-sort="ascending"]::after { border-top: 0; border-bottom: 4px solid currentColor; }
  .oc3-r--h .oc3-r-th { width: 30px; }
  /* the sorted stat: a band down its column (the cell takes the row's height; its padding is taken back by negative margins) */
  .oc3-g .oc3-x { order: 99; }   /* also when it was moved to the top-right slot for phones (R1) */
  /* the sorted value reads as the headline: its band, bold figures, and a rule under its header */
  .oc3-roster .oc3-c.is-sk, .oc3-roster .oc3-c.is-sk b { font-weight: 700; }
  .oc3-roster .oc3-r--h .oc3-hc.oc3-c[aria-sort] { box-shadow: inset 0 -2px 0 var(--oc3-ink); }
  .oc3-roster .oc3-c.is-sk, .oc3-roster .oc3-hc.oc3-c[aria-sort], .oc3-roster[data-sk="rank"] .oc3-r-n {
    align-self: stretch; margin: -7px -6px; padding: 7px 6px; background: var(--oc3-sorted);
  }
  .oc3-roster .oc3-r--h .oc3-hc.oc3-c[aria-sort], .oc3-roster[data-sk="rank"] .oc3-r--h .oc3-r-n { margin-block: -8px; padding-block: 8px; }
  .oc3-roster .oc3-c.is-sk { color: var(--oc3-ink); }
  .oc3-roster[data-sk="rank"] .oc3-r-n { display: flex; align-items: center; justify-content: center; margin-left: 0; padding-left: 0; color: var(--oc3-ink); }
  .oc3-roster[data-sk="th"] .oc3-r-th { background: var(--oc3-sorted); box-shadow: 0 0 0 6px var(--oc3-sorted); }
  /* a "sorted by" column: the view's columns + one more (its width follows the stat, --oc3-xw) */
  .oc3-roster[data-x][data-view="info"] .oc3-r-a { grid-template-columns: var(--oc3-gd-info, 34px 30px minmax(150px, 1.4fr) minmax(0, 1.2fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.1fr) minmax(0, .9fr)) minmax(0, var(--oc3-xw, 1fr)); }
  .oc3-roster[data-x][data-view="war"] .oc3-r-a { grid-template-columns: var(--oc3-gd-war, 34px 30px minmax(150px, 1.5fr) repeat(4, minmax(0, 1fr))) minmax(0, var(--oc3-xw, 1fr)); }
  .oc3-roster[data-x][data-view="prog"] .oc3-r-a { grid-template-columns: var(--oc3-gd-prog, 34px 30px minmax(150px, 1.45fr) minmax(0, 1.5fr) repeat(6, minmax(0, .7fr))) minmax(0, var(--oc3-xw, 1fr)); }
  .oc3-roster[data-x][data-view="rank"] .oc3-r-a { grid-template-columns: var(--oc3-gd-rank, 34px 30px minmax(150px, 1.4fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .9fr)) minmax(0, var(--oc3-xw, 1fr)); }
}

/* Player Info · League on a crowded table (vis_c3_rc_lg_tb): the badge alone in a badge-wide column, so member names and the
   other columns keep the room they had before the League existed (measured 2026-09-24 against the live code at 768–1280px:
   names are cut no more often than without the League, Donations runs into War stars no more than it did — with the name
   shown, 4 stats cut 10–22 names per clan at 768px, 5–7 stats 1–15 even at full width). 768–1023px with three stats or
   more (.oc3-roster--lgtb); every table width with five or more (.oc3-roster--lgtb5: 60px from 1024px, 30px below). In that state Player Info's columns
   are 8px apart and its name column a little wider (--oc3-nfr, used by the renderer on that track). The league's name stays
   for screen readers and in the cell's hover text; a cell without a badge (Unranked with ∅ None) keeps its word */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* 3–4 stats: wide enough for the LEAGUE header with its sort arrow (60px); 5+: the badge's width */
  .oc3-roster--lgtb { --oc3-lgw: 60px; --oc3-nfr: 2.1fr; }   /* (1.7fr before Received became a column, 2026-09-25) */
  .oc3-roster--lgtb[data-view="info"] .oc3-r-a { column-gap: 8px; }
  .oc3-roster--lgtb .oc3-c[data-k="lg"] .oc3-c-lg + .oc3-c-lgn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 768px) {
  /* 5+ stats: the badge alone at every table width, in a column that still holds the LEAGUE header with its sort arrow (60px) */
  .oc3-roster--lgtb5 { --oc3-lgw: 60px; --oc3-nfr: 1.7fr; }   /* (1.5fr before Received became a column, 2026-09-25) */
  .oc3-roster--lgtb5[data-view="info"] .oc3-r-a { column-gap: 8px; }
  .oc3-roster--lgtb5 .oc3-c[data-k="lg"] .oc3-c-lg + .oc3-c-lgn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* 5+ stats on a tablet: the column is the badge's width (30px) — a 60px one cut more member names than before the League
     existed. The header keeps its whole word and ▼/▲: right-aligned on the column and running left over the Name column's
     empty header end (a flex-end line overflows on its start side), never clipped to "LE…" */
  .oc3-roster--lgtb5 { --oc3-lgw: 30px; }
  #oc3 .oc3-roster--lgtb5 .oc3-r--h .oc3-hc[data-sort="lg"] { display: flex !important; justify-content: flex-end; align-items: center; overflow: visible; text-overflow: clip; }
  #oc3 .oc3-roster--lgtb5 .oc3-r--h .oc3-hc[data-sort="lg"]::after { flex: none; vertical-align: 0; }
  /* sorted BY League: the header's band and rule reach left under the whole word (at 30px "LEAG" hung on the plain background).
     Only the header box grows — the column keeps its width, so sorting never reflows the rows or cuts a name */
  #oc3 .oc3-roster--lgtb5 .oc3-r--h .oc3-hc[data-sort="lg"][aria-sort] { margin-left: -38px; padding-left: 44px; }
}
/* R2 (2026-09-25) — column order (c3_rc_order_<view>): a League moved behind another column (its header is then inside .oc3-sub,
   its cells lack data-p, the first stat's mark) lines up right like the figures around it — left-aligned it ran into the figure
   before it ("RECEIVED LEAGUE"). On a crowded tablet table its header can't run left over the Name column's empty end any more
   (another header is there): its column takes the 60px of the 3–4-stat table and the header keeps inside it. */
@media (min-width: 768px) {
  #oc3 .oc3-roster .oc3-g[data-v="info"] .oc3-c[data-k="lg"]:not([data-p]),
  #oc3 .oc3-roster .oc3-g[data-v="rank"] .oc3-c[data-k="league"]:not([data-p]) { justify-content: flex-end; }
  #oc3 .oc3-roster .oc3-r--h .oc3-g > .oc3-sub > .oc3-hc:is([data-sort="lg"], [data-sort="league"]) { text-align: right; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .oc3-roster--lgtb5:has(.oc3-r--h .oc3-g[data-v="info"] > .oc3-sub > .oc3-hc[data-sort="lg"]) { --oc3-lgw: 60px; }
  #oc3 .oc3-roster--lgtb5 .oc3-r--h .oc3-g[data-v="info"] > .oc3-sub > .oc3-hc[data-sort="lg"] { display: block !important; overflow: hidden; text-overflow: ellipsis; }
  #oc3 .oc3-roster--lgtb5 .oc3-r--h .oc3-g[data-v="info"] > .oc3-sub > .oc3-hc[data-sort="lg"][aria-sort] { margin-left: -6px; padding-left: 6px; }
}

/* ── ≥1024: Today beside the war record ── */
@media (min-width: 1024px) {
  .oc3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .oc3 > .oc3-id, .oc3 > .oc3-str, .oc3 > .oc3-roster, .oc3 > .oc3-join, .oc3 > .oc3-src--solo { grid-column: 1 / -1; }
  /* only one of pulse / war record switched on: it takes the whole row */
  .oc3--solo > .oc3-today, .oc3--solo > .oc3-war { grid-column: 1 / -1; }
  .oc3--solo .oc3-war .oc3-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc3-war .oc3-meters { grid-template-columns: 1fr; }
  /* pulse-only board (no member list): the panel matches the war record's height and the chart takes the room */
  .oc3 > .oc3-today--pulse { align-self: stretch; display: flex; flex-direction: column; }
  .oc3-today--pulse .oc3-board { flex: 1; display: flex; flex-direction: column; }
  .oc3 > .oc3-war { align-self: stretch; display: flex; flex-direction: column; }
  .oc3-war > .oc3-meters { margin-top: auto; }
  .oc3-today--pulse .oc3-read { flex: 1; align-items: stretch; grid-template-rows: minmax(170px, 1fr) auto; }
  .oc3-today--pulse .oc3-fav.is-off { display: flex; visibility: hidden; }
  .oc3-today--pulse .oc3-read-fig { align-self: end; }
  .oc3-today--pulse .oc3-spark { display: flex; flex-direction: column; }
  .oc3-today--pulse .oc3-spark svg { flex: 1; height: auto; min-height: 46px; }
  .oc3-today--pulse .oc3-spark-x { height: auto; bottom: 30px; }
  .oc3-read-fig .oc3-read-u { max-width: 210px; }
}

/* ── Ranked Status: fallbacks instead of '—' (a missing stat is an empty .is-nil cell) ── */
.oc3-c-un { font-family: var(--oc3-clash); font-size: 11px; letter-spacing: .03em; font-weight: 700; color: var(--oc3-mute); }
.oc3-c-w { color: var(--oc3-ink-3); font-weight: 400; margin-right: 1px; }
.oc3-c-mo { font-size: calc(11.5px * var(--oc3-ts, 1)); color: var(--oc3-mute); font-weight: 400; margin-left: 3px; white-space: nowrap; }
.oc3-c-bg { object-fit: contain; }
.oc3-c-wb { display: none; }
.oc3-roster:not([data-sk="rb"]) .oc3-c.is-cur:not(.oc3-x) { visibility: hidden; }
@media (max-width: 767.98px) {
  .oc3-c.is-nil { display: none; }
  .oc3-roster:not([data-sk="rb"]) .oc3-c.is-cur:not(.oc3-x) { display: none; }
}
@media (max-width: 767.98px) {
  /* phones + tablets: "Best" names the slot (desktop has the column header) */
  .oc3-c-wb { display: inline; }
}
.oc3-c-ap { display: none; }
@media (max-width: 479px) {
  .oc3-c-yy { display: none; }
  .oc3-c-ap { display: inline; }
}
@media (min-width: 768px) {
  /* desktop hides stat icons (the header names the column) — the best league keeps its badge */
  .oc3-c .oc3-c-i.oc3-c-bg { display: inline-block; }
  .oc3-c-un { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .oc3-dot, .oc3-state[data-state="live"] .oc3-dot, .oc3-meter i, .oc3-li-bar i, #oc3 .oc3-li.is-lead .oc3-li-bar i::after,
  .oc3-read-v.is-bump, .oc3-li.is-bump .oc3-li-v { animation: none !important; }
}

/* ══ roster "Scoreboard" (2026-09-25 — Félix picked mockup C, plus A's maxed ✓ and B's Town Hall level badge) ══════════════════
   Clan Page → Roster → Look; the renderer's section classes (clan-v3.js reads them back and recomputes on every sort / filter):
     oc3-roster--hero  the sorted column takes the gold while the sort is a value (.is-hero; role / name / # / Town Hall stay grey)
     oc3-roster--bars  a thin bar under each sorted value (desktop) · oc3-roster--grow = they grow in (real sort / view change only)
     oc3-roster--med   medals on the place number of the top 3 (rows .oc3-r--m1/2/3 — ties share, see oc3_sort_medals)
     oc3-roster--pod   podium tint on those rows · oc3-roster--zeb zebra stripes (desktop) · oc3-roster--dir the Given/Received arrows
     oc3-roster--pmax  Upgrade Progress: a maxed category shows a green ✓ and a quieter figure
   Tokens (WP Colours → Roster): --oc3-hero-band / hero-ink / hero-rule / zebra / podium / medal-N / medal-N-ink / th-badge(-ink). */

/* Given / Received: the castle icon + a small arrow badge — up = given (out), down = received (in); drawn, so it themes */
.oc3-c-iw { position: relative; display: inline-flex; flex: none; }
.oc3-c-iw > .oc3-c-i { display: block; }
.oc3-dir { position: absolute; right: -3px; bottom: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--oc3-ink); box-shadow: 0 0 0 1.5px var(--oc3-card); pointer-events: none; }
.oc3-g > .oc3-c .oc3-dir { width: 9px; height: 9px; }
#oc3 .oc3-dir::after {
  content: ''; position: absolute; inset: 1px; background: var(--oc3-card);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 6.6V1.6M1.8 3.6 4 1.4l2.2 2.2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 6.6V1.6M1.8 3.6 4 1.4l2.2 2.2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#oc3 .oc3-dir--dn::after { transform: rotate(180deg); }

/* parts that only the desktop table shows (sorted by Given / Received): the split under Given, the ratio chip, the bars */
.oc3-dsp, .oc3-rt, .oc3-sb, .oc3-ok, .oc3-hc-iw { display: none; }

/* Graft B — the Town Hall level on its picture (vis_c3_r_th_lvl): a small ink badge on the art's lower right corner (its base,
   not the keep), half outside the picture so the building stays whole; hidden from screen readers (the picture says "TH 18") */
.oc3-thw { position: relative; display: block; }
.oc3-thw > .oc3-r-thi, .oc3-thw img { display: block; width: 28px; height: 28px; object-fit: contain; }
.oc3-thl {
  position: absolute; right: -5px; bottom: -3px; min-width: 15px; height: 14px; padding: 0 3px; border-radius: 3px;
  background: var(--oc3-th-badge); color: var(--oc3-th-badge-ink); font: 700 9.5px/14px var(--oc3-clash); letter-spacing: .02em; text-align: center;
  box-shadow: 0 0 0 1.5px var(--oc3-card); font-variant-numeric: tabular-nums; pointer-events: none;
}

/* medals on the place number: gold / silver / bronze discs (a highlight from the shimmer token over the medal's colour) */
.oc3-r--m1 { --oc3-m: var(--oc3-medal-1); --oc3-mi: var(--oc3-medal-1-ink); }
.oc3-r--m2 { --oc3-m: var(--oc3-medal-2); --oc3-mi: var(--oc3-medal-2-ink); }
.oc3-r--m3 { --oc3-m: var(--oc3-medal-3); --oc3-mi: var(--oc3-medal-3-ink); }
#oc3 .oc3-roster--med :is(.oc3-r--m1, .oc3-r--m2, .oc3-r--m3) .oc3-r-n {
  justify-self: center; display: grid; place-items: center; width: 20px; height: 20px; margin: 0; padding: 0; border-radius: 50%;
  font-size: 11px; line-height: 1; color: var(--oc3-mi); background: linear-gradient(160deg, var(--oc3-shimmer), transparent 70%) var(--oc3-m);
  box-shadow: inset 0 -1.5px 0 rgba(16, 24, 40, .16), 0 1px 2px rgba(16, 24, 40, .16);
}
/* the podium tint: the 1st row on the leader substrate, the 2nd and 3rd on half of it (every width) */
#oc3 .oc3-roster--pod .oc3-r--m1 > .oc3-r-a { background: var(--oc3-lead); }
#oc3 .oc3-roster--pod :is(.oc3-r--m2, .oc3-r--m3) > .oc3-r-a { background: var(--oc3-podium); }
@media (hover: hover) { #oc3 .oc3-roster .oc3-rows > li.oc3-r > div.oc3-r-a:hover { background: var(--oc3-raised); } }
/* a medal place with its own icon (ic_c3_med_1/2/3, Roster → Look): the icon in place of the disc — the number stays for screen
   readers (.oc3-r-nn). Empty = the numbered disc above */
#oc3 .oc3-roster--med :is(.oc3-r--m1, .oc3-r--m2, .oc3-r--m3) .oc3-r-n.has-mi { width: 24px; height: 24px; background: none; box-shadow: none; border-radius: 0; }
#oc3 img.oc3-r-mi { display: block; width: 24px; height: 24px; object-fit: contain; }
/* (the site's WebP rewrite wraps a PNG in a picture element that takes the class: that box takes the size, its image fills it) */
#oc3 picture.oc3-r-mi { display: block; width: 24px; height: 24px; }
#oc3 picture.oc3-r-mi img { display: block; width: 100%; height: 100%; object-fit: contain; }
#oc3 .oc3-r-n > .oc3-r-nn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oc3-r-n.has-mi { position: relative; }

/* Graft A — Upgrade Progress: a maxed category (100%) is a state; phones say it with the green figure alone (no room for ✓), and
   what is left to upgrade reads first (ink, 600) */
.oc3-roster--pmax .oc3-g[data-v="prog"] .oc3-c.is-maxed { color: var(--oc3-green); }
@media (max-width: 767.98px) {
  .oc3-roster--pmax .oc3-g[data-v="prog"] > .oc3-sub > .oc3-c:not(.is-maxed) { color: var(--oc3-ink); font-weight: 600; }
}
#oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk.is-maxed, #oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk.is-maxed b { color: var(--oc3-green); }

/* phones: the sorted figure (top right) in gold. 2026-09-26 (Félix: "on mobile the table has an orange tint, the desktop version
   is the good one"): no box behind it — the gold figure (and Overall's green bar) alone, as the desktop cell reads; not even the
   grey sorted chip. The gold box of before = vis_c3_hero_chip (.oc3-roster--chip, off by default). Podium tint + medals unchanged */
@media (max-width: 767.98px) {
  #oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk:not(.is-maxed) { color: var(--oc3-hero-ink); }
  #oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk:not(.is-maxed) b, #oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk .oc3-c-lgn { color: var(--oc3-hero-ink); }
  #oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk { background: none; }
  #oc3 .oc3-roster--chip.is-hero .oc3-rows .oc3-c.is-sk { background: var(--oc3-hero-band); }
}

@media (min-width: 768px) {
  #oc3 .oc3-roster--med :is(.oc3-r--m1, .oc3-r--m2, .oc3-r--m3) .oc3-r-n { width: 22px; height: 22px; font-size: 11.5px; }
  /* zebra (hover, the podium and the sorted band win over it): every other row listed */
  #oc3 .oc3-roster--zeb :where(.oc3-rows > li.oc3-r[data-tag]:nth-child(even of li.oc3-r[data-tag]:not(.is-out))) > .oc3-r-a { background: var(--oc3-zebra); }

  /* the hero column: the sorted value bigger, burnt gold on a gold band, a gold rule under its header */
  #oc3 .oc3-roster.is-hero .oc3-r--h .oc3-hc[aria-sort] { color: var(--oc3-hero-ink) !important; }
  #oc3 .oc3-roster.is-hero .oc3-r--h .oc3-hc.oc3-c[aria-sort] { background: var(--oc3-hero-band); box-shadow: inset 0 -2px 0 var(--oc3-hero-rule); }
  #oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk {
    background: var(--oc3-hero-band); color: var(--oc3-hero-ink); font-size: calc(16px * var(--oc3-ts, 1)); font-weight: 800;
    flex-wrap: wrap; align-content: center; row-gap: 3px;
  }
  #oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk b { color: inherit; font-weight: 800; }
  #oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk small { font-size: calc(11.5px * var(--oc3-ts, 1)); font-weight: 600; color: var(--oc3-mute); }
  #oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk:is([data-k="lg"], [data-k="league"], [data-k="rb"], [data-k="prog"]) { flex-wrap: nowrap; }
  /* its bars: percentages on 0–100, average stars on 0–3, counts against the top value listed; the gold medal's bar is gold
     with the shimmer, a maxed percentage green */
  #oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk > .oc3-sb {
    display: block; flex: 0 0 100%; order: 99; height: 4px; border-radius: 999px; background: var(--oc3-well); overflow: hidden;
  }
  /* (round 2, Félix: "it's not green, it's gold") every bar green like the Overall progress bar (--oc3-hero-bar-a/b), the 1st
     place's too — it keeps only the shimmer (vis_c3_hero_shim → .oc3-roster--shim) */
  #oc3 .oc3-sb > i { position: relative; display: block; height: 100%; width: calc(var(--w, 0) * 100%); border-radius: 999px 0 0 999px; background: linear-gradient(90deg, var(--oc3-hero-bar-a), var(--oc3-hero-bar-b)); overflow: hidden; transform-origin: left center; }
  #oc3 .oc3-sb.is-max > i { background: linear-gradient(90deg, var(--oc3-max-a), var(--oc3-max-b)); }
  #oc3 .oc3-roster--shim .oc3-r--m1 .oc3-sb > i::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(110deg, transparent 20%, var(--oc3-shimmer) 50%, transparent 80%); animation: oc3-shimmer 2.8s linear infinite;
  }
  #oc3 .oc3-roster--grow .oc3-sb > i { animation: oc3-grow .9s cubic-bezier(.25, .7, .3, 1) both; }
  #oc3 .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(3) .oc3-sb > i { animation-delay: 50ms; }
  #oc3 .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(4) .oc3-sb > i { animation-delay: 100ms; }
  #oc3 .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(5) .oc3-sb > i { animation-delay: 150ms; }
  #oc3 .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(6) .oc3-sb > i { animation-delay: 200ms; }
  #oc3 .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(7) .oc3-sb > i { animation-delay: 250ms; }
  #oc3 .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(8) .oc3-sb > i { animation-delay: 300ms; }
  #oc3 .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(9) .oc3-sb > i { animation-delay: 350ms; }
  #oc3 .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(10) .oc3-sb > i { animation-delay: 400ms; }
  #oc3 .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(n+11) .oc3-sb > i { animation-delay: 450ms; }
  #oc3 .oc3-roster--grow.oc3-roster--shim .oc3-r--m1 .oc3-sb > i::after { animation-delay: 1s; }


  /* Graft A: a maxed category's figure steps back (600, green); what is left to upgrade is the boldest (+ the ✓ from 1024px) */
  #oc3 .oc3-roster--pmax .oc3-g[data-v="prog"] .oc3-sub .oc3-c { color: var(--oc3-ink); font-weight: 700; }
  #oc3 .oc3-roster--pmax .oc3-g[data-v="prog"] .oc3-c.is-maxed { color: var(--oc3-green); font-weight: 600; }
  #oc3 .oc3-roster.is-hero .oc3-rows .oc3-c.is-sk.is-maxed { font-weight: 700; }
}
/* tablets (768–1023): Upgrade Progress' Overall keeps room for its header + bar, the columns sit closer */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .oc3-roster[data-view="prog"] { --oc3-pgw: 1fr; }
  #oc3 .oc3-roster[data-view="prog"] .oc3-r-a { column-gap: 8px; }
  #oc3 .oc3-roster[data-view="prog"] .oc3-r--h .oc3-hc { letter-spacing: .03em; }
}
@media (min-width: 1024px) {
  #oc3 .oc3-roster--pmax .oc3-g[data-v="prog"] .oc3-c.is-maxed { gap: 5px; }
  #oc3 .oc3-roster--pmax .oc3-g[data-v="prog"] .oc3-c.is-maxed .oc3-ok {
    display: inline-block; flex: none; width: 13px; height: 13px; background: var(--oc3-green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm3.6 5.2a.9.9 0 0 0-1.3 0L7 8.6 5.7 7.3a.9.9 0 1 0-1.3 1.3l2 2a.9.9 0 0 0 1.3 0l4-4a.9.9 0 0 0 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm3.6 5.2a.9.9 0 0 0-1.3 0L7 8.6 5.7 7.3a.9.9 0 1 0-1.3 1.3l2 2a.9.9 0 0 0 1.3 0l4-4a.9.9 0 0 0 0-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
/* ≥1024 (desktop): the column headers' icons, the split under Given and the ratio chip. Tablets (768–1023) keep today's text
   headers and plain Given / Received figures: with Received as a column there is no room for them without cutting member names
   (measured 2026-09-25 — 768px needs ≈698px for icon headers against 694 available) */
@media (min-width: 1024px) {
  /* column headers: the stat's icon beside its name, on the line of the ▼/▲ */
  #oc3 .oc3-hc-iw { position: relative; display: inline-block; width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; }
  #oc3 .oc3-hc-iw > .oc3-hc-i, #oc3 .oc3-hc-iw img { display: block; width: 100%; height: 100%; object-fit: contain; }
  #oc3 .oc3-hc-iw .oc3-dir { width: 8px; height: 8px; right: -3px; bottom: -2px; }
  /* sorted by Given: Given widens (the room comes from the League and the other stats — never the names; --oc3-gd-infod) and
     the season's troops · spells · sieges sit under each Given figure (in the bar's place) */
  .oc3-roster[data-view="info"][data-sk="don"] .oc3-r-a { grid-template-columns: var(--oc3-gd-infod, var(--oc3-gd-info)); }
  #oc3 .oc3-roster[data-view="info"][data-sk="don"] .oc3-g[data-v="info"] .oc3-c[data-k="don"] { flex-wrap: wrap; align-content: center; row-gap: 2px; }
  #oc3 .oc3-roster[data-view="info"][data-sk="don"] .oc3-g[data-v="info"] .oc3-c[data-k="don"] > .oc3-dsp {
    display: flex; flex: 0 0 100%; justify-content: flex-end; gap: 5px; font: 600 calc(11px * var(--oc3-ts, 1))/1.2 var(--oc3-sans);
    color: var(--oc3-ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0;
  }
  #oc3 .oc3-dsx { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
  #oc3 .oc3-dsx b { font-weight: 600; color: inherit; }
  #oc3 .oc3-dsx .oc3-dsx-i, #oc3 .oc3-dsx img { display: block; width: 12px; height: 12px; object-fit: contain; flex: none; }
  #oc3 .oc3-roster[data-sk="don"] .oc3-c[data-k="don"]:has(> .oc3-dsp) > .oc3-sb { display: none; }
  /* sorted by Given or Received: given ÷ received beside each Received figure — green for net givers, grey for takers */
  #oc3 .oc3-roster[data-view="info"]:is([data-sk="don"], [data-sk="rcv"]) .oc3-g[data-v="info"] .oc3-c[data-k="rcv"] > .oc3-rt { display: inline-block; }
  #oc3 .oc3-rt {
    margin-left: 6px; padding: 1px 5px; min-width: 34px; border-radius: 3px; background: var(--oc3-raised); color: var(--oc3-ink-3);
    font: 700 calc(11px * var(--oc3-ts, 1))/1.35 var(--oc3-sans); font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: center; white-space: nowrap;
  }
  html[data-theme="dark"] #oc3 .oc3-rt { background: var(--oc3-lifted); }
  #oc3 .oc3-rt.is-up { background: var(--oc3-green-bg); color: var(--oc3-green); }
  /* Upgrade Progress: seven icon headers — tighter tracking so "EQUIPMENT" stays whole */
  #oc3 .oc3-roster[data-view="prog"] .oc3-r--h .oc3-hc { letter-spacing: .04em; }
}
/* a crowded Player Info table (5+ stats, .oc3-roster--crowd — the renderer leaves out its split under Given and its ratio chip):
   text headers under 1280px, as on tablets (measured: the icons cut War Stars' header at 1024px); the League's badge-only column
   never carries a header icon (its cells are badges) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #oc3 .oc3-roster--crowd[data-view="info"] .oc3-r--h .oc3-hc-iw { display: none; }
}
@media (min-width: 768px) {
  #oc3 .oc3-roster--lgtb5 .oc3-r--h .oc3-hc[data-sort="lg"] .oc3-hc-iw { display: none; }
}
/* 1024–1279: the header icon hugs its label; Upgrade Progress a little tighter still */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #oc3 .oc3-hc-iw { width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; }
  #oc3 .oc3-roster[data-view="prog"] .oc3-r--h .oc3-hc { letter-spacing: .02em; }
  #oc3 .oc3-roster[data-view="prog"] .oc3-r-a { column-gap: 8px; }
}
@media (min-width: 768px) {
  /* a sorted header's band reaches 6px past its column on each side — its label may use the left one too (the band itself does
     not move), so a long label + its ▼/▲ stays whole ("EQUIPMENT ▼" at 1024px). (The tablet League header has its own rule.) */
  #oc3 .oc3-roster .oc3-r--h .oc3-hc.oc3-c[aria-sort]:not([data-sort="lg"]) { padding-left: 0; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* tablets: Player Info's five columns — "WAR STARS ▼" whole at 768px */
  #oc3 .oc3-roster[data-view="info"] .oc3-r--h .oc3-hc { letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  #oc3 .oc3-sb > i, #oc3 .oc3-sb > i::after { animation: none !important; }
}

/* ══ roster: stat tooltips (2026-09-25 round 2 — vis_c3_r_tip → .oc3-roster--tip; clan-v3.js rosTip) ═══════════════════════════
   The row is no longer one big link (only the member's name opens the profile): a tap / click on a stat — desktop cell, phone chip
   or the top-right figure — opens ONE small tooltip: the stat's name + its value (+ Given / Received: the other figure and the
   ratio; the 3-star rate: three-stars / attacks; the cell's own hint). Fixed to the screen above the stat (below it when there is
   no room), kept 8px inside the screen; closes on an outside tap, Escape, scroll, resize, a sort or a view change. */
.oc3-roster--tip .oc3-rows > li.oc3-r[data-tag] .oc3-c:not(.is-nil) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#oc3 .oc3-roster--tip .oc3-rows .oc3-c.is-tt { box-shadow: 0 0 0 1.5px var(--oc3-ink-3); border-radius: 3px; }
#oc3 .oc3-tt {
  position: fixed; left: 0; top: 0; z-index: 60; box-sizing: border-box; min-width: 90px; max-width: min(280px, calc(100vw - 16px));
  padding: 7px 10px 8px; border-radius: 6px; background: var(--oc3-ink); color: var(--oc3-panel);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .22); font-family: var(--oc3-sans); font-size: calc(12.5px * var(--oc3-ts, 1)); font-weight: 500;
  line-height: 1.35; letter-spacing: normal; text-align: left; text-transform: none; white-space: normal; overflow-wrap: anywhere; pointer-events: none;
  animation: oc3-tt-in .12s ease-out both;
}
#oc3 .oc3-tt-l { display: block; font-family: var(--oc3-clash); font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; opacity: .72; }
#oc3 .oc3-tt-v { display: block; font-family: var(--oc3-data); font-weight: 800; font-size: calc(15px * var(--oc3-ts, 1)); font-variant-numeric: tabular-nums; }
#oc3 .oc3-tt-x { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; opacity: .88; }
#oc3 .oc3-tt-ar { position: absolute; left: var(--ax, 50%); width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); }
#oc3 .oc3-tt[data-at="top"] .oc3-tt-ar { bottom: -4px; }
#oc3 .oc3-tt[data-at="bottom"] .oc3-tt-ar { top: -4px; }
@keyframes oc3-tt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #oc3 .oc3-tt { animation: none; } }

/* ══ 2026-09-26 production polish ══════════════════════════════════════════════════════════════════════════════════════════════
   Every rule here is scoped to the clan page (#oc3 carries data-slot there): the player preview loads this stylesheet too and
   stays exactly as it was (checked: computed styles of every element, 402 / 1280, light / dark). */
/* Weekly Statistics, five boards (--b5, set by the renderer): 3 + 2 from 480px up, the second row's two tabs share its width —
   the 3-column grid left a hole where the sixth tab would be. Phones under 480px keep the one icon row. */
@media (min-width: 480px) {
  .oc3[data-slot] .oc3-today .oc3-tabs.oc3-tabs--b5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .oc3[data-slot] .oc3-today .oc3-tabs--b5 > .oc3-tab { grid-column: span 2; }
  .oc3[data-slot] .oc3-today .oc3-tabs--b5 > .oc3-tab:nth-child(n + 4) { grid-column: span 3; }
}
/* identity facts, 768–1023px: one row of five or six facts cut every value ("150,5…", "Cham…") — three to a row there, as under
   768px; four or fewer keep the one row. 1024–1279px: a little less padding, so the labels ("Legend trophies") fit. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .oc3[data-slot] .oc3-facts:has(> .oc3-fact:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oc3[data-slot] .oc3-facts:has(> .oc3-fact:nth-child(5)) > .oc3-fact:nth-child(3n + 1) { border-left: 0; }
  .oc3[data-slot] .oc3-facts:has(> .oc3-fact:nth-child(5)) > .oc3-fact:nth-child(n + 4) { border-top: 1px solid var(--oc3-line); }
  .oc3[data-slot] .oc3-facts:has(> .oc3-fact:nth-child(5)) > .oc3-fact:last-child:nth-child(3n + 2) { grid-column: span 2; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .oc3[data-slot] .oc3-fact { padding: 11px 6px 11px 12px; }
}
/* the Sort / Town Hall menus: the same keyboard ring as the search box (on the field, not the bare select) */
.oc3[data-slot] .oc3-sel:has(> select:focus-visible) { outline: 3px solid var(--oc3-focus); outline-offset: 2px; }
.oc3[data-slot] .oc3-sel select:focus-visible { outline: none; }
/* phones: thumb-sized targets without moving anything — the tag chip and the source pill get an invisible hit area 9px above and
   below (their neighbours are not controls); the member's name answers across its whole cell, up to the row's top edge (not into
   the second line: those stats open their tooltips); the search / Sort / Town Hall fields are 44px tall */
@media (max-width: 767.98px) {
  #oc3[data-slot] .oc3-chip.oc3-tag, #oc3[data-slot] .oc3-srcsw { position: relative; z-index: 1; }   /* above the meter's grow layer below the pill */
  #oc3[data-slot] .oc3-chip.oc3-tag::after, #oc3[data-slot] .oc3-srcsw::after { content: ""; position: absolute; inset: -9px -2px; }
  #oc3[data-slot] .oc3-r-name { position: relative; }
  #oc3[data-slot] a.oc3-r-nm::after { content: ""; position: absolute; top: -9px; right: 0; bottom: -3px; left: -4px; }
  .oc3[data-slot] .oc3-search, .oc3[data-slot] .oc3-sel { min-height: 44px; }
  .oc3[data-slot] .oc3-search input, .oc3[data-slot] .oc3-sel select { height: 42px; }
}

/* ══ motion (2026-09-26 animate pass — Clan Page → Motion; clan-v3.js "motion") ═════════════════════════════════════════════════
   Only data moves (DESIGN.md, the Data-Moves Rule): cards, tabs, buttons and chips hold still. One curve — the settle, a fast
   start and a long landing — and one set of timings, all × --oc3-mk (Clan Page → Motion → Motion time; the renderer sets it on
   #oc3 only when it isn't 100 %):
     grow  .9s   a bar arriving (scaleX from its anchored end)       draw  .7s   the week's line, 7 days ago → now (first sight)
     move  .5s   a roster row to its new place (FLIP, clan-v3.js)    morph .45s  the line reshaping / a bar to its new length (JS)
     glow  1.4s  a changed figure, in place (never a count-up)       step  50ms  row stagger (capped at 450ms)
   #oc3's data-mo lists what is on: 'on' (the master), then grow / chart / rank / glow / live. The player page reuses this
   stylesheet but has no data-slot, so none of this block ever reaches it. Entrances wait for their first sight: a bar group
   that is off screen at load is reset + paused (.oc3-mo-hold, at its start: an empty track) and plays when it scrolls in. The
   loops (live dot, shimmer) rest while their section is off screen (.oc3-mo-off). prefers-reduced-motion stops everything. */
.oc3[data-slot] {
  --oc3-mo-ease: cubic-bezier(.25, .7, .3, 1);
  --oc3-mo-grow: calc(.9s * var(--oc3-mk, 1));
  --oc3-mo-draw: calc(.7s * var(--oc3-mk, 1));
  --oc3-mo-glow: calc(1.4s * var(--oc3-mk, 1));
  --oc3-mo-step: calc(50ms * var(--oc3-mk, 1));
}
/* the existing entrances on the shared timings (same values at 100 %) */
.oc3[data-slot] .oc3-meter i, .oc3[data-slot] .oc3-li-bar i { animation-duration: var(--oc3-mo-grow); }
.oc3[data-slot] .oc3-read-v.is-bump, .oc3[data-slot] .oc3-li.is-bump .oc3-li-v { animation-duration: var(--oc3-mo-glow); }
@media (min-width: 768px) {
  #oc3[data-slot] .oc3-roster--grow .oc3-sb > i { animation-duration: var(--oc3-mo-grow); }
  #oc3[data-slot] .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(3) .oc3-sb > i { animation-delay: var(--oc3-mo-step); }
  #oc3[data-slot] .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(4) .oc3-sb > i { animation-delay: calc(var(--oc3-mo-step) * 2); }
  #oc3[data-slot] .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(5) .oc3-sb > i { animation-delay: calc(var(--oc3-mo-step) * 3); }
  #oc3[data-slot] .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(6) .oc3-sb > i { animation-delay: calc(var(--oc3-mo-step) * 4); }
  #oc3[data-slot] .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(7) .oc3-sb > i { animation-delay: calc(var(--oc3-mo-step) * 5); }
  #oc3[data-slot] .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(8) .oc3-sb > i { animation-delay: calc(var(--oc3-mo-step) * 6); }
  #oc3[data-slot] .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(9) .oc3-sb > i { animation-delay: calc(var(--oc3-mo-step) * 7); }
  #oc3[data-slot] .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(10) .oc3-sb > i { animation-delay: calc(var(--oc3-mo-step) * 8); }
  #oc3[data-slot] .oc3-roster--grow .oc3-rows > .oc3-r:nth-child(n+11) .oc3-sb > i { animation-delay: calc(var(--oc3-mo-step) * 9); }
  #oc3[data-slot] .oc3-roster--grow.oc3-roster--shim .oc3-r--m1 .oc3-sb > i::after { animation-delay: calc(1s * var(--oc3-mk, 1)); }
}
/* the war record strip grows like every other bar (from its anchored end; the 2px gaps scale with it for .9s). No fill after
   the end: the strip rests with no transform at all, exactly as it was drawn before */
.oc3[data-slot][data-mo~="grow"] .oc3-rec { transform-origin: left center; animation: oc3-grow var(--oc3-mo-grow) var(--oc3-mo-ease) backwards; }
/* the focal moment: the week's line draws from 7 days ago to now (a clip opening left → right; the -4px keeps the stroke whole
   at the edges). No fill afterwards: the chart ends with no clip at all */
.oc3[data-slot][data-mo~="chart"] .oc3-today .oc3-spark > svg { animation: oc3-draw var(--oc3-mo-draw) var(--oc3-mo-ease) backwards; }
@keyframes oc3-draw { from { clip-path: inset(-4px 100% -4px -4px); } to { clip-path: inset(-4px -4px -4px -4px); } }
/* live changes: the pulse line's counts and the roster's Activity 7d cells glow like the weekly figure */
.oc3[data-slot] .oc3-pulse [data-p].is-bump, #oc3[data-slot] .oc3-rows .oc3-c.is-bump { animation: oc3-glow var(--oc3-mo-glow) ease-out; }
/* a roster row on its way to its new place (clan-v3.js slideRows): opaque, so rows crossing hide one another instead of mixing
   their text; a climber passes over the rows it overtakes. Position + z-index only — nothing moves in the layout */
#oc3[data-slot] .oc3-rows > .oc3-r.is-mv { position: relative; z-index: 1; background: var(--oc3-card); }
#oc3[data-slot] .oc3-rows > .oc3-r.is-mv.is-up { z-index: 2; }
/* a unit's name tip on a clan strength tile fades in like the roster's stat tooltip (feedback, 120ms; it leaves at once) */
.oc3[data-slot][data-mo~="on"] .oc3-u.is-tip .oc3-u-n { animation: oc3-tt-in .12s ease-out both; }

/* first sight: reset (restart from the first frame) → hold (paused there) → released by clan-v3.js when it scrolls in */
.oc3[data-slot] .oc3-mo-reset :is(.oc3-meter i, .oc3-sb > i), .oc3[data-slot] .oc3-mo-reset.oc3-rec, .oc3[data-slot] .oc3-mo-reset > svg { animation-name: none !important; }
.oc3[data-slot] .oc3-mo-hold :is(.oc3-meter i, .oc3-sb > i), .oc3[data-slot] .oc3-mo-hold.oc3-rec, .oc3[data-slot] .oc3-mo-hold > svg { animation-play-state: paused !important; }
/* loops rest off screen */
.oc3[data-slot] .oc3-mo-off .oc3-dot, .oc3[data-slot] .oc3-mo-off :is(.oc3-li-bar i, .oc3-sb > i)::after { animation-play-state: paused !important; }

/* switched off (Clan Page → Motion) — only when the renderer says so (data-mo present), so an older page keeps its motion */
.oc3[data-slot][data-mo]:not([data-mo~="grow"]) :is(.oc3-meter i, .oc3-li-bar i, .oc3-sb > i, .oc3-rec) { animation: none !important; }
.oc3[data-slot][data-mo]:not([data-mo~="chart"]) .oc3-today .oc3-spark > svg { animation: none !important; }
.oc3[data-slot][data-mo]:not([data-mo~="glow"]) :is(.oc3-read-v.is-bump, .oc3-li.is-bump .oc3-li-v, .oc3-pulse [data-p].is-bump, .oc3-rows .oc3-c.is-bump) { animation: none !important; }
.oc3[data-slot][data-mo]:not([data-mo~="live"]) .oc3-dot { animation: none !important; }
.oc3[data-slot][data-mo]:not([data-mo~="on"]) :is(.oc3-li-bar i, .oc3-sb > i)::after,
.oc3[data-slot][data-mo]:not([data-mo~="on"]) :is(.oc3-tt, .oc3-u.is-tip .oc3-u-n) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .oc3[data-slot] :is(.oc3-rec, .oc3-spark > svg, .oc3-pulse [data-p].is-bump, .oc3-rows .oc3-c.is-bump, .oc3-u.is-tip .oc3-u-n) { animation: none !important; }
}
/* (check pass 2026-09-26) paper shows every bar whole and the whole line: a group still waiting for its first sight was released
   by beforeprint and printed at its first frame — the war strip missing, the 3-star / destruction meters empty */
@media print {
  .oc3[data-slot] :is(.oc3-meter i, .oc3-li-bar i, .oc3-sb > i, .oc3-rec, .oc3-spark > svg) { animation: none !important; }
}

/* 2026-09-26: computers' own board tab order (vis_c3_board_desk): CSS order from 1024px; the 3 + 2 layout's second row follows
   the DESKTOP positions (.is-r2d), not the DOM ones (:nth-child) — phones keep the saved order untouched */
@media (min-width: 1024px) {
  .oc3[data-slot] .oc3-today .oc3-tabs--dord > .oc3-tab { order: var(--od, 0); }
  .oc3[data-slot] .oc3-today .oc3-tabs--dord.oc3-tabs--b5 > .oc3-tab:not(.is-r2d) { grid-column: span 2; }
  .oc3[data-slot] .oc3-today .oc3-tabs--dord.oc3-tabs--b5 > .oc3-tab.is-r2d { grid-column: span 3; }
}


/* ── Away for CWL (2026-10-06, includes/coc-cwl-away.php oc3_away_group): members of the pre-season roster who left for CWL keep
      their spot; listed under the ranked rows. Tokens --oc3-away / --oc3-away-bg (Clan Page → Colours → Away for CWL). ── */
.oc3 { --oc3-away: #8a5a00; --oc3-away-bg: #f0c04014; }
html[data-theme="dark"] .oc3 { --oc3-away: #e3b341; --oc3-away-bg: #f0c0401a; }
.oc3-away { margin-top: 16px; }
.oc3-away .oc3-away-t { border-bottom-color: var(--oc3-away); }
.oc3-away-note { margin: 0 0 6px; }
.oc3-away-l { list-style: none; margin: 0; padding: 0; }
.oc3-aw-r { border-bottom: 1px solid var(--oc3-line); background: var(--oc3-away-bg); }
.oc3-aw-r:last-child { border-bottom: 0; }
/* the row's content is a div, like the roster's div.oc3-r-a: the site sets Clash !important on every li, so the plain text
   takes the roster rows' sans from here (same override as #oc3 div.oc3-r-a) */
#oc3 div.oc3-aw-a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "th id" "th m";
  column-gap: 10px; row-gap: 2px; align-items: center; padding: 7px 6px;
  color: var(--oc3-ink); font-family: var(--oc3-sans); font-size: calc(14px * var(--oc3-ts, 1)); font-weight: 400; letter-spacing: normal; text-transform: none;
}
.oc3-aw-r[data-role="member"] .oc3-aw-role { display: none; }   /* like the roster: only Elder / Co-Leader / Leader say so */
.oc3-aw-th { grid-area: th; width: 28px; height: 28px; object-fit: contain; }
.oc3-aw-id { grid-area: id; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
#oc3 .oc3-aw-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--oc3-ink); text-decoration: none; }
#oc3 .oc3-aw-nm:hover { text-decoration: underline; }
.oc3-aw-nm b { font-family: var(--oc3-clash); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; }
.oc3-aw-role { flex: none; font-size: calc(12px * var(--oc3-ts, 1)); color: var(--oc3-ink-3); white-space: nowrap; }
.oc3-aw-m { grid-area: m; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; font-size: calc(12px * var(--oc3-ts, 1)); }
.oc3-aw-w { color: var(--oc3-away); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.oc3-aw-w.is-none, .oc3-aw-w.is-unk { color: var(--oc3-mute); font-weight: 400; }
.oc3-aw-cwl { font-style: normal; font-family: var(--oc3-clash); font-weight: 700; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 5px; margin-left: 2px; border: 1px solid var(--oc3-away); color: var(--oc3-away); white-space: nowrap; }
.oc3-aw-s { color: var(--oc3-mute); white-space: nowrap; }
.oc3-fact b small.oc3-aw-f { margin-left: 5px; color: var(--oc3-away); }
@media (min-width: 768px) {
  #oc3 div.oc3-aw-a { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "th id m"; padding: 7px 10px; }
  .oc3-aw-m { justify-content: flex-end; text-align: right; }
}
/* SEO 2026-10-13: the clan name is an <h2> now (the page hero keeps the only <h1>) — keep the weight it had as an h1 */
#oc3 .oc3-name { font-weight: 700 !important; }   /* beats the theme's #content h2 { 400 !important } */