:root {
  --bg: #16110d;
  --panel: #241a13;
  --panel-2: #2e2117;
  --border: #4a382a;
  --text: #efe3d3;
  --muted: #a8927c;
  --gold: #d8a93a;
  --red: #a13a3a;
  --green: #4c8a5e;
  --blue-a: #3a6fa1;
  --blue-b: #a1523a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 2px solid var(--border);
}

header h1 { margin: 0; font-size: 1.3rem; color: var(--gold); }

/* Лого-ссылка в шапке — ведёт на hero.html (автор, 22.09.2026: "при нажатии
   на лого игры в левом углу... будет вести" на страницу героя). */
.brand-link { text-decoration: none; }

#userBar { display: flex; align-items: center; gap: 12px; }
#userBar span { color: var(--muted); }
/* Ссылки навигации в шапке (Главная/Карта/Магазин/Клан/Бой) стилизованы под
   ту же ghost-кнопку, что и раньше была только у <button> (см. ниже). */
#userBar a { text-decoration: none; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.hidden { display: none !important; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}

.panel.narrow { max-width: 420px; margin: 0 auto 20px; }

#noClanPanel { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }

h2, h3 { color: var(--gold); margin-top: 0; }
h3 { font-size: 1rem; margin-bottom: 8px; border-top: 1px solid var(--border); padding-top: 14px; }
h3:first-child { border-top: none; padding-top: 0; }

form { display: flex; flex-direction: column; gap: 10px; }

input, select, button {
  font: inherit;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}

button {
  cursor: pointer;
  background: var(--gold);
  color: #241a13;
  font-weight: 600;
  border: none;
  transition: opacity 0.15s;
}
button:hover { opacity: 0.85; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

button.ghost, a.ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-weight: 500;
  display: inline-block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 0.95rem;
}
a.ghost:hover { opacity: 0.85; }
button.small { padding: 5px 10px; font-size: 0.85rem; }

