/* Mobile-only overrides for Game page */
@media (max-width: 768px) {
  :root {
    /* Scale board down on phones */
    --play-board-size: min(92vw, 560px);
    --play-panel-width: min(92vw, 560px);
    --play-panel-height: auto;
  }

  html, body { 
    overflow-x: hidden; 
    max-width: 100vw; 
    width: 100%; 
  }

  /* Kill global body centering that causes top cutoff on phones */
  body {
    display: block !important;
    height: auto !important;
    align-items: initial !important;
    justify-content: initial !important;
  }

  /* Let the page flow from the top on mobile */
  .homepage-container {
    min-height: auto !important;
    height: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Ensure main content starts below the top, not centered */
  .main-content,
  .main-content.sidebar-collapsed {
    justify-content: flex-start !important; /* overrides desktop center */  /* desktop centers here: play.css */
    align-items: center !important;
    padding-top: 0.25rem !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  /* Safety: remove any stray negative/extra margins above the board */
  .play-row { margin-top: 0 !important; }
  #board    { margin-top: 0 !important; }

  /* Override ALL desktop centering that causes cutoff */
  .main-content,
  .main-content.sidebar-collapsed,
  .board-container,
  .board-wrapper,
  .play-board-wrap { 
    margin-left: 0 !important; 
    padding: 0.25rem !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 0.25rem !important;
    min-height: auto !important;
    height: auto !important;
    text-align: center !important;
  }

  .board-container {
    margin-top: 0.125rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  /* Stack board and panel */
  .play-row { 
    flex-direction: column !important; 
    align-items: center !important; 
    gap: 0.25rem !important; 
    margin-top: 0 !important;
    justify-content: flex-start !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #board { 
    margin-left: auto !important; 
    margin-right: auto !important; 
    width: min(90vw, 400px) !important;
    height: min(90vw, 400px) !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
    border: none !important;
  }

  /* Scale down squares to match board size */
  .square {
    width: calc(min(90vw, 400px) / 8) !important;
    height: calc(min(90vw, 400px) / 8) !important;
    font-size: calc(min(90vw, 400px) / 8 * 0.45) !important;
  }

  #gameModePanel {
    margin-left: auto !important;
    margin-right: auto !important;
    width: min(90vw, 400px) !important;
    min-width: min(90vw, 400px) !important;
    max-width: min(90vw, 400px) !important;
    height: auto !important;
    min-height: 600px !important;
    margin-top: 1rem !important;
    flex-shrink: 0 !important;
  }

  /* Adjust time buttons for mobile */
  .time-control-buttons {
    flex-direction: row !important;
    gap: 0.5rem !important;
  }

  .time-button {
    width: auto !important;
    padding: 0.75rem 0.5rem !important;
    font-size: 14px !important;
    box-sizing: border-box !important; /* Prevent border from expanding button */
  }

  /* Override the padding change that causes expansion when selected */
  .time-button.selected {
    padding: 0.75rem 0.5rem !important; /* Force same padding as unselected */
    border: none !important; /* Remove any border that desktop CSS adds */
    outline: none !important; /* Remove any outline */
    box-shadow: none !important; /* Remove any box-shadow */
    width: auto !important; /* Force width to stay the same */
    height: auto !important; /* Force height to stay the same */
    min-width: auto !important; /* Remove any min-width constraints */
    min-height: auto !important; /* Remove any min-height constraints */
    outline: 2px solid #2ecc71 !important; /* Add green outline */
    outline-offset: -2px !important; /* Bring outline inside button bounds */
  }

  /* Adjust content padding for mobile */
  .content-section {
    padding: 1rem !important;
  }

  /* Make find match button full width on mobile */
  #findMatchBtn {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Reduce heading sizes for more compact mobile panel */
  h1, h2, h3, h4, h5, h6 {
    margin: 0.5rem 0 !important;
    font-size: 1.1em !important;
    line-height: 1.2 !important;
  }

  /* Reduce spacing around content sections */
  .content-section {
    padding: 0.5rem !important;
    margin: 0.25rem 0 !important;
  }

  /* Make the game mode panel more compact */
  #gameModePanel {
    padding: 0.5rem !important;
    padding-top: 0.25rem !important;
    min-height: 400px !important;
  }

  /* Reduce top spacing for content inside the panel */
  #gameModePanel > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #gameModePanel h1:first-child,
  #gameModePanel h2:first-child,
  #gameModePanel h3:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Target the specific game mode title section */
  #gameModeTitle {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .game-mode-title-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Reduce spacing around the settings icon */
  #settingsIcon {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
  }

  /* Move separator line closer to placeholder text */
  .separator-line {
    margin-top: 0.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  .game-mode-title-section {
    margin-bottom: 0.25rem !important;
  }

  /* --- Play mobile: hard center everything without touching desktop --- */

  /* Make sure main content isn't offset by any leftover sidebar margin */
  .main-content,
  .main-content.sidebar-collapsed {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: center !important;     /* center children horizontally */
    text-align: center !important;
  }

  /* Stack and center the inner row */
  .play-row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    /* Shrink-wrap + center the whole stack */
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center the wrappers and actual content blocks */
  .board-container,
  .play-board-wrap,
  #board,
  #gameModePanel {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Explicit board/panel widths so auto margins have something to center */
  #board {
    width: min(90vw, 400px) !important;
    height: min(90vw, 400px) !important;
  }

  #gameModePanel {
    width: min(90vw, 400px) !important;
    min-width: min(90vw, 400px) !important;
    max-width: min(90vw, 400px) !important;
  }

  /* Mobile sidebar width to match index-mobile.css */
  .sidebar {
    width: 150px !important;
  }

  .sidebar.collapsed {
    transform: translateX(-153px) !important;
  }

  /* Make the logo smaller */
  .sidebar-logo {
    width: 110px !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  :root {
    --play-board-size: min(94vw, 480px);
    --play-panel-width: min(94vw, 480px);
  }

  .main-content,
  .main-content.sidebar-collapsed {
    padding-top: 1rem !important;
  }

  #board {
    width: min(95vw, 350px) !important;
    height: min(95vw, 350px) !important;
  }

  /* Scale down squares for very small screens */
  .square {
    width: calc(min(95vw, 350px) / 8) !important;
    height: calc(min(95vw, 350px) / 8) !important;
    font-size: calc(min(95vw, 350px) / 8 * 0.45) !important;
  }

  #gameModePanel {
    width: min(95vw, 350px) !important;
    min-width: min(95vw, 350px) !important;
    max-width: min(95vw, 350px) !important;
    min-height: 500px !important;
  }

  .time-button {
    padding: 0.75rem 0.5rem !important;
    font-size: 12px !important;
  }

  #findMatchBtn {
    padding: 1.5rem 0.5rem !important;
    font-size: 16px !important;
  }
}