/*
 * Kartenhai: der Tisch mit der Bühne des Casinotischs (js/kulisse.js) zwischen der Zeile, wer dran ist, und der Kasse in
 * Zahlen, direkt darunter die Knöpfe, dann der Satz zum letzten Griff und am Ende je Farbe eine Chipleiste. Anzeigeleiste,
 * Brettrand, Abzeichen, Tafel und die gemeinsamen Teile des Casinotischs (Jetons, Bank, Schilder) stehen in
 * css/arena.css.
 *
 * Eine Karte trägt ihre Farbe als Form: Herz und Karo rot mit Tuschkante, Pik und Kreuz in Tusche, der Wert in Tusche auf
 * Leinen. Was mit einer Karte geschah, steht nie nur als Farbe da: ein Treffer mit Haken, ein Fehltipp mit einem Kreuz,
 * ein versicherter Fehltipp mit einem Balken. Jede Tippfläche misst mindestens 44 Pixel. Jede Regel auf der gemeinsamen
 * Fläche hängt an [data-ar-spiel='kartenhai'] oder an einer Klasse ar-kh.
 *
 * DIE KARTEN SIND RUND GESCHNITTEN, UND DAS IST DIE EINE RUNDUNG DIESES BRETTS. Eine Spielkarte mit harter Ecke ist ein
 * Pappwürfel; dieselbe Ausnahme wie das Porträtmedaillon im Zimmer (README der Arena, Abschnitt 8). Knöpfe, Leisten,
 * Schlitten und Tisch bleiben eckig.
 */

/*
 * DER VERGILBTE LEINENTON DIESES DECKS, und er steht an der Wurzel und nicht am Brett. Die Karten dieses Pakets
 * werden auch AUSSERHALB des Spielfelds gezeichnet — im Banner der Spielwahl, auf dem Schild und auf jeder Bildkarte
 * des Regelblatts. Stünde der Token am Brett, fiele `fill: var(--ar-kh-leinen)` dort auf eine ungültige Angabe
 * zurück, und die Karte erbte irgendeine Füllung.
 *
 * Kreide ist das Papier dieses Hauses; was hier liegt, ist ein Deck aus einem Schlitten, der jeden Abend läuft. Der
 * Abstand ist klein und nachgerechnet: gegen Tusche 14,96 : 1, wo die Kreide 16,26 hält.
 */
:root {
  --ar-kh-leinen: #eae1cb;
}

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

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

/* Im flachen Querformat steht die Anzeigeleiste links neben dem Brett und braucht ihre 15rem, sonst stünden die Namen
   der Plaketten Buchstabe für Buchstabe untereinander. */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-spielfeld[data-ar-spiel='kartenhai'] {
    --ar-brettbreite: min(30rem, 100vw - 2 * var(--ar-luft) - var(--ar-seite));
  }

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

/*
 * Auf dem Schreibtisch nimmt das Brett die ganze Bühne (--ar-feld), so breit wie der Kopf des Hauses: Dort steht der
 * Tisch links und Knöpfe, Satz und Chipleisten rechts daneben.
 */