.error { color: #e07a7a; min-height: 1.2em; margin: 0; font-size: 0.9rem; }
.muted { color: var(--muted); font-size: 0.9rem; }

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab-btn {
  flex: 1;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.tab-btn.active { background: var(--gold); color: #241a13; }
.tab-panel { display: none; }
.tab-panel.active { display: flex; }

.grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 16px;
}
@media (max-width: 850px) {
  .grid3 { grid-template-columns: 1fr; }
}

.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.stat-row .name { color: var(--muted); width: 100px; }
.stat-row .value { font-weight: 600; width: 28px; text-align: center; }
.stat-row button { padding: 3px 9px; font-size: 0.8rem; }

/* Прогрессивные шкалы личного кабинета — ELO до следующей отсечки и жизни
   бойца (Выносливость × HP_PER_ENDURANCE, см. public/app.js). */
.progress-block { margin: 10px 0; }
.progress-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9rem; margin-bottom: 4px; }
.progress-bar-bg { background: #3a2a1f; border-radius: 6px; height: 12px; overflow: hidden; border: 1px solid var(--border); }
.progress-bar-fill { height: 100%; transition: width 0.35s ease; }
.elo-bar .progress-bar-fill { background: linear-gradient(90deg, var(--gold), #f0cf7a); }
/* Шкала жизни красится по третям maxHp через JS (hpColorClass), а не
   статичным градиентом .life-bar — цвет меняется, пока идёт восстановление. */
.hp-red { background: linear-gradient(90deg, var(--red), #d68686); }
.hp-yellow { background: linear-gradient(90deg, #b8862f, #e0b45c); }
.hp-green { background: linear-gradient(90deg, var(--green), #7cc98f); }
#heroElixirBtn { margin-top: 6px; }
.small { font-size: 0.8rem; margin: 4px 0 0; }

/* Поп-ап "герой не восстановился" (см. showHpGateModal в public/app.js). */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px;
}
.modal-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px; max-width: 380px; width: 100%;
}
.modal-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.member-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.member-row:last-child { border-bottom: none; }
.role-tag { font-size: 0.75rem; padding: 2px 7px; border-radius: 10px; background: var(--panel-2); color: var(--gold); }

.clan-cards { display: flex; flex-direction: column; gap: 8px; }
.clan-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; gap: 10px; flex-wrap: wrap;
}
.clan-card .info { font-size: 0.9rem; }
.clan-card .info .muted { display: block; }
.clan-card .btns { display: flex; gap: 6px; }

.challenge-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 0.9rem; }
.challenge-card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-pill { padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; }
.status-PENDING { background: #4a382a; color: var(--gold); }
.status-MOBILIZING { background: #3a5a6f; color: #cfeaff; }
/* ДОБАВЛЕНО 30.09.2026 (Фаза 2, живые клановые войны) — новый статус вызова
   между MOBILIZING и RESOLVED, пока живая война идёт (см. Battle.status в
   schema.prisma и ChallengeView в src/challenges/challenges.ts). */
.status-LIVE { background: var(--gold); color: #241a13; font-weight: 700; }
.status-RESOLVED { background: var(--green); color: #fff; }
.status-DECLINED, .status-MOBILIZATION_FAILED { background: var(--red); color: #fff; }

/* HUD-баннер боя (общее здоровье/CBX команд + номер раунда/секундомер) — по
   мотивам присланного автором скрина (22.09.2026, см. комментарий в
   battle.html). Все числа здесь настоящие (см. updateBattleHud в
   battle.js) — никакой выдуманной статистики. */
.battle-hud {
  display: flex; align-items: stretch; gap: 12px; margin-bottom: 16px;
  background: radial-gradient(circle at 20% 0%, #2e2117, var(--bg) 70%);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.battle-hud-side { flex: 1; display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.battle-hud-side-b { flex-direction: row-reverse; text-align: right; }
.battle-hud-crest {
  width: 44px; height: 44px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}
.battle-hud-info { flex: 1; min-width: 0; }
.battle-hud-name {
  font-weight: 700; font-size: 0.92rem; color: var(--text); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.battle-hud-bar { background: #3a2a1f; border-radius: 6px; height: 9px; overflow: hidden; margin: 3px 0; border: 1px solid var(--border); }
.battle-hud-bar-fill { height: 100%; transition: width 0.35s ease; }
.battle-hud-bar.hp .battle-hud-bar-fill { background: linear-gradient(90deg, var(--red), #d68686); }
.battle-hud-bar.cbx .battle-hud-bar-fill { background: linear-gradient(90deg, var(--blue-a), #7bb0e0); }
.battle-hud-bar-label { font-size: 0.72rem; color: var(--muted); }
.battle-hud-center { flex-shrink: 0; text-align: center; padding: 0 10px; align-self: center; }
.battle-hud-round {
  font-weight: 800; font-size: 0.9rem; color: var(--gold); background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 12px; margin-bottom: 4px; white-space: nowrap;
}
.battle-hud-timer { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .battle-hud { flex-direction: column; }
  .battle-hud-side-b { flex-direction: row; text-align: left; }
  .battle-hud-center { padding: 6px 0; }
}

/* Дуэльная сцена боя (автор, 24.09.2026: "драка двух героев внешне
   напоминающая драку в мортал комбат"). Крупно в центре — всегда ровно два
   бойца: атакующий и защищающийся текущей записи лога (они гарантированно из
   разных команд, см. src/battle/engine.ts) — "камера" переключается на новую
   пару при каждой её смене (см. setDuelSlot в battle.js). Остальной состав
   клана — мелкими карточками на "скамейках" по бокам, скамейка пустует и
   скрывается сама (:empty), если у команды всего один боец (безклановая
   дуэль 1 на 1 — тогда дуэлянты вообще не меняются всю игру). */
.duel-arena { display: flex; align-items: center; gap: 14px; }
.duel-bench {
  flex: 0 0 92px; display: flex; flex-direction: column; gap: 6px;
  max-height: 420px; overflow-y: auto; padding-right: 2px;
}
.duel-bench:empty { display: none; }
.duel-main { flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; min-width: 0; }

.duel-fighter { flex: 1; max-width: 260px; display: flex; flex-direction: column; align-items: center; position: relative; }
.duel-fighter-frame {
  width: 100%; aspect-ratio: 4 / 3; position: relative; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at center, var(--panel-2) 0%, var(--bg) 78%);
  border: 1px solid var(--border);
  animation: duelIdle 2.8s ease-in-out infinite;
}
.duel-fighter-a .duel-fighter-frame { box-shadow: inset 0 0 0 2px rgba(58, 111, 161, 0.35); }
.duel-fighter-b .duel-fighter-frame { box-shadow: inset 0 0 0 2px rgba(161, 58, 58, 0.35); }
.duel-fighter-fx { position: absolute; inset: 0; }
.duel-fighter-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 15%;
  -webkit-mask-image: radial-gradient(ellipse at center, black 58%, transparent 96%);
  mask-image: radial-gradient(ellipse at center, black 58%, transparent 96%);
}
.duel-fighter-b .duel-fighter-img { transform: scaleX(-1); }
.duel-fighter-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4.2rem;
}
.duel-fighter-info { margin-top: 8px; width: 100%; max-width: 220px; text-align: center; }
.duel-fighter-name { font-weight: 700; font-size: 0.92rem; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-hpbar-bg { background: #3a2a1f; border-radius: 6px; height: 11px; overflow: hidden; border: 1px solid var(--border); }
.duel-hpbar-fill { background: linear-gradient(90deg, var(--green), #7cc98f); height: 100%; transition: width 0.35s ease; }
.duel-fighter-b .duel-hpbar-fill { background: linear-gradient(90deg, var(--red), #d68686); }

.duel-vs {
  flex-shrink: 0; font-weight: 800; color: var(--gold); font-size: 1.6rem; text-shadow: 0 0 14px rgba(216, 169, 58, 0.55);
}

.duel-fighter .float-dmg {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 800; font-size: 1.3rem;
  color: #ff8a8a; animation: floatUp 0.75s ease forwards; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.duel-fighter .float-dmg.crit { color: #ffd84a; font-size: 1.7rem; }
.duel-fighter .float-dmg.dodge { color: #9ad1ff; font-size: 1.05rem; }
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -22px); } }

@keyframes duelIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes duelLungeA { 0% { transform: translateX(0); } 35%, 55% { transform: translateX(26px) rotate(-1.5deg); } 100% { transform: translateX(0); } }
@keyframes duelLungeB { 0% { transform: translateX(0); } 35%, 55% { transform: translateX(-26px) rotate(1.5deg); } 100% { transform: translateX(0); } }
.duel-fighter-a .duel-fighter-fx.attacking { animation: duelLungeA 0.5s ease; }
.duel-fighter-b .duel-fighter-fx.attacking { animation: duelLungeB 0.5s ease; }

@keyframes duelFlinch {
  0% { transform: translateX(0); filter: none; }
  22% { transform: translateX(-9px) rotate(2.5deg); filter: brightness(1.7) saturate(0.3); }
  55% { transform: translateX(5px) rotate(-1.5deg); filter: brightness(1.1); }
  100% { transform: translateX(0); filter: none; }
}
.duel-fighter-fx.hit { animation: duelFlinch 0.4s ease; }
.duel-fighter-fx.crit-hit { animation: duelFlinch 0.55s ease; }
.duel-fighter-a.crit .duel-fighter-frame, .duel-fighter-b.crit .duel-fighter-frame { box-shadow: 0 0 26px 5px rgba(255, 216, 74, 0.55); }

@keyframes duelDodge {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(-14px) skewX(-3deg); opacity: 0.55; }
  70% { transform: translateX(5px); opacity: 1; }
  100% { transform: translateX(0); }
}
.duel-fighter-fx.dodging { animation: duelDodge 0.35s ease; }

@keyframes duelFall { to { transform: rotate(80deg) translateY(26px); opacity: 0.3; filter: grayscale(1); } }
.duel-fighter-fx.fallen { animation: duelFall 0.55s ease forwards; }

.duel-fighter.you .duel-fighter-frame { box-shadow: inset 0 0 0 2px var(--blue-a), 0 0 0 2px var(--blue-a); }
.duel-you-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 800; color: #0b1220;
  background: var(--blue-a); border-radius: 5px; padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}

/* Скамейка состава — мелкие карточки, подсвечивается тот, кто сейчас на
   дуэльной сцене крупно (см. .bench-card.on-stage, выставляется в JS). */
.bench-card {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 6px;
  text-align: center; transition: opacity 0.3s;
}
.bench-card.fallen { opacity: 0.35; }
.bench-card.on-stage { box-shadow: 0 0 0 2px var(--gold); }
.bench-card.you { box-shadow: 0 0 0 2px var(--blue-a); }
.bench-card.you.on-stage { box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px var(--blue-a); }
.bench-avatar { font-size: 1.3rem; line-height: 1; margin-bottom: 4px; }
.bench-name { font-size: 0.66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 3px; }
.bench-hpbar-bg { background: #3a2a1f; border-radius: 4px; height: 6px; overflow: hidden; }
.bench-hpbar-fill { background: linear-gradient(90deg, var(--green), #7cc98f); height: 100%; transition: width 0.35s ease; }
.duel-bench-b .bench-hpbar-fill { background: linear-gradient(90deg, var(--red), #d68686); }

@media (max-width: 720px) {
  .duel-arena { flex-wrap: wrap; }
  .duel-main { order: 1; width: 100%; gap: 8px; }
  .duel-vs { font-size: 1.15rem; }
  .duel-bench { order: 2; flex: 1 1 auto; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: visible; width: 100%; }
  .bench-card { flex: 0 0 72px; }
}

/* Тряска арены на попаданиях — reflow в shakeArena() (battle.js) позволяет
   перезапускать анимацию даже при частых повторах подряд. */
@keyframes battleShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@keyframes battleShakeBig {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
.battle-shake { animation: battleShake 0.32s ease; }
.battle-shake-big { animation: battleShakeBig 0.45s ease; }

/* Полноэкранная вспышка на попаданиях/критах/уворотах — чисто декоративный
   оверлей поверх страницы, не мешает кликам (pointer-events: none). */
.battle-flash {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: rgba(255, 90, 90, 0); transition: background 0.05s linear;
}
.battle-flash.active { background: rgba(255, 90, 90, 0.16); }
.battle-flash.dodge-active { background: rgba(154, 209, 255, 0.12); }

.battle-controls { display: flex; gap: 10px; margin: 14px 0; }
.banner { text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--gold); padding: 10px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.log { max-height: 220px; overflow-y: auto; font-size: 0.85rem; color: var(--muted); background: var(--panel-2); border-radius: 8px; padding: 10px 14px; }
.log div { padding: 2px 0; }

/* Отдельная страница боя (public/battle.html, public/battle.js) — крупнее и
   с местом под прозу вместо однострочных технических логов. */
.battle-page-main { max-width: 900px; }
.battle-page-log { max-height: none; font-size: 0.95rem; line-height: 1.55; color: var(--text); padding: 14px 18px; }
.round-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 1px 7px; margin-right: 6px; vertical-align: middle;
}
.narration-line { padding: 7px 0; border-bottom: 1px solid var(--border); }
.narration-line:last-child { border-bottom: none; }
.narration-line.crit { color: #ffd84a; }
.narration-line.dodge { color: #9ad1ff; }
.ghost-link {
  color: var(--gold); border: 1px solid var(--gold); border-radius: 6px;
  padding: 7px 12px; text-decoration: none; font-size: 0.9rem; font-weight: 500;
}
.ghost-link:hover { opacity: 0.85; }

/* Утилита-обёртка для строк заголовков (карта, публичный кабинет клана) */
.row { display: flex; }

/* Карта: сетка домов клана (пул Точек, см. src/points/pool.ts) */
.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.map-grid-small { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }

.map-tile {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.map-tile.occupied { cursor: pointer; border-color: var(--gold); transition: transform 0.15s, background 0.15s; }
.map-tile.occupied:hover { transform: translateY(-2px); background: #3a2c1e; }
.map-tile.empty { opacity: 0.5; border-style: dashed; }
.map-tile .crest {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; background: var(--panel); border: 1px solid var(--border);
  overflow: hidden;
}
.map-tile .crest img { width: 100%; height: 100%; object-fit: cover; }
.map-tile .tile-name { font-size: 0.72rem; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-tile .slot-label { font-size: 0.68rem; color: var(--muted); }

/* Плашка силы — сумма характеристик, у бойца и у клана (см. разбор ТЗ, бэклог п.1) */
.power-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--panel-2); border: 1px solid var(--gold); color: var(--gold);
  border-radius: 10px; padding: 1px 7px; font-size: 0.72rem; font-weight: 700;
}
.map-tile .power-badge { position: absolute; top: 4px; right: 4px; padding: 0px 5px; }

/* Публичный кабинет клана */
.cabinet-header { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.cabinet-header .crest { width: 64px; height: 64px; font-size: 2rem; }
.cabinet-member-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.cabinet-member-row:last-child { border-bottom: none; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #241a13; padding: 10px 18px; border-radius: 8px;
  font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.4); z-index: 100;
}

/* Магазин (public/shop.html) — карточки товаров, полностью заглушка (см.
   public/shop.js, разбор ТЗ бэклог п.8). */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.shop-card {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 10px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.shop-card-icon { font-size: 1.8rem; }
.shop-card-name { font-weight: 600; font-size: 0.9rem; }
.shop-card-price { color: var(--gold); font-weight: 700; font-size: 0.85rem; }
.shop-card-note { font-size: 0.75rem; }