/* ==================== RESPONSIVE FIX ====================
   Added by ChatGPT: one sizing system for many screens.
   This file intentionally loads after the old CSS and overrides the
   fixed desktop/mobile cell sizes that caused layout problems.
========================================================= */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --game-top-controls: clamp(52px, 8dvh, 76px);
  --board-radius: clamp(10px, 1.6vw, 20px);
}

html,
body {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  position: static;
  padding: 0 !important;
}

body {
  min-height: 100dvh;
  background-attachment: scroll;
}

#lobby-screen {
  position: fixed;
  inset: 0;
  height: 100dvh;
  min-height: 100svh;
  overflow-y: auto;
  padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
  align-items: flex-start;
}

.lobby-container {
  width: min(520px, 100%);
  max-height: none;
  margin: auto;
}

#game-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100svh;
  padding: calc(var(--game-top-controls) + var(--safe-top)) calc(10px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(10px + var(--safe-left));
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#board {
  width: min(96vw, 1400px) !important;
  height: min(calc(100dvh - var(--game-top-controls) - 24px), 900px) !important;
  min-height: 250px;
  border-radius: var(--board-radius);
  overflow: visible;
}

.cell {
  width: var(--cell-size, 60px) !important;
  height: var(--cell-size, 60px) !important;
  border-radius: calc(var(--cell-size, 60px) * 0.18) !important;
  border-width: clamp(2px, calc(var(--cell-size, 60px) * 0.045), 4px) !important;
}

.player {
  width: var(--player-size, 40px) !important;
  height: var(--player-size, 40px) !important;
  border-width: clamp(2px, calc(var(--player-size, 40px) * 0.05), 3px) !important;
}

.start-icon {
  font-size: calc(var(--cell-size, 60px) * 0.42) !important;
}

.bot-icon {
  font-size: calc(var(--cell-size, 60px) * 0.46) !important;
  margin-top: calc(var(--cell-size, 60px) * -0.05) !important;
}

.bot-label {
  bottom: calc(var(--cell-size, 60px) * 0.08) !important;
  font-size: clamp(6px, calc(var(--cell-size, 60px) * 0.15), 13px) !important;
}

.player-label {
  bottom: calc(var(--player-size, 40px) * -0.42) !important;
  font-size: clamp(8px, calc(var(--player-size, 40px) * 0.22), 12px) !important;
  padding: 2px 8px !important;
}

#board-center {
  min-width: clamp(108px, 18vw, 220px) !important;
  max-width: min(34vw, 250px);
  padding: clamp(7px, 2vw, 24px) !important;
  border-radius: clamp(10px, 1.5vw, 20px) !important;
}

#dice {
  width: clamp(48px, 9dvh, 88px) !important;
  height: clamp(48px, 9dvh, 88px) !important;
  gap: clamp(2px, 0.6dvh, 5px) !important;
  padding: clamp(5px, 1dvh, 8px) !important;
}

#rollBtn {
  padding: clamp(7px, 1.4dvh, 12px) clamp(12px, 2vw, 25px) !important;
  font-size: clamp(0.78rem, 1.6dvh, 1.1rem) !important;
  min-height: 0 !important;
}

#turnDisplay,
#turnTimerDisplay,
#rollResult {
  font-size: clamp(0.72rem, 1.55dvh, 1.08rem) !important;
  margin: clamp(3px, 0.8dvh, 10px) 0 !important;
}

#turnTimerDisplay {
  padding: clamp(3px, 0.75dvh, 8px) clamp(6px, 1.4vw, 12px) !important;
}

.game-controls {
  top: max(6px, var(--safe-top)) !important;
  left: max(8px, var(--safe-left)) !important;
  right: max(8px, var(--safe-right)) !important;
  gap: 8px !important;
}

.quit-game-btn {
  padding: clamp(7px, 1.3dvh, 12px) clamp(10px, 2vw, 24px) !important;
  font-size: clamp(0.75rem, 1.7dvh, 1rem) !important;
  min-height: 0 !important;
}

.control-btn {
  width: clamp(34px, 6.5dvh, 50px) !important;
  height: clamp(34px, 6.5dvh, 50px) !important;
  font-size: clamp(0.9rem, 2dvh, 1.3rem) !important;
  min-height: 0 !important;
}

/* Keep chat compact by default on small screens so it does not cover the board. */
@media (max-width: 900px), (max-height: 560px) {
  #chatBox {
    width: min(300px, calc(100vw - 20px)) !important;
    right: calc(10px + var(--safe-right)) !important;
    bottom: calc(10px + var(--safe-bottom)) !important;
    max-height: min(340px, calc(100dvh - 90px)) !important;
  }

  #chatMessages {
    max-height: min(230px, calc(100dvh - 190px)) !important;
    min-height: 120px !important;
  }

  #chatHeader {
    padding: 8px 12px !important;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  :root {
    --game-top-controls: 56px;
  }

  #game-container {
    padding-left: calc(6px + var(--safe-left));
    padding-right: calc(6px + var(--safe-right));
  }

  #board {
    width: min(98vw, 900px) !important;
    height: min(calc(100dvh - 86px), 720px) !important;
    min-height: 360px;
  }

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

@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --game-top-controls: 46px;
  }

  #game-container {
    padding-top: calc(var(--game-top-controls) + var(--safe-top));
    padding-bottom: calc(6px + var(--safe-bottom));
  }

  #board {
    width: min(98vw, 1400px) !important;
    height: calc(100dvh - var(--game-top-controls) - 10px) !important;
    min-height: 220px;
  }

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

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

  .voice-controls {
    gap: 6px !important;
  }
}

@media (max-width: 420px) {
  #board-center {
    transform: translate(-50%, -50%) scale(0.88) !important;
  }

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

/* Avoid expensive paint containment while the JS moves players around. */
.cell,
.player {
  contain: none !important;
}