/* ==========================================================================
   RESPONSIVE STYLES - غزو عابدين
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE MOBILE ADJUSTMENTS (Phones, generally < 768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  
  /* Menu */
  .menu-title {
    font-size: 3.5rem;
  }
  
  .menu-subtitle {
    font-size: 1.2rem;
  }
  
  /* Mode Select */
  .mode-cards {
    flex-direction: column;
    gap: 1rem;
  }
  
  .mode-card {
    padding: 1.5rem;
    flex-direction: row;
    text-align: right;
    align-items: flex-start;
  }
  
  .mode-card__icon {
    width: 60px;
    height: 60px;
  }
  
  .mode-card__body {
    flex: 1;
  }
  
  .mode-card__title {
    font-size: 1.5rem;
  }
  
  .mode-card__cta {
    margin-top: 0;
    width: auto;
    align-self: center;
  }

  /* HUD */
  .hud-top {
    gap: 0.5rem;
  }
  
  .hud-cell {
    min-width: 0;
    padding: 0.3rem 0.5rem;
    flex: 1;
  }
  
  .hud-label {
    font-size: 0.6rem;
  }
  
  .hud-value {
    font-size: 1.1rem;
  }
  
  .hud-value--lives {
    font-size: 0.9rem;
  }
  
  /* Compact HUD — keep all 4 cells visible down to 360px */
  @media (max-width: 400px) {
    .hud-top {
      gap: 0.25rem;
    }
    .hud-cell {
      padding: 0.25rem 0.3rem;
    }
    .hud-label {
      font-size: 0.5rem;
    }
    .hud-value {
      font-size: 0.9rem;
    }
    .hud-value--lives {
      font-size: 0.75rem;
    }
  }

  /* Overlays */
  .overlay-panel {
    padding: 1.5rem;
    width: 95%;
  }
  
  .overlay-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
  
  .game-over-title {
    font-size: 2rem;
  }
  
  .stat-label {
    font-size: 1rem;
  }
  
  .stat-value {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   TABLET & DESKTOP ADJUSTMENTS (>= 768px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  
  .hud {
    padding: 2rem;
  }
  
  .hud-cell {
    padding: 0.8rem 1.5rem;
  }
  
  .hud-label {
    font-size: 1rem;
  }
  
  .hud-value {
    font-size: 2rem;
  }
  
  /* Touch controls hidden by default on larger screens 
     (JS will show them if touch is detected and input mode is keys) */
  .touch-controls {
    display: none;
  }
  
  .camera-preview {
    width: 240px;
    height: 180px;
    bottom: 30px;
    left: 30px;
  }
  
  .camera-preview.collapsed {
    transform: translateX(-220px);
  }
}

/* Portrait mode enabled — no forced rotation required */
.orientation-hint {
  display: none !important;
}

/* Landscape Mobile specific adjustments */
@media screen and (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  
  .menu-content {
    padding: 1rem;
    gap: 1rem;
  }
  
  .menu-title {
    font-size: 2.5rem;
  }
  
  .menu-nav {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: center;
  }
  
  .menu-nav .btn {
    flex: 1;
    min-width: 150px;
  }
  
  .mode-select-content {
    gap: 1rem;
  }
  
  .mode-cards {
    gap: 1rem;
  }
  
  .mode-card {
    padding: 1rem;
    gap: 0.5rem;
  }
  
  .mode-card__icon {
    width: 40px;
    height: 40px;
  }
  
  .camera-setup-content {
    padding: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .camera-setup-title {
    width: 100%;
    font-size: 1.8rem;
    margin-bottom: 0;
  }
  
  .gesture-tutorial {
    flex: 1;
    flex-direction: row;
  }
  
  .camera-setup-actions {
    flex: 1;
    justify-content: center;
  }
  
  .overlay-panel {
    padding: 1rem;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .overlay-title {
    margin-bottom: 1rem;
    font-size: 1.8rem;
  }
  
  /* Make sure touch controls fit well */
  .touch-controls {
    bottom: 10px;
  }
  
  .touch-btn {
    width: 60px; height: 60px;
  }
  .touch-btn--fire {
    width: 70px; height: 70px;
  }
}

/* --------------------------------------------------------------------------
   SAFE AREA INSETS (Notched phones)
   -------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  .hud {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  
  .touch-controls {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  
  .camera-preview {
    left: max(20px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   HIGH DPI (Retina) SCREENS
   -------------------------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Finer borders on high-res displays */
  .btn, .hud-cell, .overlay-panel, .mode-card, .camera-setup-content, .camera-preview {
    border-width: 1px;
    /* Simulate thicker look with box shadow if needed, but crisp lines */
  }
}