/* generated by tools/info-page.mjs: fonts, apps/client/src/ui/kour-tokens.css, tools/info-site/info.css */
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/poppins-latin-500-normal.woff2) format('woff2')}
      @font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/poppins-latin-700-normal.woff2) format('woff2')}
      @font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/poppins-latin-800-normal.woff2) format('woff2')}
      @font-face{font-family:'Fjalla One';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/fjalla-one-latin-400-normal.woff2) format('woff2')}
/*
 * Kour design tokens (docs/DESIGN.md): the measured look of the original uGUI panels as CSS
 * custom properties plus a few utility classes, for every UI of the rebuild that is not drawn
 * from an original UI document (DOM panels, full-screen states, standalone tools).
 *
 * Every value is taken from the extracted UI documents (apps/client/public/assets/extracted/ui);
 * the source object of each token is listed in docs/DESIGN.md "Tokens". Lengths of the size
 * tokens are canvas units of the 1920 x 1080 reference canvas (ui/dom-canvas.ts lays DOM panels
 * out in these units); the em-based tokens scale with the text.
 *
 * This file is plain CSS that loads nothing (no imports, no fonts, no images):
 * tools/sync-design-tokens.mjs copies it unchanged for tools that cannot import game code.
 * Change values here only together with docs/DESIGN.md.
 */
