:root {
  --pc-green: var(--pc-live);
  --pc-font-page: "aptos", sans-serif;
  --pc-weight-page: 600;
}

body.lang-us .pc-lang-de { display: none !important; }
body:not(.lang-us) .pc-lang-us { display: none !important; }

.primecup-announcement-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 48px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.announcement-card {
  position: relative;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 4px 22px !important;
  text-align: left;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

/* WEISS UND NICHT GOLD, seit 7.5.0 und auf Roberts Vorgabe vom
   20.08.2026. Gemeint ist "Jetzt kann es losgehen!" im Block "Phase 1
   live" auf der Startseite.

   var(--pc-text) und kein fester Wert: Das ist die Textfarbe des
   Projekts, und sie steht in base.css. Ein ausgeschriebenes #E1E4EB
   waere eine zweite Stelle, an der dieselbe Farbe steht.

   Die Selektorliste bleibt vollstaendig. Sie faengt die beiden
   Sprach-Spans mit ab, und das Theme faerbt eine Ueberschrift sonst
   selbst - deshalb auch das !important. */
.announcement-title,
.announcement-title *,
.announcement-title span,
.announcement-title .pc-lang-de,
.announcement-title .pc-lang-us {
  font-family: "droid-sans-mono", monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--pc-text) !important;
  font-size: clamp(17px, 2vw, 21px);
  margin: 0 0 12px 0;
  letter-spacing: -0.2px;
}

/* Altbestand: "PHASE 1 LIVE" stand bis 6.99.0 IM Ankuendigungsblock, als
   kleine Marke ueber dem Titel. Robert wollte es als Abschnittstitel
   darueber haben, so wie bei den vier Bloecken daneben; in Body_v5 ist es
   deshalb eine .facts-section-title und der Kasten hier ist weg.

   Die beiden Regeln bleiben fuer Body_v4 stehen: Plugin und Seitenfassung
   werden getrennt eingespielt, und zwischen den beiden Schritten stuende
   die Marke sonst unformatiert in der Groesse des Themes da. Dieselbe
   Ueberlegung wie bei .pc-hof-sub und .pc-hof-foot darunter. */
.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.announcement-tag {
  font-family: var(--pc-font-page);
  color: var(--pc-muted);
  font-size: 10px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.announcement-body p {
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--pc-muted) !important;
  margin: 0 0 16px 0;
}

.announcement-body p:last-child { margin-bottom: 0; }

.announcement-body strong {
  color: var(--pc-text);
  font-weight: var(--pc-weight-page);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
  padding-bottom: 1px;
}

.announcement-faq {
  margin-top: 24px;
  border-left: 2px solid var(--pc-green);
  background: rgba(69, 217, 163, 0.07);
}

.announcement-faq + .announcement-faq {
  margin-top: 10px;
}

.announcement-faq-a a {
  color: var(--pc-text) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: opacity 0.2s ease;
}

.announcement-faq-a a:hover {
  opacity: 0.6;
}

.announcement-faq-q {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px !important;
  margin: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  font-family: var(--pc-font-page) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--pc-green) !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  transform: none !important;
  transition: opacity 0.2s ease !important;
}

.announcement-faq-q:hover,
.announcement-faq-q:focus,
.announcement-faq-q:active {
  background: none !important;
  color: var(--pc-green) !important;
  outline: none !important;
  transform: none !important;
  opacity: 0.75;
}

.announcement-faq-icon {
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1;
  color: var(--pc-green);
  transition: transform 0.25s ease;
}

.announcement-faq.open .announcement-faq-icon {
  transform: rotate(180deg);
}

.announcement-faq-a {
  display: none;
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
  margin: 0 !important;
  padding: 0 16px 15px 16px;
}

.announcement-faq.open .announcement-faq-a {
  display: block;
}

.announcement-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.announcement-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pc-font-page);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--pc-text) !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  padding: 13px 22px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.announcement-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--pc-text);
  transform: translateY(-2px);
}

.announcement-btn-primary {
  color: var(--pc-gold) !important;
  background: rgba(245, 213, 110, 0.1);
  border-color: rgba(245, 213, 110, 0.55);
}

.announcement-btn-primary:hover {
  background: rgba(245, 213, 110, 0.2);
  border-color: var(--pc-gold);
}

.announcement-btn-arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.announcement-btn:hover .announcement-btn-arrow {
  transform: translateX(4px);
}

.announcement-footer {
  display: flex;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--pc-font-page);
  font-size: 13px;
  color: var(--pc-muted) !important;
  font-style: italic;
}

.primecup-facts-section {
  width: 100%;
  max-width: 1200px;
  margin: 25px auto 55px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* DIE ABSCHNITTSTITEL SEIT 6.99.0: klein, linksbuendig, ueber dem Block.
 *
 * Bis 6.98.0 standen sie in 28 Pixeln mittig ueber der Seite und waren
 * damit fast so gross wie der Anspruch ganz oben. Robert wollte sie clean
 * und kleiner, linksbuendig ueber dem jeweiligen Block.
 *
 * Die Schrift bleibt droid-sans-mono in Gold: Es sind Titel, und das ist
 * die Titelschrift dieser Seite. Nur Groesse, Ausrichtung und Abstand
 * aendern sich - eine andere Schrift waere mehr, als gefragt war.
 *
 * text-align: left und nicht start: `start` kennen aeltere Browser nicht,
 * und die Seite ist ohnehin nur in zwei Sprachen unterwegs, die beide von
 * links laufen. */
.facts-section-title,
.facts-section-title *,
.facts-section-title span,
.facts-section-title .pc-lang-de,
.facts-section-title .pc-lang-us {
  font-family: "droid-sans-mono", monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--pc-gold) !important;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: left;
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  width: 100%;
}

