/* .pc-games-head ist mit 6.88.0 entfallen, die Seite hat ihren
   Kopfbereich verloren. Die Breitenregel bleibt und traegt jetzt allein
   den Inhalt; ohne sie klebte er am Fensterrand. */
.pc-games-container {
  width: var(--pc-width);
  max-width: var(--pc-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: transparent !important;
  background-color: transparent !important;

  display: flex;
  flex-direction: column;
}

.pc-game-card {
  position: relative;
  background: rgba(255, 255, 255, 0.022) !important;
  background-color: rgba(255, 255, 255, 0.022) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-left: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 28px 26px 28px 26px !important;
  margin: 0 0 24px 0 !important;
  box-sizing: border-box;
}

.pc-game-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

.pc-game-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 240px;
  flex-shrink: 0;
}

.pc-game-img-wrap {
  width: 100%;
  height: 135px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--pc-line);
  background: rgba(255, 255, 255, 0.02);
}

.pc-game-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-game-source {
  font-family: var(--pc-font-page);
  font-size: 11px;
  color: var(--pc-muted);
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.pc-source-link {
  color: var(--pc-muted) !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.pc-source-link:hover {
  color: var(--pc-accent) !important;
}

.pc-game-info {
  flex: 1;
  min-width: 0;
}

.pc-game-title {
  font-family: var(--pc-font-page);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: var(--pc-weight-page);
  /* base.css setzt h1 bis h6 auf Weiss mit !important und laedt immer
     zuerst. Ohne !important gewinnt es gegen diese genauere Regel.
     home.css hat fuer dieselbe Klasse denselben Weg genommen. */
  color: var(--pc-text) !important;
  margin: 0 0 14px 0;
  letter-spacing: -0.4px;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.pc-game-status-target {
  display: inline-block;
  min-height: 1em;
  min-width: 1px;
}

.pc-title-status {
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 0;
  text-transform: none;
}

.pc-title-status.pc-status-active { color: var(--pc-live); }

.pc-title-status.pc-status-full { color: var(--pc-warn); }

.pc-title-status.pc-status-inactive { color: var(--pc-muted); }

.pc-game-stats {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pc-game-stats li {
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.5;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.pc-stat-label {
  color: var(--pc-muted);
  white-space: nowrap;
}

.pc-stat-val {
  color: var(--pc-text);
}

.pc-game-action {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.pc-cta {
  display: inline-block;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 4px 0 !important;
  color: var(--pc-text) !important;
  font-family: var(--pc-font-page) !important;
  font-size: 13px !important;
  font-weight: var(--pc-weight-page) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--pc-text) !important;
  cursor: pointer !important;
  transform: none !important;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.pc-cta:hover {
  background: none !important;
  opacity: 0.6;
  transform: none !important;
  border-bottom-color: var(--pc-accent) !important;
}

@media (max-width: 1100px) {
  .pc-games-container {
    width: 88%;
  }
}

@media (max-width: 768px) {
  .pc-games-container {
    width: 100%;
    padding: 0 var(--pc-edge) !important;
  }

  .pc-game-card {
    padding: 20px 16px 20px 14px !important;
  }

  .pc-game-card {
    margin-bottom: 18px !important;
  }

  .pc-game-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .pc-game-media {
    width: 100%;
  }

  /* DER TEXTBLOCK BRAUCHT DIESELBE ZEILE, und das ist ein gemessener
     Befund, kein Feinschliff.

     .pc-game-info trägt oben `flex: 1`. In der ZEILE am Rechner meint das
     die Breite, und der Block füllt neben dem Bild alles aus. Hier ist die
     Karte aber eine SPALTE, die Hauptachse steht senkrecht, und `flex: 1`
     wirkt damit auf die HÖHE. Über die Breite entscheidet stattdessen
     `align-items: flex-start` eine Regel darüber - und das heißt: auf den
     Inhalt schrumpfen.

     Bei 375 Pixeln gemessen: Der Block war 189 breit, das Bild darüber 307.
     RECHTS BLIEBEN 118 PIXEL LEER, und die Angabenzeilen brachen deshalb
     um, obwohl Platz da war.

     Dieselbe Falle wie bei .pc-ah-person in 6.76.0, nur andersherum: Dort
     wurde eine Breitenangabe zur Höhe, hier fällt eine Breitenangabe ganz
     weg. Wer einen Flex-Behälter am Telefon auf `column` dreht, prüft JEDES
     Kind auf seine Breite. */
  .pc-game-info {
    width: 100%;
  }

  .pc-game-img-wrap {
    width: 100%;
    height: 160px;
  }

  .pc-game-title {
    font-size: 22px;
  }

  /* NEBENEINANDER, SOLANGE PLATZ IST.
   *
   * Bis 6.81.0 stand hier `flex-direction: column`, Beschriftung über dem
   * Wert. Das war die FOLGE eines Fehlers, nicht eine Entscheidung: Der
   * Textblock der Karte war am Telefon nur 189 Pixel breit statt 307 (siehe
   * .pc-game-info weiter oben), und darin passte kein Paar nebeneinander.
   *
   * Mit der behobenen Breite gemessen: Beschriftung 31 und Wert 182, also
   * 213 von 307 Pixeln. Es passt, und jede Zeile wird dadurch von 41 auf
   * rund 20 Pixel flach - eine Karte spart so gut sechzig Pixel.
   *
   * `wrap` statt einer festen Zeile, und das ist der tragende Teil: Auf
   * /spiele/ füllt games.js die Werte mit dem nächsten Turnier, und die
   * können deutlich länger sein als hier. Passt ein Paar nicht, bricht es
   * um und steht wieder untereinander - genau der alte Zustand, aber nur
   * dort, wo er nötig ist. */
  .pc-game-stats li {
    font-size: 13px;
    flex-wrap: wrap;
    gap: 2px 8px;
  }
}

/* ---------- Live-Angaben je Disziplin ---------- */

.pc-game-card {
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.pc-game-card.is-quiet {
  opacity: 0.62;
}

.pc-game-card.is-quiet:hover {
  opacity: 0.85;
}

.pc-game-card.is-live {
  border-left-color: var(--pc-live) !important;
  background: rgba(69, 217, 163, 0.035) !important;
  background-color: rgba(69, 217, 163, 0.035) !important;
}

.pc-game-live {
  display: block;
  margin: 14px 0 18px 0;
  padding: 12px 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

.pc-game-live.is-open {
  border-left-color: var(--pc-live);
  background: rgba(69, 217, 163, 0.07);
}

.pc-game-live.is-full {
  border-left-color: var(--pc-warn);
  background: rgba(252, 121, 56, 0.07);
}

.pc-live-name {
  display: block;
  font-family: var(--pc-font-page);
  font-size: 15px;
  font-weight: 700;
  color: var(--pc-text);
  letter-spacing: -0.2px;
  margin-bottom: 5px;
  overflow-wrap: anywhere;
}

.pc-live-meta {
  display: block;
  font-family: var(--pc-font-page);
  font-size: 12px;
  font-weight: var(--pc-weight-page);
  line-height: 1.55;
  color: var(--pc-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.pc-game-live.is-none .pc-live-meta,
.pc-game-live.is-done .pc-live-meta,
.pc-game-live.is-full .pc-live-meta {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
}

.pc-live-sep {
  color: rgba(255, 255, 255, 0.25);
  margin: 0 8px;
}

.pc-live-slots {
  display: block;
  margin-top: 7px;
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
}

.pc-live-slots strong {
  color: var(--pc-live);
  font-weight: var(--pc-weight-page);
}

.pc-live-more {
  display: block;
  margin-top: 5px;
  font-family: var(--pc-font-page);
  font-size: 11.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-cta-primary {
  font-weight: 700 !important;
  border-bottom-width: 2px !important;
  border-bottom-color: var(--pc-accent) !important;
}

.pc-title-status {
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-left: 12px;
  white-space: nowrap;
}

.pc-status-active { color: var(--pc-live); }
.pc-status-full { color: var(--pc-warn); }
.pc-status-inactive { color: var(--pc-muted); }

@media (max-width: 768px) {
  .pc-game-live { padding: 10px 12px; margin: 12px 0 16px 0; }
  .pc-title-status { margin-left: 0; display: block; margin-top: 6px; }
}