@media (min-width: 64rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='kartenhai'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/*
 * Das Brett misst sich selbst und nicht die Bühne: Im flachen Querformat ist die Bühne breiter als das Brett daneben.
 * Das Raster liegt eine Ebene tiefer, denn ein Maßcontainer kann sich nicht selbst abfragen.
 */
.ar-kh {
  container-type: inline-size;
}

/*
 * DIE GEOMETRIE DIESES BRETTS STEHT AN EINER STELLE, UND SIE STEHT STILL. Das Seitenverhältnis der Bühne und die
 * Reserve jedes Blocks sind Variablen der Lage; die Breitenregeln unten setzen sie um, und alles darunter liest sie.
 *
 * WARUM RESERVEN. Das Brett sprang bei jedem Griff: Mit der ersten Karte kam der Vermerk darunter dazu, mit dem ersten
 * Treffer der Kartenstreifen, mit dem Einsatz wurden aus dem Schieber zwei Richtungen samt Kasse, und in den letzten
 * drei Sekunden schob sich die Mahnung dazwischen. Wer auf „Höher“ tippte, hatte beim nächsten Tipp an derselben Stelle
 * einen anderen Knopf unter dem Daumen. Jeder Block hält deshalb seinen Platz, auch wenn er nichts zu sagen hat; die
 * Bühne hat ein festes Seitenverhältnis, und die Lage selbst hält am Rundenende, wo die Knöpfe ganz wegfallen.
 */
.ar-kh__lage {
  /* Breite durch Höhe der Bühne: quadratisch, nur flach quer breiter (unten). */
  --ar-kh-seiten: 1;
  /*
   * DIE RESERVEN SIND GEMESSEN UND NICHT GESCHÄTZT. Auf 375 Pixeln misst das Brett innen 317, und dort bricht die
   * Ansage zweizeilig um: „Du bist dran: höher oder gleich, tiefer oder gleich?" plus die Durchgangszeile daneben sind
   * 67,2 Pixel, und dieselbe Zeile trägt in den letzten drei Sekunden die Mahnung, mit einem üblichen Namen samt
   * Durchgang ebenso drei Zeilen. Der Kasten des Fehlgriffs („Daneben: … verliert den Einsatz … und bekommt 25 Chips
   * Kredit.") misst 64,8.
   */
  --ar-kh-wer: 4.25rem;
  /* Die Bühne ist so breit wie der Tisch innen: das Brett ohne Polster und Kanten des Tisches. */
  --ar-kh-buehne: calc((100cqw - 1.2rem - 4px) / var(--ar-kh-seiten));
  /* Die Kasse: zwei Zeilen für „Möglicher Gewinn“, die Zahl und die Zeile der Treffer-Kette unter dem Multiplikator. */
  --ar-kh-kasse: 4.6rem;
  --ar-kh-satz: 4.1rem;
  /* Die Tippbank auf dem Telefon: Kopfzeile, Richtungen mit bis zu vier Zeilen (Wort, Chance und Quote gebrochen, Auszahlung) und die Versicherung mit vieren (Wort, zweizeilige Wirkung, Prämie). */
  --ar-kh-griffe: 12.5rem;
  --ar-kh-leiste: 2.6rem;
  /* Zwei Fugen, das Polster und die beiden Kanten eines Kastens: der Tisch über den Knöpfen, der Satz darunter. */
  --ar-kh-tisch: calc(var(--ar-kh-wer) + var(--ar-kh-buehne) + var(--ar-kh-kasse) + 2.25rem);
  --ar-kh-verlauf: calc(var(--ar-kh-satz) + 1.25rem);
  display: grid;
  gap: 0.5rem;
  min-height: calc(var(--ar-kh-tisch) + var(--ar-kh-griffe) + var(--ar-kh-verlauf) + 1rem);
}

/* ------------------------------------------------------------ Chipleisten */

/*
 * Jede Leiste hält ihre Höhe, auch bevor sie etwas zu melden hat. Der Kreditstreifen kommt beim ersten Fehltipp dazu und
 * bleibt; ohne Reserve schob er in dem Augenblick, in dem das Abzeichen „BUST!" steht, das halbe Brett nach unten.
 *
 * SCHMAL STEHEN DIE LEISTEN AM ENDE DES BRETTS, unter dem Satz (`malen()` in brett.js). Über dem Tisch schoben sie die
 * offene Karte zu viert um 180 Pixel nach unten und damit ganz unter das Daumendock — und sie wiederholten dort, direkt
 * unter den Plaketten, das Vermögen, das die Plaketten schon zeigen. Was nur sie tragen, Kredit, Versicherung und
 * Durchgänge, liest man zwischen zwei Zügen und nicht im Zug. Auf dem Schreibtisch stehen sie rechts (unten).
 */
.ar-kh__leisten {
  display: grid;
  grid-auto-rows: minmax(var(--ar-kh-leiste), auto);
  align-content: start;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kopf und Konto stehen in einer Zeile, solange der Name es erlaubt; ein langer Name schiebt das Konto darunter und
   bricht selbst nicht. Reicht auch die ganze Zeile nicht, etwa im flachen Querformat mit zwei Leisten nebeneinander,
   endet er wie auf der Plakette mit Auslassung: „Konstantinope / l“ las sich wie zwei Namen. */
.ar-kh__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.45rem 0.25rem 0.6rem;
  border-left: var(--ar-farbkante) solid var(--ar-leistenfarbe);
  background: var(--ar-noir-2);
}

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

/* Wer dran ist, bekommt eine Kreidekante rundum; die Plakette mit der Lunte sagt es ein zweites Mal. */
.ar-kh__leiste[data-ar-dran] {
  outline: 3px solid var(--ar-kreide);
  outline-offset: -3px;
}

.ar-kh__leiste[data-ar-weg] {
  border-left-style: dashed;
  opacity: 0.7;
}

.ar-kh__kopf {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.3rem 0.45rem;
  min-width: 0;
  margin: 0;
}

.ar-kh__marke {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

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

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

.ar-kh__konto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.55rem;
  margin: 0 0 0 auto;
}

.ar-kh__chips {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

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

/* Kredit ist eine Schuld: rote gestrichelte Kante und das Wort, nie nur die Farbe. */
.ar-kh__kredit {
  padding: 0 0.3rem;
  border: 1px dashed var(--ar-rot);
  color: var(--ar-kreide);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * Die eine Versicherung der Runde als Schild. Verbraucht steht es durchgestrichen da und nicht nur blass: Eine
 * Deckkraft allein wäre Farbe als einziger Informationsträger, und aus zwei Metern sieht man sie ohnehin nicht.
 */
.ar-kh__schmier {
  position: relative;
  display: inline-flex;
  flex: none;
}

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

/* Liegt sie auf dem laufenden Tipp, trägt das Schild eine Senfkante: bezahlt, aber noch nicht abgerechnet. */
.ar-kh__schmier[data-ar-stand='liegt'] {
  outline: 2px solid var(--ar-funke);
  outline-offset: 2px;
}

.ar-kh__schmier[data-ar-stand='weg'] {
  opacity: 0.5;
}

.ar-kh__schmier[data-ar-stand='weg']::after {
  position: absolute;
  top: 50%;
  left: -2px;
  width: calc(100% + 4px);
  height: 2px;
  background: var(--ar-kreide);
  content: '';
  translate: 0 -50%;
  rotate: -20deg;
}

.ar-kh__durchgaenge {
  display: inline-flex;
  gap: 3px;
}

/* Gespielt ist gefüllt, der laufende Durchgang gestrichelt, ein offener leer mit Griffkante. */
.ar-kh__durchgang {
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--ar-kante-griff);
}

.ar-kh__durchgang[data-ar-gespielt] {
  border-color: var(--ar-kreide);
  background: var(--ar-kreide);
}

.ar-kh__durchgang[data-ar-laeuft] {
  border: 2px dashed var(--ar-kreide);
}

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

/*
 * Der Tisch über den Knöpfen und der Satz darunter sind derselbe Filz in zwei Stücken: Zwischen ihnen liegt die
 * Knopfbank, damit die Richtungen direkt unter der Kasse stehen und nicht unter dem Satz.
 */
.ar-kh__tisch,
.ar-kh__verlauf {
  display: grid;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem 0.6rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

.ar-kh__wer,
.ar-kh__satz,
.ar-kh__quoten,
.ar-kh__posten {
  margin: 0;
}

/* Die Zeile hält ihren Platz auch am Rundenende, wenn sie nichts mehr zu sagen hat. */
.ar-kh__wer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 0.8rem;
  min-height: var(--ar-kh-wer);
  color: var(--ar-kreide);
  font-weight: 600;
}

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

/*
 * DER BANNER FÜR ALLE, DIE NICHT AM ZUG SIND (`werZeile()` in brett.js): dieselbe Zeile wie „Anna ist dran.“, mit einer
 * Senfkante links, die sagt, dass etwas auf dem Spiel steht. Die Kante liegt innerhalb der Zeile und macht sie nicht
 * höher; den Einsatz trägt der Satz, die Kante nur den Nachdruck.
 */
.ar-kh__wer[data-ar-riskiert] {
  padding-left: 0.5rem;
  border-left: var(--ar-farbkante) solid var(--ar-funke);
}

/*
 * Die Mahnung vor dem Automatikeinsatz steht in derselben Zeile: Die Auskunft ist der Satz, die gestrichelte Senfkante
 * sagt, dass er eilt. Sie liegt innerhalb der Zeile und macht sie nicht höher.
 */
.ar-kh__wer[data-ar-gemahnt] {
  padding-left: 0.5rem;
  border-left: var(--ar-farbkante) dashed var(--ar-funke);
}

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

/*
 * DIE BÜHNE IST DER CASINOTISCH, quadratisch und so breit wie der Tisch: So liegen Schlitten, Ablage, die Karten des
 * Zugs und das Feld des Einsatzes ganz darin, die Plätze stehen davor in einer Reihe, und die Mitte des Tisches ist so
 * groß, wie die Breite es zulässt. Flach quer steht sie 1,4 : 1; auf dem Schreibtisch ist sie
 * höchstens so hoch, dass sie samt Wer-Zeile und Kasse ins Fenster passt (unten bei den Breiten).
 */
.ar-kh__buehne {
  position: relative;
  min-width: 0;
}

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

/* Was auf einer Platte als Zeichnung liegt — der Aufdruck des Feldes —, füllt sie ganz und wächst mit der Bühne. */
.ar-kh__buehne .ar-kulisse__platte > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Der Schatten einer Karte trägt dieselbe Rundung wie die Karte. */
.ar-kh .ar-kulisse__karte-schatten {
  border-radius: 9% / 6%;
}

/*
 * SCHLITTEN UND ABLAGE VON OBEN: Kästen aus Mahagoni mit einer Messingkante wie die Bande des Tisches, und in ihrem Fach
 * der Rücken einer Karte. Der Schlitten trägt dazu ein Schild in Tusche mit Messingrand, wie viele Karten noch darin
 * liegen; ein voller und ein fast leerer sehen von oben gleich aus. Gezeichnet und nicht schattiert: flache Flächen und
 * harte Kanten. Die Maße rechnen in der Schrift der Platte, die die Bühne mit ihr wachsen lässt.
 */
.ar-kh__geraet {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: 0.15em;
  padding: 0.15em;
  border: 0.06em solid var(--ar-ku-messing);
  background: var(--ar-ku-holz);
}

.ar-kh__geraet-fach {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border: 0.04em solid var(--ar-noir);
}

.ar-kh__geraet-zahl {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 1.7em;
  padding: 0 0.15em;
  border: 0.05em solid var(--ar-ku-messing);
  background: var(--ar-noir);
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/*
 * HOCHKANT IM VERHÄLTNIS 2 : 3. Die gelieferte Rückseite ist quadratisch, ein Art-déco-Muster mit schmalem Papierrand;
 * zugeschnitten und um ein Zehntel vergrößert verschwindet der Rand, und das Muster läuft bis an die Kante, die die
 * Karte oder das Fach selbst zieht.
 */
.ar-kh__ruecken {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.1;
}

/* Die Schneidekarte: rot und ohne Wert, mit derselben Rundung und Tuschkante wie eine Karte. */
.ar-kh__schnittkarte {
  display: block;
  width: 100%;
  height: 100%;
  border: max(1px, calc(var(--ar-ku-karte-breite) * 0.04)) solid var(--ar-noir);
  border-radius: 9% / 6%;
  background: var(--ar-rot);
}

/* Der Stempel neben dem Schlitten, solange das Mischen frisch ist: das Wort auf Tusche mit einer Senfkante. */
.ar-kh__frisch {
  padding: 0.12em 0.3em;
  border: 0.06em solid var(--ar-funke);
  background: var(--ar-noir);
  color: var(--ar-kreide);
  white-space: nowrap;
}

/* Die Tafel des Multiplikators und das Schild der Versicherung: Schiefer mit Messingrand, die Zahl in Kreide. */
.ar-kh__tafel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0.05em solid var(--ar-ku-messing);
  background: var(--ar-noir);
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ar-kh__tafel-zeichen {
  display: block;
  width: 0.9em;
  height: 0.9em;
}

/* ------------------------------------------------------------ Karten */

/*
 * EINE KARTE AUF DEM TISCH, so breit, wie die Bühne sie stellt (`--ar-ku-karte-breite`, js/kulisse.js): rund
 * geschnitten, außen eine Tuschkante und ein Stück weiter innen eine zweite, feine Linie, die mit ihr wächst — sonst
 * stünde sie auf dem Telefon dicker als der Wert. Beide Linien sind Kante und innerer Schatten ohne Unschärfe; die
 * Pseudoelemente bleiben frei für das Kreuz eines Fehltipps. Indizes, Farbzeichen und Halbfigur rechnen aus derselben
 * Breite.
 */
.ar-kh__auflage {
  display: block;
}

.ar-kh__karte,
.ar-kh__rueckkarte {
  --ar-kh-b: var(--ar-ku-karte-breite);
  position: relative;
  display: block;
  width: var(--ar-kh-b);
  aspect-ratio: 2 / 3;
  border: 1px solid var(--ar-noir);
  border-radius: calc(var(--ar-kh-b) * 0.09);
}

.ar-kh__karte {
  background: var(--ar-kh-leinen);
  color: var(--ar-noir);
  box-shadow:
    inset 0 0 0 max(1px, calc(var(--ar-kh-b) * 0.034)) var(--ar-kh-leinen),
    inset 0 0 0 max(2px, calc(var(--ar-kh-b) * 0.046)) var(--ar-noir);
}

/* Der Rücken im selben Kartenkasten wie die Vorderseite: dieselbe Breite, dieselbe Rundung, dieselbe Tuschkante. */
.ar-kh__rueckkarte {
  overflow: hidden;
  background: var(--ar-noir);
}

/* Wert und Farbe oben links, dasselbe um 180 Grad gedreht unten rechts: So liest man die Karte von beiden Seiten des Tischs. */
.ar-kh__index {
  position: absolute;
  top: calc(var(--ar-kh-b) * 0.09);
  left: calc(var(--ar-kh-b) * 0.1);
  display: grid;
  justify-items: center;
  gap: calc(var(--ar-kh-b) * 0.02);
  line-height: 1;
}

.ar-kh__index--unten {
  top: auto;
  right: calc(var(--ar-kh-b) * 0.1);
  bottom: calc(var(--ar-kh-b) * 0.09);
  left: auto;
  rotate: 180deg;
}

/* „10“ braucht 1,25em und passt damit in jede Breite; eine Zahl bricht nie. */
.ar-kh__wert {
  font-family: var(--ar-schrift-plakat);
  font-size: calc(var(--ar-kh-b) * 0.2);
  font-variant-numeric: tabular-nums;
  hyphens: none;
  white-space: nowrap;
}

.ar-kh__farbe {
  width: calc(var(--ar-kh-b) * 0.15);
  height: calc(var(--ar-kh-b) * 0.15);
}

.ar-kh__mitte {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--ar-kh-b) * 0.46);
  height: calc(var(--ar-kh-b) * 0.46);
  translate: -50% -50%;
}

/*
 * DIE HALBFIGUR EINER BILDKARTE STEHT ANSTELLE DES FARBZEICHENS. Sie ist höher als breit und nimmt deshalb mehr von
 * der Karte als das Zeichen, das sie ersetzt. Die Farbe verliert dabei nichts: An diesem Tisch zählt allein der
 * Wert, und der steht mit seinem Zeichen in beiden Indizes.
 */
.ar-kh__figur {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--ar-kh-b) * 0.5);
  height: calc(var(--ar-kh-b) * 0.7);
  translate: -50% -50%;
}

