/* GENERATED by tools/webx/build-css.mjs from site/ds.css, site/wx-base.css, site/wx-charstage.css, site/wx-lobbybg.css, site/wx-tip.css, site/wx-charts.css, site/style.css - do not edit by hand. */
/* ==== site/ds.css ==== */
/* Genesis design system – web components and motion of the stats site (docs/UI.md §11.2 / §11.3).
   Only design tokens from tokens.css (generated from shared/ui/tokens.json); no colour, font or duration literals.
   Motion animates transform and opacity only; with prefers-reduced-motion every token duration is 0 and the
   animations below are switched off. The legacy class names of app.js (.card, .btn, .tbl, .mrow, .empty …) share the
   rules of their ds-* component so both spellings render the same. Load after tokens.css, before style.css. */

/* ================================================================ type helpers (5 steps per screen: caption, small,
   nav, titleS, headline – the page header is the "top bar" and not counted, docs/UI.md §2.2) */
.ds-caption { font-family: var(--ds-font-display); font-size: var(--ds-type-caption); line-height: 1.2; text-transform: uppercase; }
.ds-display { font-family: var(--ds-font-display); font-weight: 400; }

/* ================================================================ top nav tabs (.ds-nav) */
.ds-nav { position: relative; display: flex; align-items: center; gap: var(--ds-space-l); }
.ds-nav a { position: relative; display: block; padding: var(--ds-space-s) 0; font-family: var(--ds-font-display); font-size: var(--ds-type-nav); line-height: 1; text-transform: uppercase; color: var(--ds-color-text-muted); white-space: nowrap; }
.ds-nav a:hover { color: var(--ds-color-text-nav-hover); }
.ds-nav a:active { color: var(--ds-color-text-nav-pressed); }
.ds-nav a[aria-current="page"] { color: var(--ds-color-accent-primary); }
/* the underline is one bar that glides to the active tab (transform only, --ds-motion-select) */
.ds-nav__bar { position: absolute; left: 0; bottom: calc(var(--ds-space-s) - var(--ds-underline-offset) - var(--ds-underline-h) + var(--ds-space-xxs)); width: 1px; height: var(--ds-underline-h); background: var(--ds-color-accent-primary); transform-origin: 0 0; transform: translateX(0) scaleX(0); transition: transform var(--ds-motion-select) var(--ds-ease-enter); pointer-events: none; }
.ds-nav__bar.is-off { opacity: 0; }

/* ================================================================ buttons (.ds-btn) */
.ds-btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-xs); height: var(--ds-space-button-h-small); padding: 0 var(--ds-space-l); border: var(--ds-outline-thin) solid var(--ds-color-outline-soft); border-radius: 0; background: var(--ds-color-surface-panel-deep); color: var(--ds-color-text-primary); font-family: var(--ds-font-display); font-size: var(--ds-type-small); line-height: 1; cursor: pointer; white-space: nowrap; transform: translateY(0); transition: transform var(--ds-motion-press-up) var(--ds-ease-smooth); }
.ds-btn:hover:not(:disabled), .btn:hover:not(:disabled) { color: var(--ds-color-text-nav-hover); border-color: var(--ds-color-text-muted); }
.ds-btn:active:not(:disabled), .btn:active:not(:disabled) { transform: translateY(var(--ds-motion-press-y)); transition-duration: var(--ds-motion-press-down); }
.ds-btn:disabled, .btn:disabled { opacity: 0.5; cursor: default; }
/* primary = the one yellow action: text GROSS, +8 % brightness at the top fading into the base yellow */
.ds-btn--primary, .btn.primary, .cta { border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ds-color-accent-primary) 92%, var(--ds-palette-white)) 0%, var(--ds-color-accent-primary) 55%); color: var(--ds-color-text-on-primary); text-transform: uppercase; box-shadow: var(--ds-shadow-hard); }
.ds-btn--primary:hover:not(:disabled), .btn.primary:hover:not(:disabled), .cta:hover { color: var(--ds-color-text-on-primary); }
.ds-btn--secondary { background: var(--ds-color-surface-panel-deep); }
.ds-btn--tertiary { border: 0; background: var(--ds-color-surface-card-white); color: var(--ds-color-text-on-card); }
.ds-btn--tertiary:hover:not(:disabled) { color: var(--ds-color-text-on-card); }
.ds-btn--icon { width: var(--ds-space-icon-button); height: var(--ds-space-icon-button); padding: 0; border-radius: 50%; }
.btn.small { height: var(--ds-space-button-h-small); padding: 0 var(--ds-space-m); }

/* ================================================================ cards (.ds-card) */
.ds-card, .card { position: relative; min-width: 0; padding: var(--ds-space-l); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); border-radius: 0; background: var(--ds-color-surface-panel); box-shadow: var(--ds-shadow-hard); }
.ds-card--stat, .kpi { position: relative; min-width: 0; padding: var(--ds-space-m); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); background: var(--ds-color-surface-panel-deep); }
.ds-card--stat::before, .kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--ds-outline-bold); background: var(--k, var(--ds-color-outline-soft)); }
.ds-card--item { position: relative; border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); background: var(--ds-color-surface-panel-deep); }
.ds-hover-card { transform: scale(1); transition: transform var(--ds-motion-hover) var(--ds-ease-smooth); }
.ds-hover-card:hover { transform: scale(var(--ds-motion-hover-scale-card)); }

/* ================================================================ badges (.ds-badge) */
.ds-badge { display: inline-flex; align-items: center; height: var(--ds-space-l); padding: 0 var(--ds-space-xs); font-family: var(--ds-font-display); font-size: var(--ds-type-caption); line-height: 1; text-transform: uppercase; white-space: nowrap; transform: skewX(var(--ds-skew-chip)); }
.ds-badge > * , .ds-badge > span { display: inline-block; transform: skewX(calc(-1 * var(--ds-skew-chip))); }
.ds-badge--modern { background: var(--ds-color-accent-secondary); color: var(--ds-color-text-primary); }
.ds-badge--tier { background: var(--t, var(--ds-rarity-common)); color: var(--ds-color-text-on-card); }
.ds-badge--rarity-common { --t: var(--ds-rarity-common); } .ds-badge--rarity-uncommon { --t: var(--ds-rarity-uncommon); } .ds-badge--rarity-rare { --t: var(--ds-rarity-rare); } .ds-badge--rarity-epic { --t: var(--ds-rarity-epic); } .ds-badge--rarity-legendary { --t: var(--ds-rarity-legendary); }
.ds-badge--new::after { content: ""; display: inline-block; width: var(--ds-space-s); height: var(--ds-space-s); margin-left: var(--ds-space-xxs); background: var(--ds-color-accent-primary); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
/* rank star (table places 1–3, StarShape_Bg_Small) */
.ds-star { display: inline-grid; place-items: center; width: var(--ds-icon-m); height: var(--ds-icon-m); clip-path: polygon(50% 0, 61% 33%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 33%); }

/* ================================================================ table (.ds-table) */
.ds-table, table.tbl { width: 100%; border-collapse: collapse; font-family: var(--ds-font-body); font-size: var(--ds-type-small); font-variant-numeric: tabular-nums; }
.ds-table th, .tbl th { height: var(--ds-space-xxl); padding: 0 var(--ds-space-s); text-align: left; font-family: var(--ds-font-body); font-size: var(--ds-type-small); font-weight: 400; color: var(--ds-color-text-muted); white-space: nowrap; border-bottom: var(--ds-outline-thin) solid var(--ds-color-outline-soft); }
.ds-table td, .tbl td { height: var(--ds-space-table-row); padding: 0 var(--ds-space-s); vertical-align: middle; border-bottom: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }

/* ================================================================ character header (.ds-hero--char) */
.ds-hero--char { position: relative; overflow: hidden; isolation: isolate; view-transition-name: ds-char-hero; background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); }
/* the accent is its own layer; a character switch cross-fades the whole header (opacity), never the layout */
.ds-hero__accent { position: absolute; inset: 0; z-index: -1; background: var(--c, var(--ds-color-accent-secondary)); }
.ds-hero__accent::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ds-color-outline-ink) 12%, transparent); -webkit-mask-image: url("img/ds/vector-shape.webp"); mask-image: url("img/ds/vector-shape.webp"); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: 70% 50%; mask-position: 70% 50%; }
.ds-hero__accent::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--ds-color-outline-ink) 10%, transparent) calc(var(--ds-space-dot-grid-dot) / 2), transparent calc(var(--ds-space-dot-grid-dot) / 2 + 0.5px)); background-size: var(--ds-space-dot-grid-step) var(--ds-space-dot-grid-step); }
/* pale giant name behind the character: outline only, text white 18 % */
.ds-hero__bgname { position: absolute; left: 0; top: 50%; z-index: -1; font-family: var(--ds-font-display); font-size: var(--ds-type-bg-name); line-height: 1; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 3px color-mix(in srgb, var(--ds-color-text-primary) 18%, transparent); transform: translate(-2%, -50%); pointer-events: none; user-select: none; }
.ds-hero--char h1, .ds-hero--char .ds-hero__title { color: var(--ds-color-text-primary); text-shadow: 0 var(--ds-outline-bold) 0 var(--ds-color-outline-ink); }
/* text on the accent (web-fix S2): app.js sets .ds-on-light when ink has the higher contrast against the accent (light
   accents, as in the game), .ds-on-mid when neither ink nor white reaches 4.5:1 - then the small text sits on the dark plate */
.ds-hero--char.ds-on-light h1, .ds-hero--char.ds-on-light .ds-hero__title, .ds-hero--char.ds-on-light .lead, .ds-hero--char.ds-on-light .caption b, .ds-hero--char.ds-on-light .xp .t, .ds-hero--char.ds-on-light h1 .tag { color: var(--ds-color-text-on-card); text-shadow: none; }
.ds-hero--char.ds-on-mid .lead, .ds-hero--char.ds-on-mid .xp .t { display: inline-block; padding: var(--ds-space-xxs) var(--ds-space-xs); background: var(--ds-color-surface-panel-deep); color: var(--ds-color-text-primary); text-shadow: none; }
/* focus on an accent surface: ink ring with a yellow edge, visible on light and dark accents */
.ds-hero--char :focus-visible { outline: var(--ds-outline-thin) solid var(--ds-color-outline-ink); outline-offset: var(--ds-outline-thin); box-shadow: 0 0 0 calc(var(--ds-outline-thin) * 3) var(--ds-color-accent-primary); }

/* ================================================================ match card (.ds-match) and rogue run (.ds-run) */
.ds-match { position: relative; border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); background: var(--ds-color-surface-panel); }
.ds-run .chip { border: 0; color: var(--ds-color-text-on-card); background: var(--ds-rarity-common); }
.ds-run .chip.t2 { background: var(--ds-rarity-rare); } .ds-run .chip.t3 { background: var(--ds-rarity-epic); } .ds-run .chip.t4 { background: var(--ds-rarity-legendary); }
.ds-run .chip.boss { background: var(--ds-color-accent-hot); } .ds-run .chip.pact { background: var(--ds-color-accent-secondary); color: var(--ds-color-text-primary); }

/* ================================================================ loading / empty / error */
.ds-loading { position: relative; }
.ds-loading__star { position: absolute; left: 50%; top: var(--ds-space-xxxl); width: var(--ds-icon-l); height: var(--ds-icon-l); margin-left: calc(-0.5 * var(--ds-icon-l)); color: var(--ds-color-accent-primary); animation: ds-spin var(--ds-motion-loading-spin) linear infinite; }
.ds-loading__star svg { width: 100%; height: 100%; fill: currentColor; }
.ds-empty, .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ds-space-xs); padding: var(--ds-space-l) var(--ds-space-m); text-align: center; color: var(--ds-color-text-muted); }
.ds-empty svg, .empty svg { width: var(--ds-icon-l); height: var(--ds-icon-l); stroke: var(--ds-color-text-muted); fill: none; stroke-width: 1.8; }
.ds-empty b, .empty b { color: var(--ds-color-text-primary); font-family: var(--ds-font-body); font-weight: 400; font-size: var(--ds-type-small); }
.ds-empty--error .big-ico { color: var(--ds-status-error); }

/* ================================================================ motion */
/* page change: the skeleton is set without a transition, only the content swap runs in a view transition */
html { view-transition-name: none; }
#app { view-transition-name: ds-app; }
.top { view-transition-name: ds-top; }
::view-transition-group(ds-app), ::view-transition-group(ds-top), ::view-transition-group(ds-char-art), ::view-transition-group(ds-char-hero) { animation: none; }
::view-transition-old(ds-top) { display: none; }
::view-transition-new(ds-top) { animation: none; }
::view-transition-old(ds-app) { animation: ds-fade-out var(--ds-motion-panel-out) var(--ds-ease-exit) both; }
::view-transition-new(ds-app) { animation: ds-enter var(--ds-motion-panel-in) var(--ds-ease-enter) both; }
/* a normal route change (no .ds-vt-char): header and portrait go with the page, 150 ms out / 200 ms in like ds-app */
::view-transition-old(ds-char-art), ::view-transition-old(ds-char-hero) { animation: ds-fade-out var(--ds-motion-panel-out) var(--ds-ease-exit) both; }
::view-transition-new(ds-char-art), ::view-transition-new(ds-char-hero) { animation: ds-enter var(--ds-motion-panel-in) var(--ds-ease-enter) both; }
/* character switch only (app.js sets .ds-vt-char on <html> for #/character/a -> b, web-fix S4): old portrait leaves 48 px
   to the left, the new one comes in from the right; header + accent cross-fade, in sequence (500 ms) */
.ds-vt-char::view-transition-old(ds-char-art) { animation: ds-char-out-seq var(--ds-motion-char-switch-crossfade) linear both; }
.ds-vt-char::view-transition-new(ds-char-art) { animation: ds-char-in-seq var(--ds-motion-char-switch-crossfade) linear both; }
.ds-vt-char::view-transition-old(ds-char-hero) { animation: ds-fade-out-seq var(--ds-motion-char-switch-crossfade) linear both; }
.ds-vt-char::view-transition-new(ds-char-hero) { animation: ds-fade-in-seq var(--ds-motion-char-switch-crossfade) linear both; }
.ds-hero--char .profile-art .art, .ds-hero--char .hero-art .art { view-transition-name: ds-char-art; }
/* fallback without the View Transitions API */
.ds-enter { animation: ds-enter var(--ds-motion-panel-in) var(--ds-ease-enter) both; }
.ds-char-enter .ds-hero--char .art { animation: ds-char-in var(--ds-motion-char-switch-crossfade) var(--ds-ease-enter) both; }
.ds-char-enter .ds-hero__accent { animation: ds-fade-in var(--ds-motion-char-switch-crossfade) var(--ds-ease-smooth) both; }
/* card pop + stagger: at most 12 elements, delay = index × stagger-tile; will-change only while it runs */
.ds-pop { will-change: transform, opacity; animation: ds-pop var(--ds-motion-panel-in) var(--ds-ease-enter) both; animation-delay: calc(var(--i, 0) * var(--ds-motion-stagger-tile)); }
.ds-bump { animation: ds-bump var(--ds-motion-level-up) var(--ds-ease-enter) both; }
@keyframes ds-enter { from { opacity: 0; transform: translateY(var(--ds-motion-panel-offset)); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-pop { from { opacity: 0; transform: scale(var(--ds-motion-pop-scale)); } to { opacity: 1; transform: scale(1); } }
@keyframes ds-char-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(calc(-1 * var(--ds-motion-char-switch-slide))); } }
@keyframes ds-char-in { from { opacity: 0; transform: translateX(var(--ds-motion-char-switch-slide)); } to { opacity: 1; transform: translateX(0); } }
/* sequenced switch: out in 0–45 % (exit curve), in 45–100 % (enter curve) */
@keyframes ds-char-out-seq { 0% { opacity: 1; transform: translateX(0); animation-timing-function: var(--ds-ease-exit); } 45%, 100% { opacity: 0; transform: translateX(calc(-1 * var(--ds-motion-char-switch-slide))); } }
@keyframes ds-char-in-seq { 0%, 45% { opacity: 0; transform: translateX(var(--ds-motion-char-switch-slide)); animation-timing-function: var(--ds-ease-enter); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes ds-fade-out-seq { 0% { opacity: 1; animation-timing-function: var(--ds-ease-exit); } 45%, 100% { opacity: 0; } }
@keyframes ds-fade-in-seq { 0%, 45% { opacity: 0; animation-timing-function: var(--ds-ease-enter); } 100% { opacity: 1; } }
@keyframes ds-bump { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes ds-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*), ::view-transition-new(*), ::view-transition-group(*) { animation: none !important; }
  .ds-enter, .ds-pop, .ds-bump, .ds-char-enter .art, .ds-char-enter .ds-hero__accent, .ds-loading__star { animation: none !important; }
  .ds-nav__bar, .ds-btn, .btn, .ds-hover-card { transition: none !important; }
}

/* ==== site/wx-base.css ==== */
/* wx-base.css: base rules of the WEBX2 kit (DESIGN WEBX2 §4.1, §5, §9.1). Source of truth: tools/webx/shared/, copied by sync-shared. */

/* §9.1 rule 1: one-line text with an ellipsis that never cuts glyphs vertically (accents, dotted İ, Й, i dots).
   overflow-x: clip keeps the y axis visible; the @supports branch pads the line box for browsers without clip. */
.wx-line { display: block; min-width: 0; white-space: nowrap; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; }
@supports not (overflow: clip) {
  .wx-line { overflow: hidden; padding-block: 0.2em; margin-block: -0.2em; }
}

/* §9.1 rule 3 (M-1): a Name#Tag only breaks between name and tag, never inside the number. */
.tag { white-space: nowrap; }

/* screen-reader only (data tables of the charts, §8.1) */
.wx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* §7.3 TMP <sprite=N>: an icon of Icons_Atlas_SpriteFont at the text baseline; tint=1 paints it in the colour of the text */
.wx-sprite { display: inline-block; width: 1.1em; height: 1.1em; margin-inline: 0.08em; vertical-align: -0.15em; background: var(--wx-sprite) center / contain no-repeat; }
.wx-sprite--tint { background: currentColor; -webkit-mask: var(--wx-sprite) center / contain no-repeat; mask: var(--wx-sprite) center / contain no-repeat; }

/* §5.1 StarWipe: the cover over the content area. The star edge (G13, TransitionEdge_Star.png) runs along the leading side. */
.wx-wipe { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; pointer-events: auto; background: var(--wx-wipe-color, var(--ds-color-accent-primary)); transform: translateX(-102%); will-change: transform; }
.wx-wipe::before, .wx-wipe::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28px; background: var(--wx-wipe-color, var(--ds-color-accent-primary)); -webkit-mask: var(--wx-wipe-edge, none) 0 0 / 28px 64px repeat-y; mask: var(--wx-wipe-edge, none) 0 0 / 28px 64px repeat-y; }
.wx-wipe::after { left: 100%; }
.wx-wipe::before { right: 100%; transform: scaleX(-1); }
.wx-wipe__star { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; opacity: 0; color: var(--ds-color-outline-ink); }
.wx-wipe--hold .wx-wipe__star { opacity: 1; transition: opacity var(--ds-motion-fade-selectable) linear; }
.wx-wipe__star svg { width: 100%; height: 100%; animation: wx-spin var(--ds-motion-loading-spin) linear infinite; }
@keyframes wx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wx-wipe__star svg { animation: none; } }

/* §5.3 skeleton plates: static, no shimmer (DS §5.14) */
.sk { background: color-mix(in srgb, var(--ds-color-text-primary) 8%, transparent); border-radius: 0; color: transparent !important; }
.sk * { visibility: hidden; }

/* §9.2 fit text: the giant name always fits its stage. The stage is an inline-size container; --wx-name-em is the
   width of the name in em (gen-game nameEm for characters, WxFit for run-time names); --wx-bgname-hmax caps the height. */
.wx-fitbox { display: block; container-type: inline-size; min-width: 0; }
/* WEBX3 WN19: a run-time name (player) in its own box: the font size follows the box width (96cqi for sub-pixel room),
   at least 11 px (docs/UI.md), at most --fit-max; no overflow clip (i dots, accents). Invisible with its final height
   until WxFit has measured it (data-fit-ok); is-tall reserves two lines when the name may need them, is-wrap lets it wrap. */
.wx-fitline { display: block; font-family: var(--ds-font-display); font-weight: 400; font-size: clamp(11px, calc(96cqi / var(--wx-name-em, 8)), var(--fit-max, var(--ds-type-label))); white-space: nowrap; line-height: 1.15; padding-block: 0.12em; min-height: calc(var(--fit-max, var(--ds-type-label)) * 1.15 + 0.24em); overflow: visible; text-transform: none; }
.wx-fitline:not([data-fit-ok]) { visibility: hidden; }
.wx-fitline.is-tall { min-height: calc(var(--fit-max, var(--ds-type-label)) * 1.15 * 2 + 0.24em); }
.wx-fitline.is-wrap { white-space: normal; overflow-wrap: anywhere; }
.wx-fitname { font-size: min(var(--wx-bgname-max, var(--ds-type-bg-name, 640px)), calc(94cqw / var(--wx-name-em, 4)), var(--wx-bgname-hmax, 40vh)); white-space: nowrap; overflow: visible; line-height: 1.12; }

