/* Snapshot-only Live Situation presentation shared by the two destination wrappers. */
@layer components;

.lsc-destination-mount[hidden] { display: none !important; }

.lsc-destination-mount {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: var(--hd-surface-base);
}

body.hd-live-situation-display-active #container { display: none !important; }

body.hd-live-situation-portal-active:not(.hd-pip-state-pip):not(.hd-pip-state-dualplane):not(.hd-pip-state-fullscreen) #player-pip-frame > :not(.lsc-destination-mount) {
  display: none !important;
}

/* PlayerPip remains the interaction and layout owner whenever it has an
 * explicit size state. The Live destination stays as the visual plane under
 * its established chrome, so controls and tap-to-expand keep working without
 * moving the snapshot mount between owners. */
body.hd-live-situation-portal-active.hd-pip-state-pip #player-pip-frame > .hd-player-pip-chrome,
body.hd-live-situation-portal-active.hd-pip-state-dualplane #player-pip-frame > .hd-player-pip-chrome,
body.hd-live-situation-portal-active.hd-pip-state-fullscreen #player-pip-frame > .hd-player-pip-chrome {
  position: absolute;
  inset: 0;
  z-index: 61;
  pointer-events: none;
}

body.hd-live-situation-portal-active #player-pip-frame .hd-player-pip-controls,
body.hd-live-situation-portal-active.hd-pip-state-pip #player-pip-frame .hd-player-pip-content {
  pointer-events: auto;
}

body.hd-live-situation-portal-active #player-pip-frame .hd-player-pip-content > * {
  display: none !important;
}

body.hd-live-situation-portal-active.hd-pip-state-dualplane #player-pip-frame .hd-player-pip-content {
  pointer-events: none;
  cursor: default;
}

body.hd-live-situation-portal-active:not(.hd-pip-state-pip):not(.hd-pip-state-dualplane):not(.hd-pip-state-fullscreen) #player-pip-frame {
  display: block !important;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

/* The portal scene owns the idle surface, but an opened destination or combat
 * cockpit must remain the visible and interactive plane. The frame drops just
 * below the shared z-index:40 content mounts only for those two states; closing
 * them restores the scene without adding a parallel lifecycle or state owner. */
body.hd-live-situation-portal-active:not(.hd-pip-state-pip):not(.hd-pip-state-dualplane):not(.hd-pip-state-fullscreen):has(
  .hd-player-tab-bar__tab--active,
  #combat-companion-mount:not([hidden])
) #player-pip-frame {
  z-index: 39;
  pointer-events: none;
}

.lsc-destination-mount--portal {
  position: absolute;
  display: grid;
  place-items: center;
}

.lsc-destination-mount--portal .lsc-player-live-situation__stage { margin: auto; }
.lsc-scene-presentation {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--hd-surface-base);
}

.lsc-scene-presentation__background-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.lsc-scene-presentation--fade .lsc-scene-presentation__background-media,
.lsc-scene-presentation--fade .lsc-scene-presentation__appearance {
  transition: opacity var(--lsc-scene-transition-ms, var(--hd-motion-slower)) ease;
}

.lsc-scene-presentation--fade {
  animation: lsc-scene-presentation-fade var(--lsc-scene-transition-ms, var(--hd-motion-slower)) ease both;
}

@keyframes lsc-scene-presentation-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lsc-scene-presentation__appearance {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.lsc-scene-presentation__appearance--focus { z-index: 2; }
.lsc-scene-presentation__appearance--speaker { z-index: 3; }

.lsc-scene-presentation__portrait {
  display: block;
  max-width: min(62vw, 54vh);
  max-height: 82vh;
  object-fit: contain;
  filter: drop-shadow(0 0.75rem 1rem rgb(0 0 0 / 0.55));
}

.lsc-player-live-situation__stage {
  position: relative;
  overflow: hidden;
}

.lsc-player-live-situation__codex-button {
  min-width: 44px;
  min-height: 44px;
}