/**
 * chess/board-flip.css — BLACK SEAT via square remapping (no CSS rotate).
 *
 * Why: rotate(180) on #main-grid + counter-rotate on pieces is fragile under
 * modular CSS cascade. Symptom: is-flipped true → all piece glyphs upside-down
 * (counter-rotate applied while board geometry stays white-up, or vice versa).
 *
 * Model: when #board-wrapper.is-flipped, each .square[data-index=i] is placed
 * at the visual cell of index 63-i. Pieces NEVER rotate. Checker is 180-symmetric.
 * Load LAST among board CSS so these win. Magnet JS still inverts col/row when flipped.
 */

/* Kill every legacy rotate flip — pieces stay upright always */
html body.chess-page #board-wrapper.is-flipped,
html body.m-body-chess #board-wrapper.is-flipped,
html body.chess-page #board-wrapper:not(.is-flipped),
html body.m-body-chess #board-wrapper:not(.is-flipped) {
  transform: translateZ(0) !important;
}
html body.chess-page #board-wrapper.is-flipped #main-grid,
html body.chess-page #board-wrapper.is-flipped .main-chess-grid,
html body.chess-page #board-wrapper:not(.is-flipped) #main-grid,
html body.chess-page #board-wrapper:not(.is-flipped) .main-chess-grid,
html body.m-body-chess #board-wrapper.is-flipped #main-grid,
html body.m-body-chess #board-wrapper.is-flipped .main-chess-grid,
html body.m-body-chess #board-wrapper:not(.is-flipped) #main-grid,
html body.m-body-chess #board-wrapper:not(.is-flipped) .main-chess-grid {
  transform: none !important;
  transform-origin: center center !important;
}
html body.chess-page #board-wrapper.is-flipped #main-grid > .square .piece,
html body.chess-page #board-wrapper.is-flipped #main-grid > .square img.piece,
html body.chess-page #board-wrapper.is-flipped .piece,
html body.chess-page #board-wrapper.is-flipped img.piece,
html body.chess-page #board-wrapper:not(.is-flipped) #main-grid > .square .piece,
html body.chess-page #board-wrapper:not(.is-flipped) #main-grid > .square img.piece,
html body.chess-page #board-wrapper:not(.is-flipped) .piece,
html body.chess-page #board-wrapper:not(.is-flipped) img.piece,
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square .piece,
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square img.piece,
html body.m-body-chess #board-wrapper.is-flipped .piece,
html body.m-body-chess #board-wrapper.is-flipped img.piece,
html body.m-body-chess #board-wrapper:not(.is-flipped) #main-grid > .square .piece,
html body.m-body-chess #board-wrapper:not(.is-flipped) #main-grid > .square img.piece,
html body.m-body-chess #board-wrapper:not(.is-flipped) .piece,
html body.m-body-chess #board-wrapper:not(.is-flipped) img.piece {
  transform: none !important;
}

