/*
 * Schmuggler-Flotte: Zellmaß, Achsen, Hafenraster, Dock, die Freibeuter in der Leiste, die Farben der Rümpfe und die
 * Seekarte, auf der der Hafen liegt. Anzeigeleiste, Brettrand, Abzeichen, Tafel und der Tisch darunter (`TISCHE.plan`)
 * stehen als Rahmen des Spielfelds in css/arena.css. Jede Regel hängt an [data-ar-spiel='schmugglerflotte'] oder an
 * einem Klassennamen mit `ar-sf`.
 *
 * DIE LEISTE STEHT OBEN, WIE AN JEDEM TISCH DER ARENA. Sie stand auf dem Schreibtisch als Spalte neben dem Brett und
 * das Logbuch als zweite Spalte neben dem Raster; das Raster war damit größer und die Ansicht gequetscht — drei Spalten,
 * von denen keine in der Mitte lag. Jetzt stehen Leiste, Dock und Raster untereinander auf einer Achse.
 *
 * JEDES FELD IST EIN KNOPF, UND AB 375 PIXELN MISST ES 44 × 44. Acht Spalten zu 44 sind 352 Pixel, dazu kommen der
 * Brettrand und die Achse 1 bis 8 links daneben — mehr, als die Bühne eines Telefons mit ihrer Regelluft von 1rem je
 * Seite überhaupt hat (343 auf 375). Es geht deshalb nur, weil dieser Tisch unter 48rem an drei Stellen Luft abgibt:
 * zwischen Brettrand und Raster (die Brettluft steht auf null), an der Ziffernachse (0,625rem statt 1rem, eine Ziffer
 * ist dort kaum sieben Pixel breit) und am Rand der Seite, solange sein Brett offen ist: Die Seitenluft ist, was der
 * Hafen übrig lässt, zwischen 0,25rem und 1rem. Das Brett ist damit genau so breit wie seine Bühne und nie breiter.
 * Darunter, auf 360 und 320 Pixeln, werden die Felder schmaler (42 und 37) — lieber das als ein Hafen, der seitwärts
 * aus dem Fenster läuft. Die Untergrenze von 28 Pixeln greift erst, wenn ein Fenster auch in der Höhe keinen Platz
 * mehr hergibt.
 *
 * SIE STANDEN AUF 375 PIXELN BEI 42, mit einer festen Seitenluft von 0,5rem und einer Ziffernachse von 1rem: Der Lauf
 * `bretter` misst nur 390 Pixel, dort reichte es, und eine Stufe darunter fehlten jedem Feld zwei Pixel.
 */

.ar-spielfeld[data-ar-spiel='schmugglerflotte'] {
  --ar-felder: 8;
  /* Die Achsen: A bis H in einer Zeile über dem Raster, so hoch; 1 bis 8 in einer Spalte links daneben, so breit. */
  --ar-sf-achse: 1rem;
  --ar-sf-achse-breite: var(--ar-sf-achse);
  /*
   * Der Rand der Seekarte um Achsen und Raster: links, rechts und oben erst ab 48rem, denn darunter geben acht Felder
   * zu 44 Pixeln keinen Pixel her (oben). Dort sind die Achsen der Rand der Karte, und unten liegt immer ein Streifen
   * Papier für die Reißnägel.
   */
  --ar-sf-blatt: 0px;
  --ar-sf-blatt-fuss: 0.9rem;
  /* Was über dem Raster steht und in die Höhe zählt: die Satzzeile samt Fuge und die Achse. Das Dock darunter zählt
     nicht: Es steht nur beim Auslegen da, und ein Raster, das zwischen den Abschnitten der Nacht seine Größe wechselt,
     springt unter dem Finger weg. */
  --ar-sf-kopf: calc(2.4rem + var(--ar-sf-achse) + var(--ar-sf-blatt) + var(--ar-sf-blatt-fuss));
  /* Wie klein die Höhe ein Feld machen darf. Mit dem Finger nie unter 44 Pixel (unten): Lieber rollt das Brett über den
     Falz, als dass ein Feld zu klein zum Tippen wird. Die Breite gibt diese Untergrenze nie her — seitwärts läuft kein
     Hafen aus dem Fenster. */
  --ar-sf-boden: 0px;
  --ar-zelle: clamp(28px, min((100vw - 2 * var(--ar-luft) - 2 * (var(--ar-brettrand) + var(--ar-brettluft)) - var(--ar-sf-achse-breite) - 2 * var(--ar-sf-blatt)) / var(--ar-felder), max(var(--ar-sf-boden), (100vh - var(--ar-reserve) - var(--ar-hauskopf) - var(--ar-sf-kopf)) / var(--ar-felder))), 72px);
  --ar-brettbreite: calc(var(--ar-felder) * var(--ar-zelle) + 2 * (var(--ar-brettrand) + var(--ar-brettluft)) + var(--ar-sf-achse-breite) + 2 * var(--ar-sf-blatt));
  --ar-einheit: var(--ar-zelle);
}