.fact-card {
  position: relative;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
  padding: 24px 0 24px 24px !important;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.fact-card::before,
.fact-card::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--pc-text), rgba(255, 255, 255, 0));
  opacity: 0.35;
  pointer-events: none;
}

.fact-card::before { top: 0; }
.fact-card::after { bottom: 0; }

.fact-num {
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text);
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.fact-card h3 {
  font-family: var(--pc-font-page);
  font-size: 20px;
  color: var(--pc-text) !important;
  margin: 0 0 10px 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
}

.fact-card p {
  font-family: var(--pc-font-page);
  font-size: 14px;
  color: var(--pc-muted) !important;
  line-height: 1.6;
  margin: 0;
}

.highlight-white { color: var(--pc-text) !important; }
.highlight-green { color: var(--pc-green) !important; }

.primecup-games-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 55px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.pc-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  width: 100%;
}

.pc-home-game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--pc-bg) !important;
  background-color: var(--pc-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.pc-home-game-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  transition: transform 0.4s ease;
}

.pc-home-game-card:hover {
  border-color: var(--pc-text) !important;
  transform: translateY(-4px);
}

.pc-home-game-card:hover .pc-home-game-img {
  transform: scale(1.06);
}

.pc-game-overlay {
  position: relative;
  z-index: 1;
  background: linear-gradient(to top, rgba(10, 10, 14, 0.95) 20%, rgba(10, 10, 14, 0.6) 70%, transparent 100%);
  padding: 24px 20px;
  width: 100%;
  box-sizing: border-box;
}

.pc-game-tag {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.pc-game-title {
  font-family: var(--pc-font-page);
  font-size: 18px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text) !important;
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
}

.pc-game-desc {
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  color: var(--pc-muted) !important;
  margin: 0;
  line-height: 1.5;
}

.primecup-champion-banner-section,
.primecup-leaderboard-banner-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 55px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.champion-banner-card {
  position: relative;
  background: radial-gradient(circle at 48px center, rgba(69, 217, 163, 0.12) 0%, transparent 80%) !important;
  border: 1px solid rgba(69, 217, 163, 0.3) !important;
  border-left: 3px solid var(--pc-live) !important;
  border-radius: 0 !important;
  padding: 28px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  box-sizing: border-box;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.champion-banner-card:hover {
  background: radial-gradient(circle at 48px center, rgba(69, 217, 163, 0.20) 0%, transparent 85%) !important;
  border-color: rgba(69, 217, 163, 0.5) !important;
}

.champion-tag-label {
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-live) !important;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.leaderboard-banner-card {
  position: relative;
  background: radial-gradient(circle at 48px center, rgba(245, 213, 110, 0.12) 0%, transparent 80%) !important;
  border: 1px solid rgba(245, 213, 110, 0.3) !important;
  border-left: 3px solid var(--pc-gold) !important;
  border-radius: 0 !important;
  padding: 28px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  box-sizing: border-box;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.leaderboard-banner-card:hover {
  background: radial-gradient(circle at 48px center, rgba(245, 213, 110, 0.20) 0%, transparent 85%) !important;
  border-color: rgba(245, 213, 110, 0.5) !important;
}

.leaderboard-tag-label {
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-gold) !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 1 !important;
}

.champion-left,
.leaderboard-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.champion-details,
.leaderboard-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.champion-right,
.leaderboard-right {
  flex-shrink: 0;
}

.champion-title-name,
.leaderboard-title-text {
  font-family: var(--pc-font-page);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: var(--pc-weight-page);
  color: var(--pc-text) !important;
  margin: 0;
  letter-spacing: -0.4px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.champion-sub-meta,
.leaderboard-sub-meta {
  font-family: var(--pc-font-page);
  font-size: 14px;
  color: var(--pc-muted) !important;
  margin: 0;
  line-height: 1.6;
}

.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 !important;
  white-space: nowrap;
}

.pc-cta:hover {
  background: none !important;
  opacity: 0.6;
  transform: none !important;
}

.primecup-stream-section {
  text-align: center;
  /* Letzter Bereich vor dem Fußbereich: etwas mehr Luft als die 55 px
     zwischen den übrigen Abschnitten, damit die Rechtstexte nicht an den
     Teamkarten kleben. */
  margin: 0 auto 78px auto;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
}

.stream-title {
  font-style: italic;
  font-family: var(--pc-font-page);
  font-size: 16px;
  color: var(--pc-text);
  margin: 0 0 30px 0;
  opacity: 0.9;
  letter-spacing: 0.5px;
  text-align: center;
}

.pc-tw {
  display: inline-block;
  white-space: nowrap;
  text-align: left;
}

.typewriter-cursor {
  color: var(--pc-text);
  margin-left: 3px;
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
  animation: blinkCursor 0.7s infinite;
}

@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.primecup-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
}

