/* ═══ SHIPPED GAMES ═════════════════════════════════════════════════════ */

.game-grid {
  display: grid;
  gap: clamp(1rem, 1.9vw, 1.6rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px)  { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* First card spans wide on large screens */
@media (min-width: 1120px) {
  .game-card--hero { grid-column: span 2; }
}

.game-card {
  --accent: var(--signal);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: border-color var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out);
}
.game-card:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow: 0 22px 60px rgba(0,0,0,.6),
              0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Accent glow that tracks the pointer */
.game-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
  transition: opacity var(--t-base) var(--e-out);
}
.game-card:hover::before { opacity: 1; }

/* ── Media ─────────────────────────────────────────────── */
.game-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-800);
  flex: none;
}
.game-card--hero .game-media { aspect-ratio: 16 / 10; }

.game-media img:not(.game-icon) {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform var(--t-lazy) var(--e-out), filter var(--t-lazy) var(--e-out);
  filter: saturate(.82) contrast(1.04);
}
.game-card:hover .game-media img:not(.game-icon) { transform: scale(1.11); filter: saturate(1.05) contrast(1.06); }

.game-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--ink-900) 88%, transparent) 88%, var(--ink-900) 100%);
}

/* Scan sweep on hover */
.game-media i.sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 900ms var(--e-out);
}
.game-card:hover .game-media i.sweep { transform: translateX(120%); }

/* Status chip floats over media */
.game-status {
  position: absolute;
  top: .8rem; left: .8rem;
  z-index: 3;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--void) 70%, transparent);
}

.game-players {
  position: absolute;
  top: .8rem; right: .8rem;
  z-index: 3;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--void) 70%, transparent);
}

/* Game icon badge — straddles the media/body seam, anchored to the body so
   the media's overflow:hidden cannot clip it. */
.game-icon {
  position: absolute;
  left: 1.15rem;
  top: -31px;
  z-index: 4;
  width: 62px; height: 62px;
  border-radius: 16px;
  border: 2px solid var(--ink-700);
  box-shadow: var(--sh-md);
  object-fit: cover;
  background: var(--ink-800);
  transition: transform var(--t-base) var(--e-spring), border-color var(--t-base);
}
.game-card--hero .game-icon { width: 76px; height: 76px; top: -38px; }
.game-card:hover .game-icon {
  transform: translateY(-4px) rotate(-4deg) scale(1.06);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ── Body ──────────────────────────────────────────────── */
.game-body {
  position: relative;
  z-index: 1;
  padding: 2.5rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .75rem;
}
.game-card--hero .game-body { padding: 3.1rem 1.6rem 1.5rem; }

.game-name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-stretch: 108%;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--bone);
}
.game-card--hero .game-name { font-size: clamp(1.6rem, 3vw, 2.4rem); }

.game-role {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

.game-blurb {
  font-size: var(--fs-sm);
  color: var(--bone-faint);
  line-height: 1.58;
  text-wrap: pretty;
}
.game-card:not(.game-card--hero) .game-blurb {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metric strip */
.game-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--hairline);
}
.game-metric { display: flex; flex-direction: column; gap: .1rem; }
.game-metric b {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.game-card--hero .game-metric b { font-size: 1.42rem; }
.game-metric span {
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bone-ghost);
}

/* Tech tags */
.game-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.game-tags span {
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-ghost);
  padding: .22rem .5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.game-card:hover .game-tags span { color: var(--bone-faint); border-color: var(--hairline-2); }

/* Footer row */
.game-foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-top: .3rem;
}
.game-play {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.05rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--hairline-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone);
  transition: background var(--t-base), border-color var(--t-base),
              color var(--t-base), transform var(--t-fast) var(--e-snap);
}
.game-play:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--void);
  transform: translateY(-2px);
}
.game-play:active { transform: scale(.95); }
.game-play svg { width: 13px; height: 13px; }

.game-lab {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-ghost);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color var(--t-fast), gap var(--t-fast);
}
.game-lab:hover { color: var(--accent); gap: .65rem; }

/* ── Small screens ─────────────────────────────────────── */
@media (max-width: 620px) {
  .game-metrics { gap: .5rem .9rem; }
  .game-metric b { font-size: .95rem; }
  .game-foot { flex-wrap: wrap; }
}