:root {
  --bg: #17130f;
  --bg-panel: #221c16;
  --bg-card: #2a231b;
  --bg-card-hover: #352c22;
  --border: #4a3f30;
  --text: #ecdfc8;
  --text-dim: #b8a888;
  --accent: #c9a227;
  --accent-dim: #8a6f1f;
  --hp: #a8352f;
  --stress: #5c7fb0;
  --hope: #c9a227;
  --mastery: #4aa3a0;
  --armor: #6f8a5a;
  --armor-metal: #aab8c2;
  --evasion: #3fb8b0;
  --class-resource: #9b7fd4;
  --card-token: #d98c3f;
  --feat-ancestry: #7a9b57;
  --feat-community: #5c8fc9;
  --feat-class: #c9702f;
  --feat-subclass: #a172d6;
  --danger: #a8352f;
  --roll-hope: #4a90d9;
  --roll-fear: #d9484a;
  --roll-crit: #e0a527;
  --threshold-minor: #a6d24a;
  --threshold-major: #e0c53f;
  --threshold-severe: #8c2b45;
  --radius: 10px;
  font-size: 16px;
}

/* Глобальная защита от переполнения: любой пользовательский текст без пробелов (имя опыта, заметка,
   название предмета и т.п.) переносится внутри своего блока, а не растягивает модалку/страницу
   в горизонтальный скролл. Точечные overflow-wrap на .modal/.roll-log-entry ниже — доп. подстраховка. */
* { box-sizing: border-box; overflow-wrap: break-word; }

/* Стилизованный скроллбар под тёмную тему листа — вместо системного серого, для ЛЮБОЙ прокручиваемой
   области (история бросков, модалки, списки инвентаря/каталога и т.п.). Firefox + Chrome/Edge/Safari. */
* { scrollbar-width: thin; scrollbar-color: var(--accent-dim) var(--bg-panel); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg-panel); border-radius: 10px; }
*::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 10px; border: 2px solid var(--bg-panel); }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  min-height: 100vh;
}

#app { max-width: 1100px; margin: 0 auto; padding: 20px 16px 80px; }

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--accent); margin: 0 0 12px; }
h1 { font-size: 28px; }
h2 { font-size: 20px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
h3 { font-size: 16px; color: var(--text); }

a { color: var(--accent); }

.topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
}
.topbar .title { font-family: Georgia, serif; font-size: 22px; color: var(--accent); }
.topbar .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Строка с именем вошедшего пользователя — над шапкой с кнопками (веб-версия с логином, см. app.js). */
.user-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.user-badge {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 14px; font-size: 12px; color: var(--text-dim);
}
.user-badge b { color: var(--accent); font-weight: 700; }
/* Подпись класса/подкласса под именем — тот же приглушённый стиль, что и строка "Домены:" ниже. */
.char-subtitle { color: var(--text-dim); font-size: 12px; }
.domains-label { font-weight: 700; color: var(--accent-dim); }

