/* =============================================================================
   Freibeuter — gemeinsames Design für alle Seiten dieses Projekts.

   Optik im Zeitgeschmack der Karibik um 1715: verwittertes Pergament, geteertes
   Holz, Messingbeschläge, Seekartentinte. Alle Texturen sind eingebettete
   SVG-Filter, es wird keine einzige externe Datei geladen — damit läuft jede
   Seite unverändert offline und ohne Server.

   Bewusst nicht enthalten: Logos, Wappen, Schriftzüge oder Grafiken aus
   kommerziellen Spielen. Farbwelt und Seefahrtsmotive sind Allgemeingut,
   Markenzeichen sind es nicht.
   ============================================================================= */

:root {
  /* --- Grundtöne --- */
  --farbe-tiefsee:        #0b1a22;
  --farbe-hintergrund:    #10222b;
  --farbe-holz-dunkel:    #2a1c11;
  --farbe-holz:           #3b2817;
  --farbe-holz-hell:      #55391f;

  /* --- Pergament und Segeltuch --- */
  --farbe-pergament:      #e6d7b2;
  --farbe-pergament-tief: #cdb98c;
  --farbe-segeltuch:      #d8c9a8;

  /* --- Messing und Gold --- */
  --farbe-messing:        #c8a13c;
  --farbe-messing-hell:   #e8cd7d;
  --farbe-messing-tief:   #8a6a1c;

  /* --- Akzente --- */
  --farbe-siegelrot:      #9c2b1c;
  /* Aufgehellt von #c9503c: gegen den Tafelgrund kam der alte Wert nur auf
     3,11:1 und lag damit unter der Schwelle von 4,5:1 — ausgerechnet bei
     Fehlermeldungen, die auffallen sollen. Jetzt 4,8:1. */
  --farbe-siegelrot-hell: #e57a63;
  --farbe-patina:         #4e9c86;
  --farbe-seetinte:       #3f7f9c;

  /* --- Schrift --- */
  --farbe-text:           #f0e4c8;
  --farbe-text-schwach:   #a99871;
  /* Aufgehellt von #7d6f52. Der alte Wert erreichte gegen den Tafelgrund nur
     2,83:1. Betroffen waren die Engine-Ausgabe, die Zugnummern, die
     Brettkoordinaten und der Fuß der Startseite — also durchweg Text, den man
     lesen können muss. Jetzt 5,4:1. */
  --farbe-text-gedimmt:   #b0a179;

  /* --- Bauteile --- */
  --farbe-panel:          #1b2f38;
  --farbe-panel-rand:     #4a3a22;
  --farbe-panel-tief:     #142630;
  --farbe-akzent:         var(--farbe-messing);
  --farbe-akzent-hell:    var(--farbe-messing-hell);

  /* --- Spielbrett --- */
  --farbe-feld-hell:      #d9c79f;
  --farbe-feld-dunkel:    #4a3220;
  --farbe-stein-hell:     #ece0c4;
  --farbe-stein-hell-rand:#9a8258;
  --farbe-stein-dunkel:   #23201d;
  --farbe-stein-dunkel-rand: #0a0908;

  /* --- Markierungen --- */
  --farbe-markierung-ziel:     #4aa3c4;
  --farbe-markierung-auswahl:  var(--farbe-messing-hell);
  --farbe-markierung-gefahr:   var(--farbe-siegelrot-hell);
  --farbe-markierung-erfolg:   var(--farbe-patina);

  /* --- Schriftarten. Nur Systemschriften, damit nichts nachgeladen wird. --- */
  --schrift-titel: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --schrift-text:  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --schrift-mono:  ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  /* --- Wiederverwendete Texturen --- */
  --textur-rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23r)' opacity='0.5'/%3E%3C/svg%3E");
  --textur-faser: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='0.55'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 22px;
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: 15px;
  line-height: 1.5;
  background-color: var(--farbe-tiefsee);
  background-image:
    var(--textur-rauschen),
    radial-gradient(ellipse at 50% -20%, #1d4152 0%, transparent 60%),
    linear-gradient(170deg, #12262f 0%, #0a171e 55%, #0b1a22 100%);
  background-blend-mode: overlay, normal, normal;
  background-attachment: fixed;
}

/* --- Überschriften: gestochen, gesperrt, mit Messingglanz --- */

h1 {
  font-family: var(--schrift-titel);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0 0 6px 0;
  color: var(--farbe-messing-hell);
  text-shadow: 0 1px 0 #1a1206, 0 2px 6px rgba(0, 0, 0, 0.6);
}

.kopfzeile-hinweis {
  color: var(--farbe-text-schwach);
  font-size: 14px;
  font-style: italic;
  margin-bottom: 20px;
  max-width: 78ch;
}

/* --- Zierleiste: Tau mit Messingring in der Mitte --- */

.zierleiste {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px 0;
}

.zierleiste::before,
.zierleiste::after {
  content: "";
  flex: 1;
  height: 3px;
  background:
    repeating-linear-gradient(90deg,
      var(--farbe-messing-tief) 0 5px,
      var(--farbe-messing) 5px 8px,
      var(--farbe-messing-tief) 8px 13px);
  opacity: 0.55;
  border-radius: 2px;
}

.zierleiste span {
  color: var(--farbe-messing);
  font-size: 15px;
  letter-spacing: 0.3em;
  opacity: 0.8;
}

/* --- Tafeln: geteertes Holz mit Messingrahmen --- */

.panel,
details.panel {
  position: relative;
  background-color: var(--farbe-panel);
  background-image:
    var(--textur-faser),
    linear-gradient(160deg, rgba(63, 43, 22, 0.55) 0%, rgba(12, 26, 33, 0.4) 100%);
  background-blend-mode: overlay, normal;
  border: 1px solid var(--farbe-panel-rand);
  border-radius: 3px;
  padding: 15px 16px;
  box-shadow:
    inset 0 1px 0 rgba(232, 205, 125, 0.14),
    0 3px 10px rgba(0, 0, 0, 0.45);
}

/* Messingwinkel in den Ecken */
.panel::before,
details.panel::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(200, 161, 60, 0.22);
  border-radius: 2px;
  clip-path: polygon(
    0 0, 22px 0, 22px 1px, 1px 1px, 1px 22px, 0 22px,
    0 100%, 22px 100%, 22px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 22px), 0 calc(100% - 22px),
    100% 100%, calc(100% - 22px) 100%, calc(100% - 22px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 22px), 100% calc(100% - 22px),
    100% 0, calc(100% - 22px) 0, calc(100% - 22px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 22px, 100% 22px
  );
}

