/* Shared popular-game shelf; other game rows stay unchanged. */
:is(.shelf--popular, .popular-track)[data-popular-carousel] {
  position: relative;
  isolation: isolate;
  grid-auto-columns: calc((100% - 54px) / 10);
  gap: 6px;
  padding: 38px 0 42px;
  scroll-snap-type: x proximity;
}
[data-popular-carousel] > :is(.game-card, .popular-card) {
  position: relative;
  width: 100%;
  margin-left: 0;
  transform: perspective(500px) rotateY(-28deg) rotateZ(-2deg) scale(.94);
  transform-origin: center;
  scroll-snap-align: center;
  box-shadow: 4px 5px 0 #142b55, 7px 9px 10px #0007;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
[data-popular-carousel] > :is(.game-card, .popular-card):hover {
  transform: perspective(500px) rotateY(-28deg) rotateZ(-2deg) scale(.94);
  border-color: #f19a3c;
}
[data-popular-carousel] > :is(.game-card, .popular-card).is-centered {
  /* 0.94 × 1.15: exactly 15% larger than the surrounding cards. */
  transform: perspective(500px) rotateY(-28deg) rotateZ(-2deg) scale(1.081);
  border-color: #ffac50;
  box-shadow: 4px 5px 0 #214779, 0 12px 24px #0009, 0 0 15px #ff982435;
}
@media (max-width: 780px) {
  :is(.shelf--popular, .popular-track)[data-popular-carousel] { grid-auto-columns: calc((100% - 18px) / 4); }
}
@media (prefers-reduced-motion: reduce) {
  [data-popular-carousel] > :is(.game-card, .popular-card) { transition: none; }
}
.shelf--popular .game-card.is-flashing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 15%, #fff4ccbb 45%, #ffffffdd 50%, #ffc76b66 58%, transparent 85%);
  background-size: 250% 100%;
  box-shadow: inset 0 0 16px #ffd36c;
  animation: popular-card-flash .65s ease-out both;
}
@keyframes popular-card-flash {
  0% { opacity: 0; background-position: 100% 0; }
  25% { opacity: .85; }
  100% { opacity: 0; background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shelf--popular .game-card.is-flashing::after { display: none; animation: none; }
}