/* Orientation Handling Styles for Mobile Landscape Support */

/* Orientation prompt overlay - shown when device is in portrait on mobile */
/* Temporarily disabled globally until mobile setup is properly configured */
#orientation-prompt {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.95);
  display: none !important; /* Force hide as safety measure */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #e8e8ef;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-align: center;
  padding: 20px;
}

#orientation-prompt.visible {
  display: none !important; /* Force hide even when visible class is added */
}

#orientation-prompt-icon {
  font-size: min(64px, 15vw);
  margin-bottom: min(24px, 6vw);
  animation: rotate-icon 2s ease-in-out infinite;
  display: inline-block;
}

@keyframes rotate-icon {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(90deg);
  }
}

#orientation-prompt-message {
  font-size: min(24px, 6vw);
  font-weight: 600;
  margin-bottom: min(12px, 3vw);
  color: #4abaed;
  padding: 0 min(20px, 5vw);
}

#orientation-prompt-submessage {
  font-size: min(16px, 4vw);
  opacity: 0.8;
  max-width: min(300px, 80vw);
  padding: 0 min(20px, 5vw);
  line-height: 1.5;
}

/* Ensure 16:9 container works properly in landscape */
@media (orientation: landscape) {
  /* Container should scale correctly in landscape */
  #game-container {
    /* Existing styles should handle this, but ensure proper scaling */
  }
}

/* Portrait orientation on mobile devices */
@media (orientation: portrait) and (max-width: 1024px) {
  /* On mobile devices in portrait, the orientation prompt will be shown via JavaScript */
  /* The game container may need adjustments, but we'll handle that via JS */
}

/* Desktop - no orientation prompt needed */
@media (min-width: 1025px) {
  #orientation-prompt {
    display: none !important;
  }
}