/* The same sixteen-game roster, scaled for the cover and comparison cards. */
@media (min-width: 801px) {
  .apple-edition #opening .cover-game-side { top: 20%; }
}
.apple-edition #opening .cover-game-icons.mobile-roster {
  max-width: min(390px, 31svh);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, .7vw, 12px);
}

.apple-edition :is(#payments, #payments-arcade) .mobile-roster {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 14px;
  align-content: center;
}

.apple-edition :is(#payments, #payments-arcade) .mobile-roster figure {
  width: 100%;
  max-width: 106px;
  justify-self: center;
}

.apple-edition :is(#payments, #payments-arcade) .mobile-roster figcaption {
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

@media (min-width: 801px) and (max-height: 850px) {
  .apple-edition :is(#payments, #payments-arcade) .compare-side {
    min-height: 0;
    padding: 24px 26px;
  }
  .apple-edition :is(#payments, #payments-arcade) .compare-side h4 { margin-bottom: 24px; }
  .apple-edition :is(#payments, #payments-arcade) .compare-side > p { padding-top: 20px; }
  .apple-edition :is(#payments, #payments-arcade) .mobile-roster { gap: 12px; min-height: 0; }
  .apple-edition :is(#payments, #payments-arcade) .mobile-roster figure { max-width: 66px; }
  .apple-edition :is(#payments, #payments-arcade) .mobile-roster figcaption { font-size: 10px; margin-top: 6px; }
}

@media (max-width: 800px) {
  .apple-edition #opening .cover-game-icons.mobile-roster { max-width: 100%; gap: 7px; }
  .apple-edition :is(#payments, #payments-arcade) .mobile-roster { gap: 18px 10px; }
}