/**
 * Primy Bird auf /primy-bird/.
 *
 * Laedt NACH app.css. Der Kopfbaukasten (pc-eyebrow, pc-page-title,
 * pc-description, pc-title-rule), die Uebersichtsleiste (pc-overview,
 * pc-ov-item), die Reiterleiste (pc-tabs, pc-tab-btn) und der
 * Info-Aufklapper (pc-head-details) kommen von dort beziehungsweise aus
 * site.css und stehen hier ausdruecklich NICHT.
 *
 * WER HIER EINE REGEL ERGAENZT, die einen Namen aus dem Kopfbaukasten
 * trifft, schlaegt bei gleicher Genauigkeit die aus app.css. Genau daran
 * ist die Stats-Seite mit 6.60.2 gescheitert und die 404-Seite bis 6.64.4
 * auseinandergelaufen. Alles Eigene traegt deshalb das Vorsatzstueck
 * `pc-bird-` und trifft nichts, was es schon gibt.
 *
 * .pc-roster, .pc-rank, .pc-player und .pc-points sind die AUSNAHME: Sie
 * stehen in arcade.css und gehoeren der 404-Seite, arcade.css laedt hier
 * aber nicht. Sie sind deshalb unten noch einmal aufgefuehrt - nicht als
 * Doppelung, sondern weil zwei Seiten dieselbe Listenform brauchen und
 * keine von beiden das Stylesheet der anderen laedt. Wer sie an einem
 * spaeteren Tag zusammenlegt, verschiebt sie nach app.css; dort laden sie
 * beide.
 */

/* ---------------------------------------------------------------
 * Breite
 *
 * Ohne diese Regel klebt der Inhalt am Fensterrand. Genau das ist der
 * Stats-Seite passiert, und es steht seit jeher in CLAUDE.md.
 * ------------------------------------------------------------- */

