/* Mobile layout fixes 
   This additional CSS file contains important fixes for mobile layout issues
*/

/* Better button press animation for mobile */
.key:active {
    background-color: rgba(106, 90, 205, 0.3) !important;
    opacity: 0.9 !important;
    transform: none !important;
    transition: none !important;
}

/* Simpler animation for key presses */
.key-flash {
    background-color: rgba(106, 90, 205, 0.3) !important;
    opacity: 0.9 !important;
}

/* Enable proper scrolling on all devices */
html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  position: relative !important;
}

body.keyboard-open {
  /* Allow scrolling even when keyboard is open */
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Fix the app container to allow proper scrolling */
.app-container {
  min-height: 100vh;
  padding-bottom: 70px !important; /* Add space for the footer */
  position: relative !important;
}

/* Ensure the main content area has proper spacing */
.main-content {
  padding-bottom: 80px !important; /* Add extra space to prevent content from being hidden by footer */
}

/* Game container adjustments */
.game-container {
  padding-bottom: 20px !important;
}

/* Keyboard improvements for mobile */
.keyboard {
  position: relative !important;
  bottom: auto !important;
  margin-bottom: 30px !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
}

/* Footer fixes */
.main-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  height: auto !important;
  min-height: 40px !important;
  max-height: 60px !important;
  padding: 8px !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
  /* Ensure tiles are properly sized */
  .tile {
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
  }

  /* Adjust keyboard on mobile */
  .keyboard {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 50px !important;
  }

  /* Improve keyboard keys for touch */
  .key {
    min-width: 8.5% !important;
    height: 45px !important;
    margin: 2px !important;
    font-size: 14px !important;
    padding: 0 !important;
    border-radius: 4px !important;
  }

  .key-wide {
    min-width: 15% !important;
  }

  /* Game board adjustments */
  #game-board {
    margin-bottom: 15px !important;
  }
  
  /* Make sure buttons are easier to tap */
  button, .primary-button, .secondary-button {
    min-height: 44px !important;
  }
}

/* Small phone adjustments */
@media (max-width: 360px) {
  .tile {
    width: 35px !important; 
    height: 35px !important;
    font-size: 18px !important;
  }
  
  .key {
    min-width: 8% !important;
    height: 40px !important;
    font-size: 12px !important;
  }
}

/* iOS and mobile browser specific fixes */
@supports (-webkit-touch-callout: none) {
  /* Fix for iOS viewport height issues */
  html, body {
    min-height: -webkit-fill-available !important;
  }
  
  .app-container {
    min-height: -webkit-fill-available !important;
  }
  
  /* Fix for iOS sticky position footer */
  .main-footer {
    position: fixed !important;
  }
  
  /* Fix for iOS input zoom */
  input, select, textarea, button {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
  }
}

/* Prevent sticky hover effects on mobile */
@media (hover: none) {
  .key:hover, button:hover, .primary-button:hover, .secondary-button:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}