/* =====================================================================
   Todeskarte — Stil für BEIDE Bestände (js/charts/mapgrid.js)
   =====================================================================
   Eigene Datei und nicht in tabs/master.css, weil dieselbe Karte in zwei
   Tabs steht: Master+ und Stats. In einer Tab-Datei wäre sie für den
   anderen Tab nicht geladen.

   KEINE Farbe steht hier als Literal, die etwas BEDEUTET. Die Farbwerte
   der Zellen kommen aus --hm-warm/--hm-cool/--hm-neut/--hm-null und
   werden im JavaScript gemischt (pal()/mix()), weil eine Rampe von 32×32
   Werten in CSS nicht ausdrückbar ist. Was hier steht, sind Rahmen,
   Raster und Schrift — Zierwerk.
   ===================================================================== */

/* Das Quadrat. Eine Karte ist quadratisch, also wird sie es auch: kein
   Streckenverhältnis aus dem Layout, sonst liegt die Diagonale schief und
   die Ankerkreuze treffen die Gruben nicht mehr. */
.mgmap{display:block;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/1;
  border-radius:14px;overflow:hidden}

.mgmap .mg-back{fill:var(--hm-null)}

/* Das Data-Dragon-Bild ist DEKORATION und liegt unter den Zellen.
   Stark abgedunkelt: darüber liegen 1.024 halbdurchlässige Rechtecke, und
   ein helles Bild würde sie alle aufhellen und die Rampe flach machen. */
.mgmap .mg-photo{opacity:.42;filter:saturate(.55) brightness(.72)}

/* Die Zellen. Teildeckkraft, damit das Gelände darunter noch lesbar ist —
   aber hoch genug, dass die Rampe die Aussage trägt und nicht das Bild.
   shape-rendering: crispEdges verhindert die weißen Haarlinien zwischen
   benachbarten Rechtecken (Subpixel-Kanten bei 32 Spalten). */
.mgmap .mg-cells{shape-rendering:crispEdges}
.mgmap .mg-cell{opacity:.82}
/* Leere Zelle: nicht schwarz, sondern durchsichtig — dort ist NICHTS
   gemessen, und das Gelände darf durchscheinen. Der Unterschied zwischen
   "leer" und "wenig" muss sichtbar bleiben (derselbe Grund wie bei
   .cell.null in der Wochentags-Heatmap). */
.mgmap .mg-cell.mg-empty{opacity:.10}

.mgmap .mg-frame{fill:none;stroke:var(--axis);stroke-width:2}

/* Ankerkreuze: Drachen- und Barongrube an ihrer GEMESSENEN Position. Sie
   sind die Sichtprüfung der Ausrichtung — liegen sie nicht auf den Gruben
   im Bild, stimmt die Zuordnung Bild ↔ Koordinaten nicht. Deshalb dünn,
   hell und immer obenauf. */
.mgmap .mg-anchor line,.mgmap .mg-anchor circle{stroke:var(--ink);
  stroke-width:1.4;opacity:.5;vector-effect:non-scaling-stroke}

/* Das Schema, falls das Bild fehlt. Bewusst zurückhaltend: es ist eine
   Orientierungshilfe und keine Landkarte. */
.mgmap .mg-schema .mg-lane{fill:none;stroke:var(--grid);stroke-width:14;
  opacity:.55;stroke-linejoin:round;stroke-linecap:round}
.mgmap .mg-schema .mg-river{stroke:var(--grid);stroke-width:26;opacity:.35}
.mgmap .mg-schema .mg-base{fill:none;stroke:var(--grid);stroke-width:6;opacity:.6}

/* Die beiden Ecken. Nach der Drehung ist unten links IMMER die eigene
   Basis — diese zwei Wörter sind der Unterschied zwischen einer lesbaren
   und einer rätselhaften Karte. */
.mgmap .mg-corner{fill:var(--ink3);font-size:26px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase}
.mgmap .mg-corner-far{text-anchor:end}

/* ---- Legende ---- */
.mg-legend{display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--ink3)}
.mg-stop{display:inline-flex;align-items:center;gap:6px}
.mg-stop i{width:16px;height:9px;border-radius:5px;display:inline-block}
.mg-legnote{margin-top:6px;text-align:center;font-size:10.5px;color:var(--ink3);
  font-variant-numeric:tabular-nums}

/* ---- Kopfzahlen ---- */
.mg-tot{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
  margin-bottom:12px;font-size:11.5px;font-variant-numeric:tabular-nums}
