/* ══════════════════════════════════════════════════════════════════
   landkarte.css — die Landkarte des Feldzugs (kampagne.html).

   Pfade hier sind relativ zum Stilblatt: `../assets/…`.
   ══════════════════════════════════════════════════════════════════ */
/* Eigene Bühnenmaße nach dem Seitenverhältnis der Landkarte
   (1462 : 1076), damit nichts abgeschnitten wird. */
/* Die Bühnenhöhe folgt dem Seitenverhältnis der jeweiligen Karte —
   jedes Land bringt seine eigene mit. */
.buehne.karte{width:1000px;height:var(--kh,736px);}
.land{position:absolute;inset:0;border-radius:16px;overflow:hidden;}
.land img{width:100%;height:100%;object-fit:cover;display:block;}
.land::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 45%,transparent 40%,rgba(20,14,8,.5));}

/* Wegpunkte: die Route zwischen den Orten, als Tupfenspur.

   Sie liegen unter den Marken (z-index 4 gegen 5) und sind bewusst
   klein und zurückhaltend — sie sollen den Blick führen, nicht auf
   sich ziehen. Die zurückgelegte Strecke ist gedeckt und ruhig, der
   Weg zum nächsten Ziel heller und in leiser Bewegung. */
.wegpunkt{
  position:absolute;transform:translate(-50%,-50%);z-index:4;
  width:7px;height:7px;border-radius:50%;pointer-events:none;
  background:rgba(238,220,171,.72);
  box-shadow:0 0 0 1.5px rgba(20,14,8,.55),0 1px 3px rgba(0,0,0,.5);
  animation:wegpunktAn .3s ease-out backwards;
}
@keyframes wegpunktAn{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}}
/* Der Abschnitt, der gerade zurückgelegt wurde: jeder Tupfen setzt
   sich einzeln, golden und mit einem kurzen Aufleuchten. Danach fällt
   er auf das ruhige Aussehen der übrigen zurück — der Weg soll die
   Karte nicht dauerhaft mit einer hellen Spur überziehen. */
.wegpunkt.laeuft{
  animation:wegpunktTritt .5s cubic-bezier(.2,.9,.3,1.5) backwards;
}
@keyframes wegpunktTritt{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.2);}
  45% {opacity:1;transform:translate(-50%,-50%) scale(1.9);
       background:radial-gradient(circle at 36% 32%,#fff5cf,var(--gold-hi) 60%,var(--gold-dk));
       box-shadow:0 0 0 1.5px rgba(20,14,8,.55),0 0 12px -1px var(--gold-hi);}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .wegpunkt,.wegpunkt.laeuft{animation:none;}
  .marke{animation:none !important;}
}

/* Ortsmarken. Sichtbar ist nur, was man schon erreicht hat — wohin es
   danach geht, zeigt sich erst nach dem Sieg. */
.marke{position:absolute;transform:translate(-50%,-50%);z-index:5;
  background:none;border:0;padding:0;cursor:default;
  animation:markeAn .35s cubic-bezier(.2,.9,.3,1.4);}
@keyframes markeAn{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}}
.marke .scheibe{
  /* 38 -> 48 Punkte, ein Viertel größer. Das Bild des Anführers ist
     das, woran man den Ort wiedererkennt; bei 38 war davon kaum mehr
     als eine Farbe zu sehen. */
  /* Auf dem Telefon (`--s` um 0,4) hält die untere Schranke die Marke
     auf Fingergröße, ohne dass sie ein Sechstel der Karte deckt. */
  position:relative;border-radius:50%;overflow:hidden;
  width:max(54px,calc(30px / var(--s,1)));
  height:max(54px,calc(30px / var(--s,1)));
  border:3px solid var(--ink);background:#fff;
  box-shadow:0 0 0 2px #3f7a43,0 4px 8px -3px #000;
}
.marke .scheibe img{width:100%;height:100%;object-fit:cover;
  object-position:50% 26%;transform:scale(1.3);display:block;}
/* **Ein Zehntel kleiner, wo das Motiv breit ist.** Die 1,3-fache
   Vergrößerung holt bei Kartenbildern den Kopf in die Scheibe; bei
   einem Motiv, das die ganze Breite füllt — das Greifennest, das
   Portal — schneidet sie die Ränder ab. Dort genügt 1,17, und das
   Motiv steht mittig statt auf Kopfhöhe. */
.marke.weit .scheibe img{transform:scale(1.17);object-position:50% 50%;}