.pc-bird-container {
  width: var(--pc-width);
  max-width: var(--pc-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: transparent !important;
  background-color: transparent !important;
}

/* Ein Flex-Behaelter, damit sich die Reihenfolge am Telefon ueber order
   aendern laesst - genau wie beim Roulette seit Primy_v5. order wirkt nur
   auf direkte Kinder. */
.pc-bird-container {
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;

  --pc-bird-radius: 16px;
  --pc-bird-luft: 22px;
}

/* ---------------------------------------------------------------
 * Der Weg zurueck zur Arcade
 *
 * Aussehen und Farbe kommen aus .pc-detail-back in app.css, damit er
 * genauso aussieht wie auf /primy/ und auf den beiden Detailseiten. Hier
 * steht nur, was der Flex-Behaelter braucht.
 *
 * align-self ist tragend: .pc-bird-container ist eine Flex-Spalte, und ein
 * Kind darin waere ohne diese Angabe ueber die volle Breite gestreckt. Der
 * Verweis ist ein Klickziel; ueber die ganze Seite gestreckt fuehrte jeder
 * Klick in dieser Zeile von der Seite weg.
 * ------------------------------------------------------------- */

.pc-bird-back {
  align-self: flex-start;
}

/* ---------------------------------------------------------------
 * Das Spielfeld
 *
 * Kein Titel darueber, das Spiel steht oben. Dieselbe Entscheidung wie
 * beim Roulette seit 6.72.0.
 * ------------------------------------------------------------- */

/* position: relative ist tragend, keine Kosmetik: Die Zeile mit der
   Roehrenzahl liegt seit 6.90.0 absolut und nimmt diesen Kasten als
   Bezugspunkt - am Telefon im Spielfeld oben rechts, am Rechner darueber
   auf der Zeile der Haertestufen. Ohne die Angabe waere der Bezugspunkt
   die Seite, und die Zahl saesse am Fensterrand. Dieselbe Falle wie beim
   mobilen Menue der Kopfleiste, siehe CLAUDE.md. */
.pc-bird-stage {
  position: relative;
  margin: 0 0 var(--pc-bird-luft) 0;
  padding: 0;
  border: none;
  background: none;
  box-sizing: border-box;
}

/* ---- Die Zeile ueber dem Spielfeld ----
 *
 * Links der Titel aus der Seitenfassung, rechts die laufende Roehrenzahl.
 * Beides steht UEBER dem Canvas und nicht darauf: Bei Primy Bird ist der
 * Klick aufs Canvas die Steuerung, und ein Element darueber schluckte
 * Fluegelschlaege. Die ganze Begruendung steht an stageKopf in bird.js.
 *
 * align-items: baseline setzt Titel und Zahl auf eine gemeinsame
 * Grundlinie, obwohl die Zahl dreimal so gross ist wie der Titel. */
/* ---------------------------------------------------------------
 * DIE ROEHRENZAHL LIEGT SEIT 6.90.0 ABSOLUT
 *
 * Robert am 17.08.2026: "bau das Roehren und die Anzahl in der Desktop
 * Version auf die gleiche Hoehe wie die Haertestufen. Und NUR auf der
 * Mobilen Version, diese Zahl und Roehren ins Spielfeld rechts oben."
 *
 * EIN ELEMENT, ZWEI LAGEN, und entschieden wird allein hier im CSS. Ein
 * Umzug im DOM waere der naheliegende Weg und der falsche: .pc-bird-levels
 * und .pc-bird-stage sind Geschwister, ein Kind kann per CSS nicht von
 * einem zum anderen wandern, und ein Umzug per Skript muesste beim Drehen
 * des Geraets seinen Zustand mitnehmen. Genau daran sind die Kopfzahlen in
 * 6.54.1 gescheitert; 6.55.1 hat sie deshalb auf EINEN Block
 * zurueckgefuehrt.
 *
 * Am Rechner liegt der Kasten deshalb UEBER seinem Bezugspunkt: bottom
 * ueber 100 Prozent hinaus hebt ihn aus der Buehne heraus auf die Zeile
 * der Haertestufen.
 *
 * AUF DIE HOEHE DES RANDES, nicht auf die Mitte. Mit 6.90.0 stand der
 * Kasten mittig in der Zeile; Robert wollte ihn am 17.08.2026 "auf die
 * gleiche Hoehe wie den Rand von den Haertestufen", also buendig mit der
 * Oberkante der Knoepfe.
 *
 * DIE 66 PIXEL SIND GERECHNET: Die Knopfzeile ist 73 Pixel hoch und steht
 * 14 ueber der Buehne, ihre Oberkante liegt also 87 Pixel ueber der
 * Buehnenkante; der Kasten misst 21, seine Unterkante gehoert damit auf
 * 66. Nachgemessen fluchtet er danach auf den Pixel mit dem oberen Rand
 * der Knoepfe.
 *
 * Er nimmt dadurch keinen Platz mehr ein, und das Spielfeld rueckt um
 * seine Hoehe samt Abstand nach oben - am Telefon 33 Pixel, die dort
 * zaehlen.
 * ------------------------------------------------------------- */
.pc-bird-stage-kopf {
  position: absolute;
  right: 0;
  bottom: calc(100% + 66px);
  z-index: 2;

  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  min-height: 21px;
}

/* Derselbe Baustein wie .pc-ro-titel auf /primy/: gedaempft, gesperrt,
   in Versalien. Zwei Testprojekte, die ihren Titel verschieden setzen,
   waeren zwei Bausteine.

   "Dein Bird - Testprojekt" ist mit 6.89.0 aus der Seite genommen, Robert
   wollte es weg. Die Regel bleibt stehen: Plugin und Seitenfassung werden
   getrennt eingespielt, und zwischen den beiden Schritten laeuft das neue
   CSS auf PrimyBird_v2, wo der Titel noch steht. Ab v3 trifft sie nichts
   mehr und stoert auch nicht. */
.pc-bird-titel {
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

/* margin-left: auto haelt die Zahl am rechten Rand - auch dann, wenn die
   Seitenfassung noch keinen Titel mitbringt und sie das einzige Kind der
   Zeile ist. */
.pc-bird-lauf {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-left: auto;
}

/* Gold wie zuvor in der Leiste: Es ist die einzige Zahl, die sich waehrend
   eines Laufs aendert, und sie soll sich von der Umgebung abheben. */
.pc-bird-lauf-wert {
  font-family: "droid-sans-mono", monospace;
  font-size: 21px;
  line-height: 1;
  color: var(--pc-gold);
  font-variant-numeric: tabular-nums;
}

.pc-bird-lauf-label {
  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-muted);
}

/* touch-action: none ist tragend, nicht Kosmetik. Ohne die Angabe deutet
   ein Telefon jeden Tipp zuerst als moeglichen Beginn einer Wischgeste oder
   eines Doppeltipp-Zooms; die Seite ruckelt beim Spielen, und auf iOS
   verzoegert sich jeder Schlag um rund 300 Millisekunden.

   Die HOEHE setzt das Skript, nicht diese Datei: aspect-ratio waere
   kuerzer, fehlt aber aelteren Browsern, und dann stuende das Spielfeld
   verzerrt da. Der Wert hier ist nur der Stand vor dem ersten Messen. */
#pcBirdCanvas {
  display: block;
  width: 100%;
  height: 320px;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-bird-radius);
  cursor: pointer;
  box-sizing: border-box;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ---------------------------------------------------------------
 * Der Kopf: wer, wie viel, was gerade laeuft
 *
 * Derselbe Aufbau wie die Setzleiste des Roulettes: links wer, rechts was
 * gerade passiert, ein sehr leiser Grund haelt beides zusammen.
 * ------------------------------------------------------------- */

