/* ============================================================
   ККИ Hearthstone-like — раскладка поля
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  background: #1a120b;
  overflow: hidden;
  user-select: none;
}

#board {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at center, rgba(255, 200, 80, 0.05), transparent 70%),
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('../assets/board/board.png') center / cover no-repeat,
    linear-gradient(#3a2a18, #241708);
}

/* ---------- Зоны героев / рук ---------- */
.hero-area {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 20px;
  flex: 0 0 auto;
}
.hero-area.enemy { justify-content: flex-start; }
.hero-area.friendly { justify-content: flex-start; }

.deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.deck-card {
  width: 56px;
  height: 78px;
  border-radius: 6px;
  border: 2px solid #b8912f;
  background: url('../assets/cardback.png') center / cover, #20344f;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}
.deck-label { font-size: 10px; color: #e8c86a; text-shadow: 0 1px 2px #000; }

/* ---------- Герои ---------- */
.hero {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid #c9a13b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), inset 0 0 12px rgba(0, 0, 0, 0.5);
  cursor: default;
  flex: 0 0 auto;
  background: #2a2018;
}
.hero .portrait {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Поле ---------- */
.board-row {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 200px;
  padding: 6px;
}

/* Карты на столе крупнее карт в руке. */
.board-row .card {
  width: 132px;
  height: 184px;
  border-radius: 11px;
}
.board-row .card .card-atk,
.board-row .card .card-hp {
  width: 32px;
  height: 32px;
  font-size: 17px;
  bottom: 6px;
}
.board-row .card .card-atk { left: 6px; }
.board-row .card .card-hp  { right: 6px; }
.board-row .card .rarity-gem { top: 8px; right: 8px; width: 12px; height: 12px; }
.board-row .card .abilities { bottom: 44px; }
.board-row .card .ability-tag { font-size: 11px; padding: 2px 7px; }

/* Тонкий разделитель рядов (панель хода вынесена вправо, #status-panel). */
.center-line {
  flex: 0 0 auto;
  height: 10px;
}

/* Правая панель: индикатор хода, кнопка конца хода, статус сыгровок. */
#status-panel {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 20;
  text-align: right;
}

/* Общий бокс статуса: чей ход + сыгровки + номер хода. */
#plays-left {
  color: #d8c49a;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(232, 200, 106, 0.5);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}
#turn-indicator {
  color: #f0dca0;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 2px 4px #000;
}
#plays-count b { color: #ffe9b0; }
#plays-count.off { display: none; }
#turn-counter { font-size: 11px; opacity: 0.8; }

#end-turn {
  font-size: 18px;
  font-weight: bold;
  padding: 14px 34px;
  border-radius: 12px;
  border: 2px solid #e8c86a;
  background: linear-gradient(#7a5a1e, #4a3210);
  color: #ffe9b0;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  transition: transform 0.12s, filter 0.12s;
}
#end-turn:hover:not(:disabled) { transform: scale(1.06); filter: brightness(1.2); }
#end-turn:disabled { opacity: 0.45; cursor: default; }

/* Кнопка создания мультиплеерной сессии (одиночная игра). */
#mp-create {
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(232, 200, 106, 0.6);
  background: rgba(0, 0, 0, 0.55);
  color: #d8c49a;
  cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
}
#mp-create:hover { transform: scale(1.05); filter: brightness(1.3); }
body.in-mp #mp-create { display: none; } /* в мультиплеере кнопка не нужна */

/* ---------- Лобби мультиплеера ---------- */
#lobby {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
}
#lobby.hidden { display: none; }
.lobby-box {
  text-align: center;
  color: #e8dcbf;
  background: rgba(20, 16, 10, 0.95);
  border: 2px solid #e8c86a;
  border-radius: 14px;
  padding: 34px 44px;
  max-width: 560px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}
.lobby-box h1 {
  margin: 0 0 14px;
  font-size: 26px;
  color: #f0dca0;
  text-shadow: 0 2px 6px #000;
}
.lobby-box p { margin: 0 0 18px; font-size: 16px; line-height: 1.5; }
#lobby-link-row { display: flex; gap: 8px; margin-bottom: 18px; }
#lobby-link {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(232, 200, 106, 0.5);
  background: #17130d;
  color: #ffe9b0;
}
#lobby-confirm {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  padding: 13px 24px;
  border-radius: 10px;
  border: 2px solid #4fd36a;
  background: linear-gradient(#2c6a3a, #17401f);
  color: #dfffe6;
  cursor: pointer;
}
#lobby-confirm:hover { transform: scale(1.03); filter: brightness(1.2); }
#lobby-confirm.hidden, #lobby-link-row.hidden { display: none; }
#lobby-copy, #lobby-leave {
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid rgba(232, 200, 106, 0.5);
  background: rgba(255, 255, 255, 0.06);
  color: #e8dcbf;
  cursor: pointer;
}
#lobby-copy:hover, #lobby-leave:hover { filter: brightness(1.4); }