/* Ein Durchgang statt eines Gegners: die letzte Station eines
   durchgespielten Landes führt weiter. Ein leichter Schimmer sagt, dass
   dort etwas offen steht. */
.marke.durchgang .scheibe{
  border-color:#c9a24a;
  box-shadow:0 0 0 3px rgba(201,162,74,.45),0 6px 14px -6px #000;
  animation:durchgangAtmet 2.8s ease-in-out infinite;
}
@keyframes durchgangAtmet{
  0%,100%{box-shadow:0 0 0 3px rgba(201,162,74,.4),0 6px 14px -6px #000;}
  50%    {box-shadow:0 0 0 6px rgba(201,162,74,.18),0 6px 14px -6px #000;}
}
@media (prefers-reduced-motion: reduce){
  .marke.durchgang .scheibe{animation:none;}
}
/* **Wie weit das Motiv im Bild oben sitzt, ist je Karte verschieden.**
   Ein fester Wert für alle traf keines richtig: das Greifennest saß am
   oberen Rand mit Luft darunter, das Portal ebenso, nur weniger.

   `--oy` gibt die Lage je Marke an; die Zahl steht bei ihrem Fundort
   in js/kampagne.js. Nachgesehen, nicht geschätzt: beide Bilder in
   vier Lagen nebeneinandergelegt und die mittigste genommen. */
.marke.weit .scheibe img{object-position:50% var(--oy, 50%);}
/* Ein verstecktes Feld: **unsichtbar und ohne jeden Hinweis**. Kein
   Rahmen, kein Zeigerwechsel, kein Titel — ein Osterei mit Wegweiser
   wäre eine Aufgabe. Die Fläche ist groß genug zum Treffen, aber sie
   verrät sich nicht. */
.suchfeld{
  position:absolute;transform:translate(-50%,-50%);
  width:calc(74px / var(--s,1));height:calc(74px / var(--s,1));
  background:none;border:0;padding:0;cursor:default;
  -webkit-tap-highlight-color:transparent;
}
.suchfeld:focus{outline:none;}
/* Der Stern sitzt in einem eigenen Kind: die Klickfläche selbst darf
   sich nicht bewegen, sonst wandert das Ziel unter dem Finger weg. */
.suchfeld .funke{
  position:absolute;left:50%;top:50%;width:0;height:0;
  animation:aufblitzen 2.7s linear infinite;
}
/* ─── Das Funkeln ─────────────────────────────────────────────────
   **Es wächst mit dem Weg.** `--fg` geht von 0 bis 1: frisch
   freigeschaltet ist es ein Lichtpunkt von drei Bildpunkten, am Ende
   des Landes ein Stern mit vier Spitzen, der sich beim Aufgehen
   langsam dreht.

   Der Gedanke dahinter: ein Hinweis, der von Anfang an laut ist, nimmt
   den Fund weg — einer, der nie lauter wird, macht ihn unfindbar. Also
   wird er in dem Maß deutlicher, in dem man das Land hinter sich
   bringt.

   Drei Größen hängen an `--fg`: die Länge der Strahlen (18 → 44), ihre
   Helligkeit (0,55 → 0,95) und die Dauer des Aufblitzens. Der Kern
   bleibt klein — er ist der Punkt, der gemeint ist. */
.suchfeld .funke::before,.suchfeld .funke::after{
  content:"";position:absolute;left:50%;top:50%;
  background:#fffdf4;
}
/* Der Kern — klein und rund, wächst nur wenig mit. */
.suchfeld .funke::before{
  --k:calc((5px + 3px * var(--fg,0)) / var(--s,1));
  width:var(--k);height:var(--k);
  margin:calc(var(--k) / -2) 0 0 calc(var(--k) / -2);
  border-radius:50%;
}
/* Die Strahlen: vier Spitzen aus zwei gekreuzten Haarlinien, zu den
   Enden auslaufend. Mit `--fg` werden sie länger und heller. */
.suchfeld .funke::after{
  --l:calc((34px + 22px * var(--fg,0)) / var(--s,1));
  --h:calc(.85 + .13 * var(--fg,0));
  /* Die Linien werden mit der Karte mitskaliert, bleiben aber
     mindestens einen ganzen Bildpunkt dick — eine halbe Linie
     verschluckt der Bildschirm. */
  --d:max(1px, calc(1.4px / var(--s,1)));
  width:var(--l);height:var(--l);
  margin:calc(var(--l) / -2) 0 0 calc(var(--l) / -2);
  background:
    linear-gradient(90deg,
      rgba(255,253,244,0) 0%,rgba(255,253,244,var(--h)) 50%,rgba(255,253,244,0) 100%)
      center / 100% var(--d) no-repeat,
    linear-gradient(180deg,
      rgba(255,253,244,0) 0%,rgba(255,253,244,var(--h)) 50%,rgba(255,253,244,0) 100%)
      center / var(--d) 100% no-repeat;
}
@keyframes aufblitzen{
  /* 2,7 Sekunden gesamt, sichtbar von 74 bis 100 Prozent — das sind
     **0,7 Sekunden, also gut ein Viertel der Zeit**.

     Der Weg dahin ging über 9,4 und 5,3 Sekunden; beide Male sah man
     es nicht. Ein Hinweis, den man nur findet, wenn man ohnehin
     hinschaut, ist keiner. */
  0%,74%{opacity:0;transform:translate(-50%,-50%) scale(.2);}
  80%   {opacity:1;transform:translate(-50%,-50%) scale(1);}
  86%   {opacity:.12;transform:translate(-50%,-50%) scale(.6);}
  92%   {opacity:.65;transform:translate(-50%,-50%) scale(.88);}
  100%  {opacity:0;transform:translate(-50%,-50%) scale(.45);}
}
/* Voll aufgedreht: das Aufblitzen dauert länger, geht weiter auf und
   **dreht sich** dabei. Eine Achtelumdrehung genügt — eine ganze sähe
   nach Mühlrad aus, ein Achtel nach einem Lichtreflex, der wandert. */
.suchfeld .funke.voll{animation-name:aufblitzenVoll;}
@keyframes aufblitzenVoll{
  0%,66%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0deg);}
  73%   {opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(12deg);}
  80%   {opacity:.2;transform:translate(-50%,-50%) scale(.8) rotate(22deg);}
  88%   {opacity:.95;transform:translate(-50%,-50%) scale(1.1) rotate(32deg);}
  95%   {opacity:.35;transform:translate(-50%,-50%) scale(.9) rotate(40deg);}
  100%  {opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(45deg);}
}
@media (prefers-reduced-motion: reduce){
  .suchfeld .funke{animation:none;opacity:0;}
}
/* Gefundene Orte sitzen etwas kleiner auf der Karte: sie gehören nicht
   zum Weg, sondern sind Beiwerk. */
