/*
 * Roulette 1923: der Casinotisch auf der Tischbühne mit Kessel, Aufdruck und Dolly, das Ergebnisfeld, das Tableau samt
 * Dolly und Rechen, dazu Budgetzeile, Quotenzeile, Chip-Marke und die Deckungskante der Außenfelder, der Schein, die
 * Griffleiste, die Abrechnung und die Rangliste. Anzeigeleiste, Brettrand, Abzeichen und Tafel stehen als Rahmen des
 * Spielfelds in css/arena.css, Bühne, Jetons und Schilder der Plätze in ihrem Abschnitt dort; hier steht nur, was diesem
 * Brett gehört.
 *
 * NIE NUR EIN FARBTON. Rot und Schwarz tragen auf dem Tableau ihr Wort, die Zahlen im Kessel stehen in ihrem Fach und
 * nicht bloß auf einer Farbe, die getroffene Chance bekommt eine Senfkante, und jeder Chip trägt seinen Betrag als
 * Ziffer. Jede Tippfläche misst mindestens 44 Pixel. Jede Regel auf der gemeinsamen Fläche hängt an
 * [data-ar-spiel='roulette'] oder an einer Klasse ar-rl.
 *
 * DER CHIP IST RUND, UND DAS IST KEINE AUSNAHME VON DER NULL-RUNDUNG. Er 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. Der
 * Kessel ebenso.
 */

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

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

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

/*
 * Ab dem Tablet nimmt das Brett die ganze Bühne: breit links der Kessel und rechts Tableau und Schalter, mittelbreit der
 * Kessel als Zeile über dem Tableau (unten, „Breiten“). Hochkant auf dem Tablet stand es auf den 36rem des Telefons, und
 * dort lag das Tableau hochkant: zwölf Zeilen Zahlen, das Brett anderthalbtausend Pixel hoch.
 */
