/*
 * Der Nagelbalken: die Drop-Schiene auf dem Holzrahmen, der Kasten mit den Stiften, die fallenden Kugeln, die neun
 * Fächer und die Einsatzleiste. Anzeigeleiste, Brettrand, Abzeichen und Tafel stehen als Rahmen des Spielfelds in
 * css/arena.css; hier steht nur, was diesem Brett gehört, dazu das Bild des Wasserzeichens.
 *
 * NIE NUR EIN FARBTON. Das Fach, in dem eine Kugel gerade landet, trägt eine Kreidekante UND blinkt kurz auf; der
 * gewählte Trichter steht über seiner Spalte UND steht als Zeile darunter („Trichter 5 gewählt."). Jede Tippfläche
 * misst mindestens 44 Pixel — in beide Richtungen. **Hier standen neun Positionsknöpfe**, und sie brachen auf
 * schmalen Schirmen in zwei Zeilen um, um nicht unter 44 Pixel zu fallen; die Schiene ist ein einziger Griff und hat
 * dieses Problem nicht mehr.
 */

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

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

@media (orientation: landscape) and (max-height: 30rem) {
  .ar-spielfeld[data-ar-spiel='nagelbalken'] {
    --ar-brettbreite: min(28rem, 100vw - 2 * var(--ar-luft) - 15rem);
  }

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

/* Auf dem Schreibtisch nimmt die Pyramide die volle Bühne — keine Rem-Deckelung mehr, das Zweispalten-Cockpit unten
   begrenzt den Kasten von selbst auf einen sinnvollen Anteil. Dieselbe Bedingung wie beim Cockpit selbst (siehe dort):
   Schreibtisch ab 1024 Pixeln, Tablet quer schon ab 768. */
@media (min-width: 64rem) and (min-height: 30.0625rem),
  (orientation: landscape) and (min-width: 48rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='nagelbalken'] {
      --ar-brettbreite: var(--ar-feld);
    }
  }
}

body:has(.ar-spielfeld[data-ar-spiel='nagelbalken']:not([hidden]))::before,
.ar-spielfeld[data-ar-spiel='nagelbalken'] .ar-brett::before {
  background-image: url(assets/bg-nagelbalken.webp);
}

:root {
  --ar-nb-filz: #0e0b08;
  --ar-nb-holz: #241811;
  --ar-nb-holz-kante: #4a3320;
  --ar-nb-messing: #c9a227;
  /* Die dunkle Fassung des Messings: die Kante eines Stifts gegen das Holz dahinter. */
  --ar-nb-messing-tief: #4a3308;
  /* Drei Töne, die nur als Zeichnung taugen — Tiefe im Kasten, Glanzlicht und Bodenschatten einer Kugel. */
  --ar-nb-tiefe: rgb(0 0 0 / 0.55);
  --ar-nb-glanz: rgb(255 255 255 / 0.9);
  --ar-nb-kugelschatten: rgb(0 0 0 / 0.6);
}

/*
 * DIE BREITE DES KASTENS STEHT AM GANZEN BRETT UND NICHT AM KASTEN. Drei Bauteile müssen auf dieselbe Zahl: der
 * Kasten selbst, die Drop-Schiene darüber (ihr goldener Trichter muss über der Spalte stehen, in die seine Kugel
 * fällt) und die Fächertafel darunter (Fach 5 muss unter der mittleren Stiftspalte liegen). Sie stand nur am Kasten,
 * und die Fächertafel lief deshalb über die ganze Spalte: neun Fächer von 855 Pixeln unter einem Kasten von 440 —
 * dieselben neun Spalten, zweimal verschieden breit.
 *
 * Im Höhenterm stecken drei Zentimeter mehr als früher: Die Schiene nimmt sich eine Zeile, und ein quadratischer
 * Kasten, der sie nicht einrechnet, schöbe die Fächertafel unter die Kante. Die Hinweiszeile darüber ist die nächste
 * (1,3 rem Höhe plus 0,4 rem Fuge), deshalb 15,7 statt 14 rem.
 */