/* ---------- Зона сброса (перетаскивание карты в игру) ---------- */
#drop-zone {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: min(720px, 70vw);
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed rgba(232, 200, 106, 0.55);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 233, 176, 0.75);
  font-size: 17px;
  font-weight: bold;
  text-shadow: 0 1px 3px #000;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
body.dragging #drop-zone {
  opacity: 1;
  pointer-events: auto;
}
#drop-zone.hot {
  border-color: #4fd36a;
  border-style: solid;
  background: rgba(79, 211, 106, 0.18);
  color: #d8ffdf;
  box-shadow: 0 0 34px rgba(79, 211, 106, 0.65), inset 0 0 24px rgba(79, 211, 106, 0.25);
}

.hero .portrait-fallback {
  font-weight: bold;
  color: #e8c86a;
  font-size: 18px;
  letter-spacing: 2px;
}
.hero .hp {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 35% 30%, #ff6b5e, #a01818);
  border: 3px solid #f0d090;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  text-shadow: 0 1px 3px #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.hero .hero-name {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #f0dca0;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
}

/* ---------- Рука ---------- */
.hand {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 130px;
  padding: 4px 8px;
  align-items: center;
}
.player-hand { align-items: flex-end; }
.enemy-hand { align-items: flex-start; }

/* ---------- Карта ---------- */
.card {
  position: relative;
  width: 100px;
  height: 140px;
  border-radius: 9px;
  border: 3px solid #8a6a2a;
  background-color: #241f18;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.75));
  pointer-events: none;
}

/* Рубашка карты (рука соперника — карта не раскрыта). */
.card.face-down {
  cursor: default;
  background: url('../assets/cardback.png') center / cover, #20344f;
}
.card.face-down::before { display: none; }

