/* Google SEO Best Practices CSS - 2024/2026 
 * UI/UX Optimized for User Experience and SEO Performance
 * Design Philosophy: Clean, Modern, Content-First
 */

/* === 0. Foundation: Sticky Footer Layout === */
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #141412;
    color: #e0e0e0;
  }
}

#page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Hide framework-generated duplicate footers */
.pd-pause-footer,
.pd-site-footer {
  display: none !important;
}

/* === 1. Main Content Area === */
main[role="main"] {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* === 2. Game Container - Mobile First: FORCE Full Screen === */
/* Use !important and high specificity to override framework CSS */
body .pd-game-root,
body.pd-game .pd-game-root,
#page-wrapper .pd-game-root,
.pd-game-root {
  position: relative !important;
  z-index: 10;
  /* Mobile: Full viewport - immersive game experience */
  min-height: 100vh !important;
  max-height: none !important;
  flex: none !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
}

@media (min-width: 768px) {
  body .pd-game-root,
  body.pd-game .pd-game-root,
  #page-wrapper .pd-game-root,
  .pd-game-root {
    /* Tablet: Show game + H1 in viewport */
    min-height: 60vh !important;
    max-height: 72vh !important;
    margin-bottom: 2.5rem !important;
    flex: none !important;
    height: auto !important;
  }
}

@media (min-width: 1024px) {
  body .pd-game-root,
  body.pd-game .pd-game-root,
  #page-wrapper .pd-game-root,
  .pd-game-root {
    /* Desktop: Larger game area for better UX */
    min-height: 70vh !important;
    max-height: 80vh !important;
    margin-bottom: 3rem !important;
    flex: none !important;
    height: auto !important;
  }
}