/* The guide page of a party game (templates/games/guide.html), on top of style.css. */
.game-guide { gap: 40px; }
.game-guide .hero-actions .btn { display: inline-flex; align-items: center; gap: 10px; }
.game-shots { display: flex; flex-direction: column; gap: 16px; }
.game-shots h2 { font-size: clamp(28px, 4vw, 40px); }
.shot-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.shot { margin: 0; display: flex; flex-direction: column; gap: 10px; }
/* A tablet: a wide dark bezel round the picture. The picture keeps its 4:3 space before it loads. */
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 14px solid #1C2B22; border-radius: 26px; background: #1C2B22; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.shot figcaption { font-size: 15px; color: var(--ink-soft); }
.game-guide .legal h3 { font-size: 20px; margin-top: 10px; }
.game-guide .legal .btn { color: #FFFFFF; text-decoration: none; }
.game-faq { max-width: 46rem; display: flex; flex-direction: column; gap: 16px; }
.game-faq h2 { font-size: clamp(28px, 4vw, 40px); }
.game-owned { max-width: 40rem; padding: 20px 24px; background: var(--paper); border-left: 6px solid var(--green); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.game-owned h3 { font-size: 20px; }
.game-owned p { color: var(--ink-soft); }
.game-buy .section { gap: 28px; }