.welcome-video-overlay{
  position:fixed;inset:0;z-index:975;display:grid;place-items:center;padding:16px;
  background:rgba(6,14,24,.45);backdrop-filter:blur(1px);pointer-events:auto
}
.welcome-video-overlay.hidden{display:none;pointer-events:none}
.welcome-video-modal{
  width:min(960px,calc(100% - 16px));display:flex;flex-direction:column;gap:10px;
  padding:12px 12px 10px;border-radius:18px;
  background:rgba(12,24,36,.94);border:1px solid rgba(217,164,65,.35);
  box-shadow:0 24px 64px rgba(0,0,0,.45)
}
.welcome-video-label{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#d9a441;text-align:center
}
.welcome-video-frame{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:#000;border:1px solid rgba(255,255,255,.08)
}
.welcome-video-frame--needs-audio:not(.welcome-video-frame--locked){cursor:default}
.welcome-video-frame--locked .welcome-video-vimeo{pointer-events:none}
.welcome-video-frame--locked{cursor:default}
.welcome-video-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;
  z-index:0;transition:opacity .55s ease
}
.welcome-video-poster.hidden{display:none}
.welcome-video-poster.is-hidden{opacity:0;pointer-events:none}
.welcome-video-vimeo{
  position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1
}
.welcome-video-audio-gate{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:20px;
  background:rgba(3,5,8,.42);backdrop-filter:blur(2px)
}
.welcome-video-audio-gate.hidden{display:none}
.welcome-video-unmute{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:22px 28px;border-radius:20px;border:1px solid rgba(217,164,65,.42);
  background:rgba(10,18,28,.78);color:#f6e5bd;font-weight:800;font-size:15px;cursor:pointer;
  min-width:min(280px,84vw);touch-action:manipulation;
  box-shadow:0 16px 48px rgba(0,0,0,.45);backdrop-filter:blur(10px);
  transition:transform .2s ease,border-color .2s ease,background .2s ease
}
.welcome-video-unmute:hover,
.welcome-video-unmute:focus-visible{
  transform:translateY(-1px);border-color:rgba(217,164,65,.65);
  background:rgba(14,24,36,.88);outline:none
}
.welcome-video-audio-gate__icon{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:999px;background:rgba(217,164,65,.16);color:#e8c86a
}
.welcome-video-audio-gate__title{font-size:17px;letter-spacing:.02em}
.welcome-video-audio-gate__hint{
  font-size:12px;font-weight:600;color:#9ab0c0;max-width:22ch;text-align:center;line-height:1.35
}
.welcome-video-unmute.hidden{display:none}
.welcome-video-dismiss{
  align-self:center;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.25);color:#c8d8e8;font-size:14px;font-weight:700;cursor:pointer;
  min-height:44px;touch-action:manipulation
}
.welcome-video-dismiss.hidden{display:none}

.welcome-video-overlay--cinema{
  padding:0;background:rgba(3,5,8,.25);backdrop-filter:none
}
.welcome-video-overlay--cinema .welcome-video-modal{
  width:100%;height:100%;max-width:none;max-height:none;flex:1;
  padding:0;border-radius:0;border:none;background:transparent;box-shadow:none;gap:8px
}
.welcome-video-overlay--cinema .welcome-video-label{display:none}
.welcome-video-overlay--cinema .welcome-video-frame{
  flex:1;min-height:0;width:100%;aspect-ratio:auto;border-radius:0;
  max-height:calc(100dvh - 108px);border:none
}
.welcome-video-overlay--cinema .welcome-video-unmute,
.welcome-video-overlay--cinema .welcome-video-dismiss{
  margin:0 12px 12px
}

