.hl-wrap{
  width: 100%;
}

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

.hl-board svg.hex-svgboard{
  width: 100%;
  height: auto;
  max-height: 62vh;
  display:block;
}

/* Darker cells for better contrast with clues + teal lines */
.hl-board{
  --hex-cell-fill: #5a5a5a;
}

/* cells */
.hl-board .hex-svg-cell{
  cursor: default;
}

/* edge styling */
.hex-svg-edge{
  /* Default: invisible hit region (we rely on the polygon for hit-testing). */
  fill: rgba(255,255,255,0.00);
  cursor: pointer;
}

/* Loop line */
.hex-svg-edge.line{
  fill: rgba(94,242,194,0.85);
}

/* Loop X-mark */
.hex-svg-edge.x{
  fill: rgba(255,255,255,0.06);
}

.hl-x{
  font-size: 0.62px;
  font-weight: 900;
  fill: rgba(255,255,255,0.68);
  /* no stroke (cleaner on small screens) */
  pointer-events: none;
  user-select: none;
}

/* clues */
.hl-clue{
  font-size: 0.55px;
  font-weight: 800;
  fill: rgba(255,255,255,0.92);
  /* no stroke (cleaner on small screens) */
  pointer-events: none;
  user-select: none;
}

/* Hide size KPI in published game (it’s a dev/debug detail). */
#kpiSizeWrap{ display:none; }