/* ===== מרכז המשחקים ===== */
#main-content {
  max-width: 70em;
  margin: 0 auto;
  padding: 2em 1.2em;
}

.games-head {
  margin-bottom: 1em;
  text-align: center;
}

.games-title {
  margin: 0 0 .2em;
  font-size: 2em;
  letter-spacing: .02em;
}

.games-sub {
  margin: 0;
  color: #93a0b7; /* צבע אפור עדין */
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
  gap: 1em;
}

.game-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: .1em solid #263047;
  border-radius: 1.2em;
  box-shadow: 0 1.2em 3em rgba(0,0,0,.35);
  overflow: hidden;
  min-height: 18em;
}

.game-media {
  background: #0f1320;
  border-bottom: .1em solid #263047;
}

.game-media img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.game-body {
  padding: 1em 1.2em;
}

.game-title {
  margin: 0 0 .2em;
  font-size: 1.2em;
}

.game-desc {
  margin: 0 0 .6em;
  color: #93a0b7;
}

.game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  padding: 0;
  margin: 0;
  list-style: none;
}

.game-tags li {
  border: .1em solid #263047;
  background: #0e1628;
  padding: .3em .6em;
  border-radius: .6em;
  font-size: .9em;
  color: #cfe7ff;
}

.game-actions {
  padding: 1em 1.2em;
  border-top: .1em solid #263047;
  display: flex;
  justify-content: flex-end;
  gap: .6em;
}

.btn {
  cursor: pointer;
  border: .1em solid #263047;
  background: #0f1320;
  color: #e8ecf5;
  padding: .8em 1.1em;
  border-radius: .9em;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover {
  border-color: #335;
}

.btn-primary {
  background: linear-gradient(180deg, #4da3ff, #2f7bd8);
  border-color: transparent;
  color: #02101f;
}

.btn-ghost {
  background: transparent;
  color: #93a0b7;
}

.is-soon {
  position: relative;
  opacity: .92;
}

.is-soon .btn {
  pointer-events: none;
  opacity: .7;
}

.game-ribbon {
  position: absolute;
  inset-inline-start: -3.2em;
  top: 1.2em;
  background: linear-gradient(180deg, #ff6a88, #ff3b6c);
  padding: .4em 3.6em;
  transform: rotate(-18deg);
  color: #fff;
  border-radius: .6em;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 .6em 2em rgba(0,0,0,.35);
}

@media (max-width: 36em) {
  .games-title {
    font-size: 1.6em;
  }
}