button, .btn {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 14px; cursor: pointer; font-size: 14px;
}
button:hover, .btn:hover { background: var(--bg-card-hover); }
button.primary { background: var(--accent-dim); border-color: var(--accent); color: #1a1a1a; font-weight: 600; }
button.primary:hover { background: var(--accent); }
button.danger { border-color: var(--danger); color: var(--danger); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.small { padding: 4px 8px; font-size: 12px; }

input, textarea, select {
  background: var(--bg-panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; font-size: 14px; font-family: inherit; width: 100%;
}
label { font-size: 12px; color: var(--text-dim); display: block; margin-bottom: 4px; }
.field { margin-bottom: 12px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }
.row > .avatar-box { flex: 0 0 auto; min-width: 0; }

.grid-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px;
}

.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; cursor: pointer; transition: border-color .15s, background .15s;
}
.card:hover { background: var(--bg-card-hover); border-color: var(--accent-dim); }
.card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.card.locked { opacity: .5; }
.card.locked:hover { background: var(--bg-card); border-color: var(--border); }
.adv-table tr.locked-row { opacity: .5; }
.card .card-title { font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.card .card-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.card .card-text { font-size: 13px; color: var(--text); line-height: 1.4; }
.card .card-tag { display: inline-block; white-space: nowrap; font-size: 11px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; margin-right: 4px; color: var(--text-dim); }

/* Таблица способностей (Родословная/Сообщество/Класс/Подкласс) — цветной заголовок раздела,
   имя способности и её описание визуально разнесены по колонкам. */
.feat-table { width: 100%; border-collapse: collapse; }
.feat-table .feat-row td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 13px; }
.feat-table .feat-row:last-child td { border-bottom: none; }
.feat-table .feat-name { font-weight: 700; color: var(--text); }
.feat-table .feat-name.collapsible { cursor: pointer; }
.feat-table .feat-name.collapsible::before { content: "▸ "; color: var(--text-dim); }
.feat-table .feat-name.collapsible.expanded::before { content: "▾ "; }
.feat-table .feat-desc { color: var(--text-dim); line-height: 1.4; }

/* Свёрнутое по умолчанию описание умения/эффекта в "Способностях"/"Активируемых эффектах" —
   клик по названию (см. .feat-name выше и .fx-name) раскрывает текст, чтобы список умещался
   на мобильном экране без стены текста. */
.fx-name { cursor: pointer; }
.fx-name::before { content: "▸ "; color: var(--text-dim); }
.fx-name.expanded::before { content: "▾ "; }
@media (min-width: 601px) {
  .feat-table .feat-name { white-space: nowrap; width: 1%; padding-right: 16px; }
}
@media (max-width: 600px) {
  .feat-table .feat-row td { display: block; padding: 4px 10px; }
  .feat-table .feat-name { padding-top: 10px; }
  .feat-table .feat-desc { padding-bottom: 10px; }
}
.feat-table .feat-section td {
  font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .03em;
  padding: 14px 10px 6px; border-bottom: 1px solid var(--border);
}
.feat-table .feat-section:first-child td { padding-top: 2px; }
.feat-table .feat-section.feat-ancestry td { color: var(--feat-ancestry); }
.feat-table .feat-section.feat-community td { color: var(--feat-community); }
.feat-table .feat-section.feat-class td { color: var(--feat-class); }
.feat-table .feat-section.feat-subclass td { color: var(--feat-subclass); }
.feat-table .feat-subsection td { font-size: 11px; color: var(--text-dim); padding: 8px 10px 2px; font-weight: 600; }

.panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }

.pip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pip {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border);
  cursor: pointer; background: transparent; flex-shrink: 0;
}
.pip.filled.hp { background: var(--hp); border-color: var(--hp); }
.pip.filled.stress { background: var(--stress); border-color: var(--stress); }
.pip.dot { width: 14px; height: 14px; border-width: 1px; }

.threshold-track { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.threshold-step {
  flex: 1; min-width: 120px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; text-align: center;
}
.threshold-name { color: var(--accent); font-weight: 600; font-family: Georgia, serif; }
.threshold-name.threshold-minor { color: var(--threshold-minor); }
.threshold-name.threshold-major { color: var(--threshold-major); }
.threshold-name.threshold-severe { color: var(--threshold-severe); }
.threshold-arrow { display: flex; align-items: center; color: var(--text-dim); font-size: 18px; }
.pip.filled.armor { background: var(--armor); border-color: var(--armor); }
.pip.filled.hope { background: var(--hope); border-color: var(--hope); }
.pip.filled.mastery { background: var(--mastery); border-color: var(--mastery); }
.pip.filled.classres { background: var(--class-resource); border-color: var(--class-resource); }

.resource-block { text-align: center; }
.resource-block .resource-label {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: .02em;
  margin-bottom: 6px; text-transform: uppercase;
}
.resource-block .pip-row { justify-content: center; }
.resource-block.resource-hp .resource-label { color: var(--hp); }
.resource-block.resource-stress .resource-label { color: var(--stress); }
.resource-block.resource-hope .resource-label { color: var(--hope); }
.resource-block.resource-mastery .resource-label { color: var(--mastery); }
.resource-block.resource-class .resource-label { color: var(--class-resource); }

.stat-block { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-block > .stat-box { flex: 1; }
.stat-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; text-align: center; min-width: 80px; }
.stat-box .stat-value { font-size: 24px; font-weight: 700; color: var(--accent); }
.stat-box .stat-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; }
.stat-box .pip-row { justify-content: center; }
.stat-box.stat-armor .stat-value, .stat-box.stat-armor .stat-label { color: var(--armor-metal); }
.stat-box.stat-evasion .stat-value, .stat-box.stat-evasion .stat-label { color: var(--evasion); }

.resource-hint { display: block; font-size: 10px; font-weight: 400; text-transform: none; color: var(--text-dim); letter-spacing: 0; margin-top: 1px; }