/* §5.1 card deal and morph helpers */
.wx-deal > * { transform-origin: 50% 80%; }
::view-transition-group(wx-morph) { animation-duration: var(--ds-motion-wipe-in); animation-timing-function: var(--ds-ease-enter); }

/* ==== site/wx-charstage.css ==== */
/* wx-charstage.css: the character stage of the Genesis web pages, the web version of the in-game character page
   (WEBX DESIGN §4.4, look of the owner video f001 as reference only). Source of truth: tools/webx/shared/, copied
   byte-identical into site/ and website/assets/ by tools/webx/sync-shared.mjs. Tokens only (tokens.css), no colour,
   font or duration literals; motion = transform/opacity (the sequence itself runs in wx-charstage.js).
   Layers: full-bleed accent of the character (two layers A/B for the colour cross-fade) with the flat vector shapes of
   the lobby and the dot grid, the pale giant name, the character illustration cut by the edge, then name / role /
   badges left, abilities right, the character bar at the bottom. Variants: --page (character page / roster),
   --hero (overview hero), --mini (profile head, podium, compare). */

.wx-stage { position: relative; isolation: isolate; overflow-x: clip; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); grid-template-rows: 1fr auto; column-gap: var(--ds-space-l); min-height: clamp(520px, 64vh, 760px); margin-top: var(--ds-space-xxl); padding: var(--ds-space-xxl) var(--ds-space-screen-margin-x) var(--ds-space-l); color: var(--ds-color-text-primary); }
.wx-stage--hero { min-height: clamp(480px, 58vh, 680px); }
.wx-stage--mini { min-height: 300px; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); padding-top: var(--ds-space-xl); padding-bottom: var(--ds-space-xl); margin-top: var(--ds-space-xl); }

/* ---- background: accent A/B, vector shapes, dot grid, giant name (clipped to the stage) */
.wx-stage__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-top: var(--ds-outline-bold) solid var(--ds-color-outline-ink); border-bottom: var(--ds-outline-bold) solid var(--ds-color-outline-ink); }
.wx-stage__accent { position: absolute; inset: 0; background: var(--accent, var(--ds-color-accent-secondary)); }
.wx-stage__accent--b { opacity: 0; background: var(--accent-b, var(--accent, var(--ds-color-accent-secondary))); }
.wx-stage__bg::before { content: ""; position: absolute; inset: -10% -5%; background: color-mix(in srgb, var(--ds-palette-white) 22%, transparent); -webkit-mask-image: url("img/ds/vector-shape.webp"); mask-image: url("img/ds/vector-shape.webp"); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: 60% 40%; mask-position: 60% 40%; }
.wx-stage__bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--ds-color-outline-ink) 12%, transparent) calc(var(--ds-space-dot-grid-dot) / 2), transparent calc(var(--ds-space-dot-grid-dot) / 2 + 0.5px)); background-size: var(--ds-space-dot-grid-step) var(--ds-space-dot-grid-step); }
/* WS12/WC03 (WEBX2 §9.2): one name that always fits (.wx-fitname, 94 % of the stage width via --wx-name-em), centred, never cut */
.wx-stage { container-type: inline-size; }
.wx-stage__bgname { position: absolute; left: 0; right: 0; top: 50%; z-index: 1; overflow: visible; font-family: var(--ds-font-display); --wx-bgname-max: var(--ds-type-bg-name); --wx-bgname-hmax: 44vh; line-height: 1.12; text-align: center; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 3px color-mix(in srgb, var(--ds-palette-white) 30%, transparent); transform: translateY(-50%); pointer-events: none; user-select: none; }
.wx-stage--mini .wx-stage__bgname { --wx-bgname-max: 320px; --wx-bgname-hmax: 24vh; }

/* ---- the illustration: big, cut by the edge, over the top border; Genesis renders are framed by their figure box */
/* the figure box (--fx0…--fy1, game-data.json art.fullBox, every character) puts the top of the figure on the top of
   the art box, i.e. above the stage edge; its height is --wx-art-h of the art box, a wide figure is capped at
   --wx-art-w of the art box width (container units, the art box is the size container) */
.wx-stage__art { position: absolute; z-index: -1; top: calc(-1 * var(--ds-space-xxl)); bottom: 0; left: 30%; right: 22%; pointer-events: none; container-type: size; --wx-art-h: 112; --wx-art-w: 1.5; }
.wx-stage--hero .wx-stage__art { left: 38%; right: 6%; bottom: calc(-1 * var(--ds-space-xl)); --wx-art-h: 100; --wx-art-w: 1.25; }
.wx-stage--mini .wx-stage__art { left: 52%; right: 0; top: calc(-1 * var(--ds-space-xl)); }
.wx-stage__img { position: absolute; left: 50%; top: 0; height: min(calc(var(--wx-art-h) * 1cqh / (var(--fy1, 1) - var(--fy0, 0))), calc(var(--wx-art-w) * 100cqw / (var(--fx1, 1) - var(--fx0, 0)))); width: auto; max-width: none; transform: translate(calc(-100% * (var(--fx0, 0) + var(--fx1, 1)) / 2), calc(-100% * var(--fy0, 0))); }
.wx-stage__img--portrait { height: 100%; }
.wx-stage__img.is-old { z-index: -1; }

/* ---- identity (left): badges, name, role, meta; the page puts its own block in .wx-stage__extra */
.wx-stage__id { grid-column: 1; grid-row: 1; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-s); min-width: 0; z-index: 1; }
.wx-stage__badges { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); }
.wx-stage__name { margin: 0; font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-hero); line-height: 0.95; text-transform: uppercase; overflow-wrap: normal; word-break: keep-all; text-wrap: balance; }
.wx-stage__name--player { text-transform: none; font-size: var(--ds-type-headline); overflow-wrap: anywhere; } /* player names are data, shown as written like in the game (DR-14) */
.wx-stage__role { margin: 0; font-family: var(--ds-font-display); font-size: var(--ds-type-label); line-height: 1.15; }
.wx-stage__extra { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-m); margin-top: var(--ds-space-s); }
.wx-stage--mini .wx-stage__name { font-size: var(--ds-type-headline); }
.wx-stage--mini .wx-stage__name--player { font-size: var(--ds-type-title); }
/* WN19: the fit name box takes the width of the identity column (a flex child of align-items:start would be 0 wide) */
.wx-stage--mini .wx-stage__name--player { width: 100%; }

/* text colour on the accent: ink where ink has the higher WCAG contrast (light accents, like in the game), otherwise
   off-white with the hard ink shadow */
.wx-stage.wx-on-ink { color: var(--ds-color-text-on-card); }
.wx-stage.wx-on-light .wx-stage__name, .wx-stage.wx-on-light .wx-stage__role, .wx-stage.wx-on-light .wx-abil__name { text-shadow: 0 var(--ds-outline-bold) 0 var(--ds-color-outline-ink); }
/* focus on the accent: ink 3 px plus off-white 2 px outside (DR-8 point 2), never the info cyan */
.wx-stage :focus-visible { outline: 3px solid var(--ds-color-outline-ink); outline-offset: 0; box-shadow: 0 0 0 5px var(--ds-palette-off-white); }

/* ---- badges (UI.md §5.10 form): parallelogram, caption GROSS, 20 high */
.wx-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--ds-space-xs); font-family: var(--ds-font-display); font-size: var(--ds-type-caption); line-height: 1; text-transform: uppercase; white-space: nowrap; transform: skewX(var(--ds-skew-chip)); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.wx-badge > span { display: inline-block; transform: skewX(calc(-1 * var(--ds-skew-chip))); }
.wx-badge--original { background: var(--ds-palette-off-white); color: var(--ds-color-text-on-card); }
.wx-badge--genesis, .wx-badge--modern { background: var(--ds-color-accent-secondary); color: var(--ds-palette-white); }
.wx-badge--season { background: var(--ds-color-outline-ink); color: var(--ds-palette-off-white); }

/* ---- abilities (right): four round icons, the chosen one with the yellow ring, name | slot and the short text */
.wx-stage__abilities { grid-column: 3; grid-row: 1; align-self: center; display: flex; flex-direction: column; gap: var(--ds-space-m); min-width: 0; z-index: 1; }
.wx-abil__icons { display: flex; gap: var(--ds-space-s); flex-wrap: wrap; }
.wx-abil__btn { position: relative; display: grid; place-items: center; width: var(--ds-icon-ability); height: var(--ds-icon-ability); padding: 0; border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); border-radius: 50%; background: var(--ds-color-outline-ink); color: var(--ds-palette-off-white); font-family: var(--ds-font-display); font-size: var(--ds-type-small); cursor: pointer; transform: scale(1); transition: transform var(--ds-motion-hover) var(--ds-ease-smooth); }
.wx-abil__btn img { width: 78%; height: 78%; object-fit: contain; pointer-events: none; }
.wx-abil__btn:hover { transform: scale(var(--ds-motion-hover-scale-icon)); }
.wx-abil__btn[aria-selected="true"] { box-shadow: 0 0 0 var(--ds-outline-bold) var(--ds-color-accent-primary), 0 0 0 calc(var(--ds-outline-bold) * 2) var(--ds-color-outline-ink); }
.wx-abil__panel { min-height: 6.5em; max-width: 34ch; }
.wx-abil__name { margin: 0 0 2px; overflow-wrap: normal; word-break: normal; text-wrap: balance; font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-title-s); line-height: 1.1; }
.wx-abil__type { display: block; margin: 0 0 var(--ds-space-xs); font-family: var(--ds-font-body); font-size: var(--ds-type-small); line-height: 1.25; white-space: normal; } /* M-2: own line under the title */
.wx-abil__btn .wx-abil__glyph { width: 46%; height: 46%; fill: var(--ds-color-accent-primary); pointer-events: none; }
.wx-abil__short { margin: 0; font-family: var(--ds-font-body); font-size: var(--ds-type-body-l); line-height: 1.45; }
.wx-abil__later { margin: 0; font-family: var(--ds-font-body); font-size: var(--ds-type-body); }

/* ---- character bar (bottom): cards like the in-game bar, chosen one taller with the yellow inner edge */
.wx-bar { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; display: flex; align-items: flex-end; gap: var(--ds-space-xs); margin-top: var(--ds-space-l); }
.wx-bar__track { display: flex; align-items: flex-end; gap: var(--ds-space-xs); min-width: 0; flex: 1; overflow-x: auto; overflow-y: hidden; padding: var(--ds-space-xs) var(--ds-space-xs) var(--ds-space-xs); scroll-snap-type: x proximity; scrollbar-width: none; }
.wx-bar__track::-webkit-scrollbar { display: none; }
.wx-bar__c { position: relative; flex: 0 0 auto; width: var(--ds-space-char-card-w); height: var(--ds-space-char-card-h); padding: 0; overflow: hidden; border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); background: var(--ds-palette-navy); cursor: pointer; scroll-snap-align: center; transform: skewX(var(--ds-skew-card)) scale(1); transition: transform var(--ds-motion-hover) var(--ds-ease-smooth); }
.wx-bar__c:hover { transform: skewX(var(--ds-skew-card)) scale(var(--ds-motion-hover-scale-card)); }
.wx-bar__c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--crop, 50% 20%); transform: skewX(calc(-1 * var(--ds-skew-card))) scale(var(--zoom, 1.15)); transform-origin: var(--crop, 50% 20%); }
.wx-bar__c img.is-crop { inset: auto; height: auto; max-width: none; object-fit: fill; transform: skewX(calc(-1 * var(--ds-skew-card))); transform-origin: 0 0; }
.wx-bar__c .wx-bar__ini { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); color: var(--ds-palette-off-white); transform: skewX(calc(-1 * var(--ds-skew-card))); }
.wx-bar__c[aria-selected="true"] { height: var(--ds-space-char-card-h-selected); box-shadow: inset 0 0 0 var(--ds-outline-bold) var(--ds-color-accent-primary); }
.wx-bar__c[aria-selected="true"]::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 var(--ds-outline-bold) var(--ds-color-accent-primary); }
.wx-bar__tag { position: absolute; left: var(--ds-space-xxs); bottom: var(--ds-space-xxs); z-index: 1; padding: 0 var(--ds-space-xxs); background: var(--ds-color-outline-ink); color: var(--ds-palette-off-white); font-family: var(--ds-font-display); font-size: var(--ds-type-caption); line-height: 1.6; transform: skewX(calc(-1 * var(--ds-skew-card))); }
.wx-bar__arrow { flex: 0 0 auto; width: var(--ds-space-icon-button); height: var(--ds-space-icon-button); margin-bottom: var(--ds-space-xxl); padding: 0; border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); border-radius: 50%; background: var(--ds-palette-off-white); color: var(--ds-color-text-on-card); cursor: pointer; }
.wx-bar__arrow svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wx-bar__arrow:disabled { opacity: 0.4; cursor: default; }

/* ---- side slot of the hero (live plate etc.) */
.wx-stage__side { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; z-index: 1; }
.wx-stage--mini .wx-stage__side { grid-column: 2; align-self: center; }

/* ---- phone */
@media (max-width: 1023px) {
  .wx-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wx-stage__abilities { grid-column: 1 / -1; grid-row: 2; align-self: end; margin-top: var(--ds-space-l); }
  .wx-bar { grid-row: 3; }
  .wx-stage__art { left: 40%; right: -6%; }
  .wx-stage__side { grid-column: 2; }
}
@media (max-width: 767px) {
  .wx-stage { grid-template-columns: minmax(0, 1fr); min-height: 560px; margin-top: var(--ds-space-xl); padding: var(--ds-space-l) var(--ds-space-m) var(--ds-space-m); }
  .wx-stage--hero { min-height: 520px; }
  .wx-stage--mini { min-height: 260px; }
  .wx-stage__id { align-self: start; max-width: 100%; }
  .wx-stage__id > :not(.wx-stage__name):not(.wx-stage__badges) { max-width: 72%; }
  .wx-stage--hero .wx-stage__id { max-width: 100%; }
  .wx-stage__name { font-size: clamp(32px, 12vw, calc(var(--ds-type-hero) * 0.6)); }
  .wx-stage__name--player { font-size: calc(var(--ds-type-headline) * 0.6); }
  .wx-stage--mini .wx-stage__name { font-size: calc(var(--ds-type-headline) * 0.6); }
  .wx-stage--mini .wx-stage__name--player { font-size: calc(var(--ds-type-title) * 0.7); }
  .wx-stage__role { font-size: var(--ds-type-body-l); }
  .wx-stage__art { left: 46%; right: -34%; top: var(--ds-space-xxl); bottom: 42%; }
  .wx-stage--hero .wx-stage__art { left: 42%; right: -36%; bottom: 0; top: 34%; }
  .wx-stage--mini .wx-stage__art { left: 56%; right: -36%; top: 0; }
  .wx-stage__abilities { grid-column: 1; grid-row: 2; margin-top: var(--ds-space-xxxl); }
  .wx-stage__side { grid-column: 1; grid-row: 2; justify-self: start; margin-top: var(--ds-space-l); }
  .wx-abil__btn { width: 56px; height: 56px; }
  .wx-abil__short { font-size: var(--ds-type-body); }
  .wx-abil__type { white-space: normal; } /* narrow: the slot words may wrap among themselves, "|" stays glued (no-break spaces) */
  .wx-bar { margin-top: var(--ds-space-m); }
  .wx-bar__arrow { display: none; }
  .wx-bar__c { width: 60px; height: 104px; }
  .wx-bar__c[aria-selected="true"] { height: 124px; }
}

/* ---- language switcher of genesis-i18n.js (button + listbox with the endonyms of every client language) */
.wx-lang { position: relative; flex: none; }
.wx-lang__btn { display: inline-flex; align-items: center; gap: var(--ds-space-xs); height: var(--ds-space-chip); padding: 0 var(--ds-space-s); border: var(--ds-outline-thin) solid var(--ds-color-outline-soft); background: var(--ds-color-surface-panel-deep); color: var(--ds-color-text-primary); font-family: var(--ds-font-display); font-size: var(--ds-type-small); cursor: pointer; white-space: nowrap; }
.wx-lang__btn svg { width: var(--ds-icon-xs); height: var(--ds-icon-xs); fill: none; stroke: currentColor; stroke-width: 2; }
.wx-lang__list { position: absolute; right: 0; top: calc(100% + var(--ds-space-xs)); z-index: 50; min-width: 200px; max-height: min(70vh, 520px); overflow-y: auto; margin: 0; padding: var(--ds-space-xs) 0; list-style: none; background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); outline: none; }
.wx-lang__list li { padding: var(--ds-space-xs) var(--ds-space-m); font-family: var(--ds-font-body); font-size: var(--ds-type-body); color: var(--ds-color-text-primary); cursor: pointer; }
.wx-lang__list li[aria-selected="true"] { color: var(--ds-color-accent-primary); }
.wx-lang__list li.is-active, .wx-lang__list li:hover { background: var(--ds-color-surface-row); }
.wx-lang__list:focus-visible li.is-active { box-shadow: inset 3px 0 0 var(--ds-color-accent-primary); }

@media (prefers-reduced-motion: reduce) {
  .wx-abil__btn, .wx-bar__c { transition: none !important; }
}

/* ==== site/wx-lobbybg.css ==== */
/* wx-lobbybg.css: layers of the lobby splash (DESIGN WEBX2 §6.3). Source of truth: tools/webx/shared/. */
.wx-lobbybg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; view-transition-name: wx-lobbybg; background: var(--ds-color-bg-screen); }
.wx-lobbybg--hero { position: absolute; z-index: 0; }
.wx-lobbybg__bg, .wx-lobbybg__kitsu, .wx-lobbybg__front { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.wx-lobbybg__scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--ds-color-bg-lobby-scrim); }
.wx-lobbybg__smoke { position: absolute; left: 0; bottom: 0; height: calc(var(--wx-smoke-h, 0.24) * 100%); width: calc(100% + var(--wx-smoke-tile, 0px)); background: var(--wx-smoke-img) repeat-x 0 100% / auto 100%; opacity: var(--wx-smoke-op, 1); will-change: transform; }
.wx-lobbybg__sparks { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.wx-lobbybg__sparks i { position: absolute; left: 0; top: 0; background: var(--wx-spark-img) center / contain no-repeat; will-change: transform, opacity; }
.wx-lobbybg__figure, .wx-lobbybg__fx, .wx-lobbybg__fy { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.wx-lobbybg__front { opacity: 1; }
/* a missing texture: the static background of WEBX (§6.5) shows through */
.wx-lobbybg--off { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wx-lobbybg__sparks { display: none; }
}
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==== site/wx-tip.css ==== */
/* wx-tip.css: tooltip like UITooltip of the client (DESIGN WEBX2 §7.4, docs/UI.md §5.7). Source: tools/webx/shared/. */
.wx-tip { position: absolute; z-index: 60; box-sizing: border-box; max-width: min(320px, calc(100vw - 16px)); padding: var(--ds-space-m); background: var(--ds-color-surface-tooltip); color: var(--ds-color-text-primary); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); pointer-events: none; transform-origin: 50% 100%; }
.wx-tip--sheet { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; max-width: none; padding-bottom: calc(var(--ds-space-l) + env(safe-area-inset-bottom, 0px)); pointer-events: auto; border-width: var(--ds-outline-bold) 0 0; }
.wx-tip__head { display: flex; align-items: center; gap: var(--ds-space-s); }
.wx-tip__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-bold) solid var(--wx-rar, var(--ds-color-outline-ink)); }
.wx-tip__icon img { width: 44px; height: 44px; object-fit: contain; }
.wx-tip__icon .wx-sprite { width: 32px; height: 32px; margin: 0; }
.wx-tip__icon[data-rarity="0"] { --wx-rar: var(--ds-rarity-common); }
.wx-tip__icon[data-rarity="1"] { --wx-rar: var(--ds-rarity-uncommon); }
.wx-tip__icon[data-rarity="2"] { --wx-rar: var(--ds-rarity-rare); }
.wx-tip__icon[data-rarity="3"] { --wx-rar: var(--ds-rarity-epic); }
.wx-tip__icon[data-rarity="4"] { --wx-rar: var(--ds-rarity-legendary); }
.wx-tip__titles { min-width: 0; }
.wx-tip__name { font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); line-height: 1.12; overflow-wrap: anywhere; }
.wx-tip__sub { font-family: var(--ds-font-body); font-size: var(--ds-type-small); line-height: 1.25; color: var(--ds-color-text-tooltip); }
.wx-tip__body { margin-top: var(--ds-space-s); font-family: var(--ds-font-body); font-size: var(--ds-type-body); line-height: 1.35; }
.wx-tip__body p { margin: 0; }
.wx-tip__body p + p { margin-top: var(--ds-space-xs); }
.wx-tip__body strong { font-weight: 400; font-family: var(--ds-font-display); }
.wx-tip__none, .wx-tip__order { color: var(--ds-color-text-tooltip); font-size: var(--ds-type-small); margin: var(--ds-space-xs) 0 0; }
[data-tip] { cursor: help; }
[data-tip]:focus-visible { outline: var(--ds-outline-bold) solid var(--ds-color-accent-primary); outline-offset: 2px; }