.profile-teaser-card {
  position: relative;
  background: radial-gradient(circle at 48px center, rgba(255, 255, 255, 0.08) 0%, transparent 75%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
  padding: 20px 0 20px 20px !important;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none !important;
  color: var(--pc-text) !important;
  text-align: left;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.profile-teaser-card:hover {
  background: radial-gradient(circle at 48px center, rgba(255, 255, 255, 0.15) 0%, transparent 80%) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.teaser-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 0 !important;
  border: 1px solid var(--pc-text);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.teaser-avatar-wrap.team-wrap {
  border-color: var(--pc-info);
}

.teaser-avatar {
  width: 100%;
  height: 100%;
  background: #111;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--pc-font-page);
  color: var(--pc-text);
}

.teaser-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.teaser-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.teaser-tag {
  font-size: 9px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  color: var(--pc-text);
  font-family: var(--pc-font-page);
  text-transform: uppercase;
}

.teaser-tag.team-tag { color: var(--pc-info); }

.teaser-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1px;
  font-family: var(--pc-font-page);
}

.teaser-status.live { color: var(--pc-green); }
.teaser-status.recruiting { color: var(--pc-warn); }

.teaser-pulse { width: 5px; height: 5px; display: inline-block; }
.teaser-pulse.live { background-color: var(--pc-green); }
.teaser-pulse.recruiting { background-color: var(--pc-warn); }

.teaser-name {
  font-family: var(--pc-font-page);
  font-size: 18px;
  font-weight: var(--pc-weight-page);
  margin: 0 0 2px 0;
  letter-spacing: -0.3px;
  color: var(--pc-text) !important;
}

.teaser-subline {
  font-family: var(--pc-font-page);
  font-size: 12px;
  color: var(--pc-muted) !important;
  margin: 0;
}

@media (max-width: 1100px) {
  .primecup-announcement-section,
  .primecup-facts-section,
  .primecup-games-section,
  .primecup-champion-banner-section,
  .primecup-leaderboard-banner-section,
  .primecup-stream-section {
    margin-bottom: 56px;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .primecup-announcement-section,
  .primecup-games-section,
  .primecup-champion-banner-section,
  .primecup-leaderboard-banner-section {
    margin-bottom: 38px;
    padding: 0 16px;
  }

  .primecup-facts-section {
    margin: 18px auto 38px auto;
    padding: 0 16px;
  }

  .primecup-stream-section {
    margin-bottom: 56px;
    padding: 0 16px;
  }

  .facts-section-title,
  .facts-section-title *,
  .facts-section-title span,
  .facts-section-title .pc-lang-de,
  .facts-section-title .pc-lang-us {
    font-size: 12px;
    letter-spacing: 1.6px;
    margin-bottom: 16px;
  }

  .announcement-card {
    padding: 24px 18px !important;
  }

  .announcement-body p {
    font-size: 13.5px;
  }

  .announcement-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }

  .announcement-btn {
    justify-content: center;
    padding: 14px 18px;
  }

  .facts-grid,
  .pc-games-grid,
  .primecup-profiles-grid {
    gap: 16px;
  }

  .fact-card {
    padding: 20px 0 20px 18px !important;
  }

  .pc-home-game-card {
    min-height: 240px;
  }

  .pc-game-overlay {
    padding: 20px 16px;
  }

  .champion-banner-card,
  .leaderboard-banner-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 18px !important;
  }

  .champion-right,
  .leaderboard-right {
    width: 100%;
  }

  .pc-cta {
    white-space: normal;
  }

  .profile-teaser-card {
    padding: 18px 16px !important;
  }

  .stream-title {
    font-size: 15px;
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .primecup-announcement-section,
  .primecup-facts-section,
  .primecup-games-section,
  .primecup-champion-banner-section,
  .primecup-leaderboard-banner-section,
  .primecup-stream-section {
    margin-bottom: 46px;
    padding: 0 12px;
  }

  .facts-section-title,
  .facts-section-title *,
  .facts-section-title span,
  .facts-section-title .pc-lang-de,
  .facts-section-title .pc-lang-us {
    font-size: 11.5px;
    letter-spacing: 1.4px;
    margin-bottom: 14px;
  }

  .announcement-card {
    padding: 20px 14px !important;
  }

  .announcement-faq {
    padding: 12px 14px;
  }

  .announcement-title,
  .announcement-title *,
  .announcement-title span,
  .announcement-title .pc-lang-de,
  .announcement-title .pc-lang-us {
    font-size: 20px;
  }

  .announcement-btn {
    font-size: 13px;
    letter-spacing: 1px;
    padding: 13px 14px;
  }

  .fact-card {
    padding: 18px 0 18px 14px !important;
  }

  .fact-card h3 {
    font-size: 18px;
  }

  .pc-home-game-card {
    min-height: 210px;
  }

  .champion-banner-card,
  .leaderboard-banner-card {
    padding: 20px 14px !important;
  }

  .champion-title-name,
  .leaderboard-title-text {
    font-size: 21px;
  }

  .profile-teaser-card {
    padding: 16px 14px !important;
    gap: 14px;
  }

  .teaser-name {
    font-size: 16px;
  }
}

/* ---------- Live Arena: Kopfbereich ---------- */

.primecup-arena-section {
  position: relative;

  /* Die uebrigen Bloecke sind 1200 px breit und haben 20 px Polsterung,
     ihr Inhalt beginnt also bei 1160 px. Damit der Rahmen genau dort sitzt,
     ist dieser Bereich 1160 px breit statt 1200. */
  width: calc(100% - 40px);
  max-width: 1160px;
  margin: 0 auto 46px auto;
  padding: 30px 32px 32px 32px;
  box-sizing: border-box;

  /* Ruhiger Rahmen. Der Innenbereich bleibt wie bisher, es kommt nur
     die Kante hinzu. */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Das Lauflicht rundherum steht seit 6.65.0 als .pc-lauframen in site.css,
   weil die 404-Seite denselben Rahmen braucht, dort in Rot. Verschoben,
   nicht kopiert. Die Selektorliste dort nennt .primecup-arena-section
   ausdruecklich mit, damit Body_v4 unangetastet bleibt; ohne Angabe von
   --pc-lauf-farbe bleibt es bei Gold wie bisher. */

.pc-arena-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pc-green);
  margin-bottom: 14px;
}

.pc-arena-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc-green);
  flex-shrink: 0;
}

