/* gameWE template "modern-red" (Modern red), one of the "modern" family:
   dark, flat and narrow. Header with big accent-coloured links, a bar
   for the ranking's sections, one centred content column and rounded cards
   with a title strip above each box. Unlike the classic templates it also
   changes the layout: the rules after the variables are scoped to
   html[data-skin] like the variables, so they only apply while this template
   is loaded.

   Generated by scripts/modern-templates.mjs from
   scripts/modern-templates/layout.css; edit those and run
   `npm run templates` instead of changing this file. A copy of this folder
   under another name (see README.md) can be edited freely. */
html[data-skin] {
  --page: #121213;
  --page-pattern: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.045), transparent 60%), radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.7), transparent 60%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 4px);
  --surface: #1b1b1c;
  --surface-2: #262628;
  --panel: #18181a;
  --row-group: #29292b;
  --border: #2c2c2f;
  --text: #e4e4e6;
  --soft: #c9c9cc;
  --th-bg: #1b1b1c;
  --muted: #8e8e93;
  --good: #4cc38a;
  --bad: #ff5c5c;
  --line-bg: #1b1b1c;
  --line-text: #e4e4e6;
  --grid: #2a2a2d;
  --grid-2: #3a3a3e;
  --bar-bg: #2a2a2d;
  --bar-border: #3a3a3e;
  --band: #1d1d1f;
  --band-odd: #222225;
  --input-bg: #111112;
  --input-text: #e4e4e6;
  --input-border: #3a3a3e;
  --header-bg: #121213;
  --header-border: #262628;
  --logo-text: #ffffff;
  --error-bg: #3a1414;
  --error-text: #ffd6d6;
  --th-text: #ff4d4f;
  --accent: #ff4d4f;
  --accent-text: #ff9a9c;
  --series-2: #4a90e2;
  --tab-bg: #ff4d4f;
  --tab-hover: #ff6b6d;
  --tab-border: #ff4d4f;
  --tab-text: #111111;
  --tab-shadow: none;
  --bullet: none;
  --sec-icon: none;
  --title-shadow: none;
  color-scheme: dark;

  /* Own variables of the modern templates (layout) */
  --m-width: 940px;
  --m-gutter: 16px;
  --m-radius: 5px;
  --m-font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --m-on-accent: #111111;
  --m-head: #232325;
  --m-bar: #09090a;
  --m-bar-border: #1c1c1e;
  --m-bar-shadow: #222225;
  --m-header-shadow: rgba(0, 0, 0, 0.6);
  --m-zebra: #202022;
  --m-hover: #2a2a2d;
  --m-line: #333336;
  --m-outline: #3a3a3e;
  --m-strong: #ffffff;
  --m-foot-logo: #5a5a5f;
  --m-foot-text: #77777c;
  --m-foot-link: #9a9a9f;
  --m-icon: #2c2c2f;
  --m-error-border: #6b2222;
  --m-team-a: #7ab8ff;
  --m-team-b: #ff8080;
  --m-srv-full: #ff6b6b;
  --m-srv-nempty: #5aa9ff;
  --m-pbar-good: #2f9a64;
  --m-pbar-low: #b58a00;
  --m-ct: #2f6fc0;
  --m-danger: #b83232;
  --m-avatar: radial-gradient(circle at 35% 30%, #333333, #141414);
}

/* ------------------------------------------------------------ page frame */

html[data-skin] body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--page);
  background-image: var(--page-pattern);
  background-attachment: fixed;
  font: 13px/1.45 var(--m-font);
}
html[data-skin] input, html[data-skin] select, html[data-skin] textarea, html[data-skin] button,
html[data-skin] .leaflet-tooltip {
  font-family: var(--m-font);
  font-size: 12px;
}
html[data-skin] a { color: var(--text); text-decoration: none; }
html[data-skin] a:hover { color: var(--accent-text); text-decoration: none; }
html[data-skin] h1 { font-size: 20px; letter-spacing: 0.01em; }
html[data-skin] .small { font-size: 11px; }

