/* Bikeball — Minigames-Seite (/minigames und die Sprachfassungen).
   Kacheln je Spiel mit Bild, Text, Spielen-Knopf und der Top 3 der
   Bestenliste; die Liste selbst nutzt .ladder* aus styles.css.
   Klassen beginnen mit mg-. */

.mg-kacheln {
  margin-top: 2.75rem;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 900px) {
  .mg-kacheln { grid-template-columns: minmax(0, 1fr); }
}

.mg-kachel {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  overflow: hidden;
  scroll-margin-top: 80px;
}

.mg-bild { display: block; aspect-ratio: 1200 / 630; background: #000; overflow: hidden; }
.mg-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mg-bild:hover img { transform: scale(1.03); }

.mg-text { padding: 1.3rem 1.4rem 1.4rem; display: grid; gap: .8rem; }
.mg-text h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 850; letter-spacing: -.03em; line-height: 1.1;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.mg-text h2 a { text-decoration: none; }
.mg-text h2 a:hover { color: var(--accent-2); }
.mg-neu {
  font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 999px;
  color: var(--bg); background: var(--accent-2);
}
.mg-text p { color: var(--muted); }
.mg-text .cta-note { margin-top: 0; }
.mg-text .play-btn { justify-self: start; }

.mg-kachel .ladder { margin: 0 1.4rem 1.4rem; }
/* Hinweise (lädt, leer, nicht erreichbar) über die ganze Breite, nicht in der Rang-Spalte */
.mg-kachel .ladder-list li.ladder-note { display: block; }
/* aufgeklappt: alle Einträge, aber die Kachel bleibt handlich */
.mg-kachel .ladder-list.mg-offen { max-height: 24rem; overflow: auto; overscroll-behavior: contain; }

.mg-schluss { margin-top: 2.5rem; max-width: 62ch; color: var(--muted); }
.mg-schluss a { color: var(--accent-2); text-underline-offset: 3px; }