/* Gemessen auf 1024 × 768: Mit der Leiste oben gab die Höhe dem Tablet quer 40 Pixel je Feld. */
@media (pointer: coarse) {
  .ar-spielfeld[data-ar-spiel='schmugglerflotte'] {
    --ar-sf-boden: 44px;
  }
}

@media (max-width: 47.99rem) {
  .ar-spielfeld[data-ar-spiel='schmugglerflotte'] {
    --ar-brettluft: 0px;
    --ar-sf-achse-breite: 0.625rem;
  }

  /* 23rem sind acht Felder zu 44 Pixeln, der Brettrand, die Ziffernachse und zwei Pixel Spiel fürs Runden. */
  .ar-rahmen:has(.ar-spielfeld[data-ar-spiel='schmugglerflotte']:not([hidden])) {
    --ar-luft: clamp(0.25rem, (100vw - 23rem) / 2, 1rem);
  }
}

/*
 * AB 48REM LIEGT DAS DOCK ALS EINE ZEILE ÜBER DEM RASTER, in derselben Fläche wie die Satzzeile der Nacht: Beim Auslegen
 * steht dort das Dock, danach der Satz. Unter dem Raster läge es auf 1440 × 900 unter dem Falz, und wer ein Schiff wählt
 * und dann legt, rollte zwischen beiden hin und her. Die Fläche ist in beiden Abschnitten gleich hoch und zählt in die
 * Höhe — so bleibt das Raster, wo es ist. Damit das Dock in einer Zeile Platz hat, ist das Brett hier mindestens 40rem
 * breit; das Raster steht darin mittig.
 *
 * NICHT IM FLACHEN QUERFORMAT. Dort steht der Spieltisch als Spalte neben dem Brett, und auf 812 × 375 blieben der Bühne
 * rund 530 Pixel: Das Brett von 40rem lief 113 Pixel seitwärts, und „Auslaufen“ lag unter der Spalte. Dort steht das
 * Dock wie auf 667 × 375 unter dem Raster.
 */
@media (min-width: 48rem) and (min-height: 30.0625rem) {
  .ar-spielfeld[data-ar-spiel='schmugglerflotte'] {
    --ar-sf-achse: 1.5rem;
    --ar-sf-blatt: 0.9rem;
    --ar-sf-kopf: calc(3rem + 0.5rem + var(--ar-sf-achse) + var(--ar-sf-blatt) + var(--ar-sf-blatt-fuss));
    --ar-brettbreite: max(calc(var(--ar-felder) * var(--ar-zelle) + 2 * (var(--ar-brettrand) + var(--ar-brettluft)) + var(--ar-sf-achse-breite) + 2 * var(--ar-sf-blatt)), 40rem);
  }
}

