/**
 * Crashout or Cashout auf /arcade/crashout/.
 *
 * Laedt NACH app.css. Der Kopfbaukasten (pc-eyebrow, pc-page-title,
 * pc-description, pc-title-rule), die Uebersichtsleiste (pc-overview,
 * pc-ov-item) und der Zurueck-Knopf (pc-detail-back) 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-cr-` und trifft nichts, was es schon gibt.
 *
 * KNOEPFE BRAUCHEN !important. base.css setzt an jedem `button` Grund,
 * Farbe, Rundung und `padding: 10px 20px`, und zwar mit !important; eine
 * schlichte Regel verliert dagegen trotz groesserer Genauigkeit. Das ist
 * die Lektion "!important schlaegt Genauigkeit" und im Roulette mit 6.68.0
 * schon einmal zugeschlagen. Die Werte stehen deshalb in einer eigenen
 * Regel und NICHT in einer Zustandsliste mit :hover - von dort aus
 * verloeren sie in genau dem Augenblick, in dem ein Finger den Knopf
 * beruehrt.
 */

/* ---------------------------------------------------------------
 * Breite
 *
 * Ohne diese Regel klebt der Inhalt am Fensterrand. Genau das ist der
 * Stats-Seite passiert und dem Shop mit 6.84.0 noch einmal.
 * ------------------------------------------------------------- */

.pc-crash-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 liesse. Gebraucht wird das zurzeit nicht; der Aufbau ist auf
     beiden Breiten derselbe, weil das Spielfeld ohnehin oben steht. */
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
}

/* Der gemeinsame Radius und der gemeinsame Abstand. Eine Zahl an einer
   Stelle statt sieben verstreuter - dieselbe Bauart wie --pc-ro-radius. */
.pc-crash-container {
  --pc-cr-radius: 16px;
  --pc-cr-luft: 14px;
}

.pc-cr-back {
  align-self: flex-start;
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------
 * Der Verlauf ueber dem Spiel
 *
 * WIE VIELE PILLEN ZU SEHEN SIND, ENTSCHEIDET DIE BREITE UND NICHT DAS
 * SKRIPT. Der Server liefert bis zu zwanzig, die Reihe laeuft in einer
 * Zeile ohne Umbruch, und was nicht mehr hineinpasst, wird abgeschnitten.
 * Eine Zahl im Skript muesste bei jeder Groessenaenderung neu greifen und
 * beim Drehen des Geraets ihren Zustand mitnehmen - genau die Falle,
 * wegen der die Kopfzahlen in 6.54.1 zweimal im Dokument standen.
 * ------------------------------------------------------------- */

#pcCrashHistory {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
  margin: 0 0 var(--pc-cr-luft) 0;
  min-height: 26px;
}

.pc-cr-pill {
  flex: 0 0 auto;
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

.pc-cr-pill.is-klein  { color: var(--pc-accent); }
.pc-cr-pill.is-mittel { color: var(--pc-gold); }
.pc-cr-pill.is-gross  { color: var(--pc-live); }

/* ---------------------------------------------------------------
 * Das Spielfeld
 * ------------------------------------------------------------- */

.pc-cr-stage {
  position: relative;
  border-radius: var(--pc-cr-radius);
  overflow: hidden;
  background: #0E0F12;
  margin: 0 0 var(--pc-cr-luft) 0;
  line-height: 0;
}

#pcCrashCanvas {
  display: block;
  width: 100%;
  height: 300px;

  /* Ohne diese Angabe deutet ein Telefon jeden Tipp zuerst als moeglichen
     Beginn einer Wischgeste; die Seite ruckelt, und auf iOS verzoegert
     sich jede Beruehrung. Dieselbe Zeile wie am Canvas des Minispiels. */
  touch-action: none;
}

/* ---------------------------------------------------------------
 * Die Einsatzleiste
 * ------------------------------------------------------------- */

#pcCrashBar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--pc-cr-radius);
  background: rgba(255, 255, 255, 0.025);
  margin: 0 0 var(--pc-cr-luft) 0;
}

.pc-cr-wer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pc-cr-ich {
  display: flex;
  align-items: center;
  font-family: var(--pc-font-page);
  font-size: 15px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-text);
  min-width: 0;
}

