/* McDev.TV — /maps/ Fortnite-Maps-Index (v140.60)
   Bausteine folgen theme.css. Grün = Zuwachs/Funktion, Violett = Fläche.
   Die Tabelle ist ein Grid, damit sie auf dem Handy nicht zerreißt. */

.mp-krumen{margin-bottom:14px}
.mp-krumen a{color:var(--text-dim)}
.mp-krumen span{color:var(--text)}
.mp-tiles{max-width:640px}
.mp-tiles .v.mp-gruen{color:var(--gruen)}
.mp-tiles .v.mp-violett{color:var(--violett);font-size:17px;padding-top:4px}
.mp-chips{margin:4px 0 14px}
.mp-chips .mc-chip small{opacity:.7;margin-left:4px}
.mp-panel{padding:16px 18px}
.mp-hint{margin:2px 0 12px}

.mp-tabelle{display:flex;flex-direction:column}
.mp-kopf,.mp-zeile{display:grid;grid-template-columns:34px minmax(0,1fr) 84px 72px 64px 104px;gap:10px;align-items:center}
.mp-kopf{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);padding:4px 0 8px;border-bottom:1px solid var(--line2)}
.mp-zeile{padding:9px 0;border-bottom:1px solid var(--line2)}
.mp-zeile:last-child{border-bottom:0}
.mp-zeile.top .mp-rang{color:var(--gruen)}
.mp-rang{font-family:var(--font-mono);font-weight:700;color:var(--text-dim)}
.mp-map{display:flex;align-items:center;gap:10px;min-width:0}
.mp-map img{width:56px;height:32px;object-fit:cover;border-radius:6px;background:var(--bg-hoch);flex-shrink:0}
.mp-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.mp-titel{font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.mp-titel:hover{color:var(--gruen)}
.mp-meta{font-size:11.5px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-meta code{font-family:var(--font-mono);font-size:11px}
.r{text-align:right;font-variant-numeric:tabular-nums}
.mp-peak{font-weight:700;color:var(--text)}
.mp-trend.auf{color:var(--gruen)}
.mp-trend.ab{color:var(--warnung)}

.mp-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.mp-karte{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--line2);border-radius:12px;background:var(--bg-card2);text-decoration:none;color:var(--text)}
a.mp-karte:hover{border-color:var(--gruen)}
.mp-karte img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--bg-hoch)}
.mp-karte .n{font-weight:700;font-size:13.5px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mp-karte .c{font-family:var(--font-mono);font-size:12.5px;color:var(--violett);font-weight:700}
.mp-karte .c.auf{color:var(--gruen)}

@media (max-width:720px){
  .mp-kopf{display:none}
  .mp-zeile{grid-template-columns:28px minmax(0,1fr) 72px;grid-template-areas:"rang map peak" "rang rest rest"}
  .mp-rang{grid-area:rang}.mp-map{grid-area:map}.mp-peak{grid-area:peak}
  .mp-zeile > .r[data-l]{grid-area:rest;text-align:left;font-size:12px;color:var(--text-dim);display:inline;margin-right:10px}
  .mp-zeile > .r[data-l]::before{content:attr(data-l) ": ";color:var(--text-faint)}
}