.level-intro-video-overlay{z-index:9985}
.welcome-video-overlay--immersive{
  padding:0!important;background:#000!important;backdrop-filter:none;z-index:9999
}
.welcome-video-overlay--immersive .welcome-video-modal{
  width:100%;height:100%;min-height:100dvh;max-width:none;max-height:none;
  padding:0;border:none;border-radius:0;background:#000;box-shadow:none;gap:0;
  display:block;position:relative
}
.welcome-video-overlay--immersive .welcome-video-label{display:none}
.welcome-video-overlay--immersive .welcome-video-frame{
  position:absolute;inset:0;width:100%;height:100%;
  max-height:none;min-height:0;aspect-ratio:auto;border:none;border-radius:0
}
.welcome-video-overlay--immersive .welcome-video-unmute{
  position:relative;left:auto;right:auto;bottom:auto;margin:0;width:auto
}
.welcome-video-overlay--immersive .welcome-video-dismiss{
  position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;left:auto;bottom:auto;
  z-index:10001;margin:0;width:auto;padding:10px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(4,10,18,.55);
  color:#dce8f0;font-size:13px;backdrop-filter:blur(8px)
}
.welcome-video-overlay--immersive .welcome-video-dismiss:hover,
.welcome-video-overlay--immersive .welcome-video-dismiss:focus-visible{
  border-color:rgba(217,164,65,.45);color:#f6e5bd;outline:none
}
.welcome-video-overlay.is-entering{
  animation:welcomeVideoEnter .5s ease both
}
@keyframes welcomeVideoEnter{
  from{opacity:0}
  to{opacity:1}
}
.welcome-video-overlay--join{
  background:#030508!important
}

.join-preview-backdrop{
  background:#030508;display:flex;align-items:flex-start;justify-content:center;
  overflow-x:hidden
}
.join-serenia-hero{
  display:block;width:100vw;max-width:100vw;margin:0 calc(50% - 50vw);
  height:auto;max-height:none;aspect-ratio:1024/576;
  object-fit:contain;object-position:center center
}
.welcome-journey-backdrop .join-serenia-hero{
  object-fit:contain;background:#030508
}
/* Join: Startbanner vollständig — Video darunter, Poster nicht zuschneiden */
.welcome-video-overlay--join.welcome-video-overlay--immersive .welcome-video-modal{
  display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;
  min-height:100dvh;padding-top:env(safe-area-inset-top,0px)
}
.welcome-video-overlay--join.welcome-video-overlay--immersive .welcome-video-frame{
  position:relative;inset:auto;flex:1 1 auto;width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);min-height:min(52vw,42dvh);max-height:calc(100dvh - 72px);
  aspect-ratio:1024/576;height:auto
}
.welcome-video-overlay--join .welcome-video-poster{
  object-fit:contain;background:#030508
}
.participant-hub:has(#joinPreviewBackdrop:not(.hidden)) #langSwitchMount .lang-switch--fixed,
.participant-hub:has(#welcomeVideoOverlay:not(.hidden)) #langSwitchMount .lang-switch--fixed{
  z-index:10002
}

.welcome-journey-backdrop{
  position:fixed;inset:0;z-index:960;overflow:hidden;pointer-events:none;opacity:1;
  background:#030508
}
.welcome-journey-backdrop.hidden{display:none}

/* Journey-Vorschau — zentriertes Popup, Start in der Videomitte */
.welcome-video-overlay--popup:not(.hidden){
  z-index:10050;
  position:fixed;
  inset:0;
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:rgba(6,14,24,.9);
  backdrop-filter:blur(10px);
  pointer-events:auto
}
.welcome-video-overlay--popup.hidden{
  display:none!important;
  pointer-events:none
}
.welcome-video-overlay--popup .welcome-video-modal{
  position:relative;
  width:min(920px, calc(100% - 24px));
  max-height:calc(100dvh - 32px);
  padding:14px 14px 12px;
  border-radius:20px;
  background:rgba(12,24,36,.97);
  border:1px solid rgba(217,164,65,.35);
  box-shadow:0 28px 72px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  gap:10px
}
.welcome-video-overlay--popup .welcome-video-label{
  padding-right:36px
}
.welcome-video-overlay--popup .welcome-video-frame{
  flex:none;
  width:100%;
  aspect-ratio:16/9;
  min-height:0;
  max-height:min(72dvh, 520px)
}
.welcome-video-overlay--popup .welcome-video-poster{
  z-index:0
}
.welcome-video-overlay--popup .welcome-video-vimeo{
  z-index:1
}
.welcome-video-overlay--popup .welcome-video-audio-gate{
  z-index:4
}
.welcome-video-overlay--popup .welcome-video-unmute{
  margin:0
}
.welcome-video-dismiss--popup{
  position:absolute;
  top:10px;
  right:10px;
  z-index:6;
  width:40px;
  height:40px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(4,10,18,.65);
  color:#dce8f0;
  font-size:24px;
  line-height:1;
  backdrop-filter:blur(8px)
}
.welcome-video-dismiss--popup:hover,
.welcome-video-dismiss--popup:focus-visible{
  border-color:rgba(217,164,65,.45);
  color:#f6e5bd;
  outline:none
}
body.mkt-video-open{
  overflow:hidden
}

@media (max-width: 768px) {
  .welcome-video-overlay:not(.welcome-video-overlay--immersive){
    padding:6px;align-items:stretch
  }
  .welcome-video-overlay:not(.welcome-video-overlay--immersive) .welcome-video-modal{
    width:100%;max-height:calc(100dvh - 12px);flex:1;justify-content:center;
    padding:10px 8px 8px;border-radius:14px
  }
  .welcome-video-overlay:not(.welcome-video-overlay--immersive) .welcome-video-frame{
    flex:1;min-height:52vh;aspect-ratio:auto;max-height:calc(100dvh - 140px)
  }
  .welcome-video-label{font-size:11px}
  .welcome-video-unmute{
    width:100%;max-width:100%;font-size:16px;padding:16px 20px
  }
  .join-serenia-hero{
    width:100vw;margin-left:calc(50% - 50vw);height:auto;aspect-ratio:1024/576;
    object-fit:contain;object-position:center center
  }
  .welcome-video-overlay--join.welcome-video-overlay--immersive .welcome-video-frame{
    min-height:min(58vw,38dvh)
  }
}

/* Live-Leinwand — Code-Gate + Landkarte vor Startvideo */
body.screen-gate-active .v2-shell-inner,
body.screen-gate-active .v2-screen-photo-layer,
body.screen-gate-active #presentationLayer,
body.screen-gate-active #gameScreenLayer {
  visibility: hidden;
  pointer-events: none;
}

