/* Single-game page layout — TZ §6.3. */

[data-page="game"] main { padding-bottom: var(--space-64); }

.game-page__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}

.game-page__provider {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.game-page__title {
  margin: 0;
  font-size: clamp(var(--fs-32), 4vw + 1rem, var(--fs-72));
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.game-page__tags {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.game-page__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.game-page__tag--new     { background: rgba(46, 204, 113, 0.15); color: var(--color-success); border-color: var(--color-success); }
.game-page__tag--hot     { background: rgba(200, 16, 46, 0.15);  color: var(--color-red-light); border-color: var(--color-red); }
.game-page__tag--jackpot { background: var(--color-gold-soft);   color: var(--color-gold-light); border-color: var(--color-gold); }

/* ---------------- Player placeholder ---------------- */

.game-player {
  position: relative;
  border-radius: var(--radius-16);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-deep);
  aspect-ratio: 16 / 9;
  margin-block: var(--space-16) var(--space-32);
  box-shadow: var(--shadow-lg);
}

.game-player__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.game-player__bg svg { width: 100%; height: 100%; display: block; }

.game-player__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(8, 22, 14, 0.45) 0%, rgba(8, 22, 14, 0.85) 80%),
    linear-gradient(180deg, rgba(8, 22, 14, 0.2), rgba(8, 22, 14, 0.7));
}

.game-player__center {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-24);
  gap: var(--space-12);
}

.game-player__brand {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  opacity: 0.85;
}

.game-player__name {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-32), 5vw, var(--fs-56));
  font-weight: var(--fw-black);
  margin: 0;
  color: var(--color-text-primary);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.game-player__hint {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-14);
}

.game-player__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-16);
  justify-content: center;
}

/* ---------------- Meta block ---------------- */

.game-meta {
  margin-block: var(--space-32);
}

.game-meta__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  margin: 0;
  padding: 0;
}
@media (min-width: 640px)  { .game-meta__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .game-meta__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.game-meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-20, var(--space-16));
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-12);
  margin: 0;
}

.game-meta__item dt {
  margin: 0;
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.game-meta__item dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.game-meta__item--gold {
  background: linear-gradient(135deg, var(--color-gold-soft), var(--color-bg-secondary));
  border-color: var(--color-gold);
}
.game-meta__item--gold dd {
  color: var(--color-gold);
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}

/* ---------------- Description ---------------- */

.game-description {
  margin-block: var(--space-48);
  max-width: 70ch;
}
.game-description h2 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  margin-bottom: var(--space-12);
}
.game-description p {
  color: var(--color-text-secondary);
  margin: 0;
}

.game-description__features {
  list-style: none;
  padding: 0;
  margin: var(--space-16) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.game-description__features li {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-12);
  font-size: var(--fs-12);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------------- Similar games ---------------- */

.game-similar {
  margin-top: var(--space-48);
}
.game-similar .section__header { margin-bottom: var(--space-24); }

/* Empty state alignment when game not found */
.game-page--empty {
  padding-top: var(--space-32);
}