/* =========================================================
   Arena-Kampf: Erweiterung im Stil des Entwurfs.
   Das Sheet selbst kommt aus sheet.css – hier stehen nur
   Kampffeld, KP-Balken, Log und die klickbaren Attacken.
   ========================================================= */

.battle-say {
  font-size: 0.9rem;
  line-height: 1.5;
  font-style: italic;
  opacity: 0.95;
  min-height: 1.4em;
}

.battle-field {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
}
.vs {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 0.9rem;
  opacity: 0.8;
}
.fighter {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  min-width: 0;
  width: 100%;
}
.fighter--ko {
  opacity: 0.45;
  filter: grayscale(1);
}
.fighter__img {
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.3));
}
.fighter__name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.95rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fighter__hp {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.fighter__hpfill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #7ee787;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fighter__hpfill.is-gelb { background: #f8d030; }
.fighter__hpfill.is-rot { background: #ff6b6b; }
.fighter__kp {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  opacity: 0.85;
}
/* Beide Teams als Mini-Sprites unter dem aktiven Kämpfer. */
.fighter__team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
  margin-top: 0.15rem;
}
.mini {
  image-rendering: pixelated;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
}
.mini--aktiv {
  outline: 2px solid #fff;
  background: rgba(255, 255, 255, 0.3);
}
.mini--ko {
  filter: grayscale(1);
  opacity: 0.4;
}

/* Der Umschalter zwischen Auto-Kampf und Selbst-Steuern. */
.battle-auto {
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
}
.battle-auto[hidden] {
  display: none;
}

/* Acht Arenen + Trainer: am Desktop zweispaltig, sonst wird die Liste lang. */
@media (min-width: 900px) {
  .opponents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Rangliste (Tabelle im Kampf-Bereich) ---------- */
.rang {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) 3rem 3.6rem 3.2rem;
  gap: 0.5rem;
  align-items: center;
  padding: 0.45rem 0.3rem;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(23, 48, 63, 0.08);
}
.rang:last-child {
  border-bottom: 0;
}
.rang--kopf {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.rang__platz {
  color: var(--muted);
}
.rang__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rang__wert {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Die eigene Zeile ist hervorgehoben. */
.rang--selbst {
  background: color-mix(in srgb, var(--secondary) 18%, transparent);
  border-radius: 8px;
}

/* ---------- Trainerauswahl im Sheet ---------- */
.trainer-row {
  display: grid;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  min-width: 0;
  transition: transform 0.15s ease;
}
.trainer-row:hover {
  transform: translateY(-2px);
}
.trainer-row__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}
.trainer-row__name {
  font-family: var(--font-title);
  font-weight: 700;
}
.trainer-row__meta {
  font-size: 0.72rem;
  opacity: 0.85;
  white-space: nowrap;
}
.trainer-row__team {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.battle-log {
  max-height: 9.5rem;
  overflow-y: auto;
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 0.7rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.78rem;
}
.logzeile--damage { color: #ffd9d9; }
.logzeile--heal { color: #c9f7d4; }
.logzeile--miss,
.logzeile--flinch { opacity: 0.85; }
.logzeile--crit,
.logzeile--ko,
.logzeile--ende {
  font-weight: 600;
}

/* Die klickbaren Attacken: kleine Typ-Karten, wie die Pokémon-Karten. */
.battle-moves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.move-btn {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  display: grid;
  gap: 0.15rem;
  text-align: left;
  color: #fff;
  font: inherit;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--type) 82%, #fff) 0%, var(--type) 55%, color-mix(in srgb, var(--type) 70%, #000) 100%);
  transition: transform 0.15s ease;
}
.move-btn:hover { transform: translateY(-2px); }
.move-btn:active { transform: scale(0.97); }
.move-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.move-btn__name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.move-btn__meta {
  font-size: 0.68rem;
  opacity: 0.85;
}