/* Решатели — токены и базовые компоненты по DESIGN.md (Notion + дополнения Решателей).
   Тема одна — светлая, тёмной нет (решение Алексея 11.10.2026). */
:root {
  --canvas: #ffffff;
  --surface: #f6f5f4;
  --surface-soft: #fafaf9;
  --card: #ffffff;
  --ink: #1a1a1a;
  --charcoal: #37352f;
  --slate: #5d5b54;
  --steel: #787671;
  --muted: #bbb8b1;
  --hairline: #e5e3df;
  --hairline-soft: #ede9e4;
  --hairline-strong: #c8c4be;
  --primary: #5645d4;
  --primary-pressed: #4534b3;
  --on-primary: #ffffff;
  --accent-line: #5645d4;
  --success: #1aae39;
  --warning: #dd5b00;
  --error: #e03131;
  --orange: #dd5b00;
  --tint-lavender: #e6e0f5;
  --tint-lavender-ink: #391c57;
  --tint-mint: #d9f3e1;
  --tint-mint-ink: #14802b;
  --tint-rose: #fde0ec;
  --tint-peach: #ffe8d4;
  --tint-peach-ink: #793400;
  --tint-sky: #dcecfa;
  --tint-yellow: #fef7d6;
  --tint-yellow-bold: #f9e79f;
  --char-line: #1a1a1a;
  --char-shadow: rgba(26, 26, 26, 0.16);
  --pill-on: #1a1a1a;
  --pill-on-ink: #ffffff;
  --shadow-1: rgba(15, 15, 15, 0.04) 0 1px 2px 0;
  --shadow-2: rgba(15, 15, 15, 0.08) 0 4px 12px 0;

  --font: Inter, -apple-system, system-ui, "Segoe UI", Helvetica, sans-serif;
  --font-display: Nunito, Inter, -apple-system, system-ui, "Segoe UI", Helvetica, sans-serif;   /* заголовки: скруглённый, дружелюбный */
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-pill: 9999px;
  color-scheme: only light;   /* светлое и на телефоне с тёмной темой; «only» — браузеру не затемнять сайт самому */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--canvas); color: var(--charcoal); }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* Типографика: шкала Notion */
.t-h2 { font-family: var(--font-display); font-size: 36px; font-weight: 800; line-height: 1.2; letter-spacing: -0.3px; color: var(--ink); margin: 0; text-wrap: balance; }
.t-h3 { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1.25; color: var(--ink); margin: 0; text-wrap: balance; }
.t-h4 { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--ink); margin: 0; text-wrap: balance; }
.t-h5 { font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--ink); margin: 0; }
.t-sub { font-size: 18px; font-weight: 400; line-height: 1.5; color: var(--slate); margin: 0; }
.t-body { font-size: 16px; line-height: 1.55; margin: 0; }
.t-small { font-size: 14px; line-height: 1.5; color: var(--steel); margin: 0; }
.t-micro-up { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; color: var(--steel); }

/* Кнопки */
.btn { font: 500 14px/1.3 var(--font); border-radius: var(--r-8); padding: 10px 18px; min-height: 44px; cursor: pointer; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:active { background: var(--primary-pressed); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.btn:focus-visible, .pill-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Карточки и плашки */
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-12); padding: 24px; }
.tint { border-radius: var(--r-12); padding: 24px; }
.tint-lavender { background: var(--tint-lavender); }
.tint-mint { background: var(--tint-mint); }
.tint-rose { background: var(--tint-rose); }
.tint-peach { background: var(--tint-peach); }
.tint-sky { background: var(--tint-sky); }
.tint-yellow { background: var(--tint-yellow); }
.tint-yellow-bold { background: var(--tint-yellow-bold); }
.tint-gray { background: var(--surface); }

/* Вкладки-таблетки и метки */
.pill-tab { font: 500 13px/1.3 var(--font); padding: 6px 12px; border-radius: var(--r-pill); background: transparent;
  color: var(--steel); border: 1px solid var(--hairline); cursor: pointer; }
.pill-tab[aria-pressed="true"], .pill-tab[aria-selected="true"] { background: var(--pill-on); color: var(--pill-on-ink); border-color: var(--pill-on); }
.solid-pill { display: inline-block; font: 600 13px/1.3 var(--font); padding: 4px 10px; border-radius: var(--r-pill); color: #ffffff; }
.solid-pill.orange { background: var(--orange); }
.solid-pill.purple { background: var(--primary); }
.tag-chip { display: inline-block; font: 600 12px/1.4 var(--font); padding: 2px 8px; border-radius: var(--r-6); background: var(--tint-lavender); color: var(--tint-lavender-ink); }

/* Персонажи */
.char { display: block; width: 100%; height: auto; overflow: visible; }
.char .ln { fill: none; stroke: var(--char-line); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.char .sh { stroke: var(--char-line); stroke-width: 4.5; stroke-linejoin: round; }
.char .in { fill: none; stroke: #1a1a1a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Плашки с персонажами, Неприятными Существами и рисунками вещей — всегда светлые, с тёмным текстом,
   даже внутри тёмной сцены (облачко реплики на заглавном экране). Новая плашка с персонажем —
   добавить в этот список или дать класс on-light. */
.on-light, :is(.award-card, .summary, .player, .mission, .pin, .coach, .hw-say, .fb, .say, .award, .zach-card, .tile, .cat-row,
  .fit-cell, .fit-stage, .sk-stage, .mirror-stage, .hero-card, .lyap-card) {
  --canvas: #ffffff; --surface: #f6f5f4; --surface-soft: #fafaf9; --card: #ffffff;
  --ink: #1a1a1a; --charcoal: #37352f; --slate: #5d5b54; --steel: #787671; --muted: #bbb8b1;
  --hairline: #e5e3df; --hairline-soft: #ede9e4; --hairline-strong: #c8c4be;
  --primary: #5645d4; --primary-pressed: #4534b3; --accent-line: #5645d4;
  --success: #1aae39; --warning: #dd5b00; --error: #e03131;
  --tint-lavender: #e6e0f5; --tint-lavender-ink: #391c57; --tint-mint: #d9f3e1; --tint-mint-ink: #14802b;
  --tint-rose: #fde0ec; --tint-peach: #ffe8d4; --tint-peach-ink: #793400; --tint-sky: #dcecfa; --tint-yellow: #fef7d6; --tint-yellow-bold: #f9e79f;
  --char-shadow: rgba(26, 26, 26, 0.16); --pill-on: #1a1a1a; --pill-on-ink: #ffffff;
  --shadow-1: rgba(15, 15, 15, 0.04) 0 1px 2px 0; --shadow-2: rgba(15, 15, 15, 0.08) 0 4px 12px 0;
  color: var(--charcoal); color-scheme: light;
}

/* Неприятные Существа — ошибки-каракули: тонкие кривые руки и ноги */
.zach { display: block; width: 100%; height: auto; overflow: visible; }
.zach .zl { fill: none; stroke: var(--char-line); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }