/* ══════════════════════════════════════════════════════════════════════
   LaFa 2.0 · map.css — Rahmen für alle Kartenseiten

   Eine Kartenseite ist Werkzeug, nicht Bühne: schmale Kopfleiste, die
   Karte nimmt den Rest. Die Atmosphäre der Startseite bleibt außen vor
   — sie würde vom Kartenbild ablenken und Rechenzeit kosten.
   ══════════════════════════════════════════════════════════════════════ */

body.mapview {
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--sand-100);
}

/* ── Kopfleiste ──────────────────────────────────────────────────── */
.mapbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem clamp(.9rem, 2vw, 1.5rem);
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(14px) saturate(140%);
  z-index: 10;
}

.mapbar__back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem .45rem .7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.mapbar__back:hover {
  color: var(--ink);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.mapbar__back svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease-out); }
.mapbar__back:hover svg { transform: translateX(-3px); }

.mapbar__id { display: grid; gap: .1rem; min-width: 0; }
.mapbar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mapbar__sub {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.mapbar__spacer { margin-left: auto; }

/* Verbindungsanzeige */
.mapbar__state {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.mapbar__dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
  transition: background var(--t-mid);
}
.mapbar__state[data-state="live"]  .mapbar__dot { background: var(--leaf); }
.mapbar__state[data-state="idle"]  .mapbar__dot { background: var(--warn, #c98a1e); }
.mapbar__state[data-state="error"] .mapbar__dot { background: #c0392b; }
.mapbar__state[data-state="live"] .mapbar__dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--leaf);
  animation: ping 2.2s var(--ease-out) infinite;
}

/* Umschalter 2D/3D und Sprachwahl — Pillen wie die Sprachwahl der
   übrigen Seiten (landing.css .lang), hier ohne deren Stylesheet. */
.viewswitch, .lang {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  padding: .18rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--paper) 62%, transparent);
  flex: none;
}
.viewswitch button, .lang__opt {
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--ink-faint);
  transition: color var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease-out);
}
.viewswitch button:hover, .lang__opt:hover { color: var(--ink); }
.viewswitch button[aria-pressed="true"], .lang__opt.is-on {
  color: var(--ink);
  background: color-mix(in oklab, var(--accent) 14%, var(--paper));
}
.viewswitch button[aria-pressed="true"] { font-weight: 600; }

@media (max-width: 640px) {
  .mapbar { gap: .5rem; }
  .mapbar__state #state-text { display: none; }
  .viewswitch button, .lang__opt { padding: .3rem .5rem; }
  .mapbar__sub { display: none; }
  .mapbar__back span { display: none; }
  .mapbar__back { padding: .45rem .6rem; }
}

/* ── Kartenfläche ────────────────────────────────────────────────── */
.mapstage {
  position: relative;
  min-height: 0;
  background: var(--sand-150);
}

/* Eingebettete fremde Oberfläche (squaremap) */
.mapstage__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Ladehinweis, bis die Karte steht */
.mapstage__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .9rem;
  background: var(--sand-100);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.mapstage__loading.is-done { opacity: 0; visibility: hidden; }
.mapstage__spin {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: mapspin .8s linear infinite;
}
@keyframes mapspin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mapstage__spin { animation: none; }
}

/* ══ Eigene Karten (Dune, Palworld) ══════════════════════════════════ */
.mapstage--own { display: grid; grid-template-columns: 1fr 20rem; }
@media (max-width: 900px) { .mapstage--own { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } }

.mapcanvas { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.mapcanvas canvas { width: 100%; height: 100%; display: block; touch-action: none; }

/* Zoom-Knöpfe */
.mapctl {
  position: absolute; left: .8rem; top: .8rem;
  display: grid; gap: .3rem; z-index: 5;
}
.mapctl button {
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: .95rem; line-height: 1;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.mapctl button:hover {
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  color: color-mix(in oklab, var(--accent) 80%, var(--ink));
  transform: translateY(-1px);
}

/* Hinweis am unteren Rand */
.maphint {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 5;
  padding: .4rem .75rem;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: .55rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* Tooltip am Marker */
.maptip {
  position: absolute; z-index: 6;
  transform: translate(-50%, calc(-100% - 12px));
  padding: .45rem .7rem;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--sand-50);
  font-size: .74rem; line-height: 1.35;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s var(--ease-out);
}
.maptip.is-on { opacity: 1; }
.maptip b { display: block; font-weight: 600; }
.maptip span { color: color-mix(in oklab, var(--sand-50) 62%, transparent); font-size: .68rem; }

/* ── Seitenleiste ────────────────────────────────────────────────── */
.mapside {
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  display: grid;
  gap: 1rem;
  align-content: start;
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  border-left: 1px solid var(--line-soft);
}
@media (max-width: 900px) {
  .mapside { border-left: 0; border-top: 1px solid var(--line-soft); max-height: 42vh; }
}

.mapgroup { display: grid; gap: .55rem; }
.mapgroup__title {
  font-family: var(--font-mono);
  font-size: .56rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* Kennzahlen */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.stat {
  padding: .6rem .7rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--paper);
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.32rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-family: var(--font-mono);
  font-size: .53rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* Umschalter für Karten und Ebenen */
.choice { display: grid; gap: .3rem; }
.choice button, .choice label {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  font-size: .82rem; color: var(--ink-soft);
  text-align: left; width: 100%;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.choice button:hover, .choice label:hover { background: color-mix(in oklab, var(--accent) 7%, transparent); }
.choice button[aria-pressed="true"] {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
  color: var(--ink); font-weight: 600;
}
.choice input { accent-color: var(--accent); width: .95rem; height: .95rem; cursor: pointer; }
.choice .dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.choice .count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: .6rem;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}

/* Liste (Spieler, Vorkommen) */
.maplist { display: grid; gap: .3rem; }
.maplist__row {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .6rem;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  font-size: .8rem;
}
.maplist__row b { font-weight: 600; color: var(--ink); }
.maplist__row span { margin-left: auto; font-family: var(--font-mono); font-size: .6rem; color: var(--ink-faint); }
.maplist__empty {
  padding: .7rem;
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--sand-150) 70%, transparent);
  font-size: .78rem; color: var(--ink-mute); line-height: 1.5;
}

.mapnote {
  display: flex; gap: .55rem;
  font-size: .73rem; color: var(--ink-faint); line-height: 1.5;
}
.mapnote::before {
  content: ""; flex: none;
  width: .45rem; height: .45rem; margin-top: .38rem;
  border-radius: 50%; background: var(--accent);
}