/* Site chrome: header, footer, ad slots, below-the-fold SEO content. Hidden
   during active gameplay on small screens (body.in-game) so the board gets
   the full viewport — see game.css. */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #0d1a11; border-bottom: 1px solid #17301f;
}
.brand { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #d1fae5; }
.brand-mark { font-size: 1.3rem; }
.game-title { font-size: 1rem; text-align: right; color: #fbbf24; }
.game-title .tagline { display: block; font-size: 0.7rem; color: #9ca3af; font-weight: 400; }

.ad-slot {
  display: flex; align-items: center; justify-content: center;
  min-height: 60px; margin: 10px auto; max-width: 728px;
  background: repeating-linear-gradient(45deg, #12181a, #12181a 10px, #161d1f 10px, #161d1f 20px);
  color: #4b5563; font-size: 0.75rem; border-radius: 6px;
}

.site-content { max-width: 760px; margin: 0 auto; padding: 24px 18px 8px; line-height: 1.65; }
.site-content h2 { color: #fbbf24; font-size: 1.3rem; }
.site-content h3 { color: #d1fae5; font-size: 1.05rem; margin-top: 1.1em; }
.site-content p { color: #cbd5e1; font-size: 0.94rem; }

.site-footer {
  text-align: center; padding: 18px 12px 30px; color: #6b7280; font-size: 0.85rem;
}
.site-footer a { color: #9ca3af; }
.site-footer a:hover { color: #fbbf24; }

@media (max-width: 700px) {
  body.in-game .site-header,
  body.in-game .ad-slot,
  body.in-game .site-content,
  body.in-game .site-footer {
    display: none;
  }
}