/*
 * Knack: die Mitte mit ihren drei offenen Karten, die eigene Hand samt ihrer Bewertung, die vier Griffe und der Tisch
 * auf der Tischbühne mit je Farbe einem Schild (js/kulisse.js). Anzeigeleiste, Brettrand, Abzeichen und Tafel stehen als
 * Rahmen des Spielfelds in css/arena.css; ein Wasserzeichen trägt dieses Brett nicht mehr, sein Grund ist der Stammtisch.
 *
 * NIE NUR EIN FARBTON: Wer dran ist, trägt eine Kreidekante um seine Plakette, wer in dieser Wertung zahlt, eine
 * Senfkante samt „−1 Streichholz“, wer vom Tisch ist, eine gestrichelte Kante und das Wort „RAUS“. Ein Streichholz sagt
 * seinen Stand in der FORM — ganzes Holz gegen abgerissenes —, nicht in seinem Ton. Jede Tippfläche misst mindestens
 * 44 Pixel in beide Richtungen. Jede Regel auf der gemeinsamen Fläche hängt an [data-ar-spiel='knack'] oder an einer
 * Klasse ar-kn.
 *
 * DIE KARTEN SIND RUND GESCHNITTEN WIE DIE VON KARTENHAI, und das ist die eine Rundung dieses Bretts (README der
 * Arena, Abschnitt 8.13). Sie blieben eckig, solange sie Handsatz auf Resopal waren; seit sie auf vergilbtem Leinen
 * stehen und Bube, Dame und König ihre Halbfigur tragen, wäre die harte Ecke ein Pappwürfel. Die Rundung hängt wie
 * drüben an der Kartenbreite (9 Prozent) — Knöpfe, Plaketten, Mitte und Pult 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-kn-leinen)` dort auf eine ungültige Angabe
 * zurück, und die Karte erbte irgendeine Füllung. Der Name trägt seinen Ordner, wie jeder Token dieses Pakets.
 *
 * Kreide ist das Papier dieses Hauses; was hier liegt, ist ein Deck, das seit Jahren im Hinterzimmer durchgespielt
 * wird. Der Abstand ist klein und nachgerechnet: gegen Tusche 14,96 : 1, wo die Kreide 16,26 hält.
 */
:root {
  --ar-kn-leinen: #eae1cb;
}

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

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

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

/*
 * Ab dem Tablet nimmt das Brett die ganze Bühne: Mitte und Tisch links, Hand und Griffe rechts daneben. Hochkant auf dem
 * Tablet stand es auf den 36rem des Telefons, alles in einer Spalte und elfhundert Pixel hoch.
 */
@media (min-width: 48rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='knack'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/*
 * Außen um das Raster: Nach der Breite des BRETTS fragen alle Regeln darin, und ein Raster kann nicht nach seiner
 * eigenen fragen. Der Wagen misst die Außenkante, die Schwellen liegen deshalb um den Rand des Bretts höher als die
 * Innenbreite, von der die Kommentare sprechen.
 */
.ar-kn-mass {
  container: ar-kn-mass / inline-size;
}

/*
 * DIE KARTE IST DAS MASS DIESES BRETTS, und ihre Breite steht in Stufen und nicht in einer Rechnung auf die Fensterhöhe.
 * Dieses Brett ist wie jeder andere Kartentisch des Pools höher als der Falz — Mitte, vier Plaketten, die eigene Hand
 * und vier Griffe stehen übereinander —, und eine Karte, die aus der Resthöhe gerechnet wird, stünde auf jedem Gerät
 * auf ihrem Boden von 44 Pixeln und sagte damit nichts. Wo die Höhe wirklich bindet, bindet sie auch: auf dem
 * Schreibtisch deckelt sie das Wachstum (unten), im flachen Querformat fällt die Karte auf ihren Boden zurück.
 *
 * Der Boden von 2,75rem ist die Tippfläche selbst: 44 Pixel breit, und hoch ist sie das Anderthalbfache.
 */
.ar-kn {
  /* Wie lange ein Streichholz brennt und wie lange sein Rauch steht, am Pult und auf dem Tisch (`BRAND_MS` in brett.js
     ist ihre Summe). Beides läuft in harten Bildern, nie als Übergang. */
  --ar-kn-brennen: 480ms;
  --ar-kn-rauchen: 720ms;
  /* Auf dem Tisch brennt es länger und in sechs Bildern (`BRAND_MS` und `VERKOHLT_MS` in brett.js rechnen damit). */
  --ar-kn-tischbrand: 900ms;
  --ar-kn-karte: 2.75rem;
  /* Die EIGENE Hand am Pult liegt im Fächer und ist das Möbel, auf das man den ganzen Durchgang schaut. */
  --ar-kn-hand: calc(var(--ar-kn-karte) * 1.35);
  display: grid;
  gap: 0.6rem;
  padding: 0.5rem;
}

@container ar-kn-mass (min-width: 19rem) {
  .ar-kn {
    --ar-kn-karte: 3.4rem;
  }
}

@container ar-kn-mass (min-width: 26rem) {
  .ar-kn {
    --ar-kn-karte: 3.9rem;
  }
}

/* ------------------------------------------------------------ Die Karte */

/*
 * Eine Karte aus dem Hinterzimmer: Tusche auf vergilbtem Leinen, der Wert mit seinem Farbzeichen oben links, das
 * Farbzeichen groß in der Mitte. Der doppelte Zierrand ist ein harter Innenschatten ohne jede Unschärfe.
 */
.ar-kn__karte {
  --ar-kn-b: var(--ar-kn-karte);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ar-kn-b);
  aspect-ratio: 2 / 3;
  border: 1px solid var(--ar-noir);
  border-radius: calc(var(--ar-kn-b) * 0.09);
  background: var(--ar-kn-leinen);
  color: var(--ar-noir);
  box-shadow: inset 0 0 0 3px var(--ar-kn-leinen), inset 0 0 0 4px var(--ar-noir);
}

/* Wert und Farbzeichen stehen übereinander in der Ecke, wie auf jeder Karte, die man in der Hand auffächert. */
.ar-kn__index {
  position: absolute;
  top: 6%;
  left: 8%;
  display: grid;
  justify-items: center;
  gap: calc(var(--ar-kn-b) * 0.02);
  line-height: 1;
}

