/* McDev.TV — interaktive Karte (gehört zu assets/mcdev-map.js) */

.mm-host{ position:relative; }

.mm-stage{
  position:relative; overflow:hidden; border-radius:16px;
  background:#070a12; border:1px solid var(--line2,#1e2438);
  aspect-ratio:1/1; touch-action:none; cursor:grab; user-select:none;
}
.mm-stage.mm-greift{ cursor:grabbing; }
.mm-host[data-setzen]:not([data-setzen=""]) .mm-stage{ cursor:crosshair; }

.mm-world{ position:absolute; inset:0; transform-origin:50% 50%; will-change:transform; }
.mm-img{ width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.mm-heatmap{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.82; mix-blend-mode:screen; }

.mm-markers, .mm-pois{ position:absolute; inset:0; pointer-events:none; }
.mm-markers > *, .mm-pois > *{ pointer-events:auto; }

/* Punkte skalieren GEGEN den Zoom, damit sie immer gleich groß aussehen */
/* Gefüllte Kachel in der Ebenen-Farbe mit dunklem Symbol — liest sich auch
   auf einer bunten Karte noch, anders als dünne Striche auf dunklem Grund. */
.mm-marker{
  position:absolute; transform:translate(-50%,-50%) scale(calc(1 / var(--mm-z,1)));
  width:27px; height:27px; border-radius:9px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--c,#7CFC6E); color:var(--auf-gruen);
  border:2px solid rgba(4,7,14,.85);
  box-shadow:0 2px 7px rgba(0,0,0,.75); transition:transform .1s ease, filter .12s ease;
}
.mm-marker:hover{ filter:brightness(1.25); z-index:5; }
.mm-marker svg{ stroke-width:2; }
.mm-marker.mm-cluster{
  border-radius:999px; min-width:28px; font-weight:800;
  box-shadow:0 2px 9px rgba(0,0,0,.8), 0 0 0 3px rgba(4,7,14,.45);
}
.mm-marker .mm-n{ font-family:var(--font-mono,monospace); font-size:12px; line-height:1; }

/* Ortsnamen */
.mm-poi{
  position:absolute; transform:translate(-50%,-50%) scale(calc(1 / var(--mm-z,1)));
  font-family:var(--font-head,sans-serif); font-weight:800; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:#fff; text-decoration:none; text-shadow:0 1px 3px #000,0 0 8px #000;
  padding:2px 4px; border-radius:5px;
}
.mm-poi:hover{ color:var(--cyan,#7CFC6E); background:rgba(0,0,0,.5); }
.mm-poi--klein{ font-size:9px; opacity:.7; font-weight:600; text-transform:none; }

/* Bedienleiste */
.mm-tools{ position:absolute; right:10px; top:10px; display:flex; flex-direction:column; gap:5px; z-index:6; }
.mm-tools button{
  width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:16px; font-weight:700;
  background:rgba(10,12,22,.9); border:1px solid var(--line2,#1e2438); color:var(--text,#eef0fb);
  display:flex; align-items:center; justify-content:center;
}
.mm-tools button:hover{ border-color:var(--cyan,#7CFC6E); color:var(--cyan,#7CFC6E); }

/* Infofenster zu einem Punkt */
.mm-info{
  position:absolute; left:10px; bottom:10px; right:10px; max-width:330px; z-index:7;
  background:rgba(13,16,28,.97); border:1px solid var(--line2,#1e2438); border-radius:13px;
  padding:11px 13px; backdrop-filter:blur(10px); font-size:13px; color:var(--text,#eef0fb);
}
.mm-info-kopf{ display:flex; align-items:center; gap:8px; }
.mm-info-kopf b{ flex:1; font-size:13.5px; }
.mm-info-zu{ background:none; border:0; color:var(--text-faint,#565d87); font-size:19px; cursor:pointer; line-height:1; padding:0 2px; }
.mm-info-typ{ font-size:11px; color:var(--text-faint,#565d87); margin-top:1px; }
.mm-info p{ margin:7px 0 0; font-size:12.5px; color:var(--text-dim,#8990b8); line-height:1.6; }
.mm-info-tools{ display:flex; gap:6px; margin-top:9px; }
.mm-info-tools button{
  flex:1; padding:7px 10px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:700;
  background:var(--bg-card2,#10131f); border:1px solid var(--line2,#1e2438); color:var(--text,#eef0fb);
}
.mm-info-tools .mm-rot{ color:#ff5c8a; border-color:rgba(255,92,138,.4); }

/* Ebenen-Auswahl (Filterliste wie bei fortnite.gg) */
.mm-layers{ margin-top:12px; }
.mm-gruppe{ margin-bottom:12px; }
.mm-gruppe h3{
  font-family:var(--font-head,sans-serif); font-size:11.5px; font-weight:700; margin:0 0 6px;
  text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint,#565d87);
}
.mm-liste{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:5px; }
.mm-l{
  display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:10px; cursor:pointer;
  background:var(--bg-card2,#10131f); border:1px solid var(--line2,#1e2438);
  font-size:12.5px; font-weight:600; color:var(--text-dim,#8990b8); text-align:left; min-height:40px;
}
.mm-l:hover{ border-color:var(--line,#223226); color:var(--text,#eef0fb); }
.mm-l[aria-pressed="true"]{ color:var(--text,#eef0fb); border-color:currentColor; }
.mm-l .ic{ display:flex; width:22px; height:22px; align-items:center; justify-content:center; flex-shrink:0; }
.mm-l .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-l .z{ font-family:var(--font-mono,monospace); font-size:11px; opacity:.75; flex-shrink:0; }
.mm-l[aria-pressed="false"]{ opacity:.45; }
.mm-l[aria-pressed="false"] .ic{ opacity:.4; }

@media (max-width:640px){
  /* minmax(0,…) — sonst zwingt ein langer Ebenen-Name die Spalte breiter */
  .mm-liste{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .mm-l{ padding:7px; font-size:11.5px; }
  .mm-info{ max-width:none; }
}

/* Punkt aus einer früheren Season: bewusst blass statt versteckt. Fortnite
   ändert die Karte jede Season — was damals stimmte, muss heute nicht mehr
   stimmen. Wegnehmen wäre falsch (viele Orte bleiben), aber beim Durchgehen
   muss man die fraglichen sofort erkennen. */
.mm-marker.mm-alt{ opacity:.45; filter:saturate(.5); }
.mm-marker.mm-alt::after{
  content:'?'; position:absolute; top:-4px; right:-4px;
  width:13px; height:13px; border-radius:50%;
  background:#f2c14e; color:#1a1400; font-size:10px; font-weight:800;
  line-height:13px; text-align:center;
}