:root {
  --pc-edge: 10px;
  --pc-width: 70%;
  --pc-max: 1200px;
  --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-user-section {
  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;
}

.pc-user-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;
  padding: 32px 0 32px 28px !important;
  margin: 0 0 24px 0 !important;
  box-sizing: border-box;
}

.pc-user-card::before,
.pc-user-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;
}

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

.pc-card-tight {
  padding: 24px 0 24px 28px !important;
}

.pc-loading-card {
  text-align: center;
  padding: 40px 0 !important;
}

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

.pc-user-eyebrow {
  display: block;
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pc-accent);
  margin-bottom: 12px;
}

.pc-eyebrow-warn { color: var(--pc-warn); }

.pc-eyebrow-profile {
  color: var(--pc-rank);
  margin-bottom: 0;
}

.pc-user-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* ---------- Titel und Beschreibung: NUR im Profilbereich ----------
 *
 * Die beiden Regeln standen bis 6.60.1 ohne Umgebung da und trafen damit
 * auch die Stats-Seite. Die lädt account.css mit (sie nutzt dieselben
 * Karten), und zwar NACH app.css: Bei gleicher Genauigkeit gewinnt die
 * spätere Regel, und der Kopf der Stats-Seite sah dadurch anders aus als
 * der von Spiele, Turniere, Leaderboard und Teams. Im Browser gemessen:
 * 12 Pixel mehr Abstand unter dem Titel (dadurch saß der Info-Aufklapper
 * tiefer), grau statt gold, und 36 statt 42 Pixel groß.
 *
 * Die Umgebung trennt beide Seiten sauber: Auf der Stats-Seite steht der
 * Kopf AUSSERHALB von .primecup-user-section, im Profil steht jeder Titel
 * darin. Auf der Profilseite lädt app.css gar nicht, dort ändert sich
 * nichts.
 */
.primecup-user-section .pc-page-title {
  font-family: var(--pc-font-page);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: var(--pc-weight-page);
  color: var(--pc-text) !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.pc-title-welcome {
  margin-top: 12px !important;
  margin-bottom: 6px !important;
}

.pc-name-accent { color: var(--pc-rank); }

.pc-email-value { color: var(--pc-text); }

/* Dieselbe Begrenzung wie am Titel darüber, und aus demselben Grund. Sie
   fiel bisher nicht auf, weil die Beschreibung auf der Stats-Seite im
   Aufklappbereich steht und `.pc-head-details .pc-description` in site.css
   genauer ist. Eine Regel, die nur durch Zufall nicht greift, bleibt eine
   Falle für die nächste Seitenfassung. */
.primecup-user-section .pc-description {
  font-family: var(--pc-font-page);
  font-size: 14px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
  margin: 0 !important;
  line-height: 1.6;
}

.pc-user-subtitle {
  font-family: var(--pc-font-page);
  font-size: 16px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 36px 0 16px 0 !important;
}

.pc-subtitle-spaced {
  margin-top: 40px !important;
}

.pc-user-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pc-form-flush {
  margin-top: 0;
}

.pc-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pc-form-group label {
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pc-form-group input,
.pc-form-group input[type="text"],
.pc-form-group input[type="password"],
.pc-form-group input[type="email"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--pc-line) !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
  color: var(--pc-text) !important;
  font-family: var(--pc-font-page) !important;
  font-size: 14px !important;
  font-weight: var(--pc-weight-page) !important;
  outline: none !important;
  width: 100% !important;
  max-width: 420px;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
}

/* Ein Aufklappmenü sieht aus wie ein Eingabefeld.
 *
 * Bis 6.64.0 gab es dafür GAR KEINE Regel. Die Zeitzone erbte damit allein
 * die Vorgaben des Themes: über die volle Breite, ohne Rand, ohne
 * Hintergrund, in anderer Schrift. Zwischen den drei Textfeldern darüber
 * stand es wie ein Fremdkörper.
 *
 * Die Werte sind dieselben wie an `.pc-form-group input` darüber. Sie
 * stehen NICHT in derselben Selektorliste, sondern in einer eigenen Regel:
 * Ein <select> braucht zusätzlich `appearance`, einen eigenen Pfeil und
 * `color-scheme`, und eine Liste mit Ausnahmen für die Hälfte der Werte
 * wäre schwerer zu lesen als zwei getrennte Regeln.
 *
 * `background-color` und `background-image` getrennt statt im Shorthand:
 * `background: … !important` an der Regel darüber setzt auch
 * `background-image: none`, und ein Shorthand hier würde den Pfeil beim
 * nächsten Blick auf die Kaskade zum Rätsel machen.
 *
 * Der Pfeil entsteht aus zwei Verläufen, nicht aus einem Bild: Ein <select>
 * kann kein ::after tragen, und eine Grafik wäre eine Datei mehr für ein
 * Dreieck aus sechs Pixeln.
 *
 * `color-scheme: dark` ist tragend, keine Kosmetik: Das aufgeklappte Menü
 * zeichnet das Betriebssystem, nicht die Seite. Ohne diese Zeile steht auf
 * einem hellen System weiße Schrift auf weißem Grund. */
.pc-form-group select {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color-scheme: dark;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pc-muted) 50%),
    linear-gradient(135deg, var(--pc-muted) 50%, transparent 50%) !important;
  background-position: calc(100% - 20px) center, calc(100% - 15px) center !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  border: 1px solid var(--pc-line) !important;
  border-radius: 4px !important;
  /* Rechts mehr Platz, sonst läuft ein langer Wert unter den Pfeil. */
  padding: 12px 38px 12px 14px !important;
  color: var(--pc-text) !important;
  font-family: var(--pc-font-page) !important;
  font-size: 14px !important;
  font-weight: var(--pc-weight-page) !important;
  outline: none !important;
  width: 100% !important;
  max-width: 420px;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: border-color 0.2s ease !important;
}

