.mvg-suite { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.mvg-suite-heading {
  color: #e2e8f0; font-size: 1.15rem; font-weight: 600;
  margin: 0 0 14px; letter-spacing: 0.02em;
}
.mvg-suite-count {
  display: inline-block; min-width: 26px; margin-left: 6px; padding: 1px 8px;
  background: #334155; color: #94a3b8; border-radius: 99px;
  font-size: 0.72rem; font-weight: 700; text-align: center; vertical-align: middle;
}

/* Filter: Suche + Kategorie-Chips */
.mvg-suite-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.mvg-suite-search {
  flex: 1 1 200px; max-width: 300px;
  background: #0f172a; border: 1px solid #334155; border-radius: 9px;
  color: #e2e8f0; padding: 8px 12px; font-size: 0.85rem;
}
.mvg-suite-search::placeholder { color: #64748b; }
.mvg-suite-search:focus { outline: none; border-color: #4ade80; }
.mvg-suite-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.mvg-cat-chip {
  background: #1e293b; color: #94a3b8; border: 1px solid #334155;
  border-radius: 99px; padding: 5px 12px; font-size: 0.74rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mvg-cat-chip:hover { border-color: #4ade80; color: #e2e8f0; }
.mvg-cat-chip.is-active { background: #4ade80; border-color: #4ade80; color: #0b1220; }
.mvg-cat-count { opacity: 0.65; margin-left: 2px; }

.mvg-suite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  padding-bottom: 8px;
}
.mvg-card {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  padding: 18px 10px 16px; min-height: 118px;
  background: linear-gradient(150deg, #0f172a, #1e293b);
  border: 1px solid #334155; border-radius: 14px;
  color: #e2e8f0; cursor: pointer; text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.mvg-card:hover {
  transform: translateY(-3px);
  border-color: #4ade80;
  box-shadow: 0 10px 24px -12px #4ade8066;
}
.mvg-card:focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; }
.mvg-card-icon { font-size: 2.1rem; line-height: 1; }
.mvg-card-thumb {
  width: 100%; max-width: 96px; height: auto; border-radius: 8px;
  display: block; object-fit: cover;
}
.mvg-card-name { font-size: 0.86rem; font-weight: 600; line-height: 1.25; }
.mvg-card-badge {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 99px; text-transform: uppercase;
  background: #334155; color: #94a3b8;
}
.mvg-card-php .mvg-card-badge { background: #7c2d12; color: #fdba74; }
.mvg-card-js  .mvg-card-badge { background: #1e3a8a; color: #93c5fd; }

.mvg-suite-bar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.mvg-back {
  background: #1e293b; color: #e2e8f0;
  border: 1px solid #334155; border-radius: 9px;
  padding: 7px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mvg-back:hover { background: #334155; border-color: #4ade80; }
.mvg-suite-now { color: #94a3b8; font-size: 0.85rem; font-weight: 600; }

.mvg-game-list { margin-top: 8px; }
.mvg-game-list-stage { margin-top: 16px; }
.mvg-game-list-empty { color: #94a3b8; font-size: 0.9rem; }
/* Stage-Spiele: Bühne füllt den restlichen Viewport (Spiel bringt eigenes
   Layout mit). Wichtig: KEINE Auto-Height-Schleife - die Stage hat eine
   feste Höhe, das Spiel skaliert/letterboxt selbst hinein. */
.mvg-suite-stage {
  min-height: calc(100dvh - 200px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mvg-suite-view {
  flex: 1 1 auto;
  height: auto;
  min-height: 420px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px;
  background: #0b1220;
  border: 1px solid #1e293b;
}
.mvg-suite-view iframe {
  display: block; width: 100%; height: 100%; border: 0; vertical-align: bottom;
}
@media (max-width: 720px) {
  .mvg-suite-stage { min-height: calc(100dvh - 140px); }
  .mvg-suite-view { min-height: 420px; border-radius: 16px; }
}
.mvg-suite-loading {
  padding: 60px 20px; text-align: center; color: #64748b; font-size: 0.9rem;
}
.mvg-suite-error {
  padding: 30px 20px; text-align: center; color: #f87171; font-size: 0.9rem;
}
/* Engine-Renderer: Frame + Fehler */
.mvg-game-frame iframe { display: block; width: 100%; border: 0; }
.mvg-game-error {
  padding: 20px; border-radius: 10px; text-align: center;
  background: #450a0a; color: #fca5a5; font-size: 0.88rem;
  border: 1px solid #7f1d1d;
}

/* ==========================================================================
   Spiel-Seiten: Theme-Animationen ab, Fokus behalten, Groessen-Standard
   ========================================================================== */
/* Das Theme skaliertArtikel/Seilen beim Laden (scale3d(.3,.3,.3)) - dadurch
   "faehrt" das Spiel beim Oeffnen heran. Fuer Spiel-Inhalte abschalten. */
:is(article, .page, .single, .site-main, #content, #primary, .entry-content,
    .container, .contentsecwrap, .row, [class*="col-"], .postsec-list, .contentsecwrap,
    .page-content, .entry-summary, .wp-block-group):has(
  :is(canvas, iframe, .mvg-game, .mvg-root, .mvg-game-frame, .mvg-game-frame-iframe)
) {
  animation: none !important;
  transform: none !important;
  visibility: visible !important;
}
/* Zusaetzlich jedes Spielelement selbst und seine Kinder: hier kann wow.js
   nichts mehr anrichten, egal wo der Shortcode steht. */
.mvg-game-frame, .mvg-game-frame *, .mvg-game, .mvg-game *, .mvg-root, .mvg-root * {
  animation: none !important;
}
:is(article, .page, .single, .site-main, #content, #primary, .entry-content):has(
  :is(canvas, iframe, .mvg-game, .mvg-root, .mvg-game-frame)
) * {
  animation-delay: 0s !important;
}
.mvg-game-frame, .mvg-game, .mvg-root, .mvg-game-board {
  animation: none !important;
  transform: none !important;
  visibility: visible !important;
}
/* Groessen-Standard: Frame passt sich dem Spiel an (Auto-Height via
   mvg-frame-utils.js - das Spiel meldet seine Inhaltshoehe). Kein 16:9-Zwang:
   der schnitt Spiele ab (Scrollbalken statt kompletter Ansicht).
   Doppel-Selektor .mvg-game-frame zusammengefuehrt: box-sizing aus der
   Engine-Regel oben hierher (spatere Regel gewinnt). */
.mvg-game-frame {
  height: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  overflow: visible;
  border-radius: 24px;
}
/* Doppel-Selektor .mvg-game-frame-iframe zusammengefuehrt: Animations-Reset
   aus dem Stage-Block + Groesse/Zeile in einer Regel (hoehe bleibt 620px). */
.mvg-game-frame-iframe {
  width: 100%; height: 620px; border: 0; display: block;
  transform: none !important; animation: none !important;
}
@media (max-width: 720px) {
  .mvg-game-frame { border-radius: 16px; }
}
@media (max-width: 450px) {
  .mvg-game-frame { border-radius: 12px; }
}
/* Inline-Spiele werden zentriert und in der Hoehe begrenzt. */
.mvg-game { width: 100%; }
:where(.mvg-game-frame) { display: flex; justify-content: center; }
@media (max-width: 720px) {
  .mvg-game { max-height: calc(100dvh - 90px); }
  .mvg-game[style*="--mvg-aspect"] { width: auto; max-width: 100%; }
}
/* ================================================================
   ASPECT-FRAME v1 (Debug-Fix Responsivitaet)
   - Der Spiele-Wrapper bestimmt die Hoehe ueber die BREITE (aspect-ratio)
     statt ueber feste Pixel oder Auto-Height -> kein Scroll-Regler,
     keine Container-in-Container-Ueberlaeufe.
   - PC/quer: 16:9. Handy/hoch: 9:16 (Media-Query auf Aspekt, nicht
     auf Geraeteklassen).
   - iframe/Markup fuellt den Rahmen zu 100%.
   ================================================================ */
.mvg-game-frame,
.mvg-game-frame-iframe {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - var(--mvg-chrome, 160px));
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.mvg-game-frame iframe,
.mvg-game-frame-iframe iframe,
.mvg-game-frame iframe[style], .mvg-game-frame-iframe iframe[style] {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  position: absolute;
  inset: 0;
}
/* Buehne (snap) erbt dasselbe Verhalten — ohne scrolling=no-Konflikte */
.mvg-game-snap { aspect-ratio: 16 / 9; height: auto !important; }
.mvg-game-snap iframe { height: 100% !important; }

/* Handy/hoch: 9:16 */
@media (max-aspect-ratio: 3 / 4) {
  .mvg-game-frame,
  .mvg-game-frame-iframe,
  .mvg-game-snap { aspect-ratio: 9 / 16; }
}

/* Notfall: sehr flache Viewports (Landscape-Handys) — 16:9 behalten, aber
   nie ueber den Viewport hinaus */
@media (max-height: 480px) and (min-aspect-ratio: 4 / 3) {
  .mvg-game-frame,
  .mvg-game-frame-iframe { max-height: calc(100dvh - 24px); }
}

/* Theme-Container duerfen nicht zusaetzlich polstern (Container-in-Container) */
:is(article, .page, .single, .site-main, #content, #primary, .entry-content, .panel-grid-cell, .so-panel):has(.mvg-game-frame) {
  padding-inline: 0 !important;
  max-width: 100% !important;
}
/* ================================================================
   MODAL VOLLANSICHT v1 — Spiel im eigenen fixen Rahmen.
   - Deckt den Viewport ab (fixed, safe-area), Seite dahinter scrollt nicht.
   - Aspect-Container zentriert: 16:9 quer, 9:16 hoch.
   - Close-Button oben rechts (gut treffbar), ESC + Backdrop-Klick.
   - Pointer-Events/Touch isoliert: nichts greift auf die Seite durch.
   ================================================================ */
body.mvg-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}
.mvg-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(env(safe-area-inset-top), 10px) max(env(safe-area-inset-right), 10px) max(env(safe-area-inset-bottom), 10px) max(env(safe-area-inset-left), 10px);
  background: rgba(4, 8, 18, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overscroll-behavior: none;
  touch-action: none;
}
.mvg-modal-backdrop.is-open { display: flex; }
.mvg-modal-shell {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: calc((100dvh - 40px) * 16 / 9);
  max-height: calc(100dvh - 40px);
  aspect-ratio: 16 / 9;
  margin: auto;
  display: flex;
  container-type: size;
}
@media (max-aspect-ratio: 3 / 4) {
  .mvg-modal-shell {
    aspect-ratio: 9 / 16;
    max-width: calc((100dvh - 40px) * 9 / 16);
    max-height: calc(100dvh - 40px);
  }
}
.mvg-modal-frame {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #060a14;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.mvg-modal-frame iframe,
.mvg-modal-frame > * {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  position: absolute;
  inset: 0;
}
.mvg-modal-close {
  position: absolute;
  top: -46px;
  right: 0;
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(8, 14, 28, 0.9);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
@media (max-aspect-ratio: 3 / 4) {
  .mvg-modal-close { top: -44px; width: 42px; height: 42px; }
}
.mvg-modal-close:hover { background: rgba(30, 41, 59, 0.95); transform: scale(1.05); }

/* Launcher-Karte (Platzhalter auf der Seite vor dem Oeffnen) */
.mvg-launcher {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--mvg-line, rgba(255, 255, 255, 0.14));
  border-radius: 18px;
  background: var(--mvg-glass, rgba(8, 16, 30, 0.72));
  padding: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}
.mvg-launcher-top { display: flex; gap: 12px; align-items: center; }
.mvg-launcher-icon { font-size: 30px; line-height: 1; }
.mvg-launcher-name { font-weight: 800; font-size: 1rem; }
.mvg-launcher-desc { font-size: 0.78rem; color: var(--mvg-muted, #94a3b8); margin-top: 2px; }
.mvg-launcher-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--mvg-accent, #38bdf8), var(--mvg-accent2, #818cf8));
  color: #04121f;
  font: 800 0.88rem/1 var(--mvg-font, system-ui);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(2, 8, 20, 0.35);
}
.mvg-launcher-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.mvg-launcher-btn::before { content: "▶"; font-size: 0.8em; }