/* Mobile-specific improvements for CS2 WebRadar */

/* Add this to your existing App.css or create a new mobile.css file */

/* Improve touch targets for mobile */
@media (hover: none) and (pointer: coarse) {
  button, a, input[type="checkbox"], input[type="range"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Custom scrollbar for fullscreen mode */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(177, 208, 231, 0.3);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(177, 208, 231, 0.5);
}

/* Hide scrollbar for team lists on mobile when not in fullscreen */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Prevent text selection on touch devices during interactions */
.touch-manipulation {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Smooth scrolling for mobile */
@media (max-width: 1024px) {
  * {
    -webkit-overflow-scrolling: touch;
  }
  
  body {
    overflow-x: hidden;
  }
}

/* Improve button press feedback on mobile */
@media (hover: none) {
  button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }
}

/* Safe area insets for devices with notches */
@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-safe-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  
  .mobile-safe-top {
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }
}

/* Optimize player card layout for very small screens */
@media (max-width: 375px) {
  .player-card-compact {
    min-width: 100%;
    font-size: 0.75rem;
  }
}

/* Prevent zoom on input focus (iOS) */
input, select, textarea {
  font-size: 16px !important;
}

@media (max-width: 640px) {
  input[type="range"] {
    height: 40px;
  }
}

/* Fullscreen specific improvements */
.fullscreen-container {
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers */
}

/* Loading spinner optimization */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Pulse animation for bomb timer */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Prevent scroll bounce on iOS */
html, body {
  overscroll-behavior: none;
}

/* Dark mode text readability */
@media (prefers-color-scheme: dark) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Landscape mode optimizations for mobile */
@media (max-width: 1024px) and (orientation: landscape) {
  .radar-container {
    max-height: 90vh;
  }
  
  .team-list-mobile {
    max-height: 60vh;
  }
}

/* PWA-specific fixes */
@media (display-mode: standalone) {
  body {
    user-select: none;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