.ar-nb {
  --ar-nb-kastenbreite: min(calc(var(--ar-einheit) * 5.4), calc(100dvh - var(--ar-reserve) - var(--ar-hauskopf) - 15.7rem));

  display: grid;
  gap: 0.6rem;
  width: 100%;
}

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

/* ------------------------------------------------------------------ Kasten & Kugeln */

/*
 * DER KASTEN IST QUADRATISCH, UND DESHALB DECKELT IHN DIE HÖHE MIT. Nur die Breite zu begrenzen reicht bei
 * `aspect-ratio: 1` nicht: Was er an Breite bekommt, nimmt er sich an Höhe, und auf einem 16:9-Schirm schöbe er
 * Fächertafel und Befund unter die Kante. Die Klammer ist dieselbe wie bei Käsekästchen und Fluchtweg — Breite
 * gegen Höhe, und was übrig bleibt, gewinnt.
 */
.ar-nb__kasten {
  position: relative;
  width: 100%;
  max-width: var(--ar-nb-kastenbreite);
  aspect-ratio: 1;
  margin-inline: auto;
  border: 4px solid var(--ar-nb-holz-kante);
  background: radial-gradient(120% 120% at 50% 0%, var(--ar-nb-holz) 0%, var(--ar-nb-filz) 70%);
  box-shadow: inset 0 0 0 1px var(--ar-noir), inset 0 8px 18px var(--ar-nb-tiefe);
}

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

.ar-g-nb-rahmen {
  fill: transparent;
  stroke: var(--ar-nb-holz-kante);
  stroke-width: 3;
}

