/* Типографика и кнопки.

   Подключается последним: это финальный слой, который задаёт «руку» интерфейса —
   шкалу текста и поведение кнопок. Раньше каждый экран назначал размеры сам, и
   одна и та же по смыслу подпись была то 12, то 13.5 px, а кнопки различались
   только цветом заливки.

   Шкала: 11 / 12 / 13 / 15 / 17 / 20 / 24 / 32 / 40. Крупный текст идёт с
   отрицательным трекингом (у Inter он иначе выглядит разреженным), мелкий —
   с нулевым или чуть положительным. Вес несёт иерархию: 800 — имя героини,
   700 — заголовки, 600 — кнопки и подписи, 400 — текст. */

:root {
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-15: 15px;
  --fs-17: 17px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px;

  /* Высоты кнопок: три размера, как в нормальной дизайн-системе. */
  --btn-h-sm: 34px;
  --btn-h-md: 42px;
  --btn-h-lg: 50px;
}

/* ---------------- типографика ---------------- */

body {
  font-size: var(--fs-15);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-size: var(--fs-32); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-size: var(--fs-20); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h3 { font-size: var(--fs-15); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

/* Числа везде табличные: счётчики не должны прыгать при смене цифр. */
.res-slot b, .progress-count, .quest-count, .arena-earned b, .head-note b,
.deck-count-big, .step-reward, .foe-reward-value, .stage-reward,
.card-cost, .card-atk, .card-hp, .minion-atk, .minion-hp, .hero-hp, .mana-label {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------------- кнопки ----------------

   Одна база .fbtn, три размера и три роли. Главная кнопка — заливка акцентом
   с еле заметным градиентом и светлой линией по верхней кромке: без них
   плоский прямоугольник выглядит незавершённым. Тень окрашена в акцент,
   поэтому кнопка «лежит» на фоне, а не парит серым облаком. */

.fbtn, .btn {
  --btn-bg: var(--surface-2, rgba(255, 255, 255, 0.085));
  --btn-fg: var(--text-1, #f5f5f7);
  --btn-border: var(--hairline, rgba(255, 255, 255, 0.1));

  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h-md);
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--fs-15); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.1s cubic-bezier(0.2, 0.8, 0.3, 1),
    filter 0.15s ease;
}

.fbtn:hover, .btn:hover { background: var(--surface-3, rgba(255, 255, 255, 0.12)); }
.fbtn:active, .btn:active { transform: translateY(1px) scale(0.995); filter: brightness(0.96); }
.fbtn:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0a84ff) 45%, transparent);
}
.fbtn:disabled, .btn:disabled {
  opacity: 0.4;
  filter: none; box-shadow: none;
  cursor: default; pointer-events: none;
}

/* Роли */
.fbtn-gold, .btn-gold {
  --btn-fg: #fff;
  --btn-border: transparent;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent, #0a84ff) 88%, #fff) 0%,
      var(--accent, #0a84ff) 55%,
      color-mix(in srgb, var(--accent, #0a84ff) 92%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 8px 20px -8px color-mix(in srgb, var(--accent, #0a84ff) 80%, transparent);
}
.fbtn-gold:hover, .btn-gold:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 12px 26px -8px color-mix(in srgb, var(--accent, #0a84ff) 90%, transparent);
}
.fbtn-gold:active, .btn-gold:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.fbtn-wood, .btn-secondary {
  --btn-bg: var(--surface-2, rgba(255, 255, 255, 0.085));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn-ghost, .fbtn-quiet {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--text-2, #a8a8ad);
  box-shadow: none;
  padding: 0 12px;
}
.btn-ghost:hover, .fbtn-quiet:hover { background: var(--surface-1, rgba(255, 255, 255, 0.055)); color: var(--text-1, #f5f5f7); }

/* Размеры */
.fbtn-sm, .btn-small { height: var(--btn-h-sm); padding: 0 14px; font-size: var(--fs-13); border-radius: 10px; }
.arena-fight, .btn-turn { height: var(--btn-h-lg); padding: 0 22px; font-size: var(--fs-17); border-radius: 14px; }
.fbtn-icon, .btn-icon-only {
  width: var(--btn-h-md); height: var(--btn-h-md);
  padding: 0; border-radius: 12px;
}
.fbtn-sm.fbtn-icon { width: var(--btn-h-sm); height: var(--btn-h-sm); }

/* Иконка внутри кнопки: чуть тусклее текста и с оптическим сдвигом отступа. */
.fbtn-glyph, .btn-glyph { display: grid; place-items: center; opacity: 0.85; margin-left: -2px; }
.fbtn-icon .fbtn-glyph, .btn-icon-only .btn-glyph { margin: 0; opacity: 1; }

/* Чипы фильтров — те же правила, но компактнее. */
.chip {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 13px;
  border-radius: 999px;
  font-size: var(--fs-13); font-weight: 600; letter-spacing: -0.01em;
  transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease;
}
.chip:active { transform: scale(0.97); }
.chip.active {
  background: var(--accent, #0a84ff);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent, #0a84ff) 90%, transparent);
}

/* ---------------- выравнивание текста по экранам ---------------- */

.screen-head h2 { font-size: var(--fs-20); }
.head-note, .catalog-count, .arena-note, .quests-note, .pack-note { font-size: var(--fs-13); }
.row-title, .quest-title, .foe-name { font-size: var(--fs-17); font-weight: 700; letter-spacing: -0.015em; }
.menu-tile-primary .row-title { font-size: var(--fs-20); }
.row-sub, .quest-text, .slot-title, .stage-text { font-size: var(--fs-13); }
.row-note, .slot-sub, .stage-sub, .foe-label, .chapter-count { font-size: var(--fs-12); }
.char-name { letter-spacing: -0.03em; }
.panel-title { font-size: var(--fs-24); font-weight: 800; letter-spacing: -0.025em; }

@media (prefers-reduced-motion: reduce) {
  .fbtn, .btn, .chip { transition: none; }
}