/*
 * Hinterhof-Craps: der Casinotisch auf der Tischbühne (js/kulisse.js) mit den Schildern der Plätze, darunter der Filz mit
 * Pass, Nicht-Pass, Boxen und Einwurf, die Jetonleiste und das Runden-Journal. Anzeigeleiste, Brettrand, Abzeichen und
 * Tafel stehen als Rahmen des Spielfelds in css/arena.css; hier steht nur, was diesem Brett gehört.
 *
 * NIE NUR EIN FARBTON. Der Schütze trägt am Schild eine Senfkante UND den Becher; 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) - var(--ar-seite));
  }

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

/* 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);
    }
  }
}

: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;
  }
}

/* ------------------------------------------------------------------ Die Bühne */

/*
 * DER CASINOTISCH STEHT OBEN, und hochkant fast quadratisch: So steht der ganze Aufdruck im Bild, von den Boxen an der
 * Bank bis zur Pass Line, und die Enden des Tisches laufen links und rechts aus dem Bild. Auf dem Schreibtisch steht er
 * links neben dem Filz (unten bei den Breiten), auf einem Telefon quer flach und ganz.
 *
 * UNTER IHM STEHEN BANNER UND WURFLISTE: Sie erzählen, was die Würfel getan haben, und gehören zu ihnen. Sie standen
 * im Filzblock, als die Würfel dort lagen; dort schoben sie in einer langen Serie das Dock mit „Setzen“ aus dem Bild.
 */
.ar-cr__links {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-width: 0;
}

.ar-cr__buehne {
  position: relative;
}

.ar-cr__buehne > .ar-kulisse {
  width: 100%;
  aspect-ratio: 1.1;
  border: 2px solid var(--ar-kante);
}

@media (orientation: landscape) and (max-height: 30rem) {
  .ar-cr__buehne > .ar-kulisse {
    aspect-ratio: 2.4;
  }
}

/*
 * DER AUFDRUCK AUF DEM FILZ: Rahmen und Schrift in Elfenbein, wie gedruckt — eine Zeichnung in Bildpunkten der Bühne,
 * die mit ihr wächst. Er sagt dem Auge, wo die Jetons liegen; gesetzt wird auf dem Filz darunter.
 */
.ar-cr__buehne .ar-kulisse__platte > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ar-g-cr-druck { fill: none; stroke: var(--ar-cr-elfenbein); stroke-width: 5; }
.ar-g-cr-druck-zahl { fill: var(--ar-cr-elfenbein); font-family: var(--ar-schrift-plakat); font-size: 84px; }
.ar-g-cr-druck-zahl--klein { font-size: 60px; }
.ar-g-cr-druck-quote { fill: var(--ar-cr-elfenbein); font-family: var(--ar-schrift-mono); font-size: 34px; }
.ar-g-cr-druck-quote--klein { font-size: 28px; }
.ar-g-cr-druck-wort { fill: var(--ar-cr-elfenbein); font-family: var(--ar-schrift-plakat); font-size: 48px; letter-spacing: 6px; }
.ar-g-cr-puck { fill: var(--ar-noir); stroke: var(--ar-cr-kreide); stroke-width: 4; }
.ar-g-cr-puck--an { fill: var(--ar-cr-kreide); stroke: var(--ar-noir); }
.ar-g-cr-puck-wort { fill: var(--ar-cr-kreide); font-family: var(--ar-schrift-plakat); font-size: 30px; }
.ar-g-cr-puck-wort--an { fill: var(--ar-noir); }

/* Die Kante des Pucks trägt seine Farbe: dunkel unter OFF, hell unter ON. */
.ar-cr__buehne .ar-kulisse__scheibe-kante[data-ar-ku-art='puck-an'] {
  background: var(--ar-kreide-2);
}

/* Die Summe neben dem Paar: eine Schiefertafel mit Messingrand, die Zahl in Kreide, wie die Marke am Stammtisch. */
.ar-cr__buehne .ar-kulisse__platte:has(.ar-cr__summe-zahl) {
  border: 0.05em solid var(--ar-ku-messing);
  background: var(--ar-noir);
}

.ar-cr__summe-zahl {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ Der Filz */

.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);
}

/*
 * DER FILZ, AUF DEM GESETZT WIRD: die Wettlinien, die Zahlen-Boxen und der Einwurf, jedes Feld ein Knopf. Gewürfelt wird
 * auf der Bühne darüber; hier liegt, was man anfasst.
 *
 * 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);
}

.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__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 der Abrechnung */

.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;
}

/*
 * Wie beim Roulette daneben: Senfkante und dunkler Grund. Der allgemeine gewählte Knopf der Arena steht auf Kreide, und
 * Senf darauf hielt 1,86:1.
 */
.ar-cr__wert[aria-pressed='true'],
.ar-cr__wert[aria-pressed='true']:hover,
.ar-cr__knopf[aria-pressed='true'] {
  border-color: var(--ar-funke);
  background: var(--ar-noir-3);
  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);
}

/* Auf dem Telefon steht die Wurfliste zwischen Bühne und Filz und zeigt deshalb nur die letzten drei Würfe. */
@media (max-width: 63.99rem), (max-height: 30rem) {
  .ar-cr__journal-zeile:nth-last-child(n + 4) {
    display: none;
  }
}

/* ------------------------------------------------------------------ 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) {
  /*
   * DIE BÜHNE LINKS, DER FILZ RECHTS. Der Tisch ist das Brett: Er nimmt die breitere Spalte, so hoch, wie das Fenster es
   * zulässt, mit Banner und Wurfliste darunter. Rechts stehen untereinander, was man anfasst — der Filz, der Einsatz und
   * das Dock mit Jetons und „Setzen“ —, alles davon im ersten Bild, und darunter das Runden-Journal. Die Bühne steht hier
   * nah und nicht quer: So füllt der Aufdruck ihre Breite, statt als Briefmarke in der Mitte eines ganzen Tisches zu
   * liegen.
   */
  .ar-cr {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      'links tisch'
      'links einsatz'
      'links dock'
      'links buch'
      'befund befund';
    align-content: start;
    gap: 0.75rem 1.5rem;
  }

  .ar-cr > .ar-cr__links {
    grid-area: links;
  }

  .ar-cr__links > .ar-cr__buehne {
    justify-self: center;
    width: min(100%, (100svh - var(--ar-reserve) - var(--ar-hauskopf) - 4rem) * 1.3);
  }

  .ar-cr__buehne > .ar-kulisse {
    aspect-ratio: 1.3;
  }

  .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__einsatz,
  .ar-cr > .ar-cr__dock,
  .ar-cr > .ar-cr__buch {
    align-content: start;
    align-self: start;
  }

  .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;
  }
}