/* =========================================================================
   Game field - key-art banners floating in a CSS 3D scene behind a hero
   Shared by the home hero (placed by home.css) and the games hub hero
   (placed by games.css). game-field.js positions every banner per frame;
   the banners are written by .claude/games/sync_games.py.
   --vx/--vy is the vanishing point, --card-w a banner's resting width.
   ========================================================================= */
.game-field {
  --vx: 70%; --vy: 50%; --card-w: clamp(140px, 13vw, 230px);
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  perspective: 1000px; perspective-origin: var(--vx) var(--vy);   /* 1000: PERSPECTIVE in game-field.js */
}
.game-field__card {
  position: absolute; left: var(--vx); top: var(--vy);
  width: var(--card-w); height: auto; aspect-ratio: 4 / 5;
  margin: calc(var(--card-w) * -.625) 0 0 calc(var(--card-w) * -.5);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgba(20,18,15,.08), 0 26px 50px -20px rgba(20,18,15,.45);
  opacity: 0;      /* game-field.js fades each one in; without it the field stays empty */
  backface-visibility: hidden; will-change: transform, opacity;
  display: none;   /* game-field.js picks a few titles per visit; the rest are never fetched */
}
.game-field__card[data-on] { display: block; }