/*
 * Mobile optimization
 */

/* Mobile optimization for Samsung Galaxy S22 Ultra */
@media screen and (max-width: 480px) {
  /* Enable scrolling */
  body, html {
    overflow-y: auto !important;
    min-height: 100% !important;
    height: auto !important;
  }
  
  .mines-predictor {
    min-height: auto !important;
    padding: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
  }
  
  /* Fix grid size and positioning */
  .grid {
    grid-template-columns: repeat(5, minmax(55px, 65px)) !important;
    gap: 7px !important;
    justify-content: center !important;
    margin: 15px auto !important;
    max-width: 95% !important;
  }
  
  .grid-item {
    width: auto !important;
    height: 65px !important; /* Approximately 3 inches on mobile */
    font-size: 20px !important;
    font-weight: bold !important;
    touch-action: manipulation !important; /* Prevents delay on touch */
    -webkit-tap-highlight-color: transparent !important; /* Removes tap highlight */
    user-select: none !important; /* Prevents text selection */
  }
  
  /* Enhanced tap feedback for mobile */
  .grid-item:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s !important;
  }
  
  /* Fix admin greeting positioning */
  .admin-greeting {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 15px auto !important;
    max-width: 90% !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    background-color: rgba(7, 5, 5, 0.9) !important;
    z-index: 10 !important;
  }
  
  /* Fix spacing for setup and input screens */
  #setup-screen, #input-screen, #predicted-screen, #results-screen, #review-screen {
    padding: 15px 10px !important;
    width: 92% !important;
    max-width: 450px !important;
    margin: 15px auto !important;
    border-radius: 15px !important; /* More rounded corners for modern look */
  }
  
  /* Enhance buttons for touch */
  button {
    min-height: 50px !important;
    margin: 10px auto !important;
    border-radius: 10px !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    box-shadow: 0 5px 15px rgba(0, 40, 0, 0.3) !important;
  }
  
  /* Button press effect */
  button:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 5px rgba(0, 40, 0, 0.3) !important;
  }
  
  /* Improve notification visibility */
  #notification {
    padding: 15px !important;
    border-radius: 10px !important;
    margin: 15px auto !important;
    max-width: 90% !important;
    font-weight: bold !important;
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.4) !important;
  }
}

/* Enhanced sharp red colors for mines and selected items */
.grid-item.selected, .grid-item.mine-tile, .grid-item.mine, .review-grid-item.mine {
  background-color: #cc0000 !important; /* Sharper, more vibrant red */
  border-color: #ff0000 !important; /* Pure red border */
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.7) !important; /* Red glow effect */
}

/* Enhanced highlighting for safe tiles */
.grid-item.safe {
  background-color: #00cc00 !important; /* Brighter green */
  border-color: #00ff00 !important; /* Pure green border */
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.7) !important; /* Green glow effect */
  color: #000000 !important; /* Black text for contrast */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important; /* Text glow for readability */
}

/* Enhanced bomb animation */
@keyframes mine-pulse {
  0% { 
    transform: translate(-50%, -50%) scale(0.9);
    text-shadow: 0 0 10px rgba(156, 4, 4, 0.8);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.1);
    text-shadow: 0 0 20px #8a0101;
  }
  100% { 
    transform: translate(-50%, -50%) scale(0.9);
    text-shadow: 0 0 10px rgba(130, 5, 5, 0.8);
  }
}

/* 3D mine effect on selection */
.grid-item.selected::after {
  content: '💣';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-size: 24px;
  animation: mine-pulse 1.5s infinite;
  filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
}

/* Enhanced styling for mine-related buttons */
.back-button, .calc-button.clear, button[class*="delete"], .modal-content {
  background-color: #620505 !important; /* Sharper red */
  color: #ffffff !important; /* White text for contrast */
  border-color: #770505 !important; /* Pure red border */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.7) !important; /* White glow for text */
  box-shadow: 0 0 12px rgb(110, 5, 5) !important; /* Red glow effect */
}

