/*
 * Keno 1923: der Casinotisch mit Gitterkugel, Schiene und Scheinen, das Zahlenfeld, die Quotenleiste, die offenen
 * Scheine, der Einsatzschalter und die Rangliste. Anzeigeleiste, Brettrand, Abzeichen, Tafel und die Tischbühne selbst
 * stehen als Rahmen des Spielfelds in css/arena.css; hier steht nur, was diesem Brett gehört. Ein Wasserzeichen gibt es
 * nicht mehr: Unter dem Brett liegt der Casinotisch.
 *
 * NIE NUR EIN FARBTON. Ein Fach ist frei, getippt, gezogen oder getroffen — und das steht in DREI Dingen gleichzeitig:
 * im Ton des Blechs, in der Stärke seiner Kante (1 / 2 / 3 Pixel) und beim eigenen Tipp zusätzlich in `aria-pressed`.
 * Ein gezogenes Fach kehrt dazu die Tinte um, ein getroffenes trägt obendrein den roten Stift. Wer die Fächer der
 * anderen sucht, findet an ihnen die Formmarke ihrer Farbe und nicht bloß einen Ton. Jede Tippfläche misst mindestens
 * 44 Pixel — in beide Richtungen.
 *
 * DIE KUGEL IST RUND, UND DAS IST KEINE AUSNAHME VON DER NULL-RUNDUNG. Sie ist eine gezeichnete Scheibe im SVG und kein
 * Kasten mit border-radius; die Regel gilt dem UI, und ein Kreis in einer Zeichnung ist keine abgerundete Kante.
 */

/*
 * ACHTUNDVIERZIG ZAHLEN NEBENEINANDER GIBT ES AUF EINEM TELEFON NICHT — gerechnet und nicht geschätzt.
 *
 * Auf 390 Pixeln bleibt nach der Seitenluft (2 × 16) ein Brett von 358, nach seinem Rand (2 × 5) ein Innenraum von 348
 * und nach der Polsterung des Bretts (2 × 8) eine Fläche von 332. Das Raster nimmt davon seine Kante (2 × 2) und seine
 * Polsterung (2 × 4,8) und behält 318,4. ACHT Spalten samt sieben Fugen zu 4 Pixeln gäben je Fach 36 Pixel — schon
 * ohne jede Polsterung wären 8 × 44 = 352 mehr, als das Brett innen misst. FÜNF Spalten samt vier Fugen geben
 * (318,4 − 16) / 5 = 60,5 Pixel. Auf 320 Pixeln sind es noch 46,5.
 *
 * Deshalb steht das Zahlenfeld auf dem Telefon als 5 × 8 hoch und erst auf dem Schreibtisch als 8 × 5 quer. Die
 * Reihenfolge im Markup ist eins bis vierzig, beide Male im Zeilenfluss: eine Tastaturfolge, zwei Anordnungen.
 */
.ar-spielfeld[data-ar-spiel='keno'] {
  --ar-brettbreite: min(36rem, 100vw - 2 * var(--ar-luft));
  --ar-einheit: calc(var(--ar-brettbreite) / 6);
}

@supports (width: 1cqw) {
  .ar-spielfeld[data-ar-spiel='keno'] {
    --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='keno'] {
    --ar-brettbreite: min(30rem, 100vw - 2 * var(--ar-luft) - var(--ar-seite));
  }

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

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

/*
 * DIE TÖNE DIESES TISCHES STEHEN AN DER WURZEL UND NICHT AN .ar-ke, und das ist kein Versehen. Die Bildkarten dieses
 * Spiels stehen im Regelblatt und in der Einweisung und die aufgedeckten Scheine in der Tafel des Rahmens, also
 * AUSSERHALB des Bretts; ein Symbol, dessen fill auf eine Variable von .ar-ke zeigt, fiele dort auf Schwarz zurück.
 * Der Präfix --ar-ke- hält sie trotzdem für sich.
 *
 * Das Petrol des Filzes ist ein eigener Ton und keine Spielfarbe: --ar-blau gehört dem Sitz Blau, und ein Tisch in der
 * Farbe einer Person wäre eine Auskunft, die es nicht gibt. Es unterscheidet den Kenotisch vom Kesseltisch nebenan,
 * dessen Filz grün ist. Kreide hält auf jedem der drei Töne mehr als 7 : 1.
 */
:root {
  --ar-ke-filz: #11262e;
  --ar-ke-blech: #1e1e22;
  --ar-ke-tipp: #2b4350;
  /*
   * ALTES MESSING UND NICHT DER SENF DER FUNKEN. Der Reif der Gitterkugel trägt 4,4 : 1 auf dem Petrol ihres Korbs, die
   * Kante der Schiene 4,5 : 1 auf ihrem Mahagoni und der Rand des Zahlenfelds 4,6 : 1 auf dem Blech — über den 3 : 1, die
   * WCAG 1.4.11 für etwas verlangt, das kein Text ist und trotzdem eine Auskunft trägt. Ein Ton wäre der naheliegende gewesen, nämlich --ar-funke: Der aber markiert auf diesem Brett
   * den EIGENEN Treffer, und ein Gerät in derselben Farbe nähme dem Treffer seine Stimme.
   */
  --ar-ke-messing: #a8813a;
  /* Die Kugeln sind Holz und kein Kreidestück; Tusche darauf hält 12,9 : 1, gegen den Filz stehen sie mit 9,6 : 1. */
  --ar-ke-holz: #d8c9a8;
  /*
   * Der dicke Rotstift über einer getroffenen Zahl. Im Zahlenfeld liegt er IMMER auf dem Senf eines gezogenen Feldes und
   * ist dort mit 3,9 : 1 eine Kante, die man sieht; --ar-rot hielte dort 1,8 : 1 und wäre ein Strich, den man sucht. Auf
   * dem Elfenbein eines Scheins auf dem Tisch hält er 5,9 : 1.
   */
  --ar-ke-stift: #a02a22;
  /* Ein halber Umlauf der Gitterkugel: zwölf Einzelbilder zu 90 ms, derselbe Bildtakt wie die Wellen des Rahmens. */
  --ar-ke-kreis-ms: 1080ms;
  /* Eine Kugel fällt aus dem Rohr und rollt an ihren Platz, fertig vor der nächsten (220 ms). */
  --ar-ke-roll-ms: 180ms;
}

/*
 * 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.
 */
.ar-ke-mass {
  container: ar-ke-mass / inline-size;
}

.ar-ke {
  display: grid;
  gap: 0.6rem;
}

/* Ein Teil, der gerade nichts zu sagen hat — die Zwischenbilanz, der Tisch zu zweit —, nimmt auch keine Fuge. */
.ar-ke [data-ar-ke-teil]:empty {
  display: none;
}

.ar-ke__links,
.ar-ke__rechts {
  display: grid;
  align-content: start;
  gap: 0.6rem;
}

/*
 * Die linke Spalte misst sich für das Zahlenfeld selbst. Ob acht Spalten zu vierundvierzig Pixeln nebeneinander
 * stehen, weiß nur die Spalte, in der das Feld liegt — das ganze Brett ist erst ab 50rem zweispaltig, und
 * achtundfünfzig Hundertstel davon sind auf einem 1024er Schirm noch lange keine 432 Pixel.
 */
.ar-ke__links {
  container: ar-ke-raster / inline-size;
}

/* ------------------------------------------------------------ Kopf */

.ar-ke__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.3rem 0.8rem;
}

