/*
  Шрифты направления D2. Файлы взяты из пакетов @fontsource/m-plus-rounded-1c
  и @fontsource-variable/rubik и положены в app/public/fonts, чтобы адрес был
  постоянным: только так работает предзагрузка заголовочного шрифта в index.html.

  Подмножества ограничены латиницей, расширенной латиницей и кириллицей:
  проект идёт на шести языках, иероглифы и арабица из пакета не нужны.
  Веса M PLUS Rounded 1c: 800 (вопрос, кнопки, знак) и 900 (процент в значке).
  Rubik подключён переменным начертанием одним файлом на подмножество.
*/

/* M PLUS Rounded 1c 800 */
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('/fonts/m-plus-rounded-1c-latin-800-normal.woff2') format('woff2');
  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: 'M PLUS Rounded 1c';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('/fonts/m-plus-rounded-1c-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('/fonts/m-plus-rounded-1c-cyrillic-800-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* M PLUS Rounded 1c 900 */
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url('/fonts/m-plus-rounded-1c-latin-900-normal.woff2') format('woff2');
  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: 'M PLUS Rounded 1c';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url('/fonts/m-plus-rounded-1c-latin-ext-900-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url('/fonts/m-plus-rounded-1c-cyrillic-900-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Rubik Variable 300 до 900 */
@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/fonts/rubik-latin-wght-normal.woff2') format('woff2-variations');
  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: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/fonts/rubik-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/fonts/rubik-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/fonts/rubik-cyrillic-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* Стили архивных страниц. Направление D2 «Стикерный стол», характер тот же,
   но спокойнее: меньше наклонов, меньше движения, больше воздуха под текст.

   Первый блок это запасная копия токенов из docs/TOKENS.md. Как только
   задача 2B положит app/src/styles/tokens.css, сборщик подклеит его СЛЕДОМ
   за этим файлом, и настоящие значения перекроют запасные. Трогать имена
   переменных здесь нельзя: это общий контракт трёх задач. */

:root {
  color-scheme: light;

  /* Цвета, светлая тема */
  --bg: #FFFBF0;
  --surface: #FFFFFF;
  --ink: #1A1C22;
  --muted: #6E6A61;
  --accent: #2F4BE0;
  --accent-ink: #FFFFFF;
  --marker: #FFD84D;
  --rarity-popular: #3BB273;
  --rarity-common: #2F8FE0;
  --rarity-rare: #FF8A1F;
  --rarity-legendary: #FF4D9D;
  --rarity-mythic: #FFC400;

  /* Форма и материал */
  --radius-panel: 20px;
  --radius-pill: 999px;
  --stroke: 2px solid var(--ink);
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-hard-sm: 2px 2px 0 var(--ink);
  --tilt-max: 4deg;
  --stroke-color: var(--ink);
  --shadow-color: var(--ink);
  /* Текст поверх цветов редкости и маркера всегда тёмный, в обеих темах */
  --on-rarity: #1A1C22;
  --marker-ink: #1A1C22;

  /* Шрифты */
  --font-display: "M PLUS Rounded 1c", system-ui, sans-serif;
  --font-text: "Rubik Variable", "Rubik", system-ui, sans-serif;

  /* Движение */
  --motion-quick: 140ms;
  --motion-bars: 380ms;
}

/* Тёмная тема по настройке системы. Правило из docs/TOKENS.md: обводка светлее
   фона, тень не чернильная, текст на цветах редкости всегда тёмный.
   Селектор намеренно простой (:root), чтобы tokens.css задачи 2B, подклеенный
   ниже, перекрывал эти значения без борьбы за вес. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #17161A;
    --surface: #23222A;
    --ink: #F2EFE6;
    --muted: #A8A296;
    --accent: #4A63F0;
    --accent-ink: #FFFFFF;
    --shadow-color: #0B0A0E;
    --shadow-hard: 4px 4px 0 #0B0A0E;
    --shadow-hard-sm: 2px 2px 0 #0B0A0E;
  }
}

/* Ширины архивных страниц: колонка текста до 720, табло до 560. */
:root {
  --col-text: 720px;
  --col-board: 560px;
  --wrap: 1320px;
  --gutter: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Ссылка «перейти к итогам» для клавиатуры и экранных читалок. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  border: var(--stroke);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  z-index: 10;
}

.skip:focus {
  left: var(--gutter);
  top: 12px;
}

/* ------------------------------------------------------------------ шапка */

.site-head {
  padding-block: 20px 8px;
}

.site-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand__mark {
  display: block;
  width: 24px;
  height: 27px;
  flex: none;
}

.site-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: var(--stroke);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: var(--shadow-hard-sm);
}

.pill--plain {
  box-shadow: none;
}

.pill--accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--ink);
}

a.pill:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* --------------------------------------------------------------- страница */

main {
  display: block;
  padding-block: 12px 48px;
}

