/*
 * Bluff-Würfeln: der Stammtisch mit den Bechern und den Schildern der Plätze, das stehende Gebot darunter und der
 * Gebotsschalter. Anzeigeleiste, Brettrand, Abzeichen und Tafel stehen als Rahmen des Spielfelds in css/arena.css, die
 * Bühne selbst ebenfalls (Die Tischbühne); hier steht nur, was diesem Brett gehört.
 *
 * NIE NUR EIN FARBTON: Wer dran ist, trägt eine Kreidekante um sein Schild und sitzt im Licht, wer ausgeschieden ist, das
 * Wort „RAUS“ und eine gestrichelte Kante, der Verlierer einer Aufdeckung eine Senfkante, und in der Aufdeckung liegt
 * jeder Würfel, der das Gebot bedient, auf einer vollen Senffläche, während die Nieten abdunkeln. Jede Tippfläche misst
 * mindestens 44 Pixel; die Bühne hat keine. Jede Regel auf der gemeinsamen Fläche hängt an [data-ar-spiel='bluff'] oder
 * an einer Klasse ar-bf.
 *
 * DIE WÜRFEL BLEIBEN ECKIG. Ein Würfel mit runder Ecke wäre ein Kiesel; die eine Rundung des Pools gehört den
 * Spielkarten von Kartenhai (README der Arena, Abschnitt 8).
 */

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

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

/* Im flachen Querformat steht der Spieltisch als Spalte neben dem Brett. */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-spielfeld[data-ar-spiel='bluff'] {
    --ar-brettbreite: min(30rem, 100vw - 2 * var(--ar-luft) - var(--ar-seite));
  }

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