/* Der Haken eines Treffers ragt über die obere rechte Ecke; in der Schuppe deckt ihn die Nachfolgerin, die ebenfalls traf. */
.ar-kh__haken {
  position: absolute;
  top: calc(var(--ar-kh-b) * -0.08);
  right: calc(var(--ar-kh-b) * -0.08);
  width: calc(var(--ar-kh-b) * 0.24);
  height: calc(var(--ar-kh-b) * 0.24);
}

/*
 * Ein Fehltipp: ein rotes Kreuz mit Tuschkante über der ganzen Karte. Es hängt am Ergebnis der Auflage, und der Rücken
 * trägt eine eigene Klasse und wird hier nicht getroffen: Auf dem Weg in die Ablage liegt das Kreuz unter der Karte.
 */
[data-ar-ergebnis='bust'] .ar-kh__karte::before,
[data-ar-ergebnis='bust'] .ar-kh__karte::after,
[data-ar-ergebnis='gerettet'] .ar-kh__karte::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: calc(var(--ar-kh-b) * 0.12);
  border: max(1px, calc(var(--ar-kh-b) * 0.02)) solid var(--ar-noir);
  background: var(--ar-rot);
  content: '';
  translate: -50% -50%;
  rotate: 60deg;
}

[data-ar-ergebnis='bust'] .ar-kh__karte::after {
  rotate: -60deg;
}

