/* Game promotion extends the studio's shared palette and typography. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.game-landing { padding-top: 12px; }
.game-breadcrumbs { max-width: 1248px; margin: 0 auto; padding: 0 24px; }
.game-hero { position: relative; isolation: isolate; max-width: 1360px; min-height: 620px; margin: 24px auto 0; display: flex; align-items: center; overflow: hidden; border-block: 2px solid var(--track); background: #0a1528; }
.game-key-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: -2; }
.game-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,7,15,.96), rgba(7,7,15,.85) 30%, rgba(7,7,15,.2) 65%, transparent); }
.game-hero-deeper .game-key-art { object-fit: cover; image-rendering: pixelated; }
.game-hero-copy { padding: 56px; max-width: 660px; }
.game-eyebrow { color: var(--cyan); font-size: 22px; margin: 0 0 18px; letter-spacing: .04em; }
.game-landing .game-hero h1 { margin: 0 0 26px; font-size: clamp(36px, 5vw, 62px); color: var(--text); line-height: 1.4; }
.game-logo { display: block; max-width: 290px; max-height: 130px; width: auto; height: auto; object-fit: contain; }
.game-landing .game-hero-ecofight .game-logo { width: 310px; max-width: 100%; }
.game-promise { font-family: var(--pixel); font-size: clamp(16px, 2vw, 24px); line-height: 1.65; margin: 0 0 18px; color: #fff; }
.game-pitch { font-size: 26px; line-height: 1.3; max-width: 36ch; margin: 0 0 30px; color: #d8e8e7; }
.game-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.game-actions .btn, .game-closing .btn { font-size: 12px; line-height: 1.6; }
.game-secondary { color: var(--text); font-size: 22px; text-underline-offset: 6px; }
.game-status { margin: 24px 0 0; font-size: 20px; color: #bdd4c6; }
.art-credit { position: absolute; bottom: 12px; right: 16px; font-size: 17px; padding: 3px 8px; background: #07070fe6; color: #d4dfd8; }
.game-highlights { max-width: 1248px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 2px solid var(--track); }
.game-highlights > div { padding: 30px 24px; border-right: 1px solid var(--track); }
.game-highlights > div:last-child { border-right: 0; }
.game-highlights strong { display: block; color: var(--yellow); font: 16px/1.6 var(--pixel); margin-bottom: 8px; }
.game-highlights span { color: var(--muted); font-size: 23px; }
.game-content { max-width: 1120px; margin: 0 auto; padding: 72px 32px; }
.game-content > section { margin-bottom: 72px; }
.game-content h2 { font-size: clamp(18px,2.4vw,25px); line-height: 1.65; }
.game-content p { font-size: 25px; line-height: 1.45; }
.game-intro { max-width: 840px; }
.game-landing .feature-grid { gap: 20px; margin-top: 32px; }
.game-landing .feature-grid > div { border-top: 3px solid var(--cyan); background: var(--panel); padding: 20px; }
.game-landing .feature-grid h3 { color: var(--text); }
.game-landing .feature-grid p { font-size: 23px; color: var(--muted); }
.game-screens .gallery { margin-top: 32px; }
.game-screens .gallery a { background: #101326; border: 2px solid var(--track); }
.game-screens figcaption { font-size: 21px; line-height: 1.3; }
.game-details { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; margin: 0 0 72px; }
.game-details h2 { font-size: 17px; }
.game-details p { color: var(--muted); font-size: 23px; }
.game-closing { border: 2px solid var(--track); border-top: 3px solid var(--green); padding: 40px; background: var(--panel); text-align: center; }
.game-closing p { max-width: 650px; margin: 20px auto 28px; }
@media (max-width: 950px) {
  .game-breadcrumbs { padding: 0 20px; }
  .game-hero { display: block; min-height: 0; margin-top: 16px; }
  .game-key-art { position: relative; display: block; height: 240px; object-position: right center; }
  .game-hero::after { background: linear-gradient(0deg,#07070f,transparent); inset: 130px 0 auto; height: 110px; }
  .game-hero-copy { padding: 24px 24px 48px; }
  .game-hero-copy .game-eyebrow { font-size: 20px; }
  .game-landing .game-hero h1 { font-size: 36px; margin-bottom: 20px; }
  .game-logo { max-height: 96px; max-width: 240px; }
  .game-pitch { font-size: 24px; }
  .game-actions { gap: 24px; }
  .art-credit { top: 10px; bottom: auto; font-size: 16px; }
  .game-highlights { grid-template-columns: 1fr; margin: 0 24px; }
  .game-highlights > div { border-right: 0; border-bottom: 1px solid var(--track); padding: 22px 0; }
  .game-highlights > div:last-child { border-bottom: 0; }
  .game-highlights strong { font-size: 14px; margin-bottom: 4px; }
  .game-content { padding: 48px 24px; }
  .game-content > section { margin-bottom: 48px; }
  .game-details { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .game-closing { padding: 28px 20px; }
  .game-closing .btn { font-size: 10px; }
}

@media (max-width: 700px) {
  .game-key-art { height: 180px; }
  .game-hero::after { inset: 100px 0 auto; height: 80px; }
  .game-hero-copy { padding: 20px 24px 32px; }
  .game-hero-copy .game-eyebrow { margin-bottom: 14px; }
  .game-landing .game-hero h1 { margin-bottom: 18px; }
  .game-logo { max-height: 78px; max-width: 220px; }
  .game-landing .game-hero-ecofight .game-logo { width: 260px; }
  .game-promise { margin-bottom: 16px; }
  .game-pitch { font-size: 22px; margin-bottom: 22px; }
}