:root {
  /* ---- type: TMP "Nexa-Heavy SDF" = Poppins Bold; TMP bold style = ExtraBold */
  --kour-font: 'Poppins', Arial, sans-serif;
  --kour-weight: 700;
  --kour-weight-bold: 800;
  /* TMP face info: lineHeight 43.5 / pointSize 29 */
  --kour-line-height: 1.5;
  /* text sizes by role (canvas units) */
  --kour-size-hero: 50px;
  --kour-size-tab: 40px;
  --kour-size-title: 36px;
  --kour-size-heading: 32px;
  --kour-size-row: 30px;
  --kour-size-button: 28px;
  --kour-size-body: 26px;
  --kour-size-small: 22px;
  --kour-size-label: 16px;
  --kour-size-tiny: 12px;

  /* ---- text effects (TMP material "Nexa-Heavy SDF Material", em of the text's own size) */
  /* underlay: offset (0.521, -0.794) x ScaleRatioC 0.594 x GradientScale 4 / pointSize 29 */
  --kour-text-shadow: 0.0427em 0.0651em 0.0066em rgb(0 0 0 / 0.537);
  /* outline of the HUD material "Nexa-Heavy SDF Material 1" (kill feed, gun game names) */
  --kour-outline-width: 0.0238em;
  --kour-text-outline:
    var(--kour-outline-width) 0 0 #000,
    calc(var(--kour-outline-width) * 0.7071) calc(var(--kour-outline-width) * 0.7071) 0 #000,
    0 var(--kour-outline-width) 0 #000,
    calc(var(--kour-outline-width) * -0.7071) calc(var(--kour-outline-width) * 0.7071) 0 #000,
    calc(var(--kour-outline-width) * -1) 0 0 #000,
    calc(var(--kour-outline-width) * -0.7071) calc(var(--kour-outline-width) * -0.7071) 0 #000,
    0 calc(var(--kour-outline-width) * -1) 0 #000,
    calc(var(--kour-outline-width) * 0.7071) calc(var(--kour-outline-width) * -0.7071) 0 #000;
  /* rebuild (user request 2026-10-04): heavier outlines of HUD texts that stand on the game
     picture, reach beyond the glyph in em of the text size. The same values as
     ui/text-outline.ts TEXT_OUTLINES (tests/text-outline.test.ts compares them). */
  --kour-outline-chat: 0.04em;
  --kour-outline-board: 0.05em;
  --kour-outline-popup: 0.0655em;
  --kour-outline-damage: 0.08em;
  --kour-outline-warning: 0.07em;
  /* the underlay of the chat / board levels: the material's offsets, black 80 % */
  --kour-text-shadow-strong: 0.0427em 0.0651em 0.0066em rgb(0 0 0 / 0.8);
  /* uGUI Shadow effect of icons: (1, -1), black 50 % */
  --kour-icon-shadow: drop-shadow(1px 1px 0 rgb(0 0 0 / 0.5));

  /* ---- surfaces */
  --kour-bg: #111111;
  --kour-surface: #1a1a1a;
  --kour-surface-2: #1d1d1d;
  --kour-surface-3: #222222;
  --kour-card: #2b2b2b;
  --kour-card-2: #333333;
  --kour-field: #3c3c3c;
  --kour-field-light: #525252;
  --kour-inset: rgb(0 0 0 / 0.1);
  --kour-row: rgb(0 0 0 / 0.31);
  --kour-line: #2e2e2e;
  --kour-line-light: #3f3f3f;
  --kour-dialog: #151718;
  --kour-toast: rgb(65 65 65 / 0.97);
  --kour-scrim: rgb(26 26 26 / 0.86);
  --kour-scrim-panel: rgb(7 7 7 / 0.55);
  --kour-scrim-dialog: rgb(0 0 0 / 0.71);
  /* SocialPanel: its own scrim and the header bar of its frame */
  --kour-scrim-social: rgb(0 0 0 / 0.745);
  --kour-surface-bar: #262626;

  /* ---- text colours */
  --kour-text: #ffffff;
  --kour-text-2: #c5c5c5;
  --kour-text-3: #9f9f9f;
  --kour-text-body: #b2b2b2;
  --kour-text-label: #616161;
  --kour-text-disabled: rgb(149 149 149 / 0.32);
  --kour-text-pressed: #000000;

  /* ---- action colours (button fills); "-2" = the colour of the button's glow layer */
  --kour-blue: #2198f1;
  --kour-blue-deep: #195ba9;
  --kour-blue-deep-2: #038abe;
  --kour-green: #3ec326;
  --kour-green-2: #31841b;
  --kour-green-deep: #319f2b;
  --kour-red: #ca473e;
  --kour-red-2: #b4252d;
  --kour-red-close: #b03434;
  --kour-red-deep: #981620;
  --kour-grey: #484848;
  --kour-grey-light: #6a6a6a;
  --kour-grey-light-2: #9a9a9a;
  --kour-orange: #ff9e00;
  --kour-orange-2: #ff7c00;
  --kour-yellow: #ffff00;
  --kour-link: #0000ff;

  /* ---- meaning */
  --kour-kp: #ffd021;
  --kour-kp-earn: #ffe600;
  --kour-level: #ff9700;
  --kour-error: #ff0000;
  --kour-error-icon: #db2626;
  --kour-online: rgb(30 255 0 / 0.78);
  --kour-offline: rgb(137 137 137 / 0.78);
  --kour-ban: #ad2a2a;
  /* rebuild (user request 2026-10-21): the word NUKE of the kill feed's "{name} dropped a NUKE",
     the online stripe's green without its transparency (ui/screens/nuke-feed.ts NUKE_GREEN) */
  --kour-nuke: #1eff00;
  /* ShopPanel.RarityColor: Uncommon, Rare, Epic, Legendary, Immortal */
  --kour-rarity-0: #1ec227;
  --kour-rarity-1: #0070dd;
  --kour-rarity-2: #a12fef;
  --kour-rarity-3: #ffd200;
  --kour-rarity-4: #f51300;
  /* rebuild (user request FB6SKIN): Unobtainable above Immortal - a premium black: black panels
     with a slow dark violet sheen and purple glints, item names purple with a pulsing purple glow
     (ui/rarity-fx.css; RARITIES color / textColor in reference/custom-items.json) */
  --kour-rarity-5: #000000;
  --kour-rarity-5-sheen: #3b2f52;
  --kour-rarity-5-glint: #a35cff;
  --kour-rarity-5-text: #b57bff;
  --kour-rarity-none: #323232;
  /* TeamDesign "first": Terrorists / Counter - Terrorists, and their scoreboard text colours */
  --kour-team-1: #fdc429;
  --kour-team-2: #4299ec;
  --kour-team-1-text: #ffeaa0;
  --kour-team-2-text: #a6d3e9;
  /* RankManager.rankBackgroundColors: first tier of Bronze, Silver, Gold, Champion; Elite */
  --kour-rank-bronze: #412e22;
  --kour-rank-silver: #545e67;
  --kour-rank-gold: #d19a00;
  --kour-rank-champion: #561898;
  --kour-rank-elite: #ee391f;

  /* ---- shape: sliced sprite "Slider15_White_Frame" (18 px border) / pixelsPerUnitMultiplier */
  --kour-radius: 9px;
  --kour-radius-sm: 6px;
  --kour-radius-lg: 18px;
  --kour-radius-dialog: 30px;
  /* "Slider15_White_Handle" (38 px border) at multiplier 3 */
  --kour-radius-pill: 12.7px;
  /* uGUI Outline effect of raised boxes (notification, region button) */
  --kour-outline: 4px;

  /* ---- sizes of controls (canvas units) */
  --kour-field-height: 44px;
  --kour-button-height: 52px;
  --kour-close-width: 54px;
  --kour-close-height: 48px;
  --kour-toggle: 44px;
  --kour-scrollbar: 20px;
  --kour-gap: 5px;
  --kour-pad: 10px;
  --kour-pad-lg: 20px;
  /* SocialPanel frame: the header bar 25 in from the sides, its top 31 below the frame's */
  --kour-panel-inset: 25px;
  --kour-panel-bar-top: 31px;
  --kour-panel-bar-height: 88.64px;

  /* ---- motion */
  /* AnimatedButton tweens and the Animator cross-fades of button states */
  --kour-press: 0.05s;
  /* Selectable ColorTint fadeDuration */
  --kour-fade: 0.1s;
  /* Popup.Show / Popup.Close */
  --kour-popup-in: 0.1s;
  --kour-popup-out: 0.15s;
  /* Popup.startFrom (0, -90) and DOTween OutCirc (approximated as a cubic Bezier) */
  --kour-popup-from: 90px;
  --kour-ease-popup: cubic-bezier(0.075, 0.82, 0.165, 1);
  --kour-hover-scale: 1.02;
  --kour-press-scale: 0.94;

  /* ---- selection frame of "the current entry" (docs/DESIGN.md 3.14, ui/select-frame.ts): a white
     line from the entry's edge inwards, no glow - the outline of the original's chosen colour
     slot (PfpSelectPanel, 5 units) */
  --kour-selected-line: 5px;
  --kour-selected-color: var(--kour-text);
}