.mg-tot>div{display:flex;flex-direction:column;align-items:center;gap:2px}
.mg-tot span{color:var(--ink3);font-size:10px;text-transform:uppercase;
  letter-spacing:.05em}
.mg-tot b{color:var(--ink);font-weight:700;font-size:14px}

/* ---- Fußnoten ----
   Der ehrliche Teil, und deshalb NICHT kleiner als die Legende: der Satz
   "nur die ersten acht Minuten" entscheidet, ob die Karte richtig gelesen
   wird. Die Warnstufe hat zusätzlich einen Randstreifen UND eine andere
   Schriftfarbe — wer Farben nicht unterscheidet, darf sie nicht übersehen. */
.mg-notes{list-style:none;margin:14px 0 0;padding:0;display:flex;
  flex-direction:column;gap:6px;font-size:11.5px;line-height:1.5}
.mg-notes li{padding-left:10px;border-left:2px solid var(--grid);color:var(--ink3)}
.mg-notes li.mg-n-ok{border-left-color:var(--win)}
.mg-notes li.mg-n-warn{border-left-color:var(--amber);color:var(--ink2)}
.mg-notes li.mg-n-bad{border-left-color:var(--loss);color:var(--ink);font-weight:600}

/* ---- Umschalter über der Karte ---- */
.mgbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  justify-content:center;margin-bottom:14px}

/* Zwei Karten nebeneinander (eigene gegen Master+) — erst ab genug Breite.
   Darunter untereinander: zwei 280-px-Karten sind zwei unlesbare Karten. */
.mgpair{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:1180px){ .mgpair{grid-template-columns:1fr 1fr} }
.mgpair>section{min-width:0}
.mgpair h4{margin:0 0 10px;font-size:12px;font-weight:800;color:var(--ink2);
  text-transform:uppercase;letter-spacing:.06em;text-align:center}

/* --- Punkte der Einzelspiel-Karte (js/wiring/match-map.js) -------------- */
/* Farben auf Ansage des Betreibers (01.08.2026): BLAU wo du getoetet hast,
   ROT wo du gestorben bist - also die Win/Loss-Farben des Hauses, dieselbe
   Bedeutung wie das W/L-Kuerzel in der Match-History. Der Rest der Lobby
   bleibt neutral und klein. Die Variablen kommen aus dem jeweiligen Skin,
   die Karte faerbt sich also in neo/bento/graphit jeweils richtig. */
.mm-dot{stroke:rgba(0,0,0,.55);stroke-width:1.5;opacity:.92}
/* Die eigenen Punkte sind die Aussage der Karte: satte Win/Loss-Farbe plus
   heller Rand, damit sie auch auf dunklem Kartengrund sofort ins Auge
   fallen. Die uebrigen Lobby-Kills sind Kontext und bleiben leise. */
.mm-death{fill:var(--loss);stroke:rgba(255,255,255,.85);stroke-width:2.5}
.mm-kill{fill:var(--win);stroke:rgba(255,255,255,.85);stroke-width:2.5}
.mm-other{fill:var(--hm-neut);opacity:.45}
/* Hover: der Punkt unterm Zeiger hebt sich ab, damit man sieht, WELCHEN
   der oft dicht liegenden Punkte der Tooltip gerade meint. */
.mm-dot:hover{stroke:#fff;stroke-width:4;opacity:1}
/* Duell-Tooltip: Icon gegen Icon, KILL/TOD-Etikett in der Punktfarbe. */
.mmtip{display:inline-block;text-align:center;line-height:1.5}
.mmtipl{letter-spacing:.5px}
.mmtipl.kill{color:var(--win)}
.mmtipl.death{color:var(--loss)}
.mmtipic{width:30px;height:30px;border-radius:6px;vertical-align:middle}
.mmtipvs{font-style:normal;opacity:.7;margin:0 8px;vertical-align:middle}
.mmtipn{font-size:11px;opacity:.8}
.mm-head{margin:0 0 8px}
.mm-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--ink2,inherit)}
.mm-lg{display:inline-flex;align-items:center;gap:6px}
.mm-dotlg{width:10px;height:10px;border-radius:50%;display:inline-block}
.mm-dotlg.mm-death{background:var(--loss)}
.mm-dotlg.mm-kill{background:var(--win)}
.mm-dotlg.mm-other{background:var(--hm-neut);opacity:.55}
.mm-well .mgmap{max-width:420px;display:block}