/* =========================================================
   play.css
   Page-specific rules for play.html only:
   1) the joke hero header ("This dude loves to P-A-R-T-Y!")
      centered with a left-aligned acrostic block beneath it
   2) the "Dinner Detective franchises" screenshot carousel
   ========================================================= */

/* ---- Hero: centered header + P-A-R-T-Y acrostic ---- */
.project-hero--centered {
  text-align: center;
}

.project-hero--centered .project-hero__title {
  text-align: center;
}

/* Browsers treat hyphens as valid line-break points, so on narrow
   screens "P-A-R-T-Y!" was splitting mid-word (e.g. "P-A-" / then
   "R-T-Y!" on the next line). white-space:nowrap makes the whole
   hyphenated word an atomic unit — it either fits on the current
   line or wraps entirely to the next one, never splits internally. */
.play-hero__party {
  white-space: nowrap;
}

/* The acrostic reads as a real sentence ("Perform and return to
   his home and go to bed"), so it's centered as a whole block on
   the page — but the lines inside stay left-aligned to each
   other (display:inline-block + text-align:left) so the P/A/R/T/Y
   letters actually stack into a column instead of drifting with
   each line's length. */
.play-acrostic {
  display: inline-block;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: var(--space-sm) auto 0;
}

.play-acrostic__letter {
  color: var(--project-accent);
  font-weight: 700;
}

/* ---- Franchise carousel ---- */
.franchise-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.franchise-carousel__track {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-xs);
  /* Firefox + WebKit scrollbar styling — thin and on-theme
     rather than the default chrome-grey system scrollbar. */
  scrollbar-width: thin;
  scrollbar-color: var(--project-accent) transparent;
}

.franchise-carousel__track::-webkit-scrollbar {
  height: 6px;
}
.franchise-carousel__track::-webkit-scrollbar-thumb {
  background: var(--project-accent);
  border-radius: 999px;
}
.franchise-carousel__track::-webkit-scrollbar-track {
  background: transparent;
}

.franchise-carousel__item {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  border: 1px solid color-mix(in srgb, var(--project-accent) 40%, transparent);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-screen);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.franchise-carousel__item img {
  display: block;
  width: 100%;
  height: auto;
}

.franchise-carousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-md) var(--space-sm) var(--space-xs);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.78) 55%, transparent 100%);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.franchise-carousel__btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--project-accent) 55%, var(--color-text-muted) 45%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--project-accent) 14%, transparent);
  color: var(--project-accent);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.franchise-carousel__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.franchise-carousel__btn:hover,
.franchise-carousel__btn:focus-visible {
  background: var(--project-accent);
  color: var(--color-bg);
}

/* Nav buttons are a nice-to-have for mouse/keyboard users;
   touch users already get native swipe-scroll, and the buttons
   take up precious width on small screens, so drop them there. */
@media (max-width: 47.5em) {
  .franchise-carousel__btn {
    display: none;
  }
}