/* Make buttons even more vibrant on interaction */
.back-button:hover, .calc-button.clear:hover, button[class*="delete"]:hover {
  background-color: #750202 !important; /* Pure red on hover */
  box-shadow: 0 0 15px rgb(119, 3, 3) !important; /* Stronger red glow */
  transform: scale(1.05) !important; /* Slight grow effect */
}

/* Improved loading/transition animations */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#setup-screen, #input-screen, #predicted-screen, #results-screen, #review-screen, .admin-greeting {
  animation: fade-in 0.3s ease-out !important;
}

/* Enhanced safe tile pulse animation */
@keyframes safe-pulse {
  0% { box-shadow: 0 0 8px rgba(0, 255, 0, 0.5); }
  50% { box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), 0 0 25px rgba(0, 255, 0, 0.4); }
  100% { box-shadow: 0 0 8px rgba(0, 255, 0, 0.5); }
}

.grid-item.safe {
  animation: safe-pulse 2s infinite !important;
}

/* Haptic feedback simulation */
@keyframes haptic-feedback {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.grid-item.selected, .grid-item.mine {
  animation: haptic-feedback 0.15s ease-in-out;
}

/* Matrix rain: keep subtle so UI stays readable */
#matrix {
  opacity: 0.22 !important;
}

/* Improve scrolling smoothness */
* {
  -webkit-overflow-scrolling: touch !important;
}

/* Stylish Optimal Settings Box */
.optimal-settings-box {
  margin: 8px auto !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(0, 255, 0, 0.5) !important;
  border-radius: 8px !important;
  color: #0f0 !important;
  background: rgba(0, 15, 0, 0.7) !important;
  max-width: 180px !important;
  text-align: center !important;
  font-size: 11px !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3), inset 0 0 8px rgba(0, 255, 0, 0.1) !important;
  animation: settings-glow 2s infinite alternate !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.optimal-settings-box:before {
  content: "ADAPTIVE" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  font-size: 7px !important;
  background-color: rgba(0, 255, 0, 0.4) !important;
  padding: 2px 4px !important;
  border-radius: 0 8px 0 8px !important;
  letter-spacing: 0.5px !important;
  font-weight: bold !important;
  opacity: 0.8 !important;
}

.optimal-settings-box:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.5), inset 0 0 12px rgba(0, 255, 0, 0.2) !important;
}

.optimal-settings-box:active {
  transform: scale(0.95) !important;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.3), inset 0 0 20px rgba(0, 255, 0, 0.3) !important;
}

.optimal-settings-box::after {
  content: "CLICK TO APPLY" !important;
  position: absolute !important;
  bottom: -20px !important;
  left: 0 !important;
  right: 0 !important;
  font-size: 9px !important;
  color: rgba(0, 255, 0, 0.7) !important;
  letter-spacing: 1px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  opacity: 0 !important;
  transition: all 0.3s ease !important;
}

.optimal-settings-box:hover::after {
  bottom: 2px !important;
  opacity: 1 !important;
}

.optimal-settings-title {
  letter-spacing: 1px !important;
  font-weight: bold !important;
  font-size: 12px !important;
  border-bottom: 1px solid rgba(0, 255, 0, 0.3) !important;
  padding-bottom: 3px !important;
  margin-bottom: 3px !important;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important;
}

.optimal-settings-values {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.optimal-settings-applied {
  animation: setting-applied 0.5s ease !important;
}

@keyframes setting-applied {
  0% { background: rgba(0, 15, 0, 0.7) !important; }
  50% { background: rgba(0, 255, 0, 0.5) !important; }
  100% { background: rgba(0, 15, 0, 0.7) !important; }
}

@keyframes settings-glow {
  0% { box-shadow: 0 0 5px rgba(0, 255, 0, 0.3), inset 0 0 8px rgba(0, 255, 0, 0.1) !important; }
  100% { box-shadow: 0 0 12px rgba(0, 255, 0, 0.5), inset 0 0 15px rgba(0, 255, 0, 0.2) !important; }
}