.screen-access-gate {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #030508;
  overflow: hidden;
}

.screen-access-gate.hidden {
  display: none;
}

.screen-access-gate__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.42;
  pointer-events: none;
}

.screen-access-gate__panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 28px 24px 24px;
  border-radius: 20px;
  border: 1px solid rgba(217, 164, 65, 0.35);
  background: rgba(8, 16, 28, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.screen-access-gate__kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #f0b040);
}

.screen-access-gate__title {
  margin: 0 0 8px;
  font-family: Cormorant, Georgia, serif;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.1;
}

.screen-access-gate__lead {
  margin: 0 0 18px;
  color: rgba(196, 184, 162, 0.92);
  line-height: 1.5;
}

.screen-access-gate__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.screen-access-gate__input {
  font-size: 22px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.screen-access-gate__error {
  margin: 0;
  color: #ff8a7a;
  font-size: 14px;
  line-height: 1.45;
}

.screen-access-gate__error.hidden {
  display: none;
}

.screen-access-gate__submit {
  width: 100%;
  font-size: 16px;
  padding: 14px 18px;
}

body.screen-map-visible .v2-screen-photo-layer {
  opacity: 1;
}

body.screen-map-visible .welcome-journey-backdrop:not(.hidden) {
  display: block;
}

body.v2-screen.screen-map-visible .v2-shell-inner {
  visibility: hidden;
  pointer-events: none;
}

/* Spiel/Leinwand-Inhalt darf nicht hinter der Startkarte liegen */
body.game-screen-mode .welcome-journey-backdrop,
body.game-intro-screen-mode .welcome-journey-backdrop,
body.fof-screen-mode .welcome-journey-backdrop,
body.mp-screen-mode .welcome-journey-backdrop,
body.imm-screen-mode .welcome-journey-backdrop,
body.dna-screen-mode .welcome-journey-backdrop,
body.mm-screen-mode .welcome-journey-backdrop,
body.screen-alltime-mode .welcome-journey-backdrop,
body.screen-research-mode .welcome-journey-backdrop,
body.screen-media-mode .welcome-journey-backdrop {
  display: none !important;
}

body.screen-media-end-sequence .welcome-journey-backdrop:not(.hidden) {
  display: block !important;
  opacity: 0;
  transition: opacity 0.85s ease 0.18s;
}

body.screen-media-end-sequence.screen-media-end-sequence--hub-in .welcome-journey-backdrop:not(.hidden) {
  opacity: 1;
}

body.game-screen-mode.screen-map-visible .v2-shell-inner,
body.game-intro-screen-mode.screen-map-visible .v2-shell-inner,
body.fof-screen-mode.screen-map-visible .v2-shell-inner,
body.mp-screen-mode.screen-map-visible .v2-shell-inner,
body.imm-screen-mode.screen-map-visible .v2-shell-inner,
body.dna-screen-mode.screen-map-visible .v2-shell-inner,
body.mm-screen-mode.screen-map-visible .v2-shell-inner {
  visibility: visible !important;
  pointer-events: auto !important;
}