/* Cold Start - Fenster "Kampagne" mit der Operationskarte (assets/kampagne.js).

   Die Karte liegt wie ein Blatt Papier auf dem Tisch: heller Rand, Schlagschatten,
   darueber die Stationen als SVG. Die Breite richtet sich nach dem Schirm, die
   Hoehe folgt dem Seitenverhaeltnis der Bilddatei (--kam-seiten) - so bleibt das
   Bild unverzerrt, ohne dass die Masse hier doppelt stehen. */

.kam-card {
  width: min(1180px, 95vw);
  max-width: 1180px;
  max-height: 92vh;
  overflow: hidden auto;
  text-align: left;
}
.kam-card h2 { margin: 0 0 4px; }

.kam-unter {
  margin: 0 0 14px;
  color: var(--ink-mute);
  font-size: 13.5px; line-height: 1.45;
}

.kam-karte {
  position: relative;
  aspect-ratio: var(--kam-seiten, 1.6);
  border-radius: 4px;
  padding: 0;
  background: #cfc6ad;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .35) inset;
  overflow: hidden;
}
.kam-karte img,
.kam-karte .kam-lage {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.kam-karte img { object-fit: cover; }
.kam-lage { pointer-events: none; }

/* Der Weg von Station zu Station: gestrichelt wie eine Marschlinie. */
.kam-weg {
  fill: none;
  stroke: #6d3a2e;
  stroke-width: 6;
  stroke-dasharray: 22 14;
  stroke-linecap: round;
  opacity: .75;
}

/* Die Stationen. Offen ist bisher nur die erste - der Rest steht grau da,
   weil es ihn noch nicht zu spielen gibt. */
.kam-hexs { fill: rgba(0, 0, 0, .35); }
.kam-hex {
  fill: #6f6a5c;
  stroke: #efe8d4;
  stroke-width: 3.5;
}
.kam-st.ist-offen .kam-hex { fill: var(--gold, #c9a227); stroke: #fff3c4; }

.kam-nr {
  text-anchor: middle;
  font: 800 30px/1 var(--font, system-ui);
  fill: #efe8d4;
}
.kam-st.ist-offen .kam-nr { fill: #2a2114; }

.kam-name {
  text-anchor: middle;
  font: 700 27px/1 var(--font, system-ui);
  fill: #2f2718;
  paint-order: stroke;
  stroke: rgba(238, 230, 210, .85);
  stroke-width: 7px;
  stroke-linejoin: round;
}

.kam-fuss {
  margin: 12px 0 14px;
  color: var(--ink-mute);
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}