/* Rückfall für Browser, die color-scheme nicht auswerten. */
.pc-form-group select option {
  background-color: var(--pc-surface);
  color: var(--pc-text);
}

.pc-form-group input:focus,
.pc-form-group select:focus {
  border-color: var(--pc-accent) !important;
}

.pc-user-btn {
  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;
  align-self: flex-start;
  margin-top: 6px;
}

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

.pc-user-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed !important;
  border-bottom-color: var(--pc-muted) !important;
}

.pc-user-btn-warn {
  border-bottom-color: var(--pc-warn) !important;
}

.pc-feedback {
  display: none;
  margin-top: 10px;
  padding: 10px 14px;
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  border-radius: 4px;
  line-height: 1.5;
  max-width: 420px;
}

.pc-feedback.success {
  display: block;
  background: rgba(69, 217, 163, 0.1);
  border: 1px solid var(--pc-live);
  color: var(--pc-live);
}

.pc-feedback.error {
  display: block;
  background: rgba(250, 67, 122, 0.1);
  border: 1px solid var(--pc-accent);
  color: var(--pc-accent);
}

.pc-feedback.pending {
  display: block;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--pc-line);
  color: var(--pc-muted);
}

.pc-logout-link {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--pc-warn) !important;
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transform: none !important;
  transition: color 0.2s ease, opacity 0.2s ease;
  padding: 0 !important;
  white-space: nowrap;
}

.pc-logout-link:hover {
  background: none !important;
  color: var(--pc-warn) !important;
  opacity: 0.7;
  transform: none !important;
}

.pc-user-nav-links {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
}

.pc-user-nav-links p {
  margin: 0 !important;
}

.pc-user-nav-links a {
  color: var(--pc-text);
  text-decoration: none;
  border-bottom: 1px solid var(--pc-text);
  padding-bottom: 2px;
  transition: opacity 0.2s ease;
}

.pc-user-nav-links a:hover {
  opacity: 0.6;
}

.pc-subtle-link {
  color: var(--pc-muted) !important;
  border-bottom-color: var(--pc-muted) !important;
}

.pc-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

.pc-node-card {
  padding: 24px 0 24px 24px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-prize-node {
  grid-column: 1 / -1;
}

.node-id {
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-accent);
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.node-id-live { color: var(--pc-live); }
.node-id-warn { color: var(--pc-warn); }
.node-id-rank { color: var(--pc-rank); }
.node-id-accent { color: var(--pc-accent); }
.node-id-muted { color: var(--pc-muted); }

.node-title {
  font-family: var(--pc-font-page);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: var(--pc-weight-page);
  color: var(--pc-text);
  margin: 0 0 6px 0;
  letter-spacing: -0.4px;
}

.node-title-live { color: var(--pc-live); }
.node-title-warn { color: var(--pc-warn); }
.node-title-rank { color: var(--pc-rank); }
.node-title-accent { color: var(--pc-accent); }
.node-title-muted { color: var(--pc-muted); }

.node-meta {
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
}

.pc-prize-value { color: var(--pc-text); }

.pc-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pc-history-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pc-line);
  font-family: var(--pc-font-page);
  font-size: 13.5px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text);
  background: none !important;
}

.pc-history-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pc-history-id {
  display: block;
  color: var(--pc-muted);
  font-size: 12.5px;
  letter-spacing: 0;
  margin-top: 4px;
}

.pc-history-team {
  display: block;
  color: var(--pc-muted);
  font-size: 12.5px;
  margin-top: 4px;
}

.pc-history-lobby {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 2px solid var(--pc-live);
  background: rgba(69, 217, 163, 0.07);
}

.pc-history-lobby-title {
  display: block;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pc-live);
  margin-bottom: 6px;
}

.pc-history-lobby-row {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  color: var(--pc-muted);
  line-height: 1.7;
}

.pc-history-lobby-row strong {
  color: var(--pc-text);
  font-family: "droid-sans-mono", monospace;
  letter-spacing: 0.5px;
  overflow-wrap: anywhere;
}

.pc-history-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pc-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 2px;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

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

.pc-history-champion {
  color: var(--pc-warn);
  margin-left: 8px;
  letter-spacing: 1px;
  font-size: 11px;
  text-transform: uppercase;
}

