/* ==========================================================================
   MindRefined Play — Game Fixes
   Overrides for mobile, dark mode, nav/CTA spacing across all games.
   ========================================================================== */

/* ---- Top/bottom padding for fixed nav and CTA ---- */
body {
  padding-top: 56px !important;
  padding-bottom: 70px !important;
  overflow-x: hidden !important;
}

/* ---- Fix intro overlays to sit below nav ---- */
.intro, [class*="intro"], [class*="overlay"] {
  top: 56px !important;
  z-index: 50 !important;
}

/* ---- Font override to Inter ---- */
body, button, input, textarea, select {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

h1, h2, h3 {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* ---- Force consistent nav bar across all games ---- */
.play-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 24px !important;
  background: rgba(6, 13, 17, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(59, 130, 196, 0.15) !important;
}

.play-nav-brand {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #E8F0F2 !important;
  text-decoration: none !important;
  letter-spacing: -0.02em !important;
}

.play-nav-brand span {
  color: #47B881 !important;
}

.play-nav-link {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #3B82C4 !important;
  text-decoration: none !important;
}

/* Force consistent CTA bar */
.play-cta-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  background: rgba(6, 13, 17, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(59, 130, 196, 0.15) !important;
}

/* Light mode nav/CTA overrides */
[data-theme="light"] .play-nav {
  background: rgba(245, 247, 250, 0.92) !important;
  border-bottom-color: rgba(26, 32, 48, 0.1) !important;
}

[data-theme="light"] .play-nav-brand {
  color: #1A2030 !important;
}

[data-theme="light"] .play-cta-bar {
  background: rgba(245, 247, 250, 0.92) !important;
  border-top-color: rgba(26, 32, 48, 0.1) !important;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .play-nav {
    background: rgba(245, 247, 250, 0.92) !important;
    border-bottom-color: rgba(26, 32, 48, 0.1) !important;
  }
  html:not([data-theme="dark"]) .play-nav-brand {
    color: #1A2030 !important;
  }
  html:not([data-theme="dark"]) .play-cta-bar {
    background: rgba(245, 247, 250, 0.92) !important;
    border-top-color: rgba(26, 32, 48, 0.1) !important;
  }
}

/* ---- Dark mode color overrides ---- */
[data-theme="dark"] body,
[data-theme="dark"] html {
  background: #060D11 !important;
  background-image: none !important;
  color: #E8F0F2 !important;
}

[data-theme="dark"] .intro,
[data-theme="dark"] [class*="intro"] {
  background: #060D11 !important;
  background-image: none !important;
  color: #E8F0F2 !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] [class*="card"] {
  background: #0F1A20 !important;
  border-color: rgba(232, 240, 242, 0.08) !important;
  color: #E8F0F2 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background: #0A1318 !important;
  color: #E8F0F2 !important;
  border-color: rgba(232, 240, 242, 0.12) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #607078 !important;
}

[data-theme="dark"] button {
  color: #E8F0F2 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] div {
  color: inherit !important;
}

/* Fix specific game elements in dark mode */
[data-theme="dark"] .step-badge,
[data-theme="dark"] [class*="badge"] {
  color: #E8F0F2 !important;
}

[data-theme="dark"] [class*="progress"] {
  background: #1A2A38 !important;
}

/* Auto dark mode from system preference */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body,
  html:not([data-theme="light"]) {
    background: #060D11 !important;
    background-image: none !important;
    color: #E8F0F2 !important;
  }

  html:not([data-theme="light"]) .intro,
  html:not([data-theme="light"]) [class*="intro"] {
    background: #060D11 !important;
    background-image: none !important;
    color: #E8F0F2 !important;
  }

  html:not([data-theme="light"]) .card,
  html:not([data-theme="light"]) [class*="card"] {
    background: #0F1A20 !important;
    border-color: rgba(232, 240, 242, 0.08) !important;
    color: #E8F0F2 !important;
  }

  html:not([data-theme="light"]) input,
  html:not([data-theme="light"]) textarea {
    background: #0A1318 !important;
    color: #E8F0F2 !important;
    border-color: rgba(232, 240, 242, 0.12) !important;
  }

  html:not([data-theme="light"]) h1,
  html:not([data-theme="light"]) h2,
  html:not([data-theme="light"]) h3,
  html:not([data-theme="light"]) p,
  html:not([data-theme="light"]) span,
  html:not([data-theme="light"]) div {
    color: inherit !important;
  }
}

/* ---- Mobile fixes ---- */
@media (max-width: 640px) {
  body {
    padding-top: 48px !important;
  }

  .intro, [class*="intro"], [class*="overlay"] {
    top: 48px !important;
  }

  /* Ensure game content doesn't overflow */
  .game, .container, .wrap, main, [class*="game"],
  [class*="container"], [class*="wrap"] {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Scale down any oversized game boards */
  svg {
    max-width: 100% !important;
  }

  canvas {
    max-width: 100% !important;
  }
}