.pc-bird-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin: 0 0 14px 0;
  border: none;
  border-radius: var(--pc-bird-radius);
  background: rgba(255, 255, 255, 0.025);
  box-sizing: border-box;
}

/* ---------------------------------------------------------------
 * DIE LEISTE IST AUSGEBLENDET, AUF JEDER BREITE
 *
 * Robert am 17.08.2026: "entferne den ersten Block bei /primy-bird/ mit
 * Namen und Punkten." Am Telefon war sie seit 6.89.0 schon aus, jetzt
 * auch am Rechner - die Zeile in der Medienabfrage ist deshalb wieder
 * entfallen, zwei Stellen fuer dieselbe Frage laufen auseinander.
 *
 * EIGENE REGEL DIREKT HINTER DER GRUNDREGEL, dieselbe Bauart wie bei
 * .pc-ah-kopf und .pc-shop-kopf seit 6.88.2: Die Grundregel darueber
 * beschreibt, WIE der Kasten aussieht, wenn er dasteht, und ist damit die
 * Vorlage fuer ein Zurueckdrehen.
 *
 * BEWUSST NUR AUSGEBLENDET. kopfFuellen() schreibt weiter hinein, und das
 * ist hier tragend und nicht bloss bequem: Der Aufruf von
 * window.pcKopfGuthaben() steht IN dem Zweig, der #pcBirdGuthaben fuellt.
 * Faellt das Element, hoert die Kopfleiste auf mitzulaufen, und das
 * Guthaben stuende waehrend eines Laufs still - genau die Angabe, die am
 * Telefon jetzt allein dort steht.
 *
 * Das Guthaben geht also nicht verloren: Es steht seit 6.87.3 in der
 * Kopfleiste und laeuft dort bei jedem Einsatz mit.
 * ------------------------------------------------------------- */
.pc-bird-bar {
  display: none;
}

.pc-bird-wer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
}

.pc-bird-ich-name {
  font-family: var(--pc-font-page);
  font-size: 16px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text);
}

.pc-bird-ich-gast {
  font-family: var(--pc-font-page);
  font-size: 14px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
}

.pc-bird-konto {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.pc-bird-konto-zahl {
  font-family: "droid-sans-mono", monospace;
  font-size: 21px;
  line-height: 1;
  color: var(--pc-gold);
  font-variant-numeric: tabular-nums;
}

.pc-bird-konto-zahl.is-aus { color: var(--pc-muted); }

.pc-bird-konto-label {
  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-muted);
}

/* Rechts die laufende Runde und der eigene Rekord je Stufe.
 *
 * SEIT 6.77.0 STEHEN DORT SECHS ELEMENTE, nicht zwei: die laufende Runde,
 * ein Trenner, die Ueberschrift und vier Stufenwerte. ALLE VIER TRAGEN
 * DIESELBE FORM WIE "ROEHREN" - gleiche Schrift, gleiche Groesse, gleiche
 * Beschriftung darunter, gleiche Grundlinie. Robert wollte es ausdruecklich
 * so; ein kleinerer Wert daneben haette ausgesehen wie eine Fussnote.
 *
 * align-items: flex-end statt der Vorgabe: Ohne die Angabe streckt der
 * Flex-Behaelter seine Kinder auf die Hoehe des groessten, und der Trenner
 * waere so hoch wie die Zeilen daneben statt so hoch wie eine Zahl.
 *
 * margin-left: auto schiebt den Block ans rechte Ende, auch wenn der Name
 * links kurz ist; dieselbe Loesung wie beim Eingabefeld des Roulettes. */
/* Die vier Stufenrekorde im eigenen Kasten, seit 6.89.0 zwischen Rang und
   Verlauf.

   ZWEI SPALTEN, kein margin-left: auto mehr. In der Leiste stand die Reihe
   rechts aussen und hatte die halbe Seitenbreite; in einer Spalte des
   Dreierrasters bleiben rund 230 Pixel, und vier Werte nebeneinander
   waeren dort je 50 Pixel breit. Zwei mal zwei ist die Form, die in eine
   Spalte passt.

   minmax(0, 1fr), nicht 1fr: Ein blosses 1fr heisst minmax(AUTO, 1fr),
   und die breiteste Beschriftung schoebe ihre Spalte auf. Steht so schon
   an .pc-bird-levels und stammt aus 6.68.0. */
.pc-bird-runde {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: end;
}

.pc-bird-runde-zeile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
}

.pc-bird-runde-wert {
  font-family: "droid-sans-mono", monospace;
  font-size: 21px;
  line-height: 1;
  color: var(--pc-text);
  font-variant-numeric: tabular-nums;
}

