/* ═══════════════════════════════════════════════════════════════════════
   ДИЗАЙН «БАШНИ СМЕРТИ» — ЕДИНЫЙ ИСТОЧНИК (решение Mike 2026-07-27:
   «дизайн должен браться из одного файла, чтобы новое сразу делалось по
   нашему»).

   Здесь и только здесь живут ТОКЕНЫ (размеры, бумага, камень, кегли,
   радиусы) и РОЛИ — четыре класса, которыми размечается что угодно новое:

     .роль-гнездо   ёмкость под вещь: ячейка куклы, клетка карты, арт вещи
                    · угол острый · рамка жёсткая · вдавленность внутрь
     .роль-лист     контейнер: карточка, плитка, панель, окно, тултип
                    · радиус 2 · рамка мягкая · без тени
     .роль-действие всё нажимаемое: кнопка, вкладка, режим, чип, канал
                    · радиус 3 · рамка в тон материала
     .роль-метка    ярлык без действия: тег, счётчик, бейдж · pill

   ПРАВИЛО: новый экран берёт роли отсюда и НЕ пишет своих цветов, радиусов
   и кеглей. Нужен размер, которого нет, — заводится токен здесь, а не
   литерал на месте. Проверяется `tools/аудит_дизайна.py`: он считает, сколько
   мест ещё вне системы, и это число обязано падать.

   Подробности ролей и почему так — `дизайн/09-интерфейс.md`, раздел
   дизайн-системы; как собирать экраны — `заметки/вёрстка-руководство.md`.
   ═══════════════════════════════════════════════════════════════════════ */

/* Башня Смерти — стиль эпохи БК 2004: светлый фон, Verdana 12px, синие ссылки,
   серые панели, ретро-кнопки. Собственный CSS, воспроизводящий дух оригинала. */

/* Сетка размеров (09-интерфейс, решение Mike): все размеры пропорциональны
   экрану — горизонтали в vw с пределами читаемости, вертикали текстовых зон
   в em. Картинки рисуются под эти рамки (портрет 2:3 300×450, иконка 96×96,
   тайл клетки 88×88 — исходники 2×). В шаблонах — только эти переменные. */
