/* HexFlood-specific styles (game page + palette + board wrapping).
   Board geometry/rendering lives in /assets/hex_svg_board.{js,css}.
*/

.hf-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hf-board-wrap {
  width: 100%;
  overflow: hidden; /* prevent accidental horizontal scroll */
}

.hf-board {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Constrain SVG height so the board stays within the vertical viewport (desktop-friendly). */
.hf-board svg.hex-svgboard{
  width: 100%;
  height: auto;
  max-height: 62vh;
  display: block;
}

.hf-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hf-colorbtn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  color: #111;
}

.hf-colorbtn .lbl {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.hf-colorbtn:disabled {
  opacity: 0.45;
}

.hf-colorbtn:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Board rendering is SVG-driven; per-cell DOM button styles removed. */

/* Dead/blocked cells */
.hf-board .dead{
  --hex-cell-fill: #000;
}

.hf-start-star{
  font-size: 0.7px; /* SVG user units (s0=1) */
  font-weight: 900;
  fill: rgba(255,255,255,0.9);
  stroke: rgba(0,0,0,0.35);
  stroke-width: 0.06px;
  paint-order: stroke fill;
  pointer-events: none;
  user-select: none;
}