/*
 * Arena: Tokens, Rahmen, Eingang, Warteraum, Walze, der Rahmen des Spielfelds (Anzeigeleiste, Brettrand, Knallbild,
 * Abzeichen, Tafel). Was nur ein Spiel zeichnet, steht in spiele/<schluessel>/brett.css und geht mit seinem Ordner.
 *
 * Alle Farben dieses Moduls stehen hier und nirgends sonst; das SVG bekommt sie über die Klassen ar-g-*. Es gibt keine
 * zweite Palette: Tiefschwarz, Kreide, die vier Spielfarben Rot, Blau, Gelb und Grün und der Senf der Funken. Keine
 * Rundung, kein Weichzeichner, kein Schein, keine Transition. Was sich bewegt, springt.
 */

/*
 * DIE KOPFLEISTE IM SPIELFELD — EINE DOKUMENTIERTE AUSNAHME (CLAUDE.md, Abschnitt 9).
 *
 * „Die Kopfleiste steht identisch in jeder Ansicht" bleibt der Vertrag für shared/haus/haus.php und haus.css: Diese
 * Regel fasst keine der beiden Dateien an, spiegelt nichts um und ändert kein anderes Zimmer. Was sie tut, ist eine
 * rein optische Verdichtung DERSELBEN Leiste, ausschließlich hier in arena.css und ausschließlich, solange das
 * Spielfeld zu sehen ist.
 *
 * DER GRUND IST DIE FLÄCHE, DIE DORT FEHLT. Auf einem Tablet quer (rund 1024–1366 Pixel breit, 640–800 hoch) trägt
 * dieselbe Leiste mit Reihenzeile, fünf Bereichen, Sprachschalter und Codeknopf zwei Zeilen statt einer — und die
 * Höhe fehlt ausgerechnet dort, wo ein Brett sie am nötigsten hat: in der Spielfläche selbst. In jeder anderen
 * Arena-Ansicht (Eingang, Warteraum, Spielwahl, Einweisung) steht sie unverändert, denn dort kostet sie nichts, was
 * nicht ohnehin gescrollt würde.
 *
 * ERKANNT WIRD ÜBER :has() — dieselbe Technik wie `.shell:has(...)` in Fall 01 und wie die Brett-Erkennung weiter
 * unten in dieser Datei (`body:has(.ar-spielfeld:not([hidden]))`). Ein Browser ohne :has() sieht die volle Leiste;
 * das ist der heutige Stand, kein kaputter.
 *
 * VERDICHTET WIRD NUR ÜBER TOKENS UND POLSTER, NIE ÜBER DAS MARKUP. Kein Navigationspunkt verlässt das Dokument oder
 * verliert seinen Fokus — nur seine Fläche schrumpft. Jedes Bedienelement der Leiste trägt sein eigenes
 * `min-height`/`min-width: var(--haus-griff)` (44px) aus haus.css, und das rührt diese Regel nicht an: Die Zahlen
 * unten unterschreiten die 44 px nirgends, sie nehmen ihr nur das Polster darüber.
 */
@supports selector(:has(*)) {
  body:has(.ar-spielfeld[data-ar-ansicht='feld']:not([hidden])) .haus-kopf {
    --haus-kopf-hoehe: 44px;
    --haus-gap-1: 0.2rem;
    --haus-nav-gap: clamp(0.7rem, 1.4vw, 1.4rem);
  }

  body:has(.ar-spielfeld[data-ar-ansicht='feld']:not([hidden])) .haus-kopf__innen {
    padding-block: 0.2rem;
  }

  /* Zierrat weicht zuerst: Die Reihenzeile sagt nur „Arena", wo das Signet daneben es ohnehin schon zeigt. */
  body:has(.ar-spielfeld[data-ar-ansicht='feld']:not([hidden])) .haus-kopf__reihe {
    display: none;
  }

  body:has(.ar-spielfeld[data-ar-ansicht='feld']:not([hidden])) .haus-marke__zeichen {
    height: 22px;
  }

  body:has(.ar-spielfeld[data-ar-ansicht='feld']:not([hidden])) .haus-marke__wort {
    font-size: 1.05rem;
  }

  body:has(.ar-spielfeld[data-ar-ansicht='feld']:not([hidden])) .haus-kopf__code,
  body:has(.ar-spielfeld[data-ar-ansicht='feld']:not([hidden])) .haus-kopf__kasse,
  body:has(.ar-spielfeld[data-ar-ansicht='feld']:not([hidden])) .haus-kopf__sprache {
    padding-inline: 0.5rem;
  }
}

@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../schrift/alfa-slab-one-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../schrift/alfa-slab-one-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ar-noir: #0b0b0d;
  --ar-noir-2: #17171a;
  --ar-noir-3: #242428;
  /* 16,26:1 auf Noir */
  --ar-kreide: #efe9dc;
  /* 8,80:1 auf Noir, 6,92:1 auf Noir-3 */
  --ar-kreide-2: #b3ada0;
  /*
   * Pastell-Noir seit Arena 2.0: samtige Casino-Töne statt Signalleuchten. Jede Farbe trägt zusätzlich eine eigene
   * Form (Dreieck/Kreis/Quadrat/Stern, siehe marke() in js/grafik.js) und einen eigenen Namen — nie Farbe allein.
   */
  --ar-rot: #d46a6a;
  /* 5,68:1 auf Noir */
  --ar-blau: #6b9ac4;
  /* 6,60:1 auf Noir */
  --ar-gelb: #e0b85a;
  /* 10,46:1 auf Noir */
  --ar-gruen: #76b08a;
  /* 7,82:1 auf Noir */
  /*
   * Die Kontrastfarbe für eine Fläche in Rollenfarbe: Bei allen vier hält Tiefschwarz mehr als Kreide (die Farben
   * sind heller als Noir, aber dunkler als die Mitte zu Kreide). Ein zweites Thema (api/thema.php) rechnet seine
   * eigenen Werte über ar_thema_kontrast() und schreibt sie als eigenen <style>-Block im Kopf.
   */
  --ar-rot-kontrast: var(--ar-noir);
  --ar-blau-kontrast: var(--ar-noir);
  --ar-gelb-kontrast: var(--ar-noir);
  --ar-gruen-kontrast: var(--ar-noir);
  --ar-funke: #d9a521;
  /*
   * Die beiden anderen Medaillen des Turnierpodiums; Gold ist der Funke selbst (7,97:1 auf Noir-2). Silber hält
   * 11,09:1, Bronze 5,19:1 — beide weit über den 3:1, die WCAG 1.4.11 für eine Kante verlangt, die etwas aussagt.
   * Sie tragen trotzdem nie allein: Neben jeder steht ihr Name und ihr Platz.
   */
  --ar-silber: #c8ccd2;
  --ar-bronze: #c07a3c;
  /* Zierkante 1,59:1 und Griffkante 4,42:1: Was ein Bedienelement begrenzt, braucht 3:1 (WCAG 1.4.11). */
  --ar-kante: #34343a;
  --ar-kante-griff: #77777d;
  --ar-schleier: rgb(11 11 13 / 0.82);
  /* Der Countdown legt sich über das Brett, das dabei zu sehen bleiben soll. */
  --ar-schleier-leicht: rgb(11 11 13 / 0.55);

  --ar-schrift: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /*
   * DIE PLAKATSCHRIFT TRÄGT DREIERLEI UND SONST NICHTS: Titel und Wortmarken (auch den Namen eines Spiels), die
   * Abzeichen — und die AUFDRUCKE, die eine Zahl zeigen, ohne zu zählen: der Wert einer Spielkarte, die Nummer eines
   * Pferds, eine Zahl auf dem Tableau, der eine große Countdown-Glyphe vor dem Anpfiff.
   *
   * Sie stand einmal an über vierzig Stellen — auf jedem Knopf, jedem Spielernamen, jeder Legende, im ganzen
   * Regelblatt —, und ein Brett, auf dem alles gleich laut ist, hat keine Betonung mehr. Was ein Mensch LIEST, steht
   * seitdem in --ar-schrift und in normaler Groß- und Kleinschreibung; ein Knopf heißt „Nochmal würfeln" und nicht
   * „NOCHMAL WÜRFELN". Versalien bleiben nur, wo sie ein Schild sind: das „DU" auf der Plakette, der Raumcode, die
   * Kopfzeilen der Tafel.
   *
   * HIER STANDEN EINMAL „die großen Zahlen (Plakettenzähler, Countdown, das ,2 : 1' der Tafel)", und damit widersprach
   * dieser Absatz dem Absatz zehn Zeilen tiefer, der die Mono für ALLES beansprucht, was tickt. Beides gleichzeitig
   * ging nicht: Ein Plakettenzähler zählt, ein Spielstand wird verglichen — die gehören zur Mono, und zwar samt
   * `font-variant-numeric: tabular-nums`, damit vier nebeneinander stehende Guthaben nicht bei jedem Chip wandern.
   * Was blieb, ist der Countdown: eine einzelne Glyphe, die sich im Sekundentakt ganz austauscht und zwischendurch
   * ein WORT zeigt („Los!"). Dort richtet sich nichts aneinander aus, und eine Ziffernschrift machte aus dem Anpfiff
   * ein Terminal.
   */
  --ar-schrift-plakat: 'Alfa Slab One', Rockwell, Georgia, serif;
  /*
   * Für ALLES, was tickt: Multiplikatoren, Quoten, Live-Zähler, Einsatzfelder. Gleich breite Ziffern verhindern
   * Zeilenwandern (font-variant-numeric: tabular-nums), und eine Zahl, die sich jede Sekunde ändert, braucht keine
   * Betonung durch Plakatschrift — das Ticken selbst zieht den Blick.
   */
/*
   * DIE COMIC-BÜHNE HAT ZWEI EIGENE TOKENS, und beide gehören einem GEGENSTAND und nicht dem UI.
   *
   * `--ar-comic-papier` ist der Ton des Textkastens unter einem Panel — das Papier, auf dem eine Bildunterschrift
   * gedruckt steht. Es ist eine Spur wärmer als `--ar-kreide` (#efe9dc), und genau dafür ist es da: Kreide ist die
   * Schrift dieses Hauses auf Blech, das hier ist bedrucktes Papier in einem Heft. Auf `--ar-noir-3` hält es 12,1:1.
   *
   * `--ar-schrift-comic` ist die Serifenschrift derselben Bildunterschrift. Die Systemschrift trägt alles Lesbare
   * der Arena (Abschnitt 8, Ziffer 14) und die Plakatschrift Titel und Zahlen; eine Erzählung in drei Sätzen ist
   * weder das eine noch das andere. Sie steht ausschließlich in `.ar-comic__text` — wer sie woanders einsetzt,
   * bekommt eine dritte Schrift im Haus statt einer Stimme in einem Kasten.
   */
  --ar-comic-papier: #ede2c8;
  /*
   * DIE PLATTE, UND ZWAR NUR UNTER EINWEISUNG UND VORWAHL.
   *
   * Tiefschwarz ist der Grund jedes Bretts, und das bleibt so: Ein Brett ist eine Fläche, auf der Marken liegen,
   * und alles, was der Grund dort mitbringt, nimmt einer Marke Kontrast. Die EINWEISUNG ist kein Brett, sondern
   * die halbe Minute davor — der Tisch, an dem man sitzt, bevor die Karten fallen. Sie stand auf demselben
   * #0b0b0d wie das Brett und sah damit aus wie ein Ladebildschirm.
   *
   * SIE WAR MAHAGONI (#1e1411 / #2e1f19) UND IST JETZT SCHIEFER. Das schwere Braun gehört einer Druckerei von
   * 1879, und dort steht es weiter: Das Archiv behält es unverändert. In einer Arena, in der eine Runde fünf
   * Minuten dauert, war es ein fremdes Möbel — warm, schwer und nach Bibliothek, während daneben achtzehn
   * schnelle Tische liegen. Anthrazit ist derselbe Gedanke ohne das Gewicht: eine Platte, die trägt, ohne etwas
   * zu behaupten.
   *
   * `--ar-platte` ist die Platte (Kreide hält 16,25:1, das Comic-Papier 15,27:1, Kreide-2 8,80:1),
   * `--ar-platte-2` das Blatt darauf — die Bildunterschrift eines Panels und der Griff des Spickzettels
   * (Kreide 14,14:1, Papier 13,29:1). Beide sind Flächen und nie Schrift; alle vier Werte liegen über den
   * Mahagoni-Werten, die sie ersetzen.
   *
   * DER RAHMEN DER PANELS IST `--ar-funke` UND KEIN ZWEITES GRAU. Genau dieses Messing trägt die Comic-Bühne
   * hinter [?] (`.ar-comic__rahmen`), und die steht keine Handbreit daneben: Zwei Goldtöne nebeneinander sind
   * kein Messing mehr, sondern ein Fehler. Es bleibt, wo es ist — auf Schiefer strahlen die Panels stärker als
   * auf Braun, und genau dafür steht es da.
   */
  --ar-platte: #14161b;
  --ar-platte-2: #1d2027;
  /*
   * DER ZIGARRENRAUCH — eine VIGNETTE und keine Fläche.
   *
   * Verläufe sind in diesem Haus als Fläche verboten und für Vignette, Halbtonraster und Korn ausdrücklich
   * erlaubt (CLAUDE.md, Abschnitt 7). Dieser hier sitzt oben links, wo das Licht der Lampe steht, und läuft
   * nach unten aus; er trägt keine Auskunft und liegt unter allem, was Text ist.
   *
   * ER HEISST NICHT `--ar-rauch`: So heißt schon ein Zeichen im Sprite (`js/grafik.js`), und zwei Dinge unter
   * einem Namen sind eines zu viel.
   *
   * ER IST MIT DER PLATTE KÜHL GEWORDEN. Er stand auf einem warmen Braun (rgb(96 62 42)), und das war auf
   * Mahagoni ein Lichtschein; auf Schiefer wäre es ein Fleck. Jetzt ist es dasselbe Licht in derselben Ecke,
   * nur in der Temperatur der Platte darunter — und schwächer: 0,36 statt 0,50, denn auf einem ruhigeren Grund
   * fällt mehr auf.
   */
  --ar-vignette: radial-gradient(120% 90% at 18% 0%, rgb(118 130 148 / 0.36) 0%, rgb(58 66 80 / 0.22) 44%, rgb(0 0 0 / 0) 78%);
  --ar-schrift-comic: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --ar-schrift-mono: ui-monospace, 'SF Mono', Consolas, monospace;
  --ar-tusche: 3px;
  /*
   * DIE EINE BREITE FÜR EINE KANTE, DIE EINE FARBE TRÄGT. Sie stand an acht Stellen in sieben Spielen als getippte
   * 6px und an fünf weiteren als 4px oder 5px — dasselbe Bauteil unter acht Namen, und auf einem Brett neben dem
   * anderen fiel es sofort auf: Der Becher des Bluffwürfelns trug einen Balken, die Zeile des Nagelbalkens einen
   * Strich. Drei Pixel sind schmal genug, dass sie eine Kante bleiben, und breit genug, dass die Farbe trägt.
   *
   * Sie gilt NUR für eine Kante, die etwas aussagt (wessen Zeile das ist, welche Farbe hier liegt). Was bloß
   * begrenzt, nimmt weiterhin ein oder zwei Pixel; was ein Brett einrahmt, nimmt `--ar-brettrand`.
   */
  --ar-farbkante: 3px;
  --ar-luft: clamp(1rem, 3vw, 2rem);
  --ar-mass: 40rem;
  /*
   * Deckungsgleich mit dem Kopf des Hauses: seine Bühnenbreite ohne seine Seitenluft. Auf dem Schreibtisch nimmt der
   * Rahmen dazu dieselbe Luft (unten), und Spielleiste, Warteraum und Spielfeld beginnen und enden genau unter Marke und
   * Codeknopf. MIT 75REM STAND DIE ARENA AUF 1440 PIXELN 83 PIXEL SCHMALER ALS DER KOPF DARÜBER, auf 1920 um 500: ein
   * Kasten unter einer Leiste, die über die ganze Seite reicht.
   */
  --ar-breite: calc(var(--haus-shell, 1800px) - 2 * var(--haus-luft, 2rem));
  --ar-kopf-hoehe: 3.25rem;
  --ar-praesenz-hoehe: 1.75rem;
  --ar-regeln-breite: 24rem;
  /* Was über der Spielleiste klebt. Der Kopf des Hauses klebt erst ab 46rem, darunter rollt er aus dem Bild. */
  --ar-hauskopf: 0px;

  /* Ein Einzelbild der Kaskade und eine ganze Welle. Die Welle kommt für den Ablauf aus der Sicht des Servers. */
  --ar-bild: 90ms;
  --ar-welle: 270ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Die Vignette liegt auf dem Wurzelelement und nicht auf dem Körper: Sonst deckte dessen Fläche den Regen dahinter zu. */
html {
  color-scheme: dark;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgb(0 0 0 / 0.6)) fixed,
    var(--ar-noir);
  scroll-padding-top: var(--ar-hauskopf);
}

/*
 * Ab 46rem klebt der Kopf des Hauses: einzeilig die Leiste und ihre Unterkante von einem Pixel. Der Sprung zur Spielleiste
 * landet mit dem Polster der Zimmer bei jeder Höhe ganz oben. Diese Regel ist nur der Stand ohne Skript: Wie hoch der Kopf
 * wirklich steht, misst js/haupt.js und setzt es am Wurzelelement. Er bricht nämlich nicht nur bis 820 Pixel zweizeilig
 * um, sondern je nach Scrollleiste bis gut 1040, und mit der einzeiligen Höhe endete dort jedes höhenbegrenzte Brett unter
 * dem Falz, und der Knopf „Schließen“ des Regelblatts lag halb unter dem Kopf.
 */
@media (min-width: 46rem) {
  :root {
    --ar-hauskopf: calc(var(--haus-kopf-hoehe, 0px) + 1px);
  }
}

/* Das Telefon behält seine eigene Luft: Die Bretter rechnen dort mit jedem Pixel, und 320 Pixel sind 320 Pixel. */
@media (min-width: 64rem) {
  :root {
    --ar-luft: var(--haus-luft, 2rem);
  }

  html {
    scroll-padding-top: 7.5rem;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: none;
  color: var(--ar-kreide);
  font: 1rem/1.5 var(--ar-schrift);
  -webkit-tap-highlight-color: transparent;
}

/*
 * AN DER HALTESTELLE WACKELT NICHTS. Ein Pixel, der seitlich aus einem Brett ragt, laesst auf dem Telefon die ganze
 * Seite unter dem Daumen schwimmen, und ein Doppeltipp auf zwei Felder zoomt in Safari das Brett auf. `clip` und nicht
 * `hidden`: Ein Kasten mit `hidden` wird selbst zum Scrollbereich und nimmt jeder klebenden Leiste darunter den Halt;
 * `clip` schneidet nur ab. `manipulation` gilt fuer alles darunter und laesst Wischen und das Zoomen mit zwei Fingern
 * stehen — nur der Doppeltipp zoomt nicht mehr. Ein Brett mit engerer Regel (`pinch-zoom`, `none`) behaelt sie.
 *
 * DAS IST EIN NETZ UND KEIN VERSTECK. `clip` nimmt der Seite auch ihr `scrollWidth`: Ein Lauf, der nur das liest,
 * saehe ein zu breites Brett nicht mehr. `dev/dev.ps1 bretter` misst deshalb jedes Element einzeln gegen die
 * Fensterbreite (`ueberlauf()` in `dev/arena-bretter.mjs`), und dort bleibt ein Brett, das hinausragt, ein Befund.
 */
html {
  overflow-x: clip;
  touch-action: manipulation;
}

/*
 * Der Regen am Eingang und im Warteraum: ein stummer Film hinter der ganzen Seite, stark abgedunkelt. Er liegt auf
 * z-index -1, damit er über dem Grund der Wurzel und unter allem Inhalt steht, und nimmt keine Tipps an. Sobald eine
 * Runde läuft, ist er weg — auf einem Brett mit Zugfrist hat nichts zu flackern.
 */
.ar-regen {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  pointer-events: none;
}

[hidden] {
  display: none !important;
}

button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--ar-funke);
  outline-offset: 3px;
}

.ar-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ar-unsichtbar,
.ar-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ Rahmen */

.ar-rahmen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-inline: var(--ar-luft);
}

/*
 * LUFT UNTER DER HAUSLEISTE — UND ZWAR NUR AM EINGANG.
 *
 * Die Spielleiste mit [?] und Tonschalter klebte auf Null an der Unterkante der Hausleiste; auf dem Startbildschirm,
 * wo man seinen Namen eintippt, sah das gequetscht aus. Das Foyer hält dort `--haus-kopfluft` frei (2,5 bis 4,5 rem),
 * hier sind es 1,5 bis 2,5.
 *
 * ÜBER EINEM BRETT DARF ES DAS NICHT GEBEN, und das ist gemessen und nicht befürchtet: Als das Polster am ganzen
 * Rahmen hing, fiel die Regression siebenmal um — das Brett rutschte im Duell auf 800 × 600, 1366 × 768 und
 * 1440 × 900 unter den Falz, und die Zusage „die Spielleiste steht direkt unter dem Kopf" stimmte nicht mehr. Über
 * einem Brett mit Zugfrist ist jeder Pixel einer, der dem Brett fehlt.
 *
 * Gewählt wird über die offene Ansicht: `:has()` liest, welches Fach gerade nicht `hidden` ist. Ein Browser ohne
 * `:has()` bekommt kein Polster — also den Stand von vorher, nicht einen kaputten.
 */
