/* 3D programme footage; keep the existing Django page and responsive structure. */
:root { --green: #dfb772; --gold: #f3d39a; --surface: #1b1428; --surface-2: #251a36; --line: rgba(221,193,146,.2); }
body { background: #100c18; }
.game-header { background: rgba(16,12,24,.94); }
.game-hero { min-height: 940px; background: #100c18; }
.game-hero > img { object-position: 70% center; }
.hero-overlay { background: linear-gradient(90deg,rgba(16,12,24,.98) 0%,rgba(16,12,24,.88) 38%,rgba(16,12,24,.12) 70%,rgba(16,12,24,.15)); }
.hero-copy { max-width: 610px; }
.hero-copy .lead { max-width: 530px; line-height: 1.85; }
.download-button,.mobile-download { background: #624383; border-color: #caa1e7; }
.header-download { background: rgba(109,72,143,.3); }
.download-panel,.guide-section,.feature-band { background: #171020; }
.preview-player { aspect-ratio: auto; }
.preview-player video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #100c18; }
.video-caption { color: #bdb1ca; font-size: 12px; line-height: 1.7; }
.moments-grid img { aspect-ratio: 9/16; object-fit: contain; background: #100c18; }
.gameplay-capture { margin: 32px 0; padding: 22px; border: 1px solid rgba(221,193,146,.2); background: #16111f; }
.gameplay-capture img { display: block; max-height: 620px; max-width: 100%; margin: auto; object-fit: contain; }
.gameplay-capture figcaption { margin-top: 14px; color: #bdb1ca; font-size: 13px; text-align: center; }
@media(max-width:840px) {
  .game-hero { min-height: 920px; padding-top: 80px; }
  .game-hero > img { opacity: .45; object-position: 72% center; }
  .hero-overlay { background: linear-gradient(90deg,rgba(16,12,24,.94),rgba(16,12,24,.68)); }
  .hero-copy { max-width: 580px; }
  .moments-grid img { width: auto; max-width: 100%; max-height: 620px; margin: auto; }
}