/* Real, shared interactions for both visual editions. */
.brand, .community-brand { position: relative; }
.brand img, .community-brand img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.carousel:focus-visible { outline: 2px solid var(--pink); outline-offset: 8px; }
.banner-stage { touch-action: pan-y; cursor: grab; }
.banner-stage:active { cursor: grabbing; }
.game-banner img { object-fit: contain; user-select: none; -webkit-user-drag: none; }
.carousel-arrow { top: var(--stage-center, 305px); transform: translateY(-50%); }
.carousel-controls { display: flex; justify-content: center; align-items: center; gap: 16px; padding-top: 24px; }
.carousel-controls .pagination { padding: 0; gap: 4px; }
.carousel-controls .pagination button { display: grid; place-items: center; width: 32px; height: 36px; padding: 0; }
.slide-counter { min-width: 38px; font-size: 13px; color: #bfc4d8; font-variant-numeric: tabular-nums; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--pink-soft); outline-offset: 4px; }
.game-library { padding-bottom: 44px; min-height: 0; }
.avatar-wall { --avatar-size: clamp(90px, 8.5vw, 176px); --avatar-gap: 16px; position: relative; inset: auto; margin-top: 38px; width: 100%; overflow: hidden; gap: 16px; }
.avatar-row { display: flex; width: max-content; gap: 0; justify-content: flex-start; animation: icon-drift var(--marquee-duration, 110s) linear infinite; will-change: transform; }
.avatar-set { display: flex; flex: 0 0 auto; gap: var(--avatar-gap); padding-right: var(--avatar-gap); }
.avatar-row img { flex: 0 0 var(--avatar-size); width: var(--avatar-size); height: var(--avatar-size); max-width: none; border-radius: 20px; object-fit: contain; }
.avatar-row.row-two { animation-direction: reverse; animation-delay: -4s; }
.avatar-wall.motion-paused .avatar-row { animation-play-state: paused; }
@keyframes icon-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.feature-tags-card { gap: 28px; }
@media (max-width: 767px) {
  .hot-games { min-height: 0; height: auto; padding-bottom: 24px; }
  .section-heading { line-height: 1.4; }
  .carousel-arrow { display: grid; top: var(--stage-center, 97px); width: 30px; height: 38px; font-size: 28px; border-radius: 7px; padding: 0 0 3px; }
  .carousel-arrow.previous { left: 20px; }
  .carousel-arrow.next { right: 20px; }
  .carousel-controls { gap: 8px; padding-top: 10px; }
  .carousel-controls .pagination { gap: 0; }
  .carousel-controls .pagination button { width: 27px; height: 32px; }
  .carousel-controls .pagination button::before { width: 7px; height: 7px; }
  .slide-counter { font-size: 11px; }
  .game-library { height: auto; min-height: 0; padding: 24px 0 30px; }
  .library-heading { padding: 0 20px; }
  .library-heading h2 { font-size: clamp(18px, 5vw, 23px); }
  .avatar-wall { --avatar-size: 72px; --avatar-gap: 10px; inset: auto; margin-top: 24px; gap: 10px; }
  .avatar-row { width: max-content; gap: 0; }
  .avatar-row img, .avatar-row img:nth-child(n+7) { display: block; width: var(--avatar-size); height: var(--avatar-size); border-radius: 12px; }
  .feature-tags-card, .feature-app-card { height: auto; }
  .feature-tags-card { gap: 0; }
  .feature-art { height: auto; object-fit: contain; }
  .feature-copy p { line-height: 1.6; }
  .mobile-sticky { min-height: 68px; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-wall .avatar-row { animation-play-state: paused; }
}