/* Header: logo left, big uppercase gold links. */
html[data-skin] .header {
  align-items: center;
  min-height: 60px;
  padding: 0 max(var(--m-gutter), calc((100% - var(--m-width)) / 2 + var(--m-gutter)));
  border: 0;
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
  box-shadow: 0 1px 0 var(--m-header-shadow);
  overflow: visible;
}
html[data-skin] .logo-word { font: 800 24px/1 var(--m-font); letter-spacing: 0; text-transform: none; }
html[data-skin] .header .logo { flex: none; margin-right: 18px; }
/* The links take the rest of the row; with many own links they wrap into
   right-aligned rows of the same height instead of one link alone below. */
html[data-skin] .tabs-top { flex: 1 1 auto; min-width: 0; gap: 0 2px; padding: 6px 0; align-items: center; }
html[data-skin] .tabs-top a {
  padding: 7px 6px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--accent);
  font: 700 12px/1 var(--m-font);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
}
html[data-skin] .tabs-top a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); }

/* Second bar: breadcrumb (game name) on the left, share and languages
   together on the right; when the bar gets narrow, the breadcrumb keeps its
   row and the two move below it, still on the right. */
html[data-skin] .nav-bar {
  align-items: center;
  gap: 6px 14px;
  padding: 9px max(var(--m-gutter), calc((100% - var(--m-width)) / 2 + var(--m-gutter)));
  background: var(--m-bar);
  border-bottom: 1px solid var(--m-bar-border);
  color: var(--muted);
}
html[data-skin] .crumbs { flex: 1 1 320px; min-width: 0; font-weight: normal; color: var(--muted); }
html[data-skin] .nav-bar .share-nav { margin-left: auto; }
html[data-skin] .nav-bar .langs { flex-wrap: nowrap; gap: 4px; }
html[data-skin] .crumbs a { color: var(--muted); }
html[data-skin] .crumbs a:hover { color: var(--accent-text); }
html[data-skin] .crumbs strong, html[data-skin] .crumbs span:nth-child(2) a { color: var(--accent); font-weight: 700; }
html[data-skin] .share-btn { padding: 3px 10px; border: 1px solid var(--accent); border-radius: 3px; background: none; color: var(--accent); }
html[data-skin] .share-btn:hover { background: var(--accent); color: var(--m-on-accent); filter: none; }

html[data-skin] .cust-logo { width: auto; max-width: var(--m-width); padding: 20px var(--m-gutter) 0; }

/* One narrow column in the middle. */
html[data-skin] .page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--m-width);
  margin: 0 auto;
  padding: 20px var(--m-gutter) 28px;
}
html[data-skin] .page > p, html[data-skin] .page > .notice, html[data-skin] .page > .lead { width: auto; margin: 0 0 14px; }

/* Footer: dark bar, muted links, the credit line on the right. */
html[data-skin] .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 18px max(var(--m-gutter), calc((100% - var(--m-width)) / 2 + var(--m-gutter)));
  margin-top: 8px;
  background: var(--m-bar);
  border-top: 1px solid var(--m-bar-border);
  color: var(--muted);
  text-align: right;
}
html[data-skin] .footer::before {
  content: "game" "WE";
  font: 800 18px/1 var(--m-font);
  color: var(--m-foot-logo);
}
html[data-skin] .footer .small { font-size: 11px; color: var(--m-foot-text); }
html[data-skin] .footer a { color: var(--m-foot-link); }
html[data-skin] .footer a:hover { color: var(--accent); }

/* ------------------------------------------------------------ sub-navigation */

/* The "Sections" block of a ranking becomes a full-width dark bar right under
   the header bars: the background reaches the window edges without making the
   page wider (shadow + clip-path), the heading is only read out. */
html[data-skin] .page > .block:has(> .sections-box) {
  position: relative;
  margin: -20px 0 22px;
  background: var(--m-bar);
  box-shadow: 0 0 0 100vmax var(--m-bar), 0 1px 0 100vmax var(--m-bar-shadow);
  clip-path: inset(0 -100vmax -1px);
}
html[data-skin] .page > .block:has(> .sections-box) > h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-skin] .container.sections-box { padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
html[data-skin] ul.sections { gap: 0 4px; }
html[data-skin] ul.sections a {
  gap: 0;
  padding: 10px 8px 9px;
  border-bottom: 2px solid transparent;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}
html[data-skin] ul.sections a:hover { color: var(--accent-text); border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent); }
html[data-skin] ul.sections a.active { color: var(--m-strong); border-bottom-color: var(--accent); }
html[data-skin] .sec-icon { display: none; }