.pc-arena-claim,
.pc-arena-claim span {
  font-family: "droid-sans-mono", monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--pc-gold) !important;
  font-size: clamp(28px, 5.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -1px;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

.pc-arena-sub {
  font-family: var(--pc-font-page);
  font-size: 14.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.65;
  color: var(--pc-muted) !important;
  margin: 0 0 26px 0 !important;
  max-width: 620px;
}

.pc-arena-sub strong {
  color: var(--pc-text);
  font-weight: var(--pc-weight-page);
}

.pc-arena-rule {
  position: relative;
  height: 1px;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  margin-bottom: 28px;
}

.pc-arena-sweep {
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--pc-gold), transparent);
  opacity: 0;
}

.pc-arena-stage {
  min-height: 168px;
}

.pc-arena-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pc-muted);
  margin-bottom: 8px;
}

.pc-arena-tid {
  color: var(--pc-accent, var(--pc-accent));
  letter-spacing: 1.5px;
}

.pc-arena-name {
  font-family: var(--pc-font-page) !important;
  font-size: clamp(21px, 3vw, 30px) !important;
  font-weight: 700 !important;
  color: var(--pc-text) !important;
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin: 0 0 10px 0 !important;
  overflow-wrap: anywhere;
}

.pc-arena-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted) !important;
  margin: 0 0 24px 0 !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.pc-arena-sep {
  color: rgba(255, 255, 255, 0.25);
}

.pc-arena-clock {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.pc-arena-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.pc-arena-unit b {
  font-family: "droid-sans-mono", monospace;
  font-size: clamp(30px, 5.6vw, 52px);
  font-weight: 400;
  line-height: 1;
  color: var(--pc-text);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.pc-arena-unit i {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--pc-weight-page);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-arena-clock.is-plain {
  align-items: center;
  min-height: 54px;
}

.pc-arena-open,
.pc-arena-live {
  font-family: "droid-sans-mono", monospace;
  font-size: clamp(22px, 3.6vw, 34px);
  color: var(--pc-green);
  letter-spacing: -0.5px;
}

.pc-arena-clocknote {
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pc-muted) !important;
  margin: 0 0 26px 0 !important;
}

.pc-arena-slots {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 520px;
  height: 10px;
  margin-bottom: 12px;
}

.pc-arena-slot {
  flex: 1 1 0;
  height: 100%;
  min-width: 4px;
}

.pc-arena-slot.is-taken { background: var(--pc-text); }
.pc-arena-slot.is-pending { background: rgba(252, 121, 56, 0.75); }
.pc-arena-slot.is-free { background: rgba(255, 255, 255, 0.16); }

.pc-arena-slotnote {
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted) !important;
  margin: 0 0 28px 0 !important;
}

.pc-arena-slotnote strong {
  color: var(--pc-text);
  font-weight: var(--pc-weight-page);
}

.pc-arena-empty {
  font-family: var(--pc-font-page);
  font-size: 14.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.65;
  color: var(--pc-muted) !important;
  margin: 0 0 26px 0 !important;
  max-width: 560px;
}

.pc-arena-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pc-arena-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--pc-font-page);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pc-bg) !important;
  text-decoration: none !important;
  background: var(--pc-accent);
  border: 1px solid var(--pc-accent);
  border-radius: 0;
  padding: 16px 30px;
  box-shadow: 0 4px 18px rgba(250, 67, 122, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pc-arena-cta:hover {
  background: #FF6E97;
  box-shadow: 0 7px 26px rgba(250, 67, 122, 0.45);
  transform: translateY(-2px);
}

.pc-arena-cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.pc-arena-cta:hover .pc-arena-cta-arrow { transform: translateX(4px); }

.pc-arena-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--pc-font-page);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pc-text) !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  padding: 16px 30px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pc-arena-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--pc-text);
  transform: translateY(-2px);
}

.pc-arena-stats:empty { display: none; }

.pc-arena-stats {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pc-arena-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-arena-stat b {
  font-family: "droid-sans-mono", monospace;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.5px;
  color: var(--pc-gold);
  text-transform: none;
}

.pc-arena-skeleton {
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3) !important;
  margin: 26px 0 0 0 !important;
}