/* Black seat: place square i where 63-i sits for white */
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="0"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="0"] { left: 87.5% !important; top: 87.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="1"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="1"] { left: 75.0% !important; top: 87.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="2"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="2"] { left: 62.5% !important; top: 87.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="3"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="3"] { left: 50.0% !important; top: 87.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="4"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="4"] { left: 37.5% !important; top: 87.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="5"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="5"] { left: 25.0% !important; top: 87.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="6"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="6"] { left: 12.5% !important; top: 87.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="7"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="7"] { left: 0.0% !important; top: 87.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="8"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="8"] { left: 87.5% !important; top: 75.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="9"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="9"] { left: 75.0% !important; top: 75.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="10"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="10"] { left: 62.5% !important; top: 75.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="11"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="11"] { left: 50.0% !important; top: 75.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="12"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="12"] { left: 37.5% !important; top: 75.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="13"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="13"] { left: 25.0% !important; top: 75.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="14"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="14"] { left: 12.5% !important; top: 75.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="15"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="15"] { left: 0.0% !important; top: 75.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="16"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="16"] { left: 87.5% !important; top: 62.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="17"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="17"] { left: 75.0% !important; top: 62.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="18"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="18"] { left: 62.5% !important; top: 62.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="19"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="19"] { left: 50.0% !important; top: 62.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="20"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="20"] { left: 37.5% !important; top: 62.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="21"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="21"] { left: 25.0% !important; top: 62.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="22"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="22"] { left: 12.5% !important; top: 62.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="23"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="23"] { left: 0.0% !important; top: 62.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="24"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="24"] { left: 87.5% !important; top: 50.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="25"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="25"] { left: 75.0% !important; top: 50.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="26"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="26"] { left: 62.5% !important; top: 50.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="27"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="27"] { left: 50.0% !important; top: 50.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="28"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="28"] { left: 37.5% !important; top: 50.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="29"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="29"] { left: 25.0% !important; top: 50.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="30"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="30"] { left: 12.5% !important; top: 50.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="31"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="31"] { left: 0.0% !important; top: 50.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="32"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="32"] { left: 87.5% !important; top: 37.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="33"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="33"] { left: 75.0% !important; top: 37.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="34"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="34"] { left: 62.5% !important; top: 37.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="35"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="35"] { left: 50.0% !important; top: 37.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="36"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="36"] { left: 37.5% !important; top: 37.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="37"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="37"] { left: 25.0% !important; top: 37.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="38"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="38"] { left: 12.5% !important; top: 37.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="39"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="39"] { left: 0.0% !important; top: 37.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="40"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="40"] { left: 87.5% !important; top: 25.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="41"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="41"] { left: 75.0% !important; top: 25.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="42"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="42"] { left: 62.5% !important; top: 25.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="43"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="43"] { left: 50.0% !important; top: 25.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="44"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="44"] { left: 37.5% !important; top: 25.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="45"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="45"] { left: 25.0% !important; top: 25.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="46"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="46"] { left: 12.5% !important; top: 25.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="47"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="47"] { left: 0.0% !important; top: 25.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="48"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="48"] { left: 87.5% !important; top: 12.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="49"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="49"] { left: 75.0% !important; top: 12.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="50"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="50"] { left: 62.5% !important; top: 12.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="51"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="51"] { left: 50.0% !important; top: 12.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="52"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="52"] { left: 37.5% !important; top: 12.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="53"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="53"] { left: 25.0% !important; top: 12.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="54"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="54"] { left: 12.5% !important; top: 12.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="55"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="55"] { left: 0.0% !important; top: 12.5% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="56"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="56"] { left: 87.5% !important; top: 0.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="57"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="57"] { left: 75.0% !important; top: 0.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="58"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="58"] { left: 62.5% !important; top: 0.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="59"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="59"] { left: 50.0% !important; top: 0.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="60"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="60"] { left: 37.5% !important; top: 0.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="61"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="61"] { left: 25.0% !important; top: 0.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="62"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="62"] { left: 12.5% !important; top: 0.0% !important; }
html body.chess-page #board-wrapper.is-flipped #main-grid > .square[data-index="63"],
html body.m-body-chess #board-wrapper.is-flipped #main-grid > .square[data-index="63"] { left: 0.0% !important; top: 0.0% !important; }

/* ═══════════════════════════════════════════════════════════
   Circular flip control (near player timer) — load-last win
   ═══════════════════════════════════════════════════════════ */
html body.chess-page .seat-clock-cluster,
html body.m-body-chess .seat-clock-cluster,
html body.m-body-battle .seat-clock-cluster {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.4rem !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

html body.chess-page button.chess-flip-btn,
html body.chess-page #chess-flip-btn.chess-flip-btn,
html body.m-body-chess button.chess-flip-btn,
html body.m-body-chess #chess-flip-btn.chess-flip-btn,
html body.m-body-battle button.chess-flip-btn,
html body.m-body-battle #chess-flip-btn.chess-flip-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  width: 1.65rem !important;
  height: 1.65rem !important;
  min-width: 1.65rem !important;
  min-height: 1.65rem !important;
  max-width: 1.65rem !important;
  max-height: 1.65rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 255, 136, 0.38) !important;
  background: rgba(0, 22, 12, 0.88) !important;
  color: #9fefb8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex: 0 0 1.65rem !important;
  line-height: 1 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45) inset,
    0 1px 4px rgba(0, 0, 0, 0.35) !important;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.1s ease !important;
  overflow: hidden !important;
}
html body.chess-page button.chess-flip-btn:hover,
html body.chess-page #chess-flip-btn.chess-flip-btn:hover,
html body.m-body-chess button.chess-flip-btn:hover {
  background: rgba(0, 255, 136, 0.16) !important;
  border-color: rgba(0, 255, 136, 0.62) !important;
  color: #f0fff4 !important;
}
html body.chess-page button.chess-flip-btn:active,
html body.chess-page #chess-flip-btn.chess-flip-btn:active {
  transform: scale(0.93) !important;
}
html body.chess-page button.chess-flip-btn.is-flipped,
html body.chess-page button.chess-flip-btn[aria-pressed="true"],
html body.chess-page #chess-flip-btn.chess-flip-btn.is-flipped,
html body.chess-page #chess-flip-btn.chess-flip-btn[aria-pressed="true"] {
  border-color: rgba(0, 255, 136, 0.7) !important;
  color: #3dffa0 !important;
  background: rgba(0, 255, 136, 0.14) !important;
  box-shadow:
    0 0 0 1px rgba(0, 255, 136, 0.15) inset,
    0 0 10px rgba(0, 255, 136, 0.18) !important;
}
html body.chess-page .chess-flip-btn__glyph,
html body.m-body-chess .chess-flip-btn__glyph {
  display: block !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  user-select: none !important;
}
html body.chess-page .chess-flip-btn__icon,
html body.m-body-chess .chess-flip-btn__icon {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  pointer-events: none !important;
}