.card .card-atk, .card .card-hp {
  position: absolute;
  bottom: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.card .card-atk { left: 4px; background: radial-gradient(circle at 35% 30%, #ffd35e, #b07a10); }
.card .card-hp  { right: 4px; background: radial-gradient(circle at 35% 30%, #ff6b5e, #a01818); }

.card .rarity-gem {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}
.rarity-common    { background: #c8c8c8; }
.rarity-rare      { background: #3a7dff; }
.rarity-epic      { background: #b44aff; }
.rarity-legendary { background: #ff9d1e; }

.card .abilities {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
  z-index: 2;
}
/* Способность — текстовый бейдж (по-русски), не иконка. */
.card .ability-tag {
  font-size: 9px;
  font-weight: bold;
  line-height: 1.2;
  color: #fff3d0;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid #e8c86a;
  border-radius: 8px;
  padding: 1px 5px;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

/* ---------- Состояния ---------- */
.card.taunt {
  border-color: #c98d3b;
  border-width: 4px;
  box-shadow: 0 0 10px rgba(201, 141, 59, 0.7);
}
.card.taunt::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(255, 220, 140, 0.6);
  border-radius: 7px;
  pointer-events: none;
}

.card.divine-shield {
  box-shadow: 0 0 14px rgba(255, 226, 130, 0.9), inset 0 0 18px rgba(255, 226, 130, 0.45);
}

.card.enemy-card { cursor: default; }

/* --- Статус-рамки: толстое кольцо + пульсация (заметны издалека). --- */
.card.playable   { --glow: #4fd36a; }
.card.selected   { --glow: #ffe14f; }
.card.can-attack { --glow: #ff9c3f; }
.card.targetable { --glow: #ff5f4f; }

.card.playable, .card.selected, .card.can-attack, .card.targetable {
  border-color: var(--glow);
  box-shadow:
    0 0 0 3px var(--glow),
    0 0 22px 6px var(--glow);
  animation: status-pulse 0.85s ease-in-out infinite alternate;
}

@keyframes status-pulse {
  from { box-shadow: 0 0 0 3px var(--glow), 0 0 12px 2px var(--glow); }
  to   { box-shadow: 0 0 0 5px var(--glow), 0 0 30px 10px var(--glow); }
}

.card.playable:hover { transform: translateY(-10px) scale(1.08); z-index: 5; }

.card.selected {
  transform: translateY(-8px) scale(1.05);
}

.card.targetable:hover { transform: scale(1.07); }

/* Герой-цель: то же заметное свечение (входящая box-shadow с инсетом). */
.hero.targetable {
  border-color: #ff5f4f;
  box-shadow:
    0 0 0 4px #ff5f4f,
    0 0 30px 10px rgba(255, 95, 79, 0.9),
    inset 0 0 12px rgba(0, 0, 0, 0.5);
  animation: hero-target-pulse 0.85s ease-in-out infinite alternate;
}
@keyframes hero-target-pulse {
  from { box-shadow: 0 0 0 4px #ff5f4f, 0 0 14px 3px rgba(255, 95, 79, 0.8), inset 0 0 12px rgba(0, 0, 0, 0.5); }
  to   { box-shadow: 0 0 0 6px #ff5f4f, 0 0 34px 12px rgba(255, 95, 79, 1), inset 0 0 12px rgba(0, 0, 0, 0.5); }
}

/* ============================================================
   Анимации
   ============================================================ */

/* Раздача из колоды */
.card.anim-deal {
  animation: deal-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes deal-in {
  0%   { transform: translate(-260px, -60px) rotate(-25deg) scale(0.4); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}

/* Выкладывание на стол */
.card.anim-play {
  animation: play-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
@keyframes play-in {
  0%   { transform: translateY(70px) scale(0.5); opacity: 0; }
  70%  { transform: translateY(-8px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Удар: выпад на цель (направление задаётся через CSS-переменные) */
.card.anim-attack {
  animation: attack-lunge 0.5s ease-in-out both;
  z-index: 20;
}
@keyframes attack-lunge {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(var(--lunge-x, 0), var(--lunge-y, -40px)) scale(1.1); }
  60%  { transform: translate(var(--lunge-x, 0), var(--lunge-y, -40px)) scale(1.1); }
  100% { transform: translate(0, 0); }
}

/* Тряска при получении удара */
.card.anim-hit, .hero.anim-hit {
  animation: hit-shake 0.35s ease-out;
}
@keyframes hit-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-2deg); }
  40% { transform: translateX(6px) rotate(2deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* Смерть карты */
.card.anim-death {
  animation: death-fade 0.55s ease-in forwards;
  pointer-events: none;
}
@keyframes death-fade {
  0%   { transform: scale(1); opacity: 1; filter: saturate(1); }
  30%  { transform: scale(1.12); filter: saturate(0.2) brightness(1.6); }
  100% { transform: scale(0.15) rotate(20deg); opacity: 0; filter: saturate(0); }
}

/* Всплывающий урон */
.damage-number {
  position: absolute;
  font-size: 30px;
  font-weight: bold;
  color: #ff4f3f;
  text-shadow: 0 2px 4px #000, 0 0 8px rgba(255, 60, 40, 0.8);
  pointer-events: none;
  z-index: 50;
  animation: damage-float 0.9s ease-out forwards;
}
.damage-number.heal { color: #4fff7a; text-shadow: 0 2px 4px #000, 0 0 8px rgba(60, 255, 110, 0.8); }
@keyframes damage-float {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  20%  { transform: translateY(-14px) scale(1.25); opacity: 1; }
  100% { transform: translateY(-58px) scale(1); opacity: 0; }
}

/* Щит поглощает удар */
.shield-pop {
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  border: 4px solid #ffe996;
  box-shadow: 0 0 26px #ffe996, inset 0 0 22px rgba(255, 233, 150, 0.7);
  pointer-events: none;
  z-index: 40;
  animation: shield-pop 0.5s ease-out forwards;
}
@keyframes shield-pop {
  0%   { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Толчок экрана при смерти героя */
.board-shake { animation: board-shake 0.5s ease-out; }
@keyframes board-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-8px, 4px); }
  50% { transform: translate(7px, -5px); }
  75% { transform: translate(-4px, 2px); }
}

/* ---------- Слой эффектов ---------- */
#fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 45;
}

/* ---------- Конец игры ---------- */
#gameover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#gameover.hidden { display: none; }
.gameover-box {
  text-align: center;
  padding: 40px 60px;
  background: linear-gradient(#3a2a14, #241708);
  border: 4px solid #c9a13b;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
  animation: play-in 0.5s ease-out;
}
.gameover-box h1 {
  font-size: 46px;
  color: #ffe9b0;
  text-shadow: 0 3px 8px #000;
  margin-bottom: 10px;
}
.gameover-box p { color: #d8c49a; margin-bottom: 24px; }
.gameover-box button {
  font-size: 18px;
  font-weight: bold;
  padding: 12px 32px;
  border-radius: 10px;
  border: 2px solid #e8c86a;
  background: linear-gradient(#7a5a1e, #4a3210);
  color: #ffe9b0;
  cursor: pointer;
}
.gameover-box button:hover { filter: brightness(1.25); }