/* Eine Stufe ohne Lauf steht gedaempft da. Die Zeile bleibt trotzdem
   stehen: Eine fehlende Stufe saehe aus, als gaebe es sie nicht, und der
   Spieler soll sehen, was ihm noch fehlt. */
.pc-bird-runde-wert.is-leer { color: var(--pc-muted); }

/* .pc-bird-runde-zeile.is-lauf und .pc-bird-runde-trenner sind mit 6.83.0
   ersatzlos entfallen. Die laufende Roehrenzahl steht seither ueber dem
   Spielfeld (siehe .pc-bird-stage-kopf weiter unten), und ohne sie gibt es
   auch nichts mehr abzutrennen: Die Reihe traegt nur noch die vier
   Stufenrekorde, und die sind gleichrangig.
   Nachgesehen in includes/, assets/ und Seiten/, wie es die Lektion aus
   6.51.1 verlangt - beide Klassen kamen nur hier und in bird.js vor. */

/* .pc-bird-runde-titel ist mit 6.89.0 entfallen. Die Ueberschrift stand
   auf der Grundlinie der Beschriftungen, weil die Reihe in der Leiste
   eine Zeile bleiben musste. Seit der Rekord ein eigener Kasten zwischen
   Rang und Verlauf ist, traegt sie .pc-bird-kasten-titel wie ihre beiden
   Nachbarn. */

.pc-bird-runde-label {
  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-muted);
}

/* ---------------------------------------------------------------
 * Die Stufenleiste
 *
 * Jeder Knopf traegt drei Zeilen: Name, Preis, Lohn. Ohne Preis und Lohn
 * waere die Wahl der Stufe ein Blindflug - sie ist hier keine
 * Geschmacksfrage, sondern eine Rechnung.
 * ------------------------------------------------------------- */

.pc-bird-levels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px 0;
}

.pc-bird-levels-label {
  font-family: var(--pc-font-page);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pc-muted);
  margin-right: 6px;
}

/* Die Zustandsliste wehrt die Knopfvorgaben des Themes ab. Sie ist (0,2,0)
   und schlaegt jede spaetere Regel mit nur der Klasse (0,1,0), und zwar in
   genau dem Augenblick, in dem der Finger den Knopf beruehrt. Deshalb steht
   hier NICHTS, was die Medienabfrage weiter unten neu setzt; Groesse und
   Polsterung stehen in der schlichten Regel darunter. Genau daran ist das
   Kreuz der Kopfzahlen mit 6.55.2 gescheitert. */
.pc-bird-level,
.pc-bird-level:hover,
.pc-bird-level:focus,
.pc-bird-level:active {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--pc-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--pc-muted) !important;
  font-family: var(--pc-font-page) !important;
  font-weight: var(--pc-weight-page) !important;
  text-transform: none !important;
  cursor: pointer !important;
  transform: none !important;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

/* padding und font-size tragen !important, weil base.css sie an `button`
   ebenfalls mit !important setzt (10px 20px). Ohne das gewinnt die
   Grundregel trotz geringerer Genauigkeit - genau die Lektion
   "!important schlaegt Genauigkeit". Sie stehen NICHT in der Zustandsliste
   darueber, weil die Medienabfrage unten die Polsterung neu setzt. */
.pc-bird-level {
  padding: 9px 13px !important;
  font-size: 12px !important;
  min-width: 116px;
}

.pc-bird-level:hover,
.pc-bird-level:focus {
  background: rgba(245, 213, 110, 0.10) !important;
  color: var(--pc-text) !important;
}

.pc-bird-level.active,
.pc-bird-level.active:hover,
.pc-bird-level.active:focus {
  background: rgba(245, 213, 110, 0.16) !important;
  border-color: rgba(245, 213, 110, 0.55) !important;
  color: var(--pc-text) !important;
}

/* Zu teuer heisst ausgegraut, nicht weg. Ein Knopf, der ohne Begruendung
   fehlt, sieht aus wie ein Fehler; anklicken laesst er sich weiterhin und
   bekommt dann die Meldung, die sagt warum. */
.pc-bird-level.is-teuer,
.pc-bird-level.is-teuer:hover,
.pc-bird-level.is-teuer:focus {
  opacity: 0.45 !important;
}

.pc-bird-level-name {
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: inherit;
}

.pc-bird-level-preis {
  font-family: "droid-sans-mono", monospace;
  font-size: 12px;
  color: var(--pc-accent);
}

.pc-bird-level-lohn {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: "droid-sans-mono", monospace;
  font-size: 12px;
  color: var(--pc-live);
}