.panel h2,
details.panel > summary {
  font-family: var(--schrift-titel);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--farbe-messing);
  margin: 0 0 11px 0;
  font-weight: 600;
}

details.panel > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
}

details.panel > summary::-webkit-details-marker { display: none; }

details.panel > summary::before {
  content: "\2727\00a0\00a0";
  color: var(--farbe-messing-tief);
}

details.panel[open] > summary::before {
  content: "\2726\00a0\00a0";
  color: var(--farbe-messing);
}

details.panel:not([open]) > summary { margin-bottom: 0; }

/* --- Messingknöpfe --- */

button {
  font-family: var(--schrift-titel);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 9px 13px;
  border-radius: 2px;
  border: 1px solid var(--farbe-messing-tief);
  color: var(--farbe-pergament);
  cursor: pointer;
  background-image: linear-gradient(180deg, #4a3521 0%, #32220f 100%);
  box-shadow:
    inset 0 1px 0 rgba(232, 205, 125, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.5);
  transition: background-image 0.12s ease, color 0.12s ease;
}

button:hover:not(:disabled) {
  background-image: linear-gradient(180deg, #5d4429 0%, #3d2b14 100%);
  color: var(--farbe-messing-hell);
}

button:active:not(:disabled) {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
}

button:disabled { opacity: 0.35; cursor: not-allowed; }

button.hauptknopf,
button.aktiv {
  background-image: linear-gradient(180deg, var(--farbe-messing-hell) 0%, var(--farbe-messing) 55%, var(--farbe-messing-tief) 100%);
  border-color: var(--farbe-messing-hell);
  color: #241704;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.3);
}

button.hauptknopf:hover:not(:disabled),
button.aktiv:hover:not(:disabled) {
  background-image: linear-gradient(180deg, #f4de96 0%, var(--farbe-messing-hell) 55%, var(--farbe-messing) 100%);
  color: #241704;
}

.knopf-reihe { display: flex; gap: 7px; flex-wrap: wrap; }

/* --- Eingabefelder --- */

select,
input[type="number"] {
  font-family: var(--schrift-text);
  font-size: 13px;
  padding: 6px 9px;
  color: var(--farbe-pergament);
  background-color: #17282f;
  border: 1px solid var(--farbe-panel-rand);
  border-radius: 2px;
}

select:focus,
input[type="number"]:focus {
  outline: none;
  border-color: var(--farbe-messing);
}

input[type="number"] { width: 66px; }

input[type="checkbox"] {
  accent-color: var(--farbe-messing);
  width: 15px;
  height: 15px;
}

label.einstellung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 13px;
  color: var(--farbe-text-schwach);
  /* Ohne Deckel drifteten Beschriftung und Bedienelement im gestapelten Layout
     bis zu 545 Pixel auseinander und gehörten optisch nicht mehr zusammen. */
  max-width: 420px;
}

.schalter {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--farbe-text-schwach);
  cursor: pointer;
}

/* --- Statusanzeige --- */

.status-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--schrift-titel);
  font-size: 17px;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  color: var(--farbe-pergament);
}