/* ==== site/wx-charts.css ==== */
/* wx-charts.css: the DS look of the WEBX2 charts (DESIGN WEBX2 §8.1). Source: tools/webx/shared/. Motion: transform only, once. */
.wx-chart { margin: 0; position: relative; }
.wx-legend { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs) var(--ds-space-m); margin-top: var(--ds-space-s); font-size: var(--ds-type-caption); color: var(--ds-color-text-muted); }
.wx-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; background: var(--c); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.wx-legend b { color: var(--ds-color-text-primary); font-weight: 400; font-family: var(--ds-font-display); }
/* radar */
.wx-radar svg { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.wx-radar__ring { fill: none; stroke: var(--ds-color-outline-soft); stroke-width: 1.5; }
.wx-radar__spoke { stroke: var(--ds-color-outline-soft); stroke-width: 1; }
.wx-radar__area { fill: color-mix(in srgb, var(--c) 45%, transparent); stroke: var(--c); stroke-width: 3; stroke-linejoin: round; }
.wx-radar__shadow { fill: var(--ds-color-outline-ink); opacity: 0.6; }
.wx-radar__label { fill: var(--ds-color-text-muted); font-family: var(--ds-font-body); font-size: 12px; }
.wx-radar__grow { transition: transform calc(var(--ds-motion-bar-fill) * 1.5) var(--ds-ease-enter); }
.wx-chart.is-wait .wx-radar__grow { transform: scale(0.6); }
/* columns (+ line) */
.wx-cols__plot { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 180px; padding-top: var(--ds-space-m); border-bottom: var(--ds-outline-bold) solid var(--ds-color-outline-ink); }
.wx-col { flex: 1 1 0; min-width: 2px; height: 100%; background: var(--c); transform: scaleY(var(--h)); transform-origin: 50% 100%; border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); border-bottom: 0; transition: transform var(--ds-motion-bar-fill) var(--ds-ease-enter); transition-delay: calc(var(--i) * var(--ds-motion-stagger-tile)); }
.wx-col[data-mark] { background: var(--ds-color-accent-primary); }
.wx-chart.is-wait .wx-col { transform: scaleY(0); }
.wx-col-line { position: absolute; inset: var(--ds-space-m) 0 0 0; width: 100%; height: calc(100% - var(--ds-space-m)); overflow: visible; pointer-events: none; }
.wx-col-line path { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(var(--ds-motion-bar-fill) * 2) var(--ds-ease-smooth); }
.wx-chart.is-wait .wx-col-line path { stroke-dashoffset: 1; }
.wx-cols__max, .wx-cols__lmax { position: absolute; top: 0; font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-caption); line-height: 1.12; }
.wx-cols__max { left: 0; color: var(--ds-color-text-muted); }
.wx-cols__lmax { right: 0; }
.wx-cols__x { position: relative; height: 22px; font-size: var(--ds-type-caption); color: var(--ds-color-text-muted); }
.wx-cols__x span { position: absolute; top: 4px; left: calc(var(--x) * 100%); transform: translateX(calc(var(--x) * -100%)); white-space: nowrap; }
/* butterfly (WEBX3 WN19): one column template for the whole chart (--vw = longest value + 1ch), value | bar A | bar B |
   value; the label stands above the bars and may wrap; every row is scaled to its larger value, so a value never leaves
   its column. The names in the head fit their own column (.wx-fitbox, wx-base.css). */
.wx-bf__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ds-space-m); margin-bottom: var(--ds-space-xs); font-family: var(--ds-font-display); }
.wx-bf__head .wx-bf__na { color: var(--ca); } .wx-bf__head .wx-bf__nb { color: var(--cb); text-align: right; }
.wx-bf__row { display: grid; grid-template-columns: var(--vw, 6ch) minmax(0, 1fr) minmax(0, 1fr) var(--vw, 6ch); grid-template-rows: auto 16px; row-gap: var(--ds-space-xxs); column-gap: var(--ds-space-xs); align-items: center; padding: var(--ds-space-xs) 0 var(--ds-space-xxs); }
.wx-bf__row + .wx-bf__row { border-top: 1px solid var(--ds-color-outline-soft); }
.wx-bf__label { grid-column: 1 / -1; grid-row: 1; text-align: center; font-size: var(--ds-type-small); line-height: 1.3; color: var(--ds-color-text-muted); overflow-wrap: normal; text-wrap: balance; }
.wx-bf__va, .wx-bf__vb { grid-row: 2; font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-small); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-bf__va { grid-column: 1; text-align: right; } .wx-bf__vb { grid-column: 4; text-align: left; }
.wx-bf__bars { grid-column: 2 / 4; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 16px; transform-origin: 50% 50%; transition: transform var(--ds-motion-bar-fill) var(--ds-ease-enter); transition-delay: calc(var(--i, 0) * var(--ds-motion-stagger-tile)); }
.wx-chart.is-wait .wx-bf__bars { transform: scaleX(0); }
.wx-bf__ha { display: flex; justify-content: flex-end; } .wx-bf__hb { display: flex; justify-content: flex-start; }
.wx-bf__ha i, .wx-bf__hb i { display: block; box-sizing: border-box; height: 16px; width: calc(var(--w) * 100%); min-width: 3px; border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.wx-bf__ha i { background: var(--ca); } .wx-bf__hb i { background: var(--cb); }
.wx-bf__ha i.is-zero, .wx-bf__hb i.is-zero { min-width: 0; border: 0; }
/* the better value: the yellow edge inside the bar (an outside ring made the bar look longer and touched the label above) */
.wx-bf__ha i.is-win, .wx-bf__hb i.is-win { border: 3px solid var(--ds-color-accent-primary); }
.wx-bf__va.is-win, .wx-bf__vb.is-win { color: var(--ds-color-accent-primary); }
.wx-bf__row[data-tip] { cursor: help; }
.wx-bf__row[data-tip]:hover .wx-bf__label, .wx-bf__row[data-tip]:focus-visible .wx-bf__label { color: var(--ds-color-text-primary); }
/* legend of a duel (radar): colour field + fit name, one column per player */
.wx-legend--duel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ds-space-s); font-family: var(--ds-font-display); color: var(--ds-color-text-primary); }
.wx-legend--duel .wx-legend__item { display: flex; align-items: center; gap: var(--ds-space-xxs); min-width: 0; }
/* no generic legend square on the item or on the spans of the fit name (WN20: "two offset squares") */
.wx-legend--duel span::before { content: none; display: none; }
.wx-legend--duel .wx-legend__sw { flex: none; width: 12px; height: 12px; background: var(--c); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.wx-legend--duel .wx-fitbox { flex: 1 1 0; }/* horizontal bars */
.wx-hb__row { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto; gap: var(--ds-space-s); align-items: center; padding: 3px 0; }
.wx-hb__track { height: 16px; background: var(--ds-color-surface-panel-deep); }
.wx-hb__track i { display: block; height: 100%; background: var(--c); transform: scaleX(var(--w)); transform-origin: 0 50%; border-right: var(--ds-outline-thin) solid var(--ds-color-outline-ink); transition: transform var(--ds-motion-bar-fill) var(--ds-ease-enter); transition-delay: calc(var(--i) * var(--ds-motion-stagger-tile)); }
.wx-chart.is-wait .wx-hb__track i { transform: scaleX(0); }
.wx-hb__val { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-small); }
/* share band */
.wx-band__bar { display: flex; height: 28px; border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); overflow: hidden; }
.wx-band__bar span { flex: 0 0 calc(var(--w) * 100%); background: var(--c); transform-origin: 0 50%; transition: transform var(--ds-motion-bar-fill) var(--ds-ease-enter); transition-delay: calc(var(--i) * var(--ds-motion-stagger-tile)); }
.wx-band__bar span + span { border-left: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.wx-chart.is-wait .wx-band__bar span { transform: scaleX(0); }
/* ==== WEBX3 WN20: compare charts. Every chart has its final size before its data; motion = transform, opacity and
   stroke-dashoffset only, once (is-wait → is-in); prefers-reduced-motion: end state. Player colours: --cmp-a / --cmp-b. */
[data-tip].wx-ring, .wx-radar__hl[data-tip], .wx-tug[data-tip], .wx-form__col[data-tip], .wx-form__lbl[data-tip], .wx-modes__seg[data-tip] { cursor: help; }
.wx-chart [data-tip]:focus-visible { outline: 3px solid var(--ds-color-accent-primary); outline-offset: 2px; }
/* rings: A outside, B inside; the one orchestrated moment of the view (they run full once) */
.wx-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-m); }
.wx-rings .wx-legend--duel { grid-column: 1 / -1; margin-top: 0; }
.wx-ring { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; justify-items: center; row-gap: var(--ds-space-xxs); column-gap: var(--ds-space-xs); min-width: 0; padding: var(--ds-space-xs) 0; }
.wx-ring svg { grid-column: 1 / -1; width: 120px; aspect-ratio: 1; height: auto; display: block; transform: rotate(-90deg); }
.wx-ring__track { fill: none; stroke: var(--ds-color-surface-row); stroke-width: 10; }
.wx-ring__arc { fill: none; stroke-width: 10; stroke-dasharray: 100 100; stroke-dashoffset: var(--off); transition: stroke-dashoffset calc(var(--ds-motion-bar-fill) * 2) var(--ds-ease-enter); transition-delay: calc(var(--i, 0) * var(--ds-motion-stagger-card)); }
.wx-ring__arc--a { stroke: var(--cmp-a); } .wx-ring__arc--b { stroke: var(--cmp-b); }
.wx-chart.is-wait .wx-ring__arc { stroke-dashoffset: 100; }
.wx-ring__va, .wx-ring__vb { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-small); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-ring__va { color: var(--cmp-a); justify-self: end; } .wx-ring__vb { color: var(--cmp-b); justify-self: start; }
.wx-ring__label { grid-column: 1 / -1; font-size: var(--ds-type-small); line-height: 1.3; color: var(--ds-color-text-muted); text-align: center; overflow-wrap: normal; text-wrap: balance; }
/* radar with HTML axis labels (they wrap inside the box; each is a tooltip trigger) */
.wx-radar__box { position: relative; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 320 / 290; }
.wx-radar--html svg { width: 100%; height: 100%; max-width: none; }
.wx-radar__hl { position: absolute; display: block; width: max-content; font-size: var(--ds-type-small); line-height: 1.3; color: var(--ds-color-text-muted); text-wrap: balance; overflow-wrap: normal; }
.wx-radar__hl[data-side="end"] { text-align: right; transform: translateX(-100%); }
.wx-radar__hl[data-side="middle"] { text-align: center; transform: translateX(-50%); }
.wx-radar__hl[data-vert="top"][data-side="middle"] { transform: translate(-50%, -100%); }
.wx-radar__hl[data-vert="mid"][data-side="end"] { transform: translate(-100%, -50%); } .wx-radar__hl[data-vert="mid"][data-side="start"] { transform: translateY(-50%); }
.wx-radar__hl:hover, .wx-radar__hl:focus-visible { color: var(--ds-color-text-primary); }
/* tug of war (direct duels) */
.wx-tug { display: grid; gap: var(--ds-space-xxs); padding: var(--ds-space-xs) 0; }
.wx-tug + .wx-tug { margin-top: var(--ds-space-s); }
.wx-tug__label { font-size: var(--ds-type-small); line-height: 1.3; color: var(--ds-color-text-muted); }
.wx-tug__names, .wx-tug__vals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ds-space-m); }
.wx-tug__na { color: var(--cmp-a); } .wx-tug__nb { color: var(--cmp-b); text-align: right; }
.wx-tug__bar { position: relative; display: flex; height: 20px; background: var(--ds-color-surface-row); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); overflow: hidden; }
.wx-tug__a, .wx-tug__b { display: block; height: 100%; transition: transform var(--ds-motion-bar-fill) var(--ds-ease-enter); }
.wx-tug__a { flex: 0 0 calc(var(--s) * 100%); background: var(--cmp-a); transform-origin: 0 50%; }
.wx-tug__b { flex: 1 1 0; background: var(--cmp-b); transform-origin: 100% 50%; border-left: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.wx-chart.is-wait .wx-tug__a, .wx-chart.is-wait .wx-tug__b { transform: scaleX(0); }
.wx-tug__va, .wx-tug__vb, .wx-tug__zero { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-label); line-height: 1.15; font-variant-numeric: tabular-nums; }
.wx-tug__va { color: var(--cmp-a); } .wx-tug__vb { color: var(--cmp-b); text-align: right; } .wx-tug__zero { grid-column: 1 / -1; text-align: center; color: var(--ds-color-text-muted); }
/* form: switcher + plot; three pre-rendered groups cross-fade; Ø lines dashed with their label at the right end */
.wx-form { display: flex; flex-direction: column; gap: var(--ds-space-xs); height: 100%; }
.wx-form__tabs { display: flex; gap: var(--ds-space-xs); flex: none; }
.wx-form__tab { height: 32px; padding: 0 var(--ds-space-s); font: inherit; font-size: var(--ds-type-small); color: var(--ds-color-text-primary); background: var(--ds-color-surface-row); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); cursor: pointer; }
.wx-form__tab[aria-pressed="true"] { background: var(--ds-color-accent-primary); color: var(--ds-color-text-on-primary); }
.wx-form__plot { position: relative; flex: 1 1 auto; min-height: 160px; margin-right: 5.5em; border-left: var(--ds-outline-thin) solid var(--ds-color-outline-soft); border-bottom: var(--ds-outline-thin) solid var(--ds-color-outline-soft); }
.wx-form__g { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--ds-motion-panel-out) var(--ds-ease-exit); }
.wx-form__g.is-on { opacity: 1; pointer-events: auto; transition: opacity var(--ds-motion-panel-in) var(--ds-ease-enter); }
.wx-form__g svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* the plot is stretched (preserveAspectRatio none) with a non-scaling stroke: a dash draw-in would cut the line, so it fades in */
.wx-form__line { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: opacity calc(var(--ds-motion-bar-fill) * 2) var(--ds-ease-smooth); }
.wx-form__line--a { stroke: var(--cmp-a); } .wx-form__line--b { stroke: var(--cmp-b); }
.wx-chart.is-wait .wx-form__line { opacity: 0; }
.wx-form__avg { stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.wx-form__avg--a { stroke: var(--cmp-a); } .wx-form__avg--b { stroke: var(--cmp-b); }
.wx-form__pt { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); pointer-events: none; transition: opacity var(--ds-motion-panel-in) var(--ds-ease-enter); transition-delay: calc(var(--ds-motion-bar-fill) + var(--i, 0) * var(--ds-motion-stagger-tile)); }
.wx-form__pt--a { background: var(--cmp-a); } .wx-form__pt--b { background: var(--cmp-b); border-radius: 50%; }
.wx-chart.is-wait .wx-form__pt { opacity: 0; }
.wx-form__lbl { position: absolute; left: 100%; margin-left: var(--ds-space-xxs); transform: translateY(-50%); font-family: var(--ds-font-display); font-size: var(--ds-type-small); line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wx-form__lbl--a { color: var(--cmp-a); } .wx-form__lbl--b { color: var(--cmp-b); }
.wx-form__col { position: absolute; top: 0; bottom: 0; z-index: 1; }
.wx-form__col:hover, .wx-form__col:focus-visible { background: color-mix(in srgb, var(--ds-color-text-primary) 8%, transparent); }
.wx-form__g.is-on .wx-form__lbl { z-index: 2; }
/* modes: two 100 % bands (A over B, the player colour as the leading edge) and a 6-slot legend */
.wx-modes__band { display: flex; height: 28px; box-sizing: border-box; background: var(--ds-color-surface-row); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); border-left-width: 10px; overflow: hidden; }
.wx-modes__band--a { border-left-color: var(--cmp-a); } .wx-modes__band--b { border-left-color: var(--cmp-b); border-top: 0; }
.wx-modes__seg { flex: 0 0 calc(var(--w) * 100%); background: var(--c); transform-origin: 0 50%; transition: transform var(--ds-motion-bar-fill) var(--ds-ease-enter); transition-delay: calc(var(--i) * var(--ds-motion-stagger-tile)); }
.wx-modes__seg + .wx-modes__seg { border-left: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.wx-chart.is-wait .wx-modes__seg { transform: scaleX(0); }
.wx-modes__legend { --cmp-legend-row: calc(var(--ds-type-small) * 1.3 * 2 + 4px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(3, var(--cmp-legend-row)); gap: 4px var(--ds-space-m); margin: 8px 0 0; padding: 0; list-style: none; }
.wx-modes__li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; column-gap: var(--ds-space-xs); align-items: center; min-width: 0; font-size: var(--ds-type-small); line-height: 1.3; }
.wx-modes__li.is-empty { visibility: hidden; }
.wx-modes__sw { width: 12px; height: 12px; background: var(--c); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.wx-modes__name { min-width: 0; overflow-wrap: normal; text-wrap: balance; color: var(--ds-color-text-muted); }
.wx-modes__va, .wx-modes__vb { font-family: var(--ds-font-display); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-modes__va { color: var(--cmp-a); } .wx-modes__vb { color: var(--cmp-b); }
@media (max-width: 720px) {
  .wx-ring svg { width: 96px; }
  .wx-modes__legend { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(6, var(--cmp-legend-row)); }
}
@media (prefers-reduced-motion: reduce) {
  .wx-ring__arc, .wx-tug__a, .wx-tug__b, .wx-form__line, .wx-form__pt, .wx-form__g, .wx-modes__seg, .wx-bf__bars { transition: none !important; }
}

/* ==== site/style.css ==== */
/* BAPBAP Genesis Stats – tracker stylesheet on the Genesis design system (docs/UI.md §11, S30 R2 web-stats).
   Every colour, font, size step, duration and curve comes from tokens.css (generated from shared/ui/tokens.json);
   components and motion live in ds.css. The short names below (--accent, --yellow, --surface …) are the names app.js
   and older markup use; they are only aliases of design-system roles. Class names are the contract with app.js. */

:root {
  /* surfaces: navy panels, ink wells, row tone */
  --bg: var(--ds-color-bg-screen); --bg-2: var(--ds-color-surface-panel-deep);
  --surface: var(--ds-color-surface-panel); --surface-2: color-mix(in srgb, var(--ds-palette-row) 55%, var(--ds-palette-navy));
  --surface-3: var(--ds-color-surface-row); --sunken: var(--ds-color-surface-panel-deep);
  --border: var(--ds-color-outline-ink); --border-2: var(--ds-color-outline-soft);
  --text: var(--ds-color-text-primary); --text-2: color-mix(in srgb, var(--ds-color-text-primary) 80%, transparent); --muted: var(--ds-color-text-muted);
  /* one yellow: the main action / active choice */
  --accent: var(--ds-color-accent-primary); --accent-2: var(--ds-color-text-nav-pressed); --accent-ink: var(--ds-color-text-on-primary);
  --accent-soft: color-mix(in srgb, var(--ds-color-accent-primary) 14%, transparent);
  --blue: var(--ds-color-accent-info); --blue-soft: color-mix(in srgb, var(--ds-color-accent-info) 16%, transparent);
  --green: var(--ds-status-ready); --red: var(--ds-status-loss); --violet: var(--ds-color-accent-secondary); --orange: var(--ds-status-warn);
  --ink: var(--ds-color-outline-ink); --ink-2: var(--ds-color-surface-panel-deep); --navy: var(--ds-color-surface-panel); --navy-2: var(--surface-2); --navy-3: var(--surface-3);
  --yellow: var(--ds-color-accent-primary); --yellow-2: var(--ds-color-text-nav-pressed); --yellow-dark: var(--ds-color-accent-primary-deep);
  --pink: var(--ds-color-accent-hot); --pink-2: var(--ds-palette-storm-pink); --pink-dark: var(--ds-status-loss);
  --cyan: var(--ds-color-accent-info); --cyan-dark: var(--ds-palette-zone-blue);
  --line: var(--border); --line-2: var(--border-2);
  --win: var(--ds-color-accent-primary); --top3: var(--ds-color-accent-info); --loss: var(--ds-status-offline);
  --link: var(--ds-color-accent-link);
  --radius: 0; --radius-sm: 0;
  --font: var(--ds-font-body); --display: var(--ds-font-display);
  --wrap: 1600px; --pad: var(--ds-space-screen-margin-x); --gap: var(--ds-space-l);
  color-scheme: dark;
}
@media (min-width: 2400px) { :root { --wrap: 2000px; } }
html { font-size: var(--ds-type-small); -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--ds-font-body); font-size: var(--ds-type-small); color: var(--text); background: var(--bg); line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--ds-palette-violet-link-hover); }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--ds-font-display); font-weight: 400; line-height: 1.05; }
b, strong { font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--ds-space-s); top: calc(-1 * var(--ds-space-xxxl)); z-index: 100; background: var(--accent); color: var(--accent-ink); padding: var(--ds-space-s) var(--ds-space-m); font-family: var(--ds-font-display); }
.skip:focus { top: var(--ds-space-s); }
:focus-visible { outline: var(--ds-outline-thin) solid var(--accent); outline-offset: var(--ds-outline-thin); }
.muted { color: var(--muted); }
.small { font-size: var(--ds-type-small); }
.num, .tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ---------- backdrop: DsBackground.Scroll (static LobbyBGScroll) under the lobby scrim ---------- */
/* WEBX DR-2: the lobby texture comes after the first view is on screen (html.wx-ready), it is decoration only */
.bg { position: fixed; inset: 0; z-index: -1; background: var(--ds-color-bg-screen); }
.wx-ready .bg { background: var(--ds-color-bg-screen) url("img/ds/lobby-bg-scroll.webp") 50% 0 / 512px auto repeat; }
.bg::after { content: ""; position: absolute; inset: 0; background: var(--ds-color-bg-lobby-scrim); }

