/* Страница «В бой» (бывшая «Дуэль»): лобби + экран боя 1 на 1.
   ПЕРЕПИСАНО 06.10.2026 (ТЗ «Классик», claude/tz-klassik-boy.md): старая 2D-арена
   и 3D-врезка убраны — бойцов рисует общая сцена оболочки (fight-scene.js), здесь
   лобби и прозрачный HUD поверх неё. Переменные темы — из style.css. */

/* ---------- Лобби ---------- */
.duel-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.duel-list:empty::after { content: "Пока пусто."; color: var(--muted, #9a8a78); font-size: 0.85rem; }

.duel-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 0.9rem;
}
.duel-row-name { font-weight: 700; }
.duel-row-actions { display: flex; gap: 6px; }

.duel-candidates { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; max-height: 440px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.duel-candidate-card {
  width: 150px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; text-align: center; font-size: 0.85rem;
}
.duel-candidate-avatar { font-size: 1.8rem; margin-bottom: 4px; height: 56px; display: flex; align-items: center; justify-content: center; }
.duel-candidate-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.duel-candidate-name { font-weight: 700; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-candidate-elo { color: var(--gold); font-size: 0.8rem; margin-bottom: 8px; }
.duel-candidate-clan { color: var(--muted, #9a8a78); font-size: 0.74rem; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.small-note { font-size: 0.82rem; }
.hh-nav-link-active { outline: 1px solid var(--gold); border-radius: 8px; }

/* ---------- Экран боя ---------- */
html.duel-fight-on, html.duel-fight-on body { background: transparent !important; overflow: hidden; }
html.duel-fight-on main, html.duel-fight-on .hh-header { display: none !important; }

.fight-hud {
  --fh-red: #ff3b2a; --fh-amber: #ffb52e; --fh-ice: #5fd7ff;
  position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; user-select: none; -webkit-user-select: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #f3e6d2;
}
.fight-hud.hidden { display: none; }
.fight-hud .hidden { display: none !important; }

/* Верх: бойцы + номер раунда */
.fh-top {
  position: absolute; top: 12px; left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(8px, 1.6vw, 22px); padding: 0 clamp(10px, 2.4vw, 36px); align-items: start;
}
.fh-fighter {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-width: 0;
  background: linear-gradient(180deg, rgba(18, 11, 8, 0.72), rgba(12, 8, 6, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.fh-left { border-left: 3px solid var(--fh-red); }
.fh-right { border-right: 3px solid var(--fh-amber); flex-direction: row-reverse; text-align: right; }
.fh-info { flex: 1; min-width: 0; }
.fh-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; background: rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.25);
}
.fh-left .fh-avatar { border-color: var(--fh-red); box-shadow: 0 0 14px rgba(255, 59, 42, 0.45); }
.fh-right .fh-avatar { border-color: var(--fh-amber); box-shadow: 0 0 14px rgba(255, 181, 46, 0.45); }
.fh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fh-name-row { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.fh-right .fh-name-row { flex-direction: row-reverse; }
.fh-name { font-weight: 800; font-size: clamp(14px, 1.5vw, 19px); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-cbx { flex: none; font-size: 0.78rem; font-weight: 700; color: #ffd9a0; background: rgba(255, 150, 60, 0.16); padding: 1px 7px; border-radius: 3px; white-space: nowrap; }
.fh-clan { font-size: 0.72rem; color: #b9a58e; min-height: 1em; margin: 1px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-hp { position: relative; height: 20px; border-radius: 3px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden; }
.fh-hp-fill, .fh-hp-ghost { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; }
.fh-right .fh-hp-fill, .fh-right .fh-hp-ghost { left: auto; right: 0; }
.fh-hp-fill { background: linear-gradient(180deg, #7be37f, #2f9b3a); transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fh-hp-fill.warn { background: linear-gradient(180deg, #ffd45a, #d29b12); }
.fh-hp-fill.low { background: linear-gradient(180deg, #ff6a5a, #c01f12); }
.fh-hp-ghost { background: rgba(255, 255, 255, 0.55); transition: width 0.9s ease 0.35s; }
.fh-hp-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; text-shadow: 0 1px 3px #000, 0 0 6px #000; }

.fh-center { text-align: center; padding: 6px 18px 4px; min-width: 96px; }
.fh-round-label { font-size: 0.68rem; letter-spacing: 0.34em; color: #c9b8a2; }
.fh-round-num {
  font-size: clamp(30px, 4vw, 52px); font-weight: 900; line-height: 1; color: #ffe2b0;
  text-shadow: 0 0 8px rgba(255, 170, 60, 0.9), 0 0 24px rgba(255, 106, 31, 0.7);
}

/* Отсчёт между бойцами (по референсу: мелкая подпись + крупное число) */
.fh-timer { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); text-align: center; width: min(26vw, 260px); }
.fh-timer-small { font-size: 0.72rem; letter-spacing: 0.3em; color: #d8c8b2; text-shadow: 0 1px 4px #000; }
.fh-timer-num { font-size: clamp(54px, 8.5vw, 118px); font-weight: 800; line-height: 1; color: #f4f0ea; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8), 0 0 28px rgba(255, 255, 255, 0.25); font-variant-numeric: tabular-nums; }
.fh-timer.urgent .fh-timer-num { color: #ff7a5a; text-shadow: 0 0 14px rgba(255, 59, 42, 0.9), 0 0 38px rgba(255, 59, 42, 0.6); }
.fh-timer.locked .fh-timer-num { color: #bdb3a6; }
.fh-timer-bar { height: 3px; margin: 6px auto 0; background: rgba(255, 255, 255, 0.14); border-radius: 2px; overflow: hidden; width: 70%; }
.fh-timer-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--fh-amber), #fff2c8); transform-origin: left; }

/* Крупная надпись по центру («Рандом решил…», «К БОЮ!») */
.fh-banner {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(86vw, 900px); text-align: center;
  font-size: clamp(20px, 3.3vw, 42px); font-weight: 900; line-height: 1.2; letter-spacing: 0.03em; color: #fff2d8;
  text-shadow: 0 0 6px rgba(255, 181, 46, 0.95), 0 0 22px rgba(255, 106, 31, 0.8), 0 3px 12px #000;
  animation: fhBannerIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.fh-banner b { color: var(--fh-amber); }
@keyframes fhBannerIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Вступление: «Рандом решил…» компактно сверху, а отсчёт 5-4-3-2-1 и «БОЙ» — огромными растущими буквами */
.fh-banner { top: 14%; font-size: clamp(16px, 2.2vw, 26px); }
.fh-big {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none;
  font-weight: 900; line-height: 1; letter-spacing: 0.04em; color: #fff2d8; white-space: nowrap;
  font-size: clamp(120px, 24vw, 340px);
  text-shadow: 0 0 10px rgba(255, 181, 46, 1), 0 0 34px rgba(255, 106, 31, 0.9), 0 0 70px rgba(255, 59, 42, 0.6), 0 6px 18px #000;
  animation: fhBigGrow 0.85s cubic-bezier(0.15, 0.7, 0.3, 1) both;
}
.fh-big.go {
  color: #fff; font-size: clamp(110px, 22vw, 320px); letter-spacing: 0.08em;
  text-shadow: 0 0 12px #ff3b2a, 0 0 44px #ff3b2a, 0 0 90px rgba(255, 59, 42, 0.8), 0 6px 18px #000;
  animation: fhBigGo 0.8s cubic-bezier(0.1, 0.8, 0.2, 1) both;
}
@keyframes fhBigGrow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); } 25% { opacity: 1; } 100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.45); } }
@keyframes fhBigGo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.15) rotate(-6deg); } 30% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.5) rotate(0deg); } }
@media (max-width: 700px) { .fh-big { top: 34%; } .fh-banner { top: 22%; } }

/* Неоновая роль раунда («БЕЙ» / «ЗАЩИЩАЙСЯ») — одна, над отсчётом; у каждого игрока своя */
.fh-role {
  white-space: nowrap; font-weight: 900; letter-spacing: 0.08em; font-size: clamp(22px, 2.9vw, 44px); line-height: 1.1; margin-bottom: 4px;
  animation: fhNeonIn 0.35s ease-out both, fhNeonFlicker 1.6s infinite 0.4s;
}
.fh-role.attack { color: #ffd2c4; text-shadow: 0 0 4px #fff, 0 0 10px #ff5a2e, 0 0 22px #ff3b2a, 0 0 46px #ff1a00; }
.fh-role.defend { color: #d6f5ff; text-shadow: 0 0 4px #fff, 0 0 10px #35c8ff, 0 0 22px #1aa6ff, 0 0 46px #0a7bff; }
.fh-timer { width: min(34vw, 380px); }
@keyframes fhNeonIn { from { opacity: 0; margin-top: 14px; } to { opacity: 1; margin-top: 0; } }
@keyframes fhNeonOut { to { opacity: 0; } }
@keyframes fhNeonFlicker { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 48% { opacity: 0.72; } 50% { opacity: 1; } 78% { opacity: 0.88; } }

/* Серые мигающие точки выбора зон с расходящимися волнами */
.fh-dots { position: absolute; inset: 0; }
.fh-dot { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; pointer-events: auto; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fh-dot-core {
  position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px; border-radius: 50%;
  background: #b4b4b4; box-shadow: 0 0 10px rgba(255, 255, 255, 0.55); animation: fhDotBlink 1s ease-in-out infinite;
}
.fh-dot::before, .fh-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px; border-radius: 50%;
  border: 2px solid rgba(205, 205, 205, 0.7); animation: fhDotWave 1.5s ease-out infinite; pointer-events: none;
}
.fh-dot::after { animation-delay: 0.75s; }
.fh-dot:hover .fh-dot-core { background: #e6e6e6; }
.fh-dot-label { position: absolute; left: 50%; top: calc(100% - 4px); transform: translateX(-50%); font-size: 0.68rem; letter-spacing: 0.1em; color: rgba(225, 225, 225, 0.8); text-shadow: 0 1px 3px #000; white-space: nowrap; pointer-events: none; }
.fh-dot.picked .fh-dot-core { width: 20px; height: 20px; margin: -10px; animation: none; background: #fff; }
.fh-dot.picked.attack .fh-dot-core { background: #ff5a2e; box-shadow: 0 0 14px #ff3b2a, 0 0 30px #ff1a00; }
.fh-dot.picked.defend .fh-dot-core { background: #35c8ff; box-shadow: 0 0 14px #1aa6ff, 0 0 30px #0a7bff; }
.fh-dot.picked.attack::before, .fh-dot.picked.attack::after { border-color: rgba(255, 90, 46, 0.85); }
.fh-dot.picked.defend::before, .fh-dot.picked.defend::after { border-color: rgba(53, 200, 255, 0.85); }
.fh-dot.dim { opacity: 0.4; }
.fh-dot.dim::before, .fh-dot.dim::after { animation-duration: 2.4s; }
.fh-dot.locked { pointer-events: none; }
.fh-dot.locked::before, .fh-dot.locked::after { animation: none; opacity: 0; }
.fh-dot.gone { opacity: 0; transition: opacity 0.25s; pointer-events: none; }
@keyframes fhDotBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
@keyframes fhDotWave { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3.6); opacity: 0; } }

/* Цифры урона и всплывающие эффекты */
.fh-fx { position: absolute; inset: 0; }
.fh-dmg {
  position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: clamp(42px, 6.2vw, 88px); line-height: 1; white-space: nowrap;
  color: #ffd9d2; text-shadow: 0 0 4px #fff, 0 0 12px #ff3b2a, 0 0 28px #ff1a00, 0 0 56px #b00000; animation: fhDmgRise 2.3s ease-out forwards;
}
.fh-dmg small { display: block; font-size: 0.32em; letter-spacing: 0.2em; margin-bottom: 2px; }
.fh-dmg.crit { color: #fff3c4; font-size: clamp(54px, 7.6vw, 110px); text-shadow: 0 0 4px #fff, 0 0 14px #ffb52e, 0 0 32px #ff8a00, 0 0 64px #ff5a00; }
.fh-dmg.blockcrit { color: #ffe9c8; text-shadow: 0 0 4px #fff, 0 0 12px #ff9a3e, 0 0 28px #ff6a1f; }
.fh-dmg.text { font-size: clamp(30px, 4.4vw, 62px); letter-spacing: 0.1em; }
.fh-dmg.dodge { color: #d9f6ff; text-shadow: 0 0 4px #fff, 0 0 12px #35c8ff, 0 0 28px #1aa6ff; }
.fh-dmg.block { color: #e6efff; text-shadow: 0 0 4px #fff, 0 0 12px #6a9bff, 0 0 28px #3a6fff; }
/* Подпись зоны удара — вдвое мельче цифры урона, цвет и анимация те же (п.25 ТЗ) */
.fh-dmg.zonelbl { font-size: clamp(21px, 3.1vw, 44px); letter-spacing: 0.06em; font-weight: 800; }
.fh-dmg.zonelbl.crit { font-size: clamp(27px, 3.8vw, 55px); }
.fh-dmg.zonelbl.text { font-size: clamp(15px, 2.2vw, 31px); }
@keyframes fhDmgRise {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  10% { opacity: 1; transform: translate(-50%, -60%) scale(1.25); }
  22% { transform: translate(-50%, -62%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}
.fh-spark { position: absolute; width: 20px; height: 20px; margin: -10px; border-radius: 50%; pointer-events: none; animation: fhSpark 0.55s ease-out forwards; }
.fh-spark.hit { background: radial-gradient(circle, #fff 0%, #ff6a3a 40%, rgba(255, 60, 20, 0) 70%); }
.fh-spark.block { background: radial-gradient(circle, #fff 0%, #6a9bff 40%, rgba(60, 120, 255, 0) 70%); }
@keyframes fhSpark { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(6); opacity: 0; } }

/* Трансляция боя под ногами героев — одна строка, висит до следующего отсчёта */
.fh-narration {
  position: absolute; left: 50%; top: 86%; transform: translateX(-50%); max-width: min(94vw, 980px); text-align: center; opacity: 0;
  font-size: clamp(14px, 1.7vw, 22px); line-height: 1.3; color: #f6ead8; padding: 8px 18px; border-radius: 4px;
  background: rgba(10, 6, 4, 0.62); border: 1px solid rgba(255, 190, 100, 0.3); text-shadow: 0 1px 4px #000;
  transition: opacity 0.25s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fh-narration.show { opacity: 1; }
.fh-narration b { color: #ffd08a; }
.fh-narration .crit { color: #ffd45a; font-weight: 800; }

.fh-status { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); font-size: 0.85rem; color: #d8c8b2; text-shadow: 0 1px 4px #000; text-align: center; max-width: 90vw; }
.fh-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255, 90, 40, 0) 40%, rgba(255, 40, 10, 0.55) 100%); opacity: 0; }
.fh-flash.on { animation: fhFlash 0.5s ease-out; }
@keyframes fhFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Запасные «бойцы», если 3D недоступна */
.fh-figure { position: absolute; transform: translate(-50%, -100%); font-size: clamp(80px, 16vw, 220px); line-height: 1; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.7)); }
.fh-figure img { height: 56vh; max-height: 520px; border-radius: 12px; object-fit: cover; }
.fh-figure-right { transform: translate(-50%, -100%) scaleX(-1); }
.fh-figure.shake { animation: fhShake 0.4s; }
@keyframes fhShake { 0%, 100% { margin-left: 0; } 25% { margin-left: -12px; } 75% { margin-left: 12px; } }

/* Итог боя */
.fh-end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6, 3, 2, 0.62); pointer-events: auto; animation: fhEndIn 0.5s ease both; padding: 12px; overflow-y: auto; }
@keyframes fhEndIn { from { opacity: 0; } to { opacity: 1; } }
.fh-end-card {
  width: min(94vw, 640px); max-height: 94vh; overflow-y: auto; text-align: center; padding: 22px 22px 18px;
  background: linear-gradient(180deg, rgba(26, 16, 11, 0.94), rgba(14, 9, 6, 0.94)); border: 1px solid rgba(255, 170, 80, 0.28); border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.fh-end-title { font-size: clamp(34px, 6vw, 60px); font-weight: 900; letter-spacing: 0.08em; }
.fh-end-title.win { color: #fff3c4; text-shadow: 0 0 6px #fff, 0 0 18px #ffb52e, 0 0 44px #ff8a00; }
.fh-end-title.loss { color: #ffd2c4; text-shadow: 0 0 6px #fff, 0 0 18px #ff3b2a, 0 0 44px #b00000; }
.fh-end-title.draw { color: #e0e0e0; text-shadow: 0 0 18px rgba(255, 255, 255, 0.4); }
.fh-end-sub { color: #bcaa94; margin: 2px 0 14px; font-size: 0.9rem; }
.fh-end-stats { display: grid; grid-template-columns: 1fr auto auto; gap: 0; text-align: left; font-size: 0.9rem; }
.fh-end-stats > div { padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.fh-end-stats .h { font-weight: 800; color: #ffd9a0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.fh-end-stats .n { text-align: center; min-width: 78px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fh-end-stats .me { color: #ffe2b0; }
.fh-end-rewards { margin: 14px 0 4px; font-size: 0.95rem; color: #e8d8c0; min-height: 1.2em; }
.fh-end-rewards b { color: #ffd45a; }
.fh-end-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.fh-btn { pointer-events: auto; cursor: pointer; border: 0; border-radius: 4px; padding: 11px 22px; font-size: 1rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, #ff6a1f, #c0261a); }
.fh-btn:hover { filter: brightness(1.1); }
.fh-btn-ghost { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }

/* Телефоны */
@media (max-width: 700px) {
  .fh-top { top: 8px; gap: 6px; padding: 0 8px; }
  .fh-fighter { padding: 5px 7px; gap: 6px; }
  .fh-avatar { width: 34px; height: 34px; font-size: 1.1rem; border-width: 1.5px; }
  .fh-clan { display: none; }
  .fh-name-row { flex-wrap: wrap; row-gap: 1px; gap: 6px; }
  .fh-name { font-size: 13px; max-width: 100%; }
  .fh-cbx { font-size: 0.66rem; padding: 0 5px; }
  .fh-hp { height: 16px; }
  .fh-hp-num { font-size: 0.7rem; }
  .fh-center { padding: 4px 6px 2px; min-width: 56px; }
  .fh-round-label { font-size: 0.55rem; letter-spacing: 0.2em; }
  .fh-timer { top: 19%; width: 40vw; }
  .fh-timer-num { font-size: clamp(44px, 14vw, 72px); }
  .fh-banner { top: 30%; font-size: clamp(18px, 5.4vw, 28px); }
  .fh-role { font-size: clamp(20px, 6vw, 30px); }
  .fh-narration { top: auto; bottom: 14px; font-size: 13px; padding: 6px 10px; }
  .fh-status { top: 70px; }
  .fh-end { align-items: flex-start; padding: 64px 10px 88px; }
  .fh-end-card { max-height: none; overflow: visible; padding: 16px 12px 14px; }
  .fh-end-stats { font-size: 0.8rem; }
  .fh-end-stats .n { min-width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .fh-dot-core, .fh-dot::before, .fh-dot::after, .fh-role { animation: none !important; }
}

.fh-count { font-size: 2.2em; font-weight: 900; letter-spacing: 0.04em; display: inline-block; animation: fhCountPop 0.75s ease-out; }
@keyframes fhCountPop { from { transform: scale(1.7); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); } }

/* ---------- Лобби: кнопка «БОЙ», поиск, «Вызвать бойца», «Мои бои» (ТЗ «Классик» №2, п.17–18) ---------- */
.lobby-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 16px; align-items: stretch; }
.lobby-fight { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; order: 2; }
.lobby-intro { order: 1; }
.fight-big-btn {
  width: 260px; height: 96px; border-radius: 14px; border: 3px solid #ffd27a; cursor: pointer;
  font: 900 2.4rem/1 var(--f-ui, system-ui); letter-spacing: 0.08em; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, #ff7a45 0%, #e0431e 50%, #a8160f 100%);
  box-shadow: 0 0 0 0 rgba(255, 70, 40, 0.7), 0 10px 30px rgba(0, 0, 0, 0.5);
  /* Мигание — ТОЛЬКО через box-shadow/border-color: анимация filter внутри многоколоночной раскладки
     оболочки у части браузеров делала кнопку невидимой (08.10.2026). */
  animation: fightBlink 1.1s ease-in-out infinite;
  transition: transform 0.12s;
}
.fight-big-btn:hover { transform: scale(1.04); }
.fight-big-btn:active { transform: scale(0.97); }
.fight-big-btn:disabled { opacity: 0.7; cursor: wait; }
.fight-big-btn.is-searching {
  font-size: 1.7rem; border-color: #9fe8ff; animation: fightSearching 1.4s ease-in-out infinite;
  background: linear-gradient(180deg, #5aa9ff 0%, #1c5fd0 55%, #0b2257 100%);
}
@keyframes fightBlink {
  0%, 100% { border-color: #ffd27a; box-shadow: 0 0 0 0 rgba(255, 70, 40, 0.65), 0 0 18px rgba(255, 90, 40, 0.45), 0 10px 30px rgba(0, 0, 0, 0.5); }
  50% { border-color: #fff6cf; box-shadow: 0 0 0 16px rgba(255, 70, 40, 0), 0 0 46px rgba(255, 120, 50, 0.95), 0 10px 40px rgba(255, 90, 40, 0.6); }
}
@keyframes fightSearching {
  0%, 100% { box-shadow: 0 0 0 0 rgba(80, 170, 255, 0.6), 0 10px 30px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 0 0 16px rgba(80, 170, 255, 0), 0 10px 30px rgba(0, 0, 0, 0.5); }
}
.fight-caption { font-size: 0.88rem; color: var(--muted, #b9a893); max-width: 260px; }
.fight-search { display: flex; align-items: baseline; gap: 8px; font-weight: 800; color: #9fe8ff; }
.fight-search.hidden, .fight-caption.hidden { display: none; }
.fs-label { font-size: 1rem; }
.fs-dots::after { content: ""; animation: fsDots 1.2s steps(4, end) infinite; }
@keyframes fsDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
.fs-clock { font-family: var(--f-num, monospace); font-size: 1.4rem; color: #fff; min-width: 3.2ch; }
@media (max-width: 760px) {
  .lobby-top { grid-template-columns: 1fr; }
  .lobby-fight { order: -1; }
}
.find-form { display: flex; gap: 8px; margin: 12px 0 6px; }
.find-form input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: inherit; }
.duel-candidate-card { cursor: pointer; }
.duel-list-scroll { max-height: 336px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
.duel-list-scroll .duel-row { flex: none; min-height: 44px; }

/* Две колонки в оболочке: слева — описание и «Вызвать бойца», справа сверху — большая «БОЙ», ниже «Мои бои» (п.17). */
html.embedded #duelPanels, html.embedded .lobby-top { display: contents; }
html.embedded .lobby-intro { margin-bottom: 14px; }
html.embedded .lobby-fight-wrap { break-before: column; break-inside: avoid; margin-bottom: 14px; padding: 6px 0 10px; }
html.embedded .lobby-fight-wrap .lobby-fight { order: 0; }
html.embedded #duelPanels > .panel { margin-top: 0 !important; margin-bottom: 14px; }
@media (max-width: 760px) {
  html.embedded #duelPanels { display: flex; flex-direction: column; }
  html.embedded .lobby-fight-wrap { order: -2; break-before: auto; }
  html.embedded .lobby-intro { order: -1; }
}

.fh-coin { display: inline-block; vertical-align: -0.25em; }
.fh-coin .ic { width: 1.3em; height: 1.3em; }

html.embedded #heroCard { margin-bottom: 14px; }