.pc-history-state {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.pc-history-state.is-active { color: var(--pc-live); }
.pc-history-state.is-done { color: var(--pc-muted); }
.pc-history-state.is-pending { color: var(--pc-warn); }

@media (max-width: 1100px) {
  .primecup-user-section {
    width: 88%;
  }

  .pc-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .pc-stat-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pc-user-card {
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 0 !important;
    padding: 22px 16px !important;
  }

  /* Steht im Feld nur ein Hinweis, erzeugt dessen Rand nach unten leeren
     Raum: Es folgt ja nichts mehr. Auf schmalen Bildschirmen faellt das
     als zu grosser Kasten auf. */
  .pc-user-card .pc-pn-note:last-child {
    margin-bottom: 0 !important;
  }

  .pc-user-card:has(> .pc-pn-note:only-child) {
    padding: 16px !important;
  }

  .pc-user-card::before,
  .pc-user-card::after {
    display: none !important;
  }

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

  /* Begrenzt wie die Regel oben: Der Kopf der Stats-Seite holt seine
     Schriftgröße am Telefon aus app.css und soll dort dieselbe haben wie
     auf den übrigen Seiten. */
  .primecup-user-section .pc-page-title {
    font-size: 26px;
  }

  .pc-history-list li {
    flex-direction: column;
    gap: 6px;
  }
}

.pc-vis-note {
  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: 0 0 16px 0 !important;
  max-width: 620px;
}

/* .pc-vis-switch war bis 6.63.0 die Hülle um ein Häkchen. Seit 6.64.0 sind
   die beiden Schalter Regler (window.pcRegler, Regeln in site.css), und die
   Klasse gibt es nicht mehr. Der Abstand nach unten stand an ihr und muss
   deshalb an die Reglerzeile in diesem Bereich. */
#pc_visibility_zone .pc-reglerzeile {
  margin-bottom: 22px;
  max-width: 520px;
}

.pc-vis-preview {
  border: 1px solid var(--pc-line);
  padding: 12px 14px;
  margin-bottom: 20px;
  max-width: 420px;
  box-sizing: border-box;
}

.pc-vis-caption {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pc-muted);
  margin-bottom: 10px;
}

.pc-vis-row.is-me {
  border-left: 2px solid var(--pc-accent);
  padding-left: 8px;
  margin-left: -10px;
}

.pc-vis-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  color: var(--pc-text);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pc-vis-row:last-child { border-bottom: none; }

.pc-vis-rank {
  color: var(--pc-muted);
  width: 16px;
  flex-shrink: 0;
}

.pc-vis-name {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.pc-vis-row.is-hidden .pc-vis-name {
  color: var(--pc-muted);
  font-style: italic;
}

.pc-vis-stats {
  color: var(--pc-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.pc-vis-fair {
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
  margin: 0 0 8px 0 !important;
  padding: 12px 14px;
  border-left: 2px solid var(--pc-warn);
  background: rgba(252, 121, 56, 0.07);
  max-width: 620px;
}

.pc-vis-fair strong { color: var(--pc-warn); }

/* ---------- Zweiter Schalter: die Zahlen ----------
   Er steht unter dem Namensschalter und wird durch eine Linie davon
   getrennt, weil er eine eigene Entscheidung ist. Gesperrt ist er nur,
   solange die Anonymisierung ihn ohnehin erzwingt; dann muss auch sichtbar
   sein, dass hier gerade nichts zu waehlen ist. */

/* Der zweite Schalter steht unter dem ersten und wird durch eine Linie davon
   getrennt, weil er eine eigene Entscheidung ist. Die Klasse sitzt seit
   6.64.0 an einer Hülle um den Regler, nicht mehr am Label selbst: Der
   Regler kommt aus site.css und soll dort unverändert bleiben.

   Ein eigener `:disabled`-Zweig ist nicht mehr nötig, das leistet
   `input:disabled + .pc-slider` in site.css für alle Regler gleich. Damit
   entfällt auch die `:has()`-Regel, die auf älteren Browsern ausfiel. */
.pc-vis-switch-stats {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--pc-line);
}

@media (max-width: 768px) {
  .pc-vis-preview { max-width: 100%; }
}

.pc-2fa-state {
  font-family: var(--pc-font-page);
  font-size: 14px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted) !important;
  margin: 0 0 8px 0 !important;
}

.pc-2fa-state strong { color: var(--pc-text); }

.pc-2fa-note {
  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: 0 0 16px 0 !important;
  max-width: 560px;
}

.pc-2fa-note strong { color: var(--pc-text); }

.pc-2fa-warn {
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  color: var(--pc-warn) !important;
  margin: 0 0 14px 0 !important;
  padding-left: 10px;
  border-left: 2px solid var(--pc-warn);
}

.pc-2fa-label {
  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-accent);
  margin: 18px 0 8px 0;
}

