/* Pages for games that don't have their own brand yet (Putt Reactor, One Breath 2.0, Pocket Salvage, Touchline,
   Wreck & Rescue). Loaded after site.css, which gives the studio's base look. A game moves to its own stylesheet once
   it has art, the way One Breath and Ashen Directive have.
   The menu bar matches the other games: a way back to Kelken Studios, then the game's own pages. */

.gamebar { position: sticky; top: 0; z-index: 50; background: rgba(4, 17, 29, 0.85); border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }
.gamebar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; min-height: 72px; padding-block: 12px; }
.gamebar a { text-decoration: none; }

.studio-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  border: 1px solid rgba(238, 244, 248, 0.22); color: var(--muted); font-size: 14px; font-weight: 600; transition: color .2s, border-color .2s; }
.studio-link img { width: 22px; height: 22px; }
.studio-link:hover { color: var(--mist); border-color: var(--teal); }

.game-name { color: var(--mist); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }

.game-menu { display: flex; gap: 4px; margin-left: auto; }
.game-menu a { padding: 8px 16px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 600; transition: color .2s, background-color .2s; }
.game-menu a:hover { color: var(--mist); background: var(--teal-soft); }
.game-menu a[aria-current="page"] { color: var(--navy); background: var(--teal); }

@media (max-width: 640px) {
  .game-menu { margin-left: 0; width: 100%; }
  .game-menu a { flex: 1; text-align: center; }
}

/* ---- Home */
.game-hero { padding: clamp(56px, 9vw, 110px) 0 clamp(64px, 9vw, 120px); }
.game-hero .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.game-hero h1 .accent { color: var(--teal); }
.game-hero .lede { margin: 24px 0 0; }
.hero-art { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7); }
.status { display: inline-block; margin-top: 32px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(45, 212, 191, 0.35);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
@media (max-width: 860px) {
  .game-hero .wrap { grid-template-columns: 1fr; }
}