/* Matching Arena.

   Eigene Anmutung statt Kartenraster wie überall: Suchbereich oben,
   Trefferstapel, darunter das Ergebnis als eigener Bereich.

   Alle Bedienelemente sind mindestens 44x44 px groß. Das ist keine
   Stilfrage — kleinere Ziele trifft man auf dem Telefon nicht
   zuverlässig, und die Entscheidungsknöpfe sind der Kern dieser Seite. */

.arena {
  display: grid;
  gap: var(--space-5, 1.5rem);
  margin-block: var(--space-5, 1.5rem);
}

.arena__schritt {
  margin: 0;
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-bright, #26c1df);
}

/* ── Suche ─────────────────────────────────────────────────────────── */
.arena__suche {
  display: flex;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.arena__feld {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--space-4, 1rem);
  border: 1px solid color-mix(in srgb, var(--color-primary, #0095bd) 32%, transparent);
  background: color-mix(in srgb, var(--color-surface, #000b13) 92%, transparent);
  color: var(--color-text-hi, #fff);
  font-size: 1rem;   /* < 16px löst auf iOS einen Zoom beim Fokus aus */
}
.arena__feld::placeholder { color: var(--color-text-lo, #74899a); }
.arena__suchknopf {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-5, 1.5rem);
  border: 1px solid var(--color-primary-bright, #26c1df);
  background: transparent;
  color: var(--color-text-hi, #fff);
  font-family: var(--mono, monospace);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ── Treffer ───────────────────────────────────────────────────────── */
.arena__treffer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-4, 1rem);
}
.arena__karte {
  display: flex;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  border: 1px solid color-mix(in srgb, var(--color-border, #0d2733) 90%, transparent);
  background: color-mix(in srgb, var(--color-surface, #000b13) 88%, transparent);
  min-width: 0;
}
.arena__karte[data-entschieden="like"] {
  border-color: color-mix(in srgb, var(--color-success, #42a077) 60%, transparent);
}
.arena__karte[data-entschieden="dislike"] {
  border-color: color-mix(in srgb, var(--color-text-lo, #74899a) 40%, transparent);
  opacity: 0.72;
}
.arena__bild {
  flex: none;
  width: 84px;
  height: 118px;
  object-fit: cover;
  background: color-mix(in srgb, var(--color-bg-base, #000910) 80%, transparent);
}
.arena__text { display: grid; gap: 4px; align-content: start; min-width: 0; }
.arena__titel {
  margin: 0;
  font-size: 0.98rem;
  color: var(--color-text-hi, #fff);
  overflow-wrap: anywhere;
}
.arena__meta, .arena__genres {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-mid, #8fa3b0);
}

.arena__aktionen {
  display: flex;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-2, 0.5rem);
  flex-wrap: wrap;
}
.arena__aktion {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-4, 1rem);
  border: 1px solid color-mix(in srgb, var(--color-primary, #0095bd) 40%, transparent);
  background: transparent;
  color: var(--color-text-mid, #8fa3b0);
  font-size: 0.85rem;
  cursor: pointer;
}
.arena__aktion[aria-pressed="true"] {
  border-color: var(--color-primary-bright, #26c1df);
  color: var(--color-text-hi, #fff);
}
/* Sichtbarer Fokus: Tastaturbedienung darf nicht raten müssen. */
.arena__aktion:focus-visible,
.arena__suchknopf:focus-visible,
.arena__konto:focus-visible,
.arena__feld:focus-visible {
  outline: 2px solid var(--color-primary-bright, #26c1df);
  outline-offset: 2px;
}

/* ── Ergebnis ──────────────────────────────────────────────────────── */
.arena__ergebnis {
  padding: var(--space-5, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--color-primary, #0095bd) 26%, transparent);
  background: color-mix(in srgb, var(--color-surface, #000b13) 92%, transparent);
}
.arena__ueberschrift {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 1.1rem;
  color: var(--color-text-hi, #fff);
}
.arena__herkunft, .arena__vielfalt, .arena__quelle,
.arena__hinweis, .arena__leer, .arena__konto-hinweis {
  margin: var(--space-2, 0.5rem) 0 0;
  font-size: 0.86rem;
  color: var(--color-text-mid, #8fa3b0);
}
.arena__quelle { color: var(--color-text-lo, #74899a); font-size: 0.78rem; }

.arena__dna { list-style: none; margin: var(--space-4, 1rem) 0 0; padding: 0; }
.arena__dna-zeile { margin-bottom: var(--space-4, 1rem); }
.arena__dna-kopf {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  align-items: baseline;
}
.arena__dna-name { color: var(--color-text-hi, #fff); font-size: 0.95rem; }
.arena__dna-wert {
  font-family: var(--mono, monospace);
  color: var(--color-primary-bright, #26c1df);
}
.arena__balken {
  height: 6px;
  margin-top: 6px;
  background: color-mix(in srgb, var(--color-border, #0d2733) 90%, transparent);
}
.arena__balken-fuellung {
  height: 100%;
  background: var(--color-primary-bright, #26c1df);
  /* Nur Breite animieren, und nur wenn Bewegung erwünscht ist. */
  transition: width 320ms ease;
}
.arena__dna-grund {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-lo, #74899a);
}

.arena__konto {
  min-height: 44px;
  margin-top: var(--space-4, 1rem);
  padding: 0 var(--space-5, 1.5rem);
  border: 1px solid var(--color-primary-bright, #26c1df);
  background: transparent;
  color: var(--color-text-hi, #fff);
  font-size: 0.9rem;
  cursor: pointer;
}
.arena__weiter {
  display: inline-block;
  margin-top: var(--space-4, 1rem);
  min-height: 44px;
  line-height: 44px;
  padding: 0 var(--space-5, 1.5rem);
  border: 1px solid var(--color-primary-bright, #26c1df);
  color: var(--color-text-hi, #fff);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .arena__balken-fuellung { transition: none; }
}

/* Absolute Zahl neben dem Prozentwert: Zwei Titel mit gleichen Genres
   ergeben dieselbe Verteilung — die Anzahl zeigt, dass die Entscheidung
   trotzdem gezaehlt wurde. */
.arena__dna-anzahl {
  color: var(--color-text-lo, #74899a);
  font-size: 0.78rem;
}