/* ============================================
   Custom Animations
   ============================================ */

/**
 * Pulse animation for selected game action buttons
 * Used to indicate the currently selected action (Load/Shoot/Shield)
 */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

/**
 * Fade in/out animation for feedback messages
 * Provides smooth entry and exit for user notifications
 */
@keyframes fadeInOut {
  0% { opacity: 0; transform: translateX(100px); }
  20% { opacity: 1; transform: translateX(0); }
  80% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(100px); }
}

/**
 * Slide in from right animation for toast notifications
 * Creates smooth entrance effect for toast messages
 */
@keyframes slideInRight {
  from { 
    transform: translateX(100%); 
    opacity: 0; 
  }
  to { 
    transform: translateX(0); 
    opacity: 1; 
  }
}

/**
 * Slide out to right animation for toast notifications
 * Creates smooth exit effect for toast messages
 */
@keyframes slideOutRight {
  from { 
    transform: translateX(0); 
    opacity: 1; 
  }
  to { 
    transform: translateX(100%); 
    opacity: 0; 
  }
}

/* ============================================
   Performance Optimizations
   ============================================ */

/**
 * Toast notification performance optimization
 * Hints browser to optimize transform and opacity changes
 */
.toast-notification {
  will-change: transform, opacity;
}

/**
 * Modal performance optimization
 * Enables hardware acceleration and smooth touch scrolling
 */
#createRoomModal,
#targetSelectionModal,
#gameRulesModal {
  will-change: transform, opacity;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/**
 * Modal overlay performance optimization
 * Optimizes opacity transitions for overlay elements
 */
#modalOverlay,
#targetOverlay,
#gameRulesOverlay {
  will-change: opacity;
  touch-action: none;
}

/* ============================================
   Browser-Specific Touch Optimizations
   ============================================ */

/**
 * Global touch optimization for interactive elements
 * Provides consistent touch feedback across all buttons, inputs, and links
 * Uses emerald color to match the app's primary accent color
 */
button,
input,
a {
  -webkit-tap-highlight-color: rgba(16, 185, 129, 0.3);
  touch-action: manipulation;
}

/**
 * Prevent zoom on double-tap for all content
 * Improves mobile UX by preventing accidental zoom gestures
 */
body {
  touch-action: manipulation;
}

/* ============================================
   Game-Specific Styles
   ============================================ */

/**
 * Game Rules Modal - Font and shadow styling
 * Provides visual hierarchy and glow effects for modal headings
 */
#gameRulesModal {
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

#gameRulesModal h2, 
#gameRulesModal h3, 
#gameRulesModal h4 {
  text-shadow: 0 0 10px currentColor;
}

#gameRulesModal ul li {
  margin: 8px 0;
  color: #e2e8f0;
}

/**
 * Game Rules Modal button hover effect
 * Provides additional visual feedback beyond Tailwind classes
 */
#gameRulesModal button:hover {
  transform: scale(1.05);
  transition: all 0.2s ease;
}

/* ============================================
   Mobile Responsive Overrides
   ============================================ */

/**
 * Small phones (≤ 480px): Maximum content optimization
 * Ensures game rules modal is fully accessible on smallest devices
 */
@media (max-width: 480px) {
  #gameRulesModal {
    max-width: 95vw !important;
    max-height: 90vh !important;
    width: 95vw !important;
    padding: 15px !important;
    margin: 0 !important;
    border-radius: 10px;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: fixed !important;
  }
  
  #gameRulesModal h2 {
    font-size: 18px !important;
    margin-bottom: 15px !important;
    line-height: 1.3 !important;
  }
  
  #gameRulesModal h3 {
    font-size: 15px !important;
    margin: 15px 0 10px 0 !important;
    line-height: 1.4 !important;
  }
  
  #gameRulesModal h4 {
    font-size: 13px !important;
    margin: 10px 0 5px 0 !important;
    line-height: 1.4 !important;
  }
  
  #gameRulesModal p, 
  #gameRulesModal li {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 8px 0 !important;
  }
  
  #gameRulesModal ul {
    padding-left: 15px !important;
    margin: 10px 0 !important;
  }
  
  #gameRulesModal li {
    margin: 6px 0 !important;
  }
  
  #gameRulesModal div[style*="background"] {
    padding: 10px !important;
    margin: 8px 0 !important;
  }
  
  #gameRulesModal div[style*="text-align: center"] {
    margin-top: 20px !important;
  }
  
  #gameRulesModal button {
    min-height: 48px !important;
    min-width: 140px !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    margin: 12px 8px !important;
  }
}

/**
 * Large phones (481px - 768px): Balanced layout
 * Optimizes spacing and typography for medium-sized mobile devices
 */
@media (min-width: 481px) and (max-width: 768px) {
  #gameRulesModal {
    max-width: 90vw !important;
    max-height: 85vh !important;
    width: 90vw !important;
    padding: 20px !important;
    margin: 0 !important;
    border-radius: 12px;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50()) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: fixed !important;
  }
  
  #gameRulesModal h2 {
    font-size: 20px !important;
    margin-bottom: 18px !important;
    line-height: 1.3 !important;
  }
  
  #gameRulesModal h3 {
    font-size: 16px !important;
    margin: 18px 0 12px 0 !important;
    line-height: 1.4 !important;
  }
  
  #gameRulesModal h4 {
    font-size: 14px !important;
    margin: 12px 0 8px 0 !important;
    line-height: 1.4 !important;
  }
  
  #gameRulesModal p, 
  #gameRulesModal li {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 10px 0 !important;
  }
  
  #gameRulesModal ul {
    padding-left: 18px !important;
    margin: 12px 0 !important;
  }
  
  #gameRulesModal li {
    margin: 8px 0 !important;
  }
  
  #gameRulesModal div[style*="background"] {
    padding: 12px !important;
    margin: 10px 0 !important;
  }
  
  #gameRulesModal div[style*="text-align: center"] {
    margin-top: 22px !important;
  }
  
  #gameRulesModal button {
    min-height: 46px !important;
    min-width: 130px !important;
    padding: 13px 26px !important;
    font-size: 16px !important;
    margin: 11px 6px !important;
  }
}

/**
 * Tablets and small desktops (769px - 1024px): Standard desktop layout
 * Minor optimizations for tablet-sized screens
 */
@media (min-width: 769px) and (max-width: 1024px) {
  #gameRulesModal {
    max-width: 700px !important;
    max-height: 80vh !important;
    padding: 25px !important;
  }
}

/**
 * General mobile viewport handling (≤ 768px)
 * Ensures proper scrolling and touch behavior across all mobile devices
 */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  
  #gameRulesModal {
    max-height: calc(100vh - 40px) !important;
    box-sizing: border-box !important;
  }
  
  #gameRulesModal button {
    min-height: 44px !important;
    min-width: 120px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    margin: 10px 5px !important;
    border-radius: 8px !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 255, 0, 0.3);
  }
  
  #gameRulesModal button:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
  }
  
  #gameRulesModal button:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 6px rgba(0, 255, 0, 0.4) !important;
    background: #00cc00 !important;
  }
  
  #gameRulesModal div[style*="background"] {
    margin: 12px 0 !important;
    -webkit-overflow-scrolling: touch;
  }
}