/* Five independent assets, recomposed to match the approved poster. */
#top.hero-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 58.2fr) minmax(0, 41.8fr);
  gap: clamp(2px, .47vw, 8px);
  aspect-ratio: 1698 / 926;
  overflow: hidden;
  isolation: isolate;
  background: #fffdf7;
}
#top.hero-collage .hero-game {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
#top.hero-collage .hero-game > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
}
#top.hero-collage .hero-game::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 0 solid var(--yellow);
  pointer-events: none;
}
#top.hero-collage .hero-game:hover::after,
#top.hero-collage .hero-game:focus-visible::after { border-width: 5px; }
#top.hero-collage .hero-game:focus-visible { outline: none; }
#top.hero-collage > .hero-logo {
  position: absolute;
  z-index: 2;
  top: 50.5%;
  left: 50%;
  width: 31.5%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  image-rendering: pixelated;
}
/* Fit the complete poster below the banner, preserving its composition. */
@media (min-width: 761px) {
  #top.hero-collage {
    width: min(100%, calc((100svh - var(--party-banner-height, 112px) - 16px) * 1698 / 926));
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  #top.hero-collage .hero-game:hover::after,
  #top.hero-collage .hero-game:focus-visible::after { border-width: 3px; }
}

/* Display contents keeps the original four desktop grid cells intact. */
.hero-track { display: contents; }
.hero-caption, .hero-carousel-controls { display: none; }

/* A full-size manual carousel on phones, with the next card peeking in. */
@media (max-width: 760px) {
  #top.hero-collage {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    gap: 0;
    padding-block: 12px 16px;
    background: var(--cream);
  }
  #top.hero-collage > .hero-logo {
    position: static;
    order: -1;
    align-self: center;
    width: min(60%, 240px);
    transform: none;
    margin-block: 4px 8px;
  }
  .hero-track {
    position: relative;
    display: flex;
    gap: 14px;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding: 6px 16px 12px;
    scrollbar-width: none;
  }
  .hero-track::-webkit-scrollbar { display: none; }
  #top.hero-collage .hero-game {
    flex: 0 0 calc(100% - 24px);
    scroll-snap-align: start;
    border: 3px solid var(--ink);
    border-radius: 8px;
    box-shadow: 4px 4px var(--ink);
    background: #fffdf7;
  }
  #top.hero-collage .hero-game > img {
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
  }
  #top.hero-collage .hero-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border-top: 3px solid var(--ink);
    background: var(--yellow);
    color: var(--ink);
    font: 700 23px/1.2 GamePixel, monospace;
  }
  #top.hero-collage .hero-game:nth-child(2) .hero-caption { background: #d8c0ff; }
  #top.hero-collage .hero-game:nth-child(3) .hero-caption { background: #a9edca; }
  #top.hero-collage .hero-game:nth-child(4) .hero-caption { background: #bdd9ff; }
  .hero-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-inline: 18px;
  }
  .hero-carousel-controls[hidden] { display: none; }
  .hero-swipe-hint { font: 19px/1.2 GamePixel, monospace; color: #61566e; }
  .hero-dots { display: flex; }
  .hero-dots button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 44px;
    border: 0;
    background: transparent;
    padding: 0;
  }
  .hero-dots button span { width: 9px; height: 9px; background: #b3aabd; border: 2px solid var(--ink); }
  .hero-dots button[aria-pressed="true"] span { width: 21px; background: var(--purple); }
}