@supports (width: 1cqw) and (height: 1dvh) {
  .ar-spielfeld[data-ar-spiel='schmugglerflotte'] {
    --ar-zelle: clamp(28px, min((100cqw - 2 * (var(--ar-brettrand) + var(--ar-brettluft)) - var(--ar-sf-achse-breite) - 2 * var(--ar-sf-blatt)) / var(--ar-felder), max(var(--ar-sf-boden), (100dvh - var(--ar-reserve) - var(--ar-hauskopf) - var(--ar-sf-kopf)) / var(--ar-felder))), 72px);
  }

  @media (min-width: 64rem) and (min-height: 30.0625rem) {
    .ar-spielfeld[data-ar-spiel='schmugglerflotte'] {
      --ar-zelle: clamp(28px, min((var(--ar-feld) - 2 * (var(--ar-brettrand) + var(--ar-brettluft)) - var(--ar-sf-achse-breite) - 2 * var(--ar-sf-blatt)) / var(--ar-felder), max(var(--ar-sf-boden), (100dvh - var(--ar-reserve) - var(--ar-hauskopf) - var(--ar-sf-kopf)) / var(--ar-felder))), 104px);
    }
  }
}

.ar-sf {
  display: grid;
  grid-template-areas:
    'status'
    'hafen'
    'dock';
  justify-items: center;
  gap: 0.5rem;
}

/*
 * Die Satzzeile liegt neben der Karte auf dem Tisch und trägt deshalb ihr eigenes Schild: Auf dem Filz unter der Lampe
 * hielte Kreide stellenweise nur 1,96 : 1.
 */
.ar-sf__status {
  grid-area: status;
  min-height: 1.9rem;
  margin: 0;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--ar-kante-griff);
  background: var(--ar-noir-2);
  color: var(--ar-kreide-2);
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: center;
}

/*
 * Unter 48rem steht das Dock direkt unter dem Raster und klebt dort am unteren Rand der Bühne (`.ar-dock` im Rahmen,
 * gesetzt in brett.js): „Zufällig“ und „Auslaufen“ bleiben im Bild, auch wenn der Hafen mit Feldern von 44 Pixeln über
 * den Falz reicht. Es ist ein Kind der Wurzel, die über das ganze Brett geht — nur dort kann es kleben.
 */
.ar-sf__dock {
  grid-area: dock;
  display: grid;
  gap: 0.4rem;
  width: 100%;
  max-width: 26rem;
}

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

/* ------------------------------------------------------------ Die Achsen und das Raster */

/*
 * DIE SEEKARTE: der Hafen samt Achsen auf Papier, die See blass graublau, eine Rahmenlinie in Tusche ab 48rem (darunter
 * sind die Achsen der Rand) und ein harter Schatten auf dem Filz. Sie liegt mitten auf dem Tisch, der den ganzen Rahmen
 * nimmt (`TISCHE.plan`). Hier lag eine alte Seekarte als Wasserzeichen unter halb deckenden Feldern aus Nacht; jetzt ist
 * die Karte das Blatt selbst, und die Felder sind ihre See.
 */
.ar-sf__hafen {
  grid-area: hafen;
  position: relative;
  padding: var(--ar-sf-blatt) var(--ar-sf-blatt) var(--ar-sf-blatt-fuss);
  background: var(--ar-plan-papier);
  box-shadow: 0.3rem 0.4rem 0 var(--ar-ku-schlagschatten);
  display: grid;
  grid-template-columns: var(--ar-sf-achse-breite) auto;
  grid-template-rows: var(--ar-sf-achse) auto;
  grid-template-areas:
    '. spalten'
    'zeilen raster';
}

