/* Cyberpunk Arena Fighter - Main Styles */
body {
  font-family: "Rajdhani", sans-serif;
  overflow: hidden;
  cursor: crosshair;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  touch-action: none; /* Prevent default touch behaviors */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

canvas {
  display: block;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a0a 100%);
  box-shadow: inset 0 0 100px rgba(0, 255, 255, 0.1);
  width: 100vw !important;
  height: 100vh !important;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Mobile Canvas Specific Styles */
@media (max-width: 768px) {
  canvas {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    touch-action: none;
  }
}

/* Portrait Mode Specific Styles */
@media (orientation: portrait) and (max-width: 768px) {
  canvas {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Ensure body doesn't scroll on mobile */
  body {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  /* Force canvas to cover entire portrait screen */
  #gameCanvas {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1;
    overflow: hidden !important;
  }

  /* Ensure maze covers entire portrait screen */
  canvas {
    min-height: 100vh !important;
    max-height: 100vh !important;
  }
}

/* Landscape Mode Specific Styles */
@media (orientation: landscape) and (max-width: 768px) {
  canvas {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Ensure body doesn't scroll on mobile */
  body {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
}

/* Mobile Controls Styles */
#mobileControls {
  transition: opacity 0.3s ease;
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 40;
  pointer-events: none;
}

#mobileControls.hidden {
  opacity: 0;
  pointer-events: none;
  display: none;
}

#mobileControls:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
  display: block; /* Only show when not hidden */
}

/* Mobile Game UI Positioning */
@media (max-width: 768px) {
  #gameUI {
    position: fixed;
    z-index: 30;
    pointer-events: none;
  }

  #gameUI > * {
    pointer-events: auto;
  }

  /* Ensure mobile controls are above everything */
  #mobileControls {
    z-index: 50;
  }

  /* Mobile-specific canvas positioning */
  #gameCanvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1;
  }
}

/* Joystick Styles */
#joystickContainer {
  position: relative;
}

#joystickBase {
  position: relative;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #00d4ff;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  transition: all 0.2s ease;
}

#joystickBase:active {
  transform: scale(0.95);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
}

#joystickThumb {
  position: absolute;
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
  transition: all 0.1s ease;
  pointer-events: none;
}

#joystickThumb.active {
  transform: scale(1.2);
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.8);
}

/* Fire Button Styles */
#fireButton {
  background: linear-gradient(135deg, #ff4444, #cc0000);
  border: 2px solid #ff6666;
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.3);
  transition: all 0.2s ease;
  cursor: pointer;
}

#fireButton:active {
  transform: scale(0.9);
  box-shadow: 0 0 30px rgba(255, 68, 68, 0.6);
  background: linear-gradient(135deg, #ff6666, #ff0000);
}

#fireButton.pressed {
  animation: firePulse 0.1s ease-out;
}

@keyframes firePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

/* Weapon Switch Button Styles */
#weaponSwitchButton {
  background: linear-gradient(135deg, #8844ff, #6600cc);
  border: 2px solid #aa66ff;
  box-shadow: 0 0 20px rgba(136, 68, 255, 0.3);
  transition: all 0.2s ease;
  cursor: pointer;
}

