/* =========================================
   SCROLL & LAYOUT FIX — scroll-fix.css
   ========================================= */

/* 1. Allow full-page scrolling on html/body */
html, body {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
  overscroll-behavior: auto !important;
}

/* 2. .screen — let the game page scroll naturally.
   REMOVED max-height: 100dvh which was cutting off game boards.
   Instead overflow: visible so content below the viewport is reachable. */
.screen {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

/* 3. Game-specific overrides: keep game screens full-viewport-height so
   the board fills the initial view, but allow content below to scroll. */
.ganh-screen,
.mancala-screen,
.caro-screen,
.othello-screen,
.chess-screen {
  min-height: 100dvh !important;
  height: auto !important;
}

/* 4. Chess container — don't fix to 100dvh; let JS size it */
.chess-container {
  height: auto !important;
}

/* 5. Background covers full scroll area */
body {
  background-attachment: fixed !important;
  background-size: cover !important;
}

/* 6. Footer & section alignment */
.seo-article-section,
.cross-link-section,
.site-footer {
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.seo-article-section h2,
.seo-article-section h3,
.cross-link-section h3 {
  text-align: left !important;
}

/* 7. Site footer — more gap from the section above, full width */
.site-footer {
  margin-top: 80px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 8. Footer inner container — match width of other sections (1100px) */
.footer-main {
  max-width: 1100px !important;
  margin-inline: auto !important;
  padding: 0 40px !important;
  text-align: left !important;
  align-items: flex-start !important;
}

/* 9. Footer bottom row (© text) — match same width & padding */
.footer-bottom {
  max-width: 1100px !important;
  margin-inline: auto !important;
  padding: 20px 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 10. Cross-link section — bottom spacing before footer */
.cross-link-section {
  margin-bottom: 0 !important;
}

.footer-brand-col {
  text-align: left !important;
}

.footer-desc {
  text-align: left !important;
}

.social-links {
  justify-content: flex-start !important;
}

/* 9. Cross-link section responsive */
.cross-link-section {
  padding: 30px 24px !important;
  text-align: center !important;
}

/* 10. Responsive adjustments for mobile */
@media (max-width: 600px) {
  .footer-main {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 16px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
    text-align: center !important;
  }
  .footer-bottom p {
    text-align: center !important;
  }
}

/* 11. Hide ALL AdSense elements that don't load (white box fix) */
ins.adsbygoogle { display: none !important; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
ins.adsbygoogle:empty { display: none !important; }

/* 12. Completely collapse ad wrapper containers */
.ad-placeholder,
.ad-container-bottom {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}