.pc-cr-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-cr-gast,
.pc-cr-gesperrt {
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  color: var(--pc-muted);
}

.pc-cr-konto {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pc-cr-konto-label {
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-cr-konto-zahl {
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 19px;
  font-weight: 700;
  color: var(--pc-gold);
}

.pc-cr-eingaben {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.pc-cr-feld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 0;
}

.pc-cr-feld-auto { flex: 0 1 180px; }

.pc-cr-label {
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

#pcCrashAmount,
#pcCrashAuto {
  width: 100%;
  box-sizing: border-box;
  /* 16 Pixel, nicht kleiner: Ein iPhone zoomt beim Hineintippen in jedes
     Feld unter 16 Pixeln in die Seite hinein, und danach steht das
     Spielfeld halb ausserhalb des Bildes. */
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--pc-text);
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

#pcCrashAmount:focus,
#pcCrashAuto:focus {
  border-color: var(--pc-gold) !important;
  outline: none;
}

.pc-cr-quicks {
  display: grid;
  /* minmax(0, 1fr) und nicht 1fr: Letzteres heisst minmax(AUTO, 1fr), und
     der breiteste Knopf schoebe seine Spalte auf. Gemessen im Roulette
     mit 6.68.0. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.pc-cr-quick {
  font-family: var(--pc-font-mono, droid-sans-mono), monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: var(--pc-muted) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 2px !important;
  cursor: pointer;
}

.pc-cr-quick:hover { color: var(--pc-gold) !important; }

/* ---------------------------------------------------------------
 * Der grosse Knopf
 *
 * Er traegt drei Zustaende, und die Farbe sagt, welchen: Gold heisst
 * setzen, Gruen heisst raus, Rot heisst weg. Alle vier Eigenschaften mit
 * !important, siehe der Hinweis im Kopf dieser Datei.
 * ------------------------------------------------------------- */

.pc-cr-go {
  flex: 1 1 200px;
  font-family: var(--pc-font-mono, droid-sans-mono), monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--pc-bg) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  cursor: pointer;
  min-height: 46px;
}

.pc-cr-go.is-setzen { background: var(--pc-gold) !important; }
.pc-cr-go.is-raus   { background: var(--pc-live) !important; }
.pc-cr-go.is-fertig { background: rgba(69, 217, 163, 0.22) !important; color: var(--pc-live) !important; }
.pc-cr-go.is-weg    { background: rgba(250, 67, 122, 0.2) !important; color: var(--pc-accent) !important; }

.pc-cr-go:disabled {
  cursor: default;
  opacity: 0.75;
}

/* ---------------------------------------------------------------
 * Die Schnellspiele
 * ------------------------------------------------------------- */

.pc-cr-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pc-cr-preset {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 8px 4px !important;
  cursor: pointer;
}

.pc-cr-preset:hover { border-color: var(--pc-gold) !important; }

.pc-cr-preset-num {
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--pc-text);
}

.pc-cr-preset-ziel {
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--pc-gold);
}

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

.pc-cr-hinweis {
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  font-weight: var(--pc-weight-page);
  color: var(--pc-muted);
  text-align: center;
  margin: 0 0 var(--pc-cr-luft) 0;
  min-height: 18px;
}

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

/* ---------------------------------------------------------------
 * Der Einsatzverlauf
 * ------------------------------------------------------------- */

#pcCrashFeed {
  border-radius: var(--pc-cr-radius);
  background: rgba(255, 255, 255, 0.025);
  padding: 14px 18px 12px 18px;
  margin: 0 0 var(--pc-cr-luft) 0;
}

.pc-cr-feed-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.pc-cr-feed-titel {
  font-family: var(--pc-font-page);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-cr-feed-zahl {
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--pc-text);
}

/* KEIN EIGENER SCROLLKASTEN MEHR, seit 7.3.0 und auf Roberts Vorgabe:
   "Die Einsätze sollen einfach drunter angezeigt werden."

   Bis dahin standen hier `max-height: 230px` und `overflow-y: auto`. Das
   war als Platzsparer gedacht und wurde zur Stoerung, sobald mehr als
   rund fuenf Einsaetze zusammenkamen: feedFuellen() schreibt das Markup
   der ganzen Liste neu, und im Flug laeuft der Zustandsabruf alle 450
   Millisekunden. Jeder Neuaufbau setzte scrollTop auf null zurueck - wer
   in der Liste nach unten sah, wurde zweimal je Sekunde nach oben
   gezogen. Robert hat es als "merkwuerdige hoch und runter scroll
   animation" gemeldet.

   Der Preis ist bekannt und gewollt: Bei vielen Mitspielern wird die
   Seite laenger. Genau das war die Vorgabe. */