/* Versichert daneben: ein Balken statt zweier, und in Senf. Der Tipp ging schief, der Einsatz nicht. */
[data-ar-ergebnis='gerettet'] .ar-kh__karte::before {
  background: var(--ar-funke);
}

/* ------------------------------------------------------------ Satz */

/*
 * Der Satz zum letzten Griff steht nur, solange der frisch ist, und läuft danach von selbst ab. Er hält seinen Platz
 * trotzdem: Sonst sprang das Brett zweimal je Zug, einmal beim Kommen und einmal beim Gehen.
 */
.ar-kh__satz {
  display: grid;
  align-content: center;
  min-height: var(--ar-kh-satz);
  color: var(--ar-kreide);
  font-size: 0.9rem;
  text-align: center;
}

/* Fehltipp, geretteter Einsatz und Kasse tragen ihre eigene Kante; das Wort im Satz sagt, was geschah. */
.ar-kh__satz[data-ar-art='bust'] {
  padding: 0.2rem 0.4rem;
  border: 2px solid var(--ar-rot);
}

.ar-kh__satz[data-ar-art='kasse'] {
  padding: 0.2rem 0.4rem;
  border: 2px solid var(--ar-funke);
}

/* Gestrichelt statt durchgezogen: dasselbe Senf wie die Kasse, aber kassiert hat hier niemand. */
.ar-kh__satz[data-ar-art='gerettet'] {
  padding: 0.2rem 0.4rem;
  border: 2px dashed var(--ar-funke);
}