/* Versteckte Orte sind **so groß wie alle anderen**. Sie kleiner zu
   zeichnen war der Gedanke „Beiwerk"; auf der Karte sah es aber nach
   einem Fehler aus. Wer einen findet, hat einen richtigen Gegner vor
   sich. */

.marke .haken{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(43,87,48,.72);color:#eafbe8;
  font-family:var(--display);font-size:max(23px,calc(18px / var(--s,1)));padding-top:.1em;}
.marke.hier{z-index:6;}
.marke.hier .scheibe{
  width:max(78px,calc(44px / var(--s,1)));
  height:max(78px,calc(44px / var(--s,1)));
  box-shadow:0 0 0 3px var(--gold-hi),0 0 22px -1px var(--gold),0 5px 10px -4px #000;
  animation:pochen 1.4s infinite;cursor:pointer;
}
.marke.hier::after{
  content:attr(data-name);position:absolute;left:50%;top:calc(100% + 6px);
  transform:translateX(-50%);white-space:nowrap;
  /* Von 14 auf 17 Punkte. Die Namen stehen auf einer gemalten
     Landschaft und müssen sich gegen sie behaupten — auf dem Telefon
     ist die Karte zudem stark verkleinert. */
  font-family:var(--display);font-size:17px;padding-top:.3em;
  color:var(--parch-hi);text-shadow:0 2px 3px #000,0 0 6px #000;
}
/* **Tief liegende Marken beschriften sich nach oben.** Quelldorf sitzt
   bei y=0,92 am Flussufer — dort fiel der Name aus dem Bild. Die Marke
   zu verschieben hätte den Tiefenwächter vom Wasser weggeholt, und das
   war ja der Grund für die Stelle. Also klappt der Name um. */
.marke.hier.tief::after{
  top:auto;bottom:calc(100% + 6px);padding-top:0;padding-bottom:.3em;
}

/* Unten rechts, wo im Hauptmenü auch die Wege hinausführen. Die Größe
   hängt am Maßstab, damit der Knopf auf dem Telefon nicht mitwächst. */
