/* =====================================================================
   Migs Arena – Modus-Galerie im Hauptmenü (Coverflow, game/mode-gallery.js)
   Mitte groß mit Live-Vorschau, links/rechts kleinere, abgedunkelte Kacheln (Standbild).
   Größen hängen an der Bühne (container mgs) bzw. der Kachel (container mgc).
   ===================================================================== */

.mode-gallery { width: 100%; min-width: 0; }
.mg {
  --mc: #39d7ff;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mg-head { display: flex; align-items: center; min-width: 0; }
#ui .mg .mg-title { margin: 0 !important; }

/* ---------------- Bühne */
.mg-stage {
  position: relative;
  flex: none;
  height: clamp(380px, 118vw, 470px);
  container: mgs / size;
  perspective: 1600px;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------------- Kacheln: Breite/Abstände je Bühnenbreite */
.mg-card {
  --cw: 84cqw;                                      /* Breite der Mitte */
  --sc: .8;                                         /* Seitenkacheln */
  --step: calc(var(--cw) * .9 + 2cqw);              /* Handy: Seiten nur am Rand angedeutet */
  --sc2: .6;
  --step2: 160cqw;
  --o2: 0;
  position: absolute;
  top: 6px;
  bottom: 12px;
  left: 50%;
  width: var(--cw);
  margin-left: calc(var(--cw) / -2);
  container: mgc / size;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  background: #15122e;
  border: 1px solid color-mix(in srgb, var(--mc) 38%, transparent);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
  transform-origin: 50% 50%;
  z-index: 3;
  will-change: transform;
}
@container mgs (min-width: 620px) {
  /* 47 statt 49cqw: die gedrehte Seitenkarte wirkt durch die Perspektive breiter – sonst ragt sie ~15 px aus der Bühne */
  .mg-card { --cw: min(56cqw, 150cqh); --sc: .78; --step: calc(47cqw - var(--cw) * .39); }
}
@container mgs (min-width: 1380px) {
  /* V26: --step2 geklemmt, damit die Außenkarten (±2) IMMER komplett in der Bühne bleiben
     statt an Bühnen-/Bildschirmkante abgeschnitten zu werden; Schwelle 1380 gegen Zoom-Kippkante. */
  /* 5 Kacheln, alle komplett in der Bühne: Mitte 33 % breit, Seitenkarten (.78) zu ~⅔ sichtbar,
     Außenkarten (.6) mit Außenkante bei 47,5 % → nur ~¼ hinter den Seitenkarten statt ¾ */
  .mg-card { --cw: min(33cqw, 140cqh); --sc: .78; --step: calc(var(--cw) * .6); --sc2: .6;
    --step2: calc(44cqw - var(--cw) * .3); --o2: 1; }
  /* flacher gedreht: die 3D-Drehung vergrößert die Außenkante sonst über den Bühnenrand */
  .mg-card[data-pos="-2"] { transform: translateX(calc(var(--step2) * -1)) scale(var(--sc2)) rotateY(12deg); }
  .mg-card[data-pos="2"] { transform: translateX(var(--step2)) scale(var(--sc2)) rotateY(-12deg); }
  .mg-card[data-pos="-2"] .mg-info { padding-right: 28%; }
  .mg-card[data-pos="2"] .mg-info { padding-left: 28%; }
}

.mg-card[data-pos="0"] {
  cursor: default;
  border-color: color-mix(in srgb, var(--mc) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mc) 40%, transparent), 0 0 46px color-mix(in srgb, var(--mc) 30%, transparent), 0 22px 48px rgba(0, 0, 0, .5);
}
.mg-card[data-pos="-1"] { transform: translateX(calc(var(--step) * -1)) scale(var(--sc)) rotateY(16deg); z-index: 2; }
.mg-card[data-pos="1"] { transform: translateX(var(--step)) scale(var(--sc)) rotateY(-16deg); z-index: 2; }
.mg-card[data-pos="-2"] { transform: translateX(calc(var(--step2) * -1)) scale(var(--sc2)) rotateY(22deg); z-index: 1; opacity: var(--o2); }
.mg-card[data-pos="2"] { transform: translateX(var(--step2)) scale(var(--sc2)) rotateY(-22deg); z-index: 1; opacity: var(--o2); }
.mg-card[data-pos="far"] { transform: scale(.5); opacity: 0; visibility: hidden; pointer-events: none; z-index: 0; }
@container mgs (max-width: 1399px) {
  .mg-card[data-pos="-2"], .mg-card[data-pos="2"] { visibility: hidden; pointer-events: none; }
}
/* weiche Bewegung nur beim Blättern (nicht beim ersten Aufbau) */
.mg.mg-anim .mg-card { transition: transform .75s var(--ease-out, cubic-bezier(.2, .9, .25, 1)), opacity .5s ease, box-shadow .5s ease, border-color .5s ease; }
/* Seitenkacheln: abgedunkelt (billiger Overlay statt filter) */
.mg-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(9, 7, 22, .5);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.mg-card:not([data-pos="0"])::after { opacity: 1; }
.mg-card:not([data-pos="0"]):hover::after { opacity: .3; }

/* ---------------- Vorschau: Live-Canvas (nur Mitte), Standbild, Ersatzgrafik */
.mg-view { position: absolute; inset: 0; overflow: hidden; background: #0d0b1a; }
.mg-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--mc) 42%, transparent), transparent 62%),
    linear-gradient(rgba(79, 227, 255, .07) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(79, 227, 255, .07) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(160deg, #221d4a, #0d0b1a 70%);
}
.mg-art-ico { font-size: clamp(56px, 34cqh, 180px); line-height: 1; translate: 0 -12cqh; filter: drop-shadow(0 0 28px var(--mc)); opacity: .85; }
/* Ersatzgrafik bewegt sich nur in der Mitte und nur, solange (noch) kein Live-Bild da ist */
.mg-card[data-pos="0"] .mg-view:not(:has(.mg-live.on)) .mg-art-ico { animation: mgBob 2.6s ease-in-out infinite; }
@keyframes mgBob { 50% { transform: translateY(-8px) scale(1.04); } }
.mg-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}
.mg-card.has-still .mg-still { opacity: 1; }
.mg-live {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity .35s ease;
}
.mg-live.on { opacity: 1; }
.mg-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 8, 22, .35) 0%, rgba(10, 8, 22, 0) 22%, rgba(10, 8, 22, 0) 36%, rgba(10, 8, 22, .72) 62%, rgba(10, 8, 22, .96) 100%),
    linear-gradient(90deg, rgba(10, 8, 22, .5), rgba(10, 8, 22, 0) 62%);
}
/* unsichtbarer Canvas für Standbilder (muss im Layout sein, damit Renderer die Größe lesen) */
.mg-stillcv { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; z-index: -1; }

