/* ======================================================
   90 - SCHRIFT: MITTIG UND LEBENDIG
   ---------------------------------------------------
   Zwei Dinge, die zusammengehoeren.

   1. ZENTRIERUNG
      Ueberschriften, Vorspann, Kicker und kurze Bloecke stehen
      mittig. Listen, Kapitelzeilen, Ranglisten und Flietext
      bleiben linksbuendig - und zwar mit Grund: bei zentrierten
      Listen faengt jede Zeile an einer anderen Stelle an, das Auge
      muss bei jedem Eintrag neu ansetzen. Genau das stand schon
      als Begruendung an .story-library, als die Karten dort einmal
      mittig standen.

      Betroffen ist vor allem .fh-page-head - der Kopf, den 15 der
      21 Seiten benutzen. Deshalb reicht dafuer eine Regel statt
      fuenfzehn.

   2. LEBEN
      Drei Eingriffe, alle ohne bleibende Aenderung am Markup:

      - Der Kicker bekommt einen Goldschimmer, der langsam
        durchwandert. Reines CSS ueber background-clip.
      - Der Seitentitel laeuft buchstabenweise ein, wenn man die
        Seite betritt (scripts/nav/seitenwechsel.js, GSAP
        SplitText - und danach sofort zurueckgesetzt, wie es
        die Startseite schon vormacht).
      - Der Seitentitel traegt einen Lichtpunkt, der dem Zeiger
        folgt (scripts/fx/schrift-licht.js). Nur auf Geraeten mit
        echtem Zeiger, und nur auf dem Titel - nicht auf Fliesstext,
        der davon nur unruhig wuerde.

   Bei "Bewegung reduzieren" greift weiterhin die abschliessende
   Regel in 70-entwurf-1c.css: sie setzt animation-duration mit
   !important auf .01ms.
====================================================== */

/* =========================
   1. ZENTRIERUNG
========================= */

/* Der gemeinsame Seitenkopf von 15 Seiten. */
.fh-page-head {
  text-align: center;
}

/* Der Vorspann darf nicht ueber die ganze Breite laufen - mittig
   gesetzter Text wird ab etwa 70 Zeichen je Zeile unangenehm zu
   lesen, weil der Zeilenanfang staendig springt. */
/* AUSNAHME WOCHENRENNEN
   Als einzige Seite hat es eine zweispaltige Kopfzeile: links Titel,
   rechts Tagesbonus und Countdown (siehe .race-head in index.html).
   Zentriert stand der Titel dann mittig in seiner LINKEN SPALTE - auf
   1280px bei 427px statt bei 678px. Das sah nicht nach Absicht aus,
   sondern nach verrutscht. Linksbuendig ist die zweispaltige Kopfzeile
   sofort als solche zu erkennen. */
#race .fh-page-head,
#race .fh-page-head .fh-page-kicker { text-align: left; }
#race .fh-page-lead { margin-inline: 0; }

.fh-page-lead {
  max-width: 62ch;
  margin-inline: auto;
}

/* Knoepfe im Kopfbereich standen linksbuendig am Blockrand. */
.fh-page-head .fh-cta {
  align-self: center;
}

/* Abschnittsmarken ueber Listen ("Kapitel", "Belohnungen"). */
.fh-section-label {
  text-align: center;
}

/* Kopf der Kapitelansicht: Titel und Beschreibung neben dem
   Umschlagbild. */
.story-detail-container .story-header h1,
.story-detail-container .story-header p,
.story-progress {
  text-align: center;
}

/* Ueberschriften innerhalb der Inhaltsbereiche - die stehen ueber
   ihren Bloecken und gehoeren zur Gliederung, nicht zum Fliesstext. */
.page-content > h2,
.page-content > h3,
.story-library > h2 {
  text-align: center;
}

/* ---- WAS AUSDRUECKLICH LINKSBUENDIG BLEIBT ----
   Alles, was in Zeilen untereinander steht. Diese Regeln kommen
   nach den obigen und gewinnen damit bei gleichem Gewicht. */
.fh-rows,
.fh-row,
.chapter-list,
.chapter-row,
.story-grid,
.leaderboard-list,
.race-results-list,
.code-history-list,
.book,
.book-page,
.fh-skeleton {
  text-align: left;
}