.status-punkt {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--farbe-messing-tief);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

/* Alle drei Spiele benutzen dieselben zwei Seitennamen, deshalb stehen die Füllungen
   hier statt doppelt in den Spielseiten. Ohne sie blieb der Punkt ein leerer
   Ring — er zeigte also gerade nicht an, wer am Zug ist. */
.status-punkt.weiss { background: var(--farbe-stein-hell); }
.status-punkt.schwarz { background: var(--farbe-stein-dunkel); }

.status-hinweis {
  color: var(--farbe-text-schwach);
  font-size: 13px;
  font-style: italic;
  min-height: 18px;
}

/* --- Bewertungsbalken als Messingskala --- */

.bewertungs-balken {
  height: 11px;
  border-radius: 2px;
  background: #17282f;
  border: 1px solid var(--farbe-panel-rand);
  overflow: hidden;
  margin: 12px 0 9px 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.bewertungs-fuellung {
  height: 100%;
  width: 50%;
  background-image: linear-gradient(180deg, var(--farbe-pergament) 0%, var(--farbe-pergament-tief) 100%);
  transition: width 0.25s ease;
}

/* --- Engine-Block --- */

.engine-block {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--farbe-panel-rand);
}

.engine-zug {
  font-family: var(--schrift-titel);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--farbe-messing-hell);
  margin: 2px 0 7px 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.engine-details {
  color: var(--farbe-text-gedimmt);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.65;
  white-space: pre-line;
}

/* --- Zugliste als Logbuch --- */

.zug-liste {
  max-height: 190px;
  overflow-y: auto;
  font-family: var(--schrift-mono);
  font-size: 12px;
  line-height: 1.75;
}

.zug-liste div { display: flex; gap: 10px; }
.zug-liste .zug-nummer { color: var(--farbe-text-gedimmt); min-width: 26px; text-align: right; }