/* ---------------- Text & Knöpfe */
.mg-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(4px, 1.5cqh, 10px);
  padding: clamp(12px, 4.5cqh, 30px) clamp(14px, 4.5cqw, 34px) clamp(14px, 5cqh, 32px);
  text-align: left;
}
.mg-new {
  font-size: clamp(10px, 2.6cqh, 13px);
  font-weight: 700;
  letter-spacing: .12em;
  padding: 2px 10px 3px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(90deg, #ff4fd8, #ff7a45);
  box-shadow: 0 0 14px rgba(255, 79, 216, .5);
}
#ui .mg-name {
  display: flex;
  align-items: center;
  gap: .3em;
  margin: 0;
  font-size: clamp(22px, min(6.6cqw, 9.5cqh), 58px);
  line-height: 1.05;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}
.mg-ico { font-size: 1.05em; filter: drop-shadow(0 0 12px var(--mc)); }
.mg-nm { min-width: 0; }
#ui .mg-desc {
  margin: 0;
  max-width: min(100%, 62ch);
  font-size: clamp(13px, min(2.9cqw, 4.6cqh), 21px);
  line-height: 1.3;
  color: rgba(244, 241, 255, .92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.mg-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mg-facts li {
  font-size: clamp(11px, min(2.3cqw, 3.7cqh), 16px);
  padding: 3px 10px 4px;
  border-radius: 999px;
  background: rgba(13, 11, 26, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  white-space: nowrap;
}
.mg-facts li::before { content: "✓ "; color: var(--mc); font-weight: 700; }
.mg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
#ui .mg-play, #ui .mg-online { min-height: clamp(42px, 13cqh, 64px); border-radius: 18px; }
#ui .mg-play { font-size: clamp(17px, min(3.6cqw, 6.2cqh), 27px); padding: 8px clamp(20px, 6cqw, 44px); }
#ui .mg-online { font-size: clamp(14px, min(2.8cqw, 4.8cqh), 20px); padding: 8px clamp(14px, 3.5cqw, 26px); --b1: #7cecff; --b2: #23b6e0; --bd: #0f6f8f; --bt: #04202c; }
/* rechte Seitenkacheln: Name an der sichtbaren (äußeren) Kante */
.mg-card[data-pos="1"] .mg-info, .mg-card[data-pos="2"] .mg-info { align-items: flex-end; text-align: right; }
/* Platz für die Pfeile an den Außenkanten */
.mg-card[data-pos="-1"] .mg-info { padding-left: clamp(14px, 11cqw, 90px); padding-right: 50%; }
.mg-card[data-pos="1"] .mg-info { padding-right: clamp(14px, 11cqw, 90px); padding-left: 50%; }
.mg-card:not([data-pos="0"]) .mg-name { font-size: clamp(18px, min(4.8cqw, 8cqh), 44px); text-wrap: balance; }
.mg-card[data-pos="1"] .mg-name, .mg-card[data-pos="2"] .mg-name { justify-content: flex-end; }
/* Seitenkacheln: nur Symbol + Name */
.mg-card:not([data-pos="0"]) :is(.mg-desc, .mg-facts, .mg-actions, .mg-new) { visibility: hidden; opacity: 0; }
.mg.mg-anim .mg-card :is(.mg-desc, .mg-facts, .mg-actions, .mg-new) { transition: opacity .35s ease .25s, visibility 0s linear .25s; }
/* wenig Höhe: erst Stichpunkte, dann Beschreibung weglassen */
@container mgc (max-height: 300px) { .mg-facts { display: none; } }
@container mgc (max-height: 220px) { #ui .mg-desc, .mg-new { display: none; } }

/* Auto-Weiter-Fortschritt */
.mg-prog { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 3px; background: rgba(255, 255, 255, .07); }
.mg-prog i { display: block; height: 100%; background: var(--mc); box-shadow: 0 0 8px var(--mc); transform-origin: 0 50%; transform: scaleX(0); }
.mg-card:not([data-pos="0"]) .mg-prog, .mg.mg-paused .mg-prog, .mg.mg-reduced .mg-prog { opacity: 0; }

/* ---------------- Smarte Pfeile mit Vorschau */
.mg-arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  width: clamp(40px, 4.2cqw, 60px);
  height: clamp(40px, 4.2cqw, 60px);
  margin-top: calc(clamp(40px, 4.2cqw, 60px) / -2);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(13, 11, 26, .72);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  transition: background .2s, border-color .2s, transform .2s var(--ease-back, ease);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mg-prev { left: 6px; }
.mg-next { right: 6px; }
.mg-arrow:hover, .mg-arrow:focus-visible { background: color-mix(in srgb, var(--mc) 30%, rgba(13, 11, 26, .9)); border-color: var(--mc); transform: scale(1.08); }
.mg-arrow-ico { font-size: clamp(28px, 3cqw, 42px); line-height: 1; translate: 0 -2px; }
.mg-peek {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  white-space: nowrap;
  border-radius: 16px;
  background: rgba(13, 11, 26, .92);
  border: 1px solid color-mix(in srgb, var(--mc) 55%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--mc) 30%, transparent), 0 10px 26px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, translate .2s ease;
}
.mg-next .mg-peek { right: calc(100% + 10px); translate: 8px -50%; }
.mg-prev .mg-peek { left: calc(100% + 10px); translate: -8px -50%; }
.mg-arrow:hover .mg-peek, .mg-arrow:focus-visible .mg-peek { opacity: 1; translate: 0 -50%; }
.mg-peek-ico { font-style: normal; font-size: 28px; line-height: 1; filter: drop-shadow(0 0 8px var(--mc)); }
.mg-peek-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.mg-peek-txt small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #a49fcf); }
.mg-peek-txt b { font-size: 17px; color: #fff; }
/* schmale Bühne (Handy): Pfeile über dem Vorschaubild statt über dem Text */
@container mgs (max-width: 619px) { .mg-arrow { top: 30%; } }
@media (pointer: coarse) {
  .mg-arrow { background: rgba(13, 11, 26, .55); }
  .mg-peek { display: none; }
}

/* ---------------- Punkte */
.mg-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; min-height: 12px; }
.mg-dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  cursor: pointer;
  transition: width .3s ease, background .3s ease, box-shadow .3s ease;
}
.mg-dot::before { content: ""; position: absolute; inset: -8px -4px; }
.mg-dot:hover { background: rgba(255, 255, 255, .45); }
.mg-dot.on { width: 28px; background: var(--mc); box-shadow: 0 0 10px var(--mc); }

/* ---------------- reduzierte Bewegung: keine Übergänge */
.mg.mg-reduced .mg-card, .mg.mg-reduced .mg-card::after, .mg.mg-reduced .mg-dot { transition: none !important; }
.mg.mg-reduced .mg-art-ico { animation: none !important; }

/* ---------------- Dashboard: Galerie füllt ihre Zelle */
.dash-gallery { min-width: 0; min-height: 0; display: flex; }
.dash-gallery > .mode-gallery { flex: 1 1 auto; min-height: 0; }
body.menu-dash .mg { height: 100%; gap: 6px; }
body.menu-dash .mg-stage { flex: 1 1 auto; height: auto; min-height: 220px; }
/* V12.2 Ruhmeshalle: Abzeichen, Erfinder, Clip-Knopf */
.mg-hall { font-size: clamp(10px, 2.6cqh, 13px); font-weight: 700; padding: 2px 10px 3px; border-radius: 999px; color: #2a1400;
  background: linear-gradient(90deg, #ffe066, #ffb81f); box-shadow: 0 0 14px rgba(255, 210, 63, .5); }
.mg-author { margin: 0; font-size: clamp(11px, 2.8cqh, 15px); font-weight: 700; color: #ffd23f; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
#ui .mg-clip { min-height: clamp(42px, 13cqh, 64px); border-radius: 18px; font-size: clamp(13px, min(2.6cqw, 4.4cqh), 18px); padding: 8px clamp(10px, 2.6cqw, 20px);
  --b1: #ffe066; --b2: #ffb81f; --bd: #b56d00; --bt: #2a1400; }
.mg-card:not([data-pos="0"]) :is(.mg-hall, .mg-author) { visibility: hidden; opacity: 0; }
.mg.mg-anim .mg-card :is(.mg-hall, .mg-author) { transition: opacity .35s ease .25s, visibility 0s linear .25s; }

/* Handy (hoch und quer): keine Modus-Galerie im Menü – nur auf Tablet/PC. Versteckt = kein Live-Vorschau-Rendern (IntersectionObserver). */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  #mode-gallery, #dash-gallery { display: none !important; }
}