.pc-2fa-setup {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.pc-2fa-qr {
  background: #FFFFFF;
  padding: 10px;
  line-height: 0;
  flex-shrink: 0;
}

/* qr.js laeuft auf Konto und Registrierung und legt sein SVG beide Male in
   dieselbe Huelle. Die Groessenregel stand aber nur in register.css, und die
   Kontoseite laedt die nie. Ohne sie zeichnet der Browser das SVG in seiner
   Eigengroesse, und die haengt an der Laenge der otpauth-Adresse, also am
   Kontonamen. */
.pc-2fa-qr svg { display: block; width: 168px; height: 168px; }

@media (max-width: 620px) {
  .pc-2fa-qr svg { width: 140px; height: 140px; }
}

.pc-2fa-steps {
  flex: 1 1 300px;
  min-width: 0;
}

.pc-2fa-steps .pc-2fa-label:first-child { margin-top: 0; }

.pc-2fa-secret {
  font-family: "droid-sans-mono", monospace;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--pc-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--pc-line);
  padding: 10px 12px;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

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

.pc-2fa-applink:hover { opacity: 0.65; }

.pc-rec-box {
  border-left: 2px solid var(--pc-warn);
  background: rgba(252, 121, 56, 0.07);
  padding: 14px 16px;
}

.pc-rec-box .pc-2fa-label { color: var(--pc-warn); margin-top: 0; }

.pc-rec-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
}

.pc-rec-code {
  font-family: "droid-sans-mono", monospace;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--pc-text);
}

.pc-user-btn-plain {
  border-bottom-color: var(--pc-muted) !important;
  color: var(--pc-muted) !important;
  margin-left: 20px;
}

@media (max-width: 768px) {
  .pc-2fa-setup { gap: 18px; }
  .pc-rec-list { grid-template-columns: 1fr; }
  .pc-user-btn-plain { margin-left: 0; margin-top: 14px; display: block; }
}

/* ---------- Meine Teams ---------- */

.pc-teams-note {
  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: 0 0 16px 0 !important;
  max-width: 620px;
}

.pc-teams-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}

.pc-teams-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 13px 0;
  border-bottom: 1px solid var(--pc-line);
}

.pc-teams-item:last-child { border-bottom: none; }

.pc-teams-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pc-teams-name {
  font-family: var(--pc-font-page);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--pc-text) !important;
  text-decoration: none !important;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
  transition: opacity 0.2s ease;
}

.pc-teams-name:hover { opacity: 0.68; }

.pc-teams-tag {
  display: inline-block;
  margin-left: 9px;
  font-family: "droid-sans-mono", monospace;
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--pc-gold);
}

.pc-teams-meta {
  font-family: var(--pc-font-page);
  font-size: 12px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
}

.pc-teams-meta strong { color: var(--pc-text); font-weight: var(--pc-weight-page); }
.pc-teams-sep { color: rgba(255, 255, 255, 0.25); margin: 0 8px; }

.pc-teams-lead {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pc-accent);
  margin-top: 2px;
}

.pc-teams-link {
  font-family: var(--pc-font-page);
  font-size: 10.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;
  flex-shrink: 0;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

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

/* ---------- Offene Team-Einladungen ----------
   Sitzt ueber der Teamliste und traegt Orange, weil es eine Entscheidung
   verlangt und die Liste darunter nur berichtet. */

.pc-teaminv {
  margin: 0 0 22px 0;
  padding: 0 0 18px 0;
  border-bottom: 1px solid var(--pc-line);
}

.pc-teaminv-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px 0 !important;
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--pc-warn) !important;
}

.pc-teaminv-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border: 1px solid rgba(252, 121, 56, 0.35);
  background: rgba(252, 121, 56, 0.08);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--pc-warn);
}

.pc-teaminv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--pc-line);
}

.pc-teaminv-item:last-child { border-bottom: none; }

.pc-teaminv-name {
  font-family: var(--pc-font-page);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--pc-warn);
  overflow-wrap: anywhere;
}

/* Absender und Zeitpunkt. Eine Stufe leiser als die Rolle darueber: Die
   Rolle entscheidet, die Herkunft ordnet nur ein. */
.pc-teaminv-von {
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  color: rgba(142, 146, 153, 0.75);
}

.pc-teaminv-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Der kleine Knopf ist derselbe wie pc-user-btn, nur schmaler. Mit
   !important, weil die Grundregel es ebenfalls traegt.

   Die Zeilenhoehe steht ausdruecklich da: Zwei der drei Knoepfe in der
   Einladungszeile sind <button>, der dritte ("Team ansehen") ist ein <a>.
   Ein Knopf bekommt seine Zeilenhoehe vom Browser, ein Verweis erbt sie -
   ohne diesen Wert waeren die drei unterschiedlich hoch und stuenden
   nebeneinander auf verschiedenen Linien. */
.pc-btn-small,
.pc-btn-small:hover,
.pc-btn-small:focus {
  padding: 8px 14px !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  width: auto !important;
  display: inline-block !important;
}

/* ---------- Laufende Turnieranmeldungen ---------- */

.pc-turnier-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--pc-line);
}

.pc-turnier-item:last-child { border-bottom: none; }

.pc-turnier-item .pc-t-leave {
  align-items: flex-start;
  text-align: left;
  margin: 0;
  max-width: 420px;
}

@media (max-width: 620px) {
  .pc-teaminv-actions { width: 100%; }
  .pc-turnier-item .pc-t-leave { max-width: 100%; }
}

/* ---------- Turnier verlassen ---------- */