.ar-kn__wert {
  font-family: var(--ar-schrift-plakat);
  font-size: calc(var(--ar-kn-b) * 0.29);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ar-kn__indexfarbe {
  display: block;
  width: calc(var(--ar-kn-b) * 0.24);
  height: calc(var(--ar-kn-b) * 0.24);
}

.ar-kn__zeichen {
  display: block;
  width: calc(var(--ar-kn-b) * 0.46);
  height: calc(var(--ar-kn-b) * 0.46);
}

/*
 * DIE HALBFIGUR EINER BILDKARTE NIMMT DIE MITTE, DAS FARBZEICHEN RÜCKT IN DIE ECKE. Es steht dann kleiner da als auf
 * einer Zahlkarte, und das ist der Preis: Die Figur ist das, was eine Bildkarte zur Bildkarte macht. Getragen wird
 * die Farbe dafür zweimal — oben im Index und hier unten —, und eine Zahlkarte behält ihr großes Zeichen unberührt.
 */
.ar-kn__figur {
  display: block;
  width: calc(var(--ar-kn-b) * 0.52);
  height: calc(var(--ar-kn-b) * 0.72);
}

.ar-kn__zeichen[data-ar-kn-neben] {
  position: absolute;
  right: 9%;
  bottom: 10%;
  width: calc(var(--ar-kn-b) * 0.28);
  height: calc(var(--ar-kn-b) * 0.28);
}

/* Die Rückseite bringt ihren eigenen Rahmen mit; der Zierrand der offenen Karte wäre darüber ein zweiter. */
.ar-kn__karte--zu {
  background: var(--ar-noir);
  border-color: var(--ar-kante-griff);
  box-shadow: none;
}

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

/*
 * Der Knopf um eine Karte: Er ist die Tippfläche und misst in beide Richtungen mindestens 44 Pixel. Gewählt heißt
 * aufgenommen — die Karte steht einen Schnitt höher und trägt die Senfkante; der Screenreader hört aria-pressed.
 *
 * Wer zuschaut, bekommt dieselbe Fläche als <span>: Die Karten der Mitte sollen bei allen gleich breit stehen. Der
 * Zeigefinger gehört deshalb dem Knopf und nicht der Klasse — sonst verspräche eine Fläche einen Griff, die keiner ist.
 */
.ar-kn__griff {
  display: block;
  min-width: 44px;
  min-height: 44px;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 0;
  background: none;
}

button.ar-kn__griff {
  cursor: pointer;
}

button.ar-kn__griff[aria-disabled='true'] {
  cursor: default;
}

.ar-kn__griff[aria-pressed='true'] {
  border-color: var(--ar-funke);
  background: var(--ar-noir-3);
}

.ar-kn__griff[aria-pressed='true'] > .ar-kn__karte {
  translate: 0 -4px;
}

/* Frisch auf den Tisch gekommen: dieselbe Senfkante wie am Kartentisch nebenan. */
.ar-kn__griff[data-ar-kn-neu] > .ar-kn__karte {
  outline: 3px solid var(--ar-funke);
  outline-offset: 2px;
}

/*
 * UND SIE GLEITET AUF IHREN PLATZ. Eine getauschte Karte lag vorher von einem Bild aufs andere einfach da; jetzt
 * kommt sie von oben herein, in vier harten Schnitten über die Zugdauer des Servers (--ar-kn-gleit aus `takt`).
 *
 * DER VERSATZ IST NEGATIV UND KOMMT AUS DER SERVERZEIT. Wer die Antwort später bekommt, steigt weiter hinten in die
 * Bewegung ein, und alle vier sehen die Karte im selben Augenblick liegen.
 *
 * KEIN `both`: Mit Füllung hielte der letzte Schlüsselbild-Wert fest, und die Karte ließe sich danach nicht mehr
 * anheben, wenn jemand sie wählt — eine laufende Füllung schlägt jede Regel im Stilblatt.
 *
 * SIE KOMMT VON OBEN UND NICHT VON DER SEITE. Seitwärts lief die äußere Karte über die Kante der Mitte hinaus, und
 * ein Brett, das für einen Wimpernschlag seitwärts scrollt, ist auf dem Telefon kaputt.
 */
@media (prefers-reduced-motion: no-preference) {
  .ar-kn__griff[data-ar-kn-neu] > .ar-kn__karte {
    animation: ar-kn-gleiten var(--ar-kn-gleit, 320ms) steps(4) 1;
    animation-delay: var(--ar-kn-gleitab, 0ms);
  }
}

@keyframes ar-kn-gleiten {
  from {
    rotate: -7deg;
    translate: 0 -55%;
  }

  to {
    rotate: 0deg;
    translate: 0 0;
  }
}

/* Ein Griff, der nicht ankommt, bekommt sein Kreuz aus Kreide. */
.ar-kn__griff[data-ar-nein],
.ar-kn__griffe .ar-knopf[data-ar-nein] {
  outline: 3px solid var(--ar-kreide);
  outline-offset: 1px;
}

.ar-kn__platz {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
}

/*
 * DIE VORSCHAU UNTER DER KARTE: was die Hand nach dem Tausch mit genau dieser Karte zählte, Zahl und Vorzeichen. Sie
 * steht, sobald die erste Karte eines Tauschs gewählt ist, unter jeder Karte der anderen Seite — die zweite tauscht
 * sofort, und vorher muss man sehen, was sie bringt. Sie stand einmal als Zeile im Knopf „Tauschen“, und den gibt es
 * nicht mehr.
 *
 * SIE HÄLT IHRE ZEILE AUCH LEER. Käme sie mit der ersten Wahl, rutschte die Karte darüber in dem Augenblick, in dem
 * der Daumen zu ihr unterwegs ist. Dasselbe dunkle Schild wie früher am Knopf: Die Richtung trägt das Vorzeichen, die
 * Kante links trägt sie ein zweites Mal, die Schrift bleibt Kreide.
 */
.ar-kn__folge {
  width: 0;
  min-width: 100%;
  min-height: calc(1.2em + 0.1rem);
  padding: 0.05rem 0.35rem;
  border-left: var(--ar-farbkante) solid var(--ar-kante-griff);
  background: var(--ar-noir);
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  hyphens: none;
}

/*
 * SIE GIBT DEM PLATZ SEINE BREITE NICHT VOR (`width: 0`, `min-width: 100%`): Sie steht so breit wie die Karte. Ein
 * Drilling macht aus „21 +10“ ein „30,5 +19,5“, das war breiter als die Karte, der Platz wuchs mit, und die Nachbarn
 * rückten beim ersten Tipp seitlich. Solche Werte stehen kleiner, in derselben Höhe wie die anderen (die Reserve darüber
 * rechnet in em und schrumpfte sonst mit); auf 375 Pixeln passen sie damit in die Karte.
 */
.ar-kn__folge[data-ar-kn-eng] {
  min-height: calc(0.72rem * 1.2 + 0.1rem);
  padding-inline: 0.12rem;
  font-size: 0.58rem;
  letter-spacing: -0.02em;
}

.ar-kn__folge[data-ar-leer] {
  border-left-color: transparent;
  background: none;
}

.ar-kn__folge[data-ar-kn-richtung='hoch'] { border-left-color: var(--ar-funke); }
.ar-kn__folge[data-ar-kn-richtung='tief'] { border-left-color: var(--ar-rot); }

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

.ar-kn__mitte {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

/* Beim Aufdecken gehört die Mitte der Wertung, und das steht als Kante da und nicht nur im Text. */
.ar-kn__mitte[data-ar-kn-lage='wertung'] {
  border-color: var(--ar-funke);
}

/*
 * IST DIE ERSTE KARTE EINES TAUSCHS GEWÄHLT, FRAGT DAS BRETT NACH DER ZWEITEN: Die gefragte Seite — die Mitte oder die
 * eigene Hand — trägt eine harte Senfkante ringsum, einen Ton heller als die Fläche, und die Zeile über der Mitte wird
 * zur Senffläche unter dunkler Schrift (Noir auf Senf, 8,76:1). Die Kante ist ein `outline` und keine dickere
 * Umrandung: Der Kasten wächst dadurch keinen Pixel, und die rote Zumachen-Kante daneben bleibt stehen, denn „letzte
 * Runde“ gilt weiter. Sie sitzt im Polster des Bretts (3 + 2 Pixel von 8) und schiebt nichts seitwärts.
 */
.ar-kn__mitte[data-ar-kn-gefragt],
.ar-kn__hand[data-ar-kn-gefragt] {
  outline: var(--ar-tusche) solid var(--ar-funke);
  outline-offset: 2px;
  background: var(--ar-noir-3);
}

/* Die gefragte Hand öffnet ihren Fächer wie unter dem Finger: Unter jeder Karte steht jetzt eine Vorschau, und die
   nächste Karte des Fächers deckte sie sonst halb zu. */
.ar-kn__hand[data-ar-kn-gefragt] .ar-kn__handkarten {
  --ar-kn-neigung: 13deg;
  --ar-kn-deckung: calc(var(--ar-kn-karte) * 0.1);
}

/*
 * DIE ZEILE ÜBER DEN KARTEN: wer dran ist, und nach der ersten Wahl, welche Karte noch fehlt. Sie hält ihren Platz über
 * beide Sätze und über jeden Zug — sonst rückten die Karten darunter, sobald man selbst dran ist oder wählt. Auf
 * schmalen Bretts bricht der Satz um, und dort sind es zwei Zeilen.
 */
.ar-kn__wer {
  display: grid;
  align-content: center;
  width: 100%;
  /* In Zeilenhöhen und nicht in Rem: Zwei Zeilen „Du bist dran: …“ standen sonst vier Pixel höher als die Reserve, und
     die Karten darunter rückten, sobald aus dem Satz die einzeilige Frage nach der zweiten Karte wurde. */
  min-height: calc(1.35em + 0.2rem);
  margin: 0;
  padding: 0.1rem 0.5rem;
  color: var(--ar-kreide);
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.ar-kn__wer[data-ar-kn-frage] {
  background: var(--ar-funke);
  color: var(--ar-noir);
  font-weight: 700;
}

@container ar-kn-mass (max-width: 30rem) {
  .ar-kn__wer {
    min-height: calc(2.7em + 0.2rem);
  }
}

.ar-kn__kopfzeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  width: 100%;
  min-height: 1.5rem;
  margin: 0;
}

.ar-kn__aufschrift {
  color: var(--ar-kreide);
  font-weight: 600;
}

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

.ar-kn__mittekarten,
.ar-kn__handkarten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * DIE EIGENE HAND LIEGT IM FÄCHER, NICHT IN DER REIHE. Drei gleich große Kacheln nebeneinander sind eine Auslage;
 * was man in der Hand HÄLT, überlappt und steht schräg. Gedreht wird um die Unterkante — dort, wo der Daumen läge.
 *
 * DIE MITTE BLEIBT EINE REIHE. Was auf dem Tisch liegt, liegt flach: Ein Fächer dort behauptete, jemand halte die
 * Karten, und überdeckte obendrein die Werte, auf die alle gleichzeitig schauen.
 *
 * Kein Umbruch: Drei überlappende Karten passen auch auf 375 Pixeln nebeneinander, und eine umgebrochene Karte wäre
 * kein Fächer mehr, sondern ein zerrissener.
 */
.ar-kn__handkarten {
  --ar-kn-karte: var(--ar-kn-hand);
  --ar-kn-neigung: 7deg;
  --ar-kn-deckung: calc(var(--ar-kn-karte) * 0.3);
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0;
  padding-top: 0.5rem;
}

.ar-kn__handkarten > .ar-kn__platz {
  position: relative;
  transform-origin: bottom center;
  transition: translate 90ms linear, rotate 90ms linear, margin-left 90ms linear;
}

/*
 * UND ER SPREIZT SICH, SOBALD EINE HAND DARÜBER LIEGT. Der Fächer stand in jeder Lage gleich eng — drei Karten, die
 * einander zu einem Drittel decken —, und wer die mittlere lesen wollte, musste sie erst anfahren. Jetzt geht er
 * beim Zeigen und beim Antippen auf: mehr Winkel, weniger Deckung, und die Werte stehen frei.
 *
 * ES IST EIN BEDIENZUSTAND UND KEINE PHYSISCHE BEWEGUNG, also ein Übergang — linear und 90 ms, wie der Rest dieses
 * Fächers. Getragen wird er von der Deckung selbst: Sie steckt in `margin-left`, und die zieht mit.
 *
 * `:focus-within` IST DER FINGER. Ein Tipp auf eine Karte setzt den Fokus auf ihren Knopf, und damit spreizt sich der
 * Fächer auch dort, wo es keinen Zeiger gibt.
 */
.ar-kn__handkarten:hover,
.ar-kn__handkarten:focus-within {
  --ar-kn-neigung: 13deg;
  --ar-kn-deckung: calc(var(--ar-kn-karte) * 0.1);
}

.ar-kn__handkarten > .ar-kn__platz + .ar-kn__platz {
  margin-left: calc(var(--ar-kn-deckung) * -1);
}

/*
 * Die äußeren Karten neigen sich, die mittlere steht. `:not(:only-child)` hält eine einzeln verbliebene Karte
 * gerade — eine schräge Karte ohne Nachbarin sieht nach einem Fehler aus und nicht nach einem Fächer.
 */
.ar-kn__handkarten > .ar-kn__platz:first-child:not(:only-child) {
  rotate: calc(var(--ar-kn-neigung) * -1);
  translate: 0 0.2rem;
}

.ar-kn__handkarten > .ar-kn__platz:last-child:not(:only-child) {
  z-index: 2;
  rotate: var(--ar-kn-neigung);
  translate: 0 0.2rem;
}

.ar-kn__handkarten > .ar-kn__platz:nth-child(2) {
  z-index: 1;
}

/* Wer angefasst, angesteuert oder gewählt ist, kommt aus dem Fächer heraus nach vorn — gerade und ein Stück höher. */
.ar-kn__handkarten > .ar-kn__platz:has(> .ar-kn__griff:hover),
.ar-kn__handkarten > .ar-kn__platz:has(> .ar-kn__griff:focus-visible),
.ar-kn__handkarten > .ar-kn__platz:has(> .ar-kn__griff[aria-pressed='true']) {
  z-index: 3;
  rotate: 0deg;
  translate: 0 -0.45rem;
}

@media (prefers-reduced-motion: reduce) {
  .ar-kn__handkarten > .ar-kn__platz {
    transition: none;
  }
}

/*
 * Die Satzzeile hält ihre Höhe: Sie wechselt mehrmals je Durchgang — zugemacht, nachgelegt, die Zählung der Wertung —,
 * und darunter steht auf dem Telefon die eigene Hand, nach der der Daumen greift.
 *
 * ZWEI ZEILEN, IN ZEILENHÖHEN GERECHNET. Die Reserve stand auf 3,2rem, gut zweieinhalb Zeilen: Drei hielt sie nicht,
 * und für zwei stand eine halbe leer, bei jedem Zug, direkt über der Hand.
 */
.ar-kn__satz {
  display: grid;
  align-content: center;
  width: 100%;
  min-height: 2.7em;
  margin: 0;
  color: var(--ar-kreide);
  font-size: 0.88rem;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

/*
 * Auf 375 Pixeln tragen alle Sätze zwei Zeilen, auch mit einem Namen von zwanzig Zeichen — dafür sind Zumachen, Knack
 * und Feuer kurz gefasst. Darunter nicht mehr, und dort hält die Zeile drei: Sonst wüchse die Mitte genau dann, wenn
 * jemand zumacht, und die Hand darunter rückte unter dem Daumen weg, mit dem der letzte Zug fällt.
 */
@container ar-kn-mass (max-width: 18.99rem) {
  .ar-kn__satz {
    min-height: 4.05em;
  }
}

.ar-kn__mitte[data-ar-kn-lage='wertung'] > .ar-kn__satz {
  color: var(--ar-funke);
  font-weight: 700;
}

/*
 * ZUGEMACHT: DIE LETZTE RUNDE STEHT AM GANZEN BRETT. Der Satz stand unter der Mitte, und auf dem Telefon liegt der
 * längst über dem Falz, wenn jemand auf seine eigene Hand schaut — die Karte, die er jetzt noch tauscht, ist seine
 * letzte, und das muss er wissen, ohne zu scrollen. Also trägt der Rahmen um das Brett die Signalkante, und der Satz
 * darunter steht in Plakatschrift.
 */
.ar-kn[data-ar-kn-zu] {
  outline: var(--ar-tusche) solid var(--ar-rot);
  outline-offset: -1px;
}

.ar-kn__mitte[data-ar-kn-zu] {
  border-color: var(--ar-rot);
}

.ar-kn__mitte[data-ar-kn-zu] > .ar-kn__satz {
  color: var(--ar-kreide);
  font-weight: 700;
}

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

/*
 * DER TISCH IST DIE BÜHNE: Fächer, Mitte, Stapel und Streichhölzer liegen auf dem gemalten Stammtisch (js/kulisse.js),
 * und über ihm liegen die Schilder der Plätze. Hochkant steht er fast quadratisch, und der Tisch läuft links und rechts
 * aus dem Bild; auf dem Schreibtisch steht er quer und ganz (unten bei den Breiten).
 */
.ar-kn__buehne {
  position: relative;
}

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

.ar-kn__buehne > [data-ar-kn-teil='tisch'] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ar-kn__farben {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * DIE SCHILDER DER PLÄTZE liegen je eines an seinem Platz (brett.js rechnet die Stelle aus der Bühne): Marke, Name,
 * Abzeichen und die Streichhölzer, beim Aufdecken darunter die Wertung. Ein Schild ist eine Fläche in der Palette der
 * Arena auf dem Bild, und seine Schrift hält dort ihren Kontrast.
 */
.ar-kn__farbe {
  position: absolute;
  display: grid;
  gap: 0.1rem;
  max-width: 34%;
  padding: 0.2rem 0.45rem 0.25rem 0.35rem;
  border: 1px solid var(--ar-kante-griff);
  border-left: var(--ar-farbkante) solid var(--ar-kn-farbe);
  background: var(--ar-noir-2);
  font-size: 0.8rem;
  line-height: 1.2;
  translate: -50% -50%;
}

/* Das eigene Schild steht unten auf der Holzkante und darf breiter sein; hochkant teilen sich drei die ferne Kante. */
.ar-kn__farbe[data-ar-kn-seite='unten'] {
  max-width: 62%;
}

.ar-kn__farbe[data-ar-kn-seite^='fern'] {
  max-width: 31%;
}

/* Gegenüber steht das Schild rechts neben dem Fächer und wächst beim Aufdecken von ihm weg. */
.ar-kn__farbe[data-ar-kn-seite='oben'] {
  translate: 0 -50%;
}

/*
 * AUF DEM TELEFON STEHT EIN SCHILD IN EINER ZEILE: Marke, Name und Abzeichen. Die Streichhölzer liegen dort neben jedem
 * Fächer auf dem Tisch, und ihre Zahl steht in der Leiste über dem Brett; zwei Zeilen je Schild deckten an der fernen
 * Kante die Mitte zu. Beim Aufdecken kommt die Wertung als zweite Zeile dazu.
 */
@container ar-kn-mass (max-width: 30.99rem) {
  .ar-kn__farbe {
    padding: 0.12rem 0.3rem 0.15rem 0.25rem;
    font-size: 0.72rem;
  }

  .ar-kn__farbe > .ar-kn__kopf {
    flex-wrap: nowrap;
    gap: 0.25rem;
  }

  .ar-kn__farbe .ar-kn__hoelzer {
    display: none;
  }

  .ar-kn__farbe .ar-kn__zusatz {
    padding: 0 0.2rem;
    font-size: 0.6rem;
  }

  .ar-kn__farbe .ar-kn__marke {
    width: 0.9rem;
    height: 0.9rem;
  }

  .ar-kn__farbe .ar-kn__blattkurz {
    font-size: 0.8rem;
  }

  .ar-kn__farbe .ar-kn__verlust {
    font-size: 0.72rem;
  }
}

.ar-kn__farbe[data-ar-farbe='rot'], .ar-kn__bildhand[data-ar-farbe='rot'] { --ar-kn-farbe: var(--ar-rot); }
.ar-kn__farbe[data-ar-farbe='blau'], .ar-kn__bildhand[data-ar-farbe='blau'] { --ar-kn-farbe: var(--ar-blau); }
.ar-kn__farbe[data-ar-farbe='gelb'], .ar-kn__bildhand[data-ar-farbe='gelb'] { --ar-kn-farbe: var(--ar-gelb); }
.ar-kn__farbe[data-ar-farbe='gruen'], .ar-kn__bildhand[data-ar-farbe='gruen'] { --ar-kn-farbe: var(--ar-gruen); }

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

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

/* Wer in dieser Wertung zahlt: Senfkante, dazu das gebrochene Holz und die Zeile „−1 Streichholz“. */
.ar-kn__farbe[data-ar-kn-zahlt],
.ar-kn__bildhand[data-ar-kn-zahlt] {
  border-color: var(--ar-funke);
  border-left-color: var(--ar-funke);
}

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

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

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

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

/* Die Streichhölzer stehen rechts in der Kopfzeile und halten ihren Platz, auch wenn keines mehr heil ist. */
.ar-kn__hoelzer {
  display: flex;
  flex: none;
  align-items: flex-end;
  gap: 0.15rem;
  margin-left: auto;
}

/*
 * JEDES HOLZ LIEGT IN EINEM FACH, und darauf liegen Flamme und Rauch (ganz unten). Das Fach hat keine eigenen Maße:
 * Es misst, was das Holz darin misst — klein in der Plakette, groß am Pult.
 */
.ar-kn__holzfach {
  position: relative;
  display: block;
  flex: none;
  border: 2px solid transparent;
}

/* Was in dieser Wertung gebrochen ist, trägt die Senfkante — die Form sagt es, die Kante sagt, wann. */
.ar-kn__holzfach[data-ar-kn-bruch] {
  border-color: var(--ar-funke);
}

/*
 * Eins zu fünf, wie die viewBox des Symbols: Jedes andere Maß ließe das Holz in seinem Kasten schwimmen.
 *
 * SCHLANK UND NICHT HÖHER ALS DER NAME DANEBEN. Das Holz maß 0,4 × 2rem und war damit das höchste Stück der Kopfzeile:
 * Jede Plakette war um die Differenz zum Namen höher, zu viert um vier solche Streifen. Wie viele eine Farbe hat,
 * steht ohnehin als Zahl in ihrer Plakette oben; hier sagt die Form, welches heil und welches abgebrannt ist, und
 * das trägt auch ein Holz von 20 Pixeln. In voller Länge liegen nur die eigenen, am Pult.
 */
.ar-kn__holz {
  display: block;
  width: 0.25rem;
  height: 1.25rem;
}

/*
 * BEIM AUFDECKEN STEHT UNTER DEM NAMEN, WAS DIE HAND ZÄHLT, und beim Zahler daneben, was es ihn kostet. Die Karten
 * liegen davor auf dem Tisch; diese Zeile ist ihre Zählung, und sie kommt erst, wenn die Hände umgeschlagen sind.
 */
.ar-kn__ausgang {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.05rem 0.45rem;
  margin: 0;
}

.ar-kn__blattkurz {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  hyphens: none;
  overflow-wrap: anywhere;
}

.ar-kn__verlust {
  color: var(--ar-funke);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  hyphens: none;
  overflow-wrap: anywhere;
}

/*
 * EINE KARTE AUF DEM TISCH ist dieselbe Zeichnung wie im Pult, nur so breit, wie die Bühne sie stellt
 * (`--ar-ku-karte-breite`, js/kulisse.js); ihr Zierrand wächst mit, sonst stünde er auf dem Telefon dicker als der Wert.
 * Der Schatten trägt dieselbe Rundung wie die Karte.
 */
.ar-kn__auflage {
  display: block;
}

.ar-kn__auflage > .ar-kn__karte {
  --ar-kn-b: var(--ar-ku-karte-breite);
  box-shadow:
    inset 0 0 0 max(1px, calc(var(--ar-kn-b) * 0.045)) var(--ar-kn-leinen),
    inset 0 0 0 max(2px, calc(var(--ar-kn-b) * 0.06)) var(--ar-noir);
}

.ar-kn__auflage > .ar-kn__karte--zu {
  box-shadow: none;
}

.ar-kn .ar-kulisse__karte-schatten {
  border-radius: 9% / 6%;
}

/* Was in dieser Wertung zahlt, trägt seine Senfkante auch auf dem Tisch — und nie nur sie: Das Schild sagt es in Worten. */
.ar-kulisse__karte[data-ar-ku-marke='zahlt'] .ar-kn__karte {
  outline: max(2px, calc(var(--ar-kn-b) * 0.05)) solid var(--ar-funke);
}

/* Ein Streichholz auf dem Tisch: dasselbe Symbol wie am Pult, so groß, wie die Bühne die Platte stellt. */
.ar-kn__tischholz {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * UND WAS BRICHT, BRENNT AUF DEM TISCH AB: Flamme, Kern und Rauch stehen als Aufsteller auf dem Kopf des Streichholzes
 * und schauen zur Kamera (js/kulisse.js), gezeichnet als Flächen ohne Unschärfe wie am Pult. Sie beginnen zum Bruch und
 * nicht, wenn der Knoten entsteht (`--ar-ku-verzug`), und ohne Bewegung steht nichts da — das Holz liegt dann einfach
 * verkohlt.
 *
 * BEWEGT WERDEN ZWEI SVG-KÄSTEN, NIE FORMEN DARIN UND NIE PSEUDOELEMENTE. Mit `::before` und `clip-path` wie am Pult,
 * und danach mit drei Formen in einem SVG, malte Chrome im Raum der Bühne nur einen Punkt: Gemessen stand die Flamme in
 * voller Größe und voller Deckkraft da, gemalt wurde sie nicht neu. Eine eigene Fläche am Aufsteller hätte es behoben
 * und wäre ein unsichtbares Rechteck auf dem Filz gewesen; zwei Kästen, die sich selbst bewegen, malt Chrome richtig.
 */
.ar-kn__flamme,
.ar-kn__rauch {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  opacity: 0;
  transform-origin: 50% 100%;
}

.ar-kn__flamme {
  bottom: 0;
  height: 62%;
}

.ar-kn__rauch {
  top: 0;
  height: 40%;
}

.ar-kn__flamme-rand { fill: var(--ar-funke); }
.ar-kn__flamme-kern { fill: var(--ar-rot); }
.ar-kn__rauch > polygon { fill: var(--ar-kreide-2); }

@media (prefers-reduced-motion: no-preference) {
  /* Die Flamme wächst aus dem Kopf des Holzes und sinkt dorthin zurück; ihr Kern ist eine zweite, rote Fläche. */
  .ar-kn__flamme {
    animation: ar-kn-tischflamme var(--ar-kn-tischbrand) steps(6) 1 both;
    animation-delay: var(--ar-ku-verzug, 0ms);
  }

  .ar-kn__rauch {
    animation: ar-kn-tischrauch var(--ar-kn-tischbrand) steps(5) 1 both;
    animation-delay: calc(var(--ar-ku-verzug, 0ms) + var(--ar-kn-tischbrand) * 0.8);
  }
}

@keyframes ar-kn-tischflamme {
  0% {
    opacity: 1;
    scale: 0.3 0.2;
  }

  45% {
    opacity: 1;
    scale: 1 1;
  }

  100% {
    opacity: 0;
    scale: 0.25 0.15;
  }
}

@keyframes ar-kn-tischrauch {
  0% {
    opacity: 0;
    scale: 0.4;
    translate: 0 30%;
  }

  35% {
    opacity: 1;
    scale: 0.8;
    translate: 0 0;
  }

  100% {
    opacity: 0;
    scale: 1.3;
    translate: 0 -60%;
  }
}

/* ------------------------------------------------------------ Hand und Griffe */

.ar-kn__pult {
  display: grid;
  align-content: start;
  gap: 0.6rem;
}

/*
 * DIE EIGENEN STREICHHÖLZER, IN VOLLER LÄNGE AUF DER PLATTE. Sie standen nur klein in der eigenen Plakette — sechs
 * Pixel breit, rechts in einer Kopfzeile, zwischen Namen und Abzeichen. Das ist die Währung dieses Spiels: Wer hier
 * eines verliert, soll es sehen, ohne den Blick zu heben, und wer bei null steht, soll es nicht suchen müssen.
 *
 * DIE PLATTE IST EINE FLÄCHE UND KEIN VERLAUF: Sie steht auf --ar-noir-3 mit einer Griffkante, und das Holz macht die
 * Zeichnung darauf, nicht der Untergrund. Ein Maserungsverlauf wäre in diesem Haus ohnehin verboten.
 */
.ar-kn__pultholz {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0.5rem 0.45rem;
  border: 2px solid var(--ar-kante-griff);
  border-bottom-width: var(--ar-farbkante);
  background: var(--ar-noir-3);
}

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

.ar-kn__pultholz-reihe {
  display: flex;
  gap: 1.1rem;
  align-items: flex-end;
  min-height: 4.4rem;
}

/* Eins zu fünf wie die viewBox des Symbols — nur gut doppelt so groß wie das Holz in der Plakette. */
.ar-kn__grossholz {
  display: block;
  width: 0.9rem;
  height: 4.4rem;
}

/*
 * EIN VERLORENES LEBEN BRENNT AB. Das Holz wechselte von einem Bild aufs andere seine Form, und am Tisch fragte
 * jedes Mal jemand, welches denn nun weg sei. Jetzt lodert der Kopf kurz auf, ein Rauchwölkchen steigt, und liegen
 * bleibt das abgebrannte Holz — das ist der Stand, und den trägt die Form auch ohne jede Bewegung.
 *
 * ES IST EINE PHYSISCHE BEWEGUNG, also ein Bildtakt: vier harte Schnitte je Ebene, kein Übergang, kein Nachwippen.
 * Beide Ebenen sind Flächen mit `clip-path` und kein Weichzeichner — eine Flamme ist in diesem Haus eine Silhouette.
 *
 * DIE BREITEN SIND GEDECKELT. Flamme und Rauch messen 120 und 130 Prozent des Holzes und ragen damit je Seite um ein
 * Zehntel bis ein Sechstel darüber hinaus: In der Plakette ist das weniger als ein Pixel, am Pult sind es zwei, und
 * beides bleibt innerhalb des Polsters ihres Kastens. Wer sie breiter macht, schiebt das Brett seitwärts.
 *
 * SIE WAREN EINMAL 170 UND 150 PROZENT BREIT UND EIN DRITTEL SO HOCH, und die Flamme sah damit aus wie ein Fünfeck
 * auf einem Stiel. Eine Flamme ist schmal und hoch; was sie erkennbar macht, ist das Verhältnis und nicht die Farbe.
 */
@media (prefers-reduced-motion: no-preference) {
  .ar-kn__holzfach[data-ar-kn-bruch]::before,
  .ar-kn__holzfach[data-ar-kn-bruch]::after {
    position: absolute;
    left: 50%;
    display: block;
    content: '';
  }

  .ar-kn__holzfach[data-ar-kn-bruch]::before {
    top: -24%;
    width: 120%;
    height: 42%;
    background: var(--ar-funke);
    clip-path: polygon(50% 0, 74% 34%, 78% 66%, 50% 100%, 22% 66%, 26% 34%);
    animation: ar-kn-flamme var(--ar-kn-brennen) steps(4) 1 both;
  }

  .ar-kn__holzfach[data-ar-kn-bruch]::after {
    top: -44%;
    width: 130%;
    height: 32%;
    background: var(--ar-kreide-2);
    clip-path: polygon(26% 34%, 44% 6%, 70% 16%, 86% 46%, 72% 82%, 40% 90%, 18% 68%);
    animation: ar-kn-rauch var(--ar-kn-rauchen) steps(4) 1 both;
    animation-delay: var(--ar-kn-brennen);
  }
}

@keyframes ar-kn-flamme {
  0% {
    opacity: 1;
    scale: 0.3 0.2;
    translate: -50% 0;
  }

  45% {
    opacity: 1;
    scale: 1 1;
    translate: -50% 0;
  }

  100% {
    opacity: 0;
    scale: 0.25 0.15;
    translate: -50% 0;
  }
}

@keyframes ar-kn-rauch {
  0% {
    opacity: 0;
    scale: 0.4;
    translate: -50% 70%;
  }

  35% {
    opacity: 1;
    scale: 0.8;
    translate: -50% 0;
  }

  100% {
    opacity: 0;
    scale: 1.3;
    translate: -50% -130%;
  }
}

/*
 * SCHWIMMER: die lauteste Plakette dieses Spiels. Signalkante und Signalschrift auf der Platte — und das Wort daneben,
 * denn Rot auf Schwarz ist ein Signal und kein Lesetext. Sie steht nur da, wenn kein Holz mehr liegt; die leere Reihe
 * darüber sagt dasselbe ein zweites Mal in der Form.
 */
.ar-kn__pultholz[data-ar-kn-schwimmt] {
  border-color: var(--ar-rot);
}

.ar-kn__schwimmer {
  margin: 0;
  padding: 0.1rem 0.45rem;
  border: 2px solid var(--ar-rot);
  color: var(--ar-kreide);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

/* ------------------------------------------------------------ Die Legende */

/*
 * WAS ZÄHLT, IN DREI KACHELN. Sie stand hinter dem Fragezeichen im Regelblatt, und dort hat sie mitten im Durchgang
 * niemand aufgemacht: Wer gerade rechnet, ob zwei Herzen und ein Pik-Ass mehr sind als ein Drilling, klickt nicht weg.
 * Hervorgehoben ist, was die eigene Hand gerade IST — das steht ohnehin als Zahl daneben.
 *
 * ES WAREN VIER ZEILEN IN 0,66rem, und auf dem Tablett hat sie so niemand gelesen: Vier Kästchen nebeneinander in
 * einer Schrift, die kleiner war als jede andere des Bretts. Jetzt sind es drei Kacheln über die volle Breite, jede
 * mit ihrem Satz dahinter, und keine steht unter 0,8rem.
 */
.ar-kn__legende {
  display: grid;
  gap: 0.2rem;
  padding: 0.3rem 0.5rem 0.4rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

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

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

/* Wort und Wert stehen vorn, der Satz dahinter — und er bricht als Erster um, wenn die Kachel schmal wird. */
.ar-kn__legende-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.45rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--ar-kante);
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  hyphens: none;
  overflow-wrap: anywhere;
}

.ar-kn__legende-wort {
  color: var(--ar-kreide);
}

.ar-kn__legende-wert {
  color: var(--ar-kreide);
  font-variant-numeric: tabular-nums;
}

.ar-kn__legende-satz {
  flex: 1 1 9rem;
  min-width: 0;
  font-size: 0.8rem;
}

.ar-kn__legende-zeile[data-ar-kn-hier] {
  border-color: var(--ar-funke);
  background: var(--ar-noir-3);
}

.ar-kn__legende-zeile[data-ar-kn-hier] > .ar-kn__legende-wort,
.ar-kn__legende-zeile[data-ar-kn-hier] > .ar-kn__legende-wert {
  color: var(--ar-funke);
}

.ar-kn__hand {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem 0.55rem;
  border: 2px dashed var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

/*
 * DIE BESTWERTUNG DER EIGENEN HAND, DAS HERZSTÜCK DIESES BRETTS. Sie steht dauerhaft ÜBER den Karten, groß genug, um sie
 * über den Tisch zu rufen: „Dein Blatt:“ und das Ziel in einer kleinen Zeile, darunter die Zahl in Plakatschrift und
 * woher sie kommt. Feuer trägt sie in Signalrot, und weil Rot auf Schwarz ein Signal und kein Lesetext ist, steht die
 * Herkunft daneben in Kreide.
 *
 * ES SIND ZWEI ZEILEN UND KEINE EINE, damit die Höhe hält: Die Herkunft wechselt zwischen „Punkte (Pik)“ und „Punkte
 * (Drilling)“, und eine einzige Zeile, in der auch „Dein Blatt:“ und das Ziel stehen, bräche bei der längeren um — mitten
 * in der Runde, über den Karten, nach denen der Daumen greift. Zahl und Herkunft haben deshalb ihre eigene Zeile: Die
 * längste Fassung, „30,5 Punkte (Drilling)“, braucht auf 320 Pixeln gut 200 von rund 250.
 */
.ar-kn__blatt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'wort ziel'
    'wert wert';
  align-items: baseline;
  gap: 0.1rem 0.6rem;
  width: 100%;
  margin: 0;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ar-kante);
}

.ar-kn__blatt > .ar-kn__blatt-wort {
  grid-area: wort;
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
}

.ar-kn__blatt > .ar-kn__blatt-ziel {
  grid-area: ziel;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-kn__blatt > .ar-kn__blatt-wert {
  grid-area: wert;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
}

.ar-kn__blatt-zahl {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: clamp(1.8rem, calc(var(--ar-kn-karte) * 0.7), 2.8rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  hyphens: none;
}

.ar-kn__blatt-zeile {
  color: var(--ar-kreide);
  font-size: 0.88rem;
}

.ar-kn__blatt[data-ar-kn-art='feuer'] .ar-kn__blatt-zahl {
  color: var(--ar-rot);
}

.ar-kn__blatt[data-ar-kn-art='drilling'] .ar-kn__blatt-zahl {
  color: var(--ar-funke);
}

.ar-kn__griffe {
  display: grid;
  gap: 0.4rem;
}

/*
 * DER RUF. Er steht immer da und sagt still, ab wann er geht („Knack (31)“); liegt die Hand, wird aus der Kontur eine
 * Signalkante und aus dem Wort ein Ruf. Ein Knopf, der erst erscheint, wenn er geht, verschöbe die drei darüber genau
 * in dem Augenblick, in dem der Daumen schon unterwegs ist.
 */
.ar-kn__knack {
  min-height: 3rem;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Die Breite bleibt die des gewöhnlichen Knopfs (`.ar-knopf` trägt `var(--ar-tusche)`): Eine Signalkante, die
   SCHMALER ist als die Kreidekante daneben, tritt zurück, statt vorzutreten. Sie trägt über die Farbe. */
.ar-kn__knack--bereit {
  border-color: var(--ar-rot);
  color: var(--ar-kreide);
  font-weight: 700;
}

.ar-kn__knack-zeile {
  min-height: 1.1rem;
  margin: 0;
  color: var(--ar-funke);
  font-size: 0.78rem;
  text-align: center;
}

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

/*
 * „Alle drei“ und „Schieben (Passen)“ teilen sich eine Zeile, „Zumachen (Letzte Runde für alle)“ hat eine eigene: Drei
 * Knöpfe nebeneinander hätten auf 320 Pixeln je 87 gehabt, und die Klammer, die den Griff erklärt, brach dort auf drei
 * Zeilen um. Ein Wort, das trotzdem nicht passt, bricht, statt über die Kante zu laufen.
 */
.ar-kn__neben-knopf {
  min-height: 3rem;
  padding-inline: 0.25rem;
  font-size: 0.85rem;
  hyphens: auto;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Zumachen ist der lauteste Griff dieses Spiels und kostet doppelt: Signalkante, als Kante und nicht als Fläche. */
.ar-kn__zu {
  grid-column: 1 / -1;
  border-color: var(--ar-rot);
}

.ar-knopf.ar-kn__knack[aria-disabled='true'],
.ar-knopf.ar-kn__neben-knopf[aria-disabled='true'] {
  border-color: var(--ar-kante-griff);
  outline-color: var(--ar-kante-griff);
  background: var(--ar-noir);
  color: var(--ar-kreide-2);
  cursor: default;
}

/* ------------------------------------------------------------ Das Bild der Abrechnung */

/*
 * ALLE HÄNDE OFFEN, ÜBER DER ABRECHNUNG DES RAHMENS. Es steht im Tableau und nicht auf dem Brett, also außerhalb
 * des Kastens .ar-kn: Das Maß der Karte gibt es dort nicht und steht hier noch einmal. Gezeichnet werden die Karten von
 * derselben Funktion wie unten am Tisch — zwei Zeichnungen derselben Karte wären zwei Wahrheiten.
 */
.ar-kn__bild {
  --ar-kn-karte: 2.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
}

.ar-kn__bildhand {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.35rem 0.5rem 0.45rem;
  border: 2px solid var(--ar-kante);
  border-left: var(--ar-farbkante) solid var(--ar-kn-farbe);
  background: var(--ar-noir-2);
}

.ar-kn__bildkarten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.35rem;
  margin: 0;
}

.ar-kn__bildblatt {
  margin: 0;
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  hyphens: none;
  overflow-wrap: anywhere;
}

.ar-kn__bildblatt[data-ar-kn-art='feuer'] {
  color: var(--ar-rot);
}

.ar-kn__bildblatt[data-ar-kn-art='drilling'] {
  color: var(--ar-funke);
}

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

/*
 * AUF DEM TELEFON STEHT DIE EIGENE HAND DIREKT UNTER DER MITTE, und zwar in einer Spalte in dieser Folge: Mitte, Hand,
 * Griffe, die eigenen Streichhölzer, der Tisch, die Legende. Vorher lagen zwischen den drei Karten der Mitte und den
 * dreien der Hand der ganze Tisch und die Streichholzplatte — zu zweit 450 Pixel, zu viert gut 650 —, und wer tauschen
 * wollte, rollte zwischen den beiden Hälften eines einzigen Griffs hin und her.
 *
 * GEORDNET WIRD MIT `order`, UND DAS PULT LÖST SICH DAFÜR AUF (`display: contents`): Seine Teile werden Kinder des
 * Rasters und lassen sich zwischen Mitte und Tisch stellen. Das Dokument behält seine Folge und damit den Schreibtisch,
 * auf dem das Pult eine eigene Spalte ist. Die Tab-Folge stimmt trotzdem mit dem Bild überein: Knöpfe tragen nur Mitte,
 * Hand und Griffe, und die stehen in beiden Folgen in dieser Reihe.
 */
@container ar-kn-mass (max-width: 38.99rem) {
  .ar-kn__pult {
    display: contents;
  }

  .ar-kn > [data-ar-kn-teil='mitte'] { order: 1; }
  .ar-kn__hand { order: 2; }
  .ar-kn__griffe { order: 3; }
  .ar-kn__pultholz { order: 4; }
  .ar-kn > .ar-kn__buehne { order: 5; }
  .ar-kn__legende { order: 6; }

  /* Die Fugen um Mitte und Hand stehen eine Spur enger: Zu zweit lag auf 375 × 812 die erste Griffreihe nur zu zwei
     Dritteln im ersten Bild, und es fehlten sechzehn Pixel. Die Reserven für Sätze und Vorschau bleiben, wie sie sind. */
  .ar-kn {
    gap: 0.45rem;
  }

  .ar-kn__mitte {
    gap: 0.3rem;
    padding-block: 0.35rem;
  }

  .ar-kn__hand {
    padding-block: 0.35rem 0.45rem;
  }
}

/*
 * AUF DEM SCHREIBTISCH STEHT DER TISCH ÜBER DIE GANZE BREITE und quer, mit dem ganzen Tisch im Bild; darunter in einer
 * Zeile die Mitte, die eigene Hand und die Griffe, und darunter die Legende. Das Pult löst sich dafür auf (`display:
 * contents`), wie auf dem Telefon, und die Tab-Folge bleibt die des Dokuments: Mitte, Hand, Griffe.
 *
 * HIER STANDEN MITTE UND TISCH LINKS UND DAS PULT RECHTS, und der Tisch war eine Spalte von 550 Pixeln: Karten von 35
 * Pixeln, über die sich die Schilder legten. Neben dem Brett von Schocken und Bluffwürfeln, die ihren Tisch über die
 * ganze Breite zeigen, stand dieser wie eine Briefmarke.
 *
 * DIE STREICHHOLZPLATTE STEHT HIER NICHT. Die eigenen Hölzer liegen in voller Länge vor dem eigenen Fächer auf dem Tisch
 * und brennen dort ab, und das Schild daneben trägt sie noch einmal klein samt „SCHWIMMT“ — eine Platte am Pult wäre
 * dieselbe Auskunft ein drittes Mal und kostete eine Zeile, die der Tisch braucht. Auf dem Telefon bleibt sie, denn dort
 * steht der Tisch unter dem Falz.
 */
@container ar-kn-mass (min-width: 39rem) {
  .ar-kn__pult {
    display: contents;
  }

  .ar-kn__hand {
    grid-area: hand;
  }

  .ar-kn__griffe {
    grid-area: griffe;
  }

  .ar-kn__pultholz {
    display: none;
  }

  .ar-kn__legende {
    grid-area: legende;
  }

  .ar-kn__legende-liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ar-kn {
    /*
     * Hier deckelt die Fensterhöhe das Wachstum der Karten, und nur hier tut sie es sichtbar: Was das Fenster nach
     * Spielleiste, Anzeigeleiste und Rändern (--ar-reserve), dem klebenden Kopf, dem Tisch (die Breite des Bretts durch
     * sein Seitenverhältnis) und den festen Zeilen dieses Bretts übrig lässt, nimmt die Mitte mit ihren Karten. Die
     * Hand daneben ist niedriger, obwohl ihre Karten größer stehen: Über ihr steht nur der Handwert.
     *
     * DIE FESTEN ZEILEN SIND SIEBZEHN REM: der Rand des Bretts, die beiden Fugen, Kopf, Zugzeile, Vorschau und Satz der
     * Mitte samt ihrem Polster, und die Legende als eine Zeile aus drei Kacheln. Wer hier etwas ergänzt, zählt es hier
     * mit — sonst wächst das Brett aus einem kurzen Schreibtischfenster heraus, der Rahmen zoomt es klein (js/spielfeld.js,
     * `einpassen()`), und mit ihm jeden Knopf unter seine 44 Pixel.
     */
    --ar-kn-karte: clamp(2.75rem, calc((100svh - var(--ar-reserve) - var(--ar-hauskopf) - 100cqw / 2.5 - 17rem) / 1.5), 4.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(14rem, 0.9fr);
    grid-template-areas:
      'tisch tisch tisch'
      'mitte hand griffe'
      'legende legende legende';
    align-items: start;
    column-gap: 0.8rem;
  }

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

  .ar-kn > .ar-kn__buehne {
    grid-area: tisch;
  }

  .ar-kn__buehne > .ar-kulisse {
    aspect-ratio: 2.5 / 1;
  }

  .ar-kn__farbe {
    max-width: 22%;
    font-size: 0.85rem;
  }

  .ar-kn__farbe[data-ar-kn-seite='unten'] {
    max-width: 40%;
  }

  /* Nur die Mitte. Der Fächer der Hand lebt von seiner Überlappung; ein Abstand darin wäre wieder eine Reihe. */
  .ar-kn__mittekarten {
    gap: 0.5rem;
  }

  /*
   * Wer zuschaut oder vom Tisch ist, hat kein Pult: Die Zeile darunter trägt dann nur die Mitte, über die volle Breite.
   *
   * Eingedampft werden die BEREICHE und nicht nur die Spalten: Bliebe `hand` in den Bereichen stehen, während kein
   * Kind ihn trägt, stünde dort eine leere Spalte von einem Drittel der Breite.
   */
  .ar-kn:has(> .ar-kn__pult:empty) {
    grid-template-areas:
      'tisch tisch tisch'
      'mitte mitte mitte';
  }
}

/* Im flachen Querformat fällt die Karte auf ihre Tippfläche zurück: Dort zählt jede Zeile doppelt. */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-kn {
    --ar-kn-karte: 2.75rem;
  }
}

/*
 * DAS ABZEICHEN STEHT ÜBER DER MITTE. Der Rahmen legt es auf 45 Prozent der Bretthöhe, und dort liegen auf dem Telefon
 * Hände — genau das, was man im Augenblick des Feuers liest. Auf dem Schreibtisch liegt es auf 30 Prozent über den
 * Karten der Mitte, und die Hände darunter bleiben frei.
 *
 * IN EINER SPALTE HÄNGT ES AM OBEREN RAND UND NICHT AN EINEM ANTEIL. Dort steht die eigene Hand direkt unter der
 * Mitte, und ein Anteil der Bretthöhe wandert mit der Zahl der Plaketten: Auf 30 Prozent lag es zu zweit auf der eigenen
 * Hand, zu viert auf dem Tisch. Auf 6rem deckt es Kopfzeile und Karten der Mitte und lässt ihren Satz frei, der die
 * Wertung nennt.
 */
.ar-spielfeld[data-ar-spiel='knack'] .ar-abzeichen {
  top: 30%;
  width: min(86%, 19rem);
}

@media not all and (min-width: 64rem) and (min-height: 30.0625rem) {
  .ar-spielfeld[data-ar-spiel='knack'] .ar-abzeichen {
    top: 6rem;
  }
}

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

/*
 * DREI FÜLLUNGEN UND EIN STRICH, die der Rahmen nicht führt. Der Leinenton ist das Papier dieses Decks, der Schatten
 * die Flanke eines Streichholzes und der verkohlte Rest, und der Strich schneidet eine Linie aus einer Figur —
 * dieselbe Aufteilung wie bei den `ar-g-kh-*` des Nachbartischs.
 */
.ar-g-kn-leinen { fill: var(--ar-kn-leinen); }
.ar-g-kn-schatten { fill: var(--ar-kreide-2); }
.ar-g-kn-strich { fill: none; stroke: var(--ar-kn-leinen); stroke-width: 1.6; stroke-linecap: square; }