/* ------------------------------------------------------------ cards */

/* Every block and section: a title strip on top, a rounded card below. */
html[data-skin] .block, html[data-skin] .section { width: 100%; margin: 0 0 22px; }
html[data-skin] .block > h3, html[data-skin] .section-head {
  margin: 0 0 4px;
  padding: 9px 12px;
  background: var(--m-head);
  border: 1px solid var(--border);
  border-radius: var(--m-radius);
  color: var(--m-strong);
  font: 700 13px/1.3 var(--m-font);
  letter-spacing: 0.01em;
}
html[data-skin] .block > h3::before, html[data-skin] .block > h3::after,
html[data-skin] .section-head h2::before, html[data-skin] .section-head h2::after { content: none; }
html[data-skin] .section-head { align-items: center; }
html[data-skin] .section-head h2 { padding: 0; margin: 0; font: inherit; color: inherit; }
html[data-skin] .section-aside { padding: 0; font-weight: normal; }

/* The card body. */
html[data-skin] .container,
html[data-skin] .section > :not(.section-head):not(.footnote):not(.back-to):not(.history-back):not(.player-links):not(.subtabs):not(.pager) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--m-radius);
}
html[data-skin] .container { padding: 0; }
html[data-skin] .section > :not(.section-head) + :not(.pager):not(.footnote) { margin-top: 6px; }
html[data-skin] .box,
html[data-skin] .section > p, html[data-skin] .section > .chart, html[data-skin] .section > .lead,
html[data-skin] .section > .legend, html[data-skin] .notice {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--m-radius);
}
html[data-skin] .container > .box, html[data-skin] .container > .notice { border: 0; }
html[data-skin] .section > .legend { border-top: 1px solid var(--border); }
html[data-skin] .notice.error { border-color: var(--m-error-border); }
html[data-skin] .summary { padding: 10px 2px 0; color: var(--muted); }
html[data-skin] .lead { color: var(--muted); }

html[data-skin] .grid-2, html[data-skin] .awards-split { width: 100%; gap: 0 16px; }
html[data-skin] .cont-2 { gap: 14px 16px; }

/* Sub-tabs, history links, time ranges: small outlined tabs. */
html[data-skin] .subtab-bar { margin-top: 0; padding: 8px 10px; border-radius: var(--m-radius); }
html[data-skin] .subtabs { flex-wrap: wrap; gap: 6px; }
html[data-skin] .subtabs a, html[data-skin] .player-links a {
  padding: 4px 11px;
  border: 1px solid var(--m-outline);
  border-radius: 3px;
  background: transparent;
  color: var(--soft);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
html[data-skin] .subtabs a:hover, html[data-skin] .player-links a:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
html[data-skin] .subtabs a.active, html[data-skin] .player-links a.active,
html[data-skin] .subtab-bar .subtabs a.active, html[data-skin] .ribbon-classes a.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--m-on-accent);
  text-decoration: none;
}
html[data-skin] .player-links { gap: 6px; margin: 0 0 12px; }
html[data-skin] .back-to, html[data-skin] .history-back { color: var(--muted); }

/* ------------------------------------------------------------ tables */

html[data-skin] th, html[data-skin] td { border: 0; padding: 6px 8px; }
/* The player profile stays as compact as in the classic skins. */
html[data-skin] table.stats.profile th, html[data-skin] table.stats.profile td { padding: 2px 4px; }
/* Rows of about 22.1px here: the avatar is just taller than seven of them. */
html[data-skin] table.stats.profile { --avatar-size: 140px; }
html[data-skin] table.stats.profile td.avatar-cell { padding: var(--avatar-gap); }
html[data-skin] th {
  background: var(--th-bg);
  color: var(--th-text);
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--m-line);
}
html[data-skin] th a, html[data-skin] th button.sort { color: var(--th-text); }
html[data-skin] th a.th-link, html[data-skin] th a.sort.active, html[data-skin] th button.sort.active { text-decoration: none; color: var(--m-strong); }
html[data-skin] td { background: var(--surface); font-size: 12.5px; }
html[data-skin] tbody tr:nth-child(even) > td { background: var(--m-zebra); }
html[data-skin] tbody tr:hover > td { background: var(--m-hover); }
html[data-skin] tr.group td { background: var(--row-group); color: var(--m-strong); }
html[data-skin] td.rank { color: var(--muted); }
html[data-skin] table.stats td.stats-key { color: var(--accent); font-weight: 600; }
html[data-skin] .section > table, html[data-skin] .section > .table-wrap, html[data-skin] .container { overflow: auto; }
html[data-skin] .ranking-total td { border-top: 1px solid var(--m-line); }

