/* Screen "battle": hero side left, enemy side right, two facing rows of
   stack cards in the middle, spell bar and log at the bottom. Only base.css
   variables are used so all three themes restyle it; selectors are flat
   .battle-* classes so [data-tier] theme rules always win. */

.battle { display: flex; flex-direction: column; gap: 0; }

/* ---------- header ---------- */
.battle-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.battle-head-main { min-width: 0; }
.battle-title { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.2; }
.battle-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.battle-retreat { min-height: 44px; flex-shrink: 0; }

/* ---------- field: sides + arena ---------- */
.battle-field {
  display: grid;
  grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(170px, 210px);
  grid-template-areas: "hero arena enemy";
  gap: 18px;
  align-items: stretch;
}
.battle-side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; min-width: 0; padding: 8px 4px; }
.battle-side-hero { grid-area: hero; }
.battle-side-enemy { grid-area: enemy; }
.battle-side-text { min-width: 0; width: 100%; }
.battle-side-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.battle-side-sub { font-size: 0.85rem; }
.battle-side-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.battle-mana { width: 100%; }
.battle-mana-label { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; margin-bottom: 4px; }
.battle-mana .progress { height: 12px; }

/* hexagonal portrait: outer hex = frame, inner span = fill */
.battle-hex {
  position: relative; width: 84px; height: 92px; flex-shrink: 0;
  background: var(--line);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.battle-hex > span {
  position: absolute; inset: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunken);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-size: 2.4rem; line-height: 1;
}
.battle-side-hero .battle-hex { background: var(--accent-2); }
.battle-side-enemy .battle-hex { background: var(--bad); }

.battle-arena { grid-area: arena; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.battle-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: stretch; }
.battle-row-enemy { align-content: flex-end; }
.battle-row-hero { align-content: flex-start; }
.battle-vs { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; color: var(--ink-soft); }
.battle-vs::before, .battle-vs::after { content: ""; flex: 1; border-top: 2px dashed var(--line); }

/* ---------- stack cards ---------- */
.battle-stack {
  position: relative;
  flex: 0 1 150px; min-width: 128px; max-width: 190px;
  padding: 10px 12px; gap: 6px;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.battle-stack-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.battle-stack-icon { font-size: 2rem; line-height: 1; }
.battle-stack-count { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.battle-stack-name { font-weight: 600; font-size: 0.92rem; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.battle-stack .progress { height: 8px; }
.battle-stack-meta { font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battle-stack-front { align-self: stretch; font-size: 0.68rem; white-space: normal; line-height: 1.2; text-align: center; }
.battle-stack-move { font-size: 0.75rem; }
.battle-stack.is-front { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.battle-stack-enemy.is-front { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad); }
.battle-stack.is-dead { opacity: 0.45; filter: grayscale(1); }
.battle-stack.is-dead .battle-stack-icon { filter: grayscale(1); }
.battle-stack[role="button"] { cursor: pointer; }
.battle-stack[role="button"]:hover { border-color: var(--accent-2); transform: translateY(-2px); }

/* floating damage number */
.battle-float {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  padding: 2px 10px; border-radius: 99px;
  background: var(--bad); color: var(--accent-ink);
  font-weight: 700; font-size: 1rem; white-space: nowrap; pointer-events: none;
  z-index: 2;
  animation: battle-float 1.2s ease-out forwards;
}

/* ---------- animations (classes toggled by battle.js) ----------
   The flash is a pseudo-element faded with opacity, so theme rules that
   restyle .card borders/shadows never fight with it. */
.battle-stack::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bad); opacity: 0; pointer-events: none; }
.battle-stack.is-hit { animation: battle-shake 0.5s ease-in-out; }
.battle-stack.is-hit::after { animation: battle-flash 0.7s ease-out; }
.battle-stack.is-cast { animation: battle-cast 0.8s ease-out; }
.battle-stack.is-cast::after { background: var(--accent-2); animation: battle-flash 0.8s ease-out; }
.battle-log-item.is-new { animation: battle-log-in 0.5s ease-out; }

@keyframes battle-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-1.5deg); }
  35% { transform: translateX(6px) rotate(1.5deg); }
  55% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes battle-flash {
  0% { opacity: 0.38; }
  100% { opacity: 0; }
}
@keyframes battle-cast {
  0% { transform: translateY(0); }
  30% { transform: translateY(-7px) scale(1.03); }
  100% { transform: translateY(0); }
}
@keyframes battle-float {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, -4px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -44px) scale(1); }
}
@keyframes battle-log-in {
  from { background: var(--bg-sunken); }
  to { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  /* base.css already kills every animation; keep a static cue instead */
  .battle-stack.is-hit::after { opacity: 0.25; }
  .battle-stack.is-cast::after { opacity: 0.18; }
  .battle-float { opacity: 1; transform: translateX(-50%); }
  .battle-stack[role="button"]:hover { transform: none; }
}

/* ---------- bottom: spells + log ---------- */
.battle-bottom { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.battle-panel-title { margin: 0 0 10px; font-size: 1.1rem; }
.battle-note { margin: 0 0 10px; font-size: 0.92rem; color: var(--ink-soft); }
.battle-spell-list { display: flex; flex-direction: column; gap: 8px; }
.battle-spell {
  width: 100%; min-height: 56px;
  justify-content: flex-start; text-align: left;
  padding: 8px 12px; gap: 12px;
}
.battle-spell-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; width: 1.6em; text-align: center; }
.battle-spell-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.battle-spell-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.battle-spell-sub { font-weight: 400; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.2; }
.battle-spell-cost, .battle-spell-week { flex-shrink: 0; white-space: nowrap; }
.battle-spell-plain { border-style: dashed; }

.battle-log-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.battle-log-item {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 10px; border-left: 3px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.92rem; line-height: 1.35;
}
.battle-log-item.is-good { border-left-color: var(--good); }
.battle-log-item.is-bad { border-left-color: var(--bad); }
.battle-log-item.is-new { font-weight: 600; }
.battle-log-round { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 2.2em; }

/* ---------- summary modal ---------- */
.battle-summary-list { margin: 0 0 14px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.battle-summary h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.battle-summary-army { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.battle-summary-stack { display: flex; align-items: center; gap: 8px; }
.battle-summary-stack.is-dead { opacity: 0.55; }
.battle-summary-icon { font-size: 1.3rem; line-height: 1; }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .battle-field { grid-template-columns: minmax(150px, 180px) minmax(0, 1fr) minmax(150px, 180px); gap: 12px; }
  .battle-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .battle-field {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "enemy" "arena" "hero";
    gap: 12px; padding: 12px 10px;
  }
  .battle-side { flex-direction: row; flex-wrap: wrap; text-align: left; align-items: center; gap: 8px 12px; padding: 0; }
  .battle-side-text { flex: 1; width: auto; }
  .battle-side-stats { justify-content: flex-start; width: 100%; }
  .battle-side-enemy .battle-side-stats { width: auto; }
  .battle-hex { width: 60px; height: 66px; }
  .battle-hex > span { font-size: 1.7rem; }
  .battle-row { gap: 8px; }
  .battle-stack { flex: 1 1 calc(50% - 8px); min-width: 0; max-width: none; padding: 8px 10px; }
  .battle-stack-icon { font-size: 1.6rem; }
  .battle-stack-name { font-size: 0.85rem; }
  .battle-title { font-size: 1.3rem; }
  .battle-retreat { width: 100%; }
  .battle-spell { min-height: 52px; }
  .battle-log-list { max-height: 220px; }
}