/* ---------------------------------------------------------------- utilities */

/* white bold text with the underlay shadow: every text of the original panels */
.kour-text {
  font-family: var(--kour-font);
  font-weight: var(--kour-weight);
  line-height: var(--kour-line-height);
  color: var(--kour-text);
  text-shadow: var(--kour-text-shadow);
}
.kour-text-outline {
  text-shadow: var(--kour-text-outline);
}
/* a chat / kill feed line of a DOM chat: outline of the chat level plus the stronger underlay
   (the look of TEXT_OUTLINES.chat on the canvases' chat slots). The outline is ONE stroke below
   the fill with round joins (ui/unity/text.ts TextStroke, FUTURE-IMPROVMENTS #352), at least one
   device pixel wide (#353: --layer-px of ui/dom-canvas.ts canvasLayer); browsers without text
   strokes draw eight hard shadows. Names painted with a gradient (background-clip: text) take the
   same as a filter: four hard shadows widen the glyphs by the outline, the fifth is the underlay. */
.kour-text-outline-chat {
  --kour-chat-rim: max(var(--kour-outline-chat), var(--layer-px, 0px));
  -webkit-text-stroke: calc(var(--kour-chat-rim) * 2) #000;
  paint-order: stroke fill;
  stroke-linejoin: round;
  text-shadow: var(--kour-text-shadow-strong);
  --u-name-shadow: drop-shadow(var(--kour-chat-rim) 0 0 #000)
    drop-shadow(calc(var(--kour-chat-rim) * -1) 0 0 #000) drop-shadow(0 var(--kour-chat-rim) 0 #000)
    drop-shadow(0 calc(var(--kour-chat-rim) * -1) 0 #000)
    drop-shadow(0.0427em 0.0651em 0.0033em rgb(0 0 0 / 0.8));
}
@supports not (paint-order: stroke fill) {
  .kour-text-outline-chat {
    -webkit-text-stroke: 0;
    text-shadow:
      var(--kour-chat-rim) 0 0 #000,
      calc(var(--kour-chat-rim) * 0.7071) calc(var(--kour-chat-rim) * 0.7071) 0 #000,
      0 var(--kour-chat-rim) 0 #000,
      calc(var(--kour-chat-rim) * -0.7071) calc(var(--kour-chat-rim) * 0.7071) 0 #000,
      calc(var(--kour-chat-rim) * -1) 0 0 #000,
      calc(var(--kour-chat-rim) * -0.7071) calc(var(--kour-chat-rim) * -0.7071) 0 #000,
      0 calc(var(--kour-chat-rim) * -1) 0 #000,
      calc(var(--kour-chat-rim) * 0.7071) calc(var(--kour-chat-rim) * -0.7071) 0 #000,
      var(--kour-text-shadow-strong);
  }
}

/* panel: full-bleed dark page; card: the box of a dialog; field: an input / dropdown row */
.kour-panel {
  background: var(--kour-bg);
  color: var(--kour-text);
}
.kour-card {
  background: var(--kour-card);
  border-radius: var(--kour-radius);
}
.kour-field {
  background: var(--kour-field);
  border-radius: var(--kour-radius);
  min-height: var(--kour-field-height);
}

/* button: flat tinted frame, white bold label; hover 1.02, pressed white with black label */
.kour-btn {
  --kour-btn-color: var(--kour-grey);
  --kour-btn-glow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin: 0;
  border: 0;
  border-radius: var(--kour-radius);
  padding: 0.25em 0.9em;
  background: var(--kour-btn-glow), var(--kour-btn-color);
  color: var(--kour-text);
  font-family: var(--kour-font);
  font-weight: var(--kour-weight);
  text-shadow: var(--kour-text-shadow);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--kour-press) ease-out;
}
.kour-btn:hover:not(:disabled) {
  transform: scale(var(--kour-hover-scale));
}
.kour-btn:active:not(:disabled) {
  transform: scale(var(--kour-press-scale));
  background: #ffffff;
  color: var(--kour-text-pressed);
  filter: none;
}
.kour-btn:disabled {
  filter: brightness(0.78);
  opacity: 0.5;
  cursor: default;
}
.kour-btn:focus-visible {
  outline: 2px solid var(--kour-yellow);
  outline-offset: 2px;
}
.kour-btn--blue {
  --kour-btn-color: var(--kour-blue);
}
.kour-btn--buy {
  --kour-btn-color: var(--kour-blue-deep);
  --kour-btn-glow: linear-gradient(to right, transparent, var(--kour-blue-deep-2));
}
.kour-btn--green {
  --kour-btn-color: var(--kour-green);
  --kour-btn-glow: linear-gradient(to bottom, transparent, var(--kour-green-2));
}
.kour-btn--red {
  --kour-btn-color: var(--kour-red);
  --kour-btn-glow: linear-gradient(to bottom, transparent, var(--kour-red-2));
}
.kour-btn--grey {
  --kour-btn-color: var(--kour-grey);
}
.kour-btn--light {
  --kour-btn-color: var(--kour-grey-light);
  --kour-btn-glow: linear-gradient(to right, transparent, var(--kour-grey-light-2));
}
.kour-btn--orange {
  --kour-btn-color: var(--kour-orange);
  --kour-btn-glow: linear-gradient(to right, transparent, var(--kour-orange-2));
}

/* close button: the red "X" in the top left corner of a panel */
.kour-close {
  --kour-btn-color: var(--kour-red-close);
  width: var(--kour-close-width);
  height: var(--kour-close-height);
  padding: 0;
  font-size: 24px;
  font-weight: var(--kour-weight-bold);
}

/* tab row: dark bar, the open tab lighter, the label white in every state but pressed */
.kour-tabs {
  display: flex;
  gap: var(--kour-gap);
  padding: 3px 4px;
  background: var(--kour-surface-2);
  border-radius: var(--kour-radius);
}
.kour-tab {
  flex: 1;
  margin: 0;
  border: 0;
  border-radius: var(--kour-radius);
  padding: 0.2em 0.8em;
  background: rgb(29 29 29 / 0.063);
  color: var(--kour-text);
  font-family: var(--kour-font);
  font-weight: var(--kour-weight);
  text-shadow: var(--kour-text-shadow);
  cursor: pointer;
  transition:
    background-color 0.06s linear,
    color 0.06s linear;
}
.kour-tab:hover {
  background: rgb(151 151 151 / 0.184);
  color: #989898;
}
.kour-tab:active {
  background: rgb(255 255 0 / 0.176);
  color: var(--kour-yellow);
}
.kour-tab.is-active,
.kour-tab[aria-selected='true'] {
  background: rgb(151 151 151 / 0.184);
  color: var(--kour-text);
  cursor: default;
}

/* Kour Points: the gold number next to the coin */
.kour-kp {
  color: var(--kour-kp);
  font-weight: var(--kour-weight);
}
.kour-kp-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  object-fit: contain;
}

/* name badge ("<sprite=n>" of the TMP sprite asset, ui/unity/tmp-sprites.ts): as tall as the
   font's ascent line (1.05 em), glyph 17.7 x 16.7 with bearing -0.83 and advance 17.63 */
.kour-badge {
  display: inline-block;
  width: 1.113em;
  height: 1.05em;
  margin: 0 0.048em 0 -0.052em;
  vertical-align: -0.17em;
  object-fit: contain;
}
/* badges in a row (up to three in front of a name): each covers 38 % of the one before */
.kour-badges > .kour-badge + .kour-badge {
  margin-left: -0.473em;
}
/* the clan's badge inside its tag: "[TAG<badge>]" */
.kour-badge--tag {
  margin: 0 -0.07em 0 0.02em;
}

/* error notification (NotificationContainer) */
.kour-toast {
  border-radius: var(--kour-radius);
  background: var(--kour-toast);
  box-shadow: 0 0 0 var(--kour-outline) var(--kour-line);
  color: var(--kour-text);
  font-family: var(--kour-font);
  font-weight: var(--kour-weight);
  text-shadow: var(--kour-text-shadow);
}

/* the selection frame of a DOM entry (cards, chips, tiles): the same look as the uGUI frame
   (ui/select-frame.ts markCurrent); the entry keeps its surface and text colours */
.kour-selected {
  box-shadow: inset 0 0 0 var(--kour-selected-line) var(--kour-selected-color);
}

/* scroll areas: track and handle of the original scrollbars */
.kour-scroll {
  scrollbar-color: var(--kour-card-2) var(--kour-surface-3);
}

/*
 * The status page of the info site (FB6INFO, tools/info-page.mjs). tools/info-page.mjs puts the
 * @font-face rules of our own font files and apps/client/src/ui/kour-tokens.css (unchanged) in
 * front of this file, so every colour, radius, shadow and the font come from the Kour tokens
 * (docs/DESIGN.md); the sizes are those of a website (rem), not canvas units. Nothing is
 * selectable (the legal pages are).
 */
:root {
  color-scheme: dark;
  /* the graph's series: regions in fixed colours by token, all regions together in white */
  --series-eu: var(--kour-blue);
  --series-us: var(--kour-rarity-2);
  --series-asia: var(--kour-green-deep);
  --series-sa: var(--kour-red);
  --series-all: var(--kour-text);
  --tone-online: var(--kour-online);
  --tone-restarting: var(--kour-orange);
  --tone-offline: var(--kour-red);
  --tone-unknown: var(--kour-offline);
  --tone-update: var(--kour-blue);
  --tone-restart: var(--kour-grey-light-2);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0%, var(--kour-surface-bar) 0%, var(--kour-bg) 62%)
    var(--kour-bg);
  color: var(--kour-text);
  font: var(--kour-weight) 16px / var(--kour-line-height) var(--kour-font);
  text-shadow: var(--kour-text-shadow);
  user-select: none;
  -webkit-user-select: none;
  -webkit-text-size-adjust: 100%;
}
a {
  color: inherit;
  -webkit-user-drag: none;
}
a:focus-visible,
button:focus-visible,
svg:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--kour-yellow);
  outline-offset: 2px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---- header */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  padding-bottom: 1.2rem;
}
.mark {
  font-weight: var(--kour-weight-bold);
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.mark span {
  color: var(--kour-kp);
}
.tag {
  display: inline-block;
  padding: 0.1rem 0.8rem;
  border-radius: var(--kour-radius);
  background: var(--kour-kp);
  color: var(--kour-bg);
  font:
    400 0.95rem / 1.6 'Fjalla One',
    var(--kour-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: none;
}

/* ---- cards */
main {
  display: grid;
  gap: 0.9rem;
  padding-bottom: 1.5rem;
}
.card {
  background: var(--kour-surface);
  border-radius: var(--kour-radius-lg);
  padding: 1.1rem 1.2rem 1.2rem;
  min-width: 0;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
h2 {
  font-weight: var(--kour-weight-bold);
  font-size: 1.25rem;
  line-height: 1.3;
}
h3 {
  font-size: 1.05rem;
  margin: 1.1rem 0 0.5rem;
}
.fine {
  color: var(--kour-text-3);
  font-size: 0.85rem;
}
.problem {
  border-radius: var(--kour-radius);
  background: var(--kour-toast);
  box-shadow: 0 0 0 var(--kour-outline) var(--kour-line);
  padding: 0.6rem 0.9rem;
  margin: 0.2rem 0 0.4rem;
  font-size: 0.95rem;
}
.problem[hidden] {
  display: none;
}

/* ---- the headline */
.summary {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.9rem;
}
.summary .dot {
  grid-row: span 3;
  width: 1.05rem;
  height: 1.05rem;
}
.summary h1 {
  font-weight: var(--kour-weight-bold);
  font-size: clamp(1.35rem, 4.2vw, 1.75rem);
  line-height: 1.25;
}
.summary p {
  color: var(--kour-text-2);
}
.dot {
  display: inline-block;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--tone-unknown);
}
[data-tone='online'] .dot,
[data-tone='online'] > .dot {
  background: var(--tone-online);
}
[data-tone='restarting'] .dot {
  background: var(--tone-restarting);
}
[data-tone='offline'] .dot {
  background: var(--tone-offline);
}
[data-tone='update'] .dot {
  background: var(--tone-update);
}
[data-tone='restart'] .dot {
  background: var(--tone-restart);
}

/* ---- region cards */
.regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 0.9rem;
}
.region__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.region__name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.pill {
  flex: none;
  padding: 0.05rem 0.7rem;
  border-radius: var(--kour-radius-pill);
  background: var(--kour-card);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.pill::before {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  vertical-align: 0.05rem;
  background: var(--tone-unknown);
}
[data-tone='online'] .pill::before {
  background: var(--tone-online);
}
[data-tone='restarting'] .pill::before {
  background: var(--tone-restarting);
}
[data-tone='offline'] .pill::before {
  background: var(--tone-offline);
}
.region__now {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0.7rem 0 0.8rem;
}
.big {
  font-weight: var(--kour-weight-bold);
  font-size: 2.6rem;
  line-height: 1;
}
.region__unit {
  color: var(--kour-text-2);
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.9rem;
  margin: 0;
}
.fact {
  min-width: 0;
}
.fact dt {
  color: var(--kour-text-3);
  font-size: 0.8rem;
}
.fact dd {
  margin: 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.fact__sub {
  display: block;
  color: var(--kour-text-3);
  font-size: 0.8rem;
}

/* ---- series keys (legend, tooltip, region names): a short line in the series colour */
.key {
  display: inline-block;
  flex: none;
  width: 0.95rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background: var(--series-all);
}
.key--eu {
  background: var(--series-eu);
}
.key--us {
  background: var(--series-us);
}
.key--asia {
  background: var(--series-asia);
}
.key--sa {
  background: var(--series-sa);
}

/* ---- players: peaks, tabs, graph, legend, table */
.peaks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.peak {
  display: flex;
  flex-direction: column;
  background: var(--kour-surface-3);
  border-radius: var(--kour-radius);
  padding: 0.55rem 0.75rem;
  min-width: 0;
}
.peak__value {
  font-weight: var(--kour-weight-bold);
  font-size: 1.5rem;
  line-height: 1.2;
}
.peak__label {
  color: var(--kour-text-2);
  font-size: 0.85rem;
}
.peak__note {
  color: var(--kour-text-3);
  font-size: 0.78rem;
}
.kour-tabs {
  min-width: min(100%, 19rem);
}
.kour-tab {
  font-size: 0.92rem;
  padding: 0.3em 0.7em;
}
.chart {
  position: relative;
  width: 100%;
  min-height: 190px;
}
.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}
.chart .grid {
  stroke: var(--kour-line);
  stroke-width: 1;
}
.chart .axis {
  fill: var(--kour-text-3);
  font-size: 11px;
  text-shadow: none;
}
.chart .line {
  fill: none;
  stroke: var(--series-all);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart .line--eu {
  stroke: var(--series-eu);
}
.chart .line--us {
  stroke: var(--series-us);
}
.chart .line--asia {
  stroke: var(--series-asia);
}
.chart .line--sa {
  stroke: var(--series-sa);
}
.chart .area {
  fill: var(--series-all);
  fill-opacity: 0.08;
  stroke: none;
}
.chart .cross {
  stroke: var(--kour-text-3);
  stroke-width: 1;
}
.chart .dot {
  fill: var(--series-all);
  stroke: var(--kour-surface);
  stroke-width: 2;
}
.chart .dot--eu {
  fill: var(--series-eu);
}
.chart .dot--us {
  fill: var(--series-us);
}
.chart .dot--asia {
  fill: var(--series-asia);
}
.chart .dot--sa {
  fill: var(--series-sa);
}
.tip {
  position: absolute;
  top: 0.4rem;
  z-index: 2;
  min-width: 10rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--kour-radius);
  background: var(--kour-card);
  box-shadow: 0 0 0 var(--kour-outline) var(--kour-line);
  font-size: 0.85rem;
  pointer-events: none;
  white-space: nowrap;
}
.tip[hidden] {
  display: none;
}
.tip__time {
  color: var(--kour-text-2);
  margin-bottom: 0.2rem;
}
.tip__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.tip__row span:last-child {
  color: var(--kour-text-2);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-top: 0.6rem;
  font-size: 0.9rem;
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.legend__now {
  color: var(--kour-text-3);
}
details {
  margin-top: 0.8rem;
}
summary {
  cursor: pointer;
  color: var(--kour-text-2);
  font-size: 0.9rem;
}
.table-wrap {
  max-height: 18rem;
  overflow: auto;
  margin-top: 0.5rem;
  scrollbar-color: var(--kour-card-2) var(--kour-surface-3);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
th,
td {
  text-align: right;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--kour-line);
  white-space: nowrap;
}
th:first-child,
td:first-child {
  text-align: left;
}
th {
  color: var(--kour-text-2);
  position: sticky;
  top: 0;
  background: var(--kour-surface);
}

/* ---- updates and downtimes, stats */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.9rem;
  align-items: start;
}
.events,
.leaders {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.more {
  width: 100%;
  min-height: 2.5rem;
  margin-top: 0.6rem;
  font-size: 0.95rem;
}
.more[hidden] {
  display: none;
}
.event,
.leader,
.empty {
  background: var(--kour-surface-3);
  border-radius: var(--kour-radius);
  padding: 0.5rem 0.75rem;
}
.empty {
  color: var(--kour-text-2);
}
.event__head {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}
.event__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.event__region,
.event__when {
  color: var(--kour-text-2);
  font-size: 0.85rem;
}
.event__detail {
  color: var(--kour-text-3);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.tile {
  display: flex;
  flex-direction: column;
  background: var(--kour-surface-3);
  border-radius: var(--kour-radius);
  padding: 0.65rem 0.8rem;
  min-width: 0;
}
.tile__value {
  font-weight: var(--kour-weight-bold);
  font-size: 1.55rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.tile__label {
  color: var(--kour-text-2);
  font-size: 0.88rem;
}
.tile__note {
  color: var(--kour-text-3);
  font-size: 0.75rem;
}
.leader {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  grid-template-areas: 'rank name level' 'rank class kills';
  column-gap: 0.6rem;
  align-items: center;
}
.leader__rank {
  grid-area: rank;
  color: var(--kour-text-3);
}
.leader__name {
  grid-area: name;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leader__class {
  grid-area: class;
  color: var(--kour-text-2);
  font-size: 0.85rem;
}
.leader__level {
  grid-area: level;
  color: var(--kour-level);
  text-align: right;
}
.leader__kills {
  grid-area: kills;
  color: var(--kour-text-3);
  font-size: 0.8rem;
  text-align: right;
}

/* ---- footer */
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.2rem;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
  color: var(--kour-text-3);
  font-size: 0.88rem;
}
footer a {
  color: var(--kour-text-3);
}
footer a:hover {
  color: var(--kour-text);
}
footer .fine {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
}
noscript p {
  margin: 0 auto;
  max-width: 68rem;
  padding: 1rem 16px;
}

@media (max-width: 30rem) {
  .card {
    padding: 0.95rem 0.95rem 1rem;
  }
  .peaks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .peak {
    padding: 0.45rem 0.55rem;
  }
  .peak__value {
    font-size: 1.25rem;
  }
  .big {
    font-size: 2.2rem;
  }
  .tile__value {
    font-size: 1.3rem;
  }
  .kour-tabs {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}