/* ---------- header (the page's "top bar") ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: clamp(var(--ds-space-s), 1vw, var(--ds-space-l)); min-height: 88px; padding: var(--ds-space-s) max(var(--pad), calc((100vw - var(--wrap)) / 2)); background: var(--ds-color-surface-panel); border-bottom: var(--ds-outline-bold) solid var(--ds-color-outline-ink); }
.brand { display: flex; align-items: center; gap: var(--ds-space-xs); color: var(--text); flex: none; }
.brand:hover { color: var(--text); }
.brand .crown svg { width: var(--ds-icon-m); height: var(--ds-icon-m); fill: var(--accent); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.logo { font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); line-height: 1; text-transform: uppercase; color: var(--text); text-shadow: 0 var(--ds-outline-thin) 0 var(--ds-color-outline-ink); display: inline-block; }
.logo.small { font-size: var(--ds-type-nav); }
.brand .sub { margin-top: var(--ds-space-xxs); align-self: flex-start; padding: var(--ds-space-xxs) var(--ds-space-xs); font-family: var(--ds-font-display); font-size: var(--ds-type-caption); text-transform: uppercase; color: var(--ds-color-text-primary); background: var(--ds-color-accent-secondary); transform: skewX(var(--ds-skew-chip)); }
.brand .sub > span { display: inline-block; transform: skewX(calc(-1 * var(--ds-skew-chip))); }
.brand .sub em { font-style: normal; }
.menu { flex: 1 1 auto; justify-content: center; }
.search { position: relative; flex: 0 1 280px; min-width: 11.5em; } /* WX-14: never narrower than the placeholder Name#1234 plus the icon */
.search .ico { position: absolute; right: var(--ds-space-s); top: 50%; width: var(--ds-icon-xs); height: var(--ds-icon-xs); transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.search input { width: 100%; height: var(--ds-space-input); padding: 0 var(--ds-space-xl) 0 var(--ds-space-s); border: 0; border-radius: 0; background: var(--ds-color-surface-row); outline: none; box-shadow: inset 0 0 0 var(--ds-outline-thin) transparent; }
.search input::placeholder { color: var(--muted); }
.search input:focus { box-shadow: inset 0 0 0 var(--ds-outline-thin) var(--accent); }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + var(--ds-space-xs)); z-index: 40; margin: 0; padding: var(--ds-space-xxs); list-style: none; background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); max-height: 60vh; overflow: auto; min-width: 280px; }
.suggest li { display: flex; align-items: center; gap: var(--ds-space-s); padding: var(--ds-space-xs); cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--ds-color-surface-row); box-shadow: inset var(--ds-outline-bold) 0 0 var(--accent); }
.suggest .who { flex: 1; min-width: 0; }
.suggest .who b { display: block; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; white-space: nowrap; }
.suggest .who span { color: var(--muted); }
.suggest .hint { justify-content: center; color: var(--muted); cursor: default; }
.suggest .hint:hover { background: none; box-shadow: none; }
.actions { display: flex; align-items: center; gap: var(--ds-space-s); flex: none; }
/* language = currency-style chip (ink pill) */
.lang { height: var(--ds-space-chip); min-width: var(--ds-space-icon-button); padding: 0 var(--ds-space-s); border: 0; border-radius: calc(var(--ds-space-chip) / 2); background: var(--ds-color-surface-panel-deep); color: var(--text); font-family: var(--ds-font-display); font-size: var(--ds-type-small); cursor: pointer; transform: scale(1); transition: transform var(--ds-motion-hover) var(--ds-ease-smooth); }
.lang:hover { transform: scale(var(--ds-motion-hover-scale-icon)); }
.cta { display: inline-flex; align-items: center; height: var(--ds-space-input); padding: 0 var(--ds-space-l); font-family: var(--ds-font-display); font-size: var(--ds-type-small); transform: scale(1); transition: transform var(--ds-motion-hover) var(--ds-ease-smooth); }
.cta:hover { transform: scale(var(--ds-motion-hover-scale-button)); }
.cta:active { transform: translateY(var(--ds-motion-press-y)); transition-duration: var(--ds-motion-press-down); }
.burger { display: none; width: var(--ds-space-icon-button); height: var(--ds-space-icon-button); border: 0; background: var(--ds-color-surface-panel-deep); border-radius: 50%; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: var(--ds-space-xxs); }
.burger i { display: block; width: 18px; height: 3px; background: var(--text); }

/* ---------- layout ---------- */
.app { flex: 1; min-height: 100vh; width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; padding: var(--ds-space-xl) var(--pad) var(--ds-space-xxxl); outline: none; }
.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.g-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
.stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.row { display: flex; align-items: center; gap: var(--ds-space-s); min-width: 0; }
.between { justify-content: space-between; }
.wrap-row { flex-wrap: wrap; }
.mt { margin-top: var(--gap); }
.mb { margin-bottom: var(--gap); }
@media (min-width: 2400px) { .g-main.wide3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- cards (component rules in ds.css) ---------- */
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-s); margin-bottom: var(--ds-space-m); flex-wrap: wrap; }
.card.flush .card-head { padding: var(--ds-space-m) var(--ds-space-l) 0; }
/* card titles = card names (titleS, as written) with a skewed colour tab */
.card-head h2 { display: flex; align-items: center; gap: var(--ds-space-s); min-width: 0; overflow-wrap: anywhere; font-size: var(--ds-type-title-s); color: var(--text); }
.card-head .seg { flex: 0 1 auto; }
.card-head .more { font-family: var(--ds-font-display); font-size: var(--ds-type-small); color: var(--link); white-space: nowrap; }
.card-sub { color: var(--muted); margin: calc(-1 * var(--ds-space-xs)) 0 var(--ds-space-m); }
/* plate = Modern/Beta badge (indigo parallelogram, caption GROSS) */
.plate { display: inline-block; padding: var(--ds-space-xxs) var(--ds-space-xs); background: var(--ds-color-accent-secondary); color: var(--ds-color-text-primary); font-family: var(--ds-font-display); font-size: var(--ds-type-caption); text-transform: uppercase; transform: skewX(var(--ds-skew-chip)); }
.plate > span { display: inline-block; transform: skewX(calc(-1 * var(--ds-skew-chip))); }
/* pill = ink chip, round ends */
.pill { display: inline-flex; align-items: center; gap: var(--ds-space-xs); height: 28px; padding: 0 var(--ds-space-s); border: 0; border-radius: 14px; background: var(--ds-color-surface-panel-deep); color: var(--text-2); white-space: nowrap; }
.pill.gold { color: var(--accent); }
.pill.pink { color: var(--pink); }
.pill.cyan { color: var(--cyan); }
.pull { display: inline-flex; justify-content: center; min-width: 84px; padding: var(--ds-space-xxs) var(--ds-space-xs); font-family: var(--ds-font-display); font-size: var(--ds-type-caption); text-transform: uppercase; color: var(--ds-color-text-on-card); background: var(--ds-rarity-common); transform: skewX(var(--ds-skew-chip)); }
.pull.r1 { background: var(--ds-rarity-common); } .pull.r2 { background: var(--ds-rarity-uncommon); } .pull.r3 { background: var(--ds-rarity-rare); } .pull.r4 { background: var(--ds-rarity-epic); } .pull.r5 { background: var(--ds-rarity-legendary); }
.pull.r0 { background: var(--ds-status-offline); }
.pill .dot { width: var(--ds-space-xs); height: var(--ds-space-xs); border-radius: 50%; background: var(--ds-status-online); }
.pill .dot.off { background: var(--ds-status-offline); }

/* ---------- page head / overview hero ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-m); margin-bottom: var(--ds-space-l); flex-wrap: wrap; }
.page-head h1 { font-size: var(--ds-type-headline); text-transform: uppercase; text-shadow: 0 var(--ds-outline-bold) 0 var(--ds-color-outline-ink); }
.page-head .kicker { display: inline-block; margin-bottom: var(--ds-space-s); }
.page-head .kicker { padding: var(--ds-space-xxs) var(--ds-space-xs); background: var(--ds-color-accent-secondary); font-family: var(--ds-font-display); font-size: var(--ds-type-caption); text-transform: uppercase; transform: skewX(var(--ds-skew-chip)); }
.page-head p { margin: var(--ds-space-xs) 0 0; color: var(--text-2); max-width: 70ch; }
.hero { position: relative; overflow: hidden; padding: var(--ds-space-xl); background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); }
.hero > *:not(.ds-hero__accent):not(.ds-hero__bgname) { position: relative; }
.hero.ds-hero--char { background: transparent; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 34%); gap: var(--ds-space-l); align-items: center; }
.hero h1 { font-size: var(--ds-type-headline); text-transform: uppercase; }
.hero .lead { margin: var(--ds-space-s) 0 0; color: var(--text); max-width: 62ch; text-shadow: 0 var(--ds-outline-thin) 0 var(--ds-color-outline-ink); }
.hero .pills { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); margin-bottom: var(--ds-space-m); align-items: center; }
.hero-art { position: relative; height: 100%; min-height: 260px; }
.hero-art .art { position: absolute; inset: calc(-1 * var(--ds-space-xl)) calc(-1 * var(--ds-space-xl)) calc(-1 * var(--ds-space-xl)) 0; }
.hero-art .caption { position: absolute; right: 0; bottom: 0; text-align: right; z-index: 1; }
.hero-art .caption b { display: block; margin-top: var(--ds-space-xs); font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); text-shadow: 0 var(--ds-outline-thin) 0 var(--ds-color-outline-ink); }
.hero-art .caption .pill { margin-top: var(--ds-space-xs); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ds-space-s); margin-top: var(--ds-space-l); }
.hero .kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.kpi .v { font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); line-height: 1.05; white-space: nowrap; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kpi .l { margin-top: var(--ds-space-xs); color: var(--muted); }
.kpi .s { margin-top: var(--ds-space-xxs); color: var(--text-2); white-space: nowrap; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; }
.card .kpi .s { white-space: normal; }
.kpi.accent .v { color: var(--text); }

/* ---------- portraits (game head portraits, skewed like the character tiles) ---------- */
.pic { position: relative; flex: none; width: 44px; height: 44px; overflow: hidden; background: color-mix(in srgb, var(--c, var(--ds-color-accent-secondary)) 55%, var(--ds-palette-navy)); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); display: grid; place-items: center; font-family: var(--ds-font-display); color: var(--text); }
.pic img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.pic.render img { width: auto; height: auto; max-width: none; }
.pic .ini { position: relative; }
.pic.has-img .ini { visibility: hidden; }
.pic.xs { width: 28px; height: 28px; font-size: var(--ds-type-caption); }
.pic.sm { width: 36px; height: 36px; }
.pic.lg { width: 64px; height: 64px; font-size: var(--ds-type-nav); }
.pic.xl { width: 104px; height: 104px; font-size: var(--ds-type-title-s); border-width: var(--ds-outline-bold); }
.pic.round { border-radius: 50%; }
.art { overflow: hidden; }
.art img { position: absolute; max-width: none; }
.art.stock img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.art.figure img { inset: 6% 4% 0 auto; width: auto; height: 94%; max-width: 100%; object-fit: contain; object-position: right bottom; }
.pic.has-img img[src*="_portrait"] { inset: 0; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; }
.player-chip { display: inline-flex; align-items: center; gap: var(--ds-space-s); min-width: 0; color: var(--text); }
.player-chip .nm { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.player-chip .nm b { overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; white-space: nowrap; }
.player-chip .nm small { color: var(--muted); font-size: var(--ds-type-small); overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; white-space: nowrap; }
a.player-chip:hover b { color: var(--accent); }
.tag { color: var(--muted); }

/* ---------- mode badge ---------- */
.mode { display: inline-flex; align-items: center; gap: var(--ds-space-xs); min-width: 0; }
.mode .mi { flex: none; width: 28px; height: 28px; display: grid; place-items: center; background: var(--m); color: var(--ds-color-outline-ink); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); transform: skewX(var(--ds-skew-card)); }
.mode .mi svg { width: var(--ds-icon-xs); height: var(--ds-icon-xs); transform: skewX(calc(-1 * var(--ds-skew-card))); }
.mode .mn { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mode .mn b { white-space: nowrap; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; }
.mode .mn small { color: var(--muted); font-size: var(--ds-type-small); white-space: nowrap; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; }

/* ---------- bars / meters (XP bar look: ink frame, ink track, deep-yellow fill) ---------- */
.meter { position: relative; height: var(--ds-space-xs); background: color-mix(in srgb, var(--ds-color-outline-ink) 60%, transparent); overflow: hidden; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--b, var(--ds-color-accent-info)); }
.meter.thin { height: var(--ds-space-xxs); }
.meter.gold i { background: var(--ds-color-accent-primary-deep); }
.meter.cyan i { background: var(--ds-color-accent-info); }
.meter.green i { background: var(--ds-status-ready); }
.meter .mark { position: absolute; top: 0; bottom: 0; width: var(--ds-outline-thin); background: var(--ds-color-text-muted); left: var(--at); }
.xp .meter { height: var(--ds-space-s); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.bars { display: flex; flex-direction: column; gap: var(--ds-space-s); }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-xs) var(--ds-space-s); align-items: center; }
.bar-row .meter { grid-column: 1 / -1; }
.bar-row .val { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.bar-row .val small { color: var(--muted); margin-left: var(--ds-space-xs); font-size: var(--ds-type-small); }

/* ---------- tables (component rules in ds.css) ---------- */
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--ds-space-l)); padding: 0 var(--ds-space-l); }
.card.flush .table-wrap { margin: 0; padding: 0; }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl th button { all: unset; cursor: pointer; }
.tbl th button:hover, .tbl th[aria-sort] button { color: var(--text); }
.tbl th[aria-sort="descending"] button::after { content: " ▾"; }
.tbl th[aria-sort="ascending"] button::after { content: " ▴"; }
.tbl tbody tr.link { cursor: pointer; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--ds-color-surface-row) 50%, transparent); }
.tbl tbody tr.me { background: var(--accent-soft); }
.tbl tbody tr.me td:first-child { box-shadow: inset var(--ds-outline-bold) 0 0 var(--accent); }
.tbl td.hl { color: var(--text); font-family: var(--ds-font-display); }
.tbl td small { font-size: var(--ds-type-small); }
.tbl .team-head td { height: auto; padding: var(--ds-space-m) var(--ds-space-s) var(--ds-space-xs); border-bottom: 0; color: var(--muted); }
.tbl .team-head.win td { color: var(--accent); }
/* places: 1–3 as stars (legendary / common / deep yellow), the rest a plain number */
.pos { display: inline-grid; place-items: center; min-width: var(--ds-icon-m); height: var(--ds-icon-m); font-family: var(--ds-font-display); font-size: var(--ds-type-small); font-variant-numeric: tabular-nums; color: var(--text-2); }
.pos.p1, .pos.p2, .pos.p3 { width: var(--ds-icon-m); min-width: 0; color: var(--ds-color-text-on-card); clip-path: polygon(50% 0, 61% 33%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 33%); padding-top: var(--ds-space-xxs); }
.pos.p1 { background: var(--ds-rarity-legendary); }
.pos.p2 { background: var(--ds-rarity-common); }
.pos.p3 { background: var(--ds-color-accent-primary-deep); }