/* Auf dem Schreibtisch nimmt das Brett die ganze Bühne: Tisch und Gebot links, der Schalter rechts daneben. */
@media (min-width: 64rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='bluff'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/*
 * DIE VIER FARBEN DES BECHERS STEHEN AUF :root UND NICHT AM BRETT. Das Sprite der Seite hängt im `<body>` und nicht
 * im Spielfeld; ein Verlauf, dessen Stopps am Brett definiert wären, fände dort nichts und zeichnete schwarz. Es ist
 * dasselbe Vorgehen wie bei Filz und Messing der Nachbartische.
 */
:root {
  --ar-bf-leder-licht: #9d6b41;
  --ar-bf-leder: #6b4527;
  --ar-bf-leder-tief: #33200f;
  /* Der Faden der Ledernaht: hell genug, dass die beiden Stiche auf dem Bauch auch bei 1,7rem noch zwei sind. */
  --ar-bf-naht: #d9bb8c;
}

/*
 * Außen um das Raster: Nach der Breite des BRETTS fragen alle Regeln darin, und ein Raster kann nicht nach seiner
 * eigenen fragen. Eine namenlose Abfrage träfe für das Brett selbst den nächsten Vorfahren — die Bühne —, während
 * dieselbe Abfrage für seine Kinder das Brett misst: Auf 768 Pixeln bekäme es die zwei Spalten des Schreibtischs, und
 * seine Kinder fänden den Bereich nicht, in den sie gehören. Der Wagen misst hier die Außenkante, die Schwellen liegen
 * deshalb um den Rand des Bretts (1rem) höher als die Innenbreite, von der die Kommentare sprechen.
 */
.ar-bf-mass {
  container: ar-bf-mass / inline-size;
}

.ar-bf {
  --ar-bf-wuerfel: 1.6rem;
  /* Das Polster zwischen Würfel und Kante: Dort liegt bei einem Treffer die Senffläche. */
  --ar-bf-luft: 2px;
  --ar-bf-mitte: 10.5rem;
  display: grid;
  gap: 0.6rem;
}

/* ------------------------------------------------------------ Der Tisch */

.ar-bf__tisch {
  display: grid;
  gap: 0.35rem;
}

/*
 * DIE BÜHNE STEHT HOCHKANT FAST QUADRATISCH: Der Tisch läuft links und rechts aus dem Bild, und sein Filz nimmt die
 * Höhe, die die Würfel brauchen. Auf dem Schreibtisch steht sie quer und zeigt den ganzen Tisch (unten bei den Breiten).
 */
.ar-bf__buehne {
  position: relative;
}

.ar-bf__buehne > .ar-kulisse {
  width: 100%;
  aspect-ratio: 8 / 7;
  border: 2px solid var(--ar-kante);
}

/*
 * DIE SCHILDER DER PLÄTZE liegen über der Bühne, je eines an seinem Platz (brett.js rechnet die Stelle aus der Bühne).
 * Sie tragen, was die Becher nicht sagen: wer dort sitzt, ob er dran ist und wie viele Würfel unter seinem Becher liegen.
 * Ein Schild ist eine Fläche in der Palette der Arena auf dem Bild, und sein Text hält dort seinen Kontrast.
 */
.ar-bf__schilder {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.ar-bf__schilder > .ar-bf__becher {
  --ar-bf-wuerfel: 1.05rem;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 46%;
  padding: 0.2rem 0.45rem 0.2rem 0.35rem;
  border: 1px solid var(--ar-kante-griff);
  border-left: var(--ar-farbkante) solid var(--ar-bf-farbe);
  background: var(--ar-noir-2);
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  translate: -50% -50%;
}

/* Das eigene Schild steht unten über der ganzen Kante und darf breiter sein als die anderen. */
.ar-bf__schilder > .ar-bf__becher[data-ar-bf-seite='unten'] {
  max-width: 72%;
}

.ar-bf__schilder > .ar-bf__becher[data-ar-dran] {
  border-color: var(--ar-kreide);
  border-left-color: var(--ar-bf-farbe);
  outline: 2px solid var(--ar-kreide);
  outline-offset: 1px;
}

.ar-bf__schilder > .ar-bf__becher[data-ar-bf-verlierer] {
  border-color: var(--ar-funke);
  outline: 2px solid var(--ar-funke);
  outline-offset: 1px;
}

.ar-bf__schilder .ar-bf__rest {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.15rem;
}

.ar-bf__schilder .ar-bf__rest-zahl {
  font-size: 0.95rem;
}

.ar-bf__schilder .ar-bf__wuerfel {
  padding: 0;
  border: 0;
}

/*
 * DIE MARKE DES GEBOTS ist eine kleine Schiefertafel mit Messingrand, die auf dem Filz liegt: Die Zahl darauf steht in
 * Kreide, und die Tafel gibt ihr den dunklen Grund, den der Filz unter der Lampe nicht hat. Unter der Zahl liegt eine
 * Kante in der Farbe dessen, der geboten hat; in der Aufdeckung steht die Zählung dort, in Signalrot, wenn das Gebot
 * nicht stimmt. Gelesen wird beides auch darunter, im Kasten der Mitte.
 */
.ar-bf__platte-zahl,
.ar-bf__platte-mal {
  display: block;
}

.ar-kulisse__platte:has(.ar-bf__platte-zahl) {
  padding: 0.08em 0.22em;
  border: 0.05em solid var(--ar-ku-messing);
  background: var(--ar-noir);
}

.ar-bf__platte-zahl {
  padding-bottom: 0.04em;
  border-bottom: 0.07em solid var(--ar-bf-farbe, var(--ar-kreide-2));
  font-variant-numeric: tabular-nums;
}

.ar-bf__platte-zahl[data-ar-farbe='rot'] { --ar-bf-farbe: var(--ar-rot); }
.ar-bf__platte-zahl[data-ar-farbe='blau'] { --ar-bf-farbe: var(--ar-blau); }
.ar-bf__platte-zahl[data-ar-farbe='gelb'] { --ar-bf-farbe: var(--ar-gelb); }
.ar-bf__platte-zahl[data-ar-farbe='gruen'] { --ar-bf-farbe: var(--ar-gruen); }

.ar-kulisse__platte[data-ar-ku-art='falsch'] .ar-bf__platte-zahl {
  color: var(--ar-rot);
}

.ar-bf__platte-mal {
  color: var(--ar-kreide-2);
  font-size: 0.55em;
}

.ar-bf__tischkopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  margin-bottom: 0.5rem;
}

.ar-bf__zaehler,
.ar-bf__wer {
  margin: 0;
  color: var(--ar-kreide);
  font-weight: 600;
}

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

/* Die Bietrunde steht klein hinter der Zahl der Würfel: Sie zählt die Wertungen und nicht die Züge. */
.ar-bf__bietrunde {
  margin-left: 0.6rem;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/*
 * Die Zeile hält ihren Platz auch am Rundenende, wenn sie nichts mehr zu sagen hat — und sie steht immer in einer
 * eigenen Zeile. Leer rutschte sie neben die Zählung, und beim Aufdecken, wo sie schweigt, zog der Tisch sich um eine
 * Zeile zusammen: Mitte und Schalter sprangen genau in dem Augenblick nach oben, in dem alle hinsehen.
 */
.ar-bf__wer {
  flex-basis: 100%;
  min-height: 1.5rem;
}

/*
 * DIE REIHE DER BECHER STEHT NUR NOCH ÜBER DER ABRECHNUNG (`abrechnungBild`): alle Becher offen nebeneinander, die
 * Treffer auf Senf. Auf dem Brett sitzt jeder Becher an seinem Platz auf der Bühne.
 */
.ar-bf__becher-reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Ein Becher: oben das Gefäß mit Marke und Namen, darunter die Würfel. Wer dran ist, trägt eine Kreidekante; wer
 * ausgeschieden ist, eine gestrichelte und das Wort daneben.
 */
.ar-bf__becher {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.35rem 0.5rem 0.45rem;
  border: 2px solid var(--ar-kante);
  border-left: var(--ar-farbkante) solid var(--ar-bf-farbe);
  background: var(--ar-noir-2);
}

.ar-bf__becher[data-ar-farbe='rot'] { --ar-bf-farbe: var(--ar-rot); }
.ar-bf__becher[data-ar-farbe='blau'] { --ar-bf-farbe: var(--ar-blau); }
.ar-bf__becher[data-ar-farbe='gelb'] { --ar-bf-farbe: var(--ar-gelb); }
.ar-bf__becher[data-ar-farbe='gruen'] { --ar-bf-farbe: var(--ar-gruen); }

.ar-bf__becher[data-ar-dran] {
  border-color: var(--ar-kreide);
  border-left-color: var(--ar-bf-farbe);
}

.ar-bf__becher[data-ar-bf-raus] {
  border-style: dashed;
  border-left-style: dashed;
  opacity: 0.72;
}

.ar-bf__becher[data-ar-bf-verlierer] {
  border-color: var(--ar-funke);
  border-left-color: var(--ar-funke);
}

.ar-bf__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.45rem;
  margin: 0;
}

/*
 * DER BECHER GEHT AN EINER KANTE HOCH. Er verschwand einmal und stand im nächsten Bild gekippt da — zwei Zeichnungen
 * ohne Weg dazwischen, und niemand hat gesehen, dass er sich hebt. Gedreht wird um die linke untere Ecke seines
 * RANDES (18 % / 90 % — genau dort, wo das Blech auf der Platte aufsitzt): Der Becher bleibt dort stehen, wo er
 * steht, und die andere Kante steigt.
 *
 * DREISSIG GRAD UND KEINE ACHTUNDDREISSIG. Gerechnet, nicht geschätzt: Bei dreißig Grad ragt die oberste Ecke der
 * Zeichnung rund sechs Pixel über ihren Kasten hinaus, und so viel lässt das Polster des Bechertäfelchens links
 * stehen. Darüber schöbe sich der Becher über die Farbkante seines Platzes — dauerhaft, denn nach der Aufdeckung
 * bleibt er oben.
 *
 * ES IST EIN BILDTAKT UND KEIN ÜBERGANG. Drei harte Bilder über eine Welle, `both` lässt ihn oben stehen — und weil
 * das Markup des Tisches genau in dem Augenblick neu geschrieben wird, in dem der Server die Aufdeckung aufmacht,
 * heben alle vier Becher an allen vier Schirmen zur selben Zeit.
 */
.ar-bf__gefaess {
  display: block;
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  transform-origin: 18% 90%;
}

.ar-bf__gefaess[data-ar-bf-hoch] {
  rotate: -30deg;
}

@media (prefers-reduced-motion: no-preference) {
  .ar-bf__gefaess[data-ar-bf-hoch] {
    animation: ar-bf-heben var(--ar-welle) steps(3) both;
  }
}

@keyframes ar-bf-heben {
  from { rotate: 0deg; }
  to { rotate: -30deg; }
}

.ar-bf__marke {
  display: block;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.ar-bf__name {
  min-width: 0;
  overflow: hidden;
  color: var(--ar-kreide);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-bf__zusatz {
  flex: none;
  padding: 0 0.3rem;
  border: 1px solid var(--ar-kante-griff);
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
  text-transform: uppercase;
}

/*
 * Die Würfelreihe hält ihre Höhe, auch wenn eine Farbe schon zwei Würfel verloren hat: Der Tisch schrumpft im Lauf einer
 * Runde von zwanzig Würfeln auf zwei, und ohne Boden rutschte bei jeder Aufdeckung alles darunter nach oben.
 *
 * DER BODEN IST EIN GANZER WÜRFEL SAMT RAND UND POLSTER (`--ar-bf-luft`). Verdeckt steht in dieser Zeile nur „5 ד vor
 * einem Würfel, aufgedeckt stehen alle fünf; beide Lagen sind damit genau eine Würfelzeile hoch, und der Wechsel beim
 * Aufdecken schiebt nichts.
 */
.ar-bf__wuerfel-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-height: calc(var(--ar-bf-wuerfel) + 2 * var(--ar-bf-luft) + 4px);
  margin: 0;
}

.ar-bf__wuerfel {
  display: block;
  flex: none;
  padding: var(--ar-bf-luft);
  border: 2px solid transparent;
}

/* Wie viele Würfel unter einem verdeckten Becher liegen: die Zahl in derselben Schrift wie die Anzahl des Gebots. */
.ar-bf__rest-zahl {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-size: max(1rem, calc(var(--ar-bf-wuerfel) * 0.8));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ar-bf__rest-mal {
  color: var(--ar-kreide-2);
}

/*
 * Ein Würfel, der das Gebot bedient: volle Senffläche und harte Kante, damit die Zählung von weitem nachzuzählen ist.
 * Kein Schein und kein Rand-Leuchten — die Arena kennt beides nicht; was hervorsticht, tut es als Fläche.
 */
.ar-bf__wuerfel[data-ar-bf-treffer] {
  border-color: var(--ar-funke);
  background: var(--ar-funke);
}

/* Eine Niete dunkelt ab: Das Blatt des Würfels nimmt den Griffton an, die Augen bleiben Tusche. */
.ar-bf__wuerfel[data-ar-bf-niete] {
  --ar-bf-blatt: var(--ar-kante-griff);
}

.ar-bf__wuerfel-bild {
  display: block;
  width: var(--ar-bf-wuerfel);
  height: var(--ar-bf-wuerfel);
}

/* ------------------------------------------------------------ Die Mitte */

/*
 * Das stehende Gebot, das Herz dieses Bretts. Der Kasten hält seine Höhe über alle drei Lagen — kein Gebot, ein Gebot,
 * die Aufdeckung —, denn hier wechselt der Inhalt mehrmals je Bietrunde, und darunter steht der Schalter.
 *
 * Seine Spalte nimmt die ganze Breite (`align-content` statt `place-content`), und die Kinder stehen darin mittig: Nur so
 * reichen die beiden Schnellgebote unten über die volle Breite, statt sich auf die Breite der Zahl darüber zu schrumpfen.
 */
.ar-bf__mitte {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.2rem;
  min-height: var(--ar-bf-mitte);
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--ar-kreide);
  background: var(--ar-noir);
  text-align: center;
}

.ar-bf__mitte[data-ar-bf-lage='aufdeckung'] {
  border-color: var(--ar-funke);
}

.ar-bf__mitte[data-ar-bf-lage='leer'] {
  border-style: dashed;
  border-color: var(--ar-kante-griff);
}

.ar-bf__mitte-marke {
  margin: 0;
  color: var(--ar-funke);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.ar-bf__mitte-satz {
  margin: 0;
  color: var(--ar-kreide);
  font-size: 0.88rem;
  text-wrap: balance;
}

/*
 * Der dritte Satz der Auflösung — wer zahlt. Er steht in Plakatschrift unter den beiden Zahlensätzen, denn er ist die
 * Nachricht dieses Kastens: Die Zählung darüber begründet ihn nur.
 */
.ar-bf__folge {
  margin: 0;
  color: var(--ar-kreide);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.ar-bf__gebot,
.ar-bf__zaehlung {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.ar-bf__gebot-zahl,
.ar-bf__zaehlung-zahl {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 2.6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ar-bf__gebot-mal {
  color: var(--ar-kreide-2);
  font-size: 1.4rem;
}

.ar-bf__gebot-bild,
.ar-bf__zaehlung-bild {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
}

/* Stimmt das Gebot, steht die Zahl in Kreide; stimmt es nicht, in Signalrot — und der Satz darunter sagt es noch einmal. */
.ar-bf__zaehlung[data-ar-bf-wahr='false'] > .ar-bf__zaehlung-zahl {
  color: var(--ar-rot);
}

/*
 * DIE SCHNELLGEBOTE: zwei Knöpfe über die volle Breite des Kastens, jeder mit dem Gebot, das er abgäbe. Sie passen in
 * die Höhe, die der Kasten ohnehin hält (`--ar-bf-mitte`), und bleiben einzeilig: Ein Knopf, der auf 320 Pixeln
 * umbräche, machte den Kasten höher als in den beiden anderen Lagen.
 */
.ar-bf__schnell-reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: stretch;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.ar-bf__schnell {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

.ar-bf__schnell-gebot {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-family: var(--ar-schrift-mono);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ar-bf__schnell-mal {
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

.ar-bf__schnell-bild {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
}

/* ------------------------------------------------------------ Der Schalter */

.ar-bf__pult {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.ar-bf__schalter {
  display: grid;
  gap: 0.45rem;
  padding: 0.5rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

/* Gesperrt heißt still: Die Knöpfe bleiben stehen und sagen beim Tippen, warum nicht. */
.ar-bf__schalter[data-ar-bf-gesperrt] {
  border-style: dashed;
  border-color: var(--ar-kante);
}

.ar-bf__schalter-kopf {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
}

/*
 * DIE LEITPLANKE HÄLT DREI ZEILEN, AUCH WENN SIE MEIST ZWEI BRAUCHT. Ihr Satz wechselt mit jedem Gebot — vom langen
 * „mehr Würfel oder höhere Augen“ bis zum kurzen „nur noch anzweifeln“ —, und ein Kasten, der dabei wächst und schrumpft,
 * schöbe die Tasten darunter unter dem Daumen weg. Die harte Senfkante links ist ihr ganzes Zeichen: keine Fläche in
 * Senf, denn die gehört der gewählten Augenzahl. Wer nicht dran ist, sieht die Kante grau statt senf; getragen wird das
 * nie von der Farbe allein, denn der Schalter steht dann gestrichelt da.
 */
.ar-bf__leit {
  min-height: calc(3 * 1.3em + 0.7rem);
  margin: 0;
  padding: 0.35rem 0.5rem;
  border-left: 3px solid var(--ar-funke);
  background: var(--ar-noir);
  color: var(--ar-kreide);
  font-size: 0.85rem;
  line-height: 1.3;
  text-wrap: pretty;
}

.ar-bf__schalter[data-ar-bf-gesperrt] .ar-bf__leit {
  border-left-color: var(--ar-kante-griff);
}

/* Das letzte Gebot steht fett und in einem Stück: „4 × Fünf.“ über zwei Zeilen zu brechen, hieße es zweimal lesen. */
.ar-bf__leit-kopf {
  font-weight: 700;
  white-space: nowrap;
}

/* Die beiden Zonen der ersten Runde umschließen ihre Kinder, ohne ihren Abstand zu ändern. */
.ar-bf__einsatz {
  display: grid;
  gap: 0.4rem;
}

.ar-bf__entscheid {
  display: grid;
  gap: 0.45rem;
}

/*
 * DER SPICKZETTEL IST LEISE: Kreide-2, klein, direkt unter dem Schieber. Er hält seine Zeile auch leer, denn er wechselt
 * mit jedem Tipp auf eine Augenzahl, und der Satz darunter soll dabei stehenbleiben. Er zeigt keine Würfel: Offen liegt der
 * eigene Becher genau einmal, oben in der Bedienleiste.
 */
.ar-bf__spick {
  min-height: 1.1rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.ar-bf__augen {
  display: grid;
  grid-template-columns: repeat(6, minmax(44px, 1fr));
  gap: 0.3rem;
}

.ar-bf__auge {
  display: grid;
  place-items: center;
  min-height: 3rem;
  padding: 0.25rem;
}

.ar-bf__auge-bild {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
}

/* Die gewählte Augenzahl steht wie eine gewählte Spielkarte da: Senfkante und umgekehrter Grund, nie nur ein Farbton. */
.ar-bf__auge[aria-pressed='true'] {
  border-color: var(--ar-funke);
  background: var(--ar-noir-3);
  outline: 3px solid var(--ar-funke);
  outline-offset: -3px;
}

/*
 * DIE ANZAHL STEHT AM SCHIEBER UND NICHT AN ZWEI KNÖPFEN. Sie stand an `−` und `+`, und wer von der kleinsten
 * gültigen Anzahl auf zwölf wollte, tippte neunmal — dieselbe Wand, wegen der das Wett-Bauteil des Hauses gebaut
 * wurde (js/wetten.js). Es sind seitdem zwei Knöpfe weniger am Pult, und der ganze Bereich liegt auf einem Zug.
 *
 * DIE SCHIENE IST DIE DES HAUSES, DER KANAL IST DER EIGENE. Gezeichnet wird mit `.ar-wetten__*` aus css/arena.css —
 * dieselbe Bauform, die die Arena für jeden freien Wert hat. Das Merkmal `data-ar-wetten` trägt sie ausdrücklich
 * NICHT: Daran hinge der Kanal des Wett-Bauteils, und der spricht von Chips und Guthaben. Ein Gebot zählt Würfel.
 */
.ar-bf__anzahl {
  /* Im Pult ist es enger als unter einem Brett mit Einsatzleiste: Der Schieber braucht jeden Millimeter Weg. */
  gap: 0.4rem;
}

/* Der Satz hält seinen Platz: Er wechselt bei jedem Tipp und schöbe sonst die beiden Knöpfe darunter. */
.ar-bf__satz {
  display: grid;
  align-content: center;
  min-height: 2.6rem;
  margin: 0;
  color: var(--ar-kreide);
  font-size: 0.85rem;
  text-wrap: balance;
}

.ar-bf__abgeben {
  min-height: 3.25rem;
}

/*
 * DER ZWEIFEL IST EIN STEMPEL. Er ist der lauteste Griff dieses Spiels und trug dafür nur eine Signalkante — derselbe
 * Kasten wie „Gebot abgeben“ daneben, nur rot umrandet. Jetzt trägt er den doppelten Rand eines Dienststempels, den
 * gesperrten Satz eines Aufdrucks und einen harten Block darunter, auf den er beim Drücken fällt.
 *
 * UND ER IST EINE ROTE FLÄCHE, SOBALD MAN IHN RUFEN KANN. Als Kante war er neben dem Senfknopf „Gebot abgeben“ der
 * leisere von beiden — ausgerechnet der Reflex dieses Spiels. Die Schrift darauf ist Tusche (5,68:1), denn Rot ist hier
 * ein Signal und nie Lesetext auf Schwarz; der Ring innen bleibt Tusche, und so steht der Doppelrand des Stempels
 * weiter da. Gesperrt ist er stumpf wie jeder Knopf, und Rot heißt damit genau eines: Jetzt kannst du zweifeln.
 *
 * DER ANSCHLAG IST EIN BILD UND KEIN FEDERN. Den Versatz von zwei Pixeln bringt `.ar-knopf:active` aus dem Rahmen
 * schon mit, ohne Übergang; was fehlte, war der Block, auf den er aufschlägt. Er fällt im selben Bild weg — der
 * Stempel liegt dann auf dem Kissen und nicht mehr darüber.
 *
 * VERSALIEN STEHEN HIER, WEIL ES EIN AUFDRUCK IST. Die Arena setzt Lesbares in Groß- und Kleinschreibung (README,
 * Abschnitt 8, Ziffer 14); ein Stempel ist wie die Plakette und das Schild am Platz eine Aufschrift. Der Ruf selbst
 * steht als Ruf in worte.js und bleibt es (Ziffer 7).
 */
.ar-bf__zweifeln {
  min-height: 3.5rem;
  border-color: var(--ar-rot);
  background: var(--ar-rot);
  color: var(--ar-rot-kontrast);
  box-shadow: inset 0 0 0 3px var(--ar-noir), 3px 3px 0 0 var(--ar-rot);
  padding: 0.45rem 0.7rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: balance;
}

.ar-bf__zweifeln:not([aria-disabled='true']):hover {
  background: var(--ar-kreide);
}

.ar-bf__zweifeln:not([aria-disabled='true']):active {
  box-shadow: inset 0 0 0 3px var(--ar-noir);
}

.ar-bf__abgeben[aria-disabled='true'],
.ar-bf__zweifeln[aria-disabled='true'],
.ar-bf__auge[aria-disabled='true'],
.ar-bf__schnell[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;
}

/* Ohne Gebot am Tisch ist der Stempel stumpf: kein Kissen darunter, kein Signal ringsum. */
.ar-bf__zweifeln[aria-disabled='true'] {
  box-shadow: none;
}

.ar-bf__auge[aria-disabled='true'] .ar-bf__auge-bild,
.ar-bf__schnell[aria-disabled='true'] .ar-bf__schnell-bild {
  opacity: 0.45;
}

/* Ein Griff, der nicht ankommt, bekommt sein Kreuz — dasselbe Zeichen wie am Kartentisch. */
.ar-bf__auge[data-ar-nein],
.ar-bf__abgeben[data-ar-nein],
.ar-bf__zweifeln[data-ar-nein],
.ar-bf__schnell[data-ar-nein] {
  outline: 3px solid var(--ar-kreide);
  outline-offset: 1px;
}

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

/*
 * „GEBOT ABGEBEN“ UND „GELOGEN!“ 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, und stehen am Ende des Bretts wieder an ihrem Platz. Leer
 * ist das Dock, wo kein Schalter steht — für Zuschauer und nach dem Abpfiff —, und dann hat es auch keinen Kasten.
 * Das Raster gibt den Knöpfen ihre ganze Breite.
 */
.ar-bf__dock {
  display: grid;
}

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

/*
 * Wo das Dock klebt, stehen die beiden nebeneinander, der Zweifel breiter: Untereinander deckten zwei Knopfzeilen
 * dauerhaft ein Siebtel der Bühne zu. Die Schwelle ist die des Daumendocks im Rahmen.
 */
@media (max-width: 47.99rem) and (min-height: 34rem) {
  .ar-bf__dock .ar-bf__entscheid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  /* „Gebot abgeben“ bricht hier in zwei Zeilen und setzte mit seiner Grundzeilenhöhe die Höhe des ganzen Docks. */
  .ar-bf__dock .ar-bf__abgeben {
    padding-block: 0.45rem;
    line-height: 1.15;
  }
}

/* ------------------------------------------------------------ Das Bild über der Abrechnung */

/*
 * Am Rundenende zeigt die Tafel des Rahmens dieselbe Becherreihe wie das Brett, alle offen. Sie hängt an keinem
 * Wagen — die Tafel liegt außerhalb von .ar-bf-mass —, also gelten hier die schmalen Grundmaße, und die Becher
 * stellen sich selbst so breit nebeneinander, wie die Tafel Platz lässt.
 */
.ar-bf--abrechnung {
  gap: 0;
  padding: 0;
}

.ar-bf--abrechnung .ar-bf__becher-reihe {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

/* ------------------------------------------------------------ Breiten */

/*
 * AUF DEM SCHREIBTISCH STEHT DER TISCH ÜBER DIE GANZE BREITE und quer, mit dem ganzen Tisch im Bild; darunter stehen
 * nebeneinander die Mitte mit dem Gebot, der Schalter und das Dock. Die Schwelle liegt über 37rem Innenbreite, und die
 * erreicht nur ein Brett auf dem Schreibtisch; schmal und im flachen Querformat ist keines breiter als 36rem.
 */
@container ar-bf-mass (min-width: 39rem) {
  .ar-bf {
    --ar-bf-mitte: 12rem;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 1.15fr) minmax(12rem, 0.75fr);
    grid-template-areas:
      'tisch tisch tisch'
      'mitte pult dock';
    align-items: start;
    column-gap: 0.9rem;
  }

  .ar-bf > .ar-bf__tisch {
    grid-area: tisch;
  }

  .ar-bf > [data-ar-bf-teil='mitte'] {
    grid-area: mitte;
    align-self: stretch;
  }

  .ar-bf > .ar-bf__pult {
    grid-area: pult;
  }

  .ar-bf > .ar-bf__dock {
    grid-area: dock;
  }

  /*
   * DER TISCH NIMMT DIE HÖHE, DIE ÜBRIG IST: Was das Fenster nach Spielleiste, Anzeigeleiste und Rändern
   * (`--ar-reserve`), dem klebenden Kopf, der Kopfzeile des Tisches und der Zeile darunter übrig lässt, mal 2,15 ist
   * seine größte Breite. Die Zeile aus Mitte, Schalter und Dock ist mit einem Gebot 18rem hoch, und hier stand der Tisch
   * immer über die volle Breite: Auf 1440 × 900 wuchs das Brett aus dem Fenster, der Rahmen zoomte es auf 0,92, und die
   * Schnellgebote maßen 40 statt 44 Pixel, auf 1280 × 720 auf 0,76.
   */
  .ar-bf__tisch > .ar-bf__buehne {
    justify-self: center;
    width: min(100%, (100svh - var(--ar-reserve) - var(--ar-hauskopf) - 23.5rem) * 2.15);
  }

  /*
   * Die Mitte ist die schmalste der drei Spalten, auf 1024 Pixeln rund 160 breit: Nebeneinander liefen die beiden
   * Schnellgebote dort über ihren Rand. Wo keine zwei nebeneinander passen, stehen sie untereinander; die Zeile ist ohnehin
   * so hoch wie der Schalter daneben.
   */
  .ar-bf__schnell-reihe {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }

  .ar-bf__buehne > .ar-kulisse {
    aspect-ratio: 2.15 / 1;
  }

  .ar-bf__schilder > .ar-bf__becher {
    --ar-bf-wuerfel: 1.2rem;
    font-size: 0.92rem;
  }

  .ar-bf__gebot-zahl,
  .ar-bf__zaehlung-zahl {
    font-size: 3rem;
  }

  .ar-bf__gebot-bild,
  .ar-bf__zaehlung-bild {
    display: block;
    width: 2.6rem;
    height: 2.6rem;
  }
}

/*
 * Ganz schmal, etwa auf 320 Pixeln, rücken Würfel und Augenzahlen zusammen, und die Schilder werden kleiner.
 */
@container ar-bf-mass (max-width: 20rem) {
  .ar-bf {
    --ar-bf-wuerfel: 1.3rem;
  }

  .ar-bf__schilder > .ar-bf__becher {
    gap: 0.2rem;
    padding: 0.15rem 0.3rem 0.15rem 0.25rem;
    font-size: 0.74rem;
  }

  .ar-bf__augen {
    grid-template-columns: repeat(3, minmax(44px, 1fr));
  }

  /*
   * Dem Schieber bliebe sonst nichts mehr: Viereinhalb Zeichen Feld reichen für die zwanzig Würfel eines vollen
   * Tisches. Die Reihe OHNE Schieber bleibt einspaltig — sie hat nur das Feld, und das stünde hier in der Spalte, in
   * der sonst der Weg liegt.
   */
  .ar-bf__anzahl:not(.ar-wetten__reihe--fest) {
    grid-template-columns: minmax(0, 1fr) 4.5rem;
  }
}

/*
 * DAS ABZEICHEN STEHT NICHT ÜBER DER MITTE. Dort liegt bei diesem Spiel genau der Kasten, auf den beim Aufdecken alle
 * schauen: „Gebot war 4× Vieren“ samt Zählung. Es liegt deshalb über dem fernen Teil des Tisches, auf dem Telefon im
 * ersten Fünftel des Bretts, auf dem Schreibtisch auf einem Fünftel: Dort stehen gegenüber die Becher hoch, und die
 * Würfel davor bleiben zu sehen. Schmaler ist es auch: Über einer Bühne von 21rem sähen 22 wie ein Deckel aus.
 */
.ar-spielfeld[data-ar-spiel='bluff'] .ar-abzeichen {
  top: 17%;
  width: min(86%, 19rem);
}

@media (min-width: 64rem) and (min-height: 30.0625rem) {
  .ar-spielfeld[data-ar-spiel='bluff'] .ar-abzeichen {
    top: 21%;
  }
}

/* ------------------------------------------------------------ Farben im SVG */

/* Das Blatt des Würfels ist Kreide — bis eine Niete es auf den Griffton stellt. Die Eigenschaft erbt bis in das use. */
.ar-g-bf-wuerfel { fill: var(--ar-bf-blatt, var(--ar-kreide)); stroke: var(--ar-noir); stroke-width: var(--ar-tusche); }
.ar-g-bf-auge { fill: var(--ar-noir); }
.ar-g-bf-verdeckt { fill: var(--ar-noir-3); stroke: var(--ar-kante-griff); stroke-width: var(--ar-tusche); }
.ar-g-bf-fragezeichen { fill: none; stroke: var(--ar-kreide-2); stroke-width: 9; stroke-linecap: square; }
/*
 * DER BECHER: Bauch aus dem Verlauf, Lichtkante, zwei Ledernähte, darunter der helle Rand. Die drei Stopps des
 * Verlaufs stehen hier und nicht als getippte Hexwerte im Sprite — dieselbe Regel wie für jede andere Farbe.
 */
.ar-g-bf-becher { fill: url(#ar-g-bf-leder-grad); stroke: var(--ar-noir); stroke-width: var(--ar-tusche); stroke-linejoin: miter; }
.ar-g-bf-leder-rand { stop-color: var(--ar-bf-leder-tief); }
.ar-g-bf-leder-glanz { stop-color: var(--ar-bf-leder-licht); }
.ar-g-bf-leder-bauch { stop-color: var(--ar-bf-leder); }
.ar-g-bf-glanz { fill: var(--ar-bf-leder-licht); }
.ar-g-bf-naht { fill: none; stroke: var(--ar-bf-naht); stroke-width: 2.5; stroke-dasharray: 5 4; }
.ar-g-bf-rand { fill: var(--ar-kreide-2); stroke: var(--ar-noir); stroke-width: var(--ar-tusche); stroke-linejoin: miter; }
.ar-g-bf-rand-kerbe { fill: none; stroke: var(--ar-bf-leder-tief); stroke-width: 2.5; }
.ar-g-bf-ruf { fill: none; stroke: var(--ar-rot); stroke-width: 6; stroke-linecap: square; }
.ar-g-bf-tisch { fill: var(--ar-noir-2); }

/* Ausgeschiedene Becher in den Bildkarten tragen keine Farbe mehr, nur den Umriss. */
.ar-bf-weg {
  opacity: 0.5;
}