@media (max-width: 768px) {
  .primecup-arena-section {
    /* Unter 768 px haben die anderen Bloecke 10 px Polsterung.
       Derselbe Abstand nach aussen, damit der Rahmen buendig sitzt. */
    width: calc(100% - 20px);
    max-width: none;
    margin: 0 auto 38px auto;
    padding: 22px 18px 24px 18px;
  }

  .pc-arena-claim,
  .pc-arena-claim span { letter-spacing: -0.6px; }

  /* Zeitkapsel: mittig, als eigener Block mit gleich breiten Spalten.
     Die Zahlen kommen weiterhin aus dem Startdatum des Turniers,
     das im Dashboard gesetzt wird. */
  .pc-arena-clock {
    justify-content: center;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 0 0;
    padding: 15px 6px 13px 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid var(--pc-accent);
    background: rgba(255, 255, 255, 0.025);
  }

  .pc-arena-unit {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    gap: 5px;
  }

  .pc-arena-unit + .pc-arena-unit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .pc-arena-unit b {
    font-size: 30px;
    letter-spacing: -0.6px;
  }

  .pc-arena-unit i {
    letter-spacing: 1.4px;
    font-size: 9px;
  }

  .pc-arena-clock.is-plain {
    padding: 18px 6px;
    justify-content: center;
  }

  .pc-arena-clocknote {
    text-align: center;
    margin: 10px 0 24px 0 !important;
  }

  .pc-arena-stage { min-height: 200px; }
  .pc-arena-stats { gap: 22px; margin-top: 28px; }
  .pc-arena-actions { gap: 12px; }
  .pc-arena-cta,
  .pc-arena-link { font-size: 13.5px; letter-spacing: 1.3px; padding: 14px 22px; }
}

@media (prefers-reduced-motion: no-preference) {
  .pc-arena-dot {
    animation: pcArenaPulse 2.4s ease-in-out infinite;
  }

  /* Das Lauflicht sitzt jetzt am Rahmen, nicht mehr an der Trennlinie.
     Die Linie bleibt als ruhige Trennung stehen. */

  .primecup-arena-section .pc-arena-eyebrow,
  .primecup-arena-section .pc-arena-claim,
  .primecup-arena-section .pc-arena-sub,
  .primecup-arena-section .pc-arena-rule {
    animation: pcArenaRise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }

  .primecup-arena-section .pc-arena-claim { animation-delay: 0.08s; }
  .primecup-arena-section .pc-arena-sub { animation-delay: 0.16s; }
  .primecup-arena-section .pc-arena-rule { animation-delay: 0.24s; }

  .primecup-arena-section.is-ready .pc-arena-stage,
  .primecup-arena-section.is-ready .pc-arena-stats {
    animation: pcArenaRise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
}

@keyframes pcArenaPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

@keyframes pcArenaSweep {
  0%, 62% { left: -35%; opacity: 0; }
  68% { opacity: 0.85; }
  100% { left: 100%; opacity: 0; }
}

@keyframes pcArenaRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Ablauf in vier Schritten ---------- */

.primecup-steps-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 55px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.pc-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  width: 100%;
}

.pc-step {
  position: relative;
  padding: 22px 0 22px 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease;
}

.pc-step:hover {
  border-left-color: rgba(245, 213, 110, 0.75);
}

.pc-step-num {
  font-family: "droid-sans-mono", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--pc-muted);
  margin-bottom: 10px;
}

.pc-step.is-done {
  border-left-color: rgba(69, 217, 163, 0.6);
}

.pc-step.is-done .pc-step-num {
  color: var(--pc-green);
}

.pc-step h3 {
  font-family: var(--pc-font-page);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--pc-text) !important;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  margin: 0 0 9px 0 !important;
}

.pc-step p {
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
  margin: 0 0 12px 0 !important;
}

.pc-step p:last-child { margin-bottom: 0 !important; }

.pc-step strong {
  color: var(--pc-text);
  font-weight: var(--pc-weight-page);
}

.pc-step-action {
  display: block;
  margin-top: auto;
  padding-top: 4px;
}

.pc-step-link {
  display: inline-block;
  font-family: var(--pc-font-page);
  font-size: 11.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pc-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.pc-step-link:hover {
  opacity: 0.65;
  border-bottom-color: var(--pc-accent);
}

.pc-step-check {
  font-size: 13px;
  line-height: 1;
}

.pc-step-done {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pc-font-page);
  font-size: 11.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pc-green);
  margin-top: auto;
  padding-top: 4px;
}

.pc-steps-foot {
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
  margin: 26px 0 0 0 !important;
  text-align: center;
}

