/* A cartridge library with enough room for the games' own visual identity. */
.arcade { padding-top: 39px; }
.arcade-heading { align-items: end; margin-bottom: 25px; }
.arcade-heading h2 { font-size: clamp(37px, 5vw, 59px); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.arcade-heading h2 > span { font-size: .58em; vertical-align: .14em; margin-left: 13px; }
.arcade-heading p { max-width: 200px; text-align: right; line-height: 1.4; }
#arcade .game-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 26px 22px; padding: 0 0 30px; margin: 0; border: 0; }
#arcade .game-cart { min-width: 0; padding: 10px 10px 14px; background: var(--cart); border: 1px solid #20271f26; border-bottom-width: 5px; border-radius: 13px 13px 7px 7px; box-shadow: inset 0 1px 0 #ffffff65, inset 4px 0 0 #ffffff12; text-decoration: none; transition: transform 180ms, box-shadow 180ms; }
#arcade .cart-art { position: relative; height: auto; aspect-ratio: 16 / 10; width: 100%; margin-bottom: 15px; overflow: hidden; background: #222631; border: 5px solid #30333a; border-top-width: 9px; border-bottom-width: 10px; border-radius: 6px 6px 11px 6px; box-shadow: 0 1px 0 #ffffff40; }
#arcade .cart-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
#arcade .cart-art--pixel img { image-rendering: pixelated; }
#arcade .cart-art--original { background: #dce6bf; }
#arcade .cart-art--original img { object-fit: cover; object-position: 50% 48%; }
#arcade .game-cart strong { font-size: clamp(18px, 2vw, 24px); font-weight: 650; line-height: 1.07; margin: 0 5px; letter-spacing: -.035em; }
#arcade .cart-action { margin: auto 5px 0; padding-top: 18px; font-size: 12px; opacity: .8; }
#arcade .cart-action > svg { display: grid; place-items: center; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#arcade .game-cart:focus-visible { outline: 3px solid #406570; outline-offset: 6px; }
#arcade .cart-hopper { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: 1fr auto; align-items: end; align-content: start; background: #c0cdac; }
#arcade .cart-hopper .cart-art { grid-column: 1 / -1; aspect-ratio: 1.42; margin-bottom: 18px; }
#arcade .cart-hopper strong { font-size: clamp(30px, 4vw, 51px); padding-bottom: 12px; }
#arcade .cart-hopper .cart-action { padding: 0 0 12px; min-width: 65px; gap: 18px; }
#arcade .cart-preview { top: -8px; right: 12px; font-size: 11px; }
.site-footer { flex-wrap: wrap; align-items: center; }
.site-footer .arrange-button { position: static; min-height: 44px; }
.site-footer > span:last-child { white-space: nowrap; }
@media (hover:hover) { #arcade a.game-cart:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: inset 0 1px 0 #ffffff65, 0 12px 20px -15px #20271f77; } }
@media (max-width: 680px) {
  .arcade-heading { align-items: center; margin-bottom: 20px; }
  .arcade-heading p { font-size: 13px; max-width: 115px; }
  #arcade .game-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  #arcade .game-cart { padding: 7px 7px 11px; border-radius: 10px 10px 6px 6px; }
  #arcade .game-cart strong { font-size: 17px; margin-inline: 2px; }
  #arcade .cart-art { margin-bottom: 12px; border-width: 3px; border-top-width: 6px; border-bottom-width: 7px; }
  #arcade .cart-action { margin-inline: 2px; padding-top: 12px; font-size: 11px; }
  #arcade .cart-hopper { grid-column: 1 / -1; grid-row: auto; }
  #arcade .cart-hopper .cart-art { aspect-ratio: 1.75; }
  #arcade .cart-hopper strong { font-size: 37px; }
  #arcade .cart-hopper .cart-action { padding-bottom: 11px; }
  .site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .site-footer > span { grid-column: 1 / -1; }
  .site-footer > nav { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { #arcade .game-cart { transition: none; } #arcade a.game-cart:hover, #arcade a.game-cart:focus-visible { transform: none; } }