/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   RELEASE-SYSTEM DER SPIELMODI (24.09.2026, lib/modi.js) — Marken „NEU", „Bald", „Gerade deaktiviert", „versteckt"
   (nur Admins), Banner in der Arcade, Neuigkeiten-Seiten und die Verwaltung /moderation/modes. Eigene Klassen mit
   modus-/md- davor (Memory winku-wiederkehrende-ui-fehler 16: keine Namen, die winku.css schon vergibt).
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Marken ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.modus-marke {
  display: inline-block; flex: none; margin-inline-start: 6px; padding: 2px 6px 3px; box-sizing: border-box;
  font: 400 16px/16px var(--mc-schrift); letter-spacing: 0; white-space: nowrap;
  background: #3a3a3a; color: #e0e0e0; text-shadow: 1px 1px 0 #000; box-shadow: 0 0 0 2px #000, inset 2px 2px 0 #5a5a5a, inset -2px -2px 0 #222;
}
/* NEU: Gold wie ein Erfolg, mit einem Glanz, der einmal über die Marke läuft — auffällig, aber in der Pixelwelt */
.modus-marke.modus-neu {
  position: relative; overflow: hidden; background: #ffc928; color: #3a2400; text-shadow: none;
  box-shadow: 0 0 0 2px #000, inset 2px 2px 0 #fff2a8, inset -2px -2px 0 #b07a00;
}
.modus-marke.modus-neu::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -40%; inline-size: 30%;
  background: rgb(255 255 255 / .55); transform: skewX(-20deg); animation: modus-glanz 3.2s steps(12) infinite;
}
@keyframes modus-glanz { 0%, 60% { inset-inline-start: -40%; } 100% { inset-inline-start: 120%; } }
@media (prefers-reduced-motion: reduce) { .modus-marke.modus-neu::after { animation: none; display: none; } }
.modus-marke.modus-angekuendigt { background: #2d4f86; color: #dbe9ff; box-shadow: 0 0 0 2px #000, inset 2px 2px 0 #5d86c8, inset -2px -2px 0 #172a4a; }
.modus-marke.modus-deaktiviert { background: #5b2323; color: #ffd4d4; box-shadow: 0 0 0 2px #000, inset 2px 2px 0 #8a4040, inset -2px -2px 0 #2e1010; white-space: normal; }
.modus-marke.modus-versteckt { background: #ffd84a; color: #2a1d00; text-shadow: none; box-shadow: 0 0 0 2px #000; }
/* 27.09.2026 PLUS-BETA (lib/modi.js plusbeta, web/seiten/vorab.js): Türkis wie Plus (lib/plus.js ZEICHEN_FARBE 2), deckend */
.modus-marke.modus-plusbeta { background: #13504d; color: #c9fbf6; box-shadow: 0 0 0 2px #000, inset 2px 2px 0 #3fd0c8, inset -2px -2px 0 #07302e; }
.spiel-tafel.modus-ist-plus { outline: 3px solid #3fd0c8; outline-offset: -3px; }
.modus-banner.modus-banner-plus { background: #13504d; box-shadow: 0 0 0 3px #000, inset 3px 3px 0 #3fd0c8, inset -3px -3px 0 #07302e; }
/* Hinweis „nur mit Plus" (Übersicht) — seit 30.09.2026 der gemeinsame Plus-Hinweis (smp.css .plus-hinweis); hier nur der Abstand */
.plus-hinweis.vorab-sperre { margin-block-start: 10px; }
.plus-hinweis.md-plus { margin-block-start: 6px; }   /* Neuigkeit „Auf einen Blick" → Früher Zugang: die kleine Pille unter dem Satz */
.spiel-karte .mc-knopf.gold { margin-block-start: 6px; align-self: center; }

/* Karte der Übersicht: neu leuchtet am Rand, aus ist ausgegraut */
.spiel-tafel.modus-ist-neu { outline: 3px solid #ffc928; outline-offset: -3px; }
.spiel-tafel.modus-ist-aus .mc-item { filter: grayscale(1); opacity: .6; }
.spiel-tafel.modus-ist-aus .regeln-liste { opacity: .75; }
/* Am Telefon rutschen die Marken unter den Titel, statt die Karte zu sprengen (Muster 18) */
.spiel-tafel-kopf:has(.modus-marke) { flex-wrap: wrap; }
.spiel-tafel-kopf:has(.modus-marke) > div { flex: 1 1 180px; min-inline-size: 0; }
.spiel-tafel-kopf .modus-marke { margin-inline-start: auto; flex: 0 1 auto; max-inline-size: 100%; white-space: normal; }
.spiel-tafel-kopf .modus-marke + .modus-marke { margin-inline-start: 6px; }
.modus-teaser { margin: 0; font-size: 1rem; line-height: 1.45; }

/* Lobby-Karte: die Marke steht in der Karte über der Schlange */
.spiel-karte .modus-marke { margin: 4px 0 0; align-self: center; }
.spiel-karte .modus-marke.modus-deaktiviert { max-inline-size: 100%; }

/* ── Banner in der Arcade (Kopf der Übersicht) ───────────────────────────────────────────────────────────────── */
.modus-banner {
  display: flex; align-items: center; gap: 10px; max-inline-size: 520px; margin: 14px auto 0; padding: 8px 14px; box-sizing: border-box;
  background: #2d4f86; color: #fff; text-decoration: none; text-align: start;
  box-shadow: 0 0 0 3px #000, inset 3px 3px 0 #5d86c8, inset -3px -3px 0 #172a4a;
}
.modus-banner.modus-banner-neu { background: #7a5200; box-shadow: 0 0 0 3px #000, inset 3px 3px 0 #ffc928, inset -3px -3px 0 #3a2400; }
.modus-banner .mc-item { inline-size: 32px; block-size: 32px; flex: none; image-rendering: pixelated; }
.modus-banner span { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.modus-banner b { font: 400 20px/24px var(--mc-schrift); text-shadow: 2px 2px 0 #000; }
.modus-banner small { font-size: .85rem; color: #e8e8e8; }
.modus-banner:hover, .modus-banner:focus-visible { filter: brightness(1.12); }
.modus-banner:focus-visible { outline: 3px solid var(--mc-aqua, #55ffff); outline-offset: 3px; }

/* ── Neuigkeiten (/arcade/news, /arcade/news/<slug>) — Fassung 2, 27.09.2026 ──────────────────────────────────────
   Faddi: „sieht kacke aus … solche Seiten sollen cool aussehen". Himmel mit dem Spiel auf einem Sockel, darunter Blatt +
   „Auf einen Blick", Medien groß, Karten. Fehlermuster: Kopf der Karten oben (27), Flächen über Inhalt ohne Alpha (32),
   nichts breiter als das Telefon (18), verkleinerte Pixelbilder nicht pixelated (19 — hier wird nur vergrößert). */

/* Farbe je Spielart: Kampf rot, im Spiel grün, im Browser lila (Arcade) */
.md-g-kampf { --md: #ff5555; --md-tief: #3a0c0c; }
.md-g-welt { --md: #6dff6d; --md-tief: #0d2e10; }
.md-g-browser { --md: #c98bff; --md-tief: #26103d; }

/* Held: niedriger als ein Titelbildschirm — hier soll man gleich den Text darunter sehen */
.md-held { min-block-size: 0; }
.md-held-zeile { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 8px 12px; }
.md-held-text { display: grid; gap: 14px; justify-items: start; padding: 22px 26px; background: #070b1c; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px rgb(255 255 255 / .06); }
.md-held-text .brotkrumen { margin: 0; justify-content: flex-start; }
.md-held h1 { margin: 0; font: 400 60px/66px var(--mc-schrift); color: #fff; text-shadow: 6px 6px 0 var(--mc-schatten), 0 0 40px rgb(138 63 214 / .35); overflow-wrap: anywhere; }
.md-held h1 .farbe { display: block; color: var(--mc-gelb); text-shadow: 6px 6px 0 #3f3f15; }
.md-held .unter { margin: 0; max-inline-size: 40rem; color: #e6e9f5; font-size: 1.1rem; line-height: 1.6; }
.md-held .knopfreihe .mc-knopf { min-block-size: 48px; }
.md-held-bild { display: grid; place-items: center; min-inline-size: 0; }
/* 03.10.2026 Rendering statt Item (lib/szenen.js): 16:9, füllt die Spalte; die Spalte wird dafür etwas breiter */
.md-held-zeile:has(.md-szene) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.md-held-bild:has(.md-szene) { place-items: stretch; }
.md-szene { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--md-tief); border: 3px solid #000;
  box-shadow: 0 0 0 2px rgb(255 255 255 / .08), 0 18px 34px -14px #000; }
.md-szene-bild { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Marken-Reihe: NEU / Bald / wo gespielt wird */
.md-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-inline-size: 0; }
.md-marken .modus-marke { margin: 0; }
.md-gruppe-marke { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 3px 4px; background: #11151f; color: #eef0f6;
  font: 400 16px/16px var(--mc-schrift); text-shadow: 1px 1px 0 #000; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px rgb(255 255 255 / .08); }
.md-gruppe-marke .mc-item { inline-size: 16px; block-size: 16px; image-rendering: pixelated; }

/* Datum: hell, groß genug, mit Uhr — kein grauer Kleintext mehr */
.md-datum { display: flex; align-items: center; gap: 8px; margin: 0; color: #f1f3fa; font-size: 1rem; line-height: 1.4; }
.md-datum .mc-item { inline-size: 16px; block-size: 16px; flex: none; image-rendering: pixelated; }
.md-datum time { color: var(--mc-gelb); font-weight: 600; }

/* Der Sockel: Strahlen, das Item riesig (16 px × 8), darunter ein Block in der Farbe der Spielart */
.md-sockel { position: relative; display: grid; justify-items: center; align-content: end; inline-size: 300px; max-inline-size: 100%; block-size: 300px; }
.md-strahlen { position: absolute; inset: 0 0 60px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--md) 55%, transparent), transparent 75%),
              repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--md) 22%, transparent) 0 10deg, transparent 10deg 30deg);
  mask: radial-gradient(closest-side, #000 55%, transparent); }
.md-riesig { position: relative; inline-size: 128px; block-size: 128px; image-rendering: pixelated; margin-block-end: 18px;
  filter: drop-shadow(0 14px 0 rgb(0 0 0 / .35)) drop-shadow(0 0 24px color-mix(in srgb, var(--md) 60%, transparent)); }
img.md-riesig.pixelig { image-rendering: auto; }
.md-block { position: relative; inline-size: 160px; block-size: 56px; background: var(--md-tief); border: 3px solid #000;
  box-shadow: inset 4px 4px 0 color-mix(in srgb, var(--md) 55%, #fff), inset -4px -4px 0 rgb(0 0 0 / .45), 0 18px 30px -10px #000; }
.md-block::after { content: ""; position: absolute; inset: 10px 14px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--md) 35%, transparent) 0 8px, transparent 8px 16px); }
@media (prefers-reduced-motion: no-preference) {
  .md-riesig { animation: md-schweben 3.4s ease-in-out infinite alternate; }
  .md-strahlen { animation: md-drehen 40s linear infinite; }
}
@keyframes md-schweben { from { translate: 0 -6px; } to { translate: 0 6px; } }
@keyframes md-drehen { to { rotate: 360deg; } }

/* Text und „Auf einen Blick" */
.md-text-zeile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }   /* nebeneinander gleich hoch (Muster 22) */
.md-blatt { display: grid; gap: 14px; align-content: start; padding: 26px 30px; background: #0b0f19; border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08), 0 16px 34px -14px #000; }
.md-blatt h2 { margin: 0; font: 400 30px/36px var(--mc-schrift); color: #fff; text-shadow: 3px 3px 0 var(--mc-schatten); overflow-wrap: anywhere; }
.md-blatt h3 { margin: 10px 0 0; font: 400 20px/24px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }
.md-text { margin: 0; max-inline-size: 65ch; color: #eceef5; font-size: 1.12rem; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.md-regeln { font-size: 1rem; }
.md-fakten { padding: 18px 20px; background: #10131d; border: 2px solid #000; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08); }
.md-fakten-titel { margin: 0 0 12px; font: 400 20px/24px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }
.md-fakten dl { display: grid; gap: 14px; margin: 0; }
.md-fakten dl > div { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.md-fakten dl img { grid-row: span 2; inline-size: 32px; block-size: 32px; image-rendering: pixelated; }
.md-fakten dt { font: 400 16px/20px var(--mc-schrift); color: #b9bfd0; text-shadow: 1px 1px 0 #000; }
.md-fakten dd { margin: 0; color: #f1f3fa; line-height: 1.5; }
.md-fakten dd a { color: var(--mc-aqua, #55ffff); }

/* Medien: das erste über die ganze Breite, weitere zu zweit */
.md-medien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.md-medium { margin: 0; min-inline-size: 0; background: #05070d; border: 3px solid #000; box-shadow: 0 0 0 2px rgb(255 255 255 / .08), 0 18px 34px -14px #000; }
.md-medium:first-child { grid-column: 1 / -1; }
.md-medium img, .md-medium video { display: block; inline-size: 100%; block-size: auto; max-block-size: 72vh; object-fit: contain; background: #05070d; }

/* Karten (Übersicht und „Mehr aus der Arcade") — die ganze Karte ist der Link (Titel mit ::after) */
.md-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.md-liste > li { display: grid; min-inline-size: 0; }
.md-liste-gross { grid-column: 1 / -1; }
.md-karte { position: relative; display: grid; grid-template-rows: auto 1fr; min-inline-size: 0; background: #0b0f19; border: 2px solid #000;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08), 0 16px 30px -14px #000; transition: translate .15s, box-shadow .15s; }
.md-karte:is(:hover, :focus-within) { translate: 0 -3px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mc-gelb) 55%, transparent), 0 22px 36px -14px #000; }
.md-karte.md-ist-neu { box-shadow: inset 0 0 0 3px #ffc928, 0 16px 30px -14px #000; }
.md-buehne { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 7; overflow: hidden; border-block-end: 2px solid #000;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--md) 45%, transparent), transparent), var(--md-tief); }
.md-buehne::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--md) 14%, transparent) 0 10deg, transparent 10deg 30deg); }
.md-buehne-bild { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.md-buehne-item { position: relative; inline-size: 64px; block-size: 64px; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgb(0 0 0 / .35)); }
.md-buehne-bild + .md-buehne-item { position: absolute; inset: auto auto 10px 10px; inline-size: 48px; block-size: 48px; padding: 6px; background: #0b0f19; box-shadow: 0 0 0 2px #000; filter: none; }
/* 03.10.2026 Rendering statt Item (lib/szenen.js): 16:9, Bild füllt die Bühne, keine Strahlen; sanfter Zoom beim Überfahren */
.md-buehne-szene { aspect-ratio: 16 / 9; background: var(--md-tief); }
.md-buehne-szene::before { display: none; }
.md-buehne-szene .md-szene-bild { transition: scale .35s ease; }
@media (prefers-reduced-motion: no-preference) { .md-karte:is(:hover, :focus-within) .md-buehne-szene .md-szene-bild { scale: 1.05; } }
.md-karte-text { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 10px; align-content: start; padding: 16px 18px 18px; min-inline-size: 0; }
.md-karte h2, .md-karte h3 { margin: 0; font: 400 24px/28px var(--mc-schrift); text-shadow: 2px 2px 0 #000; overflow-wrap: anywhere; }
.md-karte h2 a, .md-karte h3 a { color: #fff; text-decoration: none; }
.md-karte h2 a::after, .md-karte h3 a::after { content: ""; position: absolute; inset: 0; }
.md-karte h2 a:focus-visible { outline: none; }
.md-karte:has(a:focus-visible) { outline: 3px solid var(--mc-aqua, #55ffff); outline-offset: 3px; }
.md-auszug { margin: 0; color: #dfe2ec; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.md-weiter { align-self: end; font: 400 20px/24px var(--mc-schrift); color: var(--mc-gelb); text-shadow: 2px 2px 0 #3f3f15; }

/* Die neueste Meldung groß: Bühne links, Text rechts */
.md-karte-gross { grid-template-rows: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.md-karte-gross .md-buehne { aspect-ratio: auto; min-block-size: 280px; border-block-end: 0; border-inline-end: 2px solid #000; }
.md-karte-gross .md-buehne-item { inline-size: 128px; block-size: 128px; }
.md-karte-gross .md-buehne-szene { aspect-ratio: auto; }   /* Höhe gibt der Text rechts vor, das Bild deckt zu */
.md-karte-gross .md-karte-text { padding: 24px 26px; }
.md-karte-gross h2 { font-size: 36px; line-height: 42px; }
.md-karte-gross .md-auszug { -webkit-line-clamp: 6; line-clamp: 6; font-size: 1.05rem; }

.md-mitte { justify-content: center; margin-block-start: 22px; }
.md-leer { display: flex; align-items: flex-start; gap: 16px; background: #0b0f19; }
.md-leer h2 { margin: 0 0 8px; }

@media (max-width: 900px) {
  .md-held-zeile, .md-text-zeile { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .md-held-bild { order: -1; }
  .md-sockel { inline-size: 220px; block-size: 200px; }
  .md-riesig { inline-size: 96px; block-size: 96px; margin-block-end: 12px; }
  .md-block { inline-size: 120px; block-size: 40px; }
  .md-held h1 { font-size: 40px; line-height: 48px; text-shadow: 4px 4px 0 var(--mc-schatten); }
  .md-held h1 .farbe { text-shadow: 4px 4px 0 #3f3f15; }
  .md-karte-gross { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .md-karte-gross .md-buehne { min-block-size: 0; aspect-ratio: 16 / 7; border-inline-end: 0; border-block-end: 2px solid #000; }
  .md-karte-gross .md-buehne-szene { aspect-ratio: 16 / 9; }
  .md-held-zeile:has(.md-szene) { grid-template-columns: minmax(0, 1fr); }
  .md-karte-gross .md-buehne-item { inline-size: 96px; block-size: 96px; }
  .md-karte-gross h2 { font-size: 28px; line-height: 34px; }
}
@media (max-width: 560px) {
  .md-held-text { padding: 16px; }
  .md-held h1 { font-size: 30px; line-height: 36px; }
  .md-blatt { padding: 18px 16px; }
  .md-blatt h2 { font-size: 24px; line-height: 30px; }
  .md-text { font-size: 1.04rem; }
  .md-medien { grid-template-columns: minmax(0, 1fr); }
  .md-held .knopfreihe { display: grid; grid-template-columns: minmax(0, 1fr); justify-self: stretch; }
}

/* ── Verwaltung (/moderation/modes) ──────────────────────────────────────────────────────────────────────────── */
.md-modi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.md-modus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.md-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.md-kopfzeile h2 { margin: 0; font-size: 1.15rem; }
.md-kopfzeile .mc-item { inline-size: 32px; block-size: 32px; }
.md-gruppe { color: #bdbdbd; font-size: .85rem; }
.md-zustaende { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.md-zustaende label { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.md-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.md-felder label { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.md-felder textarea { min-block-size: 90px; resize: vertical; }
.md-haken { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.md-haken label { display: inline-flex; align-items: center; gap: 6px; }
.md-medienliste { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.md-medienliste li { display: flex; flex-direction: column; gap: 6px; inline-size: 160px; max-inline-size: 100%; }
.md-medienliste img, .md-medienliste video { inline-size: 160px; max-inline-size: 100%; block-size: 90px; object-fit: cover; background: #111; box-shadow: 0 0 0 2px #000; }
.md-leise { color: #c4c4c4; font-size: .9rem; margin: 0; }
.md-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.md-aktionen form { margin: 0; }
.md-trenner { border: 0; border-block-start: 2px solid #444; margin: 4px 0; }
.md-tabelle { inline-size: 100%; border-collapse: collapse; }
.md-tabelle th, .md-tabelle td { text-align: start; padding: 4px 8px; border-block-end: 1px solid #3a3a3a; vertical-align: top; }