.polyabolo-puzzle .polyomino-board {
  display: block;
  overflow: visible;
  pointer-events: none;
}

.polyabolo-board-controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: none;
}

.polyabolo-board-cell-visual {
  fill: var(--puzzle-cell-fill);
  stroke: var(--puzzle-cell-edge);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.polyabolo-board-cell-visual.is-occupied {
  fill: var(--piece-color);
  stroke: var(--piece-color);
}

.polyabolo-board-cell-visual.is-picked-up {
  fill: var(--puzzle-cell-fill);
  stroke: var(--puzzle-cell-edge);
}

.polyabolo-puzzle .polyabolo-board-cell {
  appearance: none;
  position: absolute;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  -webkit-tap-highlight-color: transparent;
}

.polyabolo-board-cell[data-sector='n'] {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.polyabolo-board-cell[data-sector='e'] {
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.polyabolo-board-cell[data-sector='s'] {
  clip-path: polygon(100% 100%, 0 100%, 50% 0);
}

.polyabolo-board-cell[data-sector='w'] {
  clip-path: polygon(0 100%, 0 0, 100% 50%);
}

.polyabolo-puzzle .polyabolo-board-cell:focus,
.polyabolo-puzzle .polyabolo-board-cell:hover,
.polyabolo-puzzle .polyabolo-board-cell:active {
  background: transparent;
  box-shadow: none;
  outline: none;
  transform: none;
}

.polyabolo-puzzle .polyabolo-board-cell:focus-visible {
  background: rgba(96, 165, 250, 0.3);
  filter: drop-shadow(0 0 2px var(--accent-light));
}

.polyabolo-board-cell-visual.is-preview-valid {
  fill: color-mix(in srgb, var(--preview-color) 62%, transparent);
  stroke: none;
}

.polyabolo-board-cell-visual.is-preview-invalid {
  fill: color-mix(in srgb, var(--preview-color) 48%, #7f1d1d);
  stroke: none;
}

.polyabolo-puzzle .polyomino-mini-shape {
  display: block;
  overflow: visible;
}

.polyabolo-mini-cell {
  fill: var(--piece-color);
  stroke: var(--piece-color);
  stroke-width: 0.01;
}

.polyabolo-unit-lines,
.polyabolo-piece-perimeter {
  fill: none;
  pointer-events: none;
}

.polyabolo-unit-lines line {
  stroke: var(--puzzle-mini-cell-edge, #0f172a);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.polyabolo-piece-perimeter line {
  stroke: var(--piece-boundary-color);
  stroke-width: 3px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}