:root {
  /* размеры сетки: +10% и ещё +10% (решения Mike, 2026-07-18) */
  --кл: clamp(32px, 2.9vw, 53px);      /* клетка карты, 1:1 */
  --икона: clamp(34px, 3.15vw, 53px);  /* иконка предмета / стрелка, 1:1 */
  --слот: clamp(121px, 11.5vw, 179px); /* колонка слотов куклы (W пропорций) */
  --портрет: clamp(117px, 10.9vw, 182px); /* портрет персонажа, 2:3 */
  --шкала: clamp(85px, 9.7vw, 157px);  /* шкала таймера */
  --контент: min(97vw, 1500px);        /* колонка контента */
  /* зона онлайна чата; +15% к исходной (правка Mike 2026-07-20) */
  --онлайн: clamp(127px, 13.8vw, 207px);
  /* колонка куклы ровно по её ширине (формула .doll) и ужатый зазор
     сетки персонажа — дыра между куклой и информацией меньше
     (правка Mike 2026-07-20) */
  --кукла-кол: calc(var(--портрет) * 1.748 + 16px);
  --сет-зазор: clamp(16px, 1.8vw, 30px);
}
* { box-sizing: border-box; }
/* шкала прокрутки окна скрыта (правка Mike) — колесо/тачпад работают */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  background: var(--лист-фон); color: #000;
  font: 12px Verdana, Arial, sans-serif; margin: 0; line-height: 1.45;
  /* страница всегда ровно в окно — само окно не скроллится и полос не даёт
     (правка Mike 2026-07-20: двухстрочная шапка распирала 100vh) */
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
a { color: #295fa6; }
a:hover { color: #cc0000; }

/* Каркас как в БК: шапка → контент → чат нижним фреймом на всю ширину */

/* ═══ ШАПКА — одна строка (концепт Mike 2026-07-25) ═══════════════════════
   Было два этажа 99px, где вкладки висели в пустоте, а меню из семи ссылок
   по 11px занимало самый недосягаемый угол. Стало 44px, и каждый кусок
   отвечает на свой вопрос: лого и вкладки — куда идти, часы — что сейчас
   в мире, чипы — что со мной, ник — кто я. Камень и «кнопочные» вкладки
   БК остались, поменялась плотность. */
:root {
  /* ═══ ДИЗАЙН-СИСТЕМА (решение Mike 2026-07-25, прототип
     `прототип/дизайн-система.html`). Правило: ФОРМА КОДИРУЕТ РОЛЬ, а не
     вкус конкретной правки. Было 9 разных скруглений и 9 рамок — стало
     четыре роли. Новое число в стилях берётся ТОЛЬКО отсюда. */
  --р-гнездо: 0;        /* ёмкость: ячейка куклы, клетка карты, арт вещи */
  --р-лист: 2px;        /* контейнер: карточка, плитка, панель, окно */
  --р-действие: 3px;    /* нажимается: кнопка, вкладка, режим, чип, канал */
  --р-метка: 999px;     /* ярлык без действия: тег, счётчик, бейдж */
  --ш1: 4px; --ш2: 8px; --ш3: 12px; --ш4: 16px;      /* шаг отступов */
  /* КЕГЛИ: было 15 случайных размеров (8…30) — стала лестница, где у каждой
     ступени своя работа. 16px НЕ в лестнице: это анти-зум iOS у полей ввода
     и главная красная кнопка. Глифы вкладок — своя величина, это не текст. */
  --к-бейдж: 9px;    /* цифра в пилюле-счётчике */
  --к-метка: 10px;   /* CAPS-подпись, тихое пояснение */
  /* строка подписи над куклой (имя и уровень) — её резервируют ОБЕ колонки
     пары «кукла + числа», см. примитив .пб-числа */
  --пб-подпись: 22px;
  --к-мелко: 11px;   /* второстепенный текст */
  --к-база: 12px;    /* основной текст игры */
  --к-знач: 13px;    /* значение, имя вещи, ник */
  --к-акцент: 15px;  /* заголовок блока, крупная кнопка */
  --к-крупно: 18px;  /* крупное число экрана */
  --к-титул: 22px;   /* имя экрана */
  --к-таймер: 30px;  /* главный отсчёт — один на всю игру */
  --к-глиф: 19px;    /* эмодзи-иконки вкладок на телефоне */
  --лист-фон: #e8e3d9;      /* фон страницы (и тултипа — он «лист над листом») */
  --лист: #f4f0e7;          /* бумага БК: карточка, панель, плитка */
  --лист-шапка: #e4ded2;    /* заголовок таблицы — тот же лист, чуть темнее */
  --действие-фон: #eae5d9;  /* кнопка, вкладка, режим в покое */
  --действие-навод: #f2eee4;
  --действие-нажат: #ddd6c6;
  --действие-выкл: #efece4;
  --жёлоб: #ddd6c6;         /* дорожка шкалы (HP, перезарядка) — не действие */
  --лист-поле: #fffdf7;     /* поле ввода и АКТИВНЫЙ элемент (связка с камнем) */
  --лист-кромка: #d8d2c4;   /* мягкая рамка — контейнеры */
  --гнездо-кромка: #9a9a9a; /* жёсткая рамка — ТОЛЬКО гнёзда */
  --действие-кромка: #c2bba8;
  /* ГНЕЗДО ВЫСТУПАЕТ (правка Mike 2026-07-26, по скрину БК). Сперва я сделал
     нишу — вышло «утоплено», а в оригинале ячейка ВЫПУКЛАЯ: свет ложится
     сверху-слева, тень уходит вправо-вниз, и вся плитка отбрасывает тень на
     фон. Фаски ЖЁСТКИЕ, без размытия — оттого и чёткость */
  /* ПУСТАЯ ячейка — утоплена (свет снизу-справа): видно, что место свободно */
  --вдавленность: inset -1px -1px 0 rgba(255, 255, 255, .8),
                  inset 1px 1px 0 rgba(122, 110, 86, .5),
                  inset 0 2px 4px rgba(58, 50, 34, .16);
  /* ЗАНЯТАЯ — выступает (свет сверху-слева, своя тень на фоне) */
  --выпуклое-гнездо: inset 1px 1px 0 rgba(255, 255, 255, .95),
                     inset -1px -1px 0 rgba(122, 110, 86, .55),
                     0 2px 3px rgba(52, 44, 30, .30);
  --выпуклость: drop-shadow(1px 2px 1.5px rgba(52, 44, 30, .45));
  /* ПРЕЖНЯЯ мягкая вдавленность — та, что была до вёрстки куклы. Нужна
     Башне: её ячейки ловятся селектором [class*="яч-"], и переопределение
     --вдавленность под куклу утащило туда чужие фаски и внешнюю тень
     (решение Mike 2026-07-27: вернуть турниру прежний вид, персонажа не
     трогать) */
  --вдавленность-мягкая: inset 0 1px 2px rgba(0, 0, 0, .10);
  /* ЗАНЯТОЕ ГНЕЗДО — один вид на всю игру (разбор эталона, Mike 2026-07-26):
     чистый тёмный контур + мягкая тень под плиткой, БЕЗ внутренней фаски.
     Объём даёт сам арт. Держим переменными, иначе кукла и карточки
     инвентаря разъезжаются — так и случилось: в карточке осталась ниша */
  --занятое-кромка: #23201a;
  --занятое-тень: 0 1px 1px rgba(52, 44, 30, .16);
  --занятое-фон: linear-gradient(#fdfbf5, #f4f0e7 55%, #f1ece1);

  --шапка: 44px;
  /* Камень и текст шапки/чата — ОДНОЙ палитрой (правка Mike 2026-07-25:
     «посмотри на цвет, ничего не видно» — прежний камень уходил в чёрное,
     тёмные кнопки на тёмном фоне не читались). Подняты и фон, и текст:
     значения почти белые, подписи — тёплый серый, акцент — золото. */
  --камень-верх: #6a655c;
  --камень-низ: #45423b;
  --кнопка: #5f5b52;          /* кнопка на камне (вкладки, каналы) */
  --кнопка-навод: #746f64;
  --кромка: #2a2924;
  --золото: #ffd98a;          /* акцент: ник, стрелки, часы набора */
  --кромка-золото: #8a7850;
  --текст: #f4f0e6;           /* значения — почти белым */
  --тихо: #c2bbab;            /* подписи и второстепенное */

  /* ── СМЫСЛОВЫЕ ЦВЕТА ────────────────────────────────────────────────
     Их нельзя свести к бумаге и камню: они кодируют СОДЕРЖАНИЕ, а не
     материал. Но источник у них всё равно один — здесь (правка Mike
     2026-07-27: раньше эти же цвета стояли литералами прямо в шаблонах,
     и «одно место» было только про CSS). */
  --хорошо: #0a7a0a;          /* прибавка, успех, «изучено» */
  --плохо: #a01818;           /* нехватка, урон, потеря */
  --тревога: #cc3322;         /* «есть что вложить», сломано */
  --редкое: #7a0a7a;          /* постоянка, портал — то, что вне обычного */
  --тихо-лист: #8a8272;       /* подпись и второстепенное НА БУМАГЕ */
  --тише-лист: #999;          /* совсем тихое: «пока ничего», прочерк */
  --чернила: #3b382f;         /* главный текст НА БУМАГЕ: заголовки секций
                                 карточек, жирные числа (референс БК,
                                 Mike 2026-08-03); до сих пор var(--чернила)
                                 в паре мест падал в наследование молча */
}

/* ── РОЛИ: этим размечается всё новое ─────────────────────────────────── */
.роль-гнездо {
  background: var(--лист-поле); border: 1px solid #9a9a9a; border-radius: 0;
  box-shadow: var(--вдавленность);
}
.роль-лист {
  background: var(--лист); border: 1px solid var(--лист-кромка);
  border-radius: var(--р-лист); box-shadow: none;
}
.роль-действие {
  background: var(--действие-фон); color: #3b382f;
  border: 1px solid var(--действие-кромка); border-radius: var(--р-действие);
  cursor: pointer;
}
.роль-действие:hover:not(:disabled) { background: var(--действие-навод); }
.роль-действие:active { background: var(--действие-нажат); }
/* «ты здесь» — одинаково на камне и на бумаге: светлый лист + золотая кромка */
.роль-действие.акт, .роль-выбран {
  background: var(--лист-поле); color: #1f1f1f;
  border-color: var(--кромка-золото); box-shadow: inset 0 0 0 1px #fffdf7;
}
.роль-метка {
  display: inline-block; padding: 1px 7px; background: var(--действие-фон);
  border: 1px solid var(--лист-кромка); border-radius: var(--р-метка);
  font-size: var(--к-метка); color: #5a554c;
}