a.knopf.heimweg{
  position:absolute;right:calc(16px / var(--s,1));
  bottom:calc(14px / var(--s,1));z-index:6;
  font-size:calc(15px / var(--s,1));
  padding:calc(7px / var(--s,1)) calc(16px / var(--s,1));
}

/* Die Blätterleiste unten links — dieselbe Machart wie die
   Speicherleiste gegenüber: schlichter Text, der da ist, wenn man ihn
   sucht, und sonst nicht stört. Die Größe hängt am Maßstab, damit sie
   überall gleich groß ankommt. */
/* ─── Die Blätterseiten ───────────────────────────────────────────
   Man blättert durch Landkarten, also sollen es **Seiten** sein und
   keine Textlinks. Zwei Pfeile, links und rechts, jeder in einer
   runden Scheibe aus Pergament mit dunklem Rand — dieselbe Machart wie
   die Marken auf der Karte, nur kleiner.

   Ein dritter Pfeil („zurück zu deinem Stand") ist entfallen: beim
   Blättern gibt es nur vor und zurück, und ein drittes Zeichen
   daneben las sich wie eine dritte Richtung.

   Die Größe hängt am Maßstab, damit sie auf dem Telefon nicht
   mitwächst. */
.blaetterleiste{
  position:absolute;left:calc(16px / var(--s,1));
  bottom:calc(14px / var(--s,1));z-index:8;
  display:flex;align-items:center;gap:calc(12px / var(--s,1));
}
.blaetterleiste button{
  --d:calc(64px / var(--s,1));
  width:var(--d);height:var(--d);padding:0;cursor:pointer;
  display:grid;place-items:center;
  border-radius:50%;
  border:calc(3.5px / var(--s,1)) solid var(--ink);
  /* **Deckend, nicht durchscheinend.** Der helle Verlauf ließ die
     Karte durchschimmern; über Wald, Lava oder Wasser sah die Scheibe
     jedes Mal anders aus und verschwand stellenweise ganz.

     Jetzt ein kräftiges Leder-Braun — dieselbe Familie wie der Rahmen
     des Bretts (`--ink` #1c1208) und die Knöpfe im Menü, nur heller,
     damit der dunkle Pfeil darin steht. Nichts Durchsichtiges. */
  background:
    radial-gradient(circle at 34% 26%,
      rgba(255,240,205,.34) 0%, rgba(255,240,205,0) 56%),
    linear-gradient(168deg, #a8813f 0%, #8a6631 52%, #6b4c22 100%);
  /* **Zwei Ränder, ein heller und ein dunkler.** Braun allein reicht
     nicht: auf Demonicas Lava liegt es bei 1,0 zu 1 — die Scheibe
     verschwände dort vollständig. Gegen Gras wiederum hilft nur der
     dunkle Rand.

     Innen die dunkle Kante (`--ink`), außen ein heller Ring: eines von
     beiden hebt sich immer ab, gleich worauf die Scheibe liegt. */
  box-shadow:
    inset 0 calc(2px / var(--s,1)) 0 rgba(255,240,205,.45),
    0 0 0 calc(2.5px / var(--s,1)) rgba(247,233,200,.85),
    0 calc(4px / var(--s,1)) calc(11px / var(--s,1)) rgba(0,0,0,.65);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
/* Der Pfeil selbst ist gezeichnet, nicht gesetzt: ein Schriftzeichen
   sieht in jeder Schrift anders aus, und ◄ ist in manchen plump. */
/* **Deutlich dicker.** Mit 15 Punkten und 3,5 Strichstärke gingen die
   Pfeile auf der bunten Karte unter — jetzt 22 bei 6, dazu ein heller
   Schatten darunter, damit sie sich von jedem Untergrund abheben. */
.blaetterleiste button::before{
  content:"";
  width:calc(22px / var(--s,1));height:calc(22px / var(--s,1));
  /* Heller Pfeil auf dunklem Leder — vorher dunkel auf hell, was auf
     dem neuen Grund untergegangen wäre. */
  border-left:calc(6px / var(--s,1)) solid #f6e9c8;
  border-bottom:calc(6px / var(--s,1)) solid #f6e9c8;
  border-radius:calc(2px / var(--s,1));
  filter:drop-shadow(0 calc(1.5px / var(--s,1)) 0 rgba(30,20,8,.6));
  transform:rotate(45deg) translate(calc(2px / var(--s,1)), calc(-2px / var(--s,1)));
}
.blaetterleiste button.vor::before{
  transform:rotate(-135deg) translate(calc(2px / var(--s,1)), calc(-2px / var(--s,1)));
}
.blaetterleiste button:hover{
  transform:translateY(calc(-2px / var(--s,1)));
  filter:brightness(1.07);
  box-shadow:
    inset 0 calc(1.5px / var(--s,1)) 0 rgba(255,255,255,.5),
    0 calc(5px / var(--s,1)) calc(11px / var(--s,1)) rgba(0,0,0,.5),
    0 0 0 calc(2px / var(--s,1)) rgba(212,175,85,.5);
}
.blaetterleiste button:active{transform:translateY(0) scale(.96);}
.blaetterleiste button:focus-visible{
  outline:calc(2px / var(--s,1)) solid var(--gold-hi);
  outline-offset:calc(3px / var(--s,1));
}

/* ─── Größen, die am Maßstab hängen ──────────────────────────────
   Nicht an einer Fenstergröße. Das war der Fehler der letzten beiden
   Anläufe: `@media (max-height:560px)` trifft ein Telefon quer
   (Maßstab 0,53), aber ebenso ein flaches Fenster am Rechner (0,70)
   — dieselben Punkte wirken dort deutlich größer, und die Werte
   gerieten außer Rand und Band.

   `calc(N / var(--s))` beschreibt dagegen unmittelbar, was ankommen
   soll. `max()` setzt zusätzlich eine Untergrenze für den großen
   Bildschirm, wo die Karte vergrößert wird und die Marken sonst
   schrumpften.

   Diese Regeln stehen am **Ende** des Stilblocks: bei gleicher
   Spezifität gewinnt die letzte, und zuvor überschrieben die weiter
   unten notierten `.marke`-Regeln sie stillschweigend. */

/* Ortsnamen: mindestens 17 Punkte, auf dem Telefon rund 28. */
.marke::after{font-size:max(17px,calc(15px / var(--s,1)));}

/* Die Marken selbst stehen oben bei `.marke .scheibe`, mit derselben
   Rechnung. */

/* Die übrigen Bedienelemente der Karte: nur auf schmalen und flachen
   Fenstern größer, aber maßvoll — sie stehen im Fluss und werden nicht
   mitskaliert. */
@media (max-width:560px),(max-height:560px){

  .tafel b{font-size:20px;}
  .tafel span{font-size:15px;}
  .knopf{font-size:19px;min-height:50px;}
  .knopf.klein{font-size:18px;min-height:46px;padding:0 20px;}
}

/* ─── Demonica glüht (js/atmosphaere.js) ────────────────────────────
   Drei Schichten über dem Landbild, unter den Marken. Sie existieren
   nur, wenn `.land` die Klasse `glueht` trägt — für alle anderen Länder
   bleiben sie versteckt. */
.land .hitze,.land .glut,.land .schleier{
  position:absolute;inset:0;pointer-events:none;display:none;
}
.land.glueht .hitze,.land.glueht .glut,.land.glueht .schleier{display:block;}
.land.glueht img{filter:saturate(1.05) contrast(1.04) brightness(.94);}
.land .glut{width:100%;height:100%;}
/* Glutflecken über Lava und Burg: wandern langsam, wie Hitze über Stein. */
.land .hitze{
  mix-blend-mode:screen;opacity:.16;
  background:
    radial-gradient(ellipse at 72% 31%,rgba(255,70,10,.7),transparent 19%),
    radial-gradient(ellipse at 54% 78%,rgba(255,55,0,.5),transparent 24%),
    radial-gradient(ellipse at 30% 45%,rgba(255,75,10,.35),transparent 20%);
  animation:hitze 5s ease-in-out infinite alternate;
}
@keyframes hitze{
  from{transform:translate3d(-.5%,.3%,0) scale(1);}
  to  {transform:translate3d(.7%,-.5%,0) scale(1.02);}
}
/* Vignette: dunkler Rand, dunkler Saum oben und unten. Liegt über dem
   allgemeinen `.land::after`, das für alle Länder gilt. */
.land .schleier{
  inset:-5%;
  background:
    radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.16) 73%,rgba(0,0,0,.78) 100%),
    linear-gradient(180deg,rgba(0,0,0,.22),transparent 20%,transparent 80%,rgba(0,0,0,.3));
}
@media (prefers-reduced-motion:reduce){
  .land .hitze{animation:none;}
}