@import url('../global.css');

:root {
  --title-color: var(--color-mill);
}

.mill-board {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--border-radius-lg);
}

/* Padded inner area shared by the line art and the point buttons. */
.mill-inner {
  position: absolute;
  inset: 9%;
}

.mill-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 0.05;
  stroke-linecap: round;
}

.mill-points {
  position: absolute;
  inset: 0;
}

.mill-point {
  position: absolute;
  width: 12%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

/* Empty points read as small sockets; hover previews a placement. */
.mill-point.is-empty::after {
  content: '';
  display: block;
  width: 34%;
  height: 34%;
  margin: auto;
  border-radius: 50%;
  background: var(--line-strong);
}

.mill-point.is-empty:enabled:hover::after {
  width: 70%;
  height: 70%;
  background: var(--surface-glass);
  outline: 2px solid var(--line-strong);
}

.mill-point.is-seat-0,
.mill-point.is-seat-1 {
  box-shadow: inset 0 0 0 0.4vw var(--surface-deep);
}

.mill-point.is-seat-0 {
  background: var(--color-mill);
}

.mill-point.is-seat-1 {
  background: var(--accent);
}

.mill-point.is-selected {
  outline: 3px solid var(--text-color);
  outline-offset: 2px;
}

.mill-point:disabled {
  cursor: default;
}