/* =========================
   2. KICKER MIT GOLDSCHIMMER
   ---------------------------------------------------
   Der Verlauf ist dreimal so breit wie der Text und wandert
   hindurch. background-clip: text laesst nur die Buchstaben davon
   uebrig.
========================= */
.fh-page-kicker {
  background-image: linear-gradient(
    100deg,
    var(--fh-gold, #d6a84f) 0%,
    var(--fh-gold, #d6a84f) 38%,
    #fff3d0 47%,
    var(--fh-gold-bright, #f0c96a) 53%,
    var(--fh-gold, #d6a84f) 62%,
    var(--fh-gold, #d6a84f) 100%
  );
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  /* Die Schriftfarbe muss durchsichtig sein, damit der Verlauf
     sichtbar wird. Faellt background-clip aus, greift die Farbe
     aus 70-entwurf-1c.css weiterhin - dann eben ohne Schimmer. */
  -webkit-text-fill-color: transparent;
  animation: fhKickerSchimmer 7s var(--fh-ease, ease) infinite;
}

@keyframes fhKickerSchimmer {
  /* Lange Pause zwischen den Durchlaeufen: ein Schimmer alle sieben
     Sekunden ist ein Akzent, einer im Sekundentakt ist Zappeln. */
  0%, 55%  { background-position: 120% 0; }
  85%, 100% { background-position: -60% 0; }
}

/* =========================
   3. LICHTPUNKT AUF DEM SEITENTITEL
   ---------------------------------------------------
   --fh-licht-x/-y setzt scripts/fx/schrift-licht.js aus der
   Zeigerposition. Ohne Zeiger (Handy, Tablet) bleiben die
   Startwerte stehen und der Titel sieht aus wie zuvor.
========================= */
@media (hover: hover) and (pointer: fine) {
  h1.fh-page-title {
    background-image: radial-gradient(
      circle at var(--fh-licht-x, 50%) var(--fh-licht-y, 50%),
      #fffaf0 0%,
      var(--fh-text, #fff) 38%,
      var(--fh-text, #fff) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* text-shadow zeichnet die Glyphenform und stuende bei
       durchsichtiger Fuellung als harte Kontur da. drop-shadow
       arbeitet dagegen auf dem FERTIG gezeichneten Element - der
       goldene Schein der Ueberschrift bleibt damit erhalten. */
    text-shadow: none;
    filter: drop-shadow(0 0 22px rgba(240, 201, 106, .32));

    /* Der Farbkasten von background-clip: text ist der Rahmen des
       Elements - und der ist bei line-height: 1 genau das
       Em-Quadrat. Was darunter haengt (y, g, p, j, q) faellt heraus
       und bekommt keine Fuellung: die Unterlaenge fehlt dann
       sichtbar, "Community-Boss" stand ohne den Schwanz am y da.

       Der Kasten wird deshalb oben und unten aufgeweitet und die
       Aufweitung mit einer gleich grossen negativen Aussenkante
       wieder eingezogen - der Titel bekommt Farbe bis unter die
       Grundlinie, belegt im Satz aber exakt so viel Platz wie
       vorher. */
    padding-block: .26em;
    margin-block: -.26em;
  }
}

/* ======================================================
   DIE SCHATZKARTE
   ---------------------------------------------------
   Der Piratenpass im Vollbild: eine geschwungene Route ueber
   offenes Wasser statt einer geraden Reihe zum Seitwaertsscrollen.
   Aufbau in scripts/piratenpass/schatzkarte.js.

   Die Reihe daneben bleibt bestehen - auf dem Handy und fuer den
   schnellen Blick ist sie weiterhin der kuerzere Weg.
====================================================== */

.piratenpass-karte-btn {
  margin-top: 14px;
  font-size: 13px;
  padding: 10px 18px;
}

.fh-schatzkarte {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 20px 18px;
  background: rgba(4, 9, 15, .93);
  backdrop-filter: blur(6px);
  overflow: auto;
  animation: fhKarteAuf .32s var(--fh-ease, ease);
}

@keyframes fhKarteAuf {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: none; }
}

.fh-schatzkarte-kopf {
  position: relative;
  width: 100%;
  max-width: 1100px;
  text-align: center;
}

.fh-schatzkarte-kicker {
  margin: 0 0 4px;
  font-family: var(--fh-font-display);
  font-size: 11px;
  letter-spacing: .42em;
  color: var(--fh-gold-bright);
}

.fh-schatzkarte-titel {
  margin: 0;
  font-family: var(--fh-font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  letter-spacing: .08em;
  color: var(--fh-text, #fff);
}

.fh-schatzkarte-stand {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--fh-muted-fg);
}

.fh-schatzkarte-zu {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--fh-border);
  background: var(--fh-surface);
  color: var(--fh-text, #fff);
  font-size: 17px;
  cursor: pointer;
  transition: background var(--fh-dauer) var(--fh-ease),
              border-color var(--fh-dauer) var(--fh-ease);
}

.fh-schatzkarte-zu:hover {
  background: var(--fh-surface-light);
  border-color: var(--fh-gold-bright);
}

.fh-schatzkarte-zu:focus-visible {
  outline: 2px solid var(--fh-gold-bright);
  outline-offset: 2px;
}

.fh-schatzkarte-zu:active {
  transform: scale(.92);
  transition-duration: var(--fh-dauer-kurz);
}

.fh-schatzkarte-blatt {
  width: 100%;
  max-width: 1100px;
  border-radius: var(--fh-radius);
  border: 1px solid var(--fh-border);
  overflow: hidden;
  box-shadow: var(--fh-shadow);
}

.fh-schatzkarte-svg {
  display: block;
  width: 100%;
  height: auto;
}

.fh-schatzkarte-fuss {
  margin: 0;
  font-size: 12px;
  color: var(--fh-muted-fg);
  text-align: center;
}

/* ---- Karteninhalt ----
   ---------------------------------------------------
   Ab hier ist der Grund PAPIER, nicht Bildschirm. Alle Farben sind
   deshalb umgekehrt: dunkelbraune Tinte auf warmem Ton, roter Kurs.
   Vorher stand weisse und goldene Zeichnung auf dunklem Blau - das
   sah aus wie eine Benutzeroberflaeche mit Seefahrtsmotiv.

   Die Tinte ist bewusst NICHT schwarz: reines Schwarz auf Pergament
   wirkt gedruckt. --fh-karte-tinte ist ein dunkles Sepia, wie eine
   ausgeblichene Feder. */
.fh-schatzkarte-blatt {
  --fh-karte-tinte: #43301a;
  --fh-karte-tinte-blass: rgba(67, 48, 26, .38);
  --fh-karte-rot: #9c3a1a;
  --fh-karte-gruen: #4a6b2f;
}

/* ---- Inseln ---- */
.fh-karte-insel-flaeche {
  fill: rgba(140, 106, 58, .22);
  stroke: var(--fh-karte-tinte);
  stroke-width: 1.6;
}

/* Hoehenlinien: dieselbe Form kleiner, nur als Strich. */
.fh-karte-insel-linie {
  fill: none;
  stroke: var(--fh-karte-tinte-blass);
  stroke-width: 1;
}

/* ---- Meer: kurze Wellenstriche wie in alten Seekarten ---- */
.fh-karte-welle {
  fill: none;
  stroke: rgba(67, 48, 26, .3);
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* ---- Seeungeheuer und Wrack ---- */
.fh-karte-untier,
.fh-karte-wrack {
  fill: none;
  stroke: var(--fh-karte-tinte);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
}

.fh-karte-untier-auge { fill: var(--fh-karte-tinte); stroke: none; }

.fh-karte-spruch {
  fill: rgba(67, 48, 26, .5);
  font-family: var(--fh-font-display, serif);
  font-size: 19px;
  font-style: italic;
  letter-spacing: .16em;
}

/* ---- Kompassrose ---- */
.fh-karte-rose-ring  { fill: none; stroke: rgba(67,48,26,.4); stroke-width: 1.2; }
.fh-karte-rose-nadel { fill: rgba(67,48,26,.72); }
.fh-karte-rose-quer  { fill: rgba(67,48,26,.4); }
.fh-karte-rose-n     { fill: rgba(67,48,26,.8); font-size: 14px; font-family: var(--fh-font-display); }

/* Der ganze Kurs, blass - und darueber der bereits gefahrene Teil. */
.fh-karte-kurs-grund {
  fill: none;
  stroke: rgba(67, 48, 26, .22);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
}

.fh-karte-kurs-fahrt {
  fill: none;
  stroke: var(--fh-karte-rot);
  stroke-width: 3.5;
  stroke-linecap: round;
  /* Der gefahrene Teil ist durchgezogen und kraeftig - der Rest nur
     angedeutet. Der Unterschied zwischen "schon gesegelt" und "noch
     vor uns" soll ohne Legende lesbar sein. */
}

/* ---- Das Schiff ---- */
.fh-karte-schiff-koerper {
  fill: rgba(239, 224, 189, .92);
  stroke: var(--fh-karte-tinte);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* Angekommen: es liegt an der aktuellen Station und schaukelt.

   Das Schaukeln sitzt auf der INNEREN Gruppe, der Ort auf der
   aeusseren. transform-box: fill-box laesst es um den eigenen Rumpf
   kippen statt um den Nullpunkt der Karte - verschoebe aber zugleich
   den Bezugspunkt eines transform-Attributs auf demselben Element.
   Deshalb muessen es zwei Gruppen sein. */
.fh-karte-schiff-koerper.ist-angekommen {
  animation: fhKarteSchaukeln 3.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}

@keyframes fhKarteSchaukeln {
  0%, 100% { rotate: -2.5deg; }
  50%      { rotate: 2.5deg; }
}

/* ---- Stationen ---- */
.fh-karte-station {
  cursor: pointer;
  animation: fhKarteStation .4s var(--fh-ease, ease) backwards;
  animation-delay: var(--fh-karte-verzug, 0s);
}

@keyframes fhKarteStation {
  from { opacity: 0; transform: translateY(6px) scale(.7); }
}

.fh-karte-punkt {
  fill: #efe0bd;
  stroke: var(--fh-karte-tinte);
  stroke-width: 1.8;
  transition: fill var(--fh-dauer) var(--fh-ease),
              stroke var(--fh-dauer) var(--fh-ease);
}

/* Das Symbol der Belohnung steht AUF der Station, die Stufennummer
   klein darunter. Man sieht damit auf einen Blick, was wartet - die
   Nummer allein sagte nur, die wievielte es ist. */
.fh-karte-symbol {
  font-size: 12px;
  pointer-events: none;
}

.fh-karte-nummer {
  fill: rgba(67, 48, 26, .62);
  font-size: 9.5px;
  font-family: var(--fh-font-display);
  pointer-events: none;
}

/* Erreicht, aber noch nicht abgeholt: die einzige Station, die
   hervorsticht - sie ist die, an der etwas zu tun ist. */
.fh-karte-station-ready .fh-karte-punkt {
  fill: #f7e3a8;
  stroke: var(--fh-karte-rot);
  stroke-width: 2.4;
}

.fh-karte-station-claimed .fh-karte-punkt {
  fill: #dbe4c6;
  stroke: var(--fh-karte-gruen);
}

/* Noch nicht erreicht: blasser, als waere die Tinte dort duenner
   aufgetragen. */
.fh-karte-station-locked { opacity: .42; }

.fh-karte-station:hover .fh-karte-punkt,
.fh-karte-station:focus-visible .fh-karte-punkt {
  fill: #ffeec2;
  stroke: var(--fh-karte-rot);
}

.fh-karte-station:focus-visible {
  outline: 2px solid var(--fh-karte-rot);
  outline-offset: 3px;
  border-radius: 50%;
}

.fh-karte-hier-ring {
  fill: none;
  stroke: var(--fh-karte-rot);
  stroke-width: 1.8;
  opacity: .85;
  animation: fhKarteHier 2.4s ease-in-out infinite;
}

@keyframes fhKarteHier {
  0%, 100% { r: 21px; opacity: .85; }
  50%      { r: 26px; opacity: .3; }
}

.fh-karte-hier-text {
  fill: var(--fh-karte-rot);
  font-size: 11px;
  letter-spacing: .18em;
  font-family: var(--fh-font-display);
  pointer-events: none;
}

/* Das Ziel: ein Kreuz statt einer Nummer. */
.fh-karte-kreuz {
  stroke: var(--fh-karte-rot);
  stroke-width: 4.5;
  stroke-linecap: round;
}

.fh-karte-ziel-ring {
  fill: none;
  stroke: rgba(156, 58, 26, .5);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

/* ---- Zoom und Schwenken ---- */
.fh-schatzkarte-blatt { position: relative; }

.fh-schatzkarte-svg { cursor: grab; touch-action: none; }
.fh-schatzkarte-svg.ist-am-ziehen { cursor: grabbing; }

.fh-karte-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 6px;
}

.fh-karte-zoom-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(67, 48, 26, .45);
  background: rgba(239, 224, 189, .92);
  color: #43301a;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition-duration: var(--fh-dauer, 200ms);
  transition-timing-function: var(--fh-ease-aus, ease-out);
  transition-property: background-color, border-color, transform, opacity;
}

.fh-karte-zoom-btn:hover:not(:disabled) { background: #fff3d6; }
.fh-karte-zoom-btn:active:not(:disabled) { transform: scale(.92); }
.fh-karte-zoom-btn:disabled { opacity: .4; cursor: default; }

.fh-karte-zoom-btn:focus-visible {
  outline: 2px solid var(--fh-gold-bright);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .fh-schatzkarte {
    padding: 14px 10px 12px;
    justify-content: center;
  }

  .fh-schatzkarte-zu { width: 34px; height: 34px; font-size: 15px; }

  /* Auf 390px Breite waere die ganze Karte 240px hoch und die
     Stationen unlesbar - 50 davon brauchen Platz. Vorher wurde
     deshalb das Blatt in voller Groesse gehalten und seitwaerts
     geschoben. Mit Zoom und Schwenken ist das nicht mehr noetig: die
     Karte oeffnet herangezoomt bei der aktuellen Station, und man
     kommt jetzt auch nach oben und unten statt nur zur Seite. */
  .fh-karte-symbol { font-size: 13px; }
  .fh-karte-nummer { font-size: 10px; }
  .fh-karte-hier-text { font-size: 11px; }
  .fh-karte-zoom-btn { width: 40px; height: 40px; }
}