.pc-cr-feed-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-cr-feed-zeile {
  display: grid;
  grid-template-columns: 1fr 82px 128px;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pc-cr-feed-zeile:first-child { border-top: none; }
.pc-cr-feed-zeile.is-ich { background: rgba(245, 213, 110, 0.05); }

/* Die Huelle clippt fuer die Ellipse, und ein Fokusrahmen laege damit
   ausserhalb. Polsterung plus negativer Aussenabstand schafft ihm Luft,
   ohne die Zeile zu verschieben - dieselbe Technik wie an der
   Trefferflaeche der Kopfzahlen seit 6.55.1.

   LINKS STEHT SEIT 7.5.0 EINE NULL, und das ist ein gemessener Befund.
   Mit `margin: -8px` ringsum begann die Huelle acht Pixel VOR der Zeile:
   am Rechner bei 236 statt 244, am Telefon bei 46 statt 54 - und der
   Kasten faengt dort schon bei 40 an. Sechs Pixel bis zum Rand, bei
   einer Huelle, die eine Trefferflaeche ist. Robert hat es als "links
   sehr eng bzw schaut fast raus" gemeldet.

   Die Luft fehlt dem Fokusrahmen dadurch nur links, und dort braucht er
   sie nicht: `.pc-pl` haengt in dieser Liste an .pc-cr-fname, und davor
   steht immer eine Rangbox. Ein Name OHNE Rangbox ist ein verdeckter
   oder geloeschter, und der bekommt gar keine Spielerkarte - feedZeile()
   in crash.js setzt die Klasse dann nicht. Oben, unten und rechts bleibt
   alles wie bisher. */
.pc-cr-feed-wer {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 8px 8px 8px 0;
  margin: -8px -8px -8px 0;

  /* DIE SCHRIFTGROESSE GEHOERT AN DIE ZEILE, NICHT NUR AN DEN NAMEN, und
     das ist ein gemessener Befund aus 7.3.0. Bis dahin setzte nur
     .pc-cr-fname seine 13px; die Zeile selbst erbte die 16px des
     Dokuments, und alles darin, was in em misst, rechnete gegen 16.

     Sichtbar wurde das an der Rangbox: Sie stand mit 16px neben einem
     Namen mit 13px, also 23 Prozent zu gross, und war die einzige Stelle
     im Projekt, an der die beiden auseinanderliefen. Robert hat sie als
     "extrem gross" gemeldet.

     Am Namen aendert sich dadurch nichts, .pc-cr-fname traegt dieselben
     13px weiterhin selbst. */
  font-size: 13px;
}

.pc-cr-fname {
  font-family: var(--pc-font-page);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-cr-anon {
  font-family: var(--pc-font-page);
  font-size: 13px;
  color: var(--pc-muted);
}

.pc-cr-feed-betrag {
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pc-text);
  text-align: right;
}

/* DER STAND DARF UMBRECHEN, seit 7.5.0, und das ist der zweite gemessene
   Befund an dieser Zeile.

   Er ist ein Flex mit `justify-content: flex-end`, und seine Spur im
   Grid ist fest (128 Pixel am Rechner, 108 am Telefon). Passen
   Multiplikator und Gewinn zusammen nicht hinein, laeuft ein solcher
   Flex am ANFANG ueber, also nach links - und zwar in die Nachbarspalte
   hinein. Im Browser gemessen, mit "128.44x" und "+1.250.000":

     Rechner  20 Pixel nach links, mitten in den Einsatz daneben
     Telefon  25 Pixel nach links, mitten in den Namen

   Genau das ist Roberts "und rechts die Punktezahl auch".

   `flex-wrap` faengt es ab, bevor es entsteht: Der Gewinn rutscht dann
   unter den Multiplikator, weiter rechtsbuendig. Die Zeile wird dabei
   hoeher, und das ist der richtige Tausch - eine Zahl, die in die
   Nachbarspalte laeuft, ist unlesbar, eine zweizeilige nicht. Im
   Normalfall aendert sich nichts, es bricht nur bei Bedarf.

   `min-width: 0` gehoert dazu: Ein Grid-Item traegt sonst `min-width:
   auto` und kann gar nicht erst unter seine Min-content-Breite
   schrumpfen - dann spraenge es die Spur, statt umzubrechen. */
.pc-cr-feed-stand {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 0;
  gap: 7px;
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 12.5px;
  font-weight: 700;
}

.pc-cr-raus     { color: var(--pc-text); }
.pc-cr-plus     { color: var(--pc-live); }
.pc-cr-minus    { color: var(--pc-accent); }
.pc-cr-dabei    { color: var(--pc-gold); }
.pc-cr-autoziel { color: var(--pc-muted); font-size: 11px; }

.pc-cr-feed-leer {
  font-family: var(--pc-font-page);
  font-size: 12.5px;
  color: var(--pc-muted);
  padding: 6px 0;
}

/* ---------------------------------------------------------------
 * Die drei Aufklapper
 *
 * Zeichengleich der Baustein des Roulettes: derselbe Grund, derselbe
 * Griff, derselbe Haken. Drei Aufklapper, die verschieden aussehen, waeren
 * drei Bausteine.
 * ------------------------------------------------------------- */

#pcCrashInfo,
.pc-cr-histbox,
.pc-cr-fairbox {
  border: none;
  border-radius: var(--pc-cr-radius);
  padding: 0;
  margin: 0 0 12px 0;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.pc-cr-summary {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--pc-font-page);
  font-size: 11.5px;
  font-weight: var(--pc-weight-page);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pc-muted);
  transition: color 0.2s ease;
}

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