.ar-ke__runde,
.ar-ke__gesetzt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  margin: 0;
  color: var(--ar-kreide);
  font-weight: 600;
}

.ar-ke__ziehung,
.ar-ke__lage {
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  font-weight: 400;
}

.ar-ke__wer-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* Abgegeben heißt Haken und durchgezogene Kreidekante, offen ein leerer Kasten und eine gestrichelte: nie nur ein Ton. */
.ar-ke__wer {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem 0.2rem;
  border: 2px dashed var(--ar-kante-griff);
}

.ar-ke__wer[data-ar-ke-fertig] {
  border-style: solid;
  border-color: var(--ar-kreide);
}

.ar-ke__wer-marke,
.ar-ke__wer-zeichen {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

/* ------------------------------------------------------------ Der Casinotisch */

/*
 * DER CASINOTISCH STEHT 1,4 : 1, und das ist die breiteste Bühne, auf der er noch nah steht (js/kulisse.js): Breiter
 * zeigte sie den ganzen Tisch, und eine Kugel auf der Schiene wäre auf dem Telefon zwölf Pixel groß, ihre Ziffern sieben.
 * So sind es gut zwanzig und elf. Auf dem Schreibtisch steht er rechts über dem Schein, höchstens so hoch, dass Kopf,
 * Tisch und Schein zusammen ins Fenster passen (unten bei den Breiten).
 */
.ar-ke__buehne {
  position: relative;
  min-width: 0;
}

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

/*
 * DIE GITTERKUGEL IST EIN AUFSTELLER AUS KÄSTEN (`trommelBild()` in brett.js): das Gestell, darauf der Korb, und im Korb
 * Grund, sechs Kugeln, fünf Streben und die Achse übereinander. Jede Strebe ist ein voller Reif, der sich als Ganzes
 * staucht (`--ar-ke-strebe`). Dreht sich die Kugel, läuft jede in zwölf harten Bildern von voller Breite bis
 * seitenverkehrt um, um ein Fünftel versetzt; zwölf und fünf sind teilerfremd, deshalb steht bei jedem Bild ein anderes
 * Muster da. Stünden sie im Takt, drehte sich sichtbar nichts. Der Umlauf beginnt mit dem Anlauf der Ziehung auf der
 * Serveruhr (`--ar-ku-verzug`, js/kulisse.js), auf allen Schirmen im selben Bild.
 */
.ar-ke__geraet,
.ar-ke__geraet-korb,
.ar-ke__geraet-gestell,
.ar-ke__geraet-grund,
.ar-ke__geraet-strebe,
.ar-ke__geraet-achse,
.ar-ke__geraet-kugel {
  position: absolute;
  display: block;
  overflow: visible;
}

.ar-ke__geraet,
.ar-ke__geraet-gestell,
.ar-ke__geraet-grund,
.ar-ke__geraet-strebe,
.ar-ke__geraet-achse {
  inset: 0;
  width: 100%;
  height: 100%;
}

.ar-ke__geraet-korb {
  left: 4%;
  top: 2%;
  width: 92%;
  height: 58%;
}

.ar-ke__geraet-strebe {
  scale: var(--ar-ke-strebe, 1) 1;
}

.ar-ke__geraet-kugel {
  height: auto;
  aspect-ratio: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .ar-ke__geraet[data-ar-ke-dreht] .ar-ke__geraet-strebe {
    animation: ar-ke-kreisel var(--ar-ke-kreis-ms) steps(12) calc(var(--ar-ku-verzug, 0ms) + var(--ar-ke-kreis-ms) * var(--ar-ke-phase, 0)) infinite;
  }

  /* Die Kugeln im Korb kollern mit: vier harte Stellungen, jede gegen die nächste versetzt. */
  .ar-ke__geraet[data-ar-ke-dreht] .ar-ke__geraet-kugel {
    animation: ar-ke-kollern var(--ar-ke-kreis-ms) step-end calc(var(--ar-ku-verzug, 0ms) + var(--ar-ke-kreis-ms) * var(--ar-ke-phase, 0)) infinite;
  }
}

@keyframes ar-ke-kreisel {
  from { scale: 1 1; }
  to { scale: -1 1; }
}

@keyframes ar-ke-kollern {
  0% { translate: 0 0; }
  25% { translate: 12% -18%; }
  50% { translate: 24% 6%; }
  75% { translate: -12% 12%; }
}

/* Der Schatten der Gitterkugel: eine Fläche ohne Unschärfe auf dem Filz, ein Gegenstand und kein Bedienelement. */
.ar-ke__schatten {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--ar-ku-schlagschatten);
}

/*
 * EINE KUGEL FÄLLT AUS DEM ROHR UND ROLLT AN IHREN PLATZ: erst hinunter auf die Schiene, dann zur Seite, so weit, wie
 * `--ar-ke-weg` in Kugelbreiten sagt, und sie liegt, bevor die nächste fällt (220 ms). Wann sie fällt, sagt die Bühne:
 * Der Aufsteller erscheint zur Zeit seiner Kugel, und wer später kommt, steigt mit `--ar-ku-verzug` weiter hinten ein —
 * eine Kugel, die längst liegt, liegt. Ohne Bewegung liegt sie gleich auf ihrem Platz.
 */
.ar-ke__rollkugel {
  position: absolute;
  inset: 0;
  display: block;
}

.ar-ke__rollkugel > svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .ar-ke__rollkugel {
    animation: ar-ke-einrollen var(--ar-ke-roll-ms) linear var(--ar-ku-verzug, 0ms) both;
  }
}

@keyframes ar-ke-einrollen {
  0% { translate: calc(var(--ar-ke-weg, 0) * 100%) -95%; }
  30% { translate: calc(var(--ar-ke-weg, 0) * 100%) 0; }
  100% { translate: 0 0; }
}

