/**
 * Mobile Orientation Fix - Prevents layout breaking during rotation
 */

/* Use CSS custom property for viewport height to fix mobile browser issues */
:root {
  --vh: 1vh;
}

/* Prevent content shift during rotation on mobile */
@media (max-width: 900px) {
  html {
    overflow: hidden;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }
  
  body {
    overflow: hidden;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
  }
  
  /* Prevent zoom on input focus */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
  
  /* Disable pull-to-refresh */
  body {
    overscroll-behavior-y: contain;
  }
  
  /* Smooth transitions during orientation change */
  #game-container {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  /* Prevent flash of unstyled content during rotation */
  @media (orientation: landscape) {
    .game-table,
    .waiting-list,
    .leaderboard,
    .mobile-nav,
    .action-bar {
      transition: opacity 0.2s ease;
    }
  }
  
  @media (orientation: portrait) {
    .game-table,
    .waiting-list,
    .leaderboard,
    .mobile-nav,
    .action-bar {
      opacity: 0 !important;
      pointer-events: none !important;
    }
  }
}

/* Fix for iOS Safari address bar */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 900px) {
    body {
      height: -webkit-fill-available;
    }
    
    #game-container {
      height: -webkit-fill-available;
    }
  }
}

/* Rotation animation */
@media (max-width: 900px) {
  @keyframes fadeInAfterRotation {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @media (orientation: landscape) {
    #game-container {
      animation: fadeInAfterRotation 0.3s ease forwards;
    }
  }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }
  
  * {
    -webkit-overflow-scrolling: touch;
  }
}