.ar-sf__achse {
  display: grid;
  color: var(--ar-plan-tusche-2);
  font-family: var(--ar-schrift-mono);
  font-size: clamp(0.62rem, calc(var(--ar-zelle) * 0.24), 0.95rem);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.ar-sf__achse span {
  display: grid;
  place-items: center;
}

.ar-sf__achse--spalten {
  grid-area: spalten;
  grid-template-columns: repeat(var(--ar-felder), var(--ar-zelle));
}

.ar-sf__achse--zeilen {
  grid-area: zeilen;
  grid-template-rows: repeat(var(--ar-felder), var(--ar-zelle));
}

/*
 * Die Außenkante ist ein Umriss und kein Rand: Ein Rand nähme dem Raster zwei Pixel, die acht Felder nicht hergeben. In
 * Tusche grenzt sie die See vom Papier ab.
 *
 * DIE TUSCHE DER KARTE ERBT IN DIE SYMBOLE: Nebel, Wasser, Riss und Fadenkreuz stehen über `<use>` in den Feldern, und
 * kein Selektor erreicht sie dort (README der Arena, Abschnitt 3). Das Raster setzt deshalb Eigenschaften, die
 * hineinerben; in Schild und Bildkarten bleiben die Symbole Kreide auf Nacht.
 */
.ar-sf__raster {
  grid-area: raster;
  display: grid;
  width: calc(var(--ar-felder) * var(--ar-zelle));
  outline: 1px solid var(--ar-plan-tusche);
  background: var(--ar-plan-see);
  --ar-sf-tinte: var(--ar-plan-tusche-2);
  --ar-sf-nebel-deckung: 0.3;
  --ar-sf-tusche: var(--ar-plan-tusche);
}

.ar-sf__zeile {
  display: flex;
}

.ar-sf__feld {
  position: relative;
  display: block;
  flex: none;
  width: var(--ar-zelle);
  height: var(--ar-zelle);
  margin: 0;
  padding: 0;
  border: 1px solid var(--ar-plan-leit);
  border-radius: 0;
  background: var(--ar-plan-see);
  color: var(--ar-plan-tusche);
  appearance: none;
  touch-action: manipulation;
}

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

button.ar-sf__feld[data-ar-ziel] {
  cursor: crosshair;
}

/* Wohin geschossen werden darf, zeigt eine Tuschekante beim Zeigen; nie eine Fläche, die dem Nebel die Auskunft nimmt. */
button.ar-sf__feld[data-ar-ziel]:hover {
  border-color: var(--ar-plan-tusche);
}

/* Der Fokus steht im Rot der Fortführung: Senf hielte auf der See keine 3 : 1. */
.ar-sf__feld:focus-visible {
  z-index: 1;
  outline: 3px solid var(--ar-plan-rot);
  outline-offset: -3px;
}

.ar-sf__bild {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Der Treffer leuchtet in der Farbe des Getroffenen: eine Kante in voller Farbe und eine blasse Fläche darunter. */
.ar-sf__feld[data-ar-opfer] {
  border-color: var(--ar-sf-opfer);
  background: color-mix(in srgb, var(--ar-sf-opfer) 34%, var(--ar-plan-see));
  box-shadow: inset 0 0 0 var(--ar-farbkante) var(--ar-sf-opfer);
}

.ar-sf__feld[data-ar-opfer='rot'] { --ar-sf-opfer: var(--ar-rot); }
.ar-sf__feld[data-ar-opfer='blau'] { --ar-sf-opfer: var(--ar-blau); }
.ar-sf__feld[data-ar-opfer='gelb'] { --ar-sf-opfer: var(--ar-gelb); }
.ar-sf__feld[data-ar-opfer='gruen'] { --ar-sf-opfer: var(--ar-gruen); }
.ar-sf__feld[data-ar-opfer='zoll'] { --ar-sf-opfer: var(--ar-plan-tusche-2); }

/* Gelotet: Wo ein Schuss ins Wasser ging, ist die See heller, und der Ring darauf sagt „hier war nichts“. */
.ar-sf__feld[data-ar-stand='wasser'] {
  background: var(--ar-plan-see-hell);
}

/* Der letzte Schuss trägt eine rote Kante, bis der nächste fällt: Wer gerade hinsah, findet ihn wieder. */
.ar-sf__feld[data-ar-letzt] {
  outline: 2px dashed var(--ar-plan-rot);
  outline-offset: -5px;
}

.ar-sf__feld[data-ar-nein] {
  border-color: var(--ar-plan-tusche);
  background: var(--ar-plan-kante);
}

/* Der eigene Schuss ist unterwegs: Tuschekante und Fadenkreuz, bis die Antwort des Hafens das Ergebnis dorthin setzt. */
.ar-sf__feld[data-ar-unterwegs] {
  border-color: var(--ar-plan-tusche);
}

/*
 * DER SCHATTEN BEIM AUSLEGEN: Wo das gewählte Schiff landete, liegt sein Rumpf halb durchsichtig, und das Feld trägt eine
 * Tuschekante. Passt es dort nicht, ist die Kante rot gestrichelt und der Rumpf Kreide — die Form sagt es, nicht nur die
 * Farbe.
 */
.ar-sf__feld[data-ar-vorschau='ja'] {
  border-color: var(--ar-plan-tusche);
}

.ar-sf__feld[data-ar-vorschau='nein'] {
  border-style: dashed;
  border-color: var(--ar-plan-rot);
}

/* ------------------------------------------------------------ Die Rümpfe */

.ar-sf-rumpf[data-ar-farbe='rot'],
.ar-g-sf-rot { --ar-sf-farbe: var(--ar-rot); }
.ar-sf-rumpf[data-ar-farbe='blau'],
.ar-g-sf-blau { --ar-sf-farbe: var(--ar-blau); }
.ar-sf-rumpf[data-ar-farbe='gelb'],
.ar-g-sf-gelb { --ar-sf-farbe: var(--ar-gelb); }
.ar-sf-rumpf[data-ar-farbe='gruen'],
.ar-g-sf-gruen { --ar-sf-farbe: var(--ar-gruen); }
.ar-sf-rumpf[data-ar-farbe='zoll'] { --ar-sf-farbe: var(--ar-kreide-2); }

/* Die eigene Flotte liegt dezent im Nebel: zu sehen, aber leiser als jeder Treffer. */
.ar-sf-rumpf--eigen {
  opacity: 0.62;
}

.ar-sf-rumpf--vorschau {
  opacity: 0.45;
}

/* Die Zustände schlagen die Farbe der Flotte; die steht mit gleicher Spezifität weiter oben und gewönne sonst. */
.ar-sf-rumpf.ar-sf-rumpf--vorschau-nein {
  --ar-sf-farbe: var(--ar-kreide-2);
  opacity: 0.3;
}

.ar-sf-rumpf.ar-sf-rumpf--versenkt {
  --ar-sf-farbe: var(--ar-kante-griff);
}

.ar-g-sf-rumpf { fill: var(--ar-sf-farbe, var(--ar-kreide-2)); stroke: var(--ar-noir); stroke-width: 4; stroke-linejoin: miter; }
.ar-g-sf-deck { fill: none; stroke: var(--ar-noir); stroke-width: 3; stroke-dasharray: 8 6; opacity: 0.6; }
.ar-g-sf-luke { fill: var(--ar-noir-3); stroke: var(--ar-noir); stroke-width: 3; }

/*
 * DER NEBEL IST EINE KANTE UND KEIN SCHLEIER (grafik.js): zwei unterbrochene Wellenlinien, und so leise, dass das Brett
 * ruhig bleibt. Mit 0,32 lag über vierundsechzig Feldern ein Muster, das lauter war als jeder Treffer. Der äußere Ring
 * des Wassers ist ebenso leise; der innere bleibt kräftig, denn er ist die Auskunft „hier war nichts“.
 */
.ar-g-sf-nebel { fill: none; stroke: var(--ar-sf-tinte, var(--ar-kreide-2)); stroke-width: 3; stroke-dasharray: 14 9; stroke-linecap: square; opacity: var(--ar-sf-nebel-deckung, 0.15); }
.ar-g-sf-welle { fill: none; stroke: var(--ar-sf-tinte, var(--ar-kreide-2)); stroke-width: 4; opacity: 0.7; }
.ar-g-sf-welle--aussen { opacity: 0.15; stroke-dasharray: 10 8; }
.ar-g-sf-kiste { fill: var(--ar-funke); stroke: var(--ar-noir); stroke-width: 3; }
.ar-g-sf-beschlag { fill: none; stroke: var(--ar-noir); stroke-width: 3; }
.ar-g-sf-riss { fill: none; stroke: var(--ar-sf-tusche, var(--ar-kreide)); stroke-width: 6; stroke-linecap: square; }
.ar-g-sf-mast { fill: none; stroke: var(--ar-kreide); stroke-width: 2; }
.ar-g-sf-flagge { fill: var(--ar-kreide); stroke: var(--ar-noir); stroke-width: 1; }
.ar-g-sf-funken { fill: none; stroke: var(--ar-funke); stroke-width: 5; stroke-linecap: square; }
.ar-g-sf-rauch { fill: var(--ar-noir-3); stroke: var(--ar-kreide-2); stroke-width: 3; }
.ar-g-sf-zoll { fill: var(--ar-plan-tusche); font-family: var(--ar-schrift-mono); font-size: 20px; font-weight: 700; }
.ar-g-sf-fadenkreuz { fill: none; stroke: var(--ar-sf-tusche, var(--ar-kreide)); stroke-width: 6; stroke-linecap: square; }

/*
 * DER EINSCHLAG IN HARTEN BILDERN: Die Funken springen in vier Stufen auseinander, der Rauch steigt in zehn auf und wird
 * blasser, ein Ring öffnet sich im Wasser. Nichts davon trägt Auskunft, und wer wenig Bewegung bestellt hat, bekommt
 * nichts davon.
 */
.ar-sf-funken,
.ar-sf-rauch,
.ar-sf-spritzer {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.ar-sf-funken {
  animation: ar-sf-funken 480ms steps(4) both;
}

.ar-sf-rauch {
  animation: ar-sf-rauch 900ms 180ms steps(10) both;
}

.ar-sf-spritzer {
  animation: ar-sf-spritzer 600ms steps(6) both;
}

@keyframes ar-sf-funken {
  from {
    opacity: 1;
    scale: 0.4;
  }

  to {
    opacity: 0;
    scale: 1.25;
  }
}

@keyframes ar-sf-rauch {
  from {
    opacity: 0.8;
    translate: 0 0;
    scale: 0.6;
  }

  to {
    opacity: 0;
    translate: 0 -18%;
    scale: 1.2;
  }
}

@keyframes ar-sf-spritzer {
  from {
    opacity: 0.9;
    scale: 0.3;
  }

  to {
    opacity: 0;
    scale: 1.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-sf-funken,
  .ar-sf-rauch,
  .ar-sf-spritzer {
    display: none;
  }
}

/* ------------------------------------------------------------ Das Dock */

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

/*
 * EIN SCHIFF IM DOCK IST SEINE SILHOUETTE und kein Formularknopf: dieselben Rumpfstücke wie im Hafen, in der eigenen
 * Farbe und in voller Länge, darunter der Name. Gewählt trägt es eine Messingkante, gelegt steht es blass da und sagt es
 * im Namen. Die Tippfläche bleibt 44 × 44 Pixel.
 */
.ar-sf__schiff {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.15rem;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--ar-kante);
  border-radius: 0;
  /* Auf dem Schreibtisch liegt das Dock auf dem Tisch über der Karte, und Kreide braucht dort einen eigenen Grund. */
  background: var(--ar-noir-2);
  color: var(--ar-kreide);
  font: inherit;
  cursor: pointer;
  appearance: none;
  touch-action: manipulation;
}

.ar-sf__schiff:hover {
  border-color: var(--ar-kreide-2);
}

.ar-sf__schiff[aria-pressed='true'] {
  border-color: var(--ar-funke);
  background: var(--ar-noir-3);
  box-shadow: inset 0 0 0 1px var(--ar-funke);
}

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

.ar-sf__silhouette {
  display: block;
  overflow: visible;
}

.ar-sf__schiff[data-ar-liegt='true'] .ar-sf__silhouette {
  opacity: 0.35;
}

.ar-sf__schiff-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.ar-sf__schiff-stand {
  color: var(--ar-kreide-2);
  font-weight: 400;
}

.ar-sf__knoepfe .ar-knopf {
  padding-inline: 0.4rem;
}

.ar-sf__drehen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.ar-sf__pfeil {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: square;
}

.ar-sf__drehen[data-ar-richtung='v'] .ar-sf__pfeil {
  rotate: 90deg;
}

.ar-sf__satz {
  min-height: 1.2rem;
  margin: 0;
  color: var(--ar-kreide-2);
  font-size: 0.8rem;
  text-align: center;
}

/*
 * Die Zeile über dem Raster ab 48rem (Kopf dieses Stilblatts): Satz und Dock teilen sich eine Fläche von 3rem, und
 * solange das Dock steht, schweigt der Satz. Die Regel steht NACH der Grundform von `.ar-sf` und dem Dock — bei gleicher
 * Spezifität gewinnt die spätere, und die Grundform stellte das Dock sonst wieder unter das Raster.
 */
@media (min-width: 48rem) and (min-height: 30.0625rem) {
  .ar-sf {
    grid-template-areas:
      'kopf'
      'hafen';
    grid-template-rows: 3rem auto;
  }

  .ar-sf__status,
  .ar-sf__dock {
    grid-area: kopf;
    align-self: center;
  }

  .ar-sf:has(> .ar-sf__dock:not([hidden])) > .ar-sf__status {
    visibility: hidden;
  }

  .ar-sf__dock {
    grid-template-columns: auto auto;
    column-gap: 1rem;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: none;
  }

  .ar-sf__schiffe,
  .ar-sf__knoepfe {
    grid-template-columns: repeat(3, auto);
  }

  .ar-sf__knoepfe .ar-knopf {
    padding-inline: 0.8rem;
  }

  /* Der Satz unter dem Dock hat hier keine Zeile; er bleibt für den Screenreader stehen. */
  .ar-sf__satz {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ar-sf__hafen {
    box-shadow:
      inset 0 0 0 0.4rem var(--ar-plan-papier),
      inset 0 0 0 calc(0.4rem + 1.5px) var(--ar-plan-tusche),
      0.3rem 0.4rem 0 var(--ar-ku-schlagschatten);
  }
}

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

[data-ar-spiel='schmugglerflotte'] .ar-sf__freibeuter,
[data-ar-spiel='schmugglerflotte'] .ar-sf__zoll {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-inline-end: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
}

[data-ar-spiel='schmugglerflotte'] .ar-sf__freibeuter[data-ar-farbe='rot'] { color: var(--ar-rot); }
[data-ar-spiel='schmugglerflotte'] .ar-sf__freibeuter[data-ar-farbe='blau'] { color: var(--ar-blau); }
[data-ar-spiel='schmugglerflotte'] .ar-sf__freibeuter[data-ar-farbe='gelb'] { color: var(--ar-gelb); }
[data-ar-spiel='schmugglerflotte'] .ar-sf__freibeuter[data-ar-farbe='gruen'] { color: var(--ar-gruen); }

[data-ar-spiel='schmugglerflotte'] .ar-sf__zoll {
  color: var(--ar-kreide-2);
}

[data-ar-spiel='schmugglerflotte'] .ar-sf__flagge {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
}