/**
 * iOS-Specific Styles
 * Handles safe area insets, notch, Dynamic Island, and iOS quirks
 */

/* Safe Area Insets for iOS notch/Dynamic Island */
:root {
  /* Default safe area values (fallback for non-iOS) */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Safe area handled per-element via env() — no body padding needed for fixed layout */

/* HUD stats panel - positioned below the controls toolbar */
#hud {
  top: calc(68px + var(--safe-area-inset-top));
  left: calc(12px + var(--safe-area-inset-left));
}

/* HUD controls toolbar - positioned at top-left */
#hud .hud-controls {
  top: calc(12px + var(--safe-area-inset-top));
  left: calc(12px + var(--safe-area-inset-left));
}

/* Score display (top left) */
#score-display {
  top: calc(20px + var(--safe-area-inset-top));
  left: calc(20px + var(--safe-area-inset-left));
}

/* Timer display (top right) */
#timer-display {
  top: calc(20px + var(--safe-area-inset-top));
  right: calc(20px + var(--safe-area-inset-right));
}

/* Modal positioning for safe areas */
.modal-overlay {
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
}

/* iOS-specific touch target sizes (minimum 44x44pt) */
@supports (-webkit-touch-callout: none) {
  button,
  .button,
  .touch-target {
    min-width: 44px;
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* Prevent iOS double-tap zoom */
@supports (-webkit-touch-callout: none) {
  * {
    touch-action: manipulation;
  }
}

/* iOS momentum scrolling */
.scrollable {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

/* Fix iOS input zoom */
input,
textarea,
select {
  font-size: 16px; /* Prevents iOS zoom on focus */
}

/* iOS status bar background (for translucent mode) */
.status-bar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-area-inset-top);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
  z-index: 9998;
}

/* Game canvas respects safe areas in landscape */
@media (orientation: landscape) {
  canvas {
    margin-left: var(--safe-area-inset-left);
    margin-right: var(--safe-area-inset-right);
  }
}

/* Notch-friendly full-screen mode */
.fullscreen-mode {
  width: 100vw;
  height: 100vh;
  padding: var(--safe-area-inset-top) var(--safe-area-inset-right) 
          var(--safe-area-inset-bottom) var(--safe-area-inset-left);
}

/* iOS-specific animations (uses hardware acceleration) */
@supports (-webkit-touch-callout: none) {
  .animated {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* Improve iOS scrolling performance */
.scroll-container {
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

/* iOS home indicator spacing (bottom bar on newer iPhones) */
.bottom-controls {
  padding-bottom: calc(20px + var(--safe-area-inset-bottom));
}

/* Debug: Visualize safe areas (remove in production) */
.debug-safe-areas {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
}

.debug-safe-areas::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-area-inset-top);
  background: rgba(255, 0, 0, 0.3);
}

.debug-safe-areas::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--safe-area-inset-bottom);
  background: rgba(0, 255, 0, 0.3);
}