/* ---------- filters + segmented controls (sub tabs) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--ds-space-s) var(--ds-space-m); align-items: flex-end; margin-bottom: var(--ds-space-m); }
.field { display: flex; flex-direction: column; gap: var(--ds-space-xxs); min-width: 0; }
.field > span, .field > label { color: var(--muted); }
.select, .text-input { height: var(--ds-space-input); min-width: 160px; padding: 0 var(--ds-space-xl) 0 var(--ds-space-s); border: 0; border-radius: 0; background: var(--ds-color-surface-row); color: var(--text); appearance: none; outline: none; box-shadow: inset 0 0 0 var(--ds-outline-thin) transparent; }
.select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.select option, .select optgroup { background: var(--ds-palette-navy); color: var(--text); }
.text-input { padding-right: var(--ds-space-s); }
.select:focus, .text-input:focus { box-shadow: inset 0 0 0 var(--ds-outline-thin) var(--accent); }
.seg { display: inline-flex; flex-wrap: nowrap; gap: var(--ds-space-l); max-width: 100%; min-width: 0; padding: var(--ds-space-xxs) var(--ds-space-xxs) 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.seg::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
.seg button, .seg a { position: relative; flex: none; border: 0; background: transparent; color: var(--muted); padding: var(--ds-space-xs) 0 var(--ds-space-s); font-family: var(--ds-font-display); font-size: var(--ds-type-small); text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.seg button:hover, .seg a:hover { color: var(--ds-color-text-nav-hover); }
.seg [aria-pressed="true"], .seg [aria-selected="true"], .seg [aria-current="page"] { color: var(--accent); }
.seg [aria-pressed="true"]::after, .seg [aria-selected="true"]::after, .seg [aria-current="page"]::after, .tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ds-underline-h); background: var(--accent); }
.seg .count { margin-left: var(--ds-space-xs); font-family: var(--ds-font-body); font-size: var(--ds-type-small); color: var(--muted); }
.tabs { display: flex; flex-wrap: nowrap; gap: var(--ds-space-xl); overscroll-behavior-x: contain; margin: var(--ds-space-l) 0; padding: 0 var(--ds-space-xxs); border-bottom: var(--ds-outline-thin) solid var(--ds-color-outline-soft); overflow-x: auto; scrollbar-width: none; }
.tabs a { position: relative; flex: none; padding: var(--ds-space-s) 0 var(--ds-space-m); font-family: var(--ds-font-display); font-size: var(--ds-type-nav); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tabs a:hover { color: var(--ds-color-text-nav-hover); }
.tabs a[aria-current="page"] { color: var(--accent); }
.tabs a small { font-family: var(--ds-font-body); font-size: var(--ds-type-small); text-transform: none; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--ds-space-s); margin-top: var(--ds-space-m); flex-wrap: wrap; }
.pager .info { color: var(--muted); }

/* ---------- lists (feeds), 70 px rows like the friends list ---------- */
.list { display: flex; flex-direction: column; }
.li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ds-space-s); align-items: center; min-height: 56px; padding: var(--ds-space-xs) var(--ds-space-xs); border-bottom: var(--ds-outline-thin) solid var(--ds-color-outline-ink); color: var(--text); }
.li:last-child { border-bottom: 0; }
a.li:hover { background: color-mix(in srgb, var(--ds-color-surface-row) 50%, transparent); box-shadow: inset var(--ds-outline-bold) 0 0 var(--accent); color: var(--text); }
.li .main { min-width: 0; }
.li .main b { display: block; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; white-space: nowrap; }
.li .main small { display: block; color: var(--muted); font-size: var(--ds-type-small); overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; white-space: nowrap; }
.li .side { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.li .side b { display: block; font-family: var(--ds-font-display); font-size: var(--ds-type-nav); }
.li .side small { color: var(--muted); font-size: var(--ds-type-small); }

/* ---------- match rows (.ds-match) ---------- */
.match-list { display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.mrow { position: relative; display: grid; grid-template-columns: var(--ds-space-xs) minmax(170px, 1.1fr) minmax(150px, 1.3fr) minmax(210px, 1.6fr) minmax(120px, 0.8fr) auto; align-items: center; gap: var(--ds-space-m); padding: var(--ds-space-s) var(--ds-space-m) var(--ds-space-s) 0; min-height: var(--ds-space-list-row); color: var(--text); }
a.mrow:hover { color: var(--text); background: color-mix(in srgb, var(--ds-color-surface-row) 60%, var(--ds-palette-navy)); }
.mrow .stripe { align-self: stretch; background: var(--loss); }
.mrow.win .stripe { background: var(--win); }
.mrow.top3 .stripe { background: var(--top3); }
.mrow .res { font-family: var(--ds-font-display); font-size: var(--ds-type-nav); line-height: 1.1; text-transform: uppercase; }
.mrow.win .res { color: var(--accent); }
.mrow.top3 .res { color: var(--cyan); }
.mrow.loss .res { color: var(--text-2); }
.mrow .res small { display: block; margin-top: var(--ds-space-xxs); font-family: var(--ds-font-body); font-size: var(--ds-type-small); text-transform: none; color: var(--muted); }
.mrow .stats { display: flex; gap: var(--ds-space-l); font-variant-numeric: tabular-nums; }
.mrow .stats > div { display: flex; flex-direction: column; line-height: 1.2; }
.mrow .stats > div.row { flex-direction: row; }
.mrow .stats b { font-family: var(--ds-font-display); font-size: var(--ds-type-small); }
.mrow .stats span { color: var(--muted); }
.mrow .meta { color: var(--muted); text-align: right; white-space: nowrap; }
.mrow .meta b { display: block; color: var(--text-2); }
.mrow .toggle { width: var(--ds-icon-m); height: var(--ds-icon-m); border: 0; border-radius: 50%; background: var(--ds-color-surface-panel-deep); cursor: pointer; display: grid; place-items: center; color: var(--text); transform: scale(1); transition: transform var(--ds-motion-hover) var(--ds-ease-smooth); }
.mrow .toggle:hover { transform: scale(var(--ds-motion-hover-scale-icon)); }
.mrow .toggle svg { width: var(--ds-icon-xs); height: var(--ds-icon-xs); transition: transform var(--ds-motion-select) var(--ds-ease-enter); }
.mrow .toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mrow .winners { display: flex; align-items: center; gap: var(--ds-space-xs); min-width: 0; }
.stack-pics { display: flex; flex: none; }
.stack-pics .pic { margin-left: -10px; }
.stack-pics .pic:first-child { margin-left: 0; }
.stack-pics .pic.xs { margin-left: -7px; }
.stack-pics .pic.xs:first-child { margin-left: 0; }
.mrow .winners .nm, .mrow .mvp .nm { min-width: 0; line-height: 1.25; }
.mrow .winners .nm b, .mrow .mvp .nm b { display: block; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; white-space: nowrap; }
.mrow .winners .nm small, .mrow .mvp .nm small { color: var(--muted); font-size: var(--ds-type-small); }
.mrow.brow { grid-template-columns: var(--ds-space-xs) minmax(190px, 1.1fr) minmax(220px, 1.6fr) minmax(150px, 1fr) minmax(140px, auto); }
.mrow.brow .stripe { background: var(--fam, var(--loss)); }
.mrow .mvp { display: flex; align-items: center; gap: var(--ds-space-xs); min-width: 0; }
.mrow.brow .meta b { color: var(--text); }
.mdetail { margin: calc(-1 * var(--ds-space-xs)) 0 var(--ds-space-xxs); padding: var(--ds-space-m); background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); border-top: 0; }
.mdetail .actions-row { display: flex; justify-content: flex-end; margin-top: var(--ds-space-s); }

/* ---------- characters ---------- */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ds-space-grid-gap-y) var(--ds-space-grid-gap-x); }
.ccard { position: relative; display: flex; flex-direction: column; gap: var(--ds-space-s); padding: var(--ds-space-m); background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); color: var(--text); overflow: hidden; }
.ccard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--ds-space-xs); background: var(--c); }
.ccard:hover { color: var(--text); }
.ccard .top-row { display: flex; align-items: center; gap: var(--ds-space-s); padding-right: var(--ds-space-xxl); }
.ccard .top-row > div { min-width: 0; }
.ccard h3 { overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-type-nav); }
.ccard .sub { color: var(--muted); }
.ccard .tier { position: absolute; top: var(--ds-space-m); right: var(--ds-space-m); }
.ccard.dim { opacity: 0.55; }
.tier-badge { display: inline-grid; place-items: center; width: var(--ds-icon-m); height: var(--ds-icon-m); font-family: var(--ds-font-display); font-size: var(--ds-type-small); color: var(--ds-color-text-on-card); background: var(--t, var(--ds-status-offline)); transform: skewX(var(--ds-skew-card)); }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-xs); }
.mini-stats div { padding: var(--ds-space-xs); background: var(--ds-color-surface-panel-deep); text-align: center; }
.mini-stats b { display: block; font-family: var(--ds-font-display); font-size: var(--ds-type-small); font-variant-numeric: tabular-nums; }
.mini-stats span { color: var(--muted); }
.tierlist { display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.tier-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--ds-space-s); align-items: center; padding: var(--ds-space-xs); background: var(--ds-color-surface-panel-deep); }
.tier-row .tier-badge { width: var(--ds-space-icon-button); height: var(--ds-space-icon-button); font-size: var(--ds-type-nav); }
.tier-row .chars { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); }
.tier-row .chars a { display: inline-flex; align-items: center; gap: var(--ds-space-xs); padding: var(--ds-space-xxs) var(--ds-space-s) var(--ds-space-xxs) var(--ds-space-xxs); background: var(--ds-color-surface-row); color: var(--text); }
.tier-row .chars a span { color: var(--muted); }

/* ---------- profile / character header (.ds-hero--char, ds.css) ---------- */
.profile-hero { position: relative; min-height: 280px; padding: var(--ds-space-xl); display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 32%); gap: var(--ds-space-l); }
.profile-hero:not(.ds-hero--char) { background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); }
.profile-hero > *:not(.ds-hero__accent):not(.ds-hero__bgname) { position: relative; }
.profile-id { display: flex; gap: var(--ds-space-l); align-items: center; min-width: 0; }
.avatar-wrap { position: relative; flex: none; }
.lvl-ring { position: absolute; inset: -8px; }
.lvl-ring circle { fill: none; stroke-width: 5; }
.lvl-badge { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%) skewX(var(--ds-skew-chip)); padding: var(--ds-space-xxs) var(--ds-space-xs); background: var(--ds-color-surface-panel-deep); color: var(--text); font-family: var(--ds-font-display); font-size: var(--ds-type-caption); text-transform: uppercase; white-space: nowrap; }
.profile-id h1 { font-size: var(--ds-type-headline); text-transform: uppercase; word-break: break-word; }
.profile-id h1 .tag { font-family: var(--ds-font-body); font-size: var(--ds-type-nav); color: var(--text); margin-left: var(--ds-space-xs); text-transform: none; }
.profile-id .pills { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); margin-top: var(--ds-space-s); align-items: center; }
.profile-id .xp { margin-top: var(--ds-space-m); max-width: 460px; }
.profile-id .xp .t { margin-top: var(--ds-space-xxs); color: var(--text); text-shadow: 0 var(--ds-outline-thin) 0 var(--ds-color-outline-ink); }
.copy-btn { margin-left: var(--ds-space-xs); vertical-align: middle; width: var(--ds-icon-m); height: var(--ds-icon-m); border: 0; border-radius: 50%; background: var(--ds-color-surface-panel-deep); cursor: pointer; display: inline-grid; place-items: center; color: var(--text); transform: scale(1); transition: transform var(--ds-motion-hover) var(--ds-ease-smooth); }
.copy-btn:hover { transform: scale(var(--ds-motion-hover-scale-icon)); }
.copy-btn svg { width: 14px; height: 14px; }
.profile-art { position: relative; min-height: 240px; }
.profile-art .art { position: absolute; inset: calc(-1 * var(--ds-space-xl)) calc(-1 * var(--ds-space-xl)) calc(-1 * var(--ds-space-xl)) calc(-1 * var(--ds-space-s)); }
.form { display: flex; gap: var(--ds-space-xxs); flex-wrap: wrap; }
.form span { width: 28px; height: 28px; display: grid; place-items: center; font-family: var(--ds-font-display); font-size: var(--ds-type-small); background: var(--ds-color-surface-row); color: var(--muted); transform: skewX(var(--ds-skew-card)); }
.form span.W { background: var(--accent); color: var(--accent-ink); }
.form span.T { background: var(--cyan); color: var(--ds-color-text-on-card); }
.rating { display: flex; align-items: center; gap: var(--ds-space-m); }
.rating .big, .big { font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); line-height: 1; }
.tier-name { font-family: var(--ds-font-display); text-transform: uppercase; }
.t-bronze { --t: var(--ds-color-accent-primary-deep); } .t-silver { --t: var(--ds-rarity-common); } .t-gold { --t: var(--ds-rarity-legendary); } .t-platinum { --t: var(--ds-status-in-game); } .t-diamond { --t: var(--ds-rarity-rare); } .t-genesis { --t: var(--ds-rarity-epic); }
.tier-name.t-bronze, .tier-name.t-silver, .tier-name.t-gold, .tier-name.t-platinum, .tier-name.t-diamond, .tier-name.t-genesis { color: var(--t); }
.rival { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ds-space-s); align-items: center; padding: var(--ds-space-xs) 0; border-bottom: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.rival:last-child { border-bottom: 0; }
.rival .cnt { font-family: var(--ds-font-display); font-size: var(--ds-type-nav); }
.records { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ds-space-s); }
.record { position: relative; display: flex; flex-direction: column; gap: var(--ds-space-xxs); padding: var(--ds-space-m); background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); color: var(--text); min-width: 0; }
a.record:hover { color: var(--text); }
.record .rl { color: var(--muted); }
.record b { font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.record .who { display: flex; align-items: center; gap: var(--ds-space-xs); color: var(--text-2); min-width: 0; }
.record .who span { overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; white-space: nowrap; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ds-space-s); }
.ach { display: flex; flex-direction: column; gap: var(--ds-space-xs); padding: var(--ds-space-m); background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.ach.done { box-shadow: inset var(--ds-outline-bold) 0 0 var(--ds-rarity-legendary); }
.ach .h { display: flex; justify-content: space-between; gap: var(--ds-space-xs); align-items: flex-start; }
.ach p { margin: 0; color: var(--text-2); }
.ach .tiers { display: flex; gap: var(--ds-space-xxs); }
.ach .tiers i { flex: 1; height: var(--ds-space-xxs); background: var(--ds-color-surface-row); }
.ach .tiers i.on { background: var(--ds-color-accent-primary-deep); }
.ach .foot-line { display: flex; justify-content: space-between; color: var(--muted); }
.quest { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-xs) var(--ds-space-s); padding: var(--ds-space-s) 0; border-bottom: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.quest:last-child { border-bottom: 0; }
.quest .meter { grid-column: 1 / -1; }
.quest.done b { color: var(--green); }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-s); }
.slot { padding: var(--ds-space-s); background: var(--ds-color-surface-panel-deep); border-top: var(--ds-outline-bold) solid var(--sc); }
.slot .k { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--ds-space-xs); }
.slot .k b { font-family: var(--ds-font-display); color: var(--sc); }
.slot .k b { min-width: 0; }
.slot .k span { flex: none; white-space: nowrap; font-family: var(--ds-font-display); } /* W-O10: "46,5 %" never breaks */
.slot .n { margin-top: var(--ds-space-xs); color: var(--muted); }
.icon-list { display: flex; flex-wrap: wrap; gap: var(--ds-space-s); }
.icon-item { display: flex; align-items: center; gap: var(--ds-space-s); padding: var(--ds-space-xxs) var(--ds-space-s) var(--ds-space-xxs) var(--ds-space-xxs); background: var(--ds-color-surface-panel-deep); min-width: 0; }
.icon-item img { width: 40px; height: 40px; object-fit: contain; background: var(--ds-color-surface-row); }
.icon-item small { color: var(--muted); font-size: var(--ds-type-small); display: block; }

/* ---------- charts ---------- */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart [data-chart] { width: 100%; }
.chart .ax { fill: var(--muted); font-size: var(--ds-type-caption); font-family: var(--ds-font-body); }
.chart .grid-line { stroke: var(--ds-color-outline-soft); }
.chart g.pt:hover rect.bar { opacity: 0.75; }
.legend { display: flex; flex-wrap: wrap; gap: var(--ds-space-m); color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: var(--ds-space-xs); }
.legend i { width: 12px; height: var(--ds-space-xs); background: var(--c); }
.legend i.line { height: 3px; }
.donut { position: relative; flex: none; width: 128px; height: 128px; border-radius: 50%; }
.donut::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--ds-palette-navy); }
.donut .c { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.donut .c b { font-family: var(--ds-font-display); font-size: var(--ds-type-nav); }
.donut .c span { color: var(--muted); }
.heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; color: var(--muted); font-size: var(--ds-type-caption); }
.heat i { aspect-ratio: 1; background: color-mix(in srgb, var(--ds-color-text-primary) 5%, transparent); }
.heat .hl { display: flex; align-items: center; }
.heat .hh { text-align: center; }

/* ---------- podium ---------- */
.podium { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: var(--ds-space-m); align-items: end; margin-bottom: var(--ds-space-l); }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-xs); padding: var(--ds-space-l) var(--ds-space-m) var(--ds-space-m); background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); color: var(--text); text-align: center; min-width: 0; }
.pod:hover { color: var(--text); }
.pod.p1 { padding-top: var(--ds-space-xl); box-shadow: inset 0 var(--ds-space-xs) 0 var(--ds-rarity-legendary), var(--ds-shadow-hard); }
.pod.p2 { box-shadow: inset 0 var(--ds-space-xs) 0 var(--ds-rarity-common), var(--ds-shadow-hard); }
.pod.p3 { box-shadow: inset 0 var(--ds-space-xs) 0 var(--ds-color-accent-primary-deep), var(--ds-shadow-hard); }
.pod .pos { position: absolute; top: calc(-1 * var(--ds-space-m)); }
.pod .who { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.pod .val { font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.pod .lbl { color: var(--muted); }

/* ---------- live ---------- */
.live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-s); margin-bottom: var(--ds-space-s); }
.live-grid div { padding: var(--ds-space-s); background: var(--ds-color-surface-panel-deep); text-align: center; }
.live-grid b { display: block; font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); line-height: 1.05; font-variant-numeric: tabular-nums; }
.live-grid span { color: var(--muted); }

/* ---------- states ---------- */
.state { max-width: 640px; margin: var(--ds-space-xxl) auto; text-align: center; padding: var(--ds-space-xl); }
.state h1 { font-size: var(--ds-type-title-s); margin-bottom: var(--ds-space-s); }
.state p { color: var(--text-2); margin: 0 0 var(--ds-space-l); }
.state .row { justify-content: center; flex-wrap: wrap; }
.state .big-ico { width: 64px; height: 64px; margin: 0 auto var(--ds-space-m); display: grid; place-items: center; border-radius: 50%; background: var(--ds-color-surface-panel-deep); color: var(--accent); }
.state .big-ico svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 2; }
.onboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-s); margin-top: var(--ds-space-l); text-align: left; }
.onboard div { padding: var(--ds-space-m); background: var(--ds-color-surface-panel-deep); }
.onboard b { display: block; font-family: var(--ds-font-display); margin-bottom: var(--ds-space-xxs); }
.onboard span { color: var(--text-2); }
.sk { position: relative; overflow: hidden; background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); }
.sk { max-width: 100%; }
.sk-line { height: 14px; margin: var(--ds-space-s) 0; border-width: 0; }
.sk-card { height: 260px; }
.sk-hero { height: 280px; }
/* toast (Toast: ink plate, top right under the header, slides in 350 px from the right) */
.toast { position: fixed; right: var(--pad); top: 120px; z-index: 60; min-width: 280px; padding: var(--ds-space-m) var(--ds-space-l); background: var(--ds-color-surface-panel-deep); border-left: var(--ds-outline-bold) solid var(--ds-status-ready); color: var(--text); box-shadow: var(--ds-shadow-hard); animation: ds-toast-in var(--ds-motion-toast-in) var(--ds-ease-enter) both; }
/* WEBX DR-2: the podium card with the leader's art (the LCP element of the leaderboards) pops in scale only, it never
   starts transparent */
.pod--lead.ds-pop { animation-name: wx-pop-scale; }
@keyframes wx-pop-scale { from { transform: scale(var(--ds-motion-pop-scale)); } to { transform: scale(1); } }
@keyframes ds-toast-in { from { opacity: 0; transform: translateX(var(--ds-motion-toast-offset)); } to { opacity: 1; transform: translateX(0); } }

/* ---------- footer ---------- */
.foot { border-top: var(--ds-outline-bold) solid var(--ds-color-outline-ink); background: var(--ds-color-surface-panel-deep); }
.foot-inner { max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; padding: var(--ds-space-l) var(--pad) var(--ds-space-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-m) var(--ds-space-xl); flex-wrap: wrap; }
.foot-links { display: flex; gap: var(--ds-space-l); flex-wrap: wrap; }
.foot-links a { color: var(--muted); font-family: var(--ds-font-display); text-transform: uppercase; }
.foot-links a:hover { color: var(--ds-color-text-nav-hover); }
.foot-note { color: var(--muted); }

/* ---------- compare (#/compare) ---------- */
.compare-form { align-items: flex-end; }
.compare-form .field { min-width: 200px; flex: 1 1 200px; }
.compare-form input.select { width: 100%; background-image: none; }
.cmp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--gap); align-items: center; margin-top: var(--gap); }
.cmp-side { position: relative; display: flex; align-items: center; gap: var(--ds-space-m); padding: var(--ds-space-l); background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: inset var(--ds-space-xs) 0 0 var(--c), var(--ds-shadow-hard); color: var(--text); min-width: 0; }
.cmp-side.b { flex-direction: row-reverse; text-align: right; box-shadow: inset calc(-1 * var(--ds-space-xs)) 0 0 var(--c), var(--ds-shadow-hard); }
.cmp-side b { display: block; font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; white-space: nowrap; }
.cmp-side > div { min-width: 0; }
.cmp-side small { color: var(--muted); }
.cmp-side:hover { color: var(--text); }
.cmp-vs { font-family: var(--ds-font-display); font-size: var(--ds-type-headline); color: var(--accent); text-shadow: 0 var(--ds-outline-bold) 0 var(--ds-color-outline-ink); }
.cmp-tbl td, .cmp-tbl th { width: 38%; }
.cmp-tbl td.c, .cmp-tbl th.c { width: 24%; text-align: center; }
.cmp-tbl td.c .small { display: block; margin-bottom: var(--ds-space-xxs); }
.cmp-tbl td.win { color: var(--accent); font-family: var(--ds-font-display); }
.cmp-bar { display: block; height: var(--ds-space-xxs); background: var(--violet); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; background: var(--ds-color-accent-primary-deep); }
.cmp-bar.big { height: var(--ds-space-s); flex: 1; }
.cmp-h2h { display: flex; align-items: center; gap: var(--ds-space-m); }
.cmp-h2h > div { display: grid; text-align: center; min-width: 90px; }
.cmp-h2h b { font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); line-height: 1; }
.cmp-h2h span { color: var(--muted); }

/* ---------- ranks as in the game's RANKINGS tab (tier badges, rarity colours) ---------- */
.rk { display: inline-block; white-space: nowrap; padding: var(--ds-space-xxs) var(--ds-space-xs); font-family: var(--ds-font-display); font-size: var(--ds-type-caption); text-transform: uppercase; color: var(--ds-color-text-on-card); background: var(--rk); transform: skewX(var(--ds-skew-chip)); }
.rk-0 { --rk: var(--ds-status-offline); } .rk-1 { --rk: var(--ds-color-accent-primary-deep); } .rk-2 { --rk: var(--ds-rarity-common); } .rk-3 { --rk: var(--ds-rarity-legendary); }
.rk-4 { --rk: var(--ds-status-in-game); } .rk-5 { --rk: var(--ds-rarity-rare); } .rk-6 { --rk: var(--ds-rarity-epic); } .rk-7 { --rk: var(--ds-color-accent-hot); }

