/* ============================================================
   Purple Eye — "terminal" redesign (preview layer)
   Loaded last, on top of style.css / site-shell.css / site-mobile.css.
   Everything is scoped to html.rd so removing the <link> restores the
   current look. Two palettes: data-rd-theme="void" (black, purple, acid
   lime) and "bios" (solid violet screen, white type).
   ============================================================ */

html.rd {
  --rd-bg: #0c0b10;
  --rd-panel: #131119;
  --rd-panel-2: #1a1722;
  --rd-line: #2f2a3b;
  --rd-line-hi: #4a4160;
  --rd-text: #ece8f4;
  --rd-muted: #948ca6;
  --rd-purple: #7c3aed;
  --rd-purple-hi: #b79cff;
  --rd-on-purple: #ffffff;
  --rd-fill: #7c3aed;        /* solid violet fill under white text (site CSS) */
  --rd-signal: #c6ff3d;      /* acid lime: active, positive, CTA */
  --rd-on-signal: #0c0b10;
  --rd-bad: #ff4d5e;         /* the one red: weaker, wrong, losing */
  --rd-right: var(--rd-signal); /* the one green is the interface's acid lime */
  --rd-wrong: var(--rd-bad);
  --rd-dots: rgba(124, 58, 237, 0.55);
  --rd-row: #1f1f23;         /* list rows: neutral grey, no violet tint */
  --rd-row-hi: #28282d;
  --rd-row-line: #36363d;
  /* Tiny5 is only crisp at on-screen sizes that are multiples of 8px; the
     sites scale <body> by zoom 1.1, so sizes are given in screen pixels. */
  --rd-px: calc(1px / 1.1);
  --rd-pixel: "Tiny5", "Press Start 2P", monospace;
  --rd-mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
}

html.rd[data-rd-theme="bios"] {
  --rd-bg: #2a14a3;
  --rd-panel: #2f19b0;
  --rd-panel-2: #3720c0;
  --rd-line: rgba(255, 255, 255, 0.38);
  --rd-line-hi: #ffffff;
  --rd-text: #ffffff;
  --rd-muted: #d5ccff;
  --rd-purple: #ffffff;
  --rd-purple-hi: #ffffff;
  --rd-on-purple: #2a14a3;
  --rd-fill: #7c3aed;
  --rd-signal: #c6ff3d;
  --rd-on-signal: #1b0c70;
  --rd-bad: #ff8a94;
  --rd-right: var(--rd-signal);
  --rd-wrong: var(--rd-bad);
  --rd-dots: rgba(255, 255, 255, 0.22);
  --rd-row: #2f19b0;
  --rd-row-hi: #3720c0;
  --rd-row-line: rgba(255, 255, 255, 0.3);
}

/* Feed the site's own variables, so every existing rule that uses them
   follows the theme without being rewritten. Specificity beats both
   :root (site-shell.css) and body[data-game="dota"] (style.css). */
html.rd body,
html.rd body[data-game="dota"] {
  --bg: var(--rd-bg);
  --panel: var(--rd-panel);
  --border: var(--rd-line);
  --text: var(--rd-text);
  --muted: var(--rd-muted);
  /* The sites' own CSS pairs these fills with hard-coded white text, so they
     must stay a fill white reads on -- in BIOS too, where --rd-purple is white. */
  --accent: var(--rd-fill);
  --accent-text: var(--rd-purple-hi);
  --accent-dark: var(--rd-purple-hi);
  --accent-purple: var(--rd-fill);
  --accent-purple-dark: var(--rd-purple-hi);
  --accent-purple-deep: var(--rd-fill);
  --on-accent: #ffffff;
  --accent-purple-tint: var(--rd-panel-2);
  --accent-green: var(--rd-signal);
  --accent-green-tint: var(--rd-panel-2);
  --font-mono: var(--rd-mono);
  --font-display: var(--rd-pixel);
  --font-logo: var(--rd-pixel);
  --game: var(--rd-signal);
}

/* ---------- ground: flat colour + a dithered glow ---------- */
html.rd,
html.rd body {
  background: var(--rd-bg);
}
html.rd body {
  font-family: var(--rd-mono);
  color: var(--rd-text);
  background-image: none;
}
/* Bitmap "glow" in the corner: a dot grid masked by a soft circle reads
   as an ordered-dither gradient instead of a blur. */
html.rd body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(var(--rd-dots) 1.1px, transparent 1.4px) 0 0 / 5px 5px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 72%);
          mask-image: radial-gradient(ellipse 55% 60% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 72%);
}
html.rd ::selection { background: var(--rd-signal); color: var(--rd-on-signal); }
html.rd * { scrollbar-color: var(--rd-line-hi) transparent; border-radius: 0 !important; }

/* Body text everywhere: one terminal face. */
html.rd body button,
html.rd body input,
html.rd body select,
html.rd body textarea,
html.rd body option,
html.rd body p,
html.rd body label,
html.rd body table {
  font-family: var(--rd-mono);
}

/* ---------- headings: bitmap face, "> " prompt, blinking cursor ---------- */
html.rd body h1,
html.rd body h2,
html.rd body h3,
html.rd body h4 {
  font-family: var(--rd-pixel);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--rd-text);
}
html.rd body .statsSection h2,
html.rd body .homeMetaSection h2,
html.rd body .homeIntro h2,
html.rd body .homeLatestMatch h2 {
  font-size: calc(40 * var(--rd-px));
  line-height: 1.1;
  margin: 0 0 18px;
}
html.rd body .statsSection h2::before,
html.rd body .homeMetaSection h2::before,
html.rd body .homeLatestMatch h2::before {
  content: "> ";
  color: var(--rd-purple-hi);
}
html.rd body .statsSection h2::after,
html.rd body .homeMetaSection h2::after {
  content: "_";
  color: var(--rd-signal);
  margin-left: 0.15em;
  animation: rd-blink 1.1s steps(1) infinite;
}
@keyframes rd-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.rd body .statsSection h2::after,
  html.rd body .homeMetaSection h2::after { animation: none; }
}
html.rd body .statsSection h3,
html.rd body .draftTeam h3 {
  font-size: calc(16 * var(--rd-px));
  color: var(--rd-purple-hi);
  letter-spacing: 0.06em;
}
html.rd body .statsSection h3::before,
html.rd body .draftTeam h3::before { content: ".0" counter(rd-h3) " > "; counter-increment: rd-h3; color: var(--rd-muted); }
html.rd body .statsSection,
html.rd body .draftTeams { counter-reset: rd-h3; }

/* Small grey helper lines read as terminal comments. */
html.rd body .historyHint,
html.rd body .historyMeta,
html.rd body .draftControlLabel,
html.rd body .homeMetaColHead {
  font-family: var(--rd-mono);
  color: var(--rd-muted);
  letter-spacing: 0.04em;
}

/* ---------- top bar (desktop): Dotabuff-like flat strip ---------- */
/* Caps everywhere on all three sites (Dota already does it in style.css) */
html.rd body h1, html.rd body h2, html.rd body h3, html.rd body h4,
html.rd body button, html.rd body input, html.rd body select, html.rd body option,
html.rd body .topNavTitle, html.rd body .tier1HeroNameText, html.rd body .homeMetaHeroCardName {
  text-transform: uppercase;
}
html.rd body .siteTitleIcon { margin-right: 8px; vertical-align: -3px; }

@media (min-width: 701px) {
  html.rd body .topNav {
    border: 0;
    border-bottom: 2px solid var(--rd-line);
    border-radius: 0;
    padding: 16px 0 14px;
    box-shadow: none;
    background: transparent;
  }
  html.rd body .topNavTitle,
  html.rd body[data-game="dota"] .topNavTitle {
    font-family: var(--rd-pixel);
    letter-spacing: 0.06em;
    color: var(--rd-text);
    gap: 10px;
  }
  html.rd body .topNav { column-gap: 12px; }
  html.rd body .topNavBtn {
    font-family: var(--rd-pixel);
    font-size: calc(16 * var(--rd-px));
    letter-spacing: 0;
    color: var(--rd-muted);
    background: transparent;
    border: 0;
    padding: 8px 6px;
    box-shadow: none;
  }
  html.rd body .topNavBtn:hover:not(:disabled),
  html.rd body[data-game="dota"] .topNavBtn:hover {
    color: var(--rd-text);
    background: var(--rd-panel-2);
  }
  html.rd body .topNavBtn--active,
  html.rd body .topNavBtn.rdNavActive,
  html.rd body .topNavBtn.rdNavActive:hover:not(:disabled),
  html.rd body .topNavBtn--active:hover:not(:disabled),
  html.rd body[data-game="dota"] .topNavBtn--active:hover {
    color: var(--rd-on-signal);
    background: var(--rd-signal);
  }
  /* "( ВОЙТИ / ЗАРЕГИСТРИРОВАТЬСЯ )" like the bracketed LOGIN/REGISTER of the 404 poster */
  html.rd body #topNavAuthBtn,
  html.rd body .topNavRight .topNavBtn {
    border: 0;
    color: var(--rd-text);
  }
  html.rd body #topNavAuthBtn::before { content: "(\00a0"; color: var(--rd-purple-hi); }
  html.rd body #topNavAuthBtn::after { content: "\00a0)"; color: var(--rd-purple-hi); }
  html.rd body .topNavRight .topNavBtn:hover:not(:disabled),
  html.rd body #topNavAuthBtn:hover:not(:disabled) { background: var(--rd-purple); color: var(--rd-on-purple); }
  html.rd body #topNavAuthBtn:hover::before,
  html.rd body #topNavAuthBtn:hover::after { color: inherit; }
}

/* Logo: PURPLE + inverted EYE block */
html.rd body .siteTitleHighlight {
  background: var(--rd-purple);
  color: var(--rd-on-purple);
  padding: 0 0.3em;
  margin-left: 0.15em;
}
html.rd body .gameTag,
html.rd body[data-game="dota"] .gameTag {
  font-family: var(--rd-mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--rd-signal);
  background: transparent;
  border: 1px dashed var(--rd-line-hi);
}

/* Sub-tabs (mode toggles, patch tabs): inverted block for the active one */
html.rd body .statsModeBtn {
  font-family: var(--rd-mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--rd-muted);
  border: 1px solid var(--rd-line);
  box-shadow: none;
}
html.rd body .statsModeBtn:hover:not(:disabled) { color: var(--rd-text); border-color: var(--rd-line-hi); background: var(--rd-panel-2); }
html.rd body .statsModeBtn--active,
html.rd body .statsModeBtn--active:hover:not(:disabled) {
  background: var(--rd-purple);
  border-color: var(--rd-purple);
  color: var(--rd-on-purple);
}

/* ---------- controls ---------- */
html.rd body input,
html.rd body select,
html.rd body textarea {
  background: var(--rd-bg);
  color: var(--rd-text);
  border: 2px solid var(--rd-line);
  box-shadow: none;
  /* Plex Mono is wide: no extra tracking, or "ИГРОК 1: НИК ИЛИ ID" gets cut */
  letter-spacing: 0;
  font-size: 0.88rem;
}
/* Position pickers wide enough for "1 · КЭРРИ" / "ПОЗИЦИЯ" in the mono face */
html.rd body .slot { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); }
html.rd body .draftHeroSlot--withPosition { grid-template-columns: 150px minmax(0, 1fr); }
html.rd body .position-select { padding-left: 10px; padding-right: 26px; text-overflow: clip; }
@media (max-width: 480px) { html.rd body .slot { grid-template-columns: 1fr; } }
html.rd body input::placeholder,
html.rd body textarea::placeholder { color: var(--rd-muted); opacity: 1; }
html.rd body input:focus,
html.rd body select:focus,
html.rd body textarea:focus {
  outline: none;
  border-color: var(--rd-signal);
  box-shadow: 4px 4px 0 var(--rd-purple);
}
html.rd body button:focus-visible { outline: 2px solid var(--rd-signal); outline-offset: 2px; }
html.rd body option { background: var(--rd-panel); color: var(--rd-text); }

/* Secondary buttons: outlined */
html.rd body button {
  font-family: var(--rd-mono);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Primary actions: acid block with a hard purple offset shadow that
   "presses in" on hover, like a key. */
html.rd body #analyzeBtn,
html.rd body #draftSuggestBtn,
html.rd body #guideSubmit,
html.rd body .authGateBtn,
html.rd body .premiumSubscribeBtn,
html.rd body button[type="submit"] {
  font-family: var(--rd-pixel);
  font-weight: 400;
  font-size: calc(16 * var(--rd-px));
  letter-spacing: 0.08em;
  background: var(--rd-signal);
  color: var(--rd-on-signal);
  border: 2px solid var(--rd-signal);
  box-shadow: 5px 5px 0 var(--rd-purple);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
html.rd body #analyzeBtn:hover:not(:disabled),
html.rd body #draftSuggestBtn:hover:not(:disabled),
html.rd body #guideSubmit:hover:not(:disabled),
html.rd body .authGateBtn:hover:not(:disabled),
html.rd body .premiumSubscribeBtn:hover,
html.rd body button[type="submit"]:hover:not(:disabled) {
  background: var(--rd-signal);
  color: var(--rd-on-signal);
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--rd-purple);
}
html.rd body #analyzeBtn:active:not(:disabled),
html.rd body #draftSuggestBtn:active:not(:disabled),
html.rd body button[type="submit"]:active:not(:disabled) {
  transform: translate(5px, 5px);
  box-shadow: none;
  color: var(--rd-on-signal);
}
html.rd body #analyzeBtn::after,
html.rd body #draftSuggestBtn::after { content: " >"; }

html.rd body .draftChangeRankBtn,
html.rd body .editLineupBtn,
html.rd body .resultBackBtn,
html.rd body .patchPickerBtn {
  background: transparent;
  color: var(--rd-text);
  border: 2px solid var(--rd-line-hi);
  box-shadow: none;
}
html.rd body .draftChangeRankBtn:hover:not(:disabled),
html.rd body .editLineupBtn:hover:not(:disabled),
html.rd body .resultBackBtn:hover:not(:disabled),
html.rd body .patchPickerBtn:hover {
  background: var(--rd-text);
  color: var(--rd-bg);
  border-color: var(--rd-text);
}
/* the patch number and caret carry their own colours: follow the inverted block */
html.rd body .patchPickerBtn:hover * { color: inherit !important; background: transparent !important; }

/* Checkboxes: square ticks */
html.rd body input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid var(--rd-line-hi);
  background: transparent;
  display: inline-grid;
  place-content: center;
  vertical-align: -3px;
  cursor: pointer;
}
html.rd body input[type="checkbox"]:checked::after { content: ""; width: 6px; height: 6px; background: var(--rd-on-signal); }

/* ---------- panels ---------- */
html.rd body .team,
html.rd body .homeMetaCol,
html.rd body .guideResult > *,
html.rd body .homeLatestMatchCard,
html.rd body .authModal,
html.rd body .modalBox {
  background: var(--rd-panel);
  border: 2px solid var(--rd-line);
  box-shadow: none;
}
html.rd body .team:focus-within { border-color: var(--rd-purple); }

/* ---------- home: meta columns + hero cards ---------- */
html.rd body .homeMetaGrid { gap: 14px; }
html.rd body .homeMetaColHead {
  font-family: var(--rd-pixel);
  font-size: calc(16 * var(--rd-px));
  color: var(--rd-text);
  border-bottom: 2px dashed var(--rd-line);
  padding-bottom: 8px;
}
html.rd body .homeMetaHeroCard {
  background: var(--rd-panel-2);
  border: 2px solid var(--rd-line);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
html.rd body .homeMetaHeroCard:hover {
  border-color: var(--rd-purple);
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--rd-purple);
}
html.rd body .homeMetaHeroCard--top { border-color: var(--rd-signal); }
/* Halftone screen over the hero art: bitmap-poster texture */
html.rd body .homeMetaHeroPortrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(transparent 0.9px, var(--rd-panel-2) 1.3px) 0 0 / 3px 3px;
  opacity: 0.85;
}
html.rd body .homeMetaHeroCardName {
  font-family: var(--rd-pixel);
  font-size: calc(16 * var(--rd-px));
  letter-spacing: 0.05em;
  color: var(--rd-text);
}
html.rd body .homeMetaHeroCardBadge {
  font-family: var(--rd-mono);
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--rd-line-hi);
  color: var(--rd-muted);
}
html.rd body .homeMetaHeroCard--top .homeMetaHeroCardBadge { background: var(--rd-signal); border-color: var(--rd-signal); color: var(--rd-on-signal); }
/* ВИНРЕЙТ ......... 53.1%  — dotted leaders like the terminal reference */
html.rd body .homeMetaHeroStat { display: flex; align-items: baseline; gap: 0; font-family: var(--rd-mono); }
html.rd body .homeMetaHeroStat > span:first-child { flex: 1; display: flex; align-items: baseline; min-width: 0; }
html.rd body .homeMetaHeroStat > span:first-child::after {
  content: "";
  flex: 1;
  margin: 0 6px;
  border-bottom: 2px dotted var(--rd-line-hi);
  transform: translateY(-3px);
}
html.rd body .homeMetaHeroStat__v { font-weight: 600; color: var(--rd-text); }
html.rd body .homeMetaHeroStat__v--good { color: var(--rd-signal); }
html.rd body .homeMetaHeroStat__v--bad { color: var(--rd-bad); }
/* Keep a label from painting over its value between the phone and laptop layouts. */
@media (min-width: 701px) and (max-width: 1150px) {
  html.rd body .homeMetaGrid:not(.heroesGrid) .statFull { display: none; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .statShort { display: inline; }
}

html.rd body .homeLatestMatchLeague { font-family: var(--rd-mono); color: var(--rd-muted); letter-spacing: 0.1em; }
html.rd body .homeLatestMatchTeamName { font-family: var(--rd-pixel); font-size: calc(16 * var(--rd-px)); }
html.rd body .homeLatestMatchTeam--win .homeLatestMatchTeamName { color: var(--rd-signal); }
html.rd body .homeLatestMatchVs { font-family: var(--rd-pixel); color: var(--rd-purple-hi); }
html.rd body .homeLatestMatchCta { font-family: var(--rd-mono); font-weight: 600; color: var(--rd-signal); }

html.rd body .homeLatestMatchScore {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  font-family: var(--rd-pixel);
  font-size: calc(48 * var(--rd-px));
  line-height: 1;
  color: var(--rd-muted);
}
html.rd body .homeLatestMatchScore i { font-style: normal; color: var(--rd-purple-hi); }
html.rd body .homeLatestMatchScore b { font-weight: 400; }
html.rd body .homeLatestMatchScore .homeLatestMatchScore--win { color: var(--rd-signal); }
html.rd body .homeLatestMatchCard { cursor: pointer; }
html.rd body .homeLatestMatchCard:hover { border-color: var(--rd-purple); }

/* ---------- tier-1 meta list: neutral grey rows like the current site ---------- */
html.rd body .tier1Row,
html.rd body .historyRow {
  background: var(--rd-row);
  border: 1px solid var(--rd-row-line);
  border-left: 3px solid var(--rd-row-line);
  box-shadow: none;
}
html.rd body .tier1Row:hover,
html.rd body .historyRow:hover { background: var(--rd-row-hi); border-left-color: var(--rd-signal); }
/* A finished prediction always shows its verdict on the left edge (the
   "✓ прогноз верный" text is gone): green = right, red = wrong. */
html.rd body .historyRow--win,
html.rd body .historyRow--win:hover { border-left: 4px solid var(--rd-right); }
html.rd body .historyRow--loss,
html.rd body .historyRow--loss:hover { border-left: 4px solid var(--rd-wrong); }
/* Valve's 32px minimap-style icons, at their own size so they stay crisp */
html.rd body .tier1Name .heroIcon { width: 32px; height: 32px; object-fit: contain; flex: none; }
html.rd body .tier1HeroNameText { font-family: var(--rd-pixel); font-size: calc(16 * var(--rd-px)); letter-spacing: 0.05em; color: var(--rd-text); }
html.rd body .tier1Pos {
  font-family: var(--rd-mono);
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--rd-line-hi);
  color: var(--rd-muted);
}
html.rd body .tier1Num { font-family: var(--rd-mono); color: var(--rd-muted); }
/* Numbers stay in the mono face: the bitmap "%" is unreadable */
html.rd body .tier1Wr { font-family: var(--rd-mono); font-weight: 700; font-size: 1.05rem; color: var(--rd-text); }
html.rd body .tier1Wr--good { color: var(--rd-signal); }
html.rd body .tier1Wr--bad { color: var(--rd-bad); }
/* Solid winrate bar on a grey track */
html.rd body .tier1Bar { height: 6px; background: var(--rd-row-line); }
html.rd body .tier1Bar i { height: 100%; background: var(--rd-purple-hi) !important; }
html.rd body .tier1Bar.tier1Wr--good i { background: var(--rd-signal) !important; }
html.rd body .tier1Bar.tier1Wr--bad i { background: var(--rd-bad) !important; }

/* ---------- patches ---------- */
/* The whole write-up flows down the page instead of sitting in a small
   scroll box (sizeScrollBox sets an inline max-height, hence !important). */
html.rd body #patchBody {
  max-height: none !important;
  overflow: visible !important;
}
html.rd body .patchPickerBtn b { color: var(--rd-signal); }
html.rd[data-rd-theme="bios"] body .patchPickerBtn b { color: var(--rd-text); }
/* Grey hint text hard-coded as #666 in the result view */
html.rd body .durationHint,
html.rd body .durationDelta--flat { color: var(--rd-muted); }
html.rd body .patchPickerMenu { background: var(--rd-panel); border: 2px solid var(--rd-line-hi); box-shadow: 6px 6px 0 var(--rd-purple); }
html.rd body .patchPickerItem--active { background: var(--rd-purple); color: var(--rd-on-purple); }
html.rd body .patchSummary,
html.rd body #patchBody { font-family: var(--rd-mono); line-height: 1.7; }
html.rd body .patchChip {
  font-family: var(--rd-mono);
  font-weight: 600;
  background: transparent;
  border-width: 2px;
}
html.rd body .patchChip--up { color: var(--rd-signal); border-color: var(--rd-signal); }
html.rd body .patchChip--down { color: var(--rd-bad); border-color: var(--rd-bad); }
html.rd body .patchChip--up:hover { background: var(--rd-signal); color: var(--rd-on-signal); }
html.rd body .patchChip--down:hover { background: var(--rd-bad); color: var(--rd-bg); }
html.rd body .patchBadge--nerf { color: var(--rd-bad); border-color: var(--rd-bad); }
html.rd body .patchEntry--nerfed { border-left-color: var(--rd-bad); }
html.rd body a { color: var(--rd-purple-hi); text-underline-offset: 3px; }
html.rd body a:hover { color: var(--rd-signal); }

/* ---------- autocomplete, tables, misc ---------- */
html.rd body .ac-list { background: var(--rd-panel); border: 2px solid var(--rd-line-hi); box-shadow: 6px 6px 0 var(--rd-purple); }
html.rd body .ac-item--active { background: var(--rd-signal); color: var(--rd-on-signal); }
html.rd body table th { background: var(--rd-purple); color: var(--rd-on-purple); font-family: var(--rd-mono); }
/* Plex Mono runs wide: tables get a smaller size so cells don't wrap word by word */
html.rd body table { font-size: 0.8rem; letter-spacing: -0.01em; }
html.rd body table th { font-size: 0.72rem; letter-spacing: 0.02em; }
html.rd body .probBar__fillA,
html.rd body .probBar__fillB { font-family: var(--rd-pixel); font-weight: 400; font-size: calc(56 * var(--rd-px)); line-height: 1; letter-spacing: 0; }
html.rd body .probBar__fillA { background: var(--rd-signal); color: var(--rd-on-signal); }
html.rd body .probBar__fillB { background: var(--rd-purple); color: var(--rd-on-purple); }
html.rd body .toast { background: var(--rd-signal); color: var(--rd-on-signal); font-family: var(--rd-mono); font-weight: 600; box-shadow: 5px 5px 0 var(--rd-purple); }
/* "(НЕТ ДАННЫХ)" blocks: the acid slab from the 404 poster */
html.rd body .emptyStateBlock { background: var(--rd-signal); border: 0; }
html.rd body .emptyStateBlock__title { font-family: var(--rd-pixel); color: var(--rd-on-signal); }
html.rd body .emptyStateBlock__title::before { content: "( "; }
html.rd body .emptyStateBlock__title::after { content: " )"; }
html.rd body .emptyStateBlock p { color: var(--rd-on-signal); }
html.rd body .error { border: 2px solid var(--rd-bad); color: var(--rd-bad); background: transparent; font-family: var(--rd-mono); }
html.rd body .error::before { content: "ERR > "; font-weight: 700; }
html.rd body .logoutBtn,
html.rd body .telegramUnlinkBtn { color: var(--rd-bad); border-color: var(--rd-bad); }
html.rd body .logoutBtn:hover:not(:disabled),
html.rd body .telegramUnlinkBtn:hover:not(:disabled),
html.rd body .historyDeleteBtn:hover:not(:disabled) { background: var(--rd-bad); border-color: var(--rd-bad); color: var(--rd-bg); }