.pc-leave-btn,
.pc-leave-btn:focus,
.pc-leave-btn:active,
.pc-leave-cancel,
.pc-leave-cancel:focus,
.pc-leave-cancel:active {
  display: inline-block;
  background: none !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 7px 12px !important;
  margin: 0 8px 0 0 !important;
  color: var(--pc-muted) !important;
  font-family: var(--pc-font-page) !important;
  font-size: 10.5px !important;
  font-weight: var(--pc-weight-page) !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transform: none !important;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

.pc-leave-btn:hover,
.pc-leave-cancel:hover {
  background: none !important;
  color: var(--pc-text) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: none !important;
}

.pc-leave-btn.is-armed {
  color: #FFFFFF !important;
  border-color: var(--pc-accent) !important;
  background: rgba(250, 67, 122, 0.16) !important;
  font-weight: 700 !important;
}

.pc-leave-btn.is-armed:hover {
  background: rgba(250, 67, 122, 0.26) !important;
  border-color: var(--pc-accent) !important;
}

.pc-leave-note,
.pc-leave-locked {
  display: block;
  margin-top: 8px;
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 0.6px;
  color: var(--pc-muted);
  line-height: 1.5;
}

.pc-leave-locked { color: var(--pc-warn); }

.pc-t-leave,
.pc-history-leave {
  display: block;
  margin: 12px 0 4px 0;
}

/* ---------- Profil löschen ---------- */

.pc-danger-box {
  padding: 20px 22px;
  border: 1px solid rgba(250, 67, 122, 0.3);
  background: rgba(250, 67, 122, 0.04);
  box-sizing: border-box;
}

.pc-danger-box.is-armed,
.pc-danger-box.is-active {
  border-color: var(--pc-accent);
  background: rgba(250, 67, 122, 0.09);
}

.pc-danger-label {
  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-accent);
  margin-bottom: 12px;
}

.pc-danger-clock {
  font-family: "droid-sans-mono", monospace;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--pc-accent);
  margin-bottom: 12px;
}

.pc-danger-note {
  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: 0 0 16px 0 !important;
  max-width: 620px;
}

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

.pc-user-btn-danger {
  color: var(--pc-accent) !important;
  border-bottom-color: var(--pc-accent) !important;
}

.pc-user-btn-danger:hover {
  color: var(--pc-accent) !important;
  opacity: 0.7;
}

.pc-danger-box .pc-form-group {
  max-width: 320px;
  margin-bottom: 16px;
}

/* ---------- Check-in ---------- */

.pc-checkin {
  display: block;
  margin: 12px 0;
}

.pc-checkin-btn,
.pc-checkin-btn:focus,
.pc-checkin-btn:active {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(69, 217, 163, 0.1) !important;
  background-color: rgba(69, 217, 163, 0.1) !important;
  border: 1px solid var(--pc-live) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  color: var(--pc-live) !important;
  font-family: var(--pc-font-page) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.pc-checkin-btn:hover:not([disabled]) {
  background: rgba(69, 217, 163, 0.2) !important;
  transform: none !important;
}

.pc-checkin-btn.is-locked,
.pc-checkin-btn.is-locked:focus {
  background: none !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--pc-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.75;
}

.pc-checkin-btn.is-done,
.pc-checkin-btn.is-done:focus {
  background: rgba(69, 217, 163, 0.16) !important;
  border-color: var(--pc-live) !important;
  color: var(--pc-live) !important;
  cursor: default !important;
}

.pc-checkin-btn[disabled] { pointer-events: auto; }

.pc-checkin-hint {
  display: block;
  margin-top: 7px;
  font-family: var(--pc-font-page);
  font-size: 11.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.5;
  letter-spacing: 0.4px;
  color: var(--pc-muted);
  max-width: 460px;
}

/* Nach einem erfolgreichen Check-in traegt der Hinweis die Bestaetigung
   des Servers, siehe ciSenden() in site.js. Nur die Farbe, und Gruen ist
   in diesem Projekt die Farbe der Bestaetigung.

   EINE EIGENE REGEL, KEINE ZUSTANDSLISTE: Was spaeter je nach Zustand neu
   gesetzt wird, verloere in einer Liste mit :hover genau in dem
   Augenblick, in dem ein Finger die Zeile beruehrt. */
.pc-checkin-hint.is-done { color: var(--pc-live); }

.pc-checkin .pc-feedback {
  display: none;
  margin-top: 9px;
  padding: 8px 12px;
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  line-height: 1.5;
  max-width: 460px;
}

.pc-checkin .pc-feedback.success {
  display: block;
  background: rgba(69, 217, 163, 0.1);
  border-left: 2px solid var(--pc-live);
  color: var(--pc-live);
}

.pc-checkin .pc-feedback.error {
  display: block;
  background: rgba(250, 67, 122, 0.1);
  border-left: 2px solid var(--pc-accent);
  color: var(--pc-accent);
}

.pc-checkin .pc-feedback.pending {
  display: block;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--pc-muted);
}

.pc-history-checkin { display: block; margin-top: 10px; }

/* ---------- Discord-Name ---------- */

.pc-discord-note {
  margin: 0 0 16px 0 !important;
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
  max-width: 620px;
}

.pc-discord-note strong { color: var(--pc-warn); font-weight: var(--pc-weight-page); }

