/* tokens.css — экран «Жетоны» (js/screens/tokens.js).

   Канон: без скруглений, золотые L-скобки панелей рисует ui.brackets() в JS,
   заголовки — капсом с трекингом (их даёт .panel-hdr из game.css). Ни одного
   нового цвета: только var(--...) из :root в game.css.

   Мобильный порог здесь жёстче обычного. Экран объясняющий: на нём девять
   карточек текста подряд, и если он не читается с телефона — он не работает
   вовсе. Поэтому кегль нигде не мельче var(--font-min) (13px), тач-цели не
   мельче var(--tap-min) (44px), и ни один блок не умеет уехать в
   горизонтальный скролл: сетка источников на телефоне одноколоночная,
   длинные слова ломаются overflow-wrap, длинные строки — многоточием. */

.tok-screen { width: 100%; min-width: 0; }

/* Общее тело панели — тот же ритм, что у справки (help.css). */
.tok-body {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}

/* ---------- баланс ---------- */

.tok-hero {
  padding: 14px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}

.tok-hero-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tok-hero-icon { width: 46px; height: 46px; flex: none; image-rendering: pixelated; }

.tok-hero-num {
  font-size: 40px; line-height: 1; color: var(--gold-strong);
  letter-spacing: 1px; font-variant-numeric: tabular-nums;
}
.tok-hero-lbl {
  margin-top: 4px;
  font-size: var(--font-min); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted);
}

/* Три числа прихода/расхода. flex:1 с min-width:0 — на 360px они честно
   схлопываются в один столбец, а не выпирают строку за край экрана. */
