/*
 * Hinterhof-Craps: die zwei Würfel, die Marke, wer den Schützen hat, und die Knöpfe für Pass, Nicht-Pass, Augenzahl
 * und Einsatz. Anzeigeleiste, Brettrand, Abzeichen und Tafel stehen als Rahmen des Spielfelds in css/arena.css; hier
 * steht nur, was diesem Brett gehört, dazu das Bild des Wasserzeichens.
 *
 * NIE NUR EIN FARBTON. Der Schütze trägt eine Senfkante UND den Schriftzug „hat die Würfel"; eine stehende Marke
 * trägt einen Ring UND die Zahl darin. Jede Tippfläche misst mindestens 44 Pixel — in beide Richtungen.
 */

.ar-spielfeld[data-ar-spiel='craps'] {
  --ar-brettbreite: min(30rem, 100vw - 2 * var(--ar-luft));
  --ar-einheit: calc(var(--ar-brettbreite) / 6);
}

@supports (width: 1cqw) {
  .ar-spielfeld[data-ar-spiel='craps'] {
    --ar-brettbreite: min(30rem, 100cqw);
  }
}

@media (orientation: landscape) and (max-height: 30rem) {
  .ar-spielfeld[data-ar-spiel='craps'] {
    --ar-brettbreite: min(28rem, 100vw - 2 * var(--ar-luft) - 15rem);
  }

  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='craps'] {
      --ar-brettbreite: min(28rem, 100cqw - 15rem);
    }
  }
}

/* Auf dem Schreibtisch nimmt der Filztisch die volle Bühne — keine Rem-Deckelung mehr, das Zweispalten-Cockpit unten
   begrenzt das Tableau von selbst auf einen sinnvollen Anteil. */