.pc-bird-level-lohn em {
  font-family: var(--pc-font-page);
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

/* ---------------------------------------------------------------
 * Die Hinweiszeile
 * ------------------------------------------------------------- */

.pc-bird-hinweis {
  font-family: var(--pc-font-page);
  font-size: 13px;
  font-weight: var(--pc-weight-page);
  line-height: 1.6;
  color: var(--pc-muted);
  margin: 0 0 var(--pc-bird-luft) 0;
  padding: 0 4px;
  min-height: 21px;
}

.pc-bird-hinweis.is-ok    { color: var(--pc-live); }
.pc-bird-hinweis.is-error { color: var(--pc-accent); }
.pc-bird-hinweis.is-zu    { color: var(--pc-warn); }
.pc-bird-hinweis.is-info  { color: var(--pc-info); }

/* ---------------------------------------------------------------
 * Rang und eigene Laeufe
 *
 * Zwei Kaesten nebeneinander: links der globale Rang mit seinen vier
 * Reitern, rechts die eigenen letzten Laeufe. Am Telefon untereinander.
 * ------------------------------------------------------------- */

/* DREI SPALTEN SEIT 6.89.0: Rang, Rekord, Verlauf.
   Der Rekord ist mit dieser Fassung aus der Leiste hierher gewandert,
   Roberts Vorgabe "zwischen Verlauf und Rang". Der Rang bleibt die
   breiteste Spalte, dort stehen Namen; Rekord und Verlauf tragen Zahlen
   und kommen mit weniger aus. */
.pc-bird-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 18px;
  margin: 0 0 var(--pc-bird-luft) 0;
}

.pc-bird-kasten {
  padding: 18px 20px;
  border-radius: var(--pc-bird-radius);
  background: rgba(255, 255, 255, 0.025);
  box-sizing: border-box;
}

.pc-bird-kasten-titel {
  display: block;
  font-family: var(--pc-font-page);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pc-muted);
  margin: 0 0 12px 0;
}

/* Die Listenform. Sie steht auch in arcade.css, aber arcade.css laedt auf
   dieser Seite nicht; die Begruendung steht oben im Kopf dieser Datei. */
.pc-bird-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-bird-liste li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--pc-font-page);
  font-size: 13px;
  color: var(--pc-text);
}

.pc-bird-liste li:last-child { border-bottom: none; }

/* Die eigene Zeile hebt sich ab, damit man sie im Rang wiederfindet.
   Dieselbe Loesung wie im Feed des Roulettes. */
.pc-bird-liste li.is-ich {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
}

.pc-bird-liste .pc-rank {
  font-family: "droid-sans-mono", monospace;
  font-size: 12px;
  color: var(--pc-muted);
  flex: 0 0 auto;
}

.pc-bird-liste li.top-rank .pc-rank { color: var(--pc-gold); }

/* Die Ellipse liegt HIER und sonst nirgends.
 *
 * Die senkrechte Polsterung schafft dem FOKUSRAHMEN von .pc-pl Luft: Er
 * liegt mit outline-offset zwei Pixel ausserhalb des Elements, die Zeile
 * ist aber nur fuenfzehn Pixel hoch, und overflow: hidden kappt oben und
 * unten genau an der Textkante. Der negative Aussenabstand zieht die Box
 * anschliessend auf ihr altes Mass zurueck - die Zeile wird also nicht
 * hoeher. Dieselbe Technik wie an der Trefferflaeche der Kopfzahlen aus
 * 6.55.1.
 *
 * BIS 6.85.0 STAND HIER DER GLANZ als Begruendung, mit acht Pixeln statt
 * dreien. Den gibt es seit 6.86.0 nicht mehr; die Polsterung bleibt, weil
 * der Fokusrahmen dieselbe Luft braucht, nur weniger davon.
 *
 * WAAGERECHT AUSDRUECKLICH NICHT. Dort sitzt die Ellipse, und eine
 * Polsterung schoebe die Clipping-Kante nach aussen: Ein langer Name
 * liefe acht Pixel in die Spalte daneben, bevor er abgeschnitten wird. */
.pc-bird-liste .pc-player {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 0 8px 8px;
  margin: -8px 0 -8px -8px;
}

.pc-bird-liste .pc-points {
  flex: 0 0 auto;
  font-family: "droid-sans-mono", monospace;
  font-size: 12px;
  color: var(--pc-muted);
}

.pc-bird-liste .pc-roster-empty {
  display: block;
  color: var(--pc-muted);
  font-style: italic;
  border-bottom: none;
}

.pc-bird-anon {
  color: rgba(225, 228, 235, 0.55);
}

