/* =============================================================
   IC7 GAME — Game detail page
   ============================================================= */

.gd-hero {
  position: relative;
  min-height: 56vh;
  display: flex; align-items: flex-end;
  padding: 140px 0 60px;
  overflow: hidden;
}
.gd-hero__bg { position: absolute; inset: 0; z-index: 0; }
.gd-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(0.5); transform: scale(1.1); }
.gd-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-bg) 0%, rgba(10,10,12,0.4) 100%); }
.gd-hero__content { position: relative; z-index: 2; }
.gd-badge {
  display: inline-block; background: var(--color-red-500); color: #fff;
  padding: 5px 14px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
}
.gd-hero h1 { font-size: clamp(2.5rem, 8vw, var(--text-6xl)); color: #fff; text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* Info split */
.gd-split { display: grid; grid-template-columns: 400px 1fr; gap: var(--space-12); align-items: start; }
.gd-thumb {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-glow); border: 1px solid var(--color-border-red);
  background: var(--color-surface);
}
.gd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gd-info__cat { color: var(--color-red-400); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-sm); font-weight: 600; }
.gd-info h1, .gd-info h2 { font-size: var(--text-3xl); color: #fff; margin: var(--space-2) 0 var(--space-4); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.gd-rating { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.gd-rating__stars { color: var(--color-red-500); letter-spacing: 2px; }
.gd-rating span { color: var(--color-white-65); font-size: var(--text-sm); }
.gd-info p { color: var(--color-white-65); margin-bottom: var(--space-4); }

.gd-specs { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; }
.gd-specs td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.gd-specs td:first-child { color: var(--color-white-38); text-transform: uppercase; letter-spacing: var(--tracking-wide); width: 45%; }
.gd-specs td:last-child { color: #fff; font-weight: 600; }

@media (max-width: 800px) { .gd-split { grid-template-columns: 1fr; gap: var(--space-8); } .gd-thumb { max-width: 320px; margin: 0 auto; } }

/* how to play steps (reuse .steps from home via inline) */
.gd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-8); }
.gd-step { text-align: center; padding: var(--space-6); }
.gd-step__num { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 700; color: var(--color-red-glow); line-height: 1; }
.gd-step h3 { font-size: var(--text-lg); color: #fff; margin: var(--space-2) 0; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.gd-step p { font-size: var(--text-sm); color: var(--color-white-65); }
@media (max-width: 767px) { .gd-steps { grid-template-columns: 1fr; } }