#pc_discord_zone.pc-discord-missing .pc-form-group input {
  border-color: rgba(252, 121, 56, 0.5) !important;
}

/* ---------- Spielaccounts und Zeitzone ----------
 *
 * DER BEREICH IST KEIN FORMULAR, und genau daran hat es gelegen.
 *
 * Die Abstände zwischen den Feldern eines Formulars kommen im Profil vom
 * `gap: 16px` an `.pc-user-form`. `#pc_fields_zone` ist aber ein schlichtes
 * <div>, das account.js füllt, und trug damit gar keinen Abstand: Das
 * Eingabefeld einer Angabe klebte unmittelbar an der Beschriftung der
 * nächsten, und der ganze Kasten las sich als eine einzige Wand.
 *
 * Dieselben 16 Pixel wie im Formular daneben, damit die beiden Bereiche
 * gleich aussehen. Der Hinweistext oben und der Speichern-Knopf unten sind
 * ebenfalls Kinder und bekommen denselben Abstand; das ist gewollt, im
 * Formular ist es genauso. */
#pc_fields_zone {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Der Hinweis oben hat eigene Abstände aus .pc-discord-note. Neben dem
   `gap` darüber wären das zwei Abstände übereinander. */
#pc_fields_zone .pc-discord-note {
  margin: 0 !important;
}

/* Der Knopf soll nicht über die ganze Breite laufen: Als Flex-Kind einer
   Spalte würde er sich sonst auf die Breite des Kastens strecken. */
#pc_fields_zone .pc-user-btn {
  align-self: flex-start;
}

#pc_discord_zone .pc-form-group { max-width: 340px; }

/* ---------- Spielername ---------- */

.pc-pn-note {
  margin: 0 0 16px 0 !important;
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted) !important;
  max-width: 640px;
}

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

.pc-pn-lock {
  margin: 0 0 14px 0 !important;
  font-family: var(--pc-font-page);
  font-size: 12px;
  font-weight: var(--pc-weight-page);
  line-height: 1.5;
  color: var(--pc-muted) !important;
  max-width: 520px;
}

.pc-pn-lock strong { color: var(--pc-warn); font-weight: var(--pc-weight-page); }

#pc_playername_zone .pc-form-group { max-width: 340px; }

#pc_playername_zone input[readonly] {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--pc-muted) !important;
  cursor: default;
}

/* ---------- Team-Kürzel ---------- */

.pc-tag-preview {
  margin: 0 0 16px 0 !important;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--pc-font-page);
  font-size: 16px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text) !important;
  max-width: 340px;
}

/* `#pc_playertag_zone .pc-form-group` und `#pc_playertag_zone select:disabled`
   sind mit 6.64.1 entfallen. Beide waren tot: Mit 6.64.0 ist die
   Auswahlliste im Kürzelbereich durch Regler ersetzt worden, und seither
   gibt es dort weder ein <select> noch eine .pc-form-group. Nachgezählt in
   account.js, der Bereich baut nur noch pcRegler() und die Farbknöpfe.
   Das Ausgrauen eines gesperrten Reglers steht in site.css an
   `input:disabled + .pc-slider` und gilt für alle Regler gleich. */

/* ---------- Farbwahl für das Kürzel ---------- */

.pc-tagcolor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px 0;
}

.pc-tagcolor-label {
  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-muted);
  margin-right: 4px;
}

.pc-tagcolor,
.pc-tagcolor:hover,
.pc-tagcolor:focus {
  background: rgba(255, 255, 255, 0.03) !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 7px 13px !important;
  margin: 0 !important;
  font-family: var(--pc-font-page) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  cursor: pointer !important;
  transform: none !important;
  transition: border-color 0.2s ease !important;
}

/* Die Knöpfe tragen einfache Farben, KEINE Verlaufsklassen.
   pc-nc-* setzt den Text auf durchsichtig und würde die Beschriftung
   zusammen mit dem Knopfhintergrund unsichtbar machen. */
