/* Game Art: the game shelf (built by script.js), every game on show at once. A card is the game's logo (a tilted
   badge) over a paper frame playing its gameplay clip, with a tilted page in the card's --band color behind.
   Every clip is the same height (--clip-h) and as wide as its shape needs (--ratio, set by JS), so phone and
   widescreen clips stand side by side, nothing cropped. Phones swipe through them in one row, edge to edge,
   each card snapping to the middle; from tablets up they wrap onto the shelf */

.games-section .showcase-placeholder { margin: 0; }

.game-shelf {
  --clip-h: min(380px, 56vh);
  --logo: 108px;
  --logo-overlap: 24px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 28px;
  margin: 0 calc(50% - 50vw);
  padding: 6px 28px 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 28px;
  scrollbar-width: none;
  list-style: none;
}
.game-shelf::-webkit-scrollbar { display: none; }
.game { --tilt: -2deg; position: relative; isolation: isolate; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; scroll-snap-align: center; }
.game:nth-child(3n+2) { --tilt: 1.5deg; }
.game:nth-child(3n) { --tilt: -1deg; }

/* The page behind the frame; it stays put while the frame lifts on hover */
.game::before {
  content: "";
  position: absolute;
  inset: calc(var(--logo) - var(--logo-overlap)) 0 0;
  z-index: -1;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--band);
  transform: rotate(calc(var(--tilt) * -2.5)) translate(10px, 8px);
}

.game-logo {
  position: relative;
  z-index: 1;
  width: var(--logo);
  height: auto;
  margin-bottom: calc(var(--logo-overlap) * -1);
  border: var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  transform: rotate(calc(var(--tilt) * -3));
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.game:has(:focus-visible) .game-logo { transform: translateY(-8px) rotate(calc(var(--tilt) * -4)) scale(1.06); }

/* The frame: a thicker top edge where the logo sits */
.game-clip {
  position: relative;
  display: block;
  padding: calc(var(--logo-overlap) + 6px) 10px 10px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  cursor: zoom-in;
  transform: rotate(var(--tilt));
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s cubic-bezier(.34, 1.56, .64, 1);
}
.game-clip:focus-visible { transform: translateY(-6px) rotate(0deg); box-shadow: 7px 10px 0 var(--ink); }

/* Hover effects only where there's a mouse: on phones a tap would leave them stuck on */
@media (hover: hover) {
  .game:hover .game-logo { transform: translateY(-8px) rotate(calc(var(--tilt) * -4)) scale(1.06); }
  .game-clip:hover { transform: translateY(-6px) rotate(0deg); box-shadow: 7px 10px 0 var(--ink); }
}
.game-clip video {
  display: block;
  width: calc(var(--clip-h) * var(--ratio));
  max-width: calc(100vw - 84px);
  height: auto;
  aspect-ratio: var(--ratio);
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--band);
  object-fit: cover;
}

/* Without motion the clips don't play by themselves: a play badge says the card opens it */
.game-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: var(--line);
  border-radius: 50%;
  background: var(--color-1);
  box-shadow: var(--shadow-sm);
}
.game-play svg { width: 28px; height: 28px; margin-left: 4px; fill: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .game-play { display: grid; }
}

.game-hint { margin: 4px 0 0; font-family: var(--font-hand); font-size: 1.4rem; color: var(--accent-deep); text-align: center; transform: rotate(-3deg); }

/* Tablets up: the cards wrap onto a centered shelf, every other one a little lower */
@media (min-width: 681px) {
  .game-shelf { --clip-h: 340px; --logo: 120px; flex-wrap: wrap; justify-content: center; gap: 34px 36px; margin-inline: 0; padding: 6px 0 0; overflow-x: visible; scroll-snap-type: none; scroll-padding-inline: auto; scrollbar-width: auto; }
  .game { flex: 0 1 auto; scroll-snap-align: none; }
  .game:nth-child(3n+2) { margin-top: 30px; }
  .game-hint { display: none; }
}

@media (min-width: 901px) {
  .game-shelf { --clip-h: 420px; --logo: 148px; --logo-overlap: 28px; gap: 40px 48px; }
}