.gallery-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.gallery-viewport::-webkit-scrollbar { display: none; }
.gallery-viewport:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.gallery-track { display: flex; width: 100%; }
.gallery-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.gameplay-frame .gallery-slide img { display: block; width: 100%; pointer-events: none; }
.gallery-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery-hint { margin: 12px 0 0; color: #8a867d; font-size: 9px; letter-spacing: .16em; text-align: center; }
.gallery-thumbnails { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.gallery-thumbnail {
  display: block;
  width: 100%;
  max-height: 100px;
  aspect-ratio: 16 / 9;
  padding: 3px;
  overflow: hidden;
  border: 1px solid transparent;
  background: #141b20;
  cursor: pointer;
}
.gallery-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .65; transition: opacity .2s; }
.gallery-thumbnail:hover img, .gallery-thumbnail[aria-pressed="true"] img { opacity: 1; }
.gallery-thumbnail[aria-pressed="true"] { border-color: var(--gold); }
.gallery-thumbnail:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 760px) {
  .gallery-thumbnails { gap: 5px; margin-top: 10px; }
  .gallery-thumbnail { padding: 2px; }
}
@media (prefers-reduced-motion: reduce) { .gallery-thumbnail img { transition: none; } }