/* One rounded silhouette for the dream's floating help and control panels. */
body.dream-painting {
  --dream-panel-radius: 20px;
}
body.dream-painting .glass,
body.dream-painting .place-whisper,
body.dream-painting .toast,
body.dream-painting .interaction-cue,
body.dream-painting .invitation-label,
body.dream-painting dialog,
body.dream-painting #other-painting {
  border-radius: var(--dream-panel-radius);
}
body.dream-painting .paint-tray {
  opacity: 1;
  transition: opacity 0.2s ease, backdrop-filter 0.2s ease;
}

body.dream-painting #atlas-tour {
  flex-basis: 100%;
  border: 1px solid currentColor;
  border-radius: var(--dream-panel-radius);
  padding: 10px 14px;
}
body.dream-painting #atlas-tour[aria-pressed="true"] {
  background: #3f5a43;
  color: #f4edda;
}
.portrait-painting .paint-tray {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100svh - 200px);
  overflow: auto;
}
.dream-paint-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.dream-paint-tools button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  padding: 6px;
  border: 1px solid #efe3bc55;
  border-radius: 8px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.dream-paint-tools button[aria-pressed="true"] {
  background: #f1c55b33;
  border-color: #f1c55b;
}
.dream-paint-tools img { width: 36px; height: 32px; object-fit: contain; }
.portrait-painting .colors { flex-wrap: wrap; }
.portrait-painting .place-whisper {
  max-height: min(45svh, calc(100svh - 205px));
}
/* The first painting's story: the artist's words over the painting, which acts them out. */
.dream-story-veil {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #05080a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 3s ease;
}
.dream-story-veil.closed {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .dream-story-veil {
    transition: none;
  }
}
.dream-story {
  position: absolute;
  z-index: 31;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px));
  padding: 12px 20px 14px;
  color: #fff1d5;
  background: #17392be6;
  border: 1px solid #e4cca199;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 8px 25px #17392b33;
}
.dream-story[hidden] {
  display: none;
}
#dream-story-heading {
  font-size: 11px;
  letter-spacing: 1px;
  color: #e4cca1;
  margin: 0 0 4px;
}
#dream-story-text {
  font: 400 clamp(17px, 2.2vw, 23px) / 1.4 Dream, Georgia, serif;
  margin: 0 0 10px;
}
.dream-story-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.dream-story-controls button,
.artwork-story .story-on-painting {
  min-height: 44px;
  padding: 8px 16px;
  font: inherit;
  font-size: 12px;
  color: inherit;
  background: #ffffff10;
  border: 1px solid #e4cca177;
  border-radius: 22px;
  cursor: pointer;
}
.dream-story-controls button:disabled {
  opacity: 0.45;
  cursor: default;
}
.artwork-story .story-on-painting {
  color: #344b3a;
  border-color: #8c806b88;
}
@media (max-width: 600px) {
  .dream-story {
    bottom: 76px;
    padding: 9px 12px 10px;
  }
  #dream-story-text {
    font-size: 16px;
    margin-bottom: 6px;
  }
}
/* The threshold's photograph: the painting fills a white frame, as in the valley. The wall, floor
   and stand around the physical frame are cropped away, and the frame follows the photo at any
   size. The image only moves and scales uniformly: its painted proportions do not change. */
.gallery-frame {
  height: auto;
  background: #fcf7ec;
  border: 12px solid #fcf7ec;
}
#gallery-photo {
  max-height: calc(79svh - 24px);
  max-width: calc(42vw - 24px);
  clip-path: inset(8.125% 6.6667% 5.9375% 7.3958%);
  transform-origin: 0 0;
  transform: translate(-8.6061%, -9.4545%) scale(1.163636);
}
@media (max-width: 1050px) {
  #gallery-photo {
    max-height: calc(70svh - 24px);
  }
}
@media (max-height: 650px) and (min-width: 651px) {
  #gallery-photo {
    max-height: calc(64svh - 24px);
    max-width: calc(39vw - 24px);
  }
}
@media (max-width: 650px) {
  .gallery-frame {
    border-width: 8px;
  }
  #gallery-photo {
    max-height: calc(48svh - 16px);
    max-width: calc(77vw - 16px);
  }
}