/* Blindspot — Hall of Fighters lobby carousel.
   Scoped under .blindspot-lobby-gallery. Design-system tokens only. */

.blindspot-lobby-gallery {
  margin: 0;
  min-width: 0; /* break intrinsic-size propagation from the wide strip */
  max-width: 100%;
}

.bs-lobby-gallery__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
}

.bs-lobby-gallery__strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  padding: 8px 0 12px;
  width: max-content;
  animation: bs-gallery-scroll 80s linear infinite;
  will-change: transform;
}

.bs-lobby-gallery__viewport:hover  .bs-lobby-gallery__strip,
.bs-lobby-gallery__viewport:focus-within .bs-lobby-gallery__strip,
.bs-lobby-gallery__strip[data-paused="true"] {
  animation-play-state: paused;
}

@keyframes bs-gallery-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.bs-lobby-gallery__tile {
  flex: 0 0 auto;
  width: 140px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--bs-text);
  font: inherit;
  transition: transform 200ms ease;
}

.bs-lobby-gallery__tile:hover,
.bs-lobby-gallery__tile:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.bs-lobby-gallery__tile:focus-visible .bs-lobby-gallery__card {
  box-shadow: 0 0 0 2px var(--bs-accent);
}

.bs-lobby-gallery__card {
  width: 140px;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
}

.bs-lobby-gallery__card .bs-rendered-card {
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.bs-lobby-gallery__byline {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  color: var(--bs-text-muted);
  text-align: center;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bs-lobby-gallery__tile--skeleton {
  position: relative;
  background:
    linear-gradient(90deg,
      rgba(245, 192, 120, 0.06) 0,
      rgba(245, 192, 120, 0.18) 50%,
      rgba(245, 192, 120, 0.06) 100%),
    rgba(13, 8, 7, 0.55);
  background-size: 200% 100%, 100% 100%;
  border: 1px solid rgba(245, 192, 120, 0.18);
  animation: bs-gallery-skeleton 1.1s ease-in-out infinite;
  width: 140px;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  cursor: default;
}
.bs-lobby-gallery__tile--skeleton::after {
  content: "\f3ed"; /* fa-shield-halved — leans into Blindspot icon language */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 1.6rem;
  color: rgba(245, 192, 120, 0.4);
  text-shadow: 0 0 12px rgba(245, 192, 120, 0.25);
  animation: bs-gallery-skeleton-icon 1.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bs-gallery-skeleton {
  from { background-position: 200% 0, 0 0; }
  to   { background-position: -200% 0, 0 0; }
}
@keyframes bs-gallery-skeleton-icon {
  0%, 100% { opacity: 0.35; transform: scale(0.95); }
  50%      { opacity: 0.7;  transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .bs-lobby-gallery__tile--skeleton,
  .bs-lobby-gallery__tile--skeleton::after {
    animation: none;
  }
  .bs-lobby-gallery__tile--skeleton::after { opacity: 0.55; }
}

/* Modal */
.bs-gallery-modal__panel {
  background: var(--bs-bg);
  border: 1px solid var(--bs-border);
  border-radius: 6px;
  padding: 1.5rem;
  max-width: 360px;
  width: calc(100% - 2rem);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

.bs-gallery-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: 0;
  color: var(--bs-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease, background 150ms ease;
}

.bs-gallery-modal__close:hover,
.bs-gallery-modal__close:focus-visible {
  color: var(--bs-text);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.bs-gallery-modal__card {
  width: 280px;
  max-width: 100%;
}

.bs-gallery-modal__creator {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  color: var(--bs-text-muted);
  margin: 0;
  text-align: center;
}

.bs-gallery-modal__creator strong {
  color: var(--bs-accent);
  font-weight: 500;
}

/* Reduced motion: disable auto-scroll, enable manual scroll-snap */
@media (prefers-reduced-motion: reduce) {
  .bs-lobby-gallery__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .bs-lobby-gallery__strip {
    animation: none;
    width: auto;
  }
  .bs-lobby-gallery__tile {
    scroll-snap-align: start;
  }
  .bs-lobby-gallery__tile--skeleton,
  .bs-lobby-gallery__strip {
    animation: none;
  }
}

/* Mobile: smaller tiles */
@media (max-width: 480px) {
  .bs-lobby-gallery__tile,
  .bs-lobby-gallery__card,
  .bs-lobby-gallery__tile--skeleton {
    width: 110px;
  }
  .bs-lobby-gallery__strip {
    gap: 14px;
    animation-duration: 60s;
  }
  .bs-gallery-modal__card {
    width: 220px;
  }
}