/* ---------- phone ---------- */
@media (max-width: 700px) {
  html.rd body #mobileHeader { background: var(--rd-bg); border-bottom: 2px solid var(--rd-line); }
  html.rd body #siteTitle { font-family: var(--rd-pixel); letter-spacing: 0.06em; color: var(--rd-text); }
  html.rd body .statsSection h2,
  html.rd body .homeMetaSection h2,
  html.rd body .homeLatestMatch h2 { font-size: calc(24 * var(--rd-px)); }
  html.rd body .drawer,
  html.rd body #drawer { background: var(--rd-bg); border-left: 2px solid var(--rd-purple); }
  html.rd body .drawerMenuBtn { font-family: var(--rd-pixel); letter-spacing: 0.06em; }
  html.rd body #drawer .authBar .authUserName {
    font-family: var(--rd-pixel);
    font-size: calc(24 * var(--rd-px));
    font-weight: 400;
    letter-spacing: 0.06em;
  }
  /* Side panel: flat terminal blocks instead of the gradient tiles */
  html.rd body #drawer .authBar .drawerMenuBtn,
  html.rd body #drawer .authBar .drawerMenuBtn:active {
    background: var(--rd-panel);
    border: 2px solid var(--rd-line);
    box-shadow: inset 4px 0 0 var(--rd-purple);
    color: var(--rd-text);
    font-weight: 400;
  }
  html.rd body #drawer .authBar #toggleAuthBtn {
    background: var(--rd-signal);
    border-color: var(--rd-signal);
    box-shadow: 4px 4px 0 var(--rd-purple);
    color: var(--rd-on-signal);
  }
  /* Narrow meta cards: no leaders, labels never break mid-word */
  html.rd body .homeMetaHeroStat { font-size: 0.72rem; gap: 6px; }
  html.rd body .homeMetaHeroStat > span { white-space: nowrap; }
  html.rd body .homeMetaHeroStat > span:first-child { overflow: hidden; text-overflow: ellipsis; display: block; }
  html.rd body .homeMetaHeroStat__v { flex: none; }
  html.rd body .homeMetaHeroStat > span:first-child::after { display: none; }
  html.rd body .homeMetaHeroCardName { font-size: calc(16 * var(--rd-px)); }
  html.rd body .homeMetaHeroCardBadge { font-size: 0.62rem; padding: 2px 4px; }
}

/* ---------- palette switch VOID / BIOS (theme.js) ---------- */
html.rd .rdThemeSwitch {
  display: inline-flex;
  flex: none;
  align-self: center;
  border: 1px solid var(--rd-line-hi);
  background: transparent;
}
html.rd .rdThemeSwitch button,
html.rd .rdThemeSwitch button:hover:not(:disabled) {
  min-height: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  padding: 5px 8px;
  font: 600 11px/1 var(--rd-mono);
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--rd-muted);
  width: auto;
}
html.rd .rdThemeSwitch button:hover:not(:disabled) { color: var(--rd-text); }
html.rd .rdThemeSwitch button[aria-pressed="true"],
html.rd .rdThemeSwitch button[aria-pressed="true"]:hover:not(:disabled) { background: var(--rd-signal); color: var(--rd-on-signal); }
html.rd .rdThemeSwitch button:focus-visible { outline: 2px solid var(--rd-signal); outline-offset: 1px; }
html.rd .rdThemeSwitch--bar { margin-right: 6px; }
@media (min-width: 701px) { html.rd body #topNavAuthBtn { padding-right: 0; } }
/* Narrow laptops: drop the decorative brackets and tighten the tabs so the
   bar stays on one line (the pixel face can't shrink below 16px crisply) */
@media (min-width: 701px) and (max-width: 1300px) {
  html.rd body #topNavAuthBtn::before,
  html.rd body #topNavAuthBtn::after { content: none; }
  html.rd body .topNav { column-gap: 6px; }
  html.rd body .topNavBtn { padding: 8px 4px; }
  html.rd .rdThemeSwitch--bar { margin-right: 2px; }
}
/* Below 1150px the tabs get their own row, as Dota's style.css already
   does -- applied here for MLBB/LoL too, whose own CSS never wraps. */
@media (min-width: 701px) and (max-width: 1150px) {
  html.rd body .topNav { grid-template-columns: 1fr auto; row-gap: 4px; }
  html.rd body .topNavBrand,
  html.rd body .topNavCenter { min-width: 0; }
  html.rd body .topNavCenter { grid-column: 1 / -1; grid-row: 2; justify-content: center; justify-self: stretch; width: 100%; flex-wrap: wrap; }
}
html.rd .rdThemeSwitch--drawer { margin-top: 14px; align-self: flex-start; }
html.rd .rdThemeSwitch--drawer button,
html.rd .rdThemeSwitch--drawer button:hover:not(:disabled) { padding: 10px 14px; font-size: 12px; }
@media (max-width: 700px) { html.rd .rdThemeSwitch--bar { display: none; } }
@media (min-width: 701px) { html.rd .rdThemeSwitch--drawer { display: none; } }

/* ============================================================
   Patch notes (Valve's list + AI verdicts) and the Heroes section
   ============================================================ */
html.rd .visuallyHidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- patch page --- */
html.rd body .patchSectionTitle {
  margin: 26px 0 10px;
  font-size: calc(24 * var(--rd-px));
  color: var(--rd-text);
}
html.rd body .patchSubTitle {
  margin: 14px 0 6px;
  font-family: var(--rd-mono);
  font-weight: 600;
  color: var(--rd-muted);
  letter-spacing: 0.04em;
}
html.rd body .patchEntry {
  background: var(--rd-row);
  border: 1px solid var(--rd-row-line);
  border-left: 4px solid var(--rd-row-line);
  padding: 12px 16px;
  margin-bottom: 8px;
}
html.rd body .patchEntry--buff { border-left-color: var(--rd-right); }
html.rd body .patchEntry--nerf { border-left-color: var(--rd-wrong); }
html.rd body .patchEntry--change { border-left-color: var(--rd-purple-hi); }
html.rd body .patchEntryHead { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
html.rd body .patchHeroLink,
html.rd body .patchHeroLink:hover:not(:disabled) {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 0; margin: 0; min-height: 0;
  box-shadow: none; color: var(--rd-text); cursor: pointer; text-transform: none;
}
html.rd body .patchHeroLink:hover b { text-decoration: underline; text-underline-offset: 3px; color: var(--rd-signal); }
html.rd body .patchEntryHead b { font-family: var(--rd-mono); font-weight: 700; }
/* "усилен · сильное влияние" instead of the old length bar */
html.rd body .patchVerdict {
  font-family: var(--rd-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid currentColor;
}
html.rd body .patchVerdict--buff { color: var(--rd-right); }
html.rd body .patchVerdict--nerf { color: var(--rd-wrong); }
html.rd body .patchVerdict--change { color: var(--rd-purple-hi); }
html.rd body .patchAbility { margin-top: 6px; }
html.rd body .patchAbilityName {
  display: block;
  font-family: var(--rd-mono);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--rd-purple-hi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html.rd body .patchEntryChange { font-family: var(--rd-mono); color: var(--rd-text); line-height: 1.6; }
html.rd body .patchEntryChange::before { content: "· "; color: var(--rd-muted); }
html.rd body .patchEntryWhy { margin-top: 8px; color: var(--rd-muted); font-family: var(--rd-mono); line-height: 1.6; }
html.rd body .patchEntryWhy::before { content: "ИИ > "; color: var(--rd-purple-hi); font-weight: 700; }
/* folded AI comments */
html.rd body .patchAi--off .patchAiOnly { display: none; }
html.rd body .patchAiToggle,
html.rd body .patchAiToggle:hover:not(:disabled) {
  background: transparent;
  border: 1px dashed var(--rd-line-hi);
  color: var(--rd-muted);
  box-shadow: none;
  font-family: var(--rd-mono);
  font-weight: 600;
  font-size: 0.75rem;
  padding: 4px 10px;
}
html.rd body .patchAiToggle[aria-pressed="true"] { border-style: solid; border-color: var(--rd-purple-hi); color: var(--rd-text); }

/* --- heroes catalogue: the homepage cards, one column per attribute --- */
html.rd body .heroesHead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
html.rd body .heroesHead h2 { margin: 0; }
@media (min-width: 701px) { html.rd body #heroesSection .heroesHead h2 { display: block; } }
html.rd body .heroesSearch input { width: 260px; max-width: 100%; }
html.rd body .heroesGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.rd body .heroesCount { color: var(--rd-muted); font-family: var(--rd-mono); font-size: 0.75rem; margin-left: 6px; }
html.rd body button.heroesCard,
html.rd body button.heroesCard:hover:not(:disabled) {
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--rd-text);
  text-transform: none;
  cursor: pointer;
  margin: 0;
  min-height: 0;
}
html.rd body button.heroesCard:hover:not(:disabled) { background: var(--rd-panel-2); border-color: var(--rd-purple); transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--rd-purple); }
html.rd body .heroesCard .homeMetaHeroCardName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { html.rd body .heroesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- hero page --- */
html.rd body .heroBackBtn { margin-bottom: 16px; }
html.rd body .heroHero { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
html.rd body .heroHeroArt {
  width: 192px; height: 108px; flex: none;
  background: center / cover no-repeat;
  border: 2px solid var(--rd-purple);
  box-shadow: 6px 6px 0 var(--rd-purple);
  position: relative;
}
html.rd body .heroHeroArt::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(transparent 1px, rgba(12, 11, 16, 0.55) 1.4px) 0 0 / 3px 3px;
}
html.rd body .heroHero h2 { margin: 0 0 6px; }
@media (max-width: 420px) {
  html.rd body .heroHero { flex-wrap: wrap; }
  html.rd body .heroHero > div:last-child { flex: 1 1 160px; min-width: 0; }
  html.rd body .heroHero h2 { overflow-wrap: anywhere; }
}
html.rd body #heroesSection .heroHero h2 { display: block; }
html.rd body #heroPage > h3 { margin-top: 30px; }
html.rd body #heroPage h4 {
  margin: 16px 0 8px;
  font-family: var(--rd-mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--rd-muted);
  text-transform: uppercase;
}
html.rd body .heroBuildRow { display: flex; flex-wrap: wrap; gap: 8px; }
html.rd body .heroItem {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rd-row); border: 1px solid var(--rd-row-line);
  padding: 4px 10px 4px 4px;
  font-family: var(--rd-mono); font-size: 0.85rem;
}
html.rd body .heroItemIcon { width: 44px; height: 32px; object-fit: cover; display: block; }
html.rd body .heroItemTime { color: var(--rd-signal); font-weight: 600; }
html.rd body .heroSkillRow { display: grid; gap: 6px; }
html.rd body .heroSkill {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--rd-row); border: 1px solid var(--rd-row-line);
  padding: 6px 2px; min-width: 0;
  font-family: var(--rd-mono); font-size: 0.7rem; text-align: center;
}
html.rd body .heroSkill b { color: var(--rd-muted); font-weight: 600; }
html.rd body .heroSkill img { width: 36px; height: 36px; display: block; }
html.rd body .heroSkillTalent {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--rd-purple); color: var(--rd-on-purple);
  font-family: var(--rd-pixel); font-size: calc(16 * var(--rd-px));
}
html.rd body .heroSkillName { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rd-muted); }
html.rd body .heroOppGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
html.rd body button.tier1Row { width: 100%; font: inherit; color: inherit; text-transform: none; cursor: pointer; min-height: 0; margin: 0 0 6px; }
@media (max-width: 700px) {
  html.rd body .heroOppGrid { grid-template-columns: 1fr; }
  html.rd body .heroHeroArt { width: 120px; height: 68px; }
}

/* --- AI hero guide (scripts/hero-guide.mjs) --- */
html.rd body .heroGuide { border: 2px solid var(--rd-purple); box-shadow: 6px 6px 0 var(--rd-purple); background: var(--rd-panel); padding: 18px 20px; }
html.rd body .heroGuideSummary { font-family: var(--rd-mono); color: var(--rd-text); line-height: 1.7; margin: 8px 0 4px; }
html.rd body .heroGuide p, html.rd body .heroGuide li { font-family: var(--rd-mono); line-height: 1.65; }
html.rd body .heroGuideNote { color: var(--rd-text); margin: 6px 0; }
html.rd body .heroGuidePhases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html.rd body .heroGuidePhase { background: var(--rd-row); border: 1px solid var(--rd-row-line); border-top: 3px solid var(--rd-signal); padding: 10px 12px; }
html.rd body .heroGuidePhase b { font-family: var(--rd-pixel); font-weight: 400; font-size: calc(16 * var(--rd-px)); color: var(--rd-signal); }
html.rd body .heroGuidePhase p { margin: 6px 0 0; font-size: 0.85rem; color: var(--rd-text); }
html.rd body .heroGuideSkills { display: flex; flex-wrap: wrap; gap: 6px; }
html.rd body .heroGuideSkills span { display: inline-flex; gap: 6px; align-items: center; background: var(--rd-row); border: 1px solid var(--rd-row-line); padding: 4px 8px; font-family: var(--rd-mono); font-size: 0.8rem; }
html.rd body .heroGuideSkills b { color: var(--rd-muted); }
html.rd body .heroGuideItem { background: var(--rd-row); border: 1px solid var(--rd-row-line); border-left: 3px solid var(--rd-purple-hi); padding: 8px 12px; margin-bottom: 6px; }
html.rd body .heroGuideItem b { font-family: var(--rd-mono); margin-right: 10px; }
html.rd body .heroGuideItem p { margin: 4px 0 0; color: var(--rd-muted); font-size: 0.85rem; }
html.rd body .heroGuideList { margin: 4px 0 8px; padding-left: 18px; }
html.rd body .heroGuideList li { margin-bottom: 4px; color: var(--rd-text); font-size: 0.88rem; }
html.rd body .heroGuideList li::marker { content: "› "; color: var(--rd-purple-hi); }
html.rd body .heroGuideCols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
html.rd body .heroGuidePlayers { display: grid; gap: 10px; }
html.rd body .heroGuidePlayer { background: var(--rd-row); border: 1px solid var(--rd-row-line); padding: 10px 12px; }
html.rd body .heroGuidePlayer b { font-family: var(--rd-pixel); font-weight: 400; font-size: calc(16 * var(--rd-px)); }
html.rd body .heroGuidePlayer p { margin: 6px 0; font-size: 0.85rem; color: var(--rd-text); }
@media (max-width: 700px) {
  html.rd body .heroGuidePhases, html.rd body .heroGuideCols { grid-template-columns: 1fr; }
  html.rd body .heroGuide { padding: 14px; }
}

