/* Forest Skills page — the brand wrapper only.
   The game lives in an iframe and keeps its own night palette and its own
   CSS reset, which is why it is framed rather than inlined: the two design
   systems would otherwise fight over `body`, link colour and font stack. */

.game-intro { padding-block: var(--gap) 1.5rem; }
.game-intro h1 { margin-bottom: 0.75rem; }
.game-note { margin-top: 1rem; max-width: 60ch; }

.game-frame-wrap { padding-bottom: var(--gap); }

.game-frame {
  display: block;
  width: 100%;
  /* Measured, not guessed: the game's own layout wants 966-1058px depending on
     viewport width, so the frame clears its tallest state at every size. An
     iframe does not grow to fit its content, and anything shorter produces a
     scrollbar *inside* the game — which on a tablet reads as broken. Letting
     the page scroll instead is the lesser evil. */
  height: 1080px;
  border: 4px solid var(--forest-800);
  border-radius: var(--radius);
  background: #120E1E;
}

.game-fallback { margin-top: 0.75rem; text-align: center; }