/**
 * stage-center.css — desktop board stage centering only.
 *
 * Load LAST on DESKTOP /chess (optional on mobile with no size rules).
 *
 * NEVER apply --board-size: calc(100vw - 340px) to mobile bodies that also
 * carry .chess-page — that collapses the phone board to a postage stamp.
 *
 * Mobile sizing: chess-tab.css / battle-layout / board-mobile — not here.
 */

/* ── Desktop shell only ── */
html body.chess-page:not(.m-body-chess):not(.m-body-battle) {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  --stage-chrome: 56px;
  /* Fit board in viewport with room for side rails (desktop gutters) */
  --board-size: min(
    62dvh,
    calc(100dvh - var(--stage-chrome) - 120px),
    calc(100vw - 340px),
    620px
  );
}

html body.chess-page:not(.m-body-chess):not(.m-body-battle) .chess-mini-bar,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) .chess-forge-top,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) .chess-mini-foot,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) .chess-forge-foot,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) #chess-page-footer {
  flex: 0 0 auto !important;
}

html body.chess-page:not(.m-body-chess):not(.m-body-battle) .chess-forge-stage,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) main.chess-forge-stage,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) .chess-stage-wide {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  max-width: min(1760px, 98vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  contain: none !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
}

html body.chess-page:not(.m-body-chess):not(.m-body-battle) .chess-public-wrap,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) .arena-layout,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) .chess-system-container,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) .chess-public-arena {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

html body.chess-page:not(.m-body-chess):not(.m-body-battle) .chess-main-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html body.chess-page:not(.m-body-chess):not(.m-body-battle) .flight-deck {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
  max-height: 100% !important;
}

html body.chess-page:not(.m-body-chess):not(.m-body-battle) #board-wrapper,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) .board-relative-wrapper {
  width: var(--board-size) !important;
  height: var(--board-size) !important;
  max-width: min(var(--board-size), 100%) !important;
  max-height: var(--board-size) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex: 0 0 auto !important;
}

html body.chess-page:not(.m-body-chess):not(.m-body-battle) #main-grid,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) .main-chess-grid {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

html body.chess-page:not(.m-body-chess):not(.m-body-battle) aside.chess-match-rail,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) .chess-match-rail.tactical-sidebar,
html body.chess-page:not(.m-body-chess):not(.m-body-battle) aside.chess-controls-rail {
  align-self: center !important;
}

/* ── Mobile: center only — NEVER re-size the board here ── */
html body.m-body-chess:not(.m-body-battle) .m-main-chess {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  min-height: 0 !important;
}

html body.m-body-chess:not(.m-body-battle) .m-chess,
html body.m-body-chess:not(.m-body-battle) .m-chess-board-host {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.m-body-chess:not(.m-body-battle) .m-chess-board-host .chess-main-row,
html body.m-body-chess:not(.m-body-battle) .flight-deck {
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Undo any desktop postage-stamp size if it leaked onto mobile */
html body.m-body-chess #board-wrapper,
html body.m-body-chess .board-relative-wrapper,
html body.m-body-battle #board-wrapper,
html body.m-body-battle .board-relative-wrapper {
  /* Prefer chess-tab / battle --m-board-size / --board-size; floor so never stamp-sized */
  width: var(--m-board-size, var(--board-size, min(92vw, 420px))) !important;
  height: var(--m-board-size, var(--board-size, min(92vw, 420px))) !important;
  max-width: calc(100vw - 1.4rem) !important;
  max-height: none !important;
  min-width: min(280px, 92vw) !important;
  min-height: min(280px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex: 0 0 auto !important;
}

html body.m-body-battle .m-battle-board-zone,
html body.m-body-battle .m-battle-play {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}


/* === MOBILE VERTICAL CENTER FORCE === */
/*
 * Absolute-center the practice board block in main.
 * Flex-only centering kept losing to desktop arena height:100% + flex-start.
 */
html body.m-body-chess:not(.m-body-battle),
html body.m-body-chess:not(.m-body-battle) .m-app {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

html body.m-body-chess:not(.m-body-battle) .m-topbar,
html body.m-body-chess:not(.m-body-battle) .m-tabbar {
  flex: 0 0 auto !important;
}

html body.m-body-chess:not(.m-body-battle) .m-main-chess {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  display: block !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Dead-center board stack in the main pane (above practice dock / tabbar) */
html body.m-body-chess:not(.m-body-battle) .m-chess {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100% - 12px) !important;
  margin: 0 !important;
  padding: 0 6px 64px !important; /* room for fixed practice dock */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  z-index: 2 !important;
}

html body.m-body-chess:not(.m-body-battle) .m-chess-board-host,
html body.m-body-chess:not(.m-body-battle) .chess-public-wrap,
html body.m-body-chess:not(.m-body-battle) .arena-layout,
html body.m-body-chess:not(.m-body-battle) .chess-system-container,
html body.m-body-chess:not(.m-body-battle) .chess-main-row,
html body.m-body-chess:not(.m-body-battle) .flight-deck {
  position: relative !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}

/* Battle: center board zone content */
html body.m-body-battle .m-battle-play {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
html body.m-body-battle .m-battle-board-zone {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}