/* Mobile-specific styles for Battle Snakes */

/* Import CSS variables */
:root {
  --background-dark: #0a0a0a;
}

/* Allow normal scrolling but prevent unwanted behaviors */
html, body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Canvas touch optimizations */
.game-canvas {
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Responsive canvas sizing */
@media (max-width: 768px) {
  .game-container {
    padding: 10px;
  }

  .game-canvas {
    width: 100% !important;
    max-width: 100vw;
    height: auto !important;
    aspect-ratio: 4/3; /* Maintain 800x600 aspect ratio */
  }

  /* Hide desktop-specific UI elements on mobile */
  .controls-panel {
    display: none;
  }

  /* Optimize scoreboard for mobile */
  .scoreboard {
    max-height: 200px;
  }

  /* Allow normal scrolling on mobile */
  html, body {
    /* Maintain background from main styles */
    background: linear-gradient(135deg, var(--background-dark) 0%, #1a1a2e 100%) !important;
    background-attachment: fixed !important;
  }
}

/* Swipe indicator overlay */
.swipe-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 100;
}

.swipe-indicator.show {
  opacity: 1;
}

.swipe-indicator svg {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Touch feedback animation */
@keyframes touchFeedback {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.touch-feedback {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 255, 65, 0.3);
  pointer-events: none;
  animation: touchFeedback 0.4s ease-out;
}

/* Fullscreen button removed - not needed on mobile */

/* Landscape mode optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  .header {
    display: none;
  }

  .game-info {
    display: none;
  }

  .game-container {
    margin-top: 10px;
  }

  .game-canvas {
    max-height: calc(100vh - 20px);
    width: auto !important;
  }
}