/* The white rows of the start page and server list become dark rows. */
html[data-skin] tr.ranking-line td, html[data-skin] tr.server-line td { background: var(--surface); color: var(--text); }
html[data-skin] tr.ranking-line:nth-child(even) td, html[data-skin] tr.server-line:nth-child(even) td { background: var(--m-zebra); }
html[data-skin] tr.ranking-line:hover td, html[data-skin] tr.server-line:hover td { background: var(--m-hover); }
html[data-skin] tr.ranking-line a, html[data-skin] tr.server-line a { color: var(--text); }
html[data-skin] a.rnk, html[data-skin] a.srv { color: var(--accent) !important; }
html[data-skin] a.rnk:hover, html[data-skin] a.srv:hover { color: var(--accent-text) !important; text-decoration: none; }
html[data-skin] tr.ranking-line td:first-child, html[data-skin] tr.server-line td:first-child { padding-left: 9px; }
/* Long server names stay on one line and end in "…" (the full name is the
   link's title). max-width: 0 lets the name column take only the room the
   other columns leave; the top player is cut the same way. */
html[data-skin] tr.server-line > td:first-child,
html[data-skin] .voice-box td:first-child {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Inside, the name and the phone's second line (flag and address) are cut
   the same way, after the game icon. */
html[data-skin] tr.server-line a.srv { display: block; }
html[data-skin] tr.server-line a.srv,
html[data-skin] tr.server-line .srv-where { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Long ranking names wrap onto up to two lines (anywhere, also inside long
   words); only beyond that they are cut, the full name stays the link's
   title. The Players/Clans links beside them keep one line. */
html[data-skin] table.rankings td.no-rb { max-width: 0; width: 50%; white-space: normal; }
html[data-skin] table.rankings a.rnk {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* The game icon floats before the name, which is a box of its own (the
   two-line cut above): both lines start after the icon. */
html[data-skin] table.rankings td.no-rb .game-icon { float: left; margin: 2px 6px 0 0; }
/* The start page's 24 px icon sits in a flex row of its own (.rnk-cell):
   no float and no margin beside the gap, so names line up with rankings
   without an icon. */
html[data-skin] table.rankings td.no-rb .rnk-cell .game-icon { float: none; margin: 0; }
html[data-skin] table.rankings td.no-lb { white-space: nowrap; }
html[data-skin] .voice-box td:first-child { width: 40%; }
html[data-skin] table.rankings td:nth-child(4) {
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html[data-skin] .icon { width: 22px; height: 22px; line-height: 22px; background: var(--m-icon); box-shadow: inset 0 0 0 1px var(--m-outline); }
html[data-skin] .srv-full { color: var(--m-srv-full); }
html[data-skin] .srv-nempty { color: var(--m-srv-nempty); }
html[data-skin] .srv-empty { color: var(--muted); }

/* Live players of a server: team colours on dark rows. */
html[data-skin] table.player-livestats { border: 0; }
html[data-skin] table.player-livestats th { font-size: 11px; padding: 6px; }
html[data-skin] tr.team-a td { color: var(--m-team-a); background: rgba(58, 130, 230, 0.12); }
html[data-skin] tr.team-b td { color: var(--m-team-b); background: rgba(230, 70, 70, 0.12); }
html[data-skin] tr.team-x td { color: var(--soft); background: var(--surface); }
html[data-skin] tbody tr.team-a:hover td { background: rgba(58, 130, 230, 0.22); }
html[data-skin] tbody tr.team-b:hover td { background: rgba(230, 70, 70, 0.22); }
html[data-skin] tbody tr.team-x:hover td { background: var(--m-hover); }

/* Bars and badges: flat. */
html[data-skin] .bar, html[data-skin] .pbar, html[data-skin] .winbar { border-color: transparent; border-radius: 2px; }
html[data-skin] .bar > span { background: var(--accent); }
html[data-skin] .bar.green > span { background: var(--good); }
html[data-skin] .pbar.good .pbar-fill { background: var(--m-pbar-good); }
html[data-skin] .pbar.low .pbar-fill { background: var(--m-pbar-low); }
html[data-skin] .pbar.share .pbar-fill { background: var(--m-ct); }
html[data-skin] .winbar-ct { background: var(--m-ct); }
html[data-skin] .winbar-t { background: var(--m-danger); }
html[data-skin] .pbar-text, html[data-skin] .winbar { font-family: var(--m-font); }

/* Pager: under the table, inside the card's look. */
html[data-skin] .pager {
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--m-radius);
}
html[data-skin] .pager-arrows a, html[data-skin] .pager-arrows span { border-color: var(--m-outline); background: transparent; }
html[data-skin] .pager-arrows a:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------ forms */

html[data-skin] .search input, html[data-skin] .search select,
html[data-skin] .hb-picker select, html[data-skin] .sig-codes-bar select, html[data-skin] .pager-page {
  padding: 5px 8px;
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: 3px;
}
html[data-skin] .search input:focus {
  outline: none;
  border-color: var(--accent);
}
html[data-skin] .search { gap: 0; }
html[data-skin] .search input { border-radius: 3px 0 0 3px; }
html[data-skin] .search select { border-radius: 0; border-left: 0; }
html[data-skin] .search button, html[data-skin] .button, html[data-skin] .sig-codes-bar button {
  padding: 5px 12px;
  background: var(--accent);
  color: var(--m-on-accent);
  border: 1px solid var(--accent);
  border-radius: 0 3px 3px 0;
  font-weight: 700;
}
html[data-skin] .button, html[data-skin] .sig-codes-bar button { border-radius: 3px; }
html[data-skin] .sig-formats button { padding: 5px 12px; font: 600 12px/1.2 var(--m-font); background: var(--surface-2); color: var(--text); border-color: var(--border); }
html[data-skin] .sig-formats button:first-child { border-radius: var(--m-radius) 0 0 var(--m-radius); }
html[data-skin] .sig-formats button:last-child { border-radius: 0 var(--m-radius) var(--m-radius) 0; }
html[data-skin] .sig-formats button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: none; }
html[data-skin] .search button:hover, html[data-skin] .button:hover { background: var(--tab-hover); }
html[data-skin] .button.danger { background: var(--m-danger); border-color: var(--m-danger); color: #ffffff; }

/* ------------------------------------------------------------ charts */

/* The chart sits on the card; no frame of its own. */
html[data-skin] .chart svg { border: 0; border-radius: 3px; }
html[data-skin] .chart .line { stroke-width: 1.5; }
html[data-skin] .chart .area { stroke: none; }
html[data-skin] .chart .area.s1 { fill: color-mix(in srgb, var(--chart-series-1) 24%, transparent); }
html[data-skin] .chart .area.s2 { fill: color-mix(in srgb, var(--chart-series-2) 16%, transparent); }
html[data-skin] .chart .area.s3 { fill: color-mix(in srgb, var(--chart-series-3) 14%, transparent); }
html[data-skin] .chart .area.s4 { fill: color-mix(in srgb, var(--chart-series-4) 14%, transparent); }
html[data-skin] .chart .area.s5, html[data-skin] .chart .area.s6,
html[data-skin] .chart .area.s7, html[data-skin] .chart .area.s8 { fill: none; }
html[data-skin] .load-chart .line-players { stroke-width: 1.5; }
/* Legend top left, before the title's summary. */
html[data-skin] .chart-head { justify-content: flex-start; }
html[data-skin] .chart-head .legend { order: -1; margin-left: 0; margin-right: auto; font-size: 11px; }
html[data-skin] .chart-title { font-size: 12px; }
html[data-skin] .chart-tip { border-radius: 4px; font-size: 12px; }
html[data-skin] .swatch { border-radius: 2px; }

/* ------------------------------------------------------------ misc pieces */

html[data-skin] .rank-cell, html[data-skin] .ribbon-cell { border-radius: 4px; }
html[data-skin] .rank-cell:hover, html[data-skin] .ribbon-cell:hover { background: var(--m-hover); }
html[data-skin] td.avatar-cell img { border-radius: 4px; }
html[data-skin] .avatar-none { border-radius: 4px; background: var(--m-avatar); }
html[data-skin] .map-image { border-radius: 4px; }
html[data-skin] .help-num { color: var(--m-on-accent); }
html[data-skin] .award-cal td.sel a { color: var(--m-on-accent); }
/* Start page, "General statistics": the cards get the rounded card look. */
html[data-skin] .gs-cards { gap: 10px; }
html[data-skin] .gs-card { padding: 12px 14px 22px; border-radius: var(--m-radius); }
html[data-skin] .gs-label { font: 600 12px/1.3 var(--m-font); }
html[data-skin] .gs-value { margin: 4px 0 2px; color: var(--m-strong); font: 700 24px/1.15 var(--m-font); }
html[data-skin] .gs-sub { color: var(--muted); }

html[data-skin] .player-map { border-color: var(--border); border-radius: var(--m-radius); }
html[data-skin] .heatmap svg { border-radius: 4px; }

/* ------------------------------------------------------------ phones */

@media (max-width: 700px) {
  html[data-skin] .header { min-height: 52px; }
  /* The menu button and its list (globals.css), flat like the tabs. */
  html[data-skin] .header-menu > summary { padding: 8px 4px 8px 10px; border: 0; background: none; color: var(--accent); font: 700 14px/1 var(--m-font); letter-spacing: 0.04em; text-transform: uppercase; text-shadow: none; }
  html[data-skin] .header-menu[open] > summary { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  html[data-skin] .header-menu-list { top: calc(100% + 6px); right: var(--m-gutter); border: 1px solid var(--header-border); border-radius: var(--m-radius); background: var(--surface); }
  html[data-skin] .header-menu-list a { border-top-color: var(--border); color: var(--accent); font: 700 14px/1.2 var(--m-font); letter-spacing: 0.04em; text-transform: uppercase; text-shadow: none; }
  html[data-skin] .header-menu-list a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); }
  html[data-skin] .nav-bar { padding-top: 7px; padding-bottom: 7px; }
  /* Share, language and menu in the header (globals.css): one group of
     outlined buttons in the accent colour. */
  html[data-skin] .header-tools .share-btn,
  html[data-skin] .header-tools .lang-menu > summary,
  html[data-skin] .header-tools .header-menu > summary { height: 34px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--m-radius); background: none; color: var(--accent); font: 700 12px/1 var(--m-font); letter-spacing: 0.02em; text-transform: none; }
  html[data-skin] .header-tools .share-btn:hover,
  html[data-skin] .header-tools .lang-menu[open] > summary,
  html[data-skin] .header-tools .header-menu[open] > summary { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
  /* The language button and its list (globals.css), like the share button. */
  html[data-skin] .lang-menu > summary { padding: 3px 9px; border: 1px solid var(--accent); border-radius: 3px; background: none; color: var(--accent); font: 700 12px/1.4 var(--m-font); text-shadow: none; }
  html[data-skin] .lang-menu[open] > summary { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  html[data-skin] .lang-menu-list { border: 1px solid var(--header-border); border-radius: var(--m-radius); background: var(--surface); }
  html[data-skin] .lang-menu-list a { border-top-color: var(--border); color: var(--text); font: 600 14px/1.2 var(--m-font); text-shadow: none; }
  html[data-skin] .lang-menu-list a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); }
  html[data-skin] .page { padding: 14px 10px 20px; }
  html[data-skin] .page > .block:has(> .sections-box) { margin-top: -14px; margin-bottom: 16px; }
  html[data-skin] ul.sections { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html[data-skin] ul.sections a { padding: 9px 7px 8px; }
  html[data-skin] .block, html[data-skin] .section { margin-bottom: 16px; }
  html[data-skin] .footer { flex-direction: column; text-align: center; }
  /* Values wrap; the labels stay on one line, as wide as their text. */
  html[data-skin] table.stats.profile td:not(.stats-key) { white-space: normal; overflow-wrap: anywhere; }
  @media (max-width: 600px) { html[data-skin] table.stats.profile { --avatar-size: 88px; } }
  html[data-skin] .section > .cont-2 { overflow-x: auto; }
  html[data-skin] .sig-codes-bar { flex-wrap: wrap; }
  html[data-skin] .sig-codes-bar select { min-width: 0; max-width: 100%; }
}

/* Narrow screens: the start page keeps name, Players/Clans links, the
   player count and (from 641px) the top player; the top clan goes. On
   phones (up to 600px) each ranking takes two lines (globals.css): name on
   top, players, top player and the round links below; the stripes move from
   the cells to the row. */
@media (max-width: 900px) {
  html[data-skin] table.rankings tr > :nth-child(5) { display: none; }
  html[data-skin] table.rankings td.no-rb { width: 60%; }
  html[data-skin] table.rankings td:nth-child(4) { max-width: 0; width: 40%; }
}
@media (min-width: 601px) and (max-width: 640px) {
  html[data-skin] table.rankings tr > :nth-child(4) { display: none; }
  html[data-skin] table.rankings td.no-rb { width: 100%; }
}
@media (max-width: 600px) {
  html[data-skin] table.rankings td.no-rb, html[data-skin] table.rankings td:nth-child(4) { width: auto; max-width: none; }
  html[data-skin] table.rankings tr.ranking-line { background: var(--surface); }
  html[data-skin] table.rankings tr.ranking-line:nth-child(even) { background: var(--m-zebra); }
  html[data-skin] table.rankings tr.ranking-line > td, html[data-skin] table.rankings tr.ranking-line:hover > td { background: transparent; }
  html[data-skin] table.rankings tr.ranking-line > td:first-child { padding-left: 8px; }
  html[data-skin] table.rankings tr.ranking-line > td.rnk-clan { display: block; }
}
/* Server lists up to tablet width: the version column goes, so the name,
   address, map and players fit without scrolling. */
@media (max-width: 900px) {
  html[data-skin] table:has(> tbody > tr.server-line) tr > :nth-child(6) { display: none; }
}
/* Phones (address column hidden, flag and address under the name): the name
   and the map wrap instead of being cut, so the address stays whole and the
   player count does not run off the screen. */
@media (max-width: 600px) {
  html[data-skin] tr.server-line > td { white-space: normal; overflow-wrap: anywhere; }
  html[data-skin] tr.server-line > td:first-child { max-width: none; width: 48%; }
  html[data-skin] tr.server-line > td:nth-child(3) { width: 34%; }
  html[data-skin] tr.server-line a.srv { white-space: normal; }
}

/* Server load: players in the first series colour like the other area charts,
   uptime in green, FPS in its own colour. */
html[data-skin] .load-chart .line-players { stroke: var(--chart-series-1); }
html[data-skin] .load-chart .area-players { fill: color-mix(in srgb, var(--chart-series-1) 24%, transparent); }
html[data-skin] .load-chart .load-dot, html[data-skin] .load-chart .load-mark circle { fill: var(--chart-series-1); }
html[data-skin] .load-chart .load-dot.up, html[data-skin] .load-chart .load-mark circle.up { fill: var(--chart-uptime); }
html[data-skin] .load-chart .load-dot.fps, html[data-skin] .load-chart .load-mark circle.fps { fill: var(--chart-fps); }
html[data-skin] .load-chart .swatch.s2 { background: var(--chart-series-1); }

/* Player profile: the summary needs more room than half the narrow column,
   so profile and summary stack. */
html[data-skin] .cont-2:has(> div > table.stats.profile) { grid-template-columns: minmax(0, 1fr); }
html[data-skin] .section > p.footnote { padding: 6px 2px 0; background: none; border: 0; color: var(--muted); }
html[data-skin] .summary-foot > .footnote { color: var(--muted); }

/* ------------------------------------------------------------ player head */

/* The head card, key figures, favourites and tiles of the player page
   (globals.css) in the cards of this layout, with headings like the
   section titles. */
html[data-skin] .p-hero { width: 100%; margin: 0 0 22px; }
html[data-skin] .p-card { border-radius: var(--m-radius); }
html[data-skin] .p-name, html[data-skin] .p-big b, html[data-skin] .p-kpis b { font-family: var(--m-font); color: var(--m-strong); }
html[data-skin] .p-favs h3 { font: 700 13px/1.3 var(--m-font); color: var(--m-strong); }
html[data-skin] .p-jump a, html[data-skin] .p-chip { border-color: var(--m-outline); }
html[data-skin] td.career .rank-tip-btn, html[data-skin] td.ribbon-wall a { border-radius: var(--m-radius); }
/* Section titles: a soft shade from the top. */
html[data-skin] .block > h3, html[data-skin] .section-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-strong) 6%, var(--m-head)), var(--m-head));
}

