/* gbc_cart.css -- a Shiny Gen GBC game drawn as its cartridge (with gbc_cart.js:
   read that file's header for where this is used and how it is shared).
   The label's rect is RetroConsoleDef.CART_GBC "sticker" (27.5, 69, 160 x 144) over
   its "body" (212 x 244), as percentages. The plastic's colour is --gbc-cart, set
   per game by gbc_cart.js from the game's own picture (the app's rule). */
.gbc-cart-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(132px, 29%), 1fr));
  gap: 10px; align-items: start; justify-items: center;
}
.gbc-cart {
  position: relative; display: block; box-sizing: border-box; width: 100%; max-width: 212px;
  aspect-ratio: 212 / 244; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: inherit; font: inherit; text-decoration: none; cursor: pointer; overflow: visible;
  opacity: 0; transition: opacity .18s linear, transform .12s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.gbc-cart.gbc-cart-ready { opacity: 1; }
.gbc-cart:hover, .gbc-cart:focus-visible { transform: translateY(-3px); }
.gbc-cart:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }
.gbc-cart:disabled { cursor: progress; }
.gbc-cart.gbc-cart-busy { animation: gbc-cart-busy .9s ease-in-out infinite; }
@keyframes gbc-cart-busy { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.gbc-cart-shell {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.gbc-cart-body { fill: var(--gbc-cart, #5b6170); }
.gbc-cart-rim { stroke: rgba(0, 0, 0, .28); stroke-width: 1.5; }
.gbc-cart-lit { stroke: rgba(255, 255, 255, .28); stroke-width: 2; stroke-linecap: round; }
.gbc-cart-foot { fill: rgba(0, 0, 0, .14); }
.gbc-cart-dent { fill: rgba(0, 0, 0, .17); }
.gbc-cart-bed { fill: rgba(0, 0, 0, .34); }
.gbc-cart .gbc-cart-label {
  position: absolute; left: 12.9717%; top: 28.2787%; width: 75.4717%; height: 59.0164%;
  max-width: none; margin: 0; padding: 0; border: 0; border-radius: 1.5%; aspect-ratio: auto;
  display: block; object-fit: cover; object-position: center; image-rendering: pixelated; background: #000;
}
.gbc-cart.gbc-cart-noart .gbc-cart-label { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .gbc-cart { transition: none; }
  .gbc-cart:hover, .gbc-cart:focus-visible { transform: none; }
  .gbc-cart.gbc-cart-busy { animation: none; opacity: .6; }
}