.ar-rahmen:has([data-ar-ansicht='eingang']:not([hidden])) {
  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

/*
 * DIE SPIELLEISTE BLEIBT IM BILD, SOLANGE EIN BRETT STEHT.
 *
 * Auf dem Tablet reichte die Seite über den Schirm hinaus, und wer das untere Ende des Bretts sehen wollte, rollte sich
 * die Spielleiste mit Raumcode, [?] und Tonschalter mit hinaus — samt der Präsenz-Leiste und dem Stand. Der Rahmen ist
 * deshalb genau so hoch wie der Platz unter dem klebenden Kopf des Hauses, und gerollt wird darin die BÜHNE.
 *
 * DIE BÜHNE ROLLT UND WIRD NICHT BESCHNITTEN, und das ist gemessen: Die Raster-Bretter — Käsekästchen, Kettenreaktion,
 * Fluchtweg — rechnen ihre Zellgröße gegen 100dvh minus --ar-reserve und passen auf jeden Schirm. Knack, Schocken und
 * Kartenhai tun das nicht und können es nicht: Dort stehen Mitte, drei Plätze, die eigene Hand und die Knopfbank
 * untereinander, und auf 768 × 1024 sind das gut dreizehnhundert Pixel. Ein `overflow: hidden` schnitte dort die
 * Knopfbank ab — also die Stelle, an der man zieht.
 *
 * Am Eingang, im Warteraum, in der Walze und in der Einweisung bleibt es beim Rollen der ganzen Seite: Dort wartet
 * niemand auf eine Frist, und eine Leiste, die klebt, nimmt nur Platz. Ein Browser ohne `:has()` bekommt den Stand von
 * vorher, nicht einen kaputten.
 */
.ar-rahmen:has([data-ar-ansicht='feld']:not([hidden])) {
  height: calc(100dvh - var(--ar-hauskopf));
  min-height: 0;
  overflow: hidden;
}

.ar-rahmen:has([data-ar-ansicht='feld']:not([hidden])) > .ar-buehne {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Der Hutgang am Schluss steht UNTER der Bühne. Hinter dem Riegel wäre sein Verweis abgeschnitten — und dann läge ein
   Weg auf der Seite, den niemand mehr erreicht. Während er offen ist, rollt die Seite wieder. */
.ar-rahmen:has([data-ar-slot='kasse']:not([hidden])) {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

.ar-kopf,
.ar-buehne {
  width: 100%;
  max-width: var(--ar-breite);
  margin-inline: auto;
}

/* Die Spielleiste. Die Marke „Arena“ steht in der Reihenzeile des Hauskopfs darüber. */
.ar-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-height: var(--ar-kopf-hoehe);
  border-bottom: var(--ar-tusche) solid var(--ar-kreide);
}

/*
 * Links der Raumcode, daneben der Name des Spiels, das gerade auf dem Brett liegt.
 *
 * `min-width: 0` an beiden Stellen ist der eigentliche Riegel: Ohne sie nimmt ein Flex-Kind seine
 * min-content-Breite als Untergrenze, die Auslassungspunkte greifen nie, und der Name schiebt Ton- und
 * Abbruchknopf aus der Leiste. Mit ihr endet der Name, wo der Platz endet — die Leiste bleibt einzeilig, und das
 * Brett behaelt die Hoehe, mit der `--ar-reserve` rechnet.
 */
.ar-kopf__raum {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0;
  color: var(--ar-kreide-2);
  letter-spacing: 0.04em;
}

.ar-kopf__code {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/*
 * Der Name traegt die Plakatschrift und die Kreide der Marken: Er ist die Aufschrift des Tisches, nicht eine
 * Nebenangabe zum Code. Der Mittelpunkt steht im Stilblatt und nicht im Wortlaut — vorgelesen wird stattdessen
 * „Gespielt wird:" aus den Woertern des Rahmens.
 */
.ar-kopf__spiel {
  min-width: 0;
  overflow: hidden;
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-kopf__spiel::before {
  content: '·';
  margin-inline-end: 0.45rem;
  color: var(--ar-kreide-2);
}

.ar-kopf__griffe {
  display: flex;
  gap: 0.5rem;
  padding-block: 0.25rem;
}

/* Die Präsenz-Leiste unter der Spielleiste: wer im Raum ist und nicht auf den Plaketten steht. Keine Knöpfe. Auf dem
   Brett bricht sie nicht um, damit das Brett seine Höhe behält; die Namen hinter den Marken lesen dort Screenreader. */
.ar-praesenz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 1rem;
  width: 100%;
  max-width: var(--ar-breite);
  min-height: var(--ar-praesenz-hoehe);
  margin: 0 auto;
  padding-block: 0.2rem;
  border-bottom: 1px solid var(--ar-kante);
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

.ar-praesenz[data-ar-knapp] {
  flex-wrap: nowrap;
  height: var(--ar-praesenz-hoehe);
  overflow: hidden;
  white-space: nowrap;
}

/* Auf dem Brett geben allein die Zuschauer nach: Reicht die Zeile nicht, endet ihre Namensliste mit Auslassungspunkten,
   und Host, Bank und wer gegangen ist, behalten ihre Breite. Sonst schrumpften alle Teile, und ihre Marken brächen in eine
   zweite Zeile, die die Leiste abschneidet. */
.ar-praesenz[data-ar-knapp] > .ar-praesenz__teil {
  flex-shrink: 0;
}

.ar-praesenz[data-ar-knapp] > .ar-praesenz__teil--zuschauer {
  display: block;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ar-praesenz__teil {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.3rem;
  min-width: 0;
}

.ar-praesenz__marke {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}

.ar-praesenz__name {
  margin-right: 0.35rem;
  color: var(--ar-kreide);
}

/* Wer gegangen ist, steht mit dem Wort „weg“, grauen Marken und durchgestrichenem Namen da. */
.ar-praesenz__teil[data-ar-weg] {
  --ar-rot: var(--ar-kante-griff);
  --ar-blau: var(--ar-kante-griff);
  --ar-gelb: var(--ar-kante-griff);
  --ar-gruen: var(--ar-kante-griff);
}

.ar-praesenz__teil[data-ar-weg] .ar-praesenz__name {
  color: var(--ar-kreide-2);
  text-decoration: line-through;
}

/* Das Auge vor der Zuschauerzeile, in der Schriftfarbe seiner Zeile. Auf dem Brett steht die Zeile als Block mit
   Auslassungspunkten (weiter oben), und darin sitzt das Auge auf der Grundlinie statt in einer Flexzeile. */
.ar-auge {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-inline-end: 0.3em;
  vertical-align: -0.2em;
}

/* Ein Maßcontainer: Das Brett rechnet mit der Breite der Bühne und nicht mit 100vw, das eine Scrollleiste mitzählt. Er
   trägt einen Namen, weil eine Abfrage ohne Namen an der Anzeigeleiste deren eigene Breite fragte und nicht die Bühne. */
.ar-buehne {
  /* Die Luft unter dem Brett; ein klebendes Dock rechnet sie heraus (`.ar-dock`). */
  --ar-buehne-fuss: 2rem;

  flex: 1;
  padding-block: 1rem var(--ar-buehne-fuss);
  container: ar-buehne / inline-size;
}

.ar-hinweis-noscript {
  max-width: var(--ar-mass);
  margin: 2rem auto;
}

/* ------------------------------------------------------------ Knöpfe und Felder */

.ar-knopf {
  min-width: 44px;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: var(--ar-tusche) solid var(--ar-kreide);
  border-radius: 0;
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  font-weight: 600;
  cursor: pointer;
}

.ar-knopf:hover {
  background: var(--ar-noir-3);
}

.ar-knopf:active {
  transform: translate(2px, 2px);
}

.ar-knopf--stark {
  border-color: var(--ar-noir);
  outline: var(--ar-tusche) solid var(--ar-funke);
  outline-offset: 0;
  background: var(--ar-funke);
  color: var(--ar-noir);
}

.ar-knopf--stark:hover {
  background: var(--ar-kreide);
  outline-color: var(--ar-kreide);
}

.ar-knopf--stark:focus-visible {
  outline-color: var(--ar-kreide);
  outline-offset: 3px;
}

.ar-knopf--leise {
  padding-inline: 0.6rem;
  border-width: 1px;
  border-color: var(--ar-kante-griff);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 400;
}

.ar-feld {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

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

.ar-feld__eingabe {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--ar-kante-griff);
  border-radius: 0;
  background: var(--ar-noir);
}

.ar-feld__eingabe:focus-visible {
  border-color: var(--ar-kreide);
  outline-offset: 0;
}

.ar-feld__eingabe--code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ Wett-Bauteil */

/*
 * Das universelle Wett-Bauteil (js/wetten.js): Kontostand, Schieber mit Messinggriff, Zahlenfeld und drei Pillen. Ein
 * Spiel mit freiem Einsatz baut daraus seine eigene Einsatzleiste und legt seinen eigenen Aktionsknopf daneben — das
 * Bauteil selbst schickt nichts an den Server (siehe js/wetten.js).
 *
 * DER FÜLLSTAND IST EIN ELEMENT UND KEIN VERLAUF. Ein `linear-gradient` mit hartem Stopp läge näher und wäre nach
 * Abschnitt 7 der CLAUDE.md trotzdem ein Verlauf als Fläche. Eine schlichte Fläche mit gerechneter Breite sagt
 * dasselbe und bleibt bei der Regel — in dieser ganzen Datei steht kein einziger Verlauf außer der Vignette.
 */
.ar-wetten {
  display: grid;
  gap: 0.5rem;
}

/* „Guthaben: 120 Chips" über der Leiste. Die Zahl steht in Ziffernschrift, weil sie sich bei jedem Zug ändert. */
.ar-wetten__konto {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ar-wetten__konto-zahl {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  hyphens: none;
}

.ar-wetten__reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  align-items: center;
  gap: 0.6rem;
}

/* Wer nur noch den Mindesteinsatz hat, bekommt keinen Schieber — nur die Zahl. */
.ar-wetten__reihe--fest {
  grid-template-columns: 6rem;
}

.ar-wetten__satz {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
}

.ar-wetten__schiene {
  position: relative;
  display: block;
  min-height: 44px;
}

/* Die Rille: eine Kante, keine Wanne. Sie liegt hinter dem Regler, der selbst durchsichtig ist. */
.ar-wetten__schiene::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: calc(50% - 6px);
  height: 12px;
  border: 1px solid var(--ar-kante-griff);
  background: var(--ar-noir);
}

.ar-wetten__fuellung {
  position: absolute;
  top: calc(50% - 6px);
  left: 0;
  width: calc(var(--ar-anteil, 0) * 100%);
  height: 12px;
  background: var(--ar-funke);
}

.ar-wetten__regler {
  position: relative;
  width: 100%;
  height: 44px;
  margin: 0;
  background: none;
  appearance: none;
}

.ar-wetten__regler:focus-visible {
  outline: 2px solid var(--ar-kreide);
  outline-offset: 2px;
}

.ar-wetten__regler::-webkit-slider-runnable-track {
  height: 44px;
  background: none;
}

.ar-wetten__regler::-moz-range-track {
  height: 44px;
  background: none;
}

/*
 * Der Messinggriff, 44 × 44 Pixel: „Eine Tippfläche wird in beide Richtungen gemessen" (CLAUDE.md, Abschnitt 10), und
 * auf einem Tablet zieht ein Daumen daran. Eckig wie alles im Zimmer; die Prägekante ist ein Ring aus Tusche im
 * Messing, kein Schein — `inset` ohne Weichzeichnung ist keine Ausnahme von den eisernen Verboten.
 */
.ar-wetten__regler::-webkit-slider-thumb {
  width: 44px;
  height: 44px;
  border: 2px solid var(--ar-noir);
  border-radius: 0;
  background: var(--ar-funke);
  box-shadow: inset 0 0 0 2px var(--ar-funke), inset 0 0 0 5px var(--ar-noir);
  cursor: ew-resize;
  appearance: none;
}

.ar-wetten__regler::-moz-range-thumb {
  width: 40px;
  height: 44px;
  border: 2px solid var(--ar-noir);
  border-radius: 0;
  background: var(--ar-funke);
  box-shadow: inset 0 0 0 2px var(--ar-funke), inset 0 0 0 5px var(--ar-noir);
  cursor: ew-resize;
}

.ar-wetten__zahl {
  display: block;
  min-width: 0;
}

.ar-wetten__pillen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.ar-wetten__pille {
  font-family: var(--ar-schrift-mono);
  font-size: 1.05rem;
  font-weight: 700;
}

/* Eine Pille, die nichts bewegt hat, rückt einen Takt zur Seite und trägt die Signalkante; Ton und Satz sagen dasselbe. */
.ar-wetten__pille[data-ar-nein] {
  translate: 3px 0;
  border-color: var(--ar-rot);
}

/* „Alles drin." — ein Wort, keine Farbe allein, und es steht erst da, wenn der Griff wirklich am Anschlag ist. */
.ar-wetten__warnung {
  margin: 0;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--ar-funke);
  color: var(--ar-funke);
  font-family: var(--ar-schrift-mono);
  font-size: 0.8rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ar-wetten__feld {
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem;
  border: 2px solid var(--ar-kante-griff);
  border-radius: 0;
  background: var(--ar-noir);
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-size: 1.1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-wetten__feld:focus-visible {
  border-color: var(--ar-kreide);
  outline-offset: 0;
}

/* Der Browser zeichnet eigene Spinner-Pfeile auf type="number"; Schieber und Pillen daneben übernehmen das schon. */
.ar-wetten__feld::-webkit-inner-spin-button,
.ar-wetten__feld::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

/* ------------------------------------------------------------ Eingang */

.ar-eingang,
.ar-warten,
.ar-warten__tisch,
.ar-warten__einstellung,
.ar-warten__start {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.ar-eingang,
.ar-warten {
  max-width: var(--ar-mass);
  margin-inline: auto;
}

/*
 * ---------------------------------------------- Der Eingang MIT Vorwahl
 *
 * Wer über eine Kachel der Vitrine kommt (?spiel=…), landet auf der Schaufensterseite EINES Spiels — und die
 * stand als Spalte von 40rem in einer tiefschwarzen Fläche: Banner in Daumengröße, darunter vier graue
 * Textkästen. Der Weg von /spiele hierher versprach ein Regal mit Aushängen und lieferte ein Formular.
 *
 * SIE IST JETZT SO BREIT WIE DIE BÜHNE UND SO KÜHL WIE DIE EINWEISUNG: dieselbe Schieferplatte, dieselbe
 * Vignette von oben links, dasselbe Triptychon. Wer den Tisch eröffnet, sieht Sekunden später dieselbe Sprache
 * noch einmal — das ist kein Zufall, sondern der Grund.
 *
 * SIE NIMMT DIE VOLLE BÜHNENBREITE UND NICHT 74rem. Die stand hier, solange die Platte ein Kasten IN der Bühne
 * sein sollte; neben `/faelle` und `/spiele`, die ihre 1800 Pixel nehmen, war das auf einem Breitbild ein
 * Streifen mit fünfhundert Pixeln Leere je Seite — und über ihm eine Leiste, die über die ganze Seite reicht.
 * Der Deckel steht ohnehin eine Ebene höher: `.ar-buehne` rechnet mit `--ar-breite`, und das ist die
 * Bühnenbreite des Hauses ohne seine Seitenluft. Zwei Deckel für dieselbe Fläche sind einer zu viel.
 *
 * WAS SÄTZE TRÄGT, BLEIBT TROTZDEM SCHMAL: Ziel, Spickzettel und Formular hören bei `--ar-mass` auf. Die Breite
 * gehört dem Banner, dem Triptychon und den Panels.
 *
 * DER EINGANG OHNE VORWAHL BLEIBT, WAS ER WAR. Dort stehen ein Namensfeld, ein Knopf und ein Codefeld; eine
 * Platte von 62rem darunter wäre ein Rahmen um nichts.
 */
.ar-eingang--spiel {
  max-width: none;
  padding: 1.25rem;
  border: 1px solid var(--ar-kante-griff);
  background: var(--ar-vignette), var(--ar-platte);
}

/* „ARENA" ist hier die Marke über einer Bühne und keine Überschrift am linken Rand: Auf einer breiten Platte stand
   das Wort auf halber Strecke und sah aus, als wäre es dorthin gerutscht. Auf dem Eingang OHNE Vorwahl bleibt es
   links. */
.ar-eingang--spiel > .ar-titel {
  text-align: center;
}

/*
 * ------------------------------------------- Zwei Spalten ab 56rem
 *
 * Links das Spiel, rechts der Tisch. Das Formular lag als Riegel ÜBER dem Triptychon — zwischen dem Aushang und
 * dem, was das Spiel erzählt, stand damit ein Kasten mit zwei Eingabefeldern, und wer wissen wollte, worum es
 * geht, musste daran vorbeirollen. Jetzt steht es daneben: siebzig zu dreißig, und beides fängt oben an.
 *
 * DIE SCHWELLE IST EINE CONTAINERABFRAGE, und zwar dieselbe, die auch das Triptychon dreispaltig macht — nur eine
 * Kante höher. Gemessen wird die Bühne und nicht das Fenster: Die Vorschau des Pults stellt vier Arenen
 * nebeneinander in ein breites Fenster, und eine Medienregel gäbe jeder davon zwei Spalten in Daumenbreite.
 *
 * BEI 56rem BÜHNENBREITE steht die Akte auf rund 17rem und das Triptychon auf drei Spalten von je 12 — schmaler
 * wird beides unbrauchbar, deshalb nicht früher. Darunter stapelt es sich in der Reihenfolge des Markups: Titel,
 * Blätterleiste, Bühne, Akte, Regeln.
 */
@container ar-buehne (min-width: 56rem) {
  .ar-eingang--spiel {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
    column-gap: 1.5rem;
    align-content: start;
  }

  .ar-eingang--spiel > .ar-titel,
  .ar-eingang--spiel > .ar-blaettern {
    grid-column: 1 / -1;
  }

  .ar-eingang--spiel > .ar-vorwahl,
  .ar-eingang--spiel > .ar-vorwahl__regeln {
    grid-column: 1;
  }

  /*
   * Die Akte steht in der rechten Spalte und reicht über beide Zeilen — sonst säße sie neben der Bühne und ließe
   * unter sich eine Spalte Leere stehen, so hoch wie das ganze Triptychon. `align-self: start` hält sie oben:
   * Ein Formular, das sich über eine Spalte von zwölfhundert Pixeln zieht, ist kein Formular mehr.
   */
  .ar-eingang--spiel > .ar-akte {
    grid-column: 2;
    grid-row: 3 / span 2;
    align-self: start;
  }
}

/*
 * ------------------------------------------- Die Tisch-Akte
 *
 * Der Vordruck der Vorwahl in einem eigenen Deckel: Messingkante oben, Überschrift, darunter das Formular ohne
 * eigenen Rahmen — zwei Rahmen ineinander sind einer zu viel.
 */
.ar-akte {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid var(--ar-kante-griff);
  border-top: var(--ar-tusche) solid var(--ar-funke);
  background: var(--ar-platte-2);
}

.ar-akte__titel {
  margin: 0;
  font-family: var(--ar-schrift-plakat);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}

.ar-akte .ar-formular {
  padding: 0;
  border: 0;
  background: none;
}

/* Gestapelt liegt die Akte nicht mehr in einer Spalte, sondern quer über der Platte — und ein Namensfeld über die
   volle Breite ist wieder der Riegel, den dieser Umbau gerade abgeschafft hat. Die Schwelle ist dieselbe wie oben,
   nur von der anderen Seite: zwei Regeln für zwei Zusammenhänge, und keine nimmt der anderen etwas weg. */
@container ar-buehne (max-width: 55.99rem) {
  .ar-eingang--spiel > .ar-akte {
    width: 100%;
    max-width: var(--ar-mass);
    margin-inline: auto;
  }
}

/* Über den Spielkacheln steht die Abendwertung, und ohne Aufstellung steht sie allein da. */
.ar-warten__spiele {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-content: start;
}

/* Ohne Aufstellung gibt es nichts einzustellen und keine Spiele; ein leerer Bereich risse sonst eine Fuge auf. */
.ar-warten__einstellung:empty,
.ar-warten__spiele:empty {
  display: none;
}

/* Die Abendwertung: eine leise Zeile, die auf 320 Pixeln umbricht, auch mitten in einem langen Namen. */
.ar-abend {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* Was der Host gerade wählt, bei allen anderen: heller als die Abendwertung und an einer Senfkante, denn hier entscheidet
   gerade jemand. Sie steht direkt über den Kacheln, deren Marke sie erklärt. */
.ar-warten__wahl {
  margin: 0;
  padding-left: 0.6rem;
  border-left: 3px solid var(--ar-funke);
  color: var(--ar-kreide);
  overflow-wrap: anywhere;
}

/*
 * DER ANPFIFF KLEBT AUF DEM TELEFON AM UNTEREN RAND.
 *
 * Unter 64rem stehen die Bereiche des Warteraums untereinander — Plätze, Einstellung, alle Spiele, dann der Start —,
 * und auf 375 × 667 stand „Anpfeifen“ gemessene 3.945 Pixel unter dem ersten Bild. Wer vor jeder Runde am ganzen
 * Katalog vorbeirollt, um einen Knopf zu drücken, spielt keine Runde an der Haltestelle.
 *
 * DER START WIRD DAFÜR TEIL DES RASTERS (`display: contents`), und nur sein Anpfiff klebt: Sein Rahmen ist dann der
 * ganze Warteraum und nicht der Kasten hinter dem Katalog, in dem `sticky` nichts verschieben könnte. Einladung, Salon
 * und Leute bleiben, wo sie standen, und am Ende der Spalte steht auch der Anpfiff wieder an seinem Platz. Grund und
 * Kante wie das Daumendock der Bretter (`.ar-dock`), kein Glas, kein Schatten — und wie dort erst ab 34rem Höhe: Im
 * flachen Querformat nähme ein Dock ein Drittel des Bildes.
 */
.ar-warten__anpfiff {
  display: grid;
  gap: 1.25rem;
}

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

@media (max-width: 63.99rem) and (min-height: 34rem) {
  .ar-warten__start {
    display: contents;
  }

  .ar-warten__anpfiff {
    position: sticky;
    bottom: 0;
    z-index: 4;
    gap: 0.5rem;
    padding-block: 0.6rem;
    border-top: 2px solid var(--ar-kreide);
    background: var(--ar-noir);
  }
}

/*
 * IM FLACHEN QUERFORMAT KLEBT NICHTS, UND DESHALB STEHEN DIE SPIELE DORT ZULETZT.
 *
 * Ohne Dock stand der Start wieder am Ende der Spalte: auf einem Telefon quer (812 × 375) gemessene 3.882 Pixel tief,
 * hinter allen Spielen. Jetzt folgt auf Plätze und Einstellung der Start mit Anpfiff, Einladung und Salon, und erst dann
 * der Katalog. Das Markup behält seine Reihenfolge — im Hochformat trägt genau sie das Dock durch den ganzen Katalog, und
 * ein Schirmleser liest weiter „Spiele, dann anpfeifen“. Verschoben wird nur, was man sieht, und nur hier.
 */
@media (max-width: 63.99rem) and (max-height: 33.99rem) {
  .ar-warten__spiele {
    order: 1;
  }
}

/*
 * Auf dem Schreibtisch nutzt der Warteraum die Bühne: oben die vier Plätze über die ganze Breite, darunter links, was
 * der Host einstellt, und rechts, womit es losgeht, und darunter alle Spiele über die ganze Breite. Auf dem Telefon stehen
 * die vier Bereiche in derselben Reihenfolge untereinander: einstellen, Spiele, anpfeifen.
 */
@media (min-width: 64rem) {
  .ar-warten {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: 'tisch tisch' 'einstellung start' 'spiele spiele';
    column-gap: 2rem;
    max-width: none;
  }

  .ar-warten__tisch { grid-area: tisch; }
  .ar-warten__einstellung { grid-area: einstellung; }
  .ar-warten__spiele { grid-area: spiele; }

  .ar-warten__start {
    grid-area: start;
    align-self: start;
    position: sticky;
    top: calc(var(--ar-hauskopf) + 1rem);
    padding: 1.25rem;
    border: 2px solid var(--ar-kante-griff);
    background: var(--ar-noir-2);
  }

  /* Ohne Einstellung (solange keine zwei sitzen) steht der Start unter den Plätzen über die ganze Breite. */
  .ar-warten:has(> .ar-warten__einstellung:empty) {
    grid-template-areas: 'tisch tisch' 'start start';
  }

  /* Steht dabei schon eine Abendwertung da, bekommt sie ihre Zeile zwischen Plätzen und Start, wie auf dem Telefon. Ohne
     die Zeile verwiese ihr Bereich auf einen Namen, den das Raster nicht kennt, und risse eine zweite Spalte auf; immer
     dazugeschrieben, stünde ohne Abendwertung eine leere Zeile mit zwei Fugen da. */
  .ar-warten:has(> .ar-warten__einstellung:empty):has(> .ar-warten__spiele:not(:empty)) {
    grid-template-areas: 'tisch tisch' 'spiele spiele' 'start start';
  }

  /* Mit dem Warteraum davor: Die Grundregeln der Plätze stehen weiter unten und gewannen ohne ihn, und die Plätze blieben
     auf dem Schreibtisch so klein wie auf dem Telefon. */
  .ar-warten .ar-platz {
    min-height: 9rem;
  }

  .ar-warten .ar-platz__marke {
    width: 3rem;
    height: 3rem;
  }

  .ar-warten .ar-platz__name {
    font-size: 1.2rem;
  }
}

.ar-aufmacher__bild {
  display: block;
  width: 100%;
  height: auto;
  max-height: 15rem;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.ar-titel {
  margin: 0;
  font-family: var(--ar-schrift-plakat);
  /* Alfa Slab One läuft breit: vierzehn Versalien brauchen rund das Zehnfache der Schriftgröße. Bei 3,5rem passt das Wort
     in die 40rem der Spalte, bei 8,2vw auf jedes Telefon. */
  font-size: clamp(1.5rem, 8.2vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.ar-unterzeile {
  margin: -0.5rem 0 0;
  color: var(--ar-kreide-2);
}

.ar-formular {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: var(--ar-tusche) solid var(--ar-kreide);
  background: var(--ar-noir-2);
}

/* Auf 320 Pixeln zeigte das Codefeld neben dem Knopf nur vier von sechs Zeichen; dann rutscht der Knopf darunter. */
.ar-formular__code {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--ar-kante-griff);
}

.ar-formular__code .ar-feld {
  flex: 1 1 7rem;
}

/* Was unter der Fuge kommt, ist der ANDERE Weg und nicht der nächste Schritt — die gestrichelte Linie allein hat
   das nicht gesagt. Sie nimmt die volle Zeile, damit Feld und Knopf darunter weiterlaufen wie bisher. */
.ar-formular__oder {
  flex: 1 0 100%;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.82rem;
}

/*
 * DIE VORWAHL IST EINE BÜHNE UND KEINE KARTE: das Banner über die volle Breite, darauf Name, Spielerzahl und der
 * Satz, warum man hier steht.
 *
 * Sie war ein Raster aus zwei Spalten — auf dem Telefon ein quadratischer Ausschnitt von 5,5rem neben dem Text,
 * breiter 14rem daneben. Das hielt das Namensfeld über dem Falz und zeigte vom Aushang dieses Spiels einen
 * Daumennagel. Jetzt liegt der Aushang da, wo er hingehört, und der Text auf ihm: Die Bühne ist im Breitbild
 * flacher als das Banner selbst (max-height), also steht das Feld weiterhin über dem Falz — gemessen auf
 * 390 x 844.
 *
 * DIE BLENDE IST EIN VERLAUF UND KEINE FLÄCHE. Achtzehn Banner sind achtzehn verschiedene Bilder; weiße Schrift
 * auf einem davon wäre irgendwo unlesbar. Unten deckt sie fast ganz (0,96), oben gar nicht — dort steht kein
 * Text. Auf --ar-noir hält Kreide 16,26:1.
 */
.ar-vorwahl {
  position: relative;
  display: block;
  border: var(--ar-tusche) solid var(--ar-funke);
  background: var(--ar-noir);
}

/*
 * AUF DEM TELEFON IST DIE BÜHNE HÖHER, UND ZWAR DAMIT MAN SIE SIEHT. Ein Streifen von 900:502 misst auf 390 Pixeln
 * rund 200 in der Höhe — die Blende mit Kicker, Titel, Spielerzahl und Satz braucht davon 130, und vom Aushang
 * bleibt ein Fingerbreit. Vier zu drei gibt dem Bild seine obere Hälfte zurück, und das Namensfeld steht trotzdem
 * über dem Falz (gemessen auf 390 x 844).
 */
.ar-vorwahl__banner {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@container ar-buehne (min-width: 34rem) {
  .ar-vorwahl__banner {
    aspect-ratio: 900 / 502;
    max-height: 21rem;
  }
}

.ar-vorwahl__text {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 3rem 0.9rem 0.8rem;
  background: linear-gradient(to top, rgb(11 11 13 / 0.96) 0%, rgb(11 11 13 / 0.84) 45%, rgb(11 11 13 / 0) 100%);
}

@container ar-buehne (min-width: 34rem) {
  .ar-vorwahl__text {
    padding: 4rem 1.4rem 1.2rem;
  }
}

.ar-vorwahl__kicker,
.ar-vorwahl__satz {
  margin: 0;
  color: var(--ar-kreide-2);
}

/*
 * DIE ECKDATEN STEHEN ALS PLAKETTEN UND NICHT ALS ZEILE. „2 bis 4 Spieler" stand als fetter Satz unter dem
 * Titel, und die Dauer stand gar nicht da — dabei ist sie an einem Abend in der Arena die zweite Frage nach
 * „welches Spiel?". Zwei Messingschilder beantworten beide auf einen Blick.
 *
 * ECKIG, WIE ALLES IN DIESEM ZIMMER. Runde Pillen trägt die Landeseite des Brettspiels; hier gilt „keine
 * Rundung" wörtlich (README, Abschnitt Gestaltung).
 */
.ar-vorwahl__marken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}

.ar-vorwahl__marke {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--ar-funke);
  color: var(--ar-kreide);
  font-size: 0.78rem;
  font-weight: 600;
}

.ar-vorwahl__kicker {
  font-size: 0.85rem;
}

.ar-vorwahl__titel {
  margin: 0;
  font-family: var(--ar-schrift-plakat);
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  hyphens: manual;
}

/*
 * ------------------------------------------- Das Blättern zwischen den Tischen
 *
 * Zwei Wege am Kopf der Bühne: links der vorige Tisch, rechts der nächste. Messingwinkel, Messingkante, und sonst
 * nichts — sie sollen den Aushang darunter nicht überstimmen.
 *
 * VIERUNDVIERZIG PIXEL IN BEIDE RICHTUNGEN, wie jede Tippfläche dieses Hauses; der Daumen ist rund.
 *
 * AUF DEM TELEFON BLEIBT NUR DER WINKEL. Zwei Spielnamen nebeneinander brauchen auf 358 Pixeln mehr Platz, als da
 * ist — „Der Nagelbalken" und „Hinterhof-Craps" stehen dann zweizeilig übereinander und sehen aus wie eine Liste.
 * Vorgelesen wird ohnehin das `aria-label`, und darin steht der Name.
 */
.ar-blaettern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.ar-blaettern__weg {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--ar-kante);
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  text-decoration: none;
}

.ar-blaettern__weg:hover,
.ar-blaettern__weg:focus-visible {
  border-color: var(--ar-funke);
  color: var(--ar-kreide);
}

.ar-blaettern__winkel {
  color: var(--ar-funke);
  font-size: 1rem;
  line-height: 1;
}

.ar-blaettern__name {
  display: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@container ar-buehne (min-width: 34rem) {
  .ar-blaettern__name {
    display: block;
    max-width: 14rem;
  }
}

.ar-vorwahl__regeln {
  display: grid;
  gap: 1rem;
}

/* Sie steht mittig über dem Triptychon und nicht links daneben: Was darunter liegt, sind drei gleiche Spalten. */
.ar-eingang--spiel .ar-vorwahl__regeln-titel {
  text-align: center;
}

.ar-vorwahl__regeln-titel {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.ar-meldung {
  min-height: 1.5em;
  margin: 0;
  color: var(--ar-funke);
}

/* ------------------------------------------------------------ Warteraum */

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

@container (min-width: 36rem) {
  .ar-plaetze {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ar-platz {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.35rem;
  min-width: 0;
  min-height: 7rem;
  margin: 0;
  padding: 0.75rem 0.5rem;
  border: var(--ar-tusche) solid var(--ar-platzfarbe);
  border-radius: 0;
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  font: inherit;
  text-align: center;
}

.ar-platz[data-ar-farbe='rot'] {
  --ar-platzfarbe: var(--ar-rot);
}

.ar-platz[data-ar-farbe='blau'] {
  --ar-platzfarbe: var(--ar-blau);
}

.ar-platz[data-ar-farbe='gelb'] {
  --ar-platzfarbe: var(--ar-gelb);
}

.ar-platz[data-ar-farbe='gruen'] {
  --ar-platzfarbe: var(--ar-gruen);
}

.ar-platz[data-ar-leer] {
  border-style: dashed;
  color: var(--ar-kreide-2);
}

button.ar-platz {
  cursor: pointer;
}

button.ar-platz:active {
  transform: translate(2px, 2px);
}

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

.ar-platz__marke {
  width: 2.25rem;
  height: 2.25rem;
}

.ar-platz__name {
  max-width: 100%;
  font-size: 1.1rem;
  font-weight: 600;
  hyphens: none;
  overflow-wrap: anywhere;
}

button.ar-platz .ar-platz__name {
  font-size: 0.9rem;
}

.ar-platz__zeichen-reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

.ar-platz__zeichen,
.ar-plakette__du {
  padding: 0 0.35rem;
  border: 1px solid currentColor;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
 * DER STIFT AM EIGENEN NAMEN (js/grafik.js, `umbenennKnopf()`): ein Knopf ohne Kasten. Sichtbar ist nur das Zeichen; die
 * Tippfläche sind die 44 × 44 Pixel des Hauses und ragt über das Zeichen hinaus.
 *
 * Er steht nur, wo der Server den Griff `name` erlaubt (`ich.darf`): am eigenen Platz im Warteraum und in der Siegerzeile
 * der Abrechnung. Auf dem Podium steht er nicht: Dessen Zeilen sind auf dem Telefon schon ohne ihn eng.
 */
/*
 * Das Kreuz am fremden Platz (`rausKnopf()` in js/zeichnen.js) trägt dieselbe Haut wie der Stift: Es steht nur beim
 * Host, nie am eigenen Platz, und damit nie neben dem Stift in derselben Ecke.
 */
.ar-umbenennen,
.ar-platz__raus {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ar-kreide-2);
  cursor: pointer;
}

@media (hover: hover) {
  .ar-umbenennen:hover,
  .ar-platz__raus:hover {
    color: var(--ar-kreide);
  }
}

.ar-umbenennen:active,
.ar-platz__raus:active {
  transform: translate(2px, 2px);
}

.ar-umbenennen__zeichen,
.ar-kreuz {
  width: 1.1rem;
  height: 1.1rem;
}

/* Am Platz sitzt er in der oberen Ecke: Die Marke steht mittig, der Name darunter, und keiner von beiden rückt seinetwegen. */
.ar-platz__umbenennen,
.ar-platz__raus {
  position: absolute;
  top: 0;
  right: 0;
}

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

/*
 * Der Salon beim Host: drei Stufen, ein Schalter und ein Satz, abgesetzt von der Einladung darüber, denn er lädt Fremde
 * ein. Die Stufen stehen in einer Zeile, solange sie passen (auf 390 Pixeln tun sie es noch); darunter bricht die dritte
 * um, statt dass „Öffentlich“ über seinen Knopf hinausläuft.
 */
.ar-salon {
  display: grid;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ar-kante);
}

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

.ar-salon__stufen,
.ar-salon__pin-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ar-salon__stufen .ar-knopf {
  flex: 1 1 auto;
}

.ar-schloss {
  width: 1em;
  height: 1em;
  margin-inline-end: 0.35em;
  vertical-align: -0.15em;
}

.ar-salon__pin {
  display: grid;
  gap: 0.5rem;
}

/*
 * DIE NAMEN OHNE FARBE BEIM HOST: jeder ein Knopf mit Kreuz, der ihn vom Tisch verweist. Sie brechen um wie der Satz,
 * an dessen Stelle sie stehen, und messen die 44 Pixel des Hauses.
 */
.ar-leute {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
}

.ar-leute__raus {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.6rem;
  border: 1px solid var(--ar-kante-griff);
  border-radius: 0;
  background: transparent;
  color: var(--ar-kreide);
  cursor: pointer;
}

@media (hover: hover) {
  .ar-leute__raus:hover {
    background: var(--ar-noir-3);
  }
}

.ar-leute__raus:active {
  transform: translate(2px, 2px);
}

.ar-leute__name {
  overflow-wrap: anywhere;
}

.ar-rauswurf__satz {
  margin: 0 0 1rem;
  color: var(--ar-kreide-2);
}

.ar-knopf--wahl {
  padding-inline: 0.5rem;
  font-size: 0.95rem;
}

/* Gewählt heißt umgekehrt: Tinte auf Kreide statt Kreide auf Tinte. Der Unterschied liegt in der Helligkeit, nicht im
   Farbton, und aria-pressed sagt ihn dem Screenreader. */
.ar-knopf--wahl[aria-pressed='true'],
.ar-knopf--wahl[aria-pressed='true']:hover {
  background: var(--ar-kreide);
  color: var(--ar-noir);
}

.ar-modus {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
  padding: 0.9rem 0.5rem 0.75rem;
  border: var(--ar-tusche) solid var(--ar-kante-griff);
  border-radius: 0;
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  font: inherit;
  text-align: center;
}

button.ar-modus {
  cursor: pointer;
}

button.ar-modus:active {
  transform: translate(2px, 2px);
}

/* Der gewählte Modus trägt eine Senfkante und oben einen Balken: zwei Formen, nicht nur ein Farbton. */
.ar-modus[aria-pressed='true'] {
  border-color: var(--ar-funke);
  background: var(--ar-noir-3);
}

.ar-modus[aria-pressed='true']::before {
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--ar-funke);
  content: '';
}

@media (hover: hover) {
  button.ar-modus:hover {
    border-color: var(--ar-kreide);
  }
}

.ar-modus--stand {
  border-style: dashed;
}

.ar-modus__bild {
  width: 3.75rem;
  height: 2.5rem;
}

.ar-modus__name {
  font-size: 1.05rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ar-modus__zeile {
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

/*
 * Der Turniermodus beim Host: oben eine Reiterleiste, darunter die Werte des gewählten Modus als flache Knopfreihe und
 * ein Satz. Beides sind Einstellungen mit aria-pressed, keine Reiter mit Tabpanel. Gewählt heißt beim Reiter Senfkante
 * und ein Balken oben, beim Wert Senfkante und ein Balken unten; nie nur ein Farbton.
 *
 * DIE REITER STEHEN AUF DEM TELEFON ZU ZWEIT IN ZWEI REIHEN, UND ZWAR AN DER SCHWELLE DER FARBPLÄTZE. „RUNDENANZAHL“
 * misst in der Plakatschrift 9,72 em, mit Sperrung 9,96 em, bei 0,78rem also 124 Pixel. Auf 320 Pixeln bleiben einem
 * von zwei Reitern 129 Pixel Inhalt, von vieren wären es 57. Wird es doch zu eng, trennt das Wort an seiner Wortfuge
 * und nie mitten in der Silbe (`hyphens: manual`).
 */
.ar-turnier {
  display: grid;
  gap: 0.6rem;
}

.ar-turnier__leiste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ar-kante);
}

/* Fünf Modi in zwei Spalten: Der letzte nimmt die ganze Zeile, statt als halber Reiter unter einer Lücke zu stehen. */
.ar-turnier__leiste > .ar-turnier__reiter:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@container (min-width: 36rem) {
  .ar-turnier__leiste {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .ar-turnier__leiste > .ar-turnier__reiter:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Drei Werte je Modus: „BEST OF 9“ braucht bei 0,85rem 79 Pixel und passt auf 320 Pixeln gerade in eine Zeile; wo nicht,
   bricht es zwischen den Wörtern. */
.ar-turnier__werte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.ar-turnier__reiter,
.ar-turnier__wert {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0.4rem 0.25rem;
  border: 2px solid var(--ar-kante-griff);
  border-radius: 0;
  background: var(--ar-noir-2);
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.15;
  hyphens: manual;
  overflow-wrap: normal;
  cursor: pointer;
}

.ar-turnier__wert {
  font-size: 0.85rem;
}

.ar-turnier__reiter:active,
.ar-turnier__wert:active {
  transform: translate(2px, 2px);
}

@media (hover: hover) {
  .ar-turnier__reiter:not([aria-pressed='true']):hover,
  .ar-turnier__wert:not([aria-pressed='true']):hover {
    border-color: var(--ar-kreide);
    color: var(--ar-kreide);
  }
}

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

.ar-turnier__reiter[aria-pressed='true'] {
  box-shadow: inset 0 4px 0 0 var(--ar-funke);
}

.ar-turnier__wert[aria-pressed='true'] {
  box-shadow: inset 0 -4px 0 0 var(--ar-funke);
}

.ar-anpfiff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.75rem;
}

.ar-anpfiff .ar-knopf {
  min-height: 3.5rem;
  font-size: 1.05rem;
}

.ar-hinweis,
.ar-zuschauer {
  margin: 0;
  color: var(--ar-kreide-2);
  text-align: center;
  overflow-wrap: anywhere;
}

/*
 * Die Bildkarten eines Spiels: links das Bild, rechts Schlagwort und Satz, zwei nebeneinander, wo Platz ist, sonst
 * untereinander. Sie standen einmal zu viert in einer Reihe, als Bild mit einem Wort und dem Satz nur für Screenreader;
 * seit der Satz dasteht, braucht jede Karte die Breite einer halben Spalte.
 */
.ar-lehre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-lehre__karte {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

.ar-lehre__bild {
  width: 3.5rem;
  height: 3.5rem;
}

.ar-lehre__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.ar-lehre__wort {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--ar-funke);
  font-size: 0.9rem;
  font-weight: 700;
}

/*
 * Über die Schwelle darf die Einweisung breiter stehen als ihr Zeilenmaß — das Triptychon braucht drei Spalten.
 * Alles, was SÄTZE trägt, bleibt bei --ar-mass: Ein Ziel über 50rem liest niemand, und ein Knopf über 50rem trifft
 * niemand zweimal an derselben Stelle.
 *
 * DER HINWEIS STAND HIER EINMAL MIT, als ".ar-einweisung > .ar-regeln__hinweis". Er ist kein direktes Kind mehr:
 * Seit es den Spickzettel gibt, liegt er darin, und ein Selektor auf ein Kind, das es nicht mehr gibt, ist eine
 * Regel, die nie wieder greift.
 */
@container ar-buehne (min-width: 48rem) {
  .ar-einweisung > .ar-ziel,
  .ar-einweisung__knoepfe {
    width: 100%;
    max-width: var(--ar-mass);
    margin-inline: auto;
  }
}

.ar-ziel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: var(--ar-tusche) solid var(--ar-kreide);
  background: var(--ar-noir-2);
}

.ar-ziel__zeichen {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
}

.ar-ziel__bild {
  width: 4.5rem;
  height: 4.5rem;
}

.ar-ziel__marke {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.ar-ziel__text {
  margin: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ar-ziel__text strong {
  font-weight: 700;
}

.ar-ziel__zusatz {
  margin: 0.35rem 0 0;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

/* Auf 320 Pixeln lag „Link kopieren" über dem Feld; dann rutscht der Knopf darunter, wie am Codefeld des Eingangs. */
.ar-einladung {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.ar-einladung .ar-feld {
  flex: 1 1 10rem;
}

/* ------------------------------------------------------------ Die Spielkarte der Walze */

/*
 * Eine Karte je Spiel: Banner, Name und für wie viele.
 *
 * SIE STAND EINMAL AUCH AUF DER TAFEL, ALS BAND ZUM WISCHEN. Dort liegt jetzt der Katalog (js/katalog.js); was blieb,
 * ist die Karte in der Walze — und die ist dort nie ein Knopf, sondern die Ziehung, die gerade durchläuft.
 */
.ar-karte {
  display: grid;
  align-content: start;
  gap: 0;
  width: var(--ar-karte, 11rem);
  margin: 0;
  padding: 0;
  border: var(--ar-tusche) solid var(--ar-kante-griff);
  border-radius: 0;
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  font: inherit;
  text-align: left;
}

.ar-karte__banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 2px solid var(--ar-kante);
}

.ar-karte__text {
  display: grid;
  gap: 0.1rem;
  padding: 0.4rem 0.6rem 0.5rem;
}

.ar-karte__name {
  font-family: var(--ar-schrift-plakat);
  font-size: 1.05rem;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.ar-karte__zahl {
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/*
 * Passt ein Spiel nicht zur Besetzung der nächsten Runde, steht seine Karte gestrichelt, das Banner blass, und die Zeile
 * darunter sagt hell, für wie viele es ist.
 */
.ar-karte[data-ar-gesperrt] {
  border-style: dashed;
  border-color: var(--ar-kante-griff);
  cursor: not-allowed;
}

.ar-karte[data-ar-gesperrt] .ar-karte__banner {
  opacity: 0.4;
}

.ar-karte[data-ar-gesperrt] .ar-karte__zahl {
  color: var(--ar-kreide);
}

@media (hover: hover) {
  button.ar-karte[data-ar-gesperrt]:hover {
    border-color: var(--ar-kante-griff);
  }
}

/* ------------------------------------------------------------ Der Katalog */

/*
 * Alle Spiele des Warteraums auf einmal, im Freien Spiel wie im Turnier: auf dem Schreibtisch vier nebeneinander, auf dem
 * Telefon zwei. Es wischt und scrollt nichts seitwärts; wer wählt, sieht jedes Spiel und was übrig bleibt. Banner und
 * Name oben, darunter ein Satz, worum es geht, und unten Spielerzahl, Dauer und Stand.
 *
 * Gewählt oder an heißt Senfkante, ein Balken oben und ein Haken mit Wort; aus heißt ein leerer Kasten mit Wort, ein
 * blasses Banner und blasse Schrift; was nicht zur Runde passt, steht mit gestrichelter Kante und der Spielerzahl in Kreide
 * da. Nie nur ein Farbton.
 *
 * DARÜBER LIEGT SEIT ACHTZEHN SPIELEN EINE PILLENLEISTE. Sie schaltet ohne Neuladen und ohne eine einzige Anfrage; was
 * offen ist, steht in `ui.gattung` (js/haupt.js) und geht nie zum Server.
 */
.ar-katalog {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

/*
 * Die Filterleiste. Sie wischt seitwärts, wo sie nicht hinpasst — eine Pillenleiste, die auf dem Telefon in drei
 * Zeilen umbricht, schiebt die Kacheln unter den Falz, und wegen der Kacheln ist man hier.
 */
.ar-katalog__filter {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scrollbar-width: thin;
}

.ar-katalog__pille {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

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

/* Die Zahl je Gattung: Wer filtert, soll vorher sehen, ob dahinter etwas steht. */
.ar-katalog__pille-zahl {
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.ar-katalog__pille[aria-pressed='true'] .ar-katalog__pille-zahl {
  color: inherit;
}

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

.ar-katalog__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
}

.ar-katalog__titel {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

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

.ar-katalog__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 64rem) {
  .ar-katalog__raster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

.ar-katalog__kachel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: var(--ar-tusche) solid var(--ar-kante-griff);
  border-radius: 0;
  background: var(--ar-noir-2);
  color: var(--ar-kreide-2);
  font: inherit;
  text-align: left;
}

button.ar-katalog__kachel {
  cursor: pointer;
}

button.ar-katalog__kachel:active {
  transform: translate(2px, 2px);
}

@media (hover: hover) {
  button.ar-katalog__kachel:not([data-ar-gesperrt]):hover {
    border-color: var(--ar-kreide);
  }
}

.ar-katalog__kachel[aria-pressed='true'],
.ar-katalog__kachel[data-ar-an] {
  border-color: var(--ar-funke);
  box-shadow: inset 0 6px 0 0 var(--ar-funke);
  background: var(--ar-noir-3);
  color: var(--ar-kreide);
}

/*
 * EINE KACHEL, DIE NICHT ZUR RUNDE PASST, STEHT BLASS DA — aber lesbar.
 *
 * Der Playtest wollte sie „ausgegraut (opacity: 0.45)", und wörtlich genommen wäre das ein Verstoß: Ein Deckel von
 * 45 Prozent zieht Name und Satz auf rund 2,3 : 1 herunter, und dann steht dort eine Kachel, von der niemand mehr
 * liest, WELCHES Spiel gesperrt ist. Blass werden deshalb Banner und Kante, die Schrift geht auf Kreide 2 (über
 * 4,5 : 1 auf Noir 2) — und der Grund steht als Wort im Fuß, wo sonst „Starten" steht. Der Eindruck ist derselbe,
 * die Auskunft bleibt.
 */
.ar-katalog__kachel[data-ar-gesperrt] {
  border-style: dashed;
  border-color: var(--ar-kante);
  background: var(--ar-noir-2);
  color: var(--ar-kreide-2);
  cursor: not-allowed;
}

/* Das Wort an der Stelle von „Starten": Es trägt den Grund und darf nicht mit verblassen. */
.ar-katalog__stand--knapp {
  color: var(--ar-kreide);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  hyphens: none;
}

.ar-katalog__banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 2px solid var(--ar-kante);
}

/* Aus: Das Banner wird blass, die Schrift bleibt über 4,5 : 1 lesbar (Kreide 2 auf Noir 2). */
.ar-katalog__kachel:not([aria-pressed='true'], [data-ar-an]) .ar-katalog__banner {
  opacity: 0.55;
}

/* Gesperrt noch blasser — das Bild trägt keine Auskunft und darf als erstes zurücktreten. */
.ar-katalog__kachel[data-ar-gesperrt] .ar-katalog__banner {
  opacity: 0.28;
}

.ar-katalog__text {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.5rem 0.6rem 0.3rem;
}

.ar-katalog__name {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  hyphens: manual;
}

.ar-katalog__kurz {
  font-size: 0.8rem;
  line-height: 1.3;
}

.ar-katalog__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem 0.6rem;
  padding: 0.3rem 0.6rem 0.5rem;
}

.ar-katalog__zahl {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* Wie lange eine Runde ungefähr dauert — die zweite Frage nach „für wie viele?". Ziffernschrift, weil eine Zahl. */
.ar-katalog__dauer {
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}


.ar-katalog__stand {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
}

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

@media (min-width: 64rem) {
  .ar-katalog__text {
    padding: 0.7rem 0.9rem 0.4rem;
  }

  .ar-katalog__name {
    font-size: 1.15rem;
  }

  .ar-katalog__kurz {
    font-size: 0.9rem;
  }

  .ar-katalog__fuss {
    padding: 0.4rem 0.9rem 0.7rem;
  }

  .ar-katalog__zahl,
  .ar-katalog__stand {
    font-size: 0.8rem;
  }
}

/*
 * DIE KNAPPE FASSUNG AUF DER TAFEL. Dieselben Kacheln, nur enger und ohne Banner: Unter einer Abrechnung, einem Podium
 * und drei Knöpfen ist ein Bild je Spiel kein Wiedererkennungszeichen mehr, sondern eine zweite Seite. Der Name bleibt,
 * und der ist dort die Auskunft, wegen der man aufklappt.
 *
 * SIE FÜLLT, WAS DA IST, UND ROLLT NICHT ZWEIMAL. Der Playtest hat sie „in einem engen Kasten mit vertikalen und
 * horizontalen Scrollbalken abgeschnitten“ gefunden, und beide Befunde stimmten: Der Kasten war auf 36rem gedeckelt,
 * während die Tafel daneben 56rem breit stand, und die Pillenleiste darüber wischte seitwärts in einer Tafel, die
 * ohnehin senkrecht rollt.
 */
.ar-katalog[data-ar-knapp] .ar-katalog__raster {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.35rem;
}

/*
 * Ab Tabletbreite bricht die Pillenleiste um, statt zu wischen. Auf dem Telefon bleibt sie ein Wischstreifen: Dort
 * kostet ein Umbruch in drei Zeilen die Kacheln, wegen derer man aufgeklappt hat — der Grund, aus dem sie überhaupt
 * wischt, gilt dort unverändert.
 */
@media (min-width: 48rem) {
  .ar-katalog[data-ar-knapp] .ar-katalog__filter {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

.ar-katalog[data-ar-knapp] .ar-katalog__banner {
  display: none;
}

/*
 * DER EINE SATZ STEHT AUCH AUF DER TAFEL, und hier stand, dass er es nicht tut.
 *
 * Auf der knappen Fassung fiel er mit dem Banner weg — aus Platzgründen, und das war der falsche Handel: Was blieb,
 * waren achtzehn Kacheln mit einem Namen, „2 bis 4 Spieler" und „ca. 5 min". Wer „Schmuggelroute" noch nie gespielt
 * hat, liest daran nichts ab, und genau dort wird ausgesucht. Der Satz ist zwei Zeilen; das Banner war hundert
 * Pixel. Kleiner als auf der offenen Fassung darf er sein, weg darf er nicht.
 */
.ar-katalog[data-ar-knapp] .ar-katalog__kurz {
  font-size: 0.72rem;
  line-height: 1.25;
}

.ar-katalog[data-ar-knapp] .ar-katalog__text {
  padding: 0.4rem 0.5rem 0.2rem;
}

.ar-katalog[data-ar-knapp] .ar-katalog__name {
  font-size: 0.85rem;
}

.ar-katalog[data-ar-knapp] .ar-katalog__fuss {
  padding: 0.2rem 0.5rem 0.4rem;
}

/* ------------------------------------------------------------ Walze */

.ar-wahl {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  max-width: 34rem;
  margin-inline: auto;
  padding-top: 1rem;
}

.ar-wahl__banner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  color: var(--ar-noir);
  font-family: var(--ar-schrift-plakat);
  font-size: clamp(0.95rem, 4.4vw, 1.4rem);
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}

.ar-wahl__banner-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.ar-wahl__banner-wort {
  position: relative;
  padding: 0.5rem 1rem;
}

/*
 * Die Walze läuft waagerecht: Die Karten kommen von rechts, rollen aus und rasten in der Mitte ein. Der Streifen wird
 * je Bild aus der Serverzeit gesetzt (siehe js/spielwahl.js), das Fenster ist sein Maßcontainer — deshalb rechnet die
 * Verschiebung in cqw und nicht in Prozent.
 */
.ar-walze {
  --ar-karte: 13rem;
  --ar-schritt: calc(var(--ar-karte) + 0.5rem);
  position: relative;
  width: 100%;
  border: 6px solid var(--ar-kreide);
  background: var(--ar-noir);
}

.ar-walze::before,
.ar-walze::after {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-inline: 12px solid transparent;
  content: '';
  translate: -50% 0;
}

.ar-walze::before {
  top: -6px;
  border-top: 14px solid var(--ar-funke);
}

.ar-walze::after {
  bottom: -6px;
  border-bottom: 14px solid var(--ar-funke);
}

.ar-walze__fenster {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

.ar-walze__fenster::after {
  position: absolute;
  inset: 0 calc(50% - var(--ar-karte) / 2 - 0.25rem);
  border-inline: 3px solid var(--ar-funke);
  content: '';
  pointer-events: none;
}

.ar-walze__fenster[data-ar-eingerastet]::after {
  border-inline-width: 6px;
  border-color: var(--ar-kreide);
}

.ar-walze__streifen {
  display: flex;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  translate: calc(50cqw - (var(--ar-pos, 0) + 0.5) * var(--ar-schritt)) 0;
}

.ar-walze__fach {
  display: flex;
  flex: none;
  justify-content: center;
  width: var(--ar-schritt);
}

/* In der Walze ist die Karte Kulisse: Der Name steht groß, das Banner bleibt ruhig. */
.ar-walze .ar-karte {
  width: var(--ar-karte);
}

.ar-wahl__stand,
.ar-einweisung__stand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.9rem;
}

.ar-wahl__anzieher {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  overflow-wrap: anywhere;
}

.ar-wahl__marke {
  width: 1.1rem;
  height: 1.1rem;
}

/* ------------------------------------------------------------ Einweisung */

/*
 * DIE EINWEISUNG IST EIN TISCH UND KEIN LADEBILDSCHIRM.
 *
 * Sie stand auf dem Tiefschwarz des Bretts, ohne Kante und ohne Rand, und darauf lagen ein Titel, fünf
 * gestrichelte Kästchen und eine Wand aus vier nummerierten Textkästen. Jetzt ist sie eine Platte aus
 * Schiefer mit einer Vignette von oben links — dieselbe Lampe, unter der die Panels gezeichnet sind — und
 * einer Kante ringsum. Was darauf liegt, behält seine eigenen Flächen.
 *
 * DAS BRETT BLEIBT SCHWARZ. Diese Platte gehört der halben Minute vor dem Anpfiff und keinem Spielfeld:
 * `.ar-spielfeld` ist eine andere Ansicht und sieht keine dieser Regeln.
 */
.ar-einweisung {
  display: grid;
  gap: 1rem;
  max-width: var(--ar-mass);
  margin-inline: auto;
  padding: 1rem;
  border: 1px solid var(--ar-kante-griff);
  background: var(--ar-vignette), var(--ar-platte);
}

/*
 * Über der Schwelle des Ablaufs darf die Einweisung breiter stehen als ihr Zeilenmaß: Der Ablauf ist das einzige Stück
 * darin, das zwei Spalten trägt, alles andere bleibt bei --ar-mass (weiter oben, beim Ablauf). Die Zeile steht HIER und
 * nicht dort oben, weil beide Regeln gleich stark sind und die spätere gewinnt — dort oben hätte das Zeilenmaß sie
 * stillschweigend geschlagen, und der Kommentar hätte eine Breite behauptet, die nie galt.
 */
@container ar-buehne (min-width: 48rem) {
  .ar-einweisung {
    max-width: 58rem;
  }
}

.ar-einweisung__kicker {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  text-align: center;
}

/* Ein Spielname bricht nicht mitten im Wort: Passt er nicht neben das Schild, rutscht er darunter. */
.ar-einweisung__titel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  font-family: var(--ar-schrift-plakat);
  font-size: clamp(1.2rem, 5.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.ar-einweisung__schild {
  flex: none;
  width: 3rem;
  height: 3rem;
}

.ar-bereit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bereit heißt Haken im Kasten, durchgezogene Kreidekante und das Wort; wer wartet, steht gestrichelt da. Nie nur ein
   Farbton. Der Host hat keinen Kasten, sondern den Funken: Er drückt kein Bereit, er startet. */
.ar-bereit__farbe {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.35rem 0.6rem;
  border: 2px dashed var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

.ar-bereit__farbe[data-ar-bereit],
.ar-bereit__farbe[data-ar-host] {
  border-style: solid;
  border-color: var(--ar-kreide);
}

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

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

.ar-bereit__name {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

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

.ar-bereit__farbe[data-ar-bereit] .ar-bereit__stand,
.ar-bereit__farbe[data-ar-host] .ar-bereit__stand {
  color: var(--ar-kreide);
}

.ar-einweisung__knoepfe {
  display: grid;
  gap: 0.75rem;
}

/*
 * ---------------------------------------------------------------- Das Triptychon
 *
 * Drei Panels nebeneinander, unter jedem sein Satz. Es ersetzt die vier nummerierten Textkästen, die hier
 * standen: Die trugen die vollständige Regel in Briefmarkengröße, und zehn Sekunden vor dem Anpfiff las das
 * niemand. Was man NACHSCHLÄGT, liegt jetzt im Spickzettel darunter.
 *
 * EINE SPALTE ODER DREI — NIE ZWEI. `auto-fit` läge näher und ergäbe bei mittlerer Breite zwei Panels oben und
 * eines darunter; ein Triptychon mit einem Flügel in der zweiten Reihe ist keines. Die Schwelle ist eine
 * Containerabfrage wie jede in dieser Ansicht: Gemessen wird die Bühne und nicht das Fenster, denn die
 * Vorschau des Pults stellt vier Arenen nebeneinander in ein breites Fenster.
 */
.ar-trip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

@container ar-buehne (min-width: 34rem) {
  .ar-trip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
  }
}

/* `position: relative` trägt allein die Ziffer in der Ecke; sie liegt IM Bild und nicht daneben. */
.ar-trip__tafel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 0;
}

/*
 * Das Messing des Rahmens ist dasselbe wie an der Comic-Bühne hinter [?] — und die steht keine Handbreit
 * daneben. Das Seitenverhältnis steht fest, damit der Satz darunter nicht springt, sobald die Datei eintrifft.
 */
.ar-trip__bild {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--ar-tusche) solid var(--ar-funke);
  background: var(--ar-noir);
  object-fit: cover;
}

/* Die Ziffer sagt die Reihenfolge; für den Screenreader ist sie stumm, denn die Sätze stehen ohnehin in ihr. */
.ar-trip__zahl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  min-width: 1.7rem;
  padding: 0.1rem 0.4rem;
  background: var(--ar-funke);
  color: var(--ar-noir);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
}

/* Das Papier unter dem Panel: Serifenschrift, warmes Weiß, Messingkante oben — wie im Kasten der Comic-Bühne. */
.ar-trip__satz {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ar-kante-griff);
  border-top: 0;
  background: var(--ar-platte-2);
  color: var(--ar-comic-papier);
  font-family: var(--ar-schrift-comic);
  font-size: 0.95rem;
  line-height: 1.5;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/*
 * ---------------------------------------------------------------- Der Spickzettel
 *
 * Die vier Bildkarten und der Hinweis, zugeklappt. Ein `details` und kein Knopf mit Skript: Was zugeklappt ist,
 * steht trotzdem im Markup.
 *
 * DAS PLUS STEHT ALS ZEICHEN UND NICHT ALS DREIECK DES BROWSERS. `display: flex` an einer `summary` nimmt ihr
 * in mehreren Browsern ohnehin den Marker; ein eigenes Zeichen sagt an jeder Stelle dasselbe. Es springt und
 * federt nicht — in dieser Arena bewegt sich nichts weich.
 */
.ar-spick {
  border: 1px solid var(--ar-kante-griff);
  background: var(--ar-platte-2);
}

.ar-spick__griff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  min-height: 2.75rem;
  padding: 0.6rem 0.75rem;
  color: var(--ar-kreide);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  list-style: none;
}

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

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

.ar-spick[open] .ar-spick__griff::after {
  content: '−';
}

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

.ar-spick__zeichen {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ar-funke);
}

.ar-spick__zusatz {
  color: var(--ar-kreide-2);
  font-size: 0.82rem;
  font-weight: 400;
}

.ar-spick__blatt {
  display: grid;
  gap: 0.5rem;
  padding: 0 0.75rem 0.75rem;
}

/* Vier Karten auf einem Zettel sind zwei mal zwei und nicht drei plus eine: Die Grundstellung der Lehrtafel
   (auto-fit) legt sie nach Platz, und auf 58rem blieb die vierte allein in der zweiten Zeile stehen. */
@container ar-buehne (min-width: 34rem) {
  .ar-spick__blatt .ar-lehre {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Auf der Platte tragen auch die Karten ihren Ton: Tiefschwarz daneben sieht aus wie ein Loch im Blatt. */
.ar-spick__blatt .ar-lehre__karte {
  background: var(--ar-platte);
}

.ar-einweisung__knoepfe .ar-knopf--stark {
  min-height: 3.5rem;
  font-size: 1.05rem;
}

/*
 * Bereit, gedrückt: Der Schalter bleibt stehen, mit Haken, durchgezogener Kreidekante und dem Satz, wie man ihn löst. Er
 * verschwand einmal nach dem Drücken, und wer kurz wegmusste, konnte sein Bereit nicht zurücknehmen.
 */
.ar-knopf--bereit {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 0.1rem 0.5rem;
  min-height: 3.5rem;
  background: var(--ar-noir-3);
  font-size: 1.05rem;
}

.ar-knopf__haken {
  width: 1.3rem;
  height: 1.3rem;
}

.ar-knopf__zusatz {
  grid-column: 1 / -1;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  font-weight: 400;
}

/* ------------------------------------------------------------ Stand und Paarung */

/* Brett, Tafel und Walze zeigen den Stand gleich; siehe js/stand.js. */
.ar-stand,
.ar-paarung {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 0.9rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

.ar-stand__teil {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.2rem 0.6rem;
}

/* Auf 18rem Leiste, auf dem Telefon wie in der Spalte des Schreibtischs, bleiben hinter vier Farben mit voller Fuge 77 Pixel,
   und „NOCH 29:59“ braucht 77: Die Zeile bräche um und schöbe das Brett um eine Zeile unter den Falz. */
@container ar-hud (max-width: 19rem) {
  .ar-stand__teil {
    column-gap: 0.4rem;
  }
}

.ar-stand__farbe,
.ar-paarung__name {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  color: var(--ar-kreide);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ar-stand__farbe[data-ar-weg] {
  color: var(--ar-kreide-2);
  text-decoration: line-through;
}

.ar-stand__marke {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* Runde, Stechen oder Uhr hinter den Siegen: als ein Stück, damit „RUNDE 2/5“ nicht über zwei Zeilen zerfällt. */
.ar-stand__modus {
  white-space: nowrap;
}

/* Die Uhr springt Sekunde für Sekunde; mit gleich breiten Ziffern wandert die Zeile dabei nicht. */
.ar-stand__uhr {
  color: var(--ar-kreide);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Spielfeld */

/*
 * Der Rahmen um das Brett jedes Spiels. Das Spiel setzt auf .ar-spielfeld[data-ar-spiel] seine Maße: --ar-brettbreite
 * für Brett und Leiste und --ar-einheit, an der Abzeichen und Tafel ihre Schrift ausrichten. Schrift und Tafel hängen
 * an dieser Einheit und nicht am Fenster: Im Querformat ist das Brett klein, das Fenster breit.
 */
.ar-spielfeld {
  --ar-brettrand: 2px;
  /*
   * DIE LUFT ZWISCHEN DEM BRETTRAND UND ALLEM DARIN — an EINER Stelle und nicht achtzehnmal.
   *
   * Acht Spiele trugen `padding: 0.5rem` auf ihrer eigenen Wurzel, zehn gar keins, und am Tisch sah man genau das:
   * Bei Keno lag eine saubere Fuge zwischen Rahmen und Bedienspalte, beim Zünder, bei Craps und am Nagelbalken
   * klebten Knöpfe, Guthaben und Journal press an der Kante. Der Befund aus dem Playtest lautete deshalb nicht
   * „Spiel X hat kein Padding", sondern „die Tische sehen nicht nach demselben Haus aus".
   *
   * Sie steht hier und nicht in den Spielen, damit das neunzehnte sie geschenkt bekommt. Das Wasserzeichen
   * (.ar-brett::before) deckt sie mit ab: Ein absolut gesetztes Kind rechnet gegen die Polsterbox.
   */
  --ar-brettluft: 0.5rem;
  --ar-plakette-hoehe: 4.75rem;
  --ar-plaketten-zeilen: 1;
  /* Die feste Zugzeile unter der Standzeile (`.ar-zug`, js/spielfeld.js). Sie steht immer da, auch leer, und ihre Höhe
     zählt deshalb in die Reserve: Eine Zeile, die zwischen den Zügen verschwände, ließe das Brett bei jedem Zug springen. */
  --ar-zug-hoehe: 1.75rem;
  /* Die Anzeigeleiste ohne ihre Plaketten: der Fuß mit Standzeile und dem Platz des Spiels, die Zugzeile, dazu die
     Abstände davor. Mit dem Balken darüber waren es 3,5rem; die 0,9rem, die er nahm, hat seitdem das Brett. */
  --ar-hud-rest: calc(2.6rem + 0.4rem + var(--ar-zug-hoehe));
  --ar-hud-hoehe: calc(var(--ar-plaketten-zeilen) * var(--ar-plakette-hoehe) + (var(--ar-plaketten-zeilen) - 1) * 0.4rem + var(--ar-hud-rest));
  /*
   * Was ein Brett an Höhe nicht bekommt, als Summe dessen, was mit ihm im Bild steht: Spielleiste samt Tuschkante,
   * Präsenz-Leiste, die Luft der Bühne oben und unten, die Anzeigeleiste, der Abstand zum Brett und der Brettrand. Was
   * darüber klebt, zieht das Spiel als --ar-hauskopf zusätzlich ab.
   */
  --ar-hud-fuge: 0.6rem;
  --ar-reserve: calc(var(--ar-kopf-hoehe) + var(--ar-tusche) + var(--ar-praesenz-hoehe) + 3rem + var(--ar-hud-hoehe) + var(--ar-hud-fuge) + 2 * var(--ar-brettrand) + 2 * var(--ar-brettluft));
  /*
   * Die Breite, die ein Brett bekommen kann: die Bühne. Ein Spiel liest sie nur auf .ar-spielfeld und nie in einem eigenen
   * Maßcontainer, denn die Container-Einheit darin rechnet erst dort, wo sie gebraucht wird, und in einem inneren
   * Container gegen diesen statt gegen die Bühne.
   */
  --ar-feld: 100cqw;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}

/* Im flachen Querformat steht die Anzeigeleiste links neben dem Brett; über dem Brett bleibt nur die Spielleiste. */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-spielfeld {
    --ar-hud-hoehe: 0rem;
    --ar-hud-fuge: 0rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 1rem;
  }
}

/*
 * Auf dem Schreibtisch steht die Anzeigeleiste als Reihe über dem Brett, alle Plaketten nebeneinander, mindestens 48rem
 * breit. SIE STAND EINMAL ALS SPALTE VON 18REM DANEBEN, und auf einem Breitbild nahm sie dem Brett ein Drittel der Bühne,
 * während darüber und darunter Platz frei blieb. Ein Brett, das mit der Breite wächst, braucht die Breite; eines, das an
 * der Höhe hängt, verliert mit der Reihe darüber eine Plakettenhöhe, und die rechnet die Reserve mit.
 */
@media (min-width: 64rem) and (min-height: 30.0625rem) {
  /* An der Leiste selbst: Die Regeln je Farbenzahl setzen ihre Mindestbreite am Spielfeld und gewännen dort. */
  .ar-spielfeld > .ar-hud {
    --ar-hud-min: 48rem;
  }
}

/*
 * DAS BILD DES SPIELS FÜLLT AUF DEM SCHREIBTISCH DEN GANZEN SCHIRM, solange sein Brett offen ist. Es lag nur hinter dem
 * Brett und dort unter Feldern, Kacheln und Scheinen; ringsum stand die Seite schwarz, und auf 1920 Pixeln war das mehr
 * Fläche als das Spiel selbst. Jetzt liegt es fest hinter der ganzen Seite: zu einem Fünftel deckend auf Noir, darüber
 * eine Vignette, die zum Rand hin ins Schwarze geht. Das Brett darüber ist eine dunkle Scheibe und kein zweites Bild; zwei
 * Fassungen derselben Zeichnung in zwei Maßstäben übereinander wären ein Druckfehler.
 *
 * Die Datei trägt jedes Paket selbst ein (body::before in seinem brett.css), damit sie mit dem Ordner geht. Auf dem
 * Telefon bleibt es beim Wasserzeichen im Brett; ein Browser ohne :has() behält es auch auf dem Schreibtisch.
 */
@media (min-width: 64rem) and (min-height: 30.0625rem) {
  body:has(.ar-spielfeld:not([hidden]))::before,
  body:has(.ar-spielfeld:not([hidden]))::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  body:has(.ar-spielfeld:not([hidden]))::before {
    background: none center / cover no-repeat;
    opacity: 0.2;
  }

  body:has(.ar-spielfeld:not([hidden]))::after {
    background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 45%, rgb(11 11 13 / 0.85) 100%);
  }

  body:has(.ar-spielfeld:not([hidden])) .ar-brett {
    background: var(--ar-schleier);
  }

  body:has(.ar-spielfeld:not([hidden])) .ar-brett::before {
    content: none;
  }
}

/* Ab drei Farben braucht die Leiste mehr Breite, als das Brett im Querformat hat. */
.ar-spielfeld[data-ar-farben='3'] {
  --ar-hud-min: 28rem;
}

.ar-spielfeld[data-ar-farben='4'] {
  --ar-hud-min: 32rem;
}

/* Wo die Plaketten in zwei Reihen stehen (siehe .ar-plaketten), braucht die Leiste eine Reihe mehr Höhe. Die Leiste ist
   so breit wie die Bühne, bis ihre Mindestbreite erreicht ist; deshalb gelten hier dieselben Schwellen. */
@container (max-width: 20.99rem) {
  .ar-spielfeld[data-ar-farben='3'] {
    --ar-plaketten-zeilen: 2;
  }
}

@container (max-width: 29.99rem) {
  .ar-spielfeld[data-ar-farben='4'] {
    --ar-plaketten-zeilen: 2;
  }
}

/*
 * EIN BRETT, DAS AN DER HÖHE HÄNGT, BEKOMMT DIE ANZEIGELEISTE AUF DEM BREITBILD NEBEN SICH — UND NICHT DARÜBER.
 *
 * Der Absatz an der Reserve sagt es schon: „Ein Brett, das mit der Breite wächst, braucht die Breite; eines, das an
 * der Höhe hängt, verliert mit der Reihe darüber eine Plakettenhöhe." Fünfzehn der achtzehn Spiele wachsen mit der
 * Breite — für die ist die Reihe oben richtig. Kettenreaktion, Käsekästchen und Fluchtweg rechnen ihre Kachel aber
 * gegen `100dvh - --ar-reserve` (siehe dort), und in dieser Reserve stehen allein für die Leiste rund 127 Pixel.
 *
 * GEMESSEN AUF 2560 × 1400: Das Gitter von Käsekästchen stand auf 998 Pixeln Kante, der Breitenterm seiner Klammer
 * bei 301 gegen einen Höhenterm von 178 — es war also NIE breiten- und nie deckelbegrenzt, sondern in jeder Messung
 * höhenbegrenzt. Daneben blieben 686 Pixel Bühne leer. Die Leiste wandert deshalb dorthin, wo ohnehin Platz ist.
 *
 * DIE BREITENRECHNUNG WANDERT MIT. `--ar-feld` ist die Bühne, und die Spiele bauen ihren Breitenterm daraus; bliebe
 * es bei `100cqw`, rechnete ein Brett mit einer Breite, die es nicht mehr hat, und liefe seitwärts aus der Spalte.
 * Die Spalte der Leiste ist darum fest und wird abgezogen — nicht `1fr`, sonst wäre der Abzug nicht ausrechenbar.
 *
 * DIE LEISTE BRAUCHT DABEI KEINE EIGENE FASSUNG. Sie ist ihr eigener Maßcontainer (`container: ar-hud / inline-size`),
 * und ihre Plaketten fallen unter 21rem von selbst auf zwei Spalten — vier Farben stehen in der schmalen Spalte also
 * als Zweierblock. Was weg muss, ist allein ihre Mindestbreite: Die ist für die Reihe OBEN gerechnet.
 */
@media (min-width: 75rem) and (min-height: 41rem),
  (orientation: landscape) and (min-width: 48rem) and (min-height: 30rem) {
  .ar-spielfeld:is([data-ar-spiel='kettenreaktion'], [data-ar-spiel='kaesekaestchen'], [data-ar-spiel='fluchtweg']) {
    --ar-hud-spalte: 19rem;
    --ar-hud-luft: 1.25rem;
    --ar-hud-hoehe: 0rem;
    --ar-hud-fuge: 0rem;
    --ar-hud-min: 0rem;
    --ar-feld: calc(100cqw - var(--ar-hud-spalte) - var(--ar-hud-luft));
    grid-template-columns: minmax(0, 1fr) var(--ar-hud-spalte);
    align-items: start;
    column-gap: var(--ar-hud-luft);
  }

  /* Die Leiste steht im Markup VOR dem Brett (js/spielfeld.js); ohne ausdrückliche Spalten stünde sie also links. */
  .ar-spielfeld:is([data-ar-spiel='kettenreaktion'], [data-ar-spiel='kaesekaestchen'], [data-ar-spiel='fluchtweg']) > .ar-hud {
    grid-area: 1 / 2;
  }

  .ar-spielfeld:is([data-ar-spiel='kettenreaktion'], [data-ar-spiel='kaesekaestchen'], [data-ar-spiel='fluchtweg']) > .ar-brett {
    grid-area: 1 / 1;
  }
}

/* Im Querformat schrumpft das Brett auf 44-Pixel-Kacheln; die Namen brauchen trotzdem ihre Breite. Die Leiste ist ihr
   eigener Maßcontainer: Wie viele Plaketten nebeneinander passen, hängt an ihrer Breite, nicht an der der Bühne. */
.ar-hud {
  display: grid;
  gap: 0.4rem;
  width: min(100%, max(var(--ar-brettbreite), var(--ar-hud-min, 22rem)));
  container: ar-hud / inline-size;
}

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

/* Rund sieben Rem je Plakette, sonst bleibt vom Namen nur ein Buchstabe. */
@container ar-hud (min-width: 21rem) {
  .ar-plaketten[data-ar-anzahl='3'] {
    --ar-plaketten: 3;
  }
}

@container ar-hud (min-width: 30rem) {
  .ar-plaketten[data-ar-anzahl='4'] {
    --ar-plaketten: 4;
  }
}

/* Die Plakette hat eine feste Höhe, damit die Reserve des Bretts sie zählen kann. */
.ar-plakette {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'marke name du' 'zahl zahl zahl';
  align-items: center;
  column-gap: 0.35rem;
  min-width: 0;
  height: var(--ar-plakette-hoehe);
  padding: 0.3rem 0.45rem 0.65rem;
  border: var(--ar-tusche) solid var(--ar-plakettenfarbe);
  background: var(--ar-noir-2);
}

.ar-plakette[data-ar-farbe='rot'] {
  --ar-plakettenfarbe: var(--ar-rot);
}

.ar-plakette[data-ar-farbe='blau'] {
  --ar-plakettenfarbe: var(--ar-blau);
}

.ar-plakette[data-ar-farbe='gelb'] {
  --ar-plakettenfarbe: var(--ar-gelb);
}

.ar-plakette[data-ar-farbe='gruen'] {
  --ar-plakettenfarbe: var(--ar-gruen);
}

/* Wer dran ist, bekommt einen Akzentrand statt einer gefluteten Fläche — dieselbe Kanten-Betonung wie .ar-knopf--stark,
   keine zweite Vollton-Fläche neben Name und Marke. */
.ar-plakette[data-ar-dran] {
  outline: 2px solid var(--ar-plakettenfarbe);
  outline-offset: 2px;
}

/* Ausgeschieden heißt grau, gestrichelt und durchgestrichen. Die Marke im SVG wird über ihre Farbtokens grau: Die erbt
   sie durch das use-Element hindurch, eine Klassenregel von hier aus erreicht sie nicht. */
.ar-plakette[data-ar-raus] {
  --ar-plakettenfarbe: var(--ar-kante-griff);
  --ar-rot: var(--ar-kante-griff);
  --ar-blau: var(--ar-kante-griff);
  --ar-gelb: var(--ar-kante-griff);
  --ar-gruen: var(--ar-kante-griff);
  border-style: dashed;
  background: var(--ar-noir);
  color: var(--ar-kreide-2);
}

.ar-plakette > .ar-plakette__marke {
  grid-area: marke;
  width: 1.2rem;
  height: 1.2rem;
}

/* Der Farbname für Screenreader steht absolut im Namen; ohne eigenen Bezug hing er hinter einem langen Namen außerhalb
   der Plakette, und die Seite lief auf dem Telefon seitwärts. */
.ar-plakette > .ar-plakette__name {
  position: relative;
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(0.8rem, 3.4vw, 1.05rem);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-plakette[data-ar-raus] > .ar-plakette__name {
  text-decoration: line-through;
}

.ar-plakette > .ar-plakette__du {
  grid-area: du;
}

/*
 * Auf einer schmalen Plakette nimmt „DU“ dem Namen die Breite: Im flachen Querformat und zu dritt auf dem Telefon blieben
 * ihm 28 Pixel, und aus „Ben“ wurde „B…“. Dort steht „DU“ in der Zahlzeile, und der Name bekommt die ganze Breite. Die
 * Plakette misst sich dafür selbst; die Leiste ist je nach Besetzung zwei-, drei- oder vierspaltig. Die Zahl endet dann
 * vor „DU“: Über alle drei Spalten lag die Einheit zu dritt auf 375 Pixeln unter dem Kasten („Punk|DU|te“).
 */
.ar-plakette {
  container: ar-plakette / inline-size;
}

@container ar-plakette (max-width: 9rem) {
  .ar-plakette > .ar-plakette__name {
    grid-column: 2 / -1;
  }

  .ar-plakette > .ar-plakette__du {
    grid-row: 2;
    grid-column: 3;
  }

  .ar-plakette:has(> .ar-plakette__du) > .ar-plakette__zahl {
    grid-column: 1 / 3;
  }
}

.ar-plakette > .ar-plakette__zahl {
  grid-area: zahl;
  min-width: 0;
  overflow: hidden;
  font-family: var(--ar-schrift-mono);
  font-size: clamp(1.15rem, 5vw, 1.6rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.1;
  hyphens: none;
  white-space: nowrap;
}

/*
 * DIE EINHEIT HINTER DER ZAHL. Eine nackte „100“ sagte einem Neuling nicht, ob das Chips sind, Leben oder Kästchen. Sie
 * steht klein, in der Systemschrift und in Kreide-2, und sie ist der leisere Teil der Zeile: Was gezählt wird, ist die
 * Ziffer. Auf einer schmalen Plakette (vier Farben nebeneinander) schrumpft sie noch einmal, und wo es auch dann nicht
 * reicht, schneidet die Zeile — die Zahl steht vorn und geht nie verloren.
 */
.ar-plakette__einheit {
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.ar-plakette[data-ar-raus] .ar-plakette__einheit {
  display: none;
}

@container ar-plakette (max-width: 8rem) {
  .ar-plakette__einheit {
    font-size: 0.6rem;
    letter-spacing: 0;
  }
}

/*
 * DIE LUNTE WAR EIN SCHMUCKSTRICH UND IST JETZT EIN ZUGTIMER. Vier Pixel mit 0,45rem Inset auf jeder Seite waren aus
 * Armlänge auf einem Tablet kaum zu erkennen — wer wissen wollte, wie viel Frist bleibt, musste sich vorbeugen. Sie
 * liegt jetzt randlos über die volle Plakettenbreite und doppelt so hoch: eine Spur, kein Strich. Die Rechnung
 * dahinter bleibt unverändert dieselbe absolute Frist wie zuvor (`sp.bis`, `sp.frist_ms`, `lunteTicken()`) — nur
 * ihre Fläche ist gewachsen.
 */
.ar-lunte {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 8px;
  background: var(--ar-noir);
}

/* Die Spur trägt die Farbe der eigenen Plakette statt der allgemeinen Tinte — derselbe Ton wie Rand und Umriss, nur als Fläche. */
.ar-lunte__schnur {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--ar-rest, 1) * 100%);
  background: var(--ar-plakettenfarbe);
}

/*
 * Der Funke bleibt zehn Pixel vor jeder Kante der Plakette — so weit reicht er gedreht (14 · √2 / 2). Mittig auf dem
 * Ende einer vollen Lunte hing er über den Rand, und stand die Plakette des Zugs ganz rechts, rollte die Bühne auf dem
 * Telefon um diese sieben bis zehn Pixel seitwärts.
 */
.ar-lunte__funke {
  position: absolute;
  top: 50%;
  left: clamp(10px, calc(var(--ar-rest, 1) * 100%), calc(100% - 10px));
  width: 14px;
  height: 14px;
  translate: -50% -50%;
  animation: ar-funke-dreh 500ms step-end infinite;
}

@keyframes ar-funke-dreh {
  0% { rotate: 0deg; }
  50% { rotate: 45deg; }
}

/*
 * Der Fuß der Anzeigeleiste: links der Platz, den ein Spiel selbst füllt (`leiste(sicht, zusatz)`), daneben die
 * Standzeile.
 *
 * HIER STAND EIN BALKEN, DER SICH NACH DEM BESITZ JEDER FARBE TEILTE. Er flackerte bei jedem Zug, er füllte eine eigene
 * Zeile über dem Brett, und gesagt hat er nichts, was nicht schon als Zahl auf den Plaketten stand. Was von ihm bleibt,
 * ist der freie Platz für das Spiel; die Zahlen an den Plaketten sind der Spielstand und unverändert.
 */
.ar-hud__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.2rem 0.6rem;
}

.ar-hud__zusatz {
  display: inline-flex;
  flex: none;
  align-items: center;
}

/*
 * DIE ZUGZEILE über dem Brett. Eine feste Zeile: gleiche Höhe mit Text, ohne Text und mit Auslassungspunkten statt Umbruch,
 * denn ihre Höhe steht in der Reserve des Bretts (`--ar-zug-hoehe`) und ein Umbruch schöbe das Brett.
 *
 * WER DRAN IST, BEKOMMT EINE FLÄCHE IN SEINER FARBE, keine Lichthülle: Rand und Text tragen die Spielfarbe, die Marke der
 * Farbe steht davor, und die Zeile ist fett — die Farbe allein wäre der einzige Träger. Wer wartet, liest dieselbe Zeile
 * leiser, in Kreide-2 und ohne Kante. Nichts davon bewegt sich.
 */
.ar-zug {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--ar-zug-hoehe);
  min-width: 0;
  margin: 0;
  padding: 0 0.5rem;
  border: 2px solid transparent;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
}

.ar-zug__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ar-zug > .ar-zug__marke {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.ar-zug[data-ar-zug='ich'] {
  border-color: var(--ar-zugfarbe, var(--ar-kreide));
  background: var(--ar-noir-2);
  color: var(--ar-zugfarbe, var(--ar-kreide));
  font-weight: 700;
}

.ar-zug[data-ar-farbe='rot'] {
  --ar-zugfarbe: var(--ar-rot);
}

.ar-zug[data-ar-farbe='blau'] {
  --ar-zugfarbe: var(--ar-blau);
}

.ar-zug[data-ar-farbe='gelb'] {
  --ar-zugfarbe: var(--ar-gelb);
}

.ar-zug[data-ar-farbe='gruen'] {
  --ar-zugfarbe: var(--ar-gruen);
}

.ar-brett {
  position: relative;
  isolation: isolate;
  width: var(--ar-brettbreite);
  max-width: 100%;
  padding: var(--ar-brettluft);
  border: var(--ar-brettrand) solid var(--ar-kante-griff);
  background: var(--ar-noir);
}

/* Auf dem Schreibtisch ist die Fuge eine Handbreit größer: Dort steht neben dem Spielfeld eine ganze Bedienspalte,
   und ein Knopf, der die Rahmenkante berührt, sieht aus, als wäre er halb abgeschnitten. */
@media (min-width: 48rem) {
  .ar-spielfeld {
    --ar-brettluft: 0.75rem;
  }
}

/*
 * DAS DAUMENDOCK (`.ar-dock`). Was ein Brett auf dem Telefon als Handlung seines Zugs führt — „Abdrücken“, „Absprung!“,
 * „Würfeln!“, die Steckplätze des Tresors —, klebt am unteren Rand der Bühne, solange die in sich rollt, und steht am
 * Ende der Spalte wieder an seinem Platz. Vorher lag es unter dem Falz, und wer am Brett stand, rollte hinunter, drückte
 * und rollte zurück, um zu sehen, was geschah.
 *
 * STICKY STATT FIXED IST DIE GANZE ENTSCHEIDUNG, dieselbe wie bei Roulette und Keno: Ein fester Kasten nähme dem letzten
 * Stück Brett seinen Platz, ein klebender behält seine Zeile im Fluss und gibt sie am Ende der Spalte wieder frei.
 * Geklebt wird das Element, das die Klasse trägt, und es klebt nur so weit, wie sein Elternkasten reicht: Es gehört
 * deshalb an ein Kind eines Kastens, der über das ganze Brett geht — in einem Träger, der nur das Dock enthält, kann
 * `sticky` nichts verschieben (dann trägt der Träger die Klasse).
 *
 * NUR AUF DEM TELEFON IM HOCHFORMAT: unter 48rem Fensterbreite und ab 34rem Höhe. Im flachen Querformat nähme ein Dock
 * ein Drittel der Höhe, und ab dem Tablet steht das Brett, wie es ist. Grund und Kante sind die des Bretts: Was
 * darunter hindurchrollt, verschwindet hinter Noir und einer Kreidekante von zwei Pixeln — kein Glas, kein Schatten.
 *
 * ES KLEBT AM FENSTERRAND UND NICHT AN DER LUFT DARÜBER. Chrome lässt ein klebendes Element am Innenabstand seines
 * Rollkastens enden, und die Bühne hält unten zwei Rem Luft: Mit `bottom: 0` stand das Dock zwei Rem über der Kante, und
 * darunter rollte das Brett sichtbar weiter — ein Streifen Chips und Knöpfe unter der Leiste, die ihn verdecken sollte.
 * Der Versatz rechnet genau diese Luft heraus (`--ar-buehne-fuss`).
 *
 * ES LIEGT AUF EBENE VIER, UND ÜBER DEN REST ENTSCHEIDET DIE REIHENFOLGE. Auf Ebene zwei malten die Schilder der ersten
 * Runde (Ebene vier) über das Dock, sobald ihre Zone darunter hindurchrollte: „2 Gebot wählen“ stand auf „Gebot abgeben“.
 * Bei gleicher Ebene liegt oben, was später im Dokument steht — also das Dock über den Zonen, die vor ihm kommen, und
 * Abzeichen und Tafel über dem Dock, denn sie stehen hinter der Fläche des Spiels.
 */
@media (max-width: 47.99rem) and (min-height: 34rem) {
  /* Die zweite Zeile schlägt `position: relative` der Mini-Badges (weiter unten), wenn das Dock selbst eine Zone ist. */
  .ar-brett .ar-dock,
  .ar-brett[data-ar-hilfe] .ar-dock[data-ar-zone] {
    position: sticky;
    bottom: calc(-1 * var(--ar-buehne-fuss));
    z-index: 4;
    padding-block: 0.45rem;
    border-top: 2px solid var(--ar-kreide);
    background: var(--ar-noir);
  }
}

/*
 * AUF EINEM KURZEN TELEFON FÄLLT IM DOCK DER SCHIEBER, und Zahl und Pillen teilen sich eine Zeile. Auf 320 × 640 maß ein
 * Dock mit Wett-Bauteil zweihundert Pixel — ein Drittel des Fensters über dem Brett, dessen Karte oder Kiste gerade das
 * ist, worauf man setzt. Die Pillen können, was der Daumen am Schieber ohnehin schlecht trifft (Kleinstes, Hälfte,
 * Doppeltes, Alles), und die Zahl nimmt jeden Betrag dazwischen; beides bleibt 44 Pixel groß. Ab 42rem Fensterhöhe
 * steht der Schieber wieder da.
 */
@media (max-width: 47.99rem) and (min-height: 34rem) and (max-height: 41.99rem) {
  .ar-dock .ar-wetten:has(> .ar-wetten__pillen) {
    grid-template-columns: minmax(3rem, 1fr) minmax(12.1rem, 3fr);
    column-gap: 0.35rem;
  }

  .ar-dock .ar-wetten:has(> .ar-wetten__pillen) > :not(.ar-wetten__reihe, .ar-wetten__pillen) {
    grid-column: 1 / -1;
  }

  .ar-dock .ar-wetten__reihe:not(.ar-wetten__reihe--fest) {
    display: contents;
  }

  .ar-dock .ar-wetten__schiene {
    display: none;
  }

  .ar-dock .ar-wetten__pillen {
    grid-template-columns: repeat(4, minmax(2.75rem, 1fr));
  }

  .ar-dock .ar-wetten__pille {
    min-width: 0;
    padding-inline: 0.15rem;
    font-size: 0.95rem;
  }
}

/*
 * Das Wasserzeichen des Spiels: sein Bild aus assets/bg-<schluessel>.webp, das jedes brett.css selbst einträgt, damit
 * es mit dem Ordner geht. Es liegt über dem Grund und unter allem anderen (`isolation` am Brett). Fehlt die Datei, bleibt
 * der Grund schwarz.
 *
 * ES STAND AUF VIER PROZENT MIT `screen`, und auf Tiefschwarz war damit nichts zu sehen. Zwanzig Prozent deckend zeigen
 * die Zeichnung; was Schrift trägt, steht auf eigenem Grund (Felder, Kacheln, Scheine, Tafel) und behält seinen Kontrast.
 */
.ar-brett::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: none center / cover no-repeat;
  opacity: 0.2;
  pointer-events: none;
}

.ar-brett[data-ar-dran='rot'] {
  border-color: var(--ar-rot);
}

.ar-brett[data-ar-dran='blau'] {
  border-color: var(--ar-blau);
}

.ar-brett[data-ar-dran='gelb'] {
  border-color: var(--ar-gelb);
}

.ar-brett[data-ar-dran='gruen'] {
  border-color: var(--ar-gruen);
}

.ar-brett[data-ar-stoss] {
  animation: ar-stoss var(--ar-bild) step-end;
}

/*
 * Die Wucht skaliert den Versatz (stoss() in js/spielfeld.js); ohne Angabe ist es der Regelruck von einem Bild. Er geht
 * nach links oben: Was zum Anfang hin übersteht, verlängert keinen Rollbereich. Nach rechts rollte die Bühne ein Bild
 * lang seitwärts, wo das Brett sie ganz füllt — gemessen an der Schmuggler-Flotte beim Versenken, auf 375 Pixeln.
 */
@keyframes ar-stoss {
  0% { translate: calc(-4px * var(--ar-wucht, 1)) calc(-3px * var(--ar-wucht, 1)); }
  100% { translate: 0 0; }
}

/*
 * Der rote Schlag über das Brett (knallblitz() in js/spielfeld.js). Eine flache Fläche mit Deckkraft, kein Verlauf und
 * kein Schein — und sie liegt über dem Brett, aber unter Abzeichen, Countdown und Tafel, die alle ihr eigenes Fach
 * haben und darin später im Dokument stehen.
 */
.ar-brett[data-ar-knallblitz]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ar-rot);
  opacity: 0.3;
  pointer-events: none;
}

/*
 * DER PULS: ein Ring in Messing, der im Takt von 1,2 Sekunden erscheint und verschwindet — zwei harte Bilder, kein
 * Übergang, kein Schein. Er sagt „Jetzt ist es dran“, ohne etwas zu bewegen: Ein Knopf, der bereit ist (Keno mit fünf
 * Zahlen, der Tresor mit fünf Symbolen), zeigt es sich selbst an. Zweimal je 1,2 Sekunden sind weit unter den drei Blitzen
 * je Sekunde, die WCAG 2.3.1 zulässt.
 *
 * Wer Bewegung abbestellt hat, bekommt den Ring ohne Takt, und wer den Knopf mit der Tastatur erreicht, den
 * Fokusring des Hauses: Ein Puls, der den Fokus wegblinkt, wäre ein Fokus, der manchmal fehlt.
 */
@keyframes ar-puls {
  0% {
    outline: 3px solid var(--ar-funke);
    outline-offset: 4px;
  }

  50% {
    outline: 3px solid transparent;
    outline-offset: 4px;
  }
}

.ar-puls {
  outline: 3px solid var(--ar-funke);
  outline-offset: 4px;
  animation: ar-puls 1.2s step-end infinite;
}

.ar-puls:focus-visible {
  animation: none;
  outline: 3px solid var(--ar-kreide);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ar-puls {
    animation: none;
  }
}

/*
 * DIE MINI-BADGES DER ERSTEN RUNDE. Der Rahmen setzt `data-ar-hilfe` ans Brett und das Wort an jede Zone, die das Spiel
 * mit `data-ar-zone` markiert hat (`hilfe()` in js/spielfeld.js); hier steht nur, wie es aussieht: ein kleiner Streifen an
 * der oberen Kante der Zone, Messing auf Noir, ohne Schein. Er nimmt keinen Tipp an (`pointer-events: none`) und
 * verschwindet mit dem ersten Klick.
 *
 * Die Zone bekommt `position: relative` — deshalb gehört das Merkmal an ein Element ohne eigene Positionierung und ohne
 * `overflow: hidden`, das die Kante abschnitte. Ein Daumendock mit Zone klebt trotzdem: Seine Regel steht in derselben
 * Medienabfrage, in der es klebt, und schlägt diese hier über die Spezifität — ein klebender Kasten ist für das
 * Streifchen ebenso ein Bezugspunkt wie ein relativer. Außerhalb davon steht es wie jede Zone relativ; eine Ausnahme auf
 * allen Breiten ließ das Streifchen auf dem Schreibtisch an den nächsten positionierten Vorfahren rutschen.
 */
.ar-brett[data-ar-hilfe] [data-ar-zone] {
  position: relative;
}

.ar-brett[data-ar-hilfe] [data-ar-zone][data-ar-badge]::before {
  content: attr(data-ar-badge);
  position: absolute;
  top: -0.6rem;
  left: 0.4rem;
  z-index: 4;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--ar-funke);
  background: var(--ar-noir-3);
  color: var(--ar-funke);
  font-family: var(--ar-schrift);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

/*
 * DER TIPP AM TISCHRAND (`tipp()` in js/spielfeld.js): ein Zettel an der Oberkante des Bretts, Kreide auf Noir mit der
 * Senfkante des Hinweises links, solange die Nummern der ersten Runde stehen. Er liegt über der Fläche (Ebene drei) und
 * unter den Nummern und dem Dock (Ebene vier), nimmt keinen Tipp an — nur sein Kreuz — und steht nie im Fluss.
 */
.ar-tipp {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.1rem 0.4rem;
  padding: 0.35rem 0.35rem 0.4rem 0.6rem;
  border-bottom: 2px solid var(--ar-kante-griff);
  border-left: 4px solid var(--ar-funke);
  background: var(--ar-noir-3);
  color: var(--ar-kreide);
  font-size: 0.82rem;
  line-height: 1.3;
  pointer-events: none;
}

.ar-tipp[hidden] {
  display: none;
}

.ar-tipp__satz,
.ar-tipp__weg {
  grid-column: 1;
  margin: 0;
}

.ar-tipp__kopf {
  color: var(--ar-funke);
}

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

.ar-tipp__zu {
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 2;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  pointer-events: auto;
}

.ar-tipp__kreuz {
  width: 1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .ar-brett[data-ar-stoss] {
    animation: none;
  }

  .ar-brett[data-ar-knallblitz]::after {
    content: none;
  }
}

.ar-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ar-knall__bild {
  opacity: 0;
  animation-duration: var(--ar-welle);
  animation-timing-function: step-end;
  animation-fill-mode: both;
}

.ar-knall__bild--1 {
  animation-name: ar-bild-1;
}

.ar-knall__bild--2 {
  animation-name: ar-bild-2;
}

.ar-knall__bild--3 {
  animation-name: ar-bild-3;
}

@keyframes ar-bild-1 {
  0% { opacity: 1; }
  33.333% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes ar-bild-2 {
  0% { opacity: 0; }
  33.333% { opacity: 1; }
  66.667% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes ar-bild-3 {
  0% { opacity: 0; }
  66.667% { opacity: 1; }
  100% { opacity: 0; }
}

/* Ebene vier wie Dock und Tafel: nach der Fläche des Spiels und damit über dem Dock, vor der Tafel und damit unter ihr. */
.ar-abzeichen {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: min(92%, 22rem);
  aspect-ratio: 200 / 128;
  pointer-events: none;
  translate: -50% -50%;
  rotate: -8deg;
}

.ar-abzeichen__bild,
.ar-abzeichen__wort {
  grid-area: 1 / 1;
}

.ar-abzeichen__bild {
  width: 100%;
  height: 100%;
}

/*
 * Die Schrift wächst mit dem Brett, das Abzeichen höchstens bis 22rem: Ohne den dritten Deckel liefe ein Wort auf einem
 * breiten Brett über die Zacken. Schmal greift er nie, dort ist die Einheit kleiner.
 *
 * DER VIERTE DECKEL GILT DER LÄNGE DES WORTS. Die Zacken haben ihre tiefste Kerbe auf der Mittellinie, und mehr als 58
 * Prozent der Breite des Abzeichens reichen dort in die Tusche. Mit dem dritten Deckel allein füllte „GEKNACKT!“ auf 1440
 * Pixeln 77 Prozent und „IM VERSTECK!“ 95; auf dem Telefon „ENTSCHÄRFT!“ 64. Die Breite des Worts in Geviert misst
 * abzeichen() in js/spielfeld.js; bis dahin greift der Deckel nicht, und ein Wort, das umbräche, maß nur eine Zeile.
 */
.ar-abzeichen__wort {
  color: var(--ar-noir);
  font-family: var(--ar-schrift-plakat);
  font-size: min(3rem, calc(var(--ar-einheit) * 0.43), calc(0.115 * min(0.92 * (var(--ar-brettbreite) - 2 * var(--ar-brettrand)), 22rem)), calc(0.58 * min(0.92 * (var(--ar-brettbreite) - 2 * var(--ar-brettrand)), 22rem) / var(--ar-wortbreite, 1)));
  line-height: 1;
  white-space: nowrap;
  transform: skewX(-6deg);
}

/*
 * Der Countdown über dem Brett: 3, 2, 1, ANPFIFF! Er springt von Ziffer zu Ziffer, ohne Übergang, und das Brett bleibt
 * darunter zu sehen — es steht ja schon. Bedienbar ist es erst nach dem Anpfiff; dafür sorgt `inert` auf der Fläche.
 */
.ar-countdown {
  position: absolute;
  /* Bis an den Rahmen: Ein Schleier, der einen Ring Brett stehen lässt, sieht nach einem Zeichenfehler aus und nicht
     nach einem Vorhang. Die Innenkante des Rands IST dieser Rahmen — mehr als `inset: 0` ragte über das Brett hinaus
     (wie beim Konfetti, weiter unten). */
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: var(--ar-schleier-leicht);
}

.ar-countdown[data-ar-anpfiff] {
  background: none;
}

.ar-countdown__wort {
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: min(7rem, calc(var(--ar-einheit) * 1.3));
  line-height: 1;
  -webkit-text-stroke: 4px var(--ar-noir);
  paint-order: stroke fill;
}

.ar-countdown[data-ar-anpfiff] .ar-countdown__wort {
  color: var(--ar-funke);
  font-size: min(3rem, calc(var(--ar-einheit) * 0.5));
  transform: skewX(-6deg);
}

/* Ein Griff, der noch unterwegs ist: Der Knopf nimmt keinen zweiten Klick an, bleibt aber, wo er ist. */
.ar-knopf[aria-disabled='true'] {
  cursor: progress;
}

/* Oben verankert: Wird die Tafel höher als ein kleines Brett, wächst sie nach unten und deckt Plaketten und Siegzeile
   nicht zu. */
/*
 * Auf einem Brett, das höher ist als das Fenster, stand die Tafel über fast seine ganze Höhe, ihr Inhalt in der Mitte: Bei
 * Tresorknacker mit sechzehn Versuchen lagen „Nächste Runde“ und „Warteraum“ auf 1440 × 900 unter dem Falz. Sie ist deshalb
 * höchstens so hoch, wie unter der Spielleiste Platz ist, und rückt höchstens 2rem vom oberen Rand ab.
 */
.ar-tafel {
  position: absolute;
  top: min(8%, 2rem);
  left: 50%;
  z-index: 4;
  width: max(90%, 17rem);
  min-height: min(84%, calc(100svh - var(--ar-hauskopf) - var(--ar-reserve)));
  /*
   * SIE ROLLT IN SICH SELBST. Seit die Seite unter einem Brett stillsteht, käme auf 375 px sonst niemand mehr an
   * „Nächste Runde“, sobald Abrechnung, Podium und Spielwahl übereinanderstehen. `safe center` hält die Sachen mittig,
   * solange sie passen, und rückt sie beim Überlaufen an die Oberkante — zentriert läge der Kopf sonst über dem Anfang
   * des Rollbereichs und wäre unerreichbar.
   *
   * IHRE GRENZE IST DER SCHIRM UND NICHT DAS BRETT, und das ist gemessen: Auf dem Telefon ist das Käsekästchen-Brett
   * 318 Pixel hoch, und ein Deckel von 84 Prozent davon ließ 625 Pixel Abrechnung durch ein Fenster von 268 laufen.
   * Sie darf über das Brett hinausragen — sie tat das immer, und die Bühne rollt.
   */
  max-height: calc(100svh - var(--ar-hauskopf) - var(--ar-reserve));
  overflow-y: auto;
  overscroll-behavior: contain;
  translate: -50% 0;
  display: grid;
  align-content: safe center;
  justify-items: center;
  gap: 0.6rem;
  padding: 1rem;
  border: 6px solid var(--ar-kreide);
  background: var(--ar-noir);
  text-align: center;
}

/*
 * ZWEI FÄCHER, EIN GRUND-RASTER. `.ar-tafel__ergebnis` trägt, was war (Sieger, Stand, Abrechnung, Podium),
 * `.ar-tafel__aktion`, was als Nächstes ansteht (Wahlrecht, Angebote, Knöpfe) — dieselbe Reihenfolge wie früher, nur
 * in zwei benannten Kästen statt in einem. Stehend im Fenster bleiben beide Fächer einfach übereinander, jedes mit
 * demselben Abstand, den vorher `.ar-tafel` selbst zwischen all seinen Kindern trug: Sichtbar ändert sich hier
 * nichts. Erst auf einem Tablet quer stellt sie ein eigener Absatz weiter unten nebeneinander.
 */
.ar-tafel__ergebnis,
.ar-tafel__aktion {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  justify-items: center;
}

/*
 * Im flachen Querformat steht das Brett rechts am Rand der Bühne, und ein kleines ist dort schmaler als die 17rem der
 * Tafel: Mittig darüber stand sie auf 667 × 375 bei Käsekästchen 27 Pixel über dem Fensterrand, und die Seite lief
 * seitwärts. Sie schließt dort rechts mit dem Brett ab und wächst nach links, höchstens 15rem, damit ihre Kante nicht
 * über die Plakette daneben reicht. Kettenreaktion hatte dieselbe Regel schon in seinem Paket.
 */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-tafel {
    right: calc(-1 * (var(--ar-brettrand) + var(--ar-brettluft)));
    left: auto;
    width: max(90%, 15rem);
    translate: none;
  }

  /* Die Spielwahl steht hier hinter den Knöpfen: Davor lag „Nächste Runde“ beim Host 60 bis 110 Pixel unter dem Falz,
     und wer weiterwill, soll nicht erst an einer Kachelwand vorbeirollen. */
  .ar-tafel__weiter {
    order: 1;
  }
}

/*
 * Das Podium: nach einer Runde ihre Platzierung, im Schluss der Stand des Turniers, der Sieger mit Funken vorn. Auf dem
 * Telefon steht es nicht da, denn dort trägt die Standzeile denselben Stand, und jede Zeile mehr schöbe „Nächste Runde“
 * unter den Falz.
 */
.ar-podium {
  display: none;
  gap: 0.35rem;
  width: 100%;
  max-width: 30rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * DIE EHRUNG AM ENDE DES ABENDS STEHT ÜBERALL, AUCH AUF DEM TELEFON. Der Grund, warum das Podium dort sonst fehlt,
 * ist „jede Zeile mehr schöbe ‚Nächste Runde‘ unter den Falz“ — und genau den gibt es im Schluss nicht mehr: Danach
 * kommt keine Runde, sondern „Nochmal“ oder der Warteraum. Wer eine Stunde gespielt hat, soll seinen Platz sehen.
 */
.ar-podium[data-ar-ehrung] {
  display: grid;
}

@media (min-width: 64rem) and (min-height: 30.0625rem) {
  /* Auf dem Schreibtisch ist die Tafel ein Podium über dem Brett und so breit, wie die Bühne es hergibt. Das Brett hält
     solange die Höhe bis zum Falz, damit eine volle Tafel über einem flachen Brett nicht aus ihm heraushängt. */
  .ar-brett:has(> .ar-tafel:not([hidden])) {
    min-height: calc(100svh - var(--ar-hauskopf) - var(--ar-reserve));
  }

  .ar-podium {
    display: grid;
  }
}

.ar-podium__kopf {
  margin: 0 0 0.2rem;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
}

.ar-podium__platz {
  display: grid;
  grid-template-columns: 1.4rem 2rem 1.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
  text-align: left;
}

/* Vorn steht, wer gewonnen hat: Senfkante und Funke, nicht nur ein Ton. */
.ar-podium__platz[data-ar-platz='1'] {
  border-color: var(--ar-funke);
  font-size: 1.15rem;
}

.ar-podium__funke {
  width: 1.4rem;
  height: 1.4rem;
}

.ar-podium__nr {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ar-podium__marke {
  width: 1.2rem;
  height: 1.2rem;
}

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

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

/*
 * Die drei Medaillen der Ehrung: eine Kante in Gold, Silber und Bronze und links ein Streifen derselben Farbe. Ihr
 * Name steht daneben im Wert („Gold · 4 Siege“), denn Farbe allein trägt in diesem Haus nie eine Auskunft. Platz 1
 * behält seine Senfkante und seinen Funken aus der Regel darüber; hier kommt nur der Streifen dazu.
 */
.ar-podium__platz[data-ar-medaille] {
  border-color: var(--ar-medaille);
  box-shadow: inset 4px 0 0 0 var(--ar-medaille);
}

.ar-podium__platz[data-ar-medaille='1'] {
  --ar-medaille: var(--ar-funke);
}

.ar-podium__platz[data-ar-medaille='2'] {
  --ar-medaille: var(--ar-silber);
}

.ar-podium__platz[data-ar-medaille='3'] {
  --ar-medaille: var(--ar-bronze);
}

/*
 * DER PLAN DES K.O.-POKALS (js/pokal.js): im Warteraum als Vorschau, in Walze und Einweisung knapp, auf der Tafel mit
 * jedem Ergebnis. Die Partien stehen als Karten in der Reihenfolge, in der gespielt wird; wo Platz ist, stellt sich der
 * Baum zu viert als Baum auf — die Halbfinals links, das Finale rechts daneben, Platz drei darunter — und die Gruppe
 * zu dritt als Reihe mit dem Finale darunter. Die anstehende Partie trägt die Senfkante UND ihr Wort, der Sieger einer
 * Partie den Funken UND ein Wort für den Screenreader: Farbe trägt nie allein.
 */
.ar-pokal-baum {
  container: ar-pokal / inline-size;
  display: grid;
  gap: 0.6rem;
  width: 100%;
  max-width: 44rem;
  margin: 0;
  padding: 0.75rem;
  border: 2px solid var(--ar-kante);
  box-shadow: inset 0 3px 0 0 var(--ar-funke);
  background: var(--ar-noir-2);
  text-align: left;
}

.ar-pokal-baum[data-ar-knapp] {
  padding: 0.5rem;
}

.ar-pokal-baum__titel {
  margin: 0;
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: 1.05rem;
}

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

.ar-pokal-baum__partien {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-pokal-baum__partie {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir);
}

.ar-pokal-baum__partie[data-ar-stufe='finale'] {
  border-color: var(--ar-kante-griff);
}

.ar-pokal-baum__partie[data-ar-jetzt] {
  border-color: var(--ar-funke);
  box-shadow: inset 4px 0 0 0 var(--ar-funke);
}

.ar-pokal-baum__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 0.6rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
}

.ar-pokal-baum__zusatz {
  font-weight: 700;
}

.ar-pokal-baum__partie[data-ar-jetzt] .ar-pokal-baum__zusatz {
  color: var(--ar-funke);
}

.ar-pokal-baum__paar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  font-size: 0.95rem;
}

.ar-pokal-baum[data-ar-knapp] .ar-pokal-baum__paar {
  font-size: 0.85rem;
}

.ar-pokal-baum__seite {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.ar-pokal-baum__seite[data-ar-frei] {
  color: var(--ar-kreide-2);
}

.ar-pokal-baum__seite[data-ar-sieger] {
  color: var(--ar-kreide);
  font-weight: 700;
}

.ar-pokal-baum__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

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

.ar-pokal-baum__marke,
.ar-pokal-baum__funke {
  flex: none;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

.ar-pokal-baum__tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ar-pokal-baum__unter {
  margin-bottom: 0.3rem;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  text-align: left;
}

.ar-pokal-baum__tabelle th,
.ar-pokal-baum__tabelle td {
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid var(--ar-kante);
  font-weight: 400;
  text-align: left;
}

.ar-pokal-baum__tabelle th[scope='row'] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ar-pokal-baum__tabelle td,
.ar-pokal-baum__tabelle th[scope='col']:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@container ar-pokal (min-width: 30rem) {
  .ar-pokal-baum[data-ar-art='baum'] .ar-pokal-baum__partien {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: 'hf1 finale' 'hf2 finale' 'platz3 .';
  }

  .ar-pokal-baum[data-ar-art='baum'] .ar-pokal-baum__partien > .ar-pokal-baum__partie:nth-child(1) {
    grid-area: hf1;
  }

  .ar-pokal-baum[data-ar-art='baum'] .ar-pokal-baum__partien > .ar-pokal-baum__partie:nth-child(2) {
    grid-area: hf2;
  }

  .ar-pokal-baum[data-ar-art='baum'] .ar-pokal-baum__partien > .ar-pokal-baum__partie:nth-child(3) {
    grid-area: platz3;
  }

  .ar-pokal-baum[data-ar-art='baum'] .ar-pokal-baum__partien > .ar-pokal-baum__partie:nth-child(4) {
    grid-area: finale;
    align-self: center;
  }

  .ar-pokal-baum[data-ar-art='gruppe'] .ar-pokal-baum__partien {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ar-pokal-baum[data-ar-art='gruppe'] .ar-pokal-baum__partien > .ar-pokal-baum__partie[data-ar-stufe='finale'] {
    grid-column: 1 / -1;
  }
}

/*
 * DIE TROPHÄE im Schluss eines entschiedenen Pokals: der Pokal aus dem Sprite (`#ar-pokal`, Senf mit Tusche) und
 * darunter die Gravur mit dem Namen. Das Schild ist ein Gegenstand und trägt deshalb Versalien; der Name steht in der
 * Plakatschrift wie sonst in der Siegerzeile, die er hier ersetzt.
 */
.ar-pokal-trophaee {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  max-width: 100%;
  margin: 0;
}

.ar-pokal-trophaee__bild {
  width: clamp(4.5rem, 18vw, 7rem);
  height: auto;
  aspect-ratio: 64 / 72;
}

.ar-pokal-trophaee__gravur {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  max-width: 100%;
  padding: 0.35rem 0.9rem;
  border: 2px solid var(--ar-funke);
  background: var(--ar-noir);
}

.ar-pokal-trophaee__marke {
  color: var(--ar-funke);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ar-pokal-trophaee__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-plakat);
  font-size: max(1.2rem, min(2.2rem, calc(var(--ar-einheit) * 0.3)));
  line-height: 1.1;
  overflow-wrap: anywhere;
}

/*
 * DIE FEIER ÜBER DEM PODIUM: Papierschnipsel in den Farben des Tisches, die in harten Bildern fallen (README,
 * Abschnitt 8, Ziffer 5). Sie liegt über der Tafel und nimmt keinen Tipp an; was darunter steht, bleibt bedienbar.
 * Sie ist beschnitten, damit kein Schnipsel den Rollbereich der Tafel verlängert.
 */
.ar-konfetti {
  position: absolute;
  /*
   * Bis an den Rahmen: Schnipsel, die einen Ring vor der Kante aufhören, fallen nicht. Ein absolutes Kind misst sich an
   * der Innenkante des Rands, und die Brettluft liegt darin schon. Hier stand sie noch einmal als negativer Abstand, und
   * das Konfetti ragte um Luft minus Rand über das Brett hinaus — sechs Pixel auf dem Telefon, zehn auf dem Schreibtisch —,
   * und am Schluss eines Turniers lief die Bühne seitwärts.
   */
  inset: 0;
  /* Über der Tafel (4), denn seit sie in einem eigenen Fach hängt, liegt sie nicht mehr in ihr. */
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.ar-konfetti__stueck {
  position: absolute;
  top: 0;
  left: var(--ar-x);
  width: 0.5rem;
  height: 0.85rem;
  /* Zwölf harte Stufen: kein Federn, kein Nachwippen, keine Überblendung. */
  animation: ar-konfetti-fall var(--ar-dauer) steps(12) var(--ar-halt) both;
}

.ar-konfetti__stueck[data-ar-farbe='rot'] {
  background: var(--ar-rot);
}

.ar-konfetti__stueck[data-ar-farbe='blau'] {
  background: var(--ar-blau);
}

.ar-konfetti__stueck[data-ar-farbe='gelb'] {
  background: var(--ar-gelb);
}

.ar-konfetti__stueck[data-ar-farbe='gruen'] {
  background: var(--ar-gruen);
}

@keyframes ar-konfetti-fall {
  from {
    translate: 0 -3rem;
    rotate: 0deg;
  }

  to {
    translate: 0 100svh;
    rotate: var(--ar-dreh);
  }
}

/* Wer wenig Bewegung bestellt hat, bekommt gar keine: Die Fläche trägt keine Auskunft, es fehlt also nichts. */
@media (prefers-reduced-motion: reduce) {
  .ar-konfetti {
    display: none;
  }
}

/*
 * Wer gewonnen hat und deshalb das nächste Spiel wählt. Hell wie eine Nachricht und nicht wie ein Nachsatz: Der Tisch
 * wartet hier auf eine Person, und die steht mit ihrer Marke davor.
 */
.ar-tafel__wahlrecht {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 24rem;
  margin: 0;
  padding-block: 0.3rem;
  border-block: 2px solid var(--ar-funke);
  color: var(--ar-kreide);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.ar-tafel__wahlrecht > span {
  min-width: 0;
}

/*
 * DER BALKEN ZUR FRIST DES WAHLRECHTS — dieselbe Bauform wie die Lunte der Plakette (Spur plus gefüllte Fläche, keine
 * Transition, direkt gegen eine absolute Serverzeit gerechnet in `wahlrechtTicken()`, js/spielfeld.js). Er steht
 * unter dem Satz und nicht daneben: In der Zeile selbst hätte er neben Marke und Namen keine eigene Breite.
 */
.ar-tafel__wahlrecht-frist {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: 6px;
  margin: 0.4rem auto 0;
  background: var(--ar-noir-3);
}

.ar-tafel__wahlrecht-schnur {
  display: block;
  height: 100%;
  width: calc(var(--ar-rest, 1) * 100%);
  background: var(--ar-funke);
}

/* Die Zeile unter dem Turniersieger („nach 5 Runden“) spricht wie der Kopf: Zusammen lesen sie sich als ein Satz. */
.ar-tafel__kopf,
.ar-tafel__zusatz {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.ar-tafel__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  margin: 0;
  font-family: var(--ar-schrift-plakat);
  /* Die Untergrenze trägt kleine Felder: Auf dem Fluchtweg zu dritt stand der Sieger auf dem Telefon in 8 Pixeln. */
  font-size: max(1rem, min(2.4rem, calc(var(--ar-einheit) * 0.34)));
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.ar-tafel__name > span {
  min-width: 0;
}

.ar-tafel__marke {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
}

/* Die Zeile ist 1,1 em hoch, der Knopf 44 Pixel: Der Rand nimmt den Unterschied, ganz gleich, wie groß der Name steht. */
.ar-tafel__umbenennen {
  margin-block: calc(0.55em - 22px);
}

/*
 * DIE SPRECHBLASE AM SIEGERPODEST. Ein Spruch aus dem Mund dessen, der den Abend gemacht hat — Zierde, kein Knopf,
 * keine Frist, keine Auskunft über die Abrechnung darunter.
 *
 * SIE IST DIE EINE RUNDUNG DIESER TAFEL, und das ist keine neue Ausnahme: Eine Sprechblase mit harter Ecke ist ein
 * Kasten (CLAUDE.md, Abschnitt 7, und README Abschnitt 8, Ziffer 13). Der Zipfel ist ein gekipptes Quadrat aus
 * derselben Fläche mit derselben Kante — kein Schatten, kein Verlauf, keine Unschärfe.
 *
 * Sie steht in der Comic-Schrift und nicht in der Plakatschrift: Gesprochen wird hier, nicht plakatiert.
 */
.ar-tafel__blase {
  position: relative;
  max-width: min(100%, 30rem);
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.85rem;
  border: 2px solid var(--ar-kante-griff);
  border-radius: 0.6rem;
  background: var(--ar-noir-3);
  color: var(--ar-comic-papier);
  font-family: var(--ar-schrift-comic);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.45;
  text-wrap: pretty;
}

.ar-tafel__blase::before {
  content: '';
  position: absolute;
  top: -0.45rem;
  left: 1.4rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--ar-kante-griff);
  border-right: 0;
  border-bottom: 0;
  background: var(--ar-noir-3);
  rotate: 45deg;
}

.ar-tafel__knoepfe {
  display: grid;
  gap: 0.6rem;
  width: 100%;
  max-width: 16rem;
  margin-top: 0.5rem;
}

.ar-tafel__spielstand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--ar-schrift-mono);
  font-size: max(1rem, min(2rem, calc(var(--ar-einheit) * 0.3)));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  hyphens: none;
}

/*
 * WIE ES NACH EINER RUNDE WEITERGEHT: die Angebote, dahinter bei Bedarf der Katalog, darunter der Warteraum.
 *
 * Hier lag ein Band aus Spielkarten zum Durchwischen, und mit achtzehn Spielen war das keine Auswahl mehr. „Nochmal"
 * und „Empfohlen" stehen jetzt als eigene Knöpfe da — das sind die beiden Wünsche, die eine Runde übrig lässt —, und
 * wer etwas ganz anderes sucht, klappt den Katalog auf. Trägt die Tafel ihn, wird sie breiter als ein kleines Brett,
 * höchstens so breit wie die Bühne. Im flachen Querformat nicht: Dort steht das Brett rechts neben der Anzeigeleiste,
 * und eine Tafel über sein Maß hinaus liefe aus dem Bild.
 *
 * SEIT DIE ANGEBOTE SELBST ANPFEIFEN, IST DIESER BLOCK DIE HANDLUNG DER TAFEL (`data-ar-slot="knoepfe"`). Er trug
 * einmal einen Riegel von 1,2 Sekunden gegen einen nachgeschobenen Finger; seit die Tafel vom ersten Bild an
 * vollständig steht, ist er gefallen (api/rahmen.php, AR_RUNDENENDE_MS).
 */
@media (orientation: portrait), (min-height: 30.0625rem) {
  /* Ohne `>`: Der Block liegt seit dem Zweispalten-Fach der Tafel (weiter unten) im Fach `.ar-tafel__aktion` und ist
     damit ein Enkel, kein Kind mehr — :has() prüft ihn trotzdem, egal wie tief er liegt. */
  .ar-tafel:has(.ar-tafel__weiter) {
    width: min(40rem, var(--ar-feld));
  }
}

.ar-tafel__weiter {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

/*
 * DREI GLEICH GROSSE KARTEN NEBENEINANDER. Das Raster verlangte je Karte 8,5rem, und damit passten nur zwei in eine
 * Zeile — auf 375 Pixeln wie in der rechten Hälfte der Tafel am Schreibtisch; die dritte stand allein darunter und las
 * sich wie ein Nachtrag. 5,5rem tragen Zeichen, Wort und einen Spielnamen mit seinen weichen Trennzeichen (worte.js);
 * erst unter rund 330 Pixeln Tafelbreite rückt die dritte in die nächste Zeile.
 */
.ar-tafel__angebote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(5.5rem, 100%), 1fr));
  gap: 0.4rem;
}

/* Drei Zeilen je Karte: das Zeichen, was sie tut, und das Spiel, das sie anpfeift. Wer „Nochmal" liest, soll nicht
   raten müssen, was „nochmal" war. */
.ar-tafel__angebot {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.25rem;
  min-height: 5.5rem;
  padding: 0.6rem 0.3rem;
  text-align: center;
}

.ar-tafel__angebot-zeichen {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

.ar-tafel__angebot-wort {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
 * NICHT JEDER NAME TRÄGT EIN WEICHES TRENNZEICHEN, und in einer Karte von rund 95 Pixeln brach „Nagelbalken“ auf dem
 * Telefon als „Nagelbalke / n“. Die Silbentrennung des Browsers nimmt die weichen Trennzeichen mit und trennt den Rest
 * nach der Sprache der Seite; `overflow-wrap` bleibt nur der Notausgang, wo sie nichts findet.
 */
.ar-tafel__angebot-spiel {
  max-width: 100%;
  font-size: clamp(0.8rem, 3.2vw, 0.9rem);
  hyphens: auto;
  overflow-wrap: anywhere;
}

/*
 * WARUM „EMPFOHLEN“: Dauer und Gattung als leise dritte Zeile unter dem Namen. Kreide-2 auf dem Grund des Knopfes
 * (8:1, beim Überfahren 6,9:1); der starke Knopf trägt keine. Dauer und Gattung sind je ein Block: Die Zeile bricht
 * am Mittelpunkt und nicht mitten in „Kessel & Lotterie“ — mit `text-wrap: balance` stand am Schreibtisch „Kessel“
 * oben und „& Lotterie“ allein darunter. Erst wo ein Stück breiter ist als die Karte, bricht es in sich.
 */
.ar-tafel__angebot-grund {
  max-width: 100%;
  color: var(--ar-kreide-2);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ar-tafel__angebot-grund > span {
  display: inline-block;
  max-width: 100%;
}

/* Dass ein Tipp auf ein Angebot die Runde startet, steht als Satz darunter und nicht nur in der Aufschrift: Ein Knopf,
   der zwei Dinge auf einmal tut, sagt es einmal ausdrücklich. */
.ar-tafel__angebote-satz {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
}

/* Ohne min-width: 0 maß die Spalte der Tafel, was der ganze Katalog braucht: Auf 375 × 740 stand sie mit 576 Pixeln in
   einer Tafel von 343, alles darin rutschte nach rechts, und die Seite lief 239 Pixel seitwärts. Gedeckelt ist er
   nicht mehr — er nimmt die Breite, die der Block ihm lässt. */
.ar-tafel__spiele {
  width: 100%;
  min-width: 0;
}

/*
 * AUF EINEM BREITBILD STEHT DIE TAFEL ZWEISPALTIG: links das Ergebnis, rechts die Entscheidung.
 *
 * Sie war ein einziger breiter Block mit einem Reihenfolge-Trick: `.ar-tafel__weiter` sprang per `order: 1` über
 * Podium und Paarung, weil beide sonst auf 1440 × 900 unter einem hohen Brett unter den Falz rutschten. Der Trick
 * hat funktioniert und trotzdem nur die Hälfte des Problems gelöst — die Wahl stand zwar weiter oben, aber immer
 * noch UNTER der ganzen Abrechnung, und wer nach einem Sieg als Erstes etwas tun wollte, scrollte an Sieger, Stand
 * und Tableau vorbei, um sie zu finden.
 *
 * ZWEI SPALTEN LÖSEN DAS AN DER WURZEL. `.ar-tafel__ergebnis` und `.ar-tafel__aktion` (siehe die Fächer weiter oben)
 * stehen jetzt nebeneinander statt übereinander: Die Wahl ist von der ersten Zeile an sichtbar, ganz ohne etwas
 * umzusortieren. `order` fällt damit weg — es wirkte ohnehin nur zwischen direkten Kindern, und die liegen seit der
 * Aufteilung eine Ebene tiefer.
 *
 * DIE ZWEITE BEDINGUNG SENKT DIE SCHWELLE FÜRS QUERFORMAT AUF 768 PIXEL — dieselbe Zahl wie beim Nagelbalken und bei
 * Kettenreaktion weiter oben in dieser Datei: Ein Tablet quer ist schmaler als ein Schreibtisch, aber genauso breit
 * wie hoch das Brett dahinter ist, und die zwei Spalten brauchen dafür keine 1024 Pixel.
 */
@media (min-width: 64rem) and (min-height: 30.0625rem),
  (orientation: landscape) and (min-width: 48rem) and (min-height: 30.0625rem) {
  .ar-tafel,
  .ar-tafel:has(.ar-tafel__weiter) {
    width: min(56rem, var(--ar-feld));
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    justify-items: stretch;
    gap: 0.9rem 1.75rem;
    padding: 1.5rem 2rem;
  }

  /*
   * TRÄGT DIE TAFEL EINE ABRECHNUNG, BEKOMMT DIE LINKE SPALTE DEN PLATZ. In 56rem blieben dem Tableau rund 27rem, und
   * vier Spalten — Wer, Vermögen, Letzte Wette, Bilanz — brachen darin jeden zweiten Namen mitten im Wort um. Die
   * Tafel wird breiter, soweit das Brett es hergibt, und die Spalte der Entscheidung behält ihre gut 25rem.
   */
  .ar-tafel:has(.ar-tableau) {
    width: min(72rem, var(--ar-feld));
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .ar-tafel.ar-tafel--katalog,
  .ar-tafel:has(.ar-tafel__spiele) {
    width: min(60rem, var(--ar-feld));
    grid-template-columns: 1fr;
  }

  .ar-tafel__ergebnis,
  .ar-tafel__aktion {
    align-content: start;
    gap: 0.9rem;
  }

  /*
   * DAS FACH DER ENTSCHEIDUNG REICHT BIS ZUM BODEN, UND DIE KAFFEEKASSE STEHT DORT. Neben einer langen Abrechnung war
   * das Fach so hoch wie sein Inhalt, und die Kasse hing direkt unter dem Croupier — mitten in der Tafel, zwischen dem
   * Satz und dem leeren Rest der Spalte. Jetzt zieht sich das Fach auf die Höhe der Zeile (`align-self: stretch`), und
   * `margin-top: auto` schiebt die Kasse an seine Unterkante: oben, was als Nächstes ansteht, unten der ruhige Fuß.
   *
   * ES IST EINE FLEX-SPALTE UND KEIN RASTER. In einem Raster mit `align-content: start` ist jede Zeile so hoch wie
   * ihr Kind, und ein Außenabstand `auto` fände keinen Platz, den er schlucken könnte. Die Kinder tragen ihre Breite
   * selbst (`width: 100%` mit `max-width`, Sätze in ihrer Textbreite), mittig wie im Raster davor.
   */
  .ar-tafel__aktion {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
  }

  .ar-tafel__aktion > .ar-tafel__kasse {
    margin-top: auto;
  }

  /*
   * UND DER FUSS BLEIBT IM BILD. Neben einer langen Abrechnung rollt die Tafel in sich selbst, und die Unterkante des
   * Fachs liegt dann unter ihrer sichtbaren Kante: gemessen auf 1440 × 900 beim Schatten-Express 230 Pixel darunter.
   * `sticky` hält die Kasse dort an der Unterkante der Tafel, bis ihr eigener Platz ins Bild rollt. Erst ab 40rem
   * Fensterhöhe — darunter rückte sie über Croupier und Knöpfe, und ein Fuß, der „Nochmal“ verdeckt, ist keiner. Der
   * Grund ist der der Tafel, damit nichts durch ihn hindurchscheint.
   */
  @media (min-height: 40rem) {
    .ar-tafel__aktion > .ar-tafel__kasse {
      position: sticky;
      bottom: 0;
      padding-bottom: 0.3rem;
      background: var(--ar-noir);
    }
  }

  .ar-tafel__knoepfe {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    max-width: 32rem;
    margin-inline: auto;
  }

  /*
   * Der Katalog liegt hier ganz auf dem Tisch wie im Warteraum: alle Kacheln auf einmal, gleich hoch, so viele
   * Spalten wie hineinpassen. Er nimmt die Breite seiner eigenen Spalte — der rechten Hälfte der Tafel, nicht mehr
   * die ganze Tafel wie vor der Zweiteilung, und braucht deshalb auch keinen zweiten Deckel mehr für flache Fenster.
   */
  .ar-tafel__weiter {
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------ Abrechnung */

/*
 * Das Tableau der Abrechnung steht in der Tafel über dem Podium: eine Zeile je Farbe, die Werte darunter, rechts die
 * Bilanz.
 *
 * HIER STAND DER WUNSCH NACH HOLZ UND PERGAMENT, und ein helles Pergament wäre eine zweite Palette (Dateikopf:
 * Tiefschwarz, Kreide, vier Spielfarben, Senf). Was die Ruhe macht, ist deshalb die Luft und nicht ein zweiter Ton:
 * Noir-2 als Grund, oben eine Anrisskante aus zwei Pixeln Senf, ringsum eine Griffkante, Ziffern in gleicher Breite
 * und rechtsbündig untereinander. Keine Rundung, kein Schatten, kein Verlauf, keine Bewegung.
 */
.ar-tableau {
  width: 100%;
  max-width: 34rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--ar-kante-griff);
  border-top: 2px solid var(--ar-funke);
  background: var(--ar-noir-2);
  text-align: left;
}

/* Auf dem Schreibtisch deckelt die Spalte der Tafel das Tableau und nicht mehr seine eigene Zahl (siehe `.ar-tafel:has(.ar-tableau)`). */
@media (min-width: 64rem) {
  .ar-tableau {
    max-width: 50rem;
  }
}

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

/*
 * DIE HISTORIE steht zwischen Kopf und Detailbild: eine Fieberkurve der Bilanz über alle Durchgänge und darunter eine Pille
 * je Durchgang. Sie steht nur, wo das Spiel mindestens zwei Durchgänge mit Saldo führt. Die Kurve ist ein SVG ohne
 * Bibliothek; jede Farbe trägt ihre Marke an jedem Punkt und ein eigenes Strichmuster, damit die Farbe nie der einzige
 * Träger ist. Nichts an ihr bewegt sich.
 */
.ar-tableau__historie {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.ar-hist__kopf {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ar-hist__kurve {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ar-kante);
  background: var(--ar-noir);
}

.ar-hist__achse {
  fill: var(--ar-kreide-2);
  font-family: var(--ar-schrift-mono);
  font-size: 10px;
}

.ar-hist__null {
  stroke: var(--ar-kante-griff);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.ar-hist__wahl {
  stroke: var(--ar-funke);
  stroke-width: 1.5;
}

.ar-hist__linie {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: miter;
}

[data-ar-farbe='rot'] > .ar-hist__linie {
  stroke: var(--ar-rot);
}

[data-ar-farbe='blau'] > .ar-hist__linie {
  stroke: var(--ar-blau);
  stroke-dasharray: 7 3;
}

[data-ar-farbe='gelb'] > .ar-hist__linie {
  stroke: var(--ar-gelb);
  stroke-dasharray: 2 3;
}

[data-ar-farbe='gruen'] > .ar-hist__linie {
  stroke: var(--ar-gruen);
  stroke-dasharray: 8 3 2 3;
}

.ar-hist__pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ar-hist__pille {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.7rem;
  border: 1px solid var(--ar-kante-griff);
  border-radius: 0;
  background: var(--ar-noir);
  color: var(--ar-kreide);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.ar-hist__pille:hover {
  background: var(--ar-noir-3);
}

.ar-hist__pille[aria-pressed='true'],
.ar-hist__pille[aria-pressed='true']:hover {
  border-color: var(--ar-funke);
  background: var(--ar-funke);
  color: var(--ar-noir);
  font-weight: 700;
}

/* Was ein Spiel aufdeckt — Hände, Würfel, Becher. Der Rahmen gibt ihm nur den Platz; wie es aussieht, steht in
   spiele/<schluessel>/brett.css. */
.ar-tableau__bild {
  margin-top: 0.75rem;
}

.ar-tableau__satz {
  margin: 0.7rem 0 0;
  color: var(--ar-kreide);
  font-size: 0.9rem;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/*
 * Auf 375 Pixeln bricht die Zelle, statt die Tafel seitwärts zu schieben: Deshalb overflow-wrap und keine feste
 * Spaltenbreite. Wo eine Kennzahl steht, trennt nichts — ein Bindestrich in einer Zahl, die über den Tisch gerufen
 * wird, ist eine Falle.
 */
.ar-tableau__tabelle {
  width: 100%;
  margin-top: 0.9rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.ar-tableau__tabelle th,
.ar-tableau__tabelle td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--ar-kante);
  color: var(--ar-kreide);
  font-weight: 400;
  text-align: right;
  vertical-align: middle;
}

.ar-tableau__tabelle thead th {
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ar-tableau__tabelle tbody tr:last-child th,
.ar-tableau__tabelle tbody tr:last-child td {
  border-bottom: 0;
}

/* Die Kante steht bei jeder Zeile, nur meist unsichtbar: Sonst rückte die markierte Zeile um drei Pixel ein. */
.ar-tableau__wer {
  border-left: 3px solid transparent;
  text-align: left;
  white-space: nowrap;
}

/*
 * EIN NAME BRICHT NIE UM, ER ENDET MIT AUSLASSUNGSPUNKTEN. `overflow-wrap: anywhere` der Tabelle zerlegte „Sascha“ in
 * einer engen Spalte in „Sasc“ und „ha“ — eine Silbe, die niemand am Tisch so ausspricht. Der Deckel ist 11rem und auf
 * dem Telefon ein Drittel der Fensterbreite, damit drei Zahlenspalten daneben Platz behalten. Die Punkte setzt der
 * Namensteil selbst: An einem Flex-Kasten wirkt `text-overflow` nicht auf seine Kinder. Vorgelesen wird der ganze Name.
 */
.ar-tableau__person {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: min(11rem, 32vw);
  overflow: hidden;
  white-space: nowrap;
}

.ar-tableau__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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

/*
 * Sieger und Verlierer der Runde tragen eine Kante an ihrer Zeile. Sie ist der zweite Träger und nicht der einzige: Die
 * Marke daneben hat Form und Muster, und die Bilanz sagt in Worten, was diese Farbe gewinnt oder verliert.
 */
.ar-tableau__tabelle tbody tr[data-ar-marke='sieger'] .ar-tableau__wer {
  border-left-color: var(--ar-funke);
}

.ar-tableau__tabelle tbody tr[data-ar-marke='verlierer'] .ar-tableau__wer {
  border-left-color: var(--ar-kante-griff);
}

/* Auf dem Telefon bleiben von der Tafel keine 300 Pixel übrig: Fünf Spalten brauchen dort jede Zelle, und die Luft
   holt sich das Tableau an seinem Rand zurück, statt die Wörter zu zerbrechen. */
@media (max-width: 26rem) {
  .ar-tableau {
    padding: 0.75rem;
  }

  .ar-tableau__tabelle th,
  .ar-tableau__tabelle td {
    padding: 0.45rem 0.25rem;
  }
}

.ar-tableau__hinweis {
  margin: 0.7rem 0 0;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* Der Hutgang unter der Bühne: eine Kante, eine leise Kartei aus Zeilen, leiser als alles darüber. Er soll dastehen, nicht rufen. */
.ar-kasse {
  display: grid;
  gap: 0.3rem;
  max-width: var(--ar-mass);
  margin: 0.75rem auto 0;
  padding: 0.75rem;
  border: 1px solid var(--ar-kante);
  background: var(--ar-noir-2);
  text-align: center;
}

.ar-kasse__frage {
  margin: 0;
  color: var(--ar-kreide);
  font-size: 0.9rem;
  text-wrap: pretty;
}

.ar-kasse__satz {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  text-wrap: pretty;
}

.ar-kasse__weg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--ar-funke);
  font-size: 0.9rem;
  text-wrap: pretty;
}

/* Der Hutgang-Inhalt (Sterne, dazu ggf. die Kaffeekasse): eine Spalte mit knapper Luft, egal ob im Kasten unter der
   Bühne oder im Verlassen-Dialog nach Turnierende. */
.ar-hutgang {
  display: grid;
  gap: 0.3rem;
}

.ar-dialog .ar-hutgang {
  margin-bottom: 0.75rem;
}

/*
 * Die Sterne-Bewertung: fünf Radioknöpfe, leiser als der Hutgang, in dem sie meistens steht — kein --ar-funke-Vollton,
 * das wäre für eine Note zu laut. Es gibt keinen „halb gewählten“ Zustand zu zeichnen: Ein Klick trägt sofort ein und
 * tauscht die Reihe gegen eine Dankeszeile.
 */
.ar-bewertung__frage {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  text-wrap: pretty;
}

.ar-bewertung__sterne {
  display: flex;
  gap: 0.1rem;
}

.ar-bewertung__stern {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.ar-bewertung__stern svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: var(--ar-kante-griff);
  stroke-width: 1.5;
  transition: stroke 120ms linear;
}

.ar-bewertung__stern:hover svg,
.ar-bewertung__stern:focus-visible svg {
  stroke: var(--ar-kreide-2);
}

.ar-bewertung__dank {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
}

.ar-tafel__satz {
  max-width: 20rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/*
 * DAS WARTEN AUF DIE NÄCHSTE RUNDE, bei allen, die nicht wählen. Dieselbe Senfkante wie „Anna wählt gerade“ im
 * Warteraum (`.ar-warten__wahl`): Der Tisch wartet auf eine Person, und das ist eine Nachricht und kein Nachsatz. Das
 * vorgemerkte Spiel steht in Senf — hervorgehoben durch Ton UND Gewicht, nie nur durch die Farbe.
 *
 * ER IST DAS ERSTE KIND DER TAFEL UND GEHÖRT KEINEM FACH (js/spielfeld.js): Auf dem Telefon steht er über dem Sieger
 * und der Abrechnung, im zweispaltigen Raster überspannt er beide Spalten als Band über dem Ganzen. Die Zeile des
 * Wahlrechts, die für Wartende hineinzieht, verliert darin ihre beiden Senflinien — der Kasten hat schon seine Kante.
 */
.ar-tafel__warten {
  display: grid;
  gap: 0.25rem;
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 24rem;
  padding: 0.45rem 0.75rem;
  border-left: 3px solid var(--ar-funke);
  background: var(--ar-noir-2);
  text-align: left;
}

.ar-tafel__warten .ar-tafel__wahlrecht {
  justify-content: flex-start;
  max-width: none;
  padding-block: 0;
  border-block: 0;
}

.ar-tafel__warten .ar-tafel__wahlrecht-frist {
  max-width: none;
  margin: 0.1rem 0 0.15rem;
}

.ar-tafel__warten-kopf {
  margin: 0;
  color: var(--ar-kreide);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.ar-tafel__warten-spiel {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.ar-tafel__warten-name {
  color: var(--ar-funke);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/*
 * DER CROUPIER: ein Satz aus dem Hintergrund, in der Schrift der Sprechblase und ohne ihren Kasten — er gehört keinem
 * am Tisch. Leiser als jeder Satz darüber, denn er will nichts.
 */
.ar-tafel__croupier {
  max-width: 24rem;
  margin: 0.3rem 0 0;
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift-comic);
  font-size: 0.85rem;
  font-style: italic;
  text-wrap: pretty;
}

/*
 * DIE KAFFEEKASSE AUF DER TAFEL: eine gestrichelte Fuge, ein Satz, die Wege. Sie steht am Ende des Fachs und ist leiser
 * als alles darüber — Kreide statt Senf für den Satz, eine Griffkante statt einer Fläche für die Wege. Senf tragen nur
 * die Wörter der Wege, denn sie sind das Einzige hier, das man drücken kann. Der Abstand nach oben trennt sie vom
 * Croupier: Sie ist ein Fuß und kein weiterer Satz derselben Rede. Am Schreibtisch steht sie an der Unterkante des
 * Fachs (weiter oben, im Absatz der zwei Spalten).
 */
.ar-tafel__kasse {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  width: 100%;
  max-width: 24rem;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--ar-kante-griff);
}

.ar-tafel__kasse-satz {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  text-align: left;
  text-wrap: pretty;
}

.ar-tafel__tasse {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--ar-funke);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ar-tafel__kasse-wege {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
}

.ar-tafel__kasse-weg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 1px solid var(--ar-kante-griff);
  color: var(--ar-funke);
  font-size: 0.85rem;
  text-decoration: none;
}

.ar-tafel__kasse-weg:hover {
  border-color: var(--ar-funke);
}

/* Das Stechen ist eine Nachricht und kein Nachsatz: helle Schrift zwischen zwei Senflinien. */
.ar-tafel__satz--stechen {
  padding-block: 0.3rem;
  border-block: 2px solid var(--ar-funke);
  color: var(--ar-kreide);
}

/* Der Grund, warum ein Knopf stillsteht: heller als ein Hinweis und mit einer Senfkante, denn hier wartet der Tisch auf
   eine Einstellung und nicht auf eine Person. */
.ar-hinweis--sperre {
  padding: 0.5rem 0.75rem;
  border: 2px dashed var(--ar-funke);
  color: var(--ar-kreide);
}

/*
 * Ein Knopf, der an der Einstellung hängt: gestrichelt und still, und der Grund steht darunter. Er bleibt ein Knopf und
 * sagt beim Tippen, woran es hängt; ein Knopf, der nur verschwindet, sagt niemandem etwas.
 */
.ar-knopf[data-ar-gesperrt],
.ar-knopf[data-ar-gesperrt]:hover {
  border-style: dashed;
  border-color: var(--ar-kante-griff);
  outline-style: dashed;
  outline-color: var(--ar-kante-griff);
  background: var(--ar-noir-2);
  color: var(--ar-kreide-2);
  cursor: not-allowed;
}

.ar-knopf[data-ar-gesperrt]:focus-visible {
  outline: 3px solid var(--ar-funke);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ar-knall__bild--2,
  .ar-knall__bild--3 {
    display: none;
  }

  .ar-brett[data-ar-stoss],
  .ar-lunte__funke {
    animation: none;
  }
}

/* ------------------------------------------------------------ Dialog und Quittung */

.ar-dialog {
  max-width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.25rem;
  border: var(--ar-tusche) solid var(--ar-kreide);
  border-radius: 0;
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
}

.ar-dialog::backdrop {
  background: var(--ar-schleier);
}

.ar-dialog__titel {
  margin: 0 0 0.75rem;
  font-family: var(--ar-schrift-plakat);
  font-size: 1.2rem;
  font-weight: 400;
}

.ar-dialog__titel:focus {
  outline: none;
}

.ar-dialog__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/*
 * DAS SCHILD UMHÄNGEN: ein Dialog mit einem Feld, und dieselbe Zeile steht im Telegramm. Die Absage des Servers („Diesen
 * Spitznamen gibt es schon“) steht IM Dialog und nicht in der Quittung: Die liegt unter dem Vorhang des modalen Fensters.
 */
.ar-namen {
  display: grid;
  gap: 0.75rem;
}

.ar-namen:focus {
  outline: none;
}

.ar-namen .ar-dialog__titel {
  margin: 0;
}

.ar-namen__meldung {
  min-height: 1.5em;
  margin: 0;
  color: var(--ar-funke);
}

/*
 * DAS TELEGRAMM nach „Tisch eröffnen“: ein Streifen Durchschlagpapier mit Kopfzeile, Schreibmaschine und einem
 * Raumcode, den man über den Tisch ruft. Es ist der eine Dialog der Arena auf Papier statt auf Blech — und das mit
 * Absicht: Alles andere auf dieser Seite ist Nacht, und ein Telegramm ist ein Blatt, das jemand einem hinlegt.
 *
 * KEIN VERLAUF, KEIN SCHATTEN, KEINE RUNDUNG: Die Kante ist Tusche, die Doppellinie unter der Kopfzeile ist der einzige
 * Schmuck. Die Knöpfe bleiben die Knöpfe des Hauses (Blech auf Papier); nur das Linkfeld nimmt die Farben des Blattes,
 * denn ein schwarzes Feld mitten auf dem Papier las sich als Loch.
 */
.ar-dialog--telegramm {
  width: min(30rem, calc(100vw - 2rem));
  padding: 0;
  border-color: var(--ar-noir);
  border-top: var(--ar-tusche) solid var(--ar-funke);
  background: var(--ar-comic-papier);
  color: var(--ar-noir);
  font-family: var(--ar-schrift-mono);
}

.ar-telegramm {
  display: grid;
  gap: 0.8rem;
  padding: 1rem 1.25rem 1.25rem;
}

.ar-telegramm:focus {
  outline: none;
}

.ar-telegramm__kopf {
  margin: 0;
  padding-bottom: 0.45rem;
  border-bottom: 3px double var(--ar-noir);
  font-family: var(--ar-schrift-plakat);
  font-size: 0.9rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.ar-telegramm__titel {
  margin: 0;
  font-family: var(--ar-schrift-plakat);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}

.ar-telegramm__text {
  margin: 0;
  line-height: 1.45;
}

/* Die Herausforderung des Pokals: eine Zeile Schreibmaschine zwischen zwei Tuschekanten, wie ein unterstrichener Satz
   in einem Telegramm. Auf dem Papier ist Senf kein Lesetext; die Zeile steht in Tusche. */
.ar-telegramm__ruf {
  margin: 0;
  padding-block: 0.5rem;
  border-block: 2px solid var(--ar-noir);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ar-telegramm__code {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.ar-telegramm__code span {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ar-telegramm__code strong {
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.ar-dialog--telegramm .ar-telegramm__link {
  border: 2px dashed var(--ar-noir);
  background: transparent;
  color: var(--ar-noir);
  font-family: var(--ar-schrift-mono);
  font-size: 0.85rem;
}

.ar-dialog--telegramm .ar-telegramm__link:focus-visible {
  border-style: solid;
}

/*
 * Der Name am Tisch unter dem Link: Wer „Tisch eröffnen“ drückt, bekommt „Gastgeber“ und kann ihn gleich ändern. Feld und
 * Knopf stehen in einer Zeile, die Meldung darunter über beide.
 */
.ar-telegramm__name {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.35rem 0.5rem;
  margin: 0;
}

.ar-dialog--telegramm .ar-telegramm__name-wort {
  color: var(--ar-noir);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ar-telegramm__name .ar-namen__meldung {
  grid-column: 1 / -1;
}

.ar-dialog--telegramm .ar-telegramm__name-feld {
  border: 2px dashed var(--ar-noir);
  background: transparent;
  color: var(--ar-noir);
  font-family: var(--ar-schrift-mono);
  font-size: 0.85rem;
}

.ar-dialog--telegramm .ar-telegramm__name-feld:focus-visible {
  border-style: solid;
}

/* Auf dem Papier ist Senf kein Lesetext: Die Meldung steht dort in Tusche. */
.ar-dialog--telegramm .ar-namen__meldung {
  min-height: 0;
  color: var(--ar-noir);
}

/* DER SOFORTSTART und der BEITRITT MIT CODE, beide am Eingang (js/zeichnen.js, `eingang()`). */
.ar-sofort {
  margin: 0;
  color: var(--ar-kreide-2);
  text-align: center;
}

/*
 * Im Beitrittsmodus gibt es „Raum eröffnen“ nicht — weder bei einem Link mit `?code=` (dort steht der Knopf gar nicht
 * im Markup) noch, sobald jemand einen Code ins Feld tippt (dort blendet ihn diese Regel aus, und js/haupt.js macht
 * „Beitreten“ zum Hauptknopf). `display: none` und kein `hidden`: Das Attribut ließe sich von jedem `display` eines
 * Knopfstils überstimmen.
 */
.ar-formular--beitritt [data-ar-nur-eroeffnen] {
  display: none;
}

/*
 * DIE LEITUNGSPILLE steht unten links und nicht in der Mitte: Dort liegt die Quittung, und beide gleichzeitig wären
 * zwei Kästen übereinander. Sie ist leiser als die Quittung — Kreideton auf Blech statt Blech auf Kreide —, denn sie
 * meldet keinen Fehlgriff, sondern einen Zustand, der von selbst vergeht.
 */
.ar-leitung {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 9;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  pointer-events: none;
}

.ar-quittung {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  z-index: 10;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: 0.6rem 1rem;
  border: var(--ar-tusche) solid var(--ar-noir);
  background: var(--ar-kreide);
  color: var(--ar-noir);
  /* Sie liegt auf kleinen Telefonen über der unteren Kachelreihe; ein Tipp soll trotzdem ankommen. */
  pointer-events: none;
  translate: -50% 0;
}

/*
 * Der Ausweg in der Quittung — heute nur „Nächsten freien Platz nehmen“. Die Quittung selbst lässt Tipps durch (oben);
 * ihr Knopf MUSS sie fangen, sonst stünde dort ein Knopf, der nichts tut. Er ist der einzige Grund, warum die Quittung
 * überhaupt einen Nachkommen hat, und er trägt dieselben vierundvierzig Pixel wie jede andere Tippfläche.
 *
 * ER IST DER EINZIGE KNOPF DIESES HAUSES AUF HELLEM GRUND, UND DESHALB DREHT ER SEINE FARBEN UM. Die Grundregel des
 * Knopfes schreibt
 * in Kreide auf das Blech des Bretts; die Quittung IST Kreide, und geerbt stand die Aufschrift damit auf 1 : 1 —
 * unsichtbar, nicht bloß blass. Tinte auf Kreide hält 16,26 : 1, die Kante ebenso, und beim Überfahren kehrt sich das
 * Paar um statt in das Blech zu fallen. Auch der Fokusring wechselt: Der Funke des Hauses hält auf Kreide nur 1,86 : 1
 * und liegt damit unter den 3, die WCAG 1.4.11 für eine Auskunft ohne Text verlangt.
 */
.ar-quittung__griff {
  pointer-events: auto;
  min-height: 2.75rem;
  min-width: 2.75rem;
  border-color: var(--ar-noir);
  background: transparent;
  color: var(--ar-noir);
  vertical-align: middle;
}

.ar-quittung__griff:hover {
  background: var(--ar-noir);
  color: var(--ar-kreide);
}

.ar-quittung__griff:focus-visible {
  outline-color: var(--ar-noir);
}

/* ------------------------------------------------------------ Regelblatt */

/*
 * Nicht modal: Das Brett darunter bleibt bedienbar, und die Lunte läuft weiter. Auf dem Telefon ein Bodenblatt, breit
 * ein Seitenblatt unter dem Kopf des Hauses, im flachen Querformat ein niedriger Streifen.
 */
.ar-regeln {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  display: grid;
  align-content: start;
  gap: 1rem;
  max-height: 60vh;
  max-height: 60dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem var(--ar-luft) 1.5rem;
  border-top: var(--ar-tusche) solid var(--ar-kreide);
  background: var(--ar-noir-2);
}

.ar-regeln__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.ar-regeln__titel {
  margin: 0;
  font-family: var(--ar-schrift-plakat);
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: uppercase;
}

.ar-regeln__titel:focus {
  outline: none;
}

.ar-regeln__spiel {
  display: grid;
  gap: 0.9rem;
}

.ar-regeln__name {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Die Reiterleiste: ein Reiter je Spiel, eines offen. Sie steht nur in der vollen Fassung — knapp wäre sie die
   Reizüberflutung, gegen die sie sonst hilft. */
/* Die Reiter brechen in eine zweite Reihe um, sobald sie nicht mehr nebeneinander passen: Bei fünf Spielen auf 24rem
   zerschnitt eine einzige Reihe die Namen mitten im Wort. Getrennt wird nur an den weichen Trennzeichen der Namen. */
.ar-regeln__reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ar-regeln__reiter-knopf {
  flex: 1 1 6.5rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.4rem 0.3rem;
  border: 2px solid var(--ar-kante-griff);
  border-radius: 0;
  background: var(--ar-noir-2);
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

/* Offen heißt Senfbalken und hellere Schrift, nicht nur ein Farbton: Farbe allein trägt hier keine Auskunft. */
.ar-regeln__reiter-knopf[aria-selected='true'] {
  border-color: var(--ar-funke);
  background: var(--ar-noir-3);
  color: var(--ar-kreide);
  box-shadow: inset 0 4px 0 0 var(--ar-funke);
}

.ar-regeln__spiel:focus {
  outline: none;
}

.ar-regeln__marke {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ar-regeln__banner {
  flex: none;
  width: 5.5rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 2px solid var(--ar-kante);
}

.ar-regeln__steuerung,
.ar-regeln__hinweis {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-left: var(--ar-tusche) solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.ar-regeln__steuerung strong {
  color: var(--ar-kreide);
  font-weight: 400;
}

/* Der Hinweis eines Spiels vor dem Anpfiff, etwa dass man dafür reden muss: dieselbe Form wie die Steuerung, mit Senfkante. */
.ar-regeln__hinweis {
  border-left-color: var(--ar-funke);
  color: var(--ar-kreide);
}

.ar-regeln__hinweis strong {
  color: var(--ar-funke);
  font-weight: 400;
}

/*
 * Knapp, während der Runde: kein Reiter und kein Banner, der Name klein, die Karten enger. Gesagt wird dasselbe wie in der
 * vollen Fassung: Wer mitten im Zug nachsieht, braucht die Sätze und nicht die Bilder.
 */
.ar-regeln[data-ar-knapp] .ar-regeln__spiel {
  gap: 0.5rem;
}

.ar-regeln[data-ar-knapp] .ar-lehre__karte {
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
}

.ar-regeln[data-ar-knapp] .ar-lehre__bild {
  width: 2.25rem;
  height: 2.25rem;
}

.ar-regeln[data-ar-knapp] .ar-lehre__text,
.ar-regeln[data-ar-knapp] .ar-ziel__text {
  font-size: 0.85rem;
}

.ar-regeln[data-ar-knapp] .ar-ziel {
  gap: 0.5rem;
  padding: 0.5rem;
}

.ar-regeln[data-ar-knapp] .ar-ziel__bild {
  width: 2.5rem;
  height: 2.5rem;
}

/* Breit rückt die Arena beiseite, statt unter dem Blatt zu liegen: Sonst deckte es die Knöpfe der Spielleiste zu, auch
   [?] selbst. Ein Browser ohne :has() legt das Blatt darüber. */
@media (min-width: 64rem) {
  .ar-regeln {
    top: var(--ar-hauskopf);
    left: auto;
    width: var(--ar-regeln-breite);
    max-height: none;
    border-top: 0;
    border-left: var(--ar-tusche) solid var(--ar-kreide);
  }

  .ar-rahmen:has(> .ar-regeln:not([hidden])) {
    padding-right: calc(var(--ar-regeln-breite) + var(--ar-luft));
  }
}

@media (orientation: landscape) and (max-height: 30rem) {
  .ar-regeln {
    max-height: 50vh;
    max-height: 50dvh;
  }

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

  .ar-regeln__name {
    grid-column: 1 / -1;
  }
}

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

/*
 * Das zweite Gesicht des Regelblatts (js/comic.js): oben das Panel, darunter der Kasten mit dem Satz, darunter die
 * Steuerung. Es ist KEIN eigener Dialog — es liegt in derselben Lade wie die Regeln und erbt deren Kasten, Kante und
 * Rollpflege. Was hier steht, ist der Inhalt und nicht das Möbel.
 */

/*
 * SIE DARF HÖHER SEIN ALS DAS REGELBLATT. Das Blatt deckelt sich bei 60 dvh, damit ein Spickzettel das Brett nicht
 * zudeckt; ein Panel im Breitbild plus drei Sätze plus zwei Knöpfe passen darunter nicht, und ein Bild, von dem man
 * ein Drittel sieht, erzählt nichts. Die Geschichte läuft ohnehin nie über einem laufenden Zug auf — sie kommt vor
 * der Runde (comicAufschlag()) oder weil jemand sie ausdrücklich aufgerufen hat.
 */
.ar-regeln[data-ar-story] {
  max-height: 88vh;
  max-height: 88dvh;
}

.ar-comic {
  display: grid;
  gap: 0.75rem;
}

.ar-comic__marke {
  margin: 0;
  color: var(--ar-funke);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * Der Rahmen hält das Breitbild fest, auch solange die Datei noch unterwegs ist: Ohne feste Proportion springt der
 * Text beim Eintreffen des Panels um zweihundert Pixel nach unten, und wer gerade liest, verliert die Zeile.
 */
.ar-comic__rahmen {
  aspect-ratio: 16 / 9;
  border: var(--ar-tusche) solid var(--ar-funke);
  background: var(--ar-noir);
}

.ar-comic__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Kasten ist das Papier, auf dem die Bildunterschrift steht: Goldkante oben, Serifenschrift, warmes Weiß. */
.ar-comic__kasten {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--ar-kante-griff);
  border-top: 2px solid var(--ar-funke);
  background: var(--ar-noir-3);
}

.ar-comic__zaehler {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ar-comic__text {
  margin: 0;
  color: var(--ar-comic-papier);
  font-family: var(--ar-schrift-comic);
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Wie viele Bilder es sind und wo man steht — als Form und nicht nur als Farbe; die Zahl daneben sagt dasselbe. */
.ar-comic__punkte {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.ar-comic__punkt {
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--ar-kante-griff);
  background: none;
}

.ar-comic__punkt[data-ar-hier] {
  border-color: var(--ar-funke);
  background: var(--ar-funke);
}

.ar-comic__griffe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* „Weiter“ und „An den Tisch“ nehmen die Breite: Sie sind der Weg durch die Geschichte, „Zurück“ ist der Rückweg. */
.ar-comic__griffe .ar-knopf--stark {
  flex: 1 1 10rem;
}

/*
 * „Regeln im Detail“ ist ein Weg und kein Knopf: Wer die Geschichte liest, soll nicht zwischen drei gleich lauten
 * Flächen wählen müssen. Vierundvierzig Pixel hoch bleibt er trotzdem — ein Daumen weiß nicht, dass er leise ist.
 */
.ar-comic__regeln,
.ar-regeln__story {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ar-kreide-2);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.ar-comic__regeln:hover,
.ar-comic__regeln:focus-visible,
.ar-regeln__story:hover,
.ar-regeln__story:focus-visible {
  color: var(--ar-kreide);
}

.ar-comic__regeln-zeichen,
.ar-regeln__story-zeichen {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

/*
 * DIE HINWEIS-PILLE über der Steuerleiste von Warteraum und Einweisung. Sie ist eine Zeile und kein Block: Auf
 * 375 × 740 steht der Bereit-Schalter knapp über der Kante, und was hier an Höhe dazukommt, schiebt ihn.
 */
.ar-comic-pille {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ar-funke);
  border-radius: 0;
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

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

.ar-comic-pille__zeichen {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
}

.ar-comic-pille__wort {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* „neu“ steht nur, solange dieser Browser die Geschichte dieses Spiels heute Abend noch nicht gesehen hat. */
.ar-comic-pille__neu {
  flex: none;
  padding: 0.05rem 0.4rem;
  background: var(--ar-funke);
  color: var(--ar-noir);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.ar-g-rot { fill: var(--ar-rot); }
.ar-g-blau { fill: var(--ar-blau); }
.ar-g-gelb { fill: var(--ar-gelb); }
.ar-g-gruen { fill: var(--ar-gruen); }
.ar-g-raute { fill: url(#ar-raute); }
.ar-g-karo { fill: url(#ar-karo); }
.ar-g-funke { fill: var(--ar-funke); }
.ar-g-kreide { fill: var(--ar-kreide); }
.ar-g-noir { fill: var(--ar-noir); }
.ar-g-raster { fill: url(#ar-raster); }
.ar-g-leer { fill: none; }
.ar-g-feld { fill: var(--ar-noir-2); stroke: var(--ar-kreide-2); stroke-width: 2; }
.ar-g-tusche { stroke: var(--ar-noir); stroke-width: 2.5; stroke-linejoin: miter; }
.ar-g-tusche-duenn { stroke: var(--ar-noir); stroke-width: 1.5; stroke-linejoin: miter; }
.ar-g-tusche-dick { stroke: var(--ar-noir); stroke-width: 5; stroke-linejoin: miter; }
/* Die Zierlinie der vier Rollensiegel: ein schmaler, konzentrischer Schnitt in Tinte, kein zweites Element mit
   eigener Fläche — dieselbe Kante, nur ohne Füllung. */
.ar-g-marke-zier { fill: none; stroke: var(--ar-noir); stroke-width: 0.9; }
.ar-g-strich { fill: none; stroke: var(--ar-noir); stroke-width: 1.5; }
.ar-g-lunte { fill: none; stroke: var(--ar-kreide-2); stroke-width: 2; }
.ar-g-halter { fill: none; stroke: var(--ar-kreide-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ar-g-kontur { fill: none; stroke: var(--ar-kreide); stroke-width: 4; stroke-linejoin: round; }
.ar-g-ring-grund { fill: none; stroke: var(--ar-noir); stroke-width: 10; }
.ar-g-ring { fill: none; stroke: var(--ar-kreide); stroke-width: 4; }
.ar-g-pfeil { fill: none; stroke: var(--ar-funke); stroke-width: 5; stroke-linecap: square; }
/* Das Dreieck von pfeil() in js/grafik.js: Schriftfarbe, damit es ein Knopf mitfärbt. */
.ar-g-dreieck { fill: currentColor; }
.ar-pfeil { flex: none; width: 0.8em; height: 0.8em; }
.ar-g-strich-grund { fill: none; stroke: var(--ar-noir); stroke-width: 14; stroke-linecap: square; }
.ar-g-strich-kreide { fill: none; stroke: var(--ar-kreide); stroke-width: 7; stroke-linecap: square; }
.ar-g-bank { fill: none; stroke: var(--ar-kreide-2); stroke-width: 3; }
.ar-g-henkel { fill: none; stroke: var(--ar-funke); stroke-width: 5; }
.ar-g-strich-funke { fill: none; stroke: var(--ar-funke); stroke-width: 1.5; }
.ar-g-stift { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: miter; }
.ar-g-stift-spitze { fill: currentColor; }
.ar-g-auge { fill: currentColor; }
.ar-g-schloss { fill: currentColor; }
.ar-g-haken { fill: none; stroke: var(--ar-noir); stroke-width: 3.5; stroke-linecap: square; }
.ar-g-kasten { fill: var(--ar-noir); stroke: var(--ar-kante-griff); stroke-width: 2; stroke-dasharray: 4 3; }