.pc-cr-summary:hover,
details[open] > .pc-cr-summary { color: var(--pc-gold); }

.pc-cr-icon {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-left: auto;
  margin-top: 2px;
  flex-shrink: 0;
}

details[open] > .pc-cr-summary .pc-cr-icon { transform: rotate(-135deg); }

.pc-cr-info-inhalt,
.pc-cr-hist2-inhalt,
#pcCrashFair {
  padding: 0 20px 22px 20px;
}

/* Die Zahlenleiste bringt aus app.css ihre eigene Breite mit (70 Prozent
   des Elternteils, mit !important); im Aufklapper waeren das 70 Prozent
   von 70 Prozent. Dieselbe Ruecknahme wie im Roulette seit 6.71.0. */
.pc-crash-container .pc-overview {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 14px 0 !important;
}

/* ---------------------------------------------------------------
 * Nachweis und History
 * ------------------------------------------------------------- */

.pc-cr-fair-tab,
.pc-cr-hist-tab2 {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 14px 0;
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 12px;
}

.pc-cr-fair-tab th,
.pc-cr-fair-tab td,
.pc-cr-hist-tab2 th,
.pc-cr-hist-tab2 td {
  text-align: left;
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.pc-cr-fair-tab th,
.pc-cr-hist-tab2 th {
  color: var(--pc-muted);
  font-weight: var(--pc-weight-page);
  white-space: nowrap;
}

.pc-cr-fair-tab td,
.pc-cr-hist-tab2 td { color: var(--pc-text); }

.pc-cr-fair-tab code,
.pc-cr-hist-tab2 code {
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 11px;
  word-break: break-all;
  color: var(--pc-info);
}

.pc-cr-fair-trenner th {
  color: var(--pc-gold);
  padding-top: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
}

.pc-cr-fair-code {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0;
}

.pc-cr-fair-code code {
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--pc-live);
  white-space: pre;
}

.pc-cr-hist-tab2 td.is-klein  { color: var(--pc-accent); }
.pc-cr-hist-tab2 td.is-mittel { color: var(--pc-gold); }
.pc-cr-hist-tab2 td.is-gross  { color: var(--pc-live); }
.pc-cr-hist-tab2 td.is-plus   { color: var(--pc-live); }
.pc-cr-hist-tab2 td.is-minus  { color: var(--pc-accent); }

.pc-cr-hash { color: var(--pc-muted) !important; }

.pc-cr-hist-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 10px 0;
}

