/* "Fjord Night": a theme picked with the switch in the bottom-left corner (theme.js). Every rule below
   the switch's own is scoped to html[data-theme="fjord"], so the site's own look is untouched unless
   someone picks it. Tokens and names follow the shared Wardogs Nordic design pack (theme.css); fonts
   are served from this site (public/fonts), nothing loads from elsewhere. */

@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-display: swap; src: url("/static/fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 900; font-display: swap; src: url("/static/fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600 900; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400 900; font-display: swap; src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Runic"; font-weight: 400; font-display: swap; src: url("/static/fonts/noto-sans-runic-runic-400-normal.woff2") format("woff2"); unicode-range: U+16A0-16F8; }

/* Elder Futhark numbering for rule and standard lists */
@counter-style futhark {
  system: fixed;
  symbols: "ᚠ" "ᚢ" "ᚦ" "ᚨ" "ᚱ" "ᚲ" "ᚷ" "ᚹ" "ᚺ" "ᚾ" "ᛁ" "ᛃ";
  suffix: "  ";
  fallback: decimal;
}

html[data-theme="fjord"] {
  /* surfaces */
  --wdn-bg: #0D1316;
  --wdn-surface: #141C20;
  --wdn-surface-2: #1B252A;
  --wdn-line: #26333A;
  --wdn-line-soft: #1E2A30;
  --wdn-line-strong: #3A4A52;
  /* text */
  --wdn-text: #ECE8DF;
  --wdn-text-2: #C4CCCF;
  --wdn-muted: #9AA8AE;
  --wdn-faint: #7F8E94;
  /* accents */
  --wdn-accent: #6FD3A8;
  --wdn-ember: #E08A4B;
  --wdn-frost: #8EC5E8;
  --wdn-bone: #D9C9A3;
  /* ranks / podium */
  --wdn-gold: #E3C16F;
  --wdn-silver: #C8D2D6;
  --wdn-bronze: #D79A62;
  /* shape */
  --wdn-radius: 6px;
  --wdn-radius-sm: 4px;
  /* type */
  --wdn-font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --wdn-font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --wdn-font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --wdn-font-rune: "Noto Sans Runic", serif;
  /* hero banner: mountain silhouette with thin aurora lines */
  --wdn-hero-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='none'%3E%3Cpath d='M0 95 C240 40 460 120 700 70 S1050 30 1200 75' fill='none' stroke='%236FD3A8' stroke-opacity='.15' stroke-width='1'/%3E%3Cpath d='M0 120 C200 60 380 150 600 90 S1000 40 1200 100' fill='none' stroke='%236FD3A8' stroke-opacity='.32' stroke-width='2'/%3E%3Cpath d='M0 150 C260 100 420 170 640 120 S1020 80 1200 140' fill='none' stroke='%238EC5E8' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cpath d='M0 320 L0 230 L90 180 L150 215 L260 130 L340 190 L420 160 L520 225 L610 150 L700 200 L790 120 L880 185 L960 165 L1060 215 L1130 175 L1200 205 L1200 320 Z' fill='%23141C20'/%3E%3C/svg%3E");

  /* The site's own variables, pointed at the Fjord tokens. Everything already
     built on them changes with these lines. */
  --yellow: var(--wdn-accent);
  --yellow-hi: #8FE0BD;
  --yellow-rgb: 111, 211, 168; /* --wdn-accent as numbers: every see-through yellow becomes accent */
  --tier-lo: var(--wdn-frost);
  --tier-mid: var(--wdn-bone);
  --tier-hi: var(--wdn-accent);
  --tier-top: var(--wdn-gold);
  --accent: var(--wdn-accent);
  --ink: var(--wdn-bg);
  --bg: var(--wdn-bg);
  --bg-2: var(--wdn-surface);
  --bg-3: var(--wdn-surface);
  --panel: var(--wdn-surface);
  --panel2: var(--wdn-surface-2);
  --line: var(--wdn-line);
  --line-soft: var(--wdn-line-soft);
  --text: var(--wdn-text);
  --muted: var(--wdn-muted);
  --good: var(--wdn-accent);
  --bad: var(--wdn-ember);
  --red: var(--wdn-ember);
  --blue: var(--wdn-frost);
  --green: var(--wdn-accent);
  --gold: var(--wdn-gold);
  --silver: var(--wdn-silver);
  --bronze: var(--wdn-bronze);
  --brand: var(--wdn-font-display);
  --head: var(--wdn-font-display);
  --body: var(--wdn-font-body);
  --mono: var(--wdn-font-mono);
  --radius: var(--wdn-radius);
}

/* ---------- type ---------- */
html[data-theme="fjord"] body { color: var(--wdn-text-2); font-family: var(--wdn-font-body); }
html[data-theme="fjord"] code { font-family: var(--wdn-font-mono); }
html[data-theme="fjord"] h1,
html[data-theme="fjord"] h2,
html[data-theme="fjord"] h3 { font-weight: 800; letter-spacing: 0.02em; line-height: 0.95; color: var(--wdn-text); }
html[data-theme="fjord"] h1 { font-size: 44px; }
html[data-theme="fjord"] h2 { font-size: 26px; }
html[data-theme="fjord"] .pcard-name,
html[data-theme="fjord"] .hl-v { font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.9; text-shadow: none; }
html[data-theme="fjord"] .tile .v,
html[data-theme="fjord"] .board h3 .fscore { font-family: var(--wdn-font-mono); font-weight: 500; }

/* eyebrow labels: Plex Mono, wide tracking, led by a rune */
html[data-theme="fjord"] h3.sub,
html[data-theme="fjord"] .pcard-kicker,
html[data-theme="fjord"] .tile .k { font: 500 12px/1.4 var(--wdn-font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wdn-muted); }
html[data-theme="fjord"] h3.sub::before { content: "ᚠ"; font-family: var(--wdn-font-rune); color: var(--wdn-accent); margin-right: 0.6em; letter-spacing: 0; }
html[data-theme="fjord"] h2.section::before { content: "ᛊ"; font-family: var(--wdn-font-rune); color: var(--wdn-accent); margin-right: 0.4em; font-weight: 400; }

/* rule lists counted in runes */
html[data-theme="fjord"] main ol { list-style: futhark; }
html[data-theme="fjord"] main ol li::marker { color: var(--wdn-accent); font-family: var(--wdn-font-rune); }

/* ---------- layout and nav ---------- */
/* The stripe along the top is the three teams in Wardogs: blue, red and green. It keeps the
   team colours in every theme. */
html[data-theme="fjord"] .tri i:nth-child(1) { background: #2a6de0; }
html[data-theme="fjord"] .tri i:nth-child(2) { background: #d4222f; }
html[data-theme="fjord"] .tri i:nth-child(3) { background: #00833f; }
html[data-theme="fjord"] .top { background: rgba(13, 19, 22, 0.94); border-bottom-color: var(--wdn-line-soft); }
html[data-theme="fjord"] .brand { font-family: var(--wdn-font-display); font-weight: 900; font-size: 20px; letter-spacing: 0.04em; }
html[data-theme="fjord"] nav { font-family: var(--wdn-font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; }
html[data-theme="fjord"] nav a.on,
html[data-theme="fjord"] nav a:hover { color: var(--wdn-accent); }
html[data-theme="fjord"] .navmenu { border-top-color: var(--wdn-accent); }
html[data-theme="fjord"] .tabbar { background: rgba(13, 19, 22, 0.97); }
html[data-theme="fjord"] footer { color: var(--wdn-faint); font-family: var(--wdn-font-mono); }

/* ---------- cards: flat, no shadows ---------- */
html[data-theme="fjord"] .panel,
html[data-theme="fjord"] .tile,
html[data-theme="fjord"] .board,
html[data-theme="fjord"] .morerow,
html[data-theme="fjord"] .medal { background: var(--wdn-surface); border: 1px solid var(--wdn-line); border-radius: var(--wdn-radius); box-shadow: none; }
html[data-theme="fjord"] .board { border-top: 3px solid var(--c); }
html[data-theme="fjord"] .board h3 { background: none; border-bottom: 1px solid var(--wdn-line-soft); }

/* hero cards: mountains and aurora instead of the colour wash */
html[data-theme="fjord"] .pcard { background: var(--wdn-hero-art) center bottom / 100% 78% no-repeat, var(--wdn-bg); border-color: var(--wdn-line); border-radius: var(--wdn-radius); box-shadow: none; }
html[data-theme="fjord"] .pcard::before { opacity: 0.16; }
html[data-theme="fjord"] .homehero,
html[data-theme="fjord"] .cdhero { position: relative; overflow: hidden; isolation: isolate; background: var(--wdn-hero-art) center bottom / 100% 70% no-repeat, var(--wdn-bg); border-color: var(--wdn-line); }
html[data-theme="fjord"] .homehero::after { content: "ᚾ"; position: absolute; right: 18px; top: -40px; z-index: -1; font: 240px/1 var(--wdn-font-rune); color: var(--wdn-surface-2); pointer-events: none; }
html[data-theme="fjord"] .homehero-k { font: 500 12px var(--wdn-font-mono); letter-spacing: 0.18em; color: var(--wdn-accent); }
html[data-theme="fjord"] .homehero-s { color: var(--wdn-text-2); }
html[data-theme="fjord"] .pcard-strip { background: rgba(13, 19, 22, 0.8); backdrop-filter: none; }
html[data-theme="fjord"] .pcard-rank { font-family: var(--wdn-font-display); font-weight: 900; border-radius: var(--wdn-radius-sm); box-shadow: none; }
html[data-theme="fjord"] .pcard-sig { background: var(--wdn-surface); border-color: var(--wdn-line); backdrop-filter: none; }
/* big faded rune tucked into the page hero's corner */
html[data-theme="fjord"] .pagehero .pcard-top,
html[data-theme="fjord"] .warhero .pcard-top { isolation: isolate; overflow: hidden; }
html[data-theme="fjord"] .pagehero .pcard-top::after,
html[data-theme="fjord"] .warhero .pcard-top::after { content: "ᛟ"; position: absolute; right: 24px; top: -28px; z-index: -1; font: 220px/1 var(--wdn-font-rune); color: var(--wdn-surface-2); pointer-events: none; }

/* ---------- buttons ---------- */
html[data-theme="fjord"] button { background: var(--wdn-accent); color: var(--wdn-bg); min-height: 44px; border-radius: var(--wdn-radius-sm); font: 600 14px var(--wdn-font-body); letter-spacing: 0.04em; text-transform: none; }
html[data-theme="fjord"] button:hover { background: var(--yellow-hi); }
html[data-theme="fjord"] .btn-outline,
html[data-theme="fjord"] button.ghost { background: transparent; color: var(--wdn-text); border: 1px solid var(--wdn-line-strong); }
html[data-theme="fjord"] .btn-danger,
html[data-theme="fjord"] button.danger { background: transparent; color: var(--wdn-ember); border: 1px solid #5A3A26; }
html[data-theme="fjord"] .me-out { min-height: 0; background: transparent; color: var(--wdn-muted); }
html[data-theme="fjord"] select,
html[data-theme="fjord"] input[type='search'],
html[data-theme="fjord"] input[type='text'] { background: var(--wdn-bg); border-color: var(--wdn-line-strong); border-radius: var(--wdn-radius-sm); font-family: var(--wdn-font-body); min-height: 40px; }

/* ---------- tabs: selected is filled snow ---------- */
html[data-theme="fjord"] .tab { min-height: 44px; display: inline-flex; align-items: center; background: transparent; border-color: var(--wdn-line-strong); border-radius: var(--wdn-radius-sm); font: 500 12px var(--wdn-font-mono); letter-spacing: 0.14em; }
html[data-theme="fjord"] .tab:hover { border-color: var(--wdn-muted); color: var(--wdn-text); }
html[data-theme="fjord"] .tab.on { background: var(--wdn-text); border-color: var(--wdn-text); color: var(--wdn-bg); }

/* ---------- pills and tags ---------- */
html[data-theme="fjord"] .badge,
html[data-theme="fjord"] .tag { font: 500 11px/1.5 var(--wdn-font-mono); letter-spacing: 0.1em; border-radius: 999px; }
html[data-theme="fjord"] .badge.live,
html[data-theme="fjord"] .badge.best,
html[data-theme="fjord"] .badge.role { background: rgba(111, 211, 168, 0.12); border-color: transparent; color: var(--wdn-accent); }
html[data-theme="fjord"] .badge.live::before { content: "● "; }
html[data-theme="fjord"] .badge.off,
html[data-theme="fjord"] .badge.nem,
html[data-theme="fjord"] .badge.worst { background: rgba(224, 138, 75, 0.12); border-color: transparent; color: var(--wdn-ember); }
html[data-theme="fjord"] .badge.inf { color: var(--wdn-frost); border-color: rgba(142, 197, 232, 0.4); }
html[data-theme="fjord"] .badge.vip,
html[data-theme="fjord"] .badge.patchbadge { color: var(--wdn-gold); border-color: rgba(227, 193, 111, 0.45); }
html[data-theme="fjord"] .srv-item { background: var(--wdn-surface); border-radius: 999px; font-family: var(--wdn-font-mono); font-weight: 500; }
html[data-theme="fjord"] .dot { box-shadow: none; }

/* ---------- tables ---------- */
html[data-theme="fjord"] th { font: 500 12px var(--wdn-font-mono); letter-spacing: 0.12em; color: var(--wdn-muted); background: transparent; border-bottom: 1px solid var(--wdn-line); }
html[data-theme="fjord"] td { border-bottom: 1px solid var(--wdn-line-soft); }
html[data-theme="fjord"] th.n,
html[data-theme="fjord"] td.n { font-family: var(--wdn-font-mono); color: var(--wdn-text-2); }
html[data-theme="fjord"] tbody tr:hover td { background: var(--wdn-surface-2); }
html[data-theme="fjord"] td.rank { color: var(--wdn-faint); }
html[data-theme="fjord"] td.hl { color: var(--wdn-accent); }

/* ---------- charts: the design's palette ----------
   Aurora for good and above average, frost for the middle, ember for low, gold for the very best;
   flat fills, the strong line colour for averages and references. */
html[data-theme="fjord"] {
  --series-0: var(--wdn-accent);
  --series-1: var(--wdn-frost);
  --series-2: var(--wdn-ember);
  --series-3: var(--wdn-bone);
  --series-4: var(--wdn-gold);
  --series-5: #5FA8A0;
  --series-6: var(--wdn-bronze);
  --series-7: var(--wdn-faint);
  --heat: var(--wdn-accent);
  --up: var(--wdn-accent);
  --down: var(--wdn-ember);
}
html[data-theme="fjord"] .chart .prime { fill: rgba(111, 211, 168, 0.06); }
html[data-theme="fjord"] td.hm-c.hm-prime { box-shadow: inset 0 0 0 1px rgba(111, 211, 168, 0.3); }
html[data-theme="fjord"] .rd-shape { fill: rgba(111, 211, 168, 0.22); stroke: var(--wdn-accent); }
html[data-theme="fjord"] .rd-avg { stroke: var(--wdn-line-strong); }
html[data-theme="fjord"] .rd-dot.t-elite, html[data-theme="fjord"] .rc-dot.r-top { filter: none; }
html[data-theme="fjord"] .rd-dot.t-elite { fill: var(--wdn-gold); }
html[data-theme="fjord"] .rd-dot.t-good { fill: var(--wdn-accent); }
html[data-theme="fjord"] .rd-dot.t-mid { fill: var(--wdn-frost); }
html[data-theme="fjord"] .rd-dot.t-low { fill: var(--wdn-ember); }
html[data-theme="fjord"] .rd-val.t-elite, html[data-theme="fjord"] .pct-row.t-elite .pct-v, html[data-theme="fjord"] .pct-row.t-elite .pct-note .good { fill: var(--wdn-gold); color: var(--wdn-gold); }
html[data-theme="fjord"] .rd-val.t-good, html[data-theme="fjord"] .pct-row.t-good .pct-v, html[data-theme="fjord"] .pct-row.t-good .pct-note .good { fill: var(--wdn-accent); color: var(--wdn-accent); }
html[data-theme="fjord"] .rd-val.t-mid, html[data-theme="fjord"] .pct-row.t-mid .pct-v, html[data-theme="fjord"] .pct-row.t-mid .pct-note .good { fill: var(--wdn-frost); color: var(--wdn-frost); }
html[data-theme="fjord"] .rd-val.t-low, html[data-theme="fjord"] .pct-row.t-low .pct-note .bad { fill: var(--wdn-ember); color: var(--wdn-ember); }
html[data-theme="fjord"] .pct-bar { background: var(--wdn-bg); }
html[data-theme="fjord"] .pct-bar i { background: var(--wdn-line-strong); box-shadow: none; }
html[data-theme="fjord"] .pct-row.t-elite .pct-bar i { background: var(--wdn-gold); box-shadow: none; }
html[data-theme="fjord"] .pct-row.t-good .pct-bar i { background: var(--wdn-accent); }
html[data-theme="fjord"] .pct-row.t-mid .pct-bar i { background: var(--wdn-frost); }
html[data-theme="fjord"] .pct-row.t-low .pct-bar i { background: var(--wdn-ember); }
html[data-theme="fjord"] .pct-bar b { background: var(--wdn-text); opacity: 0.5; }
/* rating chart and form pips: four steps from aurora down to ember */
html[data-theme="fjord"] .ratingchart .rc-ref { stroke: var(--wdn-line-strong); }
html[data-theme="fjord"] .ratingchart .rc-best { fill: var(--wdn-gold); }
html[data-theme="fjord"] .ratingchart .rc-dot { fill: var(--wdn-surface); stroke: var(--wdn-muted); }
html[data-theme="fjord"] .ratingchart .rc-dot.r-top { stroke: var(--wdn-accent); }
html[data-theme="fjord"] .ratingchart .rc-dot.r-up { stroke: var(--wdn-frost); }
html[data-theme="fjord"] .ratingchart .rc-dot.r-mid { stroke: var(--wdn-bone); }
html[data-theme="fjord"] .ratingchart .rc-dot.r-low { stroke: var(--wdn-ember); }
html[data-theme="fjord"] .ratingchart .rc-dot.last.r-top, html[data-theme="fjord"] .ratingchart .rc-dot:hover.r-top, html[data-theme="fjord"] .ratingchart .rc-now.r-top { fill: var(--wdn-accent); }
html[data-theme="fjord"] .ratingchart .rc-dot.last.r-up, html[data-theme="fjord"] .ratingchart .rc-dot:hover.r-up, html[data-theme="fjord"] .ratingchart .rc-now.r-up { fill: var(--wdn-frost); }
html[data-theme="fjord"] .ratingchart .rc-dot.last.r-mid, html[data-theme="fjord"] .ratingchart .rc-dot:hover.r-mid, html[data-theme="fjord"] .ratingchart .rc-now.r-mid { fill: var(--wdn-bone); }
html[data-theme="fjord"] .ratingchart .rc-dot.last.r-low, html[data-theme="fjord"] .ratingchart .rc-dot:hover.r-low, html[data-theme="fjord"] .ratingchart .rc-now.r-low { fill: var(--wdn-ember); }
html[data-theme="fjord"] .form .fb { border-radius: var(--wdn-radius-sm); font-family: var(--wdn-font-mono); font-weight: 500; }
html[data-theme="fjord"] .form .fb.r-top { background: var(--wdn-accent); }
html[data-theme="fjord"] .form .fb.r-up { background: var(--wdn-frost); }
html[data-theme="fjord"] .form .fb.r-mid { background: var(--wdn-bone); }
html[data-theme="fjord"] .form .fb.r-low { background: var(--wdn-ember); }
html[data-theme="fjord"] .arealine .al-hi { fill: var(--wdn-accent); }
html[data-theme="fjord"] .arealine .al-avg, html[data-theme="fjord"] .arealine .al-ref { stroke: var(--wdn-line-strong); }
html[data-theme="fjord"] .wb-bar i { background: var(--wdn-accent); }
html[data-theme="fjord"] .xpbar { background: var(--wdn-bg); }
html[data-theme="fjord"] .xpbar i { background: var(--wdn-accent); box-shadow: none; }
html[data-theme="fjord"] .tb-n b { color: var(--wdn-text); }
html[data-theme="fjord"] .rc-lead { background: rgba(111, 211, 168, 0.08); }

/* ---------- bars ---------- */
html[data-theme="fjord"] .xpbar,
html[data-theme="fjord"] .pct-bar,
html[data-theme="fjord"] .season-progress { background: var(--wdn-bg); border-radius: 999px; }

/* ---------- theme switcher (shown in both themes, kept out of the way) ---------- */
.theme-pick {
  position: fixed; left: 12px; bottom: 12px; z-index: 70;
  min-height: 44px; min-width: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(13, 15, 17, 0.85); color: #8b939d;
  border: 1px solid #262b32; border-radius: 999px;
  font: 600 11px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.45; transition: opacity 0.2s;
  cursor: pointer;
}
.theme-pick:hover, .theme-pick:focus-visible { opacity: 1; background: rgba(13, 15, 17, 0.95); color: #dde1e6; }
.theme-pick i { width: 10px; height: 10px; border-radius: 50%; background: #e3a52b; flex: none; }
html[data-theme="fjord"] .theme-pick { min-height: 44px; border-radius: 999px; background: rgba(13, 19, 22, 0.85); color: var(--wdn-muted); border-color: var(--wdn-line); font: 500 11px/1 var(--wdn-font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
html[data-theme="fjord"] .theme-pick i { background: var(--wdn-accent); }
html[data-theme="fjord"] .theme-pick:hover,
html[data-theme="fjord"] .theme-pick:focus-visible { background: rgba(13, 19, 22, 0.95); color: var(--wdn-text); }
@media (max-width: 760px) {
  /* sits above the phone tab bar */
  .theme-pick { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Classic colours written as plain values rather than variables, pointed at the Fjord tokens */
html[data-theme="fjord"] .r-mid { color: var(--wdn-bone) !important; }
/* ...except inside the coloured form guide boxes, where the number sits on the colour and stays dark */
html[data-theme="fjord"] .form .fb { color: var(--wdn-bg) !important; }
html[data-theme="fjord"] .fr-n.r-mid { --fc: var(--wdn-bone); }
html[data-theme="fjord"] .tile.t-orange { --tt: var(--wdn-ember); }
html[data-theme="fjord"] .hl-item.m4 { border-left-color: var(--wdn-ember); }
html[data-theme="fjord"] .hl-item.m4 .hl-k { color: var(--wdn-ember); }
html[data-theme="fjord"] .potm-feat.m4 { border-color: rgba(224, 138, 75, 0.5); background: rgba(224, 138, 75, 0.12); color: var(--wdn-ember); }
html[data-theme="fjord"] .xpbar i { background: linear-gradient(90deg, rgba(111, 211, 168, 0.5), var(--wdn-accent)); box-shadow: none; }
html[data-theme="fjord"] .season-progress i { background: var(--wdn-accent); }
html[data-theme="fjord"] .patch-tier { background: var(--wdn-accent); color: var(--wdn-bg); }
html[data-theme="fjord"] .hl.t-elite { --hc: var(--wdn-gold); }
html[data-theme="fjord"] .hl.t-elite .pill { background: rgba(227, 193, 111, 0.14); color: var(--wdn-gold); border-color: rgba(227, 193, 111, 0.45); box-shadow: none; }