/* Portrait mode fixes for mobile devices */

/* Ensure all elements fill available space properly */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000; /* Dark background to avoid white flashes */
  overflow: hidden;
}

/* Portrait mode specific styles */
@media (orientation: portrait) {
  body.mobile {
    /* Force GPU acceleration to prevent flickering */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  body.mobile .game-container {
    /* Center the game in portrait mode */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  
  body.mobile #gameCanvas {
    /* Make sure the canvas is properly scaled and centered in portrait mode */
    display: block !important;
    margin: 0 auto !important;
    position: relative !important;
    
    /* Add outline to make the canvas more visible */
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
    
    /* Ensure smooth scaling */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  /* iOS specific fixes */
  body.mobile.ios.portrait {
    /* Fix notches and home indicator areas */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  
  /* Special fix for iPhone X and newer */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    body.mobile.ios.portrait {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* Prevents text selection while playing */
body.mobile .game-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}