/* ===== Games ===== */
:root{
  --radius: 14px;
}

/* Header */
.games-head{ margin-bottom: var(--space-3); }
.games-head h2{
  margin:0 0 var(--space-1);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 800;
}
.games-head .sub{
  margin:0 0 var(--space-2);
  color: #657497;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.45;
}

/* Grid */
.games-grid{
  --card-min: 300px;
  display:grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
}

/* Card */
.game-card{ appearance:none; background:transparent; border:0; padding:0; display:block; text-align:left; cursor:pointer; }
.game-media{
  position:relative; aspect-ratio: 16/9;
  border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; background:#f6f7fb;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.game-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .2s ease; }
.game-card:hover .game-media{ box-shadow: 0 10px 28px rgba(2,8,23,.10); }
.game-card:hover .game-media img{ transform: scale(1.02); }
.game-card:focus-visible .game-media,
.game-card.is-picked .game-media{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 28%, transparent);
}

.game-body{ padding: 8px 2px 0; }
.game-title{
  margin:0; font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.25;
}
.game-card:hover .game-title{ color: var(--brand); }
.game-meta{ display:none; }

/* Picks */
.picks{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px; }
.pick-pill{ font-size:12px; padding:6px 10px; border-radius:999px; background:#FFF; border:1px solid var(--border); }

/* Mobile */
@media (max-width: 900px){
  .games-grid{ --card-min: 240px; gap: var(--space-2); }
  .game-title{ font-size: 17px; }
}

.usk6{
background-image: url("../../assets/USK/USK6.png");
width: 40px;
height: 40px;
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
background-size: contain;
}
.usk12{
background-image: url("../../assets/USK/USK12.png");
width: 40px;
height: 40px;
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
background-size: contain;
}
.usk16{
background-image: url("../../assets/USK/USK16.png");
width: 40px;
height: 40px;
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
background-size: contain;
}