.runner-glow { background: radial-gradient(circle, rgba(255, 178, 71, .18), rgba(124, 92, 255, .12) 48%, transparent 70%); }
.runner-main { width: min(1100px, 100%); margin: 0 auto; padding: 20px 24px 80px; display: flex; flex-direction: column; align-items: center; }
.runner-heading { text-align: center; margin: 0 0 20px; }
.runner-heading .hero-eyebrow { margin-bottom: 5px; }
.runner-heading h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1; letter-spacing: -.035em; background: linear-gradient(90deg, #ffb247, #ff6f91, var(--accent)); background-clip: text; -webkit-background-clip: text; color: transparent; }

/* .runner-stage is handed to the game code as its container element -- it
   creates and appends its own .runner-container/.runner-canvas inside,
   sized up to a 600x150 base (Runner.defaultDimensions), shrinking to fit
   narrower screens but never taller. */
.runner-stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  height: 160px;
  padding: 5px;
  background: #f7f7f7;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
}

/* Starts clipped to just the character's width (Trex.config.WIDTH) so the
   first-jump intro -- which animates this element's width out to the full
   track -- actually has something to reveal. Without this, the container
   had no explicit size and just hugged its already-full-width canvas from
   the start, making the "intro" invisible (nothing was ever cropped). */
.runner-stage .runner-container {
  position: relative;
  width: 44px;
  height: 150px;
  overflow: hidden;
}
.runner-stage .runner-canvas { display: block; }
.runner-stage .controller { position: absolute; inset: 0; z-index: 1; }

.runner-help { display: flex; justify-content: center; gap: 30px; margin-top: 14px; padding: 12px 18px; color: var(--text-dim); font-size: .8rem; }
.runner-help b { color: var(--text); }
.runner-credit { margin-top: 18px; color: var(--text-dim); font-size: .7rem; text-align: center; max-width: 620px; }
.runner-credit a { color: var(--accent2); }

@media (max-width: 720px) {
  .runner-main { padding: 10px 12px 50px; }
  .runner-heading h1 { font-size: 2rem; }
  .runner-help { display: none; }
}