.zug-liste::-webkit-scrollbar { width: 9px; }
.zug-liste::-webkit-scrollbar-track { background: #142630; }
.zug-liste::-webkit-scrollbar-thumb {
  background: var(--farbe-messing-tief);
  border-radius: 2px;
}

/* --- Regeltext --- */

.regel-text {
  color: var(--farbe-text-schwach);
  font-size: 12.5px;
  line-height: 1.75;
}

.regel-text strong { color: var(--farbe-pergament); font-weight: 600; }

/* --- Fehlermeldung als rotes Siegel --- */

.fehler-text {
  color: var(--farbe-siegelrot-hell);
  font-size: 12px;
  font-style: italic;
  min-height: 16px;
  margin-top: 9px;
}

/* --- Zurück-Verweis --- */

.zurueck-verweis {
  display: inline-block;
  color: var(--farbe-text-schwach);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 12px;
  border-bottom: 1px solid transparent;
}

.zurueck-verweis:hover {
  color: var(--farbe-messing-hell);
  border-bottom-color: var(--farbe-messing-tief);
}

/* =============================================================================
   Layout und Responsivität

   Grundgedanke: das Brett ist quadratisch und soll so groß wie möglich sein,
   ohne die Seitenleiste zu verdrängen. Solange beides nebeneinander passt,
   steht die Leiste rechts; darunter rutscht sie unter das Brett und das Brett
   nimmt die volle Breite ein.

   Die Breite wird über die Spaltenbreite gesteuert, nicht über vw — sonst
   rechnet das Brett den Seitenrand und eine mögliche Scrollleiste nicht mit
   und läuft auf schmalen Geräten über den Rand hinaus.
   ============================================================================= */

.layout {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.brett-spalte {
  /* Breite geteilt durch Höhe des Bretts. Quadratische Bretter lassen den Wert
     stehen, Fanorona setzt ihn auf 1.8. Gebraucht wird er, um im Querformat
     nach der Höhe zu begrenzen. */
  --brett-verhaeltnis: 1;

  flex: 1 1 420px;
  min-width: 0;
  /* Von 620 auf 720 angehoben: bei 1280 und 1600 Pixeln blieben sonst rund 70
     Pixel der Zeile ungenutzt, während das Brett kleiner blieb als nötig. */
  max-width: 720px;
}

.seitenleiste {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Kein Element darf die Seite waagerecht aufziehen. */
html { max-width: 100%; overflow-x: hidden; }

/* Inhaltsspalte mittig halten. Auf breiten Bildschirmen klebte sonst alles am
   linken Rand. Der Hintergrund bleibt davon unberührt, weil er vom Körper auf
   die Zeichenfläche durchschlägt und dadurch weiterhin das ganze Fenster füllt. */
body {
  max-width: min(1140px, 100%);
  margin-inline: auto;
  overflow-x: hidden;
}

@media (max-width: 900px) {
  .seitenleiste { max-width: none; }
  .brett-spalte { max-width: none; }
}

@media (max-width: 620px) {
  body { padding: 11px; font-size: 14px; }
  h1 { font-size: 21px; letter-spacing: 0.07em; }
  .kopfzeile-hinweis { font-size: 13px; margin-bottom: 15px; }
  .panel, details.panel { padding: 13px; }
  .layout { gap: 16px; }

  .status-zeile { font-size: 16px; }
  .engine-zug { font-size: 19px; }
  .zug-liste { max-height: 150px; }
}

/* =============================================================================
   Trefferflächen für Finger

   Vorher galten die größeren Flächen nur bis 620 Pixel, das Layout bricht aber
   erst unter 900 um — auf einem Tablet mit 768 Pixeln waren die Kästchen dadurch
   15 Pixel groß und die Knöpfe 37.

   Zwei Bedingungen mit oder verknüpft: das Eingabegerät ist die inhaltlich
   richtige Frage, die Breite fängt die Fälle ab, in denen ein Gerät seinen
   Zeigertyp falsch meldet. Größere Flächen auf einem schmalen Fenster mit Maus
   schaden nicht.
   ============================================================================= */

@media (pointer: coarse), (max-width: 900px) {
  button { padding: 12px 15px; min-height: 44px; }
  select, input[type="number"] { min-height: 44px; }
  input[type="checkbox"] { width: 22px; height: 22px; }
  .schalter, label.einstellung { font-size: 14px; min-height: 44px; }

  /* Aufklappzeilen und der Rückverweis waren nur 18 beziehungsweise 19 Pixel
     hoch und damit kaum zu treffen. */
  details.panel > summary {
    padding: 13px 0;
    margin-bottom: 4px;
  }
  details.panel:not([open]) > summary { margin-bottom: -6px; }

  .zurueck-verweis { padding: 12px 0; margin-bottom: 6px; }

  /* Die Palette im Stellungseditor bleibt quadratisch, braucht aber Mindestmaß. */
  .palette button { min-height: 48px; }
}

@media (max-width: 380px) {
  body { padding: 9px; }
  h1 { font-size: 18px; }
  .knopf-reihe { gap: 6px; }
  button { padding: 10px 11px; font-size: 11px; }
}

/* =============================================================================
   Querformat

   Bisher richtete sich die Brettgröße allein nach der Breite. Auf einem flachen
   Fenster stand das Brett dadurch zu einem Viertel unter der Bildkante — bei
   800 mal 420 Pixeln waren nur 73 bis 77 Prozent sichtbar. Jetzt begrenzt
   zusätzlich die verfügbare Höhe, umgerechnet über das Seitenverhältnis des
   jeweiligen Bretts.
   ============================================================================= */

@media (orientation: landscape) and (max-height: 680px) {
  .brett-spalte {
    max-width: min(720px, calc((100vh - 150px) * var(--brett-verhaeltnis)));
  }
}

/* Auf sehr flachen Fenstern (Querformat am Telefon) die Höhe nicht verschwenden. */
@media (max-height: 560px) and (orientation: landscape) {
  body { padding: 10px; }
  h1 { font-size: 18px; margin-bottom: 2px; }
  .kopfzeile-hinweis { display: none; }
  .brett-spalte {
    max-width: min(720px, calc((100vh - 105px) * var(--brett-verhaeltnis)));
  }
  .zierleiste { margin-bottom: 12px; }
}

/* Wer Bewegung reduziert haben will, bekommt keine Übergänge. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}