.pc-steps-foot a {
  color: var(--pc-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.pc-steps-foot a:hover { opacity: 0.65; }

/* ---------- Statuszeile je Spiel ---------- */

.pc-game-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 10px;
  color: var(--pc-muted);
}

.pc-game-status.is-live { color: var(--pc-green); }
.pc-game-status.is-soon { color: var(--pc-muted); }

.pc-game-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ---------- Hall of Fame ---------- */

.primecup-hof-head {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 20px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Derselbe Titel wie .facts-section-title, nur unter eigenem Namen: Der
   Hall-of-Fame-Kopf ist ein eigener Block und traegt seine Ueberschrift
   nicht in derselben Klasse. Die Werte sind bewusst dieselben - zwei
   Abschnittstitel, die verschieden aussehen, waeren zwei Bausteine. */
.pc-hof-title,
.pc-hof-title span {
  font-family: "droid-sans-mono", monospace !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--pc-gold) !important;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  margin: 0 !important;
  display: block;
}

/* Altbestand: Die Beschreibung unter dem Titel ist mit Body_v5 aus der
   Seite verschwunden, Robert wollte sie weg. Die Regel bleibt fuer
   Body_v4 stehen - Plugin und Seitenfassung werden getrennt eingespielt,
   und zwischen den beiden Schritten stuende der Absatz sonst unformatiert
   in der Groesse des Themes da. Dieselbe Ueberlegung wie bei
   #pcPrimyMobilInfo seit 6.72.0. */
.pc-hof-sub {
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
  text-align: left;
  margin: 10px 0 0 0 !important;
  max-width: 620px;
}

@media (max-width: 768px) {
  .primecup-steps-section { margin-bottom: 40px; padding: 0 10px; }
  .pc-steps-grid { gap: 14px; }
  .pc-step { padding: 18px 0 18px 16px; }
  .primecup-hof-head { padding: 0 10px; margin-bottom: 16px; }
  .pc-hof-title, .pc-hof-title span { font-size: 12px; letter-spacing: 1.6px; }
}

@media (prefers-reduced-motion: no-preference) {

}

/* ---------- Hall of Fame: Podestkarten ---------- */

/* VIER KARTEN SEIT 6.99.0, eine je Top-100-Liste des Leaderboards.
 *
 * minmax(260px, 1fr) statt 300: Mit vier Karten und 300 Pixeln
 * Mindestbreite passten in 1160 Pixel Inhalt nur drei nebeneinander, und
 * die vierte stuende allein in einer zweiten Reihe. Gerechnet:
 * vier Karten zu 260 plus drei Luecken zu 20 sind 1100 - das geht auf.
 *
 *   ab 1200 px Fenster   vier Karten zu 275
 *   ab  880 px           zwei mal zwei
 *   darunter             untereinander
 */
.pc-hof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 55px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Rundum dieselbe Polsterung, seit 6.99.0. Sie ist die Bezugsgroesse fuer
   den Abstand ueber dem Verweis am Fuss der Karte, siehe .pc-hof-more;
   mit 22 unten und 26 oben waere er nicht symmetrisch. */
.pc-hof-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--pc-gold);
  background: rgba(255, 255, 255, 0.025);
  box-sizing: border-box;
  overflow: hidden;
}

.pc-hof-card.is-prize { border-top-color: var(--pc-gold); }
.pc-hof-card.is-wins { border-top-color: var(--pc-live); }
.pc-hof-card.is-roulette { border-top-color: var(--pc-accent); }
.pc-hof-card.is-bird { border-top-color: var(--pc-info); }

/* ---------- Die Karte als Verweis ----------
 *
 * Seit 6.99.0 fuehrt jede Karte in ihre Top-100-Liste. Sie bleibt ein
 * article und bekommt vom Skript eine Rolle und einen Zuhoerer; ein Umbau
 * zum a-Element wuerde ihren Inhalt wegwerfen, und den fuellt das Skript.
 *
 * KEINE BEWEGUNG BEIM UEBERFAHREN. Ein Anheben oder ein Schatten liesse
 * die Karte springen, und daneben stuenden drei stille - genau davor warnt
 * der Kommentar an .pc-ah-karte seit 6.77.0, und genau daran ist die
 * Shop-Karte mit 6.84.0 gescheitert. Es antworten Grund, Rand und der
 * Pfeil, und keins davon bewegt etwas.
 *
 * Die Zustandsliste traegt NUR, was das Theme sonst ueberschreibt. Alles,
 * was eine Medienabfrage spaeter neu setzt, steht in einer eigenen
 * schlichten Regel - sonst verloere es in dem Augenblick, in dem der
 * Finger die Karte beruehrt (6.55.2). */
.pc-hof-card.is-link {
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pc-hof-card.is-link:hover,
.pc-hof-card.is-link:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.28);
  outline: none;
}

/* Der Weg in die Liste, BUENDIG AM UNTEREN RAND jeder Karte.
 *
 * margin-top: auto schiebt ihn nach unten; im Flex-Behaelter bleibt der
 * Rest oben stehen. Damit tragen alle vier Karten ihn auf einer Linie,
 * auch wenn eine davon eine Zeile mehr hat - und eine hat sie, die
 * Teams-Karte mit ihrem Kapitaen.
 *
 * DER ABSTAND NACH OBEN IST DERSELBE WIE DER ZUM RAND, seit 6.99.0 auf
 * Roberts Vorgabe: 26 Pixel Polsterung oben in der Karte, 26 Pixel
 * zwischen dem Text darueber und diesem Verweis, 26 Pixel darunter bis zum
 * Rand. Deshalb steht an .pc-hof-card unten dieselbe 26 wie oben; bis
 * 6.98.0 waren es dort 22 und hier 16. */
.pc-hof-more {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 26px;
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--pc-muted);
  transition: color 0.2s ease;
}

.pc-hof-card.is-link:hover .pc-hof-more,
.pc-hof-card.is-link:focus-visible .pc-hof-more { color: var(--pc-gold); }

/* Der Pfeil rueckt beim Ueberfahren ein Stueck nach rechts. Er ist das
   einzige, was sich bewegt - und er ist klein genug, dass die Karte
   daneben still bleibt. */
.pc-hof-arrow {
  transition: transform 0.2s ease;
}

.pc-hof-card.is-link:hover .pc-hof-arrow { transform: translateX(3px); }

