/*
 * Revolver-Duell: der Stammtisch mit Revolver, Marken, Trickkarten und einem Schild je Platz (js/kulisse.js), die
 * Trommel mit der Chance auf den Schuss und die vier Knöpfe. Anzeigeleiste, Brettrand, Abzeichen und Tafel stehen als
 * Rahmen des Spielfelds in css/arena.css; ein Wasserzeichen trägt dieses Brett nicht mehr, sein Grund ist der
 * Stammtisch.
 *
 * NIE NUR EIN FARBTON. Eine geprüfte Kammer ist dunkel UND trägt einen Haken; wer die Waffe vor sich hat, trägt eine
 * Kreidekante UND die Waffe liegt vor ihm; ein verlorenes Leben ist kein blasser Schädel, sondern eine leere Kontur MIT
 * einem Riss. Jede Tippfläche misst mindestens 44 Pixel — in beide Richtungen.
 *
 * DER HAHN STEHT ÜBER ZWÖLF UHR, DIE TROMMEL RASTET. Hier drehte sich ein senffarbener Ring über den Kreis, der auf
 * jeder Kammer seine Nachbarn überlappte und bei jedem Klick ein Sechstel weitersprang — am Tisch als Bildfehler
 * gelesen. Jetzt sitzt die Marke des Hahns über zwölf Uhr, und was sich bewegt, ist die Trommel darunter: eine Kammer
 * je Klick, in zwei harten Bildern. Die Trickkarte dreht sie einmal ganz durch, in sechs. Das ist derselbe Bildertakt
 * wie die Wellen des Rahmens (README, Abschnitt 8, Ziffer 5) und keine ausrollende Bewegung.
 *
 * DREI DINGE BEWEGEN SICH SONST NOCH, UND ALLE DREI IN HARTEN BILDERN: der Hahn, der sich über `takt[0]` spannt und
 * am Ende in einem Bild fällt; die Sperrklinke, die bei jeder Kammer einmal nach außen springt; und das Knallbild des
 * Rahmens über der Trommel, Blitz und Pulverrauch in seinen drei Einzelbildern. Jede hängt an der Serverzeit.
 */

/*
 * Auf dem Telefon nimmt das Brett seine Breite, bis es dreißig Geviert hat, und steht in einer Spalte: Banner, Tisch,
 * Trommel, Zeile, Knöpfe. Ab dem Tablet nimmt es die ganze Bühne, mit dem Tisch über die volle Breite und dem Pult in
 * einer Zeile darunter.
 */
.ar-spielfeld[data-ar-spiel='duell'] {
  --ar-brettbreite: min(30rem, 100vw - 2 * var(--ar-luft));
  --ar-einheit: calc(var(--ar-brettbreite) / 6);
  --ar-du-dreh-ms: 1100ms;
  /*
   * Eine Kammer weiter. Es waren `--ar-bild` (90 ms) in zwei Stufen, und das las der Tisch als Ruckeln: Zwei
   * Sprünge zu dreißig Grad sind keine Drehung. Zweihundert Millisekunden linear sind eine — und eine Sperrklinke
   * hält am Ende hart, es pendelt nichts nach.
   */
  --ar-du-rast-ms: 200ms;
  /* Der Zug am Abzug, bevor der Hahn fällt. Den wahren Wert schreibt das Brett aus `takt[0]` des Servers hierher. */
  --ar-du-hahn-ms: 520ms;
  /* Das Banner über der Trommel hat immer diese Höhe, laut wie leise: Die Trommel rechnet ihren Deckel gegen sie. */
  --ar-du-waffe-hoehe: 2.5rem;
}

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