@media (min-width: 64rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='craps'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

body:has(.ar-spielfeld[data-ar-spiel='craps']:not([hidden]))::before,
.ar-spielfeld[data-ar-spiel='craps'] .ar-brett::before {
  background-image: url(assets/bg-craps.webp);
}

:root {
  --ar-cr-filz: #1a1612;
  /* Der hellere Rand der Filzschattierung: der Lichtkegel über dem Tisch, der von oben auf das Tuch fällt. */
  --ar-cr-filz-hell: #2a2f28;
  /* Der Faden im Gewebe und die Tiefe unter der Bande: zwei Weißen und Schwarzen, die nur als Textur taugen. */
  --ar-cr-gewebe: rgb(255 255 255 / 0.025);
  --ar-cr-tiefe: rgb(0 0 0 / 0.5);
  /* Der Schlagschatten von Würfel und Jeton auf dem Tuch — ein Gegenstand, der auf etwas liegt, wirft einen. */
  --ar-cr-wurfschatten: rgb(0 0 0 / 0.55);
  /* Ein Wettfeld liegt eine Spur heller auf dem Filz als das Tuch daneben; beim Zeigen eine Spur mehr. */
  --ar-cr-feldgrund: rgb(255 255 255 / 0.04);
  --ar-cr-feldgrund-hell: rgb(255 255 255 / 0.1);
  --ar-cr-elfenbein: #e8e0cc;
  --ar-cr-kreide: #d8d2c2;
}

.ar-cr {
  display: grid;
  gap: 0.6rem;
  width: 100%;
}

@media (min-width: 30rem) {
  .ar-cr {
    gap: 0.85rem;
  }
}

/* ------------------------------------------------------------------ Würfel & Marke */

.ar-cr__tisch {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

/* Der Rand unten hält das Mini-Badge „Spielfläche“ der ersten Runde, das 0,6 rem über den Filz ragt, von dieser Zeile fern. */
.ar-cr__zug-satz {
  margin: 0 0 0.15rem;
  color: var(--ar-kreide);
  font-size: 0.95rem;
  text-align: center;
}

/*
 * WER DIE WÜRFEL HAT, TRÄGT EINE SENFKANTE UND EIN WORT: „Du bist der Schütze“. Bei den anderen Schirmen steht dieselbe
 * Kante durchsichtig da, damit die Zeile mit dem Wechsel des Schützen nicht ihre Höhe ändert.
 */
.ar-cr__rolle {
  display: block;
  padding: 0.2rem 0.6rem;
  border: 2px solid transparent;
}

.ar-cr__rolle[data-ar-cr-ich] {
  border-color: var(--ar-funke);
}

/*
 * DAS TABLEAU: KREIDE AUF NASSEM KOPFSTEINPFLASTER STATT EINER LEEREN FLÄCHE. Vor dem ersten Wurf stand hier nichts
 * als schwarzer Grund — der gemeldete Befund. Jetzt trägt es die Wettlinien, die Zahlen-Boxen und liegt sichtbar
 * unter den Würfeln, gleich ob schon geworfen wurde oder nicht.
 *
 * UND ES IST WOLLTUCH. Über der Schattierung liegen zwei sehr feine Schraffuren im rechten Winkel zueinander — ein
 * Gewebe von vier Pixeln Rapport, kaum über der Wahrnehmungsschwelle. Das ist ein Halbtonraster und kein Verlauf als
 * Fläche: Die eisernen Verbote lassen Vignette, Halbtonraster und Korn ausdrücklich zu, und der GEGENSTAND Filz darf
 * seine Schattierung tragen (README, Abschnitt 8, Ziffer 16). Die Tiefe unter der Bande ist ein harter Streifen und
 * kein weicher Schatten; dasselbe gilt für den Schlagschatten von Würfel und Jeton.
 */
.ar-cr__feld {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 0.6rem 1rem;
  border: 1px solid var(--ar-kante);
  background:
    repeating-linear-gradient(45deg, var(--ar-cr-gewebe) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, var(--ar-cr-gewebe) 0 1px, transparent 1px 4px),
    radial-gradient(140% 100% at 50% 0%, var(--ar-cr-filz-hell) 0%, var(--ar-cr-filz) 65%);
  box-shadow: inset 0 0 0 1px var(--ar-noir), inset 0 6px 0 var(--ar-cr-tiefe);
}

/* Ein edles Würfelpaar bleibt handlich, auch auf einer breiten Bühne — vorher wuchs es mit `--ar-einheit` auf über
   650px an, sobald das Tableau die volle Breite bekam. */
.ar-cr__wuerfel-paar {
  display: flex;
  gap: 0.6rem;
  width: min(100%, clamp(8.75rem, 20vw, 13.75rem));
}

.ar-cr__wuerfel-bild {
  display: block;
  width: 50%;
  height: auto;
  filter: drop-shadow(0 3px 0 var(--ar-cr-wurfschatten));
}

/*
 * DER WÜRFEL ROLLT IN HARTEN BILDERN. Während er rollt, wechselt er alle rund 90 ms zufällig sein Symbol — kein
 * Übergang auf den Augen selbst, das ist dasselbe harte Rastern wie die Trommel des Duells und keine ausrollende
 * Bewegung. Die Drehung darunter ist ein zweiter, unabhängiger Layer: der ganze Würfel taumelt übers Pflaster, seine
 * Augen bleiben hart geschnitten.
 */
.ar-cr__wuerfel-bild--rollt {
  animation: ar-cr-rollen 0.3s linear infinite;
}

@keyframes ar-cr-rollen {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  25% {
    transform: rotate(80deg) translate(2px, -3px);
  }
  50% {
    transform: rotate(190deg) translate(-2px, 1px);
  }
  75% {
    transform: rotate(280deg) translate(1px, 2px);
  }
  100% {
    transform: rotate(360deg) translate(0, 0);
  }
}

/*
 * DER AUFPRALL: Das Paar sackt zwei harte Bilder lang in den Filz, dann liegt es. Kein Nachwippen — zwei Stücke
 * Elfenbein auf Wolltuch federn nicht, sie bleiben liegen.
 */
.ar-cr__wuerfel-paar[data-ar-cr-schlag] {
  animation: ar-cr-schlag 180ms steps(2);
}

@keyframes ar-cr-schlag {
  0% {
    translate: 0 -6px;
  }

  100% {
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-cr__wuerfel-bild--rollt,
  .ar-cr__wuerfel-paar[data-ar-cr-schlag] {
    animation: none;
  }
}

.ar-g-cr-wuerfel {
  fill: url(#ar-g-cr-elfenbein-grad);
  stroke: var(--ar-noir);
  stroke-width: 3;
}

.ar-g-cr-pip {
  fill: var(--ar-noir);
}

.ar-g-cr-filz {
  fill: var(--ar-cr-filz);
}

.ar-g-cr-marke {
  fill: none;
  stroke: var(--ar-funke);
  stroke-width: 5;
}

.ar-g-cr-marke-text {
  fill: var(--ar-funke);
  font-family: var(--ar-schrift-plakat);
  font-size: 42px;
}

.ar-g-cr-haken {
  fill: none;
  stroke: var(--ar-funke);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ar-cr__summe {
  margin: 0;
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: max(1.6rem, min(2.6rem, calc(var(--ar-einheit) * 0.5)));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}

.ar-cr__marke-status {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.9rem;
  text-align: center;
}

/* ------------------------------------------------------------------ Der Puck */

.ar-cr__puck-kopf {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  align-self: start;
}

.ar-cr__puck-wort {
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
}

.ar-cr__puck {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 2px solid var(--ar-cr-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
}

.ar-cr__puck--off {
  background: var(--ar-noir-3);
  color: var(--ar-kreide-2);
}

.ar-cr__puck--on {
  background: var(--ar-cr-kreide);
  color: var(--ar-noir);
  font-weight: 700;
}

/* ------------------------------------------------------------------ Wettzonen: Pass Line, Zahlen, Nicht-Pass */

/*
 * DIE ZONEN SIND IHR EIGENER MASSCONTAINER. Sechs Zahlenboxen zu 44 Pixeln brauchen samt Fugen und Rahmen 300 Pixel, und
 * auf 360 und 320 Pixeln Fensterbreite hat der Filz innen nur 287 und 247: Das Raster zog den Tisch breiter als die
 * Bühne, und sie lief um 3 und 43 Pixel seitwärts. Darunter stehen die Boxen deshalb drei zu zwei, und der Einwurf rückt
 * enger zusammen (weiter unten). Gemessen wird an den Zonen und nicht am Fenster, denn die Breite des Filzes hängt an
 * Bühne, Brettrand und Polsterung und nicht an einer Zahl, die man aus dem Fenster zurückrechnen müsste.
 */
.ar-cr__zonen {
  container: ar-cr-zonen / inline-size;
  display: grid;
  justify-items: stretch;
  gap: 0.4rem;
  width: 100%;
}

/*
 * DER FILZ IST DER SCHALTER. Jedes Feld — PASS LINE, NICHT-PASS, die sechs Boxen, die fünf Einwurfzahlen — ist ein
 * echter Knopf mit mindestens 44 Pixeln in beide Richtungen; darunter liegt nur noch die Jetonleiste. Vorher war das
 * Tableau ein Bild und alles Bedienbare stand als fünf gestapelte Knopfreihen darunter.
 *
 * ES HEISST `__wettfeld` UND NICHT `__feld`. Der Filzkasten weiter oben trägt diesen Namen seit es ihn gibt, und ein
 * zweiter Block desselben Namens erbt dessen Eigenschaften: Im ersten Anlauf überschrieb das `display: flex` hier das
 * `display: grid` des Kastens, und Würfel, Summe und Tableau standen nebeneinander in einer Zeile statt übereinander.
 * Ein Klassenname wird einmal vergeben (CLAUDE.md, Abschnitt 10).
 *
 * `.ar-cr__wettfeld` trägt die gemeinsame Grundstellung; was ein Feld unterscheidet, steht in seiner --Variante.
 */
.ar-cr__wettfeld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* Ein `<button>` bemisst sich von Haus aus nach seinem Inhalt und nicht nach seiner Zelle: Ohne diese Breite
     standen die sechs Zahlenboxen als 21 Pixel schmale Streifen im Raster — unter jeder Tippflächen-Grenze. */
  width: 100%;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--ar-cr-kreide);
  border-radius: 0;
  background: var(--ar-cr-feldgrund);
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background-color 90ms linear, border-color 90ms linear;
}

/* Ein Knopf auf dem Filz sagt beim Zeigen, dass er einer ist — ohne Schein, nur eine Spur mehr Licht. */
.ar-cr__wettfeld:is(button) {
  cursor: pointer;
}

.ar-cr__wettfeld:is(button):hover,
.ar-cr__wettfeld:is(button):focus-visible {
  background: var(--ar-cr-feldgrund-hell);
}

.ar-cr__wettfeld:focus-visible {
  outline: 2px solid var(--ar-funke);
  outline-offset: 2px;
}

/* Wo der eigene Stapel liegt: Senfkante UND der Jeton mit dem Betrag darauf — nie die Farbe allein. */
.ar-cr__wettfeld[data-ar-cr-eigen] {
  border-color: var(--ar-funke);
}

.ar-cr__wettfeld[data-ar-nein] {
  border-color: var(--ar-rot);
}

/*
 * PASS LINE UND NICHT-PASS STEHEN ALS PAAR NEBENEINANDER, jede mit ihrem [?]. Sie standen als zwei Balken über die volle
 * Breite, einer über und einer unter den Zahlen: auf dem Telefon zwei Zeilen Filz für zwei Wörter. Das Paar ist der
 * Bezugspunkt für das Etikett an der Pass Line und für die beiden Klappen — so reichen sie über die ganze Reihe statt
 * über eine halbe Kachel.
 */
.ar-cr__linien {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.ar-cr__linie {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 0;
}

/*
 * Das Wort oben, darunter eine Zeile für den Ausgang und die Jetons. Beide teilen sich diese Zeile, denn sie stehen nie
 * zugleich darin: Der Stempel kommt nach einer Serie, und die neuen Jetons erst, wenn die nächste gesetzt wird. So hält
 * die Kachel ihre Höhe, und nichts darunter rückt, wenn der Stempel kommt.
 *
 * Oben hält das Feld Luft für das Etikett, das auf seiner Kante liegt. Das Wort steht auf dem Telefon kleiner und enger
 * als auf dem Schreibtisch: So passt „NICHT-PASS“ auf 375 Pixeln neben sein [?] in eine Zeile, und die Kachel bleibt
 * eine Zeile niedriger. Wo es doch umbricht — noch schmaler —, bricht es am Bindestrich.
 */
.ar-cr__linie .ar-cr__wettfeld--linie {
  display: grid;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'wort wort'
    'aus jetons';
  align-content: start;
  gap: 0.2rem 0.3rem;
  min-width: 0;
  padding: 0.7rem 0.35rem 0.4rem;
}

.ar-cr__linie-wort {
  grid-area: wort;
  color: var(--ar-cr-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.ar-cr__wettfeld--linie > .ar-cr__ausgang {
  grid-area: aus;
  align-self: center;
}

.ar-cr__wettfeld--linie > .ar-cr__wettfeld-jetons {
  grid-area: jetons;
}

/*
 * DER TIPP AN DER PASS LINE LIEGT ALS ETIKETT AUF IHRER OBERKANTE, keine Zeile im Feld: Stünde er in der Zeile, rückte
 * der ganze Filz beim ersten Jeton um seine Höhe nach oben, und der zweite Tipp träfe das Nachbarfeld. Deshalb verdeckt er
 * etwas, und deshalb steht er nur, solange der Schein leer ist (brett.js). Harte Kante in Senf, kein Schein; auf einem
 * sehr schmalen Telefon schneidet er mit Auslassungspunkten ab, statt in die Zeile zu brechen. Er misst sich am Paar und
 * nicht an der halben Kachel darunter: Dort bliebe von ihm „Tipp: Setze hi…“.
 */
.ar-cr__linie-tipp {
  position: absolute;
  z-index: 1;
  top: -0.55rem;
  left: 0.4rem;
  max-width: calc(100% - 0.8rem);
  overflow: hidden;
  padding: 0.05rem 0.35rem;
  border: 2px solid var(--ar-funke);
  background: var(--ar-noir);
  color: var(--ar-kreide);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/*
 * DAS [?]-KLAPP-FELD, NICHT `title`: Ein Tooltip zeigt kein Telefon, und ein gesperrter Knopf zeigt ihn auch am
 * Schreibtisch nicht (Haus-Regel). `<summary>` ist von Haus aus per Tastatur UND per Antippen erreichbar — dieselbe
 * 44-Pixel-Tippfläche wie jeder andere Knopf dieses Tableaus.
 */
.ar-cr__info-knopf {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--ar-kante-griff);
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.ar-cr__info-knopf::-webkit-details-marker {
  display: none;
}

.ar-cr__info[open] > .ar-cr__info-knopf {
  border-color: var(--ar-funke);
  color: var(--ar-funke);
}

/*
 * DIE KLAPPE HÄNGT AM PAAR UND NICHT AM [?]. Sie hing rechts am Knopf, als der am rechten Ende einer ganzen Zeile stand;
 * mit `left: 0` lief sie auf 390 px 175 Pixel über den Fensterrand hinaus — aufgeklappt, und deshalb hat es kein Lauf
 * gesehen, der nur zugeklappte Bretter misst. Seit das [?] der Pass Line mitten in der Reihe steht, liefe sie am Knopf
 * wieder hinaus, diesmal nach links. Sie steht deshalb unter dem Paar, von der Außenkante ihrer eigenen Linie aus.
 */
.ar-cr__info-text {
  position: absolute;
  z-index: 1;
  top: calc(100% + 0.3rem);
  left: 0;
  width: min(100%, 30rem);
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ar-kante-griff);
  background: var(--ar-noir);
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
  line-height: 1.4;
}

.ar-cr__linie--nicht .ar-cr__info-text {
  right: 0;
  left: auto;
}

/* Die Zeile hält die Höhe des eigenen Jetons (1,5rem) und nicht die der fremden Marken: Mit 1,1rem wuchs jede Kachel
   beim ersten eigenen Jeton um sechs Pixel, und der Filz darunter rückte mit. */
.ar-cr__wettfeld-jetons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.15rem;
  min-height: 1.5rem;
}

.ar-cr__chip {
  width: 1.1rem;
  height: 1.1rem;
  filter: drop-shadow(0 1px 0 var(--ar-cr-wurfschatten));
}

/* Der eigene Jeton trägt seinen Betrag — eine Scheibe ohne Zahl sagt nicht, worum gespielt wird. */
.ar-cr__jeton {
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: 0.2rem;
  border: 2px solid var(--ar-noir);
  border-radius: 50%;
  background: var(--ar-funke);
  color: var(--ar-noir);
}

.ar-cr__jeton-zahl {
  font-family: var(--ar-schrift-mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}

.ar-cr__zahlen,
.ar-cr__einwurf {
  display: grid;
  gap: 0.3rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-cr__zahlen {
  grid-template-columns: repeat(6, 1fr);
}

/* Die fünf Einwurfzahlen liegen wie am echten Tisch in der Mitte — schmaler als die Boxen, aber ebenso anklickbar. */
.ar-cr__einwurf {
  grid-template-columns: repeat(5, 1fr);
}

/*
 * ZAHL, QUOTE UND DARUNTER EINE ZEILE, die sich Stempel und Jetons teilen — dieselbe Bauform wie an den Linien. Als Spalte
 * aus lauter Zeilen wuchs jede Box beim Stempel nach einer Serie um rund 13 Pixel und schob den Einwurf und die
 * Jetonleiste darunter weg; in der Haltezeit, in der der nächste Tipp fällt.
 */
.ar-cr__wettfeld--box,
.ar-cr__wettfeld--einwurf {
  position: relative;
  display: grid;
  grid-template-areas:
    'zahl'
    'quote'
    'fuss';
  justify-items: center;
  align-content: center;
  gap: 0.2rem;
  padding: 0.4rem 0.2rem;
  border-width: 1px;
  border-style: dashed;
  border-color: var(--ar-kante-griff);
  text-align: center;
}

.ar-cr__wettfeld--box {
  min-height: 3.5rem;
}

:is(.ar-cr__wettfeld--box, .ar-cr__wettfeld--einwurf) > :is(.ar-cr__ausgang, .ar-cr__wettfeld-jetons) {
  grid-area: fuss;
  align-self: center;
}

@container ar-cr-zonen (max-width: 18.74rem) {
  .ar-cr__zahlen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ar-cr__neben {
    padding: 0.2rem;
  }

  .ar-cr__einwurf {
    gap: 0.2rem;
  }
}

/* Aufdrucke auf dem Filz: Plakatschrift ist hier richtig (eine Zahl, die zeigt, ohne zu zählen), gleich breite
   Ziffern trotzdem — sechs Boxen nebeneinander, und die 4 ist in dieser Schrift schmaler als die 10. */
.ar-cr__zahlbox-zahl {
  color: var(--ar-cr-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.ar-cr__einwurf-zahl {
  color: var(--ar-cr-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* Die Quote steht unter jeder Zahl — in den Boxen wie im Einwurf. Sie stand nur im aria-label, also für die Hälfte
   des Tableaus nirgends, wo man sie lesen konnte. */
.ar-cr__zahlbox-quote,
.ar-cr__einwurf-quote {
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift-mono);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

/* ------------------------------------------------------------------ Der Ausgang auf dem Filz */

/*
 * WER GEWONNEN HAT, STEHT NACH DEM WURF AUF DEM FILZ. Gold für die Linie und die Augenzahl, die getroffen haben, Rot
 * für die Gegenlinie, Kreide für den Einsatz, der beim Come-Out auf die Zwölf zurückgeht. Es steht nur in der Pause
 * zwischen zwei Serien da (`ergebnisOffen()` in brett.js) — danach ist es eine neue Serie.
 *
 * DAS WORT STEHT IM FELD, NICHT NUR DIE FARBE: „Gewinnt", „Verliert", „Zurück".
 */
.ar-cr__ausgang {
  font-family: var(--ar-schrift-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ar-cr__wettfeld[data-ar-cr-aus='gewinn'] {
  border-style: solid;
  border-color: var(--ar-funke);
  background: color-mix(in srgb, var(--ar-funke) 22%, transparent);
  color: var(--ar-funke);
}

.ar-cr__wettfeld[data-ar-cr-aus='verlust'] {
  border-style: solid;
  border-color: var(--ar-rot);
  color: var(--ar-rot);
}

.ar-cr__wettfeld[data-ar-cr-aus='zurueck'] {
  border-style: solid;
  border-color: var(--ar-kreide-2);
  color: var(--ar-kreide-2);
}

/*
 * DAS BANNER UNTER DEM TISCH: „TEST gewinnt 60 Chips auf der Pass Line." Es steht nur, wenn wirklich jemand gewonnen
 * hat; eine Serie ohne Gewinner sagt das der Befund darunter. Leer trägt es keine Kante und keine Höhe — ein leerer
 * Rahmen, der den halben Abend dasteht, ist eine Zusage, die nicht eingelöst wird.
 */
.ar-cr__banner {
  margin: 0;
}

.ar-cr__banner-text {
  display: block;
  padding: 0.4rem 0.6rem;
  border: 2px solid var(--ar-funke);
  color: var(--ar-funke);
  font-family: var(--ar-schrift-mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}

/* ------------------------------------------------------------------ Nebenwetten */

/*
 * Die fünf Einwurfzahlen sind mit EINEM Wurf entschieden, die sechs Boxen laufen über die ganze Serie, die beiden
 * Linien womöglich über ein Dutzend Würfe. Das stand nirgends, und der Filz sah aus wie dreizehn gleichwertige
 * Felder. Jetzt trägt jeder der beiden Zahlenblöcke seine Aufschrift — und erst damit ist zu sehen, dass die 8 oben
 * und die 12 unten zwei verschiedene Wetten sind.
 */
.ar-cr__neben {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  padding: 0.3rem;
  border: 1px dashed var(--ar-kante-griff);
}

/*
 * Wort und Satz laufen als EIN Text: Als zwei Kästen in einer umbrechenden Zeile stand der Satz der Zahlen auf dem
 * Telefon ganz unter dem Wort und brach dort noch einmal um — drei Zeilen Aufschrift über sechs Zahlen.
 */
.ar-cr__neben-kopf {
  margin: 0;
  line-height: 1.35;
}

.ar-cr__neben-wort {
  color: var(--ar-cr-kreide);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ar-cr__neben-satz {
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
}

/* Eine stehende Marke trägt einen Ring UND die Zahl darin — hier zusätzlich den Puck UND eine Senfkante auf der Box. */
.ar-cr__wettfeld--marke {
  border-style: solid;
  border-color: var(--ar-funke);
}

.ar-cr__wettfeld--marke .ar-cr__zahlbox-zahl {
  color: var(--ar-funke);
}

.ar-cr__wettfeld--box .ar-cr__puck {
  position: absolute;
  top: -0.6rem;
  right: -0.4rem;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.5rem;
}

/* ------------------------------------------------------------------ Spielerliste */

.ar-cr__spieler {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-cr__platz {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

.ar-cr__platz[data-ar-cr-schuetze] {
  border-color: var(--ar-funke);
  box-shadow: inset 4px 0 0 0 var(--ar-funke);
}

.ar-cr__marke {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
}

.ar-cr__name {
  flex: 1;
  overflow-wrap: anywhere;
}

.ar-cr__wette {
  flex: none;
  color: var(--ar-kreide-2);
  font-size: 0.82rem;
}

/* Der Becher am Namen des Schützen — ein Bild statt des Worts „(Schütze)" in einer ohnehin vollen Zeile. */
.ar-cr__becher {
  width: 0.95rem;
  height: 0.95rem;
  margin-left: 0.35rem;
  vertical-align: -0.1rem;
}

.ar-g-cr-becher {
  fill: var(--ar-funke);
}

.ar-g-cr-becher-kante {
  fill: none;
  stroke: var(--ar-cr-kreide);
  stroke-width: 2.4;
  stroke-linecap: round;
}

/*
 * WAS DIE SERIE EINGEBRACHT HAT, STEHT IN DER ZEILE: „+60", „−25", „±0". Es stand nirgends — die Chips änderten sich
 * still in der Plakette darüber, und wer nicht mitgerechnet hatte, erfuhr es erst in der Schlussrechnung.
 */
.ar-cr__saldo {
  flex: none;
  min-width: 2.6rem;
  font-family: var(--ar-schrift-mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  hyphens: none;
}

.ar-cr__saldo[data-ar-cr-saldo='gewinn'] {
  color: var(--ar-gruen);
}

.ar-cr__saldo[data-ar-cr-saldo='verlust'] {
  color: var(--ar-rot);
}

.ar-cr__saldo[data-ar-cr-saldo='null'] {
  color: var(--ar-kreide-2);
}

/* ------------------------------------------------------------------ Einsatz */

.ar-cr__einsatz {
  display: grid;
  gap: 0.4rem;
}

/* Die Jetonleiste: vier Scheiben, eine davon gewählt. Sie ist alles, was unter dem Filz noch an Wahl übrig ist. */
.ar-cr__werte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr));
  gap: 0.4rem;
}

.ar-cr__wert {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.3rem;
}

.ar-cr__wert-zahl {
  font-family: var(--ar-schrift-mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ar-cr__knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.ar-cr__knopf {
  display: grid;
  gap: 0.1rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.4rem;
  text-align: center;
}

.ar-cr__wert[aria-pressed='true'],
.ar-cr__knopf[aria-pressed='true'] {
  border-color: var(--ar-funke);
  color: var(--ar-funke);
}

.ar-cr__wert[aria-disabled='true'],
.ar-cr__knopf[aria-disabled='true'] {
  border-color: var(--ar-kante-griff);
  outline-color: var(--ar-kante-griff);
  background: var(--ar-noir);
  color: var(--ar-kreide-2);
  cursor: default;
}

.ar-cr__wert[data-ar-nein],
.ar-cr__knopf[data-ar-nein] {
  translate: 3px 0;
  border-color: var(--ar-rot);
}

.ar-cr__satz {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.ar-cr__setzen {
  min-height: 3rem;
  font-size: 1.05rem;
}

/* ------------------------------------------------------------------ Das Dock */

/*
 * JETONS, „EINSÄTZE LÖSCHEN“ UND „SETZEN“ STEHEN IM DAUMENDOCK DES RAHMENS (`.ar-dock`): Auf dem Telefon im Hochformat
 * kleben sie am unteren Rand der Bühne, solange die in sich rollt — gelegt wird oben auf dem Filz, gesetzt unter dem
 * Daumen. Leer ist das Dock, wo niemand legt, und dann hat es keinen Kasten. Das Raster gibt den Knöpfen ihre Breite.
 */
.ar-cr__dock {
  display: grid;
  gap: 0.4rem;
}

.ar-cr__dock:empty {
  display: none;
}

/* ------------------------------------------------------------------ Runden-Journal */

/*
 * ALLE FÜNF SERIEN AUF EINEN BLICK — nicht zu verwechseln mit dem Wurf-Journal darüber, das die Würfe der
 * LAUFENDEN Serie zeigt und nach ihrem Ende wieder leer ist. Der Playtest hat dieses hier vermisst: „Rechts fehlt
 * eine permanente Übersicht darüber, wer in welcher Runde wie viel gesetzt und gewonnen hat."
 */
.ar-cr__buch {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
}

.ar-cr__buch-titel {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ar-cr__buch-leer {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

.ar-cr__buch-liste,
.ar-cr__buch-posten-liste {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-cr__buch-serie {
  display: grid;
  gap: 0.15rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

.ar-cr__buch-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  margin: 0;
  font-size: 0.72rem;
}

.ar-cr__buch-nr {
  color: var(--ar-kreide-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Die gefallenen Augen: gleich breite Ziffern, kein Trennstrich mitten in einer Zahl. */
.ar-cr__buch-augen {
  color: var(--ar-cr-elfenbein);
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-cr__buch-ausgang {
  margin-left: auto;
  color: var(--ar-funke);
}

/* Die Feldspalte ist die dehnbare, nicht der Name: Seit ein Schein drei Posten trägt, steht dort „Pass · Platz 8 ·
   Einwurf 11“, und als `auto` hielte diese eine Zeile das ganze Journal auf. */
.ar-cr__buch-posten {
  display: grid;
  grid-template-columns: 0.9rem auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
}

.ar-cr__buch-marke {
  width: 0.9rem;
  height: 0.9rem;
}

.ar-cr__buch-name {
  color: var(--ar-kreide-2);
  overflow-wrap: anywhere;
}

.ar-cr__buch-feld {
  color: var(--ar-kreide-2);
  overflow-wrap: anywhere;
  text-align: right;
}

.ar-cr__buch-einsatz,
.ar-cr__buch-saldo {
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-cr__buch-einsatz {
  color: var(--ar-kreide-2);
}

.ar-cr__buch-saldo {
  color: var(--ar-kreide);
  font-weight: 700;
  text-align: right;
}

.ar-cr__buch-saldo[data-ar-cr-saldo='gewinn'] {
  color: var(--ar-gruen);
}

.ar-cr__buch-saldo[data-ar-cr-saldo='verlust'] {
  color: var(--ar-rot);
}

/* ------------------------------------------------------------------ Wurf-Journal */

/*
 * DIE WÜRFE DER LAUFENDEN SERIE, NICHT NUR IHR BEFUND. Rechts unter der Spielerliste klaffte auf dem Schreibtisch
 * eine Leerfläche — der gemeldete Befund. `sicht.spiel.rollen` lag längst im Client, nur ungenutzt.
 */
.ar-cr__journal {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-cr__journal-zeile {
  padding: 0.3rem 0.5rem;
  border-left: 2px solid var(--ar-kante);
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ar-cr__journal-zeile:last-child {
  border-left-color: var(--ar-funke);
  color: var(--ar-kreide);
}

/* ------------------------------------------------------------------ Befund */

.ar-cr__befund {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.9rem;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ Abrechnung */

.ar-cr__spieler--abrechnung {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

.ar-cr__spieler--abrechnung .ar-cr__platz[data-ar-cr-schuetze] {
  border-color: var(--ar-kante);
  box-shadow: none;
}

/* ------------------------------------------------------------------ Schreibtisch */

@media (min-width: 64rem) and (min-height: 30.0625rem) {
  /*
   * DER FILZ BEKOMMT MEHR ALS DIE HÄLFTE. Beide Spalten standen auf 1fr, und rechts lagen damit siebenhundert Pixel
   * für zwei Namenszeilen und ein Journal, das vor dem ersten Wurf leer ist — während links dreizehn Wettfelder
   * gedrängt standen. Der Tisch ist das Brett; die Liste daneben ist eine Randspalte.
   */
  /*
   * VIER ZEILEN RECHTS, EINE SPALTE LINKS. Banner und Wurf-Journal stehen seit dem Umbau IM Filzblock (sie erzählen,
   * was die Würfel getan haben, und gehören zu ihnen); rechts bleiben Spielerliste, Einsatz, das Dock mit Jetons und
   * „Setzen“ und das Runden-Journal. Das Journal nimmt seine Zeile mit `minmax(0, 1fr)` — sonst stand unter der kurzen
   * Spielerliste eine Leerfläche von mehreren hundert Pixeln, während daneben der Filz über die volle Höhe lief.
   */
  .ar-cr {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      'tisch spieler'
      'tisch einsatz'
      'tisch dock'
      'tisch buch'
      'befund befund';
    align-content: start;
    gap: 0.75rem 1.5rem;
  }

  .ar-cr > .ar-cr__buch {
    grid-area: buch;
  }

  .ar-cr > .ar-cr__dock {
    grid-area: dock;
  }

  .ar-cr > .ar-cr__tisch {
    grid-area: tisch;
    align-content: start;
  }

  /* Die Kästen der rechten Spalte stehen an ihrer Oberkante, nicht in der Mitte ihrer Zeile. */
  .ar-cr > .ar-cr__spieler,
  .ar-cr > .ar-cr__einsatz,
  .ar-cr > .ar-cr__dock,
  .ar-cr > .ar-cr__buch {
    align-content: start;
    align-self: start;
  }

  .ar-cr > .ar-cr__spieler {
    grid-area: spieler;
  }

  .ar-cr__linie-wort {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
  }

  .ar-cr > .ar-cr__einsatz {
    grid-area: einsatz;
  }

  .ar-cr > .ar-cr__befund {
    grid-area: befund;
  }
}