/* DER RUMPF FUELLT DIE KARTE AUS, und das ist tragend, keine Kosmetik.
 *
 * Der Verweis am Fuss traegt `margin-top: auto` und soll damit an den
 * unteren Rand rutschen. Auto-Abstaende verteilen aber nur den FREIEN
 * Platz ihres Flex-Behaelters, und das ist dieser Rumpf - nicht die Karte.
 * Ohne `flex: 1` ist er nur so hoch wie sein Inhalt, es gibt keinen freien
 * Platz, und der Verweis bleibt dort stehen, wo der Text aufhoert.
 *
 * Im Browser gemessen, vier Karten nebeneinander bei 1280 Pixeln: Alle
 * vier sind 311 Pixel hoch, aber der Verweis sass 27, 30, 123 und 123
 * Pixel ueber dem unteren Rand - je nachdem, wie viele Zeilen die Karte
 * traegt. Mit `flex: 1` sind es bei allen vier dieselben 26. */
.pc-hof-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pc-hof-card.is-empty { border-top-color: rgba(255, 255, 255, 0.2); }

.pc-hof-rank {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: "droid-sans-mono", monospace;
  font-size: 34px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  letter-spacing: -2px;
  pointer-events: none;
}

.pc-hof-label {
  display: block;
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--pc-gold);
  margin-bottom: 16px;
}

.pc-hof-card.is-wins .pc-hof-label { color: var(--pc-live); }
.pc-hof-card.is-empty .pc-hof-label { color: var(--pc-muted); }

/* DIE ZAHL IST SEIT 6.99.0 KLEINER, und das ist ein gemeldeter Befund:
   Robert hat gesehen, dass der Gewinn in der Roulette-Karte nicht mehr
   hineinpasst.
 *
 * Nachgerechnet: Bei vier Karten in einer Reihe ist die Karte 275 Pixel
 * breit, abzueglich zweimal 26 Pixel Polsterung bleiben 223 fuer den Text.
 * In droid-sans-mono misst ein Zeichen rund 0,6 der Schriftgroesse; bei
 * 44 Pixeln braucht "+123.456" damit 202 Pixel und steht am Rand an. Mit
 * 34 sind es 156, und selbst ein siebenstelliger Gewinn passt noch.
 *
 * Geaendert an EINER Stelle fuer alle vier Karten, so wie Robert es
 * verlangt hat: Vier Zahlen in vier Groessen waeren vier Bausteine. */
.pc-hof-value {
  display: block;
  font-family: "droid-sans-mono", monospace;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--pc-gold);
  margin-bottom: 6px;
}

.pc-hof-card.is-wins .pc-hof-value { color: var(--pc-live); }
.pc-hof-card.is-roulette .pc-hof-value { color: var(--pc-accent); }
.pc-hof-card.is-bird .pc-hof-value { color: var(--pc-info); }

/* DIE REIHENFOLGE IST SEIT 6.99.0 Wert, Erklaerung, Name - auf Roberts
   Vorgabe. Deshalb traegt die Erklaerung jetzt den unteren Abstand und der
   Name keinen mehr: Sie steht zwischen Zahl und Name, nicht mehr darunter. */
.pc-hof-name {
  display: block;
  font-family: var(--pc-font-page);
  font-size: 19px;
  font-weight: 700;
  color: var(--pc-text);
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;
}

.pc-hof-meta {
  display: block;
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.5;
  color: var(--pc-muted);
  margin-bottom: 10px;
}

/* Die zweite Zeile unter dem Namen. Bisher traegt sie nur die
   Teams-Karte, mit dem Kapitaen; sie steht trotzdem als eigener Baustein
   da, weil die drei uebrigen Karten sie ebenso bekommen koennen. */
.pc-hof-zweit {
  display: block;
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.5;
  color: var(--pc-muted);
  overflow-wrap: anywhere;
  margin-top: 3px;
}

.pc-hof-chase {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--pc-font-page);
  font-size: 11.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 0.6px;
  color: var(--pc-muted);
}

.pc-hof-chase strong {
  color: var(--pc-text);
  font-weight: var(--pc-weight-page);
}

.pc-hof-chase.is-alone { color: rgba(255, 255, 255, 0.32); }

.pc-hof-gap {
  font-family: "droid-sans-mono", monospace;
  font-size: 11px;
  color: var(--pc-warn);
  white-space: nowrap;
}

.pc-hof-none {
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
  margin: 0 !important;
}

/* Altbestand: Der Knopf "Komplettes Leaderboard" unter den Karten ist mit
   Body_v5 aus der Seite verschwunden - Robert wollte ihn weg, und seit
   6.99.0 fuehrt jede der vier Karten selbst in ihre Liste. Die Regel bleibt
   fuer Body_v4 stehen, damit der Knopf zwischen den beiden
   Einspielschritten nicht unformatiert dasteht. */
.pc-hof-foot {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 55px auto;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}

/* ---------- Team-Band ---------- */

.primecup-teamstrip-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 46px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.pc-teamstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.02);
  box-sizing: border-box;
}

.pc-strip-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 300px;
}

.pc-strip-eyebrow {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-strip-headline {
  font-family: var(--pc-font-page) !important;
  font-size: clamp(17px, 2.2vw, 22px) !important;
  font-weight: 700 !important;
  color: var(--pc-text) !important;
  letter-spacing: -0.3px;
  margin: 0 !important;
}

.pc-strip-sub {
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  line-height: 1.5;
  color: var(--pc-muted) !important;
  margin: 0 !important;
  max-width: 460px;
}

.pc-strip-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  box-sizing: border-box;
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pc-text) !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 14px 24px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pc-strip-action:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--pc-text);
  transform: translateY(-2px);
}

