/* ==================== ORIENTATION WARNING ==================== */
body.orientation-portrait-lock {
  overflow: hidden !important;
}

#orientationWarning {
  display: none;
}

.orientation-warning-inner {
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.orientation-phone {
  font-size: 84px;
  animation: rotate-phone 2s infinite ease-in-out;
}

#orientationWarning h2 {
  font-size: 24px;
  margin: 0;
  color: #FFD54A;
}

#orientationWarning p,
#orientationWarning small {
  color: #d7e1f7;
  line-height: 1.45;
}

@keyframes rotate-phone {
  0%, 100% { transform: rotate(0deg); }
  25%, 75% { transform: rotate(-90deg); }
}

@media (max-width: 1024px) and (orientation: portrait) {
  #orientationWarning {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: radial-gradient(circle at top, rgba(46,124,255,.22), transparent 35%), rgba(4,9,22,.97);
    color: #fff;
  }
}

@media (orientation: landscape), (min-width: 1025px) {
  #orientationWarning {
    display: none !important;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  body {
    overflow: hidden;
  }
  #auth-screen,
  #main-menu-screen,
  #lobby-screen,
  #game-container {
    width: 100vw;
    height: 100dvh;
  }
}