.day-head {
  max-width: var(--col-text);
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(30px, 6.4vw, 44px);
  margin: 0 0 16px;
  overflow-wrap: break-word;
}

.h1-kicker {
  display: block;
  font-size: 0.52em;
  letter-spacing: 0;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 700;
}

/* Один мазок маркера на экран: он лежит за последним словом заголовка.
   Текст на мазке всегда чернильный, поэтому мазок читается и в тёмной теме. */
.marker {
  background-image: linear-gradient(var(--marker), var(--marker));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  color: var(--marker-ink);
  padding: 0.02em 0.12em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.lead {
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 62ch;
}

h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: clamp(22px, 3.6vw, 27px);
  margin: 36px 0 12px;
}

p {
  margin: 0 0 16px;
  max-width: 68ch;
}

.day-cols {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.day-body {
  max-width: var(--col-text);
}

.day-side {
  max-width: var(--col-board);
  width: 100%;
}

@media (min-width: 1180px) {
  .day-cols {
    display: grid;
    grid-template-columns: minmax(0, var(--col-text)) minmax(0, var(--col-board));
    gap: 40px;
    align-items: start;
  }

  .day-body {
    grid-column: 1;
    grid-row: 1;
  }

  .day-side {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 24px;
  }
}

/* ------------------------------------------------------------ блок итогов */

.panel {
  background: var(--surface);
  border: var(--stroke);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-hard);
  padding: 20px;
}

.panel + .panel {
  margin-top: 16px;
}

.board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
  margin-bottom: 18px;
}

.hero-sticker {
  position: relative;
  flex: none;
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
}

.hero-sticker img {
  width: 112px;
  height: 112px;
  transform: rotate(-4deg);
  filter: drop-shadow(0 4px 0 rgba(26, 28, 34, 0.12));
}

.hero-sticker .emoji-fallback {
  font-size: 84px;
  line-height: 1;
}

.badge {
  position: relative;
  flex: none;
  width: 132px;
  height: 132px;
  margin-left: -30px;
  margin-top: 26px;
  display: grid;
  place-items: center;
  text-align: center;
}

.badge__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Ширина ограничена изнутри: у значка срезанные углы, и длинное название
   звания (например «Как большинство») иначе вылезает за края диска. */
.badge__text {
  position: relative;
  z-index: 1;
  max-width: 82%;
  font-family: var(--font-display);
  color: var(--on-rarity);
  line-height: 1;
}

.badge__value {
  display: block;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.badge__rank {
  display: block;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.15;
  margin-top: 5px;
  overflow-wrap: break-word;
  hyphens: auto;
}

.board__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 4px;
  align-self: center;
}

.board__caption {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.35;
}

/* На узком экране подпись уходит под наклейку и значок целой строкой. */
.board__headtext {
  align-self: center;
  flex: 1 1 200px;
  min-width: 200px;
}

/* Полосы табло: обводка по всей длине, заливка внутри цветом редкости.
   Подложки-дорожки нет, где нет заливки, там виден лист. */
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.row__pic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

.row__pic img {
  width: 40px;
  height: 40px;
}

.row__pic .emoji-fallback {
  font-size: 30px;
  line-height: 1;
}

.row__body {
  min-width: 0;
}

.row__name {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__track {
  display: block;
  height: 18px;
  border: var(--stroke);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: transparent;
}

.row__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  min-width: 3px;
}

.row__share {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.total-pill {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  background: var(--bg);
  border: var(--stroke);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fact {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.fact__pic {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
}

.fact__pic img {
  width: 44px;
  height: 44px;
  transform: rotate(3deg);
}

.fact__pic .emoji-fallback {
  font-size: 32px;
  line-height: 1;
}

.fact__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fact__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.tag {
  display: inline-block;
  margin-left: 8px;
  background: var(--rarity-mythic);
  border: var(--stroke);
  border-radius: var(--radius-pill);
  padding: 1px 10px;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
  color: var(--on-rarity);
}

/* ------------------------------------------------------------------ текст */

.country-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--col-text);
}

.country-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: var(--stroke);
  border-radius: var(--radius-pill);
  padding: 5px 14px 5px 6px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: var(--shadow-hard-sm);
}

.country-list img {
  width: 30px;
  height: 30px;
}

.country-list .emoji-fallback {
  font-size: 22px;
  line-height: 1;
  width: 30px;
  text-align: center;
}

/* ------------------------------------------------- призыв сыграть сегодня */

.play {
  margin-top: 28px;
  max-width: var(--col-text);
  border-style: dashed;
  border-width: 2px;
  box-shadow: none;
}

.play__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  border: var(--stroke);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-hard);
  padding: 12px 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
  transition: transform var(--motion-quick) ease, box-shadow var(--motion-quick) ease;
}

.cta:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

/* -------------------------------------------------------- соседние дни */

