/* Mobile-Responsive Game Styling */

/* ==================== MOBILE GAME WRAPPER ==================== */

.mobile-game-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background: #1a1a1a;
  touch-action: none; /* Prevent default touch behaviors */
  user-select: none; /* Prevent text selection during gameplay */
}

.mobile-game-wrapper.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

/* ==================== DEVICE INFO BAR ==================== */

.device-info-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  z-index: 100;
}

.device-type {
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.fullscreen-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.fullscreen-btn:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.95);
}

/* ==================== ORIENTATION WARNING ==================== */

.orientation-warning {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.3s ease;
}

.warning-content {
  text-align: center;
  color: white;
  padding: 40px;
}

.rotate-icon {
  font-size: 80px;
  display: block;
  margin-bottom: 20px;
  animation: rotate360 2s linear infinite;
}

@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.warning-content p {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* ==================== GAME CONTENT ==================== */

.game-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.game-content.hidden {
  display: none;
}

/* ==================== RESPONSIVE CANVAS ==================== */

canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  touch-action: none;
}

.mobile canvas {
  width: 100% !important;
  height: auto !important;
}

/* ==================== VIRTUAL JOYSTICK ==================== */

.virtual-joystick {
  position: absolute;
  z-index: 50;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.virtual-joystick.active {
  opacity: 1;
}

.virtual-joystick.bottom-left {
  bottom: 30px;
  left: 30px;
}

.virtual-joystick.bottom-right {
  bottom: 30px;
  right: 30px;
}

.joystick-base {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.joystick-stick {
  position: absolute;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: linear-gradient(135deg, #3498DB, #2ECC71);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
}

.virtual-joystick.active .joystick-stick {
  background: linear-gradient(135deg, #2ECC71, #27AE60);
  box-shadow: 0 0 20px rgba(46, 204, 113, 0.6);
}

/* ==================== MOBILE BUTTONS ==================== */

.mobile-game-button {
  position: absolute;
  z-index: 50;
  min-width: 80px;
  min-height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-game-button:active {
  transform: scale(0.9);
}

.mobile-game-button.primary {
  background: linear-gradient(135deg, #3498DB, #2ECC71);
  color: white;
}

.mobile-game-button.secondary {
  background: linear-gradient(135deg, #95A5A6, #7F8C8D);
  color: white;
}

.mobile-game-button.action {
  background: linear-gradient(135deg, #E74C3C, #C0392B);
  color: white;
}

.mobile-game-button.bottom-left {
  bottom: 30px;
  left: 30px;
}

.mobile-game-button.bottom-right {
  bottom: 30px;
  right: 30px;
}

.mobile-game-button.top-left {
  top: 60px;
  left: 30px;
}

.mobile-game-button.top-right {
  top: 60px;
  right: 30px;
}

.button-icon {
  font-size: 24px;
}

.button-label {
  font-size: 14px;
}

/* ==================== TOUCH CONTROLS HINT ==================== */

.touch-controls-hint {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 12px 24px;
  border-radius: 25px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  z-index: 40;
  animation: fadeInOut 3s ease-in-out;
  pointer-events: none;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  10%, 90% { opacity: 1; }
}

/* ==================== MOBILE-SPECIFIC GAME UI ==================== */

.mobile .game-hud {
  font-size: 18px;
  padding: 12px;
}

.mobile .game-score {
  font-size: 24px;
  font-weight: 700;
}

.mobile .game-timer {
  font-size: 20px;
}

.mobile .game-button {
  min-height: 50px;
  min-width: 50px;
  font-size: 16px;
}

/* ==================== PERFORMANCE INDICATORS ==================== */

.performance-warning {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(231, 76, 60, 0.9);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 100;
}

.fps-counter {
  position: absolute;
  top: 50px;
  right: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-family: monospace;
  z-index: 100;
}

/* ==================== LOADING & TRANSITIONS ==================== */

.game-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 300;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #3498DB;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

/* ==================== GAME PAUSE OVERLAY ==================== */

.game-pause-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 150;
}

.pause-menu {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 300px;
}

.pause-menu h2 {
  color: white;
  font-size: 28px;
  text-align: center;
  margin: 0 0 20px 0;
}

.pause-menu button {
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 700;
  border: 2px solid white;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pause-menu button:hover,
.pause-menu button:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* ==================== GAME OVER SCREEN ==================== */

.game-over-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.9), rgba(192, 57, 43, 0.9));
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: slideIn 0.5s ease;
}

.game-over-content {
  text-align: center;
  color: white;
  padding: 40px;
}

.game-over-content h2 {
  font-size: 48px;
  margin-bottom: 20px;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.final-score {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px;
}

.game-over-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.game-over-buttons button {
  padding: 15px 40px;
  font-size: 18px;
  font-weight: 700;
  border: 3px solid white;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.game-over-buttons button:hover,
.game-over-buttons button:active {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== RESPONSIVE BREAKPOINTS ==================== */

/* Tablet Portrait */
@media (max-width: 1024px) and (orientation: portrait) {
  .virtual-joystick,
  .mobile-game-button {
    width: 100px !important;
    height: 100px !important;
  }

  .mobile-game-button {
    min-width: 100px;
    min-height: 100px;
  }
}

/* Mobile Landscape */
@media (max-height: 2000px) {
  .virtual-joystick,
  .mobile-game-button {
    width: 70px !important;
    height: 70px !important;
    bottom: 15px !important;
  }

  .mobile-game-button {
    min-width: 70px;
    min-height: 70px;
  }

  .device-info-bar {
    height: 30px;
  }

  .touch-controls-hint {
    bottom: 100px;
    font-size: 14px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .virtual-joystick,
  .mobile-game-button {
    width: 90px !important;
    height: 90px !important;
  }

  .mobile-game-button {
    min-width: 90px;
    min-height: 90px;
  }

  .button-label {
    font-size: 14px;
  }

  .pause-menu,
  .game-over-content {
    padding: 20px;
    min-width: 250px;
  }

  .pause-menu h2,
  .game-over-content h2 {
    font-size: 24px;
  }
}

/* ==================== ACCESSIBILITY ==================== */

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

/* High contrast mode */
@media (prefers-contrast: high) {
  .virtual-joystick,
  .mobile-game-button {
    border-width: 4px;
  }

  .joystick-base,
  .mobile-game-button {
    border-color: white;
  }
}

/* ==================== UTILITY CLASSES ==================== */

.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.no-tap-highlight {
  -webkit-tap-highlight-color: transparent;
}

.hardware-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==================== MOBILE-FIRST GAME RESPONSIVE ==================== */

@media (max-width: 768px) {
    /* Responsive game containers */
    canvas,
    .game-container,
    .game-area,
    .game-canvas,
    #gameCanvas,
    #game-container,
    .game-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 50vh;
        aspect-ratio: 16/9;
    }

    /* Touch-friendly game controls */
    .game-controls button,
    .game-button,
    .control-button,
    button.game-btn,
    .action-button {
        min-width: 60px !important;
        min-height: 60px !important;
        font-size: 18px !important;
        padding: 12px 16px !important;
        touch-action: manipulation;
    }

    /* Ensure all interactive elements are touch-friendly */
    button,
    .btn,
    [role="button"],
    a.button {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
}

/* ==================== PREVENT DOUBLE-TAP ZOOM ==================== */

canvas,
.game-container,
.game-area,
#gameCanvas,
.game-canvas {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

/* Prevent text selection during gameplay */
.game-container,
.game-area,
.game-wrapper {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

/* ==================== TOUCH TARGET SIZES ==================== */

/* Ensure minimum 44x44px touch targets (WCAG 2.1) */
.game-controls button,
.game-button,
.control-btn,
.action-btn,
.game-action,
.interactive-element {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
}

/* Larger touch targets for primary actions */
.primary-action,
.start-button,
.play-button,
.submit-button {
    min-width: 120px !important;
    min-height: 50px !important;
    font-size: 16px !important;
}