/* Dark Mage of Mossfen — a painting's window (v1.17, ui/picture.js): the Temple of Jasper's paintings, the picture beside
   its story. Same look as the talk window (talk.css). */

#picture {
  top: 12px; right: 12px; z-index: 5;
  width: min(640px, calc(100% - 24px));
  max-height: calc(100% - 100px);
  overflow-y: auto;
  padding: 10px 14px 12px;
  display: flex; flex-direction: column;
}
#picture[hidden] { display: none; }
#picture header { align-items: center; }
#picture header .win-meta { margin-left: 10px; }
#picture header .win-close { margin-left: auto; }
.picture-body { display: flex; gap: 16px; margin-top: 8px; min-height: 0; }
#picture-img {
  flex: none; height: min(520px, calc(100vh - 190px)); aspect-ratio: 1 / 2; width: auto;
  border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); background: #120e0a;
}
.picture-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#picture-words { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.picture-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: auto; padding-top: 14px; }
.picture-actions .pick-go { min-width: 130px; padding: 9px 16px; font-size: 16px; }
.picture-actions .link-btn { margin: 0; }
#picture-count { font: 400 13px/1 var(--f-num); color: var(--ink-faint); margin-top: 12px; }
#scene.is-over-picture { cursor: pointer; }
body.picture-open #help, body.picture-open #quest-track { visibility: hidden; }

/* a phone: the picture over its story */
@media (max-width: 600px) {
  .picture-body { flex-direction: column; align-items: center; }
  #picture-img { height: min(44vh, 400px); }
  .picture-text { width: 100%; }
}