/*
 * Drahtschneider: oben das Bombengehäuse mit Lage, Funden und Ziffernröhre, darunter der Stammtisch mit Bombe,
 * Werkbänken und Zange (js/kulisse.js) und einem Schild je Platz, darunter das Ansagepult oder das Zangenband mit den
 * Knöpfen zum Schneiden, und die verdeckte Rolle. Anzeigeleiste, Brettrand, Knallbild, 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.
 *
 * Tippflächen sind die Knöpfe des Pults, in den Schnitten ein Knopf je Werkbank und der Knopf der verdeckten Rolle, alle
 * mindestens 44 Pixel in beide Richtungen; was auf dem Tisch liegt, ist nur zum Ansehen da. Jede Regel auf der
 * gemeinsamen Fläche hängt an [data-ar-spiel='drahtschneider'].
 */

/*
 * Auf dem Telefon nimmt das Brett seine Breite, bis es sechsunddreißig Geviert hat, und steht in einer Spalte: Gehäuse,
 * Tisch, Pult oder Zangenband, Rolle. Ab dem Tablet nimmt es die ganze Bühne, mit dem Tisch über die volle Breite.
 */
.ar-spielfeld[data-ar-spiel='drahtschneider'] {
  --ar-brettbreite: min(36rem, 100vw - 2 * var(--ar-luft));
  --ar-einheit: calc(var(--ar-brettbreite) / 6);
}

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

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

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

