* { box-sizing: border-box; }
html, body { width: 100%; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #2c3e50; color: white; margin: 0; padding: 20px; overflow-x: hidden; }
.screen { display: none; width: 100%; max-width: 900px; margin: 0 auto; padding: 20px; text-align: center; }

/* Ширина карточек больше не фиксирована в 130px: её задаёт сетка (по 3 в ряд),
   иначе на широком телефоне оставались пустые поля по краям. */
.card { background: #34495e; border: 3px solid #7f8c8d; border-radius: 10px; padding: 10px; cursor: pointer; transition: 0.2s; position: relative; }
.card:hover { border-color: #f1c40f; }
.card.selected { border-color: #2ecc71; background: #27ae60; }

.passive-badge { background: #8e44ad; color: white; font-size: 12px; padding: 3px 6px; border-radius: 4px; margin-top: 5px; display: inline-block; font-weight: bold; }

/* Портрет квадратный и тянется по ширине карточки: чем шире экран, тем крупнее
   картинка, вместо прежних фиксированных 100px. */
.avatar {
    width: 100%; aspect-ratio: 1; height: auto;
    background-color: #1a252f;
    background-size: cover; background-position: center;
    border-radius: 8px; margin: 0 auto 8px;
}

button {
    margin-top: 16px; padding: 11px 20px; font-size: 17px; font-weight: bold;
    cursor: pointer; color: white; transition: transform 0.12s, filter 0.15s, box-shadow 0.15s;
    background: linear-gradient(180deg, #e8883a, #d35400);
    border: 1px solid rgba(255,255,255,0.28);
    border-bottom-width: 3px; border-bottom-color: rgba(0,0,0,0.35);
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
button:hover:not(:disabled) { filter: brightness(1.12); }
button:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
button:disabled { background: #7f8c8d; border-color: rgba(255,255,255,0.12); box-shadow: none; cursor: not-allowed; }

.primary-btn { background: linear-gradient(180deg, #4aa3f0, #2176c7); }
.danger-btn { background: linear-gradient(180deg, #ef5350, #c0392b); }

.battlefield { display: flex; justify-content: space-between; margin-top: 0; gap: 8px; }
/* flex: 1 1 0 вместо width: 50% — иначе рамка team.mine добавляла себе
   лишние пиксели и столбцы получались разной ширины (138 против 133). */
.team { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }

/* Карточки бойцов строго ОДНОГО размера и во всю ширину своей половины.
   Высота раньше зависела от длины имени и числа значков: "Илья Муромец"
   против "Кощей Бессмертный" давали от 91 до 130px, и столбцы выглядели
   рваными. Теперь высота жёсткая, а длинный текст обрезается многоточием. */
.fighter {
    background: rgba(52, 73, 94, 0.92); padding: 7px; border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.12); cursor: pointer; transition: 0.2s;
    position: relative; width: 100%; height: 88px; overflow: hidden;
    display: flex; align-items: center;
}
.fighter-content { display: flex; align-items: center; width: 100%; min-width: 0; }
.fighter.active-turn { border-color: #f1c40f; box-shadow: 0 0 15px #f1c40f; }
.fighter.selected-target-enemy { border-color: #e74c3c; background: #c0392b; box-shadow: 0 0 10px #e74c3c; }
.fighter.selected-target-ally { border-color: #3498db; background: #2980b9; box-shadow: 0 0 10px #3498db; }
.fighter.dead-hero { filter: grayscale(100%); opacity: 0.5; cursor: not-allowed; }

.skull-overlay { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 44px; z-index: 10; pointer-events: none; }
.fighter .avatar { width: 68px; height: 68px; margin: 0 10px 0 0; flex-shrink: 0; position: relative; border: 2px solid rgba(255,255,255,0.18); }
.stats { flex-grow: 1; text-align: left; min-width: 0; }
.fighter-name { font-size: 14px; display: block; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fighter-hp-text { font-size: 13px; color: #ecf0f1; font-weight: bold; }
.hp-bar-bg { background: #1a252f; height: 9px; width: 100%; border-radius: 5px; margin-top: 4px; overflow: hidden; }
.hp-bar-fill { background: #2ecc71; height: 100%; width: 100%; transition: 0.3s; }
.passive-info { font-size: 11px; color: #bdc3c7; margin-top: 2px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Помощник (скелет/медведь) — та же карточка, но с пунктирной рамкой,
   чтобы сразу отличать призванного бойца от настоящего героя. */
.fighter.companion-fighter { border-style: dashed; border-color: #8e44ad; background: rgba(44, 62, 80, 0.92); }
.companion-mark { position: absolute; right: -4px; bottom: -4px; font-size: 20px; text-shadow: 0 0 4px #000; }

/* Невидимость видно по самому бойцу, а не только по значку */
.fighter.is-invisible .avatar { opacity: 0.35; filter: grayscale(100%); }
.fighter.is-invisible { border-color: #5dade2; border-style: dotted; }
.fighter.is-stunned .avatar { filter: grayscale(80%) brightness(0.6); }

.skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; margin-bottom: 15px; }
/* Высота ЖЁСТКО фиксирована, а не min-height: у разных героев описания умений
   очень разной длины ("Урон: ~25" против описания призыва спутника), и сетка
   меняла высоту при переходе хода от одного героя к другому — вместе с ней
   ехало вниз/вверх всё, что под ней. Длинный текст обрезается по трём строкам. */
.skill-btn {
    background: #16a085; font-size: 15px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; width: 100%; padding: 10px;
    height: 96px; overflow: hidden;
}
.skill-btn small {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.25;
}
.skill-btn.selected-skill { border: 2px solid #fff; transform: scale(1.05); background: #2980b9; }
.skill-btn:disabled { opacity: 0.8; background: #7f8c8d; border: none; transform: none; }
.skill-btn-bot { opacity: 0.5; }

#execute-btn { display: block; width: 300px; margin: 0 auto; font-size: 20px; padding: 15px; }
#timer-display { font-size: 24px; font-weight: bold; color: #e74c3c; }
/* Высота фиксированная, а не max-height: раньше лог начинал бой с двух строк
   и дорастал до 150px, растягивая страницу по ходу боя — вместе с ней ехало
   и всё остальное. Теперь блок занимает своё место с самого начала. */
#combat-log { margin-top: 20px; padding: 10px; background: rgba(0,0,0,0.5); border-radius: 5px; height: 150px; overflow-y: auto; text-align: left; }
.death-log { color: #e74c3c; font-weight: bold; }
/* Отключаем выделение текста и синие вспышки при клике на телефоне */
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  user-select: none;
  -webkit-user-select: none;
}

/* ВАЖНО: команды остаются бок о бок (слева - свои, справа - враги) на любой
   ширине экрана. Когда-то здесь стоял flex-direction: column, и обе команды
   съезжали в один сплошной список - отсюда была жалоба "все лежат друг на
   друге, непонятно где свои". Ширину столбцов теперь задаёт flex: 1 1 0
   (см. .team выше), поэтому проценты тут больше не нужны. */
@media (max-width: 768px) {
  /* Увеличиваем кнопки, чтобы по ним легко попадать пальцем */
  button { padding: 12px 20px; font-size: 16px; min-height: 44px; }
}
/* СТРОГО 3 карточки в ряд на всю доступную ширину. Раньше стояло
   repeat(auto-fit, 150px): на телефоне помещалось 2 колонки фиксированной
   ширины, справа оставалась пустая полоса, а карточки казались мелкими и
   разной высоты. Теперь колонки резиновые (1fr), а карточки тянутся на всю
   ячейку — ряд всегда ровный и занимает всю ширину экрана. */
.heroes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 10px;
    margin: 15px 0;
}

/* Выбор профиля — единственный экран, где карточки НЕ раскладываются жёсткой
   сеткой по 3. Профилей может быть один-два, и в сетке repeat(3, 1fr) они
   прижимались к левому краю, оставляя справа пустоту. Здесь карточки растут
   от центра к краям: одна стоит по центру, две — симметрично, дальше ряд
   расширяется в обе стороны и переносится по мере надобности. */
.profiles-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    margin: 15px 0;
}
.profiles-grid .hero-card { width: 132px; flex: 0 0 auto; }

.hero-card {
    width: 100%;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 10px 8px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    background: linear-gradient(160deg, rgba(52,73,94,0.95), rgba(26,37,47,0.95));
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.hero-card:hover { border-color: #f1c40f; transform: translateY(-2px); }
.hero-card.selected {
    border-color: #2ecc71;
    background: linear-gradient(160deg, rgba(39,174,96,0.9), rgba(20,90,50,0.95));
    box-shadow: 0 0 14px rgba(46,204,113,0.55);
}
/* Имя занимает ровно две строки всегда: иначе карточка "Кощей Бессмертный"
   оказывалась на 15px выше соседних и ряды выглядели разнокалиберными. */
.hero-card b {
    font-size: 15px; line-height: 1.2;
    min-height: 2.4em; display: flex; align-items: center; justify-content: center;
}
.hero-card > button,
.hero-card .promo-hero-tag,
.hero-card small:last-child {
    margin-top: auto;
}
.hero-card > button { align-self: stretch; }

.hero-card.locked {
    filter: grayscale(80%);
}

.danger-btn {
    background-color: #f44336;
    color: white;
}

.primary-btn {
    background-color: #2196F3;
    color: white;
    font-size: 18px;
    padding: 15px 30px;
}
/* --- ЗАГОЛОВОК (картинка-лого вместо текста, см. assets/title_logo.png) --- */
.title-wrap { text-align: center; margin: 10px 0 18px 0; }
.game-title-img {
    max-width: 90%;
    width: 480px;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
}

.version-badge {
    position: fixed;
    top: 10px;
    right: 12px;
    background: rgba(0,0,0,0.55);
    border: 1px solid #f1c40f;
    color: #f1c40f;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 12px;
    z-index: 999;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

.squad-title {
    font-size: 24px;
    color: #ffffff;
    text-shadow: 1px 1px 3px #000;
    margin-bottom: 20px;
}
/* =========================================================================
   ПАНЕЛЬ ХАРАКТЕРИСТИК ГЕРОЯ
   Показывается при клике на карточку героя (создание профиля, магазин,
   дружина), чтобы игрок видел HP/урон/скорость/пассивку перед выбором.
   ========================================================================= */
.hero-details-panel { margin: 15px auto 20px; max-width: 600px; min-height: 40px; }
.details-placeholder { color: #95a5a6; font-style: italic; font-size: 14px; }

.hero-details-card {
    display: flex; align-items: center; gap: 15px;
    background: #2c3e50; border: 2px solid #f1c40f;
    border-radius: 10px; padding: 12px 16px; text-align: left;
    animation: details-fade-in 0.25s ease-out;
}
@keyframes details-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.details-avatar {
    width: 70px; height: 70px; flex-shrink: 0;
    background-color: #1a252f; background-size: cover; background-position: center;
    border-radius: 8px; border: 2px solid #7f8c8d;
}
.details-info { flex-grow: 1; min-width: 0; }
.details-name { font-size: 18px; font-weight: bold; margin-bottom: 6px; }
.details-race {
    font-size: 11px; font-weight: normal; color: #1a252f; background: #f1c40f;
    padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
}
.details-grid {
    display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 4px 15px; font-size: 13px; margin-bottom: 6px;
}
.detail-stat { color: #ecf0f1; }
.detail-passive { font-size: 12px; color: #bdc3c7; margin-bottom: 4px; }
.detail-ultimate { font-size: 12px; color: #f1c40f; }
.detail-weapon { font-size: 12px; color: #3498db; margin-bottom: 4px; }
.detail-weapon-empty { color: #7f8c8d; font-style: italic; }
.weapon-bonus-tag { color: #2ecc71; font-size: 11px; }

/* =========================================================================
   АРЕНЫ
   ========================================================================= */
/* Арены — те же 3 в ряд, чтобы все 6 помещались в два ряда и выбирались
   сразу, без длинной прокрутки. */
.arena-card { width: 100%; text-align: center; padding: 12px 8px; }
.arena-icon { font-size: 34px; margin-bottom: 6px; }
.arena-desc { font-size: 12px; color: #bdc3c7; margin-top: 6px; line-height: 1.35; }

/* =========================================================================
   СЛОЖНОСТЬ БОТА И СТАТИСТИКА
   ========================================================================= */
.difficulty-picker {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center;
    background: #34495e; border-radius: 8px; padding: 10px 16px; margin: 15px auto; max-width: 500px;
    font-size: 14px;
}
.difficulty-picker label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.stats-line { color: #f1c40f; font-size: 14px; margin-bottom: 10px; }

/* =========================================================================
   УЛЬТИМАТИВНЫЕ УМЕНИЯ
   ========================================================================= */
.ultimate-btn { background: linear-gradient(135deg, #8e44ad, #2c3e50); border: 2px solid #f1c40f; }
.ultimate-btn:hover:not(:disabled) { background: linear-gradient(135deg, #9b59b6, #34495e); }
.ult-tag {
    font-size: 9px; background: #f1c40f; color: #1a252f; padding: 1px 4px;
    border-radius: 3px; font-weight: bold; vertical-align: middle;
}

/* =========================================================================
   АНИМАЦИИ БОЯ
   Каждая пассивка (класс героя) получает свою анимацию срабатывания, плюс
   универсальные "тряска при ударе" и "смерть", плюс фирменный всплеск
   частицы конкретного героя для его личного ультимативного умения.
   ========================================================================= */

/* Общий удар */
@keyframes hit-shake-kf {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}
.hit-shake { animation: hit-shake-kf 0.4s ease-in-out; }

/* Берсерк: крит - более сильная тряска + красная вспышка */
@keyframes crit-shake-kf {
    10%, 90% { transform: translateX(-4px) scale(1.02); }
    20%, 80% { transform: translateX(8px) scale(1.04); }
    30%, 50%, 70% { transform: translateX(-14px) scale(1.06); }
    40%, 60% { transform: translateX(14px) scale(1.04); }
}
.fx-crit { animation: crit-shake-kf 0.65s ease-in-out; box-shadow: 0 0 25px 5px rgba(231, 76, 60, 0.8) !important; }

/* Ловкость: уворот - лёгкий "рывок" в сторону + затухание */
@keyframes dodge-kf {
    0% { transform: translateX(0); opacity: 1; }
    30% { transform: translateX(-18px); opacity: 0.6; }
    60% { transform: translateX(14px); opacity: 0.85; }
    100% { transform: translateX(0); opacity: 1; }
}
.fx-dodge { animation: dodge-kf 0.45s ease-out; }

/* Тяжеловес: блок - короткая "остановка удара", синяя вспышка щита */
@keyframes block-kf {
    0%, 100% { box-shadow: 0 0 0 rgba(52, 152, 219, 0); }
    40% { box-shadow: 0 0 20px 6px rgba(52, 152, 219, 0.9); transform: scale(0.97); }
}
.fx-block { animation: block-kf 0.45s ease-out; }

/* Живучесть: регенерация - зелёное пульсирующее свечение */
@keyframes regen-kf {
    0%, 100% { box-shadow: 0 0 0 rgba(46, 204, 113, 0); }
    50% { box-shadow: 0 0 22px 6px rgba(46, 204, 113, 0.85); }
}
.fx-regen { animation: regen-kf 0.6s ease-in-out; }

/* Знахарь: крит. исцеление - белое/золотое пульсирующее свечение */
@keyframes critheal-kf {
    0%, 100% { box-shadow: 0 0 0 rgba(26, 188, 156, 0); }
    50% { box-shadow: 0 0 26px 8px rgba(26, 188, 156, 0.9); transform: scale(1.03); }
}
.fx-critheal { animation: critheal-kf 0.5s ease-in-out; }

/* Обычное лечение - мягкое зелёное свечение (без пульса крита) */
@keyframes heal-kf {
    0%, 100% { box-shadow: 0 0 0 rgba(46, 204, 113, 0); }
    50% { box-shadow: 0 0 14px 3px rgba(46, 204, 113, 0.6); }
}
.fx-heal { animation: heal-kf 0.5s ease-in-out; }

/* Удача: двойной ход - золотые искры вокруг атакующего */
@keyframes doublecast-kf {
    0%, 100% { box-shadow: 0 0 0 rgba(241, 196, 15, 0); }
    50% { box-shadow: 0 0 20px 5px rgba(241, 196, 15, 0.85); }
}
.fx-doublecast { animation: doublecast-kf 0.5s ease-in-out; }

/* Смерть - плавное "оседание" перед переходом в dead-hero */
@keyframes death-kf {
    0% { transform: scale(1) rotate(0); opacity: 1; }
    100% { transform: scale(0.9) rotate(-8deg); opacity: 0.4; filter: grayscale(100%); }
}
.fx-death { animation: death-kf 0.6s ease-in forwards; }

/* Каст ультимативного умения атакующим - фирменное свечение его цвета */
@keyframes ultimate-cast-kf {
    0%, 100% { box-shadow: 0 0 0 rgba(241, 196, 15, 0); transform: scale(1); }
    50% { box-shadow: 0 0 30px 8px var(--ult-glow, rgba(241, 196, 15, 0.9)); transform: scale(1.06); }
}
.fx-ultimate-cast { animation: ultimate-cast-kf 0.7s ease-in-out; }

/* Плавающие цифры урона/лечения над персонажем */
@keyframes float-up-kf {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, -55px); opacity: 0; }
}
.floating-text {
    position: absolute; left: 50%; top: 10px;
    transform: translate(-50%, 0);
    font-weight: bold; font-size: 20px; pointer-events: none;
    animation: float-up-kf 1.1s ease-out forwards;
    text-shadow: 1px 1px 2px #000, 0 0 6px rgba(0,0,0,0.7);
    z-index: 20; white-space: nowrap;
}
.floating-dmg { color: #e74c3c; }
.floating-crit { color: #ff3b30; font-size: 26px; }
.floating-heal { color: #2ecc71; }
.floating-critheal { color: #1abc9c; font-size: 24px; }
.floating-miss, .floating-dodge, .floating-block { color: #bdc3c7; font-size: 16px; }
.floating-regen { color: #2ecc71; font-size: 16px; }
.floating-doublecast { color: #f1c40f; font-size: 18px; }

/* Всплеск фирменной частицы ультимативного умения (эмодзи героя) */
@keyframes vfx-burst-kf {
    0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
    30%  { transform: translate(-50%, -20px) scale(1.4); opacity: 1; }
    100% { transform: translate(-50%, -70px) scale(1.1); opacity: 0; }
}
.vfx-burst {
    position: absolute; left: 50%; top: 20%;
    font-size: 34px; pointer-events: none;
    animation: vfx-burst-kf 0.9s ease-out forwards;
    filter: drop-shadow(0 0 8px var(--vfx-color, #f1c40f));
    z-index: 21;
}

/* =========================================================================
   МОБИЛЬНАЯ АДАПТИВНОСТЬ
   ========================================================================= */
@media (max-width: 768px) {
    body { padding: 8px; }
    .screen { padding: 8px; }
    .squad-title { font-size: 19px; margin-bottom: 12px; }

    /* Сетка остаётся 3 в ряд (задана выше) — здесь только ужимаем отступы,
       чтобы карточки стали ШИРЕ, а не мельче. */
    .heroes-grid { gap: 8px; margin: 12px 0; }
    .card { padding: 7px 5px; }
    .hero-card b { font-size: 13px; }
    .passive-badge { font-size: 11px; padding: 2px 4px; }

    .hero-details-card { flex-direction: column; text-align: center; }
    .details-grid { grid-template-columns: repeat(2, minmax(90px, 1fr)); }

    /* Шрифты в бою НЕ уменьшаем — на них жаловались, что приходится
       напрягать глаза. Место выигрывается за счёт отступов, а не кегля. */
    .skills { gap: 8px; }
    .skill-btn { font-size: 14px; padding: 8px 6px; height: 100px; }
    .skill-btn small { font-size: 12px; }

    .fighter { padding: 6px; height: 76px; }
    .fighter .avatar { width: 56px; height: 56px; margin: 0 7px 0 0; }
    .fighter .fighter-name { font-size: 13px; }
    .fighter .fighter-hp-text { font-size: 12px; }
    .fighter .passive-info { font-size: 10px; }
    .fighter .hp-bar-bg { height: 7px; }
    .skull-overlay { font-size: 34px; left: 10px; }

    .battlefield { gap: 6px; }
    .team { gap: 6px; }
    .battle-topbar { font-size: 13px; margin-bottom: 8px; }

    .arena-card { padding: 10px 6px; }
    .arena-icon { font-size: 28px; }
    .arena-desc { font-size: 11px; }

    .difficulty-picker { flex-direction: column; gap: 8px; }

    #execute-btn { width: 100%; max-width: none; font-size: 18px; padding: 12px; margin-top: 8px; }
    #combat-log { height: 96px; font-size: 13px; margin-top: 10px; }
    .skill-btn { height: 92px; }
    .turn-indicator { margin: 6px 0 2px; }

    .floating-text { font-size: 18px; }
    .floating-crit { font-size: 22px; }
}

/* Очень узкие экраны: сохраняем 3 в ряд, но подрезаем текст, а не картинки */
@media (max-width: 380px) {
    .hero-card b { font-size: 12px; }
    .passive-badge { font-size: 10px; }
    .fighter .avatar { width: 46px; height: 46px; margin-right: 6px; }
    .fighter .fighter-name { font-size: 12px; }
    .battlefield { gap: 5px; }
    .skill-btn { font-size: 13px; }
}

/* =========================================================================
   ЗАКРЕПЛЁННАЯ КНОПКА "НАЗАД"
   Раньше она была в самом низу длинной страницы: чтобы уйти из магазина,
   приходилось прокручивать весь список до конца. Теперь всегда под рукой в
   нижней части экрана, но с отступом от края — чтобы не нажималась случайно
   вместе с системными жестами.
   ========================================================================= */
.sticky-back {
    position: sticky;
    bottom: 14px;
    z-index: 50;
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 18px auto 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}

/* Гарантируем минимальный размер тач-таргетов на всех экранах, не только <768px */
.card, .skill-btn, button { min-height: 44px; }

/* =========================================================================
   ЧЁТКОЕ РАЗДЕЛЕНИЕ КОМАНД + ФОН АРЕНЫ (v1.02)
   ========================================================================= */

/* position: relative раньше стояло здесь только ради .battle-toast-layer,
   который был вложен прямо в .battlefield и центрировался поверх карточек.
   Теперь слой подсказок переехал в .battle-status-row (ниже карточек), и
   этому блоку отдельная точка привязки больше не нужна. */
.battlefield { border-radius: 12px; padding: 15px; }
.team { border-radius: 8px; padding: 6px; }
.team.mine { border-left: 3px solid #2ecc71; }
.team.enemy { border-left: 3px solid #e74c3c; }

/* Фон арены — отдельный неподвижный слой во всю ширину окна (см. index.html).
   Размер задаётся окном, а не высотой экрана боя, поэтому картинка стоит на
   месте, сколько бы ни менялось содержимое под ней. z-index: -1 кладёт слой
   под контент, но над фоновым цветом страницы. */
.arena-backdrop {
    position: fixed;
    left: 0; right: 0; top: 0;
    /* Высота НЕ inset:0 и не 100vh, а 100lvh — "как если бы адресная строка
       была скрыта". На телефоне при прокрутке браузер прячет и показывает
       адресную строку, из-за чего 100vh скачет, а вместе с ним пересчитывался
       background-size: cover — картинка на глазах приближалась и отдалялась.
       lvh от этого не зависит и остаётся постоянной. */
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
/* Слой виден только когда на нём стоит класс конкретной арены, то есть в бою.
   ("arena-backdrop" под этот селектор не попадает — там "arena-ba", не "arena-bg".) */
.arena-backdrop[class*="arena-bg-"] { opacity: 1; }

.arena-bg-field { background-image: url('../assets/arena_field.jpg'); }
.arena-bg-fog   { background-image: url('../assets/arena_fog.jpg'); }
.arena-bg-swamp { background-image: url('../assets/arena_swamp.jpg'); }
.arena-bg-ice   { background-image: url('../assets/arena_ice.jpg'); }
.arena-bg-lair  { background-image: url('../assets/arena_lair.jpg'); }
.arena-bg-storm { background-image: url('../assets/arena_storm.jpg'); }

#screen-battle {
    border-radius: 12px; padding: 12px;
    /* Затемняющая подложка поверх фона арены, чтобы текст оставался читаемым */
    background: rgba(26, 37, 47, 0.62);
}
/* Водяной знак с иконкой арены убран: он занимал ~60px высоты в самом верху
   экрана боя и ради него приходилось прокручивать поле до лога. Сама арена
   и так видна фоном и подписана в строке статуса. */

/* Компактная строка статуса боя. gap уменьшен с 10 до 6px, чтобы после
   добавления кнопок автобоя ряд по-прежнему помещался в одну строку на
   узких экранах без переноса. */
.battle-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; margin-bottom: 10px; font-size: 15px;
}
/* Резиновая: у арен разная длина названия ("Чистое поле" против "Грозовые
   небеса"), а кнопки справа (автобой/×2/сдаться) должны оставаться
   фиксированного размера и не переноситься на вторую строку. Поэтому именно
   метка арены сжимается первой и обрезается многоточием, если места мало -
   остальной ряд от этого не страдает. */
.battle-arena {
    color: #f1c40f; font-weight: bold; text-align: left;
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.battle-timer {
    background: rgba(0,0,0,0.45); border-radius: 20px; padding: 4px 12px;
    font-weight: bold; color: #fff; white-space: nowrap; flex-shrink: 0;
}
#timer-display { font-size: 18px; font-weight: bold; color: #e74c3c; }

/* Компактная и намеренно неяркая: это отказ от боя, а не основное действие,
   и она не должна перетягивать палец с кнопки атаки. */
.surrender-btn {
    margin-top: 0; padding: 5px 10px; font-size: 13px; min-height: 0;
    background: linear-gradient(180deg, #7f8c8d, #5d6d6e);
    border-bottom-width: 2px; border-radius: 8px; box-shadow: none;
    white-space: nowrap; opacity: 0.85; flex-shrink: 0;
}
.surrender-btn:hover:not(:disabled) { opacity: 1; filter: brightness(1.1); }

/* =========================================================================
   АВТОБОЙ (v1.14)
   Две кнопки-переключателя в той же строке статуса. Логика "утопленной"
   кнопки - в main.js: своя, персональная нажатость каждой (класс .active),
   а не браузерное :active (которое живёт только пока палец физически на
   экране) - именно так и просили: "нажал - провалилась и осталась
   нажатой, нажал другую - эта отжалась, другая нажалась".
   ========================================================================= */
.auto-battle-btn, .auto-speed-btn {
    margin-top: 0; padding: 5px 10px; font-size: 13px; min-height: 0;
    background: linear-gradient(180deg, #3d566e, #24333f);
    border-bottom-width: 2px; border-radius: 8px;
    white-space: nowrap; opacity: 0.9; flex-shrink: 0;
}
.auto-speed-btn { padding: 5px 9px; min-width: 0; }
.auto-battle-btn:hover:not(:disabled), .auto-speed-btn:hover:not(:disabled) {
    opacity: 1; filter: brightness(1.12);
}
/* Активное состояние — визуально "вдавлено" и остаётся таким до следующего
   клика (см. .active в JS), а не только пока палец на кнопке. */
.auto-battle-btn.active {
    background: linear-gradient(180deg, #1e8449, #145a32);
    border-bottom-width: 1px; transform: translateY(2px);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); opacity: 1;
}
.auto-speed-btn.active {
    background: linear-gradient(180deg, #d68910, #9c640c);
    border-bottom-width: 1px; transform: translateY(2px);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); opacity: 1;
}

/* "Ходит: ..." переехало ПОД карточки и стало неброской строкой. Обёртка
   вокруг него - position:relative только затем, чтобы служить точкой
   привязки для .battle-toast-layer (см. ниже): сама по себе она не должна
   ничего сдвигать, её высоту по-прежнему задаёт только .turn-indicator. */
.battle-status-row { position: relative; }
.turn-indicator {
    font-size: 14px; color: #ecf0f1; margin: 8px 0 4px;
    text-shadow: 1px 1px 2px #000;
}

/* =========================================================================
   ЗАБЛОКИРОВАННЫЕ УМЕНИЯ (открываются по ходам, см. combat.js)
   ========================================================================= */
.skill-btn.skill-locked {
    background: #4a4a4a; opacity: 0.55; cursor: not-allowed; position: relative;
}
.skill-btn.skill-locked::after { content: '🔒'; margin-left: 6px; }

/* =========================================================================
   ПРОМОКОДЫ
   ========================================================================= */
.promo-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.promo-modal {
    background: #34495e; border: 2px solid #8e44ad; border-radius: 10px;
    padding: 25px; width: 90%; max-width: 380px; text-align: center;
}
.promo-modal input {
    width: 100%; padding: 10px; margin: 12px 0; border-radius: 6px; border: none;
    font-size: 16px; text-align: center; text-transform: uppercase;
}
.promo-modal-actions { display: flex; gap: 10px; justify-content: center; }
.promo-message { min-height: 20px; font-size: 13px; margin-top: 6px; }
.promo-message.success { color: #2ecc71; }
.promo-message.error { color: #e74c3c; }

.promo-hero-slot {
    border: 2px dashed #8e44ad !important;
}
.promo-hero-tag {
    background: #8e44ad; color: white; font-size: 10px; padding: 2px 5px;
    border-radius: 4px; display: inline-block; margin-top: 4px;
}

/* =========================================================================
   ОТДЕЛЬНЫЙ ЭКРАН МАГАЗИНА
   ========================================================================= */
.shop-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; max-width: 700px; margin: 0 auto 10px; }

@media (max-width: 768px) {
    #screen-battle::before { font-size: 40px; }
}

/* Маленькая второстепенная кнопка (например "Удалить профиль" - не должна
   визуально спорить с основным действием) */
.small-btn { font-size: 12px; padding: 6px 14px; margin-top: 0; opacity: 0.85; }
.small-btn:hover:not(:disabled) { opacity: 1; }

/* =========================================================================
   ВЫБОР АВАТАРА ПРОФИЛЯ
   ========================================================================= */
.avatar-picker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px auto 20px; max-width: 500px; }
.avatar-option {
    width: 52px; height: 52px; border-radius: 50%; background-size: cover; background-position: center;
    border: 3px solid #7f8c8d; cursor: pointer; transition: 0.15s;
}
.avatar-option:hover { border-color: #f1c40f; }
.avatar-option.selected { border-color: #2ecc71; box-shadow: 0 0 8px #2ecc71; }

/* =========================================================================
   ВКЛАДКИ МАГАЗИНА (герои / образы)
   ========================================================================= */
.shop-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 15px; }
.shop-tab { background: #34495e; opacity: 0.7; padding: 8px 18px; font-size: 14px; }
.shop-tab.active { background: #16a085; opacity: 1; }
.skins-hint { color: #bdc3c7; font-size: 13px; max-width: 500px; margin: 0 auto 15px; }
.skin-owned-tag { background: #2ecc71; color: #1a252f; font-size: 10px; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-top: 6px; font-weight: bold; }
.skin-equipped-tag { background: #f1c40f; color: #1a252f; font-size: 10px; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-top: 6px; font-weight: bold; }

/* =========================================================================
   БАФЫ/ДЕБАФЫ (v1.03): бейджи на карточке бойца + generic-анимация
   ========================================================================= */
/* Строго одна строка фиксированной высоты: при переносе бейджей на вторую
   строку карточка бойца росла и двигала всё поле боя. */
.buffs-row { display: flex; gap: 3px; margin-top: 2px; height: 18px; overflow: hidden; flex-wrap: nowrap; }
.buff-badge { font-size: 13px; background: rgba(0,0,0,0.35); border-radius: 4px; padding: 0 3px; cursor: help; }
/* Яд/ожог - отличаем от бафов красноватой подложкой, чтобы «плохое» читалось сразу */
.dot-badge { background: rgba(192, 57, 43, 0.5); }

@keyframes buff-positive-kf {
    0%, 100% { box-shadow: 0 0 0 rgba(52, 152, 219, 0); }
    50% { box-shadow: 0 0 20px 5px rgba(52, 152, 219, 0.85); }
}
.fx-buff-positive { animation: buff-positive-kf 0.55s ease-in-out; }

@keyframes buff-negative-kf {
    0%, 100% { box-shadow: 0 0 0 rgba(142, 68, 173, 0); }
    50% { box-shadow: 0 0 20px 5px rgba(142, 68, 173, 0.85); }
}
.fx-buff-negative { animation: buff-negative-kf 0.55s ease-in-out; }

.special-btn { background: linear-gradient(135deg, #34495e, #2c3e50); border: 2px solid #8e44ad; }
.special-btn:hover:not(:disabled) { background: linear-gradient(135deg, #3d566e, #34495e); }

/* =========================================================================
   ПОЛЯ ВВОДА (было еле заметное поле имени профиля - трудно попасть пальцем)
   ========================================================================= */
input[type="text"] {
    padding: 14px 16px;
    font-size: 18px;
    border-radius: 8px;
    border: 2px solid #7f8c8d;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    display: block;
    margin: 10px auto;
    text-align: center;
    background: #ecf0f1;
    color: #1a252f;
}
input[type="text"]:focus {
    outline: none;
    border-color: #f1c40f;
}
@media (max-width: 768px) {
    input[type="text"] { font-size: 20px; padding: 16px; }
}

/* =========================================================================
   СУНДУК
   ========================================================================= */
.chest-modal { text-align: center; }
.chest-icon { font-size: 60px; margin-bottom: 10px; }
.chest-img { width: 120px; height: 120px; object-fit: contain; margin: 0 auto 10px; display: block; }

/* Витрина сундуков: обычный и эпический рядом */
.chest-offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 560px; margin: 0 auto; }
.chest-offer {
    background: rgba(44, 62, 80, 0.9); border: 2px solid #7f8c8d; border-radius: 12px;
    padding: 14px 10px; text-align: center;
}
.chest-offer.epic { border-color: #9b59b6; box-shadow: 0 0 16px rgba(155, 89, 182, 0.4); }
.chest-offer .chest-img { width: 90px; height: 90px; }
.chest-offer .chest-icon { font-size: 54px; margin-bottom: 6px; }
.chest-offer .skins-hint { margin-bottom: 10px; font-size: 12px; }
.chest-offer button { width: 100%; font-size: 15px; padding: 10px 6px; }
.epic-modal { border-color: #9b59b6; }
.weapon-picker-item.selected { border-color: #f1c40f; box-shadow: 0 0 12px rgba(241, 196, 15, 0.6); }

/* Описание выбранного оружия в эпическом сундуке */
.epic-chest-details {
    background: #2c3e50; border: 2px solid #f1c40f; border-radius: 10px;
    padding: 12px; margin: 0 0 12px; text-align: left; font-size: 13px; line-height: 1.5;
}
.epic-details-head { font-size: 16px; margin-bottom: 6px; }
.epic-details-icon { font-size: 26px; vertical-align: middle; }
.epic-details-effect { color: #ecf0f1; }
.epic-native { color: #2ecc71; margin-top: 4px; }
.epic-native-none { color: #95a5a6; }
.epic-details-sell { color: #bdc3c7; margin-top: 4px; }

.inventory-counter { color: #bdc3c7; font-size: 13px; margin: 0 0 10px; }

@media (max-width: 768px) {
    .chest-offers { grid-template-columns: 1fr; }
}

/* =========================================================================
   ИНВЕНТАРЬ (v1.04)
   ========================================================================= */
.inventory-hero-picker { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 15px; }
.inventory-hero-thumb {
    width: 100px; height: 100px; border-radius: 10px; background-size: cover; background-position: center;
    border: 3px solid #7f8c8d; cursor: pointer;
}
.inventory-hero-thumb.selected { border-color: #f1c40f; box-shadow: 0 0 8px #f1c40f; }

.inventory-active-hero {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: #2c3e50; border-radius: 10px; padding: 15px; margin: 0 auto 20px; max-width: 420px;
}
.inventory-active-row { display: flex; align-items: center; gap: 15px; }
.inventory-hero-portrait { width: 190px; height: 190px; border-radius: 10px; background-size: cover; background-position: center; border: 3px solid #7f8c8d; }
.inventory-hero-name { font-size: 20px; }
.inventory-weapon-slot {
    width: 64px; height: 64px; border-radius: 8px; border: 3px dashed #7f8c8d; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer;
    background: #34495e;
}
.inventory-weapon-slot.filled { border-style: solid; border-color: #f1c40f; }
.inventory-weapon-slot:hover { border-color: #f1c40f; background: #3d566e; }
.inventory-slot-hint { color: #95a5a6; font-size: 12px; }

/* --- Выбор оружия в слот героя --- */
.weapon-picker-modal { max-width: 460px; }
.weapon-picker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px; margin: 15px 0; max-height: 46vh; overflow-y: auto;
}
.weapon-picker-item {
    background: #2c3e50; border: 2px solid #7f8c8d; border-radius: 8px;
    padding: 10px 6px; cursor: pointer; font-size: 12px; transition: 0.15s;
}
.weapon-picker-item:hover { border-color: #f1c40f; background: #3d566e; }
.weapon-picker-item.native { border-color: #2ecc71; }
.weapon-picker-icon { font-size: 30px; margin-bottom: 4px; }
.weapon-picker-item small { display: block; color: #bdc3c7; margin-top: 3px; }
.weapon-picker-native { color: #2ecc71; font-size: 11px; font-weight: bold; margin-top: 4px; }

/* --- Полная сводка характеристик героя --- */
.inventory-hero-stats { max-width: 560px; margin: 0 auto 20px; }
.stats-title { margin: 0 0 10px; font-size: 18px; }
.stats-weapon-line {
    background: #2c3e50; border: 2px solid #f1c40f; border-radius: 8px;
    padding: 10px 12px; font-size: 13px; margin-bottom: 12px; text-align: left; line-height: 1.5;
}
.stats-weapon-empty { border-color: #7f8c8d; color: #95a5a6; font-style: italic; }
.stats-weapon-foreign { color: #95a5a6; }

.hero-stats-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    background: #2c3e50; border-radius: 8px; overflow: hidden;
}
.hero-stats-table th {
    background: #1a252f; padding: 8px 10px; font-size: 12px; color: #bdc3c7; text-align: right;
}
.hero-stats-table th:first-child { text-align: left; }
.hero-stats-table td { padding: 7px 10px; border-top: 1px solid rgba(255,255,255,0.07); text-align: right; }
.hero-stats-table td:first-child { text-align: left; color: #ecf0f1; }
.hero-stats-table td small { color: #95a5a6; font-size: 11px; }
.hero-stats-table .stats-section td {
    background: #1a252f; text-align: center; color: #f1c40f;
    font-weight: bold; font-size: 12px; text-transform: uppercase;
}
.stat-same { color: #bdc3c7; }
.stat-bare { color: #95a5a6; }
.stat-armed { font-weight: bold; }
.stat-up { color: #2ecc71; }
.stat-down { color: #e74c3c; }

.weapon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 420px; margin: 0 auto 20px; }
.weapon-slot-item {
    width: 100%; aspect-ratio: 1; border-radius: 8px; border: 2px solid #7f8c8d;
    background: #34495e; display: flex; align-items: center; justify-content: center;
    font-size: 24px; cursor: pointer; position: relative;
}
.weapon-slot-item.empty { border-style: dashed; opacity: 0.35; cursor: default; }
.weapon-slot-item.selected { border-color: #f1c40f; box-shadow: 0 0 8px #f1c40f; }

.weapon-details-panel {
    background: #2c3e50; border: 2px solid #f1c40f; border-radius: 10px;
    padding: 15px; max-width: 420px; margin: 0 auto 20px; text-align: center;
}
.weapon-details-panel .weapon-effects { font-size: 13px; color: #bdc3c7; margin: 8px 0; }
.weapon-details-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
    .inventory-hero-thumb { width: 80px; height: 80px; }
    .inventory-hero-portrait { width: 150px; height: 150px; }
    .weapon-grid { grid-template-columns: repeat(4, 1fr); max-width: 320px; }
}

/* =========================================================================
   ГЛОБАЛЬНАЯ ТРЯСКА ЭКРАНА ПРИ КРИТЕ (v1.04)
   ========================================================================= */
@keyframes screen-shake-kf {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.screen-shake { animation: screen-shake-kf 0.4s ease-in-out; }

/* =========================================================================
   HUD ГЛАВНОГО МЕНЮ + РЯД БЫСТРЫХ ДЕЙСТВИЙ
   Раньше "Магазин"/"Инвентарь"/"Промокод" стояли в столбик через <br>,
   разного цвета и веса, а монеты были спрятаны в подписи кнопки магазина -
   приходилось прокручивать и вчитываться, чтобы найти нужное. Теперь профиль
   и монеты - одна строка сверху, а сами разделы - один ряд одинаковых
   иконок-кнопок, всё видно и достаётся одним взглядом/тапом.
   ========================================================================= */
.menu-hud {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: rgba(0,0,0,0.25); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px;
}
.menu-hud-profile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.menu-hud-avatar {
    width: 42px; height: 42px; border-radius: 50%; background-size: cover; background-position: center;
    border: 2px solid #f1c40f; flex-shrink: 0;
}
.menu-hud-info { text-align: left; min-width: 0; }
.menu-hud-info b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.menu-hud-info .stats-line { margin: 0; font-size: 11px; white-space: nowrap; }
.menu-hud-coins {
    font-size: 16px; font-weight: bold; color: #f1c40f; white-space: nowrap;
    background: rgba(0,0,0,0.3); border-radius: 20px; padding: 5px 12px; flex-shrink: 0;
}

.menu-quick-actions {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px;
}
.quick-action-btn {
    margin: 0; padding: 10px 4px; font-size: 12px; font-weight: bold;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: linear-gradient(180deg, #3d566e, #2c3e50); border-bottom-width: 3px;
}
.quick-action-icon { font-size: 22px; }

.menu-logout-btn { margin-top: 14px; }

/* Ненавязчивая подсказка новичку про инструкцию (см. main.js -> showMenu). */
.menu-rules-nudge {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: rgba(142, 68, 173, 0.25); border: 1px solid #8e44ad; border-radius: 10px;
    padding: 8px 10px; margin-bottom: 12px; font-size: 13px; text-align: left;
}
.menu-rules-nudge span { flex: 1 1 200px; }
.rules-nudge-open { margin: 0; padding: 6px 12px; font-size: 12px; background: linear-gradient(180deg, #9b59b6, #8e44ad); }
.rules-nudge-x {
    margin: 0; padding: 4px 9px; font-size: 12px; background: transparent; border: 1px solid rgba(255,255,255,0.3);
    box-shadow: none;
}

/* Закреплённая крупная кнопка "В бой" - главное CTA-действие, всегда под
   рукой, даже если список героев длинный и прокручен вниз (тот же приём,
   что и у .sticky-back, только это основное действие, а не второстепенное). */
.battle-cta {
    position: sticky; bottom: 14px; z-index: 50;
    display: block; width: 100%; max-width: 380px; margin: 6px auto 0;
    font-size: 19px; padding: 15px; box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.menu-bottom-spacer { height: 4px; }

@media (max-width: 768px) {
    .menu-hud-info .stats-line { display: none; } /* на узком экране статистика уступает место монетам */
    .quick-action-btn { font-size: 11px; padding: 9px 2px; }
    .quick-action-icon { font-size: 20px; }
}

/* =========================================================================
   ПРАВИЛА ИГРЫ
   ========================================================================= */
.rules-modal { max-width: 560px; text-align: left; position: relative; padding-top: 20px; }
.rules-title { margin: 0 0 12px; text-align: center; font-size: 22px; }
.rules-close-x {
    position: absolute; top: 10px; right: 10px; margin: 0; padding: 4px 10px;
    font-size: 14px; background: transparent; border: 1px solid rgba(255,255,255,0.3); box-shadow: none;
}
.rules-body { max-height: 60vh; overflow-y: auto; margin-bottom: 14px; padding-right: 4px; }
.rules-body details {
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    margin-bottom: 8px; padding: 4px 12px;
}
.rules-body summary {
    cursor: pointer; font-weight: bold; padding: 8px 0; font-size: 14px; list-style: none;
}
.rules-body summary::-webkit-details-marker { display: none; }
.rules-body summary::before { content: '▸ '; color: #f1c40f; }
.rules-body details[open] summary::before { content: '▾ '; }
.rules-body details[open] summary { border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 6px; }
.rules-body ul, .rules-body p { margin: 6px 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.5; color: #ecf0f1; }
.rules-body li { margin-bottom: 5px; }
.rules-body p { padding-left: 0; }

/* =========================================================================
   ВСПЛЫВАЮЩИЕ ПОДСКАЗКИ О СОБЫТИЯХ БОЯ (v1.12, поправлено в v1.13)
   Показывают события, которых не видно через обычные цифры урона на
   карточке бойца: призыв/гибель помощника, оглушение, ультимативное умение,
   снятие бафов. Появляются и тают "как туман" - см. js/ui.js -> showBattleToast.

   Раньше слой был вложен прямо в .battlefield с inset:0 и центрировался
   поверх ВСЕХ карточек - при активной игре это перекрывало имена/HP бойцов
   как раз в момент, когда по ним нужно кликать, и мешало читать поле боя.
   Теперь слой лежит в .battle-status-row (см. index.html) - в узком зазоре
   между карточками и умениями, где раньше было только "Ходит: ...".
   bottom: 100% относительно этого зазора ставит подсказку ТОЧНО над строкой
   "Ходит", не перекрывая её текст, и растит стопку вверх, если подсказок
   несколько сразу. Слой по-прежнему position: absolute, поэтому его
   появление/исчезновение не меняет высоту .battle-status-row и НИЧЕГО
   не сдвигает ни выше (карточки), ни ниже (умения, кнопка, лог). */
.battle-toast-layer {
    position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 4px;
    z-index: 15;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    pointer-events: none; /* не мешает кликам по бойцам под подсказкой */
}
/* Появление — через @keyframes, а не через transition + класс, добавляемый
   из JS следующим кадром. Анимация стартует сама, как только элемент
   вставлен в DOM, и не зависит от requestAnimationFrame — та не вызывается,
   пока вкладка не в фокусе, и тогда переход, ждущий кадра отрисовки, не
   срабатывал вовсе (подсказка всё время жизни оставалась прозрачной). */
.battle-toast {
    background: rgba(20, 25, 32, 0.82);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    max-width: 90%;
    text-align: center;
    opacity: 0;
    animation: battle-toast-in-kf 0.35s ease forwards;
}
@keyframes battle-toast-in-kf {
    from { opacity: 0; transform: scale(0.9) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.battle-toast-hide {
    /* "Растворяется как туман": не просто исчезает, а расплывается и уплывает вверх */
    animation: battle-toast-out-kf 0.55s ease forwards;
}
@keyframes battle-toast-out-kf {
    from { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
    to   { opacity: 0; transform: scale(1.05) translateY(-10px); filter: blur(4px); }
}
.battle-toast-summon  { border-color: #8e44ad; box-shadow: 0 4px 14px rgba(142, 68, 173, 0.45); }
.battle-toast-debuff  { border-color: #e74c3c; box-shadow: 0 4px 14px rgba(231, 76, 60, 0.4); }
.battle-toast-buff    { border-color: #3498db; box-shadow: 0 4px 14px rgba(52, 152, 219, 0.4); }
.battle-toast-ultimate{ border-color: #f1c40f; box-shadow: 0 4px 14px rgba(241, 196, 15, 0.45); }

@media (max-width: 768px) {
    .battle-toast { font-size: 12px; padding: 6px 12px; }
}