/* Curved, tilted side cards frame a full-size central memory. */
#album_dialog, #album_dialog.showing_album { width: min(76rem, calc(100% - 3rem)); }
/* Reserve the top-center Explore area and scroll within the album when needed. */
#album_dialog {
  --album-top: clamp(8.5rem, 17dvh, 10.5rem);
  top: calc(var(--album-top) + env(safe-area-inset-top)); bottom: auto;
  margin: 0 auto;
  max-height: calc(100dvh - var(--album-top) - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: clamp(.85rem, 2vw, 1.5rem);
  border-width: 1px;
}
#album_dialog .dialog_top {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem; margin-bottom: .45rem; text-align: center;
}
#album_dialog .dialog_top .eyebrow {
  margin: 0; line-height: 1.4; letter-spacing: .08em; word-spacing: normal;
}
#album_dialog #challenge_title {
  margin: 0 0 .4rem; text-align: center; line-height: 1.15;
  letter-spacing: normal; word-spacing: normal;
}
#album_dialog #challenge_instructions {
  max-width: 75ch; margin: 0 auto .75rem; text-align: center;
  line-height: 1.45; letter-spacing: normal; word-spacing: normal;
}
#album_dialog #close_album { align-self: center; margin: 0; }
#album_dialog .welcome_note { max-width: 65ch; margin-inline: auto; text-align: center; }
@media (max-width: 480px) {
  #album_dialog, #album_dialog.showing_album { width: calc(100% - 1rem); }
}
@media (max-height: 500px) {
  #album_dialog { --album-top: 5.5rem; }
}

#album_contents .media_grid.album_carousel {
  display: block; position: relative; height: clamp(330px, 50vw, 530px);
  perspective: 1100px; overflow: hidden; isolation: isolate;
  touch-action: pan-y; border-radius: 1rem;
  background: radial-gradient(ellipse at center, #23374670, #080e1730 70%);
}
#album_contents .album_carousel figure {
  position: absolute; left: 50%; top: 47%; margin: 0;
  width: clamp(170px, 32%, 360px); height: clamp(250px, 34vw, 390px); padding: 0;
  box-sizing: border-box;
  background: #101721; border: 1px solid #ffffff24; border-radius: 18px;
  overflow: hidden; box-shadow: 0 16px 35px #0007;
  transform: translate(-50%, -50%) translateX(calc(var(--offset) * 102%))
    translateY(24px) scale(.62) rotateY(calc(var(--offset) * -14deg)) rotate(calc(var(--offset) * 9deg));
  transition: transform 650ms cubic-bezier(.22,1,.36,1), opacity 650ms ease;
  opacity: .78; cursor: pointer;
}
#album_contents .album_carousel figure.carousel_active {
  transform: translate(-50%, -50%); opacity: 1;
}
#album_contents .album_carousel img, #album_contents .album_carousel video {
  display: block; width: 100%; height: 100%; max-height: 100%;
  aspect-ratio: auto; object-fit: contain; border-radius: inherit; background: #101721;
}
#album_contents .album_carousel img {
  object-fit: cover;
  object-position: center;
}
#album_contents .album_carousel figcaption { display: none; }
#album_contents .album_carousel .photo_thumbnail {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; border-radius: inherit;
}
#album_contents .media_grid figcaption, #viewer_caption { display: none; }
.carousel_controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .5rem; }
.carousel_controls p { margin: 0; min-width: 5rem; text-align: center; font-variant-numeric: tabular-nums; }
.carousel_controls button { border-radius: 50%; width: 46px; height: 46px; padding: 0; font-size: 1.2rem; }
.carousel_controls button:disabled { opacity: .4; cursor: default; }
.carousel_controls button:focus-visible, .album_carousel button:focus-visible { outline: 3px solid var(--color_teal); outline-offset: -3px; }
html[data-motion='off'] #album_contents .album_carousel figure { transition: none; }
@media (prefers-reduced-motion: reduce) { #album_contents .album_carousel figure { transition: none; } }

/* Reveal the page's existing video, without starting another video per album. */
.ambient_enabled :is(#album_dialog, #photo_dialog) {
  background: #17233340;
  border-color: #b4cce85c;
  box-shadow: 0 18px 60px #050b1430;
  text-shadow: 0 1px 4px #070d17;
}
.ambient_enabled :is(#album_dialog, #photo_dialog)::backdrop { background: #10182440; }
.ambient_enabled #album_contents .media_grid.album_carousel { background: transparent; }
/* Keep gallery text from showing through the open album, but retain the video. */
body.album_open > :is(header, footer),
body.album_open main > :not(dialog),
body.photo_open > :is(header, footer),
body.photo_open main > :not(dialog),
body.photo_open #album_dialog { visibility: hidden; }
#photo_dialog { visibility: visible; }
/* Round the actual full-size image, including portrait photos, rather than its empty canvas. */
#photo_dialog #viewer_image {
  width: auto; height: auto; max-width: 100%; max-height: min(65dvh, 50rem);
  margin-inline: auto; border-radius: 18px; object-fit: contain;
}

/* Shared slide transition for Next, Previous, and arrow keys in the full viewer. */
#photo_dialog .full_photo { position: relative; overflow: hidden; }
#photo_dialog .photo_outgoing {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; border-radius: 18px; pointer-events: none;
}

/* Picture views use the viewport as their layout budget, rather than a scrolling panel. */
body.ambient_enabled #album_dialog.showing_album,
body.ambient_enabled #photo_dialog {
  background: transparent; border: 0; box-shadow: none; backdrop-filter: none;
  box-sizing: border-box; overflow: hidden;
}
#album_dialog.showing_album[open] {
  --album-top: clamp(4.5rem, 10dvh, 6rem);
  height: calc(100dvh - var(--album-top) - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  padding: .5rem clamp(.25rem, 1vw, 1rem);
}
#album_dialog.showing_album :is(#game_board, #game_feedback, .game_actions) { display: none; }
#album_dialog.showing_album .dialog_top { gap: .3rem; margin-bottom: .25rem; flex-shrink: 0; }
#album_dialog.showing_album #challenge_title { font-size: clamp(1.5rem, 4dvh, 2.7rem); }
#album_dialog.showing_album #challenge_instructions { margin-bottom: .35rem; font-size: clamp(.8rem, 2dvh, 1rem); }
#album_dialog.showing_album #album_contents {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
#album_dialog.showing_album #album_contents .album_carousel {
  flex: 1; min-height: 0; height: auto;
}
#album_dialog.showing_album #album_contents .album_carousel figure {
  top: 50%; height: min(88%, 30rem); width: auto; max-width: 72%; aspect-ratio: 12 / 13;
}
#album_dialog.showing_album .carousel_controls { flex-shrink: 0; margin-top: .25rem; }
#photo_dialog[open] {
  display: flex; flex-direction: column;
  height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
#photo_dialog .full_photo { flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; margin: .5rem 0; }
#photo_dialog #viewer_image { max-height: 100%; max-width: 100%; min-height: 0; }
#photo_dialog :is(.photo_toolbar, .photo_controls) { flex-shrink: 0; gap: .4rem; }
@media (max-height: 500px) {
  #album_dialog.showing_album[open] { --album-top: 3.6rem; }
  #album_dialog.showing_album .dialog_top .eyebrow,
  #album_dialog.showing_album #challenge_instructions { display: none; }
  #album_dialog.showing_album #challenge_title { margin: 0; font-size: 1.25rem; }
}