.ar-kh__quoten {
  min-height: 1.4rem;
  color: var(--ar-kreide);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ------------------------------------------------------------ Kasse */

/*
 * DIE KASSE IST EINE ZEILE UNTER DER BÜHNE: Einsatz, Multiplikator und Gewinn nebeneinander, je das Wort über der Zahl.
 * Sie hält ihre Höhe über jeden Griff (`--ar-kh-kasse`): Das Wort darf zweizeilig stehen, und die Zeile der Treffer-Kette
 * steht auch leer da.
 */
.ar-kh__kasse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.5rem;
  min-height: var(--ar-kh-kasse);
}

.ar-kh__posten {
  display: grid;
  justify-items: start;
  gap: 0.1rem;
  min-width: 0;
}

.ar-kh__posten-wort {
  min-height: 2.4em;
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
  line-height: 1.2;
}

.ar-kh__posten-zahl {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  hyphens: none;
}

/* Die Zahl steht offen in 0,85rem und gesetzt in 1,1rem; in derselben Zeilenhöhe, damit die Kasse nicht springt. */
.ar-kh__posten-zahl[data-ar-offen] {
  min-height: 1.43rem;
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift);
  font-size: 0.85rem;
}

/*
 * DIE TREFFER-KETTE, unter dem Multiplikator. Sie erklärt ihn: „×3,42“ sagt, wie viel es wert ist, „3 in Folge!“ sagt,
 * wie weit man gekommen ist — und das ist die Auskunft, wegen der jemand weitertippt statt zu kassieren.
 *
 * SIE STEHT AUCH LEER DA. Käme sie mit dem zweiten Treffer dazu, wüchse die Kasse genau in dem Augenblick um eine
 * Zeile, in dem der Daumen schon über „Kassieren“ steht.
 */