.tok-hero-stats {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-left: auto;
}
.tok-stat {
  flex: 1 1 110px; min-width: 0;
  padding: 8px 10px;
  background: var(--panel-alt);
  border-left: 2px solid var(--edge-soft);
}
.tok-stat .v {
  font-size: 20px; line-height: 1.1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tok-stat .v.gold { color: var(--gold-strong); }
.tok-stat .v.green { color: var(--green); }
.tok-stat .v.red { color: var(--red); }
.tok-stat .k {
  margin-top: 3px;
  font-size: var(--font-min); letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- откуда пришли ---------- */

.tok-earned-row { display: flex; flex-direction: column; gap: 5px; }

.tok-earned-top {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13.5px;
}
.tok-earned-top > i { color: var(--gold); font-size: var(--font-min); width: 16px; flex: none; }
.tok-earned-name {
  flex: 1 1 auto; min-width: 0; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tok-earned-week {
  flex: none; color: var(--green); font-size: var(--font-min);
  font-variant-numeric: tabular-nums; min-width: 42px; text-align: right;
}
.tok-earned-total {
  flex: none; color: var(--gold-strong);
  font-variant-numeric: tabular-nums; min-width: 46px; text-align: right;
}

.tok-bar { height: 4px; background: var(--edge-soft); }
.tok-bar > b { display: block; height: 100%; background: var(--gold); }

/* Врезка-пояснение. Тот же приём, что .help-note: золотая полоса слева,
   фон панели — читается как «это подпись, а не ещё одна строка данных». */
.tok-note {
  padding: 9px 11px;
  border-left: 2px solid var(--gold-strong);
  background: var(--panel-alt);
  font-size: var(--font-min); line-height: 1.5; color: var(--text-2);
}

.tok-subhead {
  margin-top: 2px;
  font-size: var(--font-min); letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted);
}

/* Пустое состояние: объясняет ровно одно действие, с которого начать. */
.tok-empty {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px;
  background: var(--panel-alt);
  border-left: 2px solid var(--gold-strong);
}
.tok-empty > i { color: var(--gold-strong); font-size: 22px; flex: none; margin-top: 2px; }
.tok-empty-hdr {
  font-size: var(--font-min); letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold-strong);
}
.tok-empty-txt { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

/* ---------- девять источников ---------- */

/* По умолчанию — ОДНА колонка, многоколоночную сетку включает медиа-запрос
   от 701px (ниже). Порядок именно такой, а не auto-fit с minmax(280px, 1fr):
   minmax с пиксельным минимумом на 360px даёт колонку шире вьюпорта вместе с
   паддингами панели — то есть ровно тот горизонтальный скролл страницы,
   которого на этом экране быть не должно. */
.tok-srcs {
  padding: 12px 14px;
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}

.tok-src {
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 7px;
  min-width: 0;
  overflow-wrap: anywhere;   /* длинное слово не растягивает ячейку сетки */
}

.tok-src-hdr { display: flex; align-items: center; gap: 9px; }
.tok-src-hdr > i { color: var(--gold-strong); font-size: 14px; width: 16px; flex: none; }
.tok-src-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; letter-spacing: 0.4px; color: var(--text);
}

/* Чип награды — единственный акцент карточки: игрок сканирует экран именно
   по нему («сколько дают»), поэтому он крупнее подписей и всегда справа. */
.tok-chip {
  flex: none;
  padding: 3px 9px;
  background: rgba(209, 168, 94, 0.16);
  border-top: 1px solid rgba(209, 168, 94, 0.4);
  color: var(--gold-strong);
  font-size: 14px; letter-spacing: 0.4px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tok-src-when {
  font-size: var(--font-min); letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--gold);
}
.tok-src-how { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.tok-src-live {
  padding: 7px 9px;
  background: var(--panel-alt);
  border-left: 2px solid var(--edge);
  font-size: var(--font-min); line-height: 1.45; color: var(--text);
}

.tok-src-go { align-self: flex-start; min-height: var(--tap-min); font-size: var(--font-min); }

/* ---------- на что уходят ---------- */

.tok-price { display: flex; align-items: center; gap: 12px; }
.tok-price-num {
  flex: none;
  font-size: 32px; line-height: 1; color: var(--gold-strong);
  font-variant-numeric: tabular-nums;
}
.tok-price-txt { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }

.tok-spend-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--edge-soft);
}
.tok-spend-l { flex: 1 1 auto; min-width: 0; }
.tok-spend-name {
  font-size: 13.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tok-spend-eta { font-size: var(--font-min); color: var(--muted); }
.tok-spend-go {
  flex: none;
  min-height: var(--tap-min); min-width: 74px;
  font-size: var(--font-min);
  font-variant-numeric: tabular-nums;
}

/* ---------- адаптив ----------
   Точки перелома те же, что у остальной игры (game.css: 1150 / 700 / 480) —
   свои числа здесь развалили бы общий ритм колонок. */

@media (min-width: 701px) {
  /* Две-три колонки источников там, где для этого есть ширина. Ниже 700px
     сетка остаётся одноколоночной: на телефоне карточка с тремя абзацами
     текста в половину ширины нечитаема. */
  .tok-srcs { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

@media (max-width: 700px) {
  /* На телефоне статистика уходит под баланс, а не жмётся справа от него. */
  .tok-hero-stats { margin-left: 0; width: 100%; }
  .tok-hero-num { font-size: 34px; }
}

@media (max-width: 480px) {
  .tok-hero { padding: var(--mobile-pad); gap: 12px; }
  .tok-body, .tok-srcs { padding: var(--mobile-pad); gap: var(--mobile-gap); }
  .tok-hero-icon { width: 38px; height: 38px; }
  .tok-hero-num { font-size: 30px; }
  .tok-stat { flex: 1 1 100%; }
  .tok-src-how, .tok-empty-txt, .tok-price-txt, .tok-earned-top { font-size: var(--font-min); }
  .tok-price-num { font-size: 26px; }
  /* Ник наёмника/название рецепта на 360px не влезают в одну строку рядом с
     ценой — разрешаем перенос вместо многоточия, иначе строка бесполезна. */
  .tok-spend-name { white-space: normal; }
}