/**
 * Desktop Stage v3 — Chrome auf Viewport-Ebene, nur Iframes skaliert.
 * Mobile/Tablet: Wrapper transparent.
 */

:root {
  --desktop-ref-w: 1920px;
  --desktop-ref-h: 960px;
  --desktop-scale: 1;
  --desktop-bar-h: 120px;
}

.desktop-viewport {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.desktop-background {
  display: none;
  pointer-events: none;
}

.desktop-stage {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: relative;
  transform: none;
}

/* ── Desktop aktiv ── */
html.desktop-stage-active,
html.desktop-stage-active body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

/* Shell-Chrome: immer echte Viewport-Ebene — nie in der Stage */
html.desktop-stage-active .mv4-shell-chrome,
html.desktop-stage-active #mv4ShellChrome {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  z-index: 2147483646 !important;
}

/* Nur ein Chrome-Stack sichtbar */
html.desktop-stage-active .mv4-shell-chrome ~ .mv4-shell-chrome,
html.desktop-stage-active #mv4ShellChrome ~ #mv4ShellChrome,
html.desktop-stage-active .desktop-stage .mv4-shell-chrome,
html.desktop-stage-active .desktop-stage #mv4ShellChrome {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

html.desktop-stage-active .desktop-viewport {
  position: fixed;
  top: var(--desktop-bar-h, var(--bar-h, 120px));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  isolation: isolate;
  background: #05070d;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.desktop-stage-active .desktop-background {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

html.desktop-stage-active .desktop-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 35%, rgba(55, 75, 130, 0.45), transparent 68%),
    linear-gradient(180deg, #070a14 0%, #05070d 55%, #03040a 100%);
}

html.desktop-stage-active body[data-master-world="general"] .desktop-background::before,
html.desktop-stage-active .desktop-background[data-world="general"]::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 120, 60, 0.22), transparent 55%),
    radial-gradient(ellipse 95% 80% at 50% 35%, rgba(120, 60, 180, 0.55), transparent 62%),
    linear-gradient(165deg, #12081c 0%, #080612 40%, #04030a 100%);
}

html.desktop-stage-active body[data-master-world="nexora"] .desktop-background::before,
html.desktop-stage-active .desktop-background[data-world="nexora"]::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 28%, rgba(40, 110, 180, 0.38), transparent 62%),
    linear-gradient(180deg, #060a14 0%, #050810 50%, #03060e 100%);
}

html.desktop-stage-active body[data-master-world="vertex"] .desktop-background::before,
html.desktop-stage-active .desktop-background[data-world="vertex"]::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255, 255, 255, 0.7), transparent 60%),
    linear-gradient(180deg, #f7f5f1 0%, #f4f2ee 45%, #ebe7e0 100%);
}

html.desktop-stage-active body[data-master-world="freiraum"] .desktop-background::before,
html.desktop-stage-active .desktop-background[data-world="freiraum"]::before {
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(140, 60, 160, 0.42), transparent 65%),
    linear-gradient(165deg, #241330 0%, #1c1026 50%, #140a1c 100%);
}

html.desktop-stage-active .desktop-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: var(--desktop-ref-w);
  height: var(--desktop-ref-h);
  min-height: 0;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--desktop-scale));
  transform-origin: center center;
  will-change: transform;
  background: transparent;
}

/* Iframes füllen die Stage (Header liegt ausserhalb) */
html.desktop-stage-active .desktop-stage .mv4-frame,
html.desktop-stage-active .desktop-stage .mv4-frame.is-active,
html.desktop-stage-active .desktop-stage .mv4-frame:not(.is-active) {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}

/* Weltwechsel: Overlay deckt Stage ab; Fullscreen-Cover separat auf body */
html.desktop-stage-active .desktop-stage .welten-world-switch {
  position: absolute;
  inset: 0;
}

html.desktop-stage-active body > .welten-world-switch {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2147483645 !important;
}