@media (min-width: 48rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='roulette'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/*
 * DIE TÖNE DES KESSELS STEHEN AN DER WURZEL UND NICHT AN .ar-rl, und das ist kein Versehen. Die Bildkarten dieses
 * Spiels stehen im Regelblatt und in der Einweisung, also AUSSERHALB des Bretts; ein Symbol, dessen fill auf eine
 * Variable von .ar-rl zeigt, fiele dort auf Schwarz zurück. Der Präfix --ar-rl- hält sie trotzdem für sich.
 *
 * Das Rot und das Grün des Kessels sind eigene Töne und nicht die Spielfarben: --ar-rot gehört dem Sitz Rot, und ein
 * Tableau in der Farbe einer Person wäre eine Auskunft, die es nicht gibt. Beide tragen Kreide mit mehr als 7 : 1.
 */
:root {
  --ar-rl-rot: #8c1c17;
  --ar-rl-gruen: #1d5c3a;
  --ar-rl-filz: #123026;
  --ar-rl-holz: #3a2416;
  /* Die Kante des Kessels auf der Bühne: dasselbe Holz im Schatten, damit seine Höhe zu sehen ist. */
  --ar-rl-holz-tief: #22140b;
  /*
   * DAS MESSING IST EIN WERKSTOFF UND KEINE VIERTE SPIELFARBE. Es trägt genau zwei Dinge, und beide sind dasselbe
   * Metall am selben Tisch: die Stege zwischen den Fächern, über die die Kugel springt, und den Dolly, den der
   * Croupier danach auf die gefallene Zahl stellt. Ein zweiter Ton für dieselbe Sache wären zwei Werkstoffe.
   *
   * Er hält 7,77 : 1 auf Noir, 3,65 : 1 auf dem Rot des Kessels und 3,13 : 1 auf seinem Grün — über den 3 : 1, die
   * WCAG 1.4.11 für eine Marke verlangt, die etwas aussagt. Allein steht sie trotzdem nie: Der Dolly hat eine eigene
   * Silhouette, sein Feld eine Senfkante, und vorgelesen wird er auch.
   */
  --ar-rl-messing: #c69a3e;
}

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

.ar-rl {
  --ar-rl-chipfarbe: var(--ar-funke);
  /*
   * VIERUNDVIERZIG PIXEL, UND ZWAR ÜBERALL. Jedes Feld des Tableaus ist ein Knopf, trägt aber nicht die Klasse
   * ar-knopf, die das Maß sonst setzt — seine Höhe kam allein von hier und stand auf 2,1rem, auf schmalen Schirmen auf
   * 1,9. Vierundvierzig sind hier keine Bequemlichkeit: Es sind vierundvierzig Tippflächen nebeneinander, und der
   * Daumen ist rund.
   */
  --ar-rl-feldhoehe: 2.75rem;
  display: grid;
  gap: 0.6rem;
}

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

/*
 * Die rechte Spalte misst sich für das Tableau selbst. Die zwölf Spalten des Querformats brauchen zwölfmal
 * vierundvierzig Pixel plus Lücken; ob die dastehen, weiß nur die Spalte, in der das Tableau liegt — das ganze Brett
 * ist ab 39rem zweispaltig, und sechzig Hundertstel davon sind auf einem 1024er Schirm noch keine 528 Pixel.
 */
.ar-rl__rechts {
  container: ar-rl-tableau / inline-size;
}

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

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

.ar-rl__runde,
.ar-rl__gesetzt {
  margin: 0;
}

.ar-rl__runde {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  color: var(--ar-kreide);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

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

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

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

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

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

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

/*
 * DER CASINOTISCH STEHT HOCHKANT, 0,85 : 1: So ist der Kessel das Größte im Bild, und Aufdruck und Plätze stehen trotzdem
 * ganz darin. Auf dem Telefon nimmt er die Breite des Bretts, auf dem Schreibtisch seine Spalte, und dort ist er
 * höchstens so hoch, dass er samt Ergebnisfeld ins Fenster passt (unten bei den Breiten). Flach quer auf dem Telefon
 * steht er 1,4 : 1, sonst wäre er höher als das Fenster.
 */
.ar-rl__buehne {
  position: relative;
  min-width: 0;
}

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

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

/* Unter der Bühne: das Ergebnisfeld und daneben die gefallenen Zahlen. */
.ar-rl__stand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.ar-rl__stand > .ar-rl__tafel {
  flex: 1 1 auto;
}

/*
 * DER KESSEL AUF DER BÜHNE (`RAD_BILD` in brett.js): Holz, Kranz, Kugel und ihr Schatten liegen übereinander in der
 * Scheibe, die die Bühne auf den Filz stellt. Der Kranz dreht sich als Ganzes, und Kugel und Schatten stehen, wohin die
 * Bildschleife sie schiebt — gestellt aus der Serverzeit und nicht aus einem Übergang: Der Kessel läuft aus, die Kugel
 * springt über die Stege, und ein Übergang täte beides linear.
 */
.ar-rl-rad,
.ar-rl-rad__kranz,
.ar-rl-rad > svg,
.ar-rl-rad__kranz > svg {
  position: absolute;
  inset: 0;
}

.ar-rl-rad > svg,
.ar-rl-rad__kranz > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Die Kugel ist rund wie ein Jeton: ein Gegenstand auf dem Filz und kein Bedienelement (css/arena.css, „EINE SCHEIBE IST RUND“). */
.ar-rl-rad__kugel,
.ar-rl-rad__schatten {
  position: absolute;
  left: 0;
  top: 0;
  width: 4.8%;
  height: 4.8%;
  border-radius: 50%;
}

.ar-rl-rad__kugel {
  background: var(--ar-kreide);
  box-shadow: inset 0 0 0 1px var(--ar-noir);
}

.ar-rl-rad__schatten {
  background: var(--ar-ku-schlagschatten);
}

.ar-rl__buehne .ar-kulisse__scheibe-kante[data-ar-ku-art='kessel'] {
  background: var(--ar-rl-holz-tief);
}

/*
 * DER AUFDRUCK DES TABLEAUS (`druckBild()` in brett.js): die Zahlen auf ihrem Rot, Schwarz oder Grün, Linien und Schrift
 * in Elfenbein, wie gedruckt — eine Zeichnung in Bildpunkten der Bühne, die mit ihr wächst.
 */
.ar-rl__buehne .ar-kulisse__platte > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ar-g-rl-druck { fill: none; stroke: var(--ar-ku-elfenbein); stroke-width: 3; }
.ar-g-rl-druck[data-ar-rl-farbe='rot'] { fill: var(--ar-rl-rot); }
.ar-g-rl-druck[data-ar-rl-farbe='schwarz'] { fill: var(--ar-noir); }
.ar-g-rl-druck[data-ar-rl-farbe='null'] { fill: var(--ar-rl-gruen); }
.ar-g-rl-druck-zahl,
.ar-g-rl-druck-wort { fill: var(--ar-ku-elfenbein); font-family: var(--ar-schrift-plakat); text-anchor: middle; dominant-baseline: central; }
.ar-g-rl-druck-zahl { font-size: 40px; }
.ar-g-rl-druck-wort { font-size: 26px; letter-spacing: 2px; }

/*
 * DIE TAFEL AM KESSEL: die gefallene Zahl auf ihrer Farbe, in Kreide und mit Messingrand. Schwarz trägt wie im
 * Ergebnisfeld die doppelte Kante; die Zahl steht in jeder Farbe da.
 */
.ar-rl__anzeige {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0.05em solid var(--ar-ku-messing);
  background: var(--ar-noir);
  color: var(--ar-kreide);
  font-variant-numeric: tabular-nums;
}

.ar-rl__anzeige[data-ar-rl-farbe='rot'] { background: var(--ar-rl-rot); }
.ar-rl__anzeige[data-ar-rl-farbe='schwarz'] { border-style: double; border-width: 0.1em; }
.ar-rl__anzeige[data-ar-rl-farbe='null'] { background: var(--ar-rl-gruen); }

/* Der Dolly steht als Figur auf seiner Zahl und setzt sich in einem kurzen Fall, sobald die Kugel liegt. */
.ar-rl__dolly-figur,
.ar-rl__dolly-figur > svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .ar-rl__dolly-figur {
    animation: ar-rl-dolly 220ms cubic-bezier(0.5, 0, 1, 1) var(--ar-ku-verzug, 0ms) both;
  }
}

@keyframes ar-rl-dolly {
  from { translate: 0 -70%; }
  to { translate: 0 0; }
}

/* Die gefallene Zahl, groß und in der Farbe ihres Fachs — mit dem Wort der Farbe daneben, nie nur dem Ton. */
.ar-rl__ergebnis {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0;
  border: 2px solid var(--ar-kreide);
  background: var(--ar-noir);
}

.ar-rl__ergebnis[data-ar-rl-farbe='rot'] { background: var(--ar-rl-rot); }
/*
 * Schwarz hat als einziges Fach keine eigene Fläche — sein Grund ist derselbe Noir wie der des leeren Kastens. Die
 * Auskunft steckt deshalb in der Doppellinie, und die braucht ihre sechs Pixel: Zwei Striche und die Lücke dazwischen
 * haben in den zwei Pixeln der Grundregel darüber keinen Platz, und `double` fiele dort auf einen einzelnen Strich
 * zurück.
 */
.ar-rl__ergebnis[data-ar-rl-farbe='schwarz'] { background: var(--ar-noir); border-style: double; border-width: 6px; }
.ar-rl__ergebnis[data-ar-rl-farbe='null'] { background: var(--ar-rl-gruen); }

.ar-rl__ergebnis[data-ar-rl-farbe='leer'] {
  border-style: dashed;
  border-color: var(--ar-kante-griff);
}

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

/* ------------------------------------------------------------ Tisch-Übersicht */

/*
 * Die Budgetzeile über dem Tableau: was noch frei ist und was schon liegt, dazu der Kredit, wenn einer offen ist. Ohne
 * Trennstrich, denn ein Strich am Zeilenanfang nach dem Umbruch liest sich wie ein Rest; die Zahl trägt Gewicht, das
 * Etikett davor bleibt leise. Auf 375 Pixeln stehen die beiden ersten Teile noch nebeneinander, der Kredit bricht um.
 */
.ar-rl__budget {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 1.1rem;
  margin: 0 0 0.25rem;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-rl__budget-zahl {
  color: var(--ar-kreide);
  font-weight: 700;
}

/*
 * Die Statuszeile über dem Tableau: je Farbe, was sie insgesamt darauf liegen hat. Ihre Höhe steht fest, weil mit dem
 * ersten Chip aus dem Satz „noch nichts gesetzt“ eine Reihe Marken wird, und die ist drei Pixel höher — genug, dass der
 * zweite Tipp auf dasselbe Feld an dessen Kante landet.
 */
.ar-rl__tisch-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
  min-height: 1.4rem;
  margin: 0 0 0.25rem;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.ar-rl__tisch-status-wort {
  font-weight: 600;
  color: var(--ar-kreide);
}

.ar-rl__tisch-status-teil,
.ar-rl__tisch-hud-teil {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.ar-rl__tisch-status-marke,
.ar-rl__tisch-hud-marke {
  display: block;
  width: 1rem;
  height: 1rem;
}

/* Dieselbe Zeile, einmal klein im Fuß der Anzeigeleiste (js/spielfeld.js, `leiste(sicht, zusatz)`). */
.ar-rl__tisch-hud-wort {
  font-weight: 600;
}

/* ------------------------------------------------------------ Tableau */

.ar-rl__tableau {
  /* Das Bild des Rechens: Es steht am Tableau und wird an jeden Chip vererbt, der darauf liegt. */
  --ar-rl-zugbild: 0;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-areas:
    'null zahlen'
    '. dutzende'
    '. chancen';
  gap: 0.25rem;
  padding: 0.4rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-rl-filz);
}

/*
 * Unter einer Zeile steht das Tableau mit einer Lücke von 0,7rem: So viel ragt die Mini-Badge der ersten Runde über
 * seine Oberkante (css/arena.css, `data-ar-zone`), und sie soll die Zeile darüber nicht überdecken.
 */
.ar-rl__budget + .ar-rl__tableau,
.ar-rl__tisch-status + .ar-rl__tableau,
.ar-rl__quote + .ar-rl__tableau {
  margin-top: 0.7rem;
}

.ar-rl__null { grid-area: null; display: grid; }

/*
 * DIE MARKE DES GEWÄHLTEN CHIPS steht in der freien Zelle links neben den Dutzenden und den einfachen Chancen — dort
 * liegt der Daumen, wenn er ein Außenfeld trifft, und die Zelle war leer. Sie nimmt keinen Platz weg und verschiebt
 * nichts: Die zwei Zeilen daneben haben ihre Höhe schon. Senfkante und Scheibe heißen „aktiv“, das Wort daneben sagt,
 * wovon; die Zahl steht in der Scheibe wie auf den Wertknöpfen darunter.
 */
.ar-rl__chipwahl {
  grid-column: 1;
  grid-row: 2 / 4;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.15rem 0;
  border: 2px solid var(--ar-funke);
  background: var(--ar-noir-2);
  pointer-events: none;
}

.ar-rl__chipwahl-wort {
  color: var(--ar-kreide-2);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.ar-rl__chipwahl-scheibe {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
}

.ar-rl__chipwahl-bild {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ar-rl__chipwahl-zahl {
  position: relative;
  color: var(--ar-noir);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/*
 * DAS TABLEAU STEHT AUF DEM TELEFON HOCH UND AUF DEM SCHREIBTISCH QUER. Zwölf Spalten auf 375 Pixeln gaben je Zahl
 * vierundzwanzig, und „24" brach in zwei Zeilen um. Hoch sind es drei Spalten zu zwölf Zeilen — die Form, die ein
 * Roulettetisch am Rand hat. Die Reihenfolge im Markup ist eins bis sechsunddreißig; quer legt grid-auto-flow sie in
 * Spalten, hoch bleibt es beim Zeilenfluss. Eine Tastaturfolge, zwei Anordnungen.
 */
.ar-rl__zahlen {
  display: grid;
  grid-area: zahlen;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  gap: 0.2rem;
}

.ar-rl__dutzende,
.ar-rl__chancen {
  display: grid;
  gap: 0.2rem;
}

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

.ar-rl__chancen {
  grid-area: chancen;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
}

/*
 * Ein Feld des Tableaus: der Wert oben, darunter die Chips, die darauf liegen. Es ist ein Knopf, solange die Wettphase
 * offen ist, sonst ein Bild — und in beiden Fällen gleich hoch, damit das Tableau beim Drehen nicht zusammenfällt.
 */
.ar-rl__feld {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.1rem;
  min-height: var(--ar-rl-feldhoehe);
  margin: 0;
  padding: 0.15rem 0.1rem;
  border: 1px solid var(--ar-kante-griff);
  border-radius: 0;
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  font: inherit;
  font-size: 0.72rem;
  appearance: none;
}

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

@media (hover: hover) {
  button.ar-rl__feld:hover {
    border-color: var(--ar-kreide);
    background: var(--ar-noir-3);
  }
}

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

/*
 * AUF DEM TELEFON GEHT KEIN TIPP INS LEERE. Zwischen zwei Feldern lag eine Fuge von 0,2rem, und ein Daumen, der dort
 * aufsetzte, traf den Filz: kein Chip, kein Ton, keine Absage — bei siebenunddreißig Zahlen in drei Spalten die
 * häufigste Art, einen Tipp zu verlieren. Jeder Knopf greift deshalb um die halbe Fuge über seine Kante hinaus, und
 * zwar genau die halbe: Mehr, und zwei Nachbarn überlappten, dann gewönne der spätere den Streifen, auch dort, wo der
 * Daumen näher am früheren saß. Zu sehen ist davon nichts, die Fläche ist leer.
 */
@media (pointer: coarse) {
  button.ar-rl__feld::after {
    content: '';
    position: absolute;
    inset: -0.1rem;
  }
}

.ar-rl__feld--null {
  height: 100%;
  background: var(--ar-rl-gruen);
}

.ar-rl__feld--rot {
  background: var(--ar-rl-rot);
}

.ar-rl__feld--schwarz {
  background: var(--ar-noir);
}

.ar-rl__feld--breit {
  min-height: 2.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.ar-rl__feld--zahl {
  font-family: var(--ar-schrift-plakat);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

/* Eine Zahl trägt die Farbe ihres Fachs — und sich selbst als Ziffer, damit die Farbe nie allein steht. */
.ar-rl__feld[data-ar-rl-farbe='rot'] { background: var(--ar-rl-rot); }
.ar-rl__feld[data-ar-rl-farbe='schwarz'] { background: var(--ar-noir); }
.ar-rl__feld[data-ar-rl-farbe='null'] { background: var(--ar-rl-gruen); }

/* Wo eigene Chips liegen, steht eine Kreidekante; wo die Kugel getroffen hat, eine Senfkante samt Haken im Satz. */
.ar-rl__feld[data-ar-rl-eigen] {
  border-color: var(--ar-kreide);
}

.ar-rl__feld[data-ar-rl-treffer] {
  outline: 3px solid var(--ar-funke);
  outline-offset: -3px;
}

/*
 * WER EIN AUSSENFELD ANFASST, SIEHT, WAS ES DECKT. Rot, Gerade und die Dutzende tragen ihre Zahlen nicht im Namen, und
 * „deckt die achtzehn roten Zahlen“ in der Quotenzeile ist ein Satz, den man erst lesen muss. Jede Zahl führt deshalb
 * die Felder, die sie mitdecken, in `data-ar-rl-deckt` — gerechnet mit derselben Grenze wie die Abrechnung (`trifft()`
 * in brett.js) —, und das Stilblatt schaltet nur noch. Die Kante ist dieselbe Senfkante wie beim Treffer: Beides
 * beantwortet „welche Zahlen gehören dazu?“, und beides steht nie zugleich da, denn ein Treffer liegt erst, wenn die
 * Felder keine Knöpfe mehr sind.
 *
 * MAUS UND TASTATUR HALTEN DIE KANTE SELBST. `:hover` und `:focus-visible` gelten, solange der Zeiger darüber steht
 * oder der Fokus darauf liegt, und sind mit beidem weg; ein Neuzeichnen des Tableaus durch einen fremden Chip ändert
 * daran nichts, weil der Zustand am Zeiger hängt und nicht am Markup. Nur Knöpfe zählen: Nach „Einsätze fertig“ ist
 * das Feld ein Bild, und eine Kante dort wäre ein Treffer, der keiner ist.
 *
 * AUF DEM TELEFON HÄLT NIEMAND EIN FELD. Ein Tipp legt einen Chip und zeichnet das Tableau neu, der frische Knopf ist
 * nicht mehr berührt, und auf einem Touchgerät liegt der Fokus nach dem Tipp ohnehin nicht sichtbar auf ihm. Dort
 * steht die Kante am zuletzt angetippten Außenfeld (`data-ar-rl-gedeckt`, dieselbe Auswahl, die die Quotenzeile füllt)
 * und geht mit dem nächsten Tipp auf ein anderes Feld. Zwei Regeln und nicht eine Liste: Ein Browser ohne `:has()`
 * verwirft die erste ganz und behält damit wenigstens die zweite.
 */
.ar-rl__tableau:has(button[data-ar-rl-feld='rot']:is(:hover, :focus-visible)) [data-ar-rl-deckt~='rot'],
.ar-rl__tableau:has(button[data-ar-rl-feld='schwarz']:is(:hover, :focus-visible)) [data-ar-rl-deckt~='schwarz'],
.ar-rl__tableau:has(button[data-ar-rl-feld='gerade']:is(:hover, :focus-visible)) [data-ar-rl-deckt~='gerade'],
.ar-rl__tableau:has(button[data-ar-rl-feld='ungerade']:is(:hover, :focus-visible)) [data-ar-rl-deckt~='ungerade'],
.ar-rl__tableau:has(button[data-ar-rl-feld='dutzend1']:is(:hover, :focus-visible)) [data-ar-rl-deckt~='dutzend1'],
.ar-rl__tableau:has(button[data-ar-rl-feld='dutzend2']:is(:hover, :focus-visible)) [data-ar-rl-deckt~='dutzend2'],
.ar-rl__tableau:has(button[data-ar-rl-feld='dutzend3']:is(:hover, :focus-visible)) [data-ar-rl-deckt~='dutzend3'] {
  outline: 3px solid var(--ar-funke);
  outline-offset: -3px;
}

@media (hover: none), (pointer: coarse) {
  .ar-rl__feld[data-ar-rl-gedeckt] {
    outline: 3px solid var(--ar-funke);
    outline-offset: -3px;
  }
}

.ar-rl__feld-wort {
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: none;
}

/* Die Chipzeile hält ihren Platz, auch wenn nichts liegt: Sonst wüchse das Tableau mit dem ersten Chip um eine Zeile. */
.ar-rl__feld-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem;
  min-height: 1.1rem;
}

.ar-rl__chip {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
}

.ar-rl__chip[data-ar-farbe='rot'] { --ar-rl-chipfarbe: var(--ar-rot); }
.ar-rl__chip[data-ar-farbe='blau'] { --ar-rl-chipfarbe: var(--ar-blau); }
.ar-rl__chip[data-ar-farbe='gelb'] { --ar-rl-chipfarbe: var(--ar-gelb); }
.ar-rl__chip[data-ar-farbe='gruen'] { --ar-rl-chipfarbe: var(--ar-gruen); }
.ar-rl__chip[data-ar-rl-eigen] { --ar-rl-chipfarbe: var(--ar-funke); }

/*
 * DER RECHEN GEHT IN BILDERN UND NICHT IN EINEM VERLAUF. Sobald die Kugel liegt, zieht der Croupier: Was verloren hat,
 * wandert nach oben links zur Bank — auf dem Telefon steht dort der Kessel, auf dem Schreibtisch liegt er links —, was
 * getroffen hat, nach unten zum Spieler, wo sein Schein klebt. Fünf Stufen zu je hundertzehn Millisekunden; die Stufe
 * steht als Zahl am Tableau und kommt aus der Serverzeit, also steht bei allen vier derselbe Chip an derselben Stelle.
 *
 * KEINE `transition`, und das ist kein Versehen: Ein Übergang liefe in jedem Browser für sich, sobald das Tableau
 * einmal neu gezeichnet wird, und ein frisch eingefügter Chip hat keinen Vorzustand, aus dem er übergehen könnte.
 *
 * Die Richtung ist nie die einzige Auskunft: Das getroffene Feld trägt seine Senfkante, und was jede Farbe gewonnen
 * oder verloren hat, steht in der Abrechnung darunter in Ziffern.
 */
.ar-rl__chip[data-ar-rl-zug] {
  z-index: 2;
}

.ar-rl__chip[data-ar-rl-zug='verlust'] {
  translate: calc(var(--ar-rl-zugbild, 0) * -0.7rem) calc(var(--ar-rl-zugbild, 0) * -0.45rem);
}

.ar-rl__chip[data-ar-rl-zug='gewinn'] {
  translate: 0 calc(var(--ar-rl-zugbild, 0) * 0.62rem);
}

/* Am letzten Bild ist der Tisch abgeräumt. Die Zahlen bleiben: Sie stehen in der Abrechnung, die stehen bleibt. */
.ar-rl__tableau[data-ar-rl-abgeraeumt] .ar-rl__chip[data-ar-rl-zug] {
  visibility: hidden;
}

/*
 * DER DOLLY STEHT IN DER ECKE UND NICHT IN DER MITTE: In der Mitte deckte er die Zahl zu, auf die er zeigt. Er nimmt
 * keinen Platz im Raster — das Feld ist in der Wettphase ein Knopf, und ein Feld, das mit seiner Marke um eine Zeile
 * wüchse, verschöbe das halbe Tableau. Anfassen lässt er sich nicht: Der Tipp gehört dem Feld unter ihm.
 */
.ar-rl__dolly {
  position: absolute;
  top: 1px;
  right: 1px;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}

.ar-rl__dolly-bild {
  display: block;
  width: 100%;
  height: 100%;
}

.ar-rl__chip-bild {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Tusche auf jeder der vier Spielfarben und auf Senf: die schlechteste Paarung ist Rot mit 4,73 : 1. */
.ar-rl__chip-zahl {
  position: relative;
  color: var(--ar-noir);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ------------------------------------------------------------ Schein */

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

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

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

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

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

/*
 * DIE QUOTENZEILE HÄLT IHRE HÖHE, auch wenn sie noch nichts zu sagen hat. Sie steht über dem Tableau und wechselt bei
 * jedem Tipp; eine Zeile, die mal eine und mal zwei Zeilen hoch ist, schöbe das ganze Tableau bei jedem Chip um ein
 * paar Pixel — und der zweite Tipp auf dasselbe Feld träfe daneben. Zwei Zeilen Platz reichen für den längsten Satz
 * (die Null).
 */
.ar-rl__quote {
  display: grid;
  align-content: center;
  min-height: 2.4rem;
  margin: 0;
  padding: 0.15rem 0.35rem;
  border-left: var(--ar-farbkante) solid var(--ar-funke);
  background: var(--ar-noir);
  color: var(--ar-kreide-2);
  font-size: 0.76rem;
  /* Zwei Zeilen zu 1,35 und das Polster sind 2,35rem und passen in die Mindesthöhe; mit der geerbten Zeilenhöhe waren
     es drei Pixel mehr, und das Tableau rückte beim ersten Tipp genau um sie nach unten. */
  line-height: 1.35;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/*
 * DIE GRIFFLEISTE: Chipwerte und die beiden Knöpfe, und nichts sonst. Werte und Knöpfe stehen nebeneinander, solange
 * die Spalte beide trägt (Schreibtisch, Telefon quer), und untereinander, wo nicht — ein Umbruch aus der Breite und
 * keine zweite Schwelle.
 */
.ar-rl__griffe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

.ar-rl__werte {
  display: grid;
  flex: 1 1 14rem;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  gap: 0.3rem;
}

.ar-rl__wert {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3rem;
  padding: 0.2rem;
}

.ar-rl__wert-bild {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  translate: -50% -50%;
}

/* Ein Chipwert ist ein Einsatz und kein Aufdruck: Er steht in der Ziffernschrift, wie der Jeton des Craps daneben. */
.ar-rl__wert-zahl {
  position: relative;
  color: var(--ar-noir);
  font-family: var(--ar-schrift-mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

/* Der gewählte Chipwert steht mit Senfkante und umgekehrtem Grund da, nie nur in einem Farbton. */
.ar-rl__wert[aria-pressed='true'] {
  border-color: var(--ar-funke);
  background: var(--ar-noir-3);
  outline: 3px solid var(--ar-funke);
  outline-offset: -3px;
}

/* Der Satz hält seinen Platz: Er wechselt bei jedem Chip und schöbe sonst die Knöpfe darunter. */
.ar-rl__satz,
.ar-rl__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-rl__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;
}

.ar-rl__knoepfe {
  display: grid;
  flex: 1 1 12rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.4rem;
}

.ar-rl__zurueck,
.ar-rl__fertig {
  min-height: 3.25rem;
}

.ar-rl__wert[aria-disabled='true'],
.ar-rl__zurueck[aria-disabled='true'],
.ar-rl__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-rl__feld[data-ar-nein],
.ar-rl__wert[data-ar-nein],
.ar-rl__zurueck[data-ar-nein],
.ar-rl__fertig[data-ar-nein] {
  outline: 3px solid var(--ar-kreide);
  outline-offset: 1px;
}

/* ------------------------------------------------------------ Abrechnung und Rangliste */

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

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

.ar-rl__rangliste-titel,
.ar-rl__abrechnung-kopf {
  font-family: var(--ar-schrift);
}

.ar-rl__abrechnung-zahl {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 2px solid var(--ar-kreide);
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.ar-rl__abrechnung-zahl[data-ar-rl-farbe='rot'] { background: var(--ar-rl-rot); }
.ar-rl__abrechnung-zahl[data-ar-rl-farbe='null'] { background: var(--ar-rl-gruen); }

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

.ar-rl__saldo {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.35rem;
}

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

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

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

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

/* ------------------------------------------------------------------ Zahlentafel */

/*
 * DIE TAFEL NEBEN DEM KESSEL. Sie hing an keinem Kessel dieses Hauses, und an jedem echten hängt eine: „Was ist
 * gefallen?" ist die erste Frage am Roulette. Sie trägt keine Auskunft, die das Spiel entscheidet — jede Drehung ist
 * unabhängig —, und trotzdem fehlt ohne sie die Erinnerung des Tisches.
 *
 * ROT UND SCHWARZ STEHEN NICHT NUR ALS FARBE DA: Schwarz trägt eine doppelte Kante, die Null eine grüne, und in
 * jedem Feld steht die Zahl. Wer die Töne nicht unterscheidet, liest die Ziffer.
 */
.ar-rl__tafel {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
}

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

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

.ar-rl__tafel-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-rl__tafel-zahl {
  display: grid;
  place-items: center;
  min-width: 1.9rem;
  padding: 0.15rem 0.3rem;
  border: 2px solid var(--ar-kante-griff);
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  hyphens: none;
}

.ar-rl__tafel-zahl[data-ar-rl-farbe='rot'] {
  border-color: var(--ar-rl-rot);
  background: var(--ar-rl-rot);
  color: var(--ar-kreide);
}

.ar-rl__tafel-zahl[data-ar-rl-farbe='schwarz'] {
  border-style: double;
  border-width: 4px;
  background: var(--ar-noir);
}

.ar-rl__tafel-zahl[data-ar-rl-farbe='null'] {
  border-color: var(--ar-rl-gruen);
  background: var(--ar-rl-gruen);
}

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

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

.ar-rl__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-rl__rang-chips {
  margin-left: auto;
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-rl__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-rl__rang[data-ar-weg] .ar-rl__rang-teil {
  opacity: 0.7;
}

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

/*
 * AB 39REM BRETTBREITE LIEGT DAS TABLEAU QUER, und der Tisch macht ihm Platz. Mittelbreit — auf dem Tablet und neben dem
 * Spieltisch eines kleinen Laptops — steht er links neben Ergebnisfeld, gefallenen Zahlen und Abrechnung, darunter das
 * Tableau über die ganze Breite. Breit stehen beide nebeneinander (unten, 56rem).
 *
 * HIER STANDEN ZWEI SPALTEN AB 39REM, UND DIE RECHTE WAR ZU SCHMAL FÜR DAS QUERE TABLEAU. Es braucht zwölf Spalten zu
 * vierundvierzig Pixeln, also 40rem; mit sechzig Hundertsteln eines Bretts von 64rem hatte es 37, stand hochkant in
 * zwölf Zeilen und machte das Brett elfhundert Pixel hoch — seit der Spieltisch neben dem Brett steht, auf jedem Laptop.
 */
@container ar-rl-mass (min-width: 39rem) {
  .ar-rl {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'kopf'
      'links'
      'rechts';
  }

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

  .ar-rl__links {
    grid-area: links;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    align-items: start;
    column-gap: 1rem;
  }

  .ar-rl__links > .ar-rl__buehne {
    grid-row: span 2;
  }

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

  .ar-rl__tableau {
    gap: 0.3rem;
  }

  .ar-rl__feld {
    font-size: 0.8rem;
  }

  .ar-rl__feld--breit {
    min-height: 3rem;
    font-size: 0.85rem;
  }

  .ar-rl__ergebnis {
    width: 5.5rem;
    height: 5.5rem;
  }

  .ar-rl__ergebnis-zahl {
    font-size: 2.6rem;
  }
}

/*
 * Breit stehen Tisch und Tableau nebeneinander, und die Spalte des Tableaus behält ihre 40rem für die zwölf Spalten; was
 * darüber hinausgeht, teilen sich beide zwei zu drei. Der Tisch ist dabei höchstens so hoch, dass er mit Kopf und
 * Ergebnisfeld ins Fenster passt.
 */
@container ar-rl-mass (min-width: 56rem) {
  .ar-rl {
    grid-template-columns: minmax(16rem, 1fr) minmax(40rem, 1.5fr);
    grid-template-areas:
      'kopf kopf'
      'links rechts';
    column-gap: 1rem;
  }

  .ar-rl__links {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .ar-rl__links > .ar-rl__buehne {
    grid-row: auto;
    justify-self: center;
    width: min(100%, (100svh - var(--ar-reserve) - var(--ar-hauskopf) - 9rem) * 0.85);
  }
}

/*
 * Quer: drei Zeilen, und die Zahlen laufen spaltenweise — 1/2/3, dann 4/5/6, wie auf dem Tisch. Die Schwelle ist die
 * Breite, ab der zwölf Spalten zu vierundvierzig Pixeln nebeneinander stehen; darunter bleibt das Tableau hoch, auch
 * auf einem Schreibtisch.
 */
@container ar-rl-tableau (min-width: 40rem) {
  .ar-rl__tableau {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .ar-rl__zahlen {
    grid-template-columns: none;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(44px, 1fr);
  }
}

/*
 * HOCHKANT IST DAS BRETT ANDERTHALB TAUSEND PIXEL HOCH, UND DIE WETTFRIST IST ZWANZIG SEKUNDEN LANG. Die Bühne rollt
 * in sich (css/arena.css), und auf 375 × 667 bleiben ihr rund sechshundert Pixel. Der Schein klebte darin samt Titel,
 * Quotenzeile und Satz mit 275 Pixeln am unteren Rand und erst ab 640 Pixeln Fensterhöhe — also auf keinem Telefon,
 * dessen Browser eine Adressleiste hat —, und Rot und Schwarz lagen ganz unten unter zwölf Zeilen Zahlen, genau dort,
 * wo der Schein sie zudeckte. Aus dem Spiel kam dazu ein Satz, der es zusammenfasst: „Das Setzen auf Schwarz oder Rot
 * am Handy ist sehr nervig.“ Vier Dinge geben es zurück, alle nur, solange das Brett EINSPALTIG steht.
 *
 * ERSTENS STEHT BEIM SETZEN DAS TABLEAU OBEN UND DER TISCH DARUNTER. Er ist ein Bild, bis die Kugel läuft; gelegt wird
 * oben. Erkannt wird die Wettphase an der Griffleiste: Sie steht nur da, solange gesetzt wird. Fährt der Kessel an,
 * steht der Tisch wieder oben, und das Brett holt ihn ins Bild (`kopfNachOben()` in brett.js).
 *
 * ZWEITENS STEHEN AUF DEM TABLEAU DIE AUSSENFELDER OBEN. Rot, Schwarz, Gerade, Ungerade und die Dutzende sind die
 * Felder, auf die fast jeder zuerst setzt, und am Rand eines echten Tischs liegen sie neben den Zahlen und nicht unter
 * ihnen. Quer auf dem Schreibtisch bleibt die Ordnung des Tischs.
 *
 * DRITTENS KLEBT NUR NOCH DIE GRIFFLEISTE: vier Chipwerte und zwei Knöpfe, rund 110 Pixel. Sticky statt fixed ist hier
 * die ganze Entscheidung: Ein fester Kasten nähme dem letzten Feld seinen Platz, ein klebender behält seine Zeile im
 * Fluss und gibt sie am Ende der Spalte wieder frei. Geklebt wird der TRÄGER und nicht die Leiste: Sein Kasten ist
 * genau so hoch wie sie selbst, und in einem Container ohne Spielraum kann sticky nichts verschieben.
 *
 * VIERTENS LIEGT DER CHIP SOFORT, AUCH WENN DER LETZTE NOCH UNTERWEGS IST — das steht in brett.js (`nachzug()`).
 *
 * DIE SCHWELLE IST DIE EINSPALTIGKEIT UND KEINE EIGENE ZAHL. Ab 39rem stehen Tisch und Tableau nebeneinander, die
 * Seite ist kurz, und alles hier wäre Zierrat. Eine eigene Zahl liefe beim nächsten Umbau der Spalten auseinander.
 */
@container ar-rl-mass (max-width: 38.99rem) {
  .ar-rl:has(.ar-rl__griffe) > .ar-rl__links {
    order: 1;
  }

  .ar-rl__tableau {
    grid-template-areas:
      '. chancen'
      '. dutzende'
      'null zahlen';
  }

  .ar-rl__chipwahl {
    grid-row: 1 / 3;
  }

  /* Rot, Schwarz, Gerade und Ungerade sind die Felder, auf die hier die meisten Chips fallen: eine Daumenkachel höher. */
  .ar-rl__chancen > .ar-rl__feld {
    min-height: 3.25rem;
    font-size: 0.85rem;
  }

  .ar-rl__griffe {
    gap: 0.35rem;
    padding: 0.4rem;
  }

  .ar-rl__wert,
  .ar-rl__zurueck,
  .ar-rl__fertig {
    min-height: 2.75rem;
  }

  .ar-rl__zurueck,
  .ar-rl__fertig {
    padding-inline: 0.5rem;
  }

  /* Ab 400 Pixeln Fensterhöhe sind 110 Pixel Leiste ein Viertel und weniger; darunter, im flachen Querformat, rollt sie mit. */
  @media (min-height: 25rem) {
    /* 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-rl__rechts > [data-ar-rl-teil='griffe']:has(.ar-rl__griffe) {
      position: sticky;
      bottom: calc(-1 * var(--ar-buehne-fuss));
      z-index: 4;
    }

    .ar-rl__rechts > [data-ar-rl-teil='griffe'] .ar-rl__griffe {
      border-top-color: var(--ar-kreide);
    }
  }
}

/* Ganz schmal, etwa auf 320 Pixeln, rücken Tableau und Chipwerte zusammen — die Tippflächen bleiben, wie sie sind. */
@container ar-rl-mass (max-width: 21rem) {
  .ar-rl__chancen {
    grid-template-columns: repeat(2, minmax(44px, 1fr));
  }

  .ar-rl__feld {
    font-size: 0.66rem;
  }

  /* Zweizeilige Knöpfe machten die klebende Leiste um ein Viertel höher; eine Zeile reicht, wenn die Schrift nachgibt. */
  .ar-rl__zurueck,
  .ar-rl__fertig {
    padding-inline: 0.25rem;
    font-size: 0.82rem;
  }
}

/*
 * DAS ABZEICHEN STEHT ÜBER DEM TABLEAU UND NICHT ÜBER DEM TISCH. Dort liegt im Augenblick des Einrastens alles, was man
 * ansieht: die Kugel vorn in ihrem Fach, der Dolly auf ihrer Zahl, die Jetons, die zur Bank gehen. Es stand über dem
 * Kessel, wo es nur die Bahn deckte, und seit die Kugel vorn liegt, lag es dort genau auf ihr. Über dem Tableau deckt es
 * Felder, deren Treffer der Tisch daneben ohnehin zeigt.
 *
 * 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: 40rem) {
  .ar-spielfeld[data-ar-spiel='roulette'] .ar-abzeichen {
    left: 70%;
    width: min(40%, 18rem);
  }
}

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

.ar-g-rl-holz { fill: var(--ar-rl-holz); stroke: var(--ar-kreide-2); stroke-width: 1.2; }
.ar-g-rl-nabe { fill: var(--ar-rl-holz); stroke: var(--ar-kante-griff); stroke-width: 1.2; }
.ar-g-rl-turm { fill: var(--ar-kreide-2); stroke: var(--ar-noir); stroke-width: 1.2; }
.ar-g-rl-kreuz { fill: none; stroke: var(--ar-kreide-2); stroke-width: 1.6; }
.ar-g-rl-kugel { fill: var(--ar-kreide); stroke: var(--ar-noir); stroke-width: 0.8; }
/* Die Messingstege zwischen den Fächern und der Ring, auf dem sie enden: Darüber läuft die Kugel, darauf springt sie. */
.ar-g-rl-steg { fill: none; stroke: var(--ar-rl-messing); stroke-width: 0.9; }
.ar-g-rl-stegring { fill: none; stroke: var(--ar-rl-messing); stroke-width: 1; }
.ar-g-rl-dolly { fill: var(--ar-rl-messing); stroke: var(--ar-noir); stroke-width: 4; stroke-linejoin: round; }
.ar-g-rl-dolly-kante { fill: none; stroke: var(--ar-kreide); stroke-width: 4; stroke-linecap: round; }
.ar-g-rl-fach { stroke: var(--ar-noir); stroke-width: 0.6; }
.ar-g-rl-fach[data-ar-rl-farbe='rot'] { fill: var(--ar-rl-rot); }
.ar-g-rl-fach[data-ar-rl-farbe='schwarz'] { fill: var(--ar-noir); }
.ar-g-rl-fach[data-ar-rl-farbe='null'] { fill: var(--ar-rl-gruen); }
/*
 * VIERKOMMAFÜNF UND NICHT FÜNF: Seit die Kugelbahn außen ihre drei Einheiten bekommen hat, sitzen die Zahlen weiter
 * innen, und dort ist ein Fach schmaler. Mit der alten Größe stießen zwei zweistellige Nachbarn aneinander.
 */
.ar-g-rl-zahl { fill: var(--ar-kreide); font-family: var(--ar-schrift); font-size: 4.5px; text-anchor: middle; dominant-baseline: middle; }
.ar-g-rl-chip { fill: var(--ar-rl-chipfarbe, var(--ar-funke)); stroke: var(--ar-noir); stroke-width: 3; }
.ar-g-rl-kerbe { fill: var(--ar-kreide); }
.ar-g-rl-chipring { fill: none; stroke: var(--ar-noir); stroke-width: 3; }
.ar-g-rl-chipmitte { fill: var(--ar-kreide); }
.ar-g-rl-filz { fill: var(--ar-rl-filz); }
.ar-g-rl-feld { fill: var(--ar-noir-2); stroke: var(--ar-kante-griff); stroke-width: 2; }
.ar-g-rl-feld[data-ar-rl-farbe='rot'] { fill: var(--ar-rl-rot); }
.ar-g-rl-feld[data-ar-rl-farbe='schwarz'] { fill: var(--ar-noir); }