/* ==========================================================================
   Arena (TASK_006, E5): montagem da luta, seletor de combatentes, ordem de
   iniciativa, registro e resultado. Lado A em azul, lado B em brasa.
   ========================================================================== */

.arena-h2 {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
  color: var(--gold);
}

.arena-roster,
.arena-picker__list,
.arena-order__list,
.arena-fighter__chips,
.arena-log,
.arena-result__grid,
.arena-stat__nums,
.arena-stat__nums dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Etiqueta do lado ---------- */
.arena-tag {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
}

.arena-tag--a {
  border-color: var(--azure-line);
  background: var(--azure-bg);
  color: var(--azure);
}

.arena-tag--b {
  border-color: var(--ember-line);
  background: var(--ember-bg);
  color: var(--ember);
}

/* ---------- Montagem: os dois lados ---------- */
.arena-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.arena-versus {
  align-self: center;
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 1;
}

.arena-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-top: 3px solid var(--azure-line);
}

.arena-side--b {
  border-top-color: var(--ember-line);
}

.arena-side__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}

.arena-side__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xl);
}

.arena-side__meta {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-variant-numeric: lining-nums tabular-nums;
}

.arena-side__empty {
  padding: var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}

.arena-roster {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.arena-roster__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.arena-roster__avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold-border, rgba(212, 175, 55, 0.4));
  background: var(--surface-1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.arena-roster__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.arena-roster__info {
  flex: 1 1 180px;
  min-width: 0;
}

.arena-roster__name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.arena-roster__meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* seu personagem no lado: equipamento, avisos e o que o impede de lutar */
.arena-roster__equip {
  margin-top: var(--sp-1);
  color: var(--text);
  font-size: var(--fs-sm);
}

.arena-roster__erro,
.arena-pick__erro {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  color: var(--ember);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.arena-roster__erro .icon,
.arena-pick__erro .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.arena-roster__avisos {
  margin: var(--sp-1) 0 0;
  padding-left: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.arena-qty__n {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  height: 32px;
  border-inline: 1px solid var(--line);
  background: var(--surface-2);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- Opções ---------- */
.arena-options__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--sp-4) var(--sp-5);
}

/* .field ocupa as 12 colunas do form-grid; aqui a grade é própria */
.arena-options__grid .field {
  grid-column: auto;
}

.arena-seed {
  display: flex;
  gap: var(--sp-2);
}

.arena-seed .input {
  flex: 1 1 auto;
  min-width: 0;
}

/* IA de cada lado (TASK_009): um seletor por lado, com a etiqueta do lado */
.arena-ia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.arena-ia__lado {
  display: inline-flex;
  flex: 1 1 10rem; /* a 375 px os dois empilham: "Treinada" cabe inteiro */
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.arena-ia__lado .select {
  flex: 1 1 auto;
  min-width: 8rem;
}

.arena-difficulty {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-deep);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.arena-difficulty > .icon {
  flex: none;
  margin-top: 2px;
  color: var(--gold);
}

.arena-difficulty strong {
  color: var(--text);
}

.arena-difficulty.is-facil {
  border-left-color: var(--verdant);
}

.arena-difficulty.is-justa {
  border-left-color: var(--gold);
}

.arena-difficulty.is-dificil {
  border-left-color: var(--arcane);
}

.arena-difficulty.is-mortal {
  border-left-color: var(--ember);
}

.arena-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
}

.arena-start__hint {
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* ---------- Simulação em lote (E6) ---------- */
.arena-lote {
  margin-top: var(--sp-5);
}

.arena-lote__lead {
  margin-bottom: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.arena-lote__acoes,
.arena-lote__ver {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.arena-lote__progresso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
}

.arena-lote__trilho {
  position: relative;
  flex: 1 1 100%;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-4);
}

.arena-lote__preenchido {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

.arena-lote__contagem {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: lining-nums tabular-nums;
}

.arena-lote__res {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* títulos que recebem o foco por script (resultado do lote, título do lado): sem o anel, como o título da página */
.arena-lote__h3:focus,
.arena-side__title:focus {
  box-shadow: none;
  outline: none;
}

.arena-lote__h3 {
  margin: 0;
  color: var(--gold-bright);
  font-size: var(--fs-lg);
}

.arena-lote__sub,
.arena-lote__nota {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: anywhere;
}

.arena-lote__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.arena-lote__aviso .icon {
  flex: none;
  margin-top: 2px;
  color: var(--gold);
}

/* A em azul, B em brasa, empate em neutro (como as etiquetas dos lados) */
.arena-lote__barra {
  display: flex;
  height: 14px;
  margin: var(--sp-3) 0 var(--sp-4);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-4);
}

.arena-lote__fatia.is-a {
  background: var(--azure);
}

.arena-lote__fatia.is-b {
  background: var(--ember);
}

.arena-lote__fatia.is-empate {
  background: var(--text-dim);
}

/* cartões que crescem até ocupar a linha (com grid e auto-fit, o item de 1 / -1 prendia as trilhas) */
.arena-lote__nums {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  margin: 0;
}

.arena-lote__nums > div {
  flex: 1 1 130px;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.arena-lote__nums > .is-a {
  border-left-color: var(--azure-line);
}

.arena-lote__nums > .is-b {
  border-left-color: var(--ember-line);
}

.arena-lote__largo {
  flex-basis: 100% !important;
}

.arena-lote__nums dt {
  color: var(--text-dim);
  font-size: var(--fs-xs);
}

.arena-lote__nums dd {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: anywhere;
}

.arena-lote__h4 {
  margin: var(--sp-4) 0 var(--sp-2);
  color: var(--gold);
  font-size: var(--fs-md);
}

.arena-lote__quedas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-width: 560px; /* a porcentagem perto do nome, mesmo nas telas largas */
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}

.arena-lote__quedas li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.arena-lote__quem {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.arena-lote__qn {
  color: var(--text-muted);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* ---------- Seletor de combatentes ---------- */
.arena-picker {
  width: min(760px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
}

.arena-picker[open] {
  display: flex;
}

.arena-picker__frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.arena-picker__head {
  padding: var(--sp-5) var(--sp-5) 0;
  border-bottom: 1px solid var(--line-strong);
}

.arena-picker__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.arena-picker__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.arena-picker__tabs [role='tab'] {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: transparent;
  color: var(--text-muted);
  font: 600 var(--fs-md) var(--font-ui);
  cursor: pointer;
}

.arena-picker__tabs [role='tab'] .icon {
  width: 18px;
  height: 18px;
}

.arena-picker__tabs [role='tab'][aria-selected='true'] {
  margin-bottom: -1px;
  border-color: var(--line-strong);
  background: var(--surface-1);
  color: var(--gold-bright);
}

.arena-picker__tabs [role='tab']:focus-visible {
  outline: 2px solid var(--line-focus);
  outline-offset: -2px;
}

.arena-picker__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-1);
}

.arena-picker__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.arena-picker__filters .search {
  flex: 1 1 260px;
}

.arena-picker__nd {
  flex: 0 1 190px;
  min-height: 42px;
}

.arena-picker__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.arena-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.arena-pick__avatar {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold-border, rgba(212, 175, 55, 0.4));
  background: var(--surface-1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.arena-pick__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.arena-pick__info {
  flex: 1 1 300px;
  min-width: 0;
}

.arena-pick__name {
  font-weight: 700;
  font-size: var(--fs-lg);
  overflow-wrap: anywhere;
}

.arena-pick__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.arena-pick__lore {
  display: -webkit-box;
  margin-top: var(--sp-1);
  overflow: hidden;
  color: var(--text-dim);
  font-family: var(--font-lore);
  font-size: var(--fs-sm);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.arena-pick__side {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}

.arena-pick__count {
  color: var(--gold);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.arena-picker__empty {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.arena-picker__empty > .icon {
  flex: none;
  color: var(--gold);
}

.arena-picker__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--surface-1);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.arena-picker__status {
  flex: 1 1 240px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ---------- Equipamento (diálogo) ---------- */
.arena-equip {
  width: min(980px, calc(100vw - 32px));
}

/* nas telas largas, a prévia fica ao lado dos campos (e visível enquanto eles rolam) */
@media (min-width: 900px) {
  .arena-equip .arena-picker__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    grid-template-areas: 'lead lead' 'campos previa';
    align-items: start;
    gap: 0 var(--sp-5);
  }

  .arena-equip__lead {
    grid-area: lead;
  }

  .arena-equip__grid {
    grid-area: campos;
  }

  .arena-equip__preview {
    position: sticky;
    top: 0;
    grid-area: previa;
    margin-top: 0 !important;
  }

  .arena-equip__nums {
    grid-template-columns: minmax(0, 1fr);
  }
}

.arena-equip__who {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.arena-equip__lead {
  margin-bottom: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.arena-equip__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.arena-equip__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.arena-equip__item {
  flex: 1 1 260px;
  min-width: 0;
}

.arena-equip__plus,
.arena-equip__material {
  flex: 0 1 110px;
}

.arena-equip__row .select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.arena-equip__preview {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.arena-equip__h3 {
  margin: 0 0 var(--sp-3);
  color: var(--gold);
  font-size: var(--fs-md);
}

.arena-equip__nums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  font-size: var(--fs-sm);
}

.arena-equip__nums dt {
  color: var(--text-dim);
  font-size: var(--fs-xs);
}

.arena-equip__nums dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.arena-equip__nums small {
  color: var(--text-muted);
  font-weight: 400;
}

.arena-equip__wide {
  grid-column: 1 / -1;
}

.arena-equip__erros,
.arena-equip__avisos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.arena-equip__avisos {
  margin: var(--sp-3) 0 0;
  color: var(--text-muted);
}

.arena-equip__erros {
  color: var(--ember);
  font-weight: 600;
}

.arena-equip__erros li,
.arena-equip__avisos li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.arena-equip__erros .icon,
.arena-equip__avisos .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.arena-equip__info {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.arena-equip__info .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--gold);
}

.arena-equip__spacer {
  flex: 1;
}

/* ---------- Magias (diálogo e cartão) ---------- */
.arena-roster__magias {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  color: var(--text-muted);
}

.arena-roster__magias .icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--gold);
}

.arena-mag__grupo {
  min-width: 0;
  margin: 0;
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.arena-mag__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  padding: 0 var(--sp-2);
  color: var(--gold);
  font-weight: 700;
}

.arena-mag__conta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.arena-mag__conta.is-cheio {
  color: var(--text);
  font-weight: 600;
}

.arena-mag__lista {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.arena-mag__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--line);
}

.arena-mag__item:first-child {
  border-top: 0;
}

.arena-mag__info {
  flex: 1 1 220px;
  min-width: 0;
}

.arena-mag__item .stepper {
  flex: none;
  margin-left: auto;
}

.arena-mag__nome {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.arena-mag__nivel {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.arena-mag__det {
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.arena-mag__resumo {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.arena-mag__srd {
  white-space: nowrap;
}

/* conhecidas: a caixa ao lado do nome (o rótulo é só o nome; os números vão na descrição) */
.arena-mag__item--caixa {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.arena-mag__caixa {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--gold);
  cursor: pointer;
}

.arena-mag__item--caixa label {
  cursor: pointer;
}

.arena-mag__item--caixa:has(.arena-mag__caixa:disabled) {
  opacity: 0.6;
}

.arena-mag__item--caixa:has(.arena-mag__caixa:disabled) label,
.arena-mag__caixa:disabled {
  cursor: not-allowed;
}

.arena-mag__vazio {
  padding: var(--sp-2) 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.arena-mag__menores {
  margin-top: var(--sp-2);
  border-top: 1px dashed var(--line);
  padding-top: var(--sp-2);
}

.arena-mag__menores > summary {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.arena-mag__menores[open] > summary {
  margin-bottom: var(--sp-1);
}

/* ---------- Luta: barra de controles ---------- */
.arena-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
}

.arena-bar__status {
  min-width: 0;
}

.arena-bar__round {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--gold-bright);
}

.arena-bar__seed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-2);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.arena-bar__seed code {
  min-width: 0;
  color: var(--text);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  overflow-wrap: anywhere;
}

.arena-bar__info {
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.arena-bar__seed .icon-btn {
  width: 30px;
  height: 30px;
}

.arena-bar__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ---------- Luta: tabuleiro, iniciativa e registro ---------- */
.arena-fight {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr);
  align-items: start;
  gap: var(--sp-5);
}

.arena-fight__left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.arena-fight__right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.arena-order,
.arena-log-card {
  padding: var(--sp-5);
}

.arena-log-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.arena-order__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-2);
}

.arena-fighter {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--azure-line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  transition: box-shadow var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.arena-fighter--b {
  border-left-color: var(--ember-line);
}

.arena-fighter.is-turn {
  box-shadow: 0 0 0 1px var(--gold), 0 0 16px var(--gold-glow);
}

.arena-fighter__avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--azure-line);
  background: var(--surface-1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.arena-fighter--b .arena-fighter__avatar {
  border-color: var(--ember-line);
}

.arena-fighter__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* fora da luta: o cartão apaga, mas o texto mantém o contraste AA (sem opacity no cartão todo) */
.arena-fighter.is-down {
  border-left-color: var(--line);
  background: var(--surface-1);
}

.arena-fighter.is-down .arena-fighter__name {
  color: var(--text-muted);
}

.arena-fighter.is-down .arena-hp {
  opacity: 0.5;
}

.arena-fighter__main {
  flex: 1;
  min-width: 0;
}

.arena-fighter__name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.arena-fighter__state,
.arena-fighter__next {
  margin-left: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.arena-fighter__state {
  color: var(--ember);
}

.arena-fighter__state.is-estavel,
.arena-fighter__state.is-inconsciente,
.arena-fighter__state.is-incapacitado {
  color: var(--text-muted);
}

.arena-fighter__next {
  color: var(--gold);
}

.arena-fighter__meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: lining-nums tabular-nums;
}

.arena-fighter__chips {
  margin-top: var(--sp-2);
}

.arena-hp {
  position: relative;
  height: 8px;
  margin: var(--sp-2) 0 var(--sp-1);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-4);
}

.arena-hp__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--verdant);
  transition: width var(--dur-3) var(--ease);
}

.arena-hp--meio .arena-hp__fill {
  background: var(--gold);
}

.arena-hp--baixo .arena-hp__fill {
  background: var(--ember);
}

/* dano por contusão: a parte dos PV já tomada por ele, listrada */
.arena-hp__sub {
  position: absolute;
  inset: 0 auto 0 0;
  background: repeating-linear-gradient(135deg, rgba(169, 150, 230, 0.9) 0 4px, rgba(169, 150, 230, 0.45) 4px 8px);
}

.arena-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 480px;
  max-height: min(78vh, 850px);
  overflow-y: auto;
  padding-right: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.arena-log:focus-visible {
  outline: 2px solid var(--line-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.arena-log__item {
  padding: 3px var(--sp-3);
  border-left: 2px solid var(--line);
  color: var(--text-muted);
}

.arena-log__item[data-lado='A'] {
  border-left-color: var(--azure-line);
}

.arena-log__item[data-lado='B'] {
  border-left-color: var(--ember-line);
}

.arena-log__item.is-ataque,
.arena-log__item.is-magia,
.arena-log__item.is-especial {
  color: var(--text);
}

.arena-log__item.is-imune,
.arena-log__item.is-evasao {
  color: var(--gold);
}

.arena-log__item.is-morte,
.arena-log__item.is-estado {
  color: var(--ember);
  font-weight: 600;
}

.arena-log__item.is-fim {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left-color: var(--gold);
  background: rgba(212, 178, 106, 0.08);
  color: var(--gold-bright);
  font-weight: 700;
}

.arena-log__item.is-nao-simulado {
  color: var(--text-dim);
  font-style: italic;
}

/* o "por que" da IA treinada, antes da ação que ela escolheu */
.arena-log__item.is-ia {
  color: var(--text-dim);
  font-style: italic;
}

.arena-log__round {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-1);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.arena-log__round::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

/* ---------- Resultado ---------- */
.arena-result {
  margin-bottom: var(--sp-5);
  border-top: 3px solid var(--gold);
}

.arena-result--a {
  border-top-color: var(--azure);
}

.arena-result--b {
  border-top-color: var(--ember);
}

.arena-result__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.arena-result__head > div {
  min-width: 0;
}

.arena-result__head .arena-h2 {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xl);
}

.arena-result__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(212, 178, 106, 0.1);
  color: var(--gold-bright);
}

.arena-result__lead {
  color: var(--text-muted);
  overflow-wrap: anywhere; /* semente longa sem espaços */
}

.arena-result__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--sp-3);
}

.arena-stat {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--azure-line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.arena-stat--b {
  border-left-color: var(--ember-line);
}

.arena-stat__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.arena-stat__state {
  margin: var(--sp-1) 0 var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.arena-stat__nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
}

.arena-stat__nums dt {
  color: var(--text-dim);
  font-size: var(--fs-xs);
}

.arena-stat__nums dd {
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- Telas estreitas ---------- */
@media (max-width: 899.98px) {
  .arena-sides {
    grid-template-columns: minmax(0, 1fr);
  }

  .arena-versus {
    justify-self: center;
    font-size: var(--fs-2xl);
  }

  .arena-fight {
    grid-template-columns: minmax(0, 1fr);
  }

  .arena-log {
    min-height: 0;
    max-height: 60vh;
  }
}

@media (max-width: 479.98px) {
  .arena-side,
  .arena-order,
  .arena-log-card {
    padding: var(--sp-4);
  }

  .arena-bar__controls .btn {
    flex: 1 1 auto;
  }

  .arena-picker__head,
  .arena-picker__body,
  .arena-picker__foot {
    padding-inline: var(--sp-4);
  }

  /* três abas numa linha: largura igual, texto em até duas linhas, sem ícone */
  .arena-picker__tabs {
    flex-wrap: nowrap;
  }

  .arena-picker__tabs [role='tab'] {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding: var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.2;
    text-align: center;
  }

  .arena-picker__tabs [role='tab'] .icon {
    display: none;
  }

  .arena-pick__side {
    width: 100%;
    justify-content: space-between;
  }
}