/* Der Schein auf dem Tisch: ein Zettel aus Elfenbein, auf dem der Stift schmaler zieht als im Zahlenfeld. */
.ar-ke__zettel {
  --ar-ke-stiftbreite: 2.5;
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * DIE KUGEL DES BANDS: dieselbe Holzkugel wie auf der Schiene des Tisches, nur als Kasten in einer Zeile. Tusche auf
 * Kreide und auf Senf: Die schlechtere der beiden Paarungen liegt über 8 : 1.
 */
.ar-ke__kugel-bild {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ar-ke__kugel-zahl {
  position: relative;
  color: var(--ar-noir);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  hyphens: none;
}

/* ------------------------------------------------------------ Kugelband */

/*
 * DAS KUGELBAND. Wer auf dem Telefon während der Ziehung bei seinem Schein oder der Rangliste steht, sieht die Trommel
 * nicht mehr — und genau dann fallen die Kugeln. Oben an der Bühne hängt dafür ein schmales Band mit den letzten Kugeln
 * dieser Ziehung und den eigenen Treffern. Es steht nur, solange eine Ziehung läuft (brett.js zeichnet es nur dann)
 * und die Trommel ganz aus dem Bild ist (`data-ar-ke-trommel-weg`, gesetzt von einem IntersectionObserver).
 *
 * ES NIMMT KEINEN PLATZ IM FLUSS. Der Anker ist null Pixel hoch und klebt oben an der Bühne, das Band hängt absolut
 * darunter: Es erscheint und geht, ohne dass darunter etwas springt. Der Anker steht außerhalb des Rasters, in
 * `.ar-ke-mass` — im Raster zöge selbst ein Kind ohne Höhe eine Fuge nach sich —, und dort reicht sein Kasten über das
 * ganze Brett. Auf dem Schreibtisch steht die Trommel neben allem anderen, und dort gibt es kein Band.
 */
.ar-ke__band-anker {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 0;
}

.ar-ke__band {
  position: absolute;
  inset-inline: 0;
  top: 0;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 2px solid var(--ar-kreide);
  background: var(--ar-noir);
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

@container ar-ke-mass (max-width: 49.99rem) {
  .ar-ke-mass[data-ar-ke-trommel-weg] .ar-ke__band {
    display: flex;
  }
}

.ar-ke__band-ziehung,
.ar-ke__band-treffer {
  white-space: nowrap;
}

.ar-ke__band-kugeln {
  display: flex;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-ke__band-kugel {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid transparent;
}

/* Wie in der Schiene: Senf und ein Kranz, und die Zahl der Treffer steht daneben — die Farbe steht nie allein. */
.ar-ke__band-kugel[data-ar-ke-meins] {
  --ar-ke-kugelton: var(--ar-funke);
  border-color: var(--ar-funke);
}

.ar-ke__band-treffer {
  margin-left: auto;
  color: var(--ar-funke);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
}

/* ------------------------------------------------------------ Zwischenbilanz */

.ar-ke__bilanz {
  display: grid;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border: 2px solid var(--ar-funke);
  background: var(--ar-noir-2);
}

.ar-ke__bilanz-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
}

.ar-ke__bilanz-titel {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
}

.ar-ke__saldo {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-ke__saldo-teil {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.3rem;
  border-left: var(--ar-farbkante) solid var(--ar-kante-griff);
  color: var(--ar-kreide);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-ke__saldo-teil[data-ar-ke-saldo='plus'] { border-left-color: var(--ar-funke); }
.ar-ke__saldo-teil[data-ar-ke-saldo='minus'] { border-left-color: var(--ar-rot); }

.ar-ke__saldo-marke {
  display: block;
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* ------------------------------------------------------------ Zahlenfeld */

/*
 * DIE FUGE ZWISCHEN ZEILE UND RASTER IST GRÖSSER ALS DIE ANDEREN. Das Mini-Badge der ersten Runde („2 Spielfläche“) hängt
 * 0,6rem über der Kante des Rasters und schnitte sonst in die Unterkante der Zeile darüber.
 */
.ar-ke__feld {
  display: grid;
  gap: 0.4rem;
}

/*
 * EINE ZEILE, IMMER. Sie bricht nicht um: „Noch 1 Zahl wählen“ und „5 Zahlen gewählt“ sind fast gleich breit, und ein
 * Umbruch beim fünften Tipp schöbe das Raster um eine Zeile nach unten, genau unter den Daumen, der es gerade berührt hat.
 */
.ar-ke__feld-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
}

.ar-ke__feld-wort {
  flex: none;
  font-family: var(--ar-schrift-plakat);
}

.ar-ke__feld-satz {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  color: var(--ar-kreide);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: right;
  hyphens: none;
}

/* Voll heißt Haken UND Worte; der Senfton kommt dazu, trägt aber nichts allein. */
.ar-ke__feld-satz[data-ar-ke-voll] {
  color: var(--ar-funke);
}

.ar-ke__feld-haken {
  flex: none;
  display: block;
  width: 1rem;
  height: 1rem;
}

/*
 * DIE BREITE STEHT AUSDRÜCKLICH AUF 100 PROZENT, und das ist kein Zierrat. Ohne sie nehmen die beiden `auto`-Ränder
 * den freien Platz, statt das Raster zu dehnen: Es fiel auf seine Inhaltsbreite zurück, und aus fünf Fächern zu 60,5
 * Pixeln wurden fünf zu 44 mit zweiundachtzig Pixeln Luft daneben. Der Deckel von 38rem hält es auf einem Breitbild
 * bei rund siebzig Pixeln je Fach; erst dort greifen die Ränder und stellen es in die Mitte.
 */
.ar-ke__raster {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 0.25rem;
  width: 100%;
  max-width: 38rem;
  margin-inline: auto;
  padding: 0.3rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-ke-filz);
}

/*
 * Ein Fach: das gestanzte Blech als Zeichnung darunter, die Ziffer darauf und am Fuß die Marken der Farben, die
 * dieselbe Zahl getippt haben. Es ist ein Knopf, solange die Wettphase offen ist, sonst ein Bild — und in beiden
 * Fällen gleich groß, damit das Feld beim Anlaufen der Trommel nicht zusammenfällt.
 *
 * VIERUNDVIERZIG PIXEL, UND ZWAR IN BEIDE RICHTUNGEN. Die Breite hält das Raster über seine Spalten, die Höhe steht
 * hier; der Daumen ist rund.
 */
.ar-ke__fach {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0.2rem 0.1rem 0.1rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ar-kreide);
  font: inherit;
  appearance: none;
}

button.ar-ke__fach {
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) {
  button.ar-ke__fach:hover {
    --ar-ke-fachkante: var(--ar-kreide);
    --ar-ke-fachton: var(--ar-noir-3);
  }
}

.ar-ke__fach:focus-visible {
  z-index: 1;
  outline-offset: 1px;
}

/*
 * Das Blech liegt absolut unter der Ziffer, und die Ziffer trägt dafür `position: relative` — NICHT das Blech ein
 * negatives z-index. Der Knopf hat keine eigene Fläche; ein Kind auf z-index -1 fiele hinter ihn und damit hinter den
 * Filz des Rasters, und das Fach stünde ohne Blech da.
 */
.ar-ke__fach-blech {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ar-ke__fach-zahl {
  position: relative;
  align-self: center;
  color: inherit;
  font-family: var(--ar-schrift-plakat);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  hyphens: none;
}

/* Die Markenzeile hält ihren Platz, auch wenn nichts liegt: Sonst wüchse das Feld mit dem ersten fremden Tipp. */
.ar-ke__fach-marken {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.1rem;
  min-height: 0.6rem;
}

.ar-ke__fach-marke {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
}

/* Getippt: helleres Blech, doppelt so starke Kante — und der Knopf steht auf aria-pressed. */
.ar-ke__fach[data-ar-ke-stand='getippt'] {
  --ar-ke-fachton: var(--ar-ke-tipp);
  --ar-ke-fachkante: var(--ar-kreide);
  --ar-ke-fachstrich: 2;
}

/* Gezogen: Senf, dreifache Kante und umgekehrte Tinte. */
.ar-ke__fach[data-ar-ke-stand='gezogen'],
.ar-ke__fach[data-ar-ke-stand='treffer'] {
  --ar-ke-fachton: var(--ar-funke);
  --ar-ke-fachkante: var(--ar-kreide);
  --ar-ke-fachstrich: 3;
  color: var(--ar-noir);
}

/*
 * EIN TREFFER AUF DEM EIGENEN SCHEIN WIRD DURCHGESTRICHEN. Er steht damit in drei Dingen da: im Senf des gezogenen
 * Fachs, im dicken roten Strich darüber und im Satz für den Screenreader. Der Strich liegt über der Ziffer und über
 * den Marken der anderen — durchgestrichen ist durchgestrichen.
 */
.ar-ke__fach-stift,
.ar-ke__tipp-stift {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Auf der schmalen Zahl des Scheins trägt derselbe Stift dünner auf: Sonst deckte er die Ziffer ganz zu. */
.ar-ke__tipp-stift {
  --ar-ke-stiftbreite: 3;
}

/*
 * DER SCHLAG HÄNGT AM MARKUP UND NICHT AN EINEM ZÄHLER IM BROWSER. Das Fach trägt `data-ar-ke-schlag` genau in dem
 * Kugelschritt, in dem seine Zahl gefallen ist; gezeichnet wird dieser Schritt aus der Serverzeit, also bei allen vier
 * im selben Augenblick. Zweimal 110 ms bleiben innerhalb des Schritts von 220: Er läuft ab, er wird nicht abgeschnitten.
 */
.ar-ke__fach[data-ar-ke-schlag],
.ar-ke__tipp[data-ar-ke-schlag] {
  outline: 3px solid transparent;
  outline-offset: 0;
  animation: ar-ke-schlag 110ms step-end 2;
}

/* Gewechselt wird allein die FARBE der Kante: Ein wandernder Abstand risse bei jedem Schlag das Feld neu um. */
@keyframes ar-ke-schlag {
  0% { outline-color: var(--ar-kreide); }
  50% { outline-color: var(--ar-funke); }
  100% { outline-color: transparent; }
}

/*
 * OHNE BEWEGUNG BLEIBT DAS BRETT VOLLSTÄNDIG. Der Schlag wird zur stehenden Kante; dass gezogen wird, steht als Zeile
 * im Kopf und als Kugel auf der Schiene, auch wenn sie nicht rollt und die Gitterkugel steht (Bewegung des Tisches:
 * weiter unten unter „Der Casinotisch“).
 */
@media (prefers-reduced-motion: reduce) {
  .ar-ke__fach[data-ar-ke-schlag],
  .ar-ke__tipp[data-ar-ke-schlag],
  .ar-ke__quote[data-ar-ke-schlag] {
    animation: none;
    outline: 3px solid var(--ar-funke);
    outline-offset: 0;
  }
}

/* ------------------------------------------------------------ Quotenleiste */

.ar-ke__quoten {
  display: grid;
  gap: 0.3rem;
  padding: 0.4rem 0.5rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

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

/*
 * Auf dem Telefon stehen die vier Stufen NEBENEINANDER, je Stufe drei Zeilen: Untereinander nähmen sie gut hundert
 * Pixel, und die hat auf einem Brett mit vierzig Fächern niemand übrig. Ab 26rem stehen sie als Zeilen mit drei
 * Spalten, wie eine Tafel an der Wand.
 */
.ar-ke__quoten-reihe {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-ke__quote {
  display: grid;
  gap: 0.05rem;
  padding: 0.2rem 0.3rem;
  border-left: var(--ar-farbkante) solid var(--ar-kante-griff);
  color: var(--ar-kreide);
  font-size: 0.72rem;
  text-align: center;
  hyphens: none;
}

/*
 * DIE LAMPE STEHT IN DER STUFE UND NICHT NEBEN IHR. Die Zeile hat drei Spalten — Stufe, Faktor, Betrag —, und eine
 * vierte hätte die Tafel auf 332 Pixeln um eine Spalte enger gemacht, für ein Zeichen von elf Pixeln.
 */
.ar-ke__quote-stufe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  color: var(--ar-kreide-2);
  overflow-wrap: anywhere;
}

.ar-ke__quote-lampe {
  display: block;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
}

.ar-ke__quote-faktor {
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-ke__quote-betrag {
  font-family: var(--ar-schrift-mono);
  color: var(--ar-funke);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  hyphens: none;
}

/*
 * EINE STUFE, DIE STEHT, LEUCHTET: Senfkante links, heller Grund, helle Schrift — und statt des dunklen Kastens
 * brennt ihre Lampe als Funke. Vier Träger, von denen keiner ein Farbton allein ist. Aufgeleuchtet wird dabei durch
 * KONTRAST und nicht durch Schein; einen Glanz gibt es in diesem Haus nicht.
 */
.ar-ke__quote[data-ar-ke-hell] {
  border-left-color: var(--ar-funke);
  background: var(--ar-noir-3);
}

.ar-ke__quote[data-ar-ke-hell] .ar-ke__quote-stufe {
  color: var(--ar-kreide);
}

/* Die Stufe, die gerade gezahlt hat: zusätzlich gerahmt. Sie leuchtet ohnehin — hier steht, was der Tisch anerkennt. */
.ar-ke__quote[data-ar-ke-erreicht] {
  border-left-color: var(--ar-funke);
  background: var(--ar-noir-3);
  outline: 2px solid var(--ar-funke);
  outline-offset: -2px;
}

/*
 * Die Stufe, die eben gefallen ist, schlägt einmal — dieselben zwei harten Bilder wie das Fach im Raster. Sie steht
 * NACH der erreichten Stufe: Sonst läge deren Rahmen oben, und der Schlag käme nie zum Vorschein.
 */
.ar-ke__quote[data-ar-ke-schlag] {
  outline: 3px solid transparent;
  outline-offset: 0;
  animation: ar-ke-schlag 110ms step-end 2;
}

/* ------------------------------------------------------------ Scheine: Tisch und Aufdeckung */

/*
 * Die Scheinzeile steht OHNE .ar-ke im Selektor. Dieselbe Zeile zeichnet den Tisch auf dem Brett und die Aufdeckung
 * über dem Tableau der Schlussrechnung — und das Tableau liegt in der Tafel des Rahmens, also außerhalb von .ar-ke.
 */
.ar-ke__tisch,
.ar-ke__aufdeckung {
  display: grid;
  gap: 0.3rem;
  padding: 0.4rem 0.5rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

.ar-ke__tisch-kopf,
.ar-ke__aufdeckung-kopf {
  margin: 0;
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.78rem;
}

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

.ar-ke__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.45rem;
  padding: 0.2rem 0.3rem;
  border-left: var(--ar-farbkante) solid var(--ar-kante-griff);
  color: var(--ar-kreide);
}

/* Der eigene Schein liegt zwischen den fremden und steht in Kreide statt in Grau: Man muss ihn im Blick finden. */
.ar-ke__zeile[data-ar-ke-meins] {
  border-left-color: var(--ar-kreide);
  background: var(--ar-noir-3);
}

.ar-ke__zeile-wer {
  display: flex;
  flex: 0 1 7rem;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

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

.ar-ke__zeile-marke {
  display: block;
  flex: none;
  width: 1rem;
  height: 1rem;
}

.ar-ke__zeile-name {
  min-width: 0;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-ke__tipps {
  display: flex;
  flex: 1 1 auto;
  gap: 0.15rem;
}

/* Eine getippte Zahl auf einem Schein: klein, gleich breit und ohne Trennstrich — sie wird über den Tisch gerufen. */
.ar-ke__tipp {
  position: relative;
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-width: 1.5rem;
  padding: 0.05rem 0.1rem;
  border: 1px solid var(--ar-kante-griff);
  background: var(--ar-ke-blech);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  hyphens: none;
}

.ar-ke__tipp[data-ar-ke-offen] {
  border-style: dashed;
  background: none;
}

.ar-ke__tipp[data-ar-ke-raus] {
  border-color: var(--ar-kreide);
  background: var(--ar-funke);
  color: var(--ar-noir);
  font-weight: 700;
}

.ar-ke__zeile-fuss {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.3rem;
}

.ar-ke__zeile-einsatz {
  padding: 0 0.3rem;
  border: 1px solid var(--ar-kante-griff);
  font-family: var(--ar-schrift-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-ke__zeile-treffer {
  padding: 0 0.3rem;
  border: 1px solid var(--ar-funke);
  color: var(--ar-funke);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  hyphens: none;
}

/* ------------------------------------------------------------ Der eigene Schein */

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

.ar-ke__schein[data-ar-ke-gesperrt] {
  border-style: dashed;
  border-color: var(--ar-kante);
}

.ar-ke__schein-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin: 0;
}

.ar-ke__schein-titel {
  color: var(--ar-kreide);
  font-weight: 700;
}

.ar-ke__chips {
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

/* Die Zone „Einsatz“: An ihrer Oberkante hängt in der ersten Runde die Nummer des Rahmens, und auf dem Telefon deckte
   sie die Kuppe der Zahl im ersten Jeton. */
.ar-ke__werte {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  gap: 0.3rem;
  padding-top: 0.2rem;
}

/*
 * DIE ZAHL STEHT OBEN UND DER BLOCKPREIS DARUNTER: „10“ und in Klammern „(50 Chips gesamt)“. Auf dem Telefon misst ein
 * Knopf rund siebzig Pixel, und die Klammer bricht dort in zwei Zeilen; die Fläche wächst mit und bleibt in beide
 * Richtungen über 44 Pixeln. `anywhere` bricht erst mitten im Wort, wenn ein einzelnes Wort nicht mehr in den Knopf passt.
 */
.ar-ke__wert {
  display: grid;
  place-items: center;
  align-content: center;
  row-gap: 0.1rem;
  min-height: 3rem;
  padding: 0.2rem 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: none;
}

.ar-ke__wert-zahl {
  font-family: var(--ar-schrift-plakat);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
}

.ar-ke__wert-summe {
  font-weight: 400;
}

/*
 * Der gewählte Einsatz trägt zusätzlich die Senfkante; den umgekehrten Grund — Tinte auf Kreide — bringt
 * .ar-knopf--wahl aus dem Rahmen mit. GRUND UND SCHRIFT BLEIBEN DESHALB UNANGETASTET: Ein eigener dunkler Grund hier
 * hätte die Tinte des Rahmens auf sich stehen lassen, und der gewählte Knopf wäre der einzige unlesbare des Bretts.
 */
.ar-ke__wert[aria-pressed='true'] {
  border-color: var(--ar-funke);
  outline: 3px solid var(--ar-funke);
  outline-offset: -3px;
}

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

.ar-ke__stempel {
  padding: 0.3rem 0.5rem;
  border: 2px dashed var(--ar-funke);
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Die Fuge misst 0,5rem, weil der Ring des Pulses (3 Pixel, 4 Pixel Abstand) sieben Pixel über den Knopf hinausreicht. */
.ar-ke__knoepfe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.5rem;
}

/* Der Umschlag um „Schein abgeben“ trägt das Mini-Badge und lässt den Knopf die ganze Zelle füllen. */
.ar-ke__abgabe {
  display: grid;
}

.ar-ke__zufall,
.ar-ke__leeren,
.ar-ke__fertig {
  min-height: 3.25rem;
}

.ar-ke__zufall {
  display: grid;
  place-items: center;
  gap: 0.15rem;
}

.ar-ke__zufall-bild {
  width: 1.3rem;
  height: 1.3rem;
}

.ar-g-ke-wuerfel {
  fill: var(--ar-noir-2);
  stroke: var(--ar-kreide-2);
  stroke-width: 4;
}

.ar-g-ke-auge {
  fill: var(--ar-kreide);
}

/*
 * Ein Einsatz steht nie still: Wer ihn nicht decken kann, bekommt vor der Ziehung Kredit vom Haus (AR_KE_KREDIT). Ein
 * stummer Knopf für einen Einsatz, den der Tisch sehr wohl annimmt, wäre eine Sperre, die es nicht gibt.
 */
.ar-ke__leeren[aria-disabled='true'],
.ar-ke__fertig[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-ke__fach[data-ar-nein],
.ar-ke__wert[data-ar-nein],
.ar-ke__zufall[data-ar-nein],
.ar-ke__leeren[data-ar-nein],
.ar-ke__fertig[data-ar-nein] {
  outline: 3px solid var(--ar-kreide);
  outline-offset: 1px;
}

/* ------------------------------------------------------------ Klappen */

/*
 * RANGLISTE UND ZIEHUNGSBUCH KLAPPEN. Auf dem Telefon standen sie offen unter dem Schein, und nach fünf Blöcken zu
 * viert war allein das Buch länger als das Zahlenfeld: Die Bühne wuchs auf anderthalb tausend Pixel, und wer zum
 * Schein wollte, rollte an Abrechnungen vorbei, die er in dem Augenblick nicht brauchte. Beide stehen deshalb
 * zugeklappt da, auf dem Telefon nebeneinander und seit dem Casinotisch auch auf dem Schreibtisch, wo ihr Platz dem Tisch
 * über dem Schein gehört; wer eine auf- oder zuklappt, behält es für den Abend (brett.js).
 * Zugeklappt sagt die Zeile noch, wo man steht — der eigene Platz, die Zahl der Blöcke.
 *
 * DAS PLUS STEHT ALS ZEICHEN UND NICHT ALS DREIECK DES BROWSERS, wie am Spickzettel des Rahmens (css/arena.css).
 */
.ar-ke__klappe {
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

.ar-ke__klappe-griff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.6rem;
  color: var(--ar-kreide-2);
  cursor: pointer;
  font-size: 0.78rem;
  list-style: none;
}

.ar-ke__klappe-griff::-webkit-details-marker {
  display: none;
}

.ar-ke__klappe-griff::after {
  content: '+';
  margin-left: auto;
  color: var(--ar-funke);
  font-family: var(--ar-schrift-mono);
  font-size: 1.2rem;
  line-height: 1;
}

.ar-ke__klappe[open] > .ar-ke__klappe-griff::after {
  content: '−';
}

/* Offen steht darunter, was die Kurzzeile sagt; sie gilt nur dem zugeklappten Stand. */
.ar-ke__klappe[open] > .ar-ke__klappe-griff > :not(.ar-ke__klappe-titel) {
  display: none;
}

.ar-ke__klappe-griff:hover,
.ar-ke__klappe-griff:focus-visible {
  background: var(--ar-noir-3);
}

.ar-ke__klappe-titel {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------ Rangliste */

.ar-ke__rangliste {
  display: grid;
  gap: 0.35rem;
  padding: 0 0.6rem 0.5rem;
}

.ar-ke__rangliste-kopf {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
}

.ar-ke__rangliste-reihe {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-ke__rang-teil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.45rem;
  color: var(--ar-kreide);
}

/* ------------------------------------------------------------------ Ziehungsbuch */

/*
 * DIESES SPIEL HATTE ALS EINZIGES KEINE ERINNERUNG. `lauf` trägt immer nur den Block, der gerade einrollt; welche
 * Kugeln in Block eins lagen, stand danach nirgends. An einem Zahlentisch ist das die erste Frage überhaupt.
 */
.ar-ke__buch {
  display: grid;
  align-content: start;
  min-width: 0;
}

.ar-ke__buch-inhalt {
  display: grid;
  gap: 0.3rem;
  padding: 0 0.6rem 0.5rem;
}

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

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

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

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

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

.ar-ke__buch-posten {
  display: grid;
  grid-template-columns: 0.9rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
}

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

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

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

.ar-ke__buch-treffer {
  color: var(--ar-kreide-2);
}

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

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

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

.ar-ke__rang-platz {
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-ke__rang-marke {
  display: block;
  flex: none;
  width: 1rem;
  height: 1rem;
}

.ar-ke__rang-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.ar-ke__rang-chips {
  margin-left: auto;
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-ke__rang-kredit {
  font-family: var(--ar-schrift-mono);
  padding: 0 0.3rem;
  border: 1px dashed var(--ar-rot);
  color: var(--ar-kreide);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-ke__rang[data-ar-weg] .ar-ke__rang-teil {
  opacity: 0.7;
}

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

/*
 * AB 26REM STEHT EINE QUOTE ALS ZEILE. Vier Stufen nebeneinander geben auf 332 Pixeln je Stufe achtzig — genug für
 * „2 Treffer“ über drei Zeilen, aber eng. Ab 416 Pixeln liegt Stufe, Faktor und Betrag nebeneinander, wie auf der
 * Tafel eines Kenosaals.
 */
@container ar-ke-mass (min-width: 26rem) {
  .ar-ke__quoten-reihe {
    grid-auto-flow: row;
    gap: 0.2rem;
  }

  .ar-ke__quote {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 0 0.6rem;
    font-size: 0.8rem;
    text-align: left;
  }

  .ar-ke__quote-betrag {
    min-width: 4.5rem;
    text-align: right;
  }
}

/*
 * AB 27REM SPALTENBREITE STEHT DAS ZAHLENFELD QUER. Von 432 Pixeln nimmt das Raster seine Kante (4) und seine
 * Polsterung (9,6) und behält 418,4; acht Spalten samt sieben Fugen zu 4 Pixeln geben je Fach 48,8 Pixel. Gemessen
 * wird die SPALTE, in der das Feld liegt, und nicht das Fenster: Im flachen Querformat ist das Fenster breit und die
 * Spalte schmal.
 */
@container ar-ke-raster (min-width: 27rem) {
  .ar-ke__raster {
    grid-template-columns: repeat(8, minmax(44px, 1fr));
  }

  .ar-ke__fach-zahl {
    font-size: 1.1rem;
  }
}

/*
 * AB 32REM ZWEI SPALTEN: links Zwischenbilanz, Zahlenfeld, Quoten und die offenen Scheine, rechts der Tisch und darunter
 * Schein und Rangliste. Hier stand die Schwelle bei 50rem, gerechnet für ein Brett ohne Tisch: Zwei Spalten UND ein
 * hochkant stehendes Feld wären breiter gewesen, ohne mehr zu zeigen. Mit dem Tisch zeigen sie mehr, und einspaltig
 * wurde das Brett so hoch, dass der Rahmen es auf dem Tablet bis an seine Untergrenze verkleinerte (`einpassen()` in
 * js/spielfeld.js, Zoom 0,6) — Fächer von einundvierzig mal neunundzwanzig Pixeln. Zwischen 32 und 50rem steht das Feld
 * deshalb hochkant links, fünf oder sechs Spalten, und der Tisch schmal rechts; ab 50rem quer, acht zu fünf. Die 50rem
 * sind dabei gerechnet: Bei 736 Pixeln bliebe der linken Spalte nach der rechten (mindestens 304) und der Fuge nur 400 —
 * zu wenig für die acht Spalten des Zahlenfelds. Bei 800 sind es 445.
 *
 * DER TISCH STEHT RECHTS UND NICHT ÜBER DEM ZAHLENFELD, und das ist gemessen: Links nehmen Zahlenfeld und Quoten schon
 * gut vierhundert Pixel, und über ihnen blieben dem Tisch auf 1280 × 720 rund hundertdreißig — eine Kugel von acht
 * Pixeln. Rechts steht er so breit wie die Spalte und höchstens so hoch, dass der Schein darunter ins Fenster passt.
 * Die offenen Scheine der anderen sind dafür nach links gewandert, unter die Quoten.
 */
@container ar-ke-mass (min-width: 32rem) {
  .ar-ke {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.8fr);
    grid-template-areas:
      'kopf kopf'
      'links buehne'
      'links rechts';
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 1rem;
  }

  .ar-ke > [data-ar-ke-teil='kopf'] {
    grid-area: kopf;
  }

  .ar-ke__links {
    grid-area: links;
  }

  .ar-ke__buehne {
    grid-area: buehne;
    justify-self: center;
    width: min(100%, (100svh - var(--ar-reserve) - var(--ar-hauskopf) - 25rem) * 1.4);
  }

  .ar-ke__rechts {
    grid-area: rechts;
  }
}

@container ar-ke-mass (min-width: 50rem) {
  .ar-ke {
    grid-template-columns: minmax(0, 58fr) minmax(19rem, 42fr);
  }
}

/*
 * AUF DEM TELEFON STEHT BEIM TIPPEN DAS ZAHLENFELD OBEN UND DER TISCH DARUNTER, beim Ziehen umgekehrt — wie am Roulette.
 * Er ist ein Bild, bis die Trommel läuft; getippt wird oben. Läuft sie an, steht der Tisch wieder über dem Feld, und
 * das Brett holt ihn ins Bild (`kopfNachOben()` in brett.js). Ohne den Tausch lagen die vierzig Fächer einen Tisch tiefer,
 * und der klebende Schein deckte die unteren Zeilen zu.
 */
@container ar-ke-mass (max-width: 31.99rem) {
  .ar-ke[data-ar-ke-lage='wetten'] > .ar-ke__buehne {
    order: 1;
  }

  .ar-ke[data-ar-ke-lage='wetten'] > .ar-ke__rechts > * {
    order: 2;
  }
}

/*
 * HOCHKANT IST DAS BRETT LÄNGER ALS DER SCHIRM, und daran ist nichts zu rechnen: Acht Zeilen zu vierundvierzig Pixeln
 * samt Fugen sind allein für das Zahlenfeld 380 Pixel, und darüber und darunter stehen Trommel, Quoten, Tisch, Schein
 * und Rangliste. Die Bühne rollt dafür in sich (css/arena.css); was nicht rollen darf, ist der Schein.
 *
 * ER KLEBT DESHALB AM UNTEREN RAND. Einsatz und „Schein abgeben“ stehen unter vierzig Fächern; wer den Einsatz
 * wechseln will, scrollte sonst hin und wieder zurück. Sticky statt fixed ist hier die ganze Entscheidung: Ein fester
 * Kasten nähme der Rangliste ihren Platz, ein klebender behält seine Zeile im Fluss und gibt sie am Ende wieder frei.
 * Erkannt wird die Wettphase am Schein selbst: Er trägt data-ar-ke-gesperrt, sobald nichts mehr geht. Ein Browser ohne
 * :has() bekommt ihn im Fluss — den Stand von vorher, nicht einen kaputten.
 *
 * UND ER KLEBT ERST AB EINER HÖHE: Er misst rund 230 Pixel. Auf einem Telefon im Hochformat (667 und mehr) ist das ein
 * Drittel; im flachen Querformat (375 hoch) wären es drei Fünftel, und der Riegel dagegen ist die Fensterhöhe und
 * nicht die Brettbreite — die Container-Abfrage misst nur Breiten.
 *
 * DIE RECHTE SPALTE LÖST SICH DAFÜR AUF. Ein klebender Kasten klebt nur, so weit sein Elternkasten reicht, und der
 * Schein steckte in `.ar-ke__rechts` — einem Kasten, der auf dem Telefon erst UNTER Zahlenfeld und Quoten beginnt. Er
 * klebte also genau dort nicht, wo man ihn brauchte, über den vierzig Fächern, und erst, wenn man schon bei ihm war.
 * Mit `display: contents` stehen Tisch, Schein, Rangliste und Buch als Kinder im Raster des ganzen Bretts, mit derselben
 * Fuge wie vorher. Auf dem Schreibtisch bleibt die Spalte ein Kasten: Dort ist sie ein Bereich des Rasters.
 */
@container ar-ke-mass (max-width: 31.99rem) {
  .ar-ke__rechts {
    display: contents;
  }

  @media (min-height: 40rem) {
    /* Am Fensterrand und nicht an der Luft der Bühne darüber, auf Ebene vier über den Schildern der ersten Runde —
       dieselbe Rechnung wie das Daumendock (css/arena.css). */
    .ar-ke__rechts > [data-ar-ke-teil='schein']:has(.ar-ke__schein:not([data-ar-ke-gesperrt])) {
      position: sticky;
      bottom: calc(-1 * var(--ar-buehne-fuss));
      z-index: 4;
    }
  }
}

/*
 * AUF DEM TELEFON RÜCKT DAS BRETT ZUSAMMEN, ohne eine Tippfläche kleiner zu machen. Gemessen auf 375 × 812 stand die
 * Bühne bei 1214 Pixeln: Zahlenfeld (5 × 8) 412, Quoten 100, Schein 237 und zwei Klappen untereinander 96.
 *
 * - SECHS SPALTEN, SOBALD SIE PASSEN. Sechs Fächer zu 44 Pixeln samt Fugen, Polsterung und Kante brauchen 18,6rem; das
 *   hat ab 360 Pixeln Fensterbreite jede Spalte. Das Feld steht dann 6 × 7 statt 5 × 8 und ist eine Zeile kürzer, die
 *   Reihenfolge im Markup bleibt eins bis vierzig. Auf 320 Pixeln bleiben es fünf Spalten.
 * - DIE ÜBERSCHRIFT DER QUOTEN FÄLLT WEG: Lampe und „2 Treffer“ sagen dasselbe, und sie war ohnehin `aria-hidden`.
 * - RANGLISTE UND ZIEHUNGSBUCH STEHEN ZUGEKLAPPT NEBENEINANDER, aufgeklappt über die volle Breite. Dafür hat das Brett
 *   auf dem Telefon zwei Spalten, und alles außer den beiden zugeklappten Klappen nimmt beide.
 *
 * Unter 750 Pixel, wie einmal bestellt, kommt es damit nicht: Vierzig Fächer zu 44 Pixeln, der Schein und die
 * Anzeigeleiste darüber sind allein rund neunhundert. Was bleibt, steht im Arena-README bei Keno.
 */
@container ar-ke-raster (min-width: 18.6rem) and (max-width: 26.99rem) {
  .ar-ke__raster {
    grid-template-columns: repeat(6, minmax(44px, 1fr));
  }
}

@container ar-ke-mass (max-width: 31.99rem) {
  .ar-ke__quoten-kopf {
    display: none;
  }

  .ar-ke {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ar-ke > *,
  .ar-ke__rechts > * {
    grid-column: 1 / -1;
  }

  .ar-ke__rechts > :is([data-ar-ke-teil='rangliste'], [data-ar-ke-teil='buch']):not(:has(.ar-ke__klappe[open])) {
    grid-column: auto;
  }
}

/* Ganz schmal, etwa auf 320 Pixeln, rücken Fächer und Zeilen zusammen — die Tippflächen bleiben, wie sie sind. */
@container ar-ke-mass (max-width: 21rem) {
  .ar-ke__raster {
    gap: 0.2rem;
    padding: 0.2rem;
  }

  .ar-ke__fach-zahl {
    font-size: 0.85rem;
  }

  .ar-ke__zeile-wer {
    flex-basis: 100%;
  }
}

/*
 * DAS ABZEICHEN STEHT ÜBER DER GITTERKUGEL UND NICHT ÜBER DEM ZAHLENFELD. Der Rahmen legt es mittig, und dort liegen die
 * vierzig Fächer mit den getroffenen Zahlen — genau das, was man im Augenblick des Volltreffers liest. Über der
 * Gitterkugel oben im Tisch deckt es nur den Korb; die Kugeln liegen darunter auf der Schiene.
 *
 * GEMESSEN WIRD DIE BÜHNE UND NICHT DAS BRETT. Das Abzeichen liegt neben der Fläche des Spiels und nicht darin; sein
 * nächster Maßcontainer ist ar-buehne, und eine namenlose Abfrage träfe genau den — nur ohne es zu sagen.
 */
@container ar-buehne (min-width: 50rem) {
  .ar-spielfeld[data-ar-spiel='keno'] .ar-abzeichen {
    left: 79%;
    top: 14%;
    width: min(36%, 18rem);
  }
}

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

/*
 * Ton, Kante und Kantenstärke eines Fachs kommen als Custom Properties von außen: Ein <use> vererbt sie in seinen
 * Inhalt, eine Klasse am <use> erreicht den Pfad darin nicht. So zeichnet dieselbe Datei das Fach auf dem Brett und auf
 * der Bildkarte des Regelblatts.
 *
 * Der Strich steht auf non-scaling-stroke, weil das Blech auf dem Brett in die Breite gezogen wird: Ohne die Zeile
 * wären die waagerechten Kanten dünner als die senkrechten.
 */
.ar-g-ke-fach {
  fill: var(--ar-ke-fachton, var(--ar-ke-blech));
  stroke: var(--ar-ke-fachkante, var(--ar-kante-griff));
  stroke-width: var(--ar-ke-fachstrich, 1);
  vector-effect: non-scaling-stroke;
}

/* Die Bildkarte „Fünf Zahlen“ zeigt getippte Fächer — denselben Stand wie das Brett, über dieselben Variablen. */
.ar-g-ke-getippt {
  --ar-ke-fachton: var(--ar-ke-tipp);
  --ar-ke-fachkante: var(--ar-kreide);
  --ar-ke-fachstrich: 2;
}

.ar-g-ke-kugel { fill: var(--ar-ke-kugelton, var(--ar-ke-holz)); stroke: var(--ar-noir); stroke-width: 3; }
.ar-g-ke-kugelring { fill: none; stroke: var(--ar-noir); stroke-width: 2; }
/* Der Glanzpunkt ist Kreide und kein Weiß: Auf der Senfkugel des eigenen Treffers steht er, auf der hölzernen
   Kugel geht er in ihr auf. Ein neuer, hellerer Ton wäre eine zweite Palette für einen Punkt von neun Einheiten. */
.ar-g-ke-glanz { fill: var(--ar-kreide); }
/* Reif, Streben, Achse und Auslauf sind EIN Stück Messing; was sie unterscheidet, ist die Strichstärke. */
.ar-g-ke-korb { fill: var(--ar-ke-filz); stroke: var(--ar-ke-messing); stroke-width: 2.5; }
.ar-g-ke-strebe { fill: none; stroke: var(--ar-ke-messing); stroke-width: 1.4; }
.ar-g-ke-achse { fill: none; stroke: var(--ar-ke-messing); stroke-width: 2; stroke-linecap: square; }
.ar-g-ke-auslauf { fill: none; stroke: var(--ar-ke-messing); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
/*
 * DIE GITTERKUGEL, DIE SCHIENE UND DER SCHEIN AUF DEM TISCH sind auf ihre Kästen gezogen (`preserveAspectRatio="none"`),
 * und ihre Kanten stehen deshalb in Bildschirmpixeln: Ohne `non-scaling-stroke` wären die waagerechten dünner als die
 * senkrechten.
 */
.ar-ke__geraet :is(.ar-g-ke-korb, .ar-g-ke-strebe, .ar-g-ke-achse),
.ar-g-ke-gestell,
.ar-g-ke-rohr,
.ar-g-ke-fuss,
.ar-g-ke-schiene,
.ar-g-ke-mulde,
.ar-g-ke-zettel,
.ar-g-ke-kaestchen,
.ar-g-ke-fleck {
  vector-effect: non-scaling-stroke;
}
.ar-g-ke-gestell { fill: none; stroke: var(--ar-ke-messing); stroke-width: 3px; stroke-linecap: square; }
.ar-g-ke-rohr { fill: var(--ar-ke-blech); stroke: var(--ar-ke-messing); stroke-width: 1.5px; }
.ar-g-ke-fuss,
.ar-g-ke-schiene { fill: var(--ar-ku-holz); stroke: var(--ar-ke-messing); stroke-width: 1.5px; }
.ar-g-ke-mulde { fill: var(--ar-ku-staender); stroke: var(--ar-noir); stroke-width: 1px; }
/* Eine Kugel auf der Schiene: Holz, auf dem eigenen Treffer Senf und dazu der Kranz — die Farbe steht nie allein. */
.ar-g-ke-rollkugel { fill: var(--ar-ke-holz); stroke: var(--ar-noir); stroke-width: 3; }
.ar-ke__rollkugel[data-ar-ke-meins] .ar-g-ke-rollkugel { fill: var(--ar-funke); }
.ar-g-ke-kranz { fill: none; stroke: var(--ar-funke); stroke-width: 5; }
.ar-g-ke-rollzahl { fill: var(--ar-noir); font-family: var(--ar-schrift-plakat); font-size: 44px; text-anchor: middle; dominant-baseline: central; }
.ar-g-ke-zettel { fill: var(--ar-ku-elfenbein); stroke: var(--ar-noir); stroke-width: 1px; }
.ar-g-ke-kaestchen { fill: none; stroke: var(--ar-noir); stroke-width: 1px; }
.ar-g-ke-fleck { fill: none; stroke: var(--ar-noir); stroke-width: 1px; stroke-dasharray: 3 3; }
/* Ein Stift hat eine weiche Spitze; „round" ist hier die Zeichnung eines Strichs und keine abgerundete Kante am UI. */
.ar-g-ke-stift { fill: none; stroke: var(--ar-ke-stift); stroke-width: var(--ar-ke-stiftbreite, 5); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ar-g-ke-filz { fill: var(--ar-ke-filz); }
.ar-g-ke-balken { fill: var(--ar-funke); stroke: var(--ar-noir); stroke-width: 2; }
.ar-g-ke-blatt { fill: var(--ar-kreide); stroke: var(--ar-noir); stroke-width: 3; }
.ar-g-ke-zeile { fill: none; stroke: var(--ar-noir); stroke-width: 4; stroke-linecap: square; }
.ar-g-ke-strich { fill: none; stroke: var(--ar-noir); stroke-width: 2; }