/* Game switcher tabs + games page cards (includes/game-tabs.php, includes/game-cards.php) */

.game-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 1.4em 0 0.4em;
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

.game-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.game-tab:hover { border-color: var(--g); }
.game-tab.is-active {
  border-color: var(--g);
  background: rgba(255, 255, 255, 0.08);
  background: color-mix(in srgb, var(--g) 18%, transparent);
  color: #fff;
  font-weight: 500;
}
.game-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g); }

.game-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  margin: 0 0 3em;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  text-align: left;
}

.game-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: #272833;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.game-card:hover {
  transform: translateY(-4px);
  border-color: var(--g);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.game-card-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1c1d26;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g) 32%, #1c1d26), #1c1d26 75%);
}
.game-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-card-initial { color: var(--g); font-size: 60px; font-weight: 700; line-height: 1; }

.game-card-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.game-card-name { color: #fff; font-size: 19px; font-weight: 500; line-height: 1.3; }
.game-card-about { color: rgba(255, 255, 255, 0.65); font-size: 14px; font-weight: 400; line-height: 1.45; }
.game-card-go { margin-top: 8px; color: var(--g); font-size: 13px; font-weight: 500; }