/* FormyDog v125 · crisp HiDPI board + small-screen geometry hardening.
   Loaded last on purpose so it normalizes the accumulated mobile rules
   without changing gameplay, board state or tile logic. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app,
.game-layout,
.center,
.board-shell,
.board-mount {
  min-width: 0;
  box-sizing: border-box;
}

/* Never let the board size itself from viewport width alone. The parent may
   be narrower because of safe areas, padding or native webview chrome. */
@media (max-width: 900px) {
  html body .app > .game-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .app > .game-layout > .center {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: max(6px, env(safe-area-inset-left)) !important;
    padding-right: max(6px, env(safe-area-inset-right)) !important;
    overflow: visible !important;
  }

  html body .app > .game-layout > .center .board-shell {
    position: relative !important;
    width: min(100%, 500px) !important;
    max-width: 500px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    contain: layout paint !important;
  }

  html body .app > .game-layout > .center .board-mount {
    position: absolute !important;
    inset: 6px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body .app > .game-layout > .center .board-mount canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    image-rendering: auto !important;
    -webkit-font-smoothing: antialiased;
  }
}

/* Narrow phones: reserve a little breathing room so the frame cannot touch
   or overflow the physical screen edge. */
@media (max-width: 390px) {
  html body .app > .game-layout > .center {
    padding-left: max(7px, env(safe-area-inset-left)) !important;
    padding-right: max(7px, env(safe-area-inset-right)) !important;
  }

  html body .app > .game-layout > .center .board-shell {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    padding: 5px !important;
  }

  html body .app > .game-layout > .center .board-mount {
    inset: 5px !important;
    border-radius: 12px !important;
  }
}

/* Short screens previously switched to a layout that could let the board
   compete with header/boosters for width/height. Keep the board square and
   allow normal vertical scrolling instead of deforming it. */
@media (max-width: 520px) and (max-height: 759px) {
  html body .app {
    min-height: 100dvh !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  html body .app > .game-layout {
    height: auto !important;
    min-height: 0 !important;
    align-content: start !important;
  }

  html body .app > .game-layout > .center .board-shell {
    flex-shrink: 0 !important;
  }
}

/* Very small landscape / embedded webviews: constrain by height too, while
   keeping the 8x8 board perfectly square. */
@media (max-height: 520px) and (orientation: landscape) {
  html body .app > .game-layout > .center .board-shell {
    width: min(100%, calc(100dvh - 34px), 500px) !important;
  }
}