/* ---------- level minimaps next to map names, rogue chips ---------- */
.mapimg { flex: none; display: block; width: 34px; height: 34px; object-fit: cover; background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.mapimg.none { background: repeating-linear-gradient(135deg, var(--ds-color-surface-row) 0 6px, var(--ds-color-surface-panel-deep) 6px 12px); }
.mode-cell { display: flex; align-items: center; gap: var(--ds-space-s); min-width: 0; }
.map-mode { position: relative; display: block; width: 40px; height: 40px; flex: none; }
.map-mode .mapimg { width: 40px; height: 40px; }
.map-mode .mi { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; display: grid; place-items: center; background: var(--m); color: var(--ds-color-outline-ink); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.map-mode .mi svg { width: 12px; height: 12px; }
.hero-map { position: absolute; left: 0; top: 0; z-index: 0; }
.hero-map .mapimg.big { width: 132px; height: 132px; border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); transform: rotate(-4deg); }
.hero-map .mapimg.none { display: none; }
.hero-art .art, .hero-art .caption { z-index: 1; }
.aug-chips { display: flex !important; flex-wrap: wrap; gap: var(--ds-space-xxs); white-space: normal !important; }
.aug-chips .chip { padding: 1px var(--ds-space-xs); background: var(--ds-color-surface-row); color: var(--text-2); transform: skewX(var(--ds-skew-chip)); }
.aug-chips .chip.t2 { color: var(--ds-rarity-rare); } .aug-chips .chip.t3 { color: var(--ds-rarity-epic); } .aug-chips .chip.t4 { color: var(--ds-rarity-legendary); }
.aug-chips .chip.boss { color: var(--pink); } .aug-chips .chip.pact { color: var(--ds-palette-violet-link); }
.aug-chips .chip.item { background: transparent; box-shadow: inset 0 0 0 1px var(--ds-color-outline-soft); }
.tn { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--ds-space-m); align-items: start; }
.tn:not(:has(.tn-img)) { grid-template-columns: minmax(0, 1fr); }
.tn-img { width: 100%; display: block; }
.tn-body { display: grid; gap: var(--ds-space-s); min-width: 0; }
.heat-map { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; overflow: hidden; background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); }
.heat-map .mapimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; border: 0; }
.heat-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); }
.heat-grid i { background: color-mix(in srgb, var(--ds-color-accent-hot) calc(var(--a) * 100%), transparent); }
.pos-heat { min-width: 0; }
.timeline { position: relative; height: 54px; margin: var(--ds-space-xs) var(--ds-space-xxs) 0; border-bottom: var(--ds-outline-thin) solid var(--ds-color-outline-soft); }
.tl-kill { position: absolute; bottom: var(--ds-space-xs); width: var(--ds-space-xxs); height: 26px; margin-left: -2px; background: var(--sc); }
.tl-axis { position: absolute; left: 0; right: 0; bottom: -22px; display: flex; justify-content: space-between; color: var(--text-2); }
.zone-tl { position: relative; height: 44px; margin: var(--ds-space-xs) var(--ds-space-xxs) var(--ds-space-xl); border-bottom: var(--ds-outline-thin) solid var(--ds-color-outline-soft); }
.zone-tl .zn-wait, .zone-tl .zn-shrink { position: absolute; bottom: var(--ds-space-xs); height: 22px; min-width: 2px; }
.zone-tl .zn-wait { background: color-mix(in srgb, var(--ds-color-accent-secondary) 30%, transparent); }
.zone-tl .zn-shrink { background: var(--violet); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.zone-tl .zn-shrink b { font-family: var(--ds-font-display); font-size: var(--ds-type-caption); color: var(--text); }
.art.r2-portrait picture { display: contents; }
.aug-dot { flex: none; width: 40px; height: 40px; background: var(--ds-color-surface-row); }
.aug-dot.t2 { background: color-mix(in srgb, var(--ds-rarity-rare) 35%, var(--ds-palette-navy)); } .aug-dot.t3 { background: color-mix(in srgb, var(--ds-rarity-epic) 35%, var(--ds-palette-navy)); } .aug-dot.t4 { background: color-mix(in srgb, var(--ds-rarity-legendary) 35%, var(--ds-palette-navy)); }

/* ---------- responsive ---------- */
@media (max-width: 1320px) {
  .mrow { grid-template-columns: var(--ds-space-xs) minmax(140px, 1fr) minmax(150px, 1.2fr) minmax(190px, 1.5fr) auto; }
  .mrow .meta { display: none; }
  .mrow.brow { grid-template-columns: var(--ds-space-xs) minmax(170px, 1fr) minmax(200px, 1.5fr) minmax(140px, 1fr) minmax(120px, auto); }
  .mrow.brow .meta { display: block; }
}
/* the full nav needs ~1800 px next to search and CTA. 768–1599 px (web-fix S3, docs/UI.md §11.2): the visible top nav
   with the gliding yellow underline moves to its own row under the header, one line that scrolls sideways when it does
   not fit, smaller type below 1200 px. The burger panel is only for phones (< 768 px). */
@media (max-width: 1599px) {
  .top { flex-wrap: wrap; gap: var(--ds-space-s) var(--ds-space-m); }
  .actions { order: 3; }
  .search { order: 1; margin-left: auto; }
  .menu { order: 5; flex: 1 0 100%; justify-content: flex-start; padding-bottom: var(--ds-space-xs); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  /* same place under the tab as in the header row; the extra padding keeps the bar inside the scrolling row */
  .menu .ds-nav__bar { bottom: calc(var(--ds-space-s) - var(--ds-underline-offset) - var(--ds-underline-h) + var(--ds-space-xxs) + var(--ds-space-xs)); }
}
@media (max-width: 1199px) {
  .menu { gap: var(--ds-space-m); }
  .menu a { font-size: var(--ds-type-small); }
}
@media (max-width: 767px) {
  .burger { display: flex; order: 2; }
  .menu { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 var(--ds-space-s); overflow: visible; }
  .menu.open { display: flex; }
  .menu a { padding: var(--ds-space-s) var(--ds-space-m); font-size: var(--ds-type-nav); }
  .menu a[aria-current="page"] { box-shadow: inset var(--ds-underline-h) 0 0 var(--accent); }
  .ds-nav__bar { display: none; }
}
@media (max-width: 1180px) {
  .g-main, .g-side { grid-template-columns: minmax(0, 1fr); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* WEBX DR-2 (CLS): on phones the language switcher and the CTA never fit next to brand and burger; they get their own row
   from the start, not only once the switcher is mounted and the CTA translated */
@media (max-width: 479px) {
  .actions { flex: 1 0 100%; }
}
@media (max-width: 960px) {
  :root { --pad: var(--ds-space-m); --gap: var(--ds-space-m); }
  .top { min-height: 0; padding-top: var(--ds-space-xs); padding-bottom: var(--ds-space-xs); }
  .search { order: 4; flex: 1 0 100%; margin: 0; }
  .brand { margin-right: auto; }
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .hero-grid, .profile-hero { grid-template-columns: minmax(0, 1fr); }
  .hero-art, .profile-art { display: none; }
  .onboard { grid-template-columns: minmax(0, 1fr); }
  .mrow { grid-template-columns: var(--ds-space-xs) minmax(0, 1fr) auto; grid-template-areas: "s res tg" "s mode tg" "s st tg"; gap: var(--ds-space-xs) var(--ds-space-s); }
  .mrow .stripe { grid-area: s; }
  .mrow .res { grid-area: res; display: flex; align-items: baseline; gap: var(--ds-space-s); }
  .mrow .res small { margin-top: 0; }
  .mrow .mode-cell { grid-area: mode; }
  .mrow .stats, .mrow .winners { grid-area: st; }
  .mrow .toggle, .mrow .go { grid-area: tg; }
  .mrow.brow { grid-template-columns: var(--ds-space-xs) minmax(0, 1fr) auto; grid-template-areas: "s mode meta" "s st st"; }
  .mrow.brow .meta { display: block; grid-area: meta; }
  .mrow .second { display: none; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-xs); }
  .pod { padding: var(--ds-space-l) var(--ds-space-xs) var(--ds-space-s); }
  .pod .pic.lg { width: 48px; height: 48px; }
  .tbl .hide-sm { display: none; }
  /* a smaller character figure under the head on phones/tablets (L10 portraits only) */
  .hero-art:has(.r2-portrait), .profile-art:has(.r2-portrait) { display: block; height: 220px; min-height: 0; }
  .hero-art:has(.r2-portrait) .art, .profile-art:has(.r2-portrait) .art { inset: 0; }
  .art.figure.r2-portrait img { inset: 4% 0 0 0; margin: 0 auto; object-position: center bottom; }
  .hero-art:has(.r2-portrait) .hero-map { display: none; }
}
/* phones: headline steps down to title, card names to nav (still 5 steps per screen) */
@media (max-width: 560px) {
  .logo { font-size: var(--ds-type-nav); }
  .brand .crown { display: none; }
  .hero, .profile-hero { padding: var(--ds-space-l) var(--ds-space-m); }
  .hero h1, .page-head h1, .profile-id h1 { font-size: var(--ds-type-title); }
  .card-head h2 { font-size: var(--ds-type-nav); }
  .ds-hero__bgname:not(.wx-fitname) { transform: translate(-2%, -50%) scale(0.45); transform-origin: 0 50%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-xs); }
  .card { padding: var(--ds-space-m); }
  .table-wrap { margin: 0 calc(-1 * var(--ds-space-m)); padding: 0 var(--ds-space-m); }
  .tbl th, .tbl td { padding: 0 var(--ds-space-xs); }
  .tbl .hide-xs { display: none; }
  .profile-id { flex-direction: column; align-items: flex-start; gap: var(--ds-space-m); }
  .pod .lbl { display: none; }
  .filters .field, .filters .select { width: 100%; }
  /* W-O1 rest (web-fix S8): the select filters sit two per row without the visible caption (the label element keeps the
     accessible name; the select shows its value, e.g. "All modes"), so the board starts higher on the phone */
  .filters[data-filters] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-xs); }
  .filters[data-filters] .field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .filters[data-filters] .select { min-width: 0; padding-right: var(--ds-space-l); }
  .filters .seg { width: 100%; }
  .char-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ccard .mini-stats { grid-template-columns: repeat(2, 1fr); }
  .ccard .mini-stats div:last-child { display: none; }
  .tabs { gap: var(--ds-space-l); }
  .tabs a { font-size: var(--ds-type-body); }
  .seg { gap: var(--ds-space-m); }
  .cta { padding: 0 var(--ds-space-s); }
  .cmp-head { grid-template-columns: 1fr; }
  .cmp-side.b { flex-direction: row; text-align: left; }
  .cmp-vs { text-align: center; font-size: var(--ds-type-title); }
  .cmp-h2h { flex-wrap: wrap; justify-content: center; }
  .tn { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .lang, .cta, .copy-btn, .mrow .toggle, .mrow .toggle svg { animation: none !important; transition: none !important; }
}

/* ================================================================ S30 R2 WEBX: stage, value rows, podium, tier list
   (DESIGN WEBX §1.5, §4.1). Tokens only. The stage component itself is wx-charstage.css (shared with the community page). */
.app > .wx-stage { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }
.sep { display: inline-block; width: var(--ds-space-s); }
.wx-stage .tag { margin-left: var(--ds-space-xs); font-size: 0.45em; opacity: 0.75; color: inherit; }
.wx-stage .copy-btn { color: var(--ds-color-text-on-card); background: var(--ds-palette-off-white); }
.wx-stage__small { margin: 0; font-family: var(--ds-font-body); font-size: var(--ds-type-small); }
.wx-stage__lead { margin: 0; max-width: 52ch; font-family: var(--ds-font-body); font-size: var(--ds-type-body-l); line-height: 1.45; }
.wx-stage__name--title { font-size: var(--ds-type-headline); }
.wx-stage__role { display: flex; align-items: center; gap: var(--ds-space-s); }
.wx-stage .xp { width: min(420px, 100%); }
.wx-stage .xp .t { margin-top: var(--ds-space-xxs); font-family: var(--ds-font-body); font-size: var(--ds-type-small); }
.wx-stage__filters { margin: 0; gap: var(--ds-space-s); }
.wx-stage__filters .field span { color: inherit; }
/* value row: number in Archivo Black over its label, 24 px apart, no boxes and no separator characters (G4, DR-4) */
.wx-vals { display: flex; flex-wrap: wrap; column-gap: var(--ds-space-l); row-gap: var(--ds-space-s); }
.wx-val { display: flex; flex-direction: column; gap: var(--ds-space-xxs); min-width: 0; }
.wx-val b { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-title-s); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wx-val span { font-family: var(--ds-font-body); font-size: var(--ds-type-small); line-height: 1.2; }
.wx-vals--body { margin: var(--ds-space-l) 0; }
/* W-O9: on the character page the figure still rises above the stage, but ends at its lower edge, so the value row
   under the stage never lies over the legs */
.wx-stage--page .wx-stage__art { clip-path: inset(-100vh -100vw 0 -100vw); }
.wx-vals--body .wx-val span, .wx-season .wx-val span { color: var(--muted); }
.wx-season { display: flex; flex-wrap: wrap; column-gap: var(--ds-space-xxl); row-gap: var(--ds-space-m); margin: 0 calc(-1 * var(--pad)) var(--ds-space-l); padding: var(--ds-space-l) var(--pad); background: var(--ds-color-surface-panel-deep); border-bottom: var(--ds-outline-bold) solid var(--ds-color-outline-ink); }
.wx-cta { display: flex; flex-wrap: wrap; gap: var(--ds-space-s); margin-top: var(--ds-space-xs); }
.wx-cta .ds-btn { height: var(--ds-space-button-h); padding: 0 var(--ds-space-button-pad-x); font-size: var(--ds-type-nav); }
.wx-cta .ds-btn--secondary { border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); background: var(--ds-color-surface-panel-deep); color: var(--ds-color-text-primary); box-shadow: var(--ds-shadow-hard); }
.wx-steps { display: grid; gap: var(--ds-space-s); margin: 0; padding-left: var(--ds-space-l); font-family: var(--ds-font-body); }
.wx-steps b { display: block; font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-label); }
/* rank star (UI.md §5.5 StarShape) with the place number */
.wx-star { display: inline-grid; place-items: center; flex: none; width: var(--ds-icon-l); height: var(--ds-icon-l); background: var(--ds-rarity-legendary); color: var(--ds-color-text-on-card); font-family: var(--ds-font-display); font-size: var(--ds-type-body); clip-path: polygon(50% 0, 61% 33%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 33%); }
.wx-star span { transform: translateY(2px); }
.pod.p2 .wx-star { background: var(--ds-rarity-common); }
.pod.p3 .wx-star { background: var(--ds-color-accent-primary-deep); }
/* live plate in the hero */
.wx-live { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-xs); padding: var(--ds-space-m) var(--ds-space-l); background: var(--ds-color-surface-panel-deep); color: var(--ds-color-text-primary); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); font-family: var(--ds-font-body); }
.wx-live b { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-label); text-transform: uppercase; }
.wx-live__dot { width: var(--ds-space-s); height: var(--ds-space-s); border-radius: 50%; background: var(--ds-status-online); }
/* podium: place 1 in the accent of its main with the illustration, 2 and 3 navy with the portrait */
.pod.pod--lead { --pod-art-h: 220px; overflow: visible; isolation: isolate; min-height: 0; padding-top: var(--pod-art-h); justify-content: flex-end; background: transparent; }
.pod--lead .pod-artbox { position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * var(--ds-space-xl)); height: calc(var(--pod-art-h) + var(--ds-space-xl)); overflow-x: clip; overflow-y: visible; container-type: size; pointer-events: none; }
.pod--lead .pod-bg { position: absolute; inset: 0; z-index: -2; background: var(--accent); }
.pod--lead .pod-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--ds-color-outline-ink) 12%, transparent) calc(var(--ds-space-dot-grid-dot) / 2), transparent calc(var(--ds-space-dot-grid-dot) / 2 + 0.5px)); background-size: var(--ds-space-dot-grid-step) var(--ds-space-dot-grid-step); }
.pod--lead .pod-art { position: absolute; left: 50%; top: 0; height: min(calc(100cqh / (var(--fy1, 1) - var(--fy0, 0))), calc(130cqw / (var(--fx1, 1) - var(--fx0, 0)))); transform: translate(calc(-100% * (var(--fx0, 0) + var(--fx1, 1)) / 2), calc(-100% * var(--fy0, 0))); opacity: 0.95; pointer-events: none; }
.pod--lead .who, .pod--lead .val { text-shadow: 0 var(--ds-outline-bold) 0 var(--ds-color-outline-ink); color: var(--ds-color-text-primary); }
.pod--lead.wx-on-ink .who, .pod--lead.wx-on-ink .val, .pod--lead.wx-on-ink .lbl { color: var(--ds-color-text-on-card); text-shadow: none; }
.pod--lead .who, .pod--lead .val, .pod--lead .lbl { position: relative; padding: 0 var(--ds-space-xs); }
.pod .wx-star { position: absolute; top: var(--ds-space-s); left: var(--ds-space-s); }
/* tier list: sheared portrait cards that link to the character */
.tier-row .chars a.tl-card { flex-direction: column; align-items: flex-start; gap: var(--ds-space-xxs); width: 108px; padding: var(--ds-space-xs); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); background: var(--ds-color-surface-panel-deep); transform: skewX(var(--ds-skew-card)) scale(1); transition: transform var(--ds-motion-hover) var(--ds-ease-smooth); }
.tier-row .chars a.tl-card > * { transform: skewX(calc(-1 * var(--ds-skew-card))); }
.tier-row .chars a.tl-card:hover { transform: skewX(var(--ds-skew-card)) scale(var(--ds-motion-hover-scale-card)); }
.tier-row .chars a.tl-card b { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-small); white-space: nowrap; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0.25em; text-overflow: ellipsis; max-width: 100%; }
.pic.md { width: 48px; height: 48px; }
.ch-table .wx-badge { margin-left: var(--ds-space-xs); }
.ch-table tr.dim td { opacity: 0.7; }
.slot .k .slot-ico { width: var(--ds-icon-m); height: var(--ds-icon-m); margin-right: var(--ds-space-xs); border-radius: 50%; background: var(--ds-color-outline-ink); }
/* old KPI tiles of the sub-views become one value row (G5) */
.kpis { display: flex; flex-wrap: wrap; column-gap: var(--ds-space-xl); row-gap: var(--ds-space-m); }
.kpis .kpi { padding: 0; border: 0; background: none; }
.kpis .kpi::before { display: none; }
/* language bundles: until the texts are there the footer keeps its space but shows nothing (the header shows English) */
.wx-l10n-pending .foot [data-t] { visibility: hidden; }
@media (max-width: 767px) {
  /* lines of the lists wrap on phones instead of cutting text (longest language) */
  .li .main b, .li .main small { white-space: normal; overflow: visible; text-overflow: clip; }
  /* kill feed: a long name breaks inside its column; the share of an ability slot goes under its name when both do not fit */
  .li > .row > a, .li > .row > b, .li > .row > span { min-width: 0; overflow-wrap: anywhere; }
  /* one long title word (es "Clasificaciones") is hyphenated / broken instead of widening the page */
  .page-head > div { min-width: 0; }
  .page-head h1 { overflow-wrap: anywhere; hyphens: auto; }
  .slot .k { flex-wrap: wrap; column-gap: var(--ds-space-xs); }
  .wx-cta .ds-btn { flex: 0 0 auto; height: var(--ds-space-button-h-small); padding: 0 var(--ds-space-m); font-size: var(--ds-type-body); }
  .wx-stage--hero .wx-stage__id { max-width: 68%; }
  .wx-stage--hero .wx-stage__art { left: 36%; right: -40%; top: 30%; bottom: -4%; }
  .wx-stage--hero .wx-stage__name--player { font-size: calc(var(--ds-type-headline) * 0.55); }
  .wx-val b { font-size: var(--ds-type-label); }
  .wx-season { column-gap: var(--ds-space-l); }
  .wx-season .wx-val { flex: 1 1 40%; }
  .wx-stage__name--title { font-size: calc(var(--ds-type-headline) * 0.6); }
  .tier-row .chars { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tier-row .chars a.tl-card { flex: 0 0 auto; width: 92px; }
  .pod.pod--lead { --pod-art-h: 170px; padding-top: var(--pod-art-h); }
}
@media (prefers-reduced-motion: reduce) {
  .tier-row .chars a.tl-card { transition: none !important; }
}

/* filters inside the stage share the row */
.wx-stage__filters .field { flex: 1 1 0; min-width: 0; }
.wx-stage__filters .field select { width: 100%; min-width: 0; }
@media (max-width: 767px) {
  .wx-stage__id > .wx-stage__extra { max-width: 100%; width: 100%; }
  /* R-S-08: on the phone the value row of the character stage lies over the figure; it gets the navy plate so it stays
     readable on every accent (ru 390: dark text over Froggy's leg) */
  .wx-stage--page .wx-stage__extra .wx-vals { padding: var(--ds-space-s) var(--ds-space-m); background: var(--ds-color-surface-panel-deep); color: var(--ds-color-text-primary); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); }
  /* R-S-07: the player filter of the matches takes the whole row, its placeholder "Name or Name#1234" is never cut */
  .filters[data-filters] .field:has(> #f-player) { grid-column: 1 / -1; }
}

/* WEBX DR-2: sections below the first screen are laid out and painted only when they come near the viewport */
.app > .mt, .app > .grid, .app > .stack, #ch-body > .grid, #pf-body > .mt, #pf-body > .grid, #pf-body > .stack { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* place of the character bar while the catalog (visible roster) loads */
.wx-bar--pending { min-height: calc(var(--ds-space-char-card-h-selected) + 2 * var(--ds-space-xs)); }
@media (max-width: 767px) { .wx-bar--pending { min-height: calc(124px + 2 * var(--ds-space-xs)); } }

/* ================================================================ WEBX fix (webx-review WX-6 … WX-19), tokens only */
/* WX-6: room above the podium for the illustration of place 1; its label on the accent */
.podium { margin-top: var(--ds-space-xxl); }
.pod--lead .lbl, .pod--lead .tag { color: var(--ds-color-text-primary); }
.pod--lead.wx-on-ink .tag { color: var(--ds-color-text-on-card); }
/* WX-19: rank star right of the player name, "Main: <character>" as the role line below in one line */
.wx-name-star { display: flex; flex-wrap: nowrap; align-items: center; column-gap: var(--ds-space-s); }
.wx-name-star > span { min-width: 0; overflow-wrap: anywhere; }
.wx-role-line { white-space: nowrap; }
/* WX-10: live values as a value row */
.live-vals { margin-bottom: var(--ds-space-m); }
/* WX-13: empty states with the kit star and one action */
.empty .empty-star { fill: var(--ds-color-text-muted); stroke: none; }
.empty .empty-act { margin-top: var(--ds-space-s); }
/* WX-15: one-line tab row with edge fade and pager buttons while it overflows */
.scroll-row { display: flex; align-items: center; gap: var(--ds-space-xs); min-width: 0; margin-bottom: var(--ds-space-m); }
.scroll-row > [data-scroll-row] { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.scroll-row.fade-r > [data-scroll-row] { -webkit-mask-image: linear-gradient(90deg, var(--ds-palette-ink) calc(100% - var(--ds-space-xxl)), transparent); mask-image: linear-gradient(90deg, var(--ds-palette-ink) calc(100% - var(--ds-space-xxl)), transparent); }
.scroll-row.fade-l > [data-scroll-row] { -webkit-mask-image: linear-gradient(90deg, transparent, var(--ds-palette-ink) var(--ds-space-xxl)); mask-image: linear-gradient(90deg, transparent, var(--ds-palette-ink) var(--ds-space-xxl)); }
.scroll-row.fade-l.fade-r > [data-scroll-row] { -webkit-mask-image: linear-gradient(90deg, transparent, var(--ds-palette-ink) var(--ds-space-xxl), var(--ds-palette-ink) calc(100% - var(--ds-space-xxl)), transparent); mask-image: linear-gradient(90deg, transparent, var(--ds-palette-ink) var(--ds-space-xxl), var(--ds-palette-ink) calc(100% - var(--ds-space-xxl)), transparent); }
.scroll-row__btn { flex: none; display: grid; place-items: center; width: var(--ds-space-icon-button); height: var(--ds-space-icon-button); padding: 0; border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); border-radius: 50%; background: var(--ds-palette-off-white); color: var(--ds-color-text-on-card); cursor: pointer; }
.scroll-row__btn[hidden] { display: none; }
.scroll-row__btn svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scroll-row__btn:disabled { opacity: 0.4; cursor: default; }
/* WX-11 ranked: rank badges as filter chips over the table (f019) */
.rk-bar { display: flex; flex-wrap: nowrap; gap: var(--ds-space-s); margin: 0 0 var(--ds-space-l); padding: var(--ds-space-xxs) var(--ds-space-xs); overflow-x: auto; scrollbar-width: none; }
.rk-bar::-webkit-scrollbar { display: none; }
.rk-chip { flex: none; display: inline-flex; align-items: center; gap: var(--ds-space-xs); height: var(--ds-space-chip); padding: 0 var(--ds-space-m); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); background: var(--ds-color-surface-panel-deep); color: var(--text); font-family: var(--ds-font-display); font-size: var(--ds-type-small); text-transform: uppercase; white-space: nowrap; transform: skewX(var(--ds-skew-chip)); box-shadow: inset var(--ds-space-xs) 0 0 var(--rk, var(--ds-color-accent-primary)); }
.rk-chip > * { display: inline-block; transform: skewX(calc(-1 * var(--ds-skew-chip))); }
.rk-chip small { font-family: var(--ds-font-body); text-transform: none; color: var(--muted); }
.rk-chip:hover { color: var(--text); }
.rk-chip[aria-current="page"] { background: var(--rk, var(--ds-color-accent-primary)); color: var(--ds-color-text-on-card); }
.rk-chip[aria-current="page"] small { color: inherit; }
/* WX-11 rogue: the latest runs as sheared run cards with the accent of the character */
.run-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ds-space-m); }
.run-card { display: flex; flex-direction: column; gap: var(--ds-space-s); min-width: 0; padding: var(--ds-space-m); background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: inset 0 var(--ds-space-xs) 0 var(--accent), var(--ds-shadow-hard); transform: skewX(var(--ds-skew-card)); }
.run-card > * { min-width: 0; transform: skewX(calc(-1 * var(--ds-skew-card))); }
.run-card .main { order: 3; }
.run-card .side { order: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ds-space-xs); }
.run-card .side b { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-title-s); line-height: 1; }
.run-card .side small { color: var(--muted); }
.run-card .aug-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-xxs); }
/* run chips: dark text on the rarity colour of the chip (ds.css), not the rarity colour as text */
.ds-run .aug-chips .chip { color: var(--ds-color-text-on-card); }
.ds-run .aug-chips .chip.pact { color: var(--ds-color-text-primary); }
/* WX-11 compare: two mini stages, the winner of a row gets the yellow edge on the inner side */
.cmp-head { align-items: center; }
.cmp-stage { min-width: 0; }
.cmp-stage .wx-stage { margin-top: var(--ds-space-xl); padding: var(--ds-space-xl) var(--ds-space-l) var(--ds-space-l); }
.cmp-stage .wx-stage__name--player { font-size: var(--ds-type-title); overflow-wrap: anywhere; }
/* WN19: the name itself is a .wx-fitline (fits its column); the #tag is its own line under it */
.cmp-stage .wx-stage__name--player .tag { display: block; font-size: var(--ds-type-label); line-height: 1.15; padding-block: 0.12em; }
.cmp-tbl td.num.win { box-shadow: inset calc(-1 * var(--ds-outline-bold)) 0 0 var(--ds-color-accent-primary); }
.cmp-tbl td.win:not(.num) { box-shadow: inset var(--ds-outline-bold) 0 0 var(--ds-color-accent-primary); }
/* WEBX3 WN20: the compare charts. From 1100 px two columns (7fr / 5fr, form over the full width), below one column in the
   order rates, combat profile, totals, direct duels, form, modes, characters. Cards keep their own height (no stretched
   empty room). The frames that load later (form, modes) have their final height before their data (no layout shift). */
.cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: var(--gap); align-items: start; }
.cmp-frame { contain: size layout; }
.cmp-frame--trend { height: 260px; }
.cmp-frame--modes { --cmp-legend-row: calc(var(--ds-type-small) * 1.3 * 2 + 4px); height: calc(2 * 28px + 8px + 3 * var(--cmp-legend-row) + 2 * 4px); }
.cmp-frame > .ds-empty { height: 100%; margin: 0; }
.cmp-tugs { margin: 0 0 var(--ds-space-m); }
.cmp-together { margin: var(--ds-space-m) 0 0; }
.cmp-together .wx-val span::first-letter { text-transform: uppercase; }
.cmp-shared { margin-top: var(--ds-space-m); }
.cmp-chars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-space-l); margin: 0; }
.cmp-chars__p { display: flex; flex-direction: column; gap: var(--ds-space-xs); min-width: 0; }
.cmp-chars__p--a > .wx-fitbox { color: var(--cmp-a); } .cmp-chars__p--b > .wx-fitbox { color: var(--cmp-b); }
.cmp-char { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto 8px; column-gap: var(--ds-space-xs); row-gap: var(--ds-space-xxs); align-items: center; min-height: 40px; cursor: help; }
.cmp-char .pic { grid-row: 1 / 3; }
.cmp-char__name { min-width: 0; font-weight: 400; font-size: var(--ds-type-small); line-height: 1.3; overflow-wrap: anywhere; }
.cmp-char__vals { display: flex; align-items: baseline; gap: var(--ds-space-xs); white-space: nowrap; }
.cmp-char__vals b { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-small); line-height: 1.15; font-variant-numeric: tabular-nums; }
.cmp-char__vals small { color: var(--muted); }
.cmp-char__bar { grid-column: 2 / -1; height: 8px; background: var(--ds-color-surface-row); }
.cmp-char__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); min-width: 2px; transform-origin: 0 50%; transition: transform var(--ds-motion-bar-fill) var(--ds-ease-enter); transition-delay: calc(var(--i, 0) * var(--ds-motion-stagger-tile)); }
.cmp-chars__p--a .cmp-char__bar i { background: var(--cmp-a); } .cmp-chars__p--b .cmp-char__bar i { background: var(--cmp-b); }
.cmp-chars.is-wait .cmp-char__bar i { transform: scaleX(0); }
.cmp-char:focus-visible { outline: 3px solid var(--ds-color-accent-primary); outline-offset: 2px; }
@media (min-width: 1100px) {
  .cmp-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cmp-c--form { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .cmp-frame--trend { height: 220px; }
  .cmp-frame--modes { height: calc(2 * 28px + 8px + 6 * var(--cmp-legend-row) + 5 * 4px); }
  .cmp-chars { grid-template-columns: minmax(0, 1fr); }
  .cmp .wx-ring { grid-template-columns: minmax(0, 1fr); }
  .cmp .wx-ring__va, .cmp .wx-ring__vb { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .cmp-char__bar i { transition: none !important; } }
/* WX-6: the illustration may reach below the stage; the value row and the blocks under it stay readable above it */
#ch-body, .wx-season { position: relative; z-index: 1; }
/* WX-17: old values and blocks stay dimmed while the next character loads */
#ch-body, .wx-stage__extra .wx-vals { transition: opacity var(--ds-motion-panel-in) var(--ds-ease-smooth); }
#ch-body.is-stale, .wx-stage__extra .wx-vals.is-stale { opacity: 0.45; }
#cmp-swap svg { width: var(--ds-icon-xs); height: var(--ds-icon-xs); fill: none; stroke: currentColor; }
/* WX-12: search icon and the CTA in the burger panel exist only on phones */
.search-open, .menu .menu-cta { display: none; }
/* WX-16: leaderboard list for phones */
.lb-list { display: none; }
@media (max-width: 767px) {
  /* WX-12: one header row - logo, search icon, language icon, burger; the search field opens under it */
  .top { flex-wrap: wrap; column-gap: var(--ds-space-s); row-gap: var(--ds-space-xs); }
  .brand { order: 0; margin-right: auto; }
  .search-open { display: grid; order: 1; place-items: center; flex: none; width: var(--ds-space-icon-button); height: var(--ds-space-icon-button); padding: 0; border: 0; border-radius: 50%; background: var(--ds-color-surface-panel-deep); color: var(--text); cursor: pointer; }
  .search-open svg { width: var(--ds-icon-xs); height: var(--ds-icon-xs); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .actions { order: 2; flex: none; }
  .actions #get-cta { display: none; }
  .actions .wx-lang__btn > span { display: none; }
  .burger { order: 3; }
  .search { display: none; order: 4; flex: 1 0 100%; min-width: 0; }
  .top.search-open .search { display: block; }
  .menu .menu-cta { display: inline-flex; align-self: flex-start; margin: var(--ds-space-s) var(--ds-space-m) 0; }
  .app { padding-top: var(--ds-space-s); }
  .app:has(> .wx-stage:first-child) { padding-top: 0; }
  .app > .wx-stage:first-child { margin-top: var(--ds-space-l); }
  .wx-name-star .wx-star { width: var(--ds-icon-m); height: var(--ds-icon-m); font-size: var(--ds-type-small); }
  /* WX-16 / DESIGN S5 phone: place 1 big, 2 and 3 side by side below it, then the list */
  .podium { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-s); }
  .podium .pod.p1 { grid-column: 1 / -1; order: -1; }
  .lb-list { display: flex; flex-direction: column; gap: var(--ds-space-xs); }
  .lb-table { display: none; }
  .lb-li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-s); padding: var(--ds-space-s); background: var(--ds-color-surface-panel-deep); color: var(--text); }
  .lb-li:hover { color: var(--text); }
  .lb-li .nm { min-width: 0; }
  .lb-li .nm b { display: block; font-family: var(--ds-font-body); font-weight: 400; font-size: var(--ds-type-body); overflow-wrap: anywhere; }
  .lb-li .nm small { color: var(--muted); }
  .lb-li .v { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-label); white-space: nowrap; }
  .cmp-stage .wx-stage__name--player { font-size: var(--ds-type-title-s); }
}
@media (max-width: 560px) {
  .cmp-head { grid-template-columns: minmax(0, 1fr); }
  /* one long title word ("LEADERBOARDS", "BESTENLISTEN") stays one word at 360-430 px */
  .page-head h1 { font-size: calc(var(--ds-type-title) * 0.8); }
}
@media (prefers-reduced-motion: reduce) {
  #ch-body, .wx-stage__extra .wx-vals { transition: none !important; }
}
/* WS02 (owner 27.10.): the display fonts draw i dots, accents and Cyrillic/Turkish marks above a tight line box, so a box
   that clips (overflow hidden for the ellipsis) cut them off ("Kıtsune_Mıra"). Truncated one-line names get room above and
   below without moving the layout; map and mode names and the record lines wrap instead of being cut. */
.player-chip .nm b, .player-chip .nm small, .li .main b, .li .main small, .suggest .who b, .kpi .v, .kpi .s, .ccard h3, .cmp-side b, .tier-row .chars a.tl-card b, .mrow .winners .nm b, .mrow .mvp .nm b, .lb-li .nm b { padding-block: 0.2em; margin-block: -0.2em; }
.mode .mn b, .mode .mn small, .record .who span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.run-card { padding-top: calc(var(--ds-space-m) + var(--ds-space-xs)); }

/* ==================================================================== WEBX2 (DESIGN WEBX2 §7, §11) */
/* ---- game icons with the client tooltip (WS04/WS09): augment / item / ability / pact, rarity frame like the client */
.gicon { position: relative; display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; margin: 0; background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-bold) solid var(--gicon-rar, var(--ds-color-outline-ink)); box-shadow: var(--ds-shadow-hard); color: var(--ds-color-text-primary); font: inherit; cursor: help; transition: transform var(--ds-motion-hover) linear; }
.gicon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gicon:hover { transform: scale(var(--ds-motion-hover-scale-icon)); }
.gicon[data-tier="0"] { --gicon-rar: var(--ds-rarity-common); }
.gicon[data-tier="1"] { --gicon-rar: var(--ds-rarity-uncommon); }
.gicon[data-tier="2"] { --gicon-rar: var(--ds-rarity-rare); }
.gicon[data-tier="3"] { --gicon-rar: var(--ds-rarity-epic); }
.gicon[data-tier="4"] { --gicon-rar: var(--ds-rarity-legendary); }
.gicon--item { width: 40px; height: 40px; }
.gicon--ability { width: 36px; height: 36px; --gicon-rar: var(--sc); }
.gicon--none { cursor: default; background: color-mix(in srgb, var(--sc) 24%, var(--ds-color-surface-panel-deep)); }
.gicon--pact { width: auto; min-width: 48px; padding: 0 var(--ds-space-s); grid-auto-flow: column; gap: var(--ds-space-xxs, 2px); --gicon-rar: var(--ds-rarity-legendary); font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); line-height: 1.12; color: var(--ds-rarity-legendary); }
.gicon--pact .wx-sprite { width: 22px; height: 22px; }
.gicon--text { width: auto; min-width: 48px; padding: 0 var(--ds-space-xs); font-size: var(--ds-type-caption); cursor: default; }
.gicon__glyph { width: 55%; height: 55%; fill: var(--ds-color-text-muted); }
/* ---- match report: one loadout card per player (augments above, items below) */
.loadouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--ds-space-m); }
.loadout { display: grid; gap: var(--ds-space-s); align-content: start; padding: var(--ds-space-m); background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); border-left: 8px solid var(--accent, var(--ds-color-accent-secondary)); box-shadow: var(--ds-shadow-hard); }
.loadout__kit { display: grid; gap: var(--ds-space-s); }
.loadout__augs, .loadout__items { display: flex; flex-wrap: wrap; gap: var(--ds-space-s); }
/* ---- rogue latest runs (WS09, DESIGN §11.5): result first, then player, then the kit */
.run2-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--ds-space-m); }
.run2 { display: grid; gap: var(--ds-space-s); padding: var(--ds-space-l) var(--ds-space-m) var(--ds-space-m); background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); border-top: 8px solid var(--accent, var(--ds-rarity-uncommon)); box-shadow: var(--ds-shadow-hard); min-width: 0; }
.run2__res { display: grid; justify-items: start; gap: var(--ds-space-xxs); }
.run2__val { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-headline); line-height: 1.12; text-transform: uppercase; }
.run2__meta { display: flex; gap: var(--ds-space-m); color: var(--ds-color-text-muted); font-size: var(--ds-type-small); }
/* R-S-04: the comparison with the best run stands above the bar in small, the bar itself carries no text */
.run2__best { display: grid; gap: var(--ds-space-xxs); }
.run2__best small { font-size: var(--ds-type-small); line-height: 1.25; color: var(--ds-color-text-muted); }
.run2__bar { position: relative; height: 12px; background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.run2__bar > span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(var(--w, 0)); transform-origin: 0 50%; background: var(--accent, var(--ds-rarity-uncommon)); }
.run2__who { padding-top: var(--ds-space-xs); }
.run2__kit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-s); }
.run2__augs { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); }
.run2__augs .gicon { width: 40px; height: 40px; }
.run2__bosses { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); color: var(--ds-color-text-muted); font-size: var(--ds-type-small); }
.run2__boss { padding: 2px var(--ds-space-xs); border: var(--ds-outline-thin) solid var(--ds-color-outline-soft); }
.run2__bosshead { display: inline-grid; }
.run2__bosshead .pic { border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
/* ---- matches as cards (WS11, DESIGN §11.3; O2/O3 28.10.): the map is the picture with mode and map on it, the winner's
   head stands over its edge next to the name, the key numbers as values and the whole line-up as heads in team colours */
.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--ds-space-l) var(--ds-space-m); margin-top: var(--ds-space-l); }
.mcard { position: relative; display: grid; grid-template-rows: minmax(150px, 1fr) auto; min-width: 0; color: var(--ds-color-text-primary); text-decoration: none; background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); transform: skewX(-2deg); transition: transform var(--ds-motion-hover) linear; }
.mcard > * { transform: skewX(2deg); }
.mcard:hover, .mcard:focus-visible { transform: skewX(-2deg) scale(var(--ds-motion-hover-scale-card)); }
.mcard:focus-visible { outline: var(--ds-outline-bold) solid var(--ds-color-accent-primary); outline-offset: 3px; }
.mcard__map { position: relative; overflow: hidden; background: color-mix(in srgb, var(--fam) 55%, var(--ds-color-surface-panel-deep)); border-bottom: var(--ds-outline-bold) solid var(--ds-color-outline-ink); border-left: 8px solid var(--fam); }
.mcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transition: transform var(--ds-motion-panel-in) var(--ds-ease-enter); }
.mcard:hover .mcard__img, .mcard:focus-visible .mcard__img { transform: scale(1.45); }
.mcard__fam-ico { position: absolute; right: var(--ds-space-m); bottom: var(--ds-space-s); width: 72px; height: 72px; color: color-mix(in srgb, var(--ds-color-outline-ink) 55%, transparent); }
.mcard__fam-ico svg { width: 100%; height: 100%; }
.mcard__shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--ds-color-surface-panel) 0%, transparent 55%), linear-gradient(to right, color-mix(in srgb, var(--fam) 45%, transparent) 0%, transparent 60%); }
.mcard__title { position: absolute; left: var(--ds-space-s); top: var(--ds-space-s); z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-xs) var(--ds-space-s); max-width: calc(100% - 2 * var(--ds-space-s)); padding: 4px var(--ds-space-s); background: color-mix(in srgb, var(--ds-color-surface-panel-deep) 88%, transparent); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); }
.mcard__mapname { color: var(--ds-color-text-primary); font-size: var(--ds-type-small); overflow-wrap: normal; padding-left: var(--ds-space-s); border-left: var(--ds-outline-thin) solid var(--ds-color-outline-soft); }
.mcard__ago { position: absolute; right: var(--ds-space-s); bottom: var(--ds-space-s); z-index: 3; padding: 2px var(--ds-space-xs); font-size: var(--ds-type-caption); color: var(--ds-color-text-primary); background: color-mix(in srgb, var(--ds-color-surface-panel-deep) 88%, transparent); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); white-space: nowrap; }
.mcard__body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ds-space-s); row-gap: var(--ds-space-s); align-content: start; padding: 0 var(--ds-space-m) var(--ds-space-m); min-width: 0; }
.mcard__head { position: relative; z-index: 2; margin-top: -40px; align-self: start; }
.mcard__head .pic { width: 72px; height: 72px; border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); background: var(--accent, var(--ds-color-accent-secondary)); }
.mcard__head .pic--none { background: var(--ds-color-surface-row); }
/* O1: hidden character - the player's initials on a neutral plate (no character colour, the character stays secret) */
.pic.pic--player, .mcard__head .pic.pic--player { background: var(--ds-color-surface-row); color: var(--ds-color-text-primary); }
.mcard__head-ico { display: block; width: 36px; height: 36px; color: var(--ds-color-text-muted); }
.mcard__head-ico svg { width: 100%; height: 100%; }
.mcard__win { display: contents; }
.mcard__winhead { display: grid; align-content: end; gap: 2px; min-width: 0; padding-top: var(--ds-space-xs); }
.mcard__label { font-family: var(--ds-font-display); font-size: var(--ds-type-caption); line-height: 1.12; color: var(--ds-color-accent-primary); text-transform: uppercase; }
.mcard { container-type: inline-size; }
.mcard__names { grid-column: 1 / -1; font-family: var(--ds-font-display); font-weight: 400; font-size: clamp(var(--ds-type-body), 8cqi, var(--ds-type-title-s)); line-height: 1.12; overflow-wrap: anywhere; }
.mcard__kills { color: var(--ds-color-text-muted); font-size: var(--ds-type-small); white-space: nowrap; }
/* WN13 layout check (bg: "Продължителност" ran into "Играчи"): a column is never narrower than its longest word */
.mcard__nums { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.mcard__nums > span { display: grid; gap: 2px; padding: var(--ds-space-xs) var(--ds-space-s); min-width: 0; }
.mcard__nums > span + span { border-left: var(--ds-outline-thin) solid var(--ds-color-outline-soft); }
.mcard__nums b { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-body); line-height: 1.12; font-variant-numeric: tabular-nums; }
.mcard__nums small { color: var(--ds-color-text-muted); font-size: var(--ds-type-caption); overflow-wrap: normal; }
.mcard__lineup { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-height: 35px; }
.mcard__lu { display: block; padding-bottom: 3px; border-bottom: 4px solid var(--team); }
.mcard__lu--gap { margin-left: var(--ds-space-xs); }
.mcard__lu .pic { display: grid; }
.mcard__more { padding: 0 var(--ds-space-xs); color: var(--ds-color-text-muted); font-size: var(--ds-type-small); white-space: nowrap; }
/* R-S-02 (O3): a card stretched to the height of its row gives the extra height to the map picture, never empty space
   under the line-up (the first row holds the wide card beside the small ones) */
