/* Shared typography layer. Kept separate so the redesign can be reverted safely. */
@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-ui: "Onest", "Segoe UI", Arial, sans-serif;
  --font-data: "JetBrains Mono", Consolas, monospace;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-ui) !important;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  line-height: 1.35;
}

body {
  font-weight: 400;
}

h1,
h2,
h3,
h4,
.brand,
button,
.page-nav a,
.topbar nav a {
  font-weight: 600;
}

.page-nav a,
.topbar nav a {
  font-size: max(10px, .625rem) !important;
  letter-spacing: .045em !important;
}

small {
  font-size: max(10px, .625rem) !important;
  line-height: 1.5 !important;
}

:is(.eyebrow, .relation-section, .personal-section-title, .game-card-tag, .leader-head, .analytics-launchpad-title span, .match-demo-vision-grid span, .section-heading span) {
  font-size: max(9px, .5625rem) !important;
  line-height: 1.4;
  letter-spacing: .08em !important;
}

:is(time, code, kbd, samp, .metrics b, .stats-strip b, .match-kda, .match-duration, .match-date, .game-card-stats b, .leader-row strong, .profile-stat b, .stratz-point b, .match-demo-vision-grid b, .analysis-orbit span) {
  font-family: var(--font-data) !important;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -.025em;
}

/* Numeric values injected into progress/status elements stay stable while changing. */
[id$="-progress"],
[id$="-score"],
[id$="-time"],
[id$="-duration"],
[data-value] {
  font-variant-numeric: tabular-nums;
}

/*
 * Comfortable 2K desktop type.
 *
 * Galaxy and Skill Lab predate the rem-based React UI and contain many fixed
 * 7–10px labels. At a wide native-resolution viewport those labels become
 * needlessly difficult to read. Keep compact and mobile layouts unchanged,
 * but raise the practical text floor on large desktop screens.
 */
@media (min-width: 1800px) {
  .page-nav a,
  .topbar nav a {
    font-size: 13px !important;
  }

  small {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  :is(.eyebrow, .relation-section, .personal-section-title, .game-card-tag, .leader-head, .analytics-launchpad-title span, .match-demo-vision-grid span, .section-heading span) {
    font-size: 11px !important;
  }

  /* Galaxy: readable fixed panels without taking space away from the graph. */
  .galaxy-page .controls {
    width: 320px !important;
  }

  .galaxy-page .inspector {
    width: 420px !important;
  }

  .galaxy-page .personal-panel {
    width: 350px !important;
  }

  .galaxy-page .stats-strip {
    left: 390px !important;
  }

  .galaxy-page :is(
    .data-note,
    .label-row,
    .legend,
    .axis-label,
    .role-force,
    .readability-note,
    .relation-title,
    .relation-section,
    .relation-highlight small,
    .relation-tab,
    .relation-tools input,
    .relation-tools select,
    .personal-head small,
    .personal-section-title,
    .personal-rec small,
    .personal-actions button,
    .personal-actions a,
    .profile-prompt p,
    .profile-prompt a,
    .stats-strip span
  ) {
    font-size: 11px !important;
  }

  .galaxy-page :is(
    .layer b,
    .relation,
    .relation b,
    .relation-highlight b,
    .relation-highlight strong,
    .relation-tab b,
    .personal-rec b,
    .personal-rec strong,
    .relation-empty
  ) {
    font-size: 12px !important;
  }

  .galaxy-page .search input {
    font-size: 14px !important;
  }

  .galaxy-page .personal-head b {
    font-size: 17px !important;
  }

  /* Skill Lab overview and leaderboard. */
  .challenge-product :is(
    .challenge-hero-copy > span,
    .achievement-panel header span,
    .challenge-radar > span,
    .challenge-totals span,
    .game-card-tag,
    .game-card-stats span,
    .board-tabs button,
    .personal-rank span,
    .leader-head,
    .leader-row small,
    .leader-row time,
    .achievement-list span,
    .steam-save-note p,
    .steam-save-note a,
    .roadmap-list span,
    .roadmap-list p,
    .roadmap-list em,
    .arena-name span,
    .arena-hud span,
    .difficulty-control,
    .arena-exit,
    .click-field p,
    .result-emblem,
    .result-save-state,
    .result-achievements
  ) {
    font-size: 11px !important;
  }

  .challenge-product .challenge-hero-actions :is(button, a) {
    font-size: 13px !important;
  }

  .challenge-product :is(
    .section-heading p,
    .challenge-game-card > p,
    .leader-row,
    .leader-row b,
    .leader-empty,
    .achievement-list b,
    .achievement-empty,
    .steam-save-note b,
    .roadmap-list b,
    .arena-result > p
  ) {
    font-size: 13px !important;
    line-height: 1.55;
  }

  .challenge-product .challenge-hero-copy p {
    font-size: 15px !important;
    line-height: 1.65;
  }

  .challenge-product :is(.challenge-game-card h3, .section-heading h2, .achievement-panel h2) {
    line-height: 1.25;
  }

  /* Skill Lab game screens: instructions and key labels must remain legible. */
  .challenge-product :is(
    .invoker-model-status,
    .invoker-hero-card span,
    .invoker-kicker,
    .invoker-hero-card small,
    .invoker-target small,
    .invoker-game-v2 .invoker-keys span,
    .invoker-hint,
    .invoker-game-v2 .invoker-status,
    .quiz-progress,
    .quiz-copy > span,
    .build-hero span,
    .invoker-spell > span,
    .quiz-copy > p,
    .build-progress,
    .build-items b,
    .build-items small,
    .build-source,
    .invoker-spell p,
    .invoker-keys span,
    .invoker-status,
    .roshan-emblem span,
    .roshan-emblem small,
    .roshan-question p,
    .stack-clock > span,
    .stack-clock small
  ) {
    font-size: 11px !important;
    line-height: 1.45;
  }

  .challenge-product .stack-track::before {
    font-size: 11px !important;
    line-height: 1.45;
  }

  .challenge-product :is(
    .quiz-options button,
    .roshan-question button,
    .item-build-loading,
    .game-data-error,
    .build-hero p,
    .stack-action,
    .stack-feedback,
    .difficulty-control select
  ) {
    font-size: 13px !important;
    line-height: 1.45;
  }
}