/* 
  Mobile-specific styles for the Psalm Learner application
  Used for enhancing mobile user experience across the app
*/

@media (max-width: 768px) {
  .mobile-fullscreen-panel {
    /* Base styles applied by JS, enhancing with CSS */
    transition: all 0.3s ease-in-out;
  }
  
  /* Ensure selects and controls are properly sized on mobile */
  .mobile-fullscreen-panel select,
  .mobile-fullscreen-panel input[type="range"] {
    height: 48px; /* Larger touch targets */
    font-size: 16px; /* Prevent iOS zoom */
  }
  
  .mobile-fullscreen-panel button {
    padding: 12px; /* Larger touch targets for buttons */
    margin-bottom: 8px;
  }
}