.game-page { --game-dark: #1e3027; --game-light: #e8ede0; --game-accent: #436044; }
.theme-storm { --game-dark: #102b48; --game-light: #e2edf3; --game-accent: #245b73; }
.theme-hillside { --game-dark: #3b2d22; --game-light: #f0e5d0; --game-accent: #785326; }
.game-nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); }
.game-nav a { padding-block: 12px; white-space: nowrap; }

.game-hero {
  position: relative;
  isolation: isolate;
  color: var(--paper);
  background: var(--game-dark);
}
.game-hero-art {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 69% 50%;
}
.game-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, var(--game-dark) 0%, color-mix(in srgb, var(--game-dark) 94%, transparent) 23%, color-mix(in srgb, var(--game-dark) 65%, transparent) 42%, transparent 75%),
    linear-gradient(0deg, #0004, transparent 27%);
}
.game-hero-inner { min-height: clamp(560px, 49vw, 720px); display: flex; align-items: center; padding-block: 56px 64px; }
.game-hero-copy { width: min(100%, 515px); }
.game-hero h1 img { width: min(100%, 385px); height: auto; filter: drop-shadow(0 7px 14px #0006); }
.theme-storm .game-hero h1 img { width: min(100%, 415px); }
.game-headline { margin-top: 22px; font: clamp(2.1rem, 3.8vw, 3.65rem)/1 var(--display); letter-spacing: -.05em; text-wrap: balance; }
.game-intro { max-width: 360px; margin-top: 17px; font-size: clamp(1rem, 1.45vw, 1.16rem); color: #f8f3e9; }
.game-hero .button { margin-top: 23px; }

.game-overview, .game-gallery, .other-games { padding-block: clamp(54px, 7vw, 92px); }
.game-overview .eyebrow { color: var(--game-accent); margin-bottom: 12px; }
.game-section-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px 64px; align-items: end; }
.game-section-heading h2, .other-games h2 { font: clamp(2.5rem, 5.2vw, 4.6rem)/1.02 var(--display); letter-spacing: -.055em; text-wrap: balance; }
.game-section-heading p { color: var(--muted); max-width: 46ch; }
.game-features { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.game-features li { background: #fffaf0; border-radius: 0 0 10px 10px; padding: 22px; border-top: 3px solid var(--game-accent); }
.game-features h3 { font: clamp(1.45rem, 2.6vw, 2.15rem)/1.1 var(--display); letter-spacing: -.025em; }
.game-features p { margin-top: 10px; color: var(--muted); }

.game-gallery { background: var(--game-light); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 28px; }
.gallery-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.art-link { display: grid; grid-template-rows: 1fr auto; overflow: hidden; border-radius: 11px; background: var(--game-dark); color: var(--paper); text-decoration: none; }
.art-link img { width: 100%; height: auto; }
.theme-ark .gallery-grid { grid-template-columns: 1.25fr 1fr; align-items: start; }
.gallery-caption { display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px; font-weight: 650; }
.gallery-caption span { color: var(--gold); }
.art-link:hover .gallery-caption { text-decoration: underline; text-underline-offset: .2em; }
.art-dialog { width: min(92vw, 1040px); max-height: 94dvh; padding: 0; border: 0; border-radius: 12px; background: var(--game-dark); color: var(--paper); }
.art-dialog::backdrop { background: #0b1c28dc; }
.art-dialog img { margin: auto; width: auto; max-width: 100%; max-height: 78dvh; object-fit: contain; }
.art-dialog h2 { padding: 14px 20px; font: 1.4rem/1.15 var(--display); }
.art-dialog form { position: absolute; top: 12px; right: 12px; }
.art-dialog button { border: 0; border-radius: 50%; width: 44px; height: 44px; background: var(--paper); color: var(--ink); font: 1.65rem/1 system-ui; cursor: pointer; }
.art-dialog button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.other-games h2 { font-size: clamp(2rem, 4vw, 3.4rem); text-wrap: wrap; }
.game-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.game-links a { padding: 10px 15px; border: 1px solid #b5ab96; border-radius: 5px; font-weight: 650; text-decoration: none; }
.game-links a:hover { background: var(--game-light); }
.game-links span { margin-left: 5px; color: var(--game-accent); }

@media (max-width: 700px) {
  .game-hero { display: flex; flex-direction: column; }
  .game-hero-art { position: relative; z-index: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; order: 1; object-position: center; }
  .game-hero::before { display: none; }
  .game-hero-inner { min-height: auto; padding-block: 35px 34px; }
  .game-hero h1 img { width: min(100%, 300px); }
  .theme-storm .game-hero h1 img { width: min(100%, 320px); }
  .game-section-heading, .game-features, .gallery-grid.three { grid-template-columns: 1fr; }
  .game-features, .gallery-grid { gap: 14px; }
  .game-nav .nav-studio { display: none; }
}

@media (max-width: 470px) {
  .game-page .studio-home { width: 117px; }
  .game-nav { gap: 12px; }
  .game-nav a { font-size: .78rem; }
  .game-headline br { display: none; }
  .gallery-grid, .theme-ark .gallery-grid { grid-template-columns: 1fr; }
}