/* Основы пульта: единственное место, где живёт внешний вид.
 *
 * То же самое нарисовано артбордом «Основы» на дизайн-канве «Пульт Madhouse»
 * (claude.ai/artifact/3Ut1dgd9ppb4K84Ljnkqeb). Порядок работы: сначала правка на канве,
 * посмотреть на ней же рядом с остальными экранами, потом перенести сюда. Иначе канва
 * и пульт разъезжаются, и оба перестают быть правдой.
 *
 * Правила оформления владельца (из В КУРСЕ/CLAUDE.md): числа моноширинные и не полужирные,
 * одного цвета, кегль вровень с текстом строки; подписи словами; прирост со знаком;
 * в таблицах всё после названия строки прижато вправо; точек-разделителей в текстах нет;
 * декоративных индикаторов не делать.
 */
  /* ——————————————————————————————————————————— дизайн-система
     Тёплая приборная панель: почти чёрная база, янтарь на действиях, карточки с воздухом.
     Правила оформления владельца: числа моноширинные и не полужирные, одного цвета, кегль
     скромный; подписи словами; прирост со знаком; в таблицах всё после названия строки вправо;
     точек-разделителей в текстах нет. */
  :root {
    /* Вторая версия (23.09): тёплая база по цветам клиента игры, доллары отдельно от прибыли. */
    --фон: #100e0c;
    --карта: #171411;
    --глубже: #201b17;
    --линия: #2e2620;
    --текст: #eee1c7;
    --тихий: #a39684;
    --полоса: #b8a888;
    --янтарь: #d3a049;
    --янтарь-тень: #3a2c14;
    --янтарь-тихий: #6c532a;
    --тревога: #d0694f;
    --рост: #9dba6a;
    --доллары: #5cbfa0;
    --таблетки: #79ade0;
    --здоровье: #d9667a;
    --урон: #e0874a;
    --о1: 4px; --о2: 8px; --о3: 12px; --о4: 16px; --о5: 24px; --о6: 32px;
    /* Углы прямые везде, не только у кнопок (23.09): было пять разных скруглений. */
    --радиус: 0; --радиус2: 0;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--фон); color: var(--текст);
    font: 14px/1.5 "Segoe UI", -apple-system, system-ui, sans-serif;
  }
  h2 { font-size: 16px; font-weight: 600; margin: 0; }
  /* Пояснение под заголовком слипалось и с ним, и с первой строкой: в оружии, мутагенах
     и автосливе это читалось одним комком. Отступ задаём здесь, а не по месту. */
  h2 + .подпись, .шапка-карты + .подпись { margin-top: var(--о2); }
  .подпись + .строка, .подпись + .вкладки, .подпись + table, .подпись + .кнопки { margin-top: var(--о4); }
  h3 { font-size: 12px; font-weight: 400; margin: var(--о5) 0 var(--о2); color: var(--тихий); }
  .тихо { color: var(--тихий); }
  .мелко { font-size: 12px; }
  .число, td + td, th + th { font-variant-numeric: tabular-nums; }

  /* ——— шапка ——— */
  .шапка {
    position: sticky; top: 0; z-index: 10; background: var(--фон);
    display: flex; align-items: center; gap: var(--о5); flex-wrap: wrap;
    padding: var(--о3) var(--о5); border-bottom: 1px solid var(--линия);
  }
  .марка { font-size: 16px; font-weight: 600; width: 188px; flex: none; }
  /* Шапка разбита на три смысловые группы: кто я и чем воюю, что в кошельке, что в клан.
     Разделитель линией, а не пустотой: пустота на широком экране не читается как граница. */
  .плитки { display: flex; gap: var(--о4); flex-wrap: wrap; align-items: center; }
  .группа-плиток { display: flex; gap: var(--о5); flex-wrap: wrap; }
  .разделитель { width: 1px; align-self: stretch; background: var(--линия); }
  .плитка { display: flex; flex-direction: column; line-height: 1.3; }
  .плитка b { font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }
  .плитка > span { font-size: 12px; color: var(--тихий); }
  .плитка i { font-style: normal; color: var(--рост); }
  .плитка.мало b { color: var(--тревога); }
  .справа { margin-left: auto; display: flex; align-items: center; gap: var(--о2); }
  .занят { display: flex; align-items: center; gap: var(--о2); font-size: 12px; }
  .занят[hidden] { display: none; }
  .точка { width: 7px; height: 7px; border-radius: 50%; background: var(--янтарь); animation: пульс 1.1s infinite; }
  @keyframes пульс { 50% { opacity: .25; } }

  /* ——— сетка ——— */
  .сетка {
    display: grid; grid-template-columns: 212px minmax(0, 1fr);
    gap: var(--о5); padding: 20px var(--о5) var(--о6) 0; align-items: start;
  }
  @media (max-width: 1000px) { .сетка { grid-template-columns: 1fr; padding-left: var(--о5); } .колонка-меню { position: static; } }
  .колонка-меню { position: sticky; top: 76px; padding-left: var(--о3); }
  .черта-меню { height: 1px; background: var(--линия); margin: var(--о2) var(--о3); }
  /* Лог поверх правого края: открывается кнопкой в шапке. */
  .лог-окно { position: fixed; top: 64px; right: var(--о4); width: 440px; max-width: calc(100% - 32px); z-index: 30;
    margin: 0; box-shadow: 0 16px 48px rgba(0,0,0,.6); border: 1px solid var(--линия); }
  .лог-окно[hidden] { display: none; }

  /* ——— меню ——— */
  nav { display: flex; flex-direction: column; gap: 1px; }
  nav button {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 34px;
    text-align: left; background: none; border: 0; color: var(--тихий);
    padding: 0 var(--о3); border-radius: 0; font: inherit; cursor: pointer;
  }
  nav button svg { width: 16px; height: 16px; flex: none; }
  nav button .имя { flex: 1; white-space: nowrap; }
  nav button:hover { color: var(--текст); background: var(--карта); }
  nav button.активен { background: var(--карта); color: var(--текст); box-shadow: inset 2px 0 0 var(--янтарь); }
  nav button.активен svg { color: var(--янтарь); }
  .бейдж {
    padding: 0; text-align: right;
    background: none; color: var(--тихий); font-size: 12px; font-variant-numeric: tabular-nums;
  }
  nav button.активен .бейдж { color: var(--текст); }

  /* ——— карточки ——— */
  section {
    background: var(--карта); border: 0; border-radius: 0;
    padding: 20px var(--о5); margin-bottom: var(--о4);
  }
  section.акцент { box-shadow: inset 0 0 0 1px var(--тревога); }
  .шапка-карты { display: flex; align-items: baseline; justify-content: space-between; gap: var(--о3); margin-bottom: var(--о3); }
  .подпись { color: var(--тихий); font-size: 12px; margin: calc(-1 * var(--о2)) 0 var(--о3); }
  .пусто { color: var(--тихий); font-size: 14px; padding: var(--о5) 0; text-align: center; }

  /* ——— строки целей: имя слева, числа и кнопки справа ——— */
  .строка {
    display: flex; align-items: center; gap: var(--о3);
    padding: 12px 0; border-top: 1px solid var(--линия);
  }
  .строка:first-of-type { border-top: 0; }
  .строка .имя { flex: 1; min-width: 0; }
  .строка .имя b { font-weight: 400; }
  .строка .имя .мелко { color: var(--тихий); }
  .строка .числа { display: flex; gap: var(--о4); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .строка .числа b { font-weight: 400; color: var(--текст); }
  .строка .дела { display: flex; align-items: center; gap: var(--о2); flex-wrap: nowrap; }

  table { width: 100%; border-collapse: collapse; }
  th { font-weight: 400; color: var(--тихий); font-size: 12px; text-align: left; padding: 0 0 var(--о2); }
  th + th, td + td { text-align: right; }
  td { padding: 10px 0; vertical-align: middle; }
  tr + tr td { border-top: 1px solid var(--линия); }
  td.имя, th.имя { text-align: left; }

  /* ——— кнопки ——— */
  button.главная, button.обычная, button.тихая {
    font: inherit; border-radius: var(--радиус2); cursor: pointer; white-space: nowrap;
    border: 1px solid var(--линия); background: var(--глубже); color: var(--текст); padding: 8px 14px;
  }
  /* Главная того же размера, что и прочие кнопки: крупнее текста рядом её делать незачем (23.09). */
  button.главная { background: var(--янтарь); border-color: var(--янтарь); color: #1a140a; font-size: 13px; padding: 6px 12px; }
  button.главная:hover { filter: brightness(1.07); }
  button.обычная:hover, button.тихая:hover { border-color: var(--янтарь); }
  /* Обычная кнопка без рамки: подложка заметнее, чем у тихой (владелец, 23.09). */
  /* Кнопка не крупнее текста вокруг (владелец, 23.09): 13 точек и небольшие отступы. */
  button.обычная { border-color: transparent; background: color-mix(in srgb, var(--янтарь) 18%, transparent); color: var(--янтарь);
    font-size: 13px; padding: 6px 12px; }
  button.обычная:hover { border-color: transparent; background: color-mix(in srgb, var(--янтарь) 32%, transparent); }
  /* Тихая кнопка без рамки (владелец, 23.09: «обводки заебли»): видна по цвету, при наведении фон. */
  /* Тихая кнопка: без рамки, но с лёгкой подложкой — иначе её не отличить от текста (владелец, 23.09). */
  /* Кнопки цветом пульта (владелец, 23.09: «цвет у всех кнопок такой же, как у всего остального»):
     янтарный текст на янтарной подложке, без рамки. Главная — залитая. */
  /* Три уровня кнопок, чтобы не все были одинаковыми «таблетками» (владелец, 23.09):
     главная — залитая, обычная — заметная янтарная подложка, тихая — та же форма, подложка бледнее и шрифт мельче.
     Голый текст кнопкой не делать: владелец его не узнаёт как кнопку. */
  button.тихая { background: color-mix(in srgb, var(--янтарь) 9%, transparent); border-color: transparent; color: var(--янтарь);
    padding: 4px 10px; font-size: 12px; }
  button.тихая:hover { background: color-mix(in srgb, var(--янтарь) 22%, transparent); border-color: transparent; }
  button.опасная { border-color: var(--тревога); color: var(--тревога); }
  button:disabled { opacity: .35; cursor: default; border-color: var(--линия); filter: none; }
  button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--янтарь); outline-offset: 1px; }
  .кнопки { display: flex; gap: var(--о2); flex-wrap: wrap; align-items: center; }

  input[type="number"], input[type="text"], select {
    font: inherit; color: var(--текст); background: var(--глубже);
    border: 1px solid var(--линия); border-radius: 0; padding: 0 8px; height: 28px;
    width: 96px; text-align: right; font-variant-numeric: tabular-nums;
  }
  input.раз { width: 48px; }
  select { text-align: left; width: 150px; }
  /* Выбор мутагена: в строке помещается название, прибавка и цена, и всё это надо видеть
     до нажатия, а не после. */
  select.широкий { width: 270px; }
  input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--янтарь); }

  /* ——— полосы и метки ——— */
  .полоса { height: 4px; background: var(--линия); overflow: hidden; margin-top: 6px; }
  .полоса i { display: block; height: 100%; background: var(--полоса); }
  .полоса.тихая i { background: var(--линия); }
  .подпись a, .мелко a { color: var(--янтарь); text-decoration: none; }
  /* Кнопка у свёрнутого блока: без неё владелец не понял, что шапка раскрывается (23.09). */
  .раскрыть { display: inline-flex; align-items: center; height: 28px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--янтарь-тихий);
    color: var(--янтарь); font-size: 12px; }
  .раскрыть::before { content: 'показать'; }
  details[open] > summary .раскрыть::before { content: 'скрыть'; }
  summary:hover .раскрыть { background: color-mix(in srgb, var(--янтарь) 12%, transparent); border-color: var(--янтарь); }
  summary::-webkit-details-marker { display: none; }
  .подпись a:hover, .мелко a:hover { text-decoration: underline; }
  /* Состав характеристики: куски одного цвета разной густоты, подпись в том же порядке. */
  .полоса.состав { display: flex; height: 6px; gap: 1px; background: transparent; }
  .полоса.состав i { flex: none; }
  .полоса.состав i:first-child { border-radius: 2px 0 0 2px; }
  .полоса.состав i:last-child { border-radius: 0 2px 2px 0; }
  .состав-подпись { display: flex; flex-wrap: wrap; gap: 2px var(--о3); margin-top: 6px; font-size: 12px; color: var(--тихий);
    font-variant-numeric: tabular-nums; }
  .состав-подпись .кусок i { display: inline-block; width: 7px; height: 7px; background: var(--полоса);
    margin-right: 5px; vertical-align: 0; }
  .строка.стат .крупно { font-size: 20px; font-weight: 400; font-variant-numeric: tabular-nums; }
  /* Название с заглавной, отступы до числа и до «сегодня» — по одному пробелу, одинаковые во всех строках. */
  .строка.стат .стат-верх b { display: inline-block; }
  .строка.стат .стат-верх b::first-letter { text-transform: uppercase; }
  .полоса.узкая { width: 96px; margin-left: auto; }
  .метка {
    display: inline-flex; align-items: center; gap: 5px; padding: 0; margin-left: 6px;
    background: none; color: var(--тихий); font-size: 12px; font-weight: 400;
  }
  .метка i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
  .метка.идёт { background: none; color: var(--тревога); margin-left: 0; }

  /* ——— вкладки ——— */
  .вкладки { display: flex; gap: var(--о1); margin-bottom: var(--о4); border-bottom: 1px solid var(--линия); }
  .вкладки button {
    background: none; border: 0; border-bottom: 2px solid transparent; color: var(--тихий);
    font: inherit; padding: 8px 14px; cursor: pointer; margin-bottom: -1px;
  }
  .вкладки button:hover { color: var(--текст); }
  .вкладки button.тихо { opacity: .55; }
  .считаю { font-size: 12px; font-weight: 400; color: var(--тихий); margin-left: var(--о2); animation: пульс 1.4s ease-in-out infinite; }
  /* Сразу под вкладками линию строки не рисуем: получались две линии подряд. */
  .вкладки + .строка { border-top: 0; }
  .вкладки button.активна { color: var(--текст); border-bottom-color: var(--янтарь); }
  .вкладки .справа-вкладок { margin-left: auto; display: flex; align-items: center; gap: var(--о2); padding-bottom: 6px; }
  /* Переключатель внутри блока: слитные ячейки, выбранная светлее (23.09, канва v2). */
  .переключатель { display: inline-flex; flex-wrap: wrap; }
  .переключатель button { font: inherit; font-size: 12px; height: 28px; padding: 0 10px; margin-left: -1px; cursor: pointer;
    background: transparent; border: 1px solid var(--линия); color: var(--тихий); border-radius: 0; font-variant-numeric: tabular-nums; }
  .переключатель button:first-child { margin-left: 0; }
  .переключатель button:hover { color: var(--текст); }
  .переключатель button.активна { background: var(--глубже); color: var(--текст); }
  /* Ячейки сводки: подпись сверху, число 20, служебное снизу. */
  .ячейки { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--о4) var(--о5); }
  .ячейка { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .ячейка > span { font-size: 12px; color: var(--тихий); }
  .ячейка > b { font-size: 20px; font-weight: 400; line-height: 1.3; font-variant-numeric: tabular-nums; }
  .ячейка > em { font-style: normal; font-size: 12px; color: var(--тихий); font-variant-numeric: tabular-nums; }
  /* Панель галок «все, отмечено N из M» — внутри своего списка, над строками. */
  .кнопки.пачка { padding-bottom: var(--о3); }
  .ряд-выбора { display: flex; align-items: center; justify-content: space-between; gap: var(--о3); flex-wrap: wrap; margin-bottom: var(--о3); }
  .колонка-дел { min-width: 168px; justify-content: flex-end; }
  /* Сводка и главное действие раздела рядом (бои). */
  .сводка-с-делом { display: flex; align-items: flex-end; gap: var(--о6); }
  .сводка-с-делом .ячейки { flex: 1; }
  /* Свои комплекты и наборы карточками по две (23.09): строки во всю ширину оставляли пустую середину. */
  .сетка-комплектов { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--о6); }
  .сетка-комплектов > .строка { flex-direction: column; align-items: stretch; gap: var(--о2); border-top: 1px solid var(--линия); }
  .сетка-комплектов > .строка .числа { order: -1; position: absolute; }
  .сетка-комплектов > .строка { position: relative; }
  .сетка-комплектов > .строка .числа { top: 12px; right: 0; }
  .сетка-комплектов > .строка .дела { justify-content: flex-end; }
  .сетка-комплектов > .строка .дела:empty { display: none; }
  @media (max-width: 1100px) { .сетка-комплектов { grid-template-columns: 1fr; } }

  /* ——— правая колонка ——— */
  .строка-списка { display: flex; align-items: center; gap: var(--о2); padding: var(--о3) 0; font-size: 14px; }
  .строка-списка + .строка-списка { border-top: 1px solid var(--линия); }
  .строка-списка .название { flex: 1; min-width: 0; }
  .строка-списка .сбоку { color: var(--тихий); font-variant-numeric: tabular-nums; }
  pre.лог {
    margin: 0; padding: var(--о3); background: #0a0c0f; border: 1px solid var(--линия);
    border-radius: var(--радиус2); max-height: 260px; overflow: auto;
    font: 12px/1.6 ui-monospace, Consolas, monospace; white-space: pre-wrap;
  }

  /* ——— плашки итога ——— */
  .плашки { position: fixed; right: var(--о4); bottom: var(--о4); z-index: 20; display: flex; flex-direction: column; gap: var(--о2); max-width: 360px; }
  .плашка {
    background: var(--глубже); border: 1px solid var(--линия);
    border-radius: 0; padding: var(--о3) var(--о4); font-size: 14px; cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: въехала .18s ease-out;
  }
  .плашка.плохо { border-color: var(--тревога); }
  .плашка b { font-weight: 400; }
  .плашка div { color: var(--тихий); font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
  @keyframes въехала { from { opacity: 0; transform: translateY(8px); } }

  /* ——— закреплённые ——— */
  .закреп { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--о2); }
  .слот {
    display: flex; align-items: center; gap: var(--о2); padding: 10px var(--о3);
    background: var(--глубже); border: 1px solid var(--линия); border-radius: var(--радиус2);
  }
  .слот button.сразу { flex: 1; text-align: left; background: none; border: 0; color: var(--текст); font: inherit; cursor: pointer; padding: 0; }
  .слот button.снять { background: none; border: 0; color: var(--тихий); cursor: pointer; font: inherit; padding: 0 2px; }
  .слот button.снять:hover { color: var(--тревога); }

  .подсказка { display: flex; align-items: center; gap: var(--о4); padding: 11px 0; }
  .подсказка + .подсказка { border-top: 1px solid var(--линия); }
  .подсказка span { flex: 1; }

  /* Грани костей и карты: моноширинно, чтобы серия читалась столбиком. */
  .грани, .карты { font-variant-numeric: tabular-nums; letter-spacing: .08em; }

  /* Показатели работы бота: подпись сверху мелким, число снизу. Число крупнее текста строки,
     но не полужирное и одного цвета со всем остальным — по правилам оформления владельца. */
  .показатели { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--о2); }
  .показатель {
    background: var(--глубже); border: 1px solid var(--линия); border-radius: var(--радиус2);
    padding: 10px var(--о3); display: flex; flex-direction: column; gap: 2px;
  }
  .показатель span { font-size: 11px; color: var(--тихий); }
  .показатель b { font-size: 17px; font-weight: 400; font-variant-numeric: tabular-nums; }
  .показатель i { font-style: normal; color: var(--рост); font-size: 13px; }

  /* Портреты игроков приходят из игры готовой ссылкой. Размер один на все списки: людей
     в клане два с половиной десятка, и разнобой в размерах сразу ломает ряд. */
  .портрет {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    background: var(--глубже); border: 1px solid var(--линия); object-fit: cover;
  }
  .портрет.мелкий { width: 24px; height: 24px; }
  /* Точка «в сети» стоит у портрета, а не отдельной колонкой: так её видно, не читая строку. */
  .вместе { position: relative; flex: none; }
  .вместе .всети {
    position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--рост); border: 2px solid var(--карта);
  }
  /* Место в рейтинге: цифра слева от портрета, моноширинная, чтобы ряд не прыгал. */
  .место { width: 26px; text-align: right; color: var(--тихий); font-variant-numeric: tabular-nums; }

  /* Картинки предметов. Игра рисует их на тёмном фоне без подложки, поэтому квадрат с рамкой
     нужен: иначе прозрачные края сливаются с карточкой и предмет выглядит обрезанным.
     Размер один на всё: и мутаген, и вещь, и татуха читаются с одного расстояния. */
  .штучка {
    width: 40px; height: 40px; flex: none; object-fit: contain;
    background: var(--глубже); border: 1px solid var(--линия); border-radius: var(--радиус2); padding: 3px;
  }
  .штучка.крупная { width: 56px; height: 56px; }
  /* Надетое отмечаем рамкой картинки, а не ещё одним словом рядом с именем. */
  .штучка.надето { border-color: var(--янтарь); }

  /* Ряд предметов: три картинки и кнопка с остатком, по ней открывается окошко со всем списком.
     Один узор на весь пульт — раньше на этом месте было перечисление через запятую на полторы
     строки, и прочитать его было нельзя. */
  .ряд { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; vertical-align: middle; }
  .штучка-обёртка { position: relative; display: inline-flex; flex: none; }
  .штучка-обёртка.тускло { opacity: .45; }
  /* Счётчик сидит на углу картинки: отдельной колонкой он растянул бы ряд вдвое. */
  .счётчик {
    position: absolute; right: -3px; bottom: -4px; font-weight: 400; font-size: 11px;
    font-variant-numeric: tabular-nums; background: var(--фон); border: 1px solid var(--линия);
    border-radius: 6px; padding: 0 4px; color: var(--текст);
  }
  .пусто-картинка { display: inline-block; }
  button.ещё {
    font: inherit; font-size: 12px; height: 40px; padding: 0 10px; border-radius: var(--радиус2);
    border: 0; background: none; color: var(--янтарь); cursor: pointer;
    font-variant-numeric: tabular-nums;
  }
  button.ещё:hover { color: var(--текст); border-color: var(--тихий); }

  /* Окошко со всем списком. Затемнение поверх страницы, карточка по центру сверху: список
     бывает на тридцать строк, и по центру экрана он упирался бы в края. */
  /* `display` из класса перебивает атрибут `hidden`, поэтому прятать надо явно:
     иначе окошко висит поверх страницы с самого открытия. */
  .затемнение[hidden] { display: none; }
  .затемнение {
    position: fixed; inset: 0; z-index: 50; background: rgba(6, 8, 10, .72);
    display: flex; justify-content: center; align-items: flex-start; padding: 8vh var(--о4) var(--о4);
    overflow: auto;
  }
  .окошко-карта {
    width: 420px; max-width: 100%; background: var(--карта); border: 1px solid var(--линия);
    border-radius: var(--радиус); padding: var(--о4) var(--о5); max-height: 76vh; overflow: auto;
  }
  .строка.тускло { opacity: .5; }
  img.штучка.тускло { opacity: .45; }
  /* Сетка карточек: однотипные вещи (бизнесы, предметы) рядом, а не строками во всю ширину. */
  .сетка-карточек { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--о4) var(--о5, 32px); margin-top: var(--о3); }
  .сетка-карточек.узкая { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  /* Карточка без фона и рамки: блоки в рамках владелец не хочет (23.09), рамку оставили картинкам
     предметов, чтобы те не висели в воздухе. Карточки разделяет отступ сетки. */
  .карточка { padding: var(--о3) 0 var(--о2); border-top: 1px solid var(--линия); display: flex; flex-direction: column; gap: var(--о2); }

  .низ-карточки .тихо { font-size: 12px; }
  .карточка .полоса { margin-top: 0; background: var(--линия); }
  .низ-карточки { margin-top: auto; padding-top: var(--о2); display: flex; justify-content: flex-end; }
  .предметы-ряд { display: flex; flex-wrap: wrap; gap: var(--о2) var(--о3); }
  .предмет-счёт { display: inline-flex; align-items: center; gap: 6px; line-height: 1.25; }
  .вместе-ряд { display: flex; align-items: center; gap: var(--о2); }
  /* Пустой слот: сама вещь и есть кнопка. Без рамки, при наведении лёгкий фон. */
  .плитки-слотов { display: flex; flex-wrap: wrap; gap: 2px; }
  button.слот { font: inherit; background: color-mix(in srgb, var(--янтарь) 7%, transparent); border: 0; border-radius: var(--радиус2); padding: 6px 4px; width: 76px;
    display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--тихий); font-size: 12px; }
  button.слот img { width: 40px; height: 40px; object-fit: contain; }
  button.слот:hover { background: color-mix(in srgb, var(--янтарь) 20%, transparent); color: var(--янтарь); }
  .комплект-слотов { flex: 0 0 150px; }
  /* Действие ссылкой: без рамки и фона, для второстепенного («снять»). */
  button.ссылка { font: inherit; font-size: 12px; border: 0; border-radius: var(--радиус2); padding: 4px 10px; cursor: pointer;
    background: color-mix(in srgb, var(--янтарь) 9%, transparent); color: var(--янтарь); }
  button.ссылка:hover { background: color-mix(in srgb, var(--янтарь) 22%, transparent); }
  /* Лестница уровней мутагена: ступень — картинка со счётчиком, имя уровня, под ней «→ N», если
     из этой ступени можно собрать следующую. */
  .лестница { display: flex; flex-wrap: wrap; gap: var(--о2) var(--о3); margin-top: var(--о3); }
  .ступень { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  /* Варианты одного действия (прокачка за три валюты) — тихие кнопки в ряд с отступом. */
  .группа-кнопок { display: inline-flex; gap: var(--о4); }
  .группа-кнопок .дела { display: contents; }
  .группа-кнопок button i { font-style: normal; opacity: .65; margin-left: 3px; }
  .ряд-штук { display: flex; gap: 4px; flex-wrap: wrap; }
  table.таблица-строк td { vertical-align: middle; }
  /* Тип мутагена раскрывается нажатием на строку: подсветка при наведении, у раскрытого фон. */
  .тип-мутагена.раскрываемый { cursor: pointer; }
  .лестница-действие { margin-left: auto; align-self: flex-start; height: var(--высота-иконки, 40px); display: flex; align-items: center; }
  /* Состояние в колонке кнопок: отступ как у текста внутри кнопки, чтобы надписи шли с одной линии. */
  .статус-как-кнопка { display: inline-block; padding: 3px 10px; border: 1px solid transparent; font-size: 12px; line-height: 18.6px; }
  .мутаген-в-вещи { display: flex; align-items: center; justify-content: space-between; gap: var(--о3); }
  .две-колонки.ровно { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .стат-верх, .стат-низ { display: flex; align-items: center; justify-content: space-between; gap: var(--о3); }
  .стат-верх { margin-bottom: var(--о2); }
  .стат-низ { align-items: flex-start; }
  .стат-низ > .тихо { white-space: nowrap; margin-top: 6px; }
  .ступень-имя { font-size: 11px; color: var(--тихий); font-variant-numeric: tabular-nums; }
  .шаг-сборки input.раз { width: 60px; padding: 4px 8px; font-size: 12px; }
  .список-сборки { margin-top: var(--о3); border-top: 1px solid var(--линия); padding-top: var(--о2); }
  .шаг-сборки { display: flex; align-items: center; justify-content: space-between; gap: var(--о3); flex-wrap: wrap;
    margin-top: var(--о2); font-size: 12px; }
  /* Таблица строк: компактный список с парой колонок и действием справа. */
  table.таблица-строк td { padding: 10px 0; border-top: 1px solid var(--линия); font-size: 14px; }
  table.таблица-строк tr:first-child td { border-top: 0; }
  table.таблица-строк td + td, table.таблица-строк th + th { padding-left: var(--о4); }
  h3.подзаголовок { font-size: 12px; font-weight: 400; color: var(--тихий); margin: var(--о4) 0 0; }
  /* Основной блок и узкая колонка-подсказка рядом. На узком экране колонка уходит вниз. */
  .две-колонки { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--о4); align-items: start; }
  /* Раздел и его колонка: очередь у боссов, «Последние» у истории, «Бот сам» у настроек. */
  .две-колонки.широкая { grid-template-columns: minmax(0, 1fr) 340px; }
  .две-колонки.широкая > div > section:last-child { margin-bottom: 0; }
  .две-колонки.широкая > div:last-child > section { margin: 0 0 var(--о4); }
  /* Поле количества одной группой: число и быстрые значения слитно. */
  .количество { display: inline-flex; align-items: center; }
  .количество button.быстро { font: inherit; font-size: 12px; height: 28px; min-width: 28px; padding: 0 8px; margin-left: -1px;
    background: transparent; border: 1px solid var(--линия); color: var(--тихий); cursor: pointer; font-variant-numeric: tabular-nums; }
  .количество button.быстро:hover { color: var(--текст); border-color: var(--тихий); position: relative; }
  /* Галка настроек слева от подписи. */
  .строка.строка-галки { justify-content: flex-start; align-items: flex-start; cursor: pointer; }
  .строка.строка-галки .дела { padding-top: 2px; }
  .две-колонки > section { margin: 0; }
  @media (max-width: 1100px) { .две-колонки { grid-template-columns: 1fr; } }
  .форма-узкая { display: flex; flex-direction: column; gap: var(--о2); margin-top: var(--о3); }
  .форма-узкая select { width: 100%; }
  .форма-узкая + .подпись { margin-top: var(--о3); }
  .форма-узкая label { display: flex; align-items: center; justify-content: space-between; gap: var(--о2); }
  .мелко.тревога, .строка .имя .мелко.тревога { color: var(--тревога); }

  /* Ряд недостающих штук набора: картинка, цена под ней, кнопка. Переносится, а не прокручивается:
     горизонтальная прокрутка внутри строки прячет половину ряда. */
  .полоска { display: flex; flex-wrap: wrap; gap: var(--о2); margin-top: var(--о2); }
  .штука {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 58px; text-align: center;
  }
  .штука img {
    width: 40px; height: 40px; object-fit: contain;
    background: var(--глубже); border: 1px solid var(--линия); border-radius: var(--радиус2); padding: 3px;
  }
  .штука .мелко { font-variant-numeric: tabular-nums; }

  /* Кость: девять мест, точки стоят там же, где на настоящей. Цифру рядом не пишем —
     грань читается с одного взгляда, а три цифры подряд не читаются вовсе. */
  .кость {
    display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 4px;
    width: 30px; height: 30px; box-sizing: border-box; vertical-align: middle;
    background: var(--глубже); border: 1px solid var(--линия); border-radius: 6px;
  }
  .кость i { border-radius: 50%; background: none; }
  .кость i.есть { background: var(--текст); }

  /* Карта: картинка из игры, размер как у двух костей в ряд. */
  .карта {
    width: 34px; height: 48px; object-fit: contain; vertical-align: middle;
    border-radius: 4px; background: var(--глубже);
  }
  .карта.пусто-картинка {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--линия); font-size: 12px;
  }

  /* Обзор по образцу, который прислал владелец: секции отделены полосой с названием,
     показатели стоят крупными плитками, валюты — сеткой. */
  .разделитель-секции {
    display: flex; align-items: center; gap: var(--о3);
    margin: var(--о5) 0 var(--о3); color: var(--тихий);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  }
  .разделитель-секции::before, .разделитель-секции::after {
    content: ""; flex: 1; height: 1px; background: var(--линия);
  }

  .плитки-обзора {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--о4) var(--о5);
  }
  /* С 23.09 это ячейки: без подложки и рамки, как сводка на обзоре. */
  .плитка-обзора { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .плитка-обзора.тихая { opacity: .6; }
  .плитка-обзора span { font-size: 12px; color: var(--тихий); }
  /* Крупнее обычного — но по-прежнему не полужирное и одного цвета: это первый экран,
     и числа на нём читают издалека, а не построчно. */
  .плитка-обзора b { font-size: 20px; font-weight: 400; line-height: 1.3; font-variant-numeric: tabular-nums; }
  .плитка-обзора b i { font-style: normal; font-size: 13px; color: var(--рост); }
  .плитка-обзора em { font-style: normal; font-size: 12px; color: var(--тихий); }

  /* Полоса того, что вот-вот пропадёт: тот же цвет, что у «вход кончается». */
  .полоса.тревожная i { background: var(--тревога); }

  /* ——— телефон ———
     Владелец смотрит пульт с телефона по Wi-Fi. До 22.09 на узком экране меню из 12 кнопок
     занимало весь первый экран, шапка прилипала и съедала ещё полторы сотни точек, а строки
     целей с полем и кнопками уезжали вбок. Здесь: меню полосой внизу, шапка не липнет,
     кнопки строки уходят на свою строку, всё широкое прокручивается внутри карточки. */
  @media (max-width: 700px) {
    body { padding-bottom: 64px; }
    .шапка { position: static; gap: var(--о3); padding: var(--о2) var(--о3); }
    .шапка .марка { display: none; }
    .группа-плиток { gap: var(--о3); }
    .разделитель { display: none; }
    /* Вклад в клан на телефоне прячем: он есть в разделе «Клан», а шапка и так в три ряда. */
    /* minmax(0, …): иначе колонка растягивается под самую широкую полосу вкладок («Сила»). */
    .сетка { padding: var(--о2); gap: var(--о2); grid-template-columns: minmax(0, 1fr); }
    section { padding: var(--о3); overflow-x: auto; }

    .колонка-меню section { display: none; }
    nav {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
      flex-direction: row; gap: 0; overflow-x: auto; scrollbar-width: none;
      background: var(--карта); border-top: 1px solid var(--линия); padding: 4px 4px env(safe-area-inset-bottom);
    }
    nav::-webkit-scrollbar { display: none; }
    .черта-меню { display: none; }
    /* Строка «бот сам» занимала на телефоне целый ряд шапки: заход виден в настройках. */
    #бот-сам { display: none; }
    .лог-окно { left: var(--о2); right: var(--о2); width: auto; top: var(--о2); }
    nav button {
      flex: none; width: auto; min-width: 64px; flex-direction: column; gap: 2px;
      padding: 6px 8px; font-size: 10px; text-align: center; position: relative;
    }
    nav button svg { width: 18px; height: 18px; }
    nav button.активен { box-shadow: inset 0 2px 0 var(--янтарь); }
    nav button .счёт { position: absolute; top: 2px; right: 6px; }
    nav button .бейдж { min-width: 14px; padding: 0 4px; font-size: 9px; }

    .строка { flex-wrap: wrap; row-gap: var(--о2); }
    .строка .имя { flex-basis: 60%; }
    .строка .числа { white-space: normal; flex-wrap: wrap; gap: var(--о1) var(--о3); }
    .строка .дела { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-end; }
    .вкладки { overflow-x: auto; scrollbar-width: none; }
    .вкладки button { flex: none; }
    button.тихая { min-height: 36px; padding: 6px 12px; font-size: 13px; }
    select.широкий { max-width: 100%; }
    .плашки { left: var(--о2); right: var(--о2); bottom: 72px; max-width: none; }
  }


/* ——— Кнопки: контурные, с прямыми углами (владелец выбрал 23.09 из четырёх вариантов) ———
   Главная — залитая янтарём. Обычная — тонкая янтарная рамка и янтарный текст на прозрачном фоне.
   Тихая и «ссылка» — та же форма, рамка приглушённая, текст мельче. При наведении — лёгкая заливка.
   Этот блок последний в файле и перекрывает прежние правила кнопок. */
button.главная, button.обычная, button.тихая, button.ссылка, button.слот, button.ещё { border-radius: 0; }
/* Одна высота у всех кнопок (23.09, канва v2): 28 точек, текст по центру. Тихая отличается рамкой и кеглем. */
button.главная, button.обычная, button.тихая, button.ссылка, button.опасная { min-height: 28px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
button.главная { background: var(--янтарь); border: 1px solid var(--янтарь); color: #1a140a; font-size: 13px; padding: 0 14px; }
button.обычная { background: transparent; border: 1px solid var(--янтарь); color: var(--янтарь); font-size: 13px; padding: 0 12px; }
button.опасная { background: transparent; border: 1px solid var(--тревога); color: var(--тревога); font-size: 13px; padding: 0 12px; }
button.обычная:hover { background: color-mix(in srgb, var(--янтарь) 14%, transparent); border-color: var(--янтарь); }
button.тихая, button.ссылка { background: transparent; border: 1px solid var(--янтарь-тихий);
  color: var(--янтарь); font-size: 12px; padding: 0 10px; text-decoration: none; }
button.тихая:hover, button.ссылка:hover { background: color-mix(in srgb, var(--янтарь) 12%, transparent);
  border-color: var(--янтарь); text-decoration: none; }
/* Пустой слот — вещь в стандартной рамке предмета и подпись; своей коробки нет. Нажимаемость видна
   при наведении: рамка картинки и подпись янтарные (владелец, 23.09: «поприятнее глазу»). */
button.слот { background: transparent; border: 0; padding: 4px 2px; width: 72px; gap: 6px; }
button.слот img.штучка { width: 48px; height: 48px; transition: border-color .12s, background .12s; }
button.слот span { font-size: 12px; line-height: 1.25; color: var(--тихий); }
button.слот:hover { background: transparent; }
button.слот:hover img.штучка { border-color: var(--янтарь); background: color-mix(in srgb, var(--янтарь) 12%, var(--глубже)); }
button.слот:hover span { color: var(--янтарь); }
button.слот:focus-visible img.штучка { border-color: var(--янтарь); }
button.ещё { border: 1px solid var(--янтарь-тихий); height: 28px; }
button:disabled { opacity: .35; }

/* Цены цветом валюты: доллары зелёные, таблетки голубые, золото обычным текстом. */
.деньги { font-variant-numeric: tabular-nums; }
.деньги-dollar { color: var(--доллары); }
.деньги-pills { color: var(--таблетки); }

/* «Характеристики» и «Куда вложиться»: одинаковая высота блоков, ровные колонки внутри (23.09). */
.строка.вложение { display: grid; grid-template-columns: minmax(0, 1fr) auto 104px; align-items: center; gap: var(--о4); }
.цена-вложения { text-align: right; white-space: nowrap; font-size: 14px; }
.действие-вложения .дела { display: block; }
.действие-вложения button { width: 100%; }
.строка.стат .состав-подпись { margin-top: 6px; }

/* Прибыль зелёным, траты красным — по всему основному полю (подсветитьПрибыль). */
.прибыль { color: var(--рост); }
.убыток { color: var(--тревога); }
table.таблица-питомцев { table-layout: fixed; }

/* Верхняя строка характеристики: название | цена | кнопки. Цена в колонке фиксированной ширины,
   чтобы цены всех характеристик стояли на одной вертикали (замер). */
.строка.стат .стат-верх { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; align-items: center; gap: var(--о3); }
.стат-цена { text-align: right; white-space: nowrap; }
.стат-кнопки { display: flex; justify-content: flex-end; gap: var(--о2); min-width: 250px; }
.стат-кнопки .дела { display: contents; }
/* Питомцы: колонка «с собой» по центру — центры надписи и кнопок совпадают. */
table.таблица-питомцев td:nth-child(3), table.таблица-питомцев th:nth-child(3) { text-align: center; }

/* Здоровье и урон над характеристиками: значок и число цветом, подпись обычным текстом. */
.итог-персонажа { display: flex; gap: var(--о6); padding: var(--о3) 0; border-top: 1px solid var(--линия); margin-top: var(--о3); }
.итог { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.итог svg { flex: none; }
.итог b { font-size: 20px; font-weight: 400; font-variant-numeric: tabular-nums; margin-left: 2px; }
.итог.здоровье svg, .итог.здоровье b { color: var(--здоровье); }
.итог.урон svg, .итог.урон b { color: var(--урон); }

/* ——— Лист характеристик (23.09, переделка по замечаниям: «полоски, композиция, разные размеры»).
   Один узор строки для здоровья, урона и характеристик. Три размера: 14 названия, 20 числа, 12 служебное.
   Внутри блока ни одной разделительной линии — строки разделяет воздух. */
.лист-итог { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto; align-items: baseline;
  column-gap: var(--о2); row-gap: 0; margin-top: var(--о4); }
.лист-итог { grid-template-columns: auto auto auto auto 1fr; column-gap: var(--о2); }
.лист-итог .лист-имя.урон { margin-left: var(--о6); }
.лист-имя { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.лист-число { font-size: 20px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1; }
.лист-имя.здоровье svg, .лист-число.здоровье { color: var(--здоровье); }
.лист-имя.урон svg, .лист-число.урон { color: var(--урон); }
.лист-строка { margin-top: var(--о5); }
.лист-верх { display: flex; align-items: baseline; gap: var(--о2); margin-bottom: var(--о2); }
.лист-покупка { margin-left: auto; display: flex; align-items: center; gap: var(--о2); align-self: center; }
.лист-покупка .дела { display: contents; }
.лист-цена { font-size: 12px; margin-right: var(--о1); }
.лист-низ { display: flex; align-items: baseline; justify-content: space-between; gap: var(--о3); margin-top: 6px; }
.лист-низ .состав-подпись { margin-top: 0; }
.лист-сегодня { font-size: 12px; color: var(--тихий); white-space: nowrap; }

/* Подпись источников в одну строку: промежутки меньше, значок ближе. */
.лист-низ .состав-подпись { gap: 2px 10px; }
.лист-низ .состав-подпись .кусок i { margin-right: 4px; }

/* «Из чего сила»: название | число | полоса с подписью — ровные колонки. */
.сила-строка { display: grid; grid-template-columns: 90px 52px minmax(0, 1fr); column-gap: var(--о3); align-items: start; margin-top: var(--о3); }
.сила-строка .лист-число { text-align: right; line-height: 20px; }
.сила-строка .лист-имя { line-height: 20px; }
.сила-полоса { padding-top: 7px; }
.сила-полоса .полоса.состав { margin-top: 0; }
/* «Докупить очки»: название | цена | сегодня | кнопки — ровные колонки. */
.покупка-строка { display: grid; grid-template-columns: 90px minmax(0, 1fr) 70px 260px; column-gap: var(--о3); align-items: center; margin-top: var(--о2); min-height: 30px; }
.покупка-цена { font-size: 12px; text-align: right; }
.покупка-сегодня { font-size: 12px; color: var(--тихий); text-align: right; font-variant-numeric: tabular-nums; }
.покупка-кнопки { display: flex; justify-content: flex-end; gap: var(--о2); }
.покупка-кнопки .дела { display: contents; }

.сила-подпись { grid-column: 1 / -1; margin-top: 6px; gap: 2px 10px; }
.сила-подпись .кусок i { margin-right: 4px; }

/* «Обзор»: тот же узор, что лист характеристик — название 14, число 20, служебное 12, без линий. */
.обзор-профиль { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, auto); gap: var(--о3) var(--о6); align-items: start; margin-top: var(--о3); }
.обзор-уровень .лист-число { margin-left: var(--о2); }
.обзор-опыт { margin-top: var(--о2); }
.обзор-ряд { display: flex; align-items: baseline; gap: var(--о2); flex-wrap: wrap; column-gap: var(--о2); row-gap: var(--о1); }
.обзор-профиль .обзор-ряд { flex-direction: column; align-items: flex-start; }
.обзор-профиль .обзор-ряд .лист-имя { margin-top: 0; }
.обзор-профиль .обзор-ряд .лист-число + .лист-имя { margin-top: var(--о2); }
.обзор-строка { display: flex; align-items: center; justify-content: space-between; gap: var(--о3); margin-top: var(--о4); }
section .полоса + .обзор-строка { margin-top: var(--о4); }
.лист-число.тревога { color: var(--тревога); }

/* «Обзор» (второй заход): профиль — семь равных колонок и опыт на всю ширину; ниже две независимые
   колонки блоков с одинаковым отступом; у полос видимая подложка. */
.профиль-ряд { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--о4); margin-top: var(--о4); }
.профиль-ячейка { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.профиль-подпись { font-size: 12px; color: var(--тихий); display: inline-flex; align-items: center; gap: 5px; }
.профиль-число { font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.профиль-ячейка.здоровье .профиль-число, .профиль-ячейка.здоровье svg { color: var(--здоровье); }
.профиль-ячейка.урон .профиль-число, .профиль-ячейка.урон svg { color: var(--урон); }
.профиль-ячейка.тревога .профиль-число { color: var(--тревога); }
/* Кнопка в ячейке стоит на месте числа: той же высоты строки, прижата влево. */
.профиль-ячейка > .дела { align-self: flex-start; }
.профиль-ячейка > .дела button { height: 24px; min-height: 24px; }
.профиль-опыт { margin-top: var(--о4); }
.профиль-опыт .полоса { margin: 0 0 6px; }
.обзор-колонки { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--о4); align-items: start; margin-top: var(--о4); }
.обзор-колонка { display: flex; flex-direction: column; gap: var(--о4); min-width: 0; }
.обзор-колонка > section { margin: 0; }
#главное .полоса:not(.состав) { background: var(--линия); }
@media (max-width: 1100px) { .обзор-колонки { grid-template-columns: 1fr; } .профиль-ряд { grid-template-columns: repeat(4, minmax(0, 1fr)); } }