#weaponSwitchButton:active {
  transform: scale(0.9);
  box-shadow: 0 0 30px rgba(136, 68, 255, 0.6);
  background: linear-gradient(135deg, #aa66ff, #8844ff);
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Mobile-specific adjustments */
  body {
    cursor: default;
  }

  canvas {
    touch-action: none;
  }

  /* Smaller UI elements on mobile */
  #gameUI .text-4xl {
    font-size: 1.5rem;
  }

  #gameUI .text-2xl {
    font-size: 1.25rem;
  }

  #gameUI .text-xl {
    font-size: 1.125rem;
  }

  /* Mobile control sizes - make them much larger and touch-friendly */
  #joystickBase {
    width: 120px !important;
    height: 120px !important;
  }

  #joystickThumb {
    width: 48px !important;
    height: 48px !important;
  }

  #fireButton {
    width: 80px !important;
    height: 80px !important;
  }

  #weaponSwitchButton {
    width: 65px !important;
    height: 65px !important;
  }

  /* Ensure mobile controls are properly positioned */
  #mobileControls {
    position: fixed !important;
    bottom: 10px !important;
    left: 15px !important;
    right: 15px !important;
    z-index: 50 !important;
  }

  /* Mobile control positioning for different orientations */
  @media (orientation: portrait) {
    #joystickContainer {
      bottom: 10px !important;
      left: 15px !important;
    }

    #fireButton,
    #weaponSwitchButton {
      bottom: 10px !important;
      right: 15px !important;
    }
  }

  @media (orientation: landscape) {
    #joystickContainer {
      bottom: 8px !important;
      left: 8px !important;
    }

    #fireButton,
    #weaponSwitchButton {
      bottom: 8px !important;
      right: 8px !important;
    }
  }

  /* Ensure mobile controls are always visible and properly sized */
  #mobileControls {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  /* Mobile control touch targets - ensure they're large enough */
  #joystickBase,
  #fireButton,
  #weaponSwitchButton {
    min-width: 60px !important;
    min-height: 60px !important;
    touch-action: manipulation !important;
  }

  /* Prevent text selection on mobile controls */
  #mobileControls * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens - still keep controls large enough to use */
  #joystickBase {
    width: 100px !important;
    height: 100px !important;
  }

  #joystickThumb {
    width: 40px !important;
    height: 40px !important;
  }

  #fireButton {
    width: 70px !important;
    height: 70px !important;
  }

  #weaponSwitchButton {
    width: 60px !important;
    height: 60px !important;
  }

  /* Ensure canvas fills entire screen on very small devices */
  canvas {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1;
  }

  /* Adjust mobile control positioning for very small screens */
  #mobileControls {
    bottom: 8px !important;
    left: 10px !important;
    right: 10px !important;
  }

  #joystickContainer {
    bottom: 8px !important;
    left: 10px !important;
  }

  #fireButton,
  #weaponSwitchButton {
    bottom: 8px !important;
    right: 10px !important;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  #joystickBase {
    width: 18px;
    height: 18px;
  }

  #joystickThumb {
    width: 7px;
    height: 7px;
  }

  #fireButton {
    width: 18px;
    height: 18px;
  }

  #weaponSwitchButton {
    width: 15px;
    height: 15px;
  }
}

/* Loading Screen Animations */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes glow {
  0%,
  100% {
    text-shadow: 0 0 10px currentColor;
  }
  50% {
    text-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
  }
}

#loadingScreen .text-cyan-400 {
  animation: glow 2s ease-in-out infinite;
}

/* Character Selection Cards */
.character-card {
  transition: all 0.3s ease;
  transform: perspective(1000px) rotateY(0deg);
}

.character-card:hover {
  transform: perspective(1000px) rotateY(5deg) translateY(-10px) scale(1.02);
}

.character-card.selected {
  transform: perspective(1000px) rotateY(0deg) translateY(-15px) scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 255, 255, 0.3);
}

.character-card .bg-gradient-to-b {
  position: relative;
  overflow: hidden;
}

.character-card .bg-gradient-to-b::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s;
}

.character-card:hover .bg-gradient-to-b::before {
  left: 100%;
}

/* Game UI Elements */
#gameUI {
  pointer-events: none;
}

#gameUI > * {
  pointer-events: auto;
}

/* Health and Energy Bars */
#healthBar,
#energyBar {
  position: relative;
  overflow: hidden;
}

#healthBar::after,
#energyBar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Power-up Bar */
#powerUpBarContainer {
  position: relative;
}

#powerUpBar {
  position: relative;
  overflow: hidden;
}

#powerUpBar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: powerUpShimmer 1s ease-in-out infinite;
}

@keyframes powerUpShimmer {
  0%,
  100% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
}

/* Neon Effects */
.neon-glow {
  box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor,
    0 0 20px currentColor;
}

.neon-text {
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor,
    0 0 15px currentColor;
}

/* Button Hover Effects */
button {
  position: relative;
  overflow: hidden;
}

button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

button:hover::before {
  left: 100%;
}

/* Modal Animations */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#modalEl > div {
  animation: modalSlideIn 0.3s ease-out;
}

/* Enhanced Modal Stats Animations */
#modalEl {
  backdrop-filter: blur(4px);
}

#modalEl > div {
  animation: popupSlideIn 0.3s ease-out;
}

#modalEl .grid > div {
  animation: statsFadeIn 0.5s ease-out;
  animation-fill-mode: both;
}

@keyframes popupSlideIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#modalEl .grid > div:nth-child(1) {
  animation-delay: 0.2s;
}

#modalEl .grid > div:nth-child(2) {
  animation-delay: 0.4s;
}

@keyframes statsFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Stats Cards Hover Effects */
#modalEl .grid > div:hover {
  transform: translateY(-2px) scale(1.02);
  transition: all 0.2s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Button Hover Enhancements */
#modalEl button {
  position: relative;
  overflow: hidden;
}

#modalEl button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