/* Im flachen Querformat steht der Spieltisch als Spalte neben dem Brett. */
@media (orientation: landscape) and (max-height: 30rem) {
  .ar-spielfeld[data-ar-spiel='duell'] {
    --ar-brettbreite: min(28rem, 100vw - 2 * var(--ar-luft) - var(--ar-seite));
  }

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

/* Ab dem Tablet nimmt das Brett die volle Bühne: Hochkant auf dem Tablet stünde der Tisch sonst auf den 30rem des Telefons. */
@media (min-width: 48rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='duell'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

/*
 * Außen um das Raster: Nach der Breite des BRETTS fragen die Regeln darin, und ein Raster kann nicht nach seiner
 * eigenen fragen.
 */
.ar-du-mass {
  container: ar-du-mass / inline-size;
}

/*
 * DIE TÖNE DIESES TISCHES STEHEN AN DER WURZEL UND NICHT AN .ar-du: Trommel, Schädel und Marke stehen auch im
 * Regelblatt, in der Einweisung und im Bild über der Abrechnung, also AUSSERHALB des Bretts; ein Symbol, dessen fill
 * auf eine Variable von .ar-du zeigt, fiele dort auf Schwarz zurück. Der Präfix --ar-du- hält sie trotzdem für sich.
 *
 * Das Blech der Trommel hält gegen den Filz 1,9 : 1 und ist damit Fläche und keine Auskunft; was etwas sagt, ist die
 * Kante darauf (Kreide, 8,8 : 1) und der Hahn (Senf, 8,0 : 1). Der Knochen der Schädel hält gegen den Filz 9,4 : 1.
 */
:root {
  --ar-du-filz: #141a16;
  --ar-du-blech: #2a2a2f;
  --ar-du-knochen: #d8d2c4;
}

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

/* Relativ, weil das Knallbild des Rahmens (.ar-fx) absolut darin liegt und seinen Bezugsrahmen hier findet. */
.ar-du {
  position: relative;
  display: grid;
  gap: 0.5rem;
  width: 100%;
}

@media (min-width: 30rem) {
  .ar-du {
    gap: 0.75rem;
  }
}

/* Ein Fach, das noch nichts trägt, soll auch keine Lücke reißen. */
.ar-du [data-ar-du-teil]:empty {
  display: none;
}

/* ------------------------------------------------------------------ Banner */

/*
 * WER DIE WAFFE HAT, STEHT GROSS DA — beim Halter in Plakatschrift und Senf, bei allen anderen leise in Kreide-2. Beide
 * Fassungen sind dieselbe Kiste in derselben festen Höhe; ein Banner, das nur beim Halter da wäre, schöbe den
 * Knopfblock in dem Augenblick nach unten, in dem er getippt werden soll.
 *
 * ES IST KEIN KNOPF UND SIEHT NICHT SO AUS: Der Abzug trägt eine volle Senffläche, das Banner nur die Kante und die
 * Schrift. Die Schrift richtet sich nach der Brettbreite und nicht nach dem Fenster (Alfa Slab One läuft breit: die
 * Zeile misst rund 16 Geviert), und was trotzdem nicht passt, schneidet mit Auslassungspunkten statt zu umbrechen.
 */
.ar-du__waffe {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--ar-du-waffe-hoehe);
  min-width: 0;
  margin: 0;
  padding: 0 0.5rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
}

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

.ar-du__waffe[data-ar-du-du] {
  border-color: var(--ar-funke);
  color: var(--ar-funke);
  font-family: var(--ar-schrift-plakat);
  font-size: clamp(0.8rem, calc(var(--ar-brettbreite) * 0.046), 1.75rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ Leiste */

/*
 * DIE MARKEN JEDER FARBE stehen im freien Platz der Anzeigeleiste des Rahmens. Der Rahmen setzt ihn auf `flex: none`, und
 * vier Farben zu je „2 Marken“ messen auf dem Telefon mehr, als die Leiste breit ist; er darf hier schrumpfen und
 * bricht dann selbst um, statt die Seite seitwärts zu schieben.
 */
[data-ar-spiel='duell'] .ar-hud__zusatz {
  flex: 0 1 auto;
  min-width: 0;
}

.ar-du__hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem 0.6rem;
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.ar-du__hud-teil {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}

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

/* Ausgeschieden heißt durchgestrichen und grau, wie in der Standzeile und auf der Plakette; die Marke im SVG erbt ihre Farbe. */
.ar-du__hud-teil[data-ar-du-raus] {
  --ar-rot: var(--ar-kante-griff);
  --ar-blau: var(--ar-kante-griff);
  --ar-gelb: var(--ar-kante-griff);
  --ar-gruen: var(--ar-kante-griff);
  text-decoration: line-through;
}

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

/*
 * DER TISCH IST DIE BÜHNE: Revolver, Marken, Trickkarten und der Topf liegen auf dem gemalten Stammtisch
 * (js/kulisse.js), und über ihm liegen die Schilder der Plätze. Auf dem Telefon steht er fast quadratisch, und die
 * anderen sitzen im Hufeisen an der fernen Kante; ab dem Tablet steht er quer und ganz (unten bei den Breiten).
 */
.ar-du__buehne {
  position: relative;
}

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

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

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

/*
 * DIE SCHILDER DER PLÄTZE liegen je eines am Rand des Tisches vor seinem Stuhl (brett.js rechnet die Stelle aus der
 * Bühne): Marke, Name, ein Abzeichen und die drei Totenschädel, in einer Zeile. Ein Schild ist eine Fläche in der
 * Palette der Arena auf dem Bild, und seine Schrift hält dort ihren Kontrast.
 */
.ar-du__farbe {
  position: absolute;
  max-width: 46%;
  padding: 0.12rem 0.35rem 0.15rem 0.3rem;
  border: 1px solid var(--ar-kante-griff);
  border-left: var(--ar-farbkante) solid var(--ar-du-farbe);
  background: var(--ar-noir-2);
  font-size: 0.74rem;
  line-height: 1.2;
  translate: -50% -50%;
}

.ar-du__farbe[data-ar-du-seite^='fern'] {
  max-width: 32%;
}

/* Wer die Waffe vor sich hat, trägt die Kreidekante: Die Waffe davor sagt es auch, aber nicht jedem auf einen Blick. */
.ar-du__farbe[data-ar-dran] {
  border-color: var(--ar-kreide);
  border-left-color: var(--ar-du-farbe);
  outline: 2px solid var(--ar-kreide);
  outline-offset: 1px;
}

/*
 * WER GESPIEGELT WURDE, STEHT DOPPELT MARKIERT DA: das Wort im Schild UND ein roter Riegel an seiner Unterkante. Ein
 * Zwang, den nur der eigene Knopf erklärt, sieht bei den anderen drei aus wie ein ganz normaler Zug.
 */
.ar-du__farbe[data-ar-du-zwang] {
  box-shadow: inset 0 -3px 0 0 var(--ar-rot);
}

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

.ar-du__kopf {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
}

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

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

.ar-du__farbe .ar-du__marke {
  width: 0.9rem;
  height: 0.9rem;
}

/*
 * Die Schädel stehen rechts im Schild und halten ihren Platz, auch wenn keiner mehr steht. Auf dem Telefon stehen sie
 * nicht da: Drei Schilder teilen sich dort die ferne Kante, und mit drei Schädeln je Name lief der dritte Name in seine
 * Auslassungspunkte. Die Leben stehen dort als Zahl in der Leiste über dem Brett.
 */
.ar-du__farbe .ar-du__schaedel-reihe {
  display: none;
  flex: none;
  gap: 0.1rem;
  margin-left: auto;
}

.ar-du__farbe .ar-du__schaedel {
  width: 0.85rem;
  height: 0.85rem;
}

/* Der Schädel, den der Knall eben gekostet hat, trägt für einen Augenblick die Senfkante — die Form sagt, dass er weg ist. */
.ar-du__schaedel[data-ar-du-bruch] {
  outline: 2px solid var(--ar-funke);
  outline-offset: 1px;
}

/*
 * WAS AUF DEM FILZ LIEGT, ist dieselbe Zeichnung wie im Sprite, so groß, wie die Bühne den Gegenstand stellt. Der
 * Revolver wirft keinen Kasten als Schatten, sondern seinen Umriss: dieselbe Linie wie das Symbol (grafik.js), in
 * Hundertsteln seiner Breite und Höhe.
 */
.ar-du__chip,
.ar-du__revolver,
.ar-du__trickbild {
  display: block;
  width: 100%;
  height: 100%;
}

.ar-kulisse__karte-schatten[data-ar-ku-art='revolver'] {
  clip-path: polygon(16.5% 33%, 18.5% 29%, 28% 34%, 32% 30%, 51% 30%, 52% 38%, 92% 38%, 92% 32%, 95% 32%, 97% 38%, 97% 49%, 83% 55%, 53% 55%, 53% 62%, 45% 62%, 43% 72%, 38% 76%, 32% 71%, 31% 63%, 23.5% 88%, 21.5% 96%, 11.5% 94%, 8% 90%, 10% 82%, 17.5% 50%, 23% 43%);
}

/* ------------------------------------------------------------------ Trommel */

/*
 * DIE TROMMEL STEHT NEBEN IHRER CHANCE, in einer Zeile unter dem Tisch: links das Bild, rechts die Zahl. Untereinander
 * nähmen beide auf dem Telefon die Höhe, die jetzt der Tisch braucht.
 */
.ar-du__mitte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.3rem 0.9rem;
}

.ar-du__trommel {
  width: clamp(5.5rem, 24cqw, 7.5rem);
}

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

/*
 * DAS RASTEN: eine Kammer weiter, und zwar als DREHUNG. Den Winkel schreibt das Brett als `rotate` an dieselbe
 * Gruppe, die stehen bleibt; hier steht nur, wie sie dorthin kommt.
 *
 * ES WAREN ZWEI HARTE BILDER ÜBER 90 MS, und das war eine Entscheidung, die der Tisch verworfen hat: „Die
 * Trommeldrehung ruckelt und wirkt mechanisch unrund." Zwei Bilder zu je dreißig Grad sind keine Drehung, die man
 * als Drehung liest — es sind zwei Sprünge. Die Trommel ist ein physikalischer Körper, der sich dreht, und für die
 * gilt in diesem Haus dieselbe Ausnahme wie für den Kessel von Roulette, die Pferde des Buchmachers und die Kugeln
 * des Nagelbalkens (README, Abschnitt 8, Ziffer 5): Sie darf länger laufen als 120 ms, solange sie LINEAR läuft.
 *
 * Und sie läuft linear: kein Federn, kein Nachwippen, kein Ausrollen. Eine Sperrklinke lässt eine Kammer durch und
 * hält sie; was am Ende steht, ist ein harter Anschlag und kein Auspendeln. Genau dafür springt die Klinke daneben
 * einmal nach außen.
 *
 * SIE HAT NIE GEFEUERT, SOLANGE DER WINKEL IM MARKUP STAND. Die Grafik schrieb ihn als `style="rotate:…"`, und weil
 * sich damit die Markup-Zeichenkette bei jedem Klick änderte, tauschte das Brett den ganzen Kasten aus: Das Element
 * war danach ein neues, hatte keinen Vorzustand, und die Regel hier stand als toter Code da. Die Trommel sprang.
 */
.ar-g-du-rast {
  transform-origin: 50px 50px;
  transition: rotate var(--ar-du-rast-ms) linear;
}

/*
 * ZWEI TAKTE RASTEN NICHT: die frische Ladung nach einem Knall und die Trickkarte. Beide setzen die Trommel um mehr
 * als eine Kammer, und ein Übergang darüber wäre kein Einrasten, sondern ein Schlenker. Die Trickkarte dreht dabei
 * ihre eigene Runde (unten), die frische Ladung springt hart auf ihre Null.
 */
.ar-du__trommel-bild[data-ar-du-hart] .ar-g-du-rast {
  transition: none;
}

/* Der Haken liegt im Bild und wird nicht gezeichnet, solange seine Kammer noch offen ist. */
.ar-g-du-loch:not([data-ar-du-durch]) .ar-g-du-haken {
  display: none;
}

/*
 * Die Trickkarte dreht durch: eine volle Umdrehung über die Dauer, die der Server nennt — und sie ROLLT AUS.
 *
 * SECHS HARTE BILDER ÜBER 1,1 SEKUNDEN WAREN EIN DAUMENKINO. Sechzig Grad je Bild, alle 183 Millisekunden eines:
 * Das ist derselbe Befund, den die Kugeln des Nagelbalkens schon einmal hatten („acht gleichförmige Rutschen, keine
 * einzige Beschleunigung"), nur mit sechs statt acht Stufen. Eine Trommel, der jemand einen Schwung gibt, dreht
 * schnell an und läuft in ihre Kerbe aus; dieselbe Kurve wie der Kessel von Roulette (1 − (1 − t)³), dieselbe
 * Begründung: Ein Rad, das hart auf seinem Stand einrastet, hat nie gedreht. Kein Federn, kein Nachwippen — es
 * pendelt nichts zurück, es wird nur langsamer.
 *
 * `both` lässt sie am Ende stehen, wo sie steht — und weil das Brett bei jedem Takt neu zeichnet, ist die Animation
 * vorbei, sobald `data-ar-du-dreht` fällt.
 *
 * JEDE BEWEGUNG HIER HÄNGT AN EINEM NEGATIVEN VERSATZ, den das Brett aus der Serverzeit schreibt (`--ar-du-ab`). Ohne
 * ihn liefe sie dort los, wo die Antwort eintrifft — bei vier Schirmen also viermal woanders; mit ihm steigt auch
 * ein, wer mitten hinein neu lädt.
 */
.ar-du__trommel-bild[data-ar-du-dreht] .ar-g-du-spin {
  transform-origin: 50px 50px;
  animation: ar-du-drehen var(--ar-du-dreh-ms) cubic-bezier(0.215, 0.61, 0.355, 1) both;
  animation-delay: var(--ar-du-ab, 0ms);
}

@keyframes ar-du-drehen {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

/*
 * DER HAHN SPANNT SICH, BEVOR DER SCHUSS FÄLLT. Vier harte Bilder zurück, dann steht er an der Rille — und am Ende
 * der Spanne, die der Server als `takt[0]` rechnet, fällt er in einem Bild. Genau dann klingt der Klick oder der
 * Knall; Bild und Ton haben denselben Nullpunkt. Bei 62 Prozent rastet er oben ein, und dort ruckt das Telefon
 * (`HAHN_RASTET` in brett.js): Wer diese Stufe verschiebt, verschiebt die Zahl dort mit.
 *
 * `step-end` und kein `steps()`: Die vier Stufen sind ungleich lang — der Daumen zieht erst schnell und hält dann.
 * Kein Fill-Modus, denn der letzte Zustand IST die Ruhestellung: Wo der Hahn hingehört, steht im Bild und nicht in
 * einer Animation, die stehen bleibt.
 */
.ar-du__trommel-bild[data-ar-du-spannt] .ar-g-du-hahn {
  animation: ar-du-spannen var(--ar-du-hahn-ms) step-end;
  animation-delay: var(--ar-du-ab, 0ms);
}

@keyframes ar-du-spannen {
  0% { translate: 0 0; }
  18% { translate: 0 -2px; }
  40% { translate: 0 -3px; }
  62% { translate: 0 -4px; }
  100% { translate: 0 0; }
}

/* Solange der Hahn oben steht, leuchtet seine Rille: Vier Einheiten Weg allein sieht auf einem Telefon niemand. */
.ar-du__trommel-bild[data-ar-du-spannt] .ar-g-du-rille {
  stroke: var(--ar-funke);
  stroke-width: 3;
}

/*
 * DIE KLINKE SCHNAPPT EIN, WENN DIE KAMMER STEHT. Bei einer einzelnen Kammer springt sie einmal nach außen und fällt
 * zurück — und zwar am ENDE der Drehung und nicht an ihrem Anfang: Eine Sperrklinke lässt die Kammer durchlaufen und
 * hält sie, wenn sie da ist. Das ist der Einrast-Klick, den man sieht.
 *
 * Beim Durchdrehen der Trickkarte tut sie dasselbe sechsmal, einmal je Kammer. Sie rattert dabei gleichmäßig,
 * während die Trommel darüber ausrollt — sechs Klinkenschläge über dieselbe Dauer sind ein Rasseln, und ein Rasseln,
 * das mit der Drehung langsamer würde, bräuchte sechs eigene Verzögerungen für eine Bewegung von einer Sekunde.
 */
.ar-du__trommel-bild[data-ar-du-rastet] .ar-g-du-klinke {
  animation: ar-du-klinke calc(var(--ar-bild) * 2) step-end;
  animation-delay: calc(var(--ar-du-ab, 0ms) + var(--ar-du-rast-ms));
}

.ar-du__trommel-bild[data-ar-du-dreht] .ar-g-du-klinke {
  animation: ar-du-klinke calc(var(--ar-du-dreh-ms) / 6) step-end 6;
  animation-delay: var(--ar-du-ab, 0ms);
}

@keyframes ar-du-klinke {
  0% { translate: 3px 0; }
  50% { translate: 5px 0; }
  100% { translate: 0 0; }
}

/*
 * OHNE BEWEGUNG BLEIBT DAS BRETT VOLLSTÄNDIG. Die Trommel steht sofort auf ihrem Stand, der Hahn in Ruhe, die Klinke
 * an ihrem Platz — was sie sagen, steht ohnehin als Kammer, Zahl und Zeile da.
 */
@media (prefers-reduced-motion: reduce) {
  .ar-g-du-rast {
    transition: none;
  }

  .ar-du__trommel-bild[data-ar-du-dreht] .ar-g-du-spin,
  .ar-du__trommel-bild[data-ar-du-spannt] .ar-g-du-hahn,
  .ar-du__trommel-bild[data-ar-du-rastet] .ar-g-du-klinke,
  .ar-du__trommel-bild[data-ar-du-dreht] .ar-g-du-klinke {
    animation: none;
  }
}

.ar-g-du-blech {
  fill: var(--ar-du-blech);
  stroke: var(--ar-kreide-2);
  stroke-width: 2.5;
}

/*
 * DIE NABE IST DIE ACHSE UND KEINE SIEBTE KAMMER. Sie stand in Noir wie die Kammern, und eine Trommel mit sechs
 * Löchern zeigte sieben — auf dem Telefon war das der erste Eindruck. Jetzt ist sie Blech mit einem Kreuzschlitz.
 */
.ar-g-du-nabe {
  fill: var(--ar-du-blech);
  stroke: var(--ar-kreide-2);
  stroke-width: 2.5;
}

.ar-g-du-achse {
  stroke: var(--ar-kreide-2);
  stroke-width: 2;
  stroke-linecap: square;
}

.ar-g-du-kammer {
  fill: var(--ar-noir);
  stroke: var(--ar-kreide);
  stroke-width: 2;
}

/* Eine geprüfte Kammer ist leer und abgehakt: der Ton allein sagt hier nichts. */
.ar-g-du-loch[data-ar-du-durch] .ar-g-du-kammer {
  fill: var(--ar-noir-3);
  stroke: var(--ar-kreide-2);
  stroke-width: 1;
}

.ar-g-du-haken {
  fill: none;
  stroke: var(--ar-kreide-2);
  stroke-width: 2.2;
  stroke-linecap: square;
}

/* Der Hahn steht über zwölf Uhr, und unter ihm dreht sich die Trommel: eine Marke am Rand, kein Ring im Kreis. */
.ar-g-du-hahn {
  fill: var(--ar-funke);
  stroke: var(--ar-noir);
  stroke-width: 2;
  stroke-linejoin: miter;
}

/* Die Rille ist der Anschlag des gespannten Hahns: in Ruhe eine Haarlinie, beim Spannen das Ziel, an dem er steht. */
.ar-g-du-rille {
  fill: none;
  stroke: var(--ar-kante-griff);
  stroke-width: 2;
  stroke-linecap: square;
}

/* Die Sperrklinke am Rand der Trommel: Blech mit Kreidekante, damit man sie springen sieht. */
.ar-g-du-klinke {
  fill: var(--ar-du-blech);
  stroke: var(--ar-kreide-2);
  stroke-width: 2;
  stroke-linejoin: miter;
}

.ar-g-du-filz {
  fill: var(--ar-du-filz);
}

/* ------------------------------------------------------------------ Chance */

/*
 * SIE IST DIE GRÖSSTE SCHRIFT DES BRETTS, und ihre Aufschrift steht darüber. „1 : 3" allein stand hier einmal ohne
 * ein Wort davor, und die Hälfte des Tisches hat es für einen Spielstand gehalten.
 */
.ar-du__chance {
  display: grid;
  justify-items: start;
  gap: 0.1rem;
  margin: 0;
  text-align: left;
}

.ar-du__chance-marke {
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ar-du__chance-zahl {
  color: var(--ar-funke);
  white-space: nowrap;
  font-family: var(--ar-schrift-mono);
  font-weight: 700;
  font-size: max(1.8rem, min(3.4rem, calc(var(--ar-einheit) * 0.62)));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ar-du__chance-satz {
  color: var(--ar-kreide-2);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ Tisch der Abrechnung */

/* Das Bild über der Abrechnung ist eine Liste je Farbe: Schädel, Marken und Trickkarte, wie der Tisch zum Schluss stand. */
.ar-du__tisch {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-du__platz {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border: 2px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

.ar-du__platz[data-ar-du-raus] {
  border-style: dashed;
  opacity: 0.55;
}

.ar-du__marke {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
}

/*
 * DIE SCHÄDEL NEHMEN DIE BREITE, DIE MARKEN STEHEN DANEBEN. Drei Leben und zwei Marken sind fünf Zeichen in einer
 * Zeile; ohne die Lücke dazwischen liest sie sich als eine Reihe von fünf gleichen Dingen.
 */
.ar-du__schaedel-reihe {
  display: flex;
  flex: 1;
  gap: 0.2rem;
}

.ar-du__feige-reihe {
  display: flex;
  flex: none;
  gap: 0.15rem;
  padding-left: 0.3rem;
  border-left: 1px solid var(--ar-kante);
}

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

.ar-du__feige {
  width: 1.05rem;
  height: 1.05rem;
}

.ar-g-du-schaedel {
  fill: var(--ar-du-knochen);
}

/* Ein verlorenes Leben ist kein blasser Schädel, sondern eine leere Kontur — und darin ein Riss. */
.ar-g-du-schaedel--weg {
  fill: none;
  stroke: var(--ar-kante-griff);
  stroke-width: 5;
}

.ar-g-du-auge,
.ar-g-du-nase {
  fill: var(--ar-noir);
}

.ar-g-du-zaehne {
  stroke: var(--ar-noir);
  stroke-width: 5;
  stroke-linecap: butt;
}

.ar-g-du-sprung {
  stroke: var(--ar-rot);
  stroke-width: 4;
}

.ar-g-du-feige {
  fill: var(--ar-funke);
}

/* Eine abgegebene Marke ist ein leerer Ring mit einem Strich darin. */
.ar-g-du-feige--weg {
  fill: none;
  stroke: var(--ar-kante-griff);
  stroke-width: 5;
}

.ar-g-du-feigering {
  fill: none;
  stroke: var(--ar-noir);
  stroke-width: 3;
}

.ar-g-du-kehre {
  fill: none;
  stroke: var(--ar-noir);
  stroke-width: 7;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.ar-du__trick {
  flex: none;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--ar-funke);
  color: var(--ar-funke);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ar-du__trick[data-ar-du-weg] {
  border-color: var(--ar-kante);
  border-style: dashed;
  color: var(--ar-kreide-2);
}

/* ------------------------------------------------------------------ Befund */

.ar-du__befund {
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.9rem;
  text-align: center;
  overflow-wrap: anywhere;
}

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

/*
 * VIER KNÖPFE IN ZWEI GLEICH BREITEN SPALTEN WAREN EINE QUETSCHUNG. `grid-template-columns: 1fr 1fr` gab jedem
 * Knopf rund vierzehn Zeichen Breite — auch „Abdrücken“, dem einen Zug, der die Runde entscheidet — und darunter
 * standen Unterzeilen von fünfzig Zeichen, die mit `overflow-wrap: anywhere` mitten im Wort brachen. Im Playtest:
 * „Buttons sind extrem gequetscht.“
 *
 * Jetzt steht jede Handlung auf ihrer eigenen Zeile, der Abzug zuerst und am größten, und die Trickkarte als eigene
 * Bank darunter. Nebeneinander stehen nur noch ihre zwei Knöpfe, und auch die erst, wenn wirklich Platz ist.
 */
.ar-du__griffe {
  display: grid;
  gap: 0.5rem;
}

.ar-du__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.4rem;
}

.ar-du__knopf {
  display: grid;
  gap: 0.15rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  text-align: center;
}

.ar-du__knopf-wort {
  font-size: 1rem;
}

/* Kein `overflow-wrap: anywhere`: Der Satz ist Prosa und keine Kennzahl, und ein Bruch mitten im Wort war genau
   das, was am Tisch als gequetscht gelesen wurde. */
.ar-du__knopf-zeile {
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  text-wrap: pretty;
}

/* Der Abzug ist der Zug, der diese Runde entscheidet: volle Breite, eine Stufe höher als alles daneben. */
.ar-du__knopf[data-ar-du-was='abdruecken'] {
  min-height: 3.5rem;
}

.ar-du__knopf[data-ar-du-was='abdruecken'] .ar-du__knopf-wort {
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/*
 * DAS DAUMENDOCK AM EIGENEN ZUG (`.ar-dock`, css/arena.css). Liegt die Waffe vor einem, kleben Abzug und Weiterreichen
 * am unteren Rand der Bühne: Zu viert stand „Abdrücken“ auf 375 × 812 bei 856 Pixeln, also unter dem Falz, und wer
 * die Trommel im Blick behalten wollte, musste für den einen Zug, der die Runde entscheidet, erst hinunterrollen.
 *
 * KANTE UND POLSTER DES DOCKS STEHEN IMMER DA, auch am fremden Zug — durchsichtig. Sonst wüchse der Kasten um sechzehn
 * Pixel, sobald die Waffe vor einem liegt, und die Trickkarte darunter spränge mit.
 */
@media (max-width: 47.99rem) and (min-height: 34rem) {
  .ar-du > .ar-du__griffe:not(.ar-dock) {
    padding-block: 0.45rem;
    border-top: 2px solid transparent;
  }
}

/* Die Trickkarte gilt EINMAL im ganzen Spiel. Sie steht deshalb abgesetzt, mit eigener Überschrift und leiser. */
.ar-du__trickbank {
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem;
  border: 1px dashed var(--ar-kante-griff);
}

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

.ar-du__reihe--trick .ar-du__knopf {
  border-style: dashed;
  font-size: 0.9rem;
}

/*
 * EIN KNOPF, DER GERADE NICHT GINGE, SIEHT AUCH SO AUS. Der Rahmen setzt auf `aria-disabled` nur den Mauszeiger —
 * wer die Waffe nicht hat, sah sonst vier Knöpfe in voller Lautstärke und tippte darauf. Er bleibt ein Knopf und
 * verschwindet nicht: Wer ihn liest, weiß, was gleich geht.
 */
.ar-du__knopf[aria-disabled='true'] {
  border-color: var(--ar-kante-griff);
  outline-color: var(--ar-kante-griff);
  background: var(--ar-noir);
  color: var(--ar-kreide-2);
  cursor: default;
}

.ar-du__knopf[aria-disabled='true'] .ar-du__knopf-zeile {
  color: var(--ar-kreide-2);
}

/* Ein Griff, der nicht ankäme, ruckt einmal — ein Bild lang, ohne Übergang. */
.ar-du__knopf[data-ar-nein] {
  translate: 3px 0;
  border-color: var(--ar-rot);
}

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

.ar-du__tisch--abrechnung {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

/* ------------------------------------------------------------------ Bildkarten */

.ar-g-du-karte {
  fill: var(--ar-noir-2);
  stroke: var(--ar-kreide-2);
  stroke-width: 3;
}

.ar-g-du-karte--hinten {
  fill: var(--ar-noir-3);
}

/*
 * DER REVOLVER: Stahl im Griffton, der Griff aus Holz mit einer Messingschraube, Tusche als Kante. Drei Töne auf der
 * Fläche, dazu Kreide für den Glanz auf Lauf und Trommel.
 */
.ar-g-du-stahl {
  fill: var(--ar-kante-griff);
  stroke: var(--ar-noir);
  stroke-width: 2.5;
  stroke-linejoin: miter;
}

.ar-g-du-stahl-tief {
  fill: var(--ar-kante);
  stroke: var(--ar-noir);
  stroke-width: 2;
}

.ar-g-du-holz {
  fill: var(--ar-ku-leder);
  stroke: var(--ar-noir);
  stroke-width: 2.5;
  stroke-linejoin: miter;
}

.ar-g-du-holz-licht {
  fill: none;
  stroke: var(--ar-ku-leder-licht);
  stroke-width: 3;
}

.ar-g-du-messing {
  fill: var(--ar-funke);
  stroke: var(--ar-noir);
  stroke-width: 1.5;
}

.ar-g-du-buegel {
  fill: none;
  stroke: var(--ar-noir);
  stroke-width: 4.5;
}

.ar-g-du-muendung {
  fill: var(--ar-noir);
}

.ar-g-du-glanz {
  fill: none;
  stroke: var(--ar-kreide-2);
  stroke-width: 1.8;
}

.ar-g-du-rille-trommel {
  fill: none;
  stroke: var(--ar-noir);
  stroke-width: 2;
}

/* Die Trickkarte: beide Tricks auf Noir in einem Senfrahmen; gespielt liegt sie mit dem schraffierten Rücken nach oben. */
.ar-g-du-trickgrund {
  fill: var(--ar-noir-2);
  stroke: var(--ar-funke);
  stroke-width: 4;
}

.ar-g-du-trickrahmen {
  fill: none;
  stroke: var(--ar-funke);
  stroke-width: 1.5;
}

.ar-g-du-trickzeichen {
  fill: none;
  stroke: var(--ar-kreide);
  stroke-width: 5;
  stroke-linejoin: miter;
}

.ar-g-du-trickspitze {
  fill: var(--ar-kreide);
}

.ar-g-du-tricklinie {
  fill: none;
  stroke: var(--ar-kante-griff);
  stroke-width: 2;
}

.ar-g-du-trickspiegel {
  fill: none;
  stroke: var(--ar-kreide-2);
  stroke-width: 3;
  stroke-dasharray: 5 4;
}

.ar-g-du-trickrueck {
  fill: var(--ar-noir-3);
  stroke: var(--ar-kante-griff);
  stroke-width: 4;
}

.ar-g-du-trickgitter {
  fill: none;
  stroke: var(--ar-kante);
  stroke-width: 3;
}

.ar-g-du-trickrahmen-weg {
  fill: none;
  stroke: var(--ar-kante-griff);
  stroke-width: 1.5;
}

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

/*
 * AB DEM TABLET STEHT DER TISCH LINKS UND QUER, MIT DEM GANZEN TISCH IM BILD, und rechts daneben das Pult: Banner,
 * Trommel mit Chance, die Zeile und die Knöpfe. Die Trickkarte steht unter dem Tisch, wo ihre zwei Knöpfe nebeneinander
 * Platz haben; in der schmalen Spalte stünden sie untereinander, und das Pult wäre höher als der Tisch.
 *
 * DER TISCH NIMMT DIE HÖHE, DIE ÜBRIG IST: Was das Fenster nach Spielleiste, Anzeigeleiste und Rändern (`--ar-reserve`),
 * dem klebenden Kopf und der Zeile der Trickkarte übrig lässt, mal anderthalb ist seine größte Breite. Wächst das Brett
 * aus dem Fenster, zoomt es der Rahmen klein (js/spielfeld.js, `einpassen()`), und mit ihm jeden Knopf unter seine 44
 * Pixel.
 *
 * JEDER BENANNTE BEREICH TRÄGT SEINEN ELTERNTEIL IM SELEKTOR. Ein blankes `grid-area: mitte` träfe jedes Element
 * dieses Namens im ganzen Haus, auch in einem Raster, das den Bereich gar nicht kennt — und das reißt dort eine
 * zweite Spalte auf (CLAUDE.md, Abschnitt 10).
 */
@container ar-du-mass (min-width: 38rem) {
  .ar-du {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      'waffe waffe waffe'
      'buehne buehne buehne'
      'mitte griffe trick'
      'befund griffe trick';
    align-items: start;
    gap: 0.6rem 1rem;
  }

  /*
   * Wer zuschaut oder ausgeschieden ist, hat kein Pult: Die Zeile unter dem Tisch trägt dann nur Trommel und Zeile.
   * Eingedampft werden die BEREICHE und nicht nur die Spalten — bliebe `griffe` stehen, stünde dort eine leere Spalte.
   */
  .ar-du:not(:has(> .ar-du__griffe)) {
    grid-template-areas:
      'waffe waffe waffe'
      'buehne buehne buehne'
      'mitte mitte mitte'
      'befund befund befund';
  }

  .ar-du > .ar-du__buehne {
    grid-area: buehne;
    justify-self: center;
    width: min(100%, (100svh - var(--ar-reserve) - var(--ar-hauskopf) - 17.5rem) * 2.4);
  }

  .ar-du__buehne > .ar-kulisse {
    aspect-ratio: 2.4 / 1;
  }

  .ar-du__farbe .ar-du__schaedel-reihe {
    display: flex;
  }

  .ar-du > .ar-du__waffe-fach {
    grid-area: waffe;
  }

  .ar-du > .ar-du__mitte {
    grid-area: mitte;
  }

  .ar-du > .ar-du__befund {
    grid-area: befund;
    text-align: left;
  }

  .ar-du > .ar-du__griffe {
    grid-area: griffe;
  }

  .ar-du > .ar-du__trickbank {
    grid-area: trick;
  }

  .ar-du__trommel {
    width: clamp(6rem, 10cqw, 8.5rem);
  }

  .ar-du__chance-zahl {
    font-size: clamp(1.8rem, 4.2cqw, 3rem);
  }

  .ar-du__farbe {
    max-width: 30%;
    padding: 0.2rem 0.45rem 0.25rem 0.35rem;
    font-size: 0.84rem;
  }

  .ar-du__zusatz {
    font-size: 0.68rem;
  }

  .ar-du__farbe .ar-du__marke {
    width: 1.05rem;
    height: 1.05rem;
  }

  .ar-du__farbe .ar-du__schaedel {
    width: 1rem;
    height: 1rem;
  }
}