.pc-tagcolor.is-silver  { color: #C6CBD4 !important; }
.pc-tagcolor.is-blue    { color: var(--pc-info) !important; }
.pc-tagcolor.is-green   { color: var(--pc-live) !important; }
.pc-tagcolor.is-red     { color: var(--pc-accent) !important; }
.pc-tagcolor.is-orange  { color: var(--pc-warn) !important; }
.pc-tagcolor.is-purple  { color: var(--pc-rank) !important; }
.pc-tagcolor.is-gold    { color: var(--pc-gold) !important; }
.pc-tagcolor.is-ruby    { color: #E0245E !important; }
.pc-tagcolor.is-diamond { color: #7FE3E8 !important; }
.pc-tagcolor.is-plain   { color: var(--pc-text) !important; }

.pc-tagcolor.is-rainbow {
  color: var(--pc-rank) !important;
}

.pc-tagcolor:hover { border-color: rgba(255, 255, 255, 0.34) !important; }

.pc-tagcolor.is-active {
  border-color: currentColor !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.pc-tagcolor:disabled {
  opacity: 0.4;
  cursor: default !important;
}

.pc-tag-preview .pc-ptag:empty { display: none; }

/* ---------- Die Kürzel-Regler ----------
   Seit 6.64.0 steht je eigenem Team ein Regler statt einer Auswahlliste,
   dieselbe Bedienung wie auf der Team-Seite. Der Regler selbst kommt aus
   site.css, hier steht nur, wie die Liste sitzt. */

.pc-tagregler-liste {
  margin: 0 0 14px 0;
  max-width: 520px;
}

/* Trennlinien zwischen den Zeilen, nicht darunter: Die letzte Zeile grenzt
   an den Fußtext, und zwei Linien untereinander wären eine zu viel. */
.pc-tagregler-liste .pc-reglerzeile + .pc-reglerzeile {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Der Zusatz in Klammern unter der Liste. Er gilt für ALLE Regler
   gemeinsam, deshalb steht er einmal am Fuß und nicht an jeder Zeile. */
.pc-regler-fuss {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--pc-font-page) !important;
  font-size: 11.5px !important;
  font-weight: var(--pc-weight-page) !important;
  line-height: 1.5 !important;
  color: var(--pc-muted) !important;
  margin: 8px 0 0 0 !important;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ---------- Abzeichen ----------
   Ein Raster statt einer Reihe: Zwanzig Kacheln nebeneinander wären auf
   jedem Gerät zu breit. auto-fill mit fester Mindestbreite füllt so viele
   Spalten, wie hineinpassen, ohne dass für jede Breite eine eigene Regel
   nötig wäre. */

.pc-avpick {
  display: grid;
  /* 84 statt der naheliegenden 92: Auf einem Telefon misst die Karte innen
     281 Pixel, und 3 mal 92 plus zwei Abstände passen dort nicht mehr
     hinein. Es blieben zwei Spalten und damit zehn Reihen. Im Browser
     nachgemessen. */
  /* 92 statt der 84 von 6.63.0: Die Grenze von 560 Pixeln ist mit 6.64.0
     gefallen, und ohne sie werden aus mehr Platz sonst nur mehr Spalten
     statt größerer Kacheln. Die 84 waren für die Mindestbreite AM TELEFON
     gerechnet, und dort gilt weiterhin der Zweig in der Medienabfrage unten
     mit eigenen 64 Pixeln. */
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin: 0 0 18px 0;

  /* Keine feste Grenze mehr.
     Bis 6.63.0 stand hier `max-width: 560px`, und die Kacheln nahmen damit
     auf dem Rechner nur die halbe Karte ein, obwohl daneben Platz war. Jetzt
     füllen sie die Breite der Karte. Am Telefon ändert das nichts: Dort
     greift die Medienabfrage bei 620 Pixeln, sie steht später in der Datei
     und gewinnt über die Reihenfolge. */
  max-width: 100%;
}

/* Rand und Grund stehen in der Zustandsliste MIT !important, und das muss
   so: base.css setzt `border: none !important` auf jedes button, um die
   Vorgaben des Themes abzuwehren. Eine schlichte Regel darunter verlöre
   dagegen, egal wie genau sie ist. Im Browser gemessen: ohne !important kam
   `0px none` heraus, der Kasten hatte gar keinen Rand.

   Was je nach Zustand wechselt, steht darunter in eigenen Regeln mit
   derselben Genauigkeit (0,2,0) und gewinnt über die Reihenfolge. Ein
   späterer Selektor mit NUR der Klasse würde dagegen in genau dem
   Augenblick verlieren, in dem der Finger den Knopf berührt. */
.pc-avpick-item,
.pc-avpick-item:hover,
.pc-avpick-item:focus,
.pc-avpick-item:active {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 12px 6px 10px 6px !important;
  margin: 0 !important;
  width: 100% !important;
  font-family: var(--pc-font-page) !important;
  font-weight: var(--pc-weight-page) !important;
  cursor: pointer !important;
  transform: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.pc-avpick-item:hover { border-color: rgba(255, 255, 255, 0.36) !important; }

.pc-avpick-item.is-active {
  border-color: var(--pc-gold) !important;
  background: rgba(245, 213, 110, 0.08) !important;
}

/* Gesperrtes wird nicht ausgeblendet, sondern mit Ziel gezeigt: Ein
   sichtbares Ziel motiviert, ein unsichtbares nicht. */
.pc-avpick-item.is-locked {
  opacity: 0.4;
  cursor: default !important;
}

/* In der Auswahl ist die Kachel selbst die Fassung. Der Kreis fällt deshalb
   weg, und der rechte Außenabstand aus base.css muss mit: In einer Spalte
   schöbe er das Bild aus der Mitte. Feste Pixel statt `em`, weil hier kein
   Name danebensteht, an dem sich das Maß orientieren könnte. */
.pc-avpick-item .pc-av-box {
  width: 52px;
  height: 52px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-right: 0;
  vertical-align: baseline;
}

.pc-avpick-name {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pc-muted);
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pc-avpick-item.is-active .pc-avpick-name { color: var(--pc-text); }

/* Am Telefon vier Spalten statt drei. Zwanzig Kacheln zu dritt sind sieben
   Reihen und damit ein halber Bildschirm für eine Nebensache; zu viert sind
   es fünf. Die Kachel schrumpft dafür mit, sonst wäre sie schmaler als ihr
   Inhalt. */
@media (max-width: 620px) {
  .pc-avpick {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
  }

  .pc-avpick-item,
  .pc-avpick-item:hover,
  .pc-avpick-item:focus,
  .pc-avpick-item:active {
    padding: 9px 3px 8px 3px !important;
    gap: 4px;
  }

  .pc-avpick-item .pc-av-box { width: 40px; height: 40px; }

  .pc-avpick-name { font-size: 8.5px; letter-spacing: 0.6px; }
}

/* Die Vorschau: Abzeichen und Name nebeneinander, so wie sie in der
   Spielerkarte übereinander stehen. Nebeneinander, weil hier der Vergleich
   mit der Auswahl darunter zählt, nicht die Bühne. */
.pc-avpick-preview {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* „Kein Abzeichen" steht linksbündig wie alles andere im Kasten.
   `.pc-user-btn-plain` bringt 20 Pixel linken Außenabstand mit, und das ist
   dort richtig: An den fünf anderen Stellen im Profil steht so ein Knopf
   direkt HINTER einem Hauptknopf („Speichern / Abbrechen"), der Abstand
   trennt die beiden. Hier steht er allein in seiner Zeile, und dieselben
   20 Pixel rückten ihn gegen Hinweistext, Vorschau und Auswahlraster ein.
   Im Browser gemessen: alles andere bei 0, der Knopf bei 20.

   Begrenzt auf diesen einen Bereich statt an der Klasse selbst geändert:
   Sonst rückten die fünf anderen Knöpfe an ihren Vorgänger heran. */
#pc_avatar_zone .pc-user-btn-plain {
  margin-left: 0;
}

/* Der Zusatz in Klammern hinter einem Feldtitel.
   Seit 6.64.0 steht die Hilfe zu den Spielaccounts dort statt unter dem
   Feld. Dieselbe Größe wie der Titel, nur gedämpft: Sie soll lesbar sein,
   aber den Titel nicht überlagern.

   Das leichtere Gewicht ist nötig, weil die Label im Profil fett gesetzt
   sind; ohne das stünde die Klammer ebenso fett wie der Titel und wäre
   optisch gleichrangig.

   KEINE GROSSBUCHSTABEN UND KEINE SPERRUNG, seit 6.64.1. Das Label bringt
   beides mit (`text-transform: uppercase`, `letter-spacing: 1px`), und für
   ein kurzes Titelwort ist das richtig. Ein ganzer Satz in gesperrten
   Großbuchstaben ist dagegen ausgesprochen mühsam zu lesen und trägt
   deutlich breiter, sodass die Zeile schon bei „Dein Steam-Profilname oder
   der Link zu deinem Profil" umbricht. In normaler Schreibweise steht der
   Titel weiter als Titel da und der Zusatz liest sich als Satz. */
.pc-feld-info {
  color: var(--pc-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.pc-form-note {
  display: block;
  margin-top: 4px;
  font-family: var(--pc-font-page);
  font-size: 12px;
  font-weight: var(--pc-weight-page);
  line-height: 1.5;
  color: var(--pc-muted);
  max-width: 420px;
}

/* ---------- E-Mail-Adresse ändern ---------- */

/* Derselbe Aufbau wie die uebrigen Formulare im Profil: Der Abstand
   entsteht am umschliessenden Element, nicht an jedem Feld einzeln. */
#pc_email_zone {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

#pc_email_zone .pc-form-group {
  width: 100%;
  max-width: 340px;
}

#pc_email_zone .pc-pn-note {
  margin: 0 !important;
}

#pc_email_zone .pc-feedback:empty {
  display: none;
}

.pc-2fa-note.is-error {
  margin-top: 14px !important;
  padding: 10px 12px;
  border-left: 2px solid var(--pc-accent);
  background: rgba(250, 67, 122, 0.06);
  color: var(--pc-text) !important;
}

/* ---------- Gesperrte Farben ---------- */

.pc-tagcolor.is-locked {
  opacity: 0.42;
  cursor: not-allowed !important;
  position: relative;
}

.pc-tagcolor.is-locked:hover {
  opacity: 0.42;
}

/* Inline statt als eigene Zeile: sonst sind gesperrte Knöpfe höher
   als freie und die Reihe wirkt ungeordnet. */
.pc-lock-hint {
  display: inline;
  margin-left: 6px;
  font-family: var(--pc-font-page);
  font-size: 9px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--pc-muted) !important;
  -webkit-text-fill-color: var(--pc-muted);
}


/* ---------- Verweise in Hinweistexten ----------
   Dieselbe Gestaltung wie auf den Rechtstexten und der Turnierseite. Sie
   steht dort jeweils in der Seitendatei, deshalb hier ebenfalls. */

.pc-user-card .pc-link,
.pc-pn-note .pc-link {
  color: var(--pc-accent) !important;
  text-decoration: none !important;
  border-bottom: 1px dashed var(--pc-accent);
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
}

.pc-user-card .pc-link:hover,
.pc-pn-note .pc-link:hover {
  opacity: 0.6;
}