/* Shared game introduction layout. Copy into each game's frozen site payload.
   Load after the compiled game CSS and any game-specific site layout CSS.
   This stylesheet only changes .site-content, never the playable game frame. */
/* Keep the last introduction section aligned with the sister games. */
.site-content .character-intro { margin-bottom: 0; }

@media (max-width: 900px) {
  .site-content .about-game,
  .site-content .character-intro,
  .site-content .stage-intro,
  .site-content .site-footer {
    width: min(100% - 32px, 520px);
  }

  .site-content .guide-list { gap: 22px; }
  .site-content .guide-card {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
    gap: 0;
  }
  .site-content .guide-card:nth-child(even) .guide-image { order: 0; }
  .site-content .guide-copy { padding: 23px 24px 30px; }
  .site-content .guide-copy h3 {
    margin: 9px 0 10px;
    font-size: clamp(18px, 5.6vw, 22px);
    white-space: normal;
    text-wrap: balance;
  }
  .site-content .guide-copy p { font-size: 16px; text-wrap: balance; }

  .site-content .character-intro {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 0 64px;
  }
  .site-content .character-intro img { grid-row: 1; }
  .site-content .stage-grid { grid-template-columns: minmax(0, 1fr); }
  .site-content .site-footer {
    display: block;
    font-size: 15px;
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
  }
  .site-content .copyright { margin-top: 26px; }
}