/**
 * MOW Play Page — CSS Overrides
 * Location: /wp-content/themes/iwtmyl/css/play.css
 *
 * Top:    white → cream (blends with site header)
 * Middle: cream (game lives here)
 * Bottom: cream → white (blends into site footer)
 */

/* ===== FULL-WIDTH OVERRIDE ===== */
.play-page-shell,
.play-page-shell .entry-content,
.play-page-shell .page-content,
.play-page-shell > .container,
.play-page-shell > .content-area,
.play-page-shell > .site-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 auto !important;
}

/* ===== BACKGROUND: white → cream → white ===== */
.play-page-shell {
  position: relative;
  /* Start white at top (matches header), ease into cream */
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f7f8f3 180px,
    #f7f8f3 100%
  );
}

/* Bottom fade: cream → white (blends into site footer) */
.play-page-shell::after {
  content: '';
  display: block;
  width: 100%;
  height: 120px;
  background: linear-gradient(to bottom, #f7f8f3, #ffffff);
  pointer-events: none;
}

/* ===== TIGHTEN TOP SPACING ===== */
/* Pull the game content closer to the site header */
#mow-play-root {
  width: 100%;
  min-height: 80vh;
}

#mow-play-root > div {
  padding-top: 8px !important;
  background: transparent !important;
}

/* ===== HIDE THEME DEFAULTS ===== */
.play-page-shell .entry-title,
.play-page-shell .page-title,
.play-page-shell .entry-meta,
.play-page-shell .post-navigation,
.play-page-shell .comments-area,
.play-page-shell .sidebar,
.play-page-shell #secondary {
  display: none !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 520px) {
  .play-page-shell {
    overflow-x: hidden;
  }
  /* Even tighter on mobile */
  #mow-play-root > div {
    padding-top: 4px !important;
  }
}

@media (min-width: 520px) and (max-width: 899px) {
  #mow-play-root > div {
    padding-top: 6px !important;
  }
}

/* ===== PRINT ===== */
@media print {
  #mow-play-root {
    display: none !important;
  }
  .play-page-shell::after {
    content: 'Play the Daily Lawn Puzzle at iwanttomowyourlawn.com/play';
    display: block;
    text-align: center;
    padding: 40px;
    font-size: 18px;
    color: #439120;
    height: auto;
    background: none;
  }
}