.ar-g-nb-stift {
  fill: url(#ar-g-nb-messing-grad);
  stroke: var(--ar-nb-messing-tief);
  stroke-width: 0.4;
}

/*
 * Der Stiftkontakt: Genau der Stift, an dem eine Kugel gerade abprallt, wird für 90 ms heller Messing mit einer
 * harten Kreidekante. Kein Glow, kein Weichzeichner — es bewegt sich nichts, nur zwei Farbwerte wechseln, und
 * deshalb braucht dieser Blitz auch keine prefers-reduced-motion-Abschaltung.
 */
.ar-g-nb-stift[data-ar-nb-blitz] {
  fill: var(--ar-funke);
  stroke: var(--ar-kreide);
  stroke-width: 0.8;
}

.ar-g-nb-kugel {
  fill: url(#ar-g-nb-stahl-grad);
  stroke: var(--ar-noir);
  stroke-width: 1;
}

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

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

.ar-g-nb-fach--mitte {
  fill: var(--ar-noir-3);
}

/*
 * EIN FALLENDER MARKER JE MITSPIELER, UND ER TRÄGT KEINEN ÜBERGANG. `left`/`top` schreibt die Bildschleife des
 * Bretts bei JEDEM Bild neu (`ballBahn()`), mit Beschleunigung und Absprung. Hier stand dafür einmal
 * `transition: left 200ms linear, top 200ms linear` — ein Übergang, der eine Position nachzieht, die sich sechzigmal
 * je Sekunde ändert, glättet nicht, er verschmiert: Aus acht Parabeln wurden acht gleichförmige Rutschen, und genau
 * das war die gemeldete Diashow.
 *
 * Ein Lichtreflex oben links UND ein Bodenschatten geben jeder Kugel Rundung — die Farbe bleibt der Erkennungston.
 * DIE KUGEL IST KLEIN. Sie stand auf 9% der Kastenbreite, ein Krümel ist realistisch nicht größer als das — echte
 * Stahlkugeln an einem Plinko-Brett wiegen als kleiner Punkt, nicht als Golfball.
 */
.ar-nb__ball {
  position: absolute;
  width: 3%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--ar-nb-tiefe);
  background-color: var(--ar-nb-messing);
  background-image: radial-gradient(circle at 30% 26%, var(--ar-nb-glanz), transparent 48%), radial-gradient(circle at 70% 82%, var(--ar-nb-tiefe), transparent 55%);
  box-shadow: 0 2px 3px var(--ar-nb-kugelschatten);
  translate: -50% -50%;
}

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

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

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

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

/* ------------------------------------------------------------------ Kastenfeld: Wurfstand & Werfer */

.ar-nb__kastenfeld {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
}

/* ------------------------------------------------------------------ Drop-Schiene */

/*
 * DIE SCHIENE LIEGT AUF DEM HOLZRAHMEN ÜBER DER ERSTEN STIFTREIHE. Sie ist genau so breit wie der Kasten darunter und
 * trägt dieselben seitlichen Holzpfosten (`border-inline`): Erst dadurch fällt ihr Prozentraster mit dem des SVG
 * zusammen, dessen viewBox innerhalb der Kastenkante liegt.
 */
.ar-nb__schiene {
  position: relative;
  width: 100%;
  max-width: var(--ar-nb-kastenbreite);
  height: 2.9rem;
  margin-inline: auto;
  border-inline: 4px solid var(--ar-nb-holz-kante);
  border-block: 1px solid var(--ar-nb-holz-kante);
  background: var(--ar-nb-holz);
}

.ar-nb__kerben {
  position: absolute;
  inset: 0;
}

/* Eine Kerbe je Trichter: Man soll sehen, auf welche Spalten der Griff einrastet, auch ohne ihn zu ziehen. */
.ar-nb__kerbe {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 0.55rem;
  background: var(--ar-nb-holz-kante);
  translate: -50% 0;
}

.ar-nb__lauf {
  position: absolute;
  inset-block: 0;
  left: calc(var(--ar-nb-von) - 22px);
  width: calc(var(--ar-nb-spanne) + 44px);
}

.ar-nb__trichter {
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  appearance: none;
}

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

.ar-nb__trichter::-webkit-slider-runnable-track {
  height: 100%;
  background: none;
}

.ar-nb__trichter::-moz-range-track {
  height: 100%;
  background: none;
}

/*
 * Der Griff ist 44 × 44 groß und trägt in der Mitte einen Messingbalken von 16 Pixeln: Die Tippfläche misst in beide
 * Richtungen, was CLAUDE.md Abschnitt 10 verlangt, und sichtbar ist trotzdem nur der Trichter. Gemacht wird das über
 * einen durchsichtigen Rand mit `background-clip: content-box` — `clip-path` kann der Griff in Firefox nicht.
 */
.ar-nb__trichter::-webkit-slider-thumb {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 14px solid transparent;
  border-block-width: 4px;
  border-radius: 0;
  background: var(--ar-nb-messing);
  background-clip: content-box;
  cursor: ew-resize;
  appearance: none;
}

.ar-nb__trichter::-moz-range-thumb {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 14px solid transparent;
  border-block-width: 4px;
  border-radius: 0;
  background: var(--ar-nb-messing);
  background-clip: content-box;
  cursor: ew-resize;
}

/* Steht die Wahl fest (geworfen, zugeschaut), bleibt der Trichter als stummes Zeichen stehen. */
.ar-nb__trichter-fest {
  position: absolute;
  top: 0.25rem;
  bottom: 0.7rem;
  width: 16px;
  background: var(--ar-nb-messing);
  translate: -50% 0;
}

/* Der Wurfstand ist die einzige Angabe, an der sich ablesen lässt, wie weit die Runde ist — er steht deshalb in der
   Ziffernschrift und mit derselben Sperrung wie der Zündungskopf beim Nachbarspiel. */
.ar-nb__wurfstand {
  margin: 0;
  color: var(--ar-kreide-2);
  font-family: var(--ar-schrift-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/*
 * DIE HINWEISZEILE ÜBER DER SCHIENE: Wort in Kreide, die beiden Dreiecke in Messing, dem Ton des Trichters. Sie zeigt
 * nur, dass er sich schieben lässt, und nimmt deshalb keinen Tipp an (`pointer-events: none`) — der Griff ist die
 * Schiene darunter. Ihre Höhe steht fest, auch wenn sie leer ist (Zuschauer, schon geworfen), damit der Kasten nicht
 * springt.
 */
.ar-nb__hinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 1.3rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.78rem;
  pointer-events: none;
  user-select: none;
}

.ar-nb__pfeil {
  width: 1em;
  height: 1em;
  color: var(--ar-funke);
}

/* ------------------------------------------------------------------ Wurfbuch */

/*
 * ES STAND ZWISCHEN KASTEN UND FÄCHERN UND STEHT JETZT UNTER DEM WERFEN-KNOPF. Die alte Liste (`.ar-nb__werfer`)
 * hatte nur während eines Wurfs Inhalt: Sie sprang auf, schob Kasten und Fächertafel auseinander und war eine
 * Sekunde später wieder weg — im Playtest gelesen als „eine nervöse, unleserliche Textzeile, die sofort
 * verschwindet". Dieselbe Auskunft steht jetzt in der rechten Spalte und bleibt stehen, Wurf für Wurf.
 */
/* Einsatz und Wurfbuch stehen als EIN Pult in der rechten Spalte. Ohne diese Klammer lag jeder für sich in einer
   Rasterzeile, und weil der Kasten links über beide lief, klaffte zwischen „Werfen!" und dem Buch die Lücke, die der
   Playtest gemeldet hat. */
.ar-nb__pult {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  min-width: 0;
}

.ar-nb__buch {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
}

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

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

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

.ar-nb__buch-wurf {
  display: grid;
  gap: 0.15rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--ar-kante);
  background: var(--ar-noir-2);
}

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

.ar-nb__buch-posten {
  display: grid;
  grid-template-columns: 0.9rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
}

.ar-nb__buch-marke {
  width: 0.9rem;
  height: 0.9rem;
}

.ar-nb__buch-name {
  color: var(--ar-kreide-2);
  overflow-wrap: anywhere;
}

.ar-nb__buch-trichter,
.ar-nb__buch-faktor,
.ar-nb__buch-saldo {
  font-family: var(--ar-schrift-mono);
  font-variant-numeric: tabular-nums;
  hyphens: none;
}

.ar-nb__buch-trichter {
  color: var(--ar-kreide-2);
}

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

.ar-nb__buch-saldo {
  color: var(--ar-kreide);
  font-weight: 700;
  text-align: right;
}

.ar-nb__buch-saldo[data-ar-nb-saldo='gewinn'] {
  color: var(--ar-gruen);
}

.ar-nb__buch-saldo[data-ar-nb-saldo='verlust'] {
  color: var(--ar-rot);
}

/* ------------------------------------------------------------------ Fächer */

/*
 * VIER STUFEN, UND JEDE TRÄGT SICH DREIFACH: als Farbe, als Kappe und — bei Gold — als Muster. Rot ist ein Verlust (unter
 * 1x), Gelb bleibt klein (bis 3x), Silber ist viel (bis 10x), Gold sind die Ränder (darüber); `stufe()` in brett.js sortiert
 * nach dem Faktor der Tafel. Die Kappe ist die obere Kante und wächst mit der Stufe (2, 4, 6, 8 Pixel). Gelb und Gold
 * liegen als Töne dicht beieinander, und wer Rot und Silber schlecht trennt, liest die Stufe trotzdem an der Höhe der
 * Kappe. Die Auskunft selbst bleibt die Zahl im Fach; keine Stufe trägt sich allein an der Farbe.
 *
 * Flächen sind flach. Was hier wie ein Verlauf aussieht, ist es nicht: Die Schraffur ist ein hartes Streifenmuster aus
 * Linien von einem Pixel (Halbtonraster und Korn sind nach Abschnitt 7 der CLAUDE.md erlaubt), und die Töne kommen aus den
 * Tokens des Rahmens.
 */
.ar-nb__faecher {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.15rem;
  width: 100%;
  max-width: var(--ar-nb-kastenbreite);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

/*
 * Neun Auszahlungen nebeneinander: Ziffernschrift mit gleich breiten Ziffern, sonst steht „30,0x" neben „0,7x" schief.
 * Das obere Polster ist um die Kappe gekürzt (8 Pixel sind die höchste), damit die Zahl in jedem Fach gleich hoch steht.
 */
.ar-nb__fach {
  --ar-nb-ton: var(--ar-kante-griff);
  --ar-nb-kappe: 2px;
  --ar-nb-anteil: 20%;

  display: grid;
  gap: 0.05rem;
  padding: calc(0.3rem + 8px - var(--ar-nb-kappe)) 0.1rem 0.3rem;
  border: 2px solid var(--ar-kante);
  border-top: var(--ar-nb-kappe) solid var(--ar-nb-ton);
  background-color: color-mix(in srgb, var(--ar-nb-ton) var(--ar-nb-anteil), var(--ar-noir-2));
  color: var(--ar-kreide);
  font-family: var(--ar-schrift-mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  hyphens: none;
}

/*
 * AUF DEM TELEFON HÄLT DIE HÖHE DEN KASTEN SCHMAL, und neun Faktoren brauchen mehr Breite, als eine Stiftgasse hat.
 * Hier stand deshalb einmal `max-width: 100%`: Die Tafel nahm die Breite des ganzen Bretts, und ihre neun Fächer
 * standen auf 375 Pixeln rund siebzig Pixel breiter als der Kasten darüber — die beiden äußeren 30x ragten links und
 * rechts ins Leere, und kein Fach lag mehr unter seiner Gasse. Die Tafel bleibt deshalb auch hier an
 * `--ar-nb-kastenbreite` (die Regel oben gilt unverändert), und Platz schaffen die Fächer selbst: Die Spuren dürfen
 * schrumpfen (`minmax(0, 1fr)`), die Zahl steht kleiner und ohne seitliche Luft, das obere Polster ist um zwei Pixel
 * gekürzt (6 statt 8 über der höchsten Kappe, die Zahl steht in jedem Fach weiter gleich hoch), und auf der Tafel
 * stehen die Faktoren ohne ihr „,0" (`faktorKurz()` in worte.js).
 *
 * DER BLOCK STEHT HINTER DER GRUNDREGEL, UND DAS IST SEIN GANZER SINN. Er stand einmal davor, und bei gleicher
 * Spezifität gewinnt die spätere Regel: Polster und Schriftgröße für das Telefon galten nie.
 */
@media (max-width: 30rem) {
  .ar-nb__faecher {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .ar-nb__fach {
    padding: calc(0.2rem + 6px - var(--ar-nb-kappe)) 0 0.2rem;
    font-size: 0.62rem;
  }
}

.ar-nb__fach[data-ar-nb-stufe='rot'] {
  --ar-nb-ton: var(--ar-rot);
  --ar-nb-anteil: 26%;
}

.ar-nb__fach[data-ar-nb-stufe='gelb'] {
  --ar-nb-ton: var(--ar-gelb);
  --ar-nb-kappe: 4px;
  --ar-nb-anteil: 22%;
}

.ar-nb__fach[data-ar-nb-stufe='silber'] {
  --ar-nb-ton: var(--ar-silber);
  --ar-nb-kappe: 6px;
  --ar-nb-anteil: 30%;
}

/* Gold ist das einzige Fach mit Muster: Gelb liegt als Ton zu dicht daneben, um es allein an der Farbe zu erkennen. */
.ar-nb__fach[data-ar-nb-stufe='gold'] {
  --ar-nb-ton: var(--ar-funke);
  --ar-nb-kappe: 8px;
  --ar-nb-anteil: 34%;
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--ar-noir-2) 3px 4px);
}

/* Das Fach, in dem eine Kugel liegt, füllt sich in seinem vollen Ton, trägt eine Kreidekante und steht fett. */
.ar-nb__fach[data-ar-nb-landung] {
  border-color: var(--ar-kreide);
  background: var(--ar-nb-ton);
  color: var(--ar-noir);
  font-weight: 700;
}

/*
 * DER EINSCHLAG: Das getroffene Fach wird zwei harte Bilder lang eingedrückt. Es federt nicht nach und schwingt nicht
 * aus — zwei Stufen über `steps(2)`, dieselbe Bauform wie jedes andere Einzelbild dieses Hauses (README, Abschnitt 8,
 * Ziffer 5). Ein Gummi-Bounce wäre hier das Gegenteil: Zwei Kilo Messing auf Zinkblech schwingen nicht.
 */
.ar-nb__fach[data-ar-nb-schlag] {
  animation: ar-nb-schlag 180ms steps(2);
}

@keyframes ar-nb-schlag {
  0% {
    translate: 0 4px;
  }

  100% {
    translate: 0 0;
  }
}

/*
 * Ein Fach ab dem Zehnfachen: volles Messing, Tusche darauf. Es steht 1,4 Sekunden und geht dann von selbst zurück —
 * die Zahl daneben sagt weiterhin, was es wert ist, die Farbe ist nie die einzige Auskunft.
 */
.ar-nb__fach[data-ar-nb-treffer] {
  border-color: var(--ar-kreide);
  background: var(--ar-nb-messing);
  color: var(--ar-noir);
}

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

/* ------------------------------------------------------------------ Einsatz */

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

.ar-nb__knopf {
  display: grid;
  gap: 0.1rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.4rem;
  text-align: center;
}

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

.ar-nb__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-nb__knopf[data-ar-nein] {
  translate: 3px 0;
  border-color: var(--ar-rot);
}

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

.ar-nb__werfen {
  min-height: 3rem;
  font-size: 1.05rem;
}

/*
 * Der Träger des Wurfknopfs ist auf dem Telefon das Daumendock (Abschnitt „Telefon“ unten). Ein Raster ist er überall:
 * In einem Block stünde der Knopf nur so breit wie sein Wort, im Raster des Einsatzbereichs nahm er die ganze Zeile.
 */
.ar-nb__werfen-dock {
  display: grid;
}

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

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

/* ------------------------------------------------------------------ Telefon */

/*
 * AUF DEM TELEFON STEHEN SCHIENE, KASTEN UND „KUGEL WERFEN“ IN EINEM BILD. Gemessen auf 375 × 812 lag der Knopf rund
 * hundert Pixel unter dem Falz: Wer den Trichter gezogen hatte, rollte zum Werfen hinunter und sah die Kugel danach
 * nicht mehr fallen. Zwei Dinge geben es zurück; die Klammer des Kastens bleibt, wie sie ist, denn sie hält ihn schon
 * so klein, dass Fächertafel und Einsatz über dem Dock stehen:
 *
 * ERSTENS KLEBT DER KNOPF IM DAUMENDOCK (`.ar-dock`, css/arena.css). Ein klebender Kasten klebt nur, so weit sein
 * Elternkasten reicht, und der Knopf steckte in Pult und Einsatzbereich — zwei Kästen, die erst unter der
 * Fächertafel beginnen. Beide lösen sich hier deshalb auf (`display: contents`), und ihre Kinder stehen im Raster des
 * ganzen Bretts. Die Zone „Einsatz" der ersten Runde trägt dafür der Wett-Block selbst (`.ar-nb__wetten`): Ein Kasten
 * ohne Kasten kann kein Streifchen tragen.
 *
 * ZWEITENS WERDEN DIE FUGEN ENGER. Wurfstand und Hinweis in eine Zeile zu legen, hätte zwanzig Pixel mehr gebracht —
 * aber der Wurfstand rückte dabei unter das Streifchen „Spielfläche“ der ersten Runde, das links oben an dieser Zone
 * hängt. Er bleibt mittig in seiner eigenen Zeile.
 */
@media (max-width: 47.99rem) {
  .ar-nb {
    gap: 0.4rem;
  }

  .ar-nb__kastenfeld {
    gap: 0.25rem;
  }

  .ar-nb__pult,
  .ar-nb__einsatz {
    display: contents;
  }
}

/* ------------------------------------------------------------------ Schreibtisch */

/*
 * UNTER DEM WERFEN-KNOPF KLAFFTE LEERRAUM, und das Wurfbuch füllt ihn. Der Playtest hat es benannt: „Unter dem
 * Button [Werfen!] klafft im rechten Panel toter Raum." Die rechte Spalte endete nach dem Einsatzblock, während
 * links Kasten und Fächertafel über die volle Höhe liefen. `minmax(0, 1fr)` in der dritten Zeile nimmt jetzt genau
 * den Rest, und was darin steht, ist die Auskunft, die vorher zwischen Kasten und Fächern geflackert hat.
 *
 * DIE ZWEITE BEDINGUNG IST FÜRS TABLET QUER, UND SIE SENKT NUR DIE BREITE, NIE DIE HÖHE. Die erste Zeile bleibt der
 * Schreibtisch — jedes Fenster ab 1024 Pixeln, gleich welche Form. Die zweite greift zusätzlich zwischen 768 und
 * 1024 Pixeln, aber nur im Querformat: Ein Tablet hoch auf derselben Breite (ein gedrehtes iPad im Hochformat mit
 * 768 × 1024) soll die schmale Spalte behalten, in der zwei Spalten nebeneinander die Fächertafel auf Daumenbreite
 * gequetscht hätten.
 */
@media (min-width: 64rem) and (min-height: 30.0625rem),
  (orientation: landscape) and (min-width: 48rem) and (min-height: 30.0625rem) {
  .ar-nb {
    /*
     * DER KASTEN DARF WACHSEN: Die Klammer reservierte 14rem für alles, was einmal darunter stand — Fächertafel UND
     * das ganze Pult aus Einsatz, Schnellwahl und Wurfbuch, damals noch in einer einzigen Spalte gestapelt. In
     * diesem Raster steht das Pult daneben, nicht mehr darunter; übrig bleiben in der Kasten-Spalte nur Fächertafel
     * und Befund. Sechs Rem sind dafür Reserve genug, und der Kasten bekommt den Rest der Höhe zurück, den ihm die
     * alte Zahl ohne Grund abgezogen hat — bis auf die Hinweiszeile über der Schiene (1,7 rem), die neu dazugekommen ist.
     */
    --ar-nb-kastenbreite: min(calc(var(--ar-einheit) * 5.4), calc(100dvh - var(--ar-reserve) - var(--ar-hauskopf) - 7.7rem));
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas:
      'kasten  pult'
      'faecher pult'
      'befund  befund';
    align-content: start;
    gap: 0.75rem 1.5rem;
  }

  .ar-nb > .ar-nb__pult {
    grid-area: pult;
    align-content: start;
  }

  /*
   * `justify-self: stretch` UND NICHT `center`. Zentriert schrumpft ein Rasterfeld auf seinen INHALT, und der Kasten
   * darin misst `width: 100%` — von nichts. Auf einer Bühne von 1500 Pixeln stand er deshalb als 308 Pixel schmales
   * Quadrat in der linken Spalte, während daneben achthundert Pixel Filz leer blieben. Gemittet wird stattdessen
   * innen (`justify-items: center` an `.ar-nb__kastenfeld`), und die Größe deckelt die Klammer am Kasten selbst.
   */
  .ar-nb > .ar-nb__kastenfeld {
    grid-area: kasten;
    align-self: start;
    justify-self: stretch;
  }

  .ar-nb > .ar-nb__faecher {
    grid-area: faecher;
  }

  .ar-nb > .ar-nb__faecher {
    align-self: start;
  }

  .ar-nb > .ar-nb__befund {
    grid-area: befund;
  }
}