.ar-kh__serie {
  display: flex;
  align-items: center;
  min-height: 1.2rem;
  padding-left: 0.35rem;
  border-left: var(--ar-farbkante) solid var(--ar-funke);
  color: var(--ar-funke);
  font-weight: 700;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ar-kh__serie[data-ar-leer] {
  border-left-color: transparent;
}

/* ------------------------------------------------------------ Knöpfe */

/*
 * DIE GRIFFE HALTEN IHRE HÖHE ÜBER BEIDE FASSUNGEN. Vor dem Einsatz steht der Schieber, danach zwei Richtungen samt
 * Kasse darunter — beide Fassungen teilen sich dieselbe Mindesthöhe, damit der Wechsel zwischen ihnen das Brett
 * nicht springen lässt.
 */
.ar-kh__griffe {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  min-height: var(--ar-kh-griffe);
}

/*
 * DER EINSATZSCHIEBER FÜLLT DIESELBE RESERVE WIE VORHER VIER BETRAGSKNÖPFE. Das Bauteil selbst steht als `.ar-wetten`
 * in css/arena.css und gilt für jedes Spiel mit freiem Einsatz; hier bleibt nur der Sendeknopf darunter.
 */
.ar-kh__einsatz-senden {
  width: 100%;
}

.ar-kh__richtungen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.ar-kh__griff {
  position: relative;
  min-height: 3.5rem;
  padding: 0.35rem 0.45rem;
  font-size: 0.9rem;
}

/* Das Wort ist die Wahl und steht größer als das, was daran hängt. Es rechnet in em, damit es den Schriftgrößen der Breitenregeln folgt. */
.ar-kh__griff-wort {
  display: block;
  font-size: 1.2em;
}

/*
 * SCHLANKE KONTROLL-TABS STATT KACHELN. Bild, Wort und Quote standen einmal übereinander in einem Block von 80 Pixeln —
 * ein Knopf, den man las wie eine Kachel, statt ihn anzutippen. Danach lag das Wort links und die Quote rechts in einer
 * Zeile; dort fehlt der Platz für die Chance, denn neben dem Zeichen bleiben auf einem Telefon gut 110 Pixel. Jetzt
 * steht neben dem Zeichen ein Stapel: das Wort, darunter Chance und Quote, darunter die Auszahlung. Der Boden bleibt bei
 * den hauseigenen 44 Pixeln; Chance und Quote brechen nur um, wenn sie nicht nebeneinander passen.
 */
.ar-kh__griff--richtung {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  text-align: left;
}

.ar-kh__griff-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.25;
}

.ar-kh__griff-bild {
  display: block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

/*
 * Chance und Quote ändern sich mit jeder neuen Karte; die Quote steht in derselben Ziffernschrift wie am Zünder und am
 * Tableau von Craps, statt in der Plakatschrift für eine Ziffer, die tickt. Beide ohne eigene Farbe: Der Knopf ist
 * `.ar-knopf--stark` und flutet in Ruhe mit Funkenfarbe, im Hover mit Kreide — eine hartkodierte Funkenfarbe hier wäre
 * auf der eigenen Flutfläche unsichtbarer Text auf gleichfarbigem Grund gewesen.
 */
.ar-kh__griff-werte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5em;
  font-size: 0.95em;
}

