#studio-image-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ds-color-text, #f5f5f5);
  box-shadow: none;
  font-family: var(--ds-font-sans, sans-serif);
  overscroll-behavior: contain;
  touch-action: none;
}

#studio-image-layer::backdrop { background: rgba(0, 0, 0, .9); }

#studio-image-layer[open] {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  justify-items: center;
}

#studio-image-layer button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font: inherit;
}

#studio-image-layer .studio-image-layer-image {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

#studio-image-layer .studio-image-layer-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
  user-select: none;
}

#studio-image-layer .studio-image-layer-previous,
#studio-image-layer .studio-image-layer-next {
  width: 44px;
  height: max(44px, var(--ds-control-lg, 48px));
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
}

#studio-image-layer [hidden] { display: none; }

#studio-image-layer button:disabled { cursor: not-allowed; }

#studio-image-layer .studio-image-layer-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

img[data-studio-image-source="true"] { cursor: zoom-in; }

/* The preview shade is decorative; the image remains the click target. */
.studio-preview-cover::after { pointer-events: none; }

/* Keep world-summary text readable/clickable while exposing its image backdrop. */
.studio-world-snapshot-shade,
.studio-world-snapshot-copy { pointer-events: none; }

.studio-world-snapshot-copy > :is(header, blockquote, dl, footer, .studio-world-snapshot-points) {
  pointer-events: auto;
}