.net-board {
  display: grid; gap: 3px; width: min(92vw, 400px); aspect-ratio: 1; margin: 0 auto;
  background: var(--surface-2); padding: 8px; border-radius: 16px;
  touch-action: manipulation;
}
.net-cell {
  position: relative; background: var(--surface); border-radius: 6px; cursor: pointer;
}
.net-cell .hub {
  position: absolute; top: 50%; left: 50%; width: 26%; height: 26%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #c9c2dd; transition: background .15s ease;
}
.net-cell .arm { position: absolute; background: #c9c2dd; display: none; transition: background .15s ease; }
.net-cell .arm.up    { top: 0; left: 50%; transform: translateX(-50%); width: 22%; height: 52%; border-radius: 3px; }
.net-cell .arm.right { right: 0; top: 50%; transform: translateY(-50%); height: 22%; width: 52%; border-radius: 3px; }
.net-cell .arm.down  { bottom: 0; left: 50%; transform: translateX(-50%); width: 22%; height: 52%; border-radius: 3px; }
.net-cell .arm.left  { left: 0; top: 50%; transform: translateY(-50%); height: 22%; width: 52%; border-radius: 3px; }
.net-cell.arm-up .arm.up { display: block; }
.net-cell.arm-right .arm.right { display: block; }
.net-cell.arm-down .arm.down { display: block; }
.net-cell.arm-left .arm.left { display: block; }
.net-cell.on .arm, .net-cell.on .hub { background: var(--mint); }
.net-cell.win .arm, .net-cell.win .hub { background: var(--mint); box-shadow: 0 0 6px var(--mint); }