/* sternhalma: rules used only by the sternhalma pages (loaded after base.css). */
.big-board-enabled .sternhalma-board { width: 560px; max-width: none; margin: 0; }

/* Chinese Checkers ("sternhalma" internally - see sternhalma-core.js
   for why) board: a six-pointed star of round holes on a triangular
   lattice, laid out via percentage-based absolute positioning (the
   same technique as Hex's board) with a JS-enforced aspect ratio,
   since - like Hex - this board isn't square. Each hole is itself a
   round button (rather than a square cell with a round piece drawn
   on top), and an occupied hole additionally shows a marble disc,
   told apart structurally like every other 2-player board here
   (filled vs. outlined disc) rather than by color alone. Each
   side's home/goal point gets the same shaded-diagonal-stripe
   treatment as Halma's camps above. */
.sternhalma-board {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  box-sizing: border-box;
}

.sternhalma-cell {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--square-light);
}

.sternhalma-cell-movable {
  background: var(--square-dark);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--text);
}

.sternhalma-cell-home-p1,
.sternhalma-cell-home-p2 {
  background: repeating-linear-gradient(45deg, var(--square-light), var(--square-light) 4px, var(--square-dark) 4px, var(--square-dark) 5px);
}

/* box-shadow (not outline) so the ring actually follows the circular
   border-radius instead of drawing a rectangle around it. */
.sternhalma-cell.selected {
  box-shadow: 0 0 0 3px var(--accent);
}

.sternhalma-cell.last-move {
  box-shadow: inset 0 0 0 3px var(--accent);
}

.sternhalma-marble {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

.sternhalma-marble-p1 {
  background: #111;
  border: 2px solid #000;
}

.sternhalma-marble-p2 {
  background: var(--square-light);
  border: 2px solid var(--border);
}

/* Small icons for the side-choice picker and board placeholder,
   matching the board's own marble styling. */
.sternhalma-icon-piece {
  display: inline-flex;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: middle;
}

.sternhalma-icon-piece-p1 {
  background: #111;
  border: 2px solid #000;
}

.sternhalma-icon-piece-p2 {
  background: var(--square-light);
  border: 2px solid var(--border);
}

.sternhalma-cell-movable.last-move {
  box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 3px #fff, 0 0 0 6px var(--text);
}