/* hex: rules used only by the hex pages (loaded after base.css). */
/* Hex board: a rhombus of hexagonal cells (percentage-based absolute
   positioning, the same technique as Go's board), with a JS-enforced
   non-square aspect ratio - the board is noticeably wider than tall,
   unlike every other board here. Stones are told apart structurally
   (filled vs. outlined), and each player's pair of target edges gets
   its own distinct thicker border so it's clear which side is trying
   to connect where without relying on color for that either. */
.hex-board-wrap {
  max-width: 620px;
  margin: 0 auto;
}

/* Large board (task 125): cells of about 36 px instead of 25 px at 360 px. */
.big-board-enabled .hex-board-wrap { min-width: 480px; margin: 0; }

.hex-board {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* A clip-path polygon clips away a plain CSS border wherever the
   polygon's edge is diagonal (only the two vertical flat sides of
   this pointy-top hexagon would show a stroke), so each cell is built
   from two stacked, identically-clipped hexagons instead: a slightly
   larger one in the border color underneath, and a slightly inset one
   in the fill color on top - the same trick used to fake a uniform
   outline on any non-rectangular CSS shape. */
.hex-cell {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}

.hex-cell-border,
.hex-cell-fill {
  position: absolute;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hex-cell-border {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--border);
}

.hex-cell-fill {
  top: 6%;
  right: 6%;
  bottom: 6%;
  left: 6%;
  background: var(--square-light);
}

.hex-cell.last-move .hex-cell-fill {
  background: var(--square-dark);
}

.hex-legend {
  display: flex;
  justify-content: center;
margin: 0.5rem auto 0;
  max-width: 620px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Flexbox `gap` fallback: margin-based spacing instead, since some E-Ink browsers (Tolino confirmed) don't support `gap` on a flex container and render items with zero space between them. */
.hex-legend > * {
  margin: 0 1.2rem 1.2rem 0;
}

.hex-legend > *:last-child {
  margin-right: 0;
}

.hex-legend-item {
  display: inline-flex;
  align-items: center;
}

/* Flexbox `gap` fallback: margin-based spacing instead, since some E-Ink browsers (Tolino confirmed) don't support `gap` on a flex container and render items with zero space between them. */
.hex-legend-item > * {
  margin: 0 0.35rem 0.35rem 0;
}

.hex-legend-item > *:last-child {
  margin-right: 0;
}

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

.hex-stone-r {
  background: #111;
  border: 2px solid #000;
}

.hex-stone-b {
  background: var(--square-light);
  border: 2px solid var(--border);
}

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

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

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

/* Colour choice with words (task 120): each choice a framed row of at
   least 44 px; the chosen one gets a thick frame. */
#hex-color-choice {
  display: block;
  width: 100%;
}

.inline-options .hex-color-label {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0 0 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
}

.inline-options .hex-color-label-on {
  border: 4px solid var(--text);
  padding: 1px 5px;
  font-weight: 700;
}

/* The fixed line above the board: your colour and your two edges. */
.hex-side-line {
  margin: 0 0 var(--space-1);
  font-weight: 700;
  text-align: center;
}