/* Ab dem Tablet nimmt das Brett die volle Bühne: Hochkant auf dem Tablet stünde der Tisch sonst auf den 36rem des Telefons. */
@media (min-width: 48rem) and (min-height: 30.0625rem) {
  @supports (width: 1cqw) {
    .ar-spielfeld[data-ar-spiel='drahtschneider'] {
      --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-ds-mass {
  container: ar-ds-mass / inline-size;
}

/*
 * DIE DYNAMITSTANGEN DER BOMBE sind ein schmutziges Ziegelrot und keine Farbe eines Platzes: Ein Rot wie das der roten
 * Farbe sagte, die Bombe gehöre ihr. Sie ist Fläche und keine Auskunft; was etwas sagt, sind Klebeband und Uhr darauf.
 */
:root {
  --ar-ds-dynamit: #9c4632;
}

.ar-ds__platz[data-ar-farbe='rot'],
.ar-ds__ziel[data-ar-farbe='rot'] { --ar-ds-farbe: var(--ar-rot); }
.ar-ds__platz[data-ar-farbe='blau'],
.ar-ds__ziel[data-ar-farbe='blau'] { --ar-ds-farbe: var(--ar-blau); }
.ar-ds__platz[data-ar-farbe='gelb'],
.ar-ds__ziel[data-ar-farbe='gelb'] { --ar-ds-farbe: var(--ar-gelb); }
.ar-ds__platz[data-ar-farbe='gruen'],
.ar-ds__ziel[data-ar-farbe='gruen'] { --ar-ds-farbe: var(--ar-gruen); }

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

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

/*
 * DAS BOMBENGEHÄUSE: Blech mit vier Nieten, und darauf die Lage, die Funde und die Ziffernröhre der Restzeit. Vorher
 * standen die drei Angaben blank auf dem Brett; ein Gehäuse sagt in einem Blick, dass sie zusammengehören und woran
 * sie hängen.
 */
.ar-ds__lage {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.3rem 0.8rem;
  padding: 0.4rem 0.95rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

.ar-ds__niet {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
}

.ar-ds__niet[data-ar-ecke='lo'] { top: 0.2rem; left: 0.2rem; }
.ar-ds__niet[data-ar-ecke='ro'] { top: 0.2rem; right: 0.2rem; }
.ar-ds__niet[data-ar-ecke='lu'] { bottom: 0.2rem; left: 0.2rem; }
.ar-ds__niet[data-ar-ecke='ru'] { bottom: 0.2rem; right: 0.2rem; }

.ar-ds__zeile,
.ar-ds__funde {
  margin: 0;
}

/* ------------------------------------------------------------ Ziffernröhre */

/*
 * SIE GLÜHT NICHT, UND DAS IST DIE GANZE REGEL: „Kein Glow, kein Neon. Terminals leuchten durch Kontrast, nicht durch
 * Schein" (CLAUDE.md, Abschnitt 7). Kein `filter`, kein `text-shadow`, kein Verlauf — die Ziffer steht in Senf auf
 * Tiefschwarz (8,8 : 1), und dahinter liegt als Geisterziffer eine Acht in `--ar-noir-3` (1,26 : 1), also genau so
 * schwach, wie unbenutzte Segmente in einer kalten Röhre stehen. Der Kolben ist eine harte Kante, kein Glas mit
 * Weichzeichner, und der Sockel darunter ein Blechring.
 */
.ar-ds__roehre {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.ar-ds__kolben {
  display: flex;
  gap: 1px;
  padding: 0.15rem 0.35rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir);
}

.ar-ds__sockel {
  display: block;
  width: 72%;
  height: 0.3rem;
  border: 1px solid var(--ar-noir);
  background: var(--ar-kante-griff);
}

.ar-ds__ziffer {
  display: grid;
  min-width: 1ch;
  font-family: var(--ar-schrift-mono);
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ar-ds__ziffer > * {
  grid-area: 1 / 1;
}

.ar-ds__ziffer-geist {
  color: var(--ar-noir-3);
}

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

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

.ar-ds__zeichenreihe {
  display: flex;
  gap: 0.25rem;
}

/* Gefunden heißt durchgezogene Kreidekante, verdeckt gestrichelt und blass: nie nur eine Farbe. */
.ar-ds__zeichen {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px dashed var(--ar-kante-griff);
}

.ar-ds__zeichen[data-ar-offen] {
  border-style: solid;
  border-color: var(--ar-kreide);
}

.ar-ds__zeichen[data-ar-zuender] {
  margin-left: 0.4rem;
}

.ar-ds__zeichen[data-ar-zuender][data-ar-offen] {
  border-color: var(--ar-rot);
}

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

.ar-ds__zeichen:not([data-ar-offen]) .ar-ds__zeichen-bild {
  opacity: 0.35;
}

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

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

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

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

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

/*
 * WAS AUF DEM FILZ LIEGT, ist dieselbe Zeichnung wie in Pult und Abrechnung, so groß, wie die Bühne den Gegenstand
 * stellt: ein Fach von hinten (`ar-fach`), von vorn Draht, Zünder oder leere Kammer, die Zange offen oder zugeschnappt,
 * die Bombe und der Funke eines Blindgängers. Bewegt wird nur der Kasten der Karte, nie eine Form im SVG darin — die
 * malte Chrome im Raum der Bühne nicht neu (knack/brett.css, „UND WAS BRICHT“).
 */
.ar-ds__tischbild,
.ar-ds__auflage {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * EIN OFFENES FACH TRÄGT SEINE ART AN DER KANTE, und nie nur dort: Der Draht liegt mit einer Kreidekante, der Zünder mit
 * einer roten, die leere Kammer ohne; die Zeichnung darauf sagt es ohnehin. Das Fach des letzten Schnitts trägt,
 * solange er frisch ist, die Senfkante außen herum.
 */
.ar-kulisse__karte[data-ar-ku-art='draht'] > .ar-kulisse__karte-seite:first-child {
  outline: 2px solid var(--ar-kreide);
  outline-offset: -2px;
}

.ar-kulisse__karte[data-ar-ku-art='zuender'] > .ar-kulisse__karte-seite:first-child {
  outline: 3px solid var(--ar-rot);
  outline-offset: -3px;
}

.ar-kulisse__karte[data-ar-ku-marke='neu'] > .ar-kulisse__karte-seite:first-child {
  box-shadow: 0 0 0 3px var(--ar-funke);
}

/*
 * Die Zange wirft keinen Kasten als Schatten, sondern ihren Umriss: Griffe und Backen der offenen Zange (grafik.js), in
 * Hundertsteln ihres Quadrats.
 */
.ar-kulisse__karte-schatten[data-ar-ku-art='zange'] {
  clip-path: polygon(20% 90%, 30% 96%, 50% 70%, 70% 96%, 80% 90%, 58% 58%, 68% 26%, 58% 8%, 50% 30%, 42% 8%, 32% 26%, 42% 58%);
}

/*
 * DIE SCHILDER DER PLÄTZE liegen je eines am Rand seiner Werkbank (brett.js rechnet die Stelle aus der Bühne): Marke,
 * Name und Abzeichen in einer Zeile, darunter die Ansage. Ein Schild ist eine Fläche in der Palette der Arena auf dem
 * Bild, und seine Schrift hält dort ihren Kontrast.
 */
.ar-ds__platz {
  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-ds-farbe);
  background: var(--ar-noir-2);
  font-size: 0.74rem;
  line-height: 1.2;
  translate: -50% -50%;
}

/*
 * HOCHKANT AN DER FERNEN KANTE STEHT EIN SCHILD IN ZWEI ZEILEN: Name, darunter beide Marken der Ansage. Mit drei Zeilen
 * lag es auf 390 Pixeln über den offenen Fächern oder über der Bombe; die Marken stehen deshalb dort enger und kleiner,
 * und das Glimmen steht als Funke ohne sein Wort — der Satz für den Screenreader nennt es ganz. Erst unter 390 Pixeln
 * brechen die Marken in eine dritte Zeile um, denn abgeschnitten fehlte ausgerechnet ihr Wert.
 */
.ar-ds__platz[data-ar-ds-seite^='fern'] {
  max-width: 33.3%;
  padding-inline: 0.25rem 0.2rem;
}

.ar-ds__platz[data-ar-ds-seite^='fern'] .ar-ds__ansage {
  gap: 0.15rem;
  font-size: 0.58rem;
}

.ar-ds__platz[data-ar-ds-seite^='fern'] .ar-ds__chip {
  padding-inline: 0.15rem;
}

.ar-ds__platz[data-ar-ds-seite^='fern'] .ar-ds__zusatz-wort {
  display: none;
}

/* Wer die Zange vor sich hat, trägt die Kreidekante und das Zangenbild: Die Zange davor sagt es auch, aber nicht jedem. */
.ar-ds__platz[data-ar-zange] {
  border-color: var(--ar-kreide);
  border-left-color: var(--ar-ds-farbe);
  outline: 2px solid var(--ar-kreide);
  outline-offset: 1px;
}

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

/* Wo die Zündschnur glimmt, steht es als Wort im Schild; die rote Kante an seiner Unterseite sagt es ein zweites Mal. */
.ar-ds__platz[data-ar-glimmt] {
  box-shadow: inset 0 -3px 0 0 var(--ar-rot);
}

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

.ar-ds__platz .ar-ds__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-ds__platz .ar-ds__marke {
  width: 0.9rem;
  height: 0.9rem;
}

.ar-ds__zange-bild {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
}

.ar-ds__platz .ar-ds__zusatz {
  padding: 0 0.2rem;
  font-size: 0.6rem;
}

/*
 * DIE ANSAGE UNTER DEM NAMEN: In der Ansage steht kursiv, dass angesagt wird, und aufrecht, dass die Ansage steht; mit
 * den Schnitten stehen zwei Marken mit Wort und Wert da, und wo ein Teil offen blieb, ist die Marke gestrichelt und der
 * Wert ein Strich. Das Wort sagt es, die Kante sagt es noch einmal.
 */
.ar-ds__ansage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.25rem;
  margin: 0.15rem 0 0;
  color: var(--ar-kreide-2);
  font-size: 0.68rem;
}

.ar-ds__ansage[data-ar-ansage='verdeckt'] {
  font-style: italic;
}

.ar-ds__ansage[data-ar-ansage='angesagt'] {
  color: var(--ar-kreide);
}

.ar-ds__chip {
  padding: 0 0.25rem;
  border: 1px solid var(--ar-kreide);
  color: var(--ar-kreide);
  white-space: nowrap;
}

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

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

/* ------------------------------------------------------------ Die verdeckte Rolle */

/*
 * DIE ROLLE LIEGT VERDECKT RECHTS UNTER DEM TISCH: ein kleiner Knopf, rechts, wo der Daumen einer Hand hinkommt, und auf
 * dem Telefon vor dem Pult, denn zuerst sieht man nach, was man ist, und dann sagt man an. Er klebte am unteren Rand der
 * Bühne, solange vier Werkbänke unter den Falz reichten; mit dem Tisch reicht dort nur noch das Pult hin, und auf ihm
 * lag der klebende Knopf genau über „Zünder liegt bei mir“. Verdeckt sehen beide Rollen gleich aus; erst die
 * aufgedeckte Karte trägt Bild, Schild und beim Saboteur die rote Strichkante. Sie steht über dem Knopf und liegt auf dem
 * Tisch, statt das Pult beim Aufdecken wegzuschieben.
 */
.ar-ds > [data-ar-ds-teil='rolle'] {
  position: relative;
  z-index: 2;
  justify-self: end;
}

.ar-ds__rolle-dock {
  position: relative;
}

.ar-ds__rolle-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem 0.3rem 0.4rem;
}

.ar-ds__rolle-deckel {
  display: block;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.ar-ds__rolle {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.35rem);
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  width: min(22rem, 100cqw);
  padding: 0.35rem 0.6rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
}

/* `hidden` versteckt über das Stilblatt des Browsers, und das verliert gegen `display: grid`. */
.ar-ds__rolle[hidden] {
  display: none;
}

.ar-ds__rolle[data-ar-rolle='saboteur'] {
  border: 2px dashed var(--ar-rot);
}

.ar-ds__rolle-bild {
  display: block;
  width: 3rem;
  height: 3rem;
}

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

/* Das Schild steht auf einer eigenen Zeile, der Satz zum Gewinnen darunter: Beide Rollen lesen dieselbe Bauform. */
.ar-ds__rolle-text strong {
  display: block;
  color: var(--ar-kreide);
  font-size: 0.95rem;
  font-weight: 700;
}

.ar-ds__rolle-satz {
  display: block;
  font-size: 0.8rem;
}

/* ------------------------------------------------------------ Ansagepult */

/* Das Pult steht mit einer Senfkante unter dem Tisch: In der Ansage ist es das Einzige, was die eigene Farbe tut. */
.ar-ds__pult {
  display: grid;
  gap: 0.4rem;
  padding: 0.45rem 0.5rem 0.5rem;
  border: 2px solid var(--ar-funke);
  background: var(--ar-noir-2);
}

.ar-ds__pult[data-ar-fertig] {
  border-color: var(--ar-kante-griff);
}

.ar-ds__pult-kopf,
.ar-ds__pult-stand,
.ar-ds__pult-satz {
  margin: 0;
}

.ar-ds__pult-kopf {
  color: var(--ar-kreide);
  font-weight: 700;
}

.ar-ds__pult-stand {
  color: var(--ar-kreide);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

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

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

.ar-ds__wahlen[data-ar-zuender] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ar-ds__wahl {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 3rem;
  padding-inline: 0.3rem;
  font-size: 0.78rem;
  line-height: 1.15;
}

.ar-ds__wahl-zahl {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ar-ds__wahl-wort {
  font-size: 0.72rem;
}

.ar-ds__wahl[aria-disabled='true'],
.ar-ds__ziel[aria-disabled='true'] {
  border-color: var(--ar-kante-griff);
  color: var(--ar-kreide-2);
  cursor: default;
}

.ar-ds__wahl[data-ar-nein],
.ar-ds__ziel[data-ar-nein] {
  outline: 3px solid var(--ar-kreide);
  outline-offset: -3px;
}

/* ------------------------------------------------------------ Zange */

/*
 * DAS ZANGENBAND: eine feste Zeile unter dem Tisch. Sie hat in jedem Zustand dieselbe Höhe — zwei Zeilen Text, denn der
 * Auftrag an die Farbe mit der Zange braucht auf dem Telefon zwei —, sonst spränge, was darunter steht, bei jedem
 * Zangenwechsel. Wer schneiden darf, bekommt die Senfkante und das Zangenbild; alle anderen lesen leiser, mit der Marke
 * der Farbe davor.
 */
.ar-ds__zangenband {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.1rem;
  margin: 0;
  padding: 0.3rem 0.6rem;
  border: 2px solid var(--ar-kante);
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  line-height: 1.3;
}

.ar-ds__zangenband[data-ar-zange] {
  color: var(--ar-kreide);
}

.ar-ds__zangenband[data-ar-zange='du'] {
  border-color: var(--ar-funke);
  font-weight: 700;
}

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

.ar-ds__zangenband-text {
  min-width: 0;
}

.ar-ds__zangenband-bild {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

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

/*
 * DIE KNÖPFE ZUM SCHNEIDEN: einer je Werkbank, nebeneinander, so breit, wie Platz ist. Auf dem Telefon stehen Name und
 * „Hier schneiden“ untereinander, damit drei Knöpfe in eine Zeile passen; die Farbe steht als Kante links und als Marke
 * vor dem Namen. Still heißt blasse Kante ohne Aufruf.
 */
.ar-ds > [data-ar-ds-teil='zange'] {
  display: grid;
  gap: 0.4rem;
}

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

.ar-ds__ziel {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.2rem;
  min-height: 3.25rem;
  padding: 0.3rem 0.45rem 0.3rem 0.4rem;
  border-left: var(--ar-farbkante) solid var(--ar-ds-farbe);
  text-align: left;
}

.ar-ds__ziel[aria-disabled='true'] {
  border-left-color: var(--ar-ds-farbe);
}

.ar-ds__ziel-wer {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
}

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

.ar-ds__schneiden {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.35rem;
  border: 2px solid var(--ar-kante-griff);
  color: var(--ar-kreide-2);
  font-size: 0.74rem;
  line-height: 1.15;
}

.ar-ds__ziel[data-ar-schneidbar] .ar-ds__schneiden {
  border-color: var(--ar-noir);
  background: var(--ar-funke);
  color: var(--ar-noir);
}

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

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

/*
 * AB DEM TABLET STEHT DER TISCH QUER UND GANZ über die volle Breite, darüber das Gehäuse und darunter Pult und Zange,
 * mit der Rolle rechts daneben. Das Pult stellt seine zwei Gruppen nebeneinander, die Knöpfe zum Schneiden stehen in
 * einer Zeile, je Knopf Name und „Hier schneiden“ nebeneinander.
 *
 * DER TISCH NIMMT DIE HÖHE, DIE ÜBRIG IST: Was das Fenster nach Spielleiste, Anzeigeleiste und Rändern (`--ar-reserve`),
 * dem klebenden Kopf, dem Gehäuse und dem Pult übrig lässt, mal 2,4 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: pult` träfe jedes Element dieses
 * Namens im ganzen Haus, auch in einem Raster, das den Bereich gar nicht kennt (CLAUDE.md, Abschnitt 10).
 */
@container ar-ds-mass (min-width: 38rem) {
  .ar-ds {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'lage lage'
      'buehne buehne'
      'pult rolle'
      'zange rolle';
    align-items: start;
    gap: 0.6rem 1rem;
  }

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

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

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

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

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

  .ar-ds > [data-ar-ds-teil='rolle'] {
    grid-area: rolle;
    align-self: end;
  }

  .ar-ds__pult {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    column-gap: 0.6rem;
  }

  .ar-ds__pult-kopf,
  .ar-ds__pult-stand,
  .ar-ds__pult-satz {
    grid-column: 1 / -1;
  }

  .ar-ds__ziele {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }

  .ar-ds__ziel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .ar-ds__ziel-wer {
    width: 100%;
  }
}

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

/*
 * Was am Ende noch zu war, steht oben in der Abrechnung. Die Fächer sind dort kleiner als auf dem Tisch: In der Tafel
 * stehen auf 375 Pixeln fünf Fächer zu 2,25rem nebeneinander.
 */
.ar-ds__aufdeckung {
  margin: 0 0 0.5rem;
  text-align: left;
}

.ar-ds__auf-titel {
  margin: 0 0 0.3rem;
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
  font-weight: 700;
}

.ar-ds__auf-baenke {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-ds__auf-bank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  border-top: 1px solid var(--ar-kante);
  padding-top: 0.3rem;
}

.ar-ds__auf-kopf {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.3rem;
  min-width: 6rem;
  margin: 0;
}

.ar-ds__name {
  min-width: 0;
  color: var(--ar-kreide);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ar-ds__zusatz {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.3rem;
  border: 1px solid var(--ar-kante-griff);
  color: var(--ar-kreide-2);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.ar-ds__zusatz[data-ar-rolle='saboteur'],
.ar-ds__zusatz[data-ar-glimmt] {
  border-color: var(--ar-rot);
  color: var(--ar-kreide);
}

.ar-ds__glimmt-bild {
  width: 0.9rem;
  height: 0.9rem;
}

.ar-ds__auf-faecher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.ar-ds__fach {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--ar-kante-griff);
  background: var(--ar-noir-3);
}

.ar-ds__fach[data-ar-eigen] {
  border-style: dashed;
}

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

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

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

.ar-g-blech { fill: var(--ar-noir-3); stroke: var(--ar-kante-griff); stroke-width: 3; }
.ar-g-fuge { fill: none; stroke: var(--ar-kante); stroke-width: 3; }
.ar-g-kabel { fill: none; stroke: var(--ar-funke); stroke-width: 6; stroke-linecap: square; }
.ar-g-kabel-hell { fill: none; stroke: var(--ar-kreide); stroke-width: 6; stroke-linecap: square; }
.ar-g-kabel-grund { fill: none; stroke: var(--ar-noir); stroke-width: 11; stroke-linecap: square; }
.ar-g-lichtkegel { fill: var(--ar-noir-3); }
.ar-g-ds-stange { fill: var(--ar-ds-dynamit); stroke: var(--ar-noir); stroke-width: 4; }
.ar-g-ds-licht { fill: none; stroke: var(--ar-kreide); stroke-width: 4; opacity: 0.4; }
.ar-g-ds-band { fill: var(--ar-noir-3); stroke: var(--ar-noir); stroke-width: 3; }
.ar-g-ds-ziffer { fill: var(--ar-funke); }