/* Der Ausloeser der Spielerkarte sitzt IN der Huelle, nicht auf ihr:
   .pc-player fuehrt overflow: hidden fuer die Ellipse, und der Fokusrahmen
   von .pc-pl liegt mit outline-offset zwei Pixel ausserhalb des Elements.
   Auf der Huelle waere er abgeschnitten - dieselbe Lage wie bei
   .pc-ro-liste-name im Feed des Roulettes.

   OHNE EIGENES CLIPPING, seit 6.78.0. Bis dahin standen overflow: hidden,
   text-overflow und white-space HIER NOCH EINMAL, obwohl .pc-player sie
   drei Regeln weiter oben schon fuehrt. Die Ellipse war damit doppelt, und
   der Preis dafuer war damals der Glanz, der acht Pixel ueber die
   Buchstaben hinausreichte; im Browser gemessen clippten hier ZWEI Ebenen,
   im Team-Kader und im Turnierbaum keine einzige.

   Den Glanz gibt es seit 6.86.0 nicht mehr. Die Doppelung bleibt trotzdem
   entfernt: Ein zweites clippendes Element haette denselben Effekt auf
   den Fokusrahmen, und eine Ellipse, die zweimal dasteht, ist ohnehin eine
   Stelle zu viel. */
.pc-bird-name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}

/* ---------------------------------------------------------------
 * Die eigenen Laeufe
 * ------------------------------------------------------------- */

.pc-bird-lauf-stufe {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--pc-muted);
  letter-spacing: 0.4px;
}

.pc-bird-lauf-score {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  text-align: right;
}

.pc-bird-lauf-saldo {
  flex: 0 0 auto;
  font-family: "droid-sans-mono", monospace;
  font-size: 12.5px;
  min-width: 68px;
  text-align: right;
}

.pc-bird-lauf-saldo.is-plus  { color: var(--pc-live); }
.pc-bird-lauf-saldo.is-minus { color: var(--pc-accent); }
.pc-bird-lauf-saldo.is-null  { color: var(--pc-muted); }

/* ---------------------------------------------------------------
 * Der Info-Aufklapper
 *
 * Derselbe Griff und derselbe Haken wie beim Nachweis des Roulettes, damit
 * sich beide gleich bedienen. Die Regeln stehen hier und nicht in
 * primy.css, weil primy.css auf dieser Seite nicht laedt; dieselbe Lage wie
 * bei der Listenform weiter oben.
 * ------------------------------------------------------------- */

/* Der Regelkasten ist der letzte Block der Seite, und deshalb steht sein
   unterer Abstand auf null. Gemessen: Auf /turniere/ endet der Inhalt genau
   mit dem Rumpf, hier lagen 22 Pixel dazwischen - der Abstand zu einem
   Block, der gar nicht kommt. Ausgeschrieben und nicht ueber :last-child,
   damit es hier so dasteht wie beim Nachweis des Roulettes; dort geht es
   ueber :last-child ueberhaupt nicht. */
.pc-bird-infobox {
  border-radius: var(--pc-bird-radius);
  background: rgba(255, 255, 255, 0.025);
  padding: 0 20px;
  margin: 0;
  box-sizing: border-box;
}

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

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

.pc-bird-summary:hover,
.pc-bird-infobox[open] .pc-bird-summary { color: var(--pc-gold); }

