/**
 * chess_coords.css — rank/file labels outside the board (v0.94.53)
 * #board-wrapper used overflow:hidden + contain:strict and clipped these.
 */
body.chess-page #board-wrapper,
body.chess-page .board-relative-wrapper,
body.m-body-chess #board-wrapper,
body.m-body-chess .board-relative-wrapper {
  overflow: visible !important;
  /* layout stability without paint-clipping coords */
  contain: layout style !important;
}

/* Grid clips paint; avoid size containment (breaks % children before JS size) */
body.chess-page #main-grid,
body.chess-page .main-chess-grid,
body.m-body-chess #main-grid,
body.m-body-chess .main-chess-grid {
  overflow: hidden !important;
  contain: layout style paint !important; /* not strict/size */
}

body.chess-page .flight-deck,
body.m-body-chess .flight-deck {
  overflow: visible !important;
}

/* Rank numbers — left of board */
body.chess-page .ranks-abs,
body.m-body-chess .ranks-abs {
  position: absolute !important;
  left: -18px !important;
  top: 0 !important;
  width: 16px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-around !important;
  align-items: center !important;
  z-index: 20 !important;
  pointer-events: none !important;
  color: #9fd9a8 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  opacity: 1 !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 1px 0 #000 !important;
}

/* File letters — under board */
body.chess-page .files-abs,
body.m-body-chess .files-abs {
  position: absolute !important;
  left: 0 !important;
  bottom: -18px !important;
  width: 100% !important;
  height: 16px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  align-items: center !important;
  z-index: 20 !important;
  pointer-events: none !important;
  color: #9fd9a8 !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: lowercase !important;
  opacity: 1 !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 1px 0 #000 !important;
}

body.chess-page .ranks-abs div,
body.chess-page .files-abs div,
body.m-body-chess .ranks-abs div,
body.m-body-chess .files-abs div {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
}

/* Flipped board: reverse label order visually with row/col reverse */
body.chess-page #board-wrapper.is-flipped .ranks-abs,
body.m-body-chess #board-wrapper.is-flipped .ranks-abs {
  flex-direction: column-reverse !important;
}
body.chess-page #board-wrapper.is-flipped .files-abs,
body.m-body-chess #board-wrapper.is-flipped .files-abs {
  flex-direction: row-reverse !important;
}

/* Room under/left so labels aren't clipped by stage */
body.chess-page .flight-deck {
  padding-left: 4px !important;
  padding-bottom: 6px !important;
  box-sizing: content-box !important;
}

@media (max-width: 720px) {
  body.chess-page .ranks-abs,
  body.m-body-chess .ranks-abs {
    left: -14px !important;
    width: 12px !important;
    font-size: 9px !important;
  }
  body.chess-page .files-abs,
  body.m-body-chess .files-abs {
    bottom: -14px !important;
    height: 12px !important;
    font-size: 9px !important;
  }
}