/* =========================================================
   Zweck: PlayerCards – Styling für obere Spieler-Karten
   Datei: frontend/styles/components/playerCards.css

   Ziele:
   - Spielername oben links in die Ecke
   - Score darunter (optional, klein)
   - Trainings-Stats darunter (Würfe, Treffer, Quote)
   - Cards bleiben groß/wertig (min-height)
   - Keine Zentrierung mehr wie vorher (nicht mittig im Panel)
========================================================= */

/* =========================================================
   Zweck: Grundlayout der PlayerCard
   Erklärung:
   - flex-start statt center, damit Inhalt oben links sitzt
   - min-height sorgt für "große Karte" (wie von dir gefordert)
   - padding gibt den typischen Panel-Innenabstand
========================================================= */
.playerCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  min-height: 220px;

  padding: 22px 24px;
  gap: 16px;
}

/* =========================================================
   Zweck: Top-Bereich (Name + Score)
   Erklärung:
   - Spalte, linksbündig, oben in der Card
========================================================= */
.pcTop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* =========================================================
   Zweck: Spielername – prominent, oben links
========================================================= */
.pcName {
  font-size: 1.55rem;
  font-weight: 750;
  opacity: 0.95;
  line-height: 1.1;
}

/* =========================================================
   Zweck: Score – optional unter dem Namen
   Hinweis:
   - bewusst kleiner als Name, damit Training im Fokus steht
========================================================= */
.pcScore {
  font-size: 1.2rem;
  font-weight: 800;
  opacity: 0.78;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* =========================================================
   Zweck: Trainings-Stats Container
   Erklärung:
   - sauberer vertikaler Block für Stat-Zeilen
========================================================= */
.pcStats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================================================
   Zweck: Eine Stats-Zeile (Label links, Wert rechts)
========================================================= */
.pcStatRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* =========================================================
   Zweck: Label-Stil (z.B. "Würfe")
========================================================= */
.pcStatLabel {
  font-size: 0.95rem;
  font-weight: 650;
  opacity: 0.7;
}

/* =========================================================
   Zweck: Wert-Stil (z.B. "12" oder "Zielsegment (T20)")
========================================================= */
.pcStatValue {
  font-size: 0.98rem;
  font-weight: 750;
  opacity: 0.9;
}

/* =========================================================
   Zweck: Hinweistext (z.B. Training nicht initialisiert)
========================================================= */
.pcHint {
  font-size: 0.92rem;
  opacity: 0.65;
}

/* =========================================================
   Zweck: Aktiver Spieler – dezente Hervorhebung
   Hinweis:
   - Wenn du Active-Optik an anderer Stelle definierst, kannst du das entfernen.
========================================================= */
.playerCard.active {
  outline: 1px solid rgba(255, 255, 255, 0.12);
}