.pc-cr-hist-tab {
  font-family: var(--pc-font-page) !important;
  font-size: 11px !important;
  font-weight: var(--pc-weight-page) !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--pc-muted) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  cursor: pointer;
  white-space: nowrap;
}

.pc-cr-hist-tab.is-aktiv {
  color: var(--pc-bg) !important;
  background: var(--pc-gold) !important;
}

.pc-cr-hist-blaetter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pc-font-mono, droid-sans-mono), monospace;
  font-size: 11.5px;
  color: var(--pc-muted);
}

.pc-cr-hist-blatt {
  font-family: var(--pc-font-mono, droid-sans-mono), monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--pc-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  cursor: pointer;
}

.pc-cr-hist-blatt:disabled { opacity: 0.35; cursor: default; }

/* ---------------------------------------------------------------
 * Schmale Fenster
 * ------------------------------------------------------------- */

/* DIE BEIDEN BREITENSTUFEN SIND KEIN BEIWERK, sie sind ein gemessener
   Befund. Ohne sie stand die Huelle bei einem Fenster von 375 Pixeln auf
   235 Pixeln Breite und 70 Pixeln vom linken Rand: var(--pc-width) sind 70
   Prozent, und 70 Prozent von 335 ist genau das. Vom Verlauf ueber dem
   Spiel waren dadurch drei von zwanzig Pillen zu sehen statt sieben.
   Dieselben zwei Stufen tragen /primy/, /primy-bird/ und /daily/. */
@media (max-width: 1100px) {
  .pc-crash-container {
    width: 88%;
    --pc-cr-luft: 12px;
  }
}

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

  /* DER SPIELERNAME FAELLT AM TELEFON WEG, auf Roberts Vorgabe vom
     19.08.2026. Dieselbe Bewegung wie auf /primy/ seit 6.89.0: Wer spielt,
     weiss, wer er ist, und der Platz gehoert dem Einsatz.

     NUR DER NAME, NICHT DIE GANZE ZEILE. Das Guthaben daneben bleibt
     stehen - anders als beim Roulette, wo Robert beides herausgenommen
     hat. Und AUSGEBLENDET statt ausgebaut: An .pc-cr-ich haengt nichts
     weiter, aber der Zweig, der es fuellt, steht in leisteFuellen()
     unmittelbar neben dem des Guthabens, und dort ruft es
     window.pcKopfGuthaben() - die Kopfleiste laeuft darueber mit. Ein
     Schnitt im Markup waere ein Schnitt neben dieser Zeile. */
  .pc-cr-ich { display: none; }

  /* Ohne den Namen steht das Guthaben allein in der Zeile. Es soll dort
     bleiben, wo es war, also rechts - `space-between` haette es mit dem
     einzigen verbliebenen Kind an den linken Rand gezogen. */
  .pc-cr-wer { justify-content: flex-end; }

  .pc-cr-eingaben { gap: 10px; }

  /* Zwei Felder nebeneinander, der Knopf darunter ueber die volle Breite.
     Ein Knopf, der am Telefon neben zwei Feldern steht, waere rund 90
     Pixel breit und traege seinen Text nicht mehr. */
  .pc-cr-feld      { flex: 1 1 46%; }
  .pc-cr-feld-auto { flex: 1 1 40%; }
  .pc-cr-go        { flex: 1 1 100%; }

  .pc-cr-quicks { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pc-cr-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Die Betragsspalte faellt weg: Bei 375 Pixeln bleiben fuer den Namen
     sonst rund 90 Pixel, und dann steht dort nur noch eine Ellipse. Der
     Betrag steht in der Standspalte ohnehin als Gegenrechnung daneben. */
  .pc-cr-feed-zeile { grid-template-columns: 1fr 108px; }
  .pc-cr-feed-betrag { display: none; }

  #pcCrashBar { padding: 14px; }
  #pcCrashFeed { padding: 12px 14px 10px 14px; }

  .pc-cr-summary { padding: 14px 16px; }

  .pc-cr-info-inhalt,
  .pc-cr-hist2-inhalt,
  #pcCrashFair { padding: 0 16px 18px 16px; }

  .pc-cr-hist-tab2 { font-size: 11px; }
}

@media (max-width: 420px) {
  .pc-cr-quicks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pc-cr-konto-zahl { font-size: 17px; }
}