.mcard--wide { grid-column: span 2; grid-template-rows: minmax(210px, 1fr) auto; }
.mcard--wide .mcard__map { border-left-width: 12px; }
/* WN17 (owner 28.10. evening): the winner's figure stood 28 px over the card and over the body, cropped to its right half
   (a square pose in a narrow box). It now lives inside the map picture only (.mcard__map clips), whole (contain), anchored
   bottom-right, the same on the desktop and the phone. The title box ends where the figure begins (58% - s = 100% - s - 42%). */
.mcard__figure { position: absolute; top: var(--ds-space-s); right: var(--ds-space-s); bottom: 0; width: 42%; z-index: 1; pointer-events: none; }
.mcard__figure .mcard__figimg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: right bottom; }
.mcard--wide .mcard__names { font-size: clamp(var(--ds-type-title-s), 6cqi, var(--ds-type-headline)); }
.mcard--wide .mcard__title { max-width: calc(58% - 2 * var(--ds-space-s)); z-index: 2; }
.mcard--wide .mcard__fam-ico { right: calc(42% + 2 * var(--ds-space-s)); }

@media (max-width: 720px) {
  /* WN11: a full-width card is sheared by 2deg, its corners stood ~7 px over the page edge (the phone page scrolled sideways) */
  .mcards { padding-inline: var(--ds-space-s); }
  .mcard--wide { grid-column: auto; grid-template-rows: minmax(150px, 1fr) auto; }
  .mcard__figure { width: 40%; }
  .mcard--wide .mcard__names { font-size: clamp(var(--ds-type-body), 8cqi, var(--ds-type-title-s)); }
  .mcard--wide .mcard__title { max-width: calc(60% - 2 * var(--ds-space-s)); }
  .mcard--wide .mcard__fam-ico { right: calc(40% + 2 * var(--ds-space-s)); }
}
/* ---- match report (WS11, DESIGN §11.4): team placement cards, kill timeline with zone band and play cursor */
.sec-title { margin: 0 0 var(--ds-space-m); font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-title-s); line-height: 1.12; text-transform: uppercase; }
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--ds-space-m); }
.tcard { display: grid; gap: var(--ds-space-s); align-content: start; padding: var(--ds-space-m); background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); border-top: 8px solid var(--team); box-shadow: var(--ds-shadow-hard); min-width: 0; }
.tcard--win { background: color-mix(in srgb, var(--ds-color-accent-primary) 12%, var(--ds-color-surface-panel)); }
.tcard__head { display: flex; align-items: center; gap: var(--ds-space-s); }
.tcard__place { font-family: var(--ds-font-display); font-size: var(--ds-type-label); line-height: 1.12; color: var(--team); text-transform: uppercase; }
.tcard__team { margin-left: auto; color: var(--ds-color-text-muted); font-size: var(--ds-type-small); }
.tcard__p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-xxs, 2px) var(--ds-space-s); align-items: center; }
.tcard__kda { font-family: var(--ds-font-display); font-size: var(--ds-type-label); line-height: 1.12; font-variant-numeric: tabular-nums; }
.tcard__kda i { font-style: normal; color: var(--ds-color-text-muted); margin: 0 2px; }
.tcard__dmg { grid-column: 1 / -1; position: relative; height: 16px; background: var(--ds-color-surface-panel-deep); }
.tcard__dmg > span { position: absolute; inset: 0; transform: scaleX(var(--w, 0)); transform-origin: 0 50%; background: var(--team); }
.tcard__dmg small { position: relative; display: block; padding: 0 var(--ds-space-xs); font-size: var(--ds-type-caption); line-height: 16px; text-shadow: 0 1px 0 var(--ds-color-outline-ink); }
.allvals { margin-top: var(--ds-space-m); }
.allvals > summary { cursor: pointer; display: inline-block; padding: var(--ds-space-xs) var(--ds-space-m); font-family: var(--ds-font-display); font-size: var(--ds-type-label); line-height: 1.12; text-transform: uppercase; background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); }
.allvals[open] > summary { margin-bottom: var(--ds-space-m); }
.zone-tl--band { position: relative; height: 18px; margin: 0 var(--ds-space-xxs, 2px) var(--ds-space-xs); }
#kill-tl { height: 64px; }
#kill-tl .tl-kill { width: auto; height: auto; bottom: var(--ds-space-xs); margin-left: 0; transform: translateX(-50%); background: none; border-bottom: 4px solid var(--sc); }
#kill-tl .tl-kill .pic { width: 22px; height: 22px; }
#kill-tl .tl-kill.is-hot { z-index: 2; outline: var(--ds-outline-bold) solid var(--ds-color-accent-primary); }
#kill-feed .li.is-hot { background: color-mix(in srgb, var(--ds-color-accent-primary) 18%, transparent); }
/* the neutral plate of a masked character: never "?" */
.pic--none { background: var(--ds-color-surface-row); }
/* ---- characters as the character select of the lobby (WS10, DESIGN §11.2) */
.cstage-wrap { position: relative; margin-top: var(--ds-space-l); }
.cstage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); align-items: center; gap: var(--ds-space-l); min-height: clamp(460px, 56vh, 620px); padding: var(--ds-space-xl) var(--ds-space-xl); overflow: clip; container-type: inline-size; border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); background: var(--accent); }
.cstage__bg { position: absolute; inset: 0; z-index: -2; }
.cstage__charbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cstage__bgname { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-family: var(--ds-font-display); --wx-bgname-max: var(--ds-type-bg-name); --wx-bgname-hmax: 40vh; text-transform: uppercase; color: transparent; -webkit-text-stroke: 3px color-mix(in srgb, var(--ds-palette-white) 30%, transparent); pointer-events: none; user-select: none; }
.cstage__art { position: absolute; z-index: -1; left: 34%; right: 22%; top: calc(-1 * var(--ds-space-l)); bottom: 0; pointer-events: none; }
.cstage__fx, .cstage__fy { position: absolute; inset: 0; }
.cstage__art .art { position: absolute; inset: 0; }
.cstage__art .art img { position: absolute; left: 50%; bottom: 0; height: 108%; width: auto; max-width: none; transform: translateX(-50%); }
.cstage__id { grid-column: 1; display: grid; gap: var(--ds-space-s); justify-items: start; z-index: 1; }
.cstage__name { margin: 0; font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-hero); line-height: 1.12; text-transform: uppercase; overflow-wrap: anywhere; }
.cstage__role { margin: 0; font-family: var(--ds-font-display); font-size: var(--ds-type-label); line-height: 1.15; }
.cstage__side { grid-column: 3; display: grid; gap: var(--ds-space-m); justify-items: end; z-index: 1; }
.cstage__tier { display: grid; justify-items: center; gap: var(--ds-space-xs); }
.tier-big { display: grid; place-items: center; width: 112px; height: 112px; font-family: var(--ds-font-display); font-size: 72px; line-height: 1.12; color: var(--ds-color-outline-ink); background: var(--t, var(--ds-color-surface-row)); border: var(--ds-outline-extra) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); transform: rotate(-4deg); }
.cstage__abil { display: flex; gap: var(--ds-space-xs); }
.cstage .wx-vals { margin: var(--ds-space-xs) 0; }
/* WN08: sort = one labelled choice, tier grouping = its own switch on the right, the stage hint under the stage */
.cs-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-s) var(--ds-space-m); margin: var(--ds-space-m) 0 var(--ds-space-m); }
.cs-sort__label { font-family: var(--ds-font-body); font-size: var(--ds-type-small); color: var(--ds-color-text-muted); }
.cs-sort__keys { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); }
.cs-switch { display: inline-flex; align-items: center; gap: var(--ds-space-s); margin-left: auto; font-family: var(--ds-font-body); font-size: var(--ds-type-small); cursor: pointer; }
.cs-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-switch__knob { position: relative; flex: none; width: 40px; height: 22px; background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.cs-switch__knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--ds-color-text-muted); transition: transform var(--ds-motion-select) var(--ds-ease-smooth); }
.cs-switch input:checked + .cs-switch__knob { background: var(--ds-color-accent-primary); }
.cs-switch input:checked + .cs-switch__knob::after { transform: translateX(18px); background: var(--ds-color-text-on-primary); }
.cs-switch input:focus-visible + .cs-switch__knob { outline: var(--ds-outline-bold) solid var(--ds-color-accent-primary); outline-offset: 2px; }
.cs-hint { margin: var(--ds-space-s) 0 0; font-family: var(--ds-font-body); font-size: var(--ds-type-small); color: var(--ds-color-text-muted); }
.cs-hint--touch { display: none; }
@media (pointer: coarse) { .cs-hint--fine { display: none; } .cs-hint--touch { display: inline; } }
@media (max-width: 560px) { .cs-switch { margin-left: 0; } }
.chip-btn { padding: var(--ds-space-xs) var(--ds-space-m); font-family: var(--ds-font-display); font-size: var(--ds-type-caption); line-height: 1.12; text-transform: uppercase; color: var(--ds-color-text-primary); background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--ds-color-accent-primary); color: var(--ds-color-text-on-primary); }
.shelves { display: grid; gap: var(--ds-space-m); }
.shelf { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--ds-space-m); align-items: center; padding: var(--ds-space-s) var(--ds-space-m); background: var(--ds-color-surface-panel); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); }
.shelf__tier .tier-badge { width: 52px; height: 52px; font-size: var(--ds-type-title-s); }
.shelf__label { grid-column: 1 / -1; color: var(--ds-color-text-muted); font-size: var(--ds-type-small); }
.shelf--off .shelf__cards { grid-column: 1 / -1; }
.shelf__cards { display: flex; flex-wrap: wrap; gap: var(--ds-space-s); min-width: 0; }
.ccard2 { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; width: 112px; min-height: 148px; padding: var(--ds-space-s) var(--ds-space-xs); color: var(--ds-color-text-primary); text-decoration: none; background: color-mix(in srgb, var(--accent) 30%, var(--ds-color-surface-panel-deep)); border: var(--ds-outline-bold) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); transform: skewX(-4deg); transition: transform var(--ds-motion-hover) linear; }
.ccard2 > * { transform: skewX(4deg); }
.ccard2:hover, .ccard2:focus-visible { transform: skewX(-4deg) scale(var(--ds-motion-hover-scale-card)); background: color-mix(in srgb, var(--accent) 55%, var(--ds-color-surface-panel-deep)); }
.ccard2:focus-visible { outline: var(--ds-outline-bold) solid var(--ds-color-accent-primary); outline-offset: 2px; }
.ccard2 .pic { width: 72px; height: 72px; }
.ccard2 { container-type: inline-size; }
/* WS02: a long name (Clocksworth) shrinks to the card width instead of breaking inside the word (--n = letters) */
.ccard2__name { font-family: var(--ds-font-display); font-weight: 400; font-size: min(var(--ds-type-caption), calc(100cqi / (var(--n, 8) * 0.9))); line-height: 1.12; text-transform: uppercase; text-align: center; overflow-wrap: normal; max-width: 100%; }
.ccard2__win { font-size: var(--ds-type-small); color: var(--ds-color-text-muted); }
.ccard2__tier { position: absolute; top: -10px; right: -8px; }
.ccard2__tier .tier-badge { width: 26px; height: 26px; font-size: var(--ds-type-caption); }
.ccard2.is-off { filter: grayscale(1); opacity: 0.6; }
.shelves.is-flat .shelf__tier { visibility: hidden; }
/* meta scatter */
.ms { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 320px auto; gap: var(--ds-space-xs); margin-top: var(--ds-space-m); }
.ms__plot { grid-column: 2; grid-row: 1; position: relative; border-left: var(--ds-outline-bold) solid var(--ds-color-outline-ink); border-bottom: var(--ds-outline-bold) solid var(--ds-color-outline-ink); background: var(--ds-color-surface-panel-deep); }
.ms-dot { position: absolute; left: calc(var(--x) * 100%); bottom: calc(var(--y) * 100%); transform: translate(-50%, 50%); }
.ms-dot .pic { width: 36px; height: 36px; border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); box-shadow: var(--ds-shadow-hard); }
.ms-dot:hover, .ms-dot:focus-visible { z-index: 2; transform: translate(-50%, 50%) scale(var(--ds-motion-hover-scale-icon)); }
.ms__exp { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); border-top: 3px dashed var(--ds-color-accent-primary); }
.ms__exp small { position: absolute; right: var(--ds-space-xs); bottom: 2px; color: var(--ds-color-accent-primary); font-size: var(--ds-type-caption); }
.ms__x { grid-column: 2; grid-row: 2; position: relative; height: 50px; color: var(--ds-color-text-muted); font-size: var(--ds-type-caption); }
.ms__y { grid-column: 1; grid-row: 1; position: relative; color: var(--ds-color-text-muted); font-size: var(--ds-type-caption); }
.ms__x span { position: absolute; left: calc(var(--k) * 100%); top: 4px; transform: translateX(-50%); }
.ms__y span { position: absolute; right: var(--ds-space-xs); bottom: calc(var(--k) * 100%); transform: translateY(50%); }
/* WN13 layout check: the axis title sits under the tick labels (the last tick "20 %" stood on the title) */
.ms__x b { position: absolute; right: 0; top: 28px; font-weight: 400; }
.ms__y b { position: absolute; left: 0; top: -22px; font-weight: 400; white-space: nowrap; }
@media (max-width: 760px) {
  .cstage { grid-template-columns: minmax(0, 1fr); min-height: 520px; align-content: end; padding: var(--ds-space-l) var(--ds-space-m); }
  .cstage__art { left: 30%; right: -20%; top: 0; bottom: 36%; }
  .cstage__side { grid-column: 1; grid-row: 1; justify-items: start; grid-auto-flow: column; align-items: center; }
  .tier-big { width: 72px; height: 72px; font-size: 44px; }
  .shelf { grid-template-columns: 1fr; }
  .shelf__cards { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--ds-space-xs); }
  .ccard2 { flex: none; width: 96px; }
  .ms { grid-template-rows: 300px auto; }
}
/* ---- WS12 fit text in the headers of profile, match and compare; WS03 suggestion lists of the compare fields */
.hero.ds-hero--char, .profile-hero { container-type: inline-size; }
.ds-hero__bgname.wx-fitname { left: 0; right: 0; text-align: center; transform: translateY(-50%); --wx-bgname-hmax: 36vh; }
.suggest-box { position: relative; }
.compare-form .suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; }
.who__sub { display: flex; gap: var(--ds-space-s); }
/* ---- stacked damage per ability (WS06) */
.sbars { display: grid; gap: var(--ds-space-s); }
.sbar { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: var(--ds-space-s); align-items: center; }
.sbar__track { display: flex; height: 18px; background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); }
.sbar__track span { flex: 0 0 calc(var(--w) * 100%); background: var(--sc); }
.sbar__sum { font-family: var(--ds-font-display); font-weight: 400; font-variant-numeric: tabular-nums; }
.sbar-legend { display: flex; flex-wrap: wrap; gap: var(--ds-space-m); margin-bottom: var(--ds-space-s); font-size: var(--ds-type-caption); }
.sbar-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; background: var(--sc); }
.allvals .table-wrap { overflow-x: auto; }
/* WS02: headings of the narrow half cards never break inside a word ("Eliminate" / "s") */
.grid.g2 .card-head h2 { font-size: var(--ds-type-label); overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* WS02 (clip-audit 390): on the phone a kill takes two lines (time, killer, ability icon / victim below), names never break */
@media (max-width: 600px) {
  #kill-feed .li { grid-template-columns: 44px minmax(0, 1fr) auto !important; row-gap: 2px; }
  #kill-feed .li > :last-child { grid-column: 2 / -1; }
  #kill-feed .li a, #kill-feed .li b, #kill-feed .li span { overflow-wrap: normal; word-break: normal; }
}

/* DR2-08 Rogue per character: bars with the game heads (links that filter the page) */
.rg-chars .rg-char { color: inherit; text-decoration: none; padding: var(--ds-space-xs) var(--ds-space-s); margin: 0 calc(-1 * var(--ds-space-s)); border-left: 4px solid var(--c, var(--ds-color-outline-soft)); }
.rg-chars .rg-char:hover, .rg-chars .rg-char:focus-visible { background: var(--ds-color-surface-row); }
.rg-chars .rg-char .val b { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-body-l); line-height: 1.12; }
.rg-podium { margin-top: var(--ds-space-xl); }/* DR2-08 overview: the most picked characters as head cards (rank, head, pick and win rate, pick bar in the accent) */
.ov-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: var(--ds-space-s); }
.ov-char { position: relative; display: grid; justify-items: start; gap: var(--ds-space-xxs); padding: var(--ds-space-s); color: inherit; text-decoration: none; background: var(--ds-color-surface-panel-deep); border: var(--ds-outline-thin) solid var(--ds-color-outline-ink); border-top: 6px solid var(--c); box-shadow: var(--ds-shadow-hard); min-width: 0; transition: transform var(--ds-motion-hover) linear; }
.ov-char:hover, .ov-char:focus-visible { transform: translateY(-2px) scale(var(--ds-motion-hover-scale-card)); }
.ov-char .pic.lg { width: 56px; height: 56px; }
.ov-char__rank { position: absolute; right: var(--ds-space-s); top: var(--ds-space-xs); font-family: var(--ds-font-display); font-size: var(--ds-type-title-s); line-height: 1.12; color: color-mix(in srgb, var(--c) 70%, var(--ds-color-text-primary)); }
.ov-char__name { font-family: var(--ds-font-display); font-weight: 400; font-size: var(--ds-type-body); line-height: 1.12; max-width: 100%; overflow-wrap: anywhere; }
.ov-char__v { display: flex; align-items: baseline; gap: var(--ds-space-xs); }
.ov-char__v b { font-variant-numeric: tabular-nums; }
.ov-char__v small { color: var(--muted); font-size: var(--ds-type-caption); }
.ov-char .meter { width: 100%; --b: var(--c); }
.ch-modes .bar-row .val b, .rg-chars .val b { font-variant-numeric: tabular-nums; }.rg-row2 { align-items: start; }
.ch-modes a.bar-row { color: inherit; text-decoration: none; }
/* WS02 (clip-audit 12 languages at 390): on the phone the values of a mode or character bar go under its name, so long mode
   names (ru "Бесконечные Битвы", es "Captura el punto") and "2 игроков" get the full width and never break inside a word */
@media (max-width: 560px) {
  .ch-modes .bar-row, .rg-chars .bar-row { grid-template-columns: minmax(0, 1fr); }
  .ch-modes .bar-row .val, .rg-chars .bar-row .val { text-align: left; white-space: normal; }
  .ch-modes .bar-row .val small:first-of-type, .rg-chars .bar-row .val small:first-of-type { margin-left: var(--ds-space-s); }
  .ch-modes .mode .mn b, .ch-modes .mode .mn small { overflow-wrap: normal; }
}
.ch-modes a.bar-row:hover, .ch-modes a.bar-row:focus-visible { background: var(--ds-color-surface-row); }
.allvals > .table-wrap { margin-top: var(--ds-space-s); }
/* Match rows keep the minimap thumb; long mode names wrap beside it. */