.pc-bird-icon {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.pc-bird-infobox[open] .pc-bird-icon { transform: rotate(-135deg); }

.pc-bird-info-inhalt {
  padding: 0 0 18px 0;
}

/* ---------------------------------------------------------------
 * Am Telefon
 * ------------------------------------------------------------- */

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

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

  /* Ohne Kopf braucht das Spielfeld oben etwas Luft zur Kopfleiste. */
  .pc-bird-stage { margin-top: 8px; }

  /* ---- DIE REIHENFOLGE IST WIEDER DIE DES MARKUPS ----
   *
   * Mit 6.82.0 stand hier eine order-Kette, die das Spielfeld nach oben
   * zog: Es begann bei 375 Pixeln erst bei y=433 von 812, also unterhalb
   * der Bildschirmmitte, und man musste scrollen, um zu spielen.
   *
   * ROBERT HAT DAS AM 16.08.2026 AUSDRUECKLICH UMGEKEHRT und die Folge
   * benannt: erst die Informationen (Profil, Rekorde, Punkte), dann die
   * Haertestufen, dann das Spiel, dann Rang und Verlauf, zuletzt die
   * Regeln. Das ist genau die Dokumentreihenfolge, also braucht es dafuer
   * gar keine Regel mehr - die sieben order-Werte sind ersatzlos entfallen.
   *
   * Der Gedanke dahinter traegt: Wer spielt, waehlt zuerst eine Stufe, und
   * die Stufe kostet Primy-Punkte. Beides steht jetzt VOR dem Spielfeld,
   * und der Weg von oben nach unten ist der Weg durch das Spiel.
   *
   * Das Spielfeld rutscht damit wieder nach unten. Abgefedert wird das an
   * zwei Stellen: Die Roehrenzahl ist mit 6.83.0 aus der Leiste
   * verschwunden und steht ueber dem Spielfeld, und die Leiste ist dadurch
   * flacher geworden. */

  /* Die Hide-Regel der Leiste stand mit 6.89.0 hier und ist mit 6.90.0
     nach oben an die Grundregel gewandert: Seither ist sie auf JEDER
     Breite aus.

     ---------------------------------------------------------------
     DIE ROEHRENZAHL STEHT AM TELEFON IM SPIELFELD, OBEN RECHTS

     Robert am 17.08.2026, ausdruecklich "NUR auf der Mobilen Version".
     Am Rechner steht sie ueber dem Feld auf der Zeile der Haertestufen,
     siehe die Grundregel weiter oben.

     POINTER-EVENTS: NONE IST TRAGEND, NICHT KOSMETIK. Der Kommentar an
     stageKopf in bird.js sagt seit 6.83.0, warum die Zahl UEBER dem
     Canvas stand und nicht darauf: Bei Primy Bird IST der Klick aufs
     Canvas die Steuerung, und ein Element darueber schluckt
     Fluegelschlaege. Jetzt liegt sie darauf, und genau diese Zeile
     macht sie fuer Klicks durchlaessig - ohne sie waere die obere
     rechte Ecke des Spielfelds tot.

     Der Schatten hebt die Zahl vom Spielfeld ab; dahinter fliegen
     Roehren durch, und gold auf hellgruen allein waere zu wenig. */
  .pc-bird-stage-kopf {
    top: 10px;
    right: 12px;
    bottom: auto;
    pointer-events: none;
  }

  .pc-bird-lauf-wert,
  .pc-bird-lauf-label {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  }

  /* Die Regeln fuer .pc-bird-wer und .pc-bird-konto sind mit 6.89.0
     entfallen: Beide stehen in der Leiste, und die ist am Telefon aus.
     Am Rechner gelten sie ohnehin nicht, dort greift diese Medienabfrage
     nicht. */

  /* EIN RASTER MIT VIER SPALTEN, kein Flex mehr.
   *
   * Mit Flex und 34 Pixeln Abstand brachen die vier Stufenwerte bei
   * 375 Pixeln in zwei Zeilen um: drei oben, "Extrem" allein darunter.
   * Ein Raster mit vier gleichen Spalten haelt sie auf EINER Linie, und
   * zwar unabhaengig davon, wie lang die Beschriftungen sind - genau die
   * Loesung, die die Stufenknoepfe darunter seit 6.65.0 benutzen.
   *
   * minmax(0, 1fr), nicht 1fr: Ein blosses 1fr heisst minmax(AUTO, 1fr),
   * und die breiteste Beschriftung schoebe ihre Spalte auf. Steht so
   * schon an .pc-bird-levels und stammt aus 6.68.0.
   *
   * Die Ueberschrift spannt ueber alle vier Spalten, sonst saesse sie in
   * Spalte eins und der Rest der Zeile bliebe leer. */
  .pc-bird-runde {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 8px;
    margin-left: 0;
    align-items: end;
    /* LINKSBUENDIG seit 6.83.0, zusammen mit dem Rest der Leiste. Bis dahin
       stand hier justify-items: end, weil die laufende Roehrenzahl links
       daneben eine eigene Kante brauchte; die steht jetzt ueber dem
       Spielfeld, und ohne sie fluchtet alles an der linken Kante. */
    justify-items: start;
  }

  /* Die Regel fuer .pc-bird-runde-titel ist mit 6.89.0 entfallen: Die
     Ueberschrift heisst jetzt .pc-bird-kasten-titel wie bei den beiden
     Nachbarkaesten, und die steht ohnehin ueber die volle Breite.

     Die Regel fuer .pc-bird-runde-trenner ist mit 6.83.0 entfallen, samt
     dem Trenner selbst - siehe die Begruendung weiter oben in dieser Datei.

     Die vier Stufenwerte stehen LINKSBUENDIG. Bis 6.82.0 stand hier
     text-align: right. */
  .pc-bird-runde-zeile { text-align: left; align-items: flex-start; }

  /* ---------------------------------------------------------------
   * VIER STUFENKNOEPFE IN EINER REIHE
   *
   * Robert am 17.08.2026: "Aendere ausserdem NUR auf der Mobilen Version
   * die Haertestufen so, dass diese in einer Linie nebeneinander stehen
   * und passen."
   *
   * Das kehrt 6.65.0 um, wo sie als zwei mal zwei standen: Damals trug
   * jeder Knopf drei Zeilen und in einer Reihe passten nur zwei. Damit
   * vier hineingehen, spart die Regel darunter an Polsterung, Schrift
   * und Abstand - jede Stelle fuer sich klein, so wie bei den vier
   * Reitern des Rangs in 6.79.0.
   *
   * minmax(0, 1fr), nicht 1fr: Ein blosses 1fr heisst minmax(AUTO, 1fr),
   * und der breiteste Knopf schoebe seine Spalte auf. Stammt aus 6.68.0.
   * ------------------------------------------------------------- */
  .pc-bird-levels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  /* Die Ueberschrift steht seit 6.91.0 hoeher ueber den Knoepfen, Roberts
     Vorgabe vom 17.08.2026. Ueber margin-bottom und nicht ueber einen
     negativen Abstand nach oben: Die Zeile ist am Telefon das erste
     Element der Seite, und ein negativer Wert zoege sie in den Abstand
     unter der Kopfleiste hinein. So waechst statt dessen der Zwischenraum,
     und genau der war gemeint.

     Sechs Pixel zu den sechs des Rasters machen zwoelf - doppelt so viel
     Luft wie zwischen zwei Knoepfen, damit die Ueberschrift zur Gruppe
     darunter gehoert und nicht zwischen zwei Reihen zu haengen scheint. */
  .pc-bird-levels-label {
    grid-column: 1 / -1;
    margin-right: 0;
    margin-bottom: 6px;
    text-align: center;
  }

  /* !important, weil die schlichte Regel oben es ebenfalls traegt; ohne
     das gewaenne sie trotz frueherer Stellung.

     Seit 6.89.0 stehen vier statt zwei Knoepfe in einer Reihe, und bei
     375 Pixeln bleiben je Knopf rund 84. Gespart wird an drei Stellen
     statt an einer, damit jede fuer sich klein bleibt: Polsterung 10
     statt 11 mal 10, Name und Zahlen eine halbe Stufe kleiner. */
  .pc-bird-level {
    padding: 10px 6px !important;
    min-width: 0;
  }

  .pc-bird-level-name { font-size: 11.5px; letter-spacing: 0.2px; }

  .pc-bird-level-preis,
  .pc-bird-level-lohn { font-size: 11px; }

  /* Der Zusatz "je Roehre" bricht neben der Zahl um und braucht dann eine
     eigene Zeile; nebeneinander bliebe fuer beides kein Platz. */
  .pc-bird-level-lohn {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .pc-bird-level-lohn em { font-size: 8.5px; letter-spacing: 0.4px; }

  /* Rang und eigene Laeufe untereinander. Nebeneinander blieben bei 355
     Pixeln je Spalte rund 170, und darin steht kein Name mehr. */
  .pc-bird-spalten {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .pc-bird-kasten { padding: 14px; }

  /* Nur die ersten fuenf Plaetze. Zehn Zeilen schoeben das Spielfeld vom
     Bildschirm, und wer sie sehen will, dreht das Geraet.

     nth-of-type zaehlt die li-Elemente. Der Leertext ist selbst ein li und
     steht allein da; die Regel trifft ihn nie, weil sie erst ab dem
     sechsten greift. */
  #pcBirdBoard li:nth-of-type(n+6) { display: none; }

  /* DIE VIER REITER DES RANGS AUF EINE EBENE.
   *
   * Gemessen bei 375 Pixeln: Die vier Knoepfe brauchen zusammen 252
   * Pixel, dazu dreimal 24 Pixel Abstand - macht 324 in einem Kasten,
   * der innen 327 misst. Drei Pixel Reserve, und auf einem Geraet mit
   * anderer Schriftdarstellung reicht das nicht: "Extrem" lief bei
   * Robert aus dem Bild.
   *
   * Gespart wird an drei Stellen statt an einer, damit jede fuer sich
   * klein bleibt: Abstand 24 auf 6, Schrift 13 auf 12, Sperrung 1,5 auf
   * 0,8. Zusammen rund achtzig Pixel Reserve.
   *
   * space-between verteilt den Rest gleichmaessig, und nowrap mit
   * min-width: 0 laesst die Knoepfe im Notfall schrumpfen statt
   * umzubrechen - eine Zeile mit engen Woertern ist besser als ein
   * vierter Reiter allein darunter.
   *
   * NUR im Rang von Primy Bird ueber die Kennung, nicht an .pc-tabs:
   * Die Klasse steht in app.css und traegt auch die Reiter der
   * Stats-Seite und der History des Roulettes. */
  #pcBirdTabs {
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* !important, weil die Grundregel in app.css es ebenfalls traegt.
     Ohne das gewaenne sie trotz frueherer Stellung - genau die Lektion
     "!important schlaegt Genauigkeit". */
  #pcBirdTabs .pc-tab-btn {
    font-size: 12px !important;
    letter-spacing: 0.8px !important;
    min-width: 0;
  }
}