/*
 * 3-Player Ludo chrome. Self-contained, loaded after skin.css.
 *
 * Three arms of the classic cross board are played (green / yellow / blue). The
 * 4th seat's yard and home lane are cut out of the board entirely: that quadrant
 * goes the same dark as the filler the board already uses around its lanes, so
 * nothing on it reads as a home with no owner.
 *
 * The board is then turned a quarter-step so my yard is always bottom-left,
 * which is where a thumb already is. js/ludo.js re-places the cells in the grid
 * (it does not spin the element), so pawns, arrows and the cut corner all stay
 * upright, and the 52-cell ring the server and Flutter speak is untouched.
 */

/* Cut corner: the same negative space the board already uses, not a plate. */
.board[data-seats="3"] .cell.dead,
.board[data-seats="3"] .cell.dead.yard,
.board[data-seats="3"] .cell.dead.yard.red,
.board[data-seats="3"] .cell.dead.yard-inner,
.board[data-seats="3"] .cell.dead:not(.yard) {
  background: #0b1220;
  border: 0;
  box-shadow: none;
}

.board[data-seats="3"] .cell.dead.pad::after { content: none; }

/* Where the cut meets the board's own rounded corner. */
.board[data-seats="3"] .cell.dead[data-vr="0"][data-vc="0"] { border-top-left-radius: 10px; }
.board[data-seats="3"] .cell.dead[data-vr="0"][data-vc="14"] { border-top-right-radius: 10px; }
.board[data-seats="3"] .cell.dead[data-vr="14"][data-vc="0"] { border-bottom-left-radius: 10px; }
.board[data-seats="3"] .cell.dead[data-vr="14"][data-vc="14"] { border-bottom-right-radius: 10px; }

/* Hairline along the two cut edges, so the void reads as a finished wall. */
.board[data-seats="3"] .cell.dead.yard[data-r="9"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); }
.board[data-seats="3"] .cell.dead.yard[data-c="5"] { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .09); }

/* Three-wedge hub — the bottom wedge is shared by the two side arms. */
.board[data-seats="3"] .hub-g { clip-path: polygon(0 0, 0 100%, 50% 100%, 50% 50%); }
.board[data-seats="3"] .hub-b { clip-path: polygon(100% 0, 100% 100%, 50% 100%, 50% 50%); }

/* Bar sealing the mouth of the closed lane. */
.board[data-seats="3"] .hub-seal {
  position: absolute;
  left: 35%;
  right: 35%;
  bottom: 0;
  height: 30%;
  border-radius: 5px 5px 0 0;
  background: #0b1220;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* The hub is the one thing that does spin: it sits dead centre, and its wedges
   have to keep pointing down each arm's home lane. */
.board[data-seats="3"][data-rot="90"] .ludo-hub { transform: rotate(90deg); }
.board[data-seats="3"][data-rot="180"] .ludo-hub { transform: rotate(180deg); }
.board[data-seats="3"][data-rot="270"] .ludo-hub { transform: rotate(270deg); }