/* Player banner (forum signature) and server banner, see README.md */
html[data-skin] {
  --banner-bg: linear-gradient(135deg, rgba(255,77,79,0.12) 0%, rgba(0,0,0,0) 45%), linear-gradient(180deg, #1f1f21 0%, #141415 100%);
  --banner-side: linear-gradient(180deg, #19191a 0%, #0d0d0e 100%);
  --banner-side-text: #ffffff;
  --banner-frame: #0d0d0e;
  --banner-stripe: #ff4d4f;
  --banner-text: #e4e4e6;
  --banner-muted: #8e8e93;
  --banner-accent: #ff4d4f;
  --banner-good: #4cc38a;
  --banner-bad: #ff5c5c;
  --banner-border: #2c2c2f;
  --banner-bar-bg: #2a2a2d;
  --banner-bar-border: #3a3a3e;
}

/* chart colours (chart.json) */
html[data-skin] {
  --chart-bg: #1b1b1c;
  --chart-border: #2c2c2f;
  --chart-grid: #29292c;
  --chart-axis: #8e8e93;
  --chart-axis-strong: #c9c9cc;
  --chart-day-line: #3a3a3e;
  --chart-guide: #8e8e93;
  --chart-title: #e4e4e6;
  --chart-legend: #a5a5aa;
  --chart-dot-edge: #1b1b1c;
  --chart-pie-edge: #1b1b1c;
  --chart-bar-hover: rgba(255, 255, 255, 0.06);
  --chart-band: #1d1d1f;
  --chart-band-odd: #222225;
  --chart-uptime: #4cc38a;
  --chart-fps: #e0604f;
  --chart-gain: #4cc38a;
  --chart-loss: #ff5c5c;
  --chart-tip-bg: #232325;
  --chart-tip-text: #e4e4e6;
  --chart-tip-border: #3a3a3e;
  --chart-tip-title: #ff9a9c;
  --chart-spark-total: #4a4a4f;
  --chart-spark-current: #2f6fc0;
  --chart-spark-total-line: #8e8e93;
  --chart-spark-current-line: #5aa9ff;
  --chart-spark-text: #ffffff;
  --chart-spark-frame: var(--band);
  --chart-spark-edge: var(--grid-2);
  --chart-spark-line: var(--soft);
  --chart-radar-total: #5aa9ff;
  --chart-radar-current: #ff4d4f;
  --chart-radar-grid: var(--grid-2);
  --chart-radar-label: var(--soft);
  --chart-heat-bg: #0d1117;
  --chart-heat-edge: #ffffff;
  --chart-heat-kill: #33aaff;
  --chart-heat-death: #e03030;
  --chart-series-1: #ff4d4f;
  --chart-series-2: #4a90e2;
  --chart-series-3: #f0b400;
  --chart-series-4: #4cc38a;
  --chart-series-5: #b388ff;
  --chart-series-6: #4dd0e1;
  --chart-series-7: #c0c0c0;
  --chart-series-8: #9e9e9e;
  --chart-server-1: #4a90e2;
  --chart-server-2: #f0b400;
  --chart-server-3: #4cc38a;
  --chart-server-4: #b388ff;
  --chart-server-5: #4dd0e1;
  --chart-server-6: #c0c0c0;
  --chart-server-7: #9e9e9e;
  --chart-server-8: #8e8e93;
  --chart-pie-1: #ff4d4f;
  --chart-pie-2: #4a90e2;
  --chart-pie-3: #f0b400;
  --chart-pie-4: #4cc38a;
  --chart-pie-5: #b388ff;
  --chart-pie-6: #4dd0e1;
  --chart-pie-7: #c0c0c0;
  --chart-pie-8: #9e9e9e;
  --chart-pie-9: #8e8e93;
}