.trait-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 140px)); gap: 10px; align-items: stretch; justify-content: center; }
@media (max-width: 420px) {
  .trait-grid { grid-template-columns: repeat(2, 1fr); }
}
.trait-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px;
  text-align: center; cursor: pointer; display: flex; flex-direction: column;
}
.trait-box .trait-name { font-size: 11px; color: var(--text-dim); text-transform: uppercase; }
.trait-box .trait-value { font-size: 22px; font-weight: 700; }
.trait-box button { margin-top: auto; }

.tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); overflow-x: auto; flex-wrap: nowrap; }
.tab { padding: 8px 14px; cursor: pointer; color: var(--text-dim); border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
.tab.active { color: var(--accent); border-color: var(--accent); }

/* Группировка вкладок на листе персонажа: "боевой" ряд (карты/способности/эффекты/бафы) визуально
   отделён от "справочного" (инвентарь/заметки и т.п.) — подпись сверху + вкладки-таблетки вместо
   обычного подчёркивания, чтобы на мобильном было сразу понятно, что это два разных набора. */
.tabs-group-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin: 12px 0 4px; }
.tabs-group:first-child .tabs-group-label { margin-top: 0; }
.tabs.tabs-action { border-bottom: none; margin-bottom: 8px; }
.tab-chip { border-radius: 999px; padding: 6px 14px; background: var(--bg-card); border: 1px solid var(--border); }
.tab-chip.active { background: var(--accent-dim); color: #1a1a1a; font-weight: 600; border-color: var(--accent); }

.wizard-steps { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.wizard-step { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--bg-card); color: var(--text-dim); }
.wizard-step.active { background: var(--accent-dim); color: #1a1a1a; font-weight: 600; }
.wizard-step.done { background: var(--armor); color: #1a1a1a; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; overflow-wrap: break-word; }

.item-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.item-row input[type=text] { flex: 2; }
.item-row input[type=number] { flex: 0 0 60px; }

.inv-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; margin-bottom: 8px; background: var(--bg-card); }
.inv-item-head { display: flex; gap: 8px; align-items: center; }
.inv-item-head .inv-name { flex: 2; }
.inv-item-head .inv-qty { flex: 0 0 56px; }
.inv-item-head .inv-cost { flex: 0 0 110px; }
.inv-item .inv-info { width: 100%; margin-top: 6px; resize: vertical; font-size: 12px; }

.list-inline { list-style: none; padding: 0; margin: 0; }
.list-inline li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.list-inline li:last-child { border-bottom: none; }

.muted { color: var(--text-dim); font-size: 12px; }
.roll-result { font-size: 18px; margin: 10px 0; }
.roll-result .big { font-size: 28px; font-weight: 700; color: var(--accent); }
.tag-hope { color: var(--roll-hope); }
.tag-fear { color: var(--roll-fear); }
.tag-crit { color: var(--roll-crit); font-weight: 700; }

.roll-result.outcome-hope { border-left: 3px solid var(--roll-hope); padding-left: 10px; }
.roll-result.outcome-fear { border-left: 3px solid var(--roll-fear); padding-left: 10px; }
.roll-result.outcome-crit { border-left: 3px solid var(--roll-crit); padding-left: 10px; }

/* Преимущество/Помеха в модалке настройки броска — взаимоисключающие кнопки-переключатели вместо чекбоксов. */
.roll-toggle-btn { border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.roll-toggle-btn.adv-active { background: var(--armor); border-color: var(--armor); color: #fff; }
.roll-toggle-btn.dis-active { background: var(--hp); border-color: var(--hp); color: #fff; }

.adv-table { width: 100%; border-collapse: collapse; }
.adv-table td { padding: 8px 8px; border-bottom: 1px solid var(--border); }
.adv-table td.ctrl-cell { text-align: center; width: 56px; }
.feature-toggle-table .ctrl-cell { width: auto; min-width: 150px; }
/* Карты с накопительными жетонами (см. JETON_POOL_DEFS в calc.js) — несколько кнопок сразу
   (+1/−1, активация, восполнение, трата), без flex на самом <td> (ломает табличную раскладку
   и наезжает на соседнюю колонку) — flex только на вложенных строках, с переносом. */
.jeton-ctrl-cell { max-width: 220px; text-align: left; }
/* flex-start (не flex-end) — иначе левый край кнопок "гуляет" от строки к строке в зависимости от
   того, сколько кнопок и насколько длинные подписи в конкретной способности; так все кнопки в
   колонке начинаются от одного и того же края и визуально выстраиваются в ряд. */
.jeton-btn-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; }

/* Выбранное число "Странных закономерностей" и подобных — крупно, рядом с кнопкой смены (не внизу
   вместе с описанием), чтобы было видно с первого взгляда, не читая текст способности. */
.number-pattern-value { font-size: 20px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.jeton-amount { width: 52px; }

/* Кнопки способностей "раз за отдых" — пилюли, зажигаются цветом Надежды при использовании. */
.use-slot-btn { border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 600; margin: 2px; }
.use-slot-btn.used { background: var(--hope); border-color: var(--hope); color: #1a1a1a; }
/* Кнопки выбора Опыта в модалке броска — очень длинное название (без пробелов) не должно
   растягивать модалку в горизontальный скролл: ограничиваем ширину и переносим текст внутри пилюли. */
#exp-btn-list, #comp-exp-btn-list { min-width: 0; }
#exp-btn-list button, #comp-exp-btn-list button {
  max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left;
}
/* Кнопки способностей с ценой (Надежда/Стресс/ресурс класса) — прямоугольные, зажигаются цветом Мастерства при применении. */
.apply-toggle-btn { border-radius: 6px; font-weight: 600; }
.apply-toggle-btn.applied { background: var(--mastery); border-color: var(--mastery); color: #1a1a1a; }
.card-token-count { font-size: 22px; font-weight: 700; color: var(--card-token); margin-top: 6px; }

.toggle-panel .toggle-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.toggle-panel .toggle-row:last-child { border-bottom: none; }
.toggle-panel .toggle-row input { margin-top: 3px; flex-shrink: 0; width: auto; }
.toggle-panel .toggle-row .toggle-text { font-size: 13px; }
.toggle-panel .toggle-row .toggle-text b { color: var(--accent); }
.badge {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--accent); color: var(--accent); margin-left: 4px; white-space: nowrap;
}

.dice-wheel-btn, .dice-wheel-center {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; cursor: pointer; user-select: none;
  background: var(--bg-card); border: 2px solid var(--border); color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.dice-wheel-btn:hover { background: var(--bg-card-hover); border-color: var(--accent-dim); }
.dice-wheel-btn.active { border-color: var(--accent); color: var(--accent); background: var(--bg-card-hover); }
.dice-wheel-center { background: var(--bg); border-color: var(--border); font-size: 22px; color: var(--text-dim); cursor: pointer; }
.dice-wheel-center:hover { color: var(--danger); border-color: var(--danger); }

.roll-log { max-height: 220px; overflow-y: auto; }
.roll-log-entry {
  padding: 5px 6px; border-radius: 6px; margin-bottom: 4px;
  font-size: 12px; background: var(--bg-card);
}
.roll-log-entry .roll-log-row { display: flex; gap: 8px; align-items: baseline; }
.roll-log-entry .n { color: var(--text-dim); flex-shrink: 0; width: 22px; }
.roll-log-entry .icon { flex-shrink: 0; }
.roll-log-entry .label { flex: 1; color: var(--text); }
.roll-log-entry .total { font-weight: 700; }
.roll-log-entry.outcome-hope { border-left: 3px solid var(--roll-hope); }
.roll-log-entry.outcome-fear { border-left: 3px solid var(--roll-fear); }
.roll-log-entry.outcome-crit { border-left: 3px solid var(--roll-crit); background: rgba(224, 165, 39, .12); }
.roll-log-entry.outcome-crit .total { color: var(--roll-crit); }
.roll-log-entry .note { color: var(--text-dim); font-style: italic; margin-top: 2px; }
.roll-log-entry .roll-log-breakdown { color: var(--text-dim); margin-top: 2px; }

.footer-actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border); margin-top: 16px; }

.avatar-box {
  flex-shrink: 0; border-radius: var(--radius); border: 2px solid var(--border); background: var(--bg-card);
  cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.avatar-box:hover { border-color: var(--accent-dim); }
.avatar-box img { width: 100%; height: 100%; object-fit: cover; }
.avatar-plus { font-size: 24px; color: var(--text-dim); }
.avatar-box.avatar-player { border-width: 3px; border-color: var(--accent); }
.avatar-box.avatar-player:hover { border-color: var(--accent); }