.ar-kh__griff-chance {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ar-kh__griff-quote {
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

/*
 * WAS EIN TREFFER AUSZAHLT, in Chips und unter der Quote. „×1,85“ mal einem Multiplikator von 1,71 mal zwanzig Chips
 * ist in zehn Sekunden Frist keine Kopfrechnung, sondern ein Ratespiel; der Faktor sagt, wie gut die Wette ist, die
 * Zahl darunter, worum es geht.
 *
 * SIE HÄLT IHRE ZEILE AUCH LEER. Eine Richtung ohne Trefferkarte hat keine Auszahlung, und ohne Reserve ständen die
 * beiden Knöpfe daneben verschieden hoch.
 */
.ar-kh__griff-zahlung {
  display: block;
  min-height: 1.15em;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}

/*
 * Der Ausstieg und der Handel stehen nebeneinander, und beide sind kein Tipp. Untereinander hätten sie die Reserve der
 * Knopfbank um eine Knopfhöhe gehoben — und die gilt auch für die Betragsknöpfe davor, die dann eine Reihe tiefer
 * ständen als heute.
 */
.ar-kh__neben {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.ar-kh__griff--kasse,
.ar-kh__griff--schmier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.2rem 0.5rem;
  min-height: 3.25rem;
}

/*
 * Die Versicherung steht auf der halben Reihe und trägt drei Zeilen neben dem Schild: das Wort, was sie rettet, was sie
 * kostet. Die Wirkung („rettet den halben Einsatz“) bricht auf einem Telefon um; dass ein Wort notfalls mitten im Wort
 * bricht, hält den Knopf auf 375 px in seiner Spalte, statt ihn darüber hinauszuschieben.
 */
.ar-kh__griff--schmier {
  flex-wrap: nowrap;
  overflow-wrap: anywhere;
}

.ar-kh__schmier-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.25;
  text-align: left;
}

.ar-kh__schmier-was,
.ar-kh__schmier-betrag {
  font-size: max(0.72rem, 0.8em);
  font-weight: 400;
}

.ar-kh__kassieren-betrag,
.ar-kh__schmier-betrag {
  font-variant-numeric: tabular-nums;
}

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

/* Still heißt: Der Knopf bleibt, sagt beim Tippen, warum nicht, und sieht nicht aus, als wäre er gedrückt. */
.ar-kh__griff[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-kh__griff[aria-disabled='true'] :is(.ar-kh__griff-bild, .ar-kh__chip, .ar-kh__schmier-bild) {
  opacity: 0.45;
}

.ar-kh__griff[data-ar-nein]::before,
.ar-kh__griff[data-ar-nein]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.4rem;
  height: 0.5rem;
  border: 3px solid var(--ar-noir);
  background: var(--ar-kreide);
  content: '';
  translate: -50% -50%;
  rotate: 45deg;
}

.ar-kh__griff[data-ar-nein]::after {
  rotate: -45deg;
}

/* ------------------------------------------------------------ Locken */

/*
 * WER KASSIEREN DARF, SIEHT DIE KASSE LOCKEN: 0,6 Sekunden Senf, 0,6 Sekunden Kreide mit einer Senfkante, die vier Pixel
 * nach außen springt. Das sind harte Schnitte und weniger als ein Wechselpaar je Sekunde (WCAG 2.3.1). Beide Töne
 * tragen Tusche mit mehr als 8 : 1. Wer keine Bewegung will, bekommt den Knopf still in Senf.
 */
@media (prefers-reduced-motion: no-preference) {
  .ar-kh__griff--kasse[data-ar-kh-lockt] {
    animation: ar-kh-locken 1.2s step-end infinite;
  }
}

@keyframes ar-kh-locken {
  50% {
    outline-color: var(--ar-funke);
    outline-offset: 4px;
    background-color: var(--ar-kreide);
  }
}

/* Die Tafel nennt beim Kredit Chips und Schuld klein hinter dem Vermögen. */
.ar-kh__tafel-kredit {
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/*
 * Schmaler rückt der Tab enger zusammen: kleineres Bild, kleinere Schrift. Der Flex-Zeilenumbruch übernimmt den Rest
 * von selbst, sobald Wort und Quote nicht mehr nebeneinander passen (auf 375 Pixeln misst das Brett innen 317).
 */
@container (max-width: 24rem) {
  .ar-kh__griff--richtung {
    gap: 0.3rem;
    padding-inline: 0.3rem;
    font-size: 0.75rem;
  }

  .ar-kh__griff-bild {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Ganz schmal, etwa auf 320 Pixeln, rücken auch die Knöpfe neben der Tippbank zusammen. */
@container (max-width: 17rem) {
  .ar-kh__griff {
    font-size: 0.8rem;
  }
}

@container (max-width: 18.75rem) {
  .ar-kh__griff--richtung {
    font-size: 0.8rem;
  }

  /* Ganz schmal fallen die Zeichen und die Wörter stehen: „Versicherung“ neben „Kassieren“ braucht jeden Pixel der
     halben Reihe. */
  .ar-kh__griff-bild,
  .ar-kh__griff--schmier .ar-kh__schmier-bild {
    display: none;
  }
}

/*
 * Im flachen Querformat steht die Bühne 1,4 : 1 und nicht flacher: Flacher zeigte sie den ganzen Tisch, und die Karte
 * darauf maß dreißig Pixel, zu klein für ihren Wert. Die Chipleisten stehen dort zu zweit nebeneinander.
 */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-kh__lage {
    --ar-kh-seiten: 1.4;
  }

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

/*
 * AUF DEM SCHREIBTISCH ZWEI SPALTEN: links der Tisch mit der Bühne, rechts die großen Knöpfe, darunter der Satz und die
 * Chipleisten — dieselbe Folge wie auf dem Telefon, nur dass der Tisch eine eigene Spalte bekommt und nicht mehr über
 * den Knöpfen steht. Die Schwelle liegt über 37rem Innenbreite, und die erreicht nur ein Brett auf dem Schreibtisch;
 * schmal und im flachen Querformat ist keines breiter als 36rem.
 *
 * DIE BÜHNE STEHT DORT QUADRATISCH UND IST HÖCHSTENS SO HOCH, DASS SIE SAMT WER-ZEILE UND KASSE INS FENSTER PASST. So
 * liegt die offene Karte auf einem Schreibtisch mit 900 Pixeln Höhe gut 130 Pixel breit; breiter stand die Bühne flacher
 * und die Karte kleiner, denn wie groß der Tisch steht, sagt die Höhe der Bühne. Die Lage hält dort keine
 * Mindesthöhe: Der Tisch ist die höchste Spalte, und was rechts wegfällt, schiebt nichts unter ihm.
 */
@container (min-width: 38.25rem) {
  .ar-kh__lage {
    /*
     * Breit ist mehr Platz, aber nicht so viel, wie hier einmal stand: Auf dem kleinsten Schreibtisch bricht die Ansage
     * weiterhin zweizeilig, der Kasten des Fehlgriffs ebenso. Gemessen, nicht gerechnet.
     */
    --ar-kh-wer: 2.75rem;
    --ar-kh-satz: 2.75rem;
    --ar-kh-kasse: 3.6rem;
    --ar-kh-griffe: 11.8rem;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      'tisch griffe'
      'tisch verlauf'
      'tisch leisten';
    column-gap: 1rem;
    align-items: start;
    min-height: 0;
  }

  .ar-kh__lage > .ar-kh__tisch {
    grid-area: tisch;
  }

  .ar-kh__lage > .ar-kh__leisten {
    grid-area: leisten;
  }

  .ar-kh__lage > .ar-kh__griffe {
    grid-area: griffe;
  }

  .ar-kh__lage > .ar-kh__verlauf {
    grid-area: verlauf;
  }

  .ar-kh__tisch > .ar-kh__buehne {
    justify-self: center;
    width: min(100%, (100svh - var(--ar-reserve) - var(--ar-hauskopf) - 9rem) * var(--ar-kh-seiten));
  }

  .ar-kh__posten-wort {
    min-height: 1.2em;
    font-size: 0.8rem;
  }

  .ar-kh__posten-zahl {
    font-size: 1.4rem;
  }

  .ar-kh__posten-zahl[data-ar-offen] {
    min-height: 1.82rem;
    font-size: 0.95rem;
  }

  .ar-kh__griff--richtung {
    gap: 0.75rem;
    min-height: 2.75rem;
    padding-inline: 0.9rem;
    font-size: 1rem;
  }

  .ar-kh__griff-bild {
    width: 1.75rem;
    height: 1.75rem;
  }

  .ar-kh__griff--kasse,
  .ar-kh__griff--schmier {
    min-height: 3.75rem;
    font-size: 1.05rem;
  }
}

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

.ar-g-kh-leinen { fill: var(--ar-kh-leinen); }
.ar-g-kh-strich { fill: none; stroke: var(--ar-kh-leinen); stroke-width: 1.6; stroke-linecap: square; }
.ar-g-kh-kerben { fill: none; stroke: var(--ar-kreide); stroke-width: 12; stroke-dasharray: 12 16.27; }
.ar-g-kh-gitter { fill: none; stroke: var(--ar-funke); stroke-width: 0.6; stroke-opacity: 0.6; }
.ar-g-kh-gold { fill: none; stroke: var(--ar-funke); stroke-width: 1; }
.ar-g-kh-ziffer { fill: none; stroke: var(--ar-noir); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.ar-g-kh-ziffer-dick { fill: none; stroke: var(--ar-noir); stroke-width: 10; stroke-linecap: square; stroke-linejoin: miter; }
.ar-g-kh-kreuz { fill: none; stroke: var(--ar-rot); stroke-width: 8; stroke-linecap: square; }
.ar-g-kh-schild { fill: none; stroke: var(--ar-noir); stroke-width: 1.8; stroke-linejoin: miter; stroke-linecap: square; }
.ar-g-kh-pfeil { fill: none; stroke: var(--ar-funke); stroke-width: 16; stroke-linecap: square; }
.ar-g-kh-kegel { fill: var(--ar-noir-3); }
.ar-g-kh-tisch { fill: var(--ar-noir-2); }
/* Der Aufdruck des Feldes auf dem Filz: Rahmen und Wort in Elfenbein, wie gedruckt. */
.ar-g-kh-druck { fill: none; stroke: var(--ar-ku-elfenbein); stroke-width: 5; }
.ar-g-kh-druck-wort { fill: var(--ar-ku-elfenbein); font-family: var(--ar-schrift-plakat); font-size: 40px; letter-spacing: 5px; }