/* ═══════════════════════════════════════
   DIE WALDGESCHICHTE — Karte in der Gebietsansicht
   ═══════════════════════════════════════

   Alles unter .fs-*, damit nichts in bestehende Waldklassen (.wo-*, .mmo-*,
   .ft-*) hineinregiert.

   ⚠️ Nur Variablen aus src/style.css, keine eigenen Farben: Das Spiel startet
   im HELLEN Design (--bg:#f0f4ff) und schaltet per [data-theme] um. Fest
   gesetzte helle Flaechen oder weisse Transparenzen waeren in einem der beiden
   Modi unlesbar — genau das passiert, wenn man nur im eigenen Modus hinsieht. */

.fs-karte {
  margin-top: .6rem;
  padding: .62rem .72rem .68rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  background: var(--gold-l);
}

.fs-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .55rem;
  margin-bottom: .3rem;
}

.fs-label {
  font-size: .6rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
}

.fs-kap {
  font-size: .72rem;
  color: var(--text2);
}

.fs-ziel {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

/* Fortschritt bis zum naechsten Schritt. Bewusst duenn: eine Nebenauskunft,
   nicht die Hauptsache der Ansicht. */
.fs-bar {
  height: 4px;
  margin: .45rem 0 .35rem;
  border-radius: 3px;
  background: var(--surface3);
  overflow: hidden;
}

.fs-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--gold);
  transition: width .35s ease;
}

.fs-hint {
  font-size: .73rem;
  line-height: 1.35;
  color: var(--text2);
}

.fs-hint--warn { color: var(--red); font-weight: 600; }
.fs-hint--done { color: var(--green); font-weight: 600; }

.fs-acts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .45rem;
}

.fs-btn {
  flex: 1 1 10rem;
  padding: .42rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, transform .12s;
}

.fs-btn:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.fs-btn--prim {
  border-color: var(--gold);
  color: var(--orange);
}

.fs-karte--fertig {
  border-left-color: var(--green);
  background: var(--green-l);
}

.fs-karte--fertig .fs-label { color: var(--green); }

/* Schmale Fenster: die beiden Wahlknoepfe untereinander, damit die Beschriftung
   nicht umbricht. */
@media (max-width: 560px) {
  .fs-btn { flex: 1 1 100%; }
}