.pc-strip-teams {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 18px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.pc-strip-teams:empty { display: none; }

.pc-strip-team {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text) !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 7px 13px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.pc-strip-team:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
}

.pc-strip-name { overflow-wrap: anywhere; }

.pc-strip-size {
  font-family: "droid-sans-mono", monospace;
  font-size: 11.5px;
  color: var(--pc-gold);
}

.pc-strip-none {
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
}

.pc-strip-count {
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pc-muted);
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .pc-hof-grid { gap: 14px; padding: 0 10px; }

  /* Auch am Telefon rundum gleich, aus demselben Grund wie am Rechner:
     Der Abstand ueber dem Verweis am Fuss richtet sich danach. */
  .pc-hof-card { padding: 20px; }
  .pc-hof-more { padding-top: 20px; }
  .pc-hof-rank { font-size: 26px; top: 14px; right: 16px; }
  .pc-hof-foot { padding: 0 10px; margin-bottom: 40px; }

  .primecup-teamstrip-section { padding: 0 10px; margin-bottom: 34px; }

  .pc-teamstrip {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    gap: 16px;
  }

  .pc-strip-main { flex: 0 0 auto; width: 100%; }

  .pc-strip-action {
    width: 100%;
    max-width: 100%;
    padding: 14px 16px;
    margin: 0;
  }

  .pc-strip-teams {
    width: 100%;
    box-sizing: border-box;
    padding-top: 14px;
    margin-top: 0;
  }

  .pc-strip-count { margin-left: 0; }
}

/* ---------- Kurzinfo als Aufklappfeld ---------- */

.pc-arena-details {
  max-width: 640px;
  margin: 0 0 4px 0;
}

.pc-arena-summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  list-style: none;
  cursor: pointer;
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pc-muted);
  padding: 6px 0;
  transition: color 0.2s ease;
}

.pc-arena-summary::-webkit-details-marker { display: none; }
.pc-arena-summary::marker { content: ""; }

.pc-arena-summary:hover { color: var(--pc-text); }

.pc-arena-summary-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.pc-arena-details[open] .pc-arena-summary { color: var(--pc-text); }

.pc-arena-details[open] .pc-arena-summary-icon {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.pc-arena-details .pc-arena-sub {
  margin: 8px 0 20px 0 !important;
  padding-left: 0;
  border-left: none;
}

@media (max-width: 768px) {
  .pc-arena-summary { font-size: 11.5px; letter-spacing: 1.2px; }
}

/* ---------- Zeitkapsel auf sehr schmalen Geräten ---------- */

@media (max-width: 400px) {
  .pc-arena-clock { padding: 13px 3px 11px 3px; }
  .pc-arena-unit b { font-size: 25px; }
  .pc-arena-unit i { font-size: 8.5px; letter-spacing: 1px; }
}

/* ---------- Spielkarten führen zur Turnierseite ---------- */

.pc-home-game-card.is-clickable {
  cursor: pointer;
}

.pc-home-game-card.is-clickable:focus-visible {
  outline: 2px solid var(--pc-gold);
  outline-offset: 3px;
}

.pc-home-game-card.is-clickable .pc-game-overlay::after {
  content: "Turniere ansehen";
  display: block;
  margin-top: 12px;
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pc-gold);
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

body.lang-us .pc-home-game-card.is-clickable .pc-game-overlay::after {
  content: "View tournaments";
}

.pc-home-game-card.is-clickable:hover .pc-game-overlay::after {
  opacity: 1;
}

/* ---------- Farbwahl der Startseiten-Kacheln ---------- */

.teaser-tag.pc-teaser-text,
.teaser-avatar-wrap.pc-teaser-text { color: var(--pc-text); border-color: var(--pc-text); }

.teaser-tag.pc-teaser-gold,
.teaser-avatar-wrap.pc-teaser-gold { color: var(--pc-gold); border-color: var(--pc-gold); }

.teaser-tag.pc-teaser-info,
.teaser-avatar-wrap.pc-teaser-info { color: var(--pc-info); border-color: var(--pc-info); }

.teaser-tag.pc-teaser-accent,
.teaser-avatar-wrap.pc-teaser-accent { color: var(--pc-accent); border-color: var(--pc-accent); }

.teaser-tag.pc-teaser-live,
.teaser-avatar-wrap.pc-teaser-live { color: var(--pc-live); border-color: var(--pc-live); }

.teaser-tag.pc-teaser-warn,
.teaser-avatar-wrap.pc-teaser-warn { color: var(--pc-warn); border-color: var(--pc-warn); }

.teaser-tag.pc-teaser-rank,
.teaser-avatar-wrap.pc-teaser-rank { color: var(--pc-rank); border-color: var(--pc-rank); }

.teaser-tag.pc-teaser-muted,
.teaser-avatar-wrap.pc-teaser-muted { color: var(--pc-muted); border-color: var(--pc-muted); }

/* Warum keine zusaetzliche Regel gegen .team-tag?
   Beide Selektoren sind gleich gewichtet (zwei Klassen). Bei Gleichstand
   entscheidet die Reihenfolge, und diese Regeln stehen weiter unten -
   die Farbwahl setzt sich also von selbst durch. */