#modalEl button:hover::before {
  left: 100%;
}

/* Game Start Modal Animations */
#gameStartModal {
  backdrop-filter: blur(8px);
}

#gameStartModal > div {
  animation: gameStartSlideIn 0.4s ease-out;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(26, 26, 46, 0.95) 100%
  );
  border: 1px solid rgba(0, 212, 255, 0.2);
  box-shadow: 0 0 50px rgba(0, 212, 255, 0.1), inset 0 0 50px rgba(0, 0, 0, 0.5);
}

#gameStartModal .bg-black {
  animation: gameStartFadeIn 0.6s ease-out;
  animation-fill-mode: both;
}

@keyframes gameStartSlideIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes gameStartFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Game Start Modal Section Animations */
#gameStartModal > div > div:nth-child(2) {
  animation-delay: 0.2s;
}

#gameStartModal > div > div:nth-child(3) {
  animation-delay: 0.4s;
}

/* Game Start Modal Text Enhancements */
#gameStartModal h2 {
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

#gameStartModal .text-cyan-300 {
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

#gameStartModal .text-purple-300 {
  text-shadow: 0 0 10px rgba(147, 51, 234, 0.3);
}

/* Game Start Button Enhancements */
#startGameBtn {
  position: relative;
  overflow: hidden;
}

#startGameBtn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

#startGameBtn:hover::before {
  left: 100%;
}

#startGameBtn:hover {
  box-shadow: 0 0 25px rgba(34, 197, 94, 0.6), 0 0 50px rgba(34, 197, 94, 0.4);
  transform: scale(1.05);
}

/* Particle Effects */
.particle {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

/* Damage Numbers */
.damage-number {
  position: absolute;
  font-weight: bold;
  font-size: 1.2em;
  pointer-events: none;
  z-index: 20;
  animation: damageFloat 1s ease-out forwards;
}

@keyframes damageFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(1.2);
  }
}

/* Screen Flash Effects */
.screen-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  z-index: 25;
  animation: flash 0.2s ease-out;
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Character Animations */
.character-sprite {
  transition: all 0.1s ease;
}

.character-sprite.attacking {
  transform: scale(1.1);
  filter: brightness(1.5);
}

.character-sprite.damaged {
  animation: damageShake 0.3s ease-in-out;
}

@keyframes damageShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* Enemy AI Indicators */
.enemy-indicator {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  animation: enemyPulse 2s ease-in-out infinite;
}

@keyframes enemyPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Combo Counter */
.combo-counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
  font-weight: bold;
  color: #ff6b6b;
  text-shadow: 0 0 20px #ff6b6b;
  pointer-events: none;
  z-index: 30;
  animation: comboPop 0.5s ease-out;
}

@keyframes comboPop {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00d4ff, #7c3aed);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00b8e6, #6d28d9);
}

/* Focus States for Accessibility */
button:focus,
.character-card:focus {
  outline: 2px solid #00d4ff;
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .text-gray-300 {
    color: #ffffff !important;
  }

  .bg-gray-800 {
    background-color: #000000 !important;
  }
}

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

/* Auto-reload indicator */
.auto-reload-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 0, 0.8);
  color: #000;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  z-index: 100;
  animation: autoReloadPulse 1s ease-in-out infinite;
}

@keyframes autoReloadPulse {
  0%,
  100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Handle mobile keyboard appearance and viewport changes */
@media (max-height: 500px) {
  /* When mobile keyboard is visible (viewport height is reduced) */
  canvas {
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1;
  }

  /* Adjust mobile controls for reduced height */
  #mobileControls {
    bottom: 8px !important;
  }

  #joystickContainer {
    bottom: 8px !important;
  }

  #fireButton,
  #weaponSwitchButton {
    bottom: 8px !important;
  }
}

/* Ensure canvas is always properly sized regardless of device */
@media (max-width: 320px) {
  /* Very small mobile devices */
  canvas {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1;
  }

  /* Adjust controls for very small screens */
  #joystickBase {
    width: 80px !important;
    height: 80px !important;
  }

  #joystickThumb {
    width: 32px !important;
    height: 32px !important;
  }

  #fireButton {
    width: 70px !important;
    height: 70px !important;
  }

  #weaponSwitchButton {
    width: 60px !important;
    height: 60px !important;
  }

  /* Adjust positioning for very small screens */
  #mobileControls {
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
  }

  #joystickContainer {
    bottom: 10px !important;
    left: 10px !important;
  }

  #fireButton,
  #weaponSwitchButton {
    bottom: 10px !important;
    right: 10px !important;
  }
}