.daynav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  max-width: var(--col-text);
}

.daynav a {
  flex: 1 1 240px;
  min-width: 0;
  background: var(--surface);
  border: var(--stroke);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-hard-sm);
  padding: 12px 16px;
  text-decoration: none;
}

.daynav__label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.daynav__text {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------- индекс архива */

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  max-width: var(--wrap);
}

.card {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: var(--stroke);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-hard-sm);
  padding: 14px;
  text-decoration: none;
  transition: transform var(--motion-quick) ease, box-shadow var(--motion-quick) ease;
}

.card:hover {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}

.card__pic {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
}

.card__pic img {
  width: 56px;
  height: 56px;
  transform: rotate(-3deg);
}

.card__pic .emoji-fallback {
  font-size: 40px;
  line-height: 1;
}

.card__body {
  min-width: 0;
}

.card__day {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card__question {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  margin: 2px 0 4px;
  overflow-wrap: break-word;
}

.card__winner {
  display: block;
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.months {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ------------------------------------------------------------------ подвал */

.site-foot {
  border-top: 2px solid var(--ink);
  margin-top: 40px;
  padding-block: 24px 40px;
  font-size: 15px;
  color: var(--muted);
}

.site-foot p {
  max-width: 68ch;
  margin: 0 0 14px;
}

.langs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.langs [aria-current="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------- страница 404 */

.notfound {
  max-width: var(--col-text);
  padding-block: 40px 60px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }

  a.pill:hover,
  .card:hover,
  .cta:hover {
    transform: none;
  }
}


/* Токены задачи 2B: перекрывают запасные значения выше. */

/*
  Токены направления D2 «Стикерный стол».
  Имена взяты из docs/TOKENS.md, значения из docs/design/directions.md, раздел D2.
  Этим файлом пользуются игровой экран, админка и архивные страницы.

  Правило тёмной темы: обводка светлее фона, тень не чернильная (она темнее фона),
  текст на цветах редкости всегда чернильный, поэтому у него отдельный токен
  --on-rarity, который не меняется между темами.
*/

:root {
  color-scheme: light;

  /* Цвета */
  --bg: #fffbf0;
  --surface: #ffffff;
  --ink: #1a1c22;
  --muted: #6e6a61;
  --accent: #2f4be0;
  --accent-ink: #ffffff;
  --marker: #ffd84d;

  /* Цвета редкости: всегда заливка с чернильной обводкой */
  --rarity-popular: #3bb273;
  --rarity-common: #2f8fe0;
  --rarity-rare: #ff8a1f;
  --rarity-legendary: #ff4d9d;
  --rarity-mythic: #ffc400;

  /* Форма и материал */
  --radius-panel: 20px;
  --radius-pill: 999px;
  --stroke: 2px solid var(--ink);
  --shadow-hard: 4px 4px 0 var(--ink);
  --shadow-hard-sm: 2px 2px 0 var(--ink);
  --tilt-max: 4deg;

  /* Шрифты */
  --font-display: 'M PLUS Rounded 1c', system-ui, sans-serif;
  --font-text: 'Rubik Variable', system-ui, sans-serif;

  /* Движение */
  --motion-quick: 140ms;
  --motion-bars: 380ms;

  /*
    Расширения контракта. Их нет в docs/TOKENS.md, но без них тёмная тема
    и материал наклейки не собираются. Значения в светлой теме совпадают
    с базовыми, поэтому контракт не нарушается.
  */
  --stroke-color: var(--ink);
  --shadow-color: var(--ink);
  --on-rarity: #1a1c22;
  --marker-ink: #1a1c22;
  --sticker-ring: var(--accent);
  --sheet-edge: rgba(26, 28, 34, 0.08);
  --panel-inset: #fffdf7;

  /* Ширины колонок */
  --col-narrow: 560px;
  --col-wide: 1100px;

  /* Кривая перелёта: короткий отскок без пружинной анимации */
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #141317;
    --surface: #24232c;
    --ink: #f2efe6;
    --muted: #a8a296;
    --accent: #4a63f0;
    --accent-ink: #ffffff;
    --marker: #ffd84d;

    --rarity-popular: #45c27f;
    --rarity-common: #4ba3ee;
    --rarity-rare: #ff9838;
    --rarity-legendary: #ff6bae;
    --rarity-mythic: #ffce2e;

    /* Обводка светлее фона, тень темнее фона и не чернильная */
    --stroke-color: var(--ink);
    --shadow-color: #050508;
    --stroke: 2px solid var(--ink);
    --shadow-hard: 4px 4px 0 #050508;
    --shadow-hard-sm: 2px 2px 0 #050508;

    --on-rarity: #1a1c22;
    --marker-ink: #1a1c22;
    --sheet-edge: rgba(242, 239, 230, 0.1);
    --panel-inset: #2c2b35;
  }
}