/* ==========================================================================
   Shared orientation overlay — "LANDSCAPE MODE REQUIRED" rotate prompt.
   Linked on every page. Pairs with assets/device-detector.js.

   This file only STYLES the overlay and SHOWS it in portrait on phones/tablets.
   Hiding each page's own content in portrait is done per-page (container names
   differ from page to page) with a rule like:

     @media screen and (max-width: 1024px) and (orientation: portrait) {
       .my-container, .top-bar { display: none !important; }
     }
   ========================================================================== */

#orientation-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #000; z-index: 9999;
  color: #39ff14; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; padding: 20px; font-family: 'Orbitron', sans-serif;
}
#orientation-overlay .icon {
  font-size: 50px;
  margin-bottom: 20px;
  animation: rotatePhone 2s infinite ease-in-out;
}

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

/* Show overlay on mobile/tablet portrait */
@media screen and (max-width: 1024px) and (orientation: portrait) {
  #orientation-overlay { display: flex !important; }
}