/* --- ward maps on the hero guide --- */
html.rd body .wardMaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 4px; }
html.rd body .wardMap { margin: 0; border: 2px solid var(--rd-row-line); background: var(--rd-bg); }
html.rd body .wardMap svg { display: block; width: 100%; height: auto; }
html.rd body .wardMap figcaption { font-family: var(--rd-pixel); font-size: calc(16 * var(--rd-px)); color: var(--rd-text); padding: 6px 10px; border-top: 2px solid var(--rd-row-line); }
html.rd body .wardDot { stroke: #0c0b10; stroke-width: 0.3; opacity: 0.88; cursor: help; }
html.rd body .wardDot--obs { fill: #ffd23f; }
html.rd body .wardDot--sen { fill: #3fa9ff; }
html.rd body .wardDot:hover { opacity: 1; stroke: #fff; stroke-width: 0.5; }
html.rd body .wardLegend { display: block; }
html.rd body .wardKey { vertical-align: -1px; margin-right: 5px; }
html.rd body .wardKey { display: inline-block; width: 10px; height: 10px; border-radius: 50% !important; border: 1px solid #0c0b10; }
html.rd body .wardKey--obs { background: #ffd23f; }
html.rd body .wardKey--sen { background: #3fa9ff; margin-left: 8px; }
@media (max-width: 700px) { html.rd body .wardMaps { grid-template-columns: 1fr; } }

/* --- patch page: AI comments switch (segmented, impossible to miss) --- */
html.rd body .patchAiSwitch { display: inline-flex; align-items: stretch; margin-left: 14px; border: 2px solid var(--rd-purple-hi); }
html.rd body .patchAiSwitch > span { display: flex; align-items: center; padding: 0 10px; font-family: var(--rd-mono); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rd-text); border-right: 2px solid var(--rd-purple-hi); }
html.rd body .patchAiSwitch .patchAiToggle,
html.rd body .patchAiSwitch .patchAiToggle:hover:not(:disabled) { border: 0; border-radius: 0; margin: 0; padding: 6px 12px; font-size: 0.75rem; color: var(--rd-muted); background: transparent; }
html.rd body .patchAiSwitch .patchAiToggle:hover:not(:disabled) { color: var(--rd-text); }
html.rd body .patchAiSwitch .patchAiToggle[aria-pressed="true"],
html.rd body .patchAiSwitch .patchAiToggle[aria-pressed="true"]:hover:not(:disabled) { background: var(--rd-signal); color: var(--rd-on-signal); }
@media (max-width: 700px) { html.rd body .patchAiSwitch { margin: 8px 0 0; } }
@media (max-width: 360px) {
  html.rd body .patchAiSwitch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; }
  html.rd body .patchAiSwitch > span { grid-column: 1 / -1; padding: 6px 10px; border-right: 0; border-bottom: 2px solid var(--rd-purple-hi); }
}

/* --- hero guide: folded by default, unfolds with an animated height --- */
html.rd body .heroGuideMore { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 320ms ease; }
html.rd body .heroGuide--folded .heroGuideMore { grid-template-rows: 0fr; }
html.rd body .heroGuideMoreInner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) { html.rd body .heroGuideMore { transition: none; } }

/* --- ward maps: clickable thumbnails --- */
html.rd body button.wardMap,
html.rd body button.wardMap:hover:not(:disabled) {
  display: block; width: 100%; padding: 0; margin: 0; min-height: 0; text-align: left;
  border: 2px solid var(--rd-row-line); background: var(--rd-bg); box-shadow: none; cursor: zoom-in; text-transform: none;
}
html.rd body button.wardMap:hover:not(:disabled) { border-color: var(--rd-signal); }
html.rd body .wardMapCaption { display: flex; justify-content: space-between; align-items: center; font-family: var(--rd-pixel); font-size: calc(16 * var(--rd-px)); color: var(--rd-text); padding: 6px 10px; border-top: 2px solid var(--rd-row-line); }
html.rd body .wardMapZoomHint { font-family: var(--rd-mono); font-size: 0.72rem; color: var(--rd-muted); letter-spacing: 0.04em; }
html.rd body button.wardMap:hover .wardMapZoomHint { color: var(--rd-signal); }

/* --- ward map zoom (lightbox) --- */
body.wardZoomOpen { overflow: hidden; }
.wardZoom {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(6, 5, 10, 0.88);
  display: grid; place-items: center; padding: 16px;
  animation: rd-fade-in 160ms ease-out;
}
.wardZoom--closing { animation: rd-fade-out 180ms ease-in forwards; }
@keyframes rd-fade-in { from { opacity: 0; } }
@keyframes rd-fade-out { to { opacity: 0; } }
.wardZoomBox {
  width: min(92vw, calc(92vh - 120px), 900px);
  background: var(--rd-bg, #0c0b10);
  border: 2px solid var(--rd-purple, #7c3aed);
  box-shadow: 8px 8px 0 var(--rd-purple, #7c3aed);
  animation: rd-zoom-in 220ms cubic-bezier(.2,.9,.3,1.2);
}
@keyframes rd-zoom-in { from { transform: scale(0.85); opacity: 0; } }
.wardZoomBar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border-bottom: 2px solid var(--rd-line, #2f2a3b); }
.wardZoomTabs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rd-line-hi, #4a4160); }
html.rd .wardZoomBar button,
html.rd .wardZoomBar button:hover:not(:disabled) {
  margin: 0; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; color: var(--rd-muted); font: 600 0.75rem/1 var(--rd-mono); letter-spacing: 0.04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
html.rd .wardZoomBar button:hover:not(:disabled) { color: var(--rd-text); }
html.rd .wardZoomBar button[aria-pressed="true"],
html.rd .wardZoomBar button[aria-pressed="true"]:hover:not(:disabled) { background: var(--rd-signal); color: var(--rd-on-signal); }
html.rd .wardZoomBar .wardZoomClose { margin-left: auto; font-size: 1rem; color: var(--rd-text); }
.wardZoomView { position: relative; aspect-ratio: 1; overflow: hidden; touch-action: none; cursor: grab; background: #000; }
.wardZoomView:active { cursor: grabbing; }
.wardZoomStage { width: 100%; height: 100%; transform-origin: 50% 50%; will-change: transform; }
.wardZoomStage--anim { transition: transform 260ms cubic-bezier(.2,.8,.2,1); }
.wardZoomStage svg { display: block; width: 100%; height: 100%; }
.wardZoomStage circle { transition: r 260ms cubic-bezier(.2,.8,.2,1); }
.wardZoomCtl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
html.rd .wardZoomCtl button,
html.rd .wardZoomCtl button:hover:not(:disabled) {
  width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border-radius: 0;
  background: rgba(12, 11, 16, 0.85); border: 2px solid var(--rd-line-hi); color: var(--rd-text);
  font: 700 1.2rem/1 var(--rd-mono); box-shadow: none;
}
html.rd .wardZoomCtl button:hover:not(:disabled) { border-color: var(--rd-signal); color: var(--rd-signal); }
.wardZoomInfo {
  position: absolute; left: 10px; right: 64px; bottom: 10px;
  background: rgba(12, 11, 16, 0.85); border: 1px solid var(--rd-line-hi, #4a4160);
  padding: 6px 10px; font: 500 0.8rem/1.4 var(--rd-mono, monospace); color: var(--rd-text, #fff);
  pointer-events: none;
}

/* --- patch picker: one solid block on all three sites (no inner box) --- */
html.rd body .patchPickerBtn,
html.rd body .patchPickerBtn:hover:not(:disabled) {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 8px 18px;
  background: var(--rd-text);
  border: 2px solid var(--rd-text);
  color: var(--rd-bg);
  box-shadow: 4px 4px 0 var(--rd-purple);
}
html.rd body .patchPickerBtn:hover:not(:disabled),
html.rd body .patchPickerBtn[aria-expanded="true"] {
  background: var(--rd-signal);
  border-color: var(--rd-signal);
  color: var(--rd-on-signal);
}
html.rd body .patchPickerBtn *,
html.rd body .patchPickerBtn:hover * {
  background: transparent !important;
  color: inherit !important;
  padding: 0;
  min-width: 0;
  border: 0;
}
html.rd body .patchPickerBtn b {
  font-family: var(--rd-pixel);
  font-weight: 400;
  font-size: calc(24 * var(--rd-px));
  line-height: 1;
  letter-spacing: 0.04em;
}
html.rd body .patchPickerBtn .patchPickerLabel { display: none; }
html.rd body .patchPickerBtn .patchPickerCaret { font-size: 0.8rem; }
html.rd body .patchHeader { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* patch filters: the same separate grey chips on all three sites */
html.rd body .patchFilterBar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html.rd body .patchFilterBtn,
html.rd body .patchFilterBtn:hover:not(:disabled) {
  margin: 0; padding: 6px 10px; min-height: 0;
  background: transparent; border: 2px solid var(--rd-line-hi); color: var(--rd-muted);
  font: 600 0.72rem/1 var(--rd-mono); letter-spacing: 0.05em; text-transform: uppercase; box-shadow: none;
}
html.rd body .patchFilterBtn:hover:not(:disabled) { color: var(--rd-text); border-color: var(--rd-text); }
html.rd body .patchFilterBtn--active,
html.rd body .patchFilterBtn--active:hover:not(:disabled) { background: var(--rd-purple); border-color: var(--rd-purple); color: var(--rd-on-purple); }

/* patch picker: the offset shadow only on hover / while the list is open */

/* checkboxes: no focus shadow after a click (keyboard focus keeps an outline) */
html.rd body input[type="checkbox"]:focus { box-shadow: none; border-color: var(--rd-line-hi); }
html.rd body input[type="checkbox"]:checked:focus { border-color: var(--rd-signal); }
html.rd body input[type="checkbox"]:focus-visible { outline: 2px solid var(--rd-signal); outline-offset: 2px; }

/* back links ("← Все герои", "← На главную", "Сохранённые детальные разборы"):
   plain pixel text, no frame */
html.rd body .resultBackBtn,
html.rd body .resultBackBtn:hover:not(:disabled) {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px 0;
  min-height: 0;
  font-family: var(--rd-pixel);
  font-weight: 400;
  font-size: calc(16 * var(--rd-px));
  letter-spacing: 0.04em;
  color: var(--rd-text);
}
html.rd body .resultBackBtn:hover:not(:disabled) { color: var(--rd-signal); }

/* starting items: "×3" after the name */
html.rd body .heroItemCount { color: var(--rd-signal); font-weight: 700; }
html.rd body .heroItem .heroItemIcon + .heroItemIcon { margin-left: -4px; }

/* --- hero guide: role tabs --- */
html.rd body .heroRoleTabs { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--rd-line-hi); margin: 0 0 12px; }
html.rd body .heroRoleTabs button,
html.rd body .heroRoleTabs button:hover:not(:disabled) {
  margin: 0; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; color: var(--rd-muted);
  font-family: var(--rd-pixel); font-weight: 400; font-size: calc(16 * var(--rd-px)); letter-spacing: 0.04em;
}
html.rd body .heroRoleTabs button:hover:not(:disabled) { color: var(--rd-text); }
html.rd body .heroRoleTabs button[aria-selected="true"],
html.rd body .heroRoleTabs button[aria-selected="true"]:hover:not(:disabled) { background: var(--rd-signal); color: var(--rd-on-signal); }
html.rd body .heroRoleOnly { margin-top: -6px; }

/* --- movement heatmap --- */
html.rd body .moveMap { margin: 6px 0 4px; max-width: 420px; border: 2px solid var(--rd-row-line); background: var(--rd-bg); }
html.rd body .moveMap svg { display: block; width: 100%; height: auto; }
html.rd body .moveMap figcaption { font-family: var(--rd-mono); font-size: 0.75rem; color: var(--rd-muted); border-top: 2px solid var(--rd-row-line); }
html.rd body .moveDot { fill: var(--rd-signal); }

/* --- clickable player names --- */
html.rd body .playerLink,
html.rd body .playerLink:hover:not(:disabled) {
  display: inline; margin: 0; padding: 0; min-height: 0; border: 0; background: transparent; box-shadow: none;
  font: inherit; font-family: var(--rd-pixel); font-weight: 400; color: var(--rd-text); text-transform: uppercase;
  text-decoration: underline dotted var(--rd-purple-hi); text-underline-offset: 4px; cursor: pointer;
}
html.rd body .playerLink:hover:not(:disabled) { color: var(--rd-signal); text-decoration-color: var(--rd-signal); }

/* --- one player's view (dialog) --- */
.playerViewBox { width: min(96vw, 1100px); max-height: 92vh; display: flex; flex-direction: column; }
.playerViewTitle { font-family: var(--rd-pixel); font-weight: 400; font-size: calc(24 * var(--rd-px)); color: var(--rd-text); padding: 0 6px; }
.playerViewBody { overflow-y: auto; padding: 14px 18px 18px; }
html.rd .playerViewBody h4 { margin: 16px 0 8px; font-family: var(--rd-mono); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--rd-muted); text-transform: uppercase; }

/* checkboxes look the same focused or not: the site's own inset "ring"
   shadow (style.css .draftCheckboxLabel input:checked) is what turned a
   checked box into a hollow frame once it lost focus */
html.rd body input[type="checkbox"],
html.rd body input[type="checkbox"]:checked,
html.rd body input[type="checkbox"]:focus,
html.rd body input[type="checkbox"]:checked:focus { box-shadow: none !important; border-radius: 0 !important; }
html.rd body input[type="checkbox"]:checked { background: var(--rd-signal); border-color: var(--rd-signal); }

/* patches: no shadows at all (picker button, its list) */
html.rd body .patchPickerBtn,
html.rd body .patchPickerBtn:hover:not(:disabled),
html.rd body .patchPickerBtn[aria-expanded="true"],
html.rd body .patchPickerMenu { box-shadow: none !important; }

/* --- farm block (cores): heatmap + wins/losses bars --- */
html.rd body .farmBlock { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
html.rd body .farmBlock .moveMap { margin: 0; }
html.rd body .farmBars { background: var(--rd-row); border: 1px solid var(--rd-row-line); padding: 12px 14px; }
html.rd body .farmBarsLegend { margin: 0 0 10px; font-family: var(--rd-mono); font-size: 0.75rem; color: var(--rd-muted); }
html.rd body .farmKey { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin: 0 4px 0 10px; }
html.rd body .farmKey--win { background: var(--rd-signal); margin-left: 0; }
html.rd body .farmKey--loss { background: var(--rd-bad); }
html.rd body .farmRow { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 10px; }
html.rd body .farmLabel { font-family: var(--rd-mono); font-size: 0.8rem; color: var(--rd-text); }
html.rd body .farmPair { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 3px 8px; align-items: center; }
html.rd body .farmPair b { font-family: var(--rd-mono); font-size: 0.8rem; color: var(--rd-text); text-align: right; }
html.rd body .farmBar { display: block; height: 8px; background: var(--rd-row-line); }
html.rd body .farmBar i { display: block; height: 100%; }
html.rd body .farmBar--win i { background: var(--rd-signal); }
html.rd body .farmBar--loss i { background: var(--rd-bad); }
@media (max-width: 900px) { html.rd body .farmBlock { grid-template-columns: 1fr; } html.rd body .farmRow { grid-template-columns: 1fr; gap: 4px; } }

/* ============================================================
   Sign-in window: Telegram first (public/tg-login.js)
   ============================================================ */
html.rd .authModal--tg .authModeTabs,
html.rd .authModal--tg #authModalContent { display: none; }
html.rd .tgLogin { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 6px 0 14px; }
html.rd .authModal:not(.authModal--tg) .tgLogin > :not(.tgLoginAlt) { display: none; }
html.rd .tgLoginBtn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 12px 18px;
  background: var(--rd-signal); color: var(--rd-on-signal);
  border: 2px solid var(--rd-signal); box-shadow: 5px 5px 0 var(--rd-purple);
  font-family: var(--rd-pixel); font-size: calc(24 * var(--rd-px)); letter-spacing: 0.04em;
  text-decoration: none; text-transform: uppercase;
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
html.rd .tgLoginBtn:hover { color: var(--rd-on-signal); transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--rd-purple); }
html.rd .tgLoginBtn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
html.rd .tgLoginBtn svg { width: 28px; height: 28px; flex: none; }
html.rd .tgLoginBtn.hidden { display: none; }
html.rd .tgLoginHint { margin: 0; text-align: center; font-family: var(--rd-mono); font-size: 0.8rem; color: var(--rd-muted); }
html.rd .tgLoginWait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border: 2px dashed var(--rd-line-hi); text-align: center; font-family: var(--rd-mono); }
html.rd .tgLoginWait.hidden { display: none; }
html.rd .tgLoginWait p { margin: 0; color: var(--rd-text); }
html.rd .tgLoginWaitLinks { font-size: 0.8rem; color: var(--rd-muted); }
html.rd .tgLoginWaitLinks button,
html.rd .tgLoginWaitLinks button:hover:not(:disabled) { display: inline; margin: 0; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; color: var(--rd-purple-hi); font: inherit; text-decoration: underline; text-transform: none; cursor: pointer; }
html.rd .tgLoginError { margin: 0; padding: 8px 10px; border: 2px solid var(--rd-bad); color: var(--rd-bad); font-family: var(--rd-mono); font-size: 0.85rem; }
html.rd .tgLoginError.hidden { display: none; }
html.rd .tgLoginAlt,
html.rd .tgLoginAlt:hover:not(:disabled) {
  align-self: center; margin: 2px 0 0; padding: 4px 0; min-height: 0; border: 0; background: none; box-shadow: none;
  color: var(--rd-muted); font-family: var(--rd-mono); font-weight: 600; font-size: 0.8rem; text-transform: none;
  text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer;
}
html.rd .tgLoginAlt:hover:not(:disabled) { color: var(--rd-text); }

/* ---- hero page: where the hero spends the game (replay-maps.js) ---- */
html.rd body .farmModeTabs { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; }
html.rd body .farmModeTabs button,
html.rd body .farmModeTabs button:hover:not(:disabled) { padding-inline: clamp(6px, 2vw, 14px); white-space: nowrap; }
html.rd body .farmModeTabs button[aria-pressed="true"],
html.rd body .farmModeTabs button[aria-pressed="true"]:hover:not(:disabled) { background: var(--rd-signal); color: var(--rd-on-signal); }
html.rd body .farmMaps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 6px; }
html.rd body .farmMap { margin: 0; border: 2px solid var(--rd-row-line); background: var(--rd-bg); }
html.rd body .farmMap svg { display: block; width: 100%; height: auto; }
html.rd body .farmMap figcaption { padding: 6px 10px; font-family: var(--rd-mono); font-size: 0.75rem; color: var(--rd-muted); border-top: 2px solid var(--rd-row-line); }
html.rd body .farmCell--a,
html.rd body .farmCell--w { fill: var(--rd-right); }
html.rd body .farmCell--l { fill: var(--rd-wrong); }
@media (max-width: 700px) {
  html.rd body .farmMaps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.rd body .farmModeTabs { margin-left: 0; }
}

/* ---- home: pxrplx subscription banner (above the meta heroes) ---- */
html.rd body .homePremiumBanner { margin: 0 0 22px; }
html.rd body .premiumBanner,
html.rd body .premiumBanner:hover:not(:disabled) {
  display: grid; gap: 12px; width: 100%; padding: 16px 18px; text-align: left; text-transform: none;
  background: var(--rd-panel); color: var(--rd-text); cursor: pointer;
  border: 2px solid var(--rd-purple); box-shadow: 6px 6px 0 var(--rd-purple);
  font-family: var(--rd-mono); font-weight: 400; letter-spacing: 0;
}
html.rd body .premiumBanner:hover:not(:disabled) { border-color: var(--rd-signal); box-shadow: 6px 6px 0 var(--rd-signal); }
html.rd body .premiumBannerName { font-family: var(--rd-pixel); font-size: calc(30 * var(--rd-px)); color: var(--rd-signal); letter-spacing: 0.04em; }
html.rd body .premiumBannerList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
html.rd body .premiumBannerList li::before,
html.rd body .premiumBenefits li::before { content: "+ "; color: var(--rd-signal); font-weight: 600; }
html.rd body .premiumBenefits { margin: 4px 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; font-family: var(--rd-mono); font-size: 0.85rem; }
html.rd body .premiumModal { width: min(640px, 100%); }
html.rd body .premiumOfferPrice { margin: 0 0 20px; color: var(--rd-signal); font-family: var(--rd-pixel); font-size: calc(26 * var(--rd-px)); }
html.rd body .premiumOfferPrice span { color: var(--rd-muted); font-family: var(--rd-mono); font-size: 0.85rem; }
html.rd body .premiumModal .premiumBenefits { gap: 14px; margin-bottom: 24px; }
html.rd body .premiumModal .premiumBenefits li { position: relative; padding-left: 18px; }
html.rd body .premiumModal .premiumBenefits li::before { position: absolute; left: 0; top: 0; }
html.rd body .premiumBenefitDetail { display: block; margin-top: 4px; color: var(--rd-muted); font-size: 0.78rem; line-height: 1.5; }
html.rd body .premiumModal .premiumSubscribeBtn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  html.rd body .premiumBannerList { grid-template-columns: 1fr; }
  html.rd body .premiumBannerName { font-size: calc(24 * var(--rd-px)); }
}

/* ---- mistake analysis: comparison with the tier-1 norms (mistake-facts.js) ---- */
html.rd body .mistakeFacts { margin: 12px 0; }
html.rd body .mistakeFacts h4 { margin: 0 0 4px; }
html.rd body .mistakeFact { margin: 8px 0 0; padding: 8px 12px; background: var(--rd-row); border: 2px solid var(--rd-row-line); border-left-width: 6px; }
html.rd body .mistakeFact b { font-family: var(--rd-mono); font-weight: 600; }
html.rd body .mistakeFact p { margin: 4px 0 0; font-family: var(--rd-mono); font-size: 0.85rem; color: var(--rd-text); }
html.rd body .mistakeFact--bad { border-left-color: var(--rd-bad); }
html.rd body .mistakeFact--warn { border-left-color: #ffb020; }
html.rd body .mistakeFact--good { border-left-color: var(--rd-signal); }
html.rd body .mistakeFactTime { font-family: var(--rd-pixel); color: var(--rd-muted); }
html.rd body .moveCell--pro { fill: var(--rd-purple-hi); }
html.rd body .moveCell--you { fill: #ffd23f; }
html.rd body .moveKey--pro { background: var(--rd-purple-hi); }
html.rd body .moveKey--you { background: #ffd23f; }

/* ---- Турбо: random hero + fun build ---- */
html.rd body .turboControls { display: flex; margin: 10px 0 16px; }
html.rd body .turboSpinBtn { font-family: var(--rd-pixel); font-size: calc(18 * var(--rd-px)); padding: 12px 28px; background: var(--rd-signal); color: var(--rd-on-signal); border: 2px solid var(--rd-signal); box-shadow: 6px 6px 0 var(--rd-purple); cursor: pointer; }
html.rd body .turboSpinBtn:disabled { opacity: 0.6; }
html.rd body #turboResult { transition: opacity 0.25s; }
html.rd body .turboResult--spin { opacity: 0.35; }
html.rd body .turboCard { background: var(--rd-panel); border: 2px solid var(--rd-purple); padding: 16px 18px; }
html.rd body .turboHead { display: flex; gap: 14px; align-items: center; }
html.rd body .turboArt { width: 128px; height: 72px; flex: none; background-size: cover; background-position: center; border: 2px solid var(--rd-line-hi); }
html.rd body .turboHero { font-family: var(--rd-mono); color: var(--rd-muted); font-size: 0.85rem; }
html.rd body .turboName { margin: 2px 0 0; font-family: var(--rd-pixel); font-size: calc(22 * var(--rd-px)); color: var(--rd-signal); }
html.rd body .turboIdea { font-family: var(--rd-mono); margin: 12px 0; }
html.rd body .turboItems { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0 0 12px; }
html.rd body .turboItem { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--rd-row); border: 2px solid var(--rd-row-line); font-family: var(--rd-mono); font-size: 0.8rem; }
html.rd body .turboItem img { width: 44px; height: 32px; object-fit: cover; flex: none; }
html.rd body .turboItem b { color: var(--rd-muted); font-weight: 600; }
html.rd body .turboSkills, html.rd body .turboTips { font-family: var(--rd-mono); font-size: 0.85rem; }
html.rd body .turboTips { margin: 6px 0 12px; padding-left: 18px; }
html.rd body .turboActions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
html.rd body #profileAdminBtn { margin: 0 0 14px; }
@media (max-width: 700px) {
  html.rd body .turboItems { grid-template-columns: 1fr 1fr; gap: 6px; }
  html.rd body .turboItem { gap: 6px; padding: 5px 6px; font-size: 0.74rem; }
  html.rd body .turboItem img { width: 30px; height: 22px; }
  html.rd body .turboArt { width: 96px; height: 54px; }
}
html.rd body .turboChaos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--rd-mono); font-size: 0.85rem; color: var(--rd-muted); }
html.rd body .turboChaos input[type="range"] { width: 220px; accent-color: var(--rd-signal); }
html.rd body .turboChaos b { font-family: var(--rd-pixel); font-size: calc(14 * var(--rd-px)); color: var(--rd-signal); min-width: 12ch; }
html.rd body .turboChaosBadge { margin-left: 8px; font-size: 0.75rem; color: var(--rd-text); white-space: nowrap; }
html.rd body .turboDraft { margin: 12px 0; }
html.rd body .turboEditor { display: grid; gap: 12px; }
html.rd body .turboEditor label { display: grid; gap: 4px; font-family: var(--rd-mono); font-size: 0.85rem; color: var(--rd-muted); }
html.rd body .turboEditor input, html.rd body .turboEditor textarea, html.rd body .turboEditor select { width: 100%; box-sizing: border-box; }
html.rd body .turboEditItems { margin: 6px 0; padding-left: 22px; font-family: var(--rd-mono); font-size: 0.85rem; }
html.rd body .turboEditItems li { margin: 4px 0; }
html.rd body .turboEditItems li span { margin-right: 8px; }
html.rd body .turboEditItems button { padding: 0 8px !important; min-height: 0; margin-left: 4px; }
html.rd body .turboEditor input, html.rd body .turboEditor textarea, html.rd body .turboEditor select { text-transform: none; font-family: var(--rd-mono); }
html.rd body .heroStartSet { margin: 0 0 10px; }
html.rd body .heroStartSet .historyHint { margin: 0 0 4px; }
html.rd body .heroItemUpgrade { color: var(--rd-muted); font-size: 0.8em; white-space: nowrap; }

/* ---- shadows that come and go without leaving 1px trails ----
   With body zoom:1.1, Chrome repaints only the element's own box when a
   hover/focus shadow goes away, and a sliver of the old shadow stays on
   screen. A transparent shadow of the largest size, always there, keeps the
   shadow's area inside what gets repainted. */
html.rd body .team,
html.rd body .homeMetaCol,
html.rd body .homeLatestMatchCard,
html.rd body .patchPickerBtn { box-shadow: 6px 6px 0 transparent; }
html.rd body .homeMetaHeroCard { box-shadow: 8px 8px 0 transparent; }
html.rd body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.rd body textarea { box-shadow: 4px 4px 0 transparent; }

/* the Авантюрность slider: no field shadow on it */
html.rd body input[type="range"],
html.rd body input[type="range"]:focus { box-shadow: none; border: 0; }

/* Drop-down lists: the lime frame + violet shadow follow the cursor (with a
   short lift), instead of sticking after a click until a click elsewhere.
   Keyboard focus still shows the frame. */
html.rd body select {
  box-shadow: 4px 4px 0 transparent;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, border-color 120ms ease-out;
}
html.rd body select:focus { border-color: var(--rd-line-hi); box-shadow: 4px 4px 0 transparent; }
html.rd body select:focus-visible { border-color: var(--rd-signal); }
html.rd body select:hover:not(:disabled) {
  border-color: var(--rd-signal);
  box-shadow: 4px 4px 0 var(--rd-purple);
  transform: translate(-2px, -2px);
}

/* the latest tier-1 match lifts on hover like the hero cards */
html.rd body .homeLatestMatchCard { transition: transform 80ms steps(2), box-shadow 80ms steps(2); }
html.rd body .homeLatestMatchCard:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--rd-purple); }

/* Турбо: the hero picker a step away from the button */
html.rd body #turboHeroSelect { margin-left: 14px; }

/* hero maps: wins in cyan, all games in yellow -- lime vanished on the green map */
html.rd body .farmCell--a { fill: #ffd23f; }
html.rd body .farmCell--w { fill: #2fe6ff; }

/* the "all of the tier-1 meta" link under the home cards */
html.rd body .homeMetaMore { margin: 14px 0 28px; }

/* patch picker in VOID: the acid block itself, lifting on hover (BIOS keeps its look) */
html.rd:not([data-rd-theme="bios"]) body .patchPickerBtn,
html.rd:not([data-rd-theme="bios"]) body .patchPickerBtn:hover:not(:disabled) {
  background: var(--rd-signal);
  border-color: var(--rd-signal);
  color: var(--rd-on-signal);
  transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}
html.rd body .patchPickerBtn { box-shadow: 4px 4px 0 transparent; }
html.rd body .patchPickerBtn:hover:not(:disabled),
html.rd body .patchPickerBtn[aria-expanded="true"] { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rd-purple); }
html.rd[data-rd-theme="bios"] body .patchPickerBtn { box-shadow: 4px 4px 0 var(--rd-purple); }

/* «Крутить»: pressed like a key -- half way on hover, all the way on click */
html.rd body .turboSpinBtn { transition: transform 80ms steps(2), box-shadow 80ms steps(2); }
html.rd body .turboSpinBtn:hover:not(:disabled) { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--rd-purple); }
html.rd body .turboSpinBtn:active:not(:disabled) { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--rd-purple); }
html.rd body .turboPartyToggle { margin: 0 0 14px; }
html.rd body .turboParty { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0 0 12px; }
html.rd body .turboMember { background: var(--rd-row); border: 2px solid var(--rd-row-line); padding: 10px; display: grid; gap: 8px; align-content: start; }
html.rd body .turboMember b { font-family: var(--rd-mono); }
html.rd body .turboArt--small { width: 80px; height: 45px; }
html.rd body .turboItems--compact { grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
html.rd body .turboItems--compact .turboItem { font-size: 0.72rem; padding: 4px 6px; gap: 6px; }
html.rd body .turboItems--compact .turboItem img { width: 30px; height: 22px; }
html.rd body .talentTree { display: grid; gap: 6px; max-width: 760px; margin: 0 0 12px; }
html.rd body .talentRow { display: grid; grid-template-columns: 1fr 52px 1fr; gap: 6px; align-items: stretch; }
html.rd body .talentLevel { display: grid; place-items: center; font-family: var(--rd-pixel); font-weight: 400; color: var(--rd-signal); background: var(--rd-panel); border: 2px solid var(--rd-line); }
html.rd body .talentOpt { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 2px; padding: 6px 10px; background: var(--rd-row); border: 2px solid var(--rd-row-line); font-family: var(--rd-mono); font-size: 0.8rem; }
html.rd body .talentOpt > span { min-width: 0; overflow-wrap: anywhere; }
html.rd body .talentOpt .sent { max-width: 100%; }
html.rd body .talentOpt--top { border-color: var(--rd-signal); }
html.rd body .talentRow .talentOpt:first-child { text-align: right; }
html.rd body .heroItemUp { color: var(--rd-signal); }
@media (max-width: 700px) { html.rd body .talentOpt { font-size: 0.72rem; padding: 5px 6px; } }
html.rd body .turboPartyToggle .statsModeBtn { padding: 8px 14px !important; font-size: 0.8rem !important; }

/* Турбо: party size sits right of «Крутить», on the same row */
html.rd body .turboControls .turboPartyToggle { display: flex; margin: 0; align-self: center; }
html.rd body .turboControls #turboHeroSelect { align-self: center; }

/* Тир-1 мета: no captions over the filters; «Связки» is a tile of the same height
   that lights up acid when pressed and goes back to grey when released */
html.rd body #tier1Controls { align-items: stretch; }
html.rd body #tier1Controls .draftControlLabel { gap: 0; }
html.rd body .tier1PairsBtn,
html.rd body .tier1PairsBtn:hover:not(:disabled) {
  align-self: stretch;
  min-height: 0;
  padding: 0 22px;
  background: var(--rd-bg);
  border: 2px solid var(--rd-line);
  color: var(--rd-muted);
  font-family: var(--rd-mono);
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 transparent;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background 120ms, color 120ms;
}
html.rd body .tier1PairsBtn:hover:not(:disabled) { border-color: var(--rd-signal); color: var(--rd-text); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rd-purple); }
html.rd body .tier1PairsBtn[aria-pressed="true"],
html.rd body .tier1PairsBtn[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--rd-signal);
  border-color: var(--rd-signal);
  color: var(--rd-on-signal);
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 transparent;
}
@media (max-width: 700px) {
  html.rd body .turboControls .turboPartyToggle { flex-basis: 100%; }
  html.rd body .tier1PairsBtn { min-height: 40px; }
}
@media (max-width: 700px) {
  html.rd body .turboControls .turboPartyToggle .statsModeBtn { font-size: 0.64rem !important; letter-spacing: 0 !important; white-space: nowrap; }
}

/* Hero page: the pub (Immortal) build, a folded block under the pro build */
.heroPubBuild > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.heroPubBuild > summary::-webkit-details-marker { display: none; }
.heroPubBuild > summary::after { content: "▾"; opacity: 0.6; }
.heroPubBuild[open] > summary::after { content: "▴"; }
.heroPubBuild > summary h3 { margin: 0; display: inline; }

/* Fold arrows: a heading's arrow folds its text block (choice remembered per kind) */
html.rd body .foldHead { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 10px; }
html.rd body .foldArrow,
html.rd body .foldArrow:hover:not(:disabled) {
  margin: 0; padding: 0; width: 28px; height: 28px; min-height: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 2px solid var(--rd-line-hi); color: var(--rd-signal);
  font-size: 0.9rem; line-height: 1; box-shadow: none; transition: transform 200ms ease;
}
html.rd body .foldHead:hover .foldArrow { border-color: var(--rd-signal); }
html.rd body .foldArrow[aria-expanded="false"] { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { html.rd body .foldArrow { transition: none; } }

/* Farm map: position tabs on the left, all/wins/losses on the right */
html.rd body .farmTabsRow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0 12px; }
html.rd body .farmTabsRow .farmModeTabs { margin-left: 0; }

/* Talent tree centred under the build */
html.rd body .talentTree { margin-left: auto; margin-right: auto; }

/* Lane map caption: centred, airier, a little further from the map */
html.rd body .moveMap figcaption { text-align: center; line-height: 1.6; padding: 12px 14px 10px; }

/* Guide: good with / good against / hard against */
html.rd body .heroGuideCols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { html.rd body .heroGuideCols--3 { grid-template-columns: 1fr; } }

/* ---------- footer on every page + help / feedback dialogs (help.js) ---------- */
.siteFooter { max-width: 1240px; text-align: center; }
.siteFooterLinks { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.siteFooterBtn,
.siteFooterBtn:hover:not(:disabled) {
  margin: 0;
  font-family: var(--rd-mono, monospace); text-transform: uppercase;
}
.siteFooterBtn:hover:not(:disabled) { border-color: var(--rd-signal, #c6ff3d); }
.siteFooterNote { color: var(--rd-muted, #8f8aa0); }

.helpModal { max-width: 760px; width: calc(100% - 32px); max-height: calc(100vh - 48px); overflow-y: auto; }
.helpModal h2 { margin: 0 32px 6px 0; }
.helpLead { margin: 0 0 16px; color: var(--rd-muted, #8f8aa0); }
.helpSteps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; counter-reset: none; }
.helpStep { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 16px 12px 14px; background: var(--rd-panel-2, #16141c); border: 2px solid var(--rd-line, #2a2733); }
.helpStepNum { position: absolute; top: 6px; left: 8px; font-family: var(--rd-mono, monospace); font-size: 0.75rem; font-weight: 700; color: var(--rd-signal, #c6ff3d); }
.helpIcon { width: 34px; height: 34px; color: var(--rd-purple-hi, #a98bff); flex: none; }
.helpStepText { font-size: 0.85rem; line-height: 1.45; }
.helpNotes { margin: 0 0 12px; padding-left: 18px; font-size: 0.85rem; line-height: 1.5; color: var(--rd-muted, #8f8aa0); }
.helpMore { margin: 0; font-size: 0.85rem; }
.helpLinkBtn,
.helpLinkBtn:hover:not(:disabled) { margin: 0; padding: 0; min-height: 0; background: none; border: 0; box-shadow: none; color: var(--rd-signal, #c6ff3d); text-decoration: underline; font: inherit; }
.helpOverview { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.helpCard,
.helpCard:hover:not(:disabled) {
  margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 14px; min-height: 0; background: var(--rd-panel-2, #16141c); border: 2px solid var(--rd-line, #2a2733); box-shadow: none;
  color: var(--rd-text, #e8e6f0); font: inherit;
}
.helpCard:hover:not(:disabled) { border-color: var(--rd-purple-hi, #a98bff); }
.helpCard span { font-size: 0.8rem; color: var(--rd-muted, #8f8aa0); }
.feedbackForm { display: grid; gap: 10px; }
.feedbackKinds { display: flex; flex-wrap: wrap; gap: 8px; }
.feedbackKind { cursor: pointer; }
.feedbackKind input { position: absolute; opacity: 0; pointer-events: none; }
.feedbackKind span { display: inline-block; padding: 8px 12px; border: 2px solid var(--rd-line-hi, #3a3645); font-size: 0.85rem; }
.feedbackKind input:checked + span { border-color: var(--rd-signal, #c6ff3d); color: var(--rd-signal, #c6ff3d); }
.feedbackKind input:focus-visible + span { outline: 2px solid var(--rd-signal, #c6ff3d); outline-offset: 2px; }
.feedbackForm textarea { width: 100%; resize: vertical; min-height: 110px; box-sizing: border-box; }
.feedbackForm input[type="text"] { width: 100%; box-sizing: border-box; }
.feedbackStatus { margin: 0; min-height: 1.2em; }
@media (max-width: 700px) {
  .helpSteps { grid-template-columns: 1fr; }
  .helpStep { flex-direction: row; text-align: left; padding: 12px 12px 12px 30px; }
  .helpIcon { width: 28px; height: 28px; }
}

/* --- round 2: fold arrows hit only themselves + the title, no press shadow --- */
html.rd body .foldHead { width: fit-content; max-width: 100%; }
html.rd body .foldArrow,
html.rd body .foldArrow:hover:not(:disabled),
html.rd body .foldArrow:active,
html.rd body .foldArrow:focus { box-shadow: none !important; transform: none; outline: none; }
html.rd body .foldArrow[aria-expanded="false"],
html.rd body .foldArrow[aria-expanded="false"]:hover:not(:disabled),
html.rd body .foldArrow[aria-expanded="false"]:active,
html.rd body .foldArrow[aria-expanded="false"]:focus { transform: rotate(-90deg); }
html.rd body .foldArrow:focus:not(:focus-visible) { border-color: var(--rd-line-hi); }
html.rd body .foldArrow:focus-visible { outline: 2px solid var(--rd-signal); outline-offset: 2px; }

/* farm block: the bars centred against the map, more air above it */
html.rd body .farmBlock { align-items: center; gap: 28px; margin-top: 18px; }

/* pro players: a few of them stretch over the row instead of leaving a gap */
html.rd body .heroGuidePlayers { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* synergy and win/loss lists as tiles, like the player cards */
html.rd body .heroGuideCols--tiles .heroGuideList { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 8px; }
html.rd body .heroGuideCols--tiles .heroGuideList li {
  margin: 0; padding: 10px 12px; background: var(--rd-row); border: 1px solid var(--rd-row-line); border-left: 3px solid var(--rd-purple-hi);
  font-size: 0.85rem; line-height: 1.55;
}
html.rd body .heroGuideCols--tiles .heroGuideList li::marker { content: ""; }
html.rd body .heroGuideTiles--win .heroGuideList li { background: rgba(198, 255, 61, 0.06); border-color: rgba(198, 255, 61, 0.18); border-left-color: rgba(198, 255, 61, 0.65); }
html.rd body .heroGuideTiles--loss .heroGuideList li { background: rgba(255, 77, 94, 0.06); border-color: rgba(255, 77, 94, 0.18); border-left-color: rgba(255, 77, 94, 0.65); }

/* paragraphs stand apart */
html.rd body .heroGuideNote + .heroGuideNote,
html.rd body .heroGuideSummary + .heroGuideSummary,
html.rd body .patchSummary + .patchSummary { margin-top: 12px; }
html.rd body .heroGuidePhase p + p { margin-top: 10px; }

/* skill order and key items centred like the talents */
html.rd body .heroSkillRow { grid-template-columns: repeat(10, minmax(0, 120px)); justify-content: center; }
html.rd body .heroBuildRow { justify-content: center; }
@media (max-width: 700px) { html.rd body .heroSkillRow { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Build blocks: captions centred like the icons below them */
html.rd body .heroBuild h4 { text-align: center; }
html.rd body .heroBuild > p { text-align: center; }
/* ...except the start: summary line, "Стартовая закупка" and the sets stay on the left */
html.rd body .heroBuild > p:first-child,
html.rd body .heroBuild h4:first-of-type,
html.rd body .heroBuild .heroStartSet p { text-align: left; }
html.rd body .heroBuild .heroStartSet .heroBuildRow { justify-content: flex-start; }

/* Footer, compact: one quiet line -- the page content comes first */
.siteFooter { margin: 20px auto 0; padding: 8px 16px 10px; border-top: 1px solid var(--rd-line, #2a2733); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; }
.siteFooterLinks { margin: 0; gap: 14px; }
.siteFooterBtn,
.siteFooterBtn:hover:not(:disabled) {
  min-height: 0; padding: 2px 0; border: 0; background: none; box-shadow: none; transform: none;
  font-size: 0.7rem; letter-spacing: 0.03em; color: var(--rd-muted, #8f8aa0); text-decoration: underline; text-underline-offset: 3px;
}
.siteFooterBtn:hover:not(:disabled) { color: var(--rd-signal, #c6ff3d); }
.siteFooterNote { margin: 0; max-width: none; font-size: 0.68rem; line-height: 1.4; opacity: 0.8; }
@media (max-width: 700px) { .siteFooter { margin-top: 16px; } }

/* ---------- result: gold graph + scoreboard ---------- */ /* replaced by the scoreboard; a row opens the same factors */
html.rd body .resultBoard { margin: 18px 0; }
html.rd body .goldGraph { background: var(--rd-panel); border: 2px solid var(--rd-line); padding: 12px 14px 8px; margin-bottom: 14px; }
html.rd body .goldGraphHead { display: flex; justify-content: space-between; gap: 12px; font-family: var(--rd-mono); font-size: 0.8rem; margin-bottom: 6px; }
html.rd body .goldGraphHead b { letter-spacing: 0.06em; text-transform: uppercase; }
html.rd body .goldGraphHead span { color: var(--rd-signal); }
html.rd body .goldGraph svg { display: block; width: 100%; height: 150px; }
html.rd body .goldGraphZero { stroke: var(--rd-line-hi); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
html.rd body .goldGraphLine { fill: none; stroke: var(--rd-signal); stroke-width: 2.5; stroke-linejoin: round; }
html.rd body .goldGraphAxis { display: flex; justify-content: space-between; font-family: var(--rd-mono); font-size: 0.7rem; color: var(--rd-muted); margin-top: 4px; }
html.rd body .boardTeams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html.rd body .boardTeams--live { grid-template-columns: minmax(0, 1fr); }
html.rd body .boardTeam { min-width: 0; border: 2px solid var(--rd-line); background: var(--rd-panel); }
html.rd body .boardTeam--won { border-color: var(--rd-signal); }
html.rd body .boardTeamHead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 2px solid var(--rd-line); }
html.rd body .boardTeamName { font-family: var(--rd-pixel); font-size: calc(18 * var(--rd-px)); }
html.rd body .boardTeam--won .boardTeamName { color: var(--rd-signal); }
html.rd body .boardTeam--lost .boardTeamName { color: var(--rd-muted); }
html.rd body .boardWin { font-family: var(--rd-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; padding: 2px 8px; background: var(--rd-signal); color: var(--rd-on-signal); }
html.rd body .boardTeamMeta { margin-left: auto; display: flex; align-items: center; gap: 12px; font-family: var(--rd-mono); font-size: 0.75rem; color: var(--rd-muted); }
html.rd body .boardKills { font-family: var(--rd-pixel); font-size: calc(18 * var(--rd-px)); color: var(--rd-text); font-weight: 400; }
html.rd body .boardTeam--won .boardKills { color: var(--rd-signal); }
html.rd body .boardTeam--lost .boardKills { color: var(--rd-bad); }
html.rd body .boardCols,
html.rd body .boardRow { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 10px; padding: 6px 12px; }
html.rd body .boardTeams--live .boardCols,
html.rd body .boardTeams--live .boardRow { grid-template-columns: minmax(0, 1.2fr) 86px minmax(0, 2fr) 64px; }
html.rd body .boardCols { font-family: var(--rd-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-muted); padding-top: 8px; padding-bottom: 4px; }
html.rd body .boardCols span:last-child, html.rd body .boardScore { text-align: right; }
html.rd body .boardRow { position: relative; cursor: pointer; border-top: 1px solid var(--rd-row-line); background: var(--rd-row); }
html.rd body .boardRow:hover, html.rd body .boardRow:focus-visible { background: var(--rd-panel-2); outline: none; box-shadow: inset 3px 0 0 var(--rd-purple-hi); }
html.rd body .boardRow > .boardHero { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
html.rd body .boardRow > .boardName { padding-left: 44px; display: flex; flex-direction: column; min-width: 0; }
html.rd body .boardName b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.rd body .boardName small { font-family: var(--rd-mono); font-size: 0.68rem; color: var(--rd-muted); }
html.rd body .boardHero,
html.rd body .boardHero:hover:not(:disabled) { margin: 0; padding: 0; min-height: 0; width: 34px; height: 34px; border: 1px solid var(--rd-line-hi); background: var(--rd-bg); box-shadow: none; display: flex; align-items: center; justify-content: center; }
html.rd body .boardHero:hover:not(:disabled) { border-color: var(--rd-signal); }
html.rd body .boardHeroImg { width: 30px; height: 30px; }
html.rd body .boardKda { font-family: var(--rd-mono); font-size: 0.85rem; }
html.rd body .boardItems { display: flex; gap: 4px; flex-wrap: wrap; }
html.rd body .boardItems img { width: 34px; height: 25px; object-fit: cover; border: 1px solid var(--rd-line); }
html.rd body .boardScore { font-family: var(--rd-mono); font-weight: 700; }
html.rd body .boardHint { margin-top: 8px; }
html.rd body .boardDialog { max-width: 620px; width: calc(100% - 32px); max-height: calc(100vh - 48px); overflow-y: auto; }
html.rd body .boardDialogTitle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 32px 4px 0; overflow-wrap: anywhere; }
/* Modal vh values also inherit the site's 1.1 zoom; leave the intended
   screen margin rather than pushing a tall dialog above/below the viewport. */
html.rd body .authModalOverlay .authModal { max-height: calc((100dvh - 48px) / 1.1); }
@media (max-width: 700px) {
  html.rd body .authModalOverlay .turboRatingModal { max-height: none; }
  html.rd body .boardDialog,
  html.rd body .helpModal { width: 100%; }
}
@media (max-width: 360px) {
  html.rd body .boardDialogTitle { font-size: calc(24 * var(--rd-px)); }
}
html.rd body .boardFactors { display: grid; gap: 6px; margin: 12px 0; }
html.rd body .boardFactor { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; padding: 8px 10px; background: var(--rd-row); border: 1px solid var(--rd-row-line); font-size: 0.85rem; }
html.rd body .boardFactor > span { color: var(--rd-muted); font-family: var(--rd-mono); font-size: 0.75rem; }
html.rd body .boardGuideBtn { width: 100%; }
@media (max-width: 700px) {
  html.rd body .boardTeams { grid-template-columns: minmax(0, 1fr); }
  html.rd body .boardTeamHead { flex-wrap: wrap; }
  html.rd body .boardTeamName { min-width: 0; overflow-wrap: anywhere; }
  html.rd body .boardTeamMeta { flex-wrap: wrap; }
  html.rd body .boardTeams--live .boardCols,
  html.rd body .boardTeams--live .boardRow { grid-template-columns: minmax(0, 1fr) 70px 56px; }
  html.rd body .boardTeams--live .boardCols span:nth-child(3) { display: none; }
  html.rd body .boardTeams--live .boardItems { grid-column: 1 / -1; padding-left: 44px; }
  html.rd body .boardTeams--live .boardRow > .boardName { grid-column: 1; grid-row: 1; }
  html.rd body .boardTeams--live .boardRow > .boardKda { grid-column: 2; grid-row: 1; }
  html.rd body .boardTeams--live .boardRow > .boardScore { grid-column: 3; grid-row: 1; }
  html.rd body .boardTeams--live .boardRow { grid-template-areas: none; }
  html.rd body .boardFactor { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 360px) {
  html.rd body .boardTeams--live .boardCols,
  html.rd body .boardTeams--live .boardRow { grid-template-columns: minmax(0, 1fr) 56px 48px; column-gap: 6px; }
  html.rd body .boardKda { font-size: 0.72rem; }
  html.rd body .boardScore { font-size: 0.85rem; }
}

/* result: the headline chance row smaller; the win-chance graph sized like the gold graph */
html.rd body #result .probBar { height: 52px; }
html.rd body #result .probBar__fillA,
html.rd body #result .probBar__fillB { font-size: calc(30 * var(--rd-px)); }
html.rd body #result .liveTrend { display: block; margin: 14px 0 0; color: inherit; }
html.rd body #result .liveTrend svg { max-width: none; height: 150px; }
html.rd body .winGraphLine { stroke: var(--rd-purple-hi); }
@media (max-width: 700px) {
  html.rd body #result .probBar { height: 44px; }
  html.rd body #result .probBar__fillA,
  html.rd body #result .probBar__fillB { font-size: calc(24 * var(--rd-px)); }
}
html.rd body #result .liveTrend span { font-size: inherit; font-weight: inherit; }

/* result: the real outcome right under the predicted chances */
html.rd body .resultOutcome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 0; padding: 10px 14px; background: var(--rd-panel); border: 2px solid var(--rd-line); font-family: var(--rd-mono); font-size: 0.9rem; }
html.rd body .resultOutcome.hidden { display: none; }
html.rd body .resultOutcome--right { border-color: var(--rd-signal); }
html.rd body .resultOutcome--wrong { border-color: var(--rd-bad); }
html.rd body .resultOutcomeVerdict { font-weight: 700; letter-spacing: 0.04em; }
html.rd body .resultOutcome--right .resultOutcomeVerdict { color: var(--rd-signal); }
html.rd body .resultOutcome--wrong .resultOutcomeVerdict { color: var(--rd-bad); }

/* --- logo a bit more compact; the game tag a bigger filled block per game --- */
@media (min-width: 701px) {
  html.rd body .topNavTitle,
  html.rd body[data-game="dota"] .topNavTitle { font-size: calc(19 * var(--rd-px)); }
}
html.rd body .gameTag,
html.rd body .gameTag:hover:not(:disabled),
html.rd body[data-game="dota"] .gameTag {
  font-family: var(--rd-pixel); font-weight: 400; font-size: calc(15 * var(--rd-px)); letter-spacing: 0.04em; min-width: 0; border: 0; border-radius: 0; box-shadow: none;
  background: #e5383b; color: #ffffff;
}
html.rd body[data-game="mlbb"] .gameTag,
html.rd body[data-game="mlbb"] .gameTag:hover:not(:disabled) { background: #f5c518; color: #1a1400; }
html.rd body[data-game="lol"] .gameTag,
html.rd body[data-game="lol"] .gameTag:hover:not(:disabled) { background: #2d7ff9; color: #ffffff; }
html.rd body .gameTag:hover:not(:disabled) { filter: brightness(1.12); }

/* --- footer links: hover changes colour only, nothing moves --- */
html.rd body .siteFooterBtn,
html.rd body .siteFooterBtn:hover:not(:disabled),
html.rd body .siteFooterBtn:active,
html.rd body .siteFooterBtn:focus {
  margin: 0; padding: 2px 0; min-height: 0; border: 0; background: none; box-shadow: none; transform: none;
  font-family: var(--rd-mono); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.03em; line-height: 1.4;
  color: var(--rd-muted); text-decoration: underline; text-underline-offset: 3px;
}
html.rd body .siteFooterBtn:hover:not(:disabled) { color: var(--rd-signal); }

/* --- smooth folding everywhere (same motion as the hero guide) --- */
html.rd body .foldAnim { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 320ms ease, opacity 260ms ease; }
html.rd body .foldAnim > * { overflow: hidden; min-height: 0; }
html.rd body .foldAnim--closed { grid-template-rows: 0fr; opacity: 0; }
html.rd body #patchBody .patchAiOnly { max-height: 600px; overflow: hidden; opacity: 1; transition: max-height 320ms ease, opacity 260ms ease, margin 320ms ease, padding 320ms ease; }
html.rd body .patchAi--off .patchAiOnly,
html.rd body #patchBody.patchAi--off .patchAiOnly { display: block; max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
@media (prefers-reduced-motion: reduce) { html.rd body .foldAnim, html.rd body #patchBody .patchAiOnly { transition: none; } }

/* --- Turbo: bottom panel (hero left; rating + suggest right), votes, rating table --- */
html.rd body .turboBottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 18px 0 0; padding-top: 14px; border-top: 2px solid var(--rd-line); }
html.rd body .turboHeroPick { display: flex; align-items: center; gap: 10px; }
html.rd body .turboHeroPick span { font-family: var(--rd-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-muted); }
html.rd body .turboBottomRight { display: flex; flex-wrap: wrap; gap: 10px; }
html.rd body .turboSuggest { margin: 12px 0 0; }
html.rd body .turboVotes { display: inline-flex; gap: 6px; }
html.rd body .turboVote,
html.rd body .turboVote:hover:not(:disabled) { margin: 0; padding: 6px 10px; min-height: 0; background: transparent; border: 2px solid var(--rd-line-hi); color: var(--rd-text); box-shadow: none; transform: none; font-size: 0.85rem; }
html.rd body .turboVote:hover:not(:disabled) { border-color: var(--rd-signal); }
html.rd body .turboVote--on,
html.rd body .turboVote--on:hover:not(:disabled) { border-color: var(--rd-signal); background: rgba(198, 255, 61, 0.12); }
html.rd body .turboVote--down.turboVote--on,
html.rd body .turboVote--down.turboVote--on:hover:not(:disabled) { border-color: var(--rd-bad); background: rgba(255, 77, 94, 0.12); }
html.rd body .turboRatingModal { max-width: 980px; width: calc(100% - 32px); max-height: calc(100vh - 48px); overflow-y: auto; }
html.rd body .turboRating { display: grid; gap: 4px; }
html.rd body .turboRatingRow { display: grid; grid-template-columns: 36px minmax(140px, 1fr) minmax(0, 2.2fr) 56px; gap: 12px; align-items: center; }
html.rd body .turboRatingRow,
html.rd body .turboRatingRow:hover:not(:disabled) { width: 100%; margin: 0; padding: 8px 12px; min-height: 0; text-align: left; background: var(--rd-row); border: 1px solid var(--rd-row-line); box-shadow: none; transform: none; color: var(--rd-text); font: inherit; text-transform: none; letter-spacing: 0; }
html.rd body .turboRatingRow:hover:not(:disabled) { border-color: var(--rd-purple-hi); background: var(--rd-panel-2); }
html.rd body .turboRatingRank { font-family: var(--rd-pixel); font-size: calc(16 * var(--rd-px)); color: var(--rd-signal); }
html.rd body .turboRatingName { display: flex; flex-direction: column; min-width: 0; }
html.rd body .turboRatingName small { font-family: var(--rd-mono); font-size: 0.7rem; color: var(--rd-muted); }
html.rd body .turboRatingMembers { display: grid; gap: 4px; }
html.rd body .turboRatingMember { display: flex; align-items: center; gap: 8px; }
html.rd body .turboRatingHero { width: 26px; height: 26px; flex: none; }
html.rd body .turboRatingItems { display: flex; flex-wrap: wrap; gap: 3px; }
html.rd body .turboRatingItems img { width: 30px; height: 22px; object-fit: cover; border: 1px solid var(--rd-line); }
html.rd body .turboRatingLikes { text-align: right; font-family: var(--rd-mono); font-weight: 700; display: flex; flex-direction: column; align-items: flex-end; }
html.rd body .turboRatingLikes small { font-weight: 400; color: var(--rd-muted); font-size: 0.7rem; }
@media (max-width: 700px) {
  html.rd body .turboBottom { flex-direction: column; align-items: stretch; }
  html.rd body .turboHeroPick select { flex: 1; }
  html.rd body .turboBottomRight > button { flex: 1; }
  html.rd body .turboRatingRow { grid-template-columns: 28px minmax(0, 1fr) 40px; }
  html.rd body .turboRatingMembers { grid-column: 2 / -1; }
}

/* logo: icon, PURPLE and the EYE block on one centre line on all three sites */
html.rd body .topNavTitle { display: inline-flex; align-items: center; }
/* Турбо: party sizes compact, pushed right, away from «Крутить» */
html.rd body .turboControls .turboPartyToggle { flex: 0 1 auto; margin-left: auto; }
html.rd body .turboControls .turboPartyToggle .statsModeBtn { flex: 0 0 auto; padding: 8px 20px !important; }
@media (max-width: 700px) {
  html.rd body .turboControls .turboPartyToggle { margin-left: 0; flex: 1 1 100%; }
  html.rd body .turboControls .turboPartyToggle .statsModeBtn { flex: 1; padding: 8px 2px !important; }
}

/* ---------- Пополнение Steam ---------- */
html.rd body .topupTestNote { padding: 10px 14px; border: 2px dashed var(--rd-signal); color: var(--rd-signal); font-family: var(--rd-mono); font-size: 0.85rem; }
html.rd body .topupForm { display: grid; gap: 14px; max-width: 640px; margin: 14px 0 20px; }
html.rd body .topupField { display: grid; gap: 6px; }
html.rd body .topupField > span { font-family: var(--rd-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-muted); }
html.rd body .topupField small { color: var(--rd-muted); font-size: 0.75rem; }
html.rd body .topupField input { width: 100%; box-sizing: border-box; font-size: 1.05rem; }
html.rd body .topupField--login input { text-transform: none; }
html.rd body .topupCalc { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
html.rd body .topupCalcArrow { font-size: 1.4rem; color: var(--rd-signal); padding-bottom: 8px; }
html.rd body .topupQuote { margin: 0; font-family: var(--rd-mono); font-size: 0.85rem; color: var(--rd-text); }
html.rd body .topupWarn { color: var(--rd-bad); }
.legalConsent { margin: 10px 0; min-width: 0; }
html.rd body .legalConsentLabel { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; align-items: start; font-size: .76rem; line-height: 1.6; text-align: left; }
html.rd body .legalConsentLabel input[type="checkbox"] { width: 18px; height: 18px; margin: 3px 0 0; padding: 0; appearance: auto; accent-color: var(--rd-signal); }
.legalConsentText { min-width: 0; overflow-wrap: anywhere; }
.legalConsent a, .topupLegalNotice a, .legalConsentHistory a, .legalConsentExport { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legalConsentError { margin: 4px 0; color: var(--rd-bad); font-size: .76rem; }
.legalConsentError:empty { display: none; }
html.rd body .topupLegalNotice { margin: 4px 0 0; text-align: center; font-size: .72rem; line-height: 1.7; color: var(--rd-muted); }
.legalConsentHistory { padding-left: 18px; }
.legalConsentHistory li { margin: 10px 0; font-size: .8rem; overflow-wrap: anywhere; }
.legalConsentHistory span, .legalConsentHistory small { display: block; color: var(--rd-muted); margin-top: 4px; }
.legalConsentExport { font-size: .8rem; }
html.rd body .topupOrder { padding: 12px 14px; border: 2px solid var(--rd-line); background: var(--rd-panel); max-width: 640px; margin-bottom: 18px; }
html.rd body .topupHistory { display: grid; gap: 4px; }
html.rd body .topupOp { display: grid; grid-template-columns: 120px minmax(0, 1fr) 150px 170px; gap: 10px; align-items: center; padding: 8px 12px; background: var(--rd-row); border: 1px solid var(--rd-row-line); border-left: 3px solid var(--rd-line-hi); font-size: 0.85rem; }
html.rd body .topupOp--done { border-left-color: var(--rd-signal); }
html.rd body .topupOp--failed, html.rd body .topupOp--check { border-left-color: var(--rd-bad); }
html.rd body .topupOpDate { font-family: var(--rd-mono); color: var(--rd-muted); font-size: 0.78rem; }
html.rd body .topupOpLogin small { color: var(--rd-signal); font-size: 0.7rem; }
html.rd body .topupOpSum { display: flex; flex-direction: column; font-family: var(--rd-mono); font-weight: 700; }
html.rd body .topupOpSum small { font-weight: 400; color: var(--rd-muted); font-size: 0.72rem; }
html.rd body .topupOpStatus { text-align: right; font-family: var(--rd-mono); font-size: 0.78rem; }
html.rd body .profileTopup { margin: 18px 0; }
@media (max-width: 700px) {
  html.rd body .topupCalc { grid-template-columns: 1fr; }
  html.rd body .topupCalcArrow { display: none; }
  html.rd body .topupOp { grid-template-columns: 1fr auto; }
  html.rd body .topupOpStatus { grid-column: 1 / -1; text-align: left; }
}

/* --- home banners lift on hover like the latest tier-1 match card --- */
html.rd body .premiumBanner { transition: transform 80ms steps(2), box-shadow 80ms steps(2), border-color 80ms steps(2); }
html.rd body .homePremiumBanner .premiumBanner:hover:not(:disabled) { transform: translate(-3px, -3px); border-color: var(--rd-purple); box-shadow: 3px 3px 0 var(--rd-purple); }

/* --- help dialog: the links line centred --- */
.helpMore { text-align: center; }

/* --- feedback fields: just a lime frame while typing, no shadow --- */
html.rd body .feedbackForm textarea,
html.rd body .feedbackForm textarea:focus,
html.rd body .feedbackForm input[type="text"],
html.rd body .feedbackForm input[type="text"]:focus { box-shadow: none !important; }
html.rd body .feedbackForm textarea:focus,
html.rd body .feedbackForm input[type="text"]:focus { border-color: var(--rd-signal); outline: none; }

/* --- the game tag exactly as tall as the EYE block --- */
html.rd body .topNavBrand { align-items: center; }
html.rd body .gameTag,
html.rd body .gameTag:hover:not(:disabled),
html.rd body[data-game="dota"] .gameTag { line-height: 1; padding: 0 9px; height: var(--rd-eye-h, 1.2em); }

/* --- Турбо: the adventure slider sits between «Крутить» and the party sizes --- */
html.rd body .turboControls { align-items: center; flex-wrap: nowrap; gap: 14px; }
html.rd body .turboControls .turboChaos { display: flex; align-items: center; gap: 12px; margin: 0 0 0 24px; flex: 1 1 auto; min-width: 0; }
html.rd body .turboControls .turboChaos input[type="range"] { flex: 1 1 140px; min-width: 100px; max-width: 260px; }
html.rd body .turboControls .turboChaos b { white-space: nowrap; }
@media (max-width: 900px) {
  html.rd body .turboControls { flex-wrap: wrap; }
  html.rd body .turboControls .turboChaos { margin: 0; flex-basis: 100%; order: 3; }
}

/* --- text inside every pick box centred: drop-downs, tournament / team fields --- */
html.rd body select { text-align: center; text-align-last: center; }
html.rd body #tournamentInput,
html.rd body #teamNameA,
html.rd body #teamNameB { text-align: center; }

/* --- subscription dialog: the hint clear of the button's shadow --- */
html.rd body #premiumLinkedHint,
html.rd body #premiumNeedsTelegram,
html.rd body #premiumComingSoon { margin-top: 18px; }

/* --- Steam legal documents --- */
.siteFooterLegal { margin-top: 0; }
.legalHead { margin: 16px 0 6px; font-size: 0.95rem; }
.legalList li { margin-bottom: 6px; }
@media (min-width: 701px) { html.rd body .topNavBrand { --rd-eye-h: 19px; } }

/* dialog close (×): no frame on open or focus, only the hover colour */
html.rd body .authModalClose,
html.rd body .authModalClose:focus,
html.rd body .authModalClose:focus-visible { outline: none !important; border-color: transparent !important; box-shadow: none !important; }

/* top bar: the sections centred in the space between the logo and the theme switch */
@media (min-width: 1151px) {
  html.rd body .topNav { grid-template-columns: auto minmax(0, 1fr) auto; }
  html.rd body .topNavCenter { justify-self: center; }
}

/* game tag: exactly the EYE block's height on desktop */
@media (min-width: 701px) {
  html.rd body .topNavBrand .gameTag,
  html.rd body .topNavBrand .gameTag:hover:not(:disabled) { box-sizing: border-box; height: calc(19px / 1.1) !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* Steam section: everything in one centred column */
html.rd body #topupSection > * { max-width: 640px; margin-left: auto; margin-right: auto; }
html.rd body #topupSection > h2,
html.rd body #topupSection > h3 { text-align: center; }
html.rd body #topupSection .topupForm { margin-top: 18px; }
html.rd body #topupSection .topupField input { text-align: center; }
html.rd body #topupSection .topupField input::placeholder { text-transform: none; }
html.rd body #topupSection .topupCalc { align-items: center; }
html.rd body #topupSection .topupCalcArrow { padding-bottom: 0; text-align: center; }
html.rd body #topupSection .topupQuote { text-align: center; }
/* the login warning: impossible to miss */
html.rd body .topupLoginWarn { margin: -4px 0 0; padding: 12px 14px; border: 2px solid var(--rd-bad); border-left-width: 6px; background: rgba(255, 77, 94, 0.08); color: var(--rd-text); font-size: 0.9rem; line-height: 1.5; }
html.rd body .topupLoginWarn b { color: var(--rd-bad); }

/* home banners: no shadow at rest (like the match card), and clear of the next heading */
html.rd body .homePremiumBanner .premiumBanner { box-shadow: 6px 6px 0 transparent; }
html.rd body .homePremiumBanner--after { margin: 22px 0 34px; }

/* Steam banner: text on the left, the price in big pixel type over the whole right half */
html.rd body .topupBanner,
html.rd body .topupBanner:hover:not(:disabled) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 700px) {
  html.rd body .topupBanner,
  html.rd body .topupBanner:hover:not(:disabled) { grid-template-columns: 1fr; }
}

/* logo: PURPLE, EYE and the game tag closer together */
html.rd body .topNavBrand { gap: 6px; }
html.rd body .topNavTitle .siteTitleHighlight { margin-left: 0.1em; }
/* the theme switch lives in the footer on the Dota site */
html.rd .rdThemeSwitch--footer { display: inline-flex; margin: 8px auto 0; }
html.rd body .siteFooter .rdThemeSwitch--footer { justify-content: center; }
@media (max-width: 700px) { html.rd .rdThemeSwitch--footer { display: none; } }
/* sign-in dialog: the close cross clear of the Telegram button */
html.rd body #authModalOverlay .authModal { padding-top: 52px; }
html.rd body .siteFooter { flex-direction: column; gap: 6px; }
html.rd body .siteFooter .rdThemeSwitch--footer { flex: 0 0 auto; flex-basis: auto; width: auto; align-self: center; margin: 4px 0 0; }

/* «Разобрать матч»: the same acid block as «Проанализировать» / «Крутить», pressed on hover */
html.rd body #mistakeAnalyzeBtn,
html.rd body #mistakeAnalyzeBtn:hover:not(:disabled) {
  font-family: var(--rd-pixel); font-weight: 400; font-size: calc(16 * var(--rd-px)); letter-spacing: 0.08em;
  background: var(--rd-signal); color: var(--rd-on-signal); border: 2px solid var(--rd-signal);
  box-shadow: 5px 5px 0 var(--rd-purple); transform: none;
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
html.rd body #mistakeAnalyzeBtn:hover:not(:disabled) { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--rd-purple); }

/* text fields while typing: just a lime frame, no shadow */
html.rd body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
html.rd body textarea:focus { box-shadow: none !important; border-color: var(--rd-signal); outline: none; }

/* footer back on one line: links · note · theme switch at the right edge */
@media (min-width: 701px) {
  html.rd body .siteFooter { flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 14px; max-width: 1240px; }
  html.rd body .siteFooter .siteFooterLinks { flex: none; }
  html.rd body .siteFooter .siteFooterNote { flex: 1 1 auto; text-align: left; }
  html.rd body .siteFooter .rdThemeSwitch--footer { flex: none; margin: 0 0 0 auto; align-self: center; }
}

/* drop-downs and text fields: hover only lights the frame, nothing moves or casts a shadow */
html.rd body select:hover:not(:disabled),
html.rd body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
html.rd body textarea:hover { transform: none; box-shadow: none; border-color: var(--rd-signal); }

/* home hero cards: no shadow at rest (the top ones too), the lift stays on hover */
html.rd body .homeMetaHeroCard--top { box-shadow: 8px 8px 0 transparent; }

/* «Проанализировать», «Крутить», «Разобрать матч»: the «Связки» motion —
   flat at rest, lift with a violet shadow on hover, pressed in on click */
html.rd body #analyzeBtn,
html.rd body .turboSpinBtn,
html.rd body #mistakeAnalyzeBtn {
  transform: none;
  box-shadow: 4px 4px 0 transparent;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out, background 120ms, color 120ms;
}
html.rd body #analyzeBtn:hover:not(:disabled),
html.rd body .turboSpinBtn:hover:not(:disabled),
html.rd body #mistakeAnalyzeBtn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rd-purple); }
html.rd body #analyzeBtn:active:not(:disabled),
html.rd body .turboSpinBtn:active:not(:disabled),
html.rd body #mistakeAnalyzeBtn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 transparent; }

/* team panels in the draft: while typing inside, only the frame lights up */
html.rd body .team:focus-within { box-shadow: 6px 6px 0 transparent; }
.statsModeToggle.modeToggle--single { display: none !important; }

/* top hero cards: the hover shadow matches the 3px lift, like the other cards */
html.rd body .homeMetaHeroCard--top:hover { box-shadow: 3px 3px 0 var(--rd-purple); }

/* drop-downs as wide as their longest choice, so the opened list stays inside the box's edges */
html.rd body #tier1LeagueSelect { width: auto; max-width: 100%; }

/* votes: the fold-arrow glyphs — lime up, red down — instead of thumbs */
html.rd body .turboVote { display: inline-flex; align-items: center; gap: 8px; }
html.rd body .turboVoteArrow { line-height: 1; color: var(--rd-signal); }
html.rd body .turboVote--down .turboVoteArrow { color: var(--rd-bad); }
html.rd body .turboRatingUp { color: var(--rd-signal); }
html.rd body .turboRatingDown { color: var(--rd-bad) !important; }
html.rd body .turboVoteArrow { font-size: 1.4rem; }

/* rating: the player-count drop-down right of the title */
html.rd body .turboRatingTop { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 40px 14px 0; }
html.rd body .turboRatingTop h2 { margin: 0; }

/* hero cards: the resting (invisible) shadow has the hover shadow's exact size,
   so the lift only fades its colour in — no bigger shadow flashing mid-step */
html.rd body .homeMetaHeroCard,
html.rd body .homeMetaHeroCard--top { box-shadow: 3px 3px 0 transparent; }
html.rd body .turboRatingSize { min-width: 0; width: auto; padding-left: 14px; padding-right: 30px; }

/* home banners (pxrplx, Steam): text on the left, price + call to action
   centred in big pixel type over the right half, the action as big as the price */
html.rd body .bannerSplit,
html.rd body .bannerSplit:hover:not(:disabled) { align-items: center; }
html.rd body .bannerSplitMain { display: grid; gap: 12px; }
html.rd body .bannerSplitList { grid-template-columns: 1fr; }
html.rd body .bannerSplitSide { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch; text-align: center; font-family: var(--rd-pixel); }
html.rd body .bannerSplitSide b { font-weight: 400; font-size: calc(40 * var(--rd-px)); line-height: 1; color: var(--rd-text); }
html.rd body .bannerSplitSide span { font-size: calc(20 * var(--rd-px)); line-height: 1; color: var(--rd-muted); }
html.rd body .bannerSplitSide em { font-style: normal; font-size: calc(40 * var(--rd-px)); line-height: 1; color: var(--rd-signal); }
html.rd body .topupBanner .bannerSplitSide span { color: var(--rd-signal); }
@media (max-width: 700px) {
  html.rd body .bannerSplitSide b,
  html.rd body .bannerSplitSide em { font-size: calc(28 * var(--rd-px)); }
}

/* split banners: price + note on one line, the action under it; the right block
   sits nearer the right edge, the left text a little off the left edge */
html.rd body .bannerSplit,
html.rd body .bannerSplit:hover:not(:disabled) { grid-template-columns: minmax(0, 1fr) auto; padding: 18px 48px 18px 32px; column-gap: 32px; }
html.rd body .bannerSplitSide { gap: 12px; }
html.rd body .bannerSplitPrice { display: flex; align-items: baseline; gap: 12px; }
html.rd body .bannerSplitPrice span { font-size: calc(20 * var(--rd-px)); line-height: 1; color: var(--rd-muted); }
html.rd body .topupBanner .bannerSplitPrice span { color: var(--rd-signal); }
html.rd body .bannerSplitSide em { margin-top: 0; }
@media (max-width: 700px) {
  html.rd body .bannerSplit,
  html.rd body .bannerSplit:hover:not(:disabled) { grid-template-columns: 1fr; padding: 16px 18px; }
  html.rd body .bannerSplitPrice { flex-wrap: wrap; justify-content: center; }
}

/* scoreboard hero icons: no frame, still a button (hover lights the icon) */
html.rd body .boardHero,
html.rd body .boardHero:hover:not(:disabled) { border: 0; background: transparent; box-shadow: none; transform: none; }
html.rd body .boardHero:hover:not(:disabled) .boardHeroImg { filter: brightness(1.25); outline: 2px solid var(--rd-signal); outline-offset: 1px; }
html.rd body .boardHeroImg { width: 34px; height: 34px; }

/* logo: icon, PURPLE and EYE a little tighter */
html.rd body .topNavTitle { gap: 4px; }
html.rd body .topNavTitle .siteTitleIcon { margin-right: 4px; }
html.rd body .topNavTitle .siteTitleHighlight { margin-left: 0.05em; }

/* player profile: the close cross at the right edge, no frame */
html.rd body .playerViewBox .wardZoomBar .wardZoomClose,
html.rd body .playerViewBox .wardZoomBar .wardZoomClose:hover:not(:disabled),
html.rd body .playerViewBox .wardZoomBar .wardZoomClose:focus { margin-left: auto !important; border-color: transparent !important; box-shadow: none !important; outline: none; background: transparent; }
html.rd body .playerViewBox .wardZoomBar .wardZoomClose:hover:not(:disabled) { color: var(--rd-signal); }
/* talents in the player profile, apart from the skill order */
html.rd body .playerTalents { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
html.rd body .playerTalent { padding: 6px 10px; background: var(--rd-row); border: 1px solid var(--rd-row-line); border-left: 3px solid var(--rd-purple-hi); font-size: 0.85rem; }
html.rd body .boardHero:hover:not(:disabled) .boardHeroImg,
html.rd body .boardHero:focus .boardHeroImg { outline: none; filter: brightness(1.3); }
html.rd body .boardHero:focus,
html.rd body .boardHero:focus-visible { outline: none; border: 0; box-shadow: none; }

/* Турбо party: the members share the card's width -- one row, up to five, no empty space */
html.rd body .turboParty { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
html.rd body .turboParty[data-n="2"] { --n: 2; }
html.rd body .turboParty[data-n="3"] { --n: 3; }
html.rd body .turboParty[data-n="4"] { --n: 4; }
html.rd body .turboParty[data-n="5"] { --n: 5; gap: 8px; }
html.rd body .turboParty[data-n="4"] .turboItems--compact,
html.rd body .turboParty[data-n="5"] .turboItems--compact { grid-template-columns: 1fr; }
html.rd body .turboParty[data-n="5"] .turboMember { padding: 8px; }
html.rd body .turboParty[data-n="5"] .turboArt--small { width: 72px; }
@media (max-width: 1100px) { html.rd body .turboParty[data-n="4"], html.rd body .turboParty[data-n="5"] { --n: 3; } }
@media (max-width: 700px) { html.rd body .turboParty { --n: 1 !important; } }

/* Турбо buttons: no frame left behind after a click */
html.rd body .turboVote:focus,
html.rd body .turboShareBtn:focus,
html.rd body #turboRatingBtn:focus,
html.rd body #turboSuggestBtn:focus { outline: none; box-shadow: none; }
html.rd body .turboVote:focus:not(.turboVote--on) { border-color: var(--rd-line-hi); }
html.rd body .turboShareBtn:focus:not(:hover) { border-color: var(--rd-purple); }

/* rating: items a step away from the hero icon */
html.rd body .turboRatingMember { gap: 18px; }

/* live scoreboard icon: keep its vertical centring on hover (it used to drop) */
html.rd body .boardRow > .boardHero,
html.rd body .boardRow > .boardHero:hover:not(:disabled),
html.rd body .boardRow > .boardHero:focus { transform: translateY(-50%); }

/* logo: more compact */
@media (min-width: 701px) {
  html.rd body .topNavTitle,
  html.rd body[data-game="dota"] .topNavTitle { font-size: calc(16 * var(--rd-px)); letter-spacing: 0.04em; }
  html.rd body .topNavTitle .siteTitleIcon { width: 18px; height: 18px; margin-right: 2px; }
  html.rd body .topNavTitle .siteTitleHighlight { padding: 0 0.22em; }
}
@media (min-width: 701px) {
  html.rd body .topNavBrand .gameTag,
  html.rd body .topNavBrand .gameTag:hover:not(:disabled) { height: calc(16px / 1.1) !important; font-size: calc(13 * var(--rd-px)); }
}


/* sign-in gates: centred, the button a little lower and lifting like «Проанализировать» */
html.rd body .authGate { text-align: center; }
html.rd body .authGate .authGateBtn { margin-top: 14px; }
html.rd body .authGateBtn,
html.rd body .tgLoginBtn {
  transform: none;
  box-shadow: 4px 4px 0 transparent;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
html.rd body .authGateBtn:hover:not(:disabled),
html.rd body .tgLoginBtn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rd-purple); }
html.rd body .authGateBtn:active:not(:disabled),
html.rd body .tgLoginBtn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 transparent; }

/* sign-in dialog: the cross well clear of the Telegram button and its shadow */
html.rd body #authModalOverlay .authModal { padding-top: 68px; }
/* the hint: each sentence stays whole on one line */
html.rd body .tgLoginHint span { display: inline-block; white-space: nowrap; }
@media (max-width: 420px) { html.rd body .tgLoginHint span { white-space: normal; } }

/* footer links: no underline */
html.rd body .siteFooterBtn,
html.rd body .siteFooterBtn:hover:not(:disabled),
html.rd body .siteFooterBtn:focus { text-decoration: none; }

/* logo back to its earlier size; only the gaps between its parts stay tight */
@media (min-width: 701px) {
  html.rd body .topNavTitle,
  html.rd body[data-game="dota"] .topNavTitle { font-size: calc(19 * var(--rd-px)); letter-spacing: 0.06em; }
  html.rd body .topNavTitle .siteTitleIcon { width: 20px; height: 20px; margin-right: 2px; }
  html.rd body .topNavTitle .siteTitleHighlight { padding: 0 0.3em; margin-left: 0.05em; }
  html.rd body .topNavBrand .gameTag,
  html.rd body .topNavBrand .gameTag:hover:not(:disabled) { height: calc(19px / 1.1) !important; font-size: calc(15 * var(--rd-px)); }
}

/* a sentence moves to the next line whole rather than breaking off its last word */
.sent { display: inline-block; }

/* Steam: "no operations yet" centred */
html.rd body #topupHistory > .historyHint,
html.rd body #profileTopupList > .historyHint { text-align: center; }

/* EYE: letter-spacing leaves a gap after the last letter -- even the block's sides */
html.rd body .siteTitleHighlight { padding-right: calc(0.3em - 0.06em); }

/* footer on one line: shorter note, no wrap on wide screens */
@media (min-width: 1100px) { html.rd body .siteFooter .siteFooterNote { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.sent { vertical-align: top; }
/* no lone last word on a line in running text */
html.rd body p, html.rd body li, .sent { text-wrap: pretty; }

/* Item tiles of one list share one width -- the widest tile's, measured on one
   line (equalizeItemTiles) -- so they read as even rectangles: icon on the left,
   timing on the right, nothing stretched and nothing wrapped */
html.rd body .heroTiles--measure .heroItem { white-space: nowrap; }
html.rd body .heroTiles--even.heroBuildRow,
html.rd body .heroTiles--even .heroBuildRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, var(--tile-w))); }
html.rd body .heroTiles--even .heroItem { min-width: 0; }
html.rd body .heroItemTime { margin-left: auto; padding-left: 6px; white-space: nowrap; }
/* starting buy caption: title, numbers, each note on a line of its own */
html.rd body .startSetLine { display: block; }
html.rd body .startSetHead .sent { vertical-align: baseline; }
/* hero page: the position picker sits on the "Билд на про-сцене" line and drives the whole page below */
html.rd body .heroBuildHeadRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 14px; }
html.rd body .heroBuildHeadRow h3 { margin: 0; }
html.rd body .heroBuildHeadRow .heroRoleTabs { margin: 0; }
@media (max-width: 700px) {
  html.rd body .heroBuildHeadRow .heroRoleTabs { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.rd body .heroBuildHeadRow .heroRoleTabs button,
  html.rd body .heroBuildHeadRow .heroRoleTabs button:hover:not(:disabled) { min-width: 0; padding-inline: 6px; }
}
/* patch notes: the item's picture before its name, like the hero icons */
html.rd body .patchItemTitle { display: inline-flex; align-items: center; gap: 8px; }
html.rd body .patchItemIcon { width: 33px; height: 24px; object-fit: cover; display: block; flex: none; }

/* Line breaks, site-wide (all three sites): a word is never split into letters
   unless it alone is wider than its line (style.css's "overflow-wrap: anywhere"
   also shrank table columns to one letter: "Па/тч", "41./9%"); paragraphs end
   on more than one word, headings break into even lines. The meaning-aware
   part -- short words, numbers with their units, labels with their values --
   is theme.js's non-breaking spaces. */
:where(html.rd) * { overflow-wrap: break-word; word-break: normal; }
:where(html.rd) body { text-wrap: pretty; }
:where(html.rd) :is(h1, h2, h3, h4, h5) { text-wrap: balance; }
/* the phone hides hero names in the tier-1 table (the icon says it) -- not player names elsewhere */
@media (max-width: 700px) {
  html.rd body #heroPage .tier1HeroNameText,
  html.rd body .tier1PlayerRow .tier1HeroNameText { display: inline; }
}
/* heroes catalog on a phone: just the portraits, a dense grid per attribute (the name is the tooltip) */
html.rd body .heroesCardIcon { display: none; }
@media (max-width: 700px) {
  html.rd body .heroesGrid { grid-template-columns: minmax(0, 1fr); }
  html.rd body #heroesGrid .homeMetaCol { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
  html.rd body #heroesGrid .homeMetaColHead,
  html.rd body #heroesGrid .homeMetaColEmpty { grid-column: 1 / -1; }
  html.rd body button.heroesCard,
  html.rd body button.heroesCard:hover:not(:disabled) { padding: 0; border-width: 1px; }
  html.rd body .heroesCard .homeMetaHeroPortrait,
  html.rd body .heroesCard .homeMetaHeroCardHead,
  html.rd body .heroesCard .homeMetaHeroStat { display: none; }
  html.rd body .heroesCardIcon { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
}
/* home "meta by role" cards on a phone: the hero's icon instead of a cut name,
   WR / Имп / Пики instead of cut labels, no POS badge (the column says it) */
html.rd body .statShort,
html.rd body .homeMetaHeroIcon { display: none; }
html.rd body .homeMetaHeroStat__v { white-space: nowrap; }
@media (max-width: 950px) {
  html.rd body .homeMetaHeroIcon { display: block; width: 32px; height: 32px; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaHeroCardName,
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaHeroCardBadge,
  html.rd body .statFull { display: none; }
  html.rd body .statShort { display: inline; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaHeroCard { padding: 10px; }
}
/* tier-1 meta on a phone: a hero's numbers on one line; a pair's numbers under
   its two icons, the win rate on the right of both lines */
@media (max-width: 700px) {
  html.rd body #tier1Table .tier1Num { white-space: nowrap; }
  html.rd body #tier1Table .historyRow.tier1PairRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; }
  html.rd body .tier1PairRow .tier1Name { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 6px; }
  html.rd body .tier1PairRow .tier1Num { grid-column: 1; grid-row: 2; text-align: left; flex: none; }
  html.rd body .tier1PairRow .tier1Wr { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}
/* "DOTA 2" (and MLBB / LOL) at the EYE's own size: a bitmap face's strokes are
   as thick as its size, so the tag reads with the same weight as the logo */
@media (min-width: 701px) {
  html.rd body .topNavBrand .gameTag,
  html.rd body .topNavBrand .gameTag:hover:not(:disabled) { font-size: calc(19 * var(--rd-px)) !important; padding: 0 0.3em !important; letter-spacing: 0.04em; }
}
@media (max-width: 700px) {
  html.rd body #mobileHeader #siteTitle,
  html.rd body #mobileHeader .gameTag,
  html.rd body #mobileHeader .gameTag:hover:not(:disabled) { font-size: 22.4px; }
  html.rd body #mobileHeader .gameTag,
  html.rd body #mobileHeader .gameTag:hover:not(:disabled) { box-sizing: border-box; height: 1.1em !important; min-height: 0 !important; line-height: 1; display: inline-flex; align-items: center; padding: 0 0.3em !important; border: 0; letter-spacing: 0.04em; }
}
/* last tier-1 match: the score never breaks inside a number ("2" / "3") */
html.rd body .homeLatestMatchScore { white-space: nowrap; flex: none; }
@media (max-width: 700px) { html.rd body .homeLatestMatchScore { font-size: min(calc(48 * var(--rd-px)), 10vw); } }
/* rows of numbers on a phone: the counts never wrap; the name gives way (ellipsis), not the numbers */
@media (max-width: 700px) {
  html.rd body .tier1Num { white-space: nowrap; flex: none; }
  html.rd body #heroPage .tier1Name { flex: 1 1 auto; min-width: 0; }
  html.rd body #tier1Table .tier1Num,
  html.rd body #tier1Table .tier1Pos { letter-spacing: 0; }
  html.rd body #tier1Table .tier1Num { font-size: 0.7rem; }
  html.rd body #tier1Table .historyRow.tier1Row { gap: 8px; }
}
@media (max-width: 700px) {
  html.rd body #tier1Table .tier1Wr { font-size: 0.95rem; }
  html.rd body #tier1Table .tier1Pos { padding-left: 4px; padding-right: 4px; }
  html.rd body #tier1Table .historyRow.tier1Row { padding-right: 10px; }
}
/* phone header: the logo's parts closer together and, on a narrow phone, a touch
   smaller (logo and game tag together, so their strokes stay equal) -- the menu
   button gets its own room on the right instead of lying over "DOTA 2" */
@media (max-width: 700px) {
  html.rd body #mobileHeader { padding-right: 40px; gap: 0; }
  html.rd body #mobileHeader #siteTitle,
  html.rd body #mobileHeader .gameTag,
  html.rd body #mobileHeader .gameTag:hover:not(:disabled) { font-size: min(22.4px, 5.7vw); letter-spacing: 0.03em; }
  html.rd body #siteTitle .siteTitleIcon { margin-right: 0.3em; }
  html.rd body #siteTitle .siteTitleHighlight { margin-left: 0.05em; }
  html.rd body #mobileHeader .gameSwitcher { margin-left: calc(0.35 * min(22.4px, 5.7vw)); }
  /* the menu button: three square bars, the site's bitmap look */
  html.rd body #menuBtn { top: 10px; right: 6px; width: 34px; opacity: 0.75; color: var(--rd-text); }
  html.rd body #menuBtn::before { width: 18px; height: 3px; border-radius: 0; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  html.rd body #menuBtn:active { color: var(--rd-signal); }
}
@media (max-width: 360px) {
  html.rd body #mobileHeader #siteTitle,
  html.rd body #mobileHeader .gameTag,
  html.rd body #mobileHeader .gameTag:hover:not(:disabled) { font-size: 5vw; }
}
/* a narrow phone: the position badge is just its number ("4" for "4 · Сап") so the win rate keeps its room */
@media (max-width: 400px) {
  html.rd body #tier1Table .tier1PosWord { display: none; }
  html.rd body #tier1Table .tier1Pos { min-width: 22px; text-align: center; }
}
/* home "meta by role" on a phone: all five roles in one row -- the role's number
   on top, the hero's icon, then each number under a small label */
@media (max-width: 950px) {
  html.rd body .homeMetaGrid:not(.heroesGrid) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaCol { padding: 4px 3px; gap: 6px; border-width: 1px; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaColHead { text-align: center; padding-bottom: 4px; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .metaColWord { display: none; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaHeroCard { padding: 6px 2px; gap: 6px; align-items: center; border-width: 1px; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaHeroCardHead { justify-content: center; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaHeroIcon { width: 30px; height: 30px; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaHeroStat { flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaHeroStat > span:first-child { flex: none; font-size: 0.58rem; letter-spacing: 0.04em; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaHeroStat > span:first-child::after { display: none; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .homeMetaHeroStat__v { font-size: 0.72rem; letter-spacing: 0; }
  html.rd body .homeMetaGrid:not(.heroesGrid) .statUnit { display: none; }
}
/* Turbo build rating on a phone: the whole screen, not a narrow box with margins */
@media (max-width: 700px) {
  html.rd body .turboRatingModal { width: auto; max-width: none; height: auto; max-height: none; margin: 0; border-width: 0; padding: 14px 12px 20px; position: fixed; inset: 0; transform: none; }
  html.rd body .turboRatingRow { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 8px; padding: 10px; }
  html.rd body .turboRatingRank { grid-row: 1; grid-column: 1; }
  html.rd body .turboRatingName { grid-row: 1; grid-column: 2; }
  html.rd body .turboRatingLikes { grid-row: 1; grid-column: 3; }
  html.rd body .turboRatingMembers { grid-row: 2; grid-column: 1 / -1; }
  html.rd body .turboRatingItems img { width: 36px; height: 26px; }
}

/* ---------- 2D replay player (replay-player.js) in the mistakes analysis ---------- */
html.rd body .rp { margin: 18px 0; }
html.rd body .rpMain { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 14px; align-items: start; }
html.rd body .rpMapWrap { border: 2px solid var(--rd-line); background: var(--rd-panel); }
html.rd body .rpMap { display: block; width: 100%; image-rendering: auto; }
html.rd body .rpSide { display: grid; gap: 10px; font-family: var(--rd-mono); font-size: 0.82rem; min-width: 0; }
html.rd body .rpStatsRow b { font-family: var(--rd-pixel); font-size: calc(16 * var(--rd-px)); letter-spacing: 0.04em; }
html.rd body .rpStatsGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; color: var(--rd-muted); }
html.rd body .rpStatsGrid b { color: var(--rd-text); }
html.rd body .rpItemsList { display: flex; flex-wrap: wrap; gap: 4px; }
html.rd body .rpItem { display: grid; justify-items: center; gap: 1px; }
html.rd body .rpItem img { width: 40px; height: 29px; object-fit: cover; border: 1px solid var(--rd-line); display: block; }
html.rd body .rpItem small { font-size: 0.62rem; color: var(--rd-muted); }
html.rd body .rpFeedList { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
html.rd body .rpEvent,
html.rd body .rpEvent:hover:not(:disabled) { display: flex; gap: 8px; width: 100%; margin: 0; padding: 4px 8px; min-height: 0; text-align: left; font: inherit; text-transform: none; letter-spacing: 0; color: var(--rd-text); background: var(--rd-row); border: 0; border-left: 3px solid var(--rd-row-line); box-shadow: none; transform: none; cursor: pointer; }
html.rd body .rpEvent span { color: var(--rd-muted); flex: none; }
html.rd body .rpEvent--kill { border-left-color: var(--rd-signal); }
html.rd body .rpEvent--death { border-left-color: var(--rd-bad); }
html.rd body .rpEvent--ward { border-left-color: #facc15; }
html.rd body .rpEvent:hover:not(:disabled) { background: var(--rd-row-hi); }
html.rd body .rpControls { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
html.rd body .rpPlay,
html.rd body .rpPlay:hover:not(:disabled) { flex: none; width: 44px; min-height: 36px; margin: 0; padding: 0; font-size: 1rem; background: var(--rd-signal); color: var(--rd-on-signal); border: 0; box-shadow: none; }
html.rd body .rpTime { flex: none; font-family: var(--rd-mono); font-size: 0.85rem; min-width: 9.5ch; }
html.rd body .rpTrack { position: relative; flex: 1; min-width: 0; }
html.rd body .rpSeek { width: 100%; margin: 0; accent-color: var(--rd-signal); }
html.rd body .rpMarks { position: absolute; left: 0; right: 0; top: -6px; height: 5px; pointer-events: none; }
html.rd body .rpMark { position: absolute; width: 2px; height: 5px; background: var(--rd-line-hi); }
html.rd body .rpMark--kill { background: var(--rd-signal); }
html.rd body .rpMark--death { background: var(--rd-bad); }
html.rd body .rpSpeed { flex: none; width: auto; }
html.rd body .rpHeroes { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
html.rd body .rpHero,
html.rd body .rpHero:hover:not(:disabled) { margin: 0; padding: 3px; min-height: 0; background: var(--rd-row); border: 2px solid var(--rd-row-line); box-shadow: none; transform: none; display: grid; place-items: center; }
html.rd body .rpHero img { width: 32px; height: 32px; display: block; }
html.rd body .rpHero--t2 { border-bottom-color: #4ade80; }
html.rd body .rpHero--t3 { border-bottom-color: #f87171; }
html.rd body .rpHero[aria-pressed="true"] { border-color: var(--rd-signal); }
@media (max-width: 700px) {
  html.rd body .rpMain { grid-template-columns: minmax(0, 1fr); }
  html.rd body .rpHeroes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html.rd body .rpFeedList { max-height: 200px; }
}
@media (max-width: 700px) {
  html.rd body .rpControls { flex-wrap: wrap; row-gap: 12px; }
  html.rd body .rpTrack { order: 5; flex-basis: 100%; }
  html.rd body .rpSpeed { margin-left: auto; }
}
/* the replay player's event feed: rows keep their height, the list scrolls */
html.rd body .rpFeedList { display: flex; flex-direction: column; gap: 2px; }
html.rd body .rpEvent,
html.rd body .rpEvent:hover:not(:disabled) { flex: none; height: auto; line-height: 1.35; align-items: baseline; }

/* "Не я играл": the match's players to pick from, Radiant | Dire */
html.rd body .mistakeForm--notMe #mistakeGuestAccountRow { display: none; }
html.rd body .mistakePlayerPick { margin: 12px 0 4px; }
html.rd body .mistakePickGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html.rd body .mistakePickSide { display: grid; gap: 4px; align-content: start; }
html.rd body .mistakePickSide h5 { margin: 0 0 2px; font-family: var(--rd-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-muted); }
html.rd body .mistakePickPlayer,
html.rd body .mistakePickPlayer:hover:not(:disabled) { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 6px 10px; min-height: 0; text-align: left; font: inherit; text-transform: none; letter-spacing: 0; color: var(--rd-text); background: var(--rd-row); border: 2px solid var(--rd-row-line); box-shadow: none; transform: none; }
html.rd body .mistakePickPlayer:hover:not(:disabled) { border-color: var(--rd-purple-hi); }
html.rd body .mistakePickPlayer[aria-pressed="true"],
html.rd body .mistakePickPlayer[aria-pressed="true"]:hover:not(:disabled) { border-color: var(--rd-signal); background: var(--rd-panel-2); }
html.rd body .mistakePickPlayer .heroIcon { width: 32px; height: 32px; }
html.rd body .mistakePickName { display: grid; min-width: 0; font-family: var(--rd-mono); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.rd body .mistakePickName small { font-weight: 400; color: var(--rd-muted); font-size: 0.72rem; }
html.rd body .mistakePickKda { font-family: var(--rd-mono); font-size: 0.8rem; color: var(--rd-muted); white-space: nowrap; }
@media (max-width: 700px) { html.rd body .mistakePickGrid { grid-template-columns: minmax(0, 1fr); } }

/* replay player, compact: the map sized so the whole player fits the screen,
   the side panel as tall as the map with a dedicated area for events */
html.rd body .rpMain { display: flex; gap: 14px; align-items: flex-start; }
html.rd body .rpMapWrap { position: relative; flex: none; }
html.rd body .rpSide { flex: 1; min-width: 0; height: var(--rp-map, auto); display: flex; flex-direction: column; gap: 8px; }
html.rd body .rpSide > * { flex: none; }
html.rd body .rpSide > .rpFeedList { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
html.rd body .rpItem img { width: 52px; height: 36px; }
html.rd body .rpHeroes { grid-template-columns: repeat(10, minmax(0, 52px)); margin-top: 8px; }
html.rd body .rpHero img { width: 28px; height: 28px; }
html.rd body .rpControls { margin-top: 8px; }
html.rd body .rpFull,
html.rd body .rpFull:hover:not(:disabled) { flex: none; width: 36px; min-height: 36px; margin: 0; padding: 0; background: transparent; color: var(--rd-text); border: 2px solid var(--rd-line-hi); box-shadow: none; font-size: 1rem; }
html.rd body .rpOpen,
html.rd body .rpClose { display: none; }

/* a phone, inline: just the map as a preview with one button -- the player opens full screen */
@media (max-width: 700px) {
  html.rd body .rp:not(.rp--full) .rpSide,
  html.rd body .rp:not(.rp--full) .rpControls,
  html.rd body .rp:not(.rp--full) .rpHeroes { display: none; }
  html.rd body .rp:not(.rp--full) .rpMain { display: block; }
  html.rd body .rp:not(.rp--full) .rpOpen,
  html.rd body .rp:not(.rp--full) .rpOpen:hover:not(:disabled) { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 12px 18px; min-height: 0; background: var(--rd-signal); color: var(--rd-on-signal); border: 0; box-shadow: 4px 4px 0 var(--rd-purple); font-family: var(--rd-pixel); font-size: calc(16 * var(--rd-px)); letter-spacing: 0.04em; white-space: nowrap; }
}

/* full screen (landscape): laid out like on a computer */
body.rpFullOpen { overflow: hidden; }
html.rd body .rp.rp--full { position: fixed; inset: 0; z-index: 400; margin: 0; padding: 10px 14px; background: var(--rd-bg); display: flex; flex-direction: column; overflow: hidden; zoom: calc(1 / 1.1); }
html.rd body .rp--full > h4,
html.rd body .rp--full > .historyHint { display: none; }
html.rd body .rp--full .rpMain { display: flex; flex: 1; min-height: 0; }
html.rd body .rp--full .rpSide,
html.rd body .rp--full .rpControls { display: flex; }
html.rd body .rp--full .rpControls { flex-wrap: nowrap; }
html.rd body .rp--full .rpTrack { order: 0; flex-basis: auto; }
html.rd body .rp--full .rpHeroes { display: grid; grid-template-columns: repeat(10, minmax(0, 52px)); }
html.rd body .rp--full .rpClose,
html.rd body .rp--full .rpClose:hover:not(:disabled) { display: block; position: absolute; top: 6px; right: 8px; z-index: 2; width: 34px; min-height: 34px; margin: 0; padding: 0; background: var(--rd-panel); color: var(--rd-text); border: 2px solid var(--rd-line-hi); box-shadow: none; }
html.rd body .rp--full .rpSide { padding-right: 40px; }
/* a portrait phone whose browser can't lock the orientation: the player drawn turned sideways */
html.rd body .rp.rp--full.rp--rotate { inset: auto; top: 0; left: 0; width: 100vh; height: 100vw; transform-origin: top left; transform: rotate(90deg) translateY(-100%); }
/* full screen: the box covers the screen, its stage holds the layout (and is what turns sideways) */
html.rd body .rp.rp--full { display: block; padding: 0; }
html.rd body .rp--full .rpStage { position: absolute; inset: 0; padding: 10px 14px; display: flex; flex-direction: column; overflow: hidden; background: var(--rd-bg); }
html.rd body .rp--full .rpStage > h4,
html.rd body .rp--full .rpStage > .historyHint { display: none; }
html.rd body .rp.rp--full.rp--rotate { inset: 0; width: auto; height: auto; transform: none; }
html.rd body .rp--rotate .rpStage { inset: auto; top: 0; left: 0; width: 100vh; height: 100vw; transform-origin: top left; transform: rotate(90deg) translateY(-100%); }

/* replay player: the inventory (six slots + neutral), the skill order, talents, and a line under each hero */
html.rd body .rpInv { display: flex; align-items: center; gap: 8px; }
html.rd body .rpInvMain { flex: 0 1 332px; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
html.rd body .rpSlot { width: 100%; aspect-ratio: 13 / 9; display: block; background: var(--rd-row); border: 1px solid var(--rd-line); }
html.rd body .rpSlot img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.rd body .rpSlot--neutral { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
html.rd body .rpSkills { display: flex; flex-wrap: wrap; gap: 2px; }
html.rd body .rpSkill img { width: 26px; height: 26px; display: block; border: 1px solid var(--rd-line); }
html.rd body .rpTalent { font-size: 0.74rem; color: var(--rd-text); }
html.rd body .rpTalent span { color: var(--rd-muted); }
html.rd body .rpHeroes,
html.rd body .rp--full .rpHeroes { grid-template-columns: repeat(10, minmax(0, 1fr)); }
html.rd body .rpHero,
html.rd body .rpHero:hover:not(:disabled) { display: grid; justify-items: center; gap: 1px; padding: 3px 2px; }
html.rd body .rpHeroLine { font-family: var(--rd-mono); font-size: 0.64rem; color: var(--rd-muted); white-space: nowrap; line-height: 1.1; }
html.rd body .rpHeroLine { text-transform: none; letter-spacing: 0; }
/* the side panel scrolls as a whole when it holds more than the map's height */
html.rd body .rpSide { overflow-y: auto; }
html.rd body .rpSide > .rpFeedList { flex: none; overflow: visible; }

/* the player's game dialog (hero guide): a plain frame, no offset shadow */
html.rd body .wardZoomBox.playerViewBox { box-shadow: none; }
/* "Не я играл" on its own line under the Match ID field, on every screen */
html.rd body #mistakeForm .draftControls { flex-direction: column; align-items: center; }

/* home: the latest tier-1 series -- map chips under the score, all maps as cards in a dialog */
html.rd body .homeSeriesCard { cursor: pointer; }
html.rd body .seriesMaps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
html.rd body .seriesMap,
html.rd body .seriesMap:hover:not(:disabled) { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; margin: 0; padding: 6px 12px; min-height: 0; background: var(--rd-row); border: 2px solid var(--rd-row-line); box-shadow: none; transform: none; color: var(--rd-text); font-family: var(--rd-mono); text-transform: none; letter-spacing: 0; }
html.rd body .seriesMap span { font-size: 0.72rem; color: var(--rd-muted); text-transform: uppercase; letter-spacing: 0.06em; }
html.rd body .seriesMap b { font-size: 0.95rem; white-space: nowrap; }
html.rd body .seriesMap:hover:not(:disabled) { border-color: var(--rd-signal); }
html.rd body .seriesMap--t0 { border-left: 4px solid var(--rd-signal); }
html.rd body .seriesMap--t1 { border-right: 4px solid var(--rd-signal); }
html.rd body .seriesMap--live b { color: var(--rd-signal); }
html.rd body .seriesModal { max-width: 980px; width: calc(100% - 32px); max-height: calc(100vh - 48px); overflow-y: auto; }
html.rd body .seriesMapCard,
html.rd body .seriesMapCard:hover:not(:disabled) { display: block; width: 100%; margin: 0 0 10px; padding: 12px; min-height: 0; text-align: left; font: inherit; text-transform: none; letter-spacing: 0; color: var(--rd-text); background: var(--rd-panel); border: 2px solid var(--rd-line); box-shadow: none; transform: none; }
html.rd body .seriesMapCard:hover:not(:disabled) { border-color: var(--rd-purple-hi); }
html.rd body .seriesMapHead { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-family: var(--rd-mono); }
html.rd body .seriesMapHead b { font-family: var(--rd-pixel); font-size: calc(16 * var(--rd-px)); letter-spacing: 0.04em; font-weight: 400; }
html.rd body .seriesMapSides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html.rd body .seriesSide { display: grid; gap: 3px; align-content: start; }
html.rd body .seriesSide > b { font-family: var(--rd-mono); font-size: 0.8rem; color: var(--rd-muted); margin-bottom: 2px; }
html.rd body .seriesSide--win > b { color: var(--rd-signal); }
html.rd body .seriesPlayer { display: grid; grid-template-columns: 26px 6.5ch minmax(0, 1fr); align-items: center; gap: 8px; font-family: var(--rd-mono); font-size: 0.78rem; }
html.rd body .seriesPlayer .heroIcon { width: 26px; height: 26px; }
html.rd body .seriesKda { color: var(--rd-muted); white-space: nowrap; }
html.rd body .seriesItems { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
html.rd body .seriesItems img { width: 28px; height: 20px; object-fit: cover; border: 1px solid var(--rd-line); }
html.rd body .seriesHeroes { display: flex; gap: 4px; }
@media (max-width: 700px) {
  html.rd body .seriesMapSides { grid-template-columns: minmax(0, 1fr); }
  html.rd body .seriesMap,
  html.rd body .seriesMap:hover:not(:disabled) { min-width: 0; flex: 1; padding: 6px 8px; }
  html.rd body .seriesModal { width: 100%; max-height: 100dvh; }
}
/* the live match page ends with its demo */
html.rd body .liveDemoSlot { display: flex; justify-content: center; margin: 24px 0 8px; }

/* replay player side panel: the player's state on top (scrolls if long), the event feed below with its own scroll, foldable */
html.rd body .rpSide { overflow: hidden; gap: 8px; }
html.rd body .rpInfo { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
html.rd body .rpInfo > * { flex-shrink: 0; }
html.rd body .rpPanel { min-height: 0; border-top: 1px solid var(--rd-line); }
html.rd body .rpPanel[open] { flex: 0 1 32%; overflow-y: auto; }
html.rd body .rpPanel summary { cursor: pointer; font: .75rem var(--rd-mono); color: var(--rd-text); padding: 5px 0; }
html.rd body .rpPanel .rpFeedList { max-height: none; overflow: visible; }
html.rd body .rpHeroesToggle,
html.rd body .rpHeroesToggle:hover:not(:disabled) { flex: none; margin: 0; padding: 4px 8px; min-height: 0; background: transparent; color: var(--rd-muted); border: 0; box-shadow: none; transform: none; font-family: var(--rd-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; }
html.rd body .rpHeroesToggle,
html.rd body .rpHeroesToggle:hover:not(:disabled) { border: 2px solid var(--rd-line-hi); min-height: 36px; }
html.rd body .rpHeroesToggle span { display: inline-block; transition: transform 150ms; }
html.rd body .rpHeroesToggle[aria-expanded="false"] span { transform: rotate(-90deg); }
html.rd body .rp--noHeroes .rpHeroes { display: none !important; }
/* the talent tree: both options per level, the taken one lit */
html.rd body .rpTree { display: grid; gap: 3px; }
html.rd body .rpTreeRow { display: grid; grid-template-columns: minmax(0, 1fr) 2.2em minmax(0, 1fr); gap: 3px; align-items: stretch; }
html.rd body .rpTreeOpt { padding: 3px 6px; font-size: 0.68rem; line-height: 1.25; color: var(--rd-muted); background: var(--rd-row); border: 1px solid var(--rd-row-line); }
html.rd body .rpTreeRow .rpTreeOpt:first-child { text-align: right; }
html.rd body .rpTreeOpt--taken { color: var(--rd-text); border-color: var(--rd-signal); }
html.rd body .rpTreeLvl { display: grid; place-items: center; font-family: var(--rd-pixel); font-weight: 400; font-size: calc(13 * var(--rd-px)); color: var(--rd-signal); background: var(--rd-panel-2); }
html.rd body .rpSkill--attr { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--rd-line); color: var(--rd-signal); font-weight: 700; font-size: 0.85rem; }
html.rd body .rpSlot--enchant { width: 28px; height: 28px; margin-left: -6px; }
/* the analysis form: Match ID and the account number side by side, "Не я играл" on a line of its own below */
html.rd body #mistakeForm .draftControls { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: center; }
html.rd body #mistakeNotMeRow { flex-basis: 100%; justify-content: center; }
/* both fields of the analysis form alike */
html.rd body #mistakeForm .draftControlLabel { font-size: 0.95rem; }
html.rd body #mistakeMatchIdInput,
html.rd body #mistakeGuestAccountId { font-size: 1rem; height: 44px; box-sizing: border-box; }

/* the series card: the two teams mirror each other around the score (logos in boxes of one size),
   the map chips share the card's width; only the card itself moves on hover, a chip just gets a lime frame */
html.rd body .homeSeriesCard .homeLatestMatchTeams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
html.rd body .homeSeriesCard .homeLatestMatchTeam { min-width: 0; }
html.rd body .homeSeriesCard .homeLatestMatchTeam:first-child { justify-self: end; }
html.rd body .homeSeriesCard .homeLatestMatchTeam:last-child { justify-self: start; }
html.rd body .homeSeriesCard .homeLatestMatchLogo { width: 72px; height: 44px; object-fit: contain; }
html.rd body .seriesMaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); width: 100%; }
html.rd body .seriesMap,
html.rd body .seriesMap:hover:not(:disabled) { width: 100%; min-width: 0; border: 2px solid var(--rd-row-line); transform: none; box-shadow: none; transition: border-color 120ms; }
html.rd body .seriesMap:hover:not(:disabled) { border-color: var(--rd-signal); }
html.rd body .seriesMap small { font-family: var(--rd-mono); font-size: 0.7rem; color: var(--rd-signal); text-transform: uppercase; letter-spacing: 0.04em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { html.rd body .homeSeriesCard .homeLatestMatchTeams { gap: 10px; } }
@media (max-width: 700px) {
  html.rd body .homeSeriesCard .homeLatestMatchLogo { width: 56px; height: 34px; }
  html.rd body .homeSeriesCard .homeLatestMatchTeamName { font-size: calc(13 * var(--rd-px)); white-space: normal; text-align: center; overflow-wrap: normal; }
  html.rd body .homeSeriesCard .homeLatestMatchTeam { text-align: center; justify-self: center !important; }
}

/* "Что мне пикнуть" is being reworked: only the tabs and the maintenance note (remove these two rules to bring it back) */
html.rd body #draftSection > :not(h2):not(#draftModeToggle):not(.draftMaintenance) { display: none !important; }
html.rd body .draftMaintenance { margin-top: 24px; text-align: center; }
/* the player's dialog never wider than the phone (its close button stays on screen) */
/* body has zoom: 1.1, so a vw inside it is 10% wider than the screen: divided back */
.playerViewBox { box-sizing: border-box; width: min(calc(96vw / 1.1), 1100px); max-width: calc((100vw - 40px) / 1.1); min-width: 0; }
.wardZoomBox:not(.playerViewBox) { max-width: calc((100vw - 16px) / 1.1); }
.playerViewBox .wardZoomBar > *,
.playerViewBody > * { min-width: 0; }
.playerViewBox .wardZoomBar .tier1Sub { flex: 1 1 100%; white-space: normal; }
/* hero page opponents on a phone: one column that never outgrows the screen; the name gives way, not the numbers */
@media (max-width: 900px) { html.rd body .heroOppGrid { grid-template-columns: minmax(0, 1fr); } }
html.rd body .heroOpp { min-width: 0; }
html.rd body .heroOpp .tier1Name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* hero page, wins by patch: positions as "1: 41" on a phone (the role word only on wider screens) */
html.rd body .posPair { white-space: nowrap; }
@media (max-width: 700px) { html.rd body .posWord { display: none; } }
/* the Spirit Bear's slots under the hero's */
html.rd body .rpInvLabel { font-family: var(--rd-mono); font-size: 0.68rem; color: var(--rd-muted); text-transform: uppercase; letter-spacing: 0.06em; min-width: 5.5em; }
html.rd body .rpInv--bear { flex-wrap: wrap; }
/* an analysis or a demo opened by its link (or from live): just the result, no form above it */
html.rd body .mistakeSection--viewOnly #mistakeForm,
html.rd body .mistakeSection--viewOnly #mistakeAuthGate,
html.rd body .mistakeSection--viewOnly #mistakeNotLinked,
html.rd body .mistakeSection--viewOnly #mistakeError,
html.rd body .mistakeSection--viewOnly #mistakeWaiting { display: none !important; }

/* fold toggles: a labelled pill (icon turns, the word says what a tap does) */
html.rd body .foldArrow,
html.rd body .foldArrow:hover:not(:disabled),
html.rd body .foldArrow[aria-expanded="false"],
html.rd body .foldArrow[aria-expanded="false"]:hover:not(:disabled),
html.rd body .foldArrow[aria-expanded="false"]:active,
html.rd body .foldArrow[aria-expanded="false"]:focus { width: auto; padding: 0 10px 0 8px; gap: 6px; transform: none; margin-left: 10px; vertical-align: middle; }
html.rd body .foldArrowIcon { display: inline-block; transition: transform 200ms ease; }
html.rd body .foldArrow[aria-expanded="false"] .foldArrowIcon { transform: rotate(-90deg); }
html.rd body .foldArrowText { font-family: var(--rd-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--rd-muted); }
html.rd body .foldHead { cursor: pointer; }
html.rd body .foldHead:hover .foldArrowText { color: var(--rd-text); }
html.rd body .heroPubBuild > summary::after { content: "▾ развернуть"; font-size: 0.72rem; font-family: var(--rd-mono); color: var(--rd-muted); border: 2px solid var(--rd-line-hi); padding: 2px 8px; opacity: 1; }
html.rd body .heroPubBuild[open] > summary::after { content: "▴ свернуть"; }
@media (prefers-reduced-motion: reduce) { html.rd body .foldArrowIcon { transition: none; } }
/* the Steam top-up banner: filled with the site's own CTA lime, apart from the purple Premium one */
html.rd body .topupBanner.premiumBanner,
html.rd body .topupBanner.premiumBanner:hover:not(:disabled) { background: var(--rd-signal); border-color: var(--rd-signal); color: var(--rd-on-signal); box-shadow: 6px 6px 0 var(--rd-purple); }
html.rd body .homePremiumBanner .topupBanner.premiumBanner:hover:not(:disabled),
html.rd body .topupBanner.premiumBanner:hover:not(:disabled) { border-color: var(--rd-text); box-shadow: 3px 3px 0 var(--rd-purple); }
html.rd body .topupBanner * { color: inherit; }
html.rd body .topupBanner .bannerSplitPrice span { opacity: 0.75; }
html.rd body .topupBanner .bannerSplitPrice b,
html.rd body .topupBanner .bannerSplitPrice span { color: var(--rd-on-signal); }
html.rd body .topupBanner .bannerSplitSide em { color: var(--rd-signal); background: var(--rd-on-signal); padding: 6px 12px; }
html.rd body .topupBanner.premiumBanner { box-shadow: none; }

/* turbo madness slider: the track fills green -> red with the level */
html.rd body .turboChaos input[type="range"] { -webkit-appearance: none; appearance: none; height: 8px; background: linear-gradient(90deg, #3ddc84, #c6ff3d 25%, #ffd23d 50%, #ff8a3d 75%, #ff3d5e) 0 0 / var(--chaos-fill, 50%) 100% no-repeat, var(--rd-line); border: 0; padding: 0; cursor: pointer; }
html.rd body .turboChaos input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--chaos-color, #ffd23d); border: 3px solid var(--rd-bg); outline: 2px solid var(--chaos-color, #ffd23d); }
html.rd body .turboChaos input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--chaos-color, #ffd23d); border: 3px solid var(--rd-bg); border-radius: 0; }
html.rd body .turboChaos b { transition: color 120ms; }
/* home: Match ID -> mistakes analysis */
html.rd body .homeMistake { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 24px; padding: 16px 18px; border: 2px solid var(--rd-line-hi); background: var(--rd-panel); }
html.rd body .homeMistakeText { display: grid; gap: 4px; }
html.rd body .homeMistakeText b { font-family: var(--rd-pixel); font-size: calc(22 * var(--rd-px)); color: var(--rd-text); font-weight: 400; }
html.rd body .homeMistakeText span { font-family: var(--rd-mono); font-size: 0.85rem; color: var(--rd-muted); }
html.rd body .homeMistakeRow { display: flex; gap: 8px; flex: 1 1 340px; max-width: 520px; }
html.rd body .homeMistakeRow input { flex: 1 1 auto; min-width: 0; margin: 0; }
html.rd body .homeMistakeRow button { flex: none; margin: 0; }
@media (max-width: 700px) { html.rd body .homeMistakeRow { flex-basis: 100%; max-width: none; } }
html.rd body .homeMistake { flex-direction: column; align-items: stretch; justify-content: flex-start; }
html.rd body .homeMistakeRow { gap: 16px; flex: none; width: 100%; max-width: 600px; }
html.rd body .homeMistakeRow input { padding: 10px 14px; }
html.rd body #homeTopupBanner:not(.hidden) { margin-bottom: 24px; }
/* desktop: text and the field in one line, the field takes the rest; phone: stacked, full width */
html.rd body .homeMistake { flex-direction: row; flex-wrap: wrap; align-items: center; }
html.rd body .homeMistakeText { flex: none; }
html.rd body .homeMistakeRow { flex: 1 1 320px; min-width: 0; width: auto; max-width: none; }
@media (max-width: 700px) {
  html.rd body .homeMistake { flex-direction: column; align-items: stretch; }
  html.rd body .homeMistakeRow { flex: none; width: 100%; }
}
/* slider from the site's own lime, not a foreign green */
html.rd body .turboChaos input[type="range"] { background: linear-gradient(90deg, #c6ff3d, #ffe83d 25%, #ffb83d 50%, #ff7a3d 75%, #ff3d5e) 0 0 / var(--chaos-fill, 50%) 100% no-repeat, var(--rd-line); }
/* home widget: the field and button as tall as the text next to them */
html.rd body .homeMistake { align-items: stretch; }
html.rd body .homeMistakeRow { align-items: stretch; }
html.rd body .homeMistakeRow input { height: auto; }
/* "Разобрать": like the analysis page button -- rises on hover, no shadow at rest */
html.rd body .homeMistakeRow button,
html.rd body .homeMistakeRow button:hover:not(:disabled) {
  font-family: var(--rd-pixel); font-weight: 400; letter-spacing: 0.08em;
  background: var(--rd-signal); color: var(--rd-on-signal); border: 2px solid var(--rd-signal);
  padding: 0 22px; transform: none; box-shadow: 4px 4px 0 transparent;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
html.rd body .homeMistakeRow button:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--rd-purple); }
html.rd body .homeMistakeRow button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 transparent; }
@media (max-width: 700px) { html.rd body .homeMistakeRow button, html.rd body .homeMistakeRow button:hover:not(:disabled) { padding: 12px 18px; } }
@media (prefers-reduced-motion: reduce) { html.rd body .homeMistakeRow button { transition: none; } }
html.rd body .homeMetaMore { margin: 6px 0 56px; }
html.rd body #homeMetaGrid { margin-bottom: 0; } html.rd body #homeMetaMore { margin: 8px 0 56px; }
/* Steam top-up banner, compact: it's the first thing on the home page */
html.rd body .topupBanner.bannerSplit,
html.rd body .topupBanner.bannerSplit:hover:not(:disabled) { padding: 12px 32px; row-gap: 6px; }
html.rd body .topupBanner .bannerSplitMain { gap: 6px; }
html.rd body .topupBanner .premiumBannerName { font-size: calc(22 * var(--rd-px)); }
html.rd body .topupBanner .bannerSplitList { gap: 2px; font-size: 0.8rem; }
html.rd body .topupBanner .bannerSplitSide { gap: 8px; }
html.rd body .topupBanner .bannerSplitSide b { font-size: calc(26 * var(--rd-px)); }
html.rd body .topupBanner .bannerSplitSide em { font-size: calc(22 * var(--rd-px)); padding: 6px 12px; }
@media (max-width: 700px) {
  /* phone: one row -- the name on the left, price + button on the right, no list */
  html.rd body .topupBanner.bannerSplit,
  html.rd body .topupBanner.bannerSplit:hover:not(:disabled) { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; column-gap: 12px; }
  html.rd body .topupBanner .bannerSplitList { display: none; }
  html.rd body .topupBanner .premiumBannerName { font-size: calc(18 * var(--rd-px)); }
  html.rd body .topupBanner .bannerSplitPrice { flex-wrap: nowrap; gap: 6px; }
  html.rd body .topupBanner .bannerSplitPrice span { display: none; }
  html.rd body .topupBanner .bannerSplitSide { gap: 6px; }
  html.rd body .topupBanner .bannerSplitSide b { font-size: calc(18 * var(--rd-px)); }
  html.rd body .topupBanner .bannerSplitSide em { font-size: calc(16 * var(--rd-px)); padding: 5px 10px; }
}
/* top-up banner: the same edge and type as the "Разбери свой матч" widget under it */
html.rd body .topupBanner.bannerSplit,
html.rd body .topupBanner.bannerSplit:hover:not(:disabled) { padding: 16px 32px 16px 18px; }
html.rd body .topupBanner .bannerSplitList { font-size: 0.85rem; gap: 4px; }
html.rd body .topupBanner .premiumBannerList li::before { content: none; }
html.rd body .steamPixIcon { display: inline-block; width: 1em; height: 1em; margin-left: 0.4em; vertical-align: -0.1em; color: var(--rd-on-signal); }
@media (max-width: 700px) {
  html.rd body .topupBanner.bannerSplit,
  html.rd body .topupBanner.bannerSplit:hover:not(:disabled) { padding: 10px 14px; }
}
/* home meta cards: the hero art a bit brighter */
html.rd body .homeMetaHeroPortrait { opacity: 0.4; }
html.rd body .homeMetaHeroPortrait::after { opacity: 0.7; }
@media (max-width: 700px) { html.rd body .topupBanner.bannerSplit, html.rd body .topupBanner.bannerSplit:hover:not(:disabled) { padding-left: 18px; } }
/* top-up banner art: a big pixel Steam mark behind the text, under a halftone screen like the hero cards */
html.rd body .topupBanner.bannerSplit { position: relative; overflow: hidden; }
html.rd body .topupBanner.bannerSplit::before {
  content: ""; position: absolute; top: 50%; right: 26%; width: 260px; height: 260px; transform: translateY(-50%);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill='%230c0b10' d='M7 0h1v1h-1zM8 0h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM11 1h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM9 2h1v1h-1zM11 2h1v1h-1zM12 2h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM13 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM9 4h1v1h-1zM10 4h1v1h-1zM11 4h1v1h-1zM13 4h1v1h-1zM14 4h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM9 5h1v1h-1zM10 5h1v1h-1zM11 5h1v1h-1zM14 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM9 6h1v1h-1zM10 6h1v1h-1zM11 6h1v1h-1zM13 6h1v1h-1zM14 6h1v1h-1zM0 7h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM13 7h1v1h-1zM14 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM1 8h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1zM11 8h1v1h-1zM12 8h1v1h-1zM13 8h1v1h-1zM14 8h1v1h-1zM15 8h1v1h-1zM1 9h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM7 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM10 9h1v1h-1zM11 9h1v1h-1zM12 9h1v1h-1zM13 9h1v1h-1zM14 9h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1zM6 10h1v1h-1zM7 10h1v1h-1zM8 10h1v1h-1zM9 10h1v1h-1zM10 10h1v1h-1zM11 10h1v1h-1zM12 10h1v1h-1zM13 10h1v1h-1zM14 10h1v1h-1zM1 11h1v1h-1zM2 11h1v1h-1zM6 11h1v1h-1zM7 11h1v1h-1zM8 11h1v1h-1zM9 11h1v1h-1zM10 11h1v1h-1zM11 11h1v1h-1zM12 11h1v1h-1zM13 11h1v1h-1zM14 11h1v1h-1zM2 12h1v1h-1zM6 12h1v1h-1zM7 12h1v1h-1zM8 12h1v1h-1zM9 12h1v1h-1zM10 12h1v1h-1zM11 12h1v1h-1zM12 12h1v1h-1zM13 12h1v1h-1zM3 13h1v1h-1zM4 13h1v1h-1zM5 13h1v1h-1zM6 13h1v1h-1zM7 13h1v1h-1zM8 13h1v1h-1zM9 13h1v1h-1zM10 13h1v1h-1zM11 13h1v1h-1zM12 13h1v1h-1zM4 14h1v1h-1zM5 14h1v1h-1zM6 14h1v1h-1zM7 14h1v1h-1zM8 14h1v1h-1zM9 14h1v1h-1zM10 14h1v1h-1zM11 14h1v1h-1zM7 15h1v1h-1zM8 15h1v1h-1z'/></svg>") center / contain no-repeat; opacity: 0.16; pointer-events: none;
}
html.rd body .topupBanner.bannerSplit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(transparent 0.9px, var(--rd-signal) 1.3px) 0 0 / 3px 3px; opacity: 0.6;
}
html.rd body .topupBanner .bannerSplitMain,
html.rd body .topupBanner .bannerSplitSide { position: relative; z-index: 1; }
@media (max-width: 700px) { html.rd body .topupBanner.bannerSplit::before { width: 150px; height: 150px; right: 34%; } }
html.rd body .topupBanner.bannerSplit::before { width: 96px; height: 96px; right: 30%; opacity: 0.2; } @media (max-width: 700px) { html.rd body .topupBanner.bannerSplit::before { width: 64px; height: 64px; right: auto; left: 47%; } }
@media (max-width: 700px) { html.rd body .topupBanner.bannerSplit::before { left: 42%; } }
/* talents: long names can't widen one side, so the level column stays centred in every row */
html.rd body .talentRow { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); }
/* hero guide panel: no offset shadow */
html.rd body .heroGuide { box-shadow: none; }
/* hero page: a clear gap between a section's text and the next heading */
html.rd body #heroPage > h3,
html.rd body #heroPubBuild { margin-top: 36px; }
/* phone: fold toggles back to the bare arrow -- the label crowded the headings */
@media (max-width: 700px) {
  html.rd body .foldArrowText { display: none; }
  html.rd body .foldArrow,
  html.rd body .foldArrow:hover:not(:disabled),
  html.rd body .foldArrow[aria-expanded="false"],
  html.rd body .foldArrow[aria-expanded="false"]:hover:not(:disabled),
  html.rd body .foldArrow[aria-expanded="false"]:active,
  html.rd body .foldArrow[aria-expanded="false"]:focus { width: 28px; padding: 0; gap: 0; }
  html.rd body .heroPubBuild > summary::after { content: "▾"; padding: 0; width: 24px; height: 24px; display: inline-grid; place-items: center; flex: none; }
  html.rd body .heroPubBuild[open] > summary::after { content: "▴"; }
}
/* no outline after a mouse/finger click on buttons (keyboard focus keeps the lime one) */
html.rd body button:focus:not(:focus-visible) { outline: none; }
/* hero page section headings: bigger on desktop */
@media (min-width: 701px) {
  html.rd body #heroPage h3 { font-size: calc(22 * var(--rd-px)); }
}
/* Steam banner art: a big mark, cropped by the banner edges */
html.rd body .topupBanner.bannerSplit::before { width: 230px; height: 230px; right: 24%; opacity: 0.18; }
@media (max-width: 700px) { html.rd body .topupBanner.bannerSplit::before { width: 150px; height: 150px; left: 38%; right: auto; } }
html.rd body .topupBanner.bannerSplit::before { top: -26px; transform: none; } @media (max-width: 700px) { html.rd body .topupBanner.bannerSplit::before { top: -16px; } }
@media (max-width: 700px) { html.rd body .topupBanner.bannerSplit::before { left: 28%; top: -12px; } }

/* fold: only the arrow button is clickable; the pub-build summary uses the same button as the others */
html.rd body .foldHead { cursor: default; }
html.rd body .foldHead:hover .foldArrowText { color: var(--rd-muted); }
html.rd body .foldArrow { cursor: pointer; }
html.rd body .foldArrow:hover .foldArrowText { color: var(--rd-text); }
html.rd body .foldHead:hover .foldArrow { border-color: var(--rd-line-hi); }
html.rd body .foldArrow:hover { border-color: var(--rd-signal) !important; }
html.rd body .heroPubBuild > summary { cursor: default; }
html.rd body .heroPubBuild > summary::after,
html.rd body .heroPubBuild[open] > summary::after { content: none; display: none; }

/* mistakes: a result on screen hides the form (any width); "← Разобрать другой матч" brings it back */
html.rd body .mistakeSection--showingResult #mistakeForm,
html.rd body .mistakeSection--showingResult #mistakeAuthGate,
html.rd body .mistakeSection--showingResult #mistakeNotLinked { display: none !important; }
html.rd body .mistakeFactTip { margin: 8px 0 0; color: var(--rd-text); }
html.rd body .mistakeFactTip b { color: var(--rd-signal); font-weight: 600; }
html.rd body .mistakeFacts > .foldHead { display: flex; align-items: center; }
/* site-wide: a heading after a block of content gets room, so it reads as the start of the next part */
html.rd body .statsSection :is(p, ul, ol, table, figure, div, details) + :is(h3, h4) { margin-top: 32px; }
html.rd body .adminOnline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-family: var(--rd-mono); }
html.rd body .adminOnlineNum { font-family: var(--rd-pixel); font-size: calc(40 * var(--rd-px)); color: var(--rd-signal); line-height: 1; }
html.rd body .adminOnline .historyHint { flex-basis: 100%; margin: 0; }

/* Telegram review: inputs and suggestions stay flat in VOID and BIOS. */
html.rd body :is(input, textarea, select, .ac-list),
html.rd body :is(input, textarea, select, .ac-list):is(:hover, :focus, :focus-visible) { box-shadow: none !important; }
html.rd body .ac-item:has(.ac-hero-name) { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
html.rd body .ac-hero-name { min-width: 0; white-space: nowrap; font-size: clamp(.66rem, 2.7vw, .85rem); letter-spacing: -.035em; }
html.rd body .ac-item .heroIcon { flex: 0 0 22px; }
html.rd body .patchMobileTitle { display: none; }
html.rd body .heroItem--start { flex-wrap: wrap; max-width: 100%; min-width: 0; }
html.rd body .heroItemCopies { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%; }
html.rd body .heroItem--start > span:last-child { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
html.rd body .heroTiles--even.heroBuildRow,
html.rd body .heroTiles--even .heroBuildRow { grid-template-columns: repeat(auto-fit, minmax(0, min(100%, var(--tile-w)))); }
html.rd body .heroTiles--measure .heroItemCopies { flex-wrap: wrap; }
html.rd body .talentOpt .sent { white-space: nowrap; max-width: none; }
html.rd body .talentOpt .historyHint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px .4em; }
html.rd body .talentOpt:first-child .historyHint { justify-content: flex-end; }
html.rd body .talentOpt > span { overflow-wrap: anywhere; }
html.rd body .boardScore { white-space: nowrap; font-size: .74rem; }
html.rd body .boardCols, html.rd body .boardRow { grid-template-columns: minmax(0, 1fr) 96px; }
html.rd body .boardTeams--live .boardCols,
html.rd body .boardTeams--live .boardRow { grid-template-columns: minmax(0, 1.2fr) 80px minmax(0, 2fr) 96px; }
html.rd body .boardItems { gap: 3px; flex-wrap: nowrap; min-width: 0; }
html.rd body .boardItems img { min-width: 0; width: min(34px, calc((100% - 15px) / 6)); height: auto; aspect-ratio: 34 / 25; }
html.rd body .boardDialog { width: min(760px, calc(100% - 24px)); max-width: 760px; }
html.rd body .durationTable { width: 100%; table-layout: fixed; }
html.rd body .durationTable :is(th, td) { min-width: 0; white-space: normal; overflow-wrap: anywhere; padding: 8px 6px; }
html.rd body .durationTable :is(th, td):first-child { width: 24%; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
html.rd body .goldGraphHead { flex-wrap: wrap; }
html.rd body .goldGraphHead > span { white-space: nowrap; }
html.rd body .winGraph { position: relative; }
html.rd body .goldGraph[data-trend-points] svg { touch-action: pan-y; cursor: crosshair; }
html.rd body .trendCursor { stroke: var(--rd-text); stroke-dasharray: 3 3; pointer-events: none; }
html.rd body .trendTip { display: block; min-height: 1.4em; margin-top: 5px; font: .75rem var(--rd-mono); color: var(--rd-text); }
html.rd body .homeMetaMore, html.rd body #homeMetaMore { margin-bottom: 24px; }
.statPhrase { display: inline-block; }
html.rd body .boardItemsWrap { min-width: 0; }
html.rd body .boardBearItems { display: flex; align-items: center; gap: 3px; margin-top: 4px; }
html.rd body .boardBearItems small { color: var(--rd-muted); font-size: .6rem; }
html.rd body .boardBearItems img { width: 26px; height: 20px; object-fit: cover; min-width: 0; }
html.rd body .rpItem--future { opacity: .55; }
html.rd body .rpItemTip { position: absolute; z-index: 10; right: 8px; top: 44px; width: min(360px, calc(100% - 16px)); max-height: 60%; overflow-y: auto; background: var(--rd-panel); color: var(--rd-text); border: 2px solid var(--rd-purple); padding: 10px; font: .7rem var(--rd-mono); }
html.rd body .rpItemTip.hidden { display: none; }
html.rd body .rpHeroStats { position: absolute; z-index: 3; left: 6px; bottom: 6px; width: min(252px, calc(100% - 12px)); max-height: calc(100% - 12px); overflow: hidden; padding: 7px 9px; pointer-events: none; background: var(--rd-panel); color: var(--rd-text); border: 1px solid var(--rd-purple); font: .7rem var(--rd-mono); }
html.rd body .rpHeroStats strong { display: block; color: var(--rd-signal); }
html.rd body .rpHeroStats small { display: block; margin: 3px 0; color: var(--rd-muted); }
html.rd body .rpHeroStats dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 5px 0; gap: 3px 8px; }
html.rd body .rpHeroStats dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
html.rd body .rpHeroStats dt { color: var(--rd-muted); }
html.rd body .rpHeroStats dd { margin: 0; white-space: nowrap; }
html.rd body .rpItemTipTitle { display: block; color: var(--rd-signal); font-size: .8rem; overflow-wrap: anywhere; }
html.rd body .rpItemTipGroup { --tip-color: #93c5fd; margin-top: 8px; padding: 6px 0 0 8px; border-left: 2px solid var(--tip-color); }
html.rd body .rpItemTipGroup--bonus { --tip-color: #b5e769; }
html.rd body .rpItemTipGroup--effect { --tip-color: #ffd280; }
html.rd body .rpItemTipLabel { color: var(--tip-color); font-weight: 700; }
html.rd body .rpItemTipGroup ul { margin: 4px 0 0; padding-left: 14px; }
html.rd body .rpItemTipGroup li { margin: 2px 0; overflow-wrap: anywhere; }
html.rd body .rpItemTipGroup li::marker { color: var(--tip-color); }
html.rd body .rpItemTip p { margin: 4px 0 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  html.rd body .patchMobileTitle { display: block; margin: 0 0 12px; }
  html.rd body .boardTeams--live .boardCols,
  html.rd body .boardTeams--live .boardRow { grid-template-columns: minmax(0, 1fr) 50px 72px; column-gap: 6px; align-items: start; }
  html.rd body .boardTeams--live .boardRow > .boardName { padding-left: 0; }
  html.rd body .boardTeams--live .boardRow > .boardHero { top: auto; bottom: 6px; transform: none; left: 8px; }
  html.rd body .boardTeams--live .boardRow > .boardItemsWrap { grid-column: 1 / -1; padding-left: 34px; }
  html.rd body .boardTeams--live .boardItems { padding-left: 0; grid-column: auto; }
  html.rd body .boardTeams--live .boardRow { padding-left: 8px; padding-right: 8px; }
  html.rd body .boardKda { font-size: .68rem; padding-top: 2px; }
  html.rd body .boardScore { padding-top: 2px; font-size: .68rem; }
  html.rd body .boardName b { font-size: .78rem; }
  html.rd body .boardRow > .boardHero { width: 28px; height: 28px; }
  html.rd body .boardRow > .boardHero img { width: 26px; height: 26px; }
  html.rd body .boardDialog { width: calc(100% - 16px); padding: 12px; }
  html.rd body .talentOpt { font-size: .68rem; padding: 5px; }
  html.rd body .talentRow { grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); gap: 4px; }
  html.rd body .talentOpt .historyHint { font-size: .62rem; letter-spacing: -.03em; }
  html.rd body .heroItemCopies:has(img:nth-child(4)) { flex-basis: 100%; }
  html.rd body .winGraph .goldGraphHead > span { font-size: .72rem; }
  html.rd body .goldGraphAxis { flex-wrap: wrap; gap: 4px 8px; }
  html.rd body .durationTable { font-size: .68rem; }
  html.rd body .durationTable th { font-size: .62rem; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  html.rd body .boardTeams--live { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  html.rd body .authModalOverlay:has(> .boardDialog) { padding: 8px; }
  html.rd body .authModal.boardDialog { width: 100%; }
}

/* Dialogs share the full viewport and contain their own scrolling. */
html.peModalOpen, html.peModalOpen body { overflow: hidden; overscroll-behavior: none; }
html.rd body :is(.authModalOverlay, .modalOverlay, .wardZoom) {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; padding: 0 !important;
  display: block; overflow: hidden; overscroll-behavior: none;
  zoom: calc(1 / 1.1); background: var(--rd-panel); animation: none;
}
html.rd body :is(.authModalOverlay > .authModal, .modalOverlay > .modalBox, .wardZoom > .wardZoomBox) {
  box-sizing: border-box; width: 100% !important; max-width: none !important;
  height: 100%; max-height: none !important; min-height: 0; margin: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border: 0; box-shadow: none; animation: none;
}
html.rd body :is(.authModalOverlay, .modalOverlay) :is(.authModalClose, .modalCloseBtn) {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  z-index: 2; background: var(--rd-panel);
}
html.rd body .wardZoom > .wardZoomBox { display: flex; flex-direction: column; }
html.rd body .wardZoom .wardZoomBar { flex: none; padding-right: 48px; }
html.rd body .wardZoom .wardZoomClose { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 2; background: var(--rd-panel); }
html.rd body .wardZoom :is(.playerViewBody, .wardZoomView) { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
html.rd body .wardZoom .wardZoomView { flex: 1; aspect-ratio: auto; }
html.rd body .authModalOverlay .authModal > :is(h2, .boardDialogTitle, .seriesModalHead) { margin-right: 48px; }
html.rd body .wardZoom--closing { visibility: hidden; pointer-events: none; }

/* Saved-account actions wrap inside their card, including long pixel labels. */
html.rd body #linkedAccountsList .linkedAccountRow { min-width: 0; max-width: 100%; align-items: stretch; }
html.rd body #linkedAccountsList .linkedAccountRow > b { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
html.rd body #linkedAccountsList .liveModeToggleRow { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; min-width: 0; max-width: 100%; justify-content: flex-start; }
html.rd body #linkedAccountsList .liveModeToggleRow > button { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; min-height: calc(40 * var(--rd-px)); }
@media (max-width: 700px) {
  html.rd body #linkedAccountsList .liveModeToggleRow > button { flex: 1 1 130px; min-height: calc(44 * var(--rd-px)); }
}


/* Compact match card on phones. */
@media (max-width: 700px) {
  html.rd body #result.result--pro .liveTrend { margin-top: 8px; }
  html.rd body #result.result--pro .resultBoard { margin: 6px 0 12px; }
  html.rd body #result.result--pro .resultBoard > h3 { margin: 8px 0 5px; }
  html.rd body #result.result--pro .goldGraph { padding: 6px 7px 4px; margin-bottom: 6px; }
  html.rd body #result.result--pro .goldGraph svg { height: clamp(58px, 18vw, 100px); }
  html.rd body #result.result--pro .goldGraphHead { gap: 2px 6px; font-size: .67rem; margin-bottom: 3px; }
  html.rd body #result.result--pro .goldGraphHead span { font-size: inherit; }
  html.rd body #result.result--pro .goldGraphAxis { gap: 3px; flex-wrap: nowrap; font-size: .58rem; margin-top: 2px; }
  html.rd body #result.result--pro .goldGraphAxis span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.rd body #result.result--pro .goldGraphAxis span:nth-child(2) { flex-shrink: 0; }
  html.rd body #result.result--pro .trendTip { min-height: 0; margin-top: 2px; font-size: .67rem; }
  html.rd body #result.result--pro .trendTip:empty { display: none; }

  html.rd body #result.result--pro .boardTeams { gap: 6px; }
  html.rd body #result.result--pro .boardTeamHead { gap: 5px; padding: 4px 6px; flex-wrap: wrap; }
  html.rd body #result.result--pro .boardTeamName { font-size: .92rem; }
  html.rd body #result.result--pro .boardTeamMeta { gap: 4px; font-size: .61rem; }
  html.rd body #result.result--pro .boardWin { padding: 1px 3px; font-size: .56rem; }
  html.rd body #result.result--pro .boardTeams--live :is(.boardCols, .boardRow) {
    grid-template-columns: minmax(0, 1fr) 37px minmax(79px, 1.04fr) 48px;
    gap: 4px;
    padding: 3px 5px;
    align-items: center;
  }
  html.rd body #result.result--pro .boardCols { font-size: .57rem; letter-spacing: 0; }
  html.rd body #result.result--pro .boardTeams--live .boardCols span:nth-child(3) { display: block; }
  html.rd body #result.result--pro .boardTeams--live .boardRow > .boardName { padding-left: 24px; line-height: 1.14; }
  html.rd body #result.result--pro .boardTeams--live .boardRow > .boardHero {
    left: 5px; top: 50%; bottom: auto; transform: translateY(-50%); width: 21px; height: 21px;
  }
  html.rd body #result.result--pro .boardTeams--live .boardHero img { width: 19px; height: 19px; }
  html.rd body #result.result--pro .boardName b { font-size: .72rem; }
  html.rd body #result.result--pro .boardName small { font-size: .58rem; white-space: nowrap; }
  html.rd body #result.result--pro :is(.boardKda, .boardScore) { padding-top: 0; font-size: .61rem; white-space: nowrap; }
  html.rd body #result.result--pro .boardTeams--live .boardRow > .boardItemsWrap { grid-column: 3; grid-row: 1; padding-left: 0; }
  html.rd body #result.result--pro .boardTeams--live .boardRow > .boardScore { grid-column: 4; }
  html.rd body #result.result--pro .boardItems { gap: 2px; }
  html.rd body #result.result--pro :is(.boardItems, .boardBearItems) img { width: min(25px, calc((100% - 10px) / 6)); height: auto; aspect-ratio: 34 / 25; }
  html.rd body #result.result--pro .boardBearItems { gap: 2px; flex-wrap: wrap; margin-top: 2px; }
  html.rd body #result.result--pro .boardBearItems small { flex-basis: 100%; }
}


html.rd body #analyzeForm .teamSwitcherBtn--default {
  font-family: var(--rd-pixel);
  font-size: calc(16 * var(--rd-px));
  font-weight: 400;
  letter-spacing: 0;
}
html.rd body #livePanel .liveAccuracy { margin: 4px 0 0; }
html.rd body #livePanel .liveAccuracy summary {
  color: var(--rd-text);
  cursor: pointer;
  padding: 5px 0;
  font: .75rem var(--rd-mono);
}
html.rd body #liveTelegramNote:empty { display: none; }
html.rd body #liveList { margin-top: 5px; }
html.rd body #liveList .historyRow { gap: 2px; margin-bottom: 4px; padding: 6px 9px; }
html.rd body #liveList .historyMeta { line-height: 1.3; }
html.rd body #liveCalibrationTable .calibrationTable { margin: 2px 0 6px; }

@media (max-width: 700px) {
  html.rd body #analyzeForm .teamSwitcher { gap: 4px; margin-bottom: 5px; }
  html.rd body #analyzeForm .teamSwitcherBtn { padding: 4px 6px; min-height: 34px; }
  html.rd body #analyzeForm .tournamentPicker { margin-bottom: 5px; }
  html.rd body #analyzeForm .team { padding: 6px; }
  html.rd body #analyzeForm .teamHead { margin-bottom: 5px; }
  html.rd body #analyzeForm .slot {
    grid-template-columns: minmax(88px, .7fr) minmax(0, 1.3fr);
    gap: 4px;
    padding: 4px;
    margin: 0 0 5px;
    border: 1px solid var(--rd-line);
  }
  html.rd body #analyzeForm .slot > .ac-wrap:last-child { grid-column: 1 / -1; }
  html.rd body #analyzeForm .player-preview:empty { display: none; }
  html.rd body #analyzeForm :is(.slot input, .slot select, .team-name-input, .tournament-input) {
    height: 34px;
    padding: 3px 6px;
    font-size: .75rem;
    min-width: 0;
  }
  html.rd body #analyzeForm .slot select { padding-right: 16px; }
  html.rd body #livePanel .liveToggleRow { gap: 3px 10px; }
  html.rd body #livePanel .liveLeagueLabel { flex-basis: 100%; }
  html.rd body #livePanel .liveLeagueLabel select { min-height: 30px; }
  html.rd body #livePanel .liveToggleLabel { gap: 5px; min-height: 28px; font-size: .77rem; }
  html.rd body #livePanel .liveToggleLabel input { width: 16px; height: 16px; }
  html.rd body #liveTelegramNote { margin: 3px 0; font-size: .7rem; line-height: 1.25; }
  html.rd body #liveList .historyRow { padding: 5px 7px; font-size: .76rem; }
  html.rd body #liveList .historyMeta { font-size: .68rem; }
  html.rd body #liveList .liveTierBadge { padding: 1px 4px; font-size: .56rem; white-space: nowrap; }
  html.rd body #liveCalibrationTable .calibrationTable { font-size: .69rem; }
  html.rd body #liveCalibrationTable .calibrationTable :is(th, td) { padding: 3px 4px; }
}

html.rd body #livePanel .liveLeagueLabel { min-width: 0; max-width: 100%; }
html.rd body #livePanel .liveLeagueLabel select {
  field-sizing: content;
  width: auto;
  max-width: 100%;
}
html.rd body .topNavModeToggle .statsModeBtn {
  font-family: var(--rd-pixel);
  font-size: calc(15 * var(--rd-px)) !important;
  font-weight: 400;
  letter-spacing: 0;
}
html.rd body .turboRating { container-type: inline-size; }
@container (min-width: 760px) {
  html.rd body .turboRatingRow { grid-template-columns: 26px minmax(132px, 1fr) minmax(0, 3.2fr) 44px; gap: 8px; }
  html.rd body .turboRatingName { overflow-wrap: anywhere; }
  html.rd body .turboRatingMembers { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  html.rd body .turboRatingMember { gap: 3px; min-width: 0; }
  html.rd body .turboRatingHero { width: 21px; height: 21px; }
  html.rd body .turboRatingItems { flex-wrap: nowrap; gap: 2px; min-width: 0; }
  html.rd body .turboRatingItems img { width: 18px; min-width: 0; height: 14px; }
}
@media (min-width: 701px) {
  html.rd body .rpStatsGrid { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  html.rd body .rpStatsGrid span { white-space: nowrap; }
}
@media (max-width: 700px) {
  html.rd body .turboRatingMembers { padding-left: 8px; }
}

html.rd body[data-game="dota"] .topNavTitle { gap: 2px; }
html.rd body[data-game="dota"] .topNavTitle :is(.siteTitleIcon, .siteTitleHighlight) { margin-inline: 0; }
html.rd body :is(.topNavModeToggle, #statsModeToggle, #draftModeToggle, #mistakeModeToggle) .statsModeBtn--active,
html.rd body :is(.topNavModeToggle, #statsModeToggle, #draftModeToggle, #mistakeModeToggle) .statsModeBtn--active:hover:not(:disabled) {
  background: var(--rd-signal);
  border-color: var(--rd-signal);
  color: var(--rd-on-signal);
}

html.rd body #tier1Table .tier1Wr,
html.rd body #mistakeSavedList .historyRow > b {
  font-family: var(--rd-pixel);
  font-weight: 400;
}
html.rd body #mistakeSavedList .historyRow > b {
  font-size: calc(18 * var(--rd-px));
  line-height: 1.25;
}
html.rd body #statsDetail .draftAccuracy { margin: 4px 0 8px; }
html.rd body #statsDetail .draftAccuracy summary {
  color: var(--rd-text);
  cursor: pointer;
  padding: 5px 0;
  font: .75rem var(--rd-mono);
}

html.rd body #profileSection .profileHeader { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
html.rd body #profileSection .profileHeader h2 { min-width: 0; overflow-wrap: anywhere; }
html.rd body #profileAdminBtn,
html.rd body #profileAdminBtn:hover:not(:disabled) {
  color: var(--rd-text); background: transparent; border: 0; transform: none;
  box-shadow: none; white-space: nowrap; font: calc(16 * var(--rd-px)) var(--rd-pixel);
}
html.rd body #profileAdminBtn:hover:not(:disabled) { color: var(--rd-signal); }
html.rd body .profileConnections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; align-items: start; }
html.rd body .profileConnection { min-width: 0; background: var(--rd-row); border: 1px solid var(--rd-row-line); }
html.rd body .profileConnectionToggle,
html.rd body .profileConnectionToggle:hover:not(:disabled) {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  margin: 0; border: 0; transform: none; background: transparent; box-shadow: none;
  padding: 8px 10px; color: var(--rd-text); font: calc(18 * var(--rd-px)) var(--rd-pixel);
}
html.rd body .profileConnectionToggle:hover:not(:disabled) { color: var(--rd-signal); }
html.rd body .profileConnectionStatus { color: var(--rd-muted); font-family: var(--rd-mono); }
html.rd body .profileConnectionStatus[data-connected="true"] { color: var(--rd-signal); }
html.rd body .profileConnection .foldAnim > div > * { margin-inline: 8px; }
html.rd body .adminTile { background: var(--rd-row); border: 1px solid var(--rd-row-line); padding: 0 12px 0; }
html.rd body .adminTile summary { padding: 10px 0; cursor: pointer; font: calc(18 * var(--rd-px)) var(--rd-pixel); }
html.rd body .adminTile[open] { padding-bottom: 12px; }
html.rd body .topNavRight #topNavUserBtn:is(.rdNavActive, .topNavBtn--active) { color: var(--rd-on-signal); }
@media (hover: hover) and (pointer: fine) {
  html.rd body .homeSeriesCard:hover { border-color: var(--rd-signal); box-shadow: 0 0 14px color-mix(in srgb, var(--rd-signal) 34%, transparent); transform: none; }
  html.rd body .homeSeriesCard .seriesMap:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--rd-purple); }
}
html.rd body .homeSeriesCard:focus-visible { outline: 2px solid var(--rd-signal); }
@media (max-width: 700px) {
  html.rd body .profileConnections { gap: 5px; }
  html.rd body .profileConnection { display: contents; }
  html.rd body .profileConnection .profileConnectionToggle { grid-row: 1; background: var(--rd-row); border: 1px solid var(--rd-row-line); }
  html.rd body .profileConnection .foldAnim { grid-column: 1 / -1; background: var(--rd-row); }
  html.rd body .homeSeriesCard .seriesMaps { grid-template-columns: minmax(0, 1fr); }
}

html.rd body .toast.toast--flat { box-shadow: none; }
html.rd body #analyzeForm .team:focus-within { border-color: var(--rd-line); }
html.rd body #patchOverview > .foldHead:has(+ .foldAnim--closed) { margin-bottom: 4px; }
html.rd body #patchOverview > .foldAnim--closed + h3 { margin-top: 6px; }
@media (max-width: 700px) {
  html.rd body #patchSection .patchHeader { gap: 6px 9px; }
  html.rd body #patchSection .patchMobileTitle { margin: 0; white-space: nowrap; }
  html.rd body #patchSection .patchPickerBtn,
  html.rd body #patchSection .patchPickerBtn:hover:not(:disabled) { padding: 6px 10px; min-height: 0; }
  html.rd body #tier1Controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  html.rd body #tier1Controls .draftControlLabel { min-width: 0; margin: 0; }
  html.rd body #tier1Controls :is(select, #tier1PairsBtn) {
    width: 100%; min-width: 0; min-height: 32px; margin: 0; padding: 3px 5px; font-size: .73rem;
  }
  html.rd body #tier1PairsBtn { grid-column: 1 / -1; }
  html.rd body[data-game="dota"] #drawer { border-left-color: #64646b; }
  html.rd body[data-game="dota"] #drawer .authBar .authUserName { background: var(--rd-row); border-color: #64646b; }
  html.rd body[data-game="dota"] #drawer .authBar .drawerMenuBtn:not(#toggleAuthBtn) { box-shadow: inset 4px 0 0 #64646b; }
}
@media (max-width: 480px) {
  html.rd body #analyzeForm .slot { grid-template-columns: 56px minmax(0, 1fr); }
}