/* Mobile Game Optimization Styles for Chicken Road */

/* Viewport Configuration for Mobile Devices */
@viewport {
  width: device-width;
  zoom: 1.0;
  user-zoom: fixed;
}

/* Mobile Safe Area Support */
body {
  /* Ensure proper mobile safe area handling */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* Game Container Mobile Optimizations */
.chicken-game-container {
  /* Hardware acceleration for smooth performance */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  
  /* Mobile performance optimizations */
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Responsive Animation Performance */
@media (max-width: 768px) {
  .chicken-game-container * {
    /* Reduce motion for battery saving on mobile */
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
  
  /* Optimize text rendering on mobile */
  .game-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
  }
}

/* High DPI / Retina Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .chicken-character {
    /* Crisp rendering on high-DPI screens */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Portrait Mobile Layout Optimizations */
@media (orientation: portrait) and (max-width: 768px) {
  .chicken-road-scene {
    /* Optimize for portrait mobile screens */
    height: min(65vh, 500px) !important;
    max-height: 500px;
  }
  
  .chicken-character {
    /* Perfect centering and visibility - simplified */
    bottom: 120px !important;
    left: 50% !important;
  }
  
  .chicken-character img {
    /* Fixed size for reliable visibility */
    height: 90px !important;
    width: auto !important;
  }
}

/* Landscape Mobile Layout */
@media (orientation: landscape) and (max-height: 500px) {
  .chicken-road-scene {
    /* Optimize for landscape mobile */
    height: 80vh !important;
    min-height: 300px;
  }
  
  .chicken-character {
    bottom: max(25vh, 80px) !important;
  }
}

/* iOS Safari Specific Optimizations */
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
  .chicken-game-container {
    /* iOS Safari safe area handling */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Android Chrome Specific Optimizations */
@supports (display: -webkit-box) {
  .chicken-game-container {
    /* Android optimization */
    -webkit-perspective: 1000px;
    perspective: 1000px;
  }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  .chicken-character {
    animation: none !important;
  }
  
  .walking-effects {
    display: none !important;
  }
}

/* Touch Target Optimization */
.game-button {
  min-height: 44px; /* iOS minimum touch target */
  min-width: 44px;
  touch-action: manipulation;
}

/* Game Performance Optimizations */
.track-segment, .chicken-character, .background-element {
  /* GPU acceleration for smooth animations */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* Ultra-wide Mobile Screens (iPhone 14 Pro Max, etc.) */
@media (max-width: 430px) and (max-height: 932px) {
  .chicken-character img {
    height: clamp(75px, 11vh, 130px) !important;
  }
  
  .chicken-road-scene {
    height: min(60vh, 450px) !important;
  }
}

/* Small Mobile Screens (iPhone SE, older devices) */
@media (max-width: 375px) and (max-height: 667px) {
  .chicken-character img {
    height: clamp(65px, 10vh, 110px) !important;
  }
  
  .chicken-character {
    bottom: max(15vh, 100px) !important;
  }
  
  .chicken-road-scene {
    height: min(55vh, 400px) !important;
  }
}

/* Very Small Screens (older Android phones) */
@media (max-width: 360px) {
  .chicken-character img {
    height: clamp(60px, 9vh, 100px) !important;
  }
  
  .chicken-road-scene {
    height: min(50vh, 350px) !important;
  }
}