/* The screenshot viewer (assets/viewer.js): a dark full-screen sheet with the picture, its caption, previous and
   next, and a strip of thumbnails. Works on its own, so the game pages that don't load site.css can use it. */

html.viewer-open { overflow: hidden; }
.viewer {
  --v-bg: #0c1420; --v-ink: #f4f9fa; --v-soft: #b8c7d0; --v-accent: #f2b84b;
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--v-bg); color: var(--v-ink);
  font: 16px/1.4 ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}
.viewer[open] { display: grid; grid-template-rows: auto 1fr auto; }
.viewer::backdrop { background: rgb(12 20 32 / .9); }
.viewer svg { width: 22px; height: 22px; display: block; }
.viewer [hidden] { display: none !important; }

.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.viewer-count { font-weight: 750; color: var(--v-soft); font-variant-numeric: tabular-nums; }
.viewer-tools { display: flex; align-items: center; gap: 8px; }
.viewer-close, .viewer-download, .viewer-prev, .viewer-next {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px;
  border: 0; border-radius: 999px; background: rgb(255 255 255 / .1); color: var(--v-ink); cursor: pointer;
  font: inherit; font-weight: 750; text-decoration: none; transition: background .15s ease;
}
.viewer-download { padding: 0 16px; }
.viewer-close:hover, .viewer-download:hover, .viewer-prev:hover, .viewer-next:hover { background: rgb(255 255 255 / .2); }
.viewer :focus-visible { outline: 3px solid var(--v-accent); outline-offset: 2px; }

.viewer-stage { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 0 16px; min-height: 0; touch-action: pan-y; }
.viewer-figure { margin: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 12px; }
.viewer-img { max-width: 100%; max-height: calc(100dvh - 210px); width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 50px -20px #000; user-select: none; -webkit-user-drag: none; }
.viewer.portrait .viewer-img { border-radius: 26px; }
.viewer-caption { font-weight: 750; font-size: 18px; text-align: center; min-height: 1.4em; }
.viewer.loading .viewer-img { filter: saturate(.9); }

.viewer-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 16px; scrollbar-width: thin; justify-content: safe center; }
.viewer-strip button { flex: none; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; opacity: .55; transition: opacity .15s ease; }
.viewer-strip button:hover, .viewer-strip button[aria-current="true"] { opacity: 1; }
.viewer-strip button[aria-current="true"] { border-color: var(--v-accent); }
.viewer-strip img { display: block; height: 56px; width: auto; border-radius: 6px; }
.viewer.portrait .viewer-strip img { height: 72px; }

.viewer.single .viewer-prev, .viewer.single .viewer-next, .viewer.single .viewer-strip, .viewer.single .viewer-count { visibility: hidden; }

@media (max-width: 700px) {
  .viewer-stage { grid-template-columns: 1fr; padding: 0 10px; }
  .viewer-prev, .viewer-next { position: absolute; top: 50%; translate: 0 -50%; z-index: 1; background: rgb(12 20 32 / .55); }
  .viewer-prev { left: 8px; }
  .viewer-next { right: 8px; }
  .viewer-img { max-height: calc(100dvh - 190px); }
  .viewer-download span { display: none; }
  .viewer-download { padding: 0; }
  .viewer-strip img { height: 44px; }
  .viewer.portrait .viewer-strip img { height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer *, .viewer-strip button { transition: none; }
}