/* ==================== ORIENTATION CONSISTENCY FIX ====================
   Final override loaded last. The goal is to make portrait/landscape use
   the same viewport math and avoid stale 100vh sizes after rotating phones.
====================================================================== */
:root {
  --app-width: 100vw;
  --app-height: 100dvh;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --game-toolbar-h: clamp(46px, 8svh, 72px);
}

html,
body {
  width: var(--app-width) !important;
  min-height: var(--app-height) !important;
  height: var(--app-height) !important;
  max-width: 100vw;
  overflow: hidden !important;
  position: fixed !important;
  inset: 0 !important;
}

/* Screens share one viewport model, so changing orientation does not leave
   old portrait/landscape measurements behind. */
#auth-screen,
#main-menu-screen,
#lobby-screen,
#game-container {
  width: var(--app-width) !important;
  height: var(--app-height) !important;
  min-height: var(--app-height) !important;
  max-height: var(--app-height) !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}

#auth-screen,
#main-menu-screen,
#lobby-screen {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: max(10px, var(--app-safe-top)) !important;
  padding-right: max(10px, var(--app-safe-right)) !important;
  padding-bottom: max(10px, var(--app-safe-bottom)) !important;
  padding-left: max(10px, var(--app-safe-left)) !important;
}

#game-container {
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: calc(var(--game-toolbar-h) + var(--app-safe-top)) !important;
  padding-right: calc(8px + var(--app-safe-right)) !important;
  padding-bottom: calc(8px + var(--app-safe-bottom)) !important;
  padding-left: calc(8px + var(--app-safe-left)) !important;
}

#board {
  width: min(calc(var(--app-width) - 16px - var(--app-safe-left) - var(--app-safe-right)), 1400px) !important;
  height: min(calc(var(--app-height) - var(--game-toolbar-h) - 16px - var(--app-safe-top) - var(--app-safe-bottom)), 900px) !important;
  min-height: 220px !important;
  max-height: calc(var(--app-height) - var(--game-toolbar-h) - 12px) !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.game-controls {
  top: max(6px, var(--app-safe-top)) !important;
  left: max(8px, var(--app-safe-left)) !important;
  right: max(8px, var(--app-safe-right)) !important;
  height: auto !important;
  max-height: calc(var(--game-toolbar-h) - 4px) !important;
  align-items: center !important;
}

/* Portrait phones/tablets: show a real overlay, but keep the app dimensions
   consistent underneath so it reflows correctly immediately after rotation. */
#orientationWarning {
  box-sizing: border-box;
}

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

body:not(.orientation-portrait-lock) #orientationWarning {
  display: none !important;
}

@media (orientation: portrait) and (max-width: 1024px) {
  :root {
    --game-toolbar-h: 52px;
  }

  #board {
    width: min(calc(var(--app-width) - 12px), 900px) !important;
    height: min(calc(var(--app-height) - 76px), 720px) !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --game-toolbar-h: 44px;
  }

  #game-container {
    padding-top: calc(var(--game-toolbar-h) + var(--app-safe-top)) !important;
    padding-bottom: calc(5px + var(--app-safe-bottom)) !important;
  }

  #board {
    width: min(calc(var(--app-width) - 10px), 1400px) !important;
    height: calc(var(--app-height) - var(--game-toolbar-h) - 10px - var(--app-safe-top) - var(--app-safe-bottom)) !important;
    min-height: 210px !important;
  }

  .player-label,
  .bot-label {
    display: none !important;
  }
}

@media (orientation: landscape) and (max-height: 380px) {
  :root {
    --game-toolbar-h: 40px;
  }

  #board-center {
    transform: translate(-50%, -50%) scale(0.82) !important;
  }

  .quit-game-btn {
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}