/* Arcade grid — games are the void, quoted into the paper page (see base.css).
   Loaded only by the two home pages; all colours come from base.css tokens, plus
   fixed dark-tile colours because a game cabinet is always the void. */

.arc-dek { margin: -4px 0 20px; color: var(--muted); max-width: 54ch; font-size: 16px; }

.games {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px;
}
.game {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--void); border: 1px solid var(--void-rule);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.game .hit { position: absolute; inset: 0; z-index: 3; }
.game .hit:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 12px; }

.game .shot { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #05040f; }
.game .shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }

.game .soon {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(62% 52% at 50% 45%, color-mix(in srgb, var(--ac) 28%, transparent), transparent 72%);
}
.game .soon .orb {
  width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--ac) 92%, #fff), color-mix(in srgb, var(--ac) 42%, #0a0820));
  box-shadow: 0 0 26px color-mix(in srgb, var(--ac) 60%, transparent);
}

/* the day-slot number on an unrevealed cabinet (10 games, 10 days) */
.game .slot { position: absolute; left: 10px; top: 9px; z-index: 2;
  font: 600 12px/1 var(--mono); letter-spacing: .08em; color: #7d86a8; }

.game .cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 11px 12px 13px; }
.game .gn { font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--void-fg); }
.game .gn.mute { color: #5b6488; letter-spacing: .28em; }
.game .gt { margin-top: 5px; font-size: 12px; line-height: 1.35; color: #8a93ad; }
.game .best { margin-top: 6px; font: 600 10px/1 var(--mono); letter-spacing: .05em; color: var(--ac); }
.game .st {
  flex: none; font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #8a93ad; border: 1px solid var(--void-rule); border-radius: 999px; padding: 4px 7px;
}
.game .st.live { color: #05060e; background: #5cf2a6; border-color: transparent; }
.game .st.next { color: #05060e; background: #e8a33d; border-color: transparent; }

.game:hover, .game:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ac) 60%, var